/* ANIPARTNA Design System — tokens + components (v1.0, Phase 1) */
:root, .ap {
  /* Brand — primary */
  --brand-green:#099685; --brand-charcoal:#1B1C20;
  /* Brand — secondary */
  --legacy-blue:#11559B; --opportunity-teal:#01C38E;
  /* Brand — extended */
  --innovation-sky:#2B78C9; --depth-night:#0B1E26; --slate-grey:#3B3B3B; --graphite-grey:#4F4F4F;
  --ambition-green:#07751A; --potential-sky:#D9EAFA; --collaboration-ice:#E0F0FD; --progressive-mint:#D8FADF;
  --growth-mint:#A9DEB9; --success-mist:#E8F8F5; --wealth-mint:#D2FFDD;
  /* Derived (documented, same hue as brand-green) */
  --brand-green-700:#077568; --brand-green-800:#065F55;
  /* Functional — not brand */
  --amber-500:#F59E0B; --amber-700:#92400E; --amber-100:#FEF3C7;
  --red-500:#E5484D; --red-700:#C62828; --red-100:#FDECEC; --red-300:#FF7A7A;
  --n-0:#FFFFFF; --n-50:#F6F9F9; --n-100:#EEF2F2; --n-200:#DCE4E3; --n-300:#C4CDCC; --n-400:#8C9696; --n-500:#646E6E;

  /* Semantic — light */
  --bg:var(--success-mist); --surface:#FFFFFF; --surface-2:var(--n-50); --surface-sunken:var(--n-100);
  --border:var(--n-200); --border-strong:var(--n-300);
  --text:var(--brand-charcoal); --text-body:var(--slate-grey); --text-muted:var(--graphite-grey); --text-subtle:var(--n-500);
  --text-on-accent:#FFFFFF; --link:var(--legacy-blue);
  --accent:var(--brand-green); --accent-strong:var(--brand-green-700); --accent-press:var(--brand-green-800); --accent-text:var(--brand-green-700);
  --accent-soft:var(--success-mist); --positive:var(--ambition-green); --positive-bg:var(--progressive-mint);
  --info:var(--legacy-blue); --info-bg:var(--collaboration-ice);
  --warning:var(--amber-700); --warning-bg:var(--amber-100); --warning-fill:var(--amber-500);
  --danger:var(--red-700); --danger-bg:var(--red-100); --danger-fill:var(--red-700);
  --focus:var(--opportunity-teal);
  --c1:#099685; --c2:#11559B; --c3:#01C38E; --c4:#2B78C9; --c5:#A9DEB9;

  /* Type */
  --font-sans:'Roboto', 'Noto Sans', system-ui, sans-serif;
  --font-serif:'Taviraj', Georgia, serif;
  --font-mono:'Roboto Mono', ui-monospace, monospace;

  /* Space (4/8) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;
  /* Radius */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  /* Elevation */
  --e-1:0 1px 2px rgba(11,30,38,.06), 0 1px 1px rgba(11,30,38,.04);
  --e-2:0 4px 12px rgba(11,30,38,.08), 0 1px 3px rgba(11,30,38,.06);
  --e-3:0 16px 40px rgba(11,30,38,.14), 0 4px 10px rgba(11,30,38,.06);
  --scrim:rgba(11,30,38,.56);
  /* Motion */
  --d-instant:80ms; --d-fast:140ms; --d-base:200ms; --d-slow:320ms; --d-deliberate:480ms;
  --ease-standard:cubic-bezier(.2,0,0,1); --ease-enter:cubic-bezier(0,0,0,1); --ease-exit:cubic-bezier(.3,0,1,1);
}
[data-theme="dark"] {
  --bg:var(--depth-night); --surface:var(--brand-charcoal); --surface-2:#22242A; --surface-sunken:#14171B;
  --border:#2E3238; --border-strong:#3E434B;
  --text:#F2F5F5; --text-body:#D5DCDD; --text-muted:#A9B4B6; --text-subtle:#8A9597;
  --text-on-accent:var(--brand-charcoal); --link:var(--potential-sky);
  --accent:var(--opportunity-teal); --accent-strong:var(--opportunity-teal); --accent-press:#00A97A; --accent-text:var(--opportunity-teal);
  --accent-soft:rgba(1,195,142,.12); --positive:var(--opportunity-teal); --positive-bg:rgba(1,195,142,.14);
  --info:var(--potential-sky); --info-bg:rgba(43,120,201,.18);
  --warning:var(--amber-500); --warning-bg:rgba(245,158,11,.14); --warning-fill:var(--amber-500);
  --danger:var(--red-300); --danger-bg:rgba(229,72,77,.16); --danger-fill:var(--red-500);
  --c1:#01C38E; --c2:#2B78C9; --c3:#099685; --c4:#A9DEB9;
  --e-1:0 1px 2px rgba(0,0,0,.4); --e-2:0 6px 16px rgba(0,0,0,.45); --e-3:0 18px 44px rgba(0,0,0,.55);
  --scrim:rgba(0,0,0,.66);
  color-scheme:dark;
}

