:root{
  --bg:#0d1117;--panel:#161b22;--panel2:#21262d;--line:#30363d;
  --text:#f0f6fc;--muted:#8b949e;--accent:#58a6ff;--ok:#3fb950;
  --warn:#d29922;--bad:#f85149;--field:#0d1117;--notice:#0d1117;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f4f6f8;--panel:#fff;--panel2:#eef1f4;--line:#c9d1d9;
  --text:#17202a;--muted:#5f6b76;--accent:#0969da;--ok:#1a7f37;
  --warn:#9a6700;--bad:#cf222e;--field:#fff;--notice:#f6f8fa;
  color-scheme:light;
}
@media(prefers-color-scheme:light){
  html[data-theme="system"]{
    --bg:#f4f6f8;--panel:#fff;--panel2:#eef1f4;--line:#c9d1d9;
    --text:#17202a;--muted:#5f6b76;--accent:#0969da;--ok:#1a7f37;
    --warn:#9a6700;--bad:#cf222e;--field:#fff;--notice:#f6f8fa;
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;min-height:100dvh;background:var(--bg);color:var(--text)}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;overflow:hidden}
button,input,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.app{
  height:100dvh;display:flex;flex-direction:column;
  padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right))
          max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  gap:10px
}
.header-with-actions{display:grid;grid-template-columns:1fr;gap:9px}
.header-title-block h1{margin:0;font-size:clamp(1.05rem,3.6vw,1.45rem);line-height:1.05}
.subtitle{margin-top:3px;color:var(--muted);font-size:clamp(.62rem,2vw,.78rem)}
.header-action-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.header-action-btn{
  min-width:0;min-height:36px;padding:7px 8px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);color:var(--text);display:flex;
  align-items:center;justify-content:center;gap:6px;font-size:clamp(.62rem,1.8vw,.78rem);
  font-weight:850;white-space:nowrap
}
.header-action-icon{font-size:1.05em;font-weight:900}
.drive-grid{
  flex:1;min-height:0;display:grid;
  grid-template-columns:repeat(var(--dashboard-cols,3),minmax(0,1fr));
  grid-template-rows:repeat(var(--dashboard-rows,2),minmax(0,1fr));
  gap:calc(14px * var(--dashboard-gap-scale,1))
}
.drive{
  min-width:0;min-height:0;position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:clamp(11px,2vw,16px);padding:clamp(10px,1.8vw,15px) clamp(29px,4vw,38px)
  clamp(8px,1.6vw,14px) clamp(10px,1.8vw,15px);text-align:left;color:inherit;background:var(--panel2)
}
.drive-id{position:absolute;left:clamp(10px,1.8vw,15px);top:clamp(10px,1.8vw,15px);
  font-weight:950;font-size:clamp(.95rem,3vw,1.4rem)}
