/* بوابة إدراك — styles. No external fonts or scripts: the portal holds sensitive data. */
/* IBM Plex Sans Arabic (SIL Open Font License 1.1, public/fonts/ibm-plex-sans-arabic/OFL.txt),
   served from the portal itself. The 700 file also stands in for 800. */
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic/arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic/latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic/arabic-500.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic/latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic/arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic/latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:700 900;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic/arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:700 900;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic/latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --ground:#f4f6ef; --surface:#ffffff; --sunk:#eef1e7; --ink:#172012; --muted:#5f6a55; --line:#e1e6d6; --line-strong:#cfd6c2;
  --brand:#3d5a24; --brand-2:#6c9a3a; --brand-ink:#ffffff; --brand-soft:#e8f0da; --brand-glow:rgba(76,120,42,.28);
  --gold:#a8822f; --gold-soft:#f7efdc;
  --ok:#23784a; --ok-soft:#dff2e6; --warn:#a4640c; --warn-soft:#fbedd5; --bad:#b4372a; --bad-soft:#fbe2de;
  --info:#2a5f91; --info-soft:#e1ecf8;
  --accent:#2e7d4f; --hero-a:#2c4a19; --hero-b:#4f7f2b; --hero-c:#7aa646;
  --shadow-sm:0 1px 2px rgba(23,32,18,.05);
  --shadow:0 1px 2px rgba(23,32,18,.04),0 6px 20px -6px rgba(23,32,18,.10);
  --shadow-lg:0 2px 4px rgba(23,32,18,.04),0 18px 40px -12px rgba(23,32,18,.22);
  --radius:18px; --radius-sm:12px;
  --ease:cubic-bezier(.2,.75,.25,1);
  --font:"Plex Arabic","Dubai","SF Arabic","Segoe UI Variable Text","Segoe UI","Noto Sans Arabic","IBM Plex Sans Arabic",Tahoma,system-ui,sans-serif;
  --side-w:272px;
}
body[data-system="care"]{--accent:#1f7a6a; --hero-a:#24451a; --hero-b:#2f6b3a; --hero-c:#1f8a78}
body[data-system="my"]{--accent:#b9781c; --hero-a:#33491c; --hero-b:#6a6a22; --hero-c:#c08a2a}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --ground:#0f140c; --surface:#171e13; --sunk:#1f2819; --ink:#e9eee1; --muted:#a2ad95; --line:#2a3423; --line-strong:#38452e;
    --brand:#9cc46a; --brand-2:#bfe08a; --brand-ink:#10160c; --brand-soft:#243318; --brand-glow:rgba(156,196,106,.25);
    --gold:#d6b46e; --gold-soft:#2f2818;
    --ok:#6ccb92; --ok-soft:#173022; --warn:#eaa94c; --warn-soft:#352812; --bad:#f08374; --bad-soft:#3a1c18;
    --info:#8bbbe6; --info-soft:#18283a;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px -8px rgba(0,0,0,.5);
    --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 22px 44px -14px rgba(0,0,0,.6);
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  background:
    radial-gradient(1200px 520px at 100% -10%,color-mix(in srgb,var(--brand-2) 14%,transparent),transparent 60%),
    radial-gradient(900px 480px at -10% 110%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%),
    var(--ground);
  background-attachment:fixed;
  color:var(--ink);font-family:var(--font);font-size:15.5px;line-height:1.7;direction:rtl;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.3;margin:0;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:1.65rem;font-weight:800} h2{font-size:1.05rem;font-weight:700} h3{font-size:.98rem;font-weight:700}
p{margin:0}
a{color:var(--brand);text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
::selection{background:var(--brand-soft)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:.85rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.ic{width:20px;height:20px;flex:0 0 auto}

/* ---------- Shell: side menu + content ---------- */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.side{
  position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:18px;
  padding:20px 14px;background:color-mix(in srgb,var(--surface) 82%,transparent);
  border-inline-end:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:40;
}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;padding:4px 8px}
.mark-logo{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:1.05rem;letter-spacing:-.02em;color:#fff;flex:0 0 auto;
  background:linear-gradient(135deg,var(--hero-a),var(--hero-c));box-shadow:0 8px 18px -8px var(--brand-glow),inset 0 1px 0 rgba(255,255,255,.25);
}
.mark b{display:block;font-size:1.05rem;font-weight:800}
.mark>span>span{font-size:.75rem;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav a{
  position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  color:var(--muted);text-decoration:none;font-weight:600;font-size:.93rem;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.nav a:hover{background:var(--sunk);color:var(--ink)}
.nav a:active{transform:scale(.98)}
.nav a[aria-current="page"]{background:var(--brand-soft);color:var(--brand)}
.nav a[aria-current="page"]::before{
  content:"";position:absolute;inset-inline-start:-8px;top:10px;bottom:10px;width:4px;border-radius:4px;border-start-end-radius:4px;border-end-end-radius:4px;
  background:linear-gradient(var(--brand-2),var(--accent));
}
.nav-group{margin:14px 12px 4px;font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.side-switch{
  display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;text-decoration:none;font-weight:700;font-size:.9rem;
  color:var(--ink);background:var(--sunk);border:1px dashed var(--line-strong);transition:all .2s var(--ease);
}
.side-switch:hover{border-style:solid;border-color:var(--brand);color:var(--brand)}
.scrim{position:fixed;inset:0;background:rgba(10,14,8,.45);backdrop-filter:blur(2px);z-index:35;animation:fade .2s ease}

.content{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:12px 28px;
  background:color-mix(in srgb,var(--ground) 72%,transparent);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.topbar-title{flex:1;font-weight:700;color:var(--muted);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{
  position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;transition:all .2s var(--ease);box-shadow:var(--shadow-sm);
}
.icon-btn:hover{border-color:var(--line-strong);transform:translateY(-1px);box-shadow:var(--shadow)}
.icon-btn[aria-current="page"]{color:var(--brand);border-color:var(--brand)}
.menu-btn{display:none}
.bell .count{position:absolute;top:-6px;inset-inline-end:-6px;margin:0;animation:pop .4s var(--ease)}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font-size:.7rem;font-weight:700;margin-inline-start:6px;box-shadow:0 0 0 2px var(--surface)}
.userchip{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.avatar-sm{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;color:#fff;background:linear-gradient(135deg,var(--hero-b),var(--hero-c))}
.userchip-name{font-size:.86rem;font-weight:600;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

main.wrap{width:100%;max-width:1180px;margin:0 auto;padding:24px 28px 72px;display:flex;flex-direction:column;gap:20px}

/* Entrance: page blocks rise in one after another */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-18px,10px) scale(1.06)}}
main.wrap>*{animation:rise .55s var(--ease) both}
main.wrap>*:nth-child(2){animation-delay:.05s} main.wrap>*:nth-child(3){animation-delay:.1s}
main.wrap>*:nth-child(4){animation-delay:.15s} main.wrap>*:nth-child(5){animation-delay:.2s}
main.wrap>*:nth-child(6){animation-delay:.25s} main.wrap>*:nth-child(n+7){animation-delay:.3s}
.grid>*{animation:rise .55s var(--ease) both}
.grid>*:nth-child(2){animation-delay:.07s} .grid>*:nth-child(3){animation-delay:.14s} .grid>*:nth-child(n+4){animation-delay:.2s}

/* ---------- Page head and hero ---------- */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pagehead p{color:var(--muted);font-size:.93rem;margin-top:4px}
.pagehead.hero{
  position:relative;overflow:hidden;isolation:isolate;align-items:center;padding:30px;border-radius:24px;color:#fff;
  background:linear-gradient(125deg,var(--hero-a) 0%,var(--hero-b) 55%,var(--hero-c) 100%);box-shadow:var(--shadow-lg);
}
.pagehead.hero::before,.pagehead.hero::after{content:"";position:absolute;border-radius:50%;z-index:-1;pointer-events:none}
.pagehead.hero::before{width:340px;height:340px;inset-inline-end:-90px;top:-170px;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);animation:drift 14s ease-in-out infinite}
.pagehead.hero::after{width:260px;height:260px;inset-inline-start:12%;bottom:-170px;background:radial-gradient(circle,rgba(255,230,160,.25),transparent 65%);animation:drift 18s ease-in-out infinite reverse}
.pagehead.hero h1{font-size:1.9rem}
.pagehead.hero p{color:rgba(255,255,255,.82)}
.hero-chip .muted,.hero-chip span{color:inherit}
.hero-chip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);font-size:.82rem;font-weight:600}
.pagehead.hero .btn.primary{background:#fff;color:var(--hero-a);box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.pagehead.hero .btn.primary:hover{background:#f5f8ef}

/* ---------- Panels, lists ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 18px 12px}
.panel-h+.panel-b{border-top:1px solid var(--line)}
.panel-b{padding:16px 18px}
.list{list-style:none;margin:0;padding:4px 8px 8px}
.row{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:12px;flex-wrap:wrap;transition:background .2s var(--ease)}
.row+.row{box-shadow:0 -1px 0 var(--line)}
a.row{color:inherit;text-decoration:none}
a.row:hover,li.row:hover{background:var(--sunk);box-shadow:none}
a.row:hover+.row,li.row:hover+.row{box-shadow:none}
.row .main{flex:1;min-width:180px}
.row .t{font-weight:700}
.row .t a{text-decoration:none;color:inherit} .row .t a:hover{color:var(--brand)}
.row .s{font-size:.82rem;color:var(--muted)}
.stripe{width:4px;align-self:stretch;border-radius:4px;background:var(--line-strong)}
.stripe.bad{background:var(--bad)} .stripe.warn{background:var(--warn)} .stripe.ok{background:var(--ok)} .stripe.info{background:var(--info)}
.empty{padding:28px 14px;text-align:center;color:var(--muted);list-style:none}

/* ---------- Pills, buttons ---------- */
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 11px;font-size:.76rem;font-weight:700;white-space:nowrap;background:var(--sunk);color:var(--muted)}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.info{background:var(--info-soft);color:var(--info)}
.pill.brand{background:var(--brand-soft);color:var(--brand)}

.btn{
  border:1px solid transparent;border-radius:12px;padding:9px 16px;cursor:pointer;font-weight:700;font-size:.9rem;
  display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none;background:none;line-height:1.4;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--brand-ink);box-shadow:0 8px 18px -8px var(--brand-glow),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.primary:hover{box-shadow:0 12px 24px -10px var(--brand-glow),inset 0 1px 0 rgba(255,255,255,.2);filter:saturate(1.1)}
.btn.secondary{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn.secondary:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.btn.danger{background:var(--bad-soft);color:var(--bad)}
.btn.ok{background:var(--ok-soft);color:var(--ok)}
.btn.sm{padding:5px 12px;font-size:.82rem;border-radius:10px}
.btn.link{padding:0;color:var(--brand);box-shadow:none}
.btn.link:hover{transform:none;text-decoration:underline}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline{display:inline}

/* ---------- Progress segments ---------- */
.seg{display:flex;gap:3px;min-width:80px}
.seg i{flex:1;height:7px;border-radius:99px;background:var(--line)}
.seg i.on{background:linear-gradient(90deg,var(--brand-2),var(--brand))}
.seg.done i.on{background:var(--ok)}
.segwrap{min-width:84px;text-align:center}

/* ---------- Tabs (segmented) ---------- */
.tabs{display:flex;gap:4px;padding:5px;border-radius:16px;background:var(--sunk);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;padding:8px 14px;border-radius:11px;color:var(--muted);font-weight:700;font-size:.9rem;text-decoration:none;transition:all .2s var(--ease)}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-selected="true"]{color:var(--brand);background:var(--surface);box-shadow:var(--shadow)}

/* ---------- Beneficiary file ---------- */
.filehead{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:20px}
.avatar{width:56px;height:56px;border-radius:18px;color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.35rem;flex:0 0 auto;background:linear-gradient(135deg,var(--hero-b),var(--hero-c));box-shadow:0 10px 20px -10px var(--brand-glow)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kv>div{padding:12px 14px;border-radius:14px;background:var(--sunk);transition:transform .2s var(--ease)}
.kv>div:hover{transform:translateY(-2px)}
.kv span{display:block;font-size:.76rem;color:var(--muted);font-weight:600}
.kv b{font-weight:800;font-size:1.05rem}
.kv.stats b{font-size:1.6rem;line-height:1.3;background:linear-gradient(135deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.intake{padding:16px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;background:var(--sunk);border-radius:0 0 var(--radius) var(--radius)}
.elements{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.el{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 13px;transition:all .2s var(--ease)}
.el:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.el .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;flex:0 0 auto;background:var(--line);color:var(--muted)}
.el.done .dot{background:linear-gradient(135deg,var(--ok),#3aa66a);color:#fff;box-shadow:0 4px 10px -4px var(--ok)}
.el .main{flex:1}

.timeline{list-style:none;margin:0;padding:4px 18px}
.timeline li{display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line);position:relative}
.timeline li:last-child{border-bottom:0}
.tl-ic{min-width:46px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:.72rem;font-weight:800;background:var(--sunk);color:var(--muted);padding:0 8px}
.tl-ic.session{background:var(--brand-soft);color:var(--brand)}
.tl-ic.call{background:var(--ok-soft);color:var(--ok)}
.tl-ic.activity{background:var(--info-soft);color:var(--info)}
.tl-ic.service{background:var(--warn-soft);color:var(--warn)}
.dap{display:grid;gap:6px;margin-top:6px;font-size:.92rem}
.dap b{color:var(--muted);font-weight:700;font-size:.8rem;display:block}

/* ---------- Forms ---------- */
form.f{display:flex;flex-direction:column;gap:18px}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0;display:flex;flex-direction:column;gap:14px;background:var(--surface);box-shadow:var(--shadow-sm)}
legend{font-weight:800;padding:2px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:.9rem}
label.lbl,.lbl{font-weight:700;font-size:.88rem;display:block;margin-bottom:6px}
.req{color:var(--bad)}
.hint{font-size:.8rem;color:var(--muted);margin-top:4px}
input[type=text],input[type=tel],input[type=password],input[type=email],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=search],input[type=file],select,textarea{
  width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--radius-sm);padding:10px 13px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:17px;height:17px}
textarea{min-height:100px;resize:vertical}
.field-error{color:var(--bad);font-size:.82rem;margin-top:5px;font-weight:600}
.has-error input,.has-error select,.has-error textarea{border-color:var(--bad);box-shadow:0 0 0 4px var(--bad-soft)}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;width:100%;height:100%}
.choice span{display:inline-block;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.86rem;font-weight:600;background:var(--surface);transition:all .18s var(--ease)}
.choice:hover span{border-color:var(--line-strong);transform:translateY(-1px)}
.choice input:checked+span{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--brand-ink);border-color:transparent;box-shadow:0 6px 14px -8px var(--brand-glow)}
.choice input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.q{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.q:last-child{border-bottom:0}
@media (max-width:620px){.q{grid-template-columns:1fr}}
.score{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--sunk)}
.score b{font-size:1.5rem}

/* ---------- Alerts, notes ---------- */
.alert{border-radius:14px;padding:12px 16px;display:flex;gap:12px;align-items:center;font-size:.93rem;flex-wrap:wrap;border:1px solid transparent;border-inline-start-width:4px}
.alert b{display:block}
.alert.bad{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 25%,transparent);border-inline-start-color:var(--bad)}
.alert.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent);border-inline-start-color:var(--warn)}
.alert.info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 25%,transparent);border-inline-start-color:var(--info)}
.alert.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent);border-inline-start-color:var(--ok)}
.note{border-inline-start:4px solid var(--gold);background:var(--gold-soft);padding:10px 14px;border-radius:12px;font-size:.88rem}
.demo-strip{position:sticky;top:0;z-index:60;background:var(--gold);color:#1f1f1f;text-align:center;padding:6px 12px;font-size:.85rem;font-weight:600}

/* ---------- Tables ---------- */
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem}
table.t th{text-align:right;font-weight:700;color:var(--muted);font-size:.78rem;padding:10px 12px;background:var(--sunk);white-space:nowrap}
table.t th:first-child{border-start-start-radius:12px;border-end-start-radius:12px}
table.t th:last-child{border-start-end-radius:12px;border-end-end-radius:12px}
table.t td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tbody tr{transition:background .15s var(--ease)}
table.t tbody tr:hover{background:color-mix(in srgb,var(--sunk) 60%,transparent)}
table.t tbody tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto}
.code-tag{font-family:ui-monospace,Consolas,monospace;font-size:.78rem;color:var(--muted);direction:ltr;display:inline-block}
details>summary{cursor:pointer;font-weight:700}
.pagination{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pagination a,.pagination span{padding:6px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;font-size:.85rem;background:var(--surface)}
.pagination a:hover{border-color:var(--brand)}

/* ---------- System choice ---------- */
.systems{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
a.system-card{
  --card-a:var(--hero-a); --card-b:var(--hero-c);
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:26px;color:inherit;text-decoration:none;border-radius:24px;
}
a.system-card[data-card="care"]{--card-a:#24451a;--card-b:#1f8a78}
a.system-card[data-card="my"]{--card-a:#4a5a1c;--card-b:#c08a2a}
a.system-card[data-card="admin"]{--card-a:#3b4250;--card-b:#6b7790}
a.system-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--card-a),var(--card-b))}
a.system-card::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;inset-inline-start:-80px;bottom:-110px;background:radial-gradient(circle,color-mix(in srgb,var(--card-b) 22%,transparent),transparent 70%);transition:transform .5s var(--ease);pointer-events:none}
a.system-card:hover,a.system-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--card-b) 45%,var(--line))}
a.system-card:hover::after{transform:scale(1.35)}
.system-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--card-a),var(--card-b));box-shadow:0 12px 22px -12px var(--card-b)}
.system-icon .ic{width:26px;height:26px}
a.system-card h2{font-size:1.35rem;font-weight:800}
a.system-card p{margin:0;color:var(--muted);flex:1}
.system-go{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--card-a)}
.system-go .ic{transition:transform .25s var(--ease)}
a.system-card:hover .system-go .ic{transform:translateX(-5px)}
.system-badge{position:absolute;top:24px;inset-inline-end:24px}
@media (prefers-color-scheme: dark){.system-go{color:var(--card-b)}}

