:root {
  --text: #dcdcdc; --minor: #dcdcdc88; --tip: #dcdcdccc; --line: #dcdcdc1a;
  --card: #00000088; --solid: #202020; --sel: #303030; --accent: #27be3d; --red: #ff5640; --yellow: #ffd600;
  --ra: #4aa8ff; --dec: #ff6b6b; --top: 44px; --bottom: 28px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; color: var(--text); font: 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card { background: var(--card); border-radius: 8px; backdrop-filter: blur(6px); }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; background: #202020; overflow: hidden; }
#viewport { position: absolute; inset: 0; transform-origin: 0 0; cursor: grab; touch-action: none; }
#sky { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

#top { position: absolute; top: 0; left: 0; right: 0; height: var(--top); background: #111; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; gap: 10px; }
.top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 6px; font-weight: 600; letter-spacing: .02em; }
.sep { width: 1px; height: 18px; background: var(--line); }
.mini { color: var(--tip); white-space: nowrap; font-variant-numeric: tabular-nums; }
.warn { color: var(--yellow); white-space: nowrap; }
.devices { display: flex; gap: 2px; margin-left: auto; }
.devices button { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; color: #fff; }
.devices button.off { color: var(--minor); }
.devices button:hover { background: #ffffff14; }
.devices sub { position: absolute; right: 2px; bottom: 3px; font-size: 10px; color: var(--text); }
.live-btn { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 15px; background: #ffffff16; font-weight: 600; white-space: nowrap; }
.live-btn i { width: 8px; height: 8px; border-radius: 50%; background: var(--minor); }
.live-btn.on { background: #c0263a; color: #fff; }
.live-btn.on i { background: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

#left { position: absolute; left: 8px; top: calc(var(--top) + 8px); width: 48px; display: flex; flex-direction: column; padding: 4px 0; max-height: calc(100% - var(--top) - var(--bottom) - 170px); overflow: auto; }
#left button { height: 42px; display: grid; place-items: center; color: var(--tip); }
#left button.on { color: var(--accent); }
#left button:hover { background: #ffffff10; }

#right { position: absolute; right: 8px; top: calc(var(--top) + 8px); width: 66px; display: flex; flex-direction: column; align-items: center; padding: 6px 0 14px; gap: 10px; background: #0e0e0ee8; border-radius: 10px; }
#right .mode { width: 100%; padding: 8px 0 4px; font-weight: 600; color: var(--minor); text-align: center; }
#right .mode i { display: block; width: 18px; height: 5px; margin: 3px auto 0; border-bottom: 2px solid var(--minor); border-radius: 0 0 50% 50%; }
#right .tool.exp { height: auto; font-size: 12px; gap: 2px; padding: 4px 0; }
#right .tool.exp b { border: 1.5px solid var(--text); border-radius: 3px; padding: 0 3px; font-size: 11px; line-height: 15px; }
#right .tool { width: 44px; height: 42px; display: grid; place-items: center; color: var(--tip); border-radius: 6px; font-weight: 600; }
#right .tool:hover { background: #ffffff10; }
#right .tool[disabled] { opacity: .35; cursor: default; }
.shutter { position: relative; width: 54px; height: 54px; border-radius: 50%; background: #e8e8e8; display: grid; place-items: center; }
.shutter::after { content: ""; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #111; transition: all .15s; }
.shutter.busy::after { width: 18px; height: 18px; border-radius: 3px; border: 0; background: #111; }
.shutter svg.ring { position: absolute; inset: 1px; width: 52px; height: 52px; transform: rotate(-90deg); stroke: var(--accent); stroke-width: 3; }
.expval { color: var(--text); font-variant-numeric: tabular-nums; }

.picker { position: absolute; right: 78px; top: calc(var(--top) + 8px); width: 70px; max-height: calc(100% - 110px); overflow: auto; padding: 4px; background: #000000cc; }
.picker button { display: block; width: 100%; padding: 7px 0; text-align: center; border-radius: 5px; }
.picker button:hover { background: #ffffff14; }
.picker button.sel { color: var(--accent); font-weight: 600; }
#mode-menu { position: absolute; right: 78px; top: calc(var(--top) + 8px); width: 256px; padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #000000cc; }
#mode-menu button { padding: 12px 0; border-radius: 6px; background: #ffffff0e; }
#mode-menu button.sel { background: var(--accent); color: #06130b; font-weight: 600; }

#guide-widget { position: absolute; left: 64px; top: calc(var(--top) + 8px); width: 270px; padding: 4px 6px; }
#guide-widget header { display: flex; justify-content: space-between; align-items: center; height: 22px; }
.guide-cam-thumb { width: 100%; max-height: 120px; overflow: hidden; border-radius: 4px; margin: 4px 0; background: #000; border: 1px solid var(--line); }
.guide-cam-thumb img { width: 100%; height: auto; max-height: 120px; display: block; object-fit: contain; }
#guide-widget canvas { display: block; width: 100%; height: 60px; }
#guide-widget footer { display: flex; justify-content: space-between; font-size: 12px; color: var(--tip); font-variant-numeric: tabular-nums; }
#guide-widget .ra b, .legend .ra b { color: var(--ra); }
#guide-widget .dec b, .legend .dec b { color: var(--dec); }
.chip { padding: 2px 9px; border-radius: 10px; background: #ffffff18; font-size: 12px; }
.chip:hover { background: #ffffff2a; }

#run-card { position: absolute; right: 80px; top: calc(var(--top) + 8px); width: 230px; padding: 8px 10px; }
#run-card header { display: flex; justify-content: space-between; gap: 8px; }
#run-card p { margin: 6px 0 0; color: var(--tip); }
.bar { display: block; height: 6px; border-radius: 3px; background: #ffffff1c; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.bar.small { width: 70px; margin: 0; }

#mcp { position: absolute; right: 80px; bottom: calc(var(--bottom) + 84px); width: 180px; padding: 8px; }
#mcp header { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
#mcp header b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coords { display: flex; justify-content: space-between; margin: 6px 0; font-size: 12px; color: var(--tip); font-variant-numeric: tabular-nums; }
.row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0; }
#m-rate-r { width: 100%; accent-color: var(--accent); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--minor); }
.dot.on { background: var(--accent); }
.pad { display: grid; grid-template: repeat(3, 40px) / repeat(3, 1fr); gap: 3px; margin-top: 4px; user-select: none; touch-action: none; }
.pad button { background: #ffffff12; border-radius: 6px; }
.pad button:active { background: var(--accent); color: #06130b; }
.pad .n { grid-area: 1 / 2; } .pad .w { grid-area: 2 / 1; } .pad .stop { grid-area: 2 / 2; font-size: 11px; color: var(--red); } .pad .e { grid-area: 2 / 3; } .pad .s { grid-area: 3 / 2; }
.primary { background: var(--accent); color: #06130b; font-weight: 600; border-radius: 6px; padding: 8px 14px; }
.primary:hover { filter: brightness(1.1); }
.primary.small { padding: 3px 10px; }
.primary.wide { width: 100%; padding: 8px; margin-top: 6px; }
.danger { background: #ff564022; color: var(--red); border-radius: 6px; padding: 8px 14px; font-weight: 600; }
.ghost { background: #ffffff14; border-radius: 6px; padding: 8px 14px; }

#fcp { position: absolute; left: 64px; bottom: calc(var(--bottom) + 84px); width: 170px; padding: 8px; }
.fbtns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.fbtns button { padding: 9px 0; background: #ffffff12; border-radius: 6px; }
.fbtns button:active { background: var(--accent); color: #06130b; }
#af-card { position: absolute; left: 244px; bottom: calc(var(--bottom) + 84px); width: 300px; padding: 8px 10px; }
#af-card header { display: flex; justify-content: space-between; }
#af-card canvas { width: 100%; height: 120px; display: block; }
#live-card { position: absolute; left: 50%; bottom: calc(var(--bottom) + 84px); transform: translateX(-50%); width: min(360px, 60vw); padding: 10px 12px; }
body.pa #left, body.pa #hist, body.pa #btn-sky, body.pa #guide-widget, body.pa #viewport, body.pa #fcp, body.pa #mcp { display: none; }
#pa-card { position: absolute; left: 0; right: 84px; top: var(--top); bottom: var(--bottom); }
#pa-canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(62vh, 44vw); height: min(62vh, 44vw); }
.pa-info { position: absolute; left: 60px; top: 16px; font-size: 15px; color: var(--tip); }
.pa-info p { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.pa-time { color: var(--accent); font-size: 18px; font-variant-numeric: tabular-nums; }
.key { width: 16px; height: 16px; border-radius: 50%; }
.key.ncp { background: var(--accent); }
.key.axis { border: 2px solid #4c84ff; }
.pa-steps { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; width: 82px; text-align: center; color: var(--tip); }
.pa-steps li { margin-bottom: 26px; }
.pa-steps i { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 4px; border: 1.5px solid var(--tip); border-radius: 50%; font-style: normal; }
.pa-steps .now i { border-color: var(--accent); color: var(--accent); }
.pa-steps .done i { border-color: var(--accent); color: var(--accent); font-size: 0; }
.pa-steps .done i::after { content: "✓"; font-size: 16px; }
.pa-result { position: absolute; right: 16px; top: 12px; text-align: right; }
.pa-result p { margin: 0 0 6px; }
#pa-smile { width: 46px; height: 46px; stroke: var(--accent); stroke-width: 2; margin-bottom: 8px; }
.pa-val { font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; }
.pa-val.good { color: var(--accent); }
.pa-val .arrow { margin-right: 8px; font-weight: 700; }
.pa-label { font-size: 17px; margin-top: 12px !important; }
.pa-msg { color: var(--accent); margin-top: 14px !important; }
.pa-actions { position: absolute; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pa-actions label { display: flex; align-items: center; gap: 6px; }
.pa-actions input { width: 18px; height: 18px; accent-color: var(--accent); }
.outline { border: 1.5px solid var(--text); border-radius: 5px; padding: 7px 14px; font-size: 15px; }
.outline.good { border-color: var(--accent); color: var(--accent); }
.pa-knobs { display: flex; align-items: center; gap: 4px; width: 100%; justify-content: flex-end; color: var(--minor); font-size: 12px; }
.pa-knobs button { background: #ffffff14; border-radius: 5px; padding: 5px 8px; color: var(--text); }
.guide-pic { width: 100%; border-radius: 6px; display: block; margin-bottom: 8px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; margin: 6px 0; }
.stats span { display: block; color: var(--minor); font-size: 12px; }
.stats b { font-size: 17px; font-variant-numeric: tabular-nums; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

#btn-sky { position: absolute; left: 8px; bottom: calc(var(--bottom) + 8px); width: 48px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--accent); }
#hist { position: absolute; left: 64px; right: 8px; bottom: calc(var(--bottom) + 8px); height: 72px; padding: 0 56px 0 0; }
#hist canvas { width: 100%; height: 100%; display: block; cursor: ew-resize; touch-action: none; }
#h-auto { position: absolute; right: 8px; top: 8px; }

#bottom { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bottom); background: #000000b0; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: var(--tip); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; gap: 12px; }
#bottom > div { display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; }

#panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #151515; display: flex; flex-direction: column; box-shadow: -8px 0 30px #0009; z-index: 5; }
#panel > header { height: 48px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--line); }
#panel h2 { margin: 0; font-size: 15px; }
#p-close { width: 32px; height: 32px; font-size: 16px; }
#p-body { flex: 1; overflow: auto; padding: 12px 14px 24px; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-bottom: 1px solid var(--line); }
.field label { color: var(--tip); }
.field input[type=number], .field input[type=text], .field select, .stacked input, .stacked textarea { background: #171717; color: var(--text); border: 1px solid #dcdcdc44; border-radius: 5px; padding: 6px 8px; font: inherit; }
.field input[type=number] { width: 96px; text-align: right; }
.field input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.section { margin: 18px 0 4px; color: var(--minor); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.stacked { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.stacked label { color: var(--tip); }
.stacked textarea { min-height: 64px; resize: vertical; }
.hint { color: var(--minor); margin: 8px 0; }
.err { color: var(--red); min-height: 1em; }
.copy { display: flex; gap: 6px; }
.copy input { flex: 1; min-width: 0; }

.seq { display: grid; grid-template-columns: 1fr 70px 56px 52px 26px; gap: 5px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.seq select, .seq input { width: 100%; background: #171717; color: var(--text); border: 1px solid #dcdcdc44; border-radius: 5px; padding: 5px; font: inherit; min-width: 0; }
.seq .x { color: var(--red); }
.seq-head { display: grid; grid-template-columns: 1fr 70px 56px 52px 26px; gap: 5px; color: var(--minor); font-size: 11px; }

.search { width: 100%; background: #171717; color: var(--text); border: 1px solid #dcdcdc44; border-radius: 6px; padding: 8px 10px; font: inherit; margin-bottom: 8px; }
.objs { list-style: none; margin: 0; padding: 0; }
.objs li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--line); }
.objs small { display: block; color: var(--minor); }
.objs .low { opacity: .45; }
#atlas { width: 100%; aspect-ratio: 1; display: block; margin-bottom: 8px; cursor: crosshair; }

.thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.thumbs figure { margin: 0; }
.thumbs img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 5px; display: block; background: #000; }
.thumbs figcaption { color: var(--minor); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logs { list-style: none; margin: 0; padding: 0; }
.logs li { padding: 5px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; }
.logs time { color: var(--minor); font-variant-numeric: tabular-nums; flex: none; }
.logs .good { color: var(--accent); } .logs .warn { color: var(--yellow); } .logs .bad { color: var(--red); }

#toast { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); background: #000d; border: 1px solid var(--line); padding: 8px 14px; border-radius: 6px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 80vw; z-index: 9; }
#toast.show { opacity: 1; }

body.plain { display: grid; place-items: center; overflow: auto; }
.signin { width: min(320px, 90vw); display: flex; flex-direction: column; gap: 10px; }
.signin h1 { margin: 0; font-size: 22px; }
.signin p { margin: 0; color: var(--tip); }
.signin input { background: #171717; color: var(--text); border: 1px solid #dcdcdc44; border-radius: 6px; padding: 10px; font: inherit; }
.signin a { color: var(--accent); text-align: center; }

@media (max-width: 760px) {
  #t-clock, #t-power, .sep, .brand span { display: none; }
  #guide-widget { width: 200px; }
  .devices button { width: 30px; }
  .live-btn { padding: 0 9px; }
  #run-card { left: 64px; right: auto; top: calc(var(--top) + 118px); width: 200px; }
  #pa-card { right: 76px; }
  #pa-canvas { width: 46vw; height: 46vw; }
  .pa-steps { top: auto; bottom: 8px; transform: none; display: flex; width: auto; gap: 6px; }
  .pa-steps li { margin: 0; }
  #b-volt, #b-merid { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }