/* ============================================================
   مَسبَك / MASBAK — tokens taken verbatim from the design file
   «مشروع التصميم - مَسبَك.dc.html» (turn 2 · direction 1a)
   ============================================================ */
:root{
  --bg:#101113; --surface:#17191C; --bar:#131518;
  --border:#2A2D31; --line:#22252A;
  --text:#E7E5E1; --muted:#9A9EA3; --dim:#8B9096; --faint:#7A7F85;
  --accent:#D8A24A; --accent-press:#B8862F; --on-accent:#141312;
  --accent-text:#D8A24A;                               /* accent as text; darker in light mode */
  --pass:#6BBF7F; --pass-text:#CFE6D5;
  --warn-text:#E8D6B4;
  --error:#D8734A; --error-bg:#1D1614; --error-text:#F0C4B1; --error-dim:#A1766A;
  --disabled:#6E7378; --disabled-bg:#1B1E21; --pending:#82878D;
  --chip-bg:#1B1E21; --sunken:#141619; --hairline:#1E2124;
  --hatch-a:#1C1F22; --hatch-b:#22262A;
  --skel-a:#22262A; --skel-b:#1E2124; --skel-bg:#1A1D20;
  --stage-1:#22262B; --stage-2:#141619;
  --deck:#0B0C0D;
  --r-chip:3px; --r-sm:4px; --r-md:6px; --r-frame:38px;
  --gutter:26px;
}
:root[data-appearance="light"]{
  --bg:#F4F2EC; --surface:#FFFFFF; --bar:#FFFFFF;
  --border:#D9D5CB; --line:#E7E3D9;
  --text:#17181A; --muted:#5F5D55; --dim:#67645B; --faint:#6E6A60;
  --accent:#C2872A; --accent-press:#9C6C20; --on-accent:#FFF9EE;
  --accent-text:#8A5D12;
  --pass:#2F7444; --pass-text:#245030;
  --warn-text:#7A5A18;
  --error:#B4512C; --error-bg:#FBF0EB; --error-text:#7E3418; --error-dim:#A87A67;
  --disabled:#7E7A6F; --disabled-bg:#EFEBE1; --pending:#6E6A60;
  --chip-bg:#EFEBE1; --sunken:#FAF8F3; --hairline:#EAE7DF;
  --hatch-a:#EDE9E0; --hatch-b:#E3DED2;
  --skel-a:#E4DFD3; --skel-b:#EDE9E0; --skel-bg:#F0ECE3;
  --stage-1:#FFFFFF; --stage-2:#EDE9E0;
  --deck:#E8E6E1;
}
:root[data-appearance="light"] .btn-primary{ color:#211803; }

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; background:var(--deck); color:var(--text);
  font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  display:flex; align-items:center; justify-content:center;
  transition:background .28s ease;
}
/* IBM Plex Mono carries no Arabic. Listing the Arabic face next means Latin and
   digits come from Plex Mono while Arabic letters fall through to Plex Sans Arabic,
   instead of dropping to whatever monospace face the system happens to have. */
.mono{font-family:'IBM Plex Mono','IBM Plex Sans Arabic','SF Mono',ui-monospace,monospace;}
/* the eyebrow was forced to LTR back when it held only Latin; now that it reads
   "02 — أفكار · 6" it has to follow the Arabic paragraph direction */
:root[dir="rtl"] .eyebrow{direction:rtl; unicode-bidi:isolate;}
:root[dir="rtl"] .eyebrow,
:root[dir="rtl"] .panel-head,
:root[dir="rtl"] .wordmark,
:root[dir="rtl"] .tabbar,
:root[dir="rtl"] .stage .modes,
:root[dir="rtl"] .log{letter-spacing:normal;}
/* the design sets an English subtitle under each Arabic title; in Arabic the
   app carries no decorative English, so those lines are dropped */
