/* DentaClinic — the two themes (Haidar 2026-11-05: Version 1 of static/previews/home-redesign/colour-options.html, across the app).
   Light (the default) = a pale teal page, white cards on it, a deep-teal menu with white text, teal for the main button.
   Dark (html[data-theme="dark"]) = the same on slate: never true black, the menu a deep teal, soft cyan for the main button.
   The role colours (--teal/--amber/--green/--rose/--blue: -t tint, -i ink on the tint, -s the strong mark) carry the home's
   numbers and labels (static/home.css). No gradients or glows on surfaces, no shadows except the focus ring and the
   phone menu's overlay. The sun/moon switch sets the dc_theme cookie and the server renders the attribute (no flash).
   The 3D jaw always sits on its own dark stage.
   Type: IBM Plex Sans Arabic for everything (tabular figures for numbers); Sora only for the Latin wordmark. */
:root{
  --bg:#0f1517; --surface:#172024; --surface-2:#1f2a2e; --sunk:#131b1e; --field:#1f2a2e;
  --line:#263236; --line-2:#36454a;
  --ink:#eef3f4; --ink-2:#bfc9cc; --ink-3:#9ba6aa;   /* ink-3: 6.7:1 on a surface, 5.8:1 on a field */
  /* the menu: deep teal in both themes; -hi = hover, -cur = the open page, -line = an edge on it */
  --frame:#0b3540; --frame-ink:#ffffff; --frame-ink-2:#cfe9ee; --frame-hi:#11505e; --frame-cur:#1d6575; --frame-cur-ink:#ffffff; --frame-line:rgba(255,255,255,.16);
  --accent:#5cc6d2; --accent-2:#86d8e0; --accent-ink:#06262b; --accent-soft:#143840;
  --gold:#e9b949; --gold-soft:rgba(233,185,73,.14);
  --ok:#46d68a; --ok-soft:rgba(70,214,138,.14); --warn:#e5a93b; --warn-soft:rgba(229,169,59,.14);
  --bad:#ff7a6b; --bad-soft:rgba(255,122,107,.14); --info:#7aa8ff; --info-soft:rgba(122,168,255,.14);
  --teal-t:#133a42; --teal-i:#a6e3ea; --teal-s:#3fb3c1;
  --amber-t:#3a2a10; --amber-i:#f4c784; --amber-s:#d98a1f;
  --green-t:#123524; --green-i:#92e0b3; --green-s:#34b06a;
  --rose-t:#3d1d1f; --rose-i:#f6aaa5; --rose-s:#e0645d;
  --blue-t:#1a2a4d; --blue-i:#a9c3fb; --blue-s:#5b8af0;
  --grey-t:#222c30; --grey-i:#c3cccf;
  --on-s:#0b1a1d; --row-chair:#142c31; --row-wait:#2a2214; --bar:#2b5a63; --bar-today:#5cc6d2;
  --shadow:none; --lift:none;
  --r:16px; --r-sm:10px;   /* cards · buttons and short inputs */
  --f-ui:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-head:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-mono:"IBM Plex Sans Arabic",system-ui,sans-serif;   /* numbers: the reading font with tabular figures */
  --f-wm:"Sora","IBM Plex Sans",system-ui,sans-serif;
  /* the shell: the page area and the quiet edges of cards and fields */
  --sheet:#0f1517; --sheet-line:transparent; --card-line:transparent; --field-line:#36454a;
  /* booking + schedule (spec §5): the main button, a chosen item, the now line, off/working/taken spans, the amber note */
  --primary:#5cc6d2; --on-primary:#06262b; --primary-hover:#86d8e0;
  --sel-bg:#ffffff; --sel-ink:#000000;
  --now:#5cc6d2;
  /* «خارج الدوام»: the hatch lines >= 3:1 against a working cell (#172024), on a fill a step lighter than it */
  --hatch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2l4-4M0 8l8-8M6 10l4-4' stroke='%23686b6f' stroke-width='1'/%3E%3C/svg%3E");
  --off:#1c2629; --work:#2c3b40; --taken:#e6e6e6; --taken-ink:#000000;
  --warn-line:#5a4520; --warn-bg:#2b2414; --warn-ink:#e5a93b;
  /* each doctor's tone (doctors.PALETTE order): a dark tint behind a light initial; the mark = the ink on slate */
  --tone-1-tint:#1c2d52; --tone-1-ink:#a9c3fb; --tone-1-mark:#9db9f6;
  --tone-2-tint:#4a1b31; --tone-2-ink:#f3a9ca; --tone-2-mark:#ef9ec2;
  --tone-3-tint:#12392d; --tone-3-ink:#95d8c3; --tone-3-mark:#8ed0bc;
  --tone-4-tint:#432d12; --tone-4-ink:#eec28f; --tone-4-mark:#eec28f;
  --tone-5-tint:#2d1e4a; --tone-5-ink:#c4a6f7; --tone-5-mark:#c4a6f7;
  --tone-6-tint:#11333b; --tone-6-ink:#90cedc; --tone-6-mark:#90cedc;
  --tone-7-tint:#44191a; --tone-7-ink:#ef9d9d; --tone-7-mark:#ef9d9d;
  --tone-8-tint:#222e14; --tone-8-ink:#afc493; --tone-8-mark:#afc493;
  /* the 3D stage: dark in BOTH themes (the jaw is lit for a dark room) */
  --stage:#0a0a0b; --stage-2:#141516; --stage-ink:#ffffff; --stage-ink-2:#b4b4b4; --stage-line:#26282a;
  --stage-glow:rgba(69,211,220,.10); --stage-accent:#45d3dc;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#e9f1f1; --surface:#ffffff; --surface-2:#f4f8f8; --sunk:#eef3f3; --field:#ffffff;
  --line:#dfe7e8; --line-2:#cbd5d7;
  --ink:#131416; --ink-2:#434b4e; --ink-3:#5c6467;   /* ink-3: 6.0:1 on white, 5.1:1 on the page */
  --frame:#0e4d5c; --frame-ink:#ffffff; --frame-ink-2:#d6ecef; --frame-hi:#1b6c80; --frame-cur:#e0f1f4; --frame-cur-ink:#0e4d5c; --frame-line:rgba(255,255,255,.2);
  --accent:#1b6c80; --accent-2:#145767; --accent-ink:#ffffff; --accent-soft:#dcedf1;
  --gold:#845809; --gold-soft:rgba(132,88,9,.09);
  --ok:#146c3d; --ok-soft:rgba(20,108,61,.09); --warn:#92400e; --warn-soft:rgba(146,64,14,.09);
  --bad:#b42318; --bad-soft:rgba(180,35,24,.08); --info:#2b59c8; --info-soft:rgba(43,89,200,.08);
  --teal-t:#dcedf1; --teal-i:#0d4a58; --teal-s:#1b6c80;
  --amber-t:#fbecd6; --amber-i:#7a3c05; --amber-s:#c46a0c;
  --green-t:#dcf1e4; --green-i:#0e5530; --green-s:#1d8a4b;
  --rose-t:#fae1e1; --rose-i:#8a1d1d; --rose-s:#c4403a;
  --blue-t:#e2eafc; --blue-i:#1d3f8f; --blue-s:#2f62d0;
  --grey-t:#eceff0; --grey-i:#454c4f;
  --on-s:#ffffff; --row-chair:#eef7f8; --row-wait:#fdf6ea; --bar:#a9d3da; --bar-today:#1b6c80;
  --lift:none;
  --sheet:#e9f1f1; --sheet-line:transparent; --card-line:#dfe7e8; --field-line:#cbd5d7;
  --primary:#1b6c80; --on-primary:#ffffff; --primary-hover:#145767;
  --sel-bg:#131416; --sel-ink:#ffffff;
  --now:#131416;
  /* the hatch lines >= 3:1 against a white working cell */
  --hatch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2l4-4M0 8l8-8M6 10l4-4' stroke='%238e9396' stroke-width='1'/%3E%3C/svg%3E");
  --off:#eef1f3; --work:#dfeaed; --taken:#1b6c80; --taken-ink:#ffffff;
  --warn-line:#efc884; --warn-bg:#fffbeb; --warn-ink:#92400e;
  /* a pale tint behind a dark initial; the mark = the doctor's own colour (≥ 3:1 on white) */
  --tone-1-tint:#dbe5fd; --tone-1-ink:#173d92; --tone-1-mark:#2563eb;
  --tone-2-tint:#fbdeeb; --tone-2-ink:#88184a; --tone-2-mark:#db2777;
  --tone-3-tint:#d9efe7; --tone-3-ink:#035d41; --tone-3-mark:#059669;
  --tone-4-tint:#faefe1; --tone-4-ink:#874a04; --tone-4-mark:#d97706;
  --tone-5-tint:#efe7fd; --tone-5-ink:#4d2493; --tone-5-mark:#7c3aed;
  --tone-6-tint:#e1f2f6; --tone-6-ink:#055a6e; --tone-6-mark:#0891b2;
  --tone-7-tint:#fbe5e5; --tone-7-ink:#881818; --tone-7-mark:#dc2626;
  --tone-8-tint:#eaefe2; --tone-8-ink:#304d09; --tone-8-mark:#4d7c0f;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{font-family:var(--f-head); font-weight:600}
.mono,.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
th.num{font-family:var(--f-ui)}
.ltr{direction:ltr; unicode-bidi:isolate}
.muted{color:var(--ink-3)}
.small{font-size:.84rem}
.hide{display:none !important}
svg.ic{inline-size:18px; block-size:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* ── shell: the deep-teal menu; the page beside it (white cards on the pale teal page; slate in the dark) ── */
.shell{display:grid; grid-template-columns:252px minmax(0,1fr); min-block-size:100vh; background:var(--sheet)}
.side{background:var(--frame); color:var(--frame-ink); display:flex; flex-direction:column; gap:2px;
  padding:16px 12px; position:sticky; inset-block-start:0; block-size:100vh; overflow:auto}
.brand{display:flex; align-items:center; gap:10px; padding:4px 6px 16px; text-decoration:none}
.brand b{display:block; font-weight:600; font-size:1rem; text-align:start}
.brand span{display:block; font-size:.75rem; color:var(--frame-ink-2); line-height:1.3}
.nav-label{font-size:.75rem; color:var(--frame-ink-2); padding:14px 10px 4px}
/* each item reads as a button: hover lights it (a «‹» slides in), pressing sinks it, the current page sits on the
   sheet's colour. Motion only on the arrow and colours, never on the Arabic text. */
.nav a{display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:var(--r-sm); text-decoration:none; cursor:pointer;
  color:var(--frame-ink-2); font-size:.92rem; border:1px solid transparent;
  transition:background-color .15s, color .15s, border-color .15s}
.nav a svg{color:var(--frame-ink-2); transition:color .15s}
.nav a::after{content:""; margin-inline-start:auto; flex:none; inline-size:6px; block-size:6px; border-left:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor; opacity:0; transform:translateX(5px) rotate(45deg); transition:opacity .15s, transform .15s}
.nav a:hover{background:var(--frame-hi); color:var(--frame-ink)}
.nav a:hover svg{color:var(--frame-ink)}
.nav a:hover::after{opacity:.6; transform:translateX(0) rotate(45deg)}
.nav a:active{background:var(--frame-hi)}
.nav a:focus-visible{outline:2px solid var(--frame-ink); outline-offset:1px}
.nav a[aria-current="page"]{background:var(--frame-cur); color:var(--frame-cur-ink); font-weight:600}
.nav a[aria-current="page"] svg{color:var(--frame-cur-ink)}
.nav a[aria-current="page"]::after{opacity:0}
/* «الحسابات» and «الإعدادات» fold: same size and colours as a link, the arrow turns down when open */
.nav-group>summary{display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:var(--r-sm); cursor:pointer; list-style:none;
  color:var(--frame-ink-2); font-size:.92rem; border:1px solid transparent; transition:background-color .15s, color .15s}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary svg{color:var(--frame-ink-2); transition:color .15s}
.nav-group>summary::after{content:""; margin-inline-start:auto; flex:none; inline-size:6px; block-size:6px; border-left:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor; opacity:.7; transform:rotate(45deg); transition:transform .15s}
.nav-group[open]>summary::after{transform:rotate(-45deg)}
.nav-group>summary:hover{background:var(--frame-hi); color:var(--frame-ink)}
.nav-group>summary:hover svg{color:var(--frame-ink)}
.nav-group>summary:focus-visible{outline:2px solid var(--frame-ink); outline-offset:1px}
.nav-group>a{padding-inline-start:24px; margin-block-start:2px}
.main{min-inline-size:0; padding:24px 28px 56px; background:var(--sheet)}
.topbar{display:none}
.as-banner{background:var(--warn-soft); color:var(--warn); border-bottom:1px solid var(--line); padding:6px 16px;
  font-size:.84rem; display:flex; gap:12px; align-items:center}
.as-banner form{margin-inline-start:auto}
/* Part B1: the subscription banner — a warning while it still counts down, the «bad» tone once the clinic is read-only */
.sub-banner{background:var(--warn-soft); color:var(--warn); border-bottom:1px solid var(--line); padding:7px 16px;
  font-size:.86rem; display:flex; gap:10px; align-items:center; line-height:1.5}
.sub-banner .ic{flex:none}
.sub-banner.sub-readonly{background:var(--bad-soft); color:var(--bad)}
.page-head .sub-line{margin-top:6px; color:var(--ink-2)}

/* the sun / moon switch (both icons in the button; the theme shows the one that leads to the other mode) */
.theme-switch{display:inline-flex; align-items:center; gap:6px; background:var(--field); border:1px solid var(--field-line); color:var(--ink-2);
  border-radius:var(--r-sm); padding:5px 12px; font-size:.8rem; cursor:pointer}
.theme-switch:hover{border-color:var(--ink-3); color:var(--ink)}
.theme-switch svg{inline-size:15px; block-size:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.theme-switch > span{display:inline-flex; align-items:center; gap:6px}
.theme-switch .to-dark{display:none}
:root[data-theme="light"] .theme-switch .to-light{display:none}
:root[data-theme="light"] .theme-switch .to-dark{display:inline-flex}

/* the account control: top-left of every page (the top bar on phones) — initial + name + role, and its menu;
   the light/dark switch sits beside it as an icon */
.userbar{display:flex; justify-content:flex-end; margin:-8px 0 16px}
.userctl{display:flex; align-items:center; gap:8px}
.icon-btn{display:inline-grid; place-items:center; inline-size:40px; block-size:40px; border:1px solid var(--field-line); background:var(--field);
  color:var(--ink-2); border-radius:var(--r-sm); cursor:pointer; flex:none}
.icon-btn:hover{border-color:var(--ink-3); color:var(--ink)}
.icon-btn svg{inline-size:18px; block-size:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.theme-ic .to-dark{display:none}
:root[data-theme="light"] .theme-ic .to-light{display:none}
:root[data-theme="light"] .theme-ic .to-dark{display:block}
.usermenu{position:relative}
.usermenu summary{list-style:none; display:flex; align-items:center; gap:10px; min-block-size:40px; padding:4px 8px 4px 12px; border:1px solid var(--field-line);
  background:var(--field); border-radius:var(--r-sm); cursor:pointer; user-select:none}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu summary:hover,.usermenu[open] summary{border-color:var(--ink-3)}
.usermenu .avatar{inline-size:30px; block-size:30px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--accent); color:var(--accent-ink); font-family:var(--f-head); font-weight:600; font-size:.92rem}
.usermenu .avatar svg{inline-size:17px; block-size:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.usermenu .who{display:flex; flex-direction:column; line-height:1.25; text-align:start}
.usermenu .who b{font-size:.9rem; font-weight:600; color:var(--ink); white-space:nowrap}
.usermenu .who span{font-size:.75rem; color:var(--ink-3); white-space:nowrap}
.usermenu .chev{inline-size:15px; block-size:15px; color:var(--ink-3); transition:transform .2s}
.usermenu[open] .chev{transform:rotate(180deg)}
.usermenu .menu{position:absolute; inset-inline-end:0; inset-block-start:calc(100% + 6px); min-inline-size:250px; z-index:45;
  background:var(--surface-2); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--lift); padding:6px}
.usermenu .menu-head{padding:8px 10px 10px; border-bottom:1px solid var(--line-2); margin-bottom:4px}
.usermenu .menu-head b{display:block; font-size:.92rem}
.usermenu .menu-head span{display:block; font-size:.76rem; color:var(--ink-3)}
.usermenu .menu form{margin:0}
.usermenu .menu a,.usermenu .menu button{display:flex; align-items:center; gap:10px; inline-size:100%; padding:9px 10px; border:0; background:none;
  border-radius:min(var(--r-sm),10px); color:var(--ink-2); font-size:.9rem; text-align:start; text-decoration:none; cursor:pointer}
.usermenu .menu a:hover,.usermenu .menu button:hover{background:var(--field); color:var(--ink)}
.usermenu .menu button:hover svg{color:var(--bad)}

/* ── page head ── */
.page-head{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-block-end:18px}
.page-head h1{margin:0; font-size:1.45rem; line-height:1.35}
.page-head .sub{color:var(--ink-3); font-size:.88rem; margin-top:3px}
.page-head .actions{margin-inline-start:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.page-head .actions input,.page-head .actions select,.row > input[type=date],.row > input[type=search],.row > select{inline-size:auto}

/* ── panels (cards) + grid: light = white on the sheet with a fine border; dark = a lighter surface, no border ── */
.card{background:var(--surface); border:1px solid var(--card-line); border-radius:var(--r); padding:16px 18px}
.card > h2,.card > h3{margin:0 0 12px; font-size:1.02rem}
.card-head{display:flex; align-items:center; gap:8px; margin-block-end:12px}
.card-head h2,.card-head h3{margin:0; font-size:1.02rem}
.card-head .actions{margin-inline-start:auto; display:flex; gap:6px}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex; flex-direction:column; gap:14px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.stat{background:var(--surface); border:1px solid var(--card-line); border-radius:var(--r); padding:14px 18px}
.stat .k{font-size:.78rem; color:var(--ink-3)}
.stat .v{font-family:var(--f-mono); font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px; line-height:1.25}
.stat .v.gold{color:var(--accent)} .stat .v.bad{color:var(--bad)} .stat .v.ok{color:var(--ok)}
.stat .d{font-size:.78rem; color:var(--ink-3)}

/* ── buttons (dark: pills; light: 6 px) ── */
.btn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); background:var(--field); color:var(--ink);
  border-radius:var(--r-sm); padding:7px 15px; font-size:.9rem; font-weight:500; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .15s, border-color .15s, color .15s}
.btn:hover{border-color:var(--ink-3)}
.btn-primary{background:var(--primary); border-color:var(--primary); color:var(--on-primary); font-weight:600}
.btn-primary:hover{background:var(--primary-hover); border-color:var(--primary-hover)}
.btn-dark{background:var(--surface-2); border-color:var(--line-2); color:var(--ink)}   /* a quiet secondary action (search) */
.btn-ghost{background:transparent; border-color:transparent}
.btn-ghost:hover{background:var(--sunk); border-color:transparent}
.btn-danger{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 45%,transparent); background:transparent}
.btn-danger:hover{background:var(--bad-soft); border-color:var(--bad)}
.btn-sm{padding:4px 11px; font-size:.82rem}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px}

