/* ============================================================
   Basic (phone-only) field mode -- an ASIAIR-style curated shell.
   Everything here is scoped under .basic-shell / .basic-return and
   only renders when the app is in basic mode (phones only), so the
   desktop and tablet layouts are untouched.
   ============================================================ */

.basic-shell{
    position:fixed; inset:0; z-index:800; background:#04060c;
    color:var(--text, #e8edf7);
    /* No font-family here: inherit the user's chosen UI font from body. */
    -webkit-user-select:none; user-select:none;
    --bs-panel:rgba(14,20,34,.82); --bs-border:#243049; --bs-muted:#8a97b0;
    --bs-accent:#4c8dff; --bs-accent2:#6cc4ff; --bs-ok:#37c871;
    --bs-warn:#f0b429; --bs-danger:#ff5d5d; --bs-chip:#1a2740;
}
/* Self-contained sizing so control heights are exact regardless of any global
   reset (the standardized 32px pills / 44px squares stay pixel-consistent). */
.basic-shell *, .basic-shell *::before, .basic-shell *::after{box-sizing:border-box}
.basic-shell .bs-num{font-variant-numeric:tabular-nums}

/* live image: the relocated .preview-area fills this slot */
.basic-shell #basicImageSlot{position:absolute; inset:0; overflow:hidden;
    background:radial-gradient(120% 90% at 60% 40%, #0b1424 0%, #05080f 70%); z-index:1}
.basic-shell #basicImageSlot .preview-area,
.basic-shell #basicImageSlot .af-preview-area{position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; margin:0 !important}
/* the zoomed-star inset defaults bottom-right (clashes with the rail/bottom bar);
   move it bottom-left, clear of the left rail. */
.basic-shell #basicImageSlot .af-star-zoom{left:60px !important; bottom:56px !important;
    right:auto !important; top:auto !important; z-index:21}
/* Strip the desktop preview chrome that rides along with the relocated area;
   keep the canvases and the centered empty-state (.preview-overlay) message. */
.basic-shell #basicImageSlot .pz-toolbar,
.basic-shell #basicImageSlot .histo-panel,
.basic-shell #basicImageSlot .preview-overlay-controls,
.basic-shell #basicImageSlot .preview-overlay-info,
.basic-shell #basicImageSlot .quick-controls{display:none !important}

/* top bar */
.basic-shell .bs-topbar{position:absolute; top:0; left:0; right:0; height:44px; display:flex;
    align-items:center; justify-content:center; gap:8px; z-index:30; pointer-events:none}
.basic-shell .bs-modepill{pointer-events:auto; display:flex; align-items:center; gap:8px; height:32px;
    padding:0 14px; background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:16px;
    backdrop-filter:blur(8px); font-weight:600; font-size:14px; color:var(--text)}
.basic-shell .bs-modepill .bs-caret{color:var(--bs-muted); font-size:11px}
/* guide (left) + setup gear (right) flank the centered mode pill */
.basic-shell .bs-topicn{pointer-events:auto; width:32px; height:32px; border-radius:16px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--text); font-size:15px; backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center; padding:0; line-height:1}
.basic-shell .bs-topicn.on{border-color:var(--bs-accent2); color:var(--bs-accent2)}
.basic-shell .bs-temp{pointer-events:auto; position:absolute; left:8px; top:6px; height:32px; display:flex;
    align-items:center; gap:6px; padding:0 10px; background:var(--bs-panel); border:1px solid var(--bs-border);
    border-radius:16px; font-size:12px; color:var(--bs-accent2); backdrop-filter:blur(8px); z-index:31}
.basic-shell .bs-status{pointer-events:auto; position:absolute; right:8px; top:6px; height:32px; display:flex;
    align-items:center; gap:6px; padding:0 10px; background:var(--bs-panel); border:1px solid var(--bs-border);
    border-radius:16px; font-size:12px; color:var(--bs-muted); backdrop-filter:blur(8px); z-index:31}
.basic-shell .bs-status b{color:var(--text); font-weight:600}