/* the removed sub-lines carried the spacing below them; headings take it over */
.card .name{margin-bottom:9px;}
.row .v, .stats .big, .opt .sz, .card .cost, .stage .corner,
.pbar-head span, .field-head span{direction:ltr; unicode-bidi:isolate;}
.ltr{direction:ltr; unicode-bidi:isolate;}
/* Those need direction:ltr so "0.4 mm" reads in order — but that also drags them
   to the left edge, away from the Arabic label they belong to. Alignment follows
   the layout, so a value sits under its own label in both directions. */
.ltr, .stats .big, .card .cost, .note .s{text-align:left;}
:root[dir="rtl"] .ltr,
:root[dir="rtl"] .stats .big,
:root[dir="rtl"] .card .cost,
:root[dir="rtl"] .note .s{text-align:right;}
button{font:inherit; color:inherit; background:none; border:none; padding:0; margin:0; cursor:pointer; text-align:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;}

/* The design draws several controls small — language toggles, chips, the back
   arrow, format pills. They keep exactly that size on screen, but get a finger-
   sized invisible hit area so they are actually tappable on a phone. */
.toggles button, .chip, .backbtn, .formats button,
.stage .modes button, [data-act="regenerate"]{position:relative;}
.toggles button::after, .chip::after, .backbtn::after,
.formats button::after, [data-act="regenerate"]::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:calc(100% + 6px); min-height:44px; height:100%;
}
.backbtn::after{width:44px;}
.stage .modes button::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:calc(100% + 6px); min-height:36px; height:100%;   /* smaller: it sits over the drag area */
}

/* ---------- the device ---------- */
#device{
  width:390px; height:844px; position:relative; overflow:hidden;
  background:var(--bg); color:var(--text);
  border-radius:var(--r-frame);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.5);
  flex:none; isolation:isolate;
  transition:background .28s ease, color .28s ease;
}
@media (max-width:460px), (max-height:900px){
  body{align-items:stretch; justify-content:stretch; background:var(--bg);}
  #device{width:100%; height:100dvh; border-radius:0; box-shadow:none;}
}

