/* Blood palette: maroon sidebar, blush work surface, crimson actions.
   Component colours follow the bag contents: red cells, straw plasma, amber platelets, frost cryo.
   ABO colours follow ISBT 128 labels: O blue, A yellow, B pink, AB neutral. */
:root{
  --bg:#fbf4f4; --surface:#ffffff; --surface2:#f7eaec; --line:#eed8db; --fg:#2a1116; --muted:#7b5a60;
  --accent:#b3122e; --accent-ink:#ffffff; --accent-soft:#fce3e7; --accent2:#8a0c22;
  --side:#4d0b18; --side2:#6e1527; --side-deep:#2b0610; --side-fg:#f2cdd3; --side-hi:#ffffff; --side-mark:#ff7088;
  --logo:#e0233f;
  --ok:#17784a; --ok-soft:#e1f3e8; --warn:#9a5a00; --warn-soft:#fcefd8; --bad:#c1272d; --bad-soft:#fde5e5; --info:#1d5ca3; --info-soft:#e2edf9;
  --gA:#b98a00; --gB:#bf3d67; --gAB:#6b5a60; --gO:#2370b0;
  --cWB:#6e0b1c; --cRBC:#b3122e; --cFFP:#c08d0c; --cPLASMA:#b8890f; --cCPP:#9c8636; --cPC:#d0650f; --cSDP:#b5530a; --cCRYO:#2f7fa6;
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#150a0d; --surface:#1f1115; --surface2:#2b171c; --line:#3d2229; --fg:#f7e9eb; --muted:#c09aa1;
  --accent:#ff4d6a; --accent-ink:#ffffff; --accent-soft:#47141e; --accent2:#d92f4c;
  --side:#2c060e; --side2:#481020; --side-deep:#150307; --side-fg:#e9bcc4; --side-hi:#ffffff; --side-mark:#ff7088;
  --logo:#ff4d6a;
  --ok:#4cc488; --ok-soft:#14301f; --warn:#e4a440; --warn-soft:#33260f; --bad:#ff6b6b; --bad-soft:#3a1618; --info:#6aa8ef; --info-soft:#14263b;
  --gA:#d9ab24; --gB:#e0628b; --gAB:#9a8a90; --gO:#4d9be0;
  --cWB:#e0566c; --cRBC:#ff4d6a; --cFFP:#f0c33c; --cPLASMA:#e8bb34; --cCPP:#cbb46a; --cPC:#ff9a4a; --cSDP:#f0883a; --cCRYO:#6cc0e6; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#150a0d; --surface:#1f1115; --surface2:#2b171c; --line:#3d2229; --fg:#f7e9eb; --muted:#c09aa1;
  --accent:#ff4d6a; --accent-ink:#ffffff; --accent-soft:#47141e; --accent2:#d92f4c;
  --side:#2c060e; --side2:#481020; --side-deep:#150307; --side-fg:#e9bcc4; --side-hi:#ffffff; --side-mark:#ff7088;
  --logo:#ff4d6a;
  --ok:#4cc488; --ok-soft:#14301f; --warn:#e4a440; --warn-soft:#33260f; --bad:#ff6b6b; --bad-soft:#3a1618; --info:#6aa8ef; --info-soft:#14263b;
  --gA:#d9ab24; --gB:#e0628b; --gAB:#9a8a90; --gO:#4d9be0;
  --cWB:#e0566c; --cRBC:#ff4d6a; --cFFP:#f0c33c; --cPLASMA:#e8bb34; --cCPP:#cbb46a; --cPC:#ff9a4a; --cSDP:#f0883a; --cCRYO:#6cc0e6; color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14px;line-height:1.45}
*{box-sizing:border-box}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:1.55rem;font-weight:800}h2{font-size:1.1rem;font-weight:600}h3{font-size:.95rem;font-weight:600}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
a{color:var(--info)}

