/* Nexia AI: the one stylesheet of the app (linked from layouts/app).

   BASE            colours (:root tokens), the frame and every shared component
   LIVE ALERTS     the bell and the pop-ups
   MODULE PICKER   the model cards on the company / quotation forms
   PAGE · <name>   one page's own pieces, inside :where(.page-<name>)   (the view sets @section('page', '<name>'))
   MODEL · <key>   one model's own pieces, inside :where(.m-<key>)      (the layout sets it from the model shown)

   :where() adds no weight, so a scoped rule wins over BASE exactly as when it sat in the page.
   Change a colour once in :root and the whole app follows. No <style> in the views. */

/* ============================================================================================
   UTILITIES
   One job each, named after it: mt-18 = margin-top 18px, c-danger = colour var(--danger), flex-1, items-center ...
   They stand in for style="" in the views, so they carry !important as an inline style did; first in the file,
   so a later !important rule (print) still wins as it did over an inline style.
   ============================================================================================ */
.items-center{align-items:center!important}
.items-start{align-items:flex-start!important}
.self-center{align-self:center!important}
.bg-3b82c4{background:#3b82c4!important}
.bg-d16ba5{background:#d16ba5!important}
.bg-e0a030{background:#e0a030!important}
.bg-faint{background:var(--faint)!important}
.bg-panel-2{background:var(--panel-2)!important}
.bg-primary-soft{background:var(--primary-soft)!important}
.bg-teal{background:var(--teal)!important}
.border-1-dashed-var-n-line-strong{border:1px dashed var(--line-strong)!important}
.border-b-1-solid-var-n-line{border-bottom:1px solid var(--line)!important}
.bc-danger-line{border-color:var(--danger-line)!important}
.bc-primary-line{border-color:var(--primary-line)!important}
.r-10{border-radius:10px!important}
.shadow-none{box-shadow:none!important}
.c-danger{color:var(--danger)!important}
.c-danger-ink{color:var(--danger-ink)!important}
.c-warn{color:var(--warn-ink)!important}
.c-inherit{color:inherit!important}
.c-muted{color:var(--muted)!important}
.c-primary-hover{color:var(--primary-hover)!important}
.c-teal{color:var(--teal)!important}
.pointer{cursor:pointer!important}
.dir-ltr{direction:ltr!important}
.flex{display:flex!important}
.grid{display:grid!important}
.fill-8fa4a6{fill:#8fa4a6!important}
.flex-1{flex:1!important}
.flex-col{flex-direction:column!important}
.flex-nowrap{flex-wrap:nowrap!important}
.flex-wrap{flex-wrap:wrap!important}
.font-body{font-family:var(--font)!important}
.fs-12-5{font-size:12.5px!important}
.fs-13{font-size:13px!important}
.fs-14{font-size:14px!important}
.fs-15{font-size:15px!important}
.fs-16{font-size:16px!important}
.fs-8{font-size:8px!important}
.fw-400{font-weight:400!important}
.gap-10{gap:10px!important}
.gap-16{gap:16px!important}
.gap-18{gap:18px!important}
.gap-4{gap:4px!important}
.gap-4-14{gap:4px 14px!important}
.gap-8{gap:8px!important}
.gap-8-12{gap:8px 12px!important}
.gap-8-14{gap:8px 14px!important}
.col-all{grid-column:1/-1!important}
.cols-fit-150{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
.cols-minmax-280-5fr-minmax-320-7fr{grid-template-columns:minmax(280px,5fr) minmax(320px,7fr)!important}
.cols-minmax-300-3fr-minmax-280-2fr{grid-template-columns:minmax(300px,3fr) minmax(280px,2fr)!important}
.h-150{height:150px!important}
.h-16{height:16px!important}
.h-18{height:18px!important}
.h-20{height:20px!important}
.h-34{height:34px!important}
.h-40{height:40px!important}
.justify-between{justify-content:space-between!important}
.lh-1-9{line-height:1.9!important}
.list-none{list-style:none!important}
.m-0{margin:0!important}
.mx-auto{margin:0 auto!important}
.mb-0{margin-bottom:0!important}
.mb-10{margin-bottom:10px!important}
.mb-12{margin-bottom:12px!important}
.mb-14{margin-bottom:14px!important}
.mb-16{margin-bottom:16px!important}
.mb-18{margin-bottom:18px!important}
.mb-2{margin-bottom:2px!important}
.mb-6{margin-bottom:6px!important}
.mb-8{margin-bottom:8px!important}
.ms-auto{margin-inline-start:auto!important}
.mx-0{margin-left:0!important;margin-right:0!important}
.mx-2{margin-left:2px!important;margin-right:2px!important}
.mt-0{margin-top:0!important}
.mt-10{margin-top:10px!important}
.mt-12{margin-top:12px!important}
.mt-14{margin-top:14px!important}
.mt-16{margin-top:16px!important}
.mt-18{margin-top:18px!important}
.mt-22{margin-top:22px!important}
.mt-24{margin-top:24px!important}
.mt-4{margin-top:4px!important}
.mt-6{margin-top:6px!important}
.mt-8{margin-top:8px!important}
.mt-n4{margin-top:-4px!important}
.mt-n6{margin-top:-6px!important}
.maxh-420{max-height:420px!important}
.maxw-80{max-width:80px!important}
.maxw-120{max-width:120px!important}
.maxw-180{max-width:180px!important}
.maxw-220{max-width:220px!important}
.maxw-320{max-width:320px!important}
.maxw-360{max-width:360px!important}
.maxw-520{max-width:520px!important}
.maxw-620{max-width:620px!important}
.maxw-640{max-width:640px!important}
.maxw-680{max-width:680px!important}
.minh-2-6em{min-height:2.6em!important}
.minw-110{min-width:110px!important}
.minw-120{min-width:120px!important}
.minw-140{min-width:140px!important}
.minw-150{min-width:150px!important}
.minw-170{min-width:170px!important}
.minw-180{min-width:180px!important}
.minw-190{min-width:190px!important}
.minw-22{min-width:22px!important}
.minw-220{min-width:220px!important}
.minw-240{min-width:240px!important}
.minw-60{min-width:60px!important}
.o-045{opacity:.45!important}
.o-06{opacity:.6!important}
.overflow-auto{overflow:auto!important}
.overflow-hidden{overflow:hidden!important}
.p-10{padding:10px!important}
.p-8{padding:8px!important}
.pb-0{padding-bottom:0!important}
.pb-10{padding-bottom:10px!important}
.ps-20{padding-inline-start:20px!important}
.px-0{padding-left:0!important;padding-right:0!important}
.px-12{padding-left:12px!important;padding-right:12px!important}
.px-14{padding-left:14px!important;padding-right:14px!important}
.px-20{padding-left:20px!important;padding-right:20px!important}
.px-22{padding-left:22px!important;padding-right:22px!important}
.pt-16{padding-top:16px!important}
.py-14{padding-top:14px!important;padding-bottom:14px!important}
.py-30{padding-top:30px!important;padding-bottom:30px!important}
.py-36{padding-top:36px!important;padding-bottom:36px!important}
.py-4{padding-top:4px!important;padding-bottom:4px!important}
.py-8{padding-top:8px!important;padding-bottom:8px!important}
.py-9{padding-top:9px!important;padding-bottom:9px!important}
.place-center{place-items:center!important}
.text-center{text-align:center!important}
.text-end{text-align:end!important}
.text-start{text-align:start!important}
.no-underline{text-decoration:none!important}
.ellipsis{text-overflow:ellipsis!important}
.va-middle{vertical-align:middle!important}
.va-n3{vertical-align:-3px!important}
.va-n4{vertical-align:-4px!important}
.nowrap{white-space:nowrap!important}
.invisible{visibility:hidden!important}
.w-110{width:110px!important}
.w-150{width:150px!important}
.w-16{width:16px!important}
.w-18{width:18px!important}
.w-20{width:20px!important}
.w-34{width:34px!important}
.w-40{width:40px!important}

/* ============================================================================================
   BASE
   Colours, fonts, the sidebar and top bar, cards, tables, forms, buttons: every page.
   ============================================================================================ */
/* ---------------------------------------------------------------- theme tokens (Nexia palette) */
:root{
  --bg:#f4f8f7;--panel:#ffffff;--panel-2:#f4f8f7;--line:#dfe8e7;--line-strong:#c9d8d6;
  --text:#12292b;--heading:#0f2a2c;--muted:#5b7477;--faint:#8fa4a6;
  --brand-dark:#0a3235;--brand-dark-2:#0d3f42;--teal:#14b8a6;--teal-bright:#2dd4bf;
  --primary:#0d8b7d;--primary-hover:#0a6f64;--primary-soft:#e2f4f1;--primary-line:#bfe4de;--primary-ink:#ffffff;--ring:rgba(20,184,166,.22);
  --ok:#0d8b7d;--ok-soft:#e2f4f1;--ok-ink:#0a6f64;--ok-line:#bfe4de;
  --warn:#c98a2b;--warn-soft:#f8eddb;--warn-ink:#9a6a1c;
  --danger:#c4574a;--danger-soft:#f8e8e5;--danger-ink:#9c3d32;--danger-line:#ecc9c3;
  --neutral:#6f8688;--neutral-soft:#eaf0ef;
  --rc:12px;--rt:8px;--shadow:0 1px 2px rgba(10,50,53,.04),0 4px 14px rgba(10,50,53,.04);
  --font:"Inter","IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --disp:"Poppins","IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;--sidebar:248px
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--text);font:14.5px/1.7 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--disp);color:var(--heading)}
h1{font-size:22px;margin:0;font-weight:700;letter-spacing:-.01em}h2{font-size:16px;margin:0 0 12px;font-weight:600}
h1 b{color:var(--teal)}
.eyebrow{font-family:var(--disp);font-weight:700;font-size:12.5px;color:var(--teal);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
h2 .count{color:var(--muted);font-weight:500;font-size:13px;margin-inline-start:6px}
p{margin:0 0 10px}

/* ---------------------------------------------------------------- shell: sidebar + content */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);background:var(--panel);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;min-height:100vh}
.brand{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;border-bottom:1px solid var(--line)}.brand:hover{text-decoration:none}
.brand .mark{width:40px;height:38px;flex:none}
.brand b{display:block;font-family:var(--disp);color:var(--heading);font-size:16px;font-weight:700;line-height:1.3}.brand small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4}
.to-home{display:flex;align-items:center;gap:10px;margin:12px 12px 0;padding:8px 12px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:13.5px;font-weight:500;transition:background .15s,color .15s,border-color .15s}
.to-home svg{width:18px;height:18px;flex:0 0 18px}
.to-home:hover{background:var(--panel-2);color:var(--text);border-color:var(--line-strong);text-decoration:none}
nav.menu{display:flex;flex-direction:column;gap:2px;padding:12px}
nav.menu a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--muted);font-weight:500;transition:background .15s,color .15s}
nav.menu a svg{width:19px;height:19px;flex:0 0 19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav.menu a:hover{background:var(--panel-2);color:var(--text);text-decoration:none}
nav.menu a.active{background:var(--primary-soft);color:var(--brand-dark-2);font-weight:600;box-shadow:inset 3px 0 0 var(--teal)}
[dir=rtl] nav.menu a.active{box-shadow:inset -3px 0 0 var(--teal)}
nav.menu a.active svg{stroke:var(--teal)}
nav.menu summary{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--muted);font-weight:500;cursor:pointer;list-style:none;transition:background .15s,color .15s}
nav.menu summary::-webkit-details-marker{display:none}
nav.menu summary svg{width:19px;height:19px;flex:0 0 19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav.menu summary:hover{background:var(--panel-2);color:var(--text)}
nav.menu summary.active{color:var(--brand-dark-2);font-weight:600}nav.menu summary.active svg{stroke:var(--teal)}
nav.menu summary .chev{width:16px;height:16px;flex:0 0 16px;margin-inline-start:auto;transition:transform .15s}
nav.menu details[open]>summary .chev{transform:rotate(180deg)}
nav.menu .sub{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px;margin-inline-start:21px;padding-inline-start:12px;border-inline-start:1px solid var(--line)}
nav.menu .sub a{padding:6px 10px;font-size:13.5px;border-radius:8px}
nav.menu .sub a.on{background:var(--primary-soft);color:var(--brand-dark-2);font-weight:600}
nav.menu .menu-section{padding:14px 12px 4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}nav.menu .menu-part:first-child .menu-section{padding-top:2px}
nav.menu summary.menu-section{gap:6px;border-radius:8px}nav.menu .menu-section .chev{width:13px;height:13px;flex-basis:13px}
nav.menu .menu-part>.part{display:flex;flex-direction:column;gap:2px}
nav.menu .menu-sub{padding:8px 12px 2px;font-size:11px;font-weight:600;color:var(--muted);opacity:.8}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:12px 28px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .page-title{font-weight:600;font-size:15px}.topbar .spacer{flex:1}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto;white-space:nowrap}
.crumbs a{color:var(--muted);display:inline-flex;align-items:center}.crumbs a:hover{color:var(--primary);text-decoration:none}
.crumbs a svg{width:18px;height:18px}.crumbs .sep{color:var(--faint)}
.crumbs a,.crumbs .sep{flex:none}.crumbs .page-title{overflow:hidden;text-overflow:ellipsis;min-width:0}
.topbar .tz{color:var(--muted);font-size:13px}
.branch-pick{margin:0 0 16px}
.topbar .who{color:var(--muted);font-size:13.5px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;padding-inline-start:14px;border-inline-start:1px solid var(--line)}
a.who{display:inline-flex;align-items:center;gap:6px}a.who svg{flex:none}a.who:hover{color:var(--primary);text-decoration:none}
.lang-switch{display:inline-flex;align-items:center;padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12.5px;font-weight:500;white-space:nowrap}
.lang-switch:hover{color:var(--primary);border-color:var(--primary);text-decoration:none}
.guest-lang{display:flex;justify-content:flex-end;margin-bottom:12px}
.burger{display:none;border:1px solid var(--line);background:var(--panel);border-radius:var(--rt);width:38px;height:38px;place-items:center;cursor:pointer;color:var(--text)}
.burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.overlay{display:none;position:fixed;inset:0;background:rgba(6,33,35,.45);z-index:29}
main{padding:24px 28px 64px;max-width:1480px;width:100%;margin-inline:auto}
main.narrow{max-width:520px;padding-top:56px}
/* the main page (no module open): a top bar instead of the sidebar */
.portal-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:10px 28px;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line);box-shadow:0 8px 24px rgba(10,50,53,.05)}
.portal-top::after{content:"";position:absolute;inset:auto 0 -1px;height:1px;background:linear-gradient(90deg,transparent,var(--teal) 30%,var(--teal-bright) 70%,transparent);opacity:.55;pointer-events:none}
.portal-top .brand{padding:0;border:0;color:var(--text);flex:none}.portal-top .brand .mark{width:40px;height:38px;flex:none}.portal-top .brand:hover{text-decoration:none}
.portal-nav{display:flex;align-items:center;gap:2px;margin-inline:auto;padding:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:999px}
.nav-link{display:inline-flex;align-items:center;gap:7px;flex:none;padding:6px 13px;border-radius:999px;color:var(--muted);font-size:13.5px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.nav-link svg{flex:none}
.nav-link:hover{background:var(--panel);color:var(--brand-dark-2);text-decoration:none;box-shadow:0 1px 3px rgba(10,50,53,.08)}
.nav-link.on{background:var(--brand-dark-2);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(13,63,66,.25)}.nav-link.on svg{stroke:var(--teal-bright)}
.nav-group{position:relative}
.nav-group summary{list-style:none}.nav-group summary::-webkit-details-marker{display:none}
.nav-group .chev{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .2s}
.nav-group[open] summary{background:var(--panel);color:var(--brand-dark-2);box-shadow:0 1px 3px rgba(10,50,53,.08)}.nav-group[open] summary.on{background:var(--brand-dark-2);color:#fff}
.nav-group[open] .chev{transform:rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% + 10px);inset-inline-start:0;z-index:30;display:flex;flex-direction:column;gap:2px;min-width:210px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 8px rgba(10,50,53,.06),0 18px 40px rgba(10,50,53,.14);animation:nav-drop .15s ease-out}
.nav-menu .nav-link{border-radius:9px;padding:9px 12px;color:var(--text)}
.nav-menu .nav-link svg{color:var(--muted)}.nav-menu .nav-link:hover{background:var(--primary-soft);box-shadow:none}.nav-menu .nav-link:hover svg{color:var(--teal)}
.nav-menu .nav-link.on{background:var(--primary-soft);color:var(--brand-dark-2);box-shadow:none}.nav-menu .nav-link.on svg{stroke:var(--teal)}
@keyframes nav-drop{from{opacity:0;transform:translateY(-4px)}}
.portal-user{display:flex;align-items:center;gap:8px;flex:none}
.portal-user .live-bell{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%;border-color:var(--line)}
.portal-user .lang-switch{height:30px}
.portal-top a.who{gap:8px;max-width:190px;padding:3px;padding-inline-end:12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);font-size:13.5px;font-weight:500;white-space:nowrap}
.portal-top a.who span{overflow:hidden;text-overflow:ellipsis}
.portal-top a.who:hover{border-color:var(--primary-line);box-shadow:0 0 0 3px var(--ring)}
.who .avatar{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--brand-dark-2));color:#fff;font-size:12.5px;font-weight:700}
.portal-user .logout:hover{background:var(--danger-soft);color:var(--danger-ink)}
[dir=rtl] .portal-user .logout svg{transform:scaleX(-1)}
@media (max-width:760px){.portal-top{flex-wrap:wrap;row-gap:10px}.portal-user{margin-inline-start:auto}.portal-nav{order:3;width:100%;margin:0;justify-content:space-around}.nav-group:last-child .nav-menu{inset-inline-start:auto;inset-inline-end:0}}
main.portal-main{max-width:1180px;padding-top:30px}

/* ---------------------------------------------------------------- page header */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-head .sub{color:var(--muted);font-size:13.5px;margin-top:2px}
.page-head .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.action-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:14px 20px;margin-bottom:18px;box-shadow:var(--shadow)}
.action-group-label{color:var(--muted);font-size:12.5px;font-weight:700;margin-bottom:8px}
.action-group-buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.segmented{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.segmented a,.segmented button{padding:5px 12px;border-radius:7px;color:var(--muted);font:inherit;font-size:13.5px;border:0;background:transparent;cursor:pointer;white-space:nowrap}
.segmented a:hover{text-decoration:none;color:var(--text)}.segmented .on{background:var(--primary-soft);color:var(--brand-dark-2);font-weight:600}

/* ---------------------------------------------------------------- cards, grids */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow)}
.card.flush{padding:0;overflow:hidden}.card.flush h2{padding:16px 20px 0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.card-head h2{margin:0}
.grid{display:grid;gap:18px}.grid>*{min-width:0}.form-grid>*{min-width:0}.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.stat{display:flex;flex-direction:column;gap:2px;margin-bottom:0}.stat b{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--text)}.stat span{color:var(--muted);font-size:13.5px}
.stat.ok b{color:var(--ok)}.stat.warn b{color:var(--warn)}.stat.bad b{color:var(--danger)}.stat.primary b{color:var(--primary)}
.stat .sub2{display:block;margin-top:4px;font-size:12px}
/* the procedure picker (audit/procedures/picker): a criterion's box, its procedures under it */
.pick-group{padding:10px 0;border-top:1px solid var(--line)}.pick-group:first-child{border-top:0}.pick-head{font-weight:600}.pick-items{padding-inline-start:26px;display:flex;flex-direction:column;gap:2px}
/* the plan on a balance sheet's page: a criterion's heading with its bar */
.plan-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,220px);gap:12px;align-items:center;padding:12px 20px;background:var(--panel-2);font-weight:600}
/* a trial balance (audit/balance_sheets/trial_balance, compare): group headings, subtotals, the total, a changed amount */
thead .group-row th{border-bottom:0;padding-bottom:0;font-size:11.5px;letter-spacing:.04em;color:var(--faint)}
table.tb tr.tb-group td{background:var(--panel-2);font-weight:700;padding-top:12px}
table.tb tr.tb-subtotal td{font-weight:600;border-top:1px solid var(--line-strong);color:var(--muted)}
table.tb tr.tb-total td{font-weight:700;border-top:2px solid var(--line-strong);background:var(--panel-2)}
/* the mapping page: the statement lines beside the accounts, the lines a sticky panel the accounts are dragged onto */
.mapping{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:18px;align-items:start;margin-bottom:18px}.mapping>*{min-width:0}
.mapping-lines{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto}
.mapping-lines table{font-size:12.5px}.mapping-lines th,.mapping-lines td{padding:5px 8px}.mapping-lines a{color:inherit}
.mapping-lines tr.active td{background:var(--primary-soft);font-weight:700}
.mapping-lines .depth-1{padding-inline-start:22px}.mapping-lines .depth-2{padding-inline-start:36px}.mapping-lines .depth-3{padding-inline-start:50px}
.mapping-bar{padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel-2)}.mapping-bar select{width:auto;flex:1 1 220px}
.mapping-pick{min-width:170px;max-width:100%}.mapping-row-line{min-width:190px}.mapping-row-line .pill{margin-top:4px}
tr[draggable=true]{cursor:grab}
@media (max-width:1100px){.mapping{grid-template-columns:1fr}.mapping-lines{position:static;max-height:none}}
/* the change log (audit/balance_sheets/corrections): a field as it was, struck through, and as it is now */
.change-line{padding:3px 0;line-height:1.7}.change-line+.change-line{border-top:1px dashed var(--line)}
.was{color:var(--danger-ink);text-decoration:line-through}.now{color:var(--ok-ink);font-weight:600}
.btn .count{margin-inline-start:6px;font-weight:700;color:var(--primary)}
td.tb-diff{background:var(--warn-soft);color:var(--warn-ink);font-weight:600}
/* the figures of a card (an import's totals: imports/card): label over value, as many in a row as fit */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;margin:0 0 12px}.figures div{display:flex;flex-direction:column;gap:2px;min-width:0}.figures dt{color:var(--muted);font-size:12.5px}.figures dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
th{color:var(--muted);font-weight:600;font-size:12.5px;letter-spacing:.01em;background:var(--panel-2);white-space:nowrap}
thead th:first-child,tr:first-child th:first-child{border-start-end-radius:8px}thead th:last-child,tr:first-child th:last-child{border-start-start-radius:8px}
tbody tr:hover td{background:#f8fbfa}tr:last-child td{border-bottom:0}
/* a form on one line, its fields side by side and its button at their foot (add a box, give a shift) */
.add-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.add-form label{flex:1;min-width:220px;margin:0}
/* a row's buttons at its end; table.stacked: each cell a title and its details under it */
td.actions{white-space:nowrap;text-align:end}td.actions form{display:inline}
table.stacked td{vertical-align:top}table.stacked td .hint{margin-top:3px;line-height:1.45}table.stacked td.actions{vertical-align:middle}
table.kv th{background:transparent;width:32%;color:var(--muted);font-weight:500;font-size:13.5px}
.mono{direction:ltr;text-align:start;font-variant-numeric:tabular-nums;unicode-bidi:embed}
.muted{color:var(--muted)}.hint{color:var(--muted);font-size:13px}.faint{color:var(--faint)}
.nowrap{white-space:nowrap}.num{font-variant-numeric:tabular-nums}
.empty{color:var(--muted);text-align:center;padding:26px 10px;font-size:13.5px}

/* ---------------------------------------------------------------- buttons, forms */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);border-radius:var(--rt);padding:7px 14px;cursor:pointer;font:inherit;font-size:14px;font-weight:500;text-decoration:none;line-height:1.4;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--panel-2);border-color:var(--faint);text-decoration:none}
.btn.primary{background:var(--brand-dark-2);border-color:var(--brand-dark-2);color:var(--primary-ink);font-weight:600}.btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}.btn.primary svg{stroke:var(--teal-bright)}
.btn.danger{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger-ink)}.btn.danger:hover{background:#f3dcd8}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}.btn.ghost:hover{background:var(--panel-2);color:var(--text)}
.btn.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok-ink)}
.btn.small{padding:4px 10px;font-size:13px}.btn[disabled]{opacity:.6;cursor:default}
input:not([type=checkbox]):not([type=radio]),select,textarea{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--rt);padding:8px 11px;color:var(--text);font:inherit;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
input[type=checkbox],input[type=radio]{accent-color:var(--teal);width:16px;height:16px}
label{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:13.5px;color:var(--muted);font-weight:500}
label.check{flex-direction:row;align-items:center;gap:8px;color:var(--text);font-weight:400}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row .auto{width:auto}
/* a short form in a table cell (Counter products' alert: times, within, unit, save): one compact line, nothing squeezed */
.cell-form{display:grid;grid-template-columns:72px 64px 96px auto;gap:6px;align-items:center}.cell-form input,.cell-form select{width:100%;min-width:0;padding-inline:8px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:0 16px;align-items:end}
.form-actions{display:flex;gap:8px;margin-top:4px}
form.inline{display:inline}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.filters select,.filters input:not([type=checkbox]):not([type=radio]),.filters input[type=date]{width:auto;min-width:150px}

/* ---------------------------------------------------------------- flash, pills, badges */
.flash{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:12px;margin-bottom:16px;border:1px solid var(--ok-line);background:var(--ok-soft);color:var(--ok-ink);font-weight:500}
.flash.error{border-color:var(--danger-line);background:var(--danger-soft);color:var(--danger-ink)}
.flash-close{margin-inline-start:auto;background:none;border:0;padding:0 2px;color:inherit;opacity:.6;cursor:pointer;font-size:14px;line-height:1}.flash-close:hover{opacity:1}
.pill{display:inline-flex;align-items:center;gap:7px;padding:2px 11px;border-radius:999px;background:var(--neutral-soft);border:1px solid transparent;font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;line-height:1.6}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--neutral);flex:0 0 8px}
.pill.ok{background:var(--ok-soft);color:var(--ok-ink)}.pill.ok::before{background:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn-ink)}.pill.warn::before{background:var(--warn)}
.pill.bad{background:var(--danger-soft);color:var(--danger-ink)}.pill.bad::before{background:var(--danger)}
.pill.info{background:var(--primary-soft);color:var(--primary-hover)}.pill.info::before{background:var(--primary)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--neutral-soft);color:var(--neutral);line-height:1.6}
.badge.status-scheduled{background:var(--neutral-soft);color:var(--muted)}
.badge.status-in_progress{background:var(--warn-soft);color:var(--warn-ink)}
.badge.status-completed{background:var(--ok-soft);color:var(--ok-ink)}
.badge.status-incomplete,.badge.status-missed{background:var(--danger-soft);color:var(--danger-ink)}
.badge.late{background:var(--warn-soft);color:var(--warn-ink)}
/* the tones of <x-badge tone="..."> */
.badge.k-ok{background:var(--ok-soft);color:var(--ok-ink)}
.badge.k-warn{background:var(--warn-soft);color:var(--warn-ink)}
.badge.k-bad{background:var(--danger-soft);color:var(--danger-ink)}
.badge.k-info{background:var(--primary-soft);color:var(--primary-hover)}
.badge.type{background:var(--primary-soft);color:var(--primary);font-family:Consolas,Menlo,monospace;font-size:12px;font-weight:600;direction:ltr}
.status-scheduled{color:var(--muted)}.status-in_progress{color:var(--warn)}.status-completed{color:var(--ok)}.status-incomplete,.status-missed{color:var(--danger)}