/* ---------- screen plumbing ---------- */
.screen{position:absolute; inset:0; display:none; flex-direction:column;}
.screen.on{display:flex;}
.screen.enter{animation:fade .22s ease both;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
/* One rule covers everything that moves. Spinners keep their shape but stop
   turning; the skeleton stops pulsing; sheets, dialogs, toasts and theme
   changes appear at once instead of animating in. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .screen.enter, .sheet.on, .scrim.on, .dialog.on, .pulse{animation:none !important;}
  .toast{transition:none !important;}
}
.body{flex:1 1 auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
.body::-webkit-scrollbar{width:0;}
.pad{padding-inline:var(--gutter);}

/* ---------- top inset (notch / status area) ---------- */
.topinset{flex:none; height:calc(18px + env(safe-area-inset-top, 0px));}

/* ---------- app header ---------- */
.appbar{flex:none; padding:26px var(--gutter) 0; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.brand{display:flex; align-items:center; gap:10px;}
.mark{width:26px; height:26px; border:1.5px solid var(--accent); border-radius:var(--r-chip); position:relative; flex:none;}
.mark::after{content:""; position:absolute; inset:6px; background:var(--accent);}
.wordmark{font-size:13px; letter-spacing:.1em; color:var(--muted);}
.toggles{display:flex; gap:6px; font-size:11px; color:var(--dim);}
.toggles button{padding:4px 8px; border:1px solid var(--border); border-radius:var(--r-chip); transition:.15s;}
.toggles button[aria-pressed="true"]{background:var(--chip-bg); color:var(--text); border-color:var(--border);}

.backbtn{font-size:20px; color:var(--muted); padding:4px 6px; margin-inline-start:-6px;}
.eyebrow{font-size:11px; letter-spacing:.16em; color:var(--accent-text); direction:ltr; text-align:start; unicode-bidi:isolate;}
h1.display{font-size:34px; font-weight:600; line-height:1.25; margin:0 0 34px; letter-spacing:-.01em; text-wrap:balance;}
h2.title{font-size:23px; font-weight:600; margin:0; text-wrap:balance;}

/* ---------- buttons ---------- */
.dock{flex:none; padding:20px var(--gutter) 34px; background:linear-gradient(to top,var(--bg) 60%,transparent);}
.dock.solid{background:var(--bar); border-top:1px solid var(--line); padding-top:18px;}
/* a dock that sits above the tab bar does not also need to clear the home indicator */
.dock.over-tabs{padding-bottom:16px;}
.btn{display:flex; justify-content:center; align-items:center; gap:10px; border-radius:var(--r-md); text-align:center; width:100%; min-height:44px;}
.btn-primary{background:var(--accent); color:var(--on-accent); padding:17px; font-size:17px; font-weight:600;}
.btn-primary:active{background:var(--accent-press);}
.btn-primary[disabled]{background:var(--disabled-bg); border:1px solid var(--border); color:var(--disabled); cursor:not-allowed;}
.btn-secondary{border:1px solid var(--border); color:var(--text); padding:16px; font-size:16px; font-weight:500;}
.btn-secondary:active{background:var(--chip-bg);}
.btn-quiet{border:1px solid var(--border); color:var(--muted); padding:16px; font-size:16px;}
.btn-danger{border:1px solid var(--error); color:var(--error); padding:16px; font-size:16px; font-weight:500;}
.btn-text{color:var(--accent-text); padding:14px; font-size:15px; font-weight:500; width:100%; text-align:center;}
.spin{width:14px; height:14px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; display:inline-block; animation:rot .8s linear infinite;}
.spin-lg{width:56px; height:56px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; margin:0 auto 30px; animation:rot 1s linear infinite;}
@keyframes rot{to{transform:rotate(360deg);}}

/* ---------- field ---------- */
.field{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); transition:border-color .15s, box-shadow .15s;}
.field.focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(216,162,74,.14);}
.field.bad{border-color:var(--error);}
.field-head{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border); font-size:11px; color:var(--dim);}
.field.focus .field-head{color:var(--accent-text);}
.field.bad .field-head{color:var(--error);}
.field textarea{
  display:block; width:100%; border:0; background:none; resize:none; outline:none;
  padding:18px 14px; font-size:19px; line-height:1.4; color:var(--text);
  font-family:inherit; height:62px;
}
.field textarea::placeholder{color:var(--disabled);}
.field-error{display:flex; gap:8px; align-items:center; margin-top:9px; font-size:13px; color:var(--error);}

.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{font-size:13px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--r-sm); color:var(--muted); transition:.15s;}
.chip[aria-pressed="true"]{border-color:var(--accent); color:var(--accent-text); background:rgba(216,162,74,.08);}

/* ---------- panels & rows ---------- */
.panel{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); overflow:hidden;}
.panel.quiet{border-color:var(--line); background:var(--sunken);}
.panel-head{padding:10px 14px; border-bottom:1px solid var(--border); font-size:10px; letter-spacing:.14em; color:var(--muted);}
.row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 14px; border-bottom:1px solid var(--line); font-size:14px; width:100%;}
.row:last-child{border-bottom:0;}
.row .k{color:var(--muted);}
.row .v{font-size:12px; font-family:'IBM Plex Mono','IBM Plex Sans Arabic',ui-monospace,monospace; font-variant-numeric:tabular-nums;}
.row.tall{padding:15px 14px; font-size:15px;}
.row.link:active{background:var(--chip-bg);}
.hint{font-size:15px; line-height:1.7; color:var(--muted); margin:0;}