/* ── state tags: a dot, colour only for the state ── */
.chip{display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-sm); padding:1px 9px; font-size:.78rem;
  background:var(--sunk); color:var(--ink-2); white-space:nowrap; border:1px solid transparent}
.chip i{inline-size:6px; block-size:6px; border-radius:50%; background:currentColor}
.chip.ok{background:var(--ok-soft); color:var(--ok)} .chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.bad{background:var(--bad-soft); color:var(--bad)} .chip.info{background:var(--info-soft); color:var(--info)}
.chip.gold{background:var(--gold-soft); color:var(--gold)} .chip.accent{background:var(--accent-soft); color:var(--accent)}
.alert-chips{display:flex; flex-wrap:wrap; gap:6px}
.alert-chips .chip{background:var(--bad-soft); color:var(--bad); font-weight:500}

/* ── tables ── */
.tbl-wrap{overflow-x:auto}
.tbl{inline-size:100%; border-collapse:collapse; font-size:.9rem}
.tbl th{font-weight:500; color:var(--ink-3); font-size:.76rem; text-align:start; padding:9px 10px; border-bottom:1px solid var(--line-2); white-space:nowrap}
.tbl td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.voided td{color:var(--ink-3); text-decoration:line-through}
.tbl td.num,.tbl th.num{text-align:end; white-space:nowrap}
.tbl td.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.tbl a.rowlink{text-decoration:none; font-weight:500}
.tbl a.rowlink:hover{color:var(--accent)}