.drive-state-rail{position:absolute;top:0;right:0;bottom:0;width:clamp(23px,4vw,32px);
  border-left:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.drive-state{transform:rotate(-90deg);white-space:nowrap;font-weight:950;letter-spacing:.04em;
  font-size:clamp(.52rem,1.7vw,.76rem)}
.drive-main{position:absolute;left:clamp(10px,1.8vw,15px);right:clamp(31px,5vw,42px);
  top:clamp(38px,8vh,58px);bottom:clamp(34px,7vh,52px);overflow:hidden}
.drive-title{font-weight:850;font-size:clamp(.68rem,2.4vw,1rem);line-height:1.2;overflow-wrap:anywhere}
.drive-sub{margin-top:4px;font-size:clamp(.56rem,1.9vw,.8rem);line-height:1.18;opacity:.78}
.drive-footer{position:absolute;left:clamp(10px,1.8vw,15px);right:clamp(31px,5vw,42px);
  bottom:clamp(8px,1.6vw,14px);min-height:18px;display:flex;align-items:center}
.progress-row{width:100%;display:flex;align-items:center;gap:7px}
.progress-track{flex:1;height:8px;border-radius:99px;background:rgba(0,0,0,.28);overflow:hidden}
.progress-fill{height:100%;border-radius:99px;background:#f59e0b}
.progress-pct{font-size:.72rem;font-weight:950}
.drive.empty{background:#163a5f;border-color:#58a6ff}
.drive.ripping{background:#5a3412;border-color:#d29922}
.drive.complete{background:#0e6b2d;border-color:#56d364}
.drive.disc-detected{background:#0f4f59;border-color:#39c5cf}
.drive.waiting{background:#2b3d52;border-color:#6e8fb3}
.drive.error{background:#6b1f24;border-color:#f85149}
html[data-theme="light"] .drive.empty,
html[data-theme="system"] .drive.empty{ }
@media(prefers-color-scheme:light){
  html[data-theme="system"] .drive.empty{background:#DCEFFF;border-color:#9FD4FF;color:#17476C}
  html[data-theme="system"] .drive.ripping{background:#FFE8C7;border-color:#FFC978;color:#6A3B08}
  html[data-theme="system"] .drive.complete{background:#DDF7E5;border-color:#99E7AE;color:#245C35}
  html[data-theme="system"] .drive.disc-detected{background:#D5F8F5;border-color:#8BE8E1;color:#155B57}
  html[data-theme="system"] .drive.waiting{background:#EDE4FF;border-color:#C8B0FF;color:#513A78}
  html[data-theme="system"] .drive.error{background:#FFE0E3;border-color:#FFA2A9;color:#7A2730}
}
html[data-theme="light"] .drive.empty{background:#DCEFFF;border-color:#9FD4FF;color:#17476C}
html[data-theme="light"] .drive.ripping{background:#FFE8C7;border-color:#FFC978;color:#6A3B08}
html[data-theme="light"] .drive.complete{background:#DDF7E5;border-color:#99E7AE;color:#245C35}
html[data-theme="light"] .drive.disc-detected{background:#D5F8F5;border-color:#8BE8E1;color:#155B57}
html[data-theme="light"] .drive.waiting{background:#EDE4FF;border-color:#C8B0FF;color:#513A78}
html[data-theme="light"] .drive.error{background:#FFE0E3;border-color:#FFA2A9;color:#7A2730}


/* v3.4.2: centred popup system restored for drives, Shares and Stats */
.modal-backdrop{
  position:fixed;inset:0;z-index:1800;background:rgba(0,0,0,.66);
  display:flex;align-items:center;justify-content:center;padding:10px
}
.modal{
  width:min(620px,100%);max-height:calc(100dvh - 20px);overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;
  box-shadow:0 22px 70px rgba(0,0,0,.46)
}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.modal-title{font-weight:950;font-size:1.05rem}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.modal-actions .full{grid-column:1/-1}
.eject-btn{background:#d29922;color:#111;border:1px solid #e3b341;border-radius:10px;padding:11px 12px;font-weight:850}
.close-tray-btn{background:#2563eb;color:#fff;border:1px solid #60a5fa;border-radius:10px;padding:11px 12px;font-weight:850}
.cancel-btn{background:#f85149;color:#fff;border:1px solid #ff7b72;border-radius:10px;padding:11px 12px;font-weight:850}
.retry-btn{background:#238636;color:#fff;border:1px solid #3fb950;border-radius:10px;padding:11px 12px;font-weight:850}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.detail{background:var(--notice);border:1px solid var(--line);border-radius:10px;padding:9px}
.detail .k{color:var(--muted);font-size:.66rem}.detail .v{font-weight:800;font-size:.82rem;margin-top:2px;overflow-wrap:anywhere}
@media(max-height:500px){.modal-backdrop{align-items:flex-start;overflow:auto}}

.overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.62);display:flex;justify-content:flex-end}
.drawer{
  width:min(520px,100%);height:100%;background:var(--panel);border-left:1px solid var(--line);
  padding:14px;overflow:auto;display:flex;flex-direction:column;gap:14px
}
.drawer-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding-bottom:14px}
.drawer-title{font-size:1.08rem;font-weight:950;text-align:center;grid-column:2}
.drawer-head #settingsBackHeader{grid-column:1;grid-row:1;justify-self:start}
.drawer-head #settingsClose{grid-column:3;grid-row:1;justify-self:end}
.close-btn,.secondary,.primary{
  border-radius:10px;padding:10px 12px;font-weight:850;border:1px solid var(--line)
}
.close-btn,.secondary{background:var(--panel2);color:var(--text)}
.primary{background:#2f81f7;color:white;border-color:#2f81f7}
.settings-page{display:none}
.settings-page.active{display:flex;flex-direction:column;gap:14px}
.settings-backbar{display:flex;align-items:center;gap:8px;min-height:42px}
.danger-zone{border-color:color-mix(in srgb,#f85149 60%,var(--line)) !important}
.settings-group{margin:0;padding:14px;border:1px solid var(--line);background:var(--notice);border-radius:14px}
.settings-group h3{margin:0 0 14px;font-size:.9rem}
.settings-group-heading{position:relative;display:block;margin:0 0 14px;padding-right:24px}
.settings-group-heading h3{margin:0}
.info-button{
  appearance:none;-webkit-appearance:none;box-sizing:border-box;
  width:18px;height:18px;min-width:18px;margin:0;padding:0;
  border:1px solid currentColor;border-radius:50%;box-shadow:none;
  display:inline-grid;place-items:center;flex:0 0 18px;
  background:transparent;color:var(--accent);cursor:pointer;
  font:800 11px/1 ui-sans-serif,system-ui,sans-serif;text-transform:none
}
.info-button span{display:block;line-height:1;transform:translateY(-.25px)}
.info-button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.info-button:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}
.settings-group-heading>.info-button{position:absolute;top:0;right:0}
.setting-name-with-help,.label-with-help{display:flex;align-items:center;gap:5px}
.setting-name-with-help .info-button,.label-with-help .info-button{width:17px;height:17px;min-width:17px;flex-basis:17px;font-size:10px}
.settings-page-intro>.info-button{margin-left:auto}
.settings-help-panel{display:grid;gap:10px}
.settings-help-panel section{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--notice)}
.settings-help-panel h4{margin:0 0 5px;font-size:.78rem;color:var(--accent)}
.settings-help-panel p{margin:0;font-size:.82rem;line-height:1.45;color:var(--text)}
#genericModal{z-index:2200!important}
.settings-nav-row,.setting-row{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;border:0;border-bottom:1px solid var(--line);background:transparent;
  color:var(--text);text-align:left
}
.settings-nav-row:last-child,.setting-row:last-child{border-bottom:0}
.setting-copy{flex:1;min-width:0}.setting-name{font-weight:850}
.setting-desc{color:var(--muted);font-size:.76rem;margin-top:2px;line-height:1.25}
.settings-chevron{font-size:1.5rem;color:var(--muted)}
.toggle{width:52px;height:30px;border-radius:99px;background:#2b3139;border:1px solid var(--line);
  position:relative;flex:0 0 auto;padding:0}
.toggle:after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;
  background:white;transition:.16s}
.toggle.on{background:var(--accent)}.toggle.on:after{left:24px}
.field{display:flex;flex-direction:column;gap:6px}
.field+.field{margin-top:18px}
.field label{font-size:.72rem;color:var(--muted)}
.field input,.field select{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--field);color:var(--text);outline:none}
.note{padding:10px 12px;border:1px solid var(--line);background:var(--panel2);border-radius:10px;
  color:var(--muted);font-size:.78rem;line-height:1.35}
.savebar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:6px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.node-card{border:1px solid var(--line);background:var(--notice);border-radius:14px;padding:12px}
.node-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.node-name{font-weight:950}.status{font-size:.72rem;font-weight:850;color:var(--ok)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.kpi{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px}
.kpi .k{font-size:.64rem;color:var(--muted)}.kpi .v{font-weight:900;margin-top:2px}
.drive-list{display:grid;gap:7px;margin-top:10px}
.drive-stat{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  border:1px solid var(--line);border-radius:9px;padding:8px}
.drive-stat strong{font-size:.75rem}.drive-stat span{font-size:.68rem;color:var(--muted)}
.drive-stat b{font-size:.72rem;text-align:right;white-space:nowrap}.stats-subtitle{margin-top:12px;
  color:var(--muted);font-size:.64rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.shares{display:grid;gap:10px}.share-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--notice)}
.share-path{font-family:ui-monospace,monospace;font-size:.76rem;overflow-wrap:anywhere;margin-top:5px;color:var(--muted)}
.toast{position:fixed;left:50%;top:12px;transform:translateX(-50%) translateY(-10px);z-index:3000;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 13px;opacity:0;
  pointer-events:none;transition:.18s;font-size:.78rem;font-weight:850}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:560px){
  .stats-grid{grid-template-columns:1fr}
  .header-action-row{gap:6px}
  .drive-grid{gap:10px}
}
@media(max-width:390px){
  .header-action-btn{font-size:.58rem}
  .drive-grid{gap:8px}
}
/* =========================================================
   V3.4.3
   VISUAL MASTER: Ripper Remote V3.3.2 consistent-spacing.
   Functional code remains ripping-only.
   ========================================================= */

/* MAIN SCREEN rhythm copied from v3.3.2 */
.app{gap:10px !important}
.header-with-actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
  align-items:stretch !important;
  min-height:0 !important;
}
.header-action-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}
.header-action-btn{
  min-width:0 !important;
  min-height:36px !important;
  padding:7px 8px !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  background:var(--panel) !important;
  color:var(--text) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  font-size:clamp(.62rem,1.8vw,.78rem) !important;
  line-height:1 !important;
  font-weight:850 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
.header-action-btn:active{transform:translateY(1px)}
.header-action-icon{flex:0 0 auto;font-size:1.05em;line-height:1;font-weight:900}

.drive-grid{gap:14px !important}

/* Tile geometry/title hierarchy from the v3.3.x line */
.drive{
  border-radius:clamp(11px,2vw,16px) !important;
  padding:clamp(10px,1.8vw,15px) clamp(29px,4vw,38px)
          clamp(8px,1.6vw,14px) clamp(10px,1.8vw,15px) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02) !important;
}
.drive-id{
  left:clamp(10px,1.8vw,15px) !important;
  top:clamp(10px,1.8vw,15px) !important;
}
.drive-main{left:clamp(10px,1.8vw,15px) !important}
.drive-footer{left:clamp(10px,1.8vw,15px) !important}
.drive-title{
  font-size:clamp(1rem,2.1vw,1.45rem) !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:-.025em !important;
  color:inherit !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}
.drive-sub{
  margin-top:5px !important;
  font-size:clamp(.62rem,1.25vw,.78rem) !important;
  line-height:1.18 !important;
  font-weight:650 !important;
  color:inherit !important;
  opacity:.72 !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}

/* Bright solid V3.3.2 dark status palette */
@media (prefers-color-scheme: dark){
  html[data-theme="system"] .drive.empty,
  html[data-theme="dark"] .drive.empty{
    background:#67B7FF !important;border-color:#A6D8FF !important;color:#09233A !important;
  }
  html[data-theme="system"] .drive.disc-detected,
  html[data-theme="dark"] .drive.disc-detected{
    background:#3DE1D6 !important;border-color:#8AF6EF !important;color:#073A38 !important;
  }
  html[data-theme="system"] .drive.waiting,
  html[data-theme="dark"] .drive.waiting{
    background:#B995FF !important;border-color:#D8C4FF !important;color:#2C1553 !important;
  }
  html[data-theme="system"] .drive.ripping,
  html[data-theme="dark"] .drive.ripping{
    background:#FFB347 !important;border-color:#FFD28A !important;color:#402400 !important;
  }
  html[data-theme="system"] .drive.complete,
  html[data-theme="dark"] .drive.complete{
    background:#54D879 !important;border-color:#8CF0A7 !important;color:#0B3518 !important;
  }
  html[data-theme="system"] .drive.error,
  html[data-theme="dark"] .drive.error{
    background:#FF626C !important;border-color:#FF9AA1 !important;color:#45080D !important;
  }
  html[data-theme="system"] .drive.ripping .progress-fill{background:#A94F00 !important}
  html[data-theme="system"] .drive.ripping .progress-pct{color:#4B2500 !important}
  html[data-theme="system"] .drive.complete .progress-fill{background:#167D34 !important}
  html[data-theme="system"] .drive.complete .progress-pct{color:#0C4E20 !important}
  html[data-theme="dark"] .drive.ripping .progress-fill{background:#A94F00 !important}
  html[data-theme="dark"] .drive.ripping .progress-pct{color:#4B2500 !important}
  html[data-theme="dark"] .drive.complete .progress-fill{background:#167D34 !important}
  html[data-theme="dark"] .drive.complete .progress-pct{color:#0C4E20 !important}
}

/* Forced-dark must match the system-dark palette too */
html[data-theme="dark"] .drive.empty{background:#67B7FF !important;border-color:#A6D8FF !important;color:#09233A !important}
html[data-theme="dark"] .drive.disc-detected{background:#3DE1D6 !important;border-color:#8AF6EF !important;color:#073A38 !important}
html[data-theme="dark"] .drive.waiting{background:#B995FF !important;border-color:#D8C4FF !important;color:#2C1553 !important}
html[data-theme="dark"] .drive.ripping{background:#FFB347 !important;border-color:#FFD28A !important;color:#402400 !important}
html[data-theme="dark"] .drive.complete{background:#54D879 !important;border-color:#8CF0A7 !important;color:#0B3518 !important}
html[data-theme="dark"] .drive.error{background:#FF626C !important;border-color:#FF9AA1 !important;color:#45080D !important}

/* Original centred modal treatment */
.modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:1000 !important;
  background:rgba(0,0,0,.66) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px !important;
}
.modal-backdrop.hidden{display:none !important}
.modal{
  width:min(620px,100%) !important;
  max-height:calc(100dvh - 20px) !important;
  overflow:auto !important;
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  padding:14px !important;
  box-shadow:0 22px 70px rgba(0,0,0,.46) !important;
}
.modal-head{margin-bottom:12px !important}
.modal-title{font-weight:950 !important;font-size:1.05rem !important}
.note{
  background:var(--notice) !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  padding:9px !important;
  color:var(--muted) !important;
  font-size:.8rem !important;
}
.detail-grid{grid-template-columns:1fr 1fr !important;gap:8px !important;margin-top:10px !important}
.detail{background:var(--notice) !important;border:1px solid var(--line) !important;border-radius:10px !important;padding:9px !important}
.modal-actions{grid-template-columns:1fr 1fr !important;gap:8px !important;margin-top:12px !important}

/* Stats popup: same V3.3.2 cards, never a page */
.stats-grid{grid-template-columns:1fr 1fr !important;gap:10px !important}
.node-card{
  border:1px solid var(--line) !important;
  background:var(--notice) !important;
  border-radius:12px !important;
  padding:11px !important;
}
.kpis{grid-template-columns:1fr 1fr !important;gap:7px !important;margin-top:8px !important}
.kpi{border:1px solid var(--line) !important;border-radius:9px !important;padding:8px !important;background:var(--panel) !important}
.drive-list{gap:6px !important;margin-top:9px !important}
.drive-stat{padding:7px 8px !important;border-radius:9px !important}

/* Shares popup: v3.3.x compact card language */
.shares{display:grid !important;gap:10px !important}
.share-card{
  border:1px solid var(--line) !important;
  background:var(--notice) !important;
  border-radius:12px !important;
  padding:11px !important;
}
.share-path{
  margin-top:8px !important;
  padding:8px !important;
  border:1px solid var(--line) !important;
  border-radius:9px !important;
  background:var(--panel) !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size:.74rem !important;
  overflow-wrap:anywhere !important;
}

/* SETTINGS: preserve separate drawer behaviour but copy v3.3.2 spacing system */
.drawer{
  --sp-1:6px;
  --sp-2:10px;
  --sp-3:14px;
  --sp-4:18px;
  --card-pad:14px;
  width:min(520px,100%) !important;
  padding:14px !important;
  gap:14px !important;
}
.drawer-head{padding-bottom:14px !important}
.settings-page.active{
  display:flex !important;
  flex-direction:column !important;
  gap:var(--sp-3) !important;
}
.settings-page.active > *{margin-top:0 !important;margin-bottom:0 !important}
.settings-backbar{margin:0 !important;min-height:42px !important}
.settings-group{
  margin:0 !important;
  padding:var(--card-pad) !important;
  border-radius:14px !important;
}
.settings-group h3{margin:0 0 var(--sp-3) !important}
.field{display:flex !important;flex-direction:column !important;gap:var(--sp-1) !important;margin:0 !important}
.field + .field{margin-top:var(--sp-4) !important}
.field label{margin:0 !important;font-size:11px !important;color:var(--muted) !important}
.settings-nav-row,.setting-row{padding:13px 0 !important}
.note{margin:0 !important}
.savebar{margin-top:0 !important;padding-top:var(--sp-4) !important;gap:10px !important}

/* V3.3.2 mobile rhythm */
@media(max-width:560px){
  .stats-grid{grid-template-columns:1fr !important}
}
@media(max-width:520px){
  .app{gap:8px !important}
  .header-with-actions{gap:7px !important}
  .header-action-row{gap:6px !important}
  .header-action-btn{padding:6px 4px !important;font-size:.63rem !important;gap:4px !important}
  .drive-grid{gap:12px !important}
  .drawer{
    --sp-1:6px;
    --sp-2:9px;
    --sp-3:12px;
    --sp-4:16px;
    --card-pad:12px;
  }
}
@media(max-width:390px){
  .drive-grid{gap:11px !important}
  .header-action-btn{font-size:.58rem !important}
  .header-action-icon{font-size:1em !important}
}
@media(orientation:landscape) and (max-height:520px){
  .app{gap:7px !important}
  .header-with-actions{gap:4px !important}
  .header-action-btn{min-height:31px !important;padding:5px 6px !important}
  .drive-grid{gap:11px !important}
  .modal-backdrop{align-items:flex-start !important;overflow:auto !important}
}
/* One shared component language for every drive popup */
.drive-popup-info{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin-top:10px !important;
}
.drive-popup-info .info-tile{
  min-width:0 !important;
  min-height:66px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:4px !important;
  padding:10px !important;
  background:var(--notice) !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
}
.drive-popup-info .info-label{
  margin:0 !important;
  color:var(--muted) !important;
  font-size:.66rem !important;
  line-height:1.1 !important;
  font-weight:750 !important;
  text-transform:uppercase !important;
  letter-spacing:.035em !important;
}
.drive-popup-info .info-value{
  margin:0 !important;
  color:var(--text) !important;
  font-size:.82rem !important;
  line-height:1.18 !important;
  font-weight:850 !important;
  overflow-wrap:anywhere !important;
}
.drive-popup-actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  margin-top:12px !important;
}
.popup-secondary-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}
.popup-secondary-actions .dismiss-action:only-child,
.popup-secondary-actions .danger-action:only-child{grid-column:2}
.drive-popup-btn{
  min-width:0 !important;
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 12px !important;
  border-radius:10px !important;
  border:1px solid var(--line) !important;
  font-weight:850 !important;
  line-height:1 !important;
  background:var(--panel2) !important;
  color:var(--text) !important;
  box-shadow:none !important;
}
.drive-popup-btn.primary-action{
  background:#2f81f7 !important;
  color:#fff !important;
  border-color:#58a6ff !important;
}
.drive-popup-btn.success-action{
  background:#238636 !important;
  color:#fff !important;
  border-color:#3fb950 !important;
}
.drive-popup-btn.warning-action{
  background:#d29922 !important;
  color:#111 !important;
  border-color:#e3b341 !important;
}
.drive-popup-btn.danger-action{
  background:#da3633 !important;
  color:#fff !important;
  border-color:#f85149 !important;
}
.drive-popup-btn.full{
  grid-column:1/-1 !important;
}
.drive-popup-btn.popup-primary{width:100% !important}
.drive-popup-btn:disabled{opacity:.48 !important;cursor:not-allowed !important;transform:none !important}
.drive-popup-btn:active{transform:translateY(1px) !important}
.drive-popup-note{
  margin-top:10px !important;
  padding:9px !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  background:var(--notice) !important;
  color:var(--muted) !important;
  font-size:.76rem !important;
}
@media(max-width:420px){
  .drive-popup-info{grid-template-columns:1fr 1fr !important}
  .drive-popup-actions{grid-template-columns:1fr !important}
}
/* v3.3.2 intake + details workflow restored */
.intake-section{margin-top:10px}
.disc-label-info{
  margin-top:8px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;
  background:var(--notice);color:var(--muted);font:650 .72rem/1.25
  ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere
}
.intake-section label{
  display:block;color:var(--muted);font-size:.72rem;margin:10px 0 5px
}
.intake-section input,.intake-section select{
  width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);
  background:var(--field);color:var(--text);outline:none
}
.intake-section input:focus,.intake-section select:focus{border-color:var(--accent)}
.upc-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.upc-row button{min-width:76px}
@media(max-width:480px){
  .upc-row{grid-template-columns:1fr 1fr}
  .upc-row input{grid-column:1/-1}
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.action-full{grid-column:1/-1}
.tray-pair{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tray-pair.single{grid-template-columns:1fr}
.primary,.secondary,.eject-btn,.close-tray-btn,.cancel-btn,.retry-btn{
  min-height:42px;border-radius:10px;padding:11px 12px;font-weight:850
}
.primary{background:#2f81f7;color:#fff;border:1px solid #58a6ff}
.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.eject-btn{background:#d29922;color:#111;border:1px solid #e3b341}
.close-tray-btn{background:#2563eb;color:#fff;border:1px solid #60a5fa}
.cancel-btn{background:#f85149;color:#fff;border:1px solid #ff7b72}
.retry-btn{background:#238636;color:#fff;border:1px solid #3fb950}

.scan-status{
  margin-top:7px;color:var(--muted);font-size:.72rem;line-height:1.25
}
.scanner-focus{caret-color:transparent}

/* same information tiles, same order, every details popup */
.drive-detail-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px
}
.drive-detail-grid .detail{
  min-width:0;min-height:62px;display:flex;flex-direction:column;justify-content:center;
  background:var(--notice);border:1px solid var(--line);border-radius:10px;padding:9px
}
.drive-detail-grid .k{
  color:var(--muted);font-size:.66rem;font-weight:750;text-transform:uppercase;
  letter-spacing:.035em;line-height:1.1
}
.drive-detail-grid .v{
  margin-top:4px;font-weight:850;font-size:.82rem;line-height:1.18;overflow-wrap:anywhere
}
@media(max-width:480px){
  .actions{grid-template-columns:1fr}
  .actions .tray-pair{grid-template-columns:1fr 1fr}
  .action-full{grid-column:auto}
}
/* Live Rip Manager v0.3.0 additions */
.connection-ok{color:var(--ok);font-weight:850}.connection-bad{color:var(--bad);font-weight:850}
.empty-grid{grid-column:1/-1;grid-row:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}
.empty-grid strong{color:var(--text)}
.api-link{display:block;text-align:center;text-decoration:none}
.auth-backdrop{z-index:1000;background:rgba(4,7,12,.86)}
.auth-modal{max-width:420px}
.auth-modal .primary{width:100%}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}.pin-keypad button{min-height:58px;border:1px solid var(--line);border-radius:13px;background:var(--panel2);color:var(--text);font-size:1.35rem;font-weight:850;touch-action:manipulation}.pin-keypad button:active{transform:scale(.97);background:var(--accent);color:#fff}.pin-keypad .pin-control{font-size:.9rem;color:var(--muted)}
.simulator-settings{margin-top:20px}.simulator-settings-head,.simulator-status-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.simulator-settings-head h3{margin:0}.simulator-settings-head small{display:block;color:var(--muted);margin-top:3px}.simulator-status-row{padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:10px}.inline-cancel{border:0;background:transparent;color:var(--danger);font-weight:800;text-decoration:underline;padding:2px 5px}
.rollback-backup{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;margin-top:9px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}.rollback-backup small{display:block;color:var(--muted);margin-top:3px}.rollback-older{margin-top:10px}.rollback-older summary{cursor:pointer;color:var(--muted);font-weight:750;padding:8px 2px}.rollback-backup button{min-width:92px}
.login-error{min-height:1.1rem;color:var(--bad);font-size:.78rem;font-weight:800}
.full-button{width:100%}
.status.offline{color:var(--bad)}
.job-list{display:grid;gap:8px}.job-row{display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(120px,1fr);align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--notice)}
.job-row small{display:block;color:var(--muted);margin-top:3px}.job-state{font-size:.7rem;font-weight:900;text-transform:uppercase;color:var(--ok)}.job-state.bad{color:var(--bad)}
.job-progress{display:flex;align-items:center;gap:7px}.job-progress b{font-size:.72rem}.job-progress .progress-track{min-width:70px}
@media(max-width:520px){.job-row{grid-template-columns:1fr auto}.job-progress{grid-column:1/-1}.header-title-block h1{font-size:1.15rem}}

/* v0.2-style header restored in v0.4 */
.v02-header{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:10px 6px 2px}
.v02-header h1{margin:0;font-size:clamp(26px,4vw,38px);line-height:1;letter-spacing:-.04em}
.v02-eyebrow{font-size:11px;color:var(--muted);font-weight:850;letter-spacing:.17em}
.v02-version{font-size:11px;color:var(--muted);font-weight:750;margin-top:4px}
.v02-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.v02-pill{padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px;font-weight:800}
.v02-pill.good{color:var(--ok)}.v02-pill.bad{color:var(--bad)}
.v02-icon,.v02-action{height:40px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font-weight:800}
.v02-icon{width:40px;font-size:20px}.v02-action{padding:0 13px}
.mobile-nav-wrap{display:none;position:relative;z-index:122}
.mobile-nav-backdrop{display:none}
.mobile-nav-menu{position:absolute;z-index:120;top:44px;right:0;width:min(220px,calc(100vw - 24px));padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 14px 34px rgba(0,0,0,.3)}
.mobile-nav-menu button{display:flex;width:100%;min-height:44px;align-items:center;justify-content:flex-end;gap:12px;padding:9px 11px;border:0;border-radius:9px;background:transparent;color:var(--text);font:inherit;font-weight:800;text-align:right}
.mobile-nav-menu button:hover,.mobile-nav-menu button:focus-visible{background:var(--notice)}
.mobile-nav-divider{height:1px;margin:5px 3px;background:var(--line)}
.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.share-actions a{text-align:center;text-decoration:none}.share-note{margin-top:10px}
@media(max-width:600px){
  .v02-header{align-items:flex-start;position:relative}
  .v02-pill,.v02-actions>#refreshButton,.v02-actions>#sharesButton,.v02-actions>#statsButton,.v02-actions>#settingsButton{display:none}
  .v02-actions{gap:0;flex-wrap:nowrap}
  .mobile-nav-wrap{display:block}
  .mobile-nav-toggle{display:block;width:40px;height:40px}
  .mobile-nav-backdrop{display:block;position:fixed;z-index:110;inset:0;background:rgba(0,0,0,.28)}
  .mobile-nav-backdrop.hidden{display:none}
}
.manager-refresh{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--notice)}
.manager-refresh div{display:grid;gap:3px}.manager-refresh span,.node-refresh span{font-size:.64rem;color:var(--muted);font-weight:750;letter-spacing:.04em;text-transform:uppercase}.manager-refresh strong{font-size:.84rem}.manager-refresh b{font-size:.72rem;color:var(--accent)}
.node-refresh{display:grid;grid-template-columns:1fr;gap:2px;margin-top:9px;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.node-refresh strong{font-size:.75rem}.node-refresh small{color:var(--muted);font-size:.68rem}
.update-status{display:grid;gap:8px}.update-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.update-line small{display:block;color:var(--muted);font-size:.7rem;margin-top:2px}.update-badge{font-size:.6rem;font-weight:900;color:var(--muted)}.update-badge.new{color:var(--warn)}.update-badge.ok,.update-badge.simulator{color:var(--ok)}
.update-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.update-actions .node-update,.update-actions .force-update{grid-column:1/-1}.update-actions button:disabled{opacity:.45;cursor:not-allowed}.update-note{margin-top:10px!important}.update-result{margin-top:4px;padding:8px;border-radius:9px;background:var(--panel2);font-size:.72rem;color:var(--muted)}.update-result.success{color:var(--ok)}.update-result.error,.update-result.failed{color:var(--bad)}

/* ------------------------------------------------------------------ *
 * v0.8.0 — tray-open tile state
 *
 * Rip Node 0.1.16 can tell an open tray apart from a closed empty drive, so
 * the grid gets a state of its own for it. Amber matches the tray controls.
 * ------------------------------------------------------------------ */
.drive.tray-open{background:#5a4212;border-color:#d29922}
html[data-theme="light"] .drive.tray-open{background:#FFF2C8;border-color:#FFD978;color:#665016}
@media(prefers-color-scheme:light){
  html[data-theme="system"] .drive.tray-open{background:#FFF2C8;border-color:#FFD978;color:#665016}
}
html[data-theme="dark"] .drive.tray-open{background:#FFC94A !important;border-color:#FFE1A0 !important;color:#3A2A05 !important}

/* A drive holding a queued rip should read as patient rather than idle. */
.drive.waiting .drive-sub{opacity:.92}
.drive.waiting .drive-state::after{content:" \25CF";animation:waiting-pulse 1.8s ease-in-out infinite}
@keyframes waiting-pulse{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .drive.waiting .drive-state::after{animation:none;opacity:.6}
}

/* Intake uses the exact same primary/tray/third-action hierarchy. */
#intakeActions{margin-top:12px}
#intakeActions button{min-height:46px;width:100%}
.intake-utility-row{display:flex;justify-content:flex-start;margin-top:10px}
.intake-utility-row .secondary{min-height:36px;padding:8px 10px}


/* v0.9.9 — MakeMKV-style current-file + entire-disc progress and ETA */
.drive.has-rip-progress .drive-main{bottom:clamp(72px,13vh,94px)}
.drive.has-rip-progress .drive-footer{min-height:54px;align-items:flex-end}
.rip-progress-stack{display:grid;gap:8px;width:100%}
.rip-progress-stack.compact{gap:5px}
.rip-progress-block{display:grid;gap:4px;min-width:0}
.progress-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;font-size:.69rem;font-weight:850}
.progress-caption span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.9}
.progress-caption b{flex:0 0 auto;font-size:.7rem}
.rip-progress-stack.compact .progress-caption{font-size:.58rem;line-height:1}
.rip-progress-stack.compact .progress-caption b{font-size:.62rem}
.rip-progress-stack.compact .progress-track{height:6px}
.current-file-fill{background:#4ea1ff}
.drive-rip-progress{margin-bottom:12px;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--notice)}
.drive-rip-progress .progress-track{height:9px}
.drive-rip-progress .progress-caption{font-size:.72rem}
@media(max-height:560px){
  .drive.has-rip-progress .drive-main{bottom:62px}
  .drive.has-rip-progress .drive-footer{min-height:47px}
  .rip-progress-stack.compact{gap:3px}
  .rip-progress-stack.compact .progress-caption{font-size:.53rem}
  .rip-progress-stack.compact .progress-track{height:5px}
}
.compact-note{margin-top:10px;font-size:.72rem;line-height:1.45}
.muted-inline{color:var(--muted);font-weight:400}
.settings-group code{font-size:.92em;word-break:break-word}



/* v0.10.4: theme-aware Rip Remote brand lockup */
.v02-brand{
  display:flex;
  align-items:center;
  min-width:0;
  gap:12px;
}
.v02-brand-icon-wrap{
  position:relative;
  width:58px;
  height:58px;
  flex:0 0 58px;
}
.v02-brand-icon{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:none;
}
.v02-brand-icon-dark{display:none}
:root[data-theme="dark"] .v02-brand-icon-light{display:none}
:root[data-theme="dark"] .v02-brand-icon-dark{display:block}

.v02-brand-divider{
  width:1px;
  align-self:stretch;
  min-height:50px;
  background:color-mix(in srgb, currentColor 26%, transparent);
  opacity:.85;
}
.v02-brand-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.v02-eyebrow{
  letter-spacing:.22em;
  font-weight:800;
}
.v02-brand-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.v02-brand-title-row h1{
  margin:0;
  line-height:1;
  white-space:nowrap;
}
.v02-version{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, currentColor 18%, transparent);
  background:color-mix(in srgb, currentColor 6%, transparent);
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
}

@media(max-width:700px){
  .v02-brand{gap:8px}
  .v02-brand-icon-wrap{
    width:44px;
    height:44px;
    flex-basis:44px;
  }
  .v02-brand-divider{min-height:38px}
  .v02-eyebrow{
    letter-spacing:.16em;
    font-size:10px;
  }
  .v02-brand-title-row{gap:6px}
  .v02-brand-title-row h1{
    font-size:clamp(23px,6vw,31px);
  }
  .v02-version{
    min-height:20px;
    padding:2px 7px;
    font-size:10px;
  }
}

/* v0.11.0 metadata chooser and diagnostics */
.barcode-match-list{display:grid;gap:8px;margin:12px 0}.barcode-match{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border:1px solid var(--border,#30363d);border-radius:12px;background:var(--panel,#161b22);color:inherit}.barcode-match>span:first-child{display:grid;gap:4px}.barcode-match small{display:block;color:var(--muted,#8b949e)}.barcode-match-source{text-align:right;font-size:.75rem;font-weight:800}.diagnostic-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border,#30363d)}.diagnostic-line.ok span{color:#3fb950}.diagnostic-line.bad span{color:#f85149}

/* v0.12.0 Settings Control Centre */
.settings-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;gap:18px;padding:22px;margin-bottom:14px;border:1px solid color-mix(in srgb,var(--accent,#ff8a1f) 34%,var(--border,#30363d));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#ff8a1f) 14%,var(--panel,#161b22)),var(--panel,#161b22) 62%)}.settings-hero:after{content:"";position:absolute;width:180px;height:180px;right:-85px;top:-110px;border-radius:50%;border:32px solid color-mix(in srgb,var(--accent,#ff8a1f) 10%,transparent)}.settings-hero h2{font-size:1.55rem;margin:3px 0 5px}.settings-hero p{margin:0;color:var(--muted,#8b949e);font-size:.8rem}.settings-eyebrow{font-size:.62rem;font-weight:900;letter-spacing:.18em;color:var(--accent,#ff8a1f)}.settings-version-pill{position:relative;z-index:1;height:max-content;padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent,#ff8a1f) 14%,transparent);font-size:.7rem;font-weight:900}
.settings-dashboard{display:grid;grid-template-columns:1fr 1fr;gap:10px}.settings-dashboard-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto 15px;align-items:center;gap:10px;min-height:80px;padding:13px;text-align:left;border:1px solid var(--border,#30363d);border-radius:15px;background:color-mix(in srgb,var(--panel,#161b22) 92%,var(--surface,#0d1117));color:inherit;transition:.15s}.settings-dashboard-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent,#ff8a1f) 60%,var(--border,#30363d));background:color-mix(in srgb,var(--accent,#ff8a1f) 5%,var(--panel,#161b22))}.settings-card-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--accent,#ff8a1f) 13%,transparent);border:1px solid color-mix(in srgb,var(--accent,#ff8a1f) 25%,transparent);color:var(--accent,#ff8a1f);font-weight:900}.settings-card-copy{display:grid;gap:3px}.settings-card-copy strong{font-size:.9rem}.settings-card-copy small{font-size:.69rem;line-height:1.35;color:var(--muted,#8b949e)}.settings-card-badge{font-size:.61rem;color:var(--muted,#8b949e);white-space:nowrap}.settings-card-arrow{font-size:1.25rem;color:var(--muted,#8b949e)}.settings-footer-note{display:flex;gap:7px;align-items:center;margin-top:13px;color:var(--muted,#8b949e);font-size:.67rem}.settings-online-dot{width:7px;height:7px;border-radius:50%;background:#3fb950;box-shadow:0 0 0 3px rgba(63,185,80,.1)}
#settingsDrawer .settings-group{border:1px solid var(--border,#30363d);border-radius:15px;padding:13px;margin-bottom:10px;background:color-mix(in srgb,var(--panel,#161b22) 94%,var(--surface,#0d1117))}#settingsDrawer .settings-group h3{text-transform:uppercase;letter-spacing:.07em;font-size:.7rem;color:var(--muted,#8b949e)}
@media(max-width:680px){.settings-dashboard{grid-template-columns:1fr}.settings-card-badge{display:none}.settings-hero{padding:17px}}

/* v0.12.1 — mobile-first blue Settings Control Centre */
.settings-dashboard{display:grid;grid-template-columns:1fr;gap:10px}
.settings-dashboard-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 20px;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:84px;
  padding:14px 15px;
  border:1px solid rgba(112,188,255,.42);
  border-radius:16px;
  background:linear-gradient(145deg,#18558f,#124372);
  color:#fff;
  text-align:left;
  box-shadow:0 5px 16px rgba(5,42,78,.22);
  transition:background .12s ease,border-color .12s ease,transform .12s ease,box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.settings-dashboard-card .settings-card-icon{
  width:46px;height:46px;border-radius:13px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
}
.settings-dashboard-card .settings-card-copy{display:grid;gap:3px}
.settings-dashboard-card .settings-card-copy strong{color:#fff;font-size:.97rem}
.settings-dashboard-card .settings-card-copy small{color:rgba(255,255,255,.78);font-size:.73rem;line-height:1.35}
.settings-dashboard-card .settings-card-badge{
  grid-column:2;
  justify-self:start;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  color:#fff;
  font-size:.62rem;
}
.settings-dashboard-card .settings-card-arrow{
  grid-column:3;grid-row:1 / span 2;
  color:rgba(255,255,255,.82);
  font-size:1.42rem;
}
.settings-dashboard-card:active{
  background:linear-gradient(145deg,#0f3f6e,#0b345d);
  transform:scale(.985);
}
@media(hover:hover) and (pointer:fine){
  .settings-dashboard-card:hover,
  .settings-dashboard-card:focus-visible{
    background:linear-gradient(145deg,#2681d2,#1d68ac);
    border-color:#8bcbff;
    box-shadow:0 8px 24px rgba(18,94,161,.3);
    transform:translateY(-2px);
  }
}

/* Mobile baseline */
#overlay .drawer{width:min(100%,720px)}
#settingsContent{padding-bottom:max(20px,env(safe-area-inset-bottom))}
#settingsContent .field{grid-template-columns:1fr;gap:6px}
#settingsContent input,
#settingsContent select,
#settingsContent button:not(.toggle){min-height:48px;font-size:16px}
#settingsContent .toggle{
  width:52px;
  height:30px;
  min-width:52px;
  min-height:30px;
  max-width:52px;
  max-height:30px;
  padding:0;
  font-size:0;
  flex:0 0 52px;
}
#settingsContent .toggle-row,
#settingsContent .settings-row{min-height:56px}
#settingsContent .full-button{width:100%;min-height:50px}
.settings-hero{padding:17px;border-radius:17px}
.settings-hero h2{font-size:1.4rem}
.settings-hero p{font-size:.79rem;line-height:1.42}
.settings-page-intro{padding:7px 0 14px}
.settings-page-icon{min-width:44px;width:44px;height:44px}
#settingsContent .settings-group{padding:14px;border-radius:15px}
#settingsContent .settings-group .field label{font-size:.83rem}
#settingsContent .note{font-size:.76rem;line-height:1.45}

/* Desktop is enhancement, not the base layout */
@media(min-width:860px){
  .settings-dashboard{grid-template-columns:1fr 1fr}
  #settingsContent .field{grid-template-columns:minmax(180px,.9fr) minmax(240px,1.4fr)}
}

/* Light mode still uses blue cards */
:root[data-theme="light"] .settings-dashboard-card{
  background:linear-gradient(145deg,#d7ecff,#bdddf7);
  color:#0a3154;
  border-color:#83b9e7;
  box-shadow:0 5px 14px rgba(31,90,142,.13);
}
:root[data-theme="light"] .settings-dashboard-card .settings-card-icon{
  background:rgba(22,82,134,.1);
  border-color:rgba(22,82,134,.18);
  color:#174f7e;
}
:root[data-theme="light"] .settings-dashboard-card .settings-card-copy strong{color:#0a3154}
:root[data-theme="light"] .settings-dashboard-card .settings-card-copy small{color:#3f657f}
:root[data-theme="light"] .settings-dashboard-card .settings-card-badge{background:rgba(18,74,121,.09);color:#285876}
:root[data-theme="light"] .settings-dashboard-card .settings-card-arrow{color:#285f8a}
@media(hover:hover) and (pointer:fine){
  :root[data-theme="light"] .settings-dashboard-card:hover,
  :root[data-theme="light"] .settings-dashboard-card:focus-visible{
    background:linear-gradient(145deg,#a9d5f8,#87c2ef);
    border-color:#4699d9;
  }
}

/* v0.12.2 toggle regression guard */
#settingsContent button.toggle{
  width:52px!important;
  height:30px!important;
  min-width:52px!important;
  min-height:30px!important;
  max-width:52px!important;
  max-height:30px!important;
  padding:0!important;
  border-radius:99px;
  flex:0 0 52px!important;
}
#settingsContent button.toggle:after{
  width:24px;
  height:24px;
  top:2px;
  left:2px;
}
#settingsContent button.toggle.on:after{left:24px}

/* v0.13.0 drive mapping */
.drive-node-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.drive-node-title h3{margin:0!important}.drive-node-title small{color:var(--muted);font-size:.68rem}
.drive-map-card{display:grid;gap:10px;padding:13px;margin:9px 0;border:1px solid color-mix(in srgb,#3fb950 40%,var(--line));border-radius:14px;background:color-mix(in srgb,#3fb950 4%,var(--panel2))}
.drive-map-card.missing{border-color:color-mix(in srgb,#f85149 45%,var(--line));background:color-mix(in srgb,#f85149 4%,var(--panel2))}
.drive-map-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.drive-map-head>div{display:grid;gap:3px}.drive-map-head small{font-size:.7rem;color:var(--muted)}
.drive-map-state{font-size:.6rem;font-weight:900;letter-spacing:.06em}.drive-map-state.ok{color:#3fb950}.drive-map-state.bad{color:#f85149}
.drive-map-detail{display:grid;gap:3px}.drive-map-detail span{font-size:.63rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.drive-map-detail code{font-size:.7rem;overflow-wrap:anywhere}
.drive-map-actions,.drive-map-add{display:grid;grid-template-columns:1fr;gap:8px}.drive-map-add{padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}
.danger-button{color:#f85149}
@media(min-width:860px){.drive-map-actions{grid-template-columns:minmax(220px,1fr) auto auto}.drive-map-add{grid-template-columns:160px minmax(220px,1fr) auto}}

/* v0.13.2 update-system version badge */
.update-share-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.update-share-heading h3{margin:0!important}
.update-system-version{font-size:.68rem;font-weight:900;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,#2f81f7 12%,transparent);border:1px solid color-mix(in srgb,#2f81f7 30%,var(--line));color:color-mix(in srgb,#2f81f7 80%,var(--text))}

/* v0.14.0 configurable drive dashboard */
.dashboard-placeholder{background:#2b3139!important;border-color:#444c56!important;cursor:default!important;pointer-events:none}
html[data-theme="light"] .dashboard-placeholder{background:#e5e7eb!important;border-color:#c7cdd4!important}
@media(prefers-color-scheme:light){html[data-theme="system"] .dashboard-placeholder{background:#e5e7eb!important;border-color:#c7cdd4!important}}
.missing-layout-drive{background:#4b2529!important;border-color:#8b3d44!important;cursor:default!important}
html[data-theme="light"] .missing-layout-drive{background:#f5dfe1!important;border-color:#d79ba0!important;color:#702c33!important}
.layout-size-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.layout-cell-list{display:grid;gap:8px}
.layout-cell{display:grid;grid-template-columns:1fr;gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.layout-cell-label{display:grid;gap:2px}.layout-cell-label strong{font-size:.78rem}.layout-cell-label small{font-size:.66rem;color:var(--muted)}
.layout-cell select{width:100%;min-height:48px}
@media(min-width:860px){.layout-cell{grid-template-columns:minmax(180px,.7fr) minmax(260px,1.3fr);align-items:center}}

/* v0.15.0 settings IA */
.sticky-savebar{position:sticky;bottom:-14px;z-index:20;display:grid;grid-template-columns:1fr 1.35fr;gap:8px;margin-top:auto;padding:12px 0 max(12px,env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--panel) 18%)}
.sticky-savebar button:disabled{opacity:.42;cursor:default}
.disabled-setting{opacity:.45;pointer-events:none}.ok-text{color:var(--ok)}
.security-status-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:.78rem}
.layout-preview{display:grid;grid-template-columns:repeat(var(--layout-preview-cols,2),minmax(0,1fr));gap:var(--layout-preview-gap,7px)}
.layout-preview-cell{min-height:72px;border:1px solid var(--line);border-radius:12px;background:#2b3139;overflow:hidden}
.layout-preview-cell.assigned{background:#174d86;border-color:#4d93cf}
.layout-preview-cell select{width:100%;height:100%;min-height:72px;border:0;background:transparent;color:inherit;padding:8px;font-size:.72rem;font-weight:800;text-align:center}
html[data-theme="light"] .layout-preview-cell{background:#e5e7eb}html[data-theme="light"] .layout-preview-cell.assigned{background:#cfe7fb;color:#17476c}
.hardware-node-card{display:grid;gap:10px;padding:12px;margin:8px 0;border:1px solid var(--line);border-radius:13px;background:var(--panel2)}
.hardware-node-head{display:flex;justify-content:space-between;gap:10px}.hardware-node-head>div{display:grid;gap:3px}.hardware-node-head small{font-size:.68rem;color:var(--muted)}
.hardware-state{font-size:.6rem;font-weight:900}.hardware-state.ok{color:var(--ok)}.hardware-state.bad{color:var(--bad)}
.hardware-summary{display:flex;gap:12px;flex-wrap:wrap;font-size:.68rem;color:var(--muted)}.hardware-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.provider-list{display:grid;gap:8px}.provider-card{display:grid;grid-template-columns:minmax(0,1fr) auto 14px;gap:10px;align-items:center;min-height:68px;width:100%;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:inherit;text-align:left}
.provider-card>span:first-child{display:grid;gap:3px}.provider-card small{font-size:.68rem;color:var(--muted);line-height:1.3}.provider-status{font-size:.58rem;font-weight:900}.provider-status.ok{color:var(--ok)}.provider-status.off{color:var(--muted)}
@media(max-width:560px){.hardware-actions{grid-template-columns:1fr}.layout-preview-cell{min-height:64px}.layout-preview-cell select{min-height:64px;font-size:.68rem}}

/* v0.15.1 grid steppers + nested settings navigation */
.grid-stepper-list{display:grid;gap:10px}
.grid-stepper-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:58px;padding:8px 0;border-bottom:1px solid var(--line)
}
.grid-stepper-row:last-child{border-bottom:0}
.grid-stepper-row>span{font-weight:800;font-size:.86rem}
.grid-stepper{
  display:grid;grid-template-columns:48px 44px 48px;align-items:center;gap:6px
}
.grid-stepper strong{text-align:center;font-size:1rem}
.stepper-btn{
  width:48px;height:48px;min-width:48px!important;min-height:48px!important;
  border-radius:12px;border:1px solid var(--line);background:#174d86;color:#fff;
  font-size:1.35rem!important;font-weight:900;line-height:1
}
.stepper-btn:active{transform:scale(.96);background:#0f3f6e}
.stepper-btn:disabled{opacity:.35;cursor:default;transform:none}
@media(hover:hover) and (pointer:fine){
  .stepper-btn:not(:disabled):hover{background:#2681d2;border-color:#8bcbff}
}
html[data-theme="light"] .stepper-btn{background:#cfe7fb;color:#17476c;border-color:#8abbe2}

/* v0.15.2 drive-mapping reconciliation */
.drive-reconcile-panel{
  display:grid;gap:7px;margin:8px 0 14px;padding:11px;
  border:1px solid color-mix(in srgb,#2f81f7 35%,var(--line));
  border-radius:13px;background:color-mix(in srgb,#2f81f7 7%,var(--panel2))
}
.drive-reconcile-panel .primary{min-height:50px}

/* v0.15.3 dashboard spacing */
.spacing-control{display:grid;gap:9px}
.spacing-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem}
.spacing-label strong{font-size:.78rem;color:var(--accent)}
.spacing-control input[type="range"]{width:100%;min-height:42px}
.spacing-scale{display:flex;justify-content:space-between;color:var(--muted);font-size:.64rem}


/* v0.15.5 — global geometry consistency
   One radius system and one spacing rhythm for cards, fields and information cells. */
:root{
  --radius-control:12px;
  --radius-cell:14px;
  --radius-panel:18px;
  --info-pad-y:14px;
  --info-pad-x:14px;
  --info-gap:10px;
}

/* Main structural panels */
.settings-group,
.node-card,
.drive-map-card,
.update-panel,
.stats-card,
.share-card,
.diagnostic-card,
.layout-panel,
.note,
.compact-note,
.info-card{
  border-radius:var(--radius-panel) !important;
}

/* Repeating information rows/cells: equal internal spacing */
.setting-row,
.toggle-row,
.grid-stepper-row,
.diagnostic-line,
.update-row,
.info-row,
.drive-info-row,
.metadata-provider-row,
.settings-menu-row{
  box-sizing:border-box;
  min-height:64px;
  padding:var(--info-pad-y) var(--info-pad-x) !important;
  gap:var(--info-gap) !important;
  align-items:center;
}

/* Form controls and buttons use the same control corner family */
button,
input,
select,
textarea,
.primary,
.secondary,
.danger,
.stepper-btn,
.full-button{
  border-radius:var(--radius-control) !important;
}

/* Nested cards / selectors */
.layout-preview-cell,
.drive-map-device,
.drive-map-auto,
.provider-card,
.control-tile,
.settings-tile{
  border-radius:var(--radius-cell) !important;
}

/* Settings section headings must never collapse into a single text line. */
.settings-section-title,
.settings-page-intro{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.settings-section-icon,
.settings-page-icon{
  flex:0 0 auto;
  width:24px;
  min-width:24px;
  text-align:center;
  line-height:1.4;
}
.settings-section-copy,
.settings-page-copy,
.settings-section-title>div,
.settings-page-intro>div{
  display:grid;
  gap:4px;
  min-width:0;
}
.settings-section-title strong,
.settings-page-intro strong{
  display:block;
  line-height:1.25;
}
.settings-section-title small,
.settings-page-intro small{
  display:block;
  line-height:1.4;
  color:var(--muted);
}

/* Drive mapping has a particularly dense mobile layout. Give every block the
   same rhythm and prevent controls touching card edges. */
.drive-map-card{
  box-sizing:border-box;
  padding:14px !important;
}
.drive-map-card > * + *{
  margin-top:12px;
}
.drive-map-card select,
.drive-map-card button{
  width:100%;
  min-height:54px;
}
.drive-map-card .field,
.drive-map-card .note{
  margin:0;
}

/* Keep info label/value pairs evenly separated on narrow mobile screens. */
.drive-map-card small,
.drive-map-card .muted,
.info-row small,
.setting-row small{
  line-height:1.4;
}
@media (max-width:700px){
  .settings-group{padding:14px !important}
  .setting-row,
  .toggle-row,
  .grid-stepper-row,
  .diagnostic-line,
  .update-row,
  .info-row,
  .drive-info-row,
  .metadata-provider-row,
  .settings-menu-row{
    padding:13px 12px !important;
  }
}

/* v0.17.5: information icons are icons, never full-size Settings controls.
   Keep this after every shared Settings and button rule. */
#settingsContent button.info-button{
  appearance:none!important;-webkit-appearance:none!important;box-sizing:border-box!important;
  display:inline-grid!important;place-items:center!important;flex:0 0 18px!important;
  width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;
  max-width:18px!important;max-height:18px!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  background:transparent!important;color:var(--accent)!important;
  font:400 17px/1 ui-sans-serif,system-ui,sans-serif!important;text-transform:none!important;
}
#settingsContent .settings-group-heading>button.info-button{
  position:absolute!important;top:0!important;right:0!important;
}
#settingsContent .setting-name-with-help button.info-button,
#settingsContent .label-with-help button.info-button{
  flex-basis:17px!important;width:17px!important;height:17px!important;
  min-width:17px!important;min-height:17px!important;max-width:17px!important;max-height:17px!important;
  font-size:16px!important;
}

/* v0.18.0: live, resumable fresh-node installation progress. */
.adopt-progress{display:grid;gap:11px;margin-top:12px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.adopt-progress-head,.adopt-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.adopt-progress-head strong{text-transform:capitalize}.adopt-progress-head span,.adopt-progress-meta{font-size:.72rem;color:var(--muted)}
.adopt-progress-track{height:10px;overflow:hidden;border-radius:99px;background:rgba(127,127,127,.25)}
.adopt-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:var(--accent);transition:width .3s ease}
.adopt-progress.complete .adopt-progress-track span{background:var(--ok)}
.adopt-progress.failed .adopt-progress-track span{background:var(--bad)}
.adopt-progress.failed #adoptProgressMessage{color:var(--bad);font-weight:800}
.adopt-progress-events{display:grid;gap:6px;max-height:270px;margin:0;padding:0;overflow:auto;list-style:none}
.adopt-progress-events li{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:start;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.adopt-progress-events li>span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:.68rem;font-weight:950}
.adopt-progress-events li.done>span{background:var(--ok)}.adopt-progress.failed .adopt-progress-events li.current>span{background:var(--bad)}
.adopt-progress-events strong{display:block;text-transform:capitalize;font-size:.72rem}.adopt-progress-events small{display:block;margin-top:2px;color:var(--muted);font-size:.67rem;line-height:1.35}.adopt-progress-events b{font-size:.65rem;color:var(--muted)}

/* v0.18.3: drive mapping is constrained by the Settings drawer, not by the
   full browser viewport. The old 860px viewport query could apply a wide
   three-column form inside a 520px drawer and force horizontal scrolling. */
.drawer,#settingsContent,.settings-page,.drive-node-group,
.drive-map-card,.drive-map-actions,.drive-map-add{
  min-width:0;
  max-width:100%;
}
.drive-node-group,.drive-map-card{overflow:hidden}
.drive-map-actions,.drive-map-add{
  grid-template-columns:minmax(0,1fr)!important;
}
.drive-map-actions>*,.drive-map-add>*{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
.drive-map-detail code,.drive-map-head small{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.drive-map-add button{white-space:normal}
.system-restart-button{width:100%;min-height:48px}

/* v0.18.4: Chromium/Windows renders the expanded native option list on its
   own light surface. Give options explicit colours instead of inheriting the
   pale closed-control text from the dark application theme. */
select option{
  background:var(--field);
  color:var(--text);
}
.node-terminal-link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--panel2);
  color:var(--text);
  font-weight:850;
  text-decoration:none;
}
.hardware-actions .node-terminal-link{grid-column:1/-1}


.dependency-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}
.dependency-list .update-line {
  align-items: center;
}

.update-line-link {
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.update-line-link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}
.update-line-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}