/* ---------- idea cards ---------- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.card{border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--surface); position:relative; text-align:start; display:block; width:100%;}
.card:active{border-color:var(--accent);}
.card .thumb{height:104px; background:repeating-linear-gradient(135deg,var(--hatch-a) 0 7px,var(--hatch-b) 7px 14px); display:flex; align-items:center; justify-content:center;}
.card .meta{padding:11px;}
.card .name{font-size:14px; font-weight:600; line-height:1.35;}
.card .cost{font-size:10px; color:var(--accent-text); margin-top:9px; direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums;}
.glyph{border:1.5px solid var(--faint); flex:none;}

/* a library card: the whole card opens it, with a small remove control */
.card.lib{padding:0;}
.card.lib .lib-open{display:block; width:100%; text-align:start; color:inherit;}
.card.lib .lib-when{font-size:10px; color:var(--dim); margin-top:6px; direction:ltr;}
:root[dir="rtl"] .card.lib .lib-when{text-align:right;}
.card.lib .lib-x{
  position:absolute; top:6px; inset-inline-end:6px; z-index:2;
  width:26px; height:26px; line-height:1; border-radius:50%;
  background:var(--bg); border:1px solid var(--border); color:var(--muted); font-size:14px;
}
.card.lib .lib-x:active{border-color:var(--error); color:var(--error);}
.card.lib .lib-acts{position:absolute; top:6px; inset-inline-end:6px; z-index:2; display:flex; gap:5px;}
.card.lib .lib-acts .lib-x{position:static;}
.card.lib .lib-star{
  position:absolute; top:6px; inset-inline-start:6px; z-index:2;
  width:26px; height:26px; line-height:1; border-radius:50%;
  background:var(--bg); border:1px solid var(--border); color:var(--muted); font-size:13px;
}
.card.lib .lib-star.on{color:var(--accent-text); border-color:var(--accent);}

/* ---------- your models: search and the all/favourites bar ---------- */
.lib-find{display:flex; align-items:center; gap:8px; margin-top:14px; padding:0 12px;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);}
.lib-find:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(216,162,74,.14);}
.lib-find > span{color:var(--dim); font-size:14px; flex:none;}
.lib-find input{
  flex:1; min-width:0; background:none; border:0; outline:none; color:var(--text);
  font:inherit; font-size:14px; padding:11px 0; text-align:start;
}
.lib-find input::placeholder{color:var(--disabled);}
.lib-find input::-webkit-search-cancel-button{display:none;}
.lib-qx{flex:none; width:24px; height:24px; border-radius:50%; border:1px solid var(--border); background:var(--bg); color:var(--muted); font-size:13px; line-height:1;}
/* the topic doubles as the way to change it */
.ico{display:inline-block; vertical-align:-0.16em; flex:none;}
button .ico{pointer-events:none;}
/* An icon-only control centres its icon by layout. Relying on inline flow put
   it 5px off, because inline content follows text-align — which flips with the
   language, so it was wrong in one direction or the other on every screen. */
.lib-x, .card.lib .lib-star, .lib-qx, .own-x, .backbtn, .stage .corner.tap{
  display:flex; align-items:center; justify-content:center;
}
.lib-x .ico, .card.lib .lib-star .ico, .lib-qx .ico, .own-x .ico, .backbtn .ico{vertical-align:0;}
.stage .corner.tap{gap:5px;}
.ring .ico{width:30px; height:30px; vertical-align:middle;}
.note .dot .ico{width:12px; height:12px; vertical-align:middle;}

.title-edit{display:flex; align-items:baseline; gap:10px; width:100%; text-align:start; color:inherit; flex-wrap:wrap;}
.title-edit > span{font-size:10px; color:var(--accent-text); flex:none;}
.title-edit:active > span{color:var(--text);}

.lib-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap;}
.lib-bar .lib-n{font-size:10px; color:var(--dim);}

/* ---------- resize sheet ---------- */

.rs-read{font-size:26px; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; text-align:center; line-height:1.2;}
:root[dir="rtl"] .rs-read{text-align:center;}
.rs-read .rs-unit{font-size:11px; color:var(--dim); margin-inline-start:6px;}
.rs-bed{font-size:10px; color:var(--dim); text-align:center; margin-top:6px;}
:root[dir="rtl"] .rs-bed{text-align:center;}
.rs-bed .ltr, .rs-step .ltr{direction:ltr; unicode-bidi:isolate; display:inline-block;}
.rs-chips{display:flex; justify-content:center; margin-top:16px;}
.rs-chips .toggles{flex-wrap:wrap; justify-content:center;}
.rs-step{display:flex; gap:10px; margin-top:10px;}
.rs-step .btn{flex:1; border:1px solid var(--border); color:var(--muted); padding:11px 0;}

/* skeleton */
.skel{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--sunken);}
.skel .thumb{height:104px; background:var(--skel-bg);}
.skel .meta{padding:11px; display:flex; flex-direction:column; gap:7px;}
.skel i{display:block; height:11px; background:var(--skel-a); border-radius:2px;}
.skel i+i{background:var(--skel-b);}
.skel i:last-child{height:9px; margin-top:4px;}
.pulse{animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.55;}}

/* ---------- tabs & nav ---------- */
.tabs{display:flex; padding:0 var(--gutter); border-bottom:1px solid var(--line); flex:none;}
.tabs button{padding:11px 16px; font-size:14px; color:var(--dim); margin-bottom:-1px; border-bottom:2px solid transparent;}
.tabs button[aria-selected="true"]{font-weight:600; color:var(--accent-text); border-bottom-color:var(--accent);}
.tabbar{flex:none; display:flex; border-top:1px solid var(--line); background:var(--bar); font-size:10px; letter-spacing:.08em;}
.tabbar button{flex:1; padding:16px 0 30px; text-align:center; color:var(--faint); border-top:2px solid transparent; margin-top:-1px;}
.tabbar button[aria-current="page"]{color:var(--accent-text); border-top-color:var(--accent);}
.tabbar button[disabled]{color:var(--disabled); cursor:not-allowed;}

/* ---------- status notes ---------- */
.note{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); padding:14px; display:flex; gap:12px; align-items:flex-start;}
.note .dot{width:18px; height:18px; border-radius:50%; border:1.5px solid; display:flex; align-items:center; justify-content:center; font-size:11px; flex:none; margin-top:2px;}
.note .t{font-size:14px; font-weight:600; line-height:1.45;}
.note .s{font-size:10px; color:var(--dim); margin-top:4px; direction:ltr; unicode-bidi:isolate;}
.note.ok .dot{border-color:var(--pass); color:var(--pass);} .note.ok .t{color:var(--pass-text);}
.note.warn .dot{border-color:var(--accent); color:var(--accent-text);} .note.warn .t{color:var(--warn-text);}
.note.bad{border-color:var(--error); background:var(--error-bg);}
.note.bad .dot{border-color:var(--error); color:var(--error);} .note.bad .t{color:var(--error-text);} .note.bad .s{color:var(--error-dim);}

/* ---------- progress & log ---------- */
.pbar-head{display:flex; justify-content:space-between; font-size:11px; color:var(--dim); margin-bottom:8px; font-variant-numeric:tabular-nums;}
.pbar{height:4px; background:var(--hatch-b); border-radius:2px; overflow:hidden;}
.pbar i{display:block; height:100%; background:var(--accent); width:0; transition:width .3s linear;}
/* Waiting on the model: there is no progress to report, so the bar says "working"
   instead of inventing a number. */
.pbar.waiting i{width:38% !important; transition:none; animation:slide 1.35s ease-in-out infinite;}
@keyframes slide{0%{margin-inline-start:-38%;} 100%{margin-inline-start:100%;}}
@media (prefers-reduced-motion:reduce){ .pbar.waiting i{animation:none; margin-inline-start:0;} }
.log{border:1px solid var(--line); border-radius:var(--r-md); background:var(--sunken); padding:16px; font-size:11px; line-height:2.1; color:var(--dim);}
.log div{transition:color .3s;}
.log .done{color:var(--pass);} .log .now{color:var(--accent-text);} .log .todo{color:var(--pending);}

/* ---------- stage (3D preview) ---------- */
.stage{
  border:1px solid var(--border); border-radius:var(--r-md); position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 25%,var(--stage-1),var(--stage-2));
  touch-action:none; cursor:grab;
}
.stage:active{cursor:grabbing;}
.stage canvas{display:block; width:100%; height:100%;}
.stage .corner{position:absolute; font-size:10px; color:var(--dim); pointer-events:none;}
.stage .bl{bottom:12px; inset-inline-start:12px;} .stage .br{bottom:12px; inset-inline-end:12px;}
/* the size readout is also the way in to resizing, so it needs a real tap target */
.stage .corner.tap{
  pointer-events:auto; cursor:pointer; padding:6px 9px; margin:-6px -9px;
  border:1px solid var(--border); border-radius:var(--r-chip); background:var(--chip-bg); color:var(--text);
}
.stage .corner.tap:active{border-color:var(--accent); color:var(--accent-text);}
.stage .modes{position:absolute; top:12px; inset-inline-start:12px; display:flex; gap:6px; font-size:10px;}
.stage .modes button{padding:6px 9px; border:1px solid var(--border); border-radius:var(--r-chip); color:var(--dim); background:transparent;}
.stage .modes button[aria-pressed="true"]{background:var(--chip-bg); color:var(--text);}
.hatchbox{border:1px solid var(--border); border-radius:var(--r-md); background:repeating-linear-gradient(135deg,var(--hatch-a) 0 7px,var(--hatch-b) 7px 14px); position:relative; display:flex; align-items:center; justify-content:center;}

/* ---------- format picker ---------- */
.formats{display:flex; gap:8px; font-size:12px;}
.formats button{flex:1; text-align:center; padding:9px 0; border:1px solid var(--border); color:var(--dim); border-radius:var(--r-sm);}
.formats button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent-text);}

/* ---------- stat strip ---------- */
.stats{display:flex;}
.stats div{flex:1; padding:14px; border-inline-end:1px solid var(--line);}
.stats div:last-child{border-inline-end:0;}
.stats .lbl{font-size:10px; color:var(--dim);}
.stats .big{font-size:19px; font-weight:500; margin-top:4px; font-variant-numeric:tabular-nums;}
.stats .big.hot{color:var(--accent-text);}

/* ---------- sheet / dialog ---------- */
.scrim{position:absolute; inset:0; background:rgba(8,9,10,.66); display:none; z-index:20;}
.scrim.on{display:block; animation:fade .18s ease both;}
:root[data-appearance="light"] .scrim{background:rgba(40,36,28,.42);}
.sheet{
  position:absolute; inset-inline:0; bottom:0; z-index:21;
  background:var(--surface); border-top:1px solid var(--border); border-radius:14px 14px 0 0;
  padding:22px var(--gutter) 34px; display:none;
}
.sheet.on{display:block; animation:rise .26s cubic-bezier(.2,.8,.3,1) both;}
@keyframes rise{from{transform:translateY(100%);} to{transform:none;}}
.grabber{width:38px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 22px;}
.sheet.tall.on{display:flex; flex-direction:column; max-height:86%;}
.sheet-scroll{overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
.sheet-scroll::-webkit-scrollbar{width:0;}
.brand-head{font-size:10px; letter-spacing:.2em; color:var(--dim); margin:12px 0 2px; text-transform:uppercase;}
.brand-head:first-child{margin-top:0;}
/* a printer you added sits in a row with a remove control beside it */
.own-row{display:flex; align-items:stretch; gap:6px;}
.own-row .opt{flex:1;}
.own-x{
  flex:none; width:38px; border:1px solid var(--border); border-radius:var(--r-md);
  color:var(--muted); font-size:15px; background:none;
}
.own-x:active{border-color:var(--error); color:var(--error);}
/* the new-printer form uses the app's own field styling */
.field input{
  display:block; width:100%; border:0; background:none; outline:none;
  padding:14px; font-size:17px; color:var(--text); font-family:inherit;
}
.field input::placeholder{color:var(--disabled);}
.opt .d.ltr{text-align:left;}
:root[dir="rtl"] .opt .d.ltr{text-align:right;}
.opt{display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--border); border-radius:var(--r-md); padding:15px 14px; width:100%; text-align:start;}
.opt[aria-pressed="true"]{border-color:var(--accent); background:rgba(216,162,74,.07);}
.opt .n{font-size:15px; font-weight:600;}
.opt .d{font-size:10px; color:var(--dim); margin-top:3px;}
.opt[aria-pressed="true"] .d{color:var(--muted);}
.opt .sz{font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums;}
.opt[aria-pressed="true"] .sz{color:var(--accent-text);}
.dialog{position:absolute; inset:0; z-index:21; display:none; align-items:center; justify-content:center; padding:var(--gutter); background:rgba(8,9,10,.66);}
:root[data-appearance="light"] .dialog{background:rgba(40,36,28,.42);}
.dialog.on{display:flex; animation:fade .18s ease both;}
.dialog .box{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); overflow:hidden; width:100%;}
.dialog .box .txt{padding:18px 16px 14px;}
.dialog .box .txt h3{font-size:17px; font-weight:600; margin:0 0 6px;}
.dialog .box .txt p{font-size:13px; color:var(--muted); line-height:1.55; margin:0;}
.dialog .box .acts{display:flex; border-top:1px solid var(--border);}
.dialog .box .acts button{flex:1; padding:15px; text-align:center; font-size:15px; color:var(--muted);}
.dialog .box .acts button+button{border-inline-start:1px solid var(--border); font-weight:600; color:var(--error);}