/* ---------- Sign-in and public pages ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.auth-brand{
  position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:44px;color:#fff;
  background:linear-gradient(140deg,#20391a 0%,#3d6a2a 45%,#1f7a6a 100%);
}
.auth-brand::before,.auth-brand::after{content:"";position:absolute;border-radius:50%;z-index:-1}
.auth-brand::before{width:520px;height:520px;top:-180px;inset-inline-start:-160px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%);animation:drift 16s ease-in-out infinite}
.auth-brand::after{width:420px;height:420px;bottom:-200px;inset-inline-end:-120px;background:radial-gradient(circle,rgba(255,214,140,.22),transparent 65%);animation:drift 20s ease-in-out infinite reverse}
.auth-brand .mark{padding:0}
.auth-brand .mark-logo{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)}
.auth-brand .mark>span>span{color:rgba(255,255,255,.75)}
.auth-kicker{font-size:2.3rem;font-weight:800;line-height:1.25;text-wrap:balance}
.auth-lead{margin-top:12px;font-size:1.05rem;color:rgba(255,255,255,.85);max-width:30ch}
.auth-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.auth-points li{display:flex;align-items:center;gap:10px;font-size:.92rem;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.auth-card{align-self:center;justify-self:center;width:calc(100% - 32px);max-width:440px;margin:40px 16px;border-radius:24px;box-shadow:var(--shadow-lg);animation:rise .6s var(--ease) both}
.auth-card .panel-b{padding:30px}
.auth-card h1{font-size:1.5rem}
.auth-card .btn.primary{padding:12px 18px;font-size:1rem}

/* ---------- Narrow screens ---------- */
@media (max-width:960px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:min(300px,86vw);height:100dvh;transform:translateX(105%);transition:transform .32s var(--ease);box-shadow:var(--shadow-lg);background:var(--surface)}
  body.side-open .side{transform:none}
  .menu-btn{display:inline-grid}
  .topbar{padding:10px 16px}
  .userchip-name{display:none}
  .userchip{padding:4px}
  main.wrap{padding:18px 16px 64px}
  .pagehead.hero{padding:22px 20px;border-radius:20px}
  .pagehead.hero h1{font-size:1.45rem}
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-brand{padding:26px 20px 48px;gap:14px}
  .auth-kicker{font-size:1.5rem}
  .auth-lead{font-size:.95rem}
  .auth-points{display:none}
  .auth-card{margin:-28px auto 32px;position:relative}
}
@media (max-width:420px){.auth-card .panel-b{padding:22px}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  .side,.topbar,.scrim,.no-print{display:none!important}
  .shell{display:block}
  body{background:#fff}
  .panel{box-shadow:none}
  main.wrap>*{animation:none}
}

/* ---------- Logo and signature ---------- */
.mark-img{width:46px;height:auto;flex:0 0 auto;transition:transform .4s var(--ease)}
.mark:hover .mark-img{transform:rotate(-6deg) scale(1.05)}
.auth-brand .mark-img{width:60px;filter:brightness(0) invert(1)}
@media (prefers-color-scheme: dark){.side .mark-img{background:#f4f6ef;border-radius:12px;padding:4px}}
a.userchip{color:inherit;text-decoration:none;transition:border-color .2s var(--ease)}
a.userchip:hover{border-color:var(--brand)}
.sig-pad{width:100%;height:auto;aspect-ratio:900/320;border:2px dashed var(--line-strong);border-radius:16px;background:#fff;touch-action:none;cursor:crosshair}
.sig-pad:hover{border-color:var(--brand)}
.sig-preview{display:grid;place-items:center;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.sig-preview img{max-width:100%;max-height:140px}

/* ---------- Stage tracker (where a document or request stands) ---------- */
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 45%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.track{list-style:none;margin:0;padding:18px 14px 20px;display:flex;overflow-x:auto;scrollbar-width:thin}
.track .stage{position:relative;flex:1 1 0;min-width:140px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 6px}
.track .stage::before{content:"";position:absolute;top:17px;inset-inline-start:50%;width:100%;height:3px;border-radius:3px;background:var(--line)}
.track .stage:last-child::before{display:none}
.track .stage.done::before{background:linear-gradient(90deg,var(--ok),var(--brand-2))}
.stage-dot{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;background:var(--surface);border:2px solid var(--line-strong);color:var(--muted)}
.stage-dot svg{width:18px;height:18px}
.stage.done .stage-dot{background:linear-gradient(135deg,var(--ok),#3aa66a);border-color:transparent;color:#fff}
.stage.current .stage-dot{background:var(--warn-soft);border-color:var(--warn);color:var(--warn);animation:pulse 1.8s infinite}
.stage.rejected .stage-dot{background:var(--bad);border-color:transparent;color:#fff}
.stage.skipped{opacity:.5}
.stage-text{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.84rem}
.stage-text b{font-size:.9rem}
.stage-text>span{color:var(--muted)}
.stage.current .stage-text b{color:var(--warn)}
.stage-at{font-size:.76rem}
.stage-note{margin-top:4px;padding:4px 10px;border-radius:10px;background:var(--bad-soft);color:var(--bad)!important;font-size:.78rem}
.where{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--warn);font-weight:700}
.where::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1.8s infinite}
.where.final{color:var(--ok)} .where.final::before{animation:none}
@media (max-width:700px){
  .track{flex-direction:column;gap:0;padding:14px 18px}
  .track .stage{flex-direction:row;align-items:flex-start;text-align:start;min-width:0;padding:0 0 18px}
  .track .stage::before{top:36px;inset-inline-start:17px;width:3px;height:calc(100% - 36px)}
  .stage-text{align-items:flex-start}
}

/* ---------- Forwarding chain ---------- */
.route-tree{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.route-tree .route-tree{margin-top:10px;padding-inline-start:22px;border-inline-start:2px dashed var(--line-strong)}
.route-card{padding:12px 14px;border-radius:14px;background:var(--sunk);border:1px solid var(--line);transition:border-color .2s var(--ease)}
.route-card:hover{border-color:var(--line-strong)}
.route-hop.overdue>.route-card{border-color:var(--bad);background:var(--bad-soft)}
.route-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.route-who{display:inline-flex;align-items:center;gap:6px;margin-inline-end:auto}
.route-meta{font-size:.78rem;color:var(--muted);margin-top:4px}
.route-text{margin-top:6px;font-size:.9rem}
.route-text span{color:var(--muted);font-weight:700}
.route-text.answer{padding:8px 10px;border-radius:10px;background:var(--surface);border-inline-start:3px solid var(--ok)}
.my-hop{border-bottom:1px solid var(--line)}
details.forward>summary{list-style:none;display:inline-flex}
details.forward>summary::-webkit-details-marker{display:none}
.nav a .count{margin-inline-start:auto}

/* ---------- Correspondence boxes ---------- */
.alert.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent);border-inline-start-color:var(--ok)}
.alert>div{flex:1;min-width:0}
.count.calm{background:var(--sunk);color:var(--ink);box-shadow:0 0 0 1px var(--line-strong)}
.tabs.boxes a{display:inline-flex;align-items:center;gap:2px}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.box-tiles{margin-bottom:16px}
.box-tile{display:flex;flex-direction:column;gap:2px;padding:16px 18px;text-decoration:none;color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.box-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.box-tile .n{font-size:1.9rem;font-weight:800;line-height:1.1;color:var(--brand)}
.box-tile .l{font-size:.86rem;color:var(--muted);font-weight:600}
.box-tile.alert-tile .n{color:var(--bad)}
.next-step{margin-bottom:14px}
.panel.decide{border:1.5px solid color-mix(in srgb,var(--warn) 45%,var(--line))}
.purposes .choice span{border-radius:14px;padding:8px 14px;display:flex;flex-direction:column;gap:2px;max-width:260px}
.purposes .choice span small{font-weight:500;font-size:.76rem;color:var(--muted);line-height:1.5}
.purposes .choice input:checked+span small{color:inherit;opacity:.9}
.choice[hidden]{display:none}
details.file-hop{margin-top:8px}
details.file-hop>summary{list-style:none;display:inline-flex}
details.file-hop>summary::-webkit-details-marker{display:none}

/* ---------- Archive files ---------- */
.files{margin-top:8px}
.file-card{text-decoration:none;color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.file-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.file-card h2{font-size:1.02rem;margin:4px 0 10px}
.file-code{font-size:.8rem;font-weight:700;color:var(--gold)}

/* ---------- Public verification page ---------- */
body.verify-page{min-height:100dvh;display:grid;place-items:start center;background:var(--ground);padding:32px 16px}
.verify-wrap{width:min(560px,100%)}
.verify-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.verify-brand b{display:block;font-size:1.05rem}
.verify-brand span{color:var(--muted);font-size:.86rem}
.verify-result{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:14px;margin-bottom:16px}
.verify-result .ic{width:34px;height:34px;flex:0 0 auto}
.verify-result h1{font-size:1.15rem;margin:0 0 4px}
.verify-result p{margin:0;font-size:.9rem}
.verify-result.ok{background:var(--ok-soft);color:var(--ok)}
.verify-result.bad{background:var(--bad-soft);color:var(--bad)}