/* ==========================================================================
   Majlish-E-Cow · design system
   Tokens · components · motion. Animates transform/opacity only.
   ========================================================================== */

:root{
  --bg:#160d08; --bg-2:#1e120a; --bg-3:#2a1a10;
  --card:rgba(255,241,222,.045); --card-2:rgba(255,241,222,.075); --well:rgba(0,0,0,.28);
  --line:rgba(255,236,214,.09); --line-2:rgba(255,236,214,.16);
  --text:#fbf3e6; --muted:rgba(251,243,230,.58); --faint:rgba(251,243,230,.32);
  --accent:#f6a01a; --accent-2:#ffbd4d; --accent-deep:#b96d05; --accent-rgb:246,160,26;
  --chili:#e2442f; --chili-rgb:226,68,47; --green:#43b36c; --green-rgb:67,179,108; --amber:#f6c35c; --red:#f0614d; --red-rgb:240,97,77; --blue:#5aa9e6; --blue-rgb:90,169,230;
  --on-accent:#1b0f05;
  --shadow-1:0 1px 2px rgba(0,0,0,.35),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-2:0 2px 6px rgba(0,0,0,.35),0 20px 50px -20px rgba(0,0,0,.7);
  --glow:0 0 0 4px rgba(var(--accent-rgb),.14),0 10px 30px -12px rgba(var(--accent-rgb),.45);
  --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px;
  --ease:cubic-bezier(.22,.8,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:180ms; --t:320ms; --t-slow:520ms;
  --font-display:'Fraunces',Georgia,serif; --font:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f9f0e1; --bg-2:#fff7ea; --bg-3:#fff;
  --card:rgba(255,255,255,.7); --card-2:rgba(255,255,255,.95); --well:rgba(120,80,40,.07);
  --line:rgba(70,40,20,.1); --line-2:rgba(70,40,20,.18);
  --text:#2b1a0f; --muted:rgba(43,26,15,.62); --faint:rgba(43,26,15,.36);
  --accent:#e5920c; --accent-2:#f6a01a; --accent-deep:#9a5a05; --on-accent:#1b0f05;
  --shadow-1:0 1px 2px rgba(80,50,20,.08),0 8px 24px -12px rgba(80,50,20,.25);
  --shadow-2:0 2px 6px rgba(80,50,20,.08),0 20px 50px -20px rgba(80,50,20,.35);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(96px + var(--safe-t))}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;min-height:100dvh;padding-bottom:var(--safe-b)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-.01em;font-variation-settings:'opsz' 96,'SOFT' 60}
h1{font-size:clamp(2.6rem,9vw,5.2rem);letter-spacing:-.025em}
h2{font-size:clamp(1.65rem,4.6vw,2.4rem)}
h3{font-size:1.2rem}
p{color:var(--muted)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:rgba(var(--accent-rgb),.35)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Layout ---------------------------------------------------------------- */
.wrap{width:min(100% - 32px,1360px);margin-inline:auto}
.wrap-narrow{width:min(100% - 32px,920px);margin-inline:auto}
@media(min-width:1600px){.wrap{width:min(100% - 64px,1480px)}.wrap-narrow{width:min(100% - 64px,1000px)}}
.section{padding:clamp(56px,9vw,104px) 0}
.section-head{max-width:760px;margin-bottom:34px}
.section-head p{margin-top:10px;font-size:1.05rem}
.grid{display:grid;gap:16px}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}
.stack>*+*{margin-top:12px}
.row{display:flex;align-items:center;gap:10px}
.row-wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spacer{flex:1}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:.86rem}.tiny{font-size:.76rem}
.mono{font-variant-numeric:tabular-nums}
.center{text-align:center}

/* Cards ------------------------------------------------------------------ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);backdrop-filter:blur(2px);padding:22px;position:relative}
.card-tight{padding:16px}
.card-lift{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
.card-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-2)}
.well{background:var(--well);border-radius:var(--r);padding:14px 16px;border:1px solid var(--line)}
.divider{height:1px;background:var(--line);margin:16px 0}

/* Icon chip ---------------------------------------------------------------- */
.ichip{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.12);color:var(--accent);flex:0 0 auto;font-size:1.1rem;transition:background var(--t),color var(--t),transform var(--t) var(--spring)}
.ichip svg{width:20px;height:20px}
.ichip.is-on,.active>.ichip,.is-open>.ichip{background:var(--accent);color:var(--on-accent)}
.ichip-sm{width:30px;height:30px;border-radius:9px;font-size:.9rem}
.ichip-green{background:rgba(var(--green-rgb),.14);color:var(--green)}
.ichip-red{background:rgba(var(--red-rgb),.14);color:var(--red)}
.ichip-blue{background:rgba(var(--blue-rgb),.14);color:var(--blue)}

/* Buttons ----------------------------------------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border-radius:var(--r-pill);font-weight:600;font-size:.96rem;letter-spacing:.005em;overflow:hidden;isolation:isolate;border:1px solid var(--line-2);background:var(--card-2);color:var(--text);transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t),color var(--t),border-color var(--t);white-space:nowrap;user-select:none}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--accent),var(--accent-2));transform:translateX(-101%);transition:transform var(--t) var(--ease);border-radius:inherit}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn .arrow{transition:transform var(--t) var(--spring)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{background:linear-gradient(100deg,var(--accent),var(--accent-2));color:var(--on-accent);border-color:transparent;box-shadow:0 10px 24px -12px rgba(var(--accent-rgb),.75)}
.btn-primary::before{background:linear-gradient(100deg,var(--accent-2),#ffd27a);}
.btn-primary:hover{box-shadow:0 14px 30px -12px rgba(var(--accent-rgb),.9)}
.btn-primary:hover::before{transform:translateX(0)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-2)}
.btn-ghost:hover::before{transform:translateX(0);opacity:.12}
.btn-danger{color:var(--red);border-color:rgba(var(--red-rgb),.35)}
.btn-danger::before{background:var(--red)}
.btn-danger:hover{color:#fff}.btn-danger:hover::before{transform:translateX(0)}
.btn-green{background:var(--green);color:#06210f;border-color:transparent}
.btn-green::before{background:#5fd88a}.btn-green:hover::before{transform:translateX(0)}
.btn-sm{min-height:36px;padding:0 14px;font-size:.86rem}
.btn-lg{min-height:54px;padding:0 28px;font-size:1.05rem}
.btn-block{width:100%}
.btn-icon{width:42px;height:42px;min-height:0;padding:0;border-radius:12px}
.btn-icon.round{border-radius:50%}
.btn-icon:hover{color:var(--on-accent)}.btn-icon:hover::before{transform:translateX(0)}
.btn-icon svg{width:18px;height:18px}
.btn[disabled],.btn[aria-busy="true"]{opacity:.65;pointer-events:none}
.btn[hidden],[hidden]{display:none!important}
/* native <select> popups follow the theme instead of the OS */
select{color-scheme:dark}
[data-theme="light"] select{color-scheme:light}
select option{background:var(--bg-3);color:var(--text);padding:8px}
select option:checked{background:var(--accent);color:var(--on-accent)}
/* rolling label: idle / busy / done / error */
.btn .lbl{display:grid;line-height:1.2}
.btn .lbl>span{grid-area:1/1;transition:transform var(--t) var(--ease),opacity var(--t);display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn .lbl>.l-busy,.btn .lbl>.l-done,.btn .lbl>.l-err{opacity:0;transform:translateY(110%)}
.btn[data-state="busy"] .l-idle,.btn[data-state="done"] .l-idle,.btn[data-state="error"] .l-idle{opacity:0;transform:translateY(-110%)}
.btn[data-state="busy"] .l-busy,.btn[data-state="done"] .l-done,.btn[data-state="error"] .l-err{opacity:1;transform:none}
.btn[data-state="busy"]{pointer-events:none}
.btn[data-state="done"]{background:var(--green);color:#06210f;border-color:transparent;box-shadow:0 10px 24px -12px rgba(var(--green-rgb),.8)}
.btn[data-state="done"]::before{display:none}
.btn[data-state="error"]{background:var(--red);color:#fff;border-color:transparent;animation:shake .5s var(--ease)}
.btn[data-state="error"]::before{display:none}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.check-draw{width:18px;height:18px}
.check-draw path{stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:draw .45s var(--ease) .1s forwards}

/* Fields (floating label, icon chip, staged validation) ---------------------- */
.field{position:relative}
.field .ctl{position:relative;display:flex;align-items:center;gap:10px;background:var(--card-2);border:1.5px solid var(--line-2);border-radius:var(--r);padding:0 14px 0 12px;min-height:58px;transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.field .ctl .ichip{width:34px;height:34px;border-radius:10px;font-size:.95rem}
.field input,.field select,.field textarea{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:20px 0 6px;font-size:1rem;color:var(--text)}
.field textarea{padding-top:22px;resize:vertical;min-height:96px}
.field select{appearance:none;cursor:pointer}
.field label{position:absolute;left:58px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;transition:transform var(--t) var(--ease),font-size var(--t),color var(--t),top var(--t);font-size:1rem;transform-origin:left center;background:transparent;padding:0 4px;white-space:nowrap}
.field.no-icon label{left:12px}
.field .ctl:focus-within{border-color:var(--accent);box-shadow:var(--glow);background:var(--bg-3)}
.field .ctl:focus-within label,.field.is-filled label,.field .ctl:has(input:not(:placeholder-shown)) label,.field .ctl:has(textarea:not(:placeholder-shown)) label,.field .ctl:has(select) label{top:16px;transform:translateY(-50%) scale(.78);color:var(--accent)}
.field.no-icon .ctl:focus-within label,.field.no-icon.is-filled label,.field.no-icon .ctl:has(input:not(:placeholder-shown)) label{left:12px}
.field input::placeholder,.field textarea::placeholder{color:transparent}
.field .ctl:focus-within input::placeholder{color:var(--faint)}
.field .status{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;font-size:.7rem;font-weight:800;opacity:0;transform:scale(.5);transition:transform var(--t) var(--spring),opacity var(--t)}
.field.is-ok .status,.field.is-bad .status,.field.is-warn .status,.field.is-checking .status{opacity:1;transform:scale(1)}
.field.is-ok .status{background:var(--green);color:#06210f}
.field.is-bad .status{background:var(--red);color:#fff}
.field.is-warn .status{background:var(--amber);color:#1b0f05}
.field.is-checking .status{background:transparent}
.field.is-ok .ctl{border-color:rgba(var(--green-rgb),.7)}
.field.is-bad .ctl{border-color:var(--red)}
.field.is-warn .ctl{border-color:var(--amber)}
.field.is-ok .ctl:focus-within{box-shadow:0 0 0 4px rgba(var(--green-rgb),.16)}
.field.is-bad .ctl:focus-within{box-shadow:0 0 0 4px rgba(var(--red-rgb),.16)}
.field .help{display:block;margin:7px 4px 0;font-size:.82rem;color:var(--muted);min-height:1.1em;transition:color var(--t)}
.field.is-bad .help{color:var(--red)}.field.is-ok .help{color:var(--green)}.field.is-warn .help{color:var(--amber)}
.field .count{font-size:.76rem;color:var(--faint);font-variant-numeric:tabular-nums}
.field .count.near{color:var(--amber)}.field .count.over{color:var(--red)}
.field .prefix{color:var(--muted);font-weight:600;display:flex;align-items:center;align-self:stretch;padding-top:0;line-height:1;transition:padding var(--t) var(--ease),color var(--t)}
.field .ctl:focus-within .prefix,.field.is-filled .prefix,.field .ctl:has(input:not(:placeholder-shown)) .prefix{padding-top:14px;color:var(--text)}
.field .chev{color:var(--muted);transition:transform var(--t) var(--spring)}
.field .ctl:focus-within .chev{transform:rotate(180deg)}
.field.is-derived .ctl{background:var(--well)}
.field.is-derived .ctl:focus-within{border-color:var(--line-2);box-shadow:none}
.batch-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(var(--accent-rgb),.14);color:var(--accent-2);border-radius:var(--r-pill);padding:4px 12px;font-weight:700;font-size:.86rem;animation:popIn .5s var(--spring)}

/* Checkbox / switch ------------------------------------------------------ */
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;user-select:none;position:relative}
.check input{position:absolute;opacity:0;width:1px;height:1px;left:0;top:0;margin:0;pointer-events:none}
.check .box{width:24px;height:24px;border-radius:8px;border:2px solid var(--line-2);flex:0 0 auto;display:grid;place-items:center;transition:background var(--t),border-color var(--t),box-shadow var(--t),transform var(--t) var(--spring);margin-top:1px}
.check .box svg{width:14px;height:14px}
.check .box path{stroke:#06210f;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset var(--t) var(--ease)}
.check:hover .box{box-shadow:0 0 0 5px rgba(var(--green-rgb),.12)}
.check input:checked+.box{background:var(--green);border-color:var(--green);transform:scale(1.05)}
.check input:checked+.box path{stroke-dashoffset:0}
.check input:focus-visible+.box{outline:2px solid var(--accent);outline-offset:2px}
.check .txt{font-size:.92rem;color:var(--muted)}
.switch{position:relative;display:inline-flex;align-items:center;width:78px;height:36px;border-radius:var(--r-pill);background:var(--well);border:1px solid var(--line-2);cursor:pointer;flex:0 0 auto;transition:background var(--t),border-color var(--t)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .knob{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform var(--t) var(--spring)}
.switch .on,.switch .off{position:absolute;top:50%;transform:translateY(-50%);font-size:.7rem;font-weight:800;letter-spacing:.06em;transition:opacity var(--t)}
.switch .on{left:12px;color:var(--on-accent);opacity:0}.switch .off{right:10px;color:var(--muted)}
.switch:has(input:checked){background:var(--accent);border-color:var(--accent)}
.switch:has(input:checked) .knob{transform:translateX(42px)}
.switch:has(input:checked) .on{opacity:1}.switch:has(input:checked) .off{opacity:0}
.switch:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}

/* Segmented / radio cards --------------------------------------------------- */
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--well);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;gap:2px}
.seg .ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 5px);border-radius:var(--r-pill);background:linear-gradient(100deg,var(--accent),var(--accent-2));box-shadow:0 6px 16px -8px rgba(var(--accent-rgb),.9);transition:transform var(--t-slow) var(--spring),width var(--t) var(--ease);z-index:0}
.seg button{position:relative;z-index:1;border-radius:var(--r-pill);min-height:40px;font-weight:600;color:var(--muted);transition:color var(--t);display:flex;align-items:center;justify-content:center;gap:8px}
.seg button[aria-selected="true"]{color:var(--on-accent)}
.radio-cards{display:grid;gap:10px}
.radio-card{display:flex;gap:12px;align-items:center;padding:14px;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--card);cursor:pointer;transition:border-color var(--t),background var(--t),box-shadow var(--t),transform var(--t)}
.radio-card input{position:absolute;opacity:0;width:0;height:0}
.radio-card .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;flex:0 0 auto;transition:border-color var(--t)}
.radio-card .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform var(--t) var(--spring)}
.radio-card:has(input:checked){border-color:var(--accent);background:rgba(var(--accent-rgb),.08);box-shadow:var(--glow)}
.radio-card:has(input:checked) .dot{border-color:var(--accent)}.radio-card:has(input:checked) .dot::after{transform:scale(1)}
.radio-card:has(input:checked) .ichip{background:var(--accent);color:var(--on-accent)}
.radio-card b{display:block}.radio-card small{color:var(--muted)}

/* Chips / badges ----------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;letter-spacing:.02em;background:var(--well);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.chip-green{background:rgba(var(--green-rgb),.14);color:var(--green);border-color:transparent}
.chip-red{background:rgba(var(--red-rgb),.14);color:var(--red);border-color:transparent}
.chip-amber{background:rgba(246,195,92,.16);color:var(--amber);border-color:transparent}
.chip-accent{background:rgba(var(--accent-rgb),.16);color:var(--accent-2);border-color:transparent}
.chip-blue{background:rgba(var(--blue-rgb),.16);color:var(--blue);border-color:transparent}
.chip-live::before{animation:pulse 1.4s ease-in-out infinite}
.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--chili);color:#fff;font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums}
.badge-soft{background:rgba(var(--accent-rgb),.18);color:var(--accent-2)}

/* Tabs with travelling indicator ------------------------------------------- */
.tabs{position:relative;display:flex;gap:4px;padding:4px;background:var(--well);border:1px solid var(--line);border-radius:var(--r-pill);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs .ind{position:absolute;top:4px;left:0;height:calc(100% - 8px);width:0;border-radius:var(--r-pill);background:linear-gradient(100deg,var(--accent),var(--accent-2));box-shadow:0 8px 18px -8px rgba(var(--accent-rgb),.9);transition:transform var(--t-slow) var(--spring),width var(--t-slow) var(--spring);transform:translateX(0);pointer-events:none}
.tabs [role="tab"]{position:relative;z-index:1;flex:0 0 auto;min-height:38px;padding:0 16px;border-radius:var(--r-pill);font-weight:600;font-size:.9rem;color:var(--muted);transition:color var(--t);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.tabs [role="tab"][aria-selected="true"]{color:var(--on-accent)}
.tabs .badge{font-size:.66rem;min-width:18px;height:18px}
.tab-panel{animation:tabIn var(--t) var(--ease)}
.tab-panel[hidden]{display:none}

/* Accordion ------------------------------------------------------------------ */
.acc{border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-1);overflow:hidden;transition:border-color var(--t),transform var(--t) var(--ease)}
.acc+.acc{margin-top:10px}
.acc summary{list-style:none;display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;user-select:none;font-weight:600}
.acc summary::-webkit-details-marker{display:none}
.acc summary .t{flex:1;transition:color var(--t)}
.acc summary .pm{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;position:relative;transition:background var(--t),border-color var(--t),transform var(--t-slow) var(--spring)}
.acc summary .pm::before,.acc summary .pm::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform var(--t-slow) var(--spring)}
.acc summary .pm::before{width:12px;height:2px}.acc summary .pm::after{width:2px;height:12px}
.acc[open]{border-color:rgba(var(--accent-rgb),.5)}
.acc[open] summary .t{color:var(--accent-2)}
.acc[open] summary .pm{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:rotate(180deg)}
.acc[open] summary .pm::after{transform:scaleY(0)}
.acc .body{padding:0 18px 18px}
.acc .body .well{animation:tabIn var(--t) var(--ease)}

/* Lists / rows ---------------------------------------------------------------- */
.lrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);position:relative;transition:transform var(--t) var(--ease),box-shadow var(--t),border-color var(--t),background var(--t);overflow:hidden}
.lrow+.lrow{margin-top:8px}
.lrow::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);transform:scaleY(0);transition:transform var(--t) var(--ease)}
.lrow.is-click{cursor:pointer}
.lrow.is-click:hover{transform:translateX(3px);box-shadow:var(--shadow-1);border-color:var(--line-2);background:var(--card-2)}
.lrow.is-click:hover::before{transform:scaleY(1)}
.lrow>svg,.lrow .chev{width:18px;height:18px;flex:0 0 auto}
.lrow .chev{color:var(--faint);transition:transform var(--t) var(--spring),color var(--t);flex:0 0 auto}
.lrow.is-click:hover .chev{transform:translateX(3px);color:var(--accent)}
.lrow .main{flex:1;min-width:0}.lrow .main b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lrow .main small{color:var(--muted)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;background:rgba(var(--accent-rgb),.16);color:var(--accent-2);flex:0 0 auto;font-family:var(--font-display)}

/* Progress ------------------------------------------------------------------ */
.bar{height:10px;border-radius:var(--r-pill);background:var(--well);overflow:hidden;position:relative;border:1px solid var(--line)}
.bar>i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:inherit;transition:transform 1.1s var(--ease)}
.bar>i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:shine 2.6s var(--ease) infinite}
.bar.green>i{background:linear-gradient(90deg,var(--green),#6fdc95)}
.bar.thin{height:6px}.bar.thick{height:14px}
.bar-lbl{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.ring{--sz:96px;--p:0;width:var(--sz);height:var(--sz);position:relative;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring .bgc{stroke:var(--well)}.ring .fgc{stroke:var(--accent);stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--p));transition:stroke-dashoffset 1.2s var(--ease)}
.ring .v{font-family:var(--font-display);font-weight:800;font-size:1.3rem;font-variant-numeric:tabular-nums}

/* Stepper ---------------------------------------------------------------- */
.stepper{display:flex;align-items:center;gap:0;margin-bottom:24px}
.stepper .st{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto;width:80px;font-size:.76rem;color:var(--muted);text-align:center}
.stepper .st .n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;border:2px solid var(--line-2);background:var(--bg-3);transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t),transform var(--t) var(--spring)}
.stepper .st.is-cur .n{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 5px rgba(var(--accent-rgb),.16);transform:scale(1.06)}
.stepper .st.is-cur{color:var(--text)}
.stepper .st.is-done .n{background:var(--green);border-color:var(--green);color:#06210f}
.stepper .ln{flex:1;height:3px;background:var(--well);border-radius:2px;position:relative;overflow:hidden;margin:0 -14px 22px}
.stepper .ln::after{content:"";position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease)}
.stepper .ln.is-done::after{transform:scaleX(1)}

/* OTP boxes ------------------------------------------------------------------ */
.otp{display:flex;gap:8px;justify-content:center}
.otp input{width:46px;height:56px;text-align:center;font-size:1.5rem;font-weight:800;font-family:var(--font-display);background:var(--card-2);border:1.5px solid var(--line-2);border-radius:14px;outline:0;transition:border-color var(--t),box-shadow var(--t),transform var(--t) var(--spring),background var(--t);caret-color:var(--accent)}
.otp input:focus{border-color:var(--accent);box-shadow:var(--glow);transform:translateY(-2px)}
.otp input:not(:placeholder-shown){border-color:rgba(var(--accent-rgb),.6)}
.otp.is-bad input{border-color:var(--red);animation:shake .5s var(--ease)}
.otp.is-ok input{border-color:var(--green);background:rgba(var(--green-rgb),.14);color:var(--green);transform:scale(.94)}
.otp-done{display:none;flex-direction:column;align-items:center;gap:8px;padding:14px 0 6px}
.otp-done.show{display:flex;animation:popIn .55s var(--spring)}
.otp-done .shield{width:64px;height:64px;border-radius:20px;background:var(--green);display:grid;place-items:center;color:#06210f;box-shadow:0 14px 34px -14px rgba(var(--green-rgb),.9)}
.otp-done .shield svg{width:30px;height:30px}

/* Toasts ------------------------------------------------------------------ */
.toasts{position:fixed;right:16px;bottom:calc(16px + var(--safe-b));z-index:1000;display:flex;flex-direction:column;gap:10px;width:min(100% - 32px,360px);pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;padding:14px 14px 16px;border-radius:var(--r);background:var(--bg-3);border:1px solid var(--line-2);box-shadow:var(--shadow-2),0 0 0 1px rgba(var(--c-rgb,var(--accent-rgb)),.2),0 12px 40px -14px rgba(var(--c-rgb,var(--accent-rgb)),.5);position:relative;overflow:hidden;animation:toastIn .45s var(--spring)}
.toast.out{animation:toastOut .3s var(--ease) forwards}
.toast .ichip{background:rgba(var(--c-rgb,var(--accent-rgb)),.16);color:rgb(var(--c-rgb,var(--accent-rgb)))}
.toast b{display:block;font-size:.94rem}.toast p{font-size:.85rem;margin-top:2px}
.toast .x{margin-left:auto;color:var(--faint);width:28px;height:28px;border-radius:8px;display:grid;place-items:center;transition:background var(--t),color var(--t)}
.toast .x:hover{background:var(--well);color:var(--text)}
.toast .life{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgb(var(--c-rgb,var(--accent-rgb)));transform-origin:left;animation:drain var(--life,4s) linear forwards}
.toast.green{--c-rgb:var(--green-rgb)}.toast.red{--c-rgb:var(--red-rgb)}.toast.blue{--c-rgb:var(--blue-rgb)}

/* Modal / sheet ----------------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:900;display:none;align-items:flex-end;justify-content:center;padding:0}
.modal.open{display:flex}
.modal .scrim{position:absolute;inset:0;background:rgba(8,4,2,.7);animation:fade var(--t) both}
.modal .panel{position:relative;width:100%;max-width:560px;max-height:calc(100dvh - 20px - var(--safe-t));overflow:auto;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:22px 20px calc(22px + var(--safe-b));box-shadow:var(--shadow-2);animation:sheetUp var(--t-slow) var(--spring) both;scrollbar-width:thin}
.modal .grab{width:44px;height:5px;border-radius:3px;background:var(--line-2);margin:-6px auto 16px}
.modal .panel .x{position:absolute;top:14px;right:14px}
.modal.closing .panel{animation:sheetDown var(--t) var(--ease) both}.modal.closing .scrim{animation:fadeOut var(--t) both}
@media(min-width:640px){.modal{align-items:center;padding:20px}.modal .panel{border-radius:var(--r-lg);animation:popIn var(--t-slow) var(--spring) both}.modal .grab{display:none}.modal.closing .panel{animation:popOut var(--t) var(--ease) both}}
.modal.wide .panel{max-width:820px}
.success-card{background:linear-gradient(135deg,var(--green),#1f8b4c);color:#fff;border-radius:var(--r-lg);padding:28px 22px;text-align:center;position:relative;overflow:hidden}
.success-card::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;border:30px solid rgba(255,255,255,.12);right:-90px;top:-90px}
.success-card .sc-badge{width:76px;height:76px;margin:0 auto 14px;border-radius:50%;background:#fff;color:var(--green);display:grid;place-items:center;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);animation:popIn .6s var(--spring)}
.success-card .sc-badge svg{width:36px;height:36px}
.success-card h3{color:#fff;font-size:1.5rem}.success-card p{color:rgba(255,255,255,.85);margin-top:6px}

/* Table ------------------------------------------------------------------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.tbl th{text-align:left;font-size:.74rem;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:12px 14px;background:rgba(var(--accent-rgb),.08);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr{transition:background var(--t)}
.tbl tbody tr:hover{background:var(--card-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.is-click{cursor:pointer}

/* Empty state --------------------------------------------------------------- */
.empty{text-align:center;padding:36px 16px;color:var(--muted)}
.empty .art{width:84px;height:84px;margin:0 auto 14px;border-radius:26px;background:rgba(var(--accent-rgb),.1);display:grid;place-items:center;font-size:2.2rem;animation:bob 3s ease-in-out infinite}
.empty b{display:block;color:var(--text);font-size:1.05rem;margin-bottom:4px}

/* Skeleton ------------------------------------------------------------------ */
.sk{position:relative;overflow:hidden;background:var(--well);border-radius:10px;min-height:14px}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);animation:shine 1.4s linear infinite}