/* ---------------------------------------------------------------- patrol widgets */
.progress{height:8px;background:var(--neutral-soft);border-radius:999px;overflow:hidden}.progress i{display:block;height:100%;background:var(--ok);border-radius:999px;transition:width .3s}
.progress.warn i{background:var(--warn)}.progress.bad i{background:var(--danger)}
/* the stages a piece of work goes through (<x-stages>): the ones passed filled, the one it stands at marked */
.stages{display:flex;flex-direction:column;gap:4px}.stages span{font-size:12.5px;color:var(--muted)}
.stages-bar{display:flex;gap:3px}.stages-bar i{flex:1;height:6px;border-radius:999px;background:var(--neutral-soft)}.stages-bar i.done{background:var(--ok)}.stages-bar i.now{background:var(--primary)}
/* a board of columns side by side (components/board): a CRM's stages, each with its cards, dragged from one to another */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:14px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:18px;align-items:start}
.board-col{--tone:var(--neutral);--tone-soft:var(--neutral-soft);position:relative;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-height:340px;overflow:hidden;transition:opacity .2s,box-shadow .2s,transform .2s}
.board-col::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--tone)}
.board-col.tone-info{--tone:var(--primary);--tone-soft:var(--primary-soft)}.board-col.tone-warn{--tone:var(--warn);--tone-soft:var(--warn-soft)}
.board-col.tone-ok{--tone:var(--ok);--tone-soft:var(--ok-soft)}.board-col.tone-bad{--tone:var(--danger);--tone-soft:var(--danger-soft)}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 12px;background:linear-gradient(180deg,var(--tone-soft),transparent)}
.board-head b{display:block;font-family:var(--disp);font-size:14.5px;color:var(--heading)}.board-head small{display:block;color:var(--muted);font-size:12px}
.board-count{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--tone);color:#fff;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.board-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:4px 12px 14px;border-radius:10px;transition:background .2s}
.board-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;border:1.5px dashed var(--line-strong);border-radius:10px;color:var(--faint);font-size:13px;text-align:center;padding:16px}
.board-col.can-drop{box-shadow:0 0 0 2px var(--tone),0 10px 30px rgba(10,50,53,.10);transform:translateY(-2px)}
.board-col.can-drop .board-empty{border-color:var(--tone);color:var(--tone)}
.board-col.no-drop{opacity:.45}
.board-col.drop-over .board-body{background:var(--tone-soft)}
.board-card{display:block;background:var(--panel);border:1px solid var(--line);border-inline-start:3px solid var(--line-strong);border-radius:10px;padding:12px 14px;color:var(--text);text-decoration:none;box-shadow:0 1px 2px rgba(10,50,53,.05);transition:transform .15s,box-shadow .15s,border-color .15s}
.board-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 22px rgba(10,50,53,.10);border-color:var(--primary-line)}
.board-card[draggable=true]{cursor:grab}.board-card.dragging{opacity:.4;transform:rotate(-2deg) scale(.98)}
.board-card.is-info{border-inline-start-color:var(--primary)}.board-card.is-warn{border-inline-start-color:var(--warn)}.board-card.is-bad{border-inline-start-color:var(--danger);background:linear-gradient(90deg,var(--danger-soft),var(--panel) 40%)}
[dir=rtl] .board-card.is-bad{background:linear-gradient(-90deg,var(--danger-soft),var(--panel) 40%)}
.board-card-top b{display:block;font-weight:600;color:var(--heading);line-height:1.4}.board-card-top small{display:block;color:var(--muted);font-size:12.5px}
.board-people{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px dashed var(--line);display:grid;gap:6px}
.board-people li{display:grid;grid-template-columns:24px auto 1fr;align-items:center;gap:8px;font-size:12.5px;line-height:1.3}
.board-people small{color:var(--muted);white-space:nowrap}.board-people b{font-weight:600;color:var(--text);text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-avatar{position:relative;display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--faint),var(--neutral));color:#fff;font-size:10.5px;font-weight:700;letter-spacing:-.02em}
.board-avatar.is-started,.board-avatar.is-owner{background:linear-gradient(135deg,var(--teal),var(--brand-dark-2))}
.board-avatar.is-pending{background:linear-gradient(135deg,#e0b066,var(--warn))}
.board-avatar.is-started::after{content:"";position:absolute;inset-block-end:-1px;inset-inline-end:-1px;width:8px;height:8px;border-radius:50%;background:var(--ok);border:2px solid var(--panel);animation:board-live 1.6s ease-out infinite}
@keyframes board-live{0%{box-shadow:0 0 0 0 rgba(13,139,125,.55)}100%{box-shadow:0 0 0 7px rgba(13,139,125,0)}}
@media (prefers-reduced-motion:reduce){.board-avatar.is-started::after{animation:none}}
.board-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.board-chips .chip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--muted);font-size:11.5px;font-weight:500;cursor:inherit}
.board-chips .chip::before{content:"○"}.board-chips .chip:has(svg)::before{content:none}
.board-chips .chip.done{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok-ink)}.board-chips .chip.done::before{content:"✓"}
.board-chips .chip.asked{background:var(--warn-soft);border-color:transparent;color:var(--warn-ink)}.board-chips .chip.asked::before{content:"⏳"}
.board-chips .chip.late{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger-ink)}.board-chips .chip.late::before{content:"!"}
.board-chips .chip.chip:has(svg)::before{content:none}
.board-last{flex-basis:100%;font-size:11.5px;color:var(--faint)}
.board-flag{display:inline-flex;align-items:center;gap:5px;margin-bottom:8px;padding:2px 8px;border-radius:6px;background:var(--primary-soft);color:var(--primary-hover);font-size:11.5px;font-weight:600}
.board-time{height:4px;margin:10px 0 2px;border-radius:999px;background:var(--neutral-soft);overflow:hidden}.board-time i{display:block;height:100%;border-radius:999px;background:var(--ok)}
.board-time.warn i{background:var(--warn)}.board-time.bad i{background:var(--danger)}
.board-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px;color:var(--muted);font-size:12.5px}
.board-foot span{display:inline-flex;align-items:center;gap:4px}.board-foot svg{flex:none;color:var(--faint)}
.board-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.board-bar label{margin:0}.board-bar input.board-search{width:260px;max-width:100%}.board-bar select{width:auto;min-width:170px}
.board-tip{flex:1;min-width:180px;margin:0;font-size:12.5px}
.board-send{position:relative}.board-send summary{list-style:none}.board-send summary::-webkit-details-marker{display:none}
.board-send-panel{position:absolute;z-index:30;inset-inline-end:0;top:calc(100% + 8px);width:min(420px,calc(100vw - 32px));display:grid;gap:12px;margin:0;box-shadow:0 18px 40px rgba(10,50,53,.18)}
.board-ask{border:0;border-radius:14px;padding:22px;width:min(460px,calc(100vw - 32px));box-shadow:0 24px 60px rgba(10,50,53,.25);color:var(--text);background:var(--panel)}
.ready-text{display:grid;gap:10px}
.board-ask::backdrop{background:rgba(10,50,53,.35);backdrop-filter:blur(2px)}
@media (max-width:700px){.board-bar input.board-search,.board-bar form,.board-bar select{width:100%}.board-tip{display:none}}
/* a file's review notes (review/files/rounds) and the form under a flush card's table */
.note-row{padding:10px 0;border-bottom:1px solid var(--line)}.note-row p{margin:0 0 6px;white-space:pre-line}
.round-line{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:8px}
.card-foot{padding:14px 20px;border-top:1px solid var(--line)}
/* the permissions grid (components/permission): per model the pages only seen, then the pages where things are done */
.perm-card .card-head .check{margin:0;font-weight:600}
.perm-head{font-size:14px;margin:14px 0 8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.perm-head .hint{font-weight:400}
.perm-views{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 16px}
.perm-table td:not(:first-child),.perm-table th:not(:first-child){text-align:center;width:96px}.perm-table .check{justify-content:center;margin:0}
select.perm-own{min-width:110px}select.perm-own.is-yes{border-color:var(--ok-line);background:var(--ok-soft)}select.perm-own.is-no{border-color:var(--danger-line);background:var(--danger-soft)}
.checklist{list-style:none;margin:8px 0 0;padding:0}.checklist li{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}.checklist li:last-child{border-bottom:0}
.checklist .tick{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 22px;background:var(--neutral-soft);color:var(--neutral)}
.tick.visited{background:var(--ok-soft);color:var(--ok)}.tick.missed{background:var(--danger-soft);color:var(--danger)}.tick.pending{background:var(--neutral-soft);color:var(--faint)}
.checklist .meta{margin-inline-start:auto;color:var(--muted);font-size:12.5px;white-space:nowrap}
.patrol-item{padding:12px 0;border-bottom:1px solid var(--line)}.patrol-item:last-child{border-bottom:0}
.timeline{list-style:none;margin:0;padding:0;max-height:560px;overflow:auto}
.timeline li{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);align-items:start}.timeline li:last-child{border-bottom:0}.timeline li.empty{display:block}
.timeline .t{color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr;text-align:end;font-size:13px;padding-top:2px}
.alert-item{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.alert-item:last-child{border-bottom:0}.alert-item .when{margin-inline-start:auto;color:var(--muted);font-size:12.5px}
/* a draft whose figures do not hold (audit/balance_sheets/blocked): its card in red */
.card.blocked{border-color:var(--danger);box-shadow:inset 4px 0 0 var(--danger)}.card.blocked p{margin-top:0}
/* evidence images sent by the edge (served to logged-in users only) */
.thumb{height:44px;width:auto;max-width:80px;border-radius:6px;border:1px solid var(--line);object-fit:cover;vertical-align:middle;background:var(--neutral-soft)}
.thumb.lg{height:150px;max-width:220px;border-radius:10px}.thumb.avatar{height:40px;width:32px;border-radius:8px}
.thumb-link{display:inline-block;line-height:0;margin-inline-start:6px}.thumb-link:hover .thumb{border-color:var(--primary)}
/* a car's picture zoomed on its plate (x-snapshot :zoom), under the plate's number to match them */
.plate-zoom-row{margin-top:6px;line-height:0}.plate-zoom-row .thumb-link{margin-inline-start:0}
.thumb.plate-zoom{height:72px;width:220px;max-width:none;object-fit:contain;background:#111}
.plate-cell.busy{opacity:.45;pointer-events:none}
tr.busy{opacity:.45;pointer-events:none}

/* ---------------------------------------------------------------- vehicles */
.plate{display:inline-flex;align-items:center;gap:6px;direction:ltr;border:2px solid var(--heading);border-radius:6px;padding:0 9px;background:#fff;color:var(--heading);font:700 14px/1.7 Consolas,Menlo,monospace;letter-spacing:.05em;white-space:nowrap}
.plate.none{border-style:dashed;border-color:var(--line-strong);color:var(--faint);font-weight:500;letter-spacing:0;font-family:var(--font)}
a:hover .plate{border-color:var(--primary);color:var(--primary)}
/* a stay's plate checked by a person on the parking lists: ✓ right, ✏️ the right one typed (a small form that opens) */
.plate-check{display:inline-flex;align-items:center;gap:4px;margin-inline-start:6px;vertical-align:middle}.plate-check form.inline{display:inline}
.plate-edit{display:inline-block;position:relative}.plate-edit>summary{list-style:none;cursor:pointer}.plate-edit>summary::-webkit-details-marker{display:none}
.plate-edit[open]>.plate-fix{display:flex;gap:6px;margin-top:6px;min-width:220px}
.plate-edit .plate-fix input{padding:4px 8px;font-size:13px}
.badge.known{background:var(--ok-soft);color:var(--ok-ink)}.badge.blocked{background:var(--danger-soft);color:var(--danger-ink)}.badge.unknown{background:var(--warn-soft);color:var(--warn-ink)}
.dir{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:13px;white-space:nowrap}.dir.in{color:var(--ok)}.dir.out{color:var(--primary)}

/* ---------------------------------------------------------------- pagination */
.pagination{display:flex;gap:6px;list-style:none;padding:0;margin:16px 0 0;flex-wrap:wrap;align-items:center}
.pagination a,.pagination span{display:block;padding:5px 12px;border:1px solid var(--line);border-radius:var(--rt);background:var(--panel);color:var(--text);font-size:13.5px}
.pagination a:hover{text-decoration:none;border-color:var(--faint)}.pagination .active span{background:var(--brand-dark-2);border-color:var(--brand-dark-2);color:#fff}.pagination .disabled span{color:var(--faint)}
.pagination .summary{margin-inline-start:auto;color:var(--muted);font-size:13px;border:0;background:transparent;padding:0}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){.grid-2{grid-template-columns:1fr}}
@media (max-width:900px){
  .shell{display:block}
  .sidebar{position:fixed;right:0;top:0;height:100vh;width:min(var(--sidebar),85vw);min-height:0;overflow-y:auto;z-index:30;transform:translateX(100%);visibility:hidden;transition:transform .2s,visibility .2s;box-shadow:none}
  [dir=ltr] .sidebar{right:auto;left:0;transform:translateX(-100%)}
  .shell.nav-open .sidebar{transform:none;visibility:visible;box-shadow:-8px 0 30px rgba(6,33,35,.22)}.shell.nav-open .overlay{display:block}
  [dir=ltr] .shell.nav-open .sidebar{box-shadow:8px 0 30px rgba(6,33,35,.22)}
  .content{width:100%}
  .burger{display:grid}.topbar{padding:10px 16px}main{padding:16px 16px 48px}
  .page-head{margin-bottom:14px}h1{font-size:20px}.card{padding:16px}
  .stat b{font-size:26px}
}
@media (max-width:900px){.portal-top{padding:10px 16px}main.portal-main{padding-top:20px}}
@media (max-width:560px){.crumbs .crumb-module{display:none}.live-bell{flex:none}.grid-4{grid-template-columns:1fr 1fr}.topbar .tz,.topbar .who{display:none}main.narrow{padding-top:24px}.crumbs{gap:6px}
  .topbar a.who{display:inline-flex;padding-inline-start:0;border:0}.portal-top a.who{padding-inline-end:3px}a.who span,.icon-sm span{display:none}}
@media print{.sidebar,.topbar,.portal-top,.burger,.btn,form{display:none!important}main{padding:0}.card{box-shadow:none;break-inside:avoid}}
/* the page is on its way: covers the screen so nothing is clicked twice (show_loading / hide_loading) */
.loading{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(10,50,53,.28);cursor:wait}
.loading[hidden]{display:none}
.loading::after{content:"";width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.35);border-top-color:var(--teal-bright);animation:loading-spin .8s linear infinite}
@keyframes loading-spin{to{transform:rotate(360deg)}}

/* scorecards (<x-scorecard>): a till, a guard, a zone, an employee; their grade's colour */
.guard-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:12px}
.guard-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none;--h:var(--faint)}
.guard-card:hover{text-decoration:none;border-color:var(--h)}
.gc-head{display:flex;gap:10px;align-items:center}
.gc-head > div{flex:1;min-width:0}.gc-head b{display:block}
.gc-avatar{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;background:var(--h);color:#fff}
.gc-score{font-size:24px;font-weight:800;color:var(--h)}
.guard-card .hb{height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden}.guard-card .hb i{display:block;height:100%;background:var(--h)}
.gc-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.gc-figs div{background:var(--panel-2);border-radius:8px;padding:6px;text-align:center}
.gc-figs b{display:block;font-size:15px}.gc-figs span{font-size:10.5px;color:var(--muted)}
.gc-figs .warn b{color:var(--warn-ink)}
.g-excellent{--h:var(--ok)}.g-good{--h:var(--teal)}.g-fair{--h:var(--warn)}.g-poor{--h:var(--danger)}
/* a bar split in parts, and the legend under a chart */
.split-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--panel-2)}
.split-bar i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}
/* <x-chart.bars>: a thing counted a row, its name, its bar (the red part at its end), the figure */
.hbars{display:grid;gap:9px}.hbar{display:grid;grid-template-columns:minmax(84px,34%) 1fr 30px;gap:10px;align-items:center;color:inherit;text-decoration:none;font-size:13.5px}
.hbar-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}a.hbar:hover .hbar-label{color:var(--primary)}.hbar .split-bar i{background:var(--c)}.hbar b{text-align:end}
/* the Auditing desk: the files wide, what waits beside them; a card folded until opened */
.desk-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}@media (max-width:1100px){.desk-grid{grid-template-columns:1fr}}
.fold summary{cursor:pointer}.fold summary h2{display:inline;margin:0}

/* charts of the day and the month: <x-chart.timeline>, <x-chart.days>; their tones: ok / in (on time),
   late, early, over (overtime), missing (should be there), absent, off */