/* Base */
.ap { font-family:var(--font-sans); color:var(--text-body); background:var(--bg); -webkit-font-smoothing:antialiased; font-size:16px; line-height:24px; }
.ap *, .ap *::before, .ap *::after { box-sizing:border-box; }
.ap h1,.ap h2,.ap h3,.ap h4,.ap h5,.ap h6,.ap p { margin:0; }
.ap a { color:var(--link); text-underline-offset:3px; }
.ap .num, .ap .money { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.ap .serif { font-family:var(--font-serif); font-style:italic; }
.ap .mono { font-family:var(--font-mono); font-size:13px; }

/* Type scale */
.t-display{font:900 72px/76px var(--font-sans);letter-spacing:-1.5px;color:var(--text)}
.t-h1{font:700 48px/56px var(--font-sans);letter-spacing:-.8px;color:var(--text)}
.t-h2{font:700 36px/44px var(--font-sans);letter-spacing:-.5px;color:var(--text)}
.t-h3{font:700 28px/36px var(--font-sans);letter-spacing:-.3px;color:var(--text)}
.t-h4{font:700 22px/30px var(--font-sans);color:var(--text)}
.t-h5{font:500 18px/26px var(--font-sans);color:var(--text)}
.t-h6{font:500 16px/24px var(--font-sans);color:var(--text)}
.t-body-lg{font:400 18px/28px var(--font-sans)}
.t-body{font:400 16px/24px var(--font-sans)}
.t-body-sm{font:400 14px/20px var(--font-sans)}
.t-caption{font:400 12px/16px var(--font-sans);color:var(--text-muted)}
.t-overline{font:500 12px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.t-editorial{font:200 italic 28px/36px var(--font-serif);color:var(--text)}
.t-emph{font:500 italic 20px/28px var(--font-serif);color:var(--text)}
.t-money-xl{font:700 40px/48px var(--font-sans);letter-spacing:-.5px;color:var(--text);font-variant-numeric:tabular-nums}
.t-money-lg{font:700 28px/36px var(--font-sans);color:var(--text);font-variant-numeric:tabular-nums}
.t-mono{font:400 13px/20px var(--font-mono);color:var(--text-muted)}

/* Spec-sheet scaffolding (documentation only) */
.sheet{width:1440px;padding:72px 80px 96px;background:var(--bg)}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:28px;margin-bottom:40px;border-bottom:1px solid var(--border)}
.sheet-kicker{font:500 12px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px}
.sec{margin-top:56px}
.sec-title{font:700 22px/30px var(--font-sans);color:var(--text);margin-bottom:4px}
.sec-sub{font:400 14px/20px var(--font-sans);color:var(--text-muted);margin-bottom:20px;max-width:760px}
.spec{font:400 12px/16px var(--font-mono);color:var(--text-subtle)}
.lbl{font:500 11px/14px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:8px}

/* Buttons */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r-md);border:1px solid transparent;font:500 15px/20px var(--font-sans);cursor:pointer;white-space:nowrap;transition:background var(--d-fast) var(--ease-standard),box-shadow var(--d-fast) var(--ease-standard),transform var(--d-instant) var(--ease-standard);text-decoration:none}
.btn svg{width:18px;height:18px;flex:none}
.btn-sm{height:36px;padding:0 14px;font-size:14px;border-radius:var(--r-sm)}
.btn-lg{height:52px;padding:0 28px;font-size:16px}
.btn-primary{background:var(--accent-strong);color:var(--text-on-accent)}
.btn-primary:hover,.btn-primary.is-hover{background:var(--accent-press)}
.btn-primary:active,.btn-primary.is-active{background:var(--accent-press);transform:translateY(1px)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover,.btn-secondary.is-hover{background:var(--surface-2);border-color:var(--text-subtle)}
.btn-secondary.is-active{background:var(--surface-sunken)}
.btn-ghost{background:transparent;color:var(--accent-text)}
.btn-ghost:hover,.btn-ghost.is-hover{background:var(--accent-soft)}
.btn-ghost.is-active{background:var(--growth-mint)}
.btn-danger{background:var(--danger-fill);color:#fff}
.btn-danger:hover,.btn-danger.is-hover{background:#A51F1F}
.btn-dark{background:var(--brand-charcoal);color:#fff}
.btn-icon{width:44px;padding:0}
.btn-icon.btn-sm{width:36px}
.btn:focus-visible,.is-focus{outline:3px solid var(--focus);outline-offset:2px}
.btn[disabled],.btn.is-disabled{background:var(--surface-sunken);color:var(--text-subtle);border-color:var(--border);cursor:not-allowed;transform:none}
.btn-ghost[disabled]{background:transparent}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:apspin .8s linear infinite}
@keyframes apspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}.ap *{transition-duration:1ms!important}}

/* Fields */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.flabel{font:500 14px/20px var(--font-sans);color:var(--text)}
.hint{font:400 12px/16px var(--font-sans);color:var(--text-muted)}
.err{font:400 12px/16px var(--font-sans);color:var(--danger);display:flex;gap:6px;align-items:center}
.ok{font:400 12px/16px var(--font-sans);color:var(--positive);display:flex;gap:6px;align-items:center}
.control{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);color:var(--text);font:400 15px/20px var(--font-sans);transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.control input,.control select{all:unset;flex:1;min-width:0;font:inherit;color:inherit}
.control input::placeholder{color:var(--text-subtle)}
.control .affix{color:var(--text-muted);font-weight:500;white-space:nowrap}
.control .affix-box{align-self:stretch;display:flex;align-items:center;padding:0 12px;margin:0 -14px 0 0;border-left:1px solid var(--border);background:var(--surface-2);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--text-muted);font-weight:500}
.control .affix-box.left{margin:0 0 0 -14px;border-left:0;border-right:1px solid var(--border);border-radius:var(--r-md) 0 0 var(--r-md)}
.control:hover,.control.is-hover{border-color:var(--text-subtle)}
.control:focus-within,.control.is-focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(1,195,142,.35);outline:none}
.control.is-error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.control.is-disabled{background:var(--surface-sunken);color:var(--text-subtle);border-color:var(--border)}
.control.is-valid{border-color:var(--positive)}
.control svg{width:18px;height:18px;color:var(--text-muted);flex:none}
.otp{display:flex;gap:10px}
.otp span{width:52px;height:60px;border:1px solid var(--border-strong);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font:700 24px/1 var(--font-sans);color:var(--text);background:var(--surface);font-variant-numeric:tabular-nums}
.otp span.cur{border-color:var(--accent);box-shadow:0 0 0 3px rgba(1,195,142,.35)}
.otp span.otp-sep{border:0;width:12px;background:transparent;color:var(--text-subtle)}
.meter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.meter i{height:4px;border-radius:2px;background:var(--border)}

