/* Bluetooth scale connect/weigh panel. Loaded media="all" (never deferred) so the overlay is
   always fully styled. Theme-aware via the app's CSS variables. */
.scBackdrop{
  position:fixed; inset:0; z-index:2147483400; display:grid; place-items:center; padding:18px;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb,var(--accent) 16%, rgba(3,7,12,.86)), rgba(3,7,12,.9));
  backdrop-filter:blur(12px); opacity:0; transition:opacity .22s ease;
}
.scBackdrop.scIn{opacity:1}
/* The `hidden` attribute must win over the explicit display rules below (otherwise the live
   readout and the Stable badge show before the scale is even connected). */
.scBackdrop [hidden]{display:none!important}
.scPanel{
  width:min(460px, 100%); max-height:calc(100dvh - 36px); overflow:auto;
  border:1px solid color-mix(in srgb,var(--accent) 58%, var(--line)); border-radius:24px;
  background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 9%, var(--surface-main,var(--panel))), var(--surface-main,var(--panel)));
  box-shadow:0 34px 90px rgba(0,0,0,.55), 0 0 40px color-mix(in srgb,var(--accent) 16%, transparent);
  transform:translateY(14px) scale(.98); transition:transform .24s cubic-bezier(.2,.9,.2,1);
}
.scBackdrop.scIn .scPanel{transform:none}
.scHead{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 6px}
.scEyebrow{color:var(--accent2); font-size:.62rem; font-weight:900; letter-spacing:.14em}
.scTitle{margin:3px 0 0; font-size:1.18rem}
.scClose{flex:0 0 auto; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:var(--surface-input); color:var(--text); font-size:1.3rem; line-height:1; cursor:pointer}
.scClose:hover{border-color:var(--accent)}
.scBody{display:flex; flex-direction:column; align-items:center; gap:14px; padding:8px 20px 20px; text-align:center}

/* ---- pairing animation: radar rings + Bluetooth hub + sweep --------------------------- */
.scStage{position:relative; width:132px; height:132px; display:grid; place-items:center; margin-top:6px}
.scRing{position:absolute; inset:0; margin:auto; width:36px; height:36px; border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent) 60%, transparent); opacity:0}
.scHub{position:relative; z-index:2; width:60px; height:60px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(145deg, color-mix(in srgb,var(--accent) 28%, var(--surface-raised,var(--panel2))), var(--surface-raised,var(--panel2)));
  border:1px solid color-mix(in srgb,var(--accent) 60%, var(--line));
  box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 24%, transparent)}
