/* ============================================================================
   VSAHHA PROVIDER PORTAL — DIRECTION A · CLINICAL CALM
   Tokens are documented in DESIGN.md. Logical properties (inline-start/end)
   keep the layout right in Arabic (dir="rtl").
   ========================================================================== */
:root{
  --bg:#F4F8F8; --surface:#FFFFFF; --sunk:#F8FBFB; --line:#E2ECEC; --line2:#EDF3F3;
  /* text colours meet WCAG AA (4.5:1) on every surface and tint they sit on,
     checked by axe-core in tests/e2e */
  --ink:#0F2A2D; --ink2:#2C4A4D; --muted:#55696B; --faint:#56696B;
  --deep:#0B4A4C; --teal:#0B6D76; --aqua:#0E9BB8; --mint:#E6F4F3; --mint2:#D3ECEA;
  --amber:#A15A08; --amber-bg:#FFF4E2; --red:#B33348; --red-bg:#FDECEF;
  --green:#08724E; --green-bg:#E5F5EE; --violet:#5F4FC4; --violet-bg:#EFEDFC; --blue:#285F99; --blue-bg:#E9F1FA;
  --r-lg:20px; --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(15,42,45,.04),0 6px 20px rgba(15,42,45,.05);
  --shadow-lg:0 24px 60px rgba(15,42,45,.18);
  --grad:linear-gradient(135deg,#0B4A4C 0%,#0E7C86 55%,#0E9BB8 100%);
  --grad-text:linear-gradient(135deg,#0A3F41 0%,#0E7C86 100%); /* white text on it stays AA */
  --ease:cubic-bezier(.2,.75,.2,1);
  --focus:0 0 0 4px rgba(14,124,134,.16);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[lang="ar"]{--font:"Noto Kufi Arabic","Plus Jakarta Sans",system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{background:none;min-height:100vh}
::selection{background:rgba(14,155,184,.22)}
body{font-family:var(--font);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
/* a focus ring you can see on every surface: solid 2px, offset, plus the soft glow (WCAG 2.4.7) */
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;box-shadow:var(--focus);border-radius:8px}
.side :focus-visible,.auth-art :focus-visible,.auth-lang :focus-visible{outline-color:#fff}
#main:focus{outline:none}
.skip{position:fixed;inset-inline-start:12px;top:-60px;z-index:100;background:var(--deep);color:#fff;font-weight:700;padding:10px 16px;border-radius:10px;transition:top .15s}
.skip:focus{top:12px}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num,.amt{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.mono{font-feature-settings:"tnum";letter-spacing:.01em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html[dir="rtl"] .flip{transform:scaleX(-1)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}

/* The main menu: a deep-teal gradient (the CRM menu's family) that drifts
   slowly, three soft light orbs moving behind glass, and white type.
   Darkest at the top where the small labels sit, so every text passes AA. */
.side{position:sticky;top:0;height:100vh;overflow:hidden;color:#fff;isolation:isolate;
  background:linear-gradient(168deg,#05282A 0%,#0A4244 34%,#0B5559 66%,#0C5F66 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06),8px 0 40px rgba(6,40,42,.12)}
html[dir="rtl"] .side{box-shadow:inset 1px 0 0 rgba(255,255,255,.06),-8px 0 40px rgba(6,40,42,.12)}
.side-fx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.side-fx i{position:absolute;border-radius:50%;filter:blur(38px);will-change:transform}
.side-fx .o1{width:260px;height:260px;top:-90px;inset-inline-start:-80px;background:radial-gradient(circle,rgba(14,155,184,.55),transparent 68%);animation:orb1 18s ease-in-out infinite}
.side-fx .o2{width:300px;height:300px;top:38%;inset-inline-end:-170px;background:radial-gradient(circle,rgba(14,124,134,.6),transparent 66%);animation:orb2 22s ease-in-out infinite}
.side-fx .o3{width:240px;height:240px;bottom:-110px;inset-inline-start:-40px;background:radial-gradient(circle,rgba(46,196,182,.42),transparent 70%);animation:orb3 26s ease-in-out infinite}
.side-fx .mesh{inset:0;border-radius:0;filter:none;opacity:.5;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%) 0 0/300% 100%,
    radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/18px 18px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%);
  animation:sheen 9s ease-in-out infinite}
@keyframes orb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,120px) scale(1.15)}}
@keyframes orb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,-60px) scale(.9)}}
@keyframes orb3{0%,100%{transform:translate(0,0)}50%{transform:translate(70px,-90px) scale(1.2)}}
@keyframes sheen{0%,100%{background-position:100% 0,0 0}50%{background-position:0 0,0 0}}
/* the logo, the branch and the help box never move; only the list of links
   scrolls, and only when the window is too short to show it all */
.side-in{height:100%;overflow:hidden;padding:18px 14px 14px;display:flex;flex-direction:column;gap:12px}
.side-in > .brand,.side-in > .org,.side-in > .help{flex:none}
.side-in > .nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0 -14px;padding:0 14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
/* the official lockup (symbol | Vsahha), never redrawn or animated; the
   label lines up under the wordmark, and the logo keeps its own LTR shape
   in Arabic while the block sits at the inline start */
.brand{display:flex;flex-direction:column;gap:2px;padding:0 4px 2px;width:max-content;max-width:100%;align-self:flex-start;direction:ltr}
.brand .logo{display:block;height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.22))}
.brand i{font-style:normal;font-size:10px;color:#9FD8DA;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-left:31%;margin-top:-4px}
html[lang="ar"] .brand i{letter-spacing:0;font-size:11px}
.top-mark{display:none}
.auth-brand{display:flex;flex-direction:column;gap:0;width:max-content;max-width:100%;direction:ltr}
.auth-brand .logo{display:block;max-width:100%;height:auto}
.auth-brand i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9FD8DA;margin-left:31%;margin-top:4px}
html[lang="ar"] .auth-brand i{letter-spacing:0;font-size:12px}
.auth-logo{display:none;max-width:100%;height:auto;align-self:center;direction:ltr}
.org{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);width:100%;text-align:start;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(0,0,0,.14);backdrop-filter:blur(8px)}
.org .av{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#E6F4F3,#BDE6E8);color:var(--deep);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.org b{font-size:13px;display:block;line-height:1.25;color:#fff}
.org span{font-size:11.5px;color:#B9E0E1}
.org .ic{margin-inline-start:auto;color:#B9E0E1}
.org select{border:0;background:transparent;font-weight:700;font-size:12.5px;width:100%;color:#DDF1F1;color-scheme:dark}
.org select option{color:var(--ink);background:#fff}
.nav{display:flex;flex-direction:column;gap:3px}
.nav small{font-size:10.5px;font-weight:700;letter-spacing:.11em;color:#8FCFD2;text-transform:uppercase;padding:10px 12px 4px}
.nav a{display:flex;align-items:center;gap:11px;padding:6px 10px;border-radius:12px;color:#D5ECEC;font-weight:600;font-size:13.5px;position:relative;
  transition:background .25s,color .25s,transform .25s cubic-bezier(.2,.7,.2,1)}
.nav a .ni{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.06);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background .25s,box-shadow .25s}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(3px)}
html[dir="rtl"] .nav a:hover{transform:translateX(-3px)}
.nav a:hover .ni{transform:perspective(120px) rotateY(-18deg) translateZ(6px);background:rgba(255,255,255,.12)}
.nav a.on{color:#fff;background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.18)}
html[dir="rtl"] .nav a.on{background:linear-gradient(270deg,rgba(255,255,255,.2),rgba(255,255,255,.07))}
.nav a.on::before{content:"";position:absolute;inset-inline-start:-14px;top:9px;bottom:9px;width:4px;border-start-end-radius:4px;border-end-end-radius:4px;background:#7FE3F0;box-shadow:0 0 14px 2px rgba(127,227,240,.7)}
.nav a.on .ni{background:linear-gradient(135deg,#7FE3F0,#2BB3C8);color:#05383B;box-shadow:0 6px 16px rgba(43,179,200,.45)}
.nav a .ct{margin-inline-start:auto;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;background:rgba(255,255,255,.14);color:#fff}
.nav a .ct.hot{background:#FFD592;color:#5B3300}
.side .help{margin-top:auto;padding:11px 14px;border-radius:var(--r);font-size:12.5px;color:#C4E4E5;
  background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12)}
.side .help b{color:#fff;display:block;margin-bottom:2px}
.side .help .lnk{color:#8FE6F2;margin-top:6px}
.scrim{display:none}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:14px 32px;background:rgba(244,248,248,.72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);position:sticky;top:0;z-index:20;transition:box-shadow .25s,background .25s}
.top.scrolled{background:rgba(255,255,255,.8);box-shadow:0 1px 0 var(--line),0 10px 30px rgba(15,42,45,.06)}
.iconbtn.menu-btn{display:none}
.search{flex:1;min-width:0;max-width:560px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 14px;height:42px;color:var(--muted);white-space:nowrap;overflow:hidden;cursor:text}
.search span{overflow:hidden;text-overflow:ellipsis}
.search .s-short{display:none}
.search kbd{margin-inline-start:auto;font:600 11px var(--font);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--faint)}
.top .sp{flex:1}
.iconbtn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink2);position:relative;flex:none}
.iconbtn .dot{position:absolute;top:8px;inset-inline-end:8px;min-width:16px;height:16px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px;border:2px solid #fff}
.lang{height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;gap:6px;padding:0 10px;font-weight:700;font-size:12.5px;color:var(--ink2)}
.lang select{border:0;background:transparent;font-weight:700}
.me{display:flex;align-items:center;gap:10px;padding-inline-start:4px;position:relative}
.me>button{display:flex;align-items:center;gap:10px;border:0;background:none;text-align:start;padding:0}
.me .av{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.me b{font-size:13px;display:block}
.me span{font-size:11.5px;color:var(--muted)}
.drop-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);min-width:260px;padding:8px;z-index:40}
.drop-menu a,.drop-menu button{display:flex;gap:10px;align-items:center;width:100%;padding:9px 10px;border-radius:10px;border:0;background:none;font-weight:600;text-align:start}
.drop-menu a:hover,.drop-menu button:hover{background:var(--sunk)}
.drop-menu .who{padding:8px 10px 10px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.drop-menu .who b{display:block}
.drop-menu .who span{font-size:12px;color:var(--muted)}
.page{padding:6px 32px 48px;display:flex;flex-direction:column;gap:22px;max-width:1500px;width:100%}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ph h1{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.ph p{color:var(--muted);margin-top:4px}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap}
.crumb{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:700;font-size:13px;margin-bottom:6px}
.livechip{white-space:nowrap}
.livechip .d{background:#B7791F}
.livechip.live .d{background:#08724E}
.livechip.crm .d{background:#B33348}
@media (max-width:760px){.livechip-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.livechip{padding:5px 8px}}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:999px;padding:5px 11px;background:var(--surface);border:1px solid var(--line);color:var(--ink2)}
.chip .d{width:7px;height:7px;border-radius:50%}
.foot{font-size:12px;color:var(--faint);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;padding-top:6px}
.banner{display:flex;gap:12px;align-items:center;padding:14px 18px;border-radius:var(--r);border:1px solid}
.banner.red{background:var(--red-bg);border-color:#F5C9D1;color:var(--red)}
.banner.teal{background:var(--mint);border-color:var(--mint2);color:var(--deep)}
.banner.amber{background:var(--amber-bg);border-color:#F3D9AE;color:var(--amber)}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;align-items:center;gap:10px;padding:18px 20px 0;flex-wrap:wrap}
.card-h h2{font-size:15.5px;font-weight:800;letter-spacing:-.005em}
.card-h .sub{color:var(--muted);font-size:12.5px;font-weight:500}
.card-a{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.card-b{padding:16px 20px 20px}
.lnk{color:var(--teal);font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.grid-a{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}
.grid-b{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}
.grid-side{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.stack{display:flex;flex-direction:column;gap:22px;min-width:0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.sp{flex:1}

/* ---------- buttons, pills ---------- */
.btn{height:44px;border-radius:12px;border:1.5px solid transparent;padding:0 18px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:transform .12s,box-shadow .12s,background .12s}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-p{background:var(--grad);color:#fff;box-shadow:0 8px 18px rgba(14,124,134,.25)}
.btn-p:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(14,124,134,.3)}
.btn-s{background:#fff;color:var(--deep);border-color:var(--mint2)}
.btn-s:not(:disabled):hover{background:var(--sunk)}
.btn-ghost{background:transparent;color:var(--teal)}
.btn-danger{background:#fff;color:var(--red);border-color:#F2C4CD}
.btn-sm{height:34px;border-radius:10px;padding:0 12px;font-size:12.5px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.t-teal{background:var(--mint);color:var(--teal)} .t-amber{background:var(--amber-bg);color:var(--amber)} .t-violet{background:var(--violet-bg);color:var(--violet)}
.t-red{background:var(--red-bg);color:var(--red)} .t-blue{background:var(--blue-bg);color:var(--blue)} .t-green{background:var(--green-bg);color:var(--green)} .t-muted{background:var(--line2);color:var(--muted)}
.ai-mark{display:inline-flex;align-items:center;gap:2px}
.ai-mark button.prov{margin-inline-start:2px;padding:1px 4px}
.prov{display:inline-flex;font-size:10.5px;font-weight:800;border-radius:6px;padding:1px 6px;margin-inline-start:6px;letter-spacing:.02em}
.tag-unknown{font-size:11px;font-weight:800;color:var(--amber);background:var(--amber-bg);border-radius:6px;padding:2px 7px;white-space:nowrap}
.amt{font-weight:800;text-align:end;display:inline-block}
.amt small{display:block;font-weight:600;font-size:11px;color:var(--muted)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.wide{grid-column:1/-1}
.field .lbl{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.field .lbl i{color:var(--red);font-style:normal}
.field .hint{font-size:12px;color:var(--faint)}
.field .err{font-size:12px;color:var(--red);font-weight:600}
.input,.field input,.field select,.field textarea{height:44px;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;background:var(--sunk);font-weight:600;width:100%;transition:border-color .12s,box-shadow .12s,background .12s}
.field textarea{height:auto;min-height:92px;padding:10px 12px;resize:vertical;line-height:1.5}
.input{display:flex;align-items:center;gap:8px}
.input input{border:0;background:transparent;height:100%;padding:0;flex:1;min-width:0;font-weight:600}
.input input:focus{box-shadow:none}
.input:focus-within,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);background:#fff;box-shadow:var(--focus);outline:none}
.input.warn{border-color:#E8C27E;background:#FFFBF3}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:#E6A3AF}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.form3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:13.5px}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--teal)}
.combo{position:relative}
.combo-list{position:absolute;top:calc(100% + 6px);inset-inline:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);max-height:300px;overflow-y:auto;z-index:30;padding:6px}
.combo-it{display:flex;gap:10px;align-items:baseline;width:100%;text-align:start;border:0;background:none;padding:8px 10px;border-radius:8px}
.combo-it:hover,.combo-it:focus{background:var(--sunk)}
.combo-it b{min-width:62px;font-weight:800}
.combo-it span{flex:1;color:var(--ink2);font-size:13px}
.combo-it em{font-style:normal;font-size:11px;font-weight:700;color:var(--violet)}
.combo-it.unknown{background:var(--amber-bg)}
.combo-empty{padding:10px;color:var(--muted);font-size:13px}

/* ---------- notes, empty, loading ---------- */
.note{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);font-size:13px;line-height:1.5}
.note .ic{margin-top:2px}
.note b{display:block}
.note ul{margin:6px 0 0;padding-inline-start:18px}
.note-teal{background:var(--mint);color:var(--deep)} .note-amber{background:var(--amber-bg);color:#7A4405} .note-red{background:var(--red-bg);color:#8C2235}
.note-blue{background:var(--blue-bg);color:#24568A} .note-green{background:var(--green-bg);color:#06573C} .note-grey{background:var(--sunk);color:var(--muted);border:1px solid var(--line2)}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:34px 18px;color:var(--muted)}
.empty-i{width:48px;height:48px;border-radius:14px;background:var(--mint);color:var(--teal);display:grid;place-items:center;margin-bottom:6px}
.empty b{color:var(--ink);font-size:15px}
.empty p{max-width:420px;font-size:13px}
.empty .btn{margin-top:10px}
.loading{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--muted);padding:40px 0;font-weight:600}

/* ---------- tables and lists ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;text-align:start;padding:12px 16px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line2);font-size:13px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover td{background:var(--sunk)}
.tbl td.r,.tbl th.r{text-align:end}
.tbl .id{font-weight:700}
.tbl .sub{font-size:12px;color:var(--muted)}
.list{padding:4px 10px 12px}
.li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 10px;border-radius:12px;width:100%;text-align:start;border:0;background:none}
.li + .li{border-top:1px solid var(--line2)}
.li:hover{background:var(--sunk)}
.li .id{font-weight:700;font-size:13px}
.li .who{font-size:12px;color:var(--muted)}
.sla{font-size:11.5px;font-weight:700;color:var(--red);display:inline-flex;align-items:center;gap:4px}
.doclink{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--teal);font-size:12.5px;padding:5px 9px;border-radius:8px;background:var(--mint);border:0}
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;width:max-content;max-width:100%;overflow-x:auto}
.tabs button{border:0;background:none;border-radius:9px;padding:7px 14px;font-weight:700;font-size:13px;color:var(--muted);white-space:nowrap}
.tabs button.on{background:var(--mint);color:var(--deep)}
.tabs em{font-style:normal;margin-inline-start:6px;font-size:11px;color:var(--faint)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filters .input{width:280px;height:40px}
.stats5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1180px){.stats5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.stats5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.filters-more{align-items:flex-end;padding:12px 14px;border-radius:14px;background:var(--sunk);border:1px solid var(--line2)}
.filters-more .field{width:150px}
.filters-more input{height:38px}
@media (max-width:860px){.filters-more .field{width:calc(50% - 6px)}}
.kv{display:grid;gap:12px 20px}
.kv-2{grid-template-columns:repeat(2,minmax(0,1fr))} .kv-3{grid-template-columns:repeat(3,minmax(0,1fr))} .kv-1{grid-template-columns:1fr}
.kv dt{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.kv dd{margin:2px 0 0;font-weight:600}

/* ---------- home ---------- */
.elig{position:relative;overflow:hidden}
.elig::after{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(14,155,184,.10),transparent 70%);pointer-events:none}
.elig h2{font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px}
.tile{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.erow{display:grid;grid-template-columns:minmax(0,1fr) 160px auto;gap:10px;align-items:end;margin-top:14px}
.result{border:1px solid var(--mint2);background:linear-gradient(180deg,#F3FBFA,#fff);border-radius:var(--r);padding:14px 16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:14px}
.result.bad{border-color:#F2C4CD;background:linear-gradient(180deg,#FFF5F7,#fff)}
.result .ok{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.result b{font-size:15px}
.result .meta{color:var(--muted);font-size:12.5px}
.checks{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.checks span{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px}
.task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 12px;border-radius:14px}
.task + .task{border-top:1px solid var(--line2)}
.task:hover{background:var(--sunk)}
.task .tile{width:40px;height:40px;border-radius:12px}
.task b{font-size:13.5px;display:block}
.task p{font-size:12.5px;color:var(--muted);margin-top:2px}
.task .when{font-size:11.5px;font-weight:700;margin-top:5px;display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 8px}
.empty-line{display:flex;align-items:center;gap:10px;margin:4px 12px 2px;padding:10px 12px;border-radius:12px;background:var(--sunk);font-size:12.5px;color:var(--muted)}
.empty-line .ic{color:var(--green)}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.quick.quick-col{grid-template-columns:minmax(0,1fr);gap:12px}
.qa{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r);background:linear-gradient(180deg,#fff,#FAFDFD);border:1px solid var(--line);box-shadow:var(--shadow);text-align:start;width:100%}
.qa:hover{border-color:var(--mint2);box-shadow:0 26px 44px -20px rgba(14,90,96,.32)}
.qa .go{margin-inline-start:auto;color:var(--faint);transition:translate .3s var(--ease),color .3s}
.qa:hover .go{translate:4px 0;color:var(--teal)}
html[dir="rtl"] .qa:hover .go{translate:-4px 0}
.qa .tile{width:44px;height:44px;border-radius:13px}
.qa b{display:block;font-size:14px}
.qa div>span{font-size:12px;color:var(--muted)}
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.stage{border-radius:var(--r);padding:14px 12px;background:var(--sunk);border:1px solid var(--line2);text-align:start;width:100%}
.stage:hover{border-color:var(--mint2)}
.stage .k{font-size:11px;font-weight:700;color:var(--muted);display:flex;align-items:flex-start;gap:6px;min-height:30px;line-height:1.3}
.stage .k .d{margin-top:3px;flex:none}
.stage .k .d{width:8px;height:8px;border-radius:50%}
.stage .v{font-size:26px;font-weight:800;margin-top:6px;letter-spacing:-.02em}
.stage .s{font-size:11.5px;color:var(--muted);white-space:nowrap}
.stage.zero .v{color:var(--faint)}
.bar{display:flex;height:8px;border-radius:999px;overflow:hidden;margin:14px 0 4px;background:var(--line2)}
.bar i{display:block;height:100%}
.mtile{border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:2px}
.mtile .k{font-size:12px;font-weight:700;opacity:.88}
.mtile .v{font-size:28px;font-weight:800;letter-spacing:-.02em}
.mtile .v small{font-size:13px;font-weight:700;margin-inline:5px;opacity:.75}
.mtile .s{font-size:12px;opacity:.82}
.m-paid{background:var(--grad);color:#fff}
.m-due{background:var(--mint);color:var(--deep)}
.m-rev{background:var(--sunk);color:var(--ink);border:1px solid var(--line)}
.money{display:flex;flex-direction:column;gap:12px}

/* ---------- detail pages ---------- */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.hero .tile{width:52px;height:52px;border-radius:15px}
.hero h1{font-size:22px;font-weight:800;letter-spacing:-.01em}
.hero p{color:var(--muted);font-size:13px}
.journey{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:6px 0 2px}
.jstep{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--faint);text-align:center;position:relative}
.jstep::before{content:"";position:absolute;top:11px;inset-inline-start:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.jstep:first-child::before{display:none}
.jstep .c{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;position:relative;z-index:1}
.jstep.done{color:var(--ink2)} .jstep.done::before{background:var(--teal)} .jstep.done .c{background:var(--teal);border-color:var(--teal);color:#fff}
.jstep.now{color:var(--teal)} .jstep.now::before{background:var(--teal)} .jstep.now .c{border-color:var(--teal);box-shadow:0 0 0 5px rgba(14,124,134,.15)}
.jstep.now .c::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal)}
.timeline{display:flex;flex-direction:column}
.tl{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;position:relative;padding-bottom:14px}
.tl::before{content:"";position:absolute;inset-inline-start:10px;top:22px;bottom:0;width:2px;background:var(--line2)}
.tl:last-child::before{display:none}
.tl .c{width:22px;height:22px;border-radius:50%;background:var(--mint);color:var(--teal);display:grid;place-items:center}
.tl b{font-size:13px;display:block}
.tl span{font-size:12px;color:var(--muted)}
.lines .ln{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,.7fr)) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line2)}
.lines .ln:last-child{border-bottom:0}
.lines .ln.head{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-top:0}
.reason{font-size:12.5px;color:var(--ink2);margin-top:4px}
.money-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.money-strip div{background:var(--sunk);border:1px solid var(--line2);border-radius:12px;padding:12px}
.money-strip span{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.money-strip b{display:block;font-size:18px;margin-top:2px}
.money-strip .hl{background:var(--mint);border-color:var(--mint2)}
.msgs{display:flex;flex-direction:column;gap:10px}
.msg{max-width:78%;padding:10px 14px;border-radius:14px;background:var(--sunk);border:1px solid var(--line2);align-self:flex-start}
.msg.mine{align-self:flex-end;background:var(--mint);border-color:var(--mint2)}
.composer{display:flex;flex-direction:column;gap:8px;align-items:flex-end;margin-top:4px}
.composer .field{width:100%}
.msg small{display:block;font-size:11px;color:var(--muted);margin-bottom:2px;font-weight:700}

/* ---------- wizard ---------- */
.steps{display:flex;gap:6px;list-style:none;padding:0;flex-wrap:wrap}
.steps li button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px 6px 6px;font-weight:700;font-size:12.5px;color:var(--muted)}
.steps li .c{width:24px;height:24px;border-radius:50%;background:var(--line2);display:grid;place-items:center;font-size:12px}
.steps li.now button{border-color:var(--teal);color:var(--deep);box-shadow:var(--focus)}
.steps li.now .c{background:var(--grad);color:#fff}
.steps li.done .c{background:var(--teal);color:#fff}
.steps li.done button{color:var(--ink2)}
.steps li button:disabled{cursor:default;opacity:.8}
.wiz-foot{display:flex;gap:10px;justify-content:space-between;align-items:center;padding-top:6px;flex-wrap:wrap}
.lineedit{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) 90px 130px auto;gap:10px;align-items:end;padding:14px;border:1px solid var(--line2);border-radius:var(--r);background:var(--sunk)}
.lineedit + .lineedit{margin-top:10px}
.score{display:flex;align-items:center;gap:16px}
.score .ring{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:20px;flex:none}
.issues{display:flex;flex-direction:column;gap:8px}
.issue{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px 12px;border-radius:12px;font-size:13px}
.issue small{display:block;color:inherit;opacity:.8}
.docreq{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line2);border-radius:12px}
.docreq + .docreq{margin-top:8px}
.docreq.ok{background:var(--green-bg);border-color:transparent}
.drop{display:flex;align-items:center;gap:14px;padding:22px;border:2px dashed var(--mint2);border-radius:var(--r);background:var(--sunk);color:var(--teal);cursor:pointer;transition:background .12s,border-color .12s}
.drop:hover,.drop.over{background:var(--mint);border-color:var(--teal)}
.drop b{display:block;color:var(--ink)}
.drop span{font-size:12.5px;color:var(--muted)}
.drop.compact{padding:10px 14px;gap:10px}
.files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.file{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 10px}
.file button{border:0;background:var(--line2);border-radius:50%;width:20px;height:20px;display:grid;place-items:center;color:var(--muted)}

/* ---------- intake ---------- */
.idoc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.idoc + .idoc{margin-top:16px}
.idoc .pv{background:#F1F5F5;border-inline-end:1px solid var(--line);display:flex;flex-direction:column;min-height:380px}
.idoc .pv iframe,.idoc .pv img{width:100%;flex:1;border:0;min-height:380px;object-fit:contain;background:#fff}
.idoc .pv .bar2{display:flex;gap:8px;align-items:center;padding:10px 12px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.idoc .pdfpage{background:#fff;flex:1;overflow:auto;box-shadow:inset 0 0 0 1px var(--line2)}
.idoc .pdfpage canvas{display:block}
/* where a value was read: marked on the page */
.pdfsheet{position:relative}
.pdfsheet img{display:block;width:100%;height:auto;min-height:0}
.mark{position:absolute;border-radius:4px;background:rgba(255,196,0,.28);box-shadow:0 0 0 2px #E8A500,0 0 0 6px rgba(232,165,0,.18);pointer-events:none;animation:markin .35s ease-out}
.mark.approx{background:rgba(14,155,184,.14);box-shadow:0 0 0 2px var(--teal);border-radius:6px}
@keyframes markin{from{opacity:0;transform:scale(1.25)}}
.markbar{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:12.5px;background:#FFF8E1;border-bottom:1px solid #F5DFA0;color:#6B5200}
.markbar .lnk{margin-inline-start:auto}
.mark-key{width:14px;height:10px;border-radius:3px;background:rgba(255,196,0,.4);box-shadow:0 0 0 1.5px #E8A500;flex:none}
button.prov{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit}
button.prov:hover{filter:brightness(.95);text-decoration:underline}
.idoc .rv{padding:18px;display:flex;flex-direction:column;gap:14px}
.idoc .detected{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-6px 0 0;font-size:12.5px;color:var(--ink2)}
.idoc .detected .chip{padding:3px 9px;font-size:11.5px}
.idoc input.unread{border-style:dashed;background:transparent}
.idoc .sig{display:flex;align-items:flex-start;gap:8px}
.idoc .sig-acts{display:inline-flex;gap:10px;white-space:nowrap;margin-inline-start:6px}
.idoc .rv .tbl td:last-child{white-space:nowrap;width:1%}
.idoc .rv h3{font-size:15px;font-weight:800;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cand{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line2);border-radius:12px;width:100%;text-align:start;background:#fff}
.cand + .cand{margin-top:6px}
.cand.sel{border-color:var(--teal);background:var(--mint)}
.cand small{display:block;font-size:11.5px;color:var(--muted)}
.unknownbox{border:1.5px solid #EDCB8C;background:#FFFBF2;border-radius:var(--r);padding:14px}
.unknownbox h4{font-size:14px;display:flex;gap:8px;align-items:center;color:var(--amber)}
.sig{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;padding:8px 10px;border-radius:10px}

/* ---------- overlays ---------- */
.layer{position:fixed;inset:0;background:rgba(11,48,51,.38);backdrop-filter:blur(3px);z-index:1000;display:grid;place-items:center;padding:18px;font-family:var(--font);color:var(--ink)}
.modal{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;max-height:calc(100vh - 36px);display:flex;flex-direction:column}
.modal-sm{max-width:460px} .modal-md{max-width:640px} .modal-lg{max-width:900px}
.modal header{display:flex;gap:12px;align-items:flex-start;padding:18px 20px 10px}
.modal header h3{font-size:17px;font-weight:800}
.modal header p{color:var(--muted);font-size:13px;margin-top:2px}
.modal .x{margin-inline-start:auto;border:0;background:var(--sunk);border-radius:10px;width:34px;height:34px;display:grid;place-items:center}
.modal-b{padding:6px 20px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.modal footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line2)}
.doc-layer{display:flex;flex-direction:column;align-items:center;gap:12px;overflow:auto;place-items:initial}
.doc-bar{position:sticky;top:0;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:14px;padding:6px 8px 6px 14px;box-shadow:var(--shadow);width:min(860px,100%);z-index:2}
.doc-bar b{font-size:13.5px}
.doc-bar button,.doc-bar a{display:inline-flex;align-items:center;gap:6px;border:0;background:none;border-radius:9px;padding:7px 9px;font-weight:700;font-size:12.5px;color:var(--deep)}
.doc-bar button:hover,.doc-bar a:hover{background:var(--sunk)}
.doc-sheet{width:min(860px,100%);transform-origin:top center;transition:transform .15s}
.doc-sheet iframe{width:100%;height:1150px;border:0;border-radius:6px;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.25)}
.toasts{position:fixed;bottom:20px;inset-inline-start:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:2000}
html[dir="rtl"] .toasts{transform:translateX(50%)}
.toast{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:14px;font-weight:700;box-shadow:var(--shadow-lg);background:#fff}
.palette{position:fixed;inset:0;background:rgba(11,48,51,.32);z-index:1500;display:flex;justify-content:center;padding:10vh 16px 16px}
.palette .box{width:min(640px,100%);background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;align-self:flex-start}
.palette .box .input{border:0;border-bottom:1px solid var(--line);border-radius:0;height:56px;background:#fff;box-shadow:none}
.palette .res{max-height:50vh;overflow-y:auto;padding:6px}
.palette .res button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;border:0;background:none;padding:9px 10px;border-radius:10px;text-align:start}
.palette .res button:hover,.palette .res button.sel{background:var(--mint)}
.palette .res small{color:var(--muted);font-size:12px}
.notif{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:min(400px,92vw);background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:40;max-height:70vh;overflow-y:auto}
.notif header{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line2);font-weight:800}
.notif a{display:block;padding:11px 14px;border-bottom:1px solid var(--line2)}
.notif a:hover{background:var(--sunk)}
.notif a.unread{background:#F3FBFA}
.notif a b{display:block;font-size:13px}
.notif a span{font-size:12px;color:var(--muted)}
.notif footer.alerts{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--sunk);border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.notif footer.alerts > .ic{color:var(--teal);flex:none}
.notif footer.alerts span{flex:1;min-width:0}
/* a switch: role="switch" on a button */
.sw{flex:none;width:40px;height:23px;border-radius:999px;border:0;padding:0;background:var(--line);position:relative;transition:background .2s}
.sw i{position:absolute;top:3px;inset-inline-start:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:inset-inline-start .2s}
.sw.on{background:var(--teal)}
.sw.on i{inset-inline-start:20px}

/* ---------- auth ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.auth-art{background:var(--grad);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-art::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;inset-inline-end:-160px;bottom:-200px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%)}
.auth-art h1{font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1.15;max-width:520px}
.auth-art p{opacity:.88;max-width:480px;margin-top:12px;font-size:15px}
.auth-art ul{list-style:none;padding:0;display:grid;gap:12px;margin-top:28px;max-width:480px}
.auth-art li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.auth-form{display:flex;align-items:center;justify-content:center;padding:32px 20px}
.auth-card{width:100%;display:flex;flex-direction:column;gap:18px}

/* ---------- charts ---------- */
.bars{display:flex;align-items:flex-end;gap:10px;height:160px;padding-top:10px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars .b i{display:block;width:100%;max-width:44px;border-radius:8px 8px 4px 4px;background:var(--grad);min-height:2px}
.bars .b span{font-size:11px;color:var(--muted);font-weight:600}
.hbar{display:grid;grid-template-columns:minmax(0,1fr) 140px 50px;gap:12px;align-items:center;padding:8px 0}
.hbar .track{height:10px;border-radius:999px;background:var(--line2);overflow:hidden}
.hbar .track i{display:block;height:100%;background:var(--grad);border-radius:999px}
.stat{padding:16px;border-radius:var(--r);background:var(--sunk);border:1px solid var(--line2)}
.stat span{font-size:12px;font-weight:700;color:var(--muted)}
.stat b{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em}
.stat small{font-size:12px;color:var(--muted)}

/* ============================================================================
   DEPTH & MOTION
   Light, depth and movement on top of Clinical Calm. Rules of the layer:
   transforms and opacity only (no layout animation); entrances fill
   "backwards" so nothing keeps a transform (and a stacking context) after it
   arrives; nothing that holds a form or a drop-down list tilts; white text
   only sits on the AA-safe end of the gradients; prefers-reduced-motion
   turns all of it off.
   ========================================================================== */

/* ambient light behind every page */
body::before{content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(40vmax 30vmax at 75% 12%,rgba(14,155,184,.11),transparent 70%),
    radial-gradient(36vmax 28vmax at 18% 88%,rgba(14,124,134,.09),transparent 70%),
    radial-gradient(28vmax 22vmax at 96% 82%,rgba(95,79,196,.05),transparent 70%);
  animation:ambient 40s ease-in-out infinite alternate}
@keyframes ambient{to{transform:translate3d(-4vmax,3vmax,0) rotate(6deg)}}
*{scrollbar-width:thin;scrollbar-color:#C6DADA transparent}

/* pages arrive in a short cascade, leaning in from below */
.page>*{animation:rise .7s var(--ease) backwards}
.page>*:nth-child(2){animation-delay:.05s} .page>*:nth-child(3){animation-delay:.1s} .page>*:nth-child(4){animation-delay:.15s}
.page>*:nth-child(5){animation-delay:.2s} .page>*:nth-child(6){animation-delay:.25s} .page>*:nth-child(n+7){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:perspective(1200px) translateY(18px) rotateX(6deg)}}
@keyframes fade{from{opacity:0}}
@keyframes flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes float{50%{transform:translateY(-5px)}}

/* page titles in ink-to-teal */
.ph h1{background:linear-gradient(100deg,var(--ink) 35%,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}

/* cards: a hairline that catches the light, and layered shadows */
.card{border-color:transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(150deg,rgba(14,155,184,.32),var(--line) 26%,var(--line) 74%,rgba(14,124,134,.2)) border-box;
  box-shadow:0 1px 1px rgba(15,42,45,.03),0 4px 10px rgba(15,42,45,.03),0 18px 40px -14px rgba(15,42,45,.1);transition:box-shadow .4s var(--ease)}
.card:hover{box-shadow:0 1px 1px rgba(15,42,45,.03),0 8px 18px rgba(15,42,45,.04),0 30px 60px -20px rgba(14,90,96,.2)}
.card-h h2{display:flex;align-items:center;gap:9px}
.card-h h2::before{content:"";width:4px;height:16px;border-radius:4px;background:var(--grad);flex:none}
.tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}

/* 3D tilt: [data-tilt] leans towards the pointer (fx.jsx sets --rx --ry --mx --my) */
[data-tilt]{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .7s var(--ease),box-shadow .35s,border-color .35s}
[data-tilt].tilting{transition:transform .1s linear,box-shadow .35s,border-color .35s}
.qa,.stage,.mtile{position:relative}
.qa::after,.stage::after,.mtile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),transparent 60%)}
.qa.tilting::after,.stage.tilting::after,.mtile.tilting::after{opacity:1}
.qa .tile{transform:translateZ(28px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 12px 20px -12px currentColor;transition:transform .5s var(--ease)}
.qa div{transform:translateZ(14px)}
.qa:hover .tile{transform:translateZ(36px) scale(1.06)}

/* claims by stage */
.stage{background:linear-gradient(180deg,#fff,var(--sunk));overflow:visible}
.stage::before{content:"";position:absolute;inset-inline:14px;top:-1px;height:3px;border-radius:0 0 4px 4px;background:var(--c,var(--teal))}
.stage.zero::before{opacity:.3}
.stage:hover{border-color:var(--mint2);box-shadow:0 20px 34px -18px rgba(15,42,45,.3)}
.stage .v{transform:translateZ(18px)}
.bar i{animation:grow 1.1s var(--ease) backwards;transform-origin:left center}
html[dir="rtl"] .bar i{transform-origin:right center}
.bar i:nth-child(2){animation-delay:.12s} .bar i:nth-child(3){animation-delay:.24s} .bar i:nth-child(4){animation-delay:.36s} .bar i:nth-child(5){animation-delay:.48s}
@keyframes grow{from{transform:scaleX(0)}}

/* money: the paid tile is a slow-moving gradient with a passing sheen */
.m-paid{background:linear-gradient(120deg,#08393B 0%,#0B4A4C 30%,#0E7C86 62%,#0A5F66 100%) 0 0/220% 100%;animation:flow 12s ease-in-out infinite;overflow:hidden;
  box-shadow:0 20px 38px -18px rgba(11,74,76,.7),inset 0 1px 0 rgba(255,255,255,.16)}
.m-paid .k{opacity:1}
.m-paid::before{content:"";position:absolute;top:-20%;bottom:-20%;width:30%;inset-inline-start:-40%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:sweep 6s ease-in-out infinite 1s}
@keyframes sweep{0%{inset-inline-start:-40%}35%,100%{inset-inline-start:130%}}
.m-due{background:linear-gradient(135deg,#EAF7F6,#D7EFED);border:1px solid var(--mint2)}
.m-rev{background:linear-gradient(180deg,#fff,var(--sunk))}
.mtile:hover{box-shadow:0 22px 40px -20px rgba(14,90,96,.4)}

/* the Home welcome: an animated gradient with a 3D scene */
.welcome{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 430px;align-items:center;gap:16px;min-height:230px;padding:30px 34px;border-radius:26px;color:#fff;isolation:isolate;overflow:hidden;
  background:linear-gradient(120deg,#05282A 0%,#0B4A4C 30%,#0E7C86 60%,#0E9BB8 85%,#0B5F66 100%) 0 0/200% 200%;
  animation:flow 18s ease-in-out infinite,rise .7s var(--ease) backwards;
  box-shadow:0 34px 64px -28px rgba(11,74,76,.65),inset 0 1px 0 rgba(255,255,255,.16)}
.welcome::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,34,36,.62) 0%,rgba(4,34,36,.25) 55%,transparent 80%)}
html[dir="rtl"] .welcome::before{background:linear-gradient(270deg,rgba(4,34,36,.62) 0%,rgba(4,34,36,.25) 55%,transparent 80%)}
.welcome::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1.3px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(60% 90% at 78% 45%,#000,transparent);mask-image:radial-gradient(60% 90% at 78% 45%,#000,transparent)}
html[dir="rtl"] .welcome::after{-webkit-mask-image:radial-gradient(60% 90% at 22% 45%,#000,transparent);mask-image:radial-gradient(60% 90% at 22% 45%,#000,transparent)}
.welcome h1{font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.15;text-shadow:0 2px 18px rgba(0,0,0,.2)}
.welcome p{color:#D3EEEF;margin-top:6px;font-weight:500}
.welcome .chips{margin-top:20px}
.welcome .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.chip .d.live{background:#7FE3F0;animation:live 2.2s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(127,227,240,.75)}70%,100%{box-shadow:0 0 0 7px rgba(127,227,240,0)}}

.scene{position:relative;height:200px;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.orb{position:absolute;left:50%;top:50%;width:168px;height:168px;translate:-50% -50%;transform-style:preserve-3d}
.orb-rings{position:absolute;inset:0;transform-style:preserve-3d}
.ring{position:absolute;inset:0;border-radius:50%;padding:2px;
  background:conic-gradient(from 0deg,rgba(127,227,240,0) 0deg,rgba(127,227,240,.25) 120deg,#BDF6FF 300deg,rgba(255,255,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ring.r1{animation:r1 7s linear infinite}
.ring.r2{inset:10px;animation:r2 9s linear infinite}
.ring.r3{inset:-12px;opacity:.7;animation:r3 12s linear infinite}
@keyframes r1{from{transform:rotateX(72deg) rotateZ(0)}to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes r2{from{transform:rotateY(70deg) rotateZ(0)}to{transform:rotateY(70deg) rotateZ(-360deg)}}
@keyframes r3{from{transform:rotateX(60deg) rotateY(-50deg) rotateZ(0)}to{transform:rotateX(60deg) rotateY(-50deg) rotateZ(360deg)}}
.spark{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(127,227,240,.85)}
.spark.s1{animation:sp1 7s linear infinite}
.spark.s2{animation:sp2 9s linear infinite;width:5px;height:5px}
.spark.s3{animation:sp3 12s linear infinite}
@keyframes sp1{from{transform:rotateX(72deg) rotateZ(0) translateX(84px)}to{transform:rotateX(72deg) rotateZ(360deg) translateX(84px)}}
@keyframes sp2{from{transform:rotateY(70deg) rotateZ(0) translateX(-74px)}to{transform:rotateY(70deg) rotateZ(-360deg) translateX(-74px)}}
@keyframes sp3{from{transform:rotateX(60deg) rotateY(-50deg) rotateZ(90deg) translateX(96px)}to{transform:rotateX(60deg) rotateY(-50deg) rotateZ(450deg) translateX(96px)}}
.orb-core{position:absolute;inset:44px;border-radius:50%;display:grid;place-items:center;transform:translateZ(30px);animation:breathe 4.5s ease-in-out infinite;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7),rgba(127,227,240,.35) 30%,rgba(14,124,134,.65) 66%,rgba(5,50,52,.9));
  box-shadow:0 0 50px rgba(127,227,240,.5),inset 0 -10px 20px rgba(0,0,0,.28),inset 0 6px 14px rgba(255,255,255,.4)}
.orb-core img{filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}
@keyframes breathe{50%{transform:translateZ(30px) scale(1.07)}}
.float-card{position:absolute;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:14px;min-width:150px;max-width:200px;color:var(--ink);
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(240,250,250,.88));border:1px solid rgba(255,255,255,.7);
  box-shadow:0 22px 40px -14px rgba(0,0,0,.45),inset 0 1px 0 #fff}
.float-card b{display:block;font-size:15px;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.float-card small{display:block;font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap}
.fc-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.fc1{top:4px;inset-inline-start:0;animation:bob1 6s ease-in-out infinite}
.fc2{bottom:0;inset-inline-start:36px;animation:bob2 7s ease-in-out infinite}
.fc3{top:62px;inset-inline-end:0;animation:bob3 6.5s ease-in-out infinite}
@keyframes bob1{0%,100%{transform:translateZ(70px) translateY(0) rotate(-3deg)}50%{transform:translateZ(70px) translateY(-10px) rotate(-1.5deg)}}
@keyframes bob2{0%,100%{transform:translateZ(40px) translateY(0) rotate(2deg)}50%{transform:translateZ(40px) translateY(-8px) rotate(3deg)}}
@keyframes bob3{0%,100%{transform:translateZ(90px) translateY(0) rotate(2.5deg)}50%{transform:translateZ(90px) translateY(-12px) rotate(1deg)}}

/* buttons: a gradient that travels on hover, a sheen, a 3D press */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .2s var(--ease),box-shadow .25s,background-position .6s var(--ease),background-color .15s,border-color .15s}
.btn:not(:disabled):active{transform:translateY(1px) scale(.97)}
.btn-p{background:linear-gradient(120deg,#0A3F41 0%,#0E7C86 50%,#0B5F66 100%) 0 0/220% 100%;box-shadow:0 10px 20px -8px rgba(14,124,134,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-p:not(:disabled):hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(14,124,134,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-p::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;width:45%;inset-inline-start:-60%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:inset-inline-start .7s var(--ease)}
.btn-p:not(:disabled):hover::after{inset-inline-start:125%}
.btn-s:not(:disabled):hover{border-color:var(--teal);box-shadow:0 8px 18px -10px rgba(14,90,96,.45);transform:translateY(-1px)}

/* top bar */
.search{transition:border-color .25s,box-shadow .25s}
.search:hover{border-color:var(--mint2);box-shadow:0 10px 26px -14px rgba(14,90,96,.4)}
.iconbtn,.lang{transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.iconbtn:hover,.lang:hover{border-color:var(--mint2);transform:translateY(-1px);box-shadow:0 10px 20px -12px rgba(14,90,96,.45)}
.iconbtn .dot{animation:ping 2.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(179,51,72,.55)}70%,100%{box-shadow:0 0 0 8px rgba(179,51,72,0)}}
.me .av{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(14,155,184,.35),0 6px 14px -4px rgba(14,90,96,.5)}

/* tabs and wizard steps */
.tabs button{transition:background .25s,color .25s,box-shadow .25s}
.tabs button.on{background:var(--grad-text);color:#fff;box-shadow:0 6px 14px -6px rgba(14,124,134,.7)}
.tabs button.on em{color:#CDEBEC}
.steps li button{transition:border-color .25s,box-shadow .25s}
.steps li.now .c{background:var(--grad-text);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,124,134,.45)}70%,100%{box-shadow:0 0 0 8px rgba(14,124,134,0)}}

/* lists and tables: a teal edge follows the pointer */
.tbl tbody tr.click td{transition:background .2s}
.tbl tbody tr.click:hover td:first-child{box-shadow:inset 3px 0 0 var(--teal)}
html[dir="rtl"] .tbl tbody tr.click:hover td:first-child{box-shadow:inset -3px 0 0 var(--teal)}
.li,.task,.cand{transition:background .25s,transform .3s var(--ease)}
.li:hover,.task:hover{transform:translateX(3px)}
html[dir="rtl"] .li:hover,html[dir="rtl"] .task:hover{transform:translateX(-3px)}
.doclink{transition:transform .2s var(--ease),box-shadow .2s}
.doclink:hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(14,124,134,.6)}

/* detail heroes: a flowing top edge; a floating tile */
.hero{position:relative}
.hero::before{content:"";position:absolute;inset-inline:-1px;top:-1px;height:4px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(90deg,#0B4A4C,#0E9BB8,#7FE3F0,#0E7C86,#0B4A4C) 0 0/200% 100%;animation:flow 7s linear infinite}
.hero .tile{animation:float 5s ease-in-out infinite;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 12px 22px -12px currentColor}
.jstep.done::before{animation:grow .9s var(--ease) backwards;transform-origin:left center}
html[dir="rtl"] .jstep.done::before{transform-origin:right center}
.jstep.now .c{animation:pulse 2.2s infinite}
.empty-i{animation:float 4s ease-in-out infinite;box-shadow:0 12px 22px -12px rgba(14,124,134,.7)}

/* charts grow into place */
.bars .b i{animation:growY 1s var(--ease) backwards;transform-origin:bottom}
.bars .b:nth-child(2) i{animation-delay:.06s} .bars .b:nth-child(3) i{animation-delay:.12s} .bars .b:nth-child(4) i{animation-delay:.18s}
.bars .b:nth-child(5) i{animation-delay:.24s} .bars .b:nth-child(6) i{animation-delay:.3s} .bars .b:nth-child(n+7) i{animation-delay:.36s}
@keyframes growY{from{transform:scaleY(0)}}
.hbar .track i{animation:grow 1.1s var(--ease) backwards;transform-origin:left center}
html[dir="rtl"] .hbar .track i{transform-origin:right center}
.stat{transition:transform .35s var(--ease),box-shadow .35s}
.stat:hover{transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(14,90,96,.4)}

/* overlays open in 3D */
.layer,.palette{animation:fade .25s ease backwards}
.modal,.palette .box{animation:pop3d .45s cubic-bezier(.2,.85,.25,1) backwards}
@keyframes pop3d{from{opacity:0;transform:perspective(1100px) rotateX(12deg) translateY(28px) scale(.96)}}
.drop-menu,.notif,.combo-list{animation:drop .24s var(--ease) backwards;transform-origin:top center}
@keyframes drop{from{opacity:0;transform:perspective(600px) rotateX(-14deg) translateY(-6px)}}
.toast{animation:toast .5s cubic-bezier(.2,1.25,.4,1) backwards}
@keyframes toast{from{opacity:0;transform:translateY(22px) scale(.92)}}

/* loading: three rings turning in 3D */
.loader3d{width:30px;height:30px;position:relative;transform-style:preserve-3d;flex:none}
.loader3d i{position:absolute;inset:0;border-radius:50%;border:2.5px solid transparent;border-top-color:var(--teal);border-inline-end-color:var(--aqua)}
.loader3d i:nth-child(1){animation:l1 1.3s linear infinite}
.loader3d i:nth-child(2){inset:4px;animation:l2 1.6s linear infinite;border-top-color:var(--aqua)}
.loader3d i:nth-child(3){inset:9px;animation:l3 1.1s linear infinite;border-top-color:var(--deep)}
@keyframes l1{from{transform:perspective(120px) rotateX(60deg) rotateZ(0)}to{transform:perspective(120px) rotateX(60deg) rotateZ(360deg)}}
@keyframes l2{from{transform:perspective(120px) rotateY(60deg) rotateZ(0)}to{transform:perspective(120px) rotateY(60deg) rotateZ(-360deg)}}
@keyframes l3{to{transform:rotate(360deg)}}

/* sign-in: a gradient world with a floating stack of documents */
.auth-art{background:linear-gradient(150deg,#05282A 0%,#0A4244 35%,#0B5F66 72%,#0E7C86 100%);isolation:isolate;gap:36px}
.auth-art li .ic{background:rgba(255,255,255,.14);border-radius:50%;padding:3px;width:22px;height:22px;color:#7FE3F0}
.auth-scene{position:relative;flex:1;min-height:250px;display:grid;place-items:center;perspective:1000px}
.stack3d{position:relative;width:250px;height:172px;transform-style:preserve-3d;animation:stack 14s ease-in-out infinite}
@keyframes stack{0%,100%{transform:rotateX(55deg) rotateZ(-30deg)}50%{transform:rotateX(48deg) rotateZ(-20deg) translateY(-10px)}}
.sheet{position:absolute;inset:0;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:9px;color:var(--ink);
  background:linear-gradient(160deg,#fff,#E7F5F5);box-shadow:0 34px 50px -18px rgba(0,0,0,.55),inset 0 1px 0 #fff}
.sh1{animation:lift1 7s ease-in-out infinite}
.sh2{transform:translate3d(18px,18px,-40px);opacity:.94}
.sh3{transform:translate3d(36px,36px,-80px);opacity:.86}
@keyframes lift1{0%,100%{transform:translateZ(36px)}50%{transform:translateZ(64px)}}
.sh-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sh-top b{font-size:13px;font-weight:800;color:var(--green);margin-inline-end:auto}
.sh-chip{display:inline-grid;place-items:center;min-width:42px;height:24px;padding:0 8px;border-radius:8px;font-size:11px;font-weight:800;color:#fff;background:var(--grad-text)}
.sh-chip.c2{background:linear-gradient(135deg,#2F6FB0,#5F4FC4)}
.sh-chip.c3{background:linear-gradient(135deg,#08724E,#1FA67A);min-width:24px;padding:0}
.sh-ok{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--green-bg);color:var(--green)}
.sheet .ln{display:block;height:7px;border-radius:7px;background:linear-gradient(90deg,#CFE5E5,#E3F0F0)}
.ln.w50{width:50%}.ln.w60{width:60%}.ln.w70{width:70%}.ln.w80{width:80%}.ln.w90{width:90%}
.sh-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between}
.sh-qr{width:38px;height:38px;border-radius:6px;background:repeating-conic-gradient(var(--deep) 0 25%,#fff 0 50%) 0 0/9.5px 9.5px;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.sh-stamp{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green);border:2px solid var(--green);border-radius:8px;padding:3px 8px;transform:rotate(-8deg)}
.sh-bars{margin-top:auto;display:flex;align-items:flex-end;gap:8px;height:44px}
.sh-bars i{flex:1;border-radius:5px 5px 2px 2px;background:var(--grad)}
.sh-checks{display:flex;gap:8px;margin-top:8px}
.sh-checks span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--green-bg);color:var(--green)}
.glow{position:absolute;border-radius:50%;filter:blur(50px);z-index:-1;pointer-events:none}
.glow.g1{width:280px;height:280px;background:rgba(14,155,184,.45);top:10%;inset-inline-end:8%;animation:orb1 16s ease-in-out infinite}
.glow.g2{width:220px;height:220px;background:rgba(46,196,182,.3);bottom:0;inset-inline-start:12%;animation:orb2 20s ease-in-out infinite}
/* the whole sign-in page sits in one gradient; the form floats on it as a white card */
.auth{background:linear-gradient(150deg,#05282A 0%,#0A4244 30%,#0B5F66 62%,#0E7C86 100%);background-attachment:fixed}
.auth{overflow:hidden}
.auth-art{background:transparent;overflow:visible} /* glows clipped at the panel edge drew a seam down the page */
.auth-art::before{display:none}
.auth-form{position:relative;isolation:isolate;padding:40px 24px;background:radial-gradient(40% 40% at 60% 15%,rgba(127,227,240,.16),transparent 70%),radial-gradient(40% 35% at 55% 95%,rgba(46,196,182,.14),transparent 70%)}
.auth-col{width:min(452px,100%);display:flex;flex-direction:column;gap:14px}
.auth-card{animation:pop3d .6s cubic-bezier(.2,.85,.25,1) backwards;background:#fff;color:var(--ink);border-radius:24px;padding:36px 34px 30px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.35),inset 0 1px 0 #fff}
.auth-body{display:flex;flex-direction:column;gap:18px}

/* language: a glass pill on the gradient, above the card */
.auth-lang{align-self:flex-end;display:inline-flex;align-items:center;gap:2px;padding:4px 4px 4px 10px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#9FD8DA;
  animation:fadeup .5s .1s ease-out backwards}
html[dir="rtl"] .auth-lang{padding:4px 10px 4px 4px}
.auth-lang .ic{margin-inline-end:4px}
.auth-lang button{border:0;background:none;color:rgba(255,255,255,.86);font-weight:700;font-size:12.5px;padding:6px 12px;border-radius:999px;transition:background .15s,color .15s}
.auth-lang button:hover{background:rgba(255,255,255,.12);color:#fff}
.auth-lang button.on{background:#fff;color:var(--deep);box-shadow:0 4px 12px rgba(0,0,0,.18)}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}}

/* card heading */
.auth-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.auth-badge{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--grad);margin-bottom:8px;
  box-shadow:0 10px 22px -8px rgba(14,124,134,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.auth-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
html[lang="ar"] .auth-eyebrow{letter-spacing:0;font-size:12px}
.auth-head h2{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.auth-head p{font-size:14px;line-height:1.5}

/* inputs with an icon, and a button at the end */
.lbl-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ii{position:relative}
.field .ii input{height:50px;padding-inline-start:44px;font-size:15px;border-radius:13px}
.ii.has-after input{padding-inline-end:50px}
.ii-l{position:absolute;inset-inline-start:15px;top:50%;translate:0 -50%;color:var(--faint);pointer-events:none;transition:color .15s}
.ii:focus-within .ii-l{color:var(--teal)}
.ii-r{position:absolute;inset-inline-end:7px;top:50%;translate:0 -50%;width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--muted);display:grid;place-items:center}
.ii-r:hover{background:var(--mint);color:var(--teal)}
.caps{display:inline-flex;align-items:center;gap:5px;color:#8A4B06;font-weight:700}
.btn-block{width:100%;height:52px;font-size:15px;border-radius:14px}
.btn-block .go{transition:translate .2s}
.btn-block:not(:disabled):hover .go{translate:4px 0}
html[dir="rtl"] .btn-block:not(:disabled):hover .go{translate:-4px 0}
.auth-sec{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--muted);padding:12px 14px;border-radius:13px;background:var(--sunk);border:1px solid var(--line2)}
.auth-sec .ic{color:var(--teal);flex:none}
.auth-links{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.auth-wait{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* demo accounts fold out */
.demo-x{border:1px dashed var(--mint2);border-radius:15px;background:#fff}
.demo-x summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none;border-radius:15px}
.demo-x summary::-webkit-details-marker{display:none}
.demo-x summary:hover{background:var(--sunk)}
.demo-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--mint);color:var(--teal);flex:none}
.demo-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.demo-t b{font-size:13.5px}
.demo-t small{font-size:12px;color:var(--muted)}
.demo-t code{font-size:12px;color:var(--deep);background:var(--mint);padding:1px 6px;border-radius:6px}
.demo-chev{color:var(--muted);transition:rotate .2s}
.demo-x[open] .demo-chev{rotate:180deg}
.demo-list{list-style:none;margin:0;padding:4px 8px 8px;display:grid;gap:2px;max-height:300px;overflow:auto;border-top:1px solid var(--line2)}
.demo-list button{width:100%;display:flex;align-items:center;gap:12px;padding:9px 10px;border:0;border-radius:11px;background:none;text-align:start;color:var(--ink)}
.demo-list button:hover,.demo-list button.on{background:var(--mint)}
.demo-list .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:var(--grad)}
.demo-list .who{display:flex;flex-direction:column;min-width:0;flex:1}
.demo-list .who b{font-size:13px}
.demo-list .who small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-list .who .em{color:var(--teal);font-weight:600;text-align:start}
.demo-list button>.ic{color:var(--faint);flex:none}
.demo-list button.on>.ic{color:var(--green)}
.demo-note{font-size:12px;color:var(--muted);padding:0 16px 12px;line-height:1.5}

/* the code step */
.auth-steps{display:flex;align-items:center;gap:6px}
.auth-steps i{width:28px;height:4px;border-radius:4px;background:var(--line)}
.auth-steps i.on{background:var(--grad)}
.auth-steps small{margin-inline-start:6px;font-size:12px;font-weight:700;color:var(--muted)}
.demo-code{display:inline!important;font-size:16px;letter-spacing:2px}
.code-boxes{display:flex;gap:10px;justify-content:space-between}
.code-boxes input{flex:1;width:0;min-width:0;max-width:58px;height:62px;text-align:center;font-size:24px;font-weight:800;color:var(--deep);border:1.5px solid var(--line);border-radius:14px;background:var(--sunk);transition:border-color .12s,box-shadow .12s,background .12s,transform .12s}
.code-boxes input.f{border-color:var(--mint2);background:#fff}
.code-boxes input:focus{border-color:var(--teal);background:#fff;box-shadow:var(--focus);outline:none;transform:translateY(-1px)}

/* sign-in motion: the scene leans towards the pointer; the five kinds of
   provider circle the documents in 3D, always facing the viewer; a heartbeat
   runs underneath. With reduced motion everything stands still, spread out. */
.auth-scene{transform-style:preserve-3d}
.world{position:relative;display:grid;place-items:center;transform-style:preserve-3d;
  transform:rotateX(calc(var(--py,0) * -10deg)) rotateY(calc(var(--px,0) * 14deg));transition:transform .5s var(--ease,ease-out)}
.world > *{grid-area:1/1}
.orbit{--r:215px;position:absolute;left:50%;top:50%;margin:calc(var(--r) * -1);width:calc(var(--r) * 2);height:calc(var(--r) * 2);transform-style:preserve-3d;transform:rotateX(72deg) translateZ(-20px);pointer-events:none}
.orbit-line{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(159,216,218,.32);box-shadow:0 0 40px rgba(127,227,240,.12),inset 0 0 40px rgba(127,227,240,.1)}
.arm{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateZ(calc(var(--i) * 72deg));
  animation:orbit-spin 30s linear infinite;animation-delay:calc(var(--i) * -6s)}
.moon{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:translateX(var(--r)) rotateZ(calc(var(--i) * -72deg)) rotateX(-72deg);
  animation:orbit-face 30s linear infinite;animation-delay:calc(var(--i) * -6s)}
@keyframes orbit-spin{from{transform:rotateZ(0)}to{transform:rotateZ(360deg)}}
@keyframes orbit-face{from{transform:translateX(var(--r)) rotateZ(0) rotateX(-72deg)}to{transform:translateX(var(--r)) rotateZ(-360deg) rotateX(-72deg)}}
.planet{position:absolute;translate:-50% -50%;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:7px 12px 7px 8px;border-radius:999px;
  background:rgba(6,52,56,.78);border:1px solid rgba(159,216,218,.38);color:#fff;font-size:12px;box-shadow:0 14px 28px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14)}
html[dir="rtl"] .planet{padding:7px 8px 7px 12px}
.planet .ic{width:26px;height:26px;padding:5px;border-radius:50%;background:linear-gradient(135deg,#0E9BB8,#2EC4B6);color:#fff;flex:none}
.planet b{font-weight:700}
.ecg{position:absolute;inset-inline:-20px;bottom:6%;width:calc(100% + 40px);height:70px;z-index:-1;overflow:visible;transform:translateZ(-120px)}
.ecg path{fill:none;stroke:rgba(159,216,218,.16);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ecg .beat{stroke:#7FE3F0;stroke-width:2.2;stroke-dasharray:110 890;stroke-dashoffset:1000;filter:drop-shadow(0 0 6px rgba(127,227,240,.9));animation:beat 4s linear infinite}
html[dir="rtl"] .ecg{scale:-1 1}
@keyframes beat{to{stroke-dashoffset:0}}

/* the card: a soft light slowly travels round its edge */
@property --halo{syntax:"<angle>";initial-value:0deg;inherits:false}
.auth-stage{position:relative}
.auth-stage > .auth-card{position:relative}
.auth-halo{position:absolute;inset:-2px;border-radius:26px;pointer-events:none;opacity:.6;filter:blur(16px);
  background:conic-gradient(from var(--halo),transparent 0 55%,rgba(127,227,240,.9) 70%,rgba(46,196,182,.6) 80%,transparent 92%);
  animation:halo 9s linear infinite,fadeup 1s .5s ease-out backwards}
@keyframes halo{to{--halo:360deg}}
.auth-body{animation:fadeup .35s ease-out}

/* the sign-in button: the primary button's light sweeps across by itself now and then */
.btn-shine:not(:disabled)::after{animation:sweep 6s 1.8s var(--ease,ease) infinite}
@keyframes sweep{0%{inset-inline-start:-60%}22%,100%{inset-inline-start:125%}}

/* signed in: a check draws itself before the portal opens */
.auth-ok{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:26px 0 18px;animation:pop3d .5s cubic-bezier(.2,.85,.25,1) backwards}
.ok-ring{width:76px;height:76px;margin-bottom:6px;filter:drop-shadow(0 12px 18px rgba(8,114,78,.25))}
.ok-ring circle{transform:rotate(-90deg);transform-origin:center;transform-box:fill-box;fill:var(--green-bg);stroke:var(--green);stroke-width:2.5;stroke-dasharray:150;stroke-dashoffset:150;animation:draw .55s ease-out forwards}
.ok-ring path{fill:none;stroke:var(--green);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .35s .45s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.auth-ok h2{font-size:24px;font-weight:800;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){.ok-ring circle,.ok-ring path{stroke-dashoffset:0}}

@media (max-width:480px){
  .auth-form{padding:20px 14px 28px}
  .auth-card{padding:26px 20px 22px;border-radius:20px}
  .auth-lang{align-self:center}
  .auth-head h2{font-size:24px}
  .code-boxes{gap:6px}.code-boxes input{height:54px;font-size:21px}
}

/* ---------- team notes, mentions, hand-offs ---------- */
.notes{display:flex;flex-direction:column;gap:12px}
.notes-empty{font-size:13px}
.handoff-now{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;background:var(--violet-bg);color:var(--violet)}
.handoff-now div{flex:1;min-width:0;display:flex;flex-direction:column}
.handoff-now span{font-size:12px;opacity:.85}
.note-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.note-list li{display:flex;gap:10px;align-items:flex-start}
.note-list .av,.mention-pick .av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--grad)}
.note-list li > div{flex:1;min-width:0;background:var(--sunk);border:1px solid var(--line2);border-radius:4px 14px 14px 14px;padding:9px 12px}
html[dir="rtl"] .note-list li > div{border-radius:14px 4px 14px 14px}
.note-list li.handoff > div{background:#F6F3FF;border-color:#E4DCFB}
.note-list header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.note-list header span{color:var(--faint)}
.note-list p{margin:4px 0 0;font-size:13.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.note-list small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.mention{color:var(--teal);font-weight:800;background:var(--mint);border-radius:6px;padding:0 4px}
.note-new{display:flex;flex-direction:column;gap:8px}
.note-box{position:relative}
.note-box textarea{width:100%;min-height:64px;resize:vertical;border:1.5px solid var(--line);border-radius:12px;background:var(--sunk);padding:10px 12px;font:inherit;font-size:14px}
.note-box textarea:focus{border-color:var(--teal);background:#fff;box-shadow:var(--focus);outline:none}
.mention-pick{position:absolute;inset-inline-start:8px;top:calc(100% - 6px);z-index:20;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);min-width:240px}
.mention-pick button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:6px 8px;border-radius:9px;text-align:start}
.mention-pick button:hover,.mention-pick li:first-child button{background:var(--mint)}
.mention-pick i{font-style:normal;color:var(--muted);font-size:12px;margin-inline-start:auto}
.note-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.handto{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:0 8px;height:34px;color:var(--teal);background:#fff}
.handto select{border:0;background:none;font-weight:700;font-size:12.5px;color:var(--ink);max-width:220px}

/* ---------- connection bar and offline drafts ---------- */
.connbar{display:flex;align-items:center;gap:10px;margin:0 28px;padding:10px 14px;border-radius:12px;font-size:13px;font-weight:600}
.connbar.off{background:#FFF4E5;color:#7A4405;border:1px solid #F3DDB0}
.connbar.wait{background:var(--blue-bg);color:#24568A}
.connbar span{flex:1;min-width:0}
.outbox{display:flex;align-items:center;gap:12px;margin:14px 16px 4px;padding:12px 14px;border-radius:14px;background:#FFF8EC;border:1px solid #F3DDB0;color:#7A4405}
.outbox div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.outbox span{font-size:12.5px}
@media (max-width:860px){.connbar{margin:0 12px}.outbox{flex-wrap:wrap}}

/* ---------- page headings: the page's menu icon, then title and actions ---------- */
.ph{justify-content:flex-start;align-items:center;column-gap:16px}
.ph > .pg-ic + div{flex:1 1 0;min-width:0}
.pg-ic{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;color:#fff;background:var(--grad);flex:none;
  box-shadow:0 14px 26px -14px rgba(14,124,134,.7),inset 0 1px 0 rgba(255,255,255,.25);animation:pop3d .5s cubic-bezier(.2,.85,.25,1) backwards}
.tbl .id,.tbl td .mono,.tbl a.id{white-space:nowrap}

/* ---------- tab rows scroll sideways instead of being cut off ---------- */
.tabs{scrollbar-width:none;scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{display:none}
.tabs button{scroll-snap-align:start}

/* ---------- copilot ---------- */
.cp-mode{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--deep);background:var(--mint);border-radius:999px;padding:7px 12px}
.cp{display:flex;flex-direction:column;margin-top:18px;min-height:calc(100vh - 230px);overflow:hidden}
.cp-thread{flex:1;padding:24px 24px 8px;display:flex;flex-direction:column;gap:22px;overflow:auto}
.cp-hello{margin:auto;max-width:640px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 0}
.cp-orb{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;background:var(--grad);box-shadow:0 18px 34px -14px rgba(14,124,134,.6),inset 0 1px 0 rgba(255,255,255,.25);margin-bottom:6px;animation:pop3d .6s cubic-bezier(.2,.85,.25,1) backwards}
.cp-hello h2{font-size:24px;font-weight:800;letter-spacing:-.02em}
.cp-hello p{color:var(--muted);max-width:520px}
.cp-start{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin-top:14px}
.cp-start button{display:flex;align-items:center;gap:10px;text-align:start;border:1px solid var(--line);background:var(--sunk);border-radius:14px;padding:13px 14px;font-weight:700;font-size:13.5px;color:var(--ink);transition:background .15s,border-color .15s,transform .15s}
.cp-start button .ic{color:var(--teal);flex:none}
.cp-start button:hover{background:var(--mint);border-color:var(--mint2);transform:translateY(-1px)}
.cp-rules{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:12.5px;color:var(--muted)}
.cp-rules li{display:inline-flex;align-items:center;gap:6px}
.cp-rules .ic{color:var(--green)}
.cp-turn{display:flex;flex-direction:column;gap:12px;animation:fadeup .35s ease-out backwards}
.cp-q{display:flex;justify-content:flex-end}
.cp-q span{max-width:min(620px,85%);background:var(--grad);color:#fff;font-weight:600;padding:11px 16px;border-radius:18px 18px 6px 18px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 10px 22px -12px rgba(14,124,134,.6)}
html[dir="rtl"] .cp-q span{border-radius:18px 18px 18px 6px}
.cp-row{display:flex;gap:12px;align-items:flex-start}
.cp-av{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--grad);flex:none;box-shadow:0 8px 16px -8px rgba(14,124,134,.6)}
.cp-a{flex:1;min-width:0;max-width:760px;background:#fff;border:1px solid var(--line);border-radius:6px 18px 18px 18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 26px -18px rgba(15,42,45,.35)}
html[dir="rtl"] .cp-a{border-radius:18px 6px 18px 18px}
.cp-a.refused{background:#FFFBF2;border-color:#F3DDB0}
.cp-a.nf{background:var(--sunk)}
.cp-flag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#8A4B06;text-transform:uppercase;letter-spacing:.06em}
html[lang="ar"] .cp-flag{letter-spacing:0}
.cp-notice{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:#24568A;background:var(--blue-bg);border-radius:10px;padding:8px 10px}
.cp-body{display:flex;flex-direction:column;gap:8px;line-height:1.6;font-size:14px;color:var(--ink2)}
.cp-body ul{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:5px}
.cp-body li::marker{color:var(--teal)}
.cp-id{font-weight:800;color:var(--teal);text-decoration:none;border-bottom:1.5px solid var(--mint2);unicode-bidi:isolate;white-space:nowrap}
.cp-id:hover{border-color:var(--teal)}
.cp-id.plain{color:var(--ink);border:0}
.cp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:2px 0}
.cp-facts div{background:var(--sunk);border:1px solid var(--line2);border-radius:12px;padding:9px 11px}
.cp-facts dt{font-size:11.5px;font-weight:700;color:var(--muted)}
.cp-facts dd{margin:2px 0 0;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.cp-terms{display:flex;flex-wrap:wrap;gap:6px}
.cp-terms span{font-size:12px;font-weight:700;color:var(--deep);background:var(--mint);border-radius:999px;padding:4px 10px}
.cp-cites{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:10px;border-top:1px dashed var(--line)}
.cp-cites small{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-inline-end:4px}
html[lang="ar"] .cp-cites small{letter-spacing:0}
.cp-cite{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--mint2);background:#fff;border-radius:10px;padding:5px 9px;font-size:12px;color:var(--ink);text-decoration:none;transition:background .15s,border-color .15s}
.cp-cite .ic{color:var(--teal)}
.cp-cite i{font-style:normal;color:var(--muted)}
a.cp-cite:hover{background:var(--mint);border-color:var(--teal)}
.cp-cite .go{color:var(--faint);transition:translate .15s}
a.cp-cite:hover .go{translate:2px 0}
.cp-sugg{display:flex;flex-wrap:wrap;gap:6px}
.cp-sugg button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--teal)}
.cp-sugg button:hover{background:var(--mint)}
.cp-meta{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--faint)}
.cp-typing{flex-direction:row;align-items:center;gap:5px;max-width:260px;color:var(--muted);font-size:13px}
.cp-typing i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:cpdot 1s ease-in-out infinite}
.cp-typing i:nth-child(2){animation-delay:.15s}.cp-typing i:nth-child(3){animation-delay:.3s}
.cp-typing span{margin-inline-start:6px}
@keyframes cpdot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.cp-err{padding:0 24px}
.cp-ask{display:flex;gap:10px;align-items:flex-end;margin:12px 24px 0;padding:8px;border:1.5px solid var(--line);border-radius:18px;background:var(--sunk);transition:border-color .15s,box-shadow .15s,background .15s}
.cp-ask:focus-within{border-color:var(--teal);background:#fff;box-shadow:var(--focus)}
.cp-ask textarea{flex:1;border:0;background:none;resize:none;outline:none;font:inherit;font-size:15px;font-weight:500;padding:10px 8px;min-height:44px;max-height:160px;field-sizing:content}
.cp-ask .btn{height:44px;border-radius:13px;padding:0 16px}
.cp-foot{font-size:12px;color:var(--faint);text-align:center;padding:10px 24px 16px}
@media (max-width:860px){
  .cp{min-height:calc(100vh - 190px)}
  .cp-thread{padding:18px 14px 6px}
  .cp-start{grid-template-columns:minmax(0,1fr)}
  .cp-ask{margin:10px 12px 0}
  .cp-ask-l{display:none}
  .cp-av{display:none}
  .cp-a{border-radius:16px}
  .cp-foot{padding:8px 14px 12px}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){.welcome{grid-template-columns:1fr}.welcome .scene{display:none}}
@media (max-width:1200px){.grid-a,.grid-b,.grid-side,.grid2{grid-template-columns:1fr}.money-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.idoc{grid-template-columns:1fr}.idoc .pv{border-inline-end:0;border-bottom:1px solid var(--line);min-height:260px}.idoc .pv iframe,.idoc .pv img{min-height:260px}.auth{grid-template-columns:minmax(0,1fr)}.auth-art{display:none}.auth-logo{display:block}.auth-badge{display:none}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:280px;z-index:60;transform:translateX(-105%);transition:transform .2s;box-shadow:var(--shadow-lg)}
  html[dir="rtl"] .side{transform:translateX(105%)}
  .side.open{transform:none!important}
  .scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(4,30,32,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fade .25s ease backwards}
  .welcome{padding:22px 20px;min-height:0;border-radius:20px}.welcome h1{font-size:22px}
  .li:hover,.task:hover,html[dir="rtl"] .li:hover,html[dir="rtl"] .task:hover{transform:none}
  .iconbtn.menu-btn{display:grid}
  .top-mark{display:grid;place-items:center;flex:none;padding:0 2px}
  .top{padding:10px 16px;gap:8px}.page{padding:6px 16px 32px}
  .search .s-long{display:none}.search .s-short{display:inline}
  .top .sp{display:none}.search{padding:0 12px}
  /* claims become cards on a phone: id and amount, patient and stage, date, notes */
  .tbl-wrap table.tbl.claim-cards{min-width:0}
  .claim-cards thead{display:none}
  .claim-cards,.claim-cards tbody{display:block}
  .claim-cards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id amt" "who stage" "date date" "notes notes";gap:6px 12px;padding:14px 16px;border-bottom:1px solid var(--line2)}
  .claim-cards tr:last-child{border-bottom:0}
  .claim-cards td{display:block;padding:0;border:0!important;background:none!important;box-shadow:none!important}
  .claim-cards td:nth-child(1){grid-area:id}.claim-cards td:nth-child(2){grid-area:who}.claim-cards td:nth-child(3){grid-area:date}
  .claim-cards td:nth-child(4){grid-area:stage;justify-self:end;text-align:end}.claim-cards td:nth-child(5){grid-area:notes}.claim-cards td:nth-child(6){grid-area:amt;justify-self:end}
  .claim-cards td[data-l]{font-size:12.5px;color:var(--ink2)}
  .claim-cards td[data-l]::before{content:attr(data-l) " · ";color:var(--muted)}
  .claim-cards td:empty{display:none}
  .claim-cards tbody tr.click:hover{background:var(--sunk)}
  .me>button div,.lang,.search kbd{display:none}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .erow{grid-template-columns:1fr}
  .li{grid-template-columns:minmax(0,1fr) auto}.li .hide-m{display:none}
  .quick{grid-template-columns:1fr}
  .form,.form3,.kv-2,.kv-3{grid-template-columns:1fr}
  .lineedit{grid-template-columns:1fr 1fr}
  .lines .ln{grid-template-columns:minmax(0,1fr) auto}.lines .ln>.hide-m{display:none}
  .money-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:auto minmax(0,1fr)}.hero>.acts{grid-column:1/-1}
  .filters .input{width:100%}
  .tbl-wrap table.tbl{min-width:640px}
  .hbar{grid-template-columns:minmax(0,1fr) 80px 40px}
}

/* ---------- phones: headings, tiles, tabs, and every table as labelled cards ---------- */
@media (max-width:860px){
  .pg-ic{width:42px;height:42px;border-radius:13px}
  .pg-ic .ic{width:19px;height:19px}
  .ph > .pg-ic + div{flex-basis:calc(100% - 60px)}
  .ph h1{font-size:23px}
  .grid2[style],.money-strip[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .stat{padding:13px}
  .stat b{font-size:22px}
  .tabs{width:100%;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  html[dir="rtl"] .tabs{-webkit-mask-image:linear-gradient(270deg,#000 82%,transparent);mask-image:linear-gradient(270deg,#000 82%,transparent)}

  .tbl-wrap table.tbl:not(.claim-cards){min-width:0}
  table.tbl:not(.claim-cards) thead{display:none}
  table.tbl:not(.claim-cards),table.tbl:not(.claim-cards) tbody{display:block;width:100%}
  table.tbl:not(.claim-cards) tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;padding:14px 16px;border-bottom:1px solid var(--line2)}
  table.tbl:not(.claim-cards) tr:last-child{border-bottom:0}
  table.tbl:not(.claim-cards) td{display:block;padding:0;border:0!important;background:none!important;min-width:0;overflow-wrap:anywhere;text-align:start!important}
  table.tbl:not(.claim-cards) td:first-child{grid-column:1/-1;font-size:14px}
  table.tbl:not(.claim-cards) td:empty{display:none}
  table.tbl:not(.claim-cards) td :not(.id):not(.pill):not(.doclink){white-space:normal}
  table.tbl:not(.claim-cards) td[data-auto-l]:not(:first-child)::before{content:attr(data-auto-l);display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  html[lang="ar"] table.tbl:not(.claim-cards) td[data-auto-l]::before{letter-spacing:0;font-size:11.5px}
  table.tbl:not(.claim-cards) td select,table.tbl:not(.claim-cards) td .input{max-width:100%}
}
@media print{.side,.top,.foot{display:none}.app{display:block}}

/* combined view: the branch a record belongs to */
.branch-tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--deep);background:var(--mint);border-radius:999px;padding:2px 9px;margin-top:4px}
.branchbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:var(--r);background:var(--mint);border:1px solid var(--mint2);font-size:13.5px;color:var(--deep)}
.branchbar .btn{margin-inline-start:auto}
/* check-in consent by SMS code */
.consent{margin-top:8px;padding:12px 14px;border-radius:var(--r);background:var(--sunk);border:1px solid var(--line2);display:flex;flex-direction:column;gap:8px}

/* pilot feedback: three clear choices */
.rate{flex:1;border:1.5px solid transparent;border-radius:12px;padding:12px;font-weight:800;font-size:14px;cursor:pointer}
.rate.on{border-color:currentColor;box-shadow:0 0 0 3px rgba(11,109,118,.12)}