.tl,.dg{display:flex;flex-direction:column;gap:6px}
.tl-row{display:grid;grid-template-columns:minmax(150px,210px) 1fr 104px;gap:14px;align-items:center;color:var(--text);padding:6px 8px;border-radius:10px}
a.tl-row:hover{background:var(--panel-2);text-decoration:none}
.tl-who{display:flex;gap:10px;align-items:center;min-width:0}.tl-who b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-who em{display:block;font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap}
.tl-avatar{width:34px;height:34px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--primary-soft);color:var(--primary-hover)}
.tl-track{position:relative;height:26px;direction:ltr;background:var(--panel-2);border-radius:7px}
.tl-hours .tl-track{background:none;height:16px}
.tl-hours i{position:absolute;left:var(--x);transform:translateX(-50%);font-style:normal;font-size:11px;color:var(--faint)}
.tl-plan{position:absolute;left:var(--x);width:var(--w);top:0;bottom:0;border-radius:7px;background:var(--line);border:1px dashed var(--line-strong)}
.tl-bar{position:absolute;left:var(--x);width:var(--w);top:6px;bottom:6px;border-radius:4px;background:var(--ok)}
.tl-now{position:absolute;left:var(--x);top:-4px;bottom:-4px;width:2px;border-radius:1px;background:var(--danger)}
.tl-bar.in,.dg-cell.ok{background:var(--ok)}.tl-bar.over,.dg-cell.over{background:#3b82c4}
.tl-bar.late,.tl-bar.early{background:repeating-linear-gradient(135deg,var(--warn) 0 4px,var(--warn-soft) 4px 7px)}.dg-cell.late{background:var(--warn)}.dg-cell.early{background:#e7b768}
.tl-bar.missing{background:repeating-linear-gradient(135deg,var(--danger) 0 4px,var(--danger-soft) 4px 7px)}.dg-cell.absent{background:var(--danger)}
.dg-cell.off{background:var(--line)}.dg-cell.none{background:var(--panel-2)}.dg-cell.holiday{background:#9b7fd1}
/* <x-chart.calendar>: a month, Saturday first; each day tinted by its tone, the time and the badges in it */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-head{font-size:12px;font-weight:600;color:var(--muted);text-align:center;padding:2px 0}
.cal-day{display:flex;flex-direction:column;gap:3px;min-height:104px;padding:8px;border-radius:10px;border:1px solid var(--line);border-top:4px solid var(--c, var(--line));background:var(--panel);color:var(--text);min-width:0}
a.cal-day[href]:hover{text-decoration:none;border-color:var(--c, var(--line-strong));box-shadow:var(--shadow)}
.cal-day.ok{--c:var(--ok)}.cal-day.late{--c:var(--warn)}.cal-day.early{--c:#e7b768}.cal-day.over{--c:#3b82c4}.cal-day.absent{--c:var(--danger);background:var(--danger-soft)}
.cal-day.holiday{--c:#9b7fd1;background:#f3effb}.cal-day.off{background:var(--panel-2)}.cal-day.soon{opacity:.75}
.cal-day.now{box-shadow:0 0 0 2px var(--primary)}
.cal-top{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.cal-top b{font-size:15px}
.cal-top em{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-line{font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-badges{display:flex;flex-wrap:wrap;gap:3px}.cal-badges .badge{font-size:10.5px;padding:1px 6px}
.cal-blank{min-height:104px}
.cal-month{font-family:var(--disp);min-width:120px;text-align:center}
@media (max-width:760px){.cal{gap:3px}.cal-day,.cal-blank{min-height:64px;padding:4px}.cal-line,.cal-badges,.cal-top em{display:none}}
.legend .tl-bar{position:static;display:inline-block;width:18px;height:10px}
.dg{overflow-x:auto}
.dg-row{display:grid;grid-template-columns:minmax(110px,170px) repeat(var(--n),minmax(14px,1fr)) 40px;gap:3px;align-items:center;min-width:calc(var(--n) * 17px + 160px)}
.dg-row > a{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-end:8px}
.dg-head i{font-style:normal;font-size:10.5px;color:var(--faint);text-align:center}
.dg-cell{display:block;height:20px;border-radius:4px}
.dg-note{text-align:end;font-weight:700;font-variant-numeric:tabular-nums}
.legend .dg-cell{display:inline-block;height:10px}
@media (max-width:760px){.tl-row{grid-template-columns:1fr;gap:6px}}

/* ============================================================================================
   LIVE ALERTS
   The bell and the pop-up alerts, on every page once signed in (partials/live-alerts).
   ============================================================================================ */
.live-bell{position:relative}
.live-bell .dot{position:absolute;top:3px;inset-inline-end:3px;width:8px;height:8px;border-radius:50%;background:var(--danger);display:none}
.live-bell.has .dot{display:block}
.live-bell.off svg{opacity:.45}
.live-menu{position:fixed;z-index:80;top:56px;inset-inline-end:16px;width:min(300px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(10,50,53,.18);padding:12px 14px;display:none}
.live-menu.open{display:block}
.live-menu label{margin-bottom:8px}
.live-menu .row{justify-content:space-between}
.live-menu a{display:block;margin-top:6px;font-size:13.5px}
.live-stack{position:fixed;z-index:70;top:64px;inset-inline-end:16px;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.live-toast{pointer-events:auto;display:grid;grid-template-columns:1fr auto;gap:6px 10px;background:var(--panel);border:1px solid var(--line);border-inline-start:5px solid var(--warn);border-radius:12px;box-shadow:0 14px 34px rgba(10,50,53,.2);padding:11px 12px;animation:live-in .25s ease-out}
.live-toast.critical{border-inline-start-color:var(--danger)}
.live-toast .lt-title{font-weight:700;color:var(--heading);font-size:14px}
.live-toast .lt-mod{color:var(--muted);font-size:11.5px}
.live-toast .lt-msg{grid-column:1/-1;font-size:13px;line-height:1.5}
.live-toast .lt-meta{grid-column:1/-1;display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px}
.live-toast .lt-meta a{margin-inline-start:auto;font-weight:600}
.live-toast img{grid-column:1/-1;width:100%;max-height:160px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.live-toast .lt-x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px}
@keyframes live-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media print{.live-stack,.live-menu{display:none!important}}

/* ============================================================================================
   MODULE PICKER
   The model cards to tick, on the company and the quotation forms.
   ============================================================================================ */
.module-picks{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.module-pick{flex-direction:row;align-items:center;gap:12px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;color:var(--text);transition:border-color .15s,background .15s}
.module-pick:hover{border-color:var(--line-strong)}
.module-pick:has(input:checked){border-color:var(--primary-line);background:var(--primary-soft)}
.module-pick .mp-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--neutral-soft);color:var(--neutral);flex:none}
.module-pick:has(input:checked) .mp-icon{background:var(--brand-dark-2);color:var(--teal-bright)}
.module-pick .mp-icon svg{width:20px;height:20px}
.module-pick .mp-text{display:flex;flex-direction:column;line-height:1.4}.module-pick .mp-text b{font-weight:600}.module-pick .mp-text small{color:var(--muted);font-weight:400}

/* ============================================================================================
   PAGE · login
   The sign-in page. Scoped to <body class="page-login">.
   ============================================================================================ */
:where(.page-login) {
  .auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}
  /* brand side */
  .auth-brand{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding:40px 48px;color:#d7ecea;
    background:radial-gradient(ellipse 70% 60% at 100% 0%,rgba(45,212,191,.24),transparent 60%),radial-gradient(ellipse 60% 55% at 0% 100%,rgba(20,184,166,.16),transparent 65%),linear-gradient(150deg,var(--brand-dark-2),var(--brand-dark))}
  .auth-brand::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000,transparent);mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000,transparent)}
  .auth-brand::after{content:"";position:absolute;z-index:-1;width:420px;height:420px;border-radius:50%;inset-inline-end:-140px;bottom:-160px;border:1px solid rgba(45,212,191,.18);box-shadow:0 0 0 60px rgba(45,212,191,.035),0 0 0 120px rgba(45,212,191,.025)}
  .auth-logo{display:flex;align-items:center;gap:12px;color:#fff}
  .auth-logo span{font-family:var(--disp);font-size:37px;font-weight:600;line-height:1;letter-spacing:-.01em;color:#fff}
  .auth-logo svg{height:42px;width:auto}
  .auth-pitch{margin:auto 0;padding:48px 0;max-width:460px}
  .auth-pitch h2{font-size:34px;line-height:1.2;color:#fff;margin:0 0 14px;font-weight:700;letter-spacing:-.01em}
  .auth-pitch h2 em{font-style:normal;color:var(--teal-bright)}
  .auth-pitch p{color:rgba(215,236,234,.78);font-size:15.5px;margin:0 0 30px}
  .auth-mods{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
  .auth-mods li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(4px)}
  .auth-mods .ic{width:40px;height:40px;border-radius:11px;background:rgba(45,212,191,.14);color:var(--teal-bright);display:grid;place-items:center;flex:none}
  .auth-mods .ic svg{width:21px;height:21px;stroke-width:2}
  .auth-mods b{display:block;color:#fff;font-weight:600;line-height:1.35}.auth-mods span{font-size:13px;color:rgba(215,236,234,.7)}
  .auth-mods .soon{margin-inline-start:auto;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(215,236,234,.8)}
  .auth-foot{font-size:12.5px;color:rgba(215,236,234,.5)}
  /* form side */
  .auth-form{display:flex;flex-direction:column;padding:28px 40px;background:var(--panel);position:sticky;top:0;height:100vh;box-sizing:border-box}
  .auth-form .guest-lang{margin:0}
  .auth-box{width:100%;max-width:380px;margin:auto}
  .auth-box h1{font-size:28px;margin-bottom:6px}
  .auth-box .lead{color:var(--muted);margin:0 0 28px}
  .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
  .field > span{font-size:13.5px;font-weight:600;color:var(--heading)}
  .field .control{position:relative;display:flex;align-items:center}
  .field .control > svg{position:absolute;inset-inline-start:14px;width:18px;height:18px;color:var(--faint);pointer-events:none;transition:color .15s}
  .auth-box input:not([type=checkbox]){height:48px;padding-inline:44px 14px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);font-size:15px}
  .auth-box input:not([type=checkbox]):hover{border-color:var(--line-strong)}
  .auth-box input:not([type=checkbox]):focus{background:var(--panel);border-color:var(--teal)}
  .auth-box input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--panel-2) inset;-webkit-text-fill-color:var(--text)}
  .field .control:focus-within > svg{color:var(--teal)}
  .field .control.has-toggle input{padding-inline-end:46px}
  .peek{position:absolute;inset-inline-end:6px;width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:var(--faint);display:grid;place-items:center;cursor:pointer}
  .peek:hover{color:var(--primary);background:var(--primary-soft)}.peek svg{width:18px;height:18px}
  .peek .off,.peek.on .on{display:none}.peek.on .off{display:block}
  .auth-box label.check{margin:4px 0 22px}
  .auth-box .submit{width:100%;justify-content:center;height:48px;border-radius:12px;font-size:15px;gap:10px;box-shadow:0 8px 20px rgba(10,50,53,.18)}
  .auth-box .submit svg{width:18px;height:18px}
  [dir=ltr] & .auth-box .submit svg{transform:scaleX(-1)}
  .auth-box .flash{margin-bottom:20px}
  .auth-copy{text-align:center;font-size:12.5px;color:var(--faint)}
  @media (max-width:900px){
    .auth{grid-template-columns:1fr;grid-template-rows:auto 1fr}
    .auth-brand{padding:24px 20px 28px}.auth-logo svg{height:34px}.auth-logo span{font-size:30px}.auth-brand::after{display:none}
    .auth-pitch{padding:22px 0 0;margin:0}.auth-pitch h2{font-size:24px}.auth-pitch p{margin:0;font-size:14.5px}
    .auth-mods,.auth-foot{display:none}
    .auth-form{padding:20px 16px 28px;position:static;height:auto}.auth-box{margin:24px auto}
    .auth-box h1{font-size:24px}
  }
}

/* ============================================================================================
   PAGE · upload
   A data request's link, opened by the customer (audit/upload/show). Scoped to <body class="page-upload">.
   The hero is the sign-in page's brand side laid across the top; a card a file asked.
   ============================================================================================ */
:where(.page-upload) {
  background:var(--bg);
  .up{min-height:100vh;display:flex;flex-direction:column}
  .up-hero{position:relative;overflow:hidden;isolation:isolate;padding:22px max(20px,calc((100vw - 1080px) / 2)) 92px;color:#d7ecea;
    background:radial-gradient(ellipse 60% 90% at 100% 0%,rgba(45,212,191,.26),transparent 60%),radial-gradient(ellipse 50% 80% at 0% 100%,rgba(20,184,166,.18),transparent 65%),linear-gradient(150deg,var(--brand-dark-2),var(--brand-dark))}
  .up-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 60% 30%,#000,transparent);mask-image:radial-gradient(ellipse 80% 80% at 60% 30%,#000,transparent)}
  .up-hero::after{content:"";position:absolute;z-index:-1;width:460px;height:460px;border-radius:50%;inset-inline-end:-160px;top:-200px;border:1px solid rgba(45,212,191,.2);box-shadow:0 0 0 60px rgba(45,212,191,.035),0 0 0 120px rgba(45,212,191,.025);animation:up-breathe 9s ease-in-out infinite}
  .up-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .up-office{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--disp);font-size:16px;letter-spacing:.01em}
  .up-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}.up-mark svg{width:24px;height:24px}
  .up-top .lang-switch{color:rgba(215,236,234,.85);border-color:rgba(255,255,255,.22)}.up-top .lang-switch:hover{color:#fff;border-color:var(--teal-bright)}
  .up-intro{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:38px;animation:up-rise .6s ease-out both}
  .up-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.3);color:var(--teal-bright);font-size:12.5px;font-weight:600}
  .up-chip svg{width:14px;height:14px}
  .up-intro h1{margin:14px 0 8px;font-size:34px;line-height:1.2;color:#fff;letter-spacing:-.01em}
  .up-intro p{margin:0;max-width:620px;font-size:15.5px;color:rgba(215,236,234,.82)}
  .up-facts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
  .up-facts div{padding:9px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px)}
  .up-facts dt{font-size:11.5px;color:rgba(215,236,234,.65)}.up-facts dd{margin:2px 0 0;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
  .up-ring{position:relative;flex:none;width:150px;height:150px}
  .up-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
  [dir=rtl] & .up-ring svg{transform:rotate(-90deg) scaleY(-1)}
  .up-ring circle{fill:none;stroke-width:9}.up-ring .track{stroke:rgba(255,255,255,.1)}
  .up-ring .bar{stroke:var(--teal-bright);stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(45,212,191,.55));animation:up-draw 1.2s cubic-bezier(.2,.8,.2,1) both}
  .up-ring > div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
  .up-ring b{font-family:var(--disp);font-size:36px;line-height:1;color:#fff}.up-ring small{font-size:17px;color:rgba(215,236,234,.6)}
  .up-ring span{font-size:11.5px;color:rgba(215,236,234,.7);margin-top:4px}
  .up-steps{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:30px 0 0;padding:0}
  .up-steps li{display:flex;align-items:center;gap:10px;flex:1 1 220px;font-size:13.5px;color:rgba(215,236,234,.85)}
  .up-steps i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;font-style:normal;font-weight:700;font-size:12.5px;color:var(--brand-dark);background:var(--teal-bright)}
  .up-body{width:100%;max-width:1080px;margin:-64px auto 0;padding:0 20px 32px;box-sizing:border-box;position:relative}
  .up-done{display:flex;align-items:center;gap:16px;padding:18px 20px;margin-bottom:16px;border-radius:16px;background:var(--panel);border:1px solid var(--ok-line);box-shadow:var(--shadow);animation:up-rise .5s ease-out both}
  .up-done h2{margin:0 0 2px;font-size:18px;color:var(--ok-ink)}.up-done p{margin:0;color:var(--muted)}
  .up-tick{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:var(--ok);color:#fff;box-shadow:0 0 0 8px var(--ok-soft);animation:up-pop .6s cubic-bezier(.3,1.6,.5,1) both}.up-tick svg{width:28px;height:28px;stroke-width:2.6}
  .up-note{display:flex;gap:12px;padding:14px 18px;margin-bottom:16px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
  .up-note > svg{flex:none;width:22px;height:22px;color:var(--teal)}.up-note p{margin:2px 0 0;white-space:pre-line;color:var(--text)}
  .up-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:16px}
  .up-card{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:18px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s;animation:up-rise .5s ease-out both}
  .up-card:nth-child(2){animation-delay:.08s}.up-card:nth-child(3){animation-delay:.16s}.up-card:nth-child(4){animation-delay:.24s}
  .up-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(10,50,53,.06),0 18px 36px rgba(10,50,53,.12)}
  .up-card.got{border-color:var(--ok-line)}
  .up-card-head{display:flex;align-items:flex-start;gap:14px}
  .up-ic{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:13px;background:linear-gradient(150deg,var(--brand-dark-2),var(--brand-dark));color:var(--teal-bright)}.up-ic svg{width:23px;height:23px}
  .up-card.got .up-ic{background:var(--ok);color:#fff}
  .up-card h3{margin:0 0 4px;font-size:16.5px}.up-card-head p{margin:0;font-size:13.5px;color:var(--muted)}
  .up-state{display:inline-flex;align-items:center;gap:5px;flex:none;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--warn-soft);color:var(--warn-ink)}
  .up-card.got .up-state{background:var(--ok-soft);color:var(--ok-ink)}.up-state svg{width:13px;height:13px;stroke-width:2.6}
  .up-drop{padding:26px 14px;border-radius:14px}
  .up-drop label::before{content:"";width:44px;height:44px;margin:0 auto 10px;border-radius:50%;background:var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314b8a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center/22px no-repeat;transition:transform .2s}
  .up-drop:hover label::before,.up-drop.over label::before{transform:translateY(-3px)}
  .up-drop.over{border-style:solid;box-shadow:0 0 0 4px var(--ring)}
  .up-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
  .up-file{display:inline-flex;align-items:center;gap:6px;min-width:0}.up-file svg{width:15px;height:15px;color:var(--ok)}.up-file b{color:var(--text);overflow-wrap:anywhere}
  .up-template{font-weight:600}
  .up-footer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding:18px 20px 26px;font-size:12.5px;color:var(--faint);text-align:center}.up-footer svg{width:15px;height:15px;flex:none}
  .up-body > .flash{margin-bottom:16px;box-shadow:var(--shadow)}
  @media (max-width:760px){
    .up-hero{padding:16px 16px 84px}
    .up-intro{flex-direction:column-reverse;align-items:flex-start;gap:18px;margin-top:22px}
    .up-intro h1{font-size:25px}.up-ring{width:112px;height:112px}.up-ring b{font-size:28px}
    .up-steps{display:none}
    .up-body{padding:0 16px 24px}
    .up-card{padding:16px}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
}
@keyframes up-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes up-draw{from{stroke-dasharray:0 100}}
@keyframes up-pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes up-breathe{50%{transform:scale(1.06)}}

/* ============================================================================================
   PAGE · portal
   The main page: the greeting and the model cards. Scoped to <body class="page-portal">.
   ============================================================================================ */
:where(.page-portal) {
  .hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 14px;padding:12px 20px;border-radius:14px;color:#d7ecea;
    background:radial-gradient(ellipse 55% 140% at 100% 0%,rgba(45,212,191,.28),transparent 62%),radial-gradient(ellipse 45% 120% at 0% 100%,rgba(20,184,166,.2),transparent 65%),linear-gradient(150deg,var(--brand-dark-2),var(--brand-dark));
    box-shadow:0 2px 4px rgba(10,50,53,.08),0 10px 24px rgba(10,50,53,.16)}
  .hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse 80% 110% at 60% 40%,#000,transparent);mask-image:radial-gradient(ellipse 80% 110% at 60% 40%,#000,transparent)}
  .hero::after{content:"";position:absolute;z-index:-1;width:240px;height:240px;border-radius:50%;inset-inline-end:-70px;bottom:-150px;border:1px solid rgba(45,212,191,.18);box-shadow:0 0 0 60px rgba(45,212,191,.035),0 0 0 120px rgba(45,212,191,.025);pointer-events:none}
  .hero .greet{display:inline-flex;align-items:center;gap:8px;padding:2px 10px 2px 8px;border-radius:999px;background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.28);color:var(--teal-bright);font-size:11.5px;font-weight:600;margin-bottom:6px}
  .hero .greet i{width:7px;height:7px;border-radius:50%;background:var(--teal-bright);box-shadow:0 0 0 4px rgba(45,212,191,.18)}
  .hero .company{font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(215,236,234,.7);margin-bottom:2px;font-size:11px}
  .hero h1{font-size:19px;line-height:1.25;color:#fff}
  .hero .sub{color:rgba(215,236,234,.78);margin-top:2px;font-size:13px}
  .hero .today{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px)}
  .hero .day{display:grid;place-items:center;width:44px;height:48px;border-radius:10px;background:#fff;color:var(--brand-dark);overflow:hidden;flex:none;box-shadow:0 6px 16px rgba(0,0,0,.18)}
  .hero .day small{display:block;width:100%;text-align:center;background:var(--teal);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.6}
  .hero .day b{font-family:var(--disp);font-size:18px;line-height:1.3;font-variant-numeric:tabular-nums}
  .hero .date{line-height:1.4;font-size:13px}.hero .date b{display:block;color:#fff;font-weight:600;font-size:14px}
  .hero .date span{display:inline-flex;align-items:center;gap:6px;color:rgba(215,236,234,.72);font-size:12px}.hero .date svg{width:14px;height:14px}
  main.portal-main{max-width:1440px;padding-top:14px;padding-bottom:20px}
  .section-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.section-head h2{margin:0;font-size:16px}
  .section-head .count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:12.5px;font-weight:700}
  .section-head::after{content:"";flex:1;height:1px;background:var(--line)}
  /* each model has its own accent colour (cards and hero icons); a new model adds its line here (ModuleContract) */
  [data-key=audit]{--accent:var(--teal)}[data-key=review]{--accent:#6366f1}
  .hero-icons{position:absolute;z-index:-1;inset-block:0;inset-inline-start:38%;inset-inline-end:240px;pointer-events:none;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:6px 10px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
  .hero-icons span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:color-mix(in srgb,var(--accent) 70%,#fff);background:color-mix(in srgb,var(--accent) 22%,transparent);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
    box-shadow:0 0 18px color-mix(in srgb,var(--accent) 30%,transparent);animation:portal-float 6s ease-in-out infinite}
  .hero-icons span:nth-child(even){animation-delay:-3s}.hero-icons span:nth-child(3n){animation-duration:7.5s}
  .hero-icons svg{width:15px;height:15px}
  .modules{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))}
  .module{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow);transition:transform .25s,border-color .25s,box-shadow .25s;animation:adv-in .45s ease-out both}
  .module::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55;transition:opacity .25s}
  .module:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 2px 4px rgba(10,50,53,.05),0 22px 44px color-mix(in srgb,var(--accent) 22%,transparent)}
  .module:hover::after{opacity:1}
  .module-cover{position:relative;isolation:isolate;height:46px;padding:7px 9px;display:flex;align-items:flex-start;justify-content:flex-end;
    background:radial-gradient(ellipse 70% 140% at 100% 0%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 65%),radial-gradient(ellipse 50% 120% at 0% 100%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),linear-gradient(150deg,var(--brand-dark-2),var(--brand-dark))}
  .module-cover::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.7;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);background-size:16px 16px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent)}
  .module-cover .shine{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
  .module-cover .shine::after{content:"";position:absolute;inset-block:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-18deg);transition:left .7s ease}
  .module:hover .module-cover .shine::after{left:120%}
  .module-cover .pill{background:rgba(255,255,255,.94);border-color:transparent;font-size:10.5px;padding:0 8px;gap:5px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
  .module-cover .pill.ok::before{--ping:var(--ok);animation:portal-ping 2s ease-out infinite}.module-cover .pill.bad::before{--ping:var(--danger);animation:portal-ping 2s ease-out infinite}
  .module-cover .ghost-icon{position:absolute;inset-inline-end:-8px;bottom:-18px;width:62px;height:62px;color:color-mix(in srgb,var(--accent) 30%,transparent);transition:transform .5s}
  .module-cover .ghost-icon svg{width:100%;height:100%;stroke-width:1}
  .module:hover .ghost-icon{transform:rotate(-8deg) scale(1.08)}
  .module-icon{position:absolute;inset-inline-start:10px;bottom:-16px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;
    background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 75%,#fff),var(--accent) 45%,color-mix(in srgb,var(--accent) 70%,#000));border:2px solid var(--panel);
    box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 45%,transparent);transition:transform .25s}
  .module-icon i{position:absolute;inset:-2px;border-radius:11px;border:2px solid var(--accent);opacity:0;pointer-events:none}
  .module:hover .module-icon{transform:translateY(-3px) rotate(-4deg)}
  .module:hover .module-icon i{animation:bx-halo 1.4s ease-out infinite}
  .module-icon svg{width:18px;height:18px;stroke-width:1.9}
  .module-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:22px 10px 10px}
  .module-title b{display:block;font-family:var(--disp);color:var(--heading);font-size:13.5px;font-weight:700;line-height:1.3}
  .module-title span{display:block;color:color-mix(in srgb,var(--accent) 80%,#000);font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .module-pages{display:flex;flex-wrap:wrap;gap:3px}
  .module-pages a{display:grid;place-items:center;width:21px;height:21px;border-radius:6px;color:color-mix(in srgb,var(--accent) 75%,#000);background:color-mix(in srgb,var(--accent) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));transition:transform .15s,background .15s,color .15s}
  .module-pages a:hover{transform:translateY(-2px);background:var(--accent);color:#fff;text-decoration:none}
  .module-pages svg{width:12px;height:12px}
  .module-foot{margin-top:auto;padding-top:2px}.module-foot .btn{width:100%;justify-content:center;padding:3px 8px;border-radius:8px;font-size:12px;white-space:nowrap}.module-foot .btn span{min-width:0;overflow:hidden;text-overflow:ellipsis}.module-foot .btn svg{flex:none;width:15px;height:15px;transition:transform .2s}
  .module:hover .module-foot .btn{background:linear-gradient(120deg,var(--brand-dark-2),color-mix(in srgb,var(--accent) 60%,var(--brand-dark)))}
  .module:hover .module-foot .btn svg{transform:translateX(-3px)}[dir=ltr] & .module:hover .module-foot .btn svg{transform:translateX(3px) scaleX(-1)}[dir=ltr] & .module-foot .btn svg{transform:scaleX(-1)}
  .module.soon{border-style:dashed;box-shadow:none;--accent:var(--neutral)}.module.soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .module.soon .module-cover{background:var(--neutral-soft)}.module.soon .module-cover::before{display:none}
  @media (max-width:900px){.hero-icons{display:none}}
  @media (max-width:560px){.hero{padding:24px 20px;border-radius:18px}.hero h1{font-size:24px}.hero .today{width:100%}.module-cover{height:46px}}
  @media (prefers-reduced-motion:reduce){.module,.hero-icons span,.module-cover .pill::before,.module:hover .module-icon i{animation:none}.module-cover .shine{display:none}}
}

/* ============================================================================================
   PAGE · notifications
   Notifications: channels and recipients. Scoped to <body class="page-notifications">.
   ============================================================================================ */
:where(.page-notifications) {
  .ch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
  .ch{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--panel)}
  .ch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
  .ch-head b{font-family:var(--disp);color:var(--heading);font-size:15px}
  .ch .hint{display:block;margin:-4px 0 10px}
  .ch label{margin-bottom:10px}
  .ch .forget{display:inline-flex;flex-direction:row;align-items:center;gap:6px;font-weight:400;margin:-4px 0 10px;color:var(--muted);font-size:12.5px}
  .rcp{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
  .rcp:last-child{border-bottom:0}
  .rcp .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:12px}
  .rcp.off{opacity:.6}
  .rcp .who b{color:var(--heading)}.rcp .who .addr{direction:ltr;unicode-bidi:embed;color:var(--muted);font-size:13px}
  .rcp .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
  .rcp .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .rcp details{grid-column:1/-1}
  .rcp details summary{display:none}
  .rcp details[open]{padding:12px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--panel-2)}
  .mods{display:flex;gap:12px;flex-wrap:wrap;margin:2px 0 12px}
  .mods label{margin:0}
  .mod{display:inline-flex;align-items:center;gap:6px}
  .types-btn{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:999px;padding:1px 9px;font:inherit;font-size:12px;cursor:pointer}
  .types-btn[aria-expanded=true]{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
  .types-btn.narrowed b{color:var(--primary)}
  .types{display:flex;gap:8px 16px;flex-wrap:wrap;margin:-4px 0 12px;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--panel-2)}
  .types .hint{flex-basis:100%;margin:0}
  .types label{margin:0}
  .types.off{opacity:.5}
  .err{color:var(--danger-ink);font-size:12.5px}
  .chats{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--primary-soft)}
  .chats code{direction:ltr;font-family:Consolas,Menlo,monospace;background:var(--panel);padding:1px 6px;border-radius:6px}
  @media (max-width:640px){.rcp{grid-template-columns:auto 1fr}.rcp .acts{grid-column:1/-1;justify-content:flex-start}}
}

/* ============================================================================================
   PAGE · automations
   Automations: the rules list (each drawn), the ideas and the canvas (blocks, wires, the block picked).
   Scoped to <body class="page-automations">. One colour per kind of block: when (teal), only if (violet),
   wait (amber), then (coral); a "yes" wire is green, a "no" wire red.
   ============================================================================================ */
:where(.page-automations) {
  --g-when:#0d8b7d;--g-when-soft:#e2f4f1;--g-if:#6b5fd3;--g-if-soft:#eeecfd;--g-wait:#b7791f;--g-wait-soft:#faefdc;--g-then:#d0573a;--g-then-soft:#fbebe6;
  --w-out:#8fa4a6;--w-yes:#1f9d6b;--w-no:#d0573a;
  .g-when{--g:var(--g-when);--gs:var(--g-when-soft)}.g-if{--g:var(--g-if);--gs:var(--g-if-soft)}.g-wait{--g:var(--g-wait);--gs:var(--g-wait-soft)}.g-then{--g:var(--g-then);--gs:var(--g-then-soft)}
  .p-out{--wc:var(--w-out)}.p-yes{--wc:var(--w-yes)}.p-no{--wc:var(--w-no)}

  /* the list */
  .auto{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
  .auto:last-child{border-bottom:0}.auto.off{opacity:.6}
  .auto .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--brand-dark-2);color:var(--teal-bright)}
  .auto .who{min-width:0}.auto .who b{color:var(--heading);font-size:15px;margin-inline-end:6px}
  .auto .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .steps{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
  .step{background:var(--gs);color:var(--g);border-radius:999px;padding:2px 11px;font-size:12.5px;font-weight:500}
  .graph-link{display:block;margin:4px 0 6px;padding:10px;border-radius:12px;background:var(--panel-2) radial-gradient(circle,var(--line-strong) 1px,transparent 1.2px) 0 0/18px 18px}
  .auto-graph{display:block;width:100%;height:120px}
  .auto-graph .wire{fill:none;stroke:var(--wc);stroke-width:3}
  .auto-graph .n-box{fill:var(--panel);stroke:var(--g);stroke-width:2.5}
  .auto-graph .n-tab{fill:var(--gs)}.auto-graph .n-ico{color:var(--g)}
  .auto-graph .n-name{font:600 15px var(--font);fill:var(--heading)}
  .ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px}
  .idea{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);transition:border-color .15s,transform .15s}
  .idea:hover{border-color:var(--primary-line)}
  .idea b{font-family:var(--disp);color:var(--heading)}.idea>span{font-size:13px;color:var(--muted)}
  .idea .auto-graph{height:70px;margin-top:auto}
  .idea[hidden]{display:none}
  .idea-top{display:flex;gap:6px;flex-wrap:wrap}.idea-top .badge{display:inline-flex;align-items:center;gap:4px}
  .idea-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .tpl-bar{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}.tpl-bar .hint{max-width:640px}.tpl-bar label{max-width:260px;margin-bottom:8px}
  .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0 14px}
  .chips .tpl-search{width:220px;padding:5px 12px;border-radius:999px}
  .chips .chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-strong);background:var(--panel);border-radius:999px;padding:4px 12px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--text)}
  .chips .chip:hover{border-color:var(--primary);color:var(--primary)}.chips .chip.on{background:var(--brand-dark-2);border-color:var(--brand-dark-2);color:#fff}

  /* the editor's head */
  .head-grid{align-items:end}.head-grid .form-actions{justify-content:flex-end;margin-bottom:12px}
  .words{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
  .words textarea{width:100%}.err{color:var(--danger-ink);font-size:13px;margin:6px 0 0}

  /* the canvas */
  .wf{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;height:680px;margin-bottom:18px;border:1px solid var(--line);border-radius:var(--rc);overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
  .wf-palette,.wf-panel{overflow:auto;padding:14px;background:var(--panel)}
  .wf-palette{border-right:1px solid var(--line)}.wf-panel{border-left:1px solid var(--line)}
  .pal-group{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
  .blk{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin-bottom:6px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:grab;font:inherit;color:var(--text)}
  .blk:hover{border-color:var(--g);background:var(--gs)}.blk b{display:block;font-size:13px;line-height:1.3}.blk small{display:block;font-size:11.5px;color:var(--muted);line-height:1.3}
  .n-tab{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--gs);color:var(--g)}
  .wf-canvas{--grid:24px;position:relative;overflow:hidden;cursor:grab;touch-action:none;user-select:none;
    background:#f7faf9 radial-gradient(circle,#c9d8d6 1.2px,transparent 1.4px) 0 0/var(--grid) var(--grid)}
  .wf-canvas:active{cursor:grabbing}
  .wf-stage{position:absolute;left:0;top:0;transform-origin:0 0}
  .wf-wires{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible}
  .wire{cursor:pointer}.wire .hit{fill:none;stroke:transparent;stroke-width:16}
  .wire .line,.wf-wires .temp{fill:none;stroke:var(--wc);stroke-width:2;transition:stroke-width .3s}
  .wf-wires .temp{stroke-dasharray:6 5}
  .wire:hover .line{stroke:var(--danger);stroke-dasharray:6 4}
  .wire.dead .line{stroke:var(--line-strong)}
  .w-count{font:700 13px var(--font);fill:var(--heading);text-anchor:middle;paint-order:stroke;stroke:#f7faf9;stroke-width:4px}
  .node{position:absolute;width:220px;height:70px;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--panel);border:2px solid var(--line-strong);border-radius:14px;
    box-shadow:0 2px 6px rgba(10,50,53,.06),0 8px 20px rgba(10,50,53,.06);cursor:move;transition:box-shadow .15s,border-color .15s,opacity .2s}
  .node{border-color:color-mix(in srgb,var(--g) 55%,var(--line))}
  .node:hover{box-shadow:0 4px 10px rgba(10,50,53,.1),0 12px 28px rgba(10,50,53,.1)}
  .node.picked{border-color:var(--g);box-shadow:0 0 0 4px color-mix(in srgb,var(--g) 22%,transparent),0 12px 28px rgba(10,50,53,.12)}
  .node.target{border-style:dashed;border-color:var(--primary)}
  .node.dead{opacity:.45}
  .node .n-tab{width:40px;height:40px;border-radius:11px}
  .n-text{min-width:0;line-height:1.25}
  .n-text small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g)}
  .n-text b{display:block;font-size:13.5px;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .n-text .say{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
  .n-count{position:absolute;top:-11px;right:10px;min-width:24px;padding:0 7px;border-radius:999px;background:var(--g);color:#fff;font-size:12px;font-weight:700;text-align:center;line-height:22px}
  .port{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--panel);border:2px solid var(--line-strong)}
  .port.in{left:-8px;top:27px}
  .port.out{right:-8px;margin-top:-7px;border-color:var(--wc);background:var(--wc);cursor:crosshair}
  .port.out:hover{transform:scale(1.35)}
  .port.out em{position:absolute;left:18px;top:-4px;font-style:normal;font-size:11px;font-weight:600;color:var(--wc);white-space:nowrap}
  .wf-tools{position:absolute;left:12px;bottom:12px;display:flex;gap:6px}
  .wf-tools .btn{min-width:34px;justify-content:center;background:var(--panel)}
  .wf-hint{position:absolute;right:12px;bottom:12px;max-width:340px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.85);padding:6px 10px;border-radius:8px;pointer-events:none}
  .p-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}.p-head b{color:var(--heading);font-family:var(--disp)}
  .b-group{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--g);border-radius:6px;padding:1px 8px}
  .wf-panel label{margin-bottom:10px}.wf-panel select[multiple]{min-height:120px}
  .day-picks{display:flex;flex-wrap:wrap;gap:0 12px}

  /* the test */
  .t-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
  .t-stats div{background:var(--panel-2);border-radius:10px;padding:12px}.t-stats b{display:block;font-family:var(--disp);font-size:24px;color:var(--heading)}.t-stats span{font-size:12.5px;color:var(--muted)}
  .t-ex{margin:6px 0 0;padding-inline-start:18px;font-size:13px}
  /* the document (views/automations/document): A4, saved as PDF from the print window */
  &.doc-automations{background:#e9eeee}
  .doc-tools{position:sticky;top:0;z-index:2;display:flex;gap:10px;align-items:center;justify-content:center;padding:10px;background:var(--panel);border-bottom:1px solid var(--line)}
  .doc{width:210mm;margin:10mm auto;padding:14mm 15mm;background:#fff;box-shadow:var(--shadow)}
  .doc-head{display:flex;gap:14px;align-items:center;padding-bottom:12px;margin-bottom:14px;border-bottom:3px solid var(--teal)}
  .doc-logo{width:44px;height:42px}.doc-head h1{font-size:22px}
  .doc-lead{color:var(--muted)}
  .doc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
  .doc-stats div{background:var(--panel-2);border-radius:10px;padding:10px 12px}.doc-stats b{display:block;font-family:var(--disp);font-size:22px;color:var(--heading)}.doc-stats span{font-size:12px;color:var(--muted)}
  .doc-model{display:flex;align-items:center;gap:8px;margin:18px 0 8px;color:var(--brand-dark-2)}
  .doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .doc-rule{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;break-inside:avoid}
  .doc-rule.small{margin:0}.doc-rule.small p{font-size:12px;color:var(--muted);margin:2px 0 6px}.doc-rule.small .auto-graph{height:60px}
  .doc-rule-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}.doc-rule-head b{font-family:var(--disp);color:var(--heading)}
  .doc-rule .auto-graph{height:110px;margin:4px 0 8px}
  .doc-steps{margin:0;padding-inline-start:22px;font-size:12.5px}.doc-steps li{padding:2px 0}.doc-steps li::marker{color:var(--g);font-weight:700}
  .doc-port{display:inline-block;margin-inline-start:8px;font-size:11.5px;font-weight:600;color:var(--wc)}
  .doc-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--muted)}
  @media print{
    &.doc-automations{background:#fff}.doc-tools{display:none}.doc{width:auto;margin:0;padding:0;box-shadow:none}
    *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  }
  @media (max-width:1100px){.wf{grid-template-columns:200px minmax(0,1fr)}.wf-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);max-height:320px}.wf{height:auto;grid-template-rows:600px auto}}
  @media (max-width:700px){.wf{grid-template-columns:1fr;grid-template-rows:auto 480px auto}.wf-palette{display:flex;gap:6px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.wf-palette .hint,.wf-palette .pal-group{display:none}.blk{width:auto;flex:none}.blk small{display:none}.wf-hint{display:none}
    .auto{grid-template-columns:auto 1fr}.auto .acts{grid-column:1/-1;justify-content:flex-start}.t-stats{grid-template-columns:1fr 1fr}.words{grid-template-columns:1fr}}
}

/* the automations document prints on A4 (an @page rule cannot sit inside the page's scope) */
@page{size:A4;margin:12mm}

/* ============================================================================================
   PAGE · devices
   Devices: the boxes and their keys. Scoped to <body class="page-devices">.
   ============================================================================================ */
:where(.page-devices) {
  .creds{border-color:var(--primary-line);background:linear-gradient(180deg,var(--primary-soft),var(--panel) 70%)}
  .creds table.kv th{width:120px}
  .creds .val{display:flex;align-items:center;gap:8px}
  .creds code{flex:1;min-width:0;direction:ltr;text-align:left;font:600 13.5px/1.6 Consolas,Menlo,monospace;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 10px;word-break:break-all}
  .creds .once{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--warn-soft);color:var(--warn-ink);font-weight:500;margin:12px 0}
  .creds .once svg{width:18px;height:18px;flex:none;margin-top:3px}
  @media (max-width:560px){.creds table.kv th,.creds table.kv td{display:block;width:auto;padding-inline:0}.creds table.kv th{border:0;padding-bottom:0}}
}

/* ============================================================================================
   PAGE · edge-updates
   Box updates. Scoped to <body class="page-edge-updates">.
   ============================================================================================ */
:where(.page-edge-updates) {
  .eu-how{margin:0 0 12px;color:var(--muted);font-size:13px}
  .eu-how code{direction:ltr;unicode-bidi:embed;font-family:Consolas,Menlo,monospace;background:var(--panel-2);border:1px solid var(--line);padding:2px 8px;border-radius:6px}
  .eu-up{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
  .eu-up label{margin:0}
  .eu-err{color:var(--danger-ink);font-size:12.5px;max-width:360px}
  .eu-choose{display:inline-flex;gap:6px;align-items:center}
  .eu-choose select{width:auto;min-width:170px}
  .eu-group td{background:var(--panel-2);font-weight:600;color:var(--heading)}
  @media (max-width:760px){.eu-up{grid-template-columns:1fr}}
}

/* ============================================================================================
   PAGE · reports
   Every model's reports (views/reports). Scoped to <body class="page-reports">.
   ============================================================================================ */
:where(.page-reports) {
  .report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
  .report-card{display:flex;gap:14px;align-items:flex-start;margin:0;color:inherit;transition:border-color .15s,transform .15s}
  .report-card:hover{text-decoration:none;border-color:var(--teal);transform:translateY(-1px)}
  .report-card .ic{width:40px;height:40px;border-radius:11px;flex:0 0 40px;display:grid;place-items:center;color:var(--teal-bright);background:radial-gradient(ellipse 120% 100% at 78% 15%,var(--brand-dark-2),var(--brand-dark))}
  .report-card .ic svg{width:20px;height:20px}
  .report-card .tx{flex:1;min-width:0}.report-card b{display:block;font-family:var(--disp);color:var(--heading);font-size:15px;margin-bottom:3px}
  .report-card .tx span{display:block;color:var(--muted);font-size:13px;line-height:1.5}
  .report-card .n{font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;min-width:28px;text-align:center;padding:2px 9px;border-radius:999px;background:var(--primary-soft);color:var(--brand-dark-2)}
  .report-card .n.zero{background:transparent;color:var(--faint);border:1px solid var(--line)}
  .section-title{font-size:15px;margin:26px 0 12px}
  .report-filters .dt{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
  .badge.ok{background:var(--ok-soft);color:var(--ok-ink)}.badge.warn{background:var(--warn-soft);color:var(--warn-ink)}.badge.bad{background:var(--danger-soft);color:var(--danger-ink)}
  table tfoot td{border-top:2px solid var(--line);font-weight:600}
}

/* ============================================================================================
   MODEL · service (+ the models that use its advice and pulse)
   Customer Service, and the advice / pulse / categories pieces Security, Cashier, Perimeter, Theft, Attendance, Parking and Bus show too.
   ============================================================================================ */
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@keyframes adv-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes bx-halo{0%{transform:scale(1);opacity:.35}100%{transform:scale(1.9);opacity:0}}
@keyframes bx-draw{to{stroke-dashoffset:0}}
@keyframes portal-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes portal-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ping) 55%,transparent)}80%,100%{box-shadow:0 0 0 7px transparent}}
:where(.m-service, .m-security, .m-cashier, .m-perimeter, .m-theft, .m-attendance, .m-parking, .m-bus, .m-audit) {
  /* Customer Service AI: counter / area / ATM cards, the employees' bars, customer faces, hour bars */
  .sv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;margin-bottom:18px}
  .sv-card{margin:0;display:flex;flex-direction:column;gap:10px}
  .sv-card .sv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .sv-card .sv-head h2{margin:0;font-size:15.5px}
  .sv-card .sv-head .hint{display:block}
  .sv-state{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;font-weight:600;font-size:12.5px;white-space:nowrap;background:var(--neutral-soft);color:var(--muted)}
  .sv-state i{width:9px;height:9px;border-radius:50%;background:currentColor}
  .sv-state.ok{background:var(--ok-soft);color:var(--ok-ink)}
  .sv-state.busy{background:var(--primary-soft);color:var(--primary-hover)}
  .sv-state.warn{background:var(--warn-soft);color:var(--warn-ink)}
  .sv-state.bad{background:var(--danger-soft);color:var(--danger-ink)}
  .sv-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .sv-figs div{background:var(--panel-2);border-radius:9px;padding:7px 9px;min-width:0}
  .sv-figs b{display:block;font-size:17px;font-variant-numeric:tabular-nums;color:var(--heading)}
  .sv-figs span{color:var(--muted);font-size:11.5px}
  .sv-figs .warn b{color:var(--warn-ink)}.sv-figs .bad b{color:var(--danger)}
  .sv-section{display:flex;align-items:center;gap:8px;margin:6px 0 10px;font-size:12.5px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.03em}
  .sv-section svg{width:16px;height:16px}
  .hours{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px;direction:ltr}
  .hours div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
  .hours i{display:block;width:100%;background:var(--primary-soft);border-radius:4px 4px 0 0;min-height:2px}
  .hours div.now i{background:var(--teal)}
  .hours div.peak i{background:var(--primary)}
  .hours span{font-size:10px;color:var(--faint);margin-top:3px}
  .rank{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:50%;font-weight:700;font-size:13px;background:var(--panel-2);color:var(--muted)}
  .rank.r1{background:#f5c542;color:#4a3700}.rank.r2{background:#cfd6de;color:#2d3742}.rank.r3{background:#e0a274;color:#3f2310}
  .bar{position:relative;height:10px;border-radius:5px;background:var(--panel-2);min-width:90px;overflow:hidden}
  .bar i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:5px;background:var(--teal)}
  .bar.slow i{background:var(--warn)}
  .vs{font-size:12px;font-weight:600;white-space:nowrap}.vs.fast{color:var(--ok-ink)}.vs.slow{color:var(--danger-ink)}
  .sv-who{display:inline-flex;align-items:center;gap:10px}
  .sv-face{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line)}
  .sv-face.lg{width:120px;height:120px;border-radius:16px}
  .sv-face img{width:100%;height:100%;object-fit:cover}
  .sv-face.none svg{width:22px;height:22px;fill:none;stroke:var(--faint);stroke-width:1.6}
  .sv-face.lg.none svg{width:54px;height:54px}
  .cust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:14px}
  .cust-card{margin:0;display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
  .cust-card:hover{text-decoration:none;border-color:var(--teal)}
  .cust-card b{display:block;color:var(--heading)}
  .cust-card .hint{display:block}
  .seg-branch{margin-bottom:16px}
  /* the pulse: health score, what the period cost, the advice by level */
  .pulse{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:center;margin:18px 0;padding:24px;border-radius:20px;color:#e8f6f4;
    background:radial-gradient(120% 140% at 0% 0%,#125257 0%,var(--brand-dark) 55%,#06282a 100%);box-shadow:0 14px 40px rgba(6,40,42,.28);position:relative;overflow:hidden}
  .pulse::after{content:"";position:absolute;inset-inline-end:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,.18),transparent 70%);pointer-events:none}
  .pulse-score{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;--g:#2dd4bf}
  .pulse-score.excellent{--g:#34d399}.pulse-score.good{--g:#2dd4bf}.pulse-score.fair{--g:#f5b84a}.pulse-score.poor{--g:#ff7a6b}
  .ring{width:180px;height:180px;direction:ltr}
  .ring-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:14}
  .ring-value{fill:none;stroke:var(--g);stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 8px var(--g))}
  .ring-text{position:absolute;top:0;height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .ring-text b{font-size:50px;line-height:1;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
  .ring-text span{font-size:12px;color:rgba(232,246,244,.6)}
  .pulse-grade{text-align:center}
  .pulse-name{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,246,244,.6)}
  .pulse-grade strong{font-size:18px;color:var(--g)}
  .pulse-cost-title{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,246,244,.6);margin-bottom:10px}
  .pulse-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .fact{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 14px 12px;min-width:0;--f:#5eead4;border-top:3px solid var(--f)}
  .fact.bad{--f:#ff8a7a}.fact.warn{--f:#f5c26b}.fact.info{--f:#5eead4}
  .fact b{display:block;font-size:30px;line-height:1.1;font-weight:800;color:var(--f);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fact > span{display:block;font-weight:600;color:#fff;font-size:13.5px;margin-top:4px}
  .fact b span{display:inline}
  .fact > span.dl{display:inline-block;font-size:11.5px;font-weight:700;margin-top:8px;color:#e8f6f4}
  .fact > span.dl.good{color:#6ee7b7}.fact > span.dl.bad{color:#ffa69b}
  .fact em{display:block;font-style:normal;color:rgba(232,246,244,.62);font-size:12px;margin-top:3px}
  .pulse-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
  .pulse-levels{display:flex;flex-wrap:wrap;gap:8px}
  .lvl{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
  .lvl:hover{text-decoration:none;background:rgba(255,255,255,.14);color:#fff}
  .lvl b{font-size:15px}.lvl.urgent b{color:#ff8a7a}.lvl.important b{color:#f5c26b}.lvl.tip b{color:#7dd3fc}.lvl.good b{color:#34d399}
  .pulse-trend{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:220px;flex:0 1 340px}
  .pulse-bars{display:flex;align-items:flex-end;gap:5px;height:64px;width:100%;direction:ltr}
  .pulse-bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
  .pulse-bars i{display:block;width:100%;max-width:26px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#5eead4,#14b8a6);box-shadow:0 0 12px rgba(94,234,212,.25)}
  .pulse-bars div.off i{background:rgba(255,255,255,.12);box-shadow:none}
  .pulse-bars span{font-size:10px;color:rgba(232,246,244,.55);margin-top:3px;font-style:normal}
  .fact b small{font-size:15px;font-weight:700;opacity:.8}
  .pulse-trend span{font-size:11.5px;color:rgba(232,246,244,.6)}
  .pulse .spark-line{stroke:#5eead4}.pulse .spark-area{fill:rgba(94,234,212,.14)}.pulse .spark-last{fill:#06282a;stroke:#5eead4}
  /* the sparklines */
  .spark{display:block;direction:ltr;overflow:visible}
  .spark-line{fill:none;stroke:var(--c,var(--primary));stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .spark-area{fill:var(--cs,var(--primary-soft));opacity:.8}
  .spark-dot{fill:var(--c,var(--primary))}
  .spark-last{fill:var(--panel);stroke:var(--c,var(--primary));stroke-width:2;vector-effect:non-scaling-stroke}
  /* the advice cards */
  .adv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr));gap:16px;margin-bottom:18px}
  .adv{--c:var(--primary);--cs:var(--primary-soft);position:relative;display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--line);
    border-radius:18px;padding:18px 18px 14px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
  .adv::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--c)}
  .adv:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,42,44,.12)}
  .adv.urgent{--c:var(--danger);--cs:var(--danger-soft)}.adv.important{--c:var(--warn);--cs:var(--warn-soft)}.adv.good{--c:var(--ok);--cs:var(--ok-soft)}
  .adv-head{display:flex;gap:12px;align-items:flex-start}
  .adv-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--cs);color:var(--c)}
  .adv-icon svg{width:22px;height:22px}
  .adv-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px}
  .adv-level{font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
  .adv-where{color:var(--muted);font-weight:600}
  .adv-where::before{content:"·";margin-inline-end:8px;color:var(--faint)}
  .adv h3{margin:3px 0 0;font-size:16.5px;line-height:1.3;color:var(--heading)}
  .adv-main{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:end;padding:12px 14px;border-radius:14px;background:var(--panel-2)}
  .adv-metric b{display:block;font-size:34px;line-height:1;font-weight:800;color:var(--c);font-variant-numeric:tabular-nums;white-space:nowrap}
  .adv-metric span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;max-width:190px}
  .adv-metric em{display:inline-block;margin-top:6px;font-style:normal;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--text)}
  .adv-trend{display:flex;flex-direction:column;gap:3px;min-width:0}
  .adv-trend .spark{width:100%;height:46px}
  .adv-trend span{font-size:11px;color:var(--faint);text-align:end}
  .adv-why{margin:0;color:var(--text);line-height:1.55}
  .adv-impact{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--cs);color:var(--heading);line-height:1.5;font-size:13.5px}
  .adv-impact svg{flex:none;width:18px;height:18px;color:var(--c);margin-top:1px}
  .adv-steps-title{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:-4px}
  .adv-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:7px}
  .adv-steps li{counter-increment:s;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
  .adv-steps li::before{content:counter(s);flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
    background:var(--c);color:#fff;font-size:12px;font-weight:700;margin-top:1px}
  .adv footer{margin-top:auto;padding-top:8px;border-top:1px dashed var(--line)}
  .adv footer a{font-weight:600;font-size:13.5px}
  [dir=rtl] & .adv-arrow{display:inline-block;transform:scaleX(-1)}
  /* the branches by health */
  .health{display:grid;gap:4px;max-height:440px;overflow:auto;padding-inline-end:4px}
  .health a{display:grid;grid-template-columns:minmax(120px,240px) 1fr 44px 110px;gap:12px;align-items:center;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--text)}
  .health a:hover{background:var(--panel-2);text-decoration:none}
  .health a.on{background:var(--primary-soft)}
  .health .hb{height:12px;border-radius:6px;background:var(--panel-2);overflow:hidden}
  .health .hb i{display:block;height:100%;border-radius:6px;background:var(--h)}
  .health b{font-variant-numeric:tabular-nums;text-align:end;font-size:16px}
  .health .gl{color:var(--h);font-weight:700;font-size:12.5px}
  /* against the period before */
  .dl{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.1);color:#e8f6f4;white-space:nowrap}
  .dl.good{background:rgba(52,211,153,.18);color:#6ee7b7}.dl.bad{background:rgba(255,122,107,.18);color:#ffa69b}
  .pulse-grade .dl{margin-top:8px}
  .dl-hint{text-transform:none;letter-spacing:0;opacity:.85}
  /* tomorrow and the good news */
  .insights{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;margin-bottom:18px;align-items:stretch}
  .insights > .card{margin:0}
  .fc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .fc-big b{display:block;font-size:40px;line-height:1;font-weight:800;color:var(--heading);font-variant-numeric:tabular-nums}
  .fc-big span{color:var(--muted);font-size:13px}
  .fc-facts{display:flex;gap:8px;flex-wrap:wrap}
  .fc-bars{display:flex;align-items:flex-end;gap:6px;height:130px;margin-top:14px;direction:ltr}
  .fc-bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
  .fc-bars i{display:block;width:100%;max-width:38px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--teal-bright),var(--primary))}
  .fc-bars div.short i{background:linear-gradient(180deg,#ff9b8f,var(--danger))}
  .fc-bars em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:3px}
  .fc-bars div.short em{color:var(--danger-ink)}
  .fc-bars span{font-size:11px;color:var(--faint);margin-top:4px}
  .fc-short{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
  .fc-short li{display:flex;gap:8px;align-items:center;padding:7px 10px;border-radius:10px;background:var(--danger-soft);color:var(--danger-ink);font-weight:600;font-size:13px}
  .fc-short svg{width:16px;height:16px;flex:none}
  .fc-ok{margin:12px 0 0;padding:8px 10px;border-radius:10px;background:var(--ok-soft);color:var(--ok-ink);font-weight:600}
  .wins{background:linear-gradient(160deg,var(--ok-soft),var(--panel) 55%)}
  .wins-star{color:#e0a700}
  .win-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .win-list li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--ok-line, var(--line))}
  .win-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--ok-soft);color:var(--ok-ink)}
  .win-icon svg{width:18px;height:18px}
  .win-list b{display:block;color:var(--heading)}
  .win-list li > div{flex:1;min-width:0}
  .win-list li > div span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
  .win-go{align-self:center;font-weight:700;text-decoration:none;padding:2px 6px}
  [dir=rtl] & .win-go{transform:scaleX(-1)}
  /* done / snooze on a card */
  .adv footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .adv-acts{display:inline-flex;gap:6px}
  .adv-acts form{margin:0}
  .btn.act-done{background:var(--c);border-color:var(--c);color:#fff}
  .btn.act-done:hover{filter:brightness(1.08);color:#fff}
  /* the follow-up */
  .follow{display:grid;gap:8px}
  .follow-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto auto;gap:14px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line);border-inline-start:4px solid var(--faint)}
  .follow-row.better{border-inline-start-color:var(--ok)}.follow-row.worse{border-inline-start-color:var(--danger)}.follow-row.same{border-inline-start-color:var(--warn)}
  .follow-what b{display:block;color:var(--heading)}
  .follow-fig{text-align:center}.follow-fig span{display:block;font-size:11px;color:var(--faint)}.follow-fig b{font-size:18px;font-variant-numeric:tabular-nums}
  .follow-arrow{color:var(--faint);font-size:18px}
  [dir=rtl] & .follow-arrow{transform:scaleX(-1)}
  .follow-badge{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--panel-2);color:var(--muted);white-space:nowrap}
  .follow-row.better .follow-badge{background:var(--ok-soft);color:var(--ok-ink)}.follow-row.worse .follow-badge{background:var(--danger-soft);color:var(--danger-ink)}
  .follow-row.same .follow-badge{background:var(--warn-soft);color:var(--warn-ink)}
  .follow-row form{margin:0}
  /* the staffing planner */
  .plan-legend{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);flex-wrap:wrap}
  .plan-legend .lg{display:inline-block;width:12px;height:12px;border-radius:3px;margin-inline-start:8px}
  .lg.short{background:var(--danger)}.lg.ok{background:var(--ok)}.lg.many{background:#6aa7e8}
  .plan-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
  .plan-grid{border-collapse:separate;border-spacing:4px;width:auto}
  .plan-grid th{background:none;font-size:11.5px;text-align:center;padding:2px 4px}
  .plan-grid td{padding:0;border:0}
  .plan-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:52px;border-radius:10px;border:2px solid transparent;cursor:pointer;
    font:inherit;transition:transform .12s ease;--k:.5}
  .plan-cell:hover{transform:scale(1.06)}
  .plan-cell b{font-size:16px;line-height:1.1}.plan-cell span{font-size:10.5px;opacity:.85}
  .plan-cell.short{background:rgba(196,87,74,calc(.18 + var(--k) * .6));color:#5c1d16}
  .plan-cell.ok{background:rgba(13,139,125,.16);color:var(--ok-ink)}
  .plan-cell.many{background:rgba(106,167,232,calc(.15 + var(--k) * .35));color:#1d4a7a}
  .plan-cell.on{border-color:var(--heading);box-shadow:0 0 0 3px var(--ring)}
  .whatif{padding:16px;border-radius:16px;background:var(--brand-dark);color:#e8f6f4;position:sticky;top:12px}
  .wi-title{font-weight:800;font-size:16px;display:flex;flex-direction:column;gap:2px}
  .whatif .hint{color:rgba(232,246,244,.65)}
  .wi-slider{display:block;margin:6px 0 12px;font-weight:600}
  .wi-slider b{font-size:22px;color:#5eead4;margin-inline-start:6px}
  .wi-slider input{width:100%;accent-color:#2dd4bf;margin-top:6px}
  .wi-out{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .wi-out div{background:rgba(255,255,255,.07);border-radius:10px;padding:9px 10px}
  .wi-out b{display:block;font-size:20px;color:#fff;font-variant-numeric:tabular-nums}
  .wi-out span{font-size:11.5px;color:rgba(232,246,244,.65)}
  .wi-verdict{margin:12px 0 0;padding:9px 11px;border-radius:10px;font-weight:700;background:rgba(255,255,255,.08)}
  .wi-verdict.ok{background:rgba(52,211,153,.18);color:#6ee7b7}.wi-verdict.bad{background:rgba(255,122,107,.2);color:#ffb0a6}.wi-verdict.many{background:rgba(125,211,252,.16);color:#a5dcfb}
  @media (max-width:1100px){.insights,.plan-wrap{grid-template-columns:1fr}.whatif{position:static}}
  @media (max-width:640px){.follow-row{grid-template-columns:1fr auto auto auto}.follow-row .follow-what{grid-column:1 / -1}.follow-row form{grid-column:1 / -1}}
  /* the next rounds */
  .slot-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
  .slot-list li{display:grid;grid-template-columns:56px minmax(0,1fr) 110px 150px;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--panel-2)}
  .slot-list .slot-risk{height:8px;border-radius:4px;background:var(--panel);overflow:hidden}
  .slot-list .slot-risk i{display:block;height:100%;background:var(--ok)}
  .slot-list li.warn .slot-risk i{background:var(--warn)}.slot-list li.bad .slot-risk i{background:var(--danger)}
  .slot-list em{font-style:normal;font-size:12px;color:var(--muted);text-align:end}
  .slot-list li.bad em{color:var(--danger-ink);font-weight:700}
  /* the live part of the security dashboard */
  .live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ef4444;animation:livepulse 1.6s infinite;vertical-align:1px;margin-inline-end:4px}
  .live-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 10px}
  .live-head h2{margin:0;font-size:18px}
  .box-chips{display:flex;flex-wrap:wrap;gap:8px}
  .box-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:13px}
  .box-chip i{width:9px;height:9px;border-radius:50%;background:var(--ok)}.box-chip.off i{background:var(--danger)}.box-chip.off{border-color:var(--danger-line);background:var(--danger-soft)}
  .cam-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .cam-tile{position:relative;border-radius:12px;padding:12px;min-height:84px;background:linear-gradient(160deg,#0f3b3e,#082a2c);color:#e8f6f4;overflow:hidden}
  .cam-tile b{display:block;font-size:13.5px}.cam-tile span{font-size:11.5px;color:rgba(232,246,244,.6)}
  .cam-tile .ppl{position:absolute;inset-inline-end:10px;bottom:8px;font-size:20px;font-weight:800;color:#5eead4}
  .cam-tile .dot{position:absolute;inset-inline-end:10px;top:10px;width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399}
  .cam-tile.off{background:linear-gradient(160deg,#5a2620,#33130f)}.cam-tile.off .dot{background:#ff7a6b;box-shadow:0 0 8px #ff7a6b}
  .cam-tile.guard{outline:2px solid #f5c26b}
  .cam-tile .who{display:block;margin-top:6px;font-size:12px;color:#f5c26b;font-weight:700}
  .patrol-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
  .patrol-row:last-child{border-bottom:0}
  .cp-dots{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
  .cp-dots i{width:14px;height:14px;border-radius:4px;background:var(--panel-2);border:1px solid var(--line)}
  .cp-dots i.visited{background:var(--ok);border-color:var(--ok)}.cp-dots i.missed{background:var(--danger);border-color:var(--danger)}
  .kind-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
  .kind-tabs a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-weight:600;text-decoration:none}
  .kind-tabs a svg{width:18px;height:18px;color:var(--muted)}
  .kind-tabs a .n{font-size:12px;padding:1px 8px;border-radius:999px;background:var(--panel-2);color:var(--muted)}
  .kind-tabs a.on{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}.kind-tabs a.on svg,.kind-tabs a.on .n{color:#fff;background:transparent}
  @media (max-width:980px){.pulse{grid-template-columns:1fr}.pulse-facts{grid-template-columns:repeat(2,1fr)}.pulse-trend{align-items:flex-start;flex-basis:100%}}
  @media (max-width:560px){.pulse{padding:18px}.fact b{font-size:24px}.adv-main{grid-template-columns:1fr}.health a{grid-template-columns:1fr 60px 40px}.health .gl{display:none}}
  .br-search{min-width:min(320px,100%)}
  .share{display:flex;flex-direction:column;gap:3px;min-width:120px}
  .share .bar{position:relative}
  .share .bar em{position:absolute;inset-block:-2px;width:2px;background:var(--heading);opacity:.55}
  @media (max-width:760px){.sv-figs{grid-template-columns:1fr 1fr}}
  /* the advice by theme, and the AI discoveries (what the figures say once read together) */
  .ai-spark{display:inline-block;background:linear-gradient(135deg,#7c3aed,#14b8a6);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
  .adv.smart{border:1.5px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,#7c3aed,#14b8a6 55%,#f59e0b) border-box}
  .adv.smart::before{background:linear-gradient(90deg,#7c3aed,#14b8a6,#f59e0b)}
  .adv-ai{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em;color:#fff;background:linear-gradient(90deg,#7c3aed,#14b8a6)}
  .kind-tabs a.ai-tab{border-color:#c4b5fd}
  .kind-tabs a.ai-tab.on{background:linear-gradient(90deg,#6d28d9,#0f766e);border-color:transparent}
  .kind-tabs a.ai-tab.on .ai-spark{color:#fff;background:none}
  .th-head{display:flex;align-items:center;gap:12px;margin:22px 2px 12px}
  .th-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:13px;background:var(--tc-soft,var(--primary-soft));color:var(--tc,var(--primary));font-size:20px;font-weight:800}
  .th-icon svg{width:21px;height:21px}
  .th-text{min-width:0}
  .th-head h2{margin:0;font-size:17px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
  .th-head p{margin:2px 0 0;color:var(--muted);font-size:13px}
  .th-urgent{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--danger-soft);color:var(--danger)}
  .tc-ai .th-icon{background:linear-gradient(135deg,#7c3aed,#14b8a6);color:#fff}
  .tc-0{--tc:var(--warn);--tc-soft:var(--warn-soft)}
  .tc-1{--tc:var(--primary);--tc-soft:var(--primary-soft)}
  .tc-2{--tc:var(--teal);--tc-soft:var(--ok-soft)}
  .tc-3{--tc:var(--danger);--tc-soft:var(--danger-soft)}
  .tc-ok{--tc:var(--ok);--tc-soft:var(--ok-soft)}
  .theme-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));gap:10px;margin:0 0 16px}
  .theme-tiles a{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-decoration:none;transition:transform .15s,box-shadow .15s}
  .theme-tiles a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,42,44,.1)}
  .theme-tiles .tt-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;background:var(--tc-soft,var(--primary-soft));color:var(--tc,var(--primary));font-weight:800;font-size:18px}
  .theme-tiles .tt-icon svg{width:19px;height:19px}
  .theme-tiles b{display:block;font-size:20px;line-height:1.1;color:var(--heading);font-variant-numeric:tabular-nums}
  .theme-tiles span{font-size:12.5px;font-weight:600;line-height:1.3}
  .theme-tiles em{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--danger)}
  .theme-tiles a.on{border-color:var(--tc,var(--primary));background:var(--tc-soft,var(--primary-soft));box-shadow:0 0 0 1px var(--tc,var(--primary)) inset}
  .theme-tiles a.tc-ai.on{background:linear-gradient(135deg,#ede9fe,#ccfbf1);box-shadow:none}
  [data-adv-panel][hidden],[data-adv-hint][hidden]{display:none}
  [data-adv-panel]{animation:adv-in .2s ease-out}
  .theme-tiles a.tc-ai{border:1.5px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,#7c3aed,#14b8a6) border-box}
  /* the branches page: the bank read as a whole */
  .bx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(460px,100%),1fr));gap:16px;margin-bottom:18px}
  .bx-move{padding:12px 0;border-top:1px dashed var(--line)}
  .bx-when{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13.5px;margin-bottom:8px}
  .bx-path{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
  .bx-side{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--panel-2)}
  .bx-side span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .bx-side b{color:var(--heading)}
  .bx-side em{font-style:normal;font-size:13px;color:var(--muted)}
  .bx-side.gain{background:var(--ok-soft)}.bx-side.gain em{color:var(--ok-ink,var(--ok));font-weight:700}
  .bx-arrow{font-size:22px;color:var(--teal);font-weight:800}
  [dir=rtl] & .bx-arrow{transform:scaleX(-1)}
  .bx-win{margin-top:8px;font-weight:700;color:var(--teal);font-size:13.5px}
  .bx-week{width:100%;border-collapse:collapse;font-size:13.5px}
  .bx-week th,.bx-week td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:start}
  .bx-week th{color:var(--muted);font-weight:600;width:90px}
  .bx-ba b{color:var(--ok-ink,var(--ok))}
  /* the branches' map: one colour per zone (the legend says which), the arrows green when a branch got better, red when worse */
  .bx-map{--z-star:#1f9d6b;--z-losing:#d48a1c;--z-patient:#3f7fd1;--z-help:#d24b3e;--a-better:#1f9d6b;--a-worse:#d24b3e;position:relative}
  .bx-controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:4px 0 10px}
  .bx-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line)}
  .bx-seg>span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:0 8px 0 10px}
  .bx-seg button{border:0;background:transparent;color:var(--text);font:inherit;font-size:12.5px;padding:5px 11px;border-radius:999px;cursor:pointer}
  .bx-seg button.on{background:var(--panel);color:var(--heading);font-weight:700;box-shadow:0 1px 3px rgba(15,42,44,.15)}
  .bx-map .bx-check{display:inline-flex;flex-direction:row;gap:6px;align-items:center;font-size:13px;cursor:pointer;margin:0}.bx-map .bx-check input{width:auto;margin:0}
  .bx-stage{position:relative}
  .bx-map svg{width:100%;height:auto;display:block;overflow:visible}
  .bx-map .zf{opacity:.09}.bx-map .zf.z-star{fill:var(--z-star)}.bx-map .zf.z-losing{fill:var(--z-losing)}.bx-map .zf.z-patient{fill:var(--z-patient)}.bx-map .zf.z-help{fill:var(--z-help)}
  .bx-map .zl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;opacity:.75}
  .bx-map .zl.z-star{fill:var(--z-star)}.bx-map .zl.z-losing{fill:var(--z-losing)}.bx-map .zl.z-patient{fill:var(--z-patient)}.bx-map .zl.z-help{fill:var(--z-help)}
  .bx-map .grid line{stroke:var(--line);stroke-width:1}
  .bx-map .tick{font-size:10.5px;fill:var(--faint);font-variant-numeric:tabular-nums}
  .bx-map .axis{font-size:11.5px;font-weight:600;fill:var(--muted)}
  .bx-map .avg{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:5 4;opacity:.7}
  .bx-map .avg-l{font-size:10.5px;font-weight:700;fill:var(--muted);paint-order:stroke;stroke:var(--panel);stroke-width:4px;stroke-linejoin:round}
  .bx-map .dot{cursor:pointer;outline:none;transition:opacity .2s}
  .bx-map .dot .core{fill:var(--zc);fill-opacity:.88;stroke:var(--panel);stroke-width:2.5;transition:transform .2s}
  .bx-map .dot .halo{fill:var(--zc);opacity:.18;transform-box:fill-box;transform-origin:center;animation:bx-halo 2.6s ease-out infinite}
  .bx-map .dot.z-star{--zc:var(--z-star)}.bx-map .dot.z-losing{--zc:var(--z-losing)}.bx-map .dot.z-patient{--zc:var(--z-patient)}.bx-map .dot.z-help{--zc:var(--z-help)}
  .bx-map .dot.z-star .halo,.bx-map .dot.z-patient .halo{animation:none;opacity:0}
  .bx-map .dot:hover .core,.bx-map .dot:focus .core{transform:scale(1.12);transform-box:fill-box;transform-origin:center;stroke:var(--heading)}
  .bx-map .dot .name{font-size:12px;font-weight:700;fill:var(--heading);paint-order:stroke;stroke:var(--panel);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
  .bx-map .trails{opacity:0;transition:opacity .5s}.bx-map .trails.shown{opacity:1}
  .bx-map .trails.shown .trail{stroke-dasharray:400;stroke-dashoffset:400;animation:bx-draw 1s ease-out forwards}
  .bx-map .trail{fill:none;stroke-width:2.5;stroke-linecap:round;opacity:.75}
  .bx-map .trail.a-better{stroke:var(--a-better)}.bx-map .trail.a-worse{stroke:var(--a-worse)}
  .bx-map marker .a-better{fill:var(--a-better)}.bx-map marker .a-worse{fill:var(--a-worse)}
  .bx-map .ghost{fill:var(--panel);stroke-width:2;stroke-dasharray:2 2}.bx-map .ghost.a-better{stroke:var(--a-better)}.bx-map .ghost.a-worse{stroke:var(--a-worse)}
  .bx-map svg.hovering .dot:not(.lit),.bx-map svg.hovering .trails>:not(.lit){opacity:.25}
  .bx-map svg.focused .dot:not(.in){opacity:.15}
  .bx-tip{position:absolute;z-index:5;width:270px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:0 14px 34px rgba(15,42,44,.18);pointer-events:none;font-size:13px}
  .bx-tip-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}.bx-tip-head b{font-size:15px;color:var(--heading)}.bx-tip-head span{color:var(--faint);font-size:12px}
  .bx-tip-head i,.bx-key i{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block}
  .bx-tip-zone{font-size:12px;line-height:1.45;margin-bottom:8px;font-weight:600}
  .z-star.bx-tip-zone{color:var(--z-star)}.z-losing.bx-tip-zone{color:var(--z-losing)}.z-patient.bx-tip-zone{color:var(--z-patient)}.z-help.bx-tip-zone{color:var(--z-help)}
  .bx-row{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:4px 0;border-top:1px solid var(--line)}
  .bx-row span{color:var(--muted)}.bx-row b{color:var(--heading);text-align:end}.bx-row.axis span{color:var(--heading);font-weight:700}
  .bx-row em{grid-column:1/-1;font-style:normal;font-size:11.5px;text-align:end}.bx-row em.better{color:var(--a-better)}.bx-row em.worse{color:var(--a-worse)}
  .bx-tip-foot{margin-top:6px;font-size:12px;color:var(--muted)}
  .bx-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:8px;margin-top:10px}
  .bx-key{display:flex;gap:9px;align-items:flex-start;text-align:start;padding:9px 11px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font:inherit;color:var(--text);cursor:pointer}
  .bx-key i{margin-top:4px}.bx-key b{font-size:13px;color:var(--heading)}.bx-key em{font-style:normal;font-weight:800;color:var(--muted);font-size:12px}
  .bx-key small{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}
  .bx-key.on{border-color:var(--heading);box-shadow:0 0 0 2px var(--ring)}
  .bx-key i.z-star{background:var(--z-star)}.bx-key i.z-losing{background:var(--z-losing)}.bx-key i.z-patient{background:var(--z-patient)}.bx-key i.z-help{background:var(--z-help)}
  .bx-arrows{cursor:default;align-items:center;font-size:12.5px;gap:6px;flex-wrap:wrap}
  .bx-arrows i{width:22px;height:3px;border-radius:2px;margin:0 0 0 6px}.bx-arrows i.a-better{background:var(--a-better)}.bx-arrows i.a-worse{background:var(--a-worse)}
  .bx-movers{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:8px;margin-top:10px}
  .bx-mover{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--text);border-inline-start:4px solid}
  .bx-mover span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.bx-mover b{color:var(--heading);font-size:15px}.bx-mover em{font-style:normal;font-size:12.5px;color:var(--muted)}
  .bx-mover.better{border-color:var(--a-better);background:color-mix(in srgb,var(--a-better) 8%,var(--panel))}.bx-mover.better span{color:var(--a-better)}
  .bx-mover.worse{border-color:var(--a-worse);background:color-mix(in srgb,var(--a-worse) 8%,var(--panel))}.bx-mover.worse span{color:var(--a-worse)}
  @media (prefers-reduced-motion:reduce){.bx-map .dot .halo{animation:none}.bx-map .trails.shown .trail{animation:none;stroke-dasharray:none}}
  .bx-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:12px;margin-bottom:18px}
  .bx-char{display:flex;flex-direction:column;gap:6px;margin:0;text-decoration:none;color:var(--text);border-top:4px solid var(--kc,var(--primary))}
  .bx-char:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,42,44,.1)}
  .bx-char p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
  .bx-kind{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--kc,var(--primary))}
  .bx-name{font-size:17px;color:var(--heading)}
  .bx-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  .bx-facts span{font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--panel-2);color:var(--text)}
  .k-losing{--kc:var(--danger)}.k-speed{--kc:var(--teal)}.k-neighbourhood{--kc:#7c3aed}.k-rush{--kc:var(--warn)}.k-keeper{--kc:var(--ok)}.k-steady{--kc:var(--primary)}
  @media (max-width:560px){.bx-path{grid-template-columns:1fr}.bx-arrow{transform:rotate(90deg)}}
  .theme-tiles .tc-ai .tt-icon{background:linear-gradient(135deg,#7c3aed,#14b8a6);color:#fff}
}

/* ============================================================================================
   MODEL · security
   Scoped to <body class="m-security">.
   ============================================================================================ */
:where(.m-security) {
  .live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:livepulse 1.6s infinite;vertical-align:1px;margin-inline-end:4px}
  .stepper{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
  .stepper button{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font:inherit;color:var(--muted);cursor:pointer}
  .stepper button .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--neutral-soft);color:var(--neutral);font-weight:700;font-size:12.5px}
  .stepper button.on{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);font-weight:600}.stepper button.on .n{background:var(--brand-dark-2);color:#fff}
  .stepper button.done .n{background:var(--ok-soft);color:var(--ok)}
  .step{display:none}.step.on{display:block}
  .presets{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 12px}.presets button{padding:3px 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);font:inherit;font-size:12.5px;cursor:pointer;color:var(--muted)}.presets button.on,.presets button:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
  .picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;max-height:560px;overflow:auto;padding:2px}
  .cam{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel-2)}
  .cam h3{margin:0 0 6px;font-size:14px;font-weight:600;display:flex;justify-content:space-between;gap:6px}.cam h3 small{color:var(--muted);font-weight:400;font-size:12px}
  .cam svg{width:100%;aspect-ratio:16/9;border-radius:8px;background:#062123;display:block}
  .cam svg .zone{fill:rgba(255,255,255,.14);stroke:#9fbcbc;stroke-width:1.5;cursor:pointer;transition:fill .15s}.cam svg .zone:hover{fill:rgba(20,184,166,.45)}
  .cam svg .zone.used{fill:rgba(20,184,166,.6);stroke:#2dd4bf}
  .cam svg text{fill:#fff;font-size:9px;font-family:var(--font);pointer-events:none;text-anchor:middle}
  .cam .zones{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .chip{border:1px solid var(--line-strong);background:var(--panel);border-radius:999px;padding:3px 10px;font:inherit;font-size:12.5px;cursor:pointer}.chip:hover{border-color:var(--primary);color:var(--primary)}.chip.whole{border-style:dashed}
  .flow{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;min-height:120px;padding:14px;border:2px dashed var(--line-strong);border-radius:14px;background:var(--panel-2)}
  .flow .empty-flow{width:100%;text-align:center;color:var(--muted);padding:26px 10px}
  .node{position:relative;width:250px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);padding:10px 12px 10px;box-shadow:var(--shadow);cursor:grab}
  .node.dragging{opacity:.5}.node.over{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
  .node .idx{position:absolute;top:-10px;inset-inline-start:-10px;width:26px;height:26px;border-radius:50%;background:var(--brand-dark-2);color:var(--teal-bright);display:grid;place-items:center;font-weight:700;font-size:13px}
  .node .x{position:absolute;top:6px;inset-inline-end:6px;border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:15px;line-height:1}.node .x:hover{color:var(--danger)}
  .node input.nm{font-weight:600;margin:6px 0 2px;padding:5px 8px}
  .node .meta{color:var(--muted);font-size:12px;margin-bottom:6px}
  .node .fields{display:grid;grid-template-columns:1fr 1fr;gap:6px}.node .fields label{margin:0;font-size:11.5px}.node .fields input{padding:4px 7px;font-size:13px}
  .node .mv{display:flex;gap:4px;justify-content:flex-end;margin-top:6px}.node .mv button{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:1px 8px;cursor:pointer;font:inherit;font-size:12px}
  .arrow{align-self:center;color:var(--faint);font-size:22px;line-height:1;transform:scaleX(-1)}[dir=ltr] & .arrow{transform:none}
  .preview{display:flex;flex-wrap:wrap;gap:6px}.preview span{background:var(--primary-soft);color:var(--primary);border-radius:8px;padding:2px 9px;font-variant-numeric:tabular-nums;font-size:13px}
  .review dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}.review dt{color:var(--muted)}.review dd{margin:0}
  .errbox{border:1px solid var(--danger-line);background:var(--danger-soft);color:var(--danger-ink);border-radius:12px;padding:10px 14px;margin-bottom:14px;display:none}
  .nav{display:flex;justify-content:space-between;gap:8px;margin-top:6px}
  @media (max-width:700px){.node{width:100%}}
}

/* ============================================================================================
   MODEL · cashier
   Scoped to <body class="m-cashier">.
   ============================================================================================ */
:where(.m-cashier) {
  /* Cashier AI: till cards, drawer state, alert figures, hour bars */
  .till-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:18px;margin-bottom:18px}
  .till-card{margin:0;display:flex;flex-direction:column;gap:12px}
  .till-card .tc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .till-card .tc-head h2{margin:0;font-size:16px}
  .till-card .tc-head .hint{display:block}
  .drawer-state{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-weight:600;font-size:13px;white-space:nowrap;background:var(--neutral-soft);color:var(--muted)}
  .drawer-state i{width:9px;height:9px;border-radius:50%;background:currentColor}
  .drawer-state.open{background:var(--danger-soft);color:var(--danger-ink)}
  .drawer-state.closed{background:var(--ok-soft);color:var(--ok-ink)}
  .tc-now{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .tc-now div,.tc-figs div{background:var(--panel-2);border-radius:9px;padding:7px 9px;min-width:0}
  .tc-now b,.tc-figs b{display:block;font-size:18px;font-variant-numeric:tabular-nums;color:var(--heading)}
  .tc-now span,.tc-figs span{color:var(--muted);font-size:11.5px}
  .tc-now .warn b,.tc-figs .warn b{color:var(--warn-ink)}
  .tc-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .tc-figs .bad b{color:var(--danger)}
  .badge.k-{background:var(--primary-soft);color:var(--primary-hover)}
  .hours{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px;direction:ltr}
  .hours div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
  .hours i{display:block;width:100%;background:var(--primary-soft);border-radius:4px 4px 0 0;min-height:2px}
  .hours div.now i{background:var(--teal)}
  .hours div.sus i{background:var(--danger)}
  .hours span{font-size:10px;color:var(--faint);margin-top:3px}
  .seg-tills{margin-bottom:16px}
  .alert-thumbs{display:flex;gap:4px;flex-wrap:wrap}
  @media (max-width:760px){.tc-figs,.tc-now{grid-template-columns:1fr 1fr}}
}

/* ============================================================================================
   MODEL · counter
   Scoped to <body class="m-counter">.
   ============================================================================================ */
:where(.m-counter) {
  /* Counter AI: station cards and their state, today's figures, the product table with its share bars, hour bars, item pictures */
  .ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:18px;margin-bottom:18px}
  .ct-card{margin:0;display:flex;flex-direction:column;gap:12px}
  .ct-card .ct-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .ct-card .ct-head h2{margin:0;font-size:16px}
  .ct-card .ct-head .hint{display:block}
  .ct-state{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-weight:600;font-size:13px;white-space:nowrap;background:var(--neutral-soft);color:var(--muted)}
  .ct-state i{width:9px;height:9px;border-radius:50%;background:currentColor}
  .ct-state.counting{background:var(--ok-soft);color:var(--ok-ink)}
  .ct-state.offline,.ct-state.error,.ct-state.no_shape{background:var(--warn-soft);color:var(--warn-ink)}
  .ct-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .ct-figs div{background:var(--panel-2);border-radius:9px;padding:7px 9px;min-width:0}
  .ct-figs b{display:block;font-size:18px;font-variant-numeric:tabular-nums;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ct-figs span{color:var(--muted);font-size:11.5px}
  .ct-meta{color:var(--muted);font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px 12px}
  .stat .up{color:var(--ok-ink)}
  .stat .down{color:var(--danger-ink)}
  .share{display:flex;align-items:center;gap:8px;min-width:120px}
  .share i{display:block;height:8px;border-radius:4px;background:var(--teal);min-width:2px}
  .share span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  .hours{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px;direction:ltr}
  .hours div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
  .hours i{display:block;width:100%;background:var(--primary-soft);border-radius:4px 4px 0 0;min-height:2px}
  .hours div.now i{background:var(--teal)}
  .hours span{font-size:10px;color:var(--faint);margin-top:3px}
  .item-pic{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block;background:var(--panel-2)}
  .item-pic.lg{width:96px;height:96px}
  tr.voided td{opacity:.55}
  tr.voided td .label{text-decoration:line-through}
  .review-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .review-form select{max-width:220px}
  @media (max-width:760px){.ct-figs{grid-template-columns:1fr 1fr}}
}

/* ============================================================================================
   MODEL · dining
   Scoped to <body class="m-dining">.
   ============================================================================================ */
:where(.m-dining) {
  /* Dining AI: table cards, table state, figures, hour bars */
  .dt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px;margin-bottom:18px}
  .dt-card{margin:0;display:flex;flex-direction:column;gap:12px}
  .dt-card .dt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .dt-card .dt-head h2{margin:0;font-size:16px}
  .dt-card .dt-head .hint{display:block}
  .table-state{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-weight:600;font-size:13px;white-space:nowrap;background:var(--neutral-soft);color:var(--muted)}
  .table-state i{width:9px;height:9px;border-radius:50%;background:currentColor}
  .table-state.free,.table-state.served{background:var(--ok-soft);color:var(--ok-ink)}
  .table-state.waiting,.table-state.dirty{background:var(--warn-soft);color:var(--warn-ink)}
  .table-state.late{background:var(--danger-soft);color:var(--danger-ink)}
  .dt-now,.dt-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .dt-now div,.dt-figs div{background:var(--panel-2);border-radius:9px;padding:7px 9px;min-width:0}
  .dt-now b,.dt-figs b{display:block;font-size:18px;font-variant-numeric:tabular-nums;color:var(--heading)}
  .dt-now span,.dt-figs span{color:var(--muted);font-size:11.5px}
  .dt-figs .bad b{color:var(--danger)}
  .dt-figs .warn b{color:var(--warn-ink)}
  .badge.k-{background:var(--primary-soft);color:var(--primary-hover)}
  .hours{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px;direction:ltr}
  .hours div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
  .hours i{display:block;width:100%;background:var(--primary-soft);border-radius:4px 4px 0 0;min-height:2px}
  .hours div.now i{background:var(--teal)}
  .hours div.sus i{background:var(--danger)}
  .hours span{font-size:10px;color:var(--faint);margin-top:3px}
  .alert-thumbs{display:flex;gap:4px;flex-wrap:wrap}
  @media (max-width:760px){.dt-figs,.dt-now{grid-template-columns:1fr 1fr}}
}

/* ============================================================================================
   MODEL · fire
   Scoped to <body class="m-fire">.
   ============================================================================================ */
@keyframes fire-blink{to{visibility:hidden}}
:where(.m-fire) {
  /* Fire AI: the alarm banner, camera cards and their state, figures, hour bars */
  .fire-banner{display:flex;flex-wrap:wrap;align-items:center;gap:14px;border-inline-start:6px solid var(--ok)}
  .fire-banner h2{margin:0;font-size:18px}
  .fire-banner .grow{flex:1;min-width:220px}
  .fire-banner.alarm{border-inline-start-color:var(--danger);background:var(--danger-soft)}
  .fire-banner.alarm h2{color:var(--danger-ink)}
  .fire-banner.blind{border-inline-start-color:var(--warn)}
  .fire-banner .places{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .fire-banner .places a{text-decoration:none}
  .fc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:18px;margin-bottom:18px}
  .fc-card{margin:0;display:flex;flex-direction:column;gap:12px}
  .fc-card.fire,.fc-card.smoke{box-shadow:0 0 0 2px var(--danger) inset}
  .fc-card .fc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .fc-card .fc-head h2{margin:0;font-size:16px}
  .fc-card .fc-head .hint{display:block}
  .fire-state{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-weight:600;font-size:13px;white-space:nowrap;background:var(--neutral-soft);color:var(--muted)}
  .fire-state i{width:9px;height:9px;border-radius:50%;background:currentColor}
  .fire-state.normal{background:var(--ok-soft);color:var(--ok-ink)}
  .fire-state.fire,.fire-state.smoke{background:var(--danger);color:#fff}
  .fire-state.fire i,.fire-state.smoke i{animation:fire-blink 1s steps(2,start) infinite}
  .fire-state.offline,.fire-state.no_model{background:var(--warn-soft);color:var(--warn-ink)}
  .fc-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .fc-figs div{background:var(--panel-2);border-radius:9px;padding:7px 9px;min-width:0}
  .fc-figs b{display:block;font-size:18px;font-variant-numeric:tabular-nums;color:var(--heading)}
  .fc-figs span{color:var(--muted);font-size:11.5px}
  .fc-figs .bad b{color:var(--danger)}
  .fc-figs .warn b{color:var(--warn-ink)}
  .fc-meta{color:var(--muted);font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px 12px}
  .hours{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px;direction:ltr}
  .hours div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
  .hours i{display:block;width:100%;background:var(--primary-soft);border-radius:4px 4px 0 0;min-height:2px}
  .hours div.now i{background:var(--teal)}
  .hours div.sus i{background:var(--danger)}
  .hours span{font-size:10px;color:var(--faint);margin-top:3px}
  tr.false-alarm td{opacity:.6}
  @media (max-width:760px){.fc-figs{grid-template-columns:1fr 1fr}}
}

/* ============================================================================================
   MODEL · parking
   Scoped to <body class="m-parking">.
   ============================================================================================ */
:where(.m-parking) {
  /* Parking AI: category / status / cash badges, lot cards, hour bars */
  .badge.cat-paid{background:var(--warn-soft);color:var(--warn-ink)}
  .badge.cat-member{background:var(--ok-soft);color:var(--ok-ink)}
  .badge.cat-short{background:var(--neutral-soft);color:var(--neutral)}
  .badge.cat-valet{background:var(--primary-soft);color:var(--primary-hover)}
  .money-card.two{grid-template-columns:repeat(2,1fr)}
  .badge.st-open{background:var(--primary-soft);color:var(--primary-hover)}
  .badge.st-closed{background:var(--neutral-soft);color:var(--muted)}
  .badge.st-no_exit,.badge.st-no_entry,.badge.st-interrupted{background:var(--warn-soft);color:var(--warn-ink)}
  .badge.st-expired{background:var(--danger-soft);color:var(--danger-ink)}
  .badge.cash-ok{background:var(--ok-soft);color:var(--ok-ink)}
  .badge.cash-short{background:var(--danger-soft);color:var(--danger-ink)}
  .badge.cash-over{background:var(--warn-soft);color:var(--warn-ink)}
  .amounts{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle}
  /* the amounts taken (parking/partials/taken): coloured against what the stay owes, less / the fee / more; the pressed one filled */
  .taken{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;transition:opacity .15s}.taken .amounts{flex-wrap:nowrap}
  .taken>.badge{min-width:64px;justify-content:center;text-align:center}.taken.busy{opacity:.45;pointer-events:none}
  .taken.just .badge,.taken.just .amount.on{animation:taken-pop .45s ease-out}
  @keyframes taken-pop{0%{transform:scale(.8)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
  .amounts .amount{min-width:44px;padding:5px 12px;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .1s}
  .amounts .amount:active,.amount.member:active{transform:scale(.94)}
  .amount.member{min-width:0;padding:5px 12px;border:1.5px dashed var(--primary);border-radius:999px;background:var(--primary-soft);color:var(--primary-hover);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
  .amount.member:hover{border-style:solid}
  .amounts .amount.short{border-color:var(--danger-line);color:var(--danger-ink);background:var(--danger-soft)}
  .amounts .amount.ok{border-color:var(--ok);color:var(--ok-ink);background:var(--ok-soft)}
  .amounts .amount.over{border-color:var(--warn);color:var(--warn-ink);background:var(--warn-soft)}
  .amounts .amount:hover{filter:brightness(.96);box-shadow:0 2px 6px rgba(0,0,0,.08)}
  .amounts .amount.on{color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
  .amounts .amount.on.short{background:var(--danger);border-color:var(--danger)}.amounts .amount.on.ok{background:var(--ok);border-color:var(--ok)}.amounts .amount.on.over{background:var(--warn);border-color:var(--warn)}
  @media (prefers-reduced-motion:reduce){.taken.just .badge,.taken.just .amount.on{animation:none}}
  .badge.waived{background:var(--neutral-soft);color:var(--muted);text-decoration:line-through}
  .money{font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;unicode-bidi:embed}
  .money small{color:var(--muted);font-size:11.5px;margin-inline-start:3px}
  .lot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px;margin-bottom:18px}
  .booth-tiles{margin-bottom:18px}.booth-tiles .stat b small{font-size:16px;font-weight:600;color:var(--muted)}
  .departures tr.awaits td:first-child{box-shadow:inset 4px 0 0 var(--warn)}.departures tr.awaits{background:color-mix(in srgb,var(--warn-soft) 45%,transparent)}
  [dir=rtl] .departures tr.awaits td:first-child{box-shadow:inset -4px 0 0 var(--warn)}
  /* Cash to hand over (reports/parking/handover): one line a kind × amount, its bar out of the biggest line */
  .cash-lines{display:flex;flex-direction:column;gap:10px}
  .cash-lines .cl{display:grid;grid-template-columns:minmax(110px,max-content) 92px 1fr minmax(90px,max-content);align-items:center;gap:12px}
  .cash-lines .cl-cash{white-space:nowrap}
  .cash-lines .badge{white-space:nowrap;justify-self:start}
  .pulse .fact.money b{overflow:visible;font-size:clamp(17px,2vw,30px)}   /* a money figure: one line, smaller, never cut */
  .cash-lines .cl-what{font-variant-numeric:tabular-nums;color:var(--muted)}.cash-lines .cl-what b{color:var(--text)}
  .cash-lines .cl-bar{height:10px;border-radius:6px;background:var(--panel-2);overflow:hidden}
  .cash-lines .cl-bar i{display:block;height:100%;border-radius:6px;background:var(--ok);animation:cl-grow .8s ease-out}
  .cash-lines .cl.over .cl-bar i{background:var(--warn)}.cash-lines .cl.short .cl-bar i{background:var(--danger)}.cash-lines .cl.free .cl-bar i{background:var(--neutral)}
  .cash-lines .cl-cash{text-align:end;font-variant-numeric:tabular-nums}
  .cash-lines .cl.total{border-top:1px solid var(--line);padding-top:10px;font-weight:700}.cash-lines .cl.total .cl-cash{font-size:18px;color:var(--primary)}
  .badge.cash-free{background:var(--neutral-soft);color:var(--muted)}
  @keyframes cl-grow{from{width:0}}
  @media (max-width:640px){.cash-lines .cl{grid-template-columns:minmax(96px,max-content) 1fr 80px}.cash-lines .cl-bar{display:none}}
  .lots-row{margin-bottom:18px;align-items:stretch}.lots-row .lot-grid{margin-bottom:0}.lots-row>.card{margin-bottom:0}
  .lot-card{margin:0;display:flex;flex-direction:column;gap:10px}
  .lot-card .lc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .lot-card .lc-head h2{margin:0;font-size:16px}
  .lot-card .lc-head .hint{display:block}
  .lot-card .occ{text-align:end;line-height:1.1}
  .lot-card .occ b{font-family:var(--disp);font-size:28px;font-variant-numeric:tabular-nums;color:var(--heading)}
  .lot-card .occ span{color:var(--muted);font-size:13px}
  .occ-bar{height:8px;border-radius:999px;background:var(--neutral-soft);overflow:hidden}
  .occ-bar i{display:block;height:100%;border-radius:999px;background:var(--ok);transition:width .3s}
  .occ-bar.warn i{background:var(--warn)}.occ-bar.full i{background:var(--danger)}
  .lc-figs{display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr;gap:8px}
  .lc-figs div{background:var(--panel-2);border-radius:9px;padding:7px 9px;min-width:0}
  .lc-figs b{display:block;font-size:17px;font-variant-numeric:tabular-nums;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lc-figs b.money{overflow:visible;text-overflow:clip;direction:ltr;text-align:start;unicode-bidi:embed}
  .lc-figs span{color:var(--muted);font-size:11.5px}
  .lc-figs .paid b{color:var(--warn-ink)}.lc-figs .member b{color:var(--ok-ink)}
  .money-card{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  .money-card>div{padding:4px 18px;border-inline-start:1px solid var(--line)}
  .money-card>div:first-child{border-inline-start:0;padding-inline-start:0}
  .money-card b{display:block;font-family:var(--disp);font-size:24px;font-variant-numeric:tabular-nums;color:var(--heading);direction:ltr;text-align:start;unicode-bidi:embed}
  .money-card span{color:var(--muted);font-size:13px}
  .money-card .ok b{color:var(--ok)}.money-card .warn b{color:var(--warn-ink)}.money-card .bad b{color:var(--danger)}
  .hours{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px;direction:ltr}
  .hours div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
  .hours i{display:block;width:100%;background:var(--primary-soft);border-radius:4px 4px 0 0;min-height:2px;transition:background .15s}
  .hours div.now i{background:var(--teal)}
  .hours div:hover i{background:var(--primary)}
  .hours span{font-size:10px;color:var(--faint);margin-top:3px}
  .seg-lots{margin-bottom:16px}
  .member-state{font-size:12px}
  @media (max-width:760px){.money-card{grid-template-columns:1fr 1fr;row-gap:12px}.money-card>div:nth-child(3){border-inline-start:0;padding-inline-start:0}.lc-figs{grid-template-columns:1fr 1fr}}
  .handover-box{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start}
  .due-box{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
  .due-box .big{font-family:var(--disp);font-size:34px;font-weight:700;color:var(--heading);direction:ltr;text-align:start;unicode-bidi:embed;line-height:1.2}
  .due-box .big small{font-size:15px;color:var(--muted);font-weight:500}
  .diff-live{font-weight:600}.diff-live.ok{color:var(--ok)}.diff-live.short{color:var(--danger)}.diff-live.over{color:var(--warn-ink)}
  @media (max-width:900px){.handover-box{grid-template-columns:1fr}}
}

/* ============================================================================================
   MODEL · perimeter
   Scoped to <body class="m-perimeter">.
   ============================================================================================ */
:where(.m-perimeter) {
  /* Perimeter AI: arm bar, zone cards, zone state, figures, hour bars */
  .arm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border-inline-start:5px solid var(--faint)}
  .arm-bar.armed{border-inline-start-color:var(--danger)}
  .arm-bar.disarmed{border-inline-start-color:var(--warn)}
  .arm-bar.schedule{border-inline-start-color:var(--ok)}
  .arm-bar h2{margin:0;font-size:16px}
  .arm-bar .grow{flex:1;min-width:200px}
  .arm-bar form{display:inline}
  .arm-bar .boxes{width:100%;display:flex;flex-wrap:wrap;gap:6px}
  .pz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px;margin-bottom:18px}
  .pz-card{margin:0;display:flex;flex-direction:column;gap:12px}
  .pz-card .pz-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .pz-card .pz-head h2{margin:0;font-size:16px}
  .pz-card .pz-head .hint{display:block}
  .zone-state{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-weight:600;font-size:13px;white-space:nowrap;background:var(--neutral-soft);color:var(--muted)}
  .zone-state i{width:9px;height:9px;border-radius:50%;background:currentColor}
  .zone-state.armed{background:var(--danger-soft);color:var(--danger-ink)}
  .zone-state.off{background:var(--neutral-soft);color:var(--muted)}
  .pz-now,.pz-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .pz-now div,.pz-figs div{background:var(--panel-2);border-radius:9px;padding:7px 9px;min-width:0}
  .pz-now b,.pz-figs b{display:block;font-size:18px;font-variant-numeric:tabular-nums;color:var(--heading)}
  .pz-now span,.pz-figs span{color:var(--muted);font-size:11.5px}
  .pz-now .bad b,.pz-figs .bad b{color:var(--danger)}
  .pz-figs .warn b{color:var(--warn-ink)}
  .stat .stay{display:block;margin-top:4px;font-size:12px}
  .pz-meta{color:var(--muted);font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px 12px}
  .badge.k-{background:var(--primary-soft);color:var(--primary-hover)}
  .hours{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px;direction:ltr}
  .hours div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
  .hours i{display:block;width:100%;background:var(--primary-soft);border-radius:4px 4px 0 0;min-height:2px}
  .hours div.now i{background:var(--teal)}
  .hours div.sus i{background:var(--danger)}
  .hours span{font-size:10px;color:var(--faint);margin-top:3px}
  @media (max-width:760px){.pz-figs,.pz-now{grid-template-columns:1fr 1fr}}
}

/* ============================================================================================
   MODEL · theft
   Scoped to <body class="m-theft">.
   ============================================================================================ */
:where(.m-theft) {
  /* Theft AI: suspects still inside, camera cards, hour bars */
  .seg-cams{margin-bottom:16px}
  .inside-card{border-color:var(--danger-line)}
  .inside-card .card-head h2{color:var(--danger-ink)}
  .suspects{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:12px}
  .suspect{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:inherit}
  .suspect:hover{border-color:var(--danger-line);text-decoration:none}
  .suspect .thumb{height:72px;max-width:96px}
  .suspect b{display:block;color:var(--heading)}
  .suspect .hint{display:block;line-height:1.5}
  .cam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px;margin-bottom:18px}
  .cam-card{margin:0;display:flex;flex-direction:column;gap:10px}
  .cam-card .cc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .cam-card .cc-head h2{margin:0;font-size:16px}
  .cam-card .cc-head .hint{display:block}
  .shoppers-now{text-align:end}.shoppers-now b{display:block;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--heading)}
  .shoppers-now span{color:var(--muted);font-size:12px}
  .area-chips{display:flex;gap:6px;flex-wrap:wrap}
  .area-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:500;background:var(--neutral-soft);color:var(--muted)}
  .area-chip i{width:8px;height:8px;border-radius:50%;background:currentColor}
  .area-chip.shelf{background:var(--warn-soft);color:var(--warn-ink)}
  .area-chip.checkout{background:var(--ok-soft);color:var(--ok-ink)}
  .area-chip.exit{background:var(--danger-soft);color:var(--danger-ink)}
  .badge.k-{background:var(--primary-soft);color:var(--primary-hover)}
  .hours{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px;direction:ltr}
  .hours div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
  .hours i{display:block;width:100%;background:var(--primary-soft);border-radius:4px 4px 0 0;min-height:2px}
  .hours div.now i{background:var(--teal)}
  .hours div.sus i{background:var(--danger)}
  .hours span{font-size:10px;color:var(--faint);margin-top:3px}
  .alert-photo{display:block;width:96px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--neutral-soft)}
  .alert-photo-link{margin:0}.alert-photo-link:hover .alert-photo{border-color:var(--primary)}
  .alert-thumbs{display:flex;gap:4px;flex-wrap:wrap}
  .visit-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
  .visit-figs div{background:var(--panel-2);border-radius:9px;padding:8px 10px}
  .visit-figs b{display:block;font-size:20px;font-variant-numeric:tabular-nums;color:var(--heading)}
  .visit-figs .bad b{color:var(--danger)}
  .visit-figs span{color:var(--muted);font-size:12.5px}
  .evidence{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:14px}
  .evidence figure{margin:0}.evidence img{width:100%;border-radius:10px;border:1px solid var(--line)}
  .evidence figcaption{color:var(--muted);font-size:13px;margin-top:4px}
}

/* ============================================================================================
   MODEL · vehicles
   Scoped to <body class="m-vehicles">.
   ============================================================================================ */
:where(.m-vehicles) {
  .breakdown .card-head .hint{color:var(--muted);font-size:13px}
  .bd-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--neutral-soft);gap:2px;margin:4px 0 18px}
  .bd-bar i{display:block;height:100%}
  .bd-bar .ok,.bd-tile.ok .bd-label i{background:var(--ok)}
  .bd-bar .warn,.bd-tile.warn .bd-label i{background:var(--warn)}
  .bd-bar .bad,.bd-tile.bad .bd-label i{background:var(--danger)}
  .bd-bar .neutral,.bd-tile.neutral .bd-label i{background:var(--neutral)}
  .bd-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .bd-tile{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:10px;border:1px solid var(--line);border-inline-start-width:4px;background:var(--panel-2);color:var(--text);transition:transform .15s,box-shadow .15s}
  .bd-tile:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow)}
  .bd-tile.ok{border-inline-start-color:var(--ok);background:var(--ok-soft)}
  .bd-tile.warn{border-inline-start-color:var(--warn);background:var(--warn-soft)}
  .bd-tile.bad{border-inline-start-color:var(--danger);background:var(--danger-soft)}
  .bd-tile.neutral{border-inline-start-color:var(--neutral);background:var(--neutral-soft)}
  .bd-tile.zero{opacity:.6}
  .bd-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
  .bd-label i{width:8px;height:8px;border-radius:50%}
  .bd-tile b{font-family:var(--disp);font-size:30px;line-height:1.15;font-variant-numeric:tabular-nums}
  .bd-tile.ok b{color:var(--ok-ink)}.bd-tile.warn b{color:var(--warn-ink)}.bd-tile.bad b{color:var(--danger-ink)}.bd-tile.neutral b{color:var(--neutral)}
  .bd-sub{font-size:12.5px;color:var(--muted)}
  @media (max-width:760px){.bd-tiles{grid-template-columns:1fr 1fr}}
  /* plate training: a card a plate crop, its reading and the answers (right / the true plate / no plate) */
  .stat.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
  .plate-counts{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
  .filters .pct-input{width:120px}
  .plate-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.plate-bulk label.check{margin:0 6px 0 0}
  .plate-read input[type=checkbox],.plate-bulk input[type=checkbox]{width:24px;height:24px;cursor:pointer;flex:none}
  .plate-read label.check{margin:0;padding:4px;cursor:pointer}
  .plate-samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:14px}
  .plate-sample{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);transition:opacity .2s}
  .plate-sample.is-correct{border-color:var(--ok);background:var(--ok-soft)}
  .plate-sample.is-corrected{border-color:var(--warn);background:var(--warn-soft)}
  .plate-sample.is-unsure{border-color:var(--primary);background:var(--primary-soft)}
  .plate-sample.is-unclear{border-color:var(--line-strong);background:var(--neutral-soft);opacity:.75}
  .plate-sample.is-bad{border-color:var(--danger-line);background:var(--danger-soft);opacity:.75}
  .plate-sample.busy{opacity:.45;pointer-events:none}
  .plate-crop{display:block;line-height:0;border-radius:8px;overflow:hidden;background:#111}
  .plate-crop img{width:100%;height:72px;object-fit:contain;image-rendering:auto}
  .plate-read{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:28px}
  .plate-verdict{display:flex;gap:6px;flex-wrap:wrap}
  .plate-fix{display:flex;gap:6px}.plate-fix input{padding:4px 8px;font-size:13px;min-width:0}
}

/* ============================================================================================
   MODEL · visitors
   Scoped to <body class="m-visitors">.
   ============================================================================================ */
:where(.m-visitors) {
  /* Visitors AI: door cards, who came (bars), hour bars */
  .vz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(640px,100%),1fr));gap:18px;margin-bottom:18px}
  .vz-card{margin:0;display:flex;flex-direction:column;gap:12px}
  .vz-card .vz-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .vz-card .vz-head h2{margin:0;font-size:16px}
  .vz-card .vz-head .hint{display:block}
  .door-state{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-weight:600;font-size:13px;white-space:nowrap;background:var(--neutral-soft);color:var(--muted)}
  .door-state i{width:9px;height:9px;border-radius:50%;background:currentColor}
  .door-state.on{background:var(--ok-soft);color:var(--ok-ink)}
  .vz-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .vz-figs div{background:var(--panel-2);border-radius:9px;padding:7px 9px;min-width:0}
  .vz-figs b{display:block;font-size:18px;font-variant-numeric:tabular-nums;color:var(--heading)}
  .vz-figs span{color:var(--muted);font-size:11.5px}
  .vz-part{display:flex;align-items:center;gap:6px;margin:2px 0 -4px;font-size:12.5px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.03em}
  .vz-part svg{width:15px;height:15px}
  .vz-part.staff{color:var(--primary)}
  .vz-body{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .vz-side{display:flex;flex-direction:column;gap:12px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:14px}
  .vz-side.staff .vz-figs{grid-template-columns:1fr 1fr}
  .vz-side.staff .vz-figs div:last-child{grid-column:1/-1}
  .stat .vs{display:block;margin-top:4px;font-size:12px}
  .stat .vs.up{color:var(--ok-ink)}
  .stat .vs.down{color:var(--danger-ink)}
  .split{display:flex;flex-direction:column;gap:14px}
  .split-row .label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
  .split-row .label b{font-variant-numeric:tabular-nums}
  .split-bar .female{background:#d16ba5}
  .split-bar .male{background:#3b82c4}
  .split-bar .kid{background:#e0a030}
  .split-bar .adult{background:var(--teal)}
  .split-bar .unknown{background:var(--faint);opacity:.45}
  .hours{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px;direction:ltr}
  .hours div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
  .hours i{display:block;width:100%;background:var(--primary-soft);border-radius:4px 4px 0 0;min-height:2px}
  .hours div.now i{background:var(--teal)}
  .hours div.peak i{background:var(--primary)}
  .hours span{font-size:10px;color:var(--faint);margin-top:3px}
  .vz-who{display:inline-flex;align-items:center;gap:10px}
  .vz-face{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line)}
  .vz-face img{width:100%;height:100%;object-fit:cover}
  .vz-face.none svg{width:22px;height:22px;fill:none;stroke:var(--faint);stroke-width:1.6}
  .badge.k-staff{background:var(--primary-soft);color:var(--primary-hover)}
  @media (max-width:760px){.vz-figs{grid-template-columns:1fr 1fr}.vz-body{grid-template-columns:1fr;gap:14px}}
}
/* Attendance AI: a shift's week, one row a day */
.shift-week td{vertical-align:middle}.shift-week label{margin:0}.shift-week input[type=time]{max-width:170px}
/* Attendance AI: groups and departments, each one indented under its parent */
.tree .tree-name{display:inline-block;padding-inline-start:calc(var(--d, 0) * 22px)}
.tree tr.on td{background:var(--primary-soft)}

/* ============================================================================================
   MODEL · bus
   Scoped to <body class="m-bus">. The pulse, scorecards, advice and hour bars come from the service part above.
   ============================================================================================ */
:where(.m-bus) {
  /* Bus AI: the fleet now, the lines with their buses, the state of a bus, the load bar, the stops' pictures */
  .bus-banner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;border-inline-start:6px solid var(--teal)}
  .bus-banner.alarm{border-inline-start-color:var(--danger);background:var(--danger-soft)}
  .bb-fig b{display:block;font-size:26px;line-height:1.1;color:var(--heading);font-variant-numeric:tabular-nums}
  .bb-fig b small{font-size:14px;color:var(--muted);font-weight:600}
  .bb-fig span{color:var(--muted);font-size:12.5px}
  .bb-fig.warn b{color:var(--warn-ink)}
  .bb-alarm{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--danger-ink);width:100%}
  .line-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:18px;margin-bottom:18px}
  .line-card{margin:0;display:flex;flex-direction:column;gap:12px}
  .lc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .lc-head h2{margin:0;font-size:16px}
  .lc-head .hint{display:block}
  .lc-share{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden}
  .lc-share i{display:block;height:100%;background:var(--teal)}
  .fc-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .fc-figs div{background:var(--panel-2);border-radius:9px;padding:7px 9px;min-width:0}
  .fc-figs b{display:block;font-size:18px;font-variant-numeric:tabular-nums;color:var(--heading)}
  .fc-figs b small{font-size:11.5px;color:var(--muted);font-weight:500}
  .fc-figs span{color:var(--muted);font-size:11.5px}
  .fc-figs .bad b{color:var(--danger)}
  .fc-figs .warn b{color:var(--warn-ink)}
  .bus-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .bus-rows li{display:grid;grid-template-columns:minmax(110px,1.3fr) auto minmax(90px,1fr) minmax(90px,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
  .br-name{display:flex;flex-direction:column;color:var(--text);text-decoration:none;min-width:0}
  .br-name .hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .br-load{display:flex;align-items:center;gap:6px}
  .br-load small{font-variant-numeric:tabular-nums;color:var(--muted)}
  .load-bar{flex:1;height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden;min-width:40px}
  .load-bar i{display:block;height:100%;background:var(--teal)}
  .load-bar.full i{background:var(--danger)}
  .bus-state{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-weight:600;font-size:12px;white-space:nowrap;background:var(--neutral-soft);color:var(--muted)}
  .bus-state i{width:8px;height:8px;border-radius:50%;background:currentColor}
  .bus-state.moving{background:var(--ok-soft);color:var(--ok-ink)}
  .bus-state.stopped{background:var(--primary-soft);color:var(--primary-hover)}
  .bus-state.offline,.bus-state.no_model{background:var(--warn-soft);color:var(--warn-ink)}
  .bs-depot{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted)}
  .bs-depot span{display:inline-flex;align-items:center;gap:4px}
  .bs-depot svg{width:13px;height:13px}
  .bs-depot .late{color:var(--danger-ink);font-weight:600}
  .bs-facts{list-style:none;margin:14px 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
  .bs-facts li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
  .bs-facts li span{color:var(--muted)}
  .insights.one{grid-template-columns:1fr}
  .day-bars{display:flex;align-items:flex-end;gap:3px;height:140px;direction:ltr}
  .day-bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
  .day-bars i{display:block;width:100%;background:var(--teal);border-radius:4px 4px 0 0;opacity:.85}
  .day-bars div.low i{background:var(--warn)}
  .day-bars span{font-size:10px;color:var(--faint);margin-top:3px}
  .stop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:12px}
  .stop-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
  .stop-card.hailed{border-color:var(--ok)}
  .stop-pic{display:block;aspect-ratio:16/9;background:var(--panel-2)}
  .stop-pic img{width:100%;height:100%;object-fit:cover;display:block}
  .stop-pic.none{display:flex;align-items:center;justify-content:center;color:var(--faint)}
  .stop-body{display:flex;flex-direction:column;gap:3px;padding:9px 11px}
  .stop-figs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12.5px;font-variant-numeric:tabular-nums}
  tr.trip-low td{background:var(--warn-soft)}
  .pill.small{font-size:11px;padding:1px 7px}
  .c-ok{color:var(--ok-ink)!important}
  /* Profit & loss: the result, the lines won or lost, the smart options, profit by hour, the money form */
  .pl-hero{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:stretch;border-inline-start:8px solid var(--ok);background:linear-gradient(120deg,var(--ok-soft),var(--panel) 55%)}
  .pl-hero.lose{border-inline-start-color:var(--danger);background:linear-gradient(120deg,var(--danger-soft),var(--panel) 55%)}
  .pl-verdict{display:flex;flex-direction:column;gap:4px;min-width:230px}
  .pl-verdict b{font-size:40px;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ok-ink)}
  .pl-hero.lose .pl-verdict b{color:var(--danger-ink)}
  .pl-verdict span{color:var(--muted);font-size:13px}
  .pl-verdict em{font-style:normal;font-weight:700;font-size:13px}
  .pl-verdict em.up{color:var(--ok-ink)}.pl-verdict em.down{color:var(--danger-ink)}
  .pl-tag{display:inline-block;align-self:flex-start;padding:3px 12px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:var(--ok);color:#fff}
  .lose .pl-tag{background:var(--danger)}
  .pl-verdict .pl-tag{color:#fff;font-size:12px}
  .pl-flow{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;min-width:280px}
  .pl-flow div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
  .pl-flow span{font-size:12px;color:var(--muted)}
  .pl-flow b{font-size:19px;font-variant-numeric:tabular-nums}
  .pl-flow small{font-size:11.5px;color:var(--faint)}
  .pl-flow .in b{color:var(--ok-ink)}.pl-flow .out b{color:var(--heading)}.pl-flow .lost b{color:var(--danger-ink)}
  .pl-facts{width:100%;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
  .pl-facts .bad{color:var(--danger-ink);font-weight:600}.pl-facts .ok{color:var(--ok-ink);font-weight:600}
  .pl-facts a{margin-inline-start:auto;font-weight:700}
  .pl-chips{flex:1;display:flex;flex-wrap:wrap;gap:10px;min-width:280px}
  .pl-chip{display:flex;flex-direction:column;gap:1px;padding:10px 14px;border-radius:12px;min-width:150px;text-decoration:none;color:var(--text);border:1px solid var(--ok);background:var(--panel)}
  .pl-chip.lose{border-color:var(--danger)}
  .pl-chip span{font-weight:700}
  .pl-chip b{font-size:18px;color:var(--ok-ink);font-variant-numeric:tabular-nums}.pl-chip.lose b{color:var(--danger-ink)}
  .pl-chip small{color:var(--muted);font-size:11.5px}
  /* what happened, in plain words, beside the decisions to take */
  .decide-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start}
  .decide-grid > .card{margin:0}
  .story-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .story-list li{position:relative;padding-inline-start:20px;font-size:14.5px;line-height:1.6}
  .story-list li::before{content:"";position:absolute;inset-inline-start:2px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--faint)}
  .story-list li.ok::before{background:var(--ok)}.story-list li.warn::before{background:var(--warn)}.story-list li.bad::before{background:var(--danger)}
  .story-list li:first-child{font-weight:700;font-size:15.5px}
  .decide-list{display:flex;flex-direction:column;gap:10px}
  .decision{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:14px;
    border-inline-start:5px solid var(--warn);background:var(--panel)}
  .decision.urgent{border-inline-start-color:var(--danger)}
  .decision .dn{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;background:var(--panel-2)}
  .decision h3{margin:2px 0 4px;font-size:15.5px}
  .decision p{margin:0 0 4px;color:var(--muted);font-size:13px;line-height:1.55}
  .decision a{font-weight:700;font-size:12.5px}
  .dgain{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:130px}
  .dgain b{font-size:20px;color:var(--ok-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
  .dgain > span{color:var(--muted);font-size:11.5px}
  .dbtns{display:flex;gap:6px;margin-top:6px}
  .decided{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-strong);font-size:13px}
  .decided span{color:var(--ok-ink)}
  .lines-simple tr.lose td{background:var(--danger-soft)}
  details.more{margin:18px 0}
  details.more > summary{cursor:pointer;font-weight:700;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);list-style:none}
  details.more > summary::before{content:"▸ ";color:var(--muted)}
  details.more[open] > summary::before{content:"▾ "}
  details.more[open] > summary{margin-bottom:14px}
  @media (max-width:1100px){.decide-grid{grid-template-columns:1fr}}
  @media (max-width:560px){.decision{grid-template-columns:1fr}.decision .dn{display:none}.dgain{align-items:flex-start}}
  .pl-lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;margin-bottom:18px}
  .pl-line{margin:0;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--text);border-top:5px solid var(--ok)}
  .pl-line.lose{border-top-color:var(--danger)}
  .pl-line:hover{text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.08)}
  .pll-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .pll-head h2{margin:0;font-size:16px}
  .pll-profit{font-size:28px;color:var(--ok-ink);font-variant-numeric:tabular-nums}
  .pl-line.lose .pll-profit{color:var(--danger-ink)}
  .pll-bar{height:8px;border-radius:4px;background:var(--danger-soft);overflow:hidden}
  .pll-bar i{display:block;height:100%;background:var(--ok)}
  .pll-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .pll-figs div{background:var(--panel-2);border-radius:8px;padding:6px 8px;min-width:0}
  .pll-figs b{display:block;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pll-figs span{font-size:11px;color:var(--muted)}
  .pll-foot{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
  .pl-hours{display:flex;gap:3px;height:170px;direction:ltr}
  .pl-hours div{flex:1;display:flex;flex-direction:column;min-width:0}
  .pl-hours .up,.pl-hours .down{flex:1;display:flex;flex-direction:column}
  .pl-hours .up{justify-content:flex-end;border-bottom:1px solid var(--line-strong)}
  .pl-hours .up i{display:block;background:var(--ok);border-radius:3px 3px 0 0}
  .pl-hours .down i{display:block;background:var(--danger);border-radius:0 0 3px 3px}
  .pl-hours em{font-style:normal;font-size:10px;color:var(--faint);text-align:center;height:14px}
  .split-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--panel-2)}
  .split-bar.big{height:22px}
  .split-bar i{display:block;height:100%}
  .split-bar .fuel,.legend .fuel{background:#e0a030}.split-bar .driver,.legend .driver{background:#3b82c4}.split-bar .other,.legend .other{background:var(--faint)}
  .legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
  .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}
  .money-form{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .line-money{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
  .line-money label{font-size:12.5px}
  .fuel-eq{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px;padding:12px 14px;border-radius:12px;background:var(--panel-2)}
  .fuel-eq input{width:90px}
  .fuel-eq em{font-style:normal;color:var(--muted)}
  .fuel-eq b{color:var(--ok-ink)}
  @media (max-width:760px){.fc-figs{grid-template-columns:1fr 1fr}.bus-rows li{grid-template-columns:1fr auto}.br-load,.br-today{grid-column:1/-1}.pl-verdict b{font-size:32px}}
}
/* every module's home (views/module/home): the pages of a part, one under another */
.module-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--text);font-weight:500;text-decoration:none}.module-link:hover{background:var(--primary-soft);color:var(--primary-hover)}.module-link svg{width:18px;height:18px;color:var(--primary);flex:none}

/* ---------------------------------------------------------------- auditing: the program's checks and a procedure's workspace */
/* a procedure worked on: what to do and the evidence in the middle, the work (status, conclusion, documents) on a side that stays in view */
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.workspace-side{position:sticky;top:16px}
@media (max-width:1100px){.workspace{grid-template-columns:1fr}.workspace-side{position:static}}
.work-form{display:flex;flex-direction:column;gap:12px}.work-form label{margin:0}
/* the status as three buttons, the one picked coloured */
.segmented{display:flex;gap:4px;padding:4px;background:var(--neutral-soft);border-radius:10px}
.segmented label.seg{flex:1;display:flex;justify-content:center;align-items:center;margin:0;padding:7px 6px;border-radius:7px;cursor:pointer;font-weight:600;font-size:13px;color:var(--muted);text-align:center;transition:background .15s,color .15s}
.segmented label.seg input{position:absolute;opacity:0;pointer-events:none}
.segmented label.seg:hover{color:var(--text)}
.segmented label.seg:has(input:focus-visible){box-shadow:0 0 0 3px var(--ring)}
.segmented label.seg:has(input:checked){background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(10,50,53,.12)}
.segmented label.seg-done:has(input:checked){background:var(--ok);color:#fff}
.segmented label.seg-not_applicable:has(input:checked){background:var(--primary-soft);color:var(--primary-hover)}
/* a file field as a big area: files dropped on it or picked */
.dropzone{position:relative;border:2px dashed var(--line-strong);border-radius:var(--rc);background:var(--panel-2);padding:18px 14px;text-align:center;transition:border-color .15s,background .15s}
.dropzone label{margin:0;font-weight:600;color:var(--text)}
.dropzone label::before{content:"⇪";display:block;font-size:24px;line-height:1;color:var(--teal);margin-bottom:6px}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.dropzone .hint{display:block;font-weight:400;margin-top:4px}
.dropzone:hover,.dropzone.over{border-color:var(--teal);background:var(--primary-soft)}
.dropzone-names{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--primary-hover);word-break:break-all}
.dropzone-names:empty{display:none}
.side-head{font-size:14px;margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--line)}.side-head .count{color:var(--muted);font-weight:500}
.doc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.doc-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;align-items:center;padding:6px 10px;border-radius:var(--rt);background:var(--panel-2)}
.doc-list li a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.doc-list li .hint{grid-column:1;font-size:12px}
.doc-list li form{grid-row:1/span 2;grid-column:2}.doc-list li.hint{display:block;background:none;padding:0}
/* the plan's rows edited in place: the status picked and documents attached from the row, saved at once */
select.status-pick{width:auto;padding:3px 28px 3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;background-color:var(--neutral-soft);border-color:transparent}
select.status-pick.ok{background-color:var(--ok-soft);color:var(--ok-ink)}select.status-pick.warn{background-color:var(--warn-soft);color:var(--warn-ink)}
select.status-pick.info{background-color:var(--primary-soft);color:var(--primary-hover)}
label.attach-pick{display:inline-flex;margin:0;padding:2px 10px;border:1px dashed var(--line-strong);border-radius:999px;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
label.attach-pick:hover{border-color:var(--teal);color:var(--primary-hover);background:var(--primary-soft)}
label.attach-pick input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.doc-count{min-width:14px;text-align:center}
/* a procedure's questions: edited as rows on its form, answered one under the other in its workspace (a red flag marked) */
.question-list{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.question-row{border:1px solid var(--line);border-radius:var(--rt);padding:10px 14px;margin:0;background:var(--panel-2)}
.question-place{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--primary-soft);color:var(--primary-hover);font-size:13px}
.answers{display:flex;flex-direction:column;gap:14px}
.answer{padding-inline-start:12px;border-inline-start:3px solid var(--line)}.answer label{margin:0}
.answer.flagged{border-inline-start-color:var(--danger)}
.answer-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.answer .segmented{max-width:360px}
.segmented label.seg-no:has(input:checked){background:var(--warn);color:#fff}.segmented label.seg-yes:has(input:checked){background:var(--ok);color:#fff}
[data-show-when][hidden]{display:none!important}
.answer-comment{margin:0 0 8px;padding:6px 10px;border-radius:var(--rt);background:var(--warn-soft);color:var(--warn-ink);font-size:13px}
/* the client's answers reviewed: returned with what is missing, written in the row */
.return-form input{width:180px;padding:3px 8px;font-size:12.5px}
/* a procedure's sample: each item tested in its row */
.sample-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.sample-form label{margin:0}
.sample-form input:not([type=file]){width:130px;padding:3px 8px;font-size:12.5px}
tr.row-bad td{background:var(--danger-soft)}
/* a confirmation's link in its row, its party's contact written under it */
.link-field{width:170px;padding:3px 8px;font-size:12px}
tr.sub-row td{padding-top:0;border-top:0}
/* charts drawn on the server (components/chart/series): the series' colours in turn, the scale, bars and lines */
.cs1{--c:var(--primary)}.cs2{--c:var(--warn)}.cs3{--c:#3b82c4}.cs4{--c:var(--danger)}.cs5{--c:#6b5fd3}.cs6{--c:var(--neutral)}
.chart{margin:0}.chart svg{width:100%;height:auto;display:block}.chart figcaption{margin:0 0 4px}
.chart rect,.chart circle{fill:var(--c)}.chart polyline{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linejoin:round}
.chart-grid{stroke:var(--line);stroke-width:1}.chart-zero{stroke:var(--line-strong);stroke-width:1.5}
.chart-tick{font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}.legend i[class^="cs"]{background:var(--c)}
/* a map of bubbles (x-chart.bubbles): four quarters, the best one green and the worst one red; each bubble in its tone */
.bubble circle{fill:color-mix(in srgb,var(--c) 28%,transparent);stroke:var(--c);stroke-width:1.5}
.bubble text{font-size:11.5px;font-weight:600;fill:var(--text)}
.bubble.tone-ok{--c:var(--ok)}.bubble.tone-warn{--c:var(--warn)}.bubble.tone-bad{--c:var(--danger)}.bubble.tone-none{--c:var(--neutral)}
.bubble-quarter{fill:var(--neutral-soft);opacity:.6}.bubble-quarter.q-top-end{fill:var(--ok-soft)}.bubble-quarter.q-bottom-start{fill:var(--danger-soft)}
.bubble-quarter-name{font-size:11.5px;font-weight:600;fill:var(--muted)}.chart-axis{font-size:11.5px;fill:var(--muted)}
/* drag and drop (layouts/app: data-drag, data-drop): what is dragged fades, where it would land lights */
[data-drag]{cursor:grab}[data-drag].dragging{opacity:.4}
[data-drop].drop-over{outline:2px dashed var(--teal);outline-offset:3px}
/* the financial analysis: the signs' ticks, the lines' depth */
.checklist .tick.tone-bad{background:var(--danger-soft);color:var(--danger)}.checklist .tick.tone-warn{background:var(--warn-soft);color:var(--warn-ink)}
/* the financial analysis (audit/balance_sheets/analysis): the hero with its headline figures, the findings, DuPont */
.an-hero{position:relative;overflow:hidden;border-radius:20px;padding:22px 24px;margin-bottom:18px;color:#e8f6f4;
  background:radial-gradient(120% 140% at 100% 0,rgba(45,212,191,.28),transparent 55%),linear-gradient(135deg,var(--brand-dark),var(--brand-dark-2))}
.an-hero h2{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,246,244,.7)}
.an-hero-top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.an-hero-top p{margin:4px 0 0;font-size:22px;font-weight:800;color:#fff;line-height:1.3}
.an-verdict{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-weight:700;font-size:13.5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.an-verdict i{width:10px;height:10px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399}
.an-verdict.tone-warn i{background:#f5c26b;box-shadow:0 0 10px #f5c26b}.an-verdict.tone-bad i{background:#ff8a7a;box-shadow:0 0 10px #ff8a7a}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px}
.kpi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;min-width:0}
.kpi span{display:block;font-size:12px;color:rgba(232,246,244,.68)}
.kpi b{display:block;font-size:21px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0}
.kpi em{font-style:normal;font-size:12px;font-weight:700;color:rgba(232,246,244,.6)}.kpi em.tone-ok{color:#6ee7b7}.kpi em.tone-bad{color:#ffa69b}
.kpi .spark{width:100%;height:34px;margin-top:6px}
a.kpi{display:block;color:inherit;text-decoration:none;transition:background .15s}a.kpi:hover{background:rgba(255,255,255,.13)}.kpi.tone-bad b{color:#ffa69b}.kpi.tone-warn b{color:#f5c26b}
.an-hero .spark-line{stroke:#5eead4}.an-hero .spark-area{fill:rgba(94,234,212,.14)}.an-hero .spark-last{fill:var(--brand-dark);stroke:#5eead4}
.spark.tone-bad .spark-line{stroke:#ffa69b}.spark.tone-bad .spark-last{stroke:#ffa69b}.spark.tone-bad .spark-area{fill:rgba(255,166,155,.14)}
.findings{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:14px}
.finding{--c:var(--neutral);--cs:var(--panel-2);position:relative;display:flex;flex-direction:column;gap:8px;padding:14px 16px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.finding::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--c)}
.finding.tone-bad{--c:var(--danger);--cs:var(--danger-soft)}.finding.tone-warn{--c:var(--warn);--cs:var(--warn-soft)}.finding.tone-info{--c:#3b82c4;--cs:#e6f0fa}.finding.tone-ok{--c:var(--ok);--cs:var(--ok-soft)}
.finding h3{margin:0;font-size:15px;color:var(--heading)}.finding p{margin:0;line-height:1.55}
.finding .do{padding:8px 10px;border-radius:10px;background:var(--cs);color:var(--heading);font-size:13.5px;line-height:1.5}
.finding .do b{color:var(--c)}
.finding .tags{display:flex;flex-wrap:wrap;gap:6px}.finding .tags span{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.practice{display:grid;gap:10px}.practice div{padding:10px 12px;border-radius:12px;background:var(--panel-2)}
.practice b{display:block;color:var(--heading)}.practice .bars{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;margin-top:8px;font-size:12.5px;color:var(--muted)}
.dupont{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
.dupont > div{flex:1 1 120px;padding:12px;border-radius:12px;background:var(--panel-2);text-align:center;min-width:0}
.dupont > div.result{background:var(--primary-soft)}
.dupont > i{align-self:center;font-style:normal;font-size:22px;font-weight:300;color:var(--faint)}
.dupont span{display:block;font-size:12px;color:var(--muted)}.dupont b{display:block;font-size:20px;color:var(--heading);font-variant-numeric:tabular-nums;margin:2px 0}
.dupont em{font-style:normal;font-size:12px;color:var(--faint)}
/* the charts of the analysis: waterfall, gauge, a value among the office's clients, bars split in their parts */
.chart rect.wf-total{fill:var(--primary)}.chart rect.wf-loss{fill:var(--danger)}.chart rect.wf-up{fill:#3b82c4}.chart rect.wf-down{fill:var(--warn)}
.z-parts{display:grid;grid-template-columns:1fr auto auto;gap:6px 10px;align-items:center;margin:12px 0;font-size:13px}
.z-parts em{font-style:normal;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--panel-2);color:var(--muted)}
.wf-link{stroke:var(--line-strong);stroke-dasharray:3 3}.wf-value{font-size:11px;font-weight:700;fill:var(--heading);font-variant-numeric:tabular-nums}
.gauge{text-align:center}.gauge svg{max-width:280px;margin:0 auto}
.gauge-arc{fill:none;stroke-width:18}.gauge-arc.tone-ok{stroke:var(--ok)}.gauge-arc.tone-warn{stroke:var(--warn)}.gauge-arc.tone-bad{stroke:var(--danger)}
.gauge-needle{stroke:var(--heading);stroke-width:3;stroke-linecap:round}.gauge-hub{fill:var(--heading)}.gauge-end{font-size:11px;fill:var(--muted)}
.gauge-value b{display:block;font-size:30px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}.gauge-value span{display:block;margin-top:4px;font-weight:700}
.gauge-value.tone-ok{color:var(--ok)}.gauge-value.tone-warn{color:var(--warn-ink)}.gauge-value.tone-bad{color:var(--danger)}
.range-bar{position:relative;height:22px;min-width:140px}
.range-bar i,.range-bar b{position:absolute;top:50%;transform:translateY(-50%)}
.range-outer{height:8px;border-radius:4px;background:var(--primary-soft)}.range-inner{height:8px;background:var(--primary-line)}
.range-median{width:2px;height:16px;background:var(--primary)}
.range-marker{width:14px;height:14px;margin-inline-start:-7px;border-radius:50%;background:var(--ok);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line-strong)}
.range-bar.band-low .range-marker,.range-bar.band-high .range-marker{background:var(--warn)}.range-bar.band-far_low .range-marker,.range-bar.band-far_high .range-marker{background:var(--danger)}
.stack{display:grid;gap:10px}.stack-row{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center}
.stack-label{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.stack-bar{height:26px;border-radius:8px}.stack-bar i{display:flex;align-items:center;justify-content:center;background:var(--c);color:#fff;font-size:11px;font-weight:700;font-style:normal;overflow:hidden}
.analysis-table td.depth-1{padding-inline-start:24px}.analysis-table td.depth-2{padding-inline-start:40px}.analysis-table td.depth-3{padding-inline-start:56px}
/* before the partner signs: the opinion the file supports, why, and what is still open */
.opinion-big{font-size:26px;font-weight:700;color:var(--brand-dark-2);margin:4px 0 8px}
.reasons{margin:0 0 10px;padding-inline-start:18px}.reasons li{margin:4px 0}
.checklist li .btn{margin-inline-start:auto}.checklist li.done .tick{background:var(--ok-soft);color:var(--ok)}
.checklist li:not(.done) .tick{background:var(--warn-soft);color:var(--warn-ink)}
tr.total-row td{border-top:2px solid var(--line-strong)}
.btn.copied{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok-ink)}
/* every check a tile, coloured by what it found; the one picked outlined */
.group-head{font-size:13px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;margin:6px 0 10px}
.check-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.check-tile{border-inline-start:4px solid var(--neutral);padding:14px 16px;transition:transform .15s,box-shadow .15s}
.check-tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(10,50,53,.08)}
.check-tile.ok{border-inline-start-color:var(--ok)}.check-tile.warn{border-inline-start-color:var(--warn)}.check-tile.bad{border-inline-start-color:var(--danger);background:var(--danger-soft)}
.check-tile.none b{color:var(--faint)}.check-tile span{color:var(--text);font-size:13px}.check-tile .hint{color:var(--muted);font-size:12px}
.check-tile.on{outline:2px solid var(--teal);outline-offset:2px}
/* a check's evidence: a coloured edge, what it says, its figures, and every column of a line in the file */
.evidence{border-top:4px solid var(--neutral)}.evidence.tone-ok{border-top-color:var(--ok)}.evidence.tone-warn{border-top-color:var(--warn)}.evidence.tone-bad{border-top-color:var(--danger)}
.evidence-says{color:var(--muted)}
.raw-row{margin-top:4px}.raw-row summary{cursor:pointer;font-size:12px;color:var(--primary)}
.raw-row dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px 14px;margin:6px 0 0;padding:8px 10px;background:var(--panel-2);border-radius:var(--rt)}
.raw-row dt{font-size:11.5px;color:var(--muted)}.raw-row dd{margin:0;font-size:12.5px;word-break:break-word}
.card.notice{background:var(--primary-soft);border-color:var(--primary-line)}
/* the draft financial statements, as they are printed: headings, lines (each opening on its accounts), subtotals, totals */
.statement-head{text-align:center;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.statement-head b{display:block;font-family:var(--disp);font-size:15px}.statement-head h2{margin:2px 0;padding:0!important;font-size:17px}.statement-head span{color:var(--muted);font-size:13px}
.statement td{border-bottom:0;padding-top:5px;padding-bottom:5px}
.statement tr.st-heading td{font-weight:700;color:var(--heading);padding-top:14px}
.statement tr.st-subtotal td{font-weight:600;border-top:1px solid var(--line)}
.statement tr.st-total td{font-weight:700;border-top:1px solid var(--line-strong)}
.statement tr.st-grand td{font-weight:700;font-size:15px;border-top:1px solid var(--text);border-bottom:3px double var(--text);background:var(--panel-2)}
.statement tr.st-depth-1 td:first-child{padding-inline-start:36px}.statement tr.st-depth-2 td:first-child{padding-inline-start:56px}.statement tr.st-depth-3 td:first-child{padding-inline-start:76px}
.st-line summary{cursor:pointer;list-style:none}.st-line summary::-webkit-details-marker{display:none}
.st-line summary:hover{color:var(--primary)}.st-line[open] summary{font-weight:600}
.st-line dl{margin:6px 0 4px;padding:8px 12px;background:var(--panel-2);border-radius:var(--rt);display:flex;flex-direction:column;gap:2px}
.st-line dl div{display:flex;justify-content:space-between;gap:16px;font-size:12.5px}.st-line dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
/* the statements' editor (audit/balance_sheets/editor): the rows typed over and dragged, the sheet as printed beside them */
.ed-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.ed-side{display:flex;flex-direction:column;gap:18px}.ed-side>*{margin:0}
@media (max-width:1100px){.ed-grid{grid-template-columns:1fr}}
.ed-bar{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;position:sticky;top:0;background:var(--panel);z-index:2}.ed-bar p{margin:0}
.ed-table td{vertical-align:top}.ed-table .ed-num{width:44px;color:var(--muted);font-size:11.5px}
.ed-handle{width:18px;color:var(--muted);user-select:none}.ed-handle[draggable]{cursor:grab}
.ed-table td:nth-child(3){width:100%;min-width:160px}.ed-table td:last-child{width:1%}
.ed-table input.ed-label{width:100%;min-width:0;border:1px solid transparent;background:transparent;padding:3px 6px;border-radius:6px;font:inherit;color:inherit;box-shadow:none}
.ed-table input.ed-label:hover{border-color:var(--line)}.ed-table input.ed-label:focus{border-color:var(--primary);background:var(--panel)}
.ed-row[data-changed] input.ed-label{background:var(--warn-soft)}
.ed-table input.ed-formula{width:100%;margin-top:4px;border:1px dashed var(--line-strong);border-radius:6px;padding:3px 6px;font-size:12.5px}.ed-table input.ed-formula.bad{border-color:var(--danger)}
.ed-blank{display:none}
.ed-row[data-kind="blank"] .ed-blank{display:inline}.ed-row[data-kind="blank"] .ed-label{display:none}
.ed-row:not([data-kind="sum"]) .ed-formula{display:none}
.ed-row:not([data-kind="group"]) .ed-ungroup,.ed-row:not([data-kind]) .ed-del,.ed-row[data-kind=""] .ed-del,.ed-row[data-kind="group"] .ed-del{display:none}
.ed-row[data-hidden]{opacity:.45}.ed-row[data-hidden] .ed-label{text-decoration:line-through}
.ed-member{opacity:.6}.ed-member td:nth-child(3){padding-inline-start:28px}.ed-member .ed-tools{visibility:hidden}
.ed-row.dragging{opacity:.35}.ed-row.drop-before td{box-shadow:inset 0 2px 0 var(--primary)}.ed-row.drop-after td{box-shadow:inset 0 -2px 0 var(--primary)}
.ed-row.drop-line td{background:var(--primary-soft)}
.ed-lock{font-size:10px;opacity:.55}
.ed-tools{display:flex;gap:6px;align-items:center;justify-content:flex-end;white-space:nowrap}.ed-tools select{width:auto;min-width:0;padding:2px 6px;font-size:12px}.ed-tools label{font-size:12px;margin:0;gap:4px}
.ed-accounts summary{cursor:pointer;font-size:12px;padding-inline-start:6px}
.ed-chips{display:flex;flex-wrap:wrap;gap:4px;padding:6px}
.ed-account{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:12px;background:var(--panel-2);cursor:grab}
.ed-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ed-names-only .ed-tools,.ed-names-only .ed-handle{visibility:hidden}
.ed-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
/* Nexia AI's assistant beside the draft (components/assistant): a side panel that leaves the sheets in view; the microphone pulses while it listens */
.assistant{position:fixed;inset-block:0;inset-inline-end:0;z-index:20;width:min(420px,100vw);display:flex;flex-direction:column;background:var(--panel);border-inline-start:1px solid var(--line);box-shadow:0 0 30px rgba(10,50,53,.2);font-size:14px}
.assistant[hidden]{display:none}
body.assistant-open .doc-pages{margin-inline-end:min(420px,100vw)}
.assistant-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(150deg,#0d3f42,#0a3235);color:#e8fffb}
.assistant-head b{font-size:16px}.assistant-sub{flex:1;min-width:0;font-size:12px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.assistant-close,.assistant-tool{border:0;background:none;color:inherit;font-size:16px;cursor:pointer;padding:4px 6px;display:grid;place-items:center}.assistant-tool svg{width:18px;height:18px}
.assistant-list{max-height:45%;overflow-y:auto;border-bottom:1px solid var(--line);background:var(--panel)}.assistant-list[hidden]{display:none}
.assistant-list-head{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;font-weight:600}.assistant-list-head span{flex:1}
.assistant-item{display:flex;align-items:center;gap:6px;padding-inline:14px 8px;border-top:1px solid var(--line)}.assistant-item:hover,.assistant-item.on{background:var(--primary-soft)}
.assistant-pick{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;font-size:13px;text-align:start;padding:8px 0;cursor:pointer}.assistant-pick small{display:block;opacity:.65}
.assistant-mini{border:0;background:none;color:inherit;opacity:.65;cursor:pointer;font:inherit;font-size:13px;padding:4px 6px}.assistant-mini:hover{opacity:1}.assistant-mini.on{color:#e5484d;opacity:1}
.assistant-star{border:0;background:none;color:inherit;opacity:.75;cursor:pointer;font-size:13px;padding-inline-start:8px;float:inline-end}.assistant-star.on{color:#ffd166;opacity:1}
.assistant-samples{padding:10px 14px;border-top:1px solid var(--line);background:var(--panel);max-height:45%;overflow-y:auto}.assistant-samples[hidden]{display:none}
.assistant-samples-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;font-weight:600}.assistant-samples-head span{flex:1}
.assistant-chips{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.assistant-row{display:flex;align-items:center;gap:6px;width:100%}.assistant-row input{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:8px;padding:6px 8px;font:inherit;font-size:13px;background:var(--panel);color:inherit}
.assistant-talk{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.assistant-welcome{margin:0;line-height:1.6}
.assistant-example{border:1px dashed var(--line);background:var(--panel);color:inherit;border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;cursor:pointer;text-align:start}
.assistant-example:hover{border-color:var(--primary);border-style:solid}
.assistant-msg{max-width:88%;padding:9px 12px;border-radius:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.assistant-msg.question{align-self:flex-end;background:#0d3f42;color:#fff}
.assistant-msg.answer{align-self:flex-start;background:var(--panel);border:1px solid var(--line)}
.assistant-msg.note{align-self:center;background:#fff6db;color:#7a5b00;font-size:13px}
.assistant-msg.thinking{align-self:flex-start;background:none;opacity:.7;animation:assistant-pulse 1.4s ease-in-out infinite}
.assistant-change{align-self:stretch;background:var(--panel);border:1px solid var(--primary-line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;line-height:1.6}
.assistant-change p{margin:0;padding:6px 8px;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.assistant-change .was{background:#fdecec;color:#8b2b2b;text-decoration:line-through}.assistant-change .now{background:var(--primary-soft)}
.assistant-change-do{display:flex;align-items:center;gap:8px}.assistant-example.primary{background:#0d3f42;color:#fff;border-style:solid;border-color:#0d3f42}.assistant-done{font-size:13px;color:var(--primary);font-weight:600}
.assistant-walk{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 10px;border-top:1px solid var(--line);background:var(--panel);font-size:13px}.assistant-walk[hidden]{display:none}
.pagedjs_page .assistant-pointed,#pages .assistant-pointed{outline:2px solid var(--primary);outline-offset:2px;background:var(--primary-soft)}
.assistant-first{padding:8px 10px;border-top:1px solid var(--line);background:var(--panel)}
.assistant-mini.on{color:var(--primary);opacity:1;font-weight:600}.assistant-talk[hidden]{display:none}
body.accounts-open .doc-pages,body.accounts-open .doc-edit{display:none}
.assistant-sheet{box-sizing:border-box;width:210mm;max-width:calc(100% - min(420px,100vw) - 32px);margin:18px auto;margin-inline-end:calc(min(420px,100vw) + 16px);padding:0 16mm 16mm;background:#fff;color:#000;box-shadow:0 2px 12px rgba(0,0,0,.12);font-family:var(--doc-font);font-size:11pt}.assistant-sheet[hidden]{display:none}
.assistant-sheet-head{position:sticky;top:50px;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 -16mm 10px;padding:8px 16mm;background:var(--panel);border-bottom:1px solid var(--line);font-family:var(--font,inherit)}.assistant-sheet-head [hidden]{display:none}
.assistant-sheet-head input{flex:1;min-width:140px;border:1px solid var(--line-strong);border-radius:8px;padding:5px 8px;font:inherit;font-size:13px;background:var(--panel);color:inherit}
.assistant-sheet table{width:100%}.assistant-sheet td{padding:3px 6px}.assistant-sheet tr.over td{background:var(--primary-soft);outline:1px dashed var(--primary)}
.assistant-sheet tr.assistant-account td{font-size:9.5pt;color:#333;background:#f6f8f8;cursor:grab;direction:ltr;text-align:start}.assistant-sheet tr.assistant-account td:first-child{padding-inline-start:26px;unicode-bidi:plaintext}.assistant-sheet tr.assistant-account:hover td{background:var(--primary-soft)}
.assistant-chosen{display:flex;align-items:center;gap:6px;padding:6px 12px;border-top:1px solid var(--line);background:var(--primary-soft);font-size:13px}.assistant-chosen[hidden]{display:none}.assistant-chosen span{flex:1;min-width:0}
::highlight(assistant-chosen){background:#bfe4de}
.assistant-say{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--panel)}
.assistant-say label{flex:1;margin:0}.assistant-input{width:100%;resize:none;min-height:40px;max-height:120px}
.assistant-round{width:40px;height:40px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:#0d3f42;color:#fff}.assistant-round svg{width:18px;height:18px}
.assistant-round:disabled{opacity:.5;cursor:default}
.assistant-mic{background:var(--primary)}.assistant-mic.on{background:#e5484d;animation:assistant-ring 1.2s infinite}
@keyframes assistant-pulse{50%{opacity:.35}}
@keyframes assistant-ring{to{box-shadow:0 0 0 12px rgba(229,72,77,0)}from{box-shadow:0 0 0 0 rgba(229,72,77,.5)}}
@media (prefers-reduced-motion:reduce){.assistant-msg.thinking,.assistant-mic.on{animation:none}}

/* Nexia AI at work (components/nexia): its steps appear one after another, then what it saved; none of it moves for whom asks for less motion */
.nexia{position:relative;margin:0 0 18px;padding:18px 20px;border-radius:16px;color:#e8fffb;overflow:hidden;box-shadow:0 10px 30px rgba(10,50,53,.25);
  background:radial-gradient(ellipse 60% 120% at 100% 0%,rgba(45,212,191,.3),transparent 60%),radial-gradient(ellipse 45% 110% at 0% 100%,rgba(20,184,166,.18),transparent 65%),linear-gradient(150deg,var(--brand-dark-2),var(--brand-dark))}
.nexia-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.nexia-head b{font-size:16px;letter-spacing:.3px}
.nexia-sub{color:rgba(232,255,251,.75);font-size:13px}
.nexia-orb{flex:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--teal-bright) 45%,var(--teal) 72%);animation:nexia-pulse 1.4s ease-out 4}
.nexia-steps{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.nexia-steps li{display:flex;gap:8px;align-items:flex-start;opacity:0;transform:translateY(6px);animation:nexia-step .45s ease-out forwards}
.nexia-steps li svg{flex:none;width:18px;height:18px;stroke:var(--teal-bright)}
.nexia-steps li:nth-child(2){animation-delay:.5s}.nexia-steps li:nth-child(3){animation-delay:1s}.nexia-steps li:nth-child(4){animation-delay:1.5s}
.nexia-steps li:nth-child(5){animation-delay:2s}.nexia-steps li:nth-child(6){animation-delay:2.5s}.nexia-steps li:nth-child(7){animation-delay:3s}.nexia-steps li:nth-child(n+8){animation-delay:3.5s}
.nexia-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.09);font-weight:600;opacity:0;animation:nexia-step .5s ease-out 3.4s forwards}
.nexia-summary svg{flex:none;width:18px;height:18px;stroke:var(--teal-bright)}.nexia a{color:var(--teal-bright);font-weight:600}
@keyframes nexia-step{to{opacity:1;transform:none}}
@keyframes nexia-pulse{0%{box-shadow:0 0 0 0 rgba(45,212,191,.6)}100%{box-shadow:0 0 0 14px rgba(45,212,191,0)}}
@media (prefers-reduced-motion:reduce){.nexia-steps li,.nexia-summary{animation:none;opacity:1;transform:none}.nexia-orb{animation:none}}
/* ---------------------------------------------------------------- a printable document (layouts/document): A4 sheets paged by Paged.js */
/* ============================================================================================
   PAGE · company-group
   The group files: their cards, the group tree (an org chart drawn with borders: a line down from a company, across
   its subsidiaries, down to each), the customers' drawer it is dragged from, the ranking.
   ============================================================================================ */
:where(.page-company-group) .group-files{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
:where(.page-company-group) .group-file{display:flex;flex-direction:column;gap:12px}
:where(.page-company-group) .group-file-head{display:flex;gap:12px;align-items:center}
:where(.page-company-group) .group-file-head h2,:where(.page-company-group) .group-file-head p{margin:0}
:where(.page-company-group) .group-file-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--primary-soft);color:var(--primary)}
:where(.page-company-group) .group-file-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:24px}
:where(.page-company-group) .group-file-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto}
:where(.page-company-group) .inline-edit>summary{list-style:none}
:where(.page-company-group) .inline-edit[open]>form{margin-top:10px}
:where(.page-company-group) .org-board{display:grid;gap:18px}
:where(.page-company-group) .org-board.with-drawer{grid-template-columns:minmax(0,1fr) 260px}
:where(.page-company-group) .org-stage{overflow-x:auto;padding:14px 4px 18px;background:radial-gradient(circle,var(--line) 1px,transparent 1px) 0 0/18px 18px;border-radius:14px}
:where(.page-company-group) .org-tree,:where(.page-company-group) .org-children{display:flex;justify-content:center;margin:0;padding:0;list-style:none}
:where(.page-company-group) .org-children{position:relative;padding-top:22px}
:where(.page-company-group) .org-children::before{content:'';position:absolute;top:0;inset-inline-start:50%;height:22px;border-inline-start:1.5px solid var(--line-strong)}
:where(.page-company-group) .org-node{display:flex;flex-direction:column;align-items:center;position:relative;padding:22px 8px 0}
:where(.page-company-group) .org-tree>.org-node{padding-top:0}
:where(.page-company-group) .org-children>.org-node::before{content:'';position:absolute;top:0;inset-inline-start:50%;height:22px;border-inline-start:1.5px solid var(--line-strong)}
:where(.page-company-group) .org-children>.org-node::after{content:'';position:absolute;top:0;inset-inline:0;border-top:1.5px solid var(--line-strong)}
:where(.page-company-group) .org-children>.org-node:first-child::after{inset-inline-start:50%}
:where(.page-company-group) .org-children>.org-node:last-child::after{inset-inline-end:50%}
:where(.page-company-group) .org-children>.org-node:only-child::after{display:none}
:where(.page-company-group) .org-card{width:212px;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--neutral);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
:where(.page-company-group) .org-card:hover{box-shadow:0 8px 24px rgba(10,50,53,.12)}
:where(.page-company-group) .org-card.tone-ok{border-top-color:var(--ok)}
:where(.page-company-group) .org-card.tone-warn{border-top-color:var(--warn)}
:where(.page-company-group) .org-card.tone-bad{border-top-color:var(--danger)}
:where(.page-company-group) .org-card.is-parent{background:var(--brand-dark-2);border-color:var(--brand-dark-2);color:#e8f6f4}
:where(.page-company-group) .org-card.is-parent .hint,:where(.page-company-group) .org-card.is-parent .org-card-figures{color:rgba(232,246,244,.7)}
:where(.page-company-group) .org-card.is-parent .org-card-figures b,:where(.page-company-group) .org-card.is-parent .org-card-top b{color:#fff}
:where(.page-company-group) .org-card.is-parent .org-card-link{color:var(--teal-bright)}
:where(.page-company-group) .org-card.drop-over{transform:scale(1.04)}
:where(.page-company-group) .org-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;line-height:1.4}
:where(.page-company-group) .org-score{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:12px;font-weight:700;background:var(--neutral-soft);color:var(--neutral)}
:where(.page-company-group) .org-score.tone-ok{background:var(--ok-soft);color:var(--ok-ink)}
:where(.page-company-group) .org-score.tone-warn{background:var(--warn-soft);color:var(--warn-ink)}
:where(.page-company-group) .org-score.tone-bad{background:var(--danger-soft);color:var(--danger-ink)}
:where(.page-company-group) .org-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
:where(.page-company-group) .org-card-figures{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:11.5px;color:var(--muted)}
:where(.page-company-group) .org-card-figures b{display:block;font-size:13.5px;color:var(--heading);font-variant-numeric:tabular-nums}
:where(.page-company-group) .org-card-link{display:block;margin-top:6px;font-size:12px}
:where(.page-company-group) .org-card-edit{margin-top:6px;font-size:12.5px}
:where(.page-company-group) .org-card-edit>summary{cursor:pointer;color:var(--muted)}
:where(.page-company-group) .org-card-edit form{display:grid;gap:6px;margin:6px 0}
:where(.page-company-group) .org-card.is-parent .org-card-edit[open]{background:var(--panel);color:var(--text);border-radius:10px;padding:6px}
:where(.page-company-group) .org-drawer{align-self:start;position:sticky;top:76px;max-height:560px;overflow:auto;padding:14px;border:1.5px dashed var(--line-strong);border-radius:14px;background:var(--panel-2)}
:where(.page-company-group) .org-drawer h3{margin:0 0 8px;font-size:14px}
:where(.page-company-group) .org-drawer.drop-over{border-color:var(--danger);background:var(--danger-soft);outline:none}
:where(.page-company-group) .org-chips{display:flex;flex-wrap:wrap;gap:6px}
:where(.page-company-group) .org-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:12.5px;user-select:none;transition:border-color .15s,box-shadow .15s}
:where(.page-company-group) .org-chip:hover{border-color:var(--teal);box-shadow:0 2px 8px rgba(20,184,166,.18)}
:where(.page-company-group) .hint-light{font-size:13px;color:rgba(232,246,244,.7)}
:where(.page-company-group) .league-rank{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-weight:700;font-size:12px;background:var(--neutral-soft);color:var(--neutral)}
:where(.page-company-group) .league-rank.r1{background:#f5c542;color:#5c4300}
:where(.page-company-group) .league-rank.r2{background:#d5dbe0;color:#3b4650}
:where(.page-company-group) .league-rank.r3{background:#e0a57a;color:#5a2d0c}
:where(.page-company-group) tr.league-first td{background:var(--ok-soft)}
:where(.page-company-group) .league-score{position:relative;width:110px;height:20px;border-radius:999px;background:var(--neutral-soft);overflow:hidden}
:where(.page-company-group) .league-score i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--neutral);border-radius:999px}
:where(.page-company-group) .league-score.tone-ok i{background:var(--ok)}
:where(.page-company-group) .league-score.tone-warn i{background:var(--warn)}
:where(.page-company-group) .league-score.tone-bad i{background:var(--danger)}
:where(.page-company-group) .league-score b{position:relative;display:block;text-align:center;font-size:11.5px;line-height:20px;color:var(--heading)}
@media (max-width:900px){:where(.page-company-group) .org-board.with-drawer{grid-template-columns:1fr}:where(.page-company-group) .org-drawer{position:static}}
@media print{:where(.page-company-group) .org-drawer,:where(.page-company-group) .org-card-edit,:where(.page-company-group) .inline-edit{display:none!important}:where(.page-company-group) .org-board.with-drawer{grid-template-columns:1fr}}

/* the consolidation: the eliminations as small journal entries, the auditor's own entry's lines, the worksheet's rows */
:where(.page-company-group) .entry-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr))}
:where(.page-company-group) .entry{border:1px solid var(--line);border-inline-start:4px solid var(--primary);border-radius:12px;padding:12px 14px;background:var(--panel)}
:where(.page-company-group) .entry.kind-investment{border-inline-start-color:#6b5fd3}
:where(.page-company-group) .entry.kind-nci_profit{border-inline-start-color:var(--warn)}
:where(.page-company-group) .entry.kind-manual{border-inline-start-color:var(--neutral)}
:where(.page-company-group) .entry-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
:where(.page-company-group) .entry-head h3{margin:4px 0 0;font-size:13.5px}
:where(.page-company-group) .entry-who{display:block}
:where(.page-company-group) .entry-new>summary{list-style:none;display:inline-flex}
:where(.page-company-group) .entry-line{display:grid;grid-template-columns:minmax(0,2fr) 1fr 1fr auto;gap:8px;align-items:end;margin-top:8px}
:where(.page-company-group) .stock-form{padding-block:14px 18px;align-items:end}
:where(.page-company-group) .worksheet td.depth-1{padding-inline-start:28px}
:where(.page-company-group) .worksheet td.depth-2{padding-inline-start:44px}
:where(.page-company-group) .worksheet tr.ws-heading td{font-weight:700;color:var(--heading);background:var(--panel-2)}
:where(.page-company-group) .worksheet tr.ws-total td{font-weight:700;border-top:1.5px solid var(--line-strong)}
:where(.page-company-group) .worksheet tr.ws-grand td{font-weight:800;color:var(--heading);border-top:2px solid var(--heading);background:var(--primary-soft)}
:where(.page-company-group) .worksheet tr.ws-split td{color:var(--muted);font-style:italic}
:where(.page-company-group) .worksheet td.ws-elim{color:var(--danger-ink);background:color-mix(in srgb,var(--danger-soft) 45%,transparent)}
:where(.page-company-group) .worksheet td.ws-cons{font-weight:700;background:color-mix(in srgb,var(--ok-soft) 55%,transparent)}
@media (max-width:700px){:where(.page-company-group) .entry-line{grid-template-columns:1fr 1fr}}

/* @document: from here to @end-document is also handed to Paged.js (layouts/document), which reads its @page rules */
/* each part starts a sheet; the header (.doc-running) and the number (.doc-number) are put on every sheet, in its margins */
@page{size:A4}
/* Paged.js finds where a sheet overflows by the columns it lays the text in, left to right: in an Arabic document the
   sheets are laid out left to right and the text in them right to left, or the text never overflows and the pages never end */
.pagedjs_pages,.pagedjs_page,.pagedjs_sheet,.pagedjs_pagebox,.pagedjs_area,.pagedjs_page_content{direction:ltr}
.doc-part[dir=rtl],.doc-part[dir=rtl] *,.doc-running [dir=rtl],.doc-running [dir=rtl] *{direction:rtl}
.doc-part[dir=ltr],.doc-part[dir=ltr] *,.doc-running [dir=ltr],.doc-running [dir=ltr] *{direction:ltr}
@page doc{size:A4;margin:50mm 21mm 22mm}
/* the office's printed look, as its signed statements are set (docs/office-knowledge.md): one font, one place */
body.document{--doc-font:"Simplified Arabic","Amiri","Times New Roman",serif}
.doc-part,.doc-part h2,.doc-part h3,.doc-part h4,.doc-running,.doc-running h2,.doc-number,.doc-foot,.doc-editor{font-family:var(--doc-font)}
.doc-part{page:doc;break-before:page;font-size:11pt;line-height:1.65;color:#000}
.doc-start{height:1px}
body.document{background:#e9eeed}
.doc-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.doc-bar-title{flex:1;font-family:var(--disp)}
.doc-edit{max-width:210mm;margin:16px auto}.doc-edit summary{cursor:pointer;display:flex;gap:10px;align-items:center}
body.document>.flash{max-width:210mm;margin:12px auto 0}
.doc-pages{padding:20px 0}
.doc-pages .pagedjs_page{background:#fff;margin:0 auto 18px;box-shadow:0 2px 10px rgba(10,50,53,.15)}
.doc-pages .pagedjs_sheet{position:relative}
.doc-pages.flat .doc-part{background:#fff;max-width:210mm;margin:0 auto 18px;padding:20mm 21mm}
.doc-running{position:absolute;top:7mm;left:21mm;right:21mm}
.doc-head{display:flex;flex-direction:column;padding-bottom:1mm;border-bottom:.5pt solid #000;font-size:12pt;line-height:1.65;color:#000}
.doc-head b{font-size:12pt}.doc-head h2{margin:2mm 0 0;font-size:12pt;font-weight:700;color:#000}.doc-head .doc-date{font-weight:700}.doc-head .doc-cont{font-weight:400}
.doc-letterhead{border-bottom:0;align-items:flex-end}.doc-letterhead b{font-family:var(--disp);font-size:18px;color:var(--brand-dark)}
.doc-number{position:absolute;bottom:9mm;left:0;right:0;text-align:center;font-size:11pt}
.doc-title{text-align:center;text-decoration:underline;font-size:12pt;font-weight:700;color:#000;margin:0 0 12mm}
.doc-index-head{display:flex;justify-content:space-between;margin:0 0 5mm}
.doc-index{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.2mm}
.doc-index li{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.doc-index a{color:#000;text-decoration:none}.doc-index span{min-width:44px;text-align:end;font-variant-numeric:tabular-nums}
/* a statement: its rows flush with the margin and close, the lines only under the figures, this year's in bold */
.doc-part .statement{font-size:.955em}.doc-part .statement table{font-size:1em}
.doc-part .statement thead th{background:none;color:#000;font-weight:400;border-bottom:.5pt solid #000;font-size:1em}.doc-part .statement thead th:first-child{border-bottom:0}
.doc-part .statement th,.doc-part .statement td{padding:0 .6em}
.doc-part .statement tr td:first-child{padding-inline-start:.6em}
.doc-part .statement table:not(.matrix) td.num,.doc-part .statement table:not(.matrix) th.num{width:30mm;font-weight:400}
.doc-part .statement tr.st-heading td{padding-top:0;color:#000}
.doc-part .statement tr.st-subtotal td,.doc-part .statement tr.st-total td,.doc-part .statement tr.st-grand td{border:0;background:none;font-size:1em;font-weight:700}
.doc-part .statement tr.st-subtotal td.num{border-block:.5pt solid #000}
.doc-part .statement tr.st-total td.num,.doc-part .statement tr.st-grand td.num{border-top:.5pt solid #000;border-bottom:3px double #000}
.doc-part .statement table:not(.matrix) tr td.st-now,.doc-part .statement table:not(.matrix) tr th.st-now{font-weight:700}
/* the mapping's sheets: a long list on the fewest sheets, a row never cut */
.doc-part .statement table.mapping-sheet{width:100%;font-size:.9em}.mapping-sheet tr{break-inside:avoid}
/* a part kept on one sheet (layouts/document) is measured in a box of the sheet's writing area: A4 less its margins */
.doc-fit{position:absolute;visibility:hidden;inset-inline-start:-9999px;top:0;width:168mm;height:225mm}.doc-fit .doc-part{break-before:auto}.doc-fit .doc-foot{display:none}
/* at the sheet's foot, above its number (layouts/document moves it there) */
.doc-foot{margin-top:22px;text-align:center;font-size:10pt}
.doc-pages .pagedjs_sheet>.doc-foot{position:absolute;bottom:15mm;left:21mm;right:21mm;margin:0}
.doc-todo{margin-top:40mm;text-align:center;color:#888;border:1px dashed #bbb;border-radius:8px;padding:24px}
/* the note column, the statement of changes in equity's columns */
.statement th.st-note,.statement td.st-note{width:56px;text-align:center;color:#333}
/* the client's own rows of a statement (Layout): words, a blank row, a row adding others */
.statement tr.st-text td{font-style:italic;color:#444}.statement tr.st-blank td{height:14px;border:0}
.statement tr.st-sum td{font-weight:600;border-top:1px dotted #999}
.statement table.matrix th,.statement table.matrix td{font-size:11.5px}.doc-part .statement table.matrix th,.doc-part .statement table.matrix td{font-size:.92em}.statement table.matrix td:first-child{min-width:150px}
.doc-note-year{margin:10px 0 2px}
/* the notes on their sheets: a numbered title, the text, a line's table; the tables a text may hold (the standards) */
.doc-note-title{font-size:12pt;margin:18px 0 6px;color:#000}
.doc-notes .statement{margin:4px 0 8px}.doc-note-table td:first-child{width:60%}
/* a table on a sheet never scrolls: a scrolling box cannot be split, so Paged.js leaves an empty sheet before a long one */
.doc-part .table-wrap{overflow:visible}
.doc-report table{width:100%;border-collapse:collapse;margin:6px 0 10px;font-size:10pt}
.doc-report th,.doc-report td{border-bottom:1px solid #ccc;padding:4px 6px;text-align:start;vertical-align:top}
.note-edit{border-top:1px solid var(--line);padding:10px 0}.note-edit>summary{cursor:pointer;display:flex;gap:8px;align-items:center}
.note-edit .note-edit{margin-inline-start:18px}
/* the auditor's report on its sheet, and the same text being written above the sheets */
.doc-report{font-size:11pt;line-height:1.65;color:#000}
.doc-report h3{font-size:11pt;margin:16px 0 6px;color:#000}.doc-report h4,.doc-section-title{font-size:11pt;margin:12px 0 4px;color:#000}
.doc-report p{text-align:justify;margin:0 0 8px}.doc-report ul{margin:0 0 8px;padding-inline-start:22px}.doc-report li{text-align:justify;margin-bottom:4px}
.doc-report .doc-center{text-align:center}.doc-report .doc-sign{margin-top:26px;text-align:start}
.doc-editor{background:#fff;width:168mm;max-width:100%;min-height:120mm;margin:12px auto 0;padding:12mm 14mm;border:1px solid var(--line);border-radius:var(--rt);outline:none}
.doc-editor:focus{box-shadow:0 0 0 3px var(--ring)}
.doc-editor .doc-field{background:#fff1c2;border-radius:3px;padding:0 3px;cursor:default}
/* the edit mode (?edit=1): each text typed into where it stands on its sheet, outlined; an empty one says where it would go; a changed one marked */
.doc-editable{outline:1px dashed #9fd9cf;outline-offset:4px;border-radius:2px;min-height:1.8em;margin-bottom:6px}
.doc-editable:hover{outline-color:#2dd4bf}.doc-editable:focus{outline:2px solid #14b8a6;background:#f6fffd}
.doc-editable:empty::before{content:attr(data-placeholder);color:#8a9a98;font-style:italic}
.doc-editable[data-changed]{outline-color:#f59e0b;background:#fffbeb}
.doc-editable .doc-field{background:#fff1c2;border-radius:3px;padding:0 3px;cursor:default}
.doc-toolbar{position:sticky;top:56px;z-index:3;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--rt)}
.doc-toolbar label{margin:0}
/* @end-document */
/* printing the document: outside the part Paged.js reads, which would apply it to the sheets on the screen too (the bar
   and the editing cards hidden, the sheets drawn as on paper). Paged.js prints the body one sheet high: left a scrolling
   box (html,body's overflow-x makes it one), the sheets after the first are cut off and only the first comes out. And it
   adds its copy of the document part after this file, so the screen's values win unless these are !important: the
   screen's padding and margins push each sheet off its paper and leave blank pages */
@media print{
  body.document{background:#fff!important;overflow:visible}
  .doc-bar,.doc-edit,.assistant,body.document>.flash{display:none!important}
  .assistant-pointed{outline:0!important;background:none!important}
  body.assistant-open .doc-pages{margin-inline-end:0!important}
  .doc-pages{padding:0!important}.doc-pages .pagedjs_page{margin:0!important;box-shadow:none!important}
}