/* ---------- misc ---------- */
.stack{display:flex; flex-direction:column;}
.center{text-align:center;}
.ring{border-radius:50%; border:1.5px solid; display:flex; align-items:center; justify-content:center;}
.ring.ok{border-color:var(--pass); color:var(--pass);}
.ring.bad{border-color:var(--error); color:var(--error);}
.ring.dim{border-color:var(--dim); color:var(--dim);}
.ring.accent{border-color:var(--accent); color:var(--accent-text);}
.toast{
  position:absolute; inset-inline:var(--gutter); bottom:110px; z-index:30;
  background:var(--chip-bg); border:1px solid var(--border); border-radius:var(--r-md);
  padding:13px 14px; display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:14px; opacity:0; transform:translateY(8px); pointer-events:none; transition:.24s;
}
.toast.on{opacity:1; transform:none;}
.dev{font-size:10px; letter-spacing:.14em; color:var(--dim);}

/* ---------- development-only state switcher ----------
   Never part of the product. Only rendered when the page is opened with
   ?dev on the query string, or from localhost. Lives outside #device. */
#devbar{
  position:fixed; inset-inline-start:0; top:0; bottom:0; width:210px; z-index:9999;
  background:#0c0d0e; border-inline-end:1px solid #26292d; color:#c9c7c2;
  font-family:'IBM Plex Mono','IBM Plex Sans Arabic',ui-monospace,monospace; font-size:11px;
  overflow-y:auto; padding:14px 12px 24px; direction:ltr; text-align:left;
}
#devbar h4{margin:16px 0 6px; font-size:9px; letter-spacing:.18em; color:#6f7378; font-weight:500; text-transform:uppercase;}
#devbar h4:first-child{margin-top:0;}
#devbar.min{width:auto; inset-inline-end:auto; bottom:auto; padding:6px; max-height:none; overflow:visible;}
#devbar.min > :not(#devtoggle){display:none;}
body.devmode.min{padding-inline-start:0; padding-bottom:0;}
#devtoggle{position:sticky; top:0; margin-bottom:8px; background:#1b1e21 !important; border-color:#3a3f44 !important; color:#d8a24a !important;}
#devbar button{
  display:block; width:100%; text-align:left; padding:6px 8px; margin-bottom:3px;
  border:1px solid #22252a; border-radius:3px; color:#9a9ea3; background:#131518; font:inherit;
}
#devbar button:hover{border-color:#3a3f44; color:#e7e5e1;}
#devbar button[data-on="1"]{border-color:#d8a24a; color:#d8a24a;}
#devbar .pair{display:flex; gap:4px;}
#devbar .pair button{margin-bottom:0;}
#devbar .tag{color:#4e5257; font-size:9px;}
body.devmode{padding-inline-start:210px;}
@media (max-width:760px){
  #devbar{position:fixed; inset:auto 0 0 0; width:auto; max-height:38vh; border-inline-end:0; border-top:1px solid #26292d;}
  body.devmode{padding-inline-start:0; padding-bottom:38vh;}
  body.devmode.min{padding-bottom:0;}
}