.scHub svg{width:26px; height:26px; fill:none; stroke:var(--accent2); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.scSweep{position:absolute; inset:0; margin:auto; width:120px; height:120px; border-radius:50%; opacity:0;
  background:conic-gradient(from 0deg, transparent 0 300deg, color-mix(in srgb,var(--accent) 45%, transparent) 350deg, transparent 360deg)}

@keyframes scPulse{0%{transform:scale(.4); opacity:.9} 70%{opacity:.35} 100%{transform:scale(3.4); opacity:0}}
@keyframes scSpin{to{transform:rotate(360deg)}}
@keyframes scBob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
.stage-scanning .scRing{animation:scPulse 2s ease-out infinite}
.stage-scanning .scRing2{animation-delay:.66s}
.stage-scanning .scRing3{animation-delay:1.33s}
.stage-scanning .scSweep{opacity:1; animation:scSpin 1.6s linear infinite}
.stage-scanning .scHub{animation:scBob 1.8s ease-in-out infinite}
.stage-connected .scHub{border-color:color-mix(in srgb,var(--good,#3fdd7f) 70%,var(--line)); box-shadow:0 0 26px color-mix(in srgb,var(--good,#3fdd7f) 30%,transparent)}
.stage-connected .scHub svg{stroke:var(--good,#3fdd7f)}
.stage-connected .scRing1{opacity:.25; border-color:color-mix(in srgb,var(--good,#3fdd7f) 50%,transparent); transform:scale(2)}
.stage-error .scHub{border-color:color-mix(in srgb,var(--bad,#ff6b6b) 65%,var(--line))}
.stage-error .scHub svg{stroke:var(--bad,#ff6b6b)}
.stage-unsupported .scStage{opacity:.5}
.stage-connected .scStage{display:none} /* reclaim space once the live readout takes over */

.scStatus{margin:0; color:var(--muted); font-size:.86rem; line-height:1.5; max-width:36ch}
.scConnectBtn{min-height:46px; padding:0 22px; border:0; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg, var(--accent), var(--accent2)); color:var(--buttonText,#07111b); font-weight:900; font-size:.92rem;
  box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 30%, transparent)}
.scConnectBtn:hover{filter:brightness(1.05)}
.scConnectBtn:disabled{opacity:.6; cursor:wait}
.stage-connected .scConnectBtn{display:none}

/* ---- live readout --------------------------------------------------------------------- */
.scReadout{width:100%; display:flex; flex-direction:column; gap:14px}
.scWeightWrap{position:relative; display:flex; align-items:baseline; justify-content:center; gap:6px; padding:14px 10px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:18px; background:var(--surface-input)}
.scWeight{font-variant-numeric:tabular-nums; font-weight:900; font-size:3.1rem; line-height:1; color:var(--text); letter-spacing:-.01em}
.scUnit{font-size:1.1rem; font-weight:800; color:var(--muted)}
.scStable{position:absolute; top:10px; right:12px; display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  background:color-mix(in srgb,var(--good,#3fdd7f) 16%,transparent); color:var(--good,#3fdd7f); font-size:.64rem; font-weight:900; letter-spacing:.06em}
.scStable::before{content:"✓"}
.scControls{display:grid; grid-template-columns:1fr; gap:10px; text-align:left}
.scField{display:flex; flex-direction:column; gap:5px; font-size:.72rem; color:var(--muted); font-weight:700}
.scField i{font-style:normal; color:color-mix(in srgb,var(--muted) 80%,transparent); font-weight:600}
.scInputWrap{display:flex; align-items:center; gap:6px; padding:0 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface-input)}
.scInputWrap:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.scInputWrap input{flex:1; min-width:0; border:0; background:none; color:var(--text); font:inherit; font-weight:800; padding:11px 0}
.scInputWrap input:focus{outline:none}
/* Hide the native number spinner — its default box clashed with the panel's dark styling. */
.scInputWrap input[type=number]{-webkit-appearance:none; -moz-appearance:textfield; appearance:textfield}
.scInputWrap input[type=number]::-webkit-outer-spin-button,
.scInputWrap input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.scInputWrap i{font-style:normal; color:var(--muted); font-weight:800}
.scNet{display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-radius:13px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); background:color-mix(in srgb,var(--accent) 10%,transparent)}
.scNet span{font-size:.74rem; font-weight:800; letter-spacing:.04em; color:var(--muted)}
.scNet strong{font-size:1.05rem; color:var(--accent2); font-variant-numeric:tabular-nums}
.scActionsRow{display:grid; grid-template-columns:auto 1fr; gap:10px}
.scTareBtn{min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-raised,var(--panel2)); color:var(--text); font-weight:800; cursor:pointer}
.scTareBtn:hover{border-color:var(--accent)}
.scApplyBtn{min-height:44px; border:0; border-radius:12px; cursor:pointer; font-weight:900;
  background:linear-gradient(135deg, var(--accent), var(--accent2)); color:var(--buttonText,#07111b)}
.scApplyBtn:disabled{opacity:.5; cursor:not-allowed; filter:grayscale(.3)}

/* ---- disconnect, "having trouble?" + disclaimer --------------------------------------- */
/* Full-width teardown button — themed to the panel (neutral ghost like Tare), with a red
   hover + power glyph so it reads clearly as "disconnect". */
.scDisconnectBtn{width:100%; min-height:42px; margin-top:2px; padding:0 16px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line); border-radius:12px; cursor:pointer;
  background:var(--surface-raised,var(--panel2)); color:var(--muted);
  font:inherit; font-weight:800; font-size:.82rem; letter-spacing:.01em;
  transition:border-color .15s ease, background .15s ease, color .15s ease}
.scDisconnectBtn:hover{border-color:color-mix(in srgb,var(--bad,#ff6b6b) 60%,var(--line));
  color:var(--bad,#ff6b6b); background:color-mix(in srgb,var(--bad,#ff6b6b) 10%,var(--surface-raised,var(--panel2)))}
.scDisconnectBtn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.scDisconnectBtn[hidden]{display:none}
.scTroubleLink{border:0; background:none; color:var(--muted); font:inherit; font-size:.74rem; font-weight:700;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--muted) 45%,transparent);
  cursor:pointer; padding:2px 4px; transition:color .15s ease}
.scTroubleLink:hover{color:var(--accent2)}
.scDisclaimer{margin:0; color:color-mix(in srgb,var(--muted) 88%,transparent); font-size:.7rem; line-height:1.5; max-width:40ch}
.scDisclaimer b{color:var(--accent2)}

/* ---- mobile: let the overlay scroll so the whole panel is reachable ------------------- */
@media (max-width:600px){
  .scBackdrop{align-items:start; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-top:12px}
  .scPanel{max-height:none}
  .scWeight{font-size:2.6rem}
  .scControls{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .scRing,.scSweep,.scHub{animation:none!important}
  .stage-scanning .scRing1{opacity:.4}
}

/* ---- "Weigh with scale" button inside the inventory Add/Edit forms -------------------- */
.inventoryScaleBtn{
  display:inline-flex; align-items:center; gap:7px; margin-top:7px; padding:7px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 46%,var(--line)); border-radius:11px;
  background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent2);
  font:inherit; font-size:.76rem; font-weight:800; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.inventoryScaleBtn:hover{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); transform:translateY(-1px)}
.inventoryScaleBtn:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 34%,transparent); outline-offset:2px}
.inventoryScaleBtnIcon{display:inline-flex}
.inventoryScaleBtnIcon svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.inventoryScaleBtn[hidden]{display:none}

/* ---- workflow chooser (update existing / log new) ------------------------------------- */
.scChoice{display:grid; gap:10px; width:100%; margin-top:2px}
.scChoiceCard{display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left; padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line)); border-radius:14px; background:var(--surface-input); color:var(--text);
  cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .15s ease}
.scChoiceCard:hover:not(:disabled){border-color:var(--accent); transform:translateY(-1px)}
.scChoiceCard.sel{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface-input)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.scChoiceCard:disabled{opacity:.5; cursor:not-allowed}
.scChoiceCard b{font-size:.92rem}
.scChoiceCard small{color:var(--muted); font-size:.72rem; line-height:1.35}
.scApplyWrap{display:flex; flex-direction:column; gap:12px; width:100%; margin-top:4px; text-align:left}
.scBackLink{align-self:flex-start; display:inline-flex; align-items:center; gap:4px; border:0; background:none; color:var(--muted); font:inherit; font-size:.74rem; font-weight:700; cursor:pointer; padding:0}
.scBackLink svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.scBackLink:hover{color:var(--accent2)}
/* "Not sure?" empty-spool preset picker (custom dropdown — native <select> renders behind the blur) */
.scPresetWrap{position:relative; width:100%; margin-top:-2px}
/* Follows the active theme — same tokens as the app's themed inputs (no hardcoded dark/black). */
.scPresetToggle{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; cursor:pointer; padding:10px 13px;
  border:1px solid var(--line); border-radius:11px; background:var(--surface-input, var(--panel2)); color:var(--text);
  font:inherit; font-size:.76rem; font-weight:700; text-align:left; text-transform:none; text-decoration:none}
.scPresetToggle:hover{border-color:var(--accent)}
.scPresetChev{flex:0 0 auto; color:var(--muted); font-size:.7rem}
.scPresetList{margin-top:6px; max-width:100%}
.scPresetRow{gap:0}
.scPresetRow .scRowMain small{white-space:normal}
.scApplyWrap .scField{gap:6px}
.scApplyWrap .scConnectBtn{align-self:stretch; margin-top:2px}
.scPickWrap{display:flex; flex-direction:column; gap:10px; width:100%; margin-top:2px; text-align:left}
.scPickLabel{font-size:.72rem; font-weight:800; color:var(--muted); letter-spacing:.02em}
.scPickWrap .scConnectBtn{align-self:stretch; margin-top:2px}
/* Custom item picker — rendered in-flow inside the top-most panel, so it can never hide behind
   the blur (the native <select> did). Each row carries the SMSpool icon, cost and stock. */
.scSelect{position:relative; width:100%}
.scSelectBtn{display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; text-align:left; font:inherit; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; background:var(--surface-input); color:var(--text)}
.scSelectBtn:hover,.scSelectBtn.open{border-color:var(--accent)}
.scSelectBtn.open{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.scSelectChev{margin-left:auto; flex:0 0 auto; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .16s ease}
.scSelectBtn.open .scSelectChev{transform:rotate(-135deg)}
.scSelectList{display:flex; flex-direction:column; gap:2px; width:100%; max-height:236px; overflow:auto; margin-top:6px; padding:5px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:12px;
  background:var(--surface-raised,var(--panel2)); box-shadow:0 16px 34px rgba(0,0,0,.4)}
.scSelectRow{display:flex; align-items:center; gap:10px; width:100%; padding:8px 9px; text-align:left; font:inherit; cursor:pointer;
  border:0; border-radius:9px; background:none; color:var(--text)}
.scSelectRow:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.scRowMain{display:flex; flex-direction:column; gap:1px; min-width:0}
.scRowMain b{font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.scRowMain small{color:var(--muted); font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.scSpoolIcon{position:relative; flex:0 0 auto; width:30px; height:28px; display:inline-block}

/* ---- gutter widget: compact HUD (desktop, left gutter) -------------------------------- */
/* Same visual language as the full HUD weigh window, shrunk into a fixed left-gutter card: glowing
   Skale logo header, a 7-segment readout with corner brackets + radar ticks + a stability ring, a
   status strip, colour-underlined bevelled buttons, and a model/firmware footer. */
.scaleHeroFrame{
  --scSegOn:#fbf5ea; --scSegOff:color-mix(in srgb,#fbf5ea 6%,transparent); --scSegGlow:color-mix(in srgb,var(--accent) 42%,transparent); --scCyan:#4db4ff;
  position:fixed; top:96px; left:22px; z-index:2147483300; width:432px; overflow:hidden;
  display:flex; flex-direction:column; gap:12px; padding:0;
  border:1px solid color-mix(in srgb,var(--accent) 46%,var(--line)); border-radius:20px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 8%, var(--surface-raised,var(--panel2))), var(--surface-main,var(--panel)));
  box-shadow:0 30px 64px rgba(0,0,0,.52), 0 0 32px color-mix(in srgb,var(--accent) 15%,transparent), inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent);
  transform:translateY(-8px) scale(.97); opacity:0; transform-origin:top left;
  transition:transform .3s cubic-bezier(.2,.9,.2,1), opacity .3s ease;
}
.scaleHeroFrame.in{transform:none; opacity:1}
.scaleHeroFrame > .scwDisplay,
.scaleHeroFrame > .scwStrip,
.scaleHeroFrame > .scaleHeroAdd,
.scaleHeroFrame > .scwActions{margin:0 15px}

/* header */
.scwHead{display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:radial-gradient(130% 150% at 100% 0%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 60%);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 28%,var(--line))}
.scwLogo{flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; border-radius:13px;
  border:1px solid color-mix(in srgb,var(--accent) 72%,transparent); background:color-mix(in srgb,#000 32%,var(--surface-main,var(--panel)));
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 44%,transparent), inset 0 0 12px color-mix(in srgb,var(--accent) 20%,transparent)}
.scwLogoMark{width:24px; height:24px; display:block; background:var(--text);
  -webkit-mask:url('images/integrations/skale2.svg') center/contain no-repeat; mask:url('images/integrations/skale2.svg') center/contain no-repeat}
.scwHeadText{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px}
.scwBrand{font-size:.6rem; font-weight:900; letter-spacing:.3em; text-transform:uppercase; color:var(--accent2)}
.scwState{font-size:1.18rem; font-weight:800; line-height:1.1; color:var(--text)}
.scaleHeroFrame.isStable .scwState{color:var(--good,#3fe07f)}
.scwConn{display:inline-flex; align-items:center; gap:4px; font-size:.56rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--good,#3fe07f)}
.scwConn svg{width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.scwLive{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--good,#3fe07f) 40%,transparent); background:color-mix(in srgb,var(--good,#3fe07f) 14%,transparent);
  font-size:.56rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; color:var(--good,#3fe07f)}
.scwLive i{width:6px; height:6px; border-radius:50%; background:var(--good,#3fe07f); box-shadow:0 0 7px var(--good,#3fe07f)}
.scwExpand{flex:0 0 auto; align-self:flex-start; width:26px; height:26px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); border-radius:8px; background:color-mix(in srgb,#000 18%,transparent); color:var(--muted);
  transition:border-color .15s ease, color .15s ease, background .15s ease}
.scwExpand:hover{border-color:var(--accent); color:var(--accent2); background:color-mix(in srgb,var(--accent) 10%,transparent)}
.scwExpand svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* readout: corner brackets + radar ticks + WEIGHT label / stability ring + 7-segment digits */
.scwDisplay{position:relative; margin-top:12px; padding:14px 16px 16px; min-height:174px; border-radius:15px; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 15%,var(--line));
  background:radial-gradient(circle at 50% 52%, color-mix(in srgb,var(--accent) 6%,transparent), transparent 62%), color-mix(in srgb,#000 30%,transparent);
  box-shadow:inset 0 2px 16px rgba(0,0,0,.44)}
.scaleHeroFrame .scCb{width:16px; height:16px; border-color:color-mix(in srgb,var(--scCyan) 65%,transparent)}
.scaleHeroFrame .scCb.tl{top:9px; left:9px} .scaleHeroFrame .scCb.tr{top:9px; right:9px}
.scaleHeroFrame .scCb.bl{bottom:9px; left:9px} .scaleHeroFrame .scCb.br{bottom:9px; right:9px}
.scwTicks{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:150px; height:150px; border-radius:50%; opacity:.35; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb,var(--muted) 60%,transparent) 0 .6deg, transparent .6deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent 86%,#000 88%); mask:radial-gradient(closest-side,transparent 86%,#000 88%)}
/* header (WEIGHT + stability ring) overlays the top; the digits sit dead-center on the tick dial */
.scwDispTop{position:absolute; top:14px; left:16px; right:16px; z-index:3; display:flex; align-items:flex-start; justify-content:space-between}
.scwLbl{font-size:.6rem; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding-top:6px}
.scwStab{display:flex; flex-direction:column; align-items:center; gap:2px}
.scwStabRing{position:relative; flex:0 0 auto; width:50px; height:50px; aspect-ratio:1/1; display:grid; place-items:center}
.scwStabR{position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--good,#3fe07f) 0 0%, color-mix(in srgb,var(--muted) 22%,transparent) 0 100%);
  -webkit-mask:radial-gradient(closest-side,transparent 66%,#000 68%); mask:radial-gradient(closest-side,transparent 66%,#000 68%)}
.scwStab b{position:relative; font-size:.62rem; font-weight:900; color:var(--good,#3fe07f); font-variant-numeric:tabular-nums}
.scwStab small{font-size:.44rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.scwRead{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%) skewX(-6deg); z-index:2; display:flex; align-items:flex-end; justify-content:center; gap:5px}
.scwUnit{transform:skewX(6deg); font-size:1.5rem; font-weight:800; color:var(--muted); margin-bottom:8px}
/* 7-segment digits sized for the widget */
.scaleHeroFrame .scSeg{width:34px; height:60px}
.scaleHeroFrame .scSeg+.scSeg{margin-left:4px}
.scaleHeroFrame .scSeg .a{top:0; left:5px; right:5px; height:7px} .scaleHeroFrame .scSeg .g{top:26.5px; left:5px; right:5px; height:7px} .scaleHeroFrame .scSeg .d{bottom:0; left:5px; right:5px; height:7px}
.scaleHeroFrame .scSeg .f{top:5px; left:0; width:7px; height:21px} .scaleHeroFrame .scSeg .b{top:5px; right:0; width:7px; height:21px}
.scaleHeroFrame .scSeg .e{bottom:5px; left:0; width:7px; height:21px} .scaleHeroFrame .scSeg .c{bottom:5px; right:0; width:7px; height:21px}
.scaleHeroFrame .scDot{width:7px; height:7px; margin:0 1px 6px}

/* status strip */
.scwStrip{display:flex; align-items:center; gap:11px; padding:9px 13px; border-radius:14px;
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent); background:color-mix(in srgb,#000 15%,transparent)}
.scwStripIcon{flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--muted) 42%,transparent); color:var(--muted); transition:color .2s ease, border-color .2s ease, box-shadow .2s ease}
.scwStripIcon svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round}
.scaleHeroFrame.isStable .scwStripIcon{color:var(--good,#3fe07f); border-color:color-mix(in srgb,var(--good,#3fe07f) 60%,transparent); box-shadow:0 0 14px color-mix(in srgb,var(--good,#3fe07f) 32%,transparent)}
.scwStripTxt{display:flex; flex-direction:column; min-width:0}
.scwStripTxt b{font-size:.82rem; font-weight:800; color:var(--text); line-height:1.25}
.scwStripTxt small{font-size:.68rem; color:var(--muted); line-height:1.25}

/* +Add CTA — appears only when a spool is on the scale (into the update/new chooser) */
.scaleHeroAdd{display:flex; align-items:center; justify-content:center; gap:6px; width:auto; min-height:42px; padding:0 12px; cursor:pointer;
  border:0; border-radius:13px; font:inherit; font-size:.82rem; font-weight:900; letter-spacing:.01em;
  color:var(--buttonText,#07111b); background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 12px 24px color-mix(in srgb,var(--accent) 34%,transparent); animation:scaleHeroAddIn .22s ease}
.scaleHeroAdd svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.scaleHeroAdd:hover{filter:brightness(1.06)}
.scaleHeroAdd[hidden]{display:none}
@keyframes scaleHeroAddIn{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}

/* bevelled action buttons with colour underline + corner screws (match the HUD) */
.scwActions{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
.scwBtn{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:7px; padding:13px 4px 15px; cursor:pointer; color:var(--text); font:inherit;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  background:radial-gradient(circle at 9px 9px,color-mix(in srgb,var(--muted) 50%,transparent) 1.4px,transparent 2px),radial-gradient(circle at calc(100% - 9px) 9px,color-mix(in srgb,var(--muted) 50%,transparent) 1.4px,transparent 2px),radial-gradient(circle at 9px calc(100% - 9px),color-mix(in srgb,var(--muted) 50%,transparent) 1.4px,transparent 2px),radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),color-mix(in srgb,var(--muted) 50%,transparent) 1.4px,transparent 2px),color-mix(in srgb,#000 18%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,var(--line))}
.scwBtn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.scwBtn b{font-size:.62rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase}
.scwBtn::after{content:""; position:absolute; left:16%; right:16%; bottom:6px; height:3px; border-radius:3px}
.scwBtn.t{color:var(--accent2)} .scwBtn.t svg{stroke:var(--accent)} .scwBtn.t::after{background:var(--accent); box-shadow:0 0 12px var(--accent)}
.scwBtn.m svg{stroke:var(--scCyan)} .scwBtn.m::after{background:var(--scCyan); box-shadow:0 0 12px var(--scCyan)}
.scwBtn.d svg{stroke:var(--bad,#ff5a52)} .scwBtn.d::after{background:var(--bad,#ff5a52); box-shadow:0 0 12px var(--bad,#ff5a52)}
.scwBtn:hover{filter:brightness(1.12)}

/* footer */
.scwFoot{display:flex; align-items:center; gap:24px; padding:11px 16px; border-top:1px solid color-mix(in srgb,var(--accent) 18%,var(--line)); background:color-mix(in srgb,#000 20%,transparent)}
.scwFoot span{display:flex; flex-direction:column; gap:1px}
.scwFk{font-style:normal; font-size:.5rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--good,#3fe07f)}
.scwFv{font-style:normal; font-size:.78rem; font-weight:800; color:var(--text)}

/* Phones never show the widget — the fixed dock badge is the mobile surface. */
@media (max-width:600px){ .scaleHeroFrame{display:none!important} }
@media (prefers-reduced-motion:reduce){ .scaleHeroFrame{transition:none} }

/* ---- dock: theme-masked scale icon + slot order --------------------------------------- */
/* Our own mark, so it follows the theme accent instead of its blue source fill. The order rule
   is class-only (like the other integrations') so a saved drag arrangement — which the reorder
   controller writes id-scoped — still wins; this only sets the default spot, up with the icons. */
#serviceDock .serviceDockItem .scaleDockIcon{
  width:24px; height:24px; display:block; background:var(--accent);
  -webkit-mask:url('images/integrations/skale2.svg') center / contain no-repeat;
  mask:url('images/integrations/skale2.svg') center / contain no-repeat;
}
.serviceDockSlot:has([data-service="skale"]){order:4}
@media (max-width:620px){ #serviceDock .serviceDockItem .scaleDockIcon{width:21px; height:21px} }
/* `.serviceDockCount` sets display:grid, which would beat the UA [hidden] rule — so the weight
   badge must be hidden explicitly when the hero frame is carrying the reading instead. */
#serviceDock .scaleDockWeight[hidden]{display:none!important}

/* Themed Skale mark for the workflow menus (dock "+" add menu + integrations panel) — masked so it
   follows the theme accent instead of the blue source fill, like the dock icon. */
.skaleMark{display:inline-block; background:var(--accent);
  -webkit-mask:url('images/integrations/skale2.svg') center/contain no-repeat; mask:url('images/integrations/skale2.svg') center/contain no-repeat}
.serviceDockAddItem .skaleMark{width:22px; height:22px; flex:0 0 auto; border-radius:6px}
.integrationMark .skaleMark{width:24px; height:24px}
.integrationDetailMark .skaleMark{width:30px; height:30px}

/* ================= HUD weigh window (openScalePanel) ==================================== */
/* The full sci-fi dashboard: nav sidebar, radar readout with 7-segment digits, stability ring +
   sparklines, colour-coded buttons, model/firmware/battery footer. Theme-aware. */
.scHud{
  --scSegOn:#fbf5ea; --scSegOff:color-mix(in srgb,#fbf5ea 6%,transparent); --scSegGlow:color-mix(in srgb,var(--accent) 40%,transparent);
  --scCyan:#4db4ff; --scScrew:color-mix(in srgb,var(--muted) 55%,transparent);
  position:relative; width:min(1040px,96vw); max-height:calc(100dvh - 36px); overflow:auto;
  display:grid; grid-template-columns:176px 1fr;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:22px;
  background:var(--surface-main,var(--panel));
  box-shadow:0 44px 100px rgba(0,0,0,.6), 0 0 40px color-mix(in srgb,var(--accent) 12%,transparent);
  transform:translateY(14px) scale(.985); transition:transform .24s cubic-bezier(.2,.9,.2,1);
}
.scBackdrop.scIn .scHud{transform:none}
.scHudX{position:absolute; top:12px; right:12px; z-index:5; width:32px; height:32px; border:1px solid var(--line); border-radius:50%;
  background:color-mix(in srgb,#000 24%,transparent); color:var(--muted); font-size:1.2rem; line-height:1; cursor:pointer}
.scHudX:hover{border-color:var(--accent); color:var(--text)}

/* sidebar */
.scHudSide{display:flex; flex-direction:column; gap:5px; padding:16px 12px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 5%,var(--surface-raised,var(--panel2))), var(--surface-raised,var(--panel2)));
  border-right:1px solid color-mix(in srgb,var(--accent) 20%,var(--line))}
.scHudLogo{width:58px; height:58px; margin:2px auto 6px; display:grid; place-items:center; border-radius:14px;
  border:1px solid color-mix(in srgb,var(--accent) 62%,transparent); background:color-mix(in srgb,#000 30%,var(--panel));
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 38%,transparent), inset 0 0 12px color-mix(in srgb,var(--accent) 18%,transparent)}
.scHudLogoMark{width:30px; height:30px; display:block; background:var(--text);
  -webkit-mask:url('images/integrations/skale2.svg') center/contain no-repeat; mask:url('images/integrations/skale2.svg') center/contain no-repeat}
.scHudBrand{text-align:center; font-size:.86rem; font-weight:900; letter-spacing:.3em; margin-bottom:12px}
.scHudNav{display:flex; flex-direction:column; gap:4px}
.scNav{display:flex; align-items:center; gap:11px; padding:10px 11px; border:0; border-radius:11px; background:none; color:var(--muted); cursor:pointer; position:relative; font:inherit; text-align:left}
.scNav svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.scNav span{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.scNav.active{color:var(--accent2); background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 20%,transparent), color-mix(in srgb,var(--accent) 5%,transparent)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.scNav.active::before{content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:4px; border-radius:0 3px 3px 0; background:var(--accent); box-shadow:0 0 12px var(--accent)}
.scNav:not(.active):hover{color:var(--text); background:color-mix(in srgb,#fff 4%,transparent)}
.scHudFill{flex:1; min-height:12px}
.scHudDots{height:80px; border-radius:12px; border:1px solid var(--line); opacity:.5;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 26%,transparent) 1px, transparent 1.6px) 0 0/11px 11px}
.scHudSideDots{display:flex; justify-content:center; gap:7px; padding-top:12px}
.scHudSideDots i{width:6px; height:6px; border-radius:50%; background:var(--scCyan); box-shadow:0 0 7px var(--scCyan); opacity:.85}

/* main column */
.scHudMain{display:flex; flex-direction:column; min-width:0; background:radial-gradient(120% 70% at 50% -18%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 60%)}
.scHudTop{position:relative; display:flex; align-items:center; gap:18px; padding:16px 22px; border-bottom:1px solid color-mix(in srgb,var(--accent) 16%,var(--line))}
.scHudStatus .k{font-size:.56rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.scHudStatus .v{display:inline-flex; align-items:center; gap:7px; margin-top:5px; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.scHudStatus .v i{width:8px; height:8px; border-radius:50%; background:var(--muted)}
.scHudStatus .v.on{color:var(--good,#3fe07f)} .scHudStatus .v.on i{background:var(--good,#3fe07f); box-shadow:0 0 8px var(--good,#3fe07f)}
.scHudStatus .v svg{width:13px; height:13px; fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.scHudVent{position:absolute; left:50%; top:0; transform:translateX(-50%); width:210px; height:24px; border-radius:0 0 14px 14px; border:1px solid var(--line); border-top:0; opacity:.6;
  background:radial-gradient(circle, color-mix(in srgb,var(--muted) 55%,transparent) 1px, transparent 1.5px) 0 0/7px 7px}
.scHudLive{margin-left:auto; display:flex; align-items:center; gap:12px}
.scHudLive .lk{font-size:.6rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--good,#3fe07f)}
.scHudSpark{width:150px; height:26px}

.scHudBody{padding:18px 22px}
.scHudView[data-pane="weight"]{display:grid; grid-template-columns:1fr 288px; gap:16px}

/* readout */
.scReadout2{position:relative; min-height:360px; border-radius:16px; display:grid; place-items:center; overflow:hidden;
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
  background:radial-gradient(circle at 50% 46%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 58%), color-mix(in srgb,#000 30%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent)}
.scCb{position:absolute; width:24px; height:24px; border:2px solid color-mix(in srgb,var(--scCyan) 70%,transparent); z-index:3}
.scCb.tl{top:12px; left:12px; border-right:0; border-bottom:0}
.scCb.tr{top:12px; right:12px; border-left:0; border-bottom:0}
.scCb.bl{bottom:12px; left:12px; border-right:0; border-top:0}
.scCb.br{bottom:12px; right:12px; border-left:0; border-top:0}
.scRing{position:absolute; border-radius:50%; pointer-events:none}
.scRingTicks{width:340px; height:340px; opacity:.5; background:repeating-conic-gradient(from 0deg, color-mix(in srgb,var(--muted) 60%,transparent) 0 .5deg, transparent .5deg 4deg);
  -webkit-mask:radial-gradient(closest-side,transparent 90%,#000 91%); mask:radial-gradient(closest-side,transparent 90%,#000 91%)}
.scRingMajor{width:340px; height:340px; opacity:.5; background:repeating-conic-gradient(from 0deg, color-mix(in srgb,var(--muted) 85%,transparent) 0 1deg, transparent 1deg 20deg);
  -webkit-mask:radial-gradient(closest-side,transparent 84%,#000 85%); mask:radial-gradient(closest-side,transparent 84%,#000 85%)}
.scRingArc{width:340px; height:340px; background:conic-gradient(from 128deg, var(--scCyan) 0 26deg, transparent 26deg); filter:drop-shadow(0 0 6px var(--scCyan));
  -webkit-mask:radial-gradient(closest-side,transparent 92%,#000 93%); mask:radial-gradient(closest-side,transparent 92%,#000 93%)}
.scRingArc2{width:340px; height:340px; background:conic-gradient(from 300deg, var(--accent) 0 22deg, transparent 22deg); filter:drop-shadow(0 0 6px var(--accent));
  -webkit-mask:radial-gradient(closest-side,transparent 92%,#000 93%); mask:radial-gradient(closest-side,transparent 92%,#000 93%)}
.scRingDash{width:272px; height:272px; border:1px dashed color-mix(in srgb,var(--muted) 40%,transparent); opacity:.5}
.scConnState,.scLiveState{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px}
.scConnState[hidden],.scLiveState[hidden]{display:none}
.scConnState .scStatus{margin:0; color:var(--muted); font-size:.86rem; line-height:1.5; max-width:34ch}
.scConnectBtn2{min-height:46px; padding:0 26px; border:0; border-radius:13px; cursor:pointer; font:inherit; font-weight:900; font-size:.9rem;
  color:var(--buttonText,#07111b); background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 30%,transparent)}
.scConnectBtn2:hover{filter:brightness(1.05)} .scConnectBtn2:disabled{opacity:.6; cursor:wait}
.scStableTag{display:inline-flex; flex-direction:column; align-items:center; gap:3px; font-size:.68rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--good,#3fe07f); margin-bottom:2px}
.scStableTag::before{content:"▼"; font-size:.6rem}
.scStableTag.unstable{color:var(--accent2)} .scStableTag.unstable::before{content:"◇"}
.scRead{display:flex; align-items:flex-end; justify-content:center; gap:7px; transform:skewX(-6deg)}
.scReadUnit{transform:skewX(6deg); font-size:2.2rem; font-weight:800; color:var(--muted); margin-bottom:15px}
.scSeg{position:relative; width:54px; height:96px; display:inline-block}
.scSeg+.scSeg{margin-left:6px}
.scSeg i{position:absolute; background:var(--scSegOff); border-radius:2px}
.scSeg i.on{background:var(--scSegOn); box-shadow:0 0 15px var(--scSegGlow)}
.scSeg .a{top:0; left:8px; right:8px; height:10px} .scSeg .g{top:43px; left:8px; right:8px; height:10px} .scSeg .d{bottom:0; left:8px; right:8px; height:10px}
.scSeg .f{top:8px; left:0; width:10px; height:35px} .scSeg .b{top:8px; right:0; width:10px; height:35px}
.scSeg .e{bottom:8px; left:0; width:10px; height:35px} .scSeg .c{bottom:8px; right:0; width:10px; height:35px}
.scDot{display:inline-block; vertical-align:bottom; width:11px; height:11px; border-radius:50%; background:var(--scSegOn); box-shadow:0 0 15px var(--scSegGlow); margin:0 1px 9px}
.scSpec{margin-top:12px; display:inline-block; padding:6px 13px; border-radius:8px; border:1px solid var(--line); background:color-mix(in srgb,#000 26%,transparent); font-size:.6rem; font-weight:700; color:var(--muted)}

/* right column cards */
.scRightCol{display:flex; flex-direction:column; gap:16px}
.scRightCol .scCard{flex:1; display:flex; flex-direction:column}
.scCard{position:relative; border-radius:16px; padding:16px; overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  background:color-mix(in srgb,#000 24%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent)}
.scCardTitle{font-size:.62rem; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-align:center}
.scStabRing{position:relative; flex:0 0 auto; align-self:center; width:142px; height:142px; aspect-ratio:1/1; margin:auto 0}
.scStabR{position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--good,#3fe07f) 0 0%, color-mix(in srgb,var(--muted) 22%,transparent) 0 100%);
  -webkit-mask:radial-gradient(closest-side,transparent 71%,#000 73%); mask:radial-gradient(closest-side,transparent 71%,#000 73%)}
.scStabR::after{content:""; position:absolute; inset:0; border-radius:50%;
  -webkit-mask:repeating-conic-gradient(#000 0 3.4deg,transparent 3.4deg 6deg); mask:repeating-conic-gradient(#000 0 3.4deg,transparent 3.4deg 6deg)}
.scStabC{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.scStabC b{font-size:1.5rem; font-weight:900; color:var(--good,#3fe07f); font-variant-numeric:tabular-nums}
.scStabC small{font-size:.56rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.scSparkWrap{margin:auto 0}
.scSparkWrap svg{width:100%; height:70px}
.scSparkLbl{text-align:center; font-size:.54rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:6px}

/* secondary views */
.scHudView[data-pane]:not([data-pane="weight"]){min-height:360px}
.scViewTitle{font-size:.95rem; font-weight:900; letter-spacing:.02em; margin-bottom:12px}
.scViewNote{color:var(--muted); font-size:.82rem; line-height:1.55; max-width:52ch; margin:0 0 16px}
.scViewNote b{color:var(--accent2)}
.scField2{display:flex; flex-direction:column; gap:6px; font-size:.74rem; color:var(--muted); font-weight:700; max-width:280px; margin-bottom:14px}
/* History = two panes: stable measurements | inventory actions */
.scHistCols{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.scHistCol{display:flex; flex-direction:column; gap:8px; min-width:0}
.scHistColTitle{margin:0 0 2px; font-size:.62rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2)}
@media (max-width:760px){ .scHistCols{grid-template-columns:1fr} }
.scHistory{display:flex; flex-direction:column; gap:6px; max-width:540px; max-height:330px; overflow:auto}
.scHistRow{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 13px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,#000 18%,transparent)}
.scHistRow b{font-weight:700; font-size:.8rem; color:var(--text); line-height:1.3}
.scHistRow span{flex:0 0 auto; color:var(--muted); font-size:.68rem; font-variant-numeric:tabular-nums; white-space:nowrap}
.scSysList{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-width:460px}
.scSysList li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,#000 18%,transparent)}
.scSysList li span{color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.scSysList li b{font-size:.82rem; text-align:right; word-break:break-word}

/* apply bar (weigh-to-inventory) */
/* Expanded-view primary CTA (monitor mode): appears once a spool is on the scale → update/new chooser */
.scHudAdd{display:flex; align-items:center; justify-content:center; gap:7px; margin:0 22px; min-height:46px; padding:0 16px; cursor:pointer;
  border:0; border-radius:13px; font:inherit; font-size:.9rem; font-weight:900; letter-spacing:.02em;
  color:var(--buttonText,#07111b); background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 30%,transparent)}
.scHudAdd svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.scHudAdd:hover{filter:brightness(1.05)}
.scHudAdd[hidden]{display:none}
/* The app's global input CSS adds a border + number-stepper wrapper with !important. Inside the scale
   surfaces we want ONE border (the .scInputWrap), so neutralise the inner input's border/stepper. */
.scHud .scInputWrap input, .scChooser .scInputWrap input{border:0!important; background:none!important; box-shadow:none!important; padding-right:0!important}
.scHud .scInputWrap .numberStepperControls, .scChooser .scInputWrap .numberStepperControls{display:none!important}
.scHud .scInputWrap .numberStepper, .scChooser .scInputWrap .numberStepper{width:100%; display:block}
.scApplyBar{display:flex; align-items:flex-end; gap:16px; margin:0 22px; padding:12px 16px; border-radius:14px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); background:color-mix(in srgb,var(--accent) 8%,transparent)}
.scApplyBar[hidden]{display:none}
.scApplyBar .scField2{flex-direction:column; gap:5px; margin:0; font-size:.66rem}
.scNet2{display:flex; flex-direction:column; gap:4px}
.scNet2 span{font-size:.66rem; font-weight:800; letter-spacing:.04em; color:var(--muted); text-transform:uppercase}
.scNet2 strong{font-size:1.2rem; color:var(--accent2); font-variant-numeric:tabular-nums}
.scApplyBtn2{margin-left:auto; min-height:46px; padding:0 22px; border:0; border-radius:12px; cursor:pointer; font:inherit; font-weight:900;
  color:var(--buttonText,#07111b); background:linear-gradient(135deg, var(--accent), var(--accent2))}
.scApplyBtn2:disabled{opacity:.5; cursor:not-allowed; filter:grayscale(.3)}

/* action buttons */
.scHudActions{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; padding:16px 22px 6px}
.scHudBtn{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 6px 20px; cursor:pointer; color:var(--text); font:inherit;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  background:radial-gradient(circle at 11px 11px,var(--scScrew) 1.6px,transparent 2.2px),radial-gradient(circle at calc(100% - 11px) 11px,var(--scScrew) 1.6px,transparent 2.2px),radial-gradient(circle at 11px calc(100% - 11px),var(--scScrew) 1.6px,transparent 2.2px),radial-gradient(circle at calc(100% - 11px) calc(100% - 11px),var(--scScrew) 1.6px,transparent 2.2px),color-mix(in srgb,#000 22%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,var(--line))}
.scHudBtn svg{width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.scHudBtn b{font-size:.88rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase}
.scHudBtn small{font-size:.56rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.scHudBtn::after{content:""; position:absolute; left:16%; right:16%; bottom:9px; height:4px; border-radius:4px}
.scHudBtn.t{color:var(--accent2)} .scHudBtn.t svg{stroke:var(--accent)} .scHudBtn.t::after{background:var(--accent); box-shadow:0 0 15px var(--accent)}
.scHudBtn.m svg{stroke:var(--scCyan)} .scHudBtn.m::after{background:var(--scCyan); box-shadow:0 0 15px var(--scCyan)}
.scHudBtn.d svg{stroke:var(--bad,#ff5a52)} .scHudBtn.d::after{background:var(--bad,#ff5a52); box-shadow:0 0 15px var(--bad,#ff5a52)}
.scHudBtn:hover{filter:brightness(1.12)}

/* footer */
.scHudFoot{display:flex; align-items:center; gap:34px; padding:15px 24px; border-top:1px solid color-mix(in srgb,var(--accent) 18%,var(--line)); background:color-mix(in srgb,#000 22%,transparent)}
.scFi{display:flex; align-items:center; gap:11px} .scFi[hidden]{display:none}
.scFi svg{width:20px; height:20px; fill:none; stroke:var(--accent2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.scFi .k{display:block; font-size:.5rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--good,#3fe07f)}
.scFi .v{display:block; font-size:.82rem; font-weight:800}

@media (max-width:840px){
  .scHud{grid-template-columns:1fr}
  .scHudSide{flex-direction:row; align-items:center; gap:6px; overflow-x:auto; border-right:0; border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,var(--line))}
  .scHudLogo{width:44px; height:44px; margin:0} .scHudBrand,.scHudDots,.scHudSideDots,.scHudFill{display:none}
  .scHudNav{flex-direction:row}
  .scHudView[data-pane="weight"]{grid-template-columns:1fr}
  .scHudActions{grid-template-columns:1fr 1fr 1fr}
  .scApplyBar{flex-wrap:wrap; gap:10px}
}
/* Phones: keep the weigh HUD inside the viewport — wrap the apply bar and scale the 7-seg readout so a 4-5
   digit weight can't spill (scale keeps the pixel-tuned segment offsets intact; the skew is preserved). */
@media (max-width:600px){
  .scApplyBar{margin:0 12px; padding:12px}
  .scApplyBtn2{margin-left:0; width:100%}
  .scRead{transform:skewX(-6deg) scale(.74); transform-origin:center}
  .scHudActions{padding:12px 12px 6px; gap:8px}
}
@media (prefers-reduced-motion:reduce){ .scHud{transition:none} }