/* ── forms: short inputs are pills in the dark theme; a textarea and a select keep a softer card radius ── */
.form{display:grid; gap:14px}
.fields{display:grid; gap:12px 14px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.field{display:flex; flex-direction:column; gap:5px; min-inline-size:0}
.field.wide{grid-column:1 / -1}
.field label,.lbl{font-size:.82rem; color:var(--ink-2); font-weight:500}
.field .hint{font-size:.76rem; color:var(--ink-3)}
input:not([type]),input[type=text],input[type=search],input[type=password],input[type=date],input[type=time],input[type=number],
input[type=tel],input[type=datetime-local],select,textarea{
  inline-size:100%; background:var(--field); color:var(--ink); border:1px solid var(--field-line); border-radius:var(--r-sm);
  padding:8px 14px; font-size:.93rem; min-block-size:40px}
select{border-radius:min(var(--r-sm),12px); padding-inline:12px}
textarea{min-block-size:84px; resize:vertical; border-radius:min(var(--r-sm),12px)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.checks{display:flex; flex-wrap:wrap; gap:8px}
.check{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:5px 12px;
  font-size:.86rem; cursor:pointer; background:var(--field)}
.check input{accent-color:var(--accent)}
.check:has(input:checked){border-color:var(--sel-bg); background:var(--sel-bg); color:var(--sel-ink)}
.form-actions{display:flex; gap:8px; flex-wrap:wrap}
.search-bar{display:flex; gap:8px}
.search-bar input{flex:1}

/* ── toasts: inverted (ink on the page colour) so they stand out without a shadow; an error is the «bad» colour ── */
.toasts{position:fixed; inset-block-start:14px; inset-inline:0; margin:auto; z-index:50; display:flex; flex-direction:column;
  gap:8px; align-items:center; pointer-events:none}
.toast{pointer-events:auto; background:var(--ink); color:var(--bg); border:0; border-inline-start:4px solid var(--accent);
  border-radius:12px; padding:10px 16px; font-size:.9rem; font-weight:500; box-shadow:var(--lift); max-inline-size:min(560px,92vw);
  animation:toast-in .25s ease both}
.toast.error{background:var(--bad); color:var(--bg); border-inline-start-color:var(--bad)}
.toast.ok{border-inline-start-color:var(--ok)}
@keyframes toast-in{from{opacity:0}to{opacity:1}}

/* ── tabs (patient file) ── */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-block:14px 18px; overflow-x:auto}
.tabs a{padding:9px 14px; text-decoration:none; color:var(--ink-2); border-bottom:2px solid transparent; white-space:nowrap; font-size:.92rem}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}