.basic-shell .bs-modemenu{position:absolute; top:44px; left:50%; transform:translateX(-50%); z-index:40;
    background:#0e1422; border:1px solid var(--bs-border); border-radius:12px; overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.55); min-width:160px}
.basic-shell .bs-modemenu button{display:flex; width:100%; align-items:center; gap:10px; background:none;
    border:0; color:var(--text); padding:12px 14px; font-size:14px; text-align:left}
.basic-shell .bs-modemenu button .bs-em{width:20px; text-align:center}
.basic-shell .bs-modemenu button.on{background:rgba(76,141,255,.16); color:var(--bs-accent2)}
.basic-shell .bs-modemenu button:active{background:rgba(255,255,255,.06)}

/* rails: the container spans full height but only holds buttons at the top, so
   let its empty area pass clicks through to the mount pad flush beneath it. */
.basic-shell .bs-rail{position:absolute; top:52px; bottom:52px; display:flex; flex-direction:column;
    gap:10px; z-index:25; pointer-events:none}
.basic-shell .bs-rail > *{pointer-events:auto}
.basic-shell .bs-rail.left{left:8px}
.basic-shell .bs-rail.right{right:8px; align-items:center}
.basic-shell .bs-icn{width:44px; height:44px; border-radius:12px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--text); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px; backdrop-filter:blur(8px); font-size:10px; line-height:1}
.basic-shell .bs-icn .bs-big{font-size:18px}
.basic-shell .bs-icn.on{border-color:var(--bs-ok); color:var(--bs-ok)}
.basic-shell .bs-icn:active{transform:scale(.94)}

/* exposure stack + shutter */
.basic-shell .bs-expcol{display:flex; flex-direction:column; gap:8px; align-items:center}
.basic-shell .bs-exp{width:56px; border-radius:12px; background:var(--bs-panel); border:1px solid var(--bs-border);
    padding:6px 4px; text-align:center; backdrop-filter:blur(8px); color:var(--text)}
.basic-shell .bs-exp .bs-k{font-size:9px; color:var(--bs-muted); letter-spacing:.06em}
.basic-shell .bs-exp .bs-v{font-size:14px; font-weight:700; margin-top:1px}
.basic-shell .bs-shutter{width:66px; height:66px; border-radius:50%; border:4px solid #fff;
    background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; margin-top:4px}
.basic-shell .bs-shutter .bs-core{width:44px; height:44px; border-radius:50%; background:#fff; transition:.15s}
.basic-shell .bs-shutter.looping .bs-core,.basic-shell .bs-shutter.busy .bs-core{border-radius:8px;
    width:28px; height:28px; background:var(--bs-danger)}
.basic-shell .bs-shutter:active{transform:scale(.95)}

/* Controls inherit the user's UI font (buttons/inputs don't inherit by default). */
.basic-shell button, .basic-shell input, .basic-shell select{font-family:inherit}

/* mount pad -- bottom-left, just right of the icon rail (clear of the shutter
   on the right). The d-pad expands to the right when opened. */
.basic-shell .bs-mount{position:absolute; left:8px; right:auto; bottom:56px; z-index:22; display:flex; align-items:flex-end; gap:6px}
.basic-shell .bs-mount .bs-grid{display:grid; grid-template-columns:repeat(3,42px); grid-template-rows:repeat(3,42px);
    gap:5px; background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:14px; padding:8px; backdrop-filter:blur(8px)}
.basic-shell .bs-mount .bs-grid button{border:0; border-radius:9px; background:var(--bs-chip); color:var(--text); font-size:16px}
.basic-shell .bs-mount .bs-grid button.mid{background:transparent; font-size:10px; color:var(--bs-muted)}
.basic-shell .bs-mount .bs-grid button:active{background:var(--bs-accent); color:#fff}
.basic-shell .bs-mount .bs-side{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.basic-shell .bs-mount .bs-pill{background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:10px;
    padding:6px 8px; font-size:11px; text-align:center; min-width:58px; backdrop-filter:blur(8px); color:var(--text)}
.basic-shell .bs-mount .bs-pill.on{border-color:var(--bs-ok); color:var(--bs-ok)}
.basic-shell .bs-mount.mp-collapsed .bs-grid{display:none}

/* bottom bar */
.basic-shell .bs-bottom{position:absolute; left:0; right:0; bottom:0; height:48px; display:flex; align-items:center;
    gap:8px; padding:0 8px; z-index:28; pointer-events:none}
.basic-shell .bs-bottom > *{pointer-events:auto}
.basic-shell .bs-chip{height:32px; padding:0 10px; border-radius:16px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--bs-muted); font-size:12px; display:flex; align-items:center; gap:6px; backdrop-filter:blur(8px)}
.basic-shell .bs-dot{width:8px; height:8px; border-radius:50%; background:var(--bs-ok); box-shadow:0 0 8px var(--bs-ok)}
.basic-shell .bs-dot.off{background:#4a5673; box-shadow:none}
.basic-shell .bs-auto{height:32px; padding:0 12px; border-radius:16px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--bs-muted); font-size:12px; font-weight:600; backdrop-filter:blur(8px)}
.basic-shell .bs-auto.on{border-color:var(--bs-ok); color:var(--bs-ok)}
.basic-shell .bs-full{height:32px; padding:0 12px; border-radius:16px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--bs-muted); font-size:12px; backdrop-filter:blur(8px)}
/* bottom-right mount actions (Home / Park / Sync) */
.basic-shell .bs-mountacts{margin-left:auto; display:flex; gap:8px}
.basic-shell .bs-mbtn{height:32px; padding:0 12px; border-radius:16px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--text); font-size:12px; font-weight:600; font-family:inherit;
    backdrop-filter:blur(8px); white-space:nowrap}

