/* Core styles (supervisor-owned). Modules add their own CSS via ui.css(new URL('./style.css', import.meta.url)). */
:root{
  --bg:#f3f2f8; --panel:#ffffff; --text:#1d1b26; --muted:#6b6880; --border:#dcd9e6; --field:#ffffff;
  --accent:#4b3fa8; --accent-ink:#ffffff; --accent-soft:#ece9fb;
  --danger:#b42318; --danger-soft:#fde8e6; --ok:#127a43; --ok-soft:#e1f3e8; --warn:#7a4d00; --warn-soft:#fdf0d5;
  --info:#1f5d99; --info-soft:#e3eefa; --danger-ink:#ffffff; --ok-ink:#ffffff;
  --nav:#1f1a3d; --nav-ink:#d9d5f2; --nav-muted:#9a94c4; --nav-active:#4b3fa8;
  --abo-a:#1f5d99; --abo-b:#8a3c9e; --abo-ab:#2f6f5e; --abo-o:#b42318;
  --radius:10px; --font:'Tajawal','Segoe UI',Tahoma,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15131f; --panel:#1e1b2b; --text:#ece9f6; --muted:#a19cb8; --border:#34304a; --field:#191726;
    --accent:#8f84ec; --accent-ink:#15131f; --accent-soft:#2b2647;
    --danger:#ff8a80; --danger-soft:#3a1d1d; --ok:#6fd49c; --ok-soft:#173326; --warn:#f0c46a; --warn-soft:#352a14; --danger-ink:#2a0d0a; --ok-ink:#0b2417;
    --info:#8fbcef; --info-soft:#1b2a3d; --nav:#100e19; --nav-ink:#d9d5f2; --nav-muted:#8a85ad; --nav-active:#4b3fa8;
    --abo-a:#8fbcef; --abo-b:#d39be0; --abo-ab:#7fcfb6; --abo-o:#ff8a80;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:15px; line-height:1.6}
a{color:var(--accent)}
h1,h2,h3{margin:0; line-height:1.35}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:13px}
.num,[dir=ltr]{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
[hidden]{display:none!important}

/* ---------- buttons & inputs ---------- */
.btn{font:inherit; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:8px; padding:7px 14px; cursor:pointer; text-decoration:none; white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.danger{background:var(--danger); color:var(--danger-ink); border-color:var(--danger)}
.btn.ghost{background:transparent}
.btn.sm{padding:3px 10px; font-size:13px}
.btn.block{width:100%}
.btn:disabled{opacity:.55; cursor:not-allowed}
.icon-btn{font:inherit; border:0; background:transparent; color:inherit; cursor:pointer; padding:6px; border-radius:8px; display:inline-flex}
.icon-btn:hover{background:var(--accent-soft)}
.in{font:inherit; width:100%; background:var(--field); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px 10px}
.in:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
textarea.in{resize:vertical}
.field{display:flex; flex-direction:column; gap:4px; min-width:0}
.field-label{font-size:13.5px; color:var(--muted)}
.field .req{color:var(--danger); font-weight:500}
.field .hint{color:var(--muted); font-size:12.5px}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px 16px}
.form-grid .wide{grid-column:1/-1}
.bar{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.stack{display:flex; flex-direction:column; gap:12px}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start}
.row > *{min-width:0}
.grow{flex:1}

/* ---------- auth screens ---------- */
.auth-wrap{min-height:100%; display:grid; place-items:center; padding:24px 16px}
/* the ward account («عرض الردهة»): one page, no side menu */
/* «تنسيق السجلات» (2026-11-08): the settings and the preview side by side on a wide screen; save and restore stay in sight */
.register-format-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:14px; align-items:start}
.register-format-grid > .card{position:sticky; top:8px}
@media (max-width:1100px){.register-format-grid{grid-template-columns:minmax(0,1fr)} .register-format-grid > .card{position:static}}
.register-format-grid > *,.register-format-grid .card{min-width:0}
.register-format-save{position:sticky; bottom:0; z-index:5; background:var(--bg); padding:10px 0; border-top:1px solid var(--border)}
.register-format .tbl input:not([type=checkbox]){min-width:0}
.ward-screen{min-height:100%; background:var(--bg)}
.ward-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--border)}
.ward-main{max-width:1000px; margin:0 auto; padding:16px; display:flex; flex-direction:column; gap:14px}
.ward-main h2{margin:0}
.ward-figs{display:flex; gap:10px; flex-wrap:wrap}
.ward-fig{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px 14px; min-width:120px}
.ward-fig b{display:block; font-size:22px}
.ward-fig.warn{color:var(--danger)}
.ward-patient{background:var(--panel); border:1px solid var(--border); border-radius:14px; overflow:hidden}
.ward-ph{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 14px; background:var(--info-soft)}
.ward-ph b{font-size:16px}
.ward-unit{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:10px 14px; border-top:1px solid var(--border)}
.ward-bag{font-family:monospace}
.ward-res{background:var(--ok-soft); color:var(--ok); border-radius:6px; padding:1px 8px; font-size:12px; font-weight:700}
.ward-left{font-weight:700; padding:3px 10px; border-radius:999px; font-size:13px; white-space:nowrap}
.ward-left.ok{background:var(--ok-soft); color:var(--ok)}
.ward-left.warn{background:var(--danger-soft); color:var(--danger)}
@media (max-width:640px){.ward-unit{grid-template-columns:1fr}}
/* (2026-11-08) ward headings, the most urgent first, «جديد», a search and a display mode for a screen on the wall */
.ward-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.ward-search{max-width:280px}
.ward-group{display:flex; flex-direction:column; gap:10px}
.ward-name{margin:6px 0 0; font-size:17px; border-bottom:2px solid var(--border); padding-bottom:4px}
.ward-who{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ward-pname{font-size:18px}
.ward-pside{display:flex; align-items:center; gap:8px}
.ward-count{font-weight:700; color:var(--muted)}
.ward-group-badge{background:var(--danger-soft); color:var(--danger); font-weight:800; border-radius:8px; padding:3px 10px}
.ward-urg{font-weight:700; font-size:12px; border-radius:999px; padding:2px 10px}
.ward-urg.emergency{background:var(--danger); color:#fff}
.ward-urg.urgent{background:var(--warn-soft, #fff4e5); color:var(--warn, #b45309)}
.ward-patient.urg-emergency{border-color:var(--danger)}
.ward-unit.fresh{background:var(--ok-soft)}
.ward-new{background:var(--ok); color:#fff; font-weight:700; font-size:12px; border-radius:999px; padding:2px 10px}
.ward-fig.new{border-color:var(--ok); color:var(--ok)}
/* (2026-11-08) the display modes: a short table, or large tiles */
.ward-table tr.fresh td{background:var(--ok-soft)}
.ward-table tr.urg-emergency td:first-child{box-shadow:inset -4px 0 0 var(--danger)}
.ward-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.ward-tile{background:var(--panel); border:2px solid var(--border); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.ward-tile.urg-emergency{border-color:var(--danger)}
.ward-tile.fresh{background:var(--ok-soft)}
.ward-tile-top{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.ward-tile-num{font:800 22px monospace}
.ward-group-badge.big{font-size:24px; padding:4px 14px}
.ward-tv .ward-tiles{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.ward-tv .ward-tile-num{font-size:32px}
.ward-tv .ward-group-badge.big{font-size:34px}
/* the sample of the chosen display mode in the settings */
.ward-view-sample{border:1px dashed var(--border); border-radius:12px; padding:10px; max-height:460px; overflow:auto}
.ward-view-sample .ward-preview{display:flex; flex-direction:column; gap:12px}
/* «أكياس الدم» */
.ward-bags{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:18px}
.ward-bagcard{display:flex; flex-direction:column; align-items:center; text-align:center; padding:6px; border-radius:14px}
.ward-bagcard.fresh{background:var(--ok-soft)}
.ward-bag-art{position:relative; width:150px}
.ward-bag-svg{display:block; width:100%; height:auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))}
.ward-bag-port,.ward-bag-tube{fill:#d6d3df; stroke:#d6d3df; stroke-width:6}
.ward-bag-port{stroke-width:0}
.ward-bag-body{fill:#c8102e; stroke:#fff; stroke-width:5}
.tone-plasma .ward-bag-body{fill:#e5a800}
.tone-platelets .ward-bag-body{fill:#f0c24b}
.ward-bag-label{fill:#fff}
.urg-emergency .ward-bag-svg{filter:drop-shadow(0 0 10px rgba(255,0,40,.85))}
.ward-bag-on{position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); width:58%; line-height:1.1; color:#111}
.ward-bag-grp{font:900 30px Tahoma,sans-serif; color:#b3122b}
.ward-bag-rh{font:700 11px Tahoma,sans-serif; color:#b3122b}
.ward-bag-num{font:800 15px monospace; margin-top:6px}
.ward-bag-bc{font:11px monospace; color:#555}
.ward-bag-under{margin-top:6px}
.ward-tv .ward-bags{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.ward-tv .ward-bag-art{width:210px}
.ward-tv .ward-bag-grp{font-size:42px} .ward-tv .ward-bag-num{font-size:21px}
.ward-tv .ward-main{max-width:none}
.ward-tv .ward-main h2{font-size:30px}
.ward-tv .ward-fig b{font-size:34px}
.ward-tv .ward-name{font-size:26px}
.ward-tv .ward-pname{font-size:28px}
.ward-tv .ward-group-badge,.ward-tv .ward-count{font-size:22px}
.ward-tv .ward-bag{font-size:22px}
.ward-tv .ward-unit .small,.ward-tv .ward-res{font-size:16px}
.auth-card{width:min(420px,100%); background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:28px; display:flex; flex-direction:column; gap:14px}
.login-message{margin:8px 0 0; padding:8px 10px; border-radius:8px; background:var(--bg); white-space:pre-line; line-height:1.6; font-size:14px}
.auth-card h1{font-size:22px}
.brand{display:flex; gap:12px; align-items:center}
.brand-mark{width:42px; height:42px; border-radius:12px; background:var(--accent); color:#fff; display:grid; place-items:center; flex:none}
.brand.small .brand-mark{width:34px; height:34px; border-radius:10px}
.brand.small b{display:block; color:#fff}
.brand.small span{font-size:12px}

/* ---------- shell ---------- */
.shell{display:grid; grid-template-columns:250px minmax(0,1fr); min-height:100%}
.side{background:var(--nav); color:var(--nav-ink); display:flex; flex-direction:column; gap:14px; padding:16px 12px; position:sticky; top:0; height:100vh; overflow-y:auto}
.side .muted{color:var(--nav-muted)}
.nav{display:flex; flex-direction:column; gap:12px; flex:1}
.nav-sec{display:flex; flex-direction:column; gap:2px}
.nav-sec-title{font-size:11.5px; color:var(--nav-muted); padding:4px 10px; letter-spacing:.02em}
/* collapsible sections: a section opens and closes from its title */
details.nav-sec{display:block}
details.nav-sec>a{margin-top:2px}
details.nav-sec>summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; border-radius:6px}
details.nav-sec>summary::-webkit-details-marker{display:none}
details.nav-sec>summary::after{content:'‹'; font-size:14px; transition:transform .15s}
details.nav-sec[open]>summary::after{transform:rotate(-90deg)}
details.nav-sec>summary:hover{color:var(--nav-text, inherit)}
.nav a{display:flex; align-items:center; gap:10px; color:var(--nav-ink); text-decoration:none; padding:7px 10px; border-radius:8px; font-size:14px}
.nav a:hover{background:rgba(255,255,255,.07)}
.nav a.on{background:var(--nav-active); color:#fff}
/* the section titles carry an icon: the folded menu shows only the icons */
details.nav-sec>summary{gap:8px; justify-content:flex-start}
details.nav-sec>summary .sec-label{flex:1}
details.nav-sec>summary svg{flex:none; opacity:.85}
/* the phone's open menu closes from its own × (it covers the ☰ of the top bar) */
.side-close{display:none; margin-inline-start:auto; background:rgba(255,255,255,.1); border:0; color:var(--nav-ink); border-radius:8px; width:34px; height:34px; font-size:22px; line-height:1; cursor:pointer}
@media (max-width:900px){.side-close{display:inline-flex; align-items:center; justify-content:center} .brand.small{align-items:center}}
.side-toggle{display:none; align-self:flex-start; background:rgba(255,255,255,.08); border:0; color:var(--nav-ink); border-radius:8px; width:36px; height:30px; cursor:pointer; font-size:16px}
.side-toggle:hover{background:rgba(255,255,255,.14)}
@media (min-width:901px){
  .menu-btn{display:inline-flex}
  .side-toggle{display:block}
  .shell{transition:grid-template-columns .2s}
  .shell.side-collapsed{grid-template-columns:62px minmax(0,1fr)}
  .side-collapsed .side{padding:16px 8px; align-items:center}
  .side-collapsed .brand.small>div, .side-collapsed details.nav-sec>a, .side-collapsed .nav-warn{display:none}
  .side-collapsed details.nav-sec>summary{justify-content:center; padding:9px 0; width:44px}
  .side-collapsed details.nav-sec>summary .sec-label, .side-collapsed details.nav-sec>summary::after{display:none}
  .side-collapsed details.nav-sec>summary:hover{background:rgba(255,255,255,.08)}
  .side-collapsed details.nav-sec:has(a.on)>summary{background:var(--nav-active); color:#fff}
  .side-collapsed .side-toggle{align-self:center}
}
.nav-fly{position:fixed; z-index:40; min-width:200px; max-height:70vh; overflow-y:auto; padding:8px; border-radius:12px; background:var(--nav); color:var(--nav-ink); box-shadow:0 8px 24px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:2px}
.nav-fly>b{font-size:12px; color:var(--nav-muted); padding:4px 10px 6px}
.nav-fly a{display:flex; align-items:center; gap:10px; color:var(--nav-ink); text-decoration:none; padding:7px 10px; border-radius:8px; font-size:14px}
.nav-fly a:hover{background:rgba(255,255,255,.07)} .nav-fly a.on{background:var(--nav-active); color:#fff}
.nav-warn{font-size:12px; color:#f0c46a; padding:6px 10px}
.me{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; border-radius:10px; background:rgba(255,255,255,.06)}
.me b{display:block; font-size:14px} .me span{font-size:12px; color:var(--nav-muted)}
.content{min-width:0; display:flex; flex-direction:column}
.top{display:flex; align-items:center; gap:12px; padding:14px 24px; border-bottom:1px solid var(--border); background:var(--panel); position:sticky; top:0; z-index:5}
.top h2{font-size:19px; flex:1; min-width:0}
main{padding:22px 24px 48px; display:flex; flex-direction:column; gap:18px; min-width:0}
main:focus{outline:none}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed; inset:0 0 0 auto; width:270px; z-index:20; transform:translateX(100%); transition:transform .2s}
  .side.open{transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .menu-btn{display:inline-flex}
  .top{padding:12px 16px} main{padding:16px 16px 40px}
}

/* ---------- content blocks ---------- */
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:12px; min-width:0}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.card-head h3{font-size:16px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.stat{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; display:flex; flex-direction:column}
.stat b{font-size:26px; font-variant-numeric:tabular-nums}
.stat span{font-size:13px; color:var(--muted)}
.stat.warn{border-color:var(--warn)} .stat.danger{border-color:var(--danger)} .stat.ok{border-color:var(--ok)}
.stat-open{font:inherit;color:inherit;text-align:start;cursor:pointer}
.stat-open:hover,.stat-open[aria-expanded=true]{border-color:var(--accent)}
.stat-detail{padding:12px;border:1px solid var(--border);border-radius:var(--radius)}
.stat-detail .stats{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.stat-detail .stat{padding:6px 12px}
.stat-detail .stat b{font-size:20px}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel)}
.tbl{border-collapse:collapse; width:100%; font-size:14px}
.tbl th,.tbl td{padding:9px 12px; text-align:start; border-bottom:1px solid var(--border); vertical-align:top}
.tbl th{font-size:12.5px; color:var(--muted); font-weight:500; background:var(--bg); white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer} .tbl tr.click:hover td{background:var(--accent-soft)}
.tbl .num{text-align:end; font-variant-numeric:tabular-nums}
.kv{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 16px; margin:0}
.kv dt{color:var(--muted); font-size:13.5px} .kv dd{margin:0}
.badge{display:inline-block; font-size:12px; font-weight:500; padding:1px 9px; border-radius:999px; line-height:1.8; white-space:nowrap}
.badge.ok{background:var(--ok-soft); color:var(--ok)} .badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.danger{background:var(--danger-soft); color:var(--danger)} .badge.info{background:var(--info-soft); color:var(--info)}
.badge.muted{background:var(--bg); color:var(--muted); border:1px solid var(--border)}
.abo{display:inline-block; min-width:38px; text-align:center; font-weight:700; border:1.5px solid currentColor; border-radius:6px; padding:0 6px; direction:ltr}
.abo-a{color:var(--abo-a)} .abo-b{color:var(--abo-b)} .abo-ab{color:var(--abo-ab)} .abo-o{color:var(--abo-o)}
.empty{padding:28px; text-align:center; color:var(--muted); border:1px dashed var(--border); border-radius:var(--radius); display:flex; flex-direction:column; gap:10px; align-items:center}
.loading{padding:28px; text-align:center; color:var(--muted)}
.error-box{padding:14px 16px; border-radius:var(--radius); background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger)}
.notice{padding:12px 14px; border-radius:var(--radius); background:var(--warn-soft); color:var(--warn)}
.hard-stop{padding:12px 14px; border-radius:var(--radius); background:var(--danger-soft); color:var(--danger); font-weight:500}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border)}
.tabs a,.tabs button{font:inherit; background:none; border:0; border-bottom:2px solid transparent; padding:8px 12px; color:var(--muted); text-decoration:none; cursor:pointer}
.tabs .on{color:var(--accent); border-bottom-color:var(--accent)}
/* a phone: many tabs (such as «إعدادات العمل») wrap into rows of small buttons instead of running off the screen */
@media (max-width:700px){
  .tabs{flex-wrap:wrap; gap:6px; border-bottom:0; padding-bottom:4px}
  .tabs a,.tabs button{flex:none; border:1px solid var(--border); border-radius:9px; padding:6px 10px; font-size:13px; line-height:1.3; white-space:nowrap; background:var(--panel)}
  .tabs .on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700}
}

.env-badge{font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn)}
.env-badge.env-training{background:var(--info-soft); color:var(--info); border-color:var(--info)}

/* ---------- modal & toast ---------- */
.modal-back{position:fixed; inset:0; background:rgba(15,12,30,.45); display:grid; place-items:center; padding:16px; z-index:50}
.modal{background:var(--panel); border-radius:14px; width:min(480px,100%); max-height:calc(100vh - 32px); overflow:auto; display:flex; flex-direction:column; gap:14px; padding:18px 20px}
.modal.wide{width:min(820px,100%)}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.modal-head h3{font-size:17px}
.modal-actions{display:flex; gap:8px; justify-content:flex-start; flex-wrap:wrap}
.modal-err{color:var(--danger); font-size:14px}
.esign-statement{padding:10px 12px; background:var(--accent-soft); border-radius:8px}
#toast{position:fixed; bottom:20px; left:50%; transform:translate(-50%,120px); background:var(--text); color:var(--bg); padding:10px 18px; border-radius:10px; font-size:14px; transition:transform .25s; z-index:60; max-width:calc(100vw - 32px); pointer-events:none}
#toast.show{transform:translate(-50%,0)}
#toast.error{background:var(--danger); color:var(--danger-ink)}
#toast.success{background:var(--ok); color:var(--ok-ink)}

/* left-to-right (English) */
@media (max-width:900px){ [dir=ltr] .side{inset:0 auto 0 0; transform:translateX(-100%)} [dir=ltr] .side.open{transform:none} }
/* the user menu: its button carries the connection dot */
.user-menu-wrap{position:relative}
.user-menu-btn{position:relative; width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--panel); color:var(--text); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.user-menu-btn:hover{background:var(--bg)}
.user-menu-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.um-dot{position:absolute; top:-3px; inset-inline-start:-3px; width:12px; height:12px; border-radius:50%; border:2px solid var(--panel); background:var(--muted)}
.um-dot[data-state=online]{background:#2fbf6b} .um-dot[data-state=offline],.um-dot[data-state=server]{background:var(--danger)}
/* quiet while connected; a dropped connection draws the eye */
.user-menu-btn:has(.um-dot[data-state=offline]),.user-menu-btn:has(.um-dot[data-state=server]){border:1.5px solid var(--danger); color:var(--danger); background:var(--danger-soft)}
.user-menu{position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:20; width:300px; padding:10px; border:1px solid var(--border); border-radius:16px; background:var(--panel); box-shadow:0 8px 24px rgba(0,0,0,.14)}
.um-card{display:flex; gap:12px; align-items:center; padding:12px; border-radius:12px; background:var(--bg)}
.um-pic{flex:none; width:48px; height:48px; border-radius:12px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px}
.um-who{min-width:0} .um-who b{display:block; font-size:15px} .um-who>span{font-size:13px; color:var(--muted)}
.um-net{display:flex; align-items:center; gap:8px; margin-top:8px; padding:10px 12px; border-radius:12px; background:var(--bg); font-size:13px}
.um-net-dot{width:9px; height:9px; border-radius:50%; background:var(--muted)}
.um-net[data-tone=ok]{color:var(--ok)} .um-net[data-tone=ok] .um-net-dot{background:#2fbf6b}
.um-net[data-tone=danger]{color:var(--danger)} .um-net[data-tone=danger] .um-net-dot{background:var(--danger)}
.um-net-icon{margin-inline-start:auto; display:inline-flex; color:var(--muted)}
.um-sep{border-top:1px solid var(--border); margin:8px 4px}
.um-item{display:flex; align-items:center; gap:12px; width:100%; padding:10px 8px; border:0; border-radius:8px; background:none; color:var(--text); font:inherit; font-size:14px; text-align:start; cursor:pointer}
.um-item:hover,.um-item:focus-visible{background:var(--bg); outline:none}
.um-item svg{color:var(--muted); flex:none}
.um-item.danger,.um-item.danger svg{color:var(--danger)}
.um-switch{margin-inline-start:auto; width:36px; height:20px; border-radius:10px; background:var(--border); position:relative; flex:none}
.um-switch::after{content:""; position:absolute; top:2px; inset-inline-start:2px; width:16px; height:16px; border-radius:50%; background:var(--panel); transition:inset-inline-start .15s}
.um-switch[aria-checked=true]{background:var(--accent)} .um-switch[aria-checked=true]::after{inset-inline-start:18px}
/* the red line at the top of every page while the connection is down: the first row of the top bar, so it stays in view */
.connection-banner{order:-1; flex-basis:100%; margin:-14px -24px 0; padding:9px 16px; background:var(--danger); color:#fff; font-weight:700; text-align:center; text-decoration:none; line-height:1.6}
@media (max-width:900px){.connection-banner{margin:-12px -16px 0}}
.connection-banner.sync{background:var(--info-soft); color:var(--info); font-weight:600}
@media(max-width:600px){.user-menu{position:fixed; top:64px; left:8px; right:8px; width:auto; inset-inline-end:auto}}
/* the guided tour: the part being explained stays lit, the rest dims */
.tour{position:fixed; inset:0; z-index:60}
.tour-ring{position:fixed; border-radius:12px; box-shadow:0 0 0 100vmax rgba(10,8,20,.55); outline:2px solid var(--accent); transition:all .2s; pointer-events:none}
.tour-bubble{position:fixed; padding:14px 16px; border-radius:14px; background:var(--panel); color:var(--text); box-shadow:0 8px 24px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:6px}
.tour-bubble p{margin:0; font-size:14px; line-height:1.7}
/* العمل دون اتصال */
.offline-status{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:12px 16px; border-radius:var(--radius); font-size:14px}
.offline-status.on{background:var(--ok-soft); color:var(--ok)} .offline-status.off{background:var(--danger-soft); color:var(--danger)}
.offline-qty-row{display:flex; flex-wrap:wrap; gap:10px}
.offline-qty-item{display:flex; flex-direction:column; gap:4px; font-size:13px} .offline-qty{width:84px}
.offline-people{display:flex; flex-wrap:wrap; gap:6px; max-height:220px; overflow-y:auto}
.offline-section{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius)}
.offline-section span{display:flex; flex-direction:column; gap:2px}
.notice.danger{background:var(--danger-soft); color:var(--danger)}
.offline-code{max-width:140px; letter-spacing:4px; text-align:center}
/* the help page */
.help-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:14px}
.help-lines{margin:0; padding-inline-start:18px; display:flex; flex-direction:column; gap:6px; line-height:1.7}
.switch-users{flex-wrap:wrap}
.theme-preview{display:grid; grid-template-columns:140px minmax(0,1fr); overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text)}
.theme-preview-nav{display:flex; flex-direction:column; gap:6px; padding:12px; background:var(--nav); color:var(--nav-ink)}
.theme-preview-nav span{padding:4px 8px; border-radius:6px}
.theme-preview-nav span.on{background:var(--nav-active); color:#fff}
.theme-preview-main{display:flex; flex-direction:column; gap:8px; margin:12px; padding:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel)}
.notif-rule{display:flex; flex-direction:column; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius)}
.notif-rule-head{display:flex; justify-content:space-between; align-items:center; gap:8px}
.notif-rule-controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.notif-limit{width:80px}
.bell-wrap{position:relative}
.bell-panel{position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:20; width:360px; max-height:70vh; overflow-y:auto; padding:8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); box-shadow:0 8px 24px rgba(0,0,0,.14)}
.bell-title{padding:4px 8px 8px; font-weight:700}
.bell-item{display:flex; flex-direction:column; gap:4px; width:100%; padding:8px; border:0; border-radius:8px; background:none; color:var(--text); font:inherit; text-align:start; cursor:pointer}
tr.unit-focus td{background:var(--warn-soft)}
.bell-item:hover,.bell-item:focus-visible{background:var(--accent-soft)}
.bell-item-head{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.bell-item small{color:var(--muted)}
.bell-all{display:block; margin-top:4px; padding:8px; border-top:1px solid var(--border); color:var(--accent); font-weight:700; text-align:center; text-decoration:none}
.bell-empty{margin:0; padding:16px 8px; color:var(--muted); text-align:center}
.bell-clear{display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 8px; text-align:center}
.bell-clear-text{display:inline-flex; align-items:center; gap:6px; color:var(--ok); font-weight:700}
.bell-clear small{color:var(--muted)}
@media(max-width:600px){.bell-panel{position:fixed; top:64px; left:8px; right:8px; width:auto; inset-inline-end:auto}}
.bell{position:relative; color:var(--text)}
.bell-count{position:absolute; top:-2px; inset-inline-end:-3px; min-width:18px; padding:0 4px; border-radius:999px; background:var(--danger); color:var(--danger-ink); font-size:11px; font-weight:700; line-height:18px; text-align:center}

@media print{
  .side,.top,#toast{display:none!important}
  .shell{display:block} main{padding:0}
  body{background:#fff; color:#000}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }

/* age <-> birth year (core/age_field.js) */
.age-year{display:flex;align-items:center;gap:8px}
.age-year .ay-part{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.age-year .ay-part .in{min-width:0;width:100%}
.age-year small{color:var(--muted);white-space:nowrap}
.age-year .ay-or{color:var(--muted);font-size:13px}

/* drawn signature pad (donor-visits/signature.js), used in several modules */
.dv-sign{display:flex;flex-direction:column;gap:8px}
.dv-sign canvas{width:100%;max-width:560px;height:180px;border:2px dashed var(--border);border-radius:10px;background:#fff;touch-action:none;cursor:crosshair}
.dv-sign canvas.drawn{border-style:solid;border-color:var(--accent)}

/* hospital logo in place of the drop mark (core/facility.js) */
.brand-mark.logo{background:#fff;padding:3px;overflow:hidden}
.brand-mark.logo img{width:100%;height:100%;object-fit:contain}

/* ---------- p2j: release 1 desk / lab interfaces ---------- */
.date-field{display:inline-flex;align-items:center;gap:4px;position:relative;max-width:100%}
.date-field .date-text{min-width:9.5em;font-variant-numeric:tabular-nums}
.date-field .date-text.invalid{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 6%,var(--panel))}
.date-btn{font-size:15px;line-height:1;padding:6px}
.date-picker-hidden{position:absolute;inset-inline-start:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.grp-full{display:flex;flex-direction:column;gap:8px}
.grp-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.grp-lbl{min-width:84px;font-weight:700;color:var(--muted);direction:ltr;text-align:start}
.grp-other{max-width:260px}
.ag-grid{display:flex;flex-wrap:wrap;gap:8px}
.ag-cell{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:8px;padding:3px 6px;direction:ltr}
.ag-cell b{min-width:34px;text-align:center}
.ag-btn{font:inherit;font-weight:700;width:32px;height:30px;border:1.5px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);cursor:pointer}
.ag-btn.ag-pos.on{background:var(--danger);border-color:var(--danger);color:var(--danger-ink)}
.ag-btn.ag-neg.on{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.abo-rare{font-weight:800;color:var(--danger);direction:ltr}
.grp-text small{color:var(--muted);font-weight:600}
.elig{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.elig ul{margin:4px 0 0;padding-inline-start:20px;color:var(--danger);width:100%}
.mismatch-banner{border:2px solid var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--panel));color:var(--danger);border-radius:var(--radius);padding:12px 14px}
.mismatch-banner b{font-size:18px}
.mismatch-banner ul{margin:6px 0 0;padding-inline-start:22px}
.match-banner{border:2px solid var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--panel));color:var(--ok);border-radius:var(--radius);padding:10px 14px;font-weight:700;font-size:16px}
.mismatch .mismatch-q{font-size:20px;font-weight:800;color:var(--danger-ink);background:var(--danger);border-radius:var(--radius);padding:14px;text-align:center}
.mismatch ul{color:var(--danger);margin:0;padding-inline-start:22px}
.tbl tr.sev-high td{background:color-mix(in srgb,var(--danger) 9%,transparent)}
.tbl tr.sev-warn td{background:color-mix(in srgb,var(--warn) 9%,transparent)}
.tbl tr.new td{animation:p2jFlash 2s ease-out 2}
@keyframes p2jFlash{from{background:color-mix(in srgb,var(--accent) 22%,transparent)}to{background:transparent}}
.tbl.reg tr.st-override td{color:var(--danger);font-weight:600}
.tbl.reg tr.st-awaiting td{color:var(--muted)}
.tbl.reg tr.st-designated td{background:color-mix(in srgb,var(--ok) 6%,transparent)}
.bag-confirm .kv{grid-template-columns:auto 1fr auto 1fr}
.lab-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.wait-card.new{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.wait-card.lab{border-style:dashed}
.coombs-row{border:1px solid var(--border);border-radius:8px;padding:8px}
.test-def{border:1px solid var(--border);border-radius:var(--radius);padding:10px;display:flex;flex-direction:column;gap:8px}
.phys-in{display:block}
.rd-grid{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:16px;align-items:start}
.rd-grid .rd-preview{position:sticky;top:12px}
.rd-preview iframe{width:100%;height:78vh;border:1px solid var(--border);border-radius:var(--radius);background:#fff}
.rd-sec{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:8px;padding:6px 8px}
.rd-sec input[type=text]{flex:1}
@media (max-width:900px){.rd-grid{grid-template-columns:1fr}.rd-grid .rd-preview{position:static}.bag-confirm .kv{grid-template-columns:auto 1fr}}
.ph-btn.ph-d.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.field .row-inline input[type=checkbox],.checks input[type=checkbox],label.check input[type=checkbox]{width:18px;height:18px;flex:none;min-width:0}
/* long titles keep one line where possible; the actions wrap under the title instead of squeezing it */
.top{flex-wrap:wrap}
#pageTitle{flex:1 1 280px;min-width:200px}
#pageActions{flex-wrap:wrap;justify-content:flex-end}
/* the units of the request form, one per line as on the paper form */
.unit-list{display:flex;flex-direction:column;gap:4px;max-width:720px}
.unit-row{display:flex;align-items:center;gap:10px;border-bottom:1px dotted var(--border);padding:3px 0}
.unit-row .unit-name{flex:1;text-align:left}
.unit-row .unit-qty{width:80px;flex:none}
.unit-row .unit-note{width:200px;flex:none}
.own-xm{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.own-xm>div{border:1px solid var(--border);border-radius:8px;padding:8px}
.own-xm h4{margin:0 0 6px}
.warn-text{color:var(--warn);font-weight:700}
.age-small{width:90px}
/* the age with its unit on one line: the age and the birth year keep a readable width */
.age-unit-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.age-unit-row .age-year{flex:1 1 220px;min-width:220px}
.age-unit-row .age-year .ay-part .in{min-width:64px}
.age-unit-row select{width:auto;flex:none}
.branch-pages{display:grid;gap:12px}.branch-group b{display:block;margin-bottom:4px}.branch-group label.check{display:inline-flex;gap:6px;align-items:center}
.tbl th.sortable{cursor:pointer;user-select:none}.tbl th.sortable:hover{text-decoration:underline}.tbl th[data-dir=asc]::after{content:" ▲";font-size:.7em}.tbl th[data-dir=desc]::after{content:" ▼";font-size:.7em}
.xml-in{font-family:Consolas,"Courier New",monospace;font-size:.85rem;direction:ltr;text-align:left;white-space:pre;min-height:260px}
/* Report designer: document ribbon and a wide paper workspace. */
.rd-editor{display:flex;flex-direction:column;gap:12px;min-width:0}
.rd-toolbar-shell{position:sticky;top:0;z-index:25;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 3px 12px #0000000d}
.rd-quickbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--border)}
.rd-quickbar>.bar{margin-inline-start:auto}.rd-save-status{font-size:.88rem;color:var(--warn)}
.rd-save-status[data-state=saved]{color:var(--ok)}.rd-save-status[data-state=busy]{color:var(--info)}
.rd-ribbon-tabs{display:flex;gap:4px;padding:0 12px;border-bottom:1px solid var(--border)}
.rd-ribbon-tab{border:0;border-bottom:3px solid transparent;background:transparent;color:var(--text);font:inherit;padding:10px 18px;cursor:pointer}
.rd-ribbon-tab[aria-selected=true]{border-bottom-color:var(--accent);color:var(--accent);font-weight:700;background:var(--accent-soft)}
.rd-ribbon-panel{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:10px 12px;min-height:85px}
.rd-ribbon-panel[hidden]{display:none}.rd-tool-group{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap;padding-inline-end:10px;border-inline-end:1px solid var(--border)}
.rd-tool-group .field{min-width:0;margin:0;max-width:220px}.rd-tool-group .field-label{font-size:.78rem}.rd-tool-group .in{min-height:34px;padding:5px 8px}
.rd-tool-group input[type=number]{width:82px}.rd-tool-group input[type=color]{width:44px;padding:3px}.rd-tool{min-height:34px;padding:6px 10px;white-space:nowrap}
.rd-tool[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.rd-tool-target{font-size:.85rem;color:var(--muted);max-width:220px;overflow-wrap:anywhere;align-self:center}
.rd-editor-work{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0;direction:ltr;align-items:start}
.rd-editor-work.has-inspector{grid-template-columns:minmax(0,1fr) 310px}.rd-paper{min-width:0;border:1px solid var(--border);border-radius:var(--radius);background:#e9edf2;overflow:hidden}
.rd-paper iframe{display:block;width:100%;height:max(65vh,650px);border:0;background:#e9edf2}
.rd-inspector{min-width:0;max-height:75vh;overflow:auto;direction:rtl}.rd-inspector-close{width:100%;margin-bottom:6px}.rd-inspector .card{padding:10px}.rd-inspector .form-grid{grid-template-columns:1fr 1fr}.rd-inspector .field{min-width:0}
.rd-inspector .in{min-width:0}.rd-inspector summary,.rd-advanced>summary{cursor:pointer;padding:10px;font-weight:600;color:var(--accent)}
.rd-advanced{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel)}.rd-advanced>.stack{padding:12px}
@media(max-width:1050px){.rd-editor-work.has-inspector{grid-template-columns:minmax(0,1fr) 270px}.rd-ribbon-panel{gap:6px}.rd-tool-group{padding-inline-end:6px}}
@media(max-width:760px){.rd-toolbar-shell{position:static}.rd-editor-work.has-inspector{grid-template-columns:1fr}.rd-inspector{max-height:55vh}.rd-paper iframe{height:70vh}.rd-ribbon-tab{padding:9px 12px}.rd-quickbar>.bar{margin-inline-start:0}.rd-ribbon-panel{align-items:stretch}}

.rd-ribbon-tabs{flex-wrap:wrap}.rd-ribbon-tabs>.bar{margin-inline-start:auto;align-self:center;gap:5px}.rd-ribbon-tabs input[type=range]{width:110px;min-width:70px}.rd-ribbon-tabs select{max-width:150px}

.group-register-scroll{max-height:65vh;overflow:auto;border:1px solid var(--border)}.group-register-scroll thead th{position:sticky;top:0;z-index:2;background:var(--panel,#fff)}
.daily-balance-scroll table{width:100%!important}
.register-hub-content .group-register-scroll:has(>.table-wrap){max-height:none;overflow:visible;border:0}
.register-hub-content .table-wrap{max-height:70vh;overflow:auto}
.register-hub-content .table-wrap thead th{position:sticky;top:0;z-index:2;background:var(--panel,#fff);box-shadow:inset 0 -1px 0 var(--border)}
.register-table-scroll{min-width:0;max-width:100%;overflow-x:auto}
.register-table-scroll .tbl.register-screen-table th,.register-table-scroll .tbl.register-screen-table td{white-space:normal;overflow-wrap:anywhere;word-break:normal;line-height:1.55;box-sizing:border-box}
.register-screen-table .btn,.register-screen-table .badge{max-width:100%;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}
.register-screen-table td .bar{flex-wrap:wrap}

.register-screen-table[data-density=compact] th,.register-screen-table[data-density=compact] td{padding:4px 6px}
.register-screen-table[data-density=normal] th,.register-screen-table[data-density=normal] td{padding:8px 10px}
.register-screen-table[data-density=wide] th,.register-screen-table[data-density=wide] td{padding:12px 16px}
.register-table-scroll .tbl.register-screen-table[data-text-mode=single] td:not(:has(button,a)){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.register-table-scroll .tbl.register-screen-table td.register-multiline{white-space:pre-line}
.register-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px}
.register-filters>.field{flex:1 1 220px;min-width:0}
.register-filters>.field:has(.date-field,input[type=date]){flex:0 1 185px}
.register-filters>.field:has(select){flex:0 1 150px}
.register-filters>.field:has(input[type=checkbox]),.register-filters>.check{flex:0 0 auto}
.register-filters>.bar{margin:0;flex:0 0 auto}
.register-filters>.muted{flex:1 0 100%;margin:0;font-size:12.5px}

.unit-intake-form .intake-row,.paper-receipt-form .intake-row,.intake-patient-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.intake-patient-row>.field,.intake-patient-row .stack{min-width:0}
.intake-patient-row input{width:100%;box-sizing:border-box}
.intake-patient-row .person-card{min-width:min(240px,100%);overflow-wrap:anywhere}
/* a person's card beside other boxes (its group, «إزالة»): it keeps a readable width and the row wraps on a phone, instead of
   squeezing the name to one letter a line */
.person-card{min-width:min(240px,100%)}
/* the magnifier of the top bar (core/page-search.js): the field under it, the matches on the page, the current one framed */
.ss-wrap{position:relative;display:inline-flex}
.ss-pop{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:30;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);width:340px;max-width:86vw}
.pg-search{display:flex;align-items:center;gap:6px}
.pg-search input{flex:1 1 auto;min-width:0}
.pg-count{white-space:nowrap}
mark.pg-hit{background:#ffe58a;color:inherit;border-radius:3px;padding:0 1px}
mark.pg-hit.on{background:#ffb02e;box-shadow:0 0 0 2px #e08a00}
@media(max-width:600px){.ss-pop{position:fixed;top:64px;left:8px;right:8px;width:auto;max-width:none;inset-inline-end:auto}}
.row-inline:has(> .person-card){flex-wrap:wrap;align-items:flex-start}
.row-inline > .person-card{flex:1 1 240px}
.row-inline:has(> .person-card) > .btn{flex:none}
.row > .person-card{min-width:min(240px,100%)}
@media(max-width:600px){.unit-intake-form .intake-row,.paper-receipt-form .intake-row,.intake-patient-row{grid-template-columns:minmax(0,1fr)}}

.intake-source-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.intake-source-row>.field{min-width:0}
@media(max-width:600px){.intake-source-row{grid-template-columns:minmax(0,1fr)}}

.receipt-time-control{display:flex;flex-direction:column;gap:8px;min-width:0}.receipt-time-locked .date-text:disabled{background:var(--bg);color:var(--muted);opacity:1;cursor:not-allowed}

/* أسعار السجل الخاص: the name of each item, then its cash and master price */
.price-table{display:flex;flex-direction:column;gap:6px}
.price-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
.price-row.price-head{font-weight:700;color:var(--muted);font-size:.9rem}
/* «أسعار السجل الخاص»: the heading line of each part of the one table, and the currency above it */
.price-row.price-section{grid-template-columns:1fr;margin-top:8px;padding:6px 8px;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.price-currency{max-width:220px}
@media(max-width:600px){.price-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.price-row>span:first-child{grid-column:1/-1}.price-head>span:first-child{display:none}}
/* «رجوع» in the top bar: the arrow alone on a phone */
.back-btn{white-space:nowrap;flex:none}
/* on a wide screen the bar stays one line: the page buttons wrap inside their own box, «رجوع» keeps its place */
@media (min-width:901px){.top{flex-wrap:nowrap}#pageTitle{flex:1 1 160px;min-width:120px}#pageActions{flex:0 1 auto;min-width:0}}
/* on a phone the bar stays two short lines while it sticks to the top: the title (cut with «…») with the icons, then the
   page buttons in one line that slides sideways */
@media (max-width:640px){
  .top{gap:6px;padding:8px 10px}
  #pageTitle{flex:1 1 0;min-width:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #pageActions{order:10;flex:1 1 100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:6px}
  #pageActions:empty{display:none}
  #pageActions .btn{padding:5px 10px;font-size:13px;flex:none}
  .top .back-btn{padding:5px 8px}
}
/* تصميم تقارير النتائج: the saved forms as cards */
.rd-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.rd-tpl{display:flex;flex-direction:column;gap:6px;border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--panel)}
.rd-tpl.is-default{border-color:var(--ok, #2e7d32)}
.rd-thumb{display:block;height:170px;overflow:hidden;border:1px solid var(--border);border-radius:6px;background:#fff}
.rd-thumb iframe{width:100%;height:100%;border:0;pointer-events:none}
.rd-tpl-head{display:flex;align-items:center;gap:6px;justify-content:space-between;font-weight:600}
/* «+ فورمة جديدة», as Word's «جديد»: tabs, a gallery of whole sheets, the preview and settings beside it */
.modal.rd-nf-modal{width:min(1180px,96vw);max-width:none}
.rd-nf{display:flex;flex-direction:column;gap:0}
.rd-nf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border)}
.rd-nf-tab{all:unset;cursor:pointer;padding:8px 16px;border-bottom:3px solid transparent;font-weight:600;color:var(--muted)}
.rd-nf-tab.on{border-color:var(--accent);color:var(--text)}
.rd-nf-tab:focus-visible,.rd-nf-tpl:focus-visible,.rd-chip:focus-visible,.rd-swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rd-nf-body{display:grid;grid-template-columns:1fr 330px;min-height:0}
.rd-nf-gallery{padding:14px 4px 14px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px;align-content:start;overflow:auto;max-height:66vh}
.rd-nf-tpl{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:5px;border-radius:10px;padding:7px;border:2px solid transparent}
.rd-nf-tpl:hover{background:var(--bg)}
.rd-nf-tpl.on{border-color:var(--accent);background:var(--bg)}
.rd-nf-tpl small{line-height:1.4}
.rd-nf-thumb{height:250px;border:1px solid var(--border);background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.rd-nf-thumb iframe,.rd-nf-big iframe{width:100%;height:100%;border:0;pointer-events:none}
.rd-nf-thumb.blank{display:flex;align-items:center;justify-content:center;font-size:46px;color:var(--muted)}
.rd-nf-pane{border-inline-start:1px solid var(--border);padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg);overflow:auto;max-height:66vh}
.rd-nf-big{height:360px;flex:none;background:#fff;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.rd-nf-group{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
.rd-nf-group > b{font-size:.85em;color:var(--muted)}
.rd-nf-row{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:8px}
.rd-nf-label{font-weight:600;font-size:.9em}
.rd-chips{display:flex;flex-wrap:wrap;gap:6px}
.rd-chip{all:unset;cursor:pointer;border:1px solid var(--border);background:var(--panel);border-radius:8px;padding:4px 9px;font-size:.86em}
.rd-chip.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent);font-weight:700}
.rd-swatch{all:unset;cursor:pointer;width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border)}
.rd-swatch.on{box-shadow:0 0 0 2px var(--accent)}
@media (max-width:900px){.rd-nf-body{grid-template-columns:1fr}.rd-nf-pane{border-inline-start:0;border-top:1px solid var(--border)}}
/* المخزون ← وحدات الدم: one line of figures, short alerts, the board of the eight groups, the units by shelf */
.stock-chips{display:flex;flex-wrap:wrap;gap:8px}
.stock-chip{all:unset;cursor:pointer;border:1px solid var(--border);border-radius:999px;padding:6px 14px;background:var(--panel);display:flex;gap:8px;align-items:center}
.stock-chip b{font-size:1.15em}
.stock-chip.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.stock-chip.warn{border-color:#e0a800;background:color-mix(in srgb,#e0a800 12%,var(--panel))}
.stock-chip:focus-visible,.stock-g:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stock-alerts{display:flex;flex-direction:column;gap:6px}
.stock-alert{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-radius:10px;padding:8px 12px;background:color-mix(in srgb,#e0a800 12%,var(--panel));border:1px solid #e0a800}
.stock-alert.red{background:color-mix(in srgb,#d33 9%,var(--panel));border-color:#e39a9a}
.stock-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stock-board-row{grid-column:1/-1;font-weight:700;color:var(--muted);margin:4px 2px -2px}
.stock-g{all:unset;cursor:pointer;border:2px solid var(--border);border-radius:14px;display:flex;flex-direction:column;background:var(--panel);min-height:160px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.stock-g.on{outline:3px solid var(--accent);outline-offset:2px}
.stock-g-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#5b6573;color:#fff}
.stock-g-name{font-size:1.55em;font-weight:800;letter-spacing:.5px}
.stock-g-state{font-size:.78em;font-weight:700;background:rgba(255,255,255,.22);border-radius:999px;padding:2px 8px}
.stock-g-body{display:flex;gap:10px;align-items:flex-start;padding:10px 12px}
.stock-bag svg{height:56px;display:block}
.stock-bag{flex:none}
/* the derivative cards: the bag in the corner, the text beside it */
.stock-freezer-type,.stock-freezer-group{position:relative;padding-inline-start:58px!important;min-height:76px}
.stock-bag-side{position:absolute;inset-inline-start:8px;top:10px}
.stock-bag-side svg{height:54px}
.stock-g-avail{flex:none;width:56px;height:56px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.55em;font-weight:800;line-height:1;border:3px solid currentColor;color:#5b6573}
.stock-g-avail small{font-size:.38em;font-weight:700;margin-top:2px}
.stock-g-types{flex:1;display:flex;flex-direction:column;gap:3px;font-size:.88em;min-width:0}
.stock-g-types span{display:flex;justify-content:space-between;gap:6px}
.stock-g-types .irr{background:color-mix(in srgb,#e0a800 18%,transparent);border-radius:4px;padding:0 4px}
.stock-g-foot{margin-top:auto;padding:6px 12px 8px;font-size:.8em;color:var(--muted);display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.stock-g-exp{color:#a66b00;font-weight:700}
.stock-g.ok{border-color:#9bd3a4}.stock-g.ok .stock-g-head{background:#1f7a4d}.stock-g.ok .stock-g-avail{color:#1f7a4d}
.stock-g.low{border-color:#e0a800}.stock-g.low .stock-g-head{background:#b07800}.stock-g.low .stock-g-avail{color:#a66b00}
.stock-g.crit{border-color:#d33}.stock-g.crit .stock-g-head{background:#b3261e}.stock-g.crit .stock-g-avail{color:#b3261e}
.stock-shelf{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:8px}
.stock-shelf h4{margin:0;padding:8px 12px;background:var(--bg);display:flex;justify-content:space-between}
.stock-days.d1{color:#b3261e}.stock-days.d2{color:#a66b00}.stock-days.d3{color:#1f7a4d}
@media (max-width:800px){.stock-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* المخزون: the three tabs, the places as cards, the contents, the overview */
.stock-page-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border)}
.stock-page-tabs button{all:unset;cursor:pointer;padding:10px 18px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent}
.stock-page-tabs button.on{color:var(--text);border-color:var(--accent)}
.stock-page-tabs button:focus-visible,.stock-loc:focus-visible,.stock-content-btn:focus-visible,.stock-ov:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stock-step{font-size:.8em;font-weight:700;color:var(--muted)}
.stock-location-picker{display:flex;flex-wrap:wrap;gap:8px}
.stock-loc{all:unset;cursor:pointer;border:1px solid var(--border);border-radius:12px;padding:8px 12px;display:flex;gap:10px;align-items:center;background:var(--panel);min-width:160px}
.stock-loc.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.stock-loc.empty{opacity:.55}
.stock-loc-text{display:flex;flex-direction:column;line-height:1.3}
.stock-loc-text small{color:var(--muted)}
.stock-loc-n{margin-inline-start:auto;font-weight:800;background:var(--bg);border-radius:999px;padding:2px 9px}
.stock-content-btn{all:unset;cursor:pointer;border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-weight:600}
.stock-content-btn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.stock-content-btn:disabled{opacity:.4;cursor:default}
.stock-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stock-ov{all:unset;cursor:pointer;border:2px solid var(--border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--panel)}
.stock-ov:hover{border-color:var(--accent)}
.stock-ov-title{display:flex;gap:8px;align-items:center;font-weight:800}
.stock-ov-n{font-size:2em;line-height:1}
.stock-ov-warn{color:#a66b00;font-weight:700}
@media (max-width:900px){.stock-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* on a phone the places are one even column */
@media (max-width:640px){.stock-location-picker{display:grid!important;grid-template-columns:minmax(0,1fr)}.stock-loc{min-width:0;box-sizing:border-box}}
/* المخزون ← المحاليل والكواشف: five small cards in a row, the bottle beside the name */
.rc-head{align-items:center}
.rc-seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.rc-seg button{all:unset;cursor:pointer;padding:6px 12px;font-weight:600}
.rc-seg button.on{background:var(--accent);color:var(--accent-ink)}
.rc-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.rc{all:unset;cursor:pointer;border:2px solid var(--border);border-radius:14px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.rc.on{outline:3px solid var(--accent);outline-offset:2px}
.rc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rc-flag{display:block;text-align:center;font-size:.72em;font-weight:700;padding:2px 6px;background:#b3261e;color:#fff}
.rc-flag.low{background:#b07800}
.rc-top{display:flex;align-items:center;gap:8px;padding:8px 10px 4px;background:linear-gradient(90deg,transparent 0%,var(--rc-tint,transparent) 100%)}
.rc-pic svg{height:62px;display:block}
.rc-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.rc-name{font-size:1.02em;font-weight:800;text-align:right;line-height:1.2}
.rc-sci{font-size:.68em;color:var(--muted);text-align:right;line-height:1.3}
.rc-counts{display:flex;gap:4px;padding:4px 10px}
.rc-counts span{flex:1;text-align:center;border-radius:6px;background:var(--bg);padding:2px 0;font-size:.72em;line-height:1.3}
.rc-counts b{display:block;font-size:1.3em}
.rc-foot{margin-top:auto;padding:3px 10px 7px;font-size:.74em;display:flex;flex-direction:column;gap:1px}
.rc-bottles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.rc-bottle{border:1px solid var(--border);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;font-size:.9em}
.rc-bottle.open{border-color:#7aa7d9;background:color-mix(in srgb,#7aa7d9 10%,var(--panel))}
.rc-bottle.exp{border-color:#d33;background:color-mix(in srgb,#d33 8%,var(--panel))}
.rc-line{display:flex;justify-content:space-between;gap:6px;align-items:center}
.rc-warn{color:#a66b00;font-weight:700}.rc-bad{color:#b3261e;font-weight:700}
@media (max-width:1000px){.rc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* إرجاع وحدات الدم */
.rt-checks{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px}
.rt-check{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.rt-check > span{flex:1 1 240px}
.rt-expected{padding:8px 10px;border-radius:8px;background:var(--bg)}
tr.rt-discarded td{background:color-mix(in srgb,#d33 10%,transparent)}
tr.rt-quarantine td{background:color-mix(in srgb,#e0a800 12%,transparent)}
.rd-paper-pick .field{max-width:520px}.rd-paper-pick select{max-width:220px}
@media (max-width:600px){.back-btn{padding-inline:8px}.back-btn .lbl{display:none}}

/* «إعدادات الجهاز»: the steps of direct printing and the barcode reader test */
.steps{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:6px}
.steps code{background:var(--bg);padding:2px 6px;border-radius:6px;font-size:12px;user-select:all}
.scan-log{font-family:monospace;background:var(--bg);border:1px dashed var(--border);border-radius:8px;padding:8px;min-height:38px;overflow-wrap:anywhere}
p.ok{color:var(--ok);font-weight:700}
/* ---------- أنماط التصميم: the shape of a design style (lib/system_themes.js, styled). Only under [data-style], so the colour
   themes keep the flat look. The safety colours (danger, warning, compatible, the ABO groups) are never touched. ---------- */
html[data-style] body{background:var(--page-bg) fixed}
[data-style] .side{background:var(--nav-bg); box-shadow:0 0 30px rgba(0,0,0,.06)}
[data-style] .nav a{border-radius:var(--r-sm); padding:9px 12px; transition:background .15s}
[data-style] .nav a.on{background:var(--nav-on-bg); color:var(--nav-on-ink); box-shadow:var(--nav-on-shadow); font-weight:700}
[data-style] .top{background:var(--top-bg); border-bottom:var(--top-line); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
[data-style] .card,[data-style] .stat,[data-style] .desk-tile,[data-style] .table-wrap,[data-style] .theme-preview-main{border:var(--card-line); border-radius:var(--r-md); box-shadow:var(--card-shadow)}
[data-style] .card{padding:18px 20px}
[data-style] .card,[data-style] .stat,[data-style] .desk-tile{background:var(--card-bg)}
[data-style] .stat{padding:16px 18px}
[data-style] .desk-tile{transition:transform .15s, box-shadow .15s}
[data-style] .desk-tile:hover{transform:translateY(-2px)}
[data-style] .btn,[data-style] .in{border-radius:var(--r-sm)}
[data-style] .btn.primary{box-shadow:var(--pill-shadow)}
[data-style] .desk-home-hero{background:var(--hero-bg); border-radius:var(--r-md); box-shadow:var(--card-shadow)}
[data-style] .tabs a.on,[data-style] .tabs button.on{font-weight:700}
/* the preview in the settings shows the shape too */
.theme-preview[data-style]{background:var(--page-bg)}
.theme-preview[data-style] .theme-preview-nav{background:var(--nav-bg)}
.theme-preview[data-style] .theme-preview-nav span{border-radius:var(--r-sm)}
.theme-preview[data-style] .theme-preview-nav span.on{background:var(--nav-on-bg); color:var(--nav-on-ink); box-shadow:var(--nav-on-shadow)}
/* «المظهر والثيمات»: the themes as small pictures, the preview beside them, a reason and save on one line */
.ap-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
.ap-side{position:sticky;top:80px}
.ap-h{margin:6px 0 0;font-size:15px}
.ap-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ap-tiles.small{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.ap-tile{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:6px;border:2px solid var(--border);border-radius:12px;background:var(--panel)}
.ap-tile:hover{border-color:var(--accent)}
.ap-tile.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ap-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ap-tile-name{font-size:13px;font-weight:600;display:flex;justify-content:space-between;gap:4px;align-items:center;padding:0 2px}
.ap-current{font-size:11px;background:var(--ok-soft);color:var(--ok);border-radius:999px;padding:0 6px;font-weight:700}
.ap-mini{display:grid;grid-template-columns:22% 1fr;height:64px;border-radius:8px;overflow:hidden;background:var(--page-bg,var(--bg));border:1px solid rgba(0,0,0,.06)}
.ap-tiles.small .ap-mini{height:46px}
.ap-mini-nav{background:var(--nav-bg,var(--nav))}
.ap-mini-page{position:relative;padding:8px}
.ap-mini-card{display:block;height:100%;border-radius:var(--r-sm,4px);background:var(--card-bg,var(--panel));box-shadow:var(--card-shadow,none);border:var(--card-line,1px solid var(--border))}
.ap-mini-dot{position:absolute;inset-inline-end:14px;top:14px;width:14px;height:14px;border-radius:50%;background:var(--accent)}
.ap-preview{grid-template-columns:120px minmax(0,1fr)}
.ap-preview-body{display:flex;flex-direction:column}
.ap-save{display:flex;gap:8px;flex-wrap:wrap}
.ap-save .in{flex:1;min-width:180px}
.ap-choices{display:flex;flex-direction:column;gap:6px}
.ap-choice{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.ap-choice:hover{border-color:var(--accent)}
.ap-choice.on{border-color:var(--accent);background:var(--accent-soft);font-weight:700}
.ap-grid.home{grid-template-columns:220px minmax(0,1fr)}
@media (max-width:900px){.ap-grid,.ap-grid.home{grid-template-columns:1fr}.ap-side{position:static}}/* a flat theme's picture inside a styled page: no shape inherited from the page */
.ap-mini:not([data-style]){background:var(--bg)}
.ap-mini:not([data-style]) .ap-mini-nav{background:var(--nav)}
.ap-mini:not([data-style]) .ap-mini-card{border-radius:4px;background:var(--panel);box-shadow:none;border:1px solid var(--border)}
.theme-preview:not([data-style]) .theme-preview-nav{background:var(--nav)}
.theme-preview:not([data-style]) .theme-preview-main{border:1px solid var(--border);border-radius:var(--radius);box-shadow:none;background:var(--panel)}
.theme-preview:not([data-style]) .btn,.theme-preview:not([data-style]) .btn.primary{border-radius:8px;box-shadow:none}/* «شكل واجهة مكتب مصرف الدم»: each look as the real layout scaled down; the chosen one full width below */
.ap-home-tiles{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.ap-home-mini{display:block;height:110px;overflow:hidden;border-radius:8px;background:var(--bg);border:1px solid var(--border);position:relative}
.ap-home-mini-in{position:absolute;inset-inline-start:0;top:0;width:900px;transform:scale(.19);transform-origin:top right;pointer-events:none}
[dir=ltr] .ap-home-mini-in{transform-origin:top left}
.ap-home-preview{border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:var(--bg);max-height:520px;overflow:auto}/* «المظهر والثيمات» rebuilt: a switch for the two parts, the preview first, the pictures under it, save at the end */
.ap-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ap-seg{display:inline-flex;align-self:flex-start;width:fit-content;gap:3px;padding:3px;background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-wrap:wrap}
.ap-seg-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:4px 11px;border-radius:7px;font-weight:600;font-size:12.5px;color:var(--muted)}
.ap-seg-btn:hover{color:var(--text)}
.ap-seg-btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.ap-seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ap-card{gap:0}
.ap-part{gap:12px}
.ap-label{font-size:14px;color:var(--muted)}
.ap-part .ap-tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ap-part .ap-preview{grid-template-columns:130px minmax(0,1fr);max-width:760px}
.ap-part .ap-home-preview{max-height:440px}/* the desk-home preview reduced to a picture at its full height: no scroll box inside the page */
.ap-part .ap-home-preview{max-height:none;overflow:hidden;padding:10px}
.ap-part .ap-home-preview > *{zoom:.6;pointer-events:none}/* the looks of the desk home: a line under each name, and the note on what differs from the system theme */
.ap-tile-desc{font-size:12px;color:var(--muted);line-height:1.5;padding:0 2px}
.ap-diff{background:var(--info-soft);color:var(--text);border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.7}
/* the theme part: the switch and its line side by side */
.ap-choose{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* the desk home look: one drop-down list, its description under it */
.ap-home-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ap-home-select{width:auto;min-width:240px;max-width:100%}
.ap-home-desc{margin:0;color:var(--muted);font-size:13.5px}
/* «واجهة الدخول»: an uploaded intro shown sealed off (settings/intro.js) */
.intro-sealed{display:block;width:100%;height:min(60vh,520px);border:1px solid var(--line,#ddd);border-radius:10px;background:#000}
.intro-row{align-items:center}