/* ── patient header ── */
.pt-head{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.pt-avatar{inline-size:52px; block-size:52px; border-radius:50%; background:var(--accent-soft); color:var(--accent); border:0;
  display:grid; place-items:center; font-family:var(--f-head); font-weight:700; font-size:1.25rem; flex:none}
.pt-head h1{margin:0; font-size:1.4rem; line-height:1.3}
.pt-meta{color:var(--ink-3); font-size:.86rem; display:flex; gap:6px 14px; flex-wrap:wrap}
.pt-meta b{color:var(--ink-2); font-weight:500}
.pt-bal{margin-inline-start:auto; display:flex; gap:10px; flex-wrap:wrap}
.bal{border:1px solid var(--card-line); border-radius:min(var(--r-sm),12px); padding:6px 14px; background:var(--sunk); text-align:center; min-inline-size:120px}
.bal .k{font-size:.75rem; color:var(--ink-3)}
.bal .v{font-family:var(--f-mono); font-weight:600; font-variant-numeric:tabular-nums}
.bal.owes .v{color:var(--bad)} .bal.credit .v{color:var(--ok)}

/* ── misc ── */
.empty{padding:28px 12px; text-align:center; color:var(--ink-3)}
.empty svg{inline-size:40px; block-size:40px; stroke:var(--ink-3); opacity:.7}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:.9rem}
.kv dt{color:var(--ink-3)} .kv dd{margin:0}
.kv dd.ltr,.tbl td.ltr{text-align:end}   /* an ltr box in an rtl page starts at the far side, away from its label */
.list{list-style:none; margin:0; padding:0}
.list li{padding:9px 0; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center}
.list li:last-child{border-bottom:0}
.dot{inline-size:10px; block-size:10px; border-radius:50%; flex:none}
.divider{block-size:1px; background:var(--line); margin-block:12px}
.money-iqd{color:var(--ink)} .money-usd{color:var(--info)}
details.inline summary{cursor:pointer; color:var(--ink-2); font-size:.88rem}