/* Choice controls */
.check{display:inline-flex;align-items:center;gap:10px;font:400 15px/20px var(--font-sans);color:var(--text);min-height:44px;cursor:pointer}
.box{width:20px;height:20px;border:1.5px solid var(--border-strong);border-radius:5px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.box.on{background:var(--accent-strong);border-color:var(--accent-strong)}
.box.mixed::after{content:"";width:10px;height:2px;background:#fff;border-radius:1px}
.box.radio{border-radius:50%}
.box.radio.on{background:var(--surface);border-color:var(--accent-strong)}
.box.radio.on::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent-strong)}
.box.dis{background:var(--surface-sunken);border-color:var(--border)}
.box svg{width:14px;height:14px}
.toggle{width:44px;height:26px;border-radius:13px;background:var(--border-strong);position:relative;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--e-1);transition:transform var(--d-base) var(--ease-standard)}
.toggle.on{background:var(--accent-strong)}
.toggle.on::after{transform:translateX(18px)}
.toggle.dis{opacity:.45}
.seg{display:inline-flex;padding:4px;background:var(--surface-sunken);border-radius:var(--r-md);gap:2px}
.seg button{all:unset;height:36px;padding:0 14px;border-radius:7px;font:500 14px/36px var(--font-sans);color:var(--text-muted);cursor:pointer;text-align:center}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--e-1)}
.slider{position:relative;height:28px;display:flex;align-items:center}
.slider .rail{position:absolute;left:0;right:0;height:6px;border-radius:3px;background:var(--border)}
.slider .fill{position:absolute;left:0;height:6px;border-radius:3px;background:var(--accent)}
.slider .thumb{position:absolute;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:#fff;border:2px solid var(--accent-strong);box-shadow:var(--e-2)}

/* Chips, badges, pills */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font:500 12px/16px var(--font-sans);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.no-dot::before{display:none}
.pill-neutral{background:var(--surface-sunken);color:var(--text-muted)}
.pill-success{background:var(--positive-bg);color:var(--positive)}
.pill-info{background:var(--info-bg);color:var(--info)}
.pill-warning{background:var(--warning-bg);color:var(--warning)}
.pill-danger{background:var(--danger-bg);color:var(--danger)}
.pill-brand{background:var(--wealth-mint);color:var(--brand-green-700)}
.pill-dark{background:var(--brand-charcoal);color:#fff}
[data-theme="dark"] .pill-brand{background:rgba(1,195,142,.14);color:var(--opportunity-teal)}
.trust{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 6px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);font:500 12px/16px var(--font-sans);color:var(--text)}
.trust svg{width:16px;height:16px;color:var(--accent-text)}
.trust .when{color:var(--text-muted);font-weight:400}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--border-strong);background:var(--surface);font:500 13px/16px var(--font-sans);color:var(--text)}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent-strong);color:var(--text-on-accent);font:700 11px/1 var(--font-sans);font-variant-numeric:tabular-nums}

/* Avatars */
.av{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:500 13px/1 var(--font-sans);color:#fff;flex:none;position:relative}
.av-sm{width:28px;height:28px;font-size:11px}
.av-lg{width:56px;height:56px;font-size:18px}
.stack{display:flex}
.stack .av{border:2px solid var(--surface);margin-left:-8px}
.stack .av:first-child{margin-left:0}
.av-more{background:var(--surface-sunken)!important;color:var(--text)!important}
.presence{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--opportunity-teal);border:2px solid var(--surface)}

/* Tabs, stepper, breadcrumbs, pagination */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border)}
.tabs a{display:flex;align-items:center;gap:8px;height:48px;padding:0 16px;font:500 15px/20px var(--font-sans);color:var(--text-muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--text);border-bottom-color:var(--accent)}
.tabs a svg{width:18px;height:18px}
.steps{display:flex;gap:6px}
.step{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.step .leg{height:40px;clip-path:polygon(12.36px 4.69px,13.15px 3px,14.2px 1.69px,15.53px 0.75px,17.11px 0.19px,18.97px 0,calc(100% - 18.97px) 0,calc(100% - 17.11px) 0.19px,calc(100% - 15.53px) 0.75px,calc(100% - 14.2px) 1.69px,calc(100% - 13.15px) 3px,calc(100% - 12.36px) 4.69px,calc(100% - 2.33px) 33.35px,calc(100% - 1.77px) 35.74px,calc(100% - 1.97px) 37.61px,calc(100% - 2.91px) 38.94px,calc(100% - 4.6px) 39.73px,calc(100% - 7.05px) 40px,7.05px 40px,4.6px 39.73px,2.91px 38.94px,1.97px 37.61px,1.77px 35.74px,2.33px 33.35px);background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;gap:8px;font:700 13px/1 var(--font-sans);color:var(--text-muted);font-variant-numeric:tabular-nums}
.step.done .leg{background:var(--growth-mint);color:var(--brand-green-800)}
.step.cur .leg{background:var(--brand-charcoal);color:#fff}
[data-theme="dark"] .step.cur .leg{background:var(--opportunity-teal);color:var(--brand-charcoal)}
[data-theme="dark"] .step.done .leg{background:rgba(1,195,142,.18);color:var(--opportunity-teal)}
.step .sname{font:500 13px/18px var(--font-sans);color:var(--text);text-align:center}
.step .sstate{font:400 12px/16px var(--font-sans);color:var(--text-muted);text-align:center;margin-top:-6px}
.crumbs{display:flex;align-items:center;gap:8px;font:400 14px/20px var(--font-sans);color:var(--text-muted)}
.crumbs a{color:var(--text-muted);text-decoration:none}
.crumbs .here{color:var(--text);font-weight:500}
.pager{display:flex;align-items:center;gap:4px}
.pager a{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);font:500 14px/1 var(--font-sans);color:var(--text-muted);text-decoration:none;font-variant-numeric:tabular-nums}
.pager a.on{background:var(--brand-charcoal);color:#fff}
[data-theme="dark"] .pager a.on{background:var(--opportunity-teal);color:var(--brand-charcoal)}

/* Table */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font:400 14px/20px var(--font-sans);color:var(--text-body)}
.tbl th{position:sticky;top:0;background:var(--surface-2);text-align:left;font:500 12px/16px var(--font-sans);letter-spacing:.04em;color:var(--text-muted);padding:12px 16px;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl.compact td{padding:8px 16px}
.tbl.compact th{padding:8px 16px}
.tbl tr.sel td{background:var(--accent-soft)}
.tbl tr:hover td{background:var(--surface-2)}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.tbl .strong{color:var(--text);font-weight:500}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--e-1)}
.card-pad{padding:20px}
.kpi{padding:20px;display:flex;flex-direction:column;gap:6px}
.delta{display:inline-flex;align-items:center;gap:4px;font:500 13px/16px var(--font-sans);font-variant-numeric:tabular-nums}
.delta.up{color:var(--positive)} .delta.down{color:var(--danger)}
.divider{height:1px;background:var(--border);border:0;margin:0}

/* Banners, toasts, disclaimer */
.banner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);border:1px solid transparent;font:400 14px/20px var(--font-sans);color:var(--text)}
.banner svg{width:20px;height:20px;flex:none;margin-top:0}
.banner b{font-weight:500}
.banner-info{background:var(--info-bg);border-color:rgba(17,85,155,.18)} .banner-info svg{color:var(--info)}
.banner-warning{background:var(--warning-bg);border-color:rgba(146,64,14,.18)} .banner-warning svg{color:var(--warning)}
.banner-danger{background:var(--danger-bg);border-color:rgba(198,40,40,.18)} .banner-danger svg{color:var(--danger)}
.banner-success{background:var(--positive-bg);border-color:rgba(7,117,26,.18)} .banner-success svg{color:var(--positive)}
.disclaimer{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:var(--r-sm);background:var(--surface-2);border:1px dashed var(--border-strong);font:400 12px/16px var(--font-sans);color:var(--text-muted)}
.disclaimer svg{width:16px;height:16px;flex:none;color:var(--text-muted)}
.toast{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:var(--r-md);background:var(--brand-charcoal);color:#fff;box-shadow:var(--e-3);font:400 14px/20px var(--font-sans);min-width:360px}
.toast svg{width:20px;height:20px;flex:none}
.toast a{color:var(--opportunity-teal);font-weight:500;text-decoration:none;margin-left:auto}
[data-theme="dark"] .toast{background:#F2F5F5;color:var(--brand-charcoal)}
[data-theme="dark"] .toast a{color:var(--brand-green-700)}

/* Overlays */
.pop{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--e-3)}
.menu{padding:6px;min-width:220px}
.menu a{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:var(--r-sm);font:400 14px/20px var(--font-sans);color:var(--text);text-decoration:none}
.menu a:hover,.menu a.on{background:var(--surface-2)}
.menu a svg{width:18px;height:18px;color:var(--text-muted)}
.menu a.danger{color:var(--danger)} .menu a.danger svg{color:var(--danger)}
.menu .sep{height:1px;background:var(--border);margin:6px 0}
.menu kbd{margin-left:auto}
kbd,.kbd{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:4px;border:1px solid var(--border);border-bottom-width:2px;background:var(--surface-2);font:500 11px/1 var(--font-mono);color:var(--text-muted)}
.tip{display:inline-block;padding:6px 10px;border-radius:var(--r-sm);background:var(--brand-charcoal);color:#fff;font:400 12px/16px var(--font-sans);box-shadow:var(--e-2)}
[data-theme="dark"] .tip{background:#F2F5F5;color:var(--brand-charcoal)}

/* Skeleton */
.sk{background:linear-gradient(90deg,var(--surface-sunken) 0%,var(--surface-2) 50%,var(--surface-sunken) 100%);background-size:200% 100%;border-radius:var(--r-xs);animation:apsk 1.4s ease-in-out infinite}
@keyframes apsk{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* Progress */
.prog{height:8px;border-radius:4px;background:var(--surface-sunken);overflow:hidden;display:flex}
.prog i{display:block;height:100%;background:var(--accent);border-radius:4px}

/* Arch-cut image mask */
.archcut{clip-path:polygon(0 16px,0.64px 10.24px,2.56px 5.76px,5.76px 2.56px,10.24px 0.64px,16px 0,calc(100% - 16px) 0,calc(100% - 10.24px) 0.64px,calc(100% - 5.76px) 2.56px,calc(100% - 2.56px) 5.76px,calc(100% - 0.64px) 10.24px,100% 16px,100% calc(100% - 52.97px),calc(100% - 0.14px) calc(100% - 51.04px),calc(100% - 0.56px) calc(100% - 49.23px),calc(100% - 1.27px) calc(100% - 47.53px),calc(100% - 2.25px) calc(100% - 45.95px),calc(100% - 3.51px) calc(100% - 44.49px),calc(100% - 44.49px) calc(100% - 3.51px),calc(100% - 45.95px) calc(100% - 2.25px),calc(100% - 47.53px) calc(100% - 1.27px),calc(100% - 49.23px) calc(100% - 0.56px),calc(100% - 51.04px) calc(100% - 0.14px),calc(100% - 52.97px) 100%,16px 100%,10.24px calc(100% - 0.64px),5.76px calc(100% - 2.56px),2.56px calc(100% - 5.76px),0.64px calc(100% - 10.24px),0 calc(100% - 16px))}
.trap{clip-path:polygon(12.36px 4.69px,13.15px 3px,14.2px 1.69px,15.53px 0.75px,17.11px 0.19px,18.97px 0,calc(100% - 18.97px) 0,calc(100% - 17.11px) 0.19px,calc(100% - 15.53px) 0.75px,calc(100% - 14.2px) 1.69px,calc(100% - 13.15px) 3px,calc(100% - 12.36px) 4.69px,calc(100% - 2.33px) 33.35px,calc(100% - 1.77px) 35.74px,calc(100% - 1.97px) 37.61px,calc(100% - 2.91px) 38.94px,calc(100% - 4.6px) 39.73px,calc(100% - 7.05px) 40px,7.05px 40px,4.6px 39.73px,2.91px 38.94px,1.97px 37.61px,1.77px 35.74px,2.33px 33.35px)}
.ph{background:var(--depth-night);color:rgba(255,255,255,.7);display:flex;align-items:flex-end;padding:14px;font:400 12px/16px var(--font-sans);position:relative;overflow:hidden}
.ph-light{background:var(--surface-sunken);color:var(--text-muted)}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}