/* login */
.login{min-height:100%;display:grid;grid-template-columns:1.1fr 1fr}
.login-brand{background:var(--side);color:var(--side-fg);padding-block:48px;padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:40px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;position:relative;overflow:hidden}
.login-brand .ecg{position:absolute;left:0;right:0;top:46%;opacity:.18}
.login-brand h2{color:var(--side-hi);font-size:2.2rem;font-weight:800;max-width:14ch;line-height:1.08}
.login-brand ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:.92rem}
.login-brand li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:middle}
.login-form{display:grid;place-items:center;padding-block:40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.login-form form{width:min(360px,100%);display:grid;gap:14px}
.demo-acc{font-size:.82rem;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.demo-acc button{border:0;background:none;color:var(--info);padding:0;cursor:pointer;text-decoration:underline}

/* logo */
.logo{display:flex;align-items:center;gap:10px}
.logo svg{flex:none}
.logo .wm{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:.02em;line-height:1;color:var(--side-hi)}
.logo .wm small{display:block;font-family:var(--body);font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--side-fg);margin-top:4px}
.logo.light .wm{color:var(--fg)}.logo.light .wm small{color:var(--muted)}

/* app shell */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100%}
.side{background:var(--side);color:var(--side-fg);padding:18px 12px 24px;padding-left:max(12px,env(safe-area-inset-left,0px));position:sticky;top:0;height:100vh;overflow-y:auto}
.side .logo{padding:4px 8px 18px;border-bottom:1px solid var(--side2);margin-bottom:10px}
.nav-g{margin-top:14px}
.nav-g>div{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;padding:0 10px 6px;opacity:.7}
.nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:7px;color:var(--side-fg);text-decoration:none;font-size:.9rem}
.nav a:hover{background:var(--side2);color:var(--side-hi)}
.nav a.on{background:var(--side2);color:var(--side-hi);box-shadow:inset 3px 0 0 var(--accent)}
.nav .bdg{font-family:var(--mono);font-size:.72rem;background:var(--accent);color:#fff;border-radius:20px;padding:0 7px;line-height:18px}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding-block:10px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.top .centre{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .centre small{display:block;font-weight:400;color:var(--muted);font-size:.78rem}
.top .sp{flex:1}
.top form{display:flex;gap:6px}
.top input{width:190px}
.who{display:flex;align-items:center;gap:8px;font-size:.85rem;white-space:nowrap}
.who .av{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:600}
.menu-btn{display:none}
.view{padding-block:22px 48px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));display:grid;gap:18px;align-content:start}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ph p{margin:4px 0 0;color:var(--muted)}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.card>h2,.card>h3{margin-bottom:12px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cols{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.cols-2{display:grid;gap:18px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}

/* tiles */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))}
.tile{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 12px;border-top:3px solid var(--tc,var(--line))}
.tile:hover{border-color:var(--tc)}
.tile b{font-family:var(--display);font-size:1.9rem;font-weight:800;display:block;line-height:1;color:var(--tc,var(--fg))}
.tile span{font-size:.84rem;color:var(--muted);display:block;margin-top:6px}
.t-bad{--tc:var(--bad)}.t-warn{--tc:var(--warn)}.t-ok{--tc:var(--ok)}.t-info{--tc:var(--info)}.t-mut{--tc:var(--muted)}