/* ── login: the dark 3D stage (both themes) + the sign-in panel ── */
.login-wrap{min-block-size:100vh; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(400px,1fr); background:var(--bg)}
.login-art{--art-pad:44px; color:var(--stage-ink); padding:30px var(--art-pad) 32px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;
  background:var(--stage)}
.login-art .arch{position:absolute; inset-inline-end:-80px; inset-block-end:-60px; inline-size:440px; opacity:.18; color:var(--stage-ink)}
.sc{position:relative; flex:1; min-block-size:440px; display:flex; flex-direction:column; gap:12px; margin-inline:calc(-1 * var(--art-pad))}
.sc-view{position:relative; flex:1; min-block-size:300px}
/* the 3D bleeds to the stage's edges and fades out softly instead of stopping at a hard line (a mask, not a surface) */
.sc-stage{position:absolute; inset:0; cursor:grab; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-composite:intersect}
.sc-stage:active{cursor:grabbing}
.sc-stage canvas{display:block}
/* «drag me»: a moving hand on the jaw until the first drag (motion on the icon only, never on Arabic text) */
.sc-hint{position:absolute; inset-block-end:1.5%; inset-inline:0; margin-inline:auto; inline-size:max-content; display:flex; align-items:center; gap:7px;
  padding:6px 14px 6px 12px; border-radius:999px; background:color-mix(in srgb,var(--stage-2) 90%,transparent); border:1px solid var(--stage-line); color:var(--stage-ink);
  font-size:.79rem; pointer-events:none; transition:opacity .6s ease}