/* EXP/GAIN inline stepper: tap the box to expand it (grows left over the image
   so it doesn't reflow the rail); tap the label to collapse. */
.basic-shell .bs-expwrap{position:relative; width:56px}
.basic-shell .bs-exp-open{position:absolute; top:0; right:0; width:210px; z-index:26; display:flex;
    flex-direction:column; gap:6px; background:var(--bs-panel); border:1px solid var(--bs-accent);
    border-radius:12px; padding:6px; backdrop-filter:blur(8px); box-shadow:0 8px 28px rgba(0,0,0,.5)}
.basic-shell .bs-k-btn{background:none; border:0; color:var(--bs-accent2); font-size:11px;
    letter-spacing:.06em; font-weight:700; padding:3px 2px; align-self:center}
.basic-shell .bs-stepper{display:flex; align-items:center; gap:6px}
.basic-shell .bs-stepbtn{width:42px; height:42px; border-radius:10px; background:var(--bs-chip); border:0;
    color:var(--text); font-size:22px; font-weight:700; flex:none}
.basic-shell .bs-stepbtn:active{background:var(--bs-accent); color:#fff}
.basic-shell .bs-stepinput{flex:1; min-width:0; height:42px; text-align:center; font-size:18px; font-weight:700;
    background:#070b14; border:1px solid var(--bs-border); border-radius:10px; color:var(--text)}

/* ---- Focus screen ---- */
.basic-shell .bs-status.run b{color:var(--bs-warn)}
.basic-shell .bs-af{width:92px; height:52px; margin-top:4px; border:0; border-radius:14px;
    background:var(--bs-accent); color:#fff; font-weight:800; font-size:15px; box-shadow:0 6px 18px rgba(76,141,255,.35)}
.basic-shell .bs-af.running{background:var(--bs-danger); box-shadow:0 6px 18px rgba(255,93,93,.35)}
.basic-shell .bs-af:active{transform:scale(.96)}
.basic-shell .bs-afprog{position:absolute; right:8px; top:38px; width:120px; height:6px; border-radius:3px;
    background:#1a2740; overflow:hidden; z-index:31}
.basic-shell .bs-afprog i{display:block; height:100%; background:var(--bs-accent2); transition:width .2s}
/* focus nudge: bottom-right, clear of the mount pad + right rail; compact */
.basic-shell .bs-nudge{position:absolute; right:104px; bottom:56px; z-index:23;
    display:flex; align-items:center; gap:5px; background:var(--bs-panel); border:1px solid var(--bs-border);
    border-radius:14px; padding:6px 8px; backdrop-filter:blur(8px)}
.basic-shell .bs-nudge button{min-width:36px; height:36px; border:0; border-radius:9px; background:var(--bs-chip);
    color:var(--text); font-size:15px; font-weight:700}
.basic-shell .bs-nudge button:active{background:var(--bs-accent); color:#fff}
.basic-shell .bs-nudge button:disabled{opacity:.4}
.basic-shell .bs-nudgehide{min-width:26px !important; height:26px !important; background:transparent !important;
    color:var(--bs-muted) !important; font-size:15px !important; align-self:flex-start}
.basic-shell .bs-focusreopen{position:absolute; right:104px; bottom:56px; z-index:23; height:32px; padding:0 14px;
    border-radius:16px; background:var(--bs-panel); border:1px solid var(--bs-border); color:var(--text);
    font-size:12px; font-weight:600; backdrop-filter:blur(8px)}
.basic-shell .bs-pos{min-width:58px; text-align:center}
.basic-shell .bs-pos .bs-pk{font-size:9px; color:var(--bs-muted)}
.basic-shell .bs-pos .bs-pv{font-size:14px; font-weight:700}
.basic-shell #basicCurveSlot{position:absolute; left:60px; top:52px; width:200px; height:92px; z-index:22;
    background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:12px; padding:6px; backdrop-filter:blur(8px)}
.basic-shell #basicCurveSlot .af-chart{width:100%; height:100%; margin:0}
.basic-shell #basicCurveSlot .chart-container{position:relative; width:100%; height:100%}
.basic-shell #basicCurveSlot .af-chart-legend{display:none}
.basic-shell .bs-chip b{color:var(--text); font-weight:700}

/* ---- Autorun screen ---- */
.basic-shell .bs-seqp{position:absolute; left:60px; top:52px; bottom:104px; width:340px; max-width:52vw; z-index:22;
    display:flex; flex-direction:column; background:var(--bs-panel); border:1px solid var(--bs-border);
    border-radius:14px; backdrop-filter:blur(8px); overflow:hidden}
.basic-shell .bs-seqh{display:flex; align-items:center; justify-content:space-between; padding:9px 12px;
    border-bottom:1px solid var(--bs-border); font-size:12px; color:var(--bs-muted)}
.basic-shell .bs-seqh b{color:var(--text)}
.basic-shell .bs-seqadd{height:32px; padding:0 12px; border-radius:16px; background:var(--bs-accent); border:0; color:#fff; font-weight:700; font-size:12px}
.basic-shell .bs-seql{flex:1; overflow-y:auto; padding:6px}
.basic-shell .bs-seqrow{display:flex; align-items:center; gap:8px; padding:8px; border-radius:10px; margin-bottom:6px;
    background:var(--bs-chip); position:relative; overflow:hidden}
.basic-shell .bs-seqrow.run{border:1px solid var(--bs-accent)}
.basic-shell .bs-seqen{width:22px; height:22px; border-radius:6px; border:1px solid var(--bs-border); background:#0a1120;
    flex:none; color:var(--bs-ok); font-size:12px; font-weight:700}
.basic-shell .bs-seqen.off{color:transparent}
.basic-shell .bs-seqmeta{flex:1; min-width:0}
.basic-shell .bs-seqnm{display:block; width:100%; text-align:left; background:none; border:0; padding:0;
    color:var(--text); font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.basic-shell .bs-seqnminput{width:100%; background:#070b14; border:1px solid var(--bs-accent); border-radius:6px;
    color:var(--text); font-size:13px; font-weight:700; padding:2px 6px}
.basic-shell .bs-seqsub{font-size:11px; color:var(--bs-muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap}
.basic-shell .bs-typ{font-size:10px; padding:2px 6px; border-radius:8px; background:#0a1120; color:var(--bs-accent2); border:1px solid transparent}
.basic-shell .bs-typ:active{border-color:var(--bs-accent2)}
.basic-shell .bs-seqexp{background:none; border:0; padding:0; color:var(--bs-accent2); font:inherit;
    text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px}
.basic-shell .bs-seqexpinput, .basic-shell .bs-seqgaininput{width:66px; background:#070b14; border:1px solid var(--bs-accent);
    border-radius:6px; color:var(--text); font-size:11px; font-weight:700; padding:1px 5px}
.basic-shell .bs-seqgaininput{width:52px}
.basic-shell .bs-seqauto{font-size:10px; padding:2px 6px; border-radius:8px; background:#0a1120; color:var(--bs-muted); border:1px solid transparent}
.basic-shell .bs-seqauto.on{color:var(--bs-ok); border-color:var(--bs-ok)}
.basic-shell .bs-seqhide{background:none; border:0; color:var(--bs-muted); font-size:15px; padding:0 6px 0 0; margin-right:2px}
.basic-shell .bs-seqreopen{position:absolute; left:60px; top:52px; z-index:22; height:32px; padding:0 14px;
    border-radius:17px; background:var(--bs-panel); border:1px solid var(--bs-border); color:var(--text);
    font-size:13px; font-weight:600; backdrop-filter:blur(8px)}
.basic-shell .bs-seqcnt{display:flex; align-items:center; gap:4px; flex:none}
.basic-shell .bs-seqcnt button{width:30px; height:30px; border:0; border-radius:8px; background:#0a1120; color:var(--text); font-size:16px; font-weight:700}
.basic-shell .bs-seqcnt button:disabled{opacity:.4}
.basic-shell .bs-seqcnt span{min-width:32px; text-align:center; font-size:14px; font-weight:700}
.basic-shell .bs-seqrm{width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:var(--bs-muted); font-size:16px; flex:none}
.basic-shell .bs-seqrm:disabled{opacity:.3}
.basic-shell .bs-seqempty{padding:20px 12px; text-align:center; color:var(--bs-muted); font-size:12px}

.basic-shell .bs-autobar{position:absolute; left:0; right:0; bottom:0; z-index:28; padding:8px; display:flex;
    flex-direction:column; gap:8px; background:linear-gradient(0deg, rgba(4,6,12,.92), rgba(4,6,12,0))}
.basic-shell .bs-pbar{height:8px; border-radius:4px; background:#17203a; overflow:hidden}
.basic-shell .bs-pbar i{display:block; height:100%; background:linear-gradient(90deg, var(--bs-accent), var(--bs-accent2)); transition:width .3s}
.basic-shell .bs-prow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.basic-shell .bs-pinfo{font-size:13px; color:var(--bs-muted)}
.basic-shell .bs-pinfo b{color:var(--text); font-weight:700}
.basic-shell .bs-spacer{flex:1}
/* transport buttons match the bottom-bar action pill (bs-conn / bs-full): 32px */
.basic-shell .bs-tbtn{height:32px; padding:0 14px; border:0; border-radius:16px; font-weight:700; font-size:13px}
.basic-shell .bs-tstart{background:var(--bs-ok); color:#05140b}
.basic-shell .bs-tstart:disabled{opacity:.4}
.basic-shell .bs-tpause{background:var(--bs-warn); color:#20160a}
.basic-shell .bs-tstop{background:var(--bs-danger); color:#fff}

/* ---- Portrait / narrow phones: keep the bottom bar from overflowing ---- */
@media (max-width: 560px){
    .basic-shell .bs-bottom{gap:6px; padding:0 6px}
    /* collapse the connection chips to their status dot so the action buttons
       (Full Mode) stay fully on screen */
    .basic-shell .bs-bottom .bs-chip:not(.bs-num){font-size:0; padding:0 9px; gap:0}
    .basic-shell .bs-bottom .bs-chip.bs-num{font-size:11px; padding:0 8px}
    .basic-shell .bs-auto{padding:0 9px; font-size:11px}
    .basic-shell .bs-full{padding:0 10px; font-size:12px}
    .basic-shell .bs-seqp{bottom:120px}
}

/* ---- Guide screen ---- */
.basic-shell #basicImageSlot .phd2-cam{position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; margin:0 !important}
.basic-shell #basicImageSlot .phd2-zoom-ctl, .basic-shell #basicImageSlot .guide-bc{display:none !important}
.basic-shell #basicGuideGraphSlot{position:absolute; left:60px; right:80px; bottom:48px; height:110px; z-index:22;
    background:linear-gradient(0deg, rgba(4,6,12,.94), rgba(4,6,12,.35)); border-radius:12px; padding:4px 8px}
.basic-shell #basicGuideGraphSlot .phd2-graph{position:relative !important; width:100% !important; height:100% !important; margin:0 !important}
.basic-shell #basicGuideGraphSlot .phd2-graph-canvas{width:100% !important; height:100% !important}
.basic-shell #basicGuideGraphSlot .guide-clearhist{display:none !important}
.basic-shell .bs-gcol{display:flex; flex-direction:column; gap:8px; align-items:center}
.basic-shell .bs-gbtn{width:64px; border-radius:12px; background:var(--bs-panel); border:1px solid var(--bs-border);
    color:var(--text); padding:8px 4px; font-size:11px; font-weight:600; backdrop-filter:blur(8px); line-height:1.2}
.basic-shell .bs-gbtn .bs-big{font-size:16px; display:block; margin-bottom:3px}
.basic-shell .bs-gbtn:disabled{opacity:.4}
.basic-shell .bs-gmain{width:64px; height:56px; border:0; border-radius:14px; background:var(--bs-ok); color:#05140b; font-weight:800; font-size:14px}
.basic-shell .bs-gmain.stop{background:var(--bs-danger); color:#fff}

/* equipment-name chips: truncate long device names */
.basic-shell .bs-name{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle}

/* ---- Live stacking screen ---- */
.basic-shell .bs-lreset{margin-top:2px; height:32px; padding:0 12px; border-radius:16px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--bs-muted); font-size:12px; font-weight:600; backdrop-filter:blur(8px)}
.basic-shell .bs-lhud{position:absolute; left:60px; top:52px; width:200px; z-index:22; background:var(--bs-panel);
    border:1px solid var(--bs-border); border-radius:14px; padding:10px 12px; backdrop-filter:blur(8px)}
.basic-shell .bs-lsnr{display:flex; align-items:baseline; gap:8px}
.basic-shell .bs-lsnr .v{font-size:28px; font-weight:800; color:var(--bs-accent2)}
.basic-shell .bs-lsnr .l{font-size:12px; color:var(--bs-muted)}
.basic-shell .bs-lrow{display:flex; gap:14px; margin-top:5px; font-size:12px; color:var(--bs-muted)}
.basic-shell .bs-lrow b{color:var(--text); font-weight:700}
.basic-shell .bs-leta{margin-top:5px; font-size:12px; color:var(--bs-accent2)}
.basic-shell .bs-lstate{display:inline-block; margin-top:7px; font-size:11px; font-weight:700; color:var(--bs-ok)}
.basic-shell .bs-lstate.off{color:var(--bs-muted)}

.basic-shell .bs-lreset.on{border-color:var(--bs-ok); color:var(--bs-ok)}

/* mount speed slider (in the mount pad side column) */
.basic-shell .bs-spd{background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:10px; padding:5px 7px;
    min-width:112px; backdrop-filter:blur(8px)}
.basic-shell .bs-spdh{display:flex; justify-content:space-between; font-size:10px; color:var(--bs-muted)}
.basic-shell .bs-spdh b{color:var(--bs-accent2)}
.basic-shell .bs-spd input{width:100%; margin:3px 0 0; accent-color:var(--bs-accent)}
.basic-shell .bs-nudgelbl{font-size:10px; color:var(--bs-muted); align-self:center; margin-right:2px}

/* ---- Video screen ---- */
.basic-shell .bs-recshutter{border-color:var(--bs-danger); background:rgba(255,93,93,.15)}
.basic-shell .bs-recshutter .bs-core{background:var(--bs-danger)}
.basic-shell .bs-vsh{display:flex; justify-content:space-between; font-size:11px; color:var(--bs-muted)}
.basic-shell .bs-vsh b{color:var(--bs-ok)}
.basic-shell .bs-vshbar{height:8px; border-radius:4px; background:#17203a; overflow:hidden; margin-top:4px}
.basic-shell .bs-vshbar i{display:block; height:100%; background:linear-gradient(90deg,var(--bs-warn),var(--bs-ok))}
.basic-shell .bs-lstate.rec{color:var(--bs-danger)}

/* ---- Sky screen ---- */
/* the relocated stellarium iframe fills the image slot */
#basicImageSlot #skyFrame{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.basic-shell .bs-skysearch{position:absolute; left:8px; top:52px; z-index:26; display:flex; gap:6px}
.basic-shell .bs-skyinput{height:36px; width:200px; max-width:52vw; border-radius:12px; border:1px solid var(--bs-border);
    background:var(--bs-panel); color:var(--text); padding:0 12px; font-size:14px; font-family:inherit; backdrop-filter:blur(8px)}
.basic-shell .bs-skygo{width:36px; height:36px; border-radius:12px; border:1px solid var(--bs-border);
    background:var(--bs-panel); color:var(--text); font-size:15px; backdrop-filter:blur(8px)}
.basic-shell .bs-skyresults{position:absolute; left:8px; top:94px; width:250px; max-width:70vw; z-index:26;
    background:#0e1422; border:1px solid var(--bs-border); border-radius:12px; overflow:hidden; max-height:46vh; overflow-y:auto}
.basic-shell .bs-skyres{display:block; width:100%; text-align:left; padding:9px 11px; border:0; border-bottom:1px solid var(--bs-border);
    background:transparent; color:var(--text)}
.basic-shell .bs-skyres:last-child{border-bottom:0}
.basic-shell .bs-skyres-nm{font-size:13px; font-weight:700; display:block}
.basic-shell .bs-skyres-sub{font-size:11px; color:var(--bs-muted); display:block; margin-top:1px}
.basic-shell .bs-tcard{position:absolute; right:8px; top:52px; width:210px; max-width:64vw; z-index:24;
    background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:14px; padding:10px 12px; backdrop-filter:blur(8px)}
.basic-shell .bs-tnm{font-size:16px; font-weight:800}
.basic-shell .bs-tsub{font-size:11px; color:var(--bs-muted); margin-top:2px}
.basic-shell .bs-tgrid{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; font-size:12px; color:var(--bs-muted)}
.basic-shell .bs-tgrid b{color:var(--text); font-weight:700; display:block}
.basic-shell .bs-tgoto{margin-top:10px; width:100%; height:44px; border:0; border-radius:12px; background:var(--bs-accent);
    color:#fff; font-weight:800; font-size:14px}
.basic-shell .bs-tgoto:disabled{opacity:.45}
.basic-shell .bs-tgoto2{margin-top:6px; width:100%; height:32px; border:1px solid var(--bs-border); border-radius:12px;
    background:var(--bs-panel); color:var(--bs-muted); font-size:12px; font-weight:600}
.basic-shell .bs-tgoto2:disabled{opacity:.45}

/* ---- Config / Setup screen ---- */
.basic-shell .bs-config{position:absolute; top:44px; left:0; right:0; bottom:48px; z-index:20;
    overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px; display:flex; flex-direction:column; gap:12px;
    background:radial-gradient(120% 90% at 60% 30%, #0b1424 0%, #05080f 70%)}
.basic-shell .bs-card{background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:14px;
    padding:12px 13px; backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:9px}
.basic-shell .bs-cardh{display:flex; align-items:center; justify-content:space-between; gap:8px}
.basic-shell .bs-cardt{font-size:14px; font-weight:800; color:var(--text)}
.basic-shell .bs-cbtn{height:34px; padding:0 13px; border-radius:12px; background:var(--bs-chip);
    border:1px solid var(--bs-border); color:var(--text); font-size:13px; font-weight:600; font-family:inherit; white-space:nowrap}
.basic-shell .bs-cbtn.primary{background:var(--bs-accent); border-color:var(--bs-accent); color:#fff}
.basic-shell .bs-cbtn.danger{border-color:var(--bs-danger); color:var(--bs-danger)}
.basic-shell .bs-cbtn.xs{height:30px; padding:0 10px; font-size:12px}
.basic-shell .bs-cbtn:disabled{opacity:.45}
.basic-shell .bs-cbtns{display:flex; flex-wrap:wrap; gap:8px}
.basic-shell .bs-crow{display:flex; align-items:center; gap:8px; font-size:13px; flex-wrap:wrap}
.basic-shell .bs-indistat{display:inline-flex; align-items:center; gap:8px}
.basic-shell .bs-clbl{color:var(--bs-muted)}
.basic-shell .bs-cval{color:var(--text); font-weight:600}
.basic-shell .bs-cval.bs-mono, .basic-shell .bs-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
    color:var(--bs-muted); word-break:break-all}
.basic-shell .bs-cdev{display:flex; align-items:center; gap:8px; font-size:13px; padding:2px 0}
.basic-shell .bs-cdlbl{color:var(--bs-muted); min-width:66px}
.basic-shell .bs-cdname{color:var(--text); font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:none}
.basic-shell .bs-cdsel{flex:1; min-width:0; height:32px; border-radius:10px; border:1px solid var(--bs-border);
    background:#0e1422; color:var(--text); padding:0 8px; font-size:12px; font-family:inherit; appearance:auto}
.basic-shell .bs-cdsel:disabled{opacity:.7}
.basic-shell .bs-cdev .bs-cbtn{flex:none}
.basic-shell .bs-cdev .bs-cfg{margin-left:auto}
/* connect/disconnect button: fixed width so Connect and Disconnect match */
.basic-shell .bs-cdev .bs-cbtn:not(.bs-cfg){min-width:104px; text-align:center; justify-content:center}

/* per-device settings modal (hosts the relocated full-UI equipment card) */
.basic-shell .bs-modal{position:fixed; inset:0; z-index:850; background:rgba(4,6,12,.72);
    display:flex; align-items:center; justify-content:center; padding:10px; backdrop-filter:blur(4px)}
.basic-shell .bs-modalcard{width:100%; max-width:min(760px,100%); max-height:100%; display:flex; flex-direction:column;
    background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:14px; overflow:hidden; backdrop-filter:blur(10px)}
.basic-shell .bs-modalhead{display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:12px 14px; border-bottom:1px solid var(--bs-border); font-size:15px; font-weight:800; color:var(--text)}
.basic-shell .bs-modalbody{overflow:auto; -webkit-overflow-scrolling:touch; padding:12px}
.basic-shell #basicEquipModalBody .equip-card{width:100% !important; max-width:100% !important; margin:0 !important}
.basic-shell .bs-cnote{font-size:11px; color:var(--bs-muted); line-height:1.35}
.basic-shell .bs-cnote.ok{color:var(--bs-ok)} .basic-shell .bs-cnote.warn{color:var(--bs-warn)}
.basic-shell .bs-clink{background:none; border:0; color:var(--bs-accent2); font-size:11px; font-weight:700; font-family:inherit; padding:0; text-decoration:underline}
.basic-shell .bs-cinput{width:100%; height:38px; border-radius:12px; border:1px solid var(--bs-border);
    background:#0e1422; color:var(--text); padding:0 12px; font-size:14px; font-family:inherit}
.basic-shell select.bs-cinput{appearance:auto}
.basic-shell .bs-cinrow{display:flex; gap:8px; align-items:center}
.basic-shell .bs-cinrow .bs-cinput{flex:1; min-width:0}
.basic-shell .bs-cinrow .bs-cbtn{flex:none}
.basic-shell .bs-cfield{display:flex; flex-direction:column; gap:4px}
.basic-shell .bs-cflbl{font-size:11px; color:var(--bs-muted)}
.basic-shell .bs-ccheck{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text)}
.basic-shell .bs-ccheck input{width:18px; height:18px; accent-color:var(--bs-accent)}
.basic-shell .bs-scalerow{display:flex; align-items:center; gap:10px}
.basic-shell .bs-scaleslider{flex:1; accent-color:var(--bs-accent)}

/* Full-UI modals reused inside basic mode assume the desktop status/activity
   bars (their overlays inset by --statusbar-height/--activitybar-height) and
   tall 84vh cards, so on a phone the card footer clips off-screen. Pin the
   overlay to the whole viewport and let the card body scroll instead. */
body.basic-active .confirm-modal-overlay,
body.basic-active .editor-export-backdrop,
body.basic-active .modal-overlay{top:0; bottom:0; left:0; right:0; padding:8px}
body.basic-active .hostdlg-card{height:auto; max-height:100%}

.basic-shell :focus-visible{outline:2px solid var(--bs-accent2); outline-offset:2px}

/* return-to-field pill, shown on a phone that escaped to the full UI */
.basic-return{position:fixed; left:12px; bottom:10px; z-index:790;
    height:32px; padding:0 16px; border-radius:16px; background:rgba(76,141,255,.92); color:#fff;
    border:0; font-weight:700; font-size:13px; font-family:inherit; box-shadow:0 6px 20px rgba(0,0,0,.4)}