:root{--bg:#090b0d;--panel:#12161a;--line:#303740;--gold:#d8ad58;--gold2:#f0ce83;--text:#f5f2e9;--muted:#9aa2ac;--ok:#70cf8d;--warn:#ffb35c}*{box-sizing:border-box}html,body{margin:0;background:#050607;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif}button,input{font:inherit}.app{max-width:620px;margin:auto;min-height:100vh;padding:18px 14px 30px;background:linear-gradient(#0e1114,#080a0c)}header{display:flex;justify-content:space-between;align-items:center}header small{color:var(--gold);letter-spacing:.16em}h1{margin:4px 0 14px;font-size:23px}h1 b{font-size:12px;color:var(--gold2)}.card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:13px}.permission{display:flex;justify-content:space-between;align-items:center;gap:12px}.permission p{margin:4px 0 0;color:var(--muted);font-size:12px}.permission button,#saveBtn,.lock{background:var(--gold);border:1px solid var(--gold2);color:#18120a;font-weight:800;border-radius:12px;padding:11px 13px}.status{display:flex;justify-content:space-between;gap:8px;margin:12px 0}.status span{font-size:12px;color:var(--muted);background:#13171b;border:1px solid var(--line);padding:7px 9px;border-radius:999px}.status em{font-style:normal;color:#eee}.status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#747c85;margin-right:6px}.status i.active{background:var(--ok);box-shadow:0 0 10px #70cf8daa}.compass{position:relative;width:min(92vw,480px);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}.dial{position:absolute;inset:0;border-radius:50%;border:1px solid #444b53;background:radial-gradient(circle,#15191e 0 28%,transparent 29%),repeating-conic-gradient(from -7.5deg,#171b20 0 7.5deg,#101418 7.5deg 15deg);box-shadow:inset 0 0 45px #000b;transition:transform .08s linear}.dial:after{content:"";position:absolute;inset:8%;border:1px solid #3a4148;border-radius:50%}.mountain{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#d7d2c6;z-index:2}.mountain.active{background:var(--gold2);color:#17120a;border-radius:50%;box-shadow:0 0 15px #d8ad5866}.pointer{position:absolute;z-index:5;top:-2px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:25px solid var(--gold2)}.readout{z-index:4;width:44%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:#101419}.readout div{font-size:42px;font-weight:800;letter-spacing:-.05em}.readout strong{font-size:23px;color:var(--gold2)}.readout span{font-size:13px;color:var(--muted);margin-top:5px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:15px 0}.grid article{background:var(--panel);border:1px solid var(--line);border-radius:13px;text-align:center;padding:10px 7px}.grid span{display:block;color:var(--muted);font-size:11px}.grid b{display:block;color:var(--gold2);font-size:18px;margin-top:4px}.lock{width:100%;font-size:16px;padding:14px}.row{display:flex;gap:8px;margin-top:10px}.secondary{background:#242a30!important;color:white!important;border-color:#414850!important}.hidden{display:none!important}details{margin-top:10px;background:#0e1114;border:1px solid #282e35;border-radius:12px;padding:10px;color:var(--muted);font-size:12px}details input{width:100%}.cases{margin-top:20px}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title h2{font-size:16px}.text{border:0;background:transparent;color:var(--gold)}.case{display:flex;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px;margin-top:8px}.case strong{color:var(--gold2)}.case small{display:block;color:var(--muted);margin-top:3px}.empty{text-align:center;color:#727b85;border:1px dashed #303740;border-radius:12px;padding:18px}@media(max-width:430px){.grid{grid-template-columns:repeat(2,1fr)}}


/* v0.2.2: warning is a permanent layout slot; state only changes its content visibility. */
.warning-slot{min-height:54px;margin:10px auto;display:flex;align-items:center;justify-content:center}
.warning-message{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;background:#2b2114;border:1px solid #755228;color:#ffd599;border-radius:12px;padding:9px;text-align:center;font-size:13px;transition:opacity .12s ease,visibility .12s ease}
.warning-slot[data-state="clear"] .warning-message{visibility:hidden;opacity:0;pointer-events:none}
.warning-slot[data-state="warning"] .warning-message{visibility:visible;opacity:1}

/* v0.2.3: explicit sensor lifecycle controls */
.sensor-controls{display:flex;justify-content:flex-end;margin:-4px 0 8px}
.stop-compass{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:12px}
.stop-compass:active{background:#1b2025}


/* v0.2.4: deterministic layout + prominent compass stop control */
.warning-slot{height:64px;min-height:64px;max-height:64px;margin:10px auto;display:flex;align-items:center;justify-content:center;overflow:hidden}
.warning-message{height:48px;min-height:48px;max-height:48px;padding:0 12px;display:flex;align-items:center;justify-content:center}
.warning-slot[data-state="clear"] .warning-message{visibility:hidden;opacity:0}
.warning-slot[data-state="warning"] .warning-message{visibility:visible;opacity:1}
.stop-compass-main{width:100%;margin-top:9px;padding:13px 14px;border-radius:12px;border:1px solid #454c54;background:#171b20;color:#e6e3dc;font-weight:800;font-size:15px}
.stop-compass-main:not(:disabled){border-color:#6a4c42;color:#f0c4b7;background:#211714}
.stop-compass-main:disabled{opacity:.45;cursor:not-allowed}


/* v0.2.5: warning is an overlay inside a fixed anchor; its state never participates in layout. */
.warning-anchor{position:relative;height:64px;min-height:64px;max-height:64px;margin:10px 0;overflow:visible}
.warning-anchor .warning-slot{position:absolute;inset:0;height:64px;min-height:64px;max-height:64px;margin:0;display:flex;align-items:center;justify-content:center;overflow:visible;pointer-events:none}
.warning-anchor .warning-message{position:absolute;left:0;right:0;top:8px;height:48px;min-height:48px;max-height:48px;margin:0;padding:0 12px;display:flex;align-items:center;justify-content:center;transform:translateZ(0)}


/* v0.2.6: level / tilt quality indicator */
.status{flex-wrap:wrap}
.status span{white-space:nowrap}
#levelPill[data-level="good"]{border-color:#315c40;color:#9fd8ae}
#levelPill[data-level="good"] em{color:var(--ok)}
#levelPill[data-level="bad"]{border-color:#76512d;color:#ffd19a}
#levelPill[data-level="bad"] em{color:var(--warn)}
#levelPill[data-level="unknown"] em{color:var(--muted)}


/* v0.2.7: single-position compass toggle + persistent status slot */
.compass-toggle{
  min-width:112px;
}
#boundarySlot[data-state="clear"] .warning-message{
  opacity:1;
  visibility:visible;
  background:#132019;
  border-color:#315c40;
  color:#a7dfb5;
}
#boundarySlot[data-state="warning"] .warning-message{
  opacity:1;
  visibility:visible;
}