.sc-hint svg{inline-size:19px; block-size:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.sc-hint .sc-arrows{color:var(--stage-accent); inline-size:17px}
.sc-hand{animation:scHand 2.2s ease-in-out infinite}
@keyframes scHand{0%,100%{transform:translateX(-5px) rotate(-6deg)} 50%{transform:translateX(5px) rotate(6deg)}}
.sc.dragged .sc-hint{opacity:0}
/* the caption: its own panel under the jaw (never over the teeth); the box stays, only its text fades */
.sc-cap{margin-inline:var(--art-pad); min-block-size:6.2em; padding:12px 16px 13px; border-radius:16px; background:var(--stage-2);
  border:0; pointer-events:none}
.sc-cap > *{opacity:0; transition:opacity .45s ease}
.sc-cap.on > *{opacity:1}
.sc-kicker{display:block; font-size:.75rem; font-weight:600; color:var(--stage-accent)}
.sc-title{display:block; font-family:var(--f-head); font-weight:600; font-size:1.12rem; color:var(--stage-ink); margin:1px 0 3px}
.sc-text{display:block; font-size:.85rem; line-height:1.65; color:var(--stage-ink-2)}
.sc-fallback{display:none}
.sc.fallback .sc-fallback{display:block; inset-inline-end:auto; inset-inline-start:50%; inset-block-end:auto; inset-block-start:4%;
  translate:-50% 0; inline-size:min(440px,90%); opacity:.35}
.sc.fallback .sc-hint{display:none}
.sc.fallback .sc-cap > *{opacity:1}
/* the tooth buttons: each wears the colour of the ring that state has on the 3D tooth; a bar fills while it runs */
.sc-try{display:flex; align-items:center; gap:8px; margin:4px var(--art-pad) 0; font-size:.82rem; color:var(--stage-ink-2)}
.sc-try svg{inline-size:17px; block-size:17px; fill:none; stroke:var(--stage-accent); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; flex:none}
.sc-chips{display:flex; flex-wrap:wrap; gap:6px; padding-inline:var(--art-pad)}
.sc-chips button{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:7px; font-size:.84rem;
  padding:7px 13px; border-radius:999px; border:1px solid var(--stage-line); background:var(--stage-2); color:var(--stage-ink-2);
  cursor:pointer; transition:background-color .3s, border-color .3s, color .3s}
.sc-chips button::before{content:""; inline-size:8px; block-size:8px; border-radius:50%; background:var(--dot, currentColor); flex:none}
.sc-chips [data-chip="0"]{--dot:#ff8f84} .sc-chips [data-chip="1"]{--dot:#ef4444} .sc-chips [data-chip="2"]{--dot:#3b82f6}
.sc-chips [data-chip="3"]{--dot:#a78bfa} .sc-chips [data-chip="4"]{--dot:#e0b04a} .sc-chips [data-chip="5"]{--dot:#22c1d6}
.sc-chips [data-chip="6"]{--dot:#9fb2c3} .sc-chips [data-chip="7"]{--dot:#e8f6fb}
.sc-chips button::after{content:""; position:absolute; inset-inline:12px; inset-block-end:0; block-size:2px; background:var(--stage-accent);
  transform:scaleX(0); transform-origin:100% 50%}
.sc-chips button:hover{border-color:var(--stage-ink-2); color:var(--stage-ink)}
.sc-chips button:focus-visible{outline:2px solid var(--stage-accent); outline-offset:2px}
.sc-chips button[aria-current="true"]{color:var(--stage-ink); border-color:var(--stage-accent); background:var(--stage-2)}
.sc-chips.run button[aria-current="true"]::after{animation:scProg var(--step-ms, 5000ms) linear forwards}
.sc-chips.paused button[aria-current="true"]::after{animation-play-state:paused}
@keyframes scProg{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.login-form{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; padding:40px 40px;
  background:var(--bg)}
.login-form .theme-switch{position:absolute; inset-block-start:16px; inset-inline-end:16px}
.signin{inline-size:min(420px,100%); background:var(--surface); border:1px solid var(--sheet-line); border-radius:16px; padding:28px}
.signin .login-logo{display:block; max-inline-size:140px; max-block-size:72px; object-fit:contain; margin-bottom:14px}
.signin .eyebrow{display:block; font-size:.8rem; font-weight:600; color:var(--accent); margin-bottom:4px}
.signin h1{margin:0 0 4px; font-size:1.75rem; line-height:1.3}
.signin .lead{margin:0 0 18px; color:var(--ink-2); font-size:.9rem}
.signin .btn-primary{justify-content:center; padding:11px 16px; font-size:1rem}

/* ── the home's search box (the rest of the home: static/home.css) ── */
.home-search{display:flex; align-items:center; gap:8px; background:var(--field); border:1px solid var(--field-line); border-radius:var(--r-sm);
  padding:0 14px; min-inline-size:min(320px,100%); color:var(--ink-3)}
.home-search input{border:0; background:transparent; padding:8px 0; min-block-size:38px}
.home-search input:focus{box-shadow:none}
.home-search:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:.76rem; color:var(--ink-2)}
.att-count{margin-inline-start:auto; min-inline-size:26px; block-size:24px; border-radius:999px; display:grid; place-items:center; padding-inline:8px;
  background:var(--warn-soft); color:var(--warn); font-size:.8rem; font-weight:600}
.att{list-style:none; margin:0; padding:0}
.att li{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.att li:last-child{border-bottom:0}
.att-ic{inline-size:34px; block-size:34px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--sunk); color:var(--ink-2)}
.att-lab .att-ic{color:var(--info); background:var(--info-soft)}
.att-late .att-ic{color:var(--bad); background:var(--bad-soft)}
.att-req .att-ic{color:var(--accent); background:var(--accent-soft)}
.att-acts{display:flex; gap:6px; flex:none; align-items:center}
.att-acts form{display:contents}
.req-note{font-style:normal; color:var(--ink-2) !important}
.req-banner{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.settings-sec{border-top:1px solid var(--line); padding-top:14px}
.settings-sec h2{margin:0 0 4px; font-size:1rem}
.settings-sec .checks{margin-top:10px}
.public-link{margin-top:10px; overflow-wrap:anywhere}
/* segmented choice (offer: down payment, months): the chosen one in the selection colours */
.seg{display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:min(var(--r-sm),12px); background:var(--sunk); border:1px solid var(--card-line)}
.seg button{font:inherit; font-size:.86rem; padding:5px 13px; border:0; background:transparent; color:var(--ink-2); cursor:pointer; min-inline-size:42px;
  border-radius:min(var(--r-sm),10px); font-variant-numeric:tabular-nums}
.seg button:hover{color:var(--ink); background:var(--field)}
.seg button[aria-pressed="true"]{background:var(--sel-bg); color:var(--sel-ink); font-weight:600}
.offer-out{padding:12px 14px; border-radius:var(--r); background:var(--sunk); border:1px solid var(--card-line)}
.offer-out .k{display:block; font-size:.8rem; color:var(--ink-3)}
.offer-out .v{display:block; font-family:var(--f-head); font-size:1.7rem; font-weight:600; color:var(--accent); line-height:1.3;
  font-variant-numeric:tabular-nums}
.offer-out .d{display:block; font-size:.84rem; color:var(--ink-2)}
/* printed footer: hours, days off, WhatsApp (receipt, quote, prescription) */
.print-foot{margin-top:18px; padding-top:8px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:4px 14px; font-size:.76rem; color:var(--ink-3)}
.print-foot > span{display:inline-flex; align-items:center; gap:5px}
.print-foot svg.ic{inline-size:14px; block-size:14px}
.quote .print-foot,.rx-sheet .print-foot{color:#555; border-top-color:#ddd}   /* these sheets stay paper-white */
/* the last line of a printout: the system's logo and name, small, under the clinic's own details */
.print-foot{break-inside:avoid}
.print-sys{margin-top:8px; display:flex; align-items:center; justify-content:center; gap:5px; font-size:.75rem; color:var(--ink-3);
  break-before:avoid; break-inside:avoid}   /* never alone on a second sheet */
.print-sys img{inline-size:14px; block-size:14px}
.print-sys .wordmark,.print-sys .wordmark i{color:inherit}
.quote .print-sys,.rx-sheet .print-sys{color:#555}
.att-t{flex:1; min-inline-size:0; display:flex; flex-direction:column}
.att-t b{font-size:.88rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.att-t b a{text-decoration:none} .att-t b a:hover{color:var(--accent)}
.att-t span{font-size:.76rem; color:var(--ink-3)}
.att li .btn{flex:none}

/* ── print ── */
@media print{
  :root,:root[data-theme]{--bg:#fff; --surface:#fff; --surface-2:#fff; --sunk:#f3f3f3; --ink:#000; --ink-2:#333; --ink-3:#555; --line:#ccc; --line-2:#bbb;
    --sheet:#fff; --sheet-line:transparent}   /* the shell's sheet never prints a frame */
  .side,.topbar,.userbar,.no-print,.toasts,.as-banner,.sub-banner{display:none !important}
  .shell{display:block} .main{padding:0}
  body{background:#fff; color:#000}
  .card{border-color:#ccc}
}

/* ── phone: no sheet frame (the page runs full width under the top bar) ── */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed; inset-block:0; inset-inline-start:0; inline-size:272px; z-index:40; transform:translateX(100%); transition:transform .2s}
  body.nav-open .side{transform:none}
  body.nav-open::after{content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:30}
  .topbar{display:flex; align-items:center; gap:10px; padding:8px 12px 8px 16px; background:var(--frame); color:var(--frame-ink);
    position:sticky; inset-block-start:0; z-index:20}
  .topbar > button{display:grid; place-items:center; flex:none; inline-size:44px; block-size:44px; margin-inline-start:-10px; background:none; border:0; color:var(--frame-ink); padding:0; cursor:pointer}
  .topbar .userctl{margin-inline-start:auto; gap:4px; flex:none}
  .topbar .icon-btn{inline-size:44px; block-size:44px; background:transparent; border-color:var(--frame-line); color:var(--frame-ink)}
  .topbar .usermenu summary{min-block-size:44px; padding:2px 6px 2px 4px; gap:4px; background:transparent; border-color:var(--frame-line)}
  .topbar .icon-btn:hover,.topbar .usermenu summary:hover,.topbar .usermenu[open] summary{border-color:var(--frame-ink); color:var(--frame-ink)}
  .topbar .usermenu .chev{color:var(--frame-ink)}
  .nav a,.nav-group>summary{padding-block:11px}
  .topbar .usermenu .who{display:none}
  .topbar .usermenu .avatar{inline-size:28px; block-size:28px; font-size:.82rem; background:var(--frame-ink); color:var(--frame)}
  .userbar{display:none}
  .main{padding:16px 16px 60px}
  .g2,.g21,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .grid[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}   /* a page's own desktop split (files) stacks too */
  .g4.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login-wrap{grid-template-columns:minmax(0,1fr)}
  .login-art{--art-pad:16px; padding:18px var(--art-pad) 14px; gap:8px}
  .login-form{padding:24px 16px 32px}
  .login-form .theme-switch{position:static; align-self:flex-end}
  .signin{padding:22px 18px}
  .sc-try{margin:2px var(--art-pad) 0; font-size:.78rem}
  .sc-chips{flex-wrap:nowrap; overflow-x:auto; padding:2px var(--art-pad) 6px; scrollbar-width:none}
  .sc-chips::-webkit-scrollbar{display:none}
  .sc-chips button{flex:none; font-size:.8rem}
  .sc{min-block-size:0; gap:8px}
  .sc-view{flex:none; block-size:250px; min-block-size:0}
  .sc-cap{padding:10px 12px; min-block-size:5.8em}
  .sc-hint{font-size:.75rem; inset-block-end:4%}
  .sc-title{font-size:1rem}
  .sc-text{font-size:.8rem}
  .pt-bal{margin-inline-start:0}
  .home-search{min-inline-size:0; flex:1 1 100%}
  .att-t b{white-space:normal}
  .att-req{flex-wrap:wrap}
  .att-req .att-acts{inline-size:100%; justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ── Stage B ── */
/* one prescription line: labelled fields that wrap, never a table of slits (0.1.8) */
.rx-lines{display:grid; gap:10px}
.rx-line{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:10px 12px; align-items:start; padding:12px; border:1px solid var(--line-2); border-radius:min(var(--r-sm),12px); background:var(--surface-2)}
.rx-line.rx-warn{background:var(--bad-soft); border-color:var(--bad)}
.rx-pick{grid-column:span 5} .rx-name{grid-column:span 4} .rx-days{grid-column:span 2}
.rx-del{grid-column:span 1; justify-self:end; align-self:center}
.rx-dose,.rx-freq{grid-column:span 3} .rx-note{grid-column:span 6}
.rx-note textarea{min-block-size:0; resize:none; overflow:hidden}
.rx-warn-text{grid-column:1 / -1; color:var(--bad)} .rx-warn-text:empty{display:none}
@media (max-width:760px){
  .rx-line{grid-template-columns:minmax(0,1fr)}
  .rx-line > *{grid-column:auto}
}
/* a table row's forms open in a row of their own under it, so they never change the table's columns (0.1.8) */
.tbl tr.row-more td,.tbl tbody tr.row-more:hover td{background:var(--surface-2)}
.acct-more{display:grid; gap:10px; position:sticky; inset-inline-start:0; max-inline-size:min(100%,calc(100vw - 72px))}
.acct-more .row form{margin:0}
/* the prescription sheet is paper in both themes (it is what gets printed) */
.rx-sheet{max-inline-size:640px; margin:auto; background:#fff; color:#111; border:1px solid var(--line); border-radius:var(--r); padding:26px}
.rx-sheet .rx-l{display:grid; grid-template-columns:28px 1fr; gap:4px 10px; padding:9px 0; border-bottom:1px dashed #ccc}
.rx-sheet .rx-l b{font-family:var(--f-ui); font-variant-numeric:tabular-nums; direction:ltr; text-align:start}
.rx-sheet .muted{color:#666}
.rx-sheet .rx-sym{font-family:Georgia,serif; font-size:2rem; color:#0d3446; line-height:1}
.rx-sheet .rx-sign{display:inline-block; min-inline-size:200px; text-align:center}
.rx-sheet .rx-stamp{display:block; max-inline-size:160px; max-block-size:90px; margin:0 auto 6px; object-fit:contain}
@media print{.rx-sheet{border:0; padding:0}}   /* the page size: print-a5.css / print-a4.css */
.board{display:grid; grid-template-columns:repeat(4,minmax(220px,1fr)); gap:12px; overflow-x:auto}
.board .col{background:var(--sunk); border:1px solid var(--card-line); border-radius:var(--r); padding:10px; display:flex; flex-direction:column; gap:8px; min-block-size:200px}
.board .col h3{margin:0 4px 4px; font-size:.9rem; display:flex; gap:6px; align-items:center}
.lab-card{background:var(--surface); border:1px solid var(--card-line); border-radius:min(var(--r),12px); padding:9px 11px; text-decoration:none; display:block}
.lab-card:hover{border-color:var(--ink-3)}
.lab-card b{display:block} .lab-card .m{display:block; font-size:.78rem; color:var(--ink-3)}
.lab-card.late{border-color:var(--bad); background:var(--bad-soft)}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px}
.gal-item{position:relative; border:1px solid var(--card-line); border-radius:var(--r); overflow:hidden; background:var(--stage); aspect-ratio:4/3; cursor:zoom-in; padding:0}
.gal-item img{inline-size:100%; block-size:100%; object-fit:cover; display:block}
.gal-item .cap{position:absolute; inset-inline:0; inset-block-end:0; padding:6px 8px; font-size:.75rem; color:var(--stage-ink);
  background:color-mix(in srgb,var(--stage) 78%,transparent); text-align:start}
.gal-item.pdf{display:grid; place-items:center; color:var(--stage-ink); cursor:pointer}
.viewer{position:fixed; inset:0; z-index:60; background:color-mix(in srgb,var(--stage) 95%,transparent); display:none; flex-direction:column}
.viewer.on{display:flex}
.viewer .vbar{display:flex; gap:8px; align-items:center; padding:10px 14px; color:var(--stage-ink)}
.viewer .vbar .t{flex:1; font-size:.9rem}
.viewer .vbar button{background:var(--stage-2); border:1px solid var(--stage-line); color:var(--stage-ink); border-radius:999px; padding:5px 13px; cursor:pointer}
.viewer .stage{flex:1; overflow:hidden; display:grid; place-items:center; touch-action:none}
.viewer .stage img{max-inline-size:96vw; max-block-size:84vh; transform-origin:center; transition:transform .12s; user-select:none}
.drop{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; border:1px dashed var(--line-2); border-radius:var(--r); padding:22px; text-align:center; color:var(--ink-3); cursor:pointer; background:var(--sunk)}
.drop input[type=file]{position:absolute; inset-block-end:0; inset-inline-start:50%; inline-size:1px; block-size:1px; opacity:0; overflow:hidden}
.drop:focus-within{border-color:var(--accent)}
.drop .picked{color:var(--ink); font-weight:500; overflow-wrap:anywhere}
.drop.over{border-color:var(--accent); background:var(--accent-soft)}

/* ── brand: the wordmark, the mark, each clinic's own logo, the demo tag ── */
.wordmark{font-family:var(--f-wm); font-weight:700; direction:ltr; unicode-bidi:isolate; color:var(--ink)}
.wordmark i{font-style:normal; color:var(--accent)}
.brand .wordmark.sm{display:inline; font-size:.75rem; color:var(--frame-ink)}
.brand-mark{inline-size:46px; block-size:46px; flex:none; border-radius:13px}
.clinic-logo{inline-size:44px; block-size:44px; flex:none; border-radius:50%; object-fit:contain; background:#fff; padding:2px; border:1px solid var(--card-line)}   /* logos are drawn for white paper */
.clinic-logo.mark{background:none; padding:0; border:0; border-radius:12px}
.brand .clinic-name{font-family:var(--f-head); font-weight:600; font-size:.9rem; text-align:start; line-height:1.4; color:var(--frame-ink)}
.brand .by{font-size:.75rem; color:var(--frame-ink-2); margin-top:2px}
.brand .wordmark i{color:var(--frame-ink-2)}
.demo-chip{margin:-8px 6px 12px; padding:3px 10px; border-radius:var(--r-sm); background:var(--amber-t); color:var(--amber-i); font-size:.75rem; text-align:center}
.top-logo{inline-size:28px; block-size:28px; border-radius:50%; object-fit:contain; background:#fff; flex:none}
.top-name{font-family:var(--f-head); font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-inline-size:0}
.logo-field{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.logo-preview{inline-size:76px; block-size:76px; border-radius:var(--r); object-fit:contain; border:1px solid var(--line); background:#fff; flex:none; display:grid; place-items:center; color:var(--ink-3)}
.logo-preview.empty{background:var(--sunk)}
.demo-note{background:var(--warn-soft); color:var(--warn); padding:10px 14px; margin-block-end:12px}
.print-id{display:flex; gap:12px; align-items:center}
.print-logo{inline-size:58px; block-size:58px; object-fit:contain; flex:none}
.filepick{position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; flex-wrap:wrap}
.filepick input[type=file]{position:absolute; inset-block-end:0; inset-inline-start:0; inline-size:1px; block-size:1px; opacity:0; overflow:hidden}
.filepick:focus-within .btn{outline:2px solid var(--accent); outline-offset:2px}
.filepick .picked{font-size:.85rem; color:var(--ink-2); overflow-wrap:anywhere}
.filepick input:disabled ~ .btn{opacity:.5; cursor:not-allowed}
.login-brand .wordmark{font-size:1.4rem; color:var(--stage-ink)}
.login-brand .wordmark i{color:var(--stage-accent)}
.login-brand span span{color:var(--stage-ink-2)}
.login-brand .brand-mark{inline-size:50px; block-size:50px; border-radius:14px}

/* Part A3: the first-setup checklist on a new clinic's home screen */
.setup{margin-bottom:14px; border-color:var(--accent-soft)}
.setup-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px}
.setup-head h2{margin:0; font-size:1.02rem}
.setup-steps{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.setup-steps li{display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; padding:8px 12px; border-radius:min(var(--r-sm),12px); background:var(--sunk)}
.setup-steps li.is-done a{color:var(--ink-3)}
.setup-tick{inline-size:24px; block-size:24px; flex:none; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-2); font-size:.8rem; color:var(--ink-2)}
.setup-steps li.is-done .setup-tick{background:var(--ok-soft); color:var(--ok); border-color:transparent}
.setup-acts{margin-inline-start:auto; display:flex; gap:6px}
.setup-acts form{margin:0}

/* Part A3: the one-page price editor */
.prices-errors{margin-bottom:14px; border-color:var(--bad); background:var(--bad-soft); color:var(--bad)}
.prices .tbl input{max-inline-size:150px}
.prices tr.has-err input[aria-invalid]{border-color:var(--bad)}
.err-text{color:var(--bad); margin-top:3px}
.prices-save{position:sticky; inset-block-end:0; padding:10px 0; background:var(--sheet)}

/* ── Part C: the desktop's own pages (first run, the recovery sheet, the forgotten owner password) ── */
.desk-wrap{max-inline-size:760px; margin:0 auto; padding:32px 16px 48px; display:flex; flex-direction:column; gap:16px}
.desk-head{display:flex; align-items:center; gap:14px}
.desk-head .wordmark{font-size:1.5rem}
.desk-head .lead{margin:2px 0 0; color:var(--ink-2)}
.desk-choice h2{margin-top:0}
.sheet-head{display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:16px}
.sheet-head h1{margin:0; font-size:1.35rem}
.sheet-head p{margin:2px 0 0}
.sheet-code{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; margin:8px 0 18px; padding:18px 12px;
  border:2px dashed var(--line-2); border-radius:var(--r); font-size:clamp(1.25rem,4.6vw,2rem); font-weight:600; letter-spacing:.12em}
.sheet-code span{white-space:nowrap}
.sheet-warn{display:flex; gap:8px; align-items:flex-start; background:var(--warn-soft); color:var(--warn); border-radius:min(var(--r-sm),12px); padding:10px 12px}
.sheet-warn .ic{flex:none; margin-top:3px}
/* Part C14: the other PCs + the network checklist */
.connect-url{font-size:clamp(1.05rem,3.6vw,1.5rem); letter-spacing:.02em}
.connect-url span{white-space:normal; overflow-wrap:anywhere}
.steps, .addr-list{margin:4px 0 8px; padding-inline-start:1.4rem; line-height:1.9}
.checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; counter-reset:chk}
.checklist > li{counter-increment:chk}
.checklist > li h2::before{content:counter(chk) ". "; color:var(--ink-3)}
.checklist .ltr{white-space:nowrap}            /* an English term never splits inside the Arabic line */
.cmd{display:block; direction:ltr; unicode-bidi:isolate; text-align:left; font-family:var(--f-mono); font-size:.88rem;
  background:var(--sunk); border:1px solid var(--line); border-radius:min(var(--r-sm),8px); padding:6px 10px; margin:6px 0;
  overflow-wrap:anywhere}
@media print{
  .desk-wrap{padding:0; max-inline-size:none}
  .sheet{border:0; box-shadow:none}
  .sheet-code{border-color:#000; color:#000}
  .sheet-warn{background:none; color:#000; border:1px solid #000}
}