/* Reveal on scroll ----------------------------------------------------------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-stagger>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv-stagger.in>*{opacity:1;transform:none}
.rv-stagger.in>*:nth-child(1){transition-delay:.05s}.rv-stagger.in>*:nth-child(2){transition-delay:.12s}.rv-stagger.in>*:nth-child(3){transition-delay:.19s}.rv-stagger.in>*:nth-child(4){transition-delay:.26s}.rv-stagger.in>*:nth-child(5){transition-delay:.33s}.rv-stagger.in>*:nth-child(6){transition-delay:.4s}.rv-stagger.in>*:nth-child(7){transition-delay:.47s}.rv-stagger.in>*:nth-child(8){transition-delay:.54s}.rv-stagger.in>*:nth-child(n+9){transition-delay:.6s}

/* Theme switch --------------------------------------------------------------- */
.theme-sw{position:relative;width:64px;height:34px;border-radius:var(--r-pill);background:var(--well);border:1px solid var(--line-2);cursor:pointer;box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}
.theme-sw .k{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--bg-3);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform var(--t-slow) var(--spring)}
.theme-sw .k svg{width:15px;height:15px}
.theme-sw .k .sun{display:none;color:#f6a01a}.theme-sw .k .moon{color:#c9d6ff}
:root[data-theme="light"] .theme-sw .k{transform:translateX(30px);background:#fff}
:root[data-theme="light"] .theme-sw .k .sun{display:block}:root[data-theme="light"] .theme-sw .k .moon{display:none}
.theme-sw .ico{position:absolute;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--faint)}
.theme-sw .ico.l{left:9px}.theme-sw .ico.r{right:9px}

/* Extra motion ---------------------------------------------------------------- */
.scroll-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:linear-gradient(90deg,var(--accent),var(--chili));transform-origin:left;transform:scaleX(0);pointer-events:none}
.tilt{transform-style:preserve-3d;transition:transform var(--t) var(--ease),box-shadow var(--t)}
.tilt.is-tilting{transition:transform 80ms linear}
.magnet{transition:transform var(--t) var(--spring)}
.acc .acc-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease)}
.acc[open] .acc-wrap{grid-template-rows:1fr}
.acc .acc-wrap>.body{overflow:hidden;min-height:0}
.acc summary:hover .ichip{transform:rotate(-8deg) scale(1.08)}
.ichip.wiggle:hover,.card:hover>.row>.ichip,.tm:hover>.ichip{animation:wiggle .6s var(--ease)}
.stamp-in{animation:stampIn .6s var(--spring) both}
.chip-pop{animation:popIn .45s var(--spring) both}
.flash{animation:flash 1.2s var(--ease)}
.h-line{position:relative;display:inline-block}
.h-line::after{content:"";position:absolute;left:0;bottom:-.08em;height:.08em;width:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--chili));transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .25s}
.in .h-line::after,.in.h-line::after{transform:scaleX(1)}
.rv-stagger.rv-pop>*{transform:translateY(14px) scale(.96)}
.rv-stagger.rv-pop.in>*{transition-timing-function:var(--spring)}
.ichip.pulse-ring{position:relative}
.ichip.pulse-ring::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid currentColor;opacity:0;animation:ping 1.8s ease-out infinite}
.jiggle:hover{animation:jiggle .5s var(--ease)}
.img-fade{opacity:0;transform:scale(1.03);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.img-fade.loaded{opacity:1;transform:none}
.paper-plane{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;color:currentColor}
.btn[data-state="busy"] .paper-plane{animation:planeFly 1.1s var(--ease) forwards}
@keyframes planeFly{0%{transform:translate(-50%,-50%) scale(0) rotate(0);opacity:0}15%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}100%{transform:translate(220px,-120px) scale(.6) rotate(20deg);opacity:0}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.06)}75%{transform:rotate(8deg) scale(1.06)}}
@keyframes stampIn{from{transform:rotate(30deg) scale(3);opacity:0}60%{transform:rotate(30deg) scale(.92);opacity:1}to{transform:rotate(30deg) scale(1);opacity:1}}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6)}100%{box-shadow:0 0 0 18px rgba(var(--accent-rgb),0)}}
@keyframes jiggle{0%,100%{transform:none}20%{transform:translateY(-4px) rotate(-3deg)}50%{transform:translateY(0) rotate(3deg)}80%{transform:translateY(-2px) rotate(-1deg)}}

/* Keyframes ------------------------------------------------------------------ */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
@keyframes popIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes popOut{to{opacity:0;transform:scale(.94)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{to{opacity:0}}
@keyframes tabIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheetDown{to{transform:translateY(40px);opacity:0}}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(24px)}}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes floaty{0%,100%{transform:translate(0,0) rotate(var(--rot,0deg))}50%{transform:translate(0,-10px) rotate(var(--rot,0deg))}}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rollIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes rollOut{to{transform:translateY(-100%)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.rv-stagger>*{opacity:1;transform:none}
  .bar>i::after{display:none}
}