/* stock grid */
.sgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.sg{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.sg header{background:var(--gc);color:#fff;font-family:var(--display);font-weight:800;font-size:1.8rem;text-align:center;padding:6px 0}
.sg table{width:100%;border-collapse:collapse;font-size:.85rem}
.sg td,.sg th{padding:4px 10px;text-align:right}
.sg th{font-weight:500;color:var(--muted);font-size:.75rem}
.sg td:first-child,.sg th:first-child{text-align:left;font-weight:500}
.sg tr+tr td{border-top:1px solid var(--line)}
.sg .z{color:var(--muted);opacity:.6}

/* tables */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.t{width:100%;border-collapse:collapse;font-size:.86rem}
.t th{background:var(--surface2);text-align:left;font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:9px 10px;white-space:nowrap;position:sticky;top:0}
.t td{padding:8px 10px;border-top:1px solid var(--line);vertical-align:middle}
.t tr:hover td{background:color-mix(in srgb,var(--surface2) 55%,transparent)}
.t .r{text-align:right}
.t td.nw{white-space:nowrap}
.empty{padding:28px;text-align:center;color:var(--muted)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--surface2);color:var(--muted);white-space:nowrap}
.c-ok{background:var(--ok-soft);color:var(--ok)}.c-warn{background:var(--warn-soft);color:var(--warn)}.c-bad{background:var(--bad-soft);color:var(--bad)}.c-info{background:var(--info-soft);color:var(--info)}.c-acc{background:var(--accent-soft);color:var(--accent)}
.grp{display:inline-block;min-width:54px;text-align:center;font-family:var(--mono);font-weight:500;font-size:.8rem;padding:1px 6px;border-radius:5px;color:#fff;background:var(--gc,var(--muted))}

/* forms */
.fg{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr))}
.fg .w2{grid-column:span 2}.fg .wf{grid-column:1/-1}
.f{display:grid;gap:4px;min-width:0}
.f label,.lbl{font-size:.76rem;font-weight:500;color:var(--muted)}
.f label i{color:var(--accent);font-style:normal}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=tel],input:not([type]),select,textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:7px 9px;min-height:36px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
input[readonly]{background:var(--surface2)}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 14px;margin:0;min-width:0}
legend{font-family:var(--display);font-weight:600;padding:0 6px}
.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:.88rem}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:7px 13px;cursor:pointer;font-weight:500;min-height:36px;white-space:nowrap;text-decoration:none;color:var(--fg)}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.sm{min-height:28px;padding:3px 9px;font-size:.8rem}
.btn.dng{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.btn:disabled{opacity:.45;cursor:not-allowed}
.elig{border-radius:8px;padding:10px 12px;font-size:.86rem}
.elig ul{margin:6px 0 0;padding-left:18px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:none;padding:8px 14px;cursor:pointer;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--accent);border-color:var(--accent)}

/* requests */
.rq{display:grid;gap:12px}
.rqc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--uc,var(--info));border-radius:var(--r);padding:12px 14px}
.rqc .nm{font-weight:600;font-size:1rem}
.bags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.bag{font-family:var(--mono);font-size:.78rem;border:1px solid var(--line);border-radius:6px;padding:2px 8px;background:var(--surface2)}
.bag b{color:var(--accent)}

/* modal */
.ov{position:fixed;inset:0;background:rgba(10,14,20,.55);display:grid;place-items:center;z-index:50;padding:16px;padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
.md{background:var(--surface);border-radius:12px;width:min(640px,100%);max-height:100%;overflow:auto;padding:20px;border:1px solid var(--line)}
.md-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px}
.x{border:0;background:none;font-size:1.4rem;cursor:pointer;color:var(--muted);line-height:1}
.gt{width:100%;border-collapse:collapse;font-size:.86rem}
.gt td,.gt th{padding:6px;border-bottom:1px solid var(--line);text-align:center}
.gt th{font-size:.75rem;color:var(--muted)}
.gt select{min-height:30px;padding:3px}
.interp{display:flex;gap:14px;align-items:center;margin:14px 0;flex-wrap:wrap}
.big-grp{font-family:var(--display);font-weight:800;font-size:2.4rem;color:#fff;background:var(--gc,var(--muted));border-radius:10px;padding:2px 18px;min-width:120px;text-align:center}

/* labels & audit */
.label{border:2px solid var(--fg);border-radius:4px;display:grid;grid-template-columns:1fr auto;font-size:.82rem;max-width:380px;background:var(--surface)}
.label>div{padding:8px 10px}
.label .lg{border-left:2px solid var(--fg);text-align:center;font-family:var(--display);font-weight:800;font-size:2rem;display:grid;align-content:center;min-width:92px}
.label .lg small{display:block;font-size:.72rem;font-family:var(--body)}
.label .full{grid-column:1/-1;border-top:2px solid var(--fg)}
.bar{height:26px;margin:4px 0;background:repeating-linear-gradient(90deg,var(--fg) 0 2px,transparent 2px 4px,var(--fg) 4px 5px,transparent 5px 8px,var(--fg) 8px 11px,transparent 11px 12px)}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tl li{position:relative;padding:0 0 16px 26px;border-left:2px solid var(--line);margin-left:8px}
.tl li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.tl li:last-child{border-color:transparent}
.tl small{color:var(--muted);display:block}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.88rem}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.mx td,.mx th{text-align:center}
.mx td:first-child,.mx th:first-child{text-align:left}
.toast{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:8px;z-index:60;font-weight:500;max-width:min(420px,calc(100% - 32px))}
.toast.err{background:var(--bad);color:#fff}
svg text{font-family:var(--mono)}
.legend{display:flex;gap:14px;font-size:.8rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.act{display:flex;flex-direction:column;gap:8px;font-size:.86rem}
.act div{display:flex;gap:10px;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:6px}

@media (max-width:900px){
  .cols-2{grid-template-columns:1fr}
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:260px;z-index:40;transform:translateX(-100%);transition:transform .2s;height:auto;padding-top:max(18px,env(safe-area-inset-top,0px))}
  .app.nav-open .side{transform:none}
  .app.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:30}
  .menu-btn{display:inline-flex}
  .top input{width:120px}
  .who span{display:none}
  .login{grid-template-columns:1fr}
  .login-brand{padding-block:28px;padding-right:max(16px,env(safe-area-inset-right,0px));padding-left:max(16px,env(safe-area-inset-left,0px))}
  .login-brand h2{font-size:1.6rem}
  .fg .w2{grid-column:1/-1}
}
@media (max-width:560px){.top .centre small{display:none}.top form{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.banner{background:var(--warn-soft);color:var(--warn);font-weight:600;font-size:.85rem;padding-block:6px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));display:flex;gap:10px;align-items:center;justify-content:space-between}
.upd{display:none}.upd.on{display:inline-flex}
.boot{display:grid;place-items:center;min-height:100%;color:var(--muted)}
.uline{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
@media print{
  .side,.top,.banner,.menu-btn,.btn,.tabs,form.row,.toast{display:none!important}
  .app{display:block}.view{padding:0}
  body{background:#fff;color:#000}
  .ov{position:static;background:none;padding:0}.md{border:0;width:100%}
  .tw{overflow:visible;border:0}.t th{position:static}
}

/* ---- blood theme ---- */
.side{background:linear-gradient(180deg,var(--side) 0%,var(--side-deep) 100%)}
.side .logo{border-bottom-color:rgba(255,255,255,.12)}
.nav a:hover{background:rgba(255,255,255,.08)}
.nav a.on{background:rgba(255,255,255,.12);box-shadow:inset 3px 0 0 var(--side-mark)}
.nav .bdg{background:var(--side-mark);color:#2b0610}
.top{box-shadow:inset 0 -2px 0 var(--accent)}
.btn.pri{background:linear-gradient(180deg,var(--accent),var(--accent2));border-color:var(--accent2)}
.login-brand{background:radial-gradient(130% 90% at 0% 0%,var(--side2) 0%,var(--side) 45%,var(--side-deep) 100%)}
.login-brand .ecg path{stroke:var(--side-mark)}
.login-brand li::before{background:var(--side-mark)}
.who .av{background:var(--accent);color:var(--accent-ink)}
.tabs button.on{color:var(--accent);border-color:var(--accent)}
.card>h2::before,.card-h>h2::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);margin-right:8px;vertical-align:2px}
.cp{display:inline-block;min-width:44px;text-align:center;font-family:var(--mono);font-size:.74rem;font-weight:600;padding:1px 7px;border-radius:5px;border:1px solid color-mix(in srgb,var(--k) 45%,transparent);background:color-mix(in srgb,var(--k) 15%,var(--surface));color:color-mix(in srgb,var(--k) 72%,var(--fg))}
.cp-WB{--k:var(--cWB)}.cp-RBC{--k:var(--cRBC)}.cp-FFP{--k:var(--cFFP)}.cp-PLASMA{--k:var(--cPLASMA)}.cp-CPP{--k:var(--cCPP)}.cp-PC{--k:var(--cPC)}.cp-SDP{--k:var(--cSDP)}.cp-CRYO{--k:var(--cCRYO)}
.ckey{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:.78rem;color:var(--muted);align-items:center}
.ckey span.k{display:inline-flex;gap:6px;align-items:center}

#root{min-height:100%}
.login{min-height:100vh}

/* ---- AKS logo ---- */
.logo img{flex:none;display:block;object-fit:contain}
.logo.light .lg-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo.light .lg-light{display:none}:root:not([data-theme="light"]) .logo.light .lg-dark{display:block}}
:root[data-theme="dark"] .logo.light .lg-light{display:none}:root[data-theme="dark"] .logo.light .lg-dark{display:block}
.big-logo{width:min(230px,55vw);height:auto;max-width:100%;filter:drop-shadow(0 8px 28px rgba(0,0,0,.35))}
.login-brand{justify-content:flex-start;gap:28px}

.logo .wm small{letter-spacing:.06em;white-space:nowrap;font-size:.62rem}

/* ---- labels & printed documents (always black on white: this is paper) ---- */
#printArea{display:none}
.lab{width:var(--lw,100mm);height:var(--lh,50mm);box-sizing:border-box;padding:2mm 3mm;background:#fff;color:#000;font:8pt/1.25 Arial,Helvetica,sans-serif;overflow:hidden;display:flex;flex-direction:column;gap:1mm;break-after:page;page-break-after:always}
.lab b{font-weight:700}
.l-h{display:flex;justify-content:space-between;gap:2mm;border-bottom:.3mm solid #000;padding-bottom:.6mm;font-size:7pt;white-space:nowrap;overflow:hidden}
.l-h b{overflow:hidden;text-overflow:ellipsis}
.l-bc{text-align:center}.l-bc .bc{width:100%;display:block}
.l-bt{font:700 9pt/1.1 'Courier New',monospace;letter-spacing:.06em}
.l-r{display:flex;justify-content:space-between;gap:2mm}
.l-q,.l-ok{margin-top:auto;text-align:center;font-weight:700;font-size:7.5pt;padding:.6mm;border:.4mm solid #000}
.l-q{background:#000;color:#fff}
.l-main{display:flex;gap:2mm;flex:1;min-height:0}
.l-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3mm}
.l-cn{font-weight:700;font-size:10pt}.l-cn span{font-weight:400;font-size:8pt}
.l-exp{font-size:9pt}.l-st{font-size:7pt;font-style:italic}
.l-grp{width:24mm;border:.6mm solid #000;display:grid;place-content:center;text-align:center;font:700 26pt/1 Arial,sans-serif}
.l-grp small{display:block;font-size:6pt;letter-spacing:.02em}
.tube .l-bc .bc{height:16mm!important}
.lab-prev{display:flex;flex-direction:column;gap:10px;align-items:flex-start;overflow-x:auto;padding:4px 0 12px}
.lab-prev .lab{box-shadow:0 1px 4px rgba(0,0,0,.25);border-radius:2px;flex:none}
.doc{background:#fff;color:#000;font:10pt/1.45 Arial,Helvetica,sans-serif}
.lhd{display:flex;gap:5mm;align-items:center;border-bottom:.6mm solid #8a0c22;padding-bottom:3mm;margin-bottom:5mm}
.lhd img{width:22mm;height:22mm;object-fit:contain}
.lhd h1{font:700 17pt/1.1 Arial,sans-serif;margin:0 0 1mm;color:#8a0c22}.lhd p{margin:0;font-size:9pt}
.dt{font:700 13pt Arial,sans-serif;margin:0 0 4mm;text-align:center;text-transform:uppercase;letter-spacing:.04em}
.dtab{width:100%;border-collapse:collapse;font-size:8.5pt}.dtab th,.dtab td{border:.2mm solid #555;padding:1.2mm 1.6mm;text-align:left;vertical-align:top}.dtab th{background:#eee}
.dfoot{margin-top:8mm;font-size:7.5pt;color:#444;border-top:.2mm solid #999;padding-top:2mm}
.dsig{display:flex;justify-content:space-between;margin-top:18mm;font-size:9pt}
.cert .cert-in{border:2mm double #8a0c22;padding:10mm 12mm;min-height:240mm;display:flex;flex-direction:column}
.cert-t{font:700 26pt Georgia,serif;text-align:center;color:#8a0c22;margin-top:14mm}
.cert-s{text-align:center;letter-spacing:.2em;text-transform:uppercase;font-size:10pt;margin-bottom:14mm}
.cert-p{font:13pt/1.7 Georgia,serif;text-align:center;margin:0 0 6mm}
.cert-sig{display:flex;justify-content:space-between;margin-top:auto;padding-top:20mm;font-size:11pt}
.cert-sig div:last-child{border-top:.3mm solid #000;padding-top:2mm;min-width:55mm;text-align:center}
@media print{
  body.printing #root,body.printing #ov,body.printing .toast,body.printing .banner{display:none!important}
  body.printing #printArea{display:block}
  body.printing{background:#fff!important}
  .pa-sheet{display:grid!important;grid-template-columns:repeat(2,100mm);gap:3mm;justify-content:center}
  .pa-sheet .lab{break-after:auto;page-break-after:auto;outline:.2mm dashed #999;break-inside:avoid}
  .pa-roll .lab:last-child,.pa-doc .doc{break-after:auto;page-break-after:auto}
}
.scan{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--accent-soft);border:1px dashed var(--accent);border-radius:var(--r);padding:10px 12px}
.scan input{max-width:320px;font-family:var(--mono)}
.logo-prev{width:72px;height:72px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff}
textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:7px 9px;font:inherit;color:inherit}
body{margin:0}
.lab{break-inside:avoid;page-break-inside:avoid}
@media print{.pa-roll .lab{height:calc(var(--lh,50mm) - .6mm)}}

/* ---- activity log & corrections ---- */
.why{font-size:.8rem;color:var(--warn);margin-top:2px}
.edit-row td{background:color-mix(in srgb,var(--warn-soft) 55%,transparent)}
.chg-row td{background:var(--surface2)}
table.chg{border-collapse:collapse;font-size:.8rem;margin-top:6px;width:100%}
table.chg td{padding:3px 8px;border-top:1px solid var(--line);vertical-align:top}
table.chg td:first-child{color:var(--muted);white-space:nowrap}
table.chg td.old{color:var(--bad);text-decoration:line-through;text-decoration-thickness:1px}
table.chg td.new{color:var(--ok);font-weight:600}
.tl table.chg{width:auto;max-width:100%}

/* ---- themes (sidebar & accent only; blood group and component colours never change) ---- */
:root[data-skin="royal"]{--side:#3b0a1f;--side2:#5b1531;--side-deep:#1e0410;--side-fg:#f1d9c6;--side-mark:#e9b949}
:root[data-skin="clinical"]{--side:#0d2b3e;--side2:#164159;--side-deep:#071a26;--side-fg:#c6dbe8;--side-mark:#ff6b81}
:root[data-skin="graphite"]{--side:#1e1f24;--side2:#2c2e35;--side-deep:#121317;--side-fg:#c9cbd2;--side-mark:#ff4d6a}
:root[data-skin="royal"] .nav .bdg{color:#2b0610}
.skins{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.skin{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;border:2px solid var(--line);border-radius:10px;background:var(--surface);padding:10px;cursor:pointer;font-weight:500;color:var(--fg)}
.skin span{display:block;width:100%;height:34px;border-radius:6px}
.skin small{color:var(--muted);font-weight:400}
.skin.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}