/* ============================================================ KOREVRA BANQ — Design System v2 (5 Nov 2026, workstream W1) Navy · teal · gold on calm surfaces. Fraunces (display) · DM Sans (UI) · IBM Plex Mono (money/refs). Three themes: dark ops (default chrome), light ops/web, warm paper (customer phone + landing). THE CONTRACT (docs/go-live/DESIGN-SYSTEM.md): every colour below is a TOKEN; components read tokens, never literals, so a tenant's brand and all three themes apply everywhere at once. Every existing class name (k-card, k-btn, k-chip, k-table, k-input, k-seg, k-kpi, k-modal, page-h, grid2…) keeps working — v2 restyles them and adds the new pieces (stat tile, sparkline, progress ring, stepper, timeline, tabs, toolbar, filter bar, skeleton, drawer, split view, data grid, badges, callouts). Text tokens are AA-checked by tools/ux/w1-contrast.cjs against every surface they sit on, in every theme, for every seeded tenant brand. ============================================================ */ :root{ /* ---- tenant brand (overridden live by BQ.applyTheme) — Surelend house default ---- */ /* --t2 = raw tenant teal (set inline by applyTheme); --brand2 derived so light themes can deepen it for AA */ --t2:#3AA6A6; --brand:#12406E; --brand2:var(--t2,#3AA6A6); --gold:#D4A843; --brand-soft:#3AA6A622; /* accent-as-TEXT tokens: bright on dark surfaces (default), deepened on light themes for AA */ --gold-ink:var(--gold); --violet-ink:#C084FC; /* tenant teal used as TEXT (chips/links), surface-aware like --gold-ink */ --t2-ink:color-mix(in srgb,var(--t2,#3AA6A6) 72%,#fff); /* primary-button tokens (theme-scoped, WCAG-AA). v2: 72% (was 80%) — the 80% mix of a warm tenant teal (Sahel #E07B3C) measured 4.27 against the light label; 72% clears 5.0 for every seeded tenant. */ --pri:color-mix(in srgb,var(--brand2) 72%,#000); --pri-ink:#F7FBFB; --brand-ink:#F7FBFB; /* text on a brand fill (v2: was an unused dark value) */ /* ---- dark ops theme (default app chrome) — calmer navy, less saturation, more depth ---- */ --bg:#071326; --bg2:#0A192F; --panel:#0E2039; --panel2:#132A48; --line:#1D3354; --line2:#294266; --ink:#EDF2F8; --ink2:#A7B6CA; --ink3:#8C9CB3; /* v2: neg lifted from #E06B6B (4.46 on --panel2), info from #5B9BD5 (4.4 as a chip on --panel2) */ --pos:#46BE83; --neg:#F08A8A; --warn:#E3A93D; --info:#6AA8E2; --elev:color-mix(in srgb,#fff 5%,transparent); /* top-lit card edge */ /* ---- semantic colour roles (v2) — the names new screens use; each maps onto the tokens above ---- */ --surface:var(--bg); --surface-2:var(--bg2); --raised:var(--panel); --raised-2:var(--panel2); --muted:var(--ink2); --subtle:var(--ink3); --accent:var(--gold); --accent-ink:var(--gold-ink); --positive:var(--pos); --warning:var(--warn); --negative:var(--neg); --overlay:rgba(3,8,18,.62); --focus:var(--t2-ink); --focus-ring:0 0 0 3px color-mix(in srgb,var(--brand2) 34%,transparent); /* ---- type scale ---- */ --font-ui:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --font-d:'Fraunces',Georgia,serif; --font-m:'IBM Plex Mono','Cascadia Mono',monospace; --fs-2xs:11px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:19px; --fs-2xl:24px; --fs-3xl:30px; --fs-4xl:40px; --lh-tight:1.2; --lh:1.55; /* ---- spacing (4-based) ---- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; /* ---- radii ---- */ --r-xs:6px; --r-sm:8px; --r1:10px; --r2:14px; --r3:20px; --r-pill:999px; /* ---- elevation ---- */ --e1:0 1px 2px rgba(1,6,15,.35); --e2:0 10px 26px -14px rgba(1,6,15,.7), 0 2px 6px rgba(1,6,15,.25); --shadow:0 28px 60px -20px rgba(1,6,15,.72); --e3:var(--shadow); /* ---- motion (prefers-reduced-motion collapses every duration, see the end of this file) ---- */ --dur-1:120ms; --dur-2:180ms; --dur-3:260ms; --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.2,.9,.3,1.15); } /* The dark tokens again, as a CLASS, so the design gallery can paint a dark panel inside a light page. A scoped theme re-declares every token that differs by theme — custom properties inherit, so a light value would otherwise leak into it from the page. */ .theme-dark{ --bg:#071326; --bg2:#0A192F; --panel:#0E2039; --panel2:#132A48; --line:#1D3354; --line2:#294266; --ink:#EDF2F8; --ink2:#A7B6CA; --ink3:#8C9CB3; --pos:#46BE83; --neg:#F08A8A; --warn:#E3A93D; --info:#6AA8E2; --brand2:var(--t2,#3AA6A6); --gold-ink:var(--gold); --violet-ink:#C084FC; --t2-ink:color-mix(in srgb,var(--t2,#3AA6A6) 72%,#fff); --pri:color-mix(in srgb,var(--brand2) 72%,#000); --pri-ink:#F7FBFB; --brand-soft:color-mix(in srgb,var(--brand) 13%,transparent); --elev:color-mix(in srgb,#fff 5%,transparent); --e1:0 1px 2px rgba(1,6,15,.35); --e2:0 10px 26px -14px rgba(1,6,15,.7), 0 2px 6px rgba(1,6,15,.25); --shadow:0 28px 60px -20px rgba(1,6,15,.72); color-scheme:dark; background:var(--bg); color:var(--ink); } html[data-theme="paper"], .theme-paper{ --bg:#FAF7F0; --bg2:#F4EFE2; --panel:#FFFFFF; --panel2:#FAF7F0; --line:#E4DBC6; --line2:#DAD2BC; /* --ink3 deepened from #6E7684: measured 4.28 on --bg #FAF7F0 and 3.99 on --bg2 #F4EFE2 */ --ink:#14171F; --ink2:#4A5260; --ink3:#626A78; /* --pos was #2E8B57 (4.25 on a white card) and --warn #C28B17 (3.00) — both land as TEXT */ --pos:#1A6338; --neg:#A82B2B; --warn:#85560E; --info:#245E9E; /* accent-as-TEXT on warm paper: derive from the LIVE tenant --gold/--t2 so a pale tenant accent is deepened too */ --gold-ink:color-mix(in srgb,var(--gold) 52%,#000); --t2-ink:color-mix(in srgb,var(--t2,#3AA6A6) 60%,#000); --brand2:var(--t2,#3AA6A6); --violet-ink:#6C33B0; --pri:var(--brand); --pri-ink:#FAF7F0; --elev:transparent; --overlay:rgba(20,23,31,.42); --e1:0 1px 2px rgba(13,43,78,.08); --e2:0 12px 26px -16px rgba(13,43,78,.28), 0 2px 6px rgba(13,43,78,.06); --shadow:0 24px 48px -12px rgba(13,43,78,.18), 0 8px 16px rgba(13,43,78,.08); } .theme-paper{color-scheme:light;background:var(--bg);color:var(--ink)} /* light ops/web theme — bright, cool, calm enterprise (default for web portals) */ html[data-theme="light"], .theme-light{ --bg:#EEF2F7; --bg2:#F6F8FB; --panel:#FFFFFF; --panel2:#F5F7FA; --line:#DEE4ED; --line2:#CBD5E2; --ink:#0F1728; --ink2:#465269; --ink3:#5B667D; /* --warn deepened for AA as a chip on --bg2 (its own 13% tint costs ~0.9); v2: --info #2B6CB0 measured 4.25 as a chip on --panel2 */ --pos:#1E7043; --neg:#B03225; --warn:#85560E; --info:#245E9E; /* deepen tenant teal ~18% on light so teal accent text clears AA on white/light surfaces (per-tenant, keeps hue) */ --brand2:color-mix(in srgb,var(--t2,#3AA6A6) 82%,#000); /* accent text on light surfaces → deepened from the live tenant gold (AA on white) */ --gold-ink:color-mix(in srgb,var(--gold) 52%,#000); --violet-ink:#6C33B0; /* v2: text in the tenant teal deepens further than the accent itself — the 82% accent measured 3.97 (Sahel #E07B3C) on --panel2 and 3.68 on its own brand tint; 64% clears AA for every seeded tenant */ --t2-ink:color-mix(in srgb,var(--t2,#3AA6A6) 64%,#000); --pri:var(--brand); --pri-ink:#FAFCFF; --brand-soft:color-mix(in srgb,var(--brand2) 12%,#fff); --elev:transparent; --overlay:rgba(15,23,40,.38); --e1:0 1px 2px rgba(18,42,84,.07); --e2:0 12px 28px -16px rgba(18,42,84,.26), 0 2px 6px rgba(18,42,84,.06); --shadow:0 20px 44px -16px rgba(18,42,84,.18), 0 4px 14px rgba(18,42,84,.08); } .theme-light{color-scheme:light;background:var(--bg);color:var(--ink)} /* NATIVE CONTROLS FOLLOW THE THEME (28 Oct 2026). index.html declares color-scheme "dark light". */ html{color-scheme:dark} html[data-theme="light"], html[data-theme="paper"]{color-scheme:light} input[type="radio"], input[type="checkbox"]{accent-color:var(--brand2)} /* On light surfaces, deepen the gold edition-chip text so it reads on its own pale tint (AA) */ html[data-theme="light"] .k-chip.gold, html[data-theme="paper"] .k-chip.gold, .theme-light .k-chip.gold, .theme-paper .k-chip.gold{color:var(--gold-ink);border-color:color-mix(in srgb,var(--gold) 46%,transparent)} /* ---------- Base ---------- */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--font-ui); background:var(--bg); color:var(--ink); font-size:var(--fs-md); line-height:var(--lh); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } ::selection{background:var(--brand2);color:#04110B} button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer} input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} /* links are TEXT: surface-aware ink, never the raw tenant teal */ a{color:var(--t2-ink);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:2px} .num,.mono{font-family:var(--font-m);font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.01em} .tnum{font-variant-numeric:tabular-nums} .display{font-family:var(--font-d);font-weight:560;letter-spacing:-.015em} .muted{color:var(--ink2)} .muted3{color:var(--ink3)} /* .t-gold is TEXT, so it takes the surface-aware ink, not the raw fill hue */ .t-pos{color:var(--pos)} .t-neg{color:var(--neg)} .t-warn{color:var(--warn)} .t-info{color:var(--info)} .t-gold{color:var(--gold-ink)} .t-danger{color:var(--warn)!important;animation:pulseTxt 1.1s infinite} .t-breach{color:var(--neg)!important;font-weight:700} @keyframes pulseTxt{50%{opacity:.55}} .ic{vertical-align:-3px;flex:none} h1,h2,h3{font-weight:640;letter-spacing:-.02em;line-height:var(--lh-tight)} .hairline{border-top:1px solid var(--line)} /* one visible focus treatment for every control that has none of its own */ :focus-visible{outline:2px solid var(--focus);outline-offset:2px} :focus:not(:focus-visible){outline:none} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- Layout utilities ---------- */ .flex{display:flex;align-items:center;gap:10px} .spread{display:flex;align-items:center;justify-content:space-between;gap:10px} .stack{display:flex;flex-direction:column;gap:var(--sp-3)} .cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px} @media(max-width:1100px){.grid4{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr}} @media(max-width:720px){.grid2,.grid3,.grid4{grid-template-columns:1fr}} .grid2>*,.grid3>*,.grid4>*,.grid-auto>*{min-width:0} .right{margin-left:auto} .scroll-x{overflow-x:auto} .hide{display:none!important} /* Aso-oke accent stripe */ .aso{position:relative;padding-left:14px} .aso::before{content:'';position:absolute;left:0;top:6%;bottom:6%;width:4px;border-radius:3px; background:repeating-linear-gradient(180deg,var(--brand2) 0 9px,var(--gold) 9px 13px,var(--brand) 13px 22px)} /* ---------- Buttons ---------- */ .k-btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px; padding:8px 15px;border-radius:var(--r1);font-weight:600;font-size:13.5px;line-height:1.2; background:var(--panel2);border:1px solid var(--line2);color:var(--ink); transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease),filter var(--dur-2); white-space:nowrap;user-select:none;text-decoration:none; } .k-btn:hover{border-color:color-mix(in srgb,var(--brand2) 60%,var(--line2));background:color-mix(in srgb,var(--panel2) 80%,var(--brand2) 6%);text-decoration:none} .k-btn:active{transform:translateY(1px)} .k-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:var(--focus-ring)} .k-btn.pri{background:var(--pri);border-color:transparent;color:var(--pri-ink);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 8px 20px -12px color-mix(in srgb,var(--pri) 80%,transparent)} html[data-theme="paper"] .k-btn.pri{color:var(--pri-ink)} .k-btn.pri:hover{filter:brightness(1.1);background:var(--pri)} .k-btn.gold{background:linear-gradient(140deg,var(--gold),color-mix(in srgb,var(--gold) 70%,#7a5a10));border-color:transparent;color:#231803} .k-btn.ghost{background:transparent;border-color:var(--line2)} .k-btn.ghost:hover{background:color-mix(in srgb,var(--brand2) 8%,transparent)} .k-btn.quiet{background:transparent;border-color:transparent;color:var(--ink2)} .k-btn.quiet:hover{color:var(--ink);background:var(--panel2)} .k-btn.danger{background:transparent;border-color:color-mix(in srgb,var(--neg) 55%,transparent);color:var(--neg)} .k-btn.danger:hover{background:color-mix(in srgb,var(--neg) 12%,transparent);border-color:var(--neg)} .k-btn.sm{min-height:30px;padding:5px 10px;font-size:12.5px;border-radius:var(--r-sm)} .k-btn.lg{min-height:46px;padding:12px 22px;font-size:15px;border-radius:var(--r2)} .k-btn.block{width:100%} .k-btn.icon{padding:0;width:36px} .k-btn.icon.sm{width:30px} .k-btn:disabled,.k-btn[aria-disabled="true"]{opacity:.45;pointer-events:none} .k-btn .kbd{margin-left:4px} /* ---------- Cards ---------- */ .k-card{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 94%,#fff 6%),var(--panel) 48%);border:1px solid var(--line);border-radius:var(--r2);padding:var(--sp-4);box-shadow:inset 0 1px 0 var(--elev),var(--e1)} html[data-theme="light"] .k-card, html[data-theme="paper"] .k-card, .theme-light .k-card, .theme-paper .k-card, .landing .k-card, .phone-screen .k-card{background:var(--panel)} .k-card.pad0{padding:0;overflow:hidden} .k-card.flat{box-shadow:none;background:var(--panel2)} /* Clickable cards: the hover affordance lives here, in CSS — an inline onmouseover is blocked by the CSP. */ .k-card.click{cursor:pointer;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)} .k-card.click:hover{border-color:color-mix(in srgb,var(--brand2) 55%,var(--line));box-shadow:var(--e2)} .k-card.glow{box-shadow:var(--shadow)} .k-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;min-height:24px} .k-card-t{font-weight:650;font-size:14.5px;display:flex;gap:8px;align-items:center;letter-spacing:-.01em} .k-card-t>.ic{color:var(--ink3)} .k-card-s{font-size:var(--fs-sm);color:var(--ink2);margin:-6px 0 12px} .k-card-f{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} /* ---------- Chips, badges, status dots ---------- */ .k-chip{ display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-pill); font-size:11.5px;font-weight:600;background:var(--panel2);border:1px solid var(--line2);color:var(--ink2); line-height:1.55;white-space:nowrap; } .k-chip.pos{background:color-mix(in srgb,var(--pos) 13%,transparent);border-color:color-mix(in srgb,var(--pos) 35%,transparent);color:var(--pos)} .k-chip.neg{background:color-mix(in srgb,var(--neg) 13%,transparent);border-color:color-mix(in srgb,var(--neg) 35%,transparent);color:var(--neg)} .k-chip.warn{background:color-mix(in srgb,var(--warn) 13%,transparent);border-color:color-mix(in srgb,var(--warn) 38%,transparent);color:var(--warn)} .k-chip.info{background:color-mix(in srgb,var(--info) 13%,transparent);border-color:color-mix(in srgb,var(--info) 38%,transparent);color:var(--info)} .k-chip.gold{background:color-mix(in srgb,var(--gold) 14%,transparent);border-color:color-mix(in srgb,var(--gold) 40%,transparent);color:var(--gold)} .k-chip.brand{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand2) 40%,transparent);color:var(--t2-ink)} button.k-chip{font-family:inherit;cursor:pointer} .k-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;border-radius:var(--r-pill);font-size:11px;font-weight:700;line-height:1;background:var(--neg);color:#fff;font-variant-numeric:tabular-nums} .k-badge.info{background:var(--info);color:#fff} .k-badge.quiet{background:var(--panel2);color:var(--ink2);border:1px solid var(--line2)} html[data-theme="light"] .k-badge.info, .theme-light .k-badge.info{background:#2B6CB0} .k-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink3);flex:none} .k-dot.pos{background:var(--pos)} .k-dot.neg{background:var(--neg)} .k-dot.warn{background:var(--warn)} .k-dot.info{background:var(--info)} .kbd{display:inline-flex;align-items:center;font-family:var(--font-m);font-size:11px;line-height:1.3;padding:1px 6px;border-radius:5px;border:1px solid var(--line2);border-bottom-width:2px;background:var(--panel2);color:var(--ink2)} /* ---------- KPI tile (existing) + stat tile with trend and sparkline (v2) ---------- */ .k-kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;position:relative;overflow:hidden;box-shadow:var(--e1)} .k-kpi .kk-l{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3)} .k-kpi .kk-v{font-size:24px;font-weight:640;margin-top:4px;font-family:var(--font-d);letter-spacing:-.01em;line-height:1.15;overflow-wrap:anywhere} .k-kpi .kk-v.sm{font-size:19px} .k-kpi .kk-s{font-size:12px;color:var(--ink2);margin-top:3px} .k-kpi.hero .kk-v{font-size:30px} .k-stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px 12px;display:flex;flex-direction:column;gap:2px;min-width:0;box-shadow:var(--e1);position:relative} .k-stat .ks-h{display:flex;align-items:center;justify-content:space-between;gap:8px} .k-stat .ks-l{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3)} .k-stat .ks-v{font-family:var(--font-d);font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.15;margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .k-stat .ks-v.sm{font-size:20px} .k-stat .ks-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:2px} .k-stat .ks-s{font-size:12px;color:var(--ink2)} .k-stat .ks-spark{flex:none;width:96px;height:30px;color:var(--brand2)} .k-stat .ks-spark svg{display:block;width:100%;height:100%;overflow:visible} .k-stat.click{cursor:pointer;transition:border-color var(--dur-2),box-shadow var(--dur-2)} .k-stat.click:hover{border-color:color-mix(in srgb,var(--brand2) 55%,var(--line));box-shadow:var(--e2)} .k-trend{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums;padding:1px 7px;border-radius:var(--r-pill);white-space:nowrap} .k-trend.up{color:var(--pos);background:color-mix(in srgb,var(--pos) 12%,transparent)} .k-trend.down{color:var(--neg);background:color-mix(in srgb,var(--neg) 12%,transparent)} .k-trend.flat{color:var(--ink2);background:var(--panel2)} .k-spark{display:inline-block;vertical-align:middle;color:var(--brand2)} .k-spark .sp-l{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .k-spark .sp-a{fill:currentColor;opacity:.12;stroke:none} .k-spark .sp-p{fill:currentColor} .k-avatar{ display:inline-flex;align-items:center;justify-content:center;border-radius:50%; background:hsl(var(--h,160) 45% 26%);color:hsl(var(--h,160) 70% 84%); font-weight:700;flex:none;border:1px solid hsl(var(--h,160) 45% 36%);letter-spacing:.01em; } html[data-theme="paper"] .k-avatar, html[data-theme="light"] .k-avatar, .theme-paper .k-avatar, .theme-light .k-avatar{background:hsl(var(--h,160) 42% 90%);color:hsl(var(--h,160) 55% 26%);border-color:hsl(var(--h,160) 40% 76%)} /* ---------- Inputs ---------- */ .k-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;min-width:0} .k-field label,.k-label{font-size:12px;font-weight:600;color:var(--ink2)} .k-hint{font-size:11.5px;color:var(--ink3)} .k-err{font-size:11.5px;color:var(--neg);font-weight:600} .k-input,.k-select,textarea.k-input{ background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r1);min-height:38px; padding:9px 12px;font-size:14px;outline:none;transition:border-color var(--dur-2),box-shadow var(--dur-2),background var(--dur-2);width:100%; } .k-input:hover,.k-select:hover{border-color:color-mix(in srgb,var(--ink3) 55%,var(--line2))} .k-input:focus,.k-select:focus,.k-input:focus-visible,.k-select:focus-visible{border-color:var(--brand2);box-shadow:var(--focus-ring);outline:none;background:var(--panel)} .k-input::placeholder{color:var(--ink3);opacity:1} .k-input[aria-invalid="true"]{border-color:var(--neg)} .k-input:disabled,.k-select:disabled{opacity:.6;cursor:not-allowed} select.k-input,.k-select{cursor:pointer} .k-input.big{font-size:22px;font-family:var(--font-m);padding:12px 14px} .k-search{position:relative} .k-search .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink3);pointer-events:none} .k-search .k-input{padding-left:36px} .k-seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-pill);padding:3px;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none} .k-seg::-webkit-scrollbar{display:none} .k-seg button{padding:5px 13px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--ink2);transition:background var(--dur-2),color var(--dur-2);white-space:nowrap;flex:none} .k-seg button:hover{color:var(--ink)} .k-seg button.on,.k-seg button[aria-pressed="true"]{background:var(--brand);color:#F4FAF5;box-shadow:var(--e1)} @media(max-width:640px){.k-seg button{min-height:40px}.k-btn.sm{min-height:40px;min-width:40px}.k-btn{min-height:40px}} .k-switch{position:relative;width:40px;height:23px;border-radius:99px;background:var(--line2);transition:background var(--dur-2);flex:none} .k-switch::after{content:'';position:absolute;top:2.5px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left var(--dur-2) var(--ease);box-shadow:0 1px 4px rgba(0,0,0,.3)} .k-switch.on{background:var(--brand2)} .k-switch.on::after{left:19px} /* ---------- Tables + data grid ---------- */ .k-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px} .k-table th{ text-align:left;font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.07em; color:var(--ink3);padding:9px 12px;border-bottom:1px solid var(--line2);position:sticky;top:0;background:var(--panel);z-index:2;white-space:nowrap; } .k-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle} .k-table tbody tr:last-child td{border-bottom-color:transparent} .k-table tbody tr{transition:background var(--dur-1)} .k-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--panel2) 45%,transparent)} .k-table tbody tr:hover td{background:color-mix(in srgb,var(--brand2) 7%,var(--panel2))} .k-table tbody tr.click{cursor:pointer} .k-table .r,.k-table td.num,.k-table th.num{text-align:right;font-variant-numeric:tabular-nums} .k-table td.r{white-space:nowrap} .k-table.compact td{padding:7px 10px} .k-table.compact th{padding:7px 10px} .k-table.plain tbody tr:nth-child(even) td{background:none} .k-table th[data-sort]{cursor:pointer;user-select:none} .k-table th[data-sort]:hover{color:var(--ink)} .k-table th[aria-sort]::after{content:'';display:inline-block;margin-left:5px;border:4px solid transparent;vertical-align:middle} .k-table th[aria-sort="ascending"]::after{border-bottom-color:currentColor;margin-top:-4px} .k-table th[aria-sort="descending"]::after{border-top-color:currentColor;margin-top:4px} .k-grid{border:1px solid var(--line);border-radius:var(--r2);overflow:auto;max-height:min(68vh,620px);background:var(--panel)} .k-grid .k-table th{background:color-mix(in srgb,var(--panel2) 70%,var(--panel))} .k-grid-f{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;font-size:12px;color:var(--ink3);border-top:1px solid var(--line)} /* ---------- Tabs ---------- */ .k-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:none} .k-tabs::-webkit-scrollbar{display:none} .k-tabs button{ padding:9px 14px;font-weight:600;font-size:13.5px;color:var(--ink2);border-bottom:2px solid transparent;border-radius:var(--r-sm) var(--r-sm) 0 0; margin-bottom:-1px;white-space:nowrap;display:inline-flex;gap:7px;align-items:center;transition:color var(--dur-2),border-color var(--dur-2),background var(--dur-2); } .k-tabs button:hover{color:var(--ink);background:color-mix(in srgb,var(--brand2) 6%,transparent)} .k-tabs button.on,.k-tabs button[aria-selected="true"]{color:var(--t2-ink);border-bottom-color:var(--brand2)} .k-tabs button .k-badge{margin-left:2px} /* ---------- Progress bar + ring ---------- */ .k-prog{height:7px;border-radius:99px;background:var(--line);overflow:hidden} .k-prog>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand2),var(--gold));transition:width .5s var(--ease)} .k-prog.pos>i{background:var(--pos)} .k-prog.warn>i{background:var(--warn)} .k-prog.neg>i{background:var(--neg)} .k-prog.thin{height:4px} .k-ring{display:inline-grid;place-items:center;position:relative;flex:none} .k-ring svg{display:block;transform:rotate(-90deg)} .k-ring .rg-t{fill:none;stroke:var(--line)} .k-ring .rg-v{fill:none;stroke:var(--brand2);stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)} .k-ring.pos .rg-v{stroke:var(--pos)} .k-ring.warn .rg-v{stroke:var(--warn)} .k-ring.neg .rg-v{stroke:var(--neg)} .k-ring .rg-l{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums} /* ---------- Stepper ---------- */ .k-steps{display:flex;list-style:none;gap:0;counter-reset:kstep;overflow-x:auto;scrollbar-width:none} .k-steps li{flex:1;min-width:96px;position:relative;padding-top:34px;font-size:12.5px;color:var(--ink2);text-align:center;counter-increment:kstep} .k-steps li::before{content:counter(kstep);position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;background:var(--panel2);border:1.5px solid var(--line2);color:var(--ink2);z-index:1} .k-steps li::after{content:'';position:absolute;top:12px;left:calc(50% + 15px);right:calc(-50% + 15px);height:2px;background:var(--line2)} .k-steps li:last-child::after{display:none} .k-steps li.done::before{content:'✓';background:var(--pos);border-color:var(--pos);color:#fff} .k-steps li.done::after{background:var(--pos)} .k-steps li.on{color:var(--ink);font-weight:650} .k-steps li.on::before{border-color:var(--brand2);color:var(--t2-ink);box-shadow:var(--focus-ring)} /* ---------- Timeline ---------- */ .k-timeline{list-style:none;position:relative;padding-left:20px} .k-timeline::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line2);border-radius:2px} .k-timeline li{position:relative;padding:0 0 14px 8px} .k-timeline li:last-child{padding-bottom:0} .k-timeline li::before{content:'';position:absolute;left:-19px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--panel);border:2.5px solid var(--brand2)} .k-timeline li.warn::before{border-color:var(--warn)} .k-timeline li.neg::before{border-color:var(--neg)} .k-timeline li.pos::before{border-color:var(--pos)} .k-timeline li.quiet::before{border-color:var(--line2)} .k-timeline .tl-t{font-weight:600;font-size:13.5px} .k-timeline .tl-s{font-size:12px;color:var(--ink2)} .k-timeline .tl-w{font-size:11.5px;color:var(--ink3);font-family:var(--font-m)} /* ---------- Empty, loading, refused ---------- */ .k-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 16px;color:var(--ink3);text-align:center} .k-empty>svg.ic{box-sizing:content-box;padding:12px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--ink3);margin-bottom:4px} .k-empty .ke-t{font-weight:650;color:var(--ink);font-size:14.5px} .k-empty .ke-s{font-size:12.5px;max-width:380px;color:var(--ink2);line-height:1.55} .k-empty .ke-a{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px} .k-empty.is-loading>svg.ic{display:none} .k-empty.is-loading{align-items:stretch;text-align:left;padding:18px 4px;gap:10px} .k-empty.is-loading .ke-t{font-weight:600;font-size:12.5px;color:var(--ink2);display:flex;align-items:center;gap:8px} .k-empty.is-loading .ke-t::before{content:'';width:12px;height:12px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--brand2);animation:kSpin .8s linear infinite;flex:none} @keyframes kSpin{to{transform:rotate(360deg)}} .k-skel{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--panel2) 0%,color-mix(in srgb,var(--panel2) 60%,var(--line2)) 40%,var(--panel2) 80%);background-size:220% 100%;animation:kShimmer 1.4s ease-in-out infinite;min-height:12px} .k-skel.line{height:12px;margin:7px 0} .k-skel.line.short{width:42%} .k-skel.line.mid{width:68%} .k-skel.title{height:18px;width:36%;margin-bottom:12px} .k-skel.block{height:92px;border-radius:var(--r2)} .k-skel.circle{width:34px;height:34px;border-radius:50%} .k-skel-wrap{display:flex;flex-direction:column;gap:4px} .k-skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} .k-skel-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)} .k-skel-row .k-skel.line{flex:1;margin:0} @keyframes kShimmer{0%{background-position:120% 0}100%{background-position:-120% 0}} .k-refused{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r2);border:1px solid color-mix(in srgb,var(--neg) 38%,var(--line));background:color-mix(in srgb,var(--neg) 7%,var(--panel))} .k-refused>.ic{color:var(--neg);margin-top:2px} .k-refused b{display:block;font-size:13.5px} .k-refused span{font-size:12.5px;color:var(--ink2)} /* ---------- Callouts ---------- */ .k-callout{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r2);border:1px solid var(--line);background:var(--panel2);font-size:13px;line-height:1.55} .k-callout>.ic{margin-top:2px;color:var(--ink3)} .k-callout b{display:block;font-size:13.5px;margin-bottom:1px} .k-callout .kc-b{color:var(--ink2);font-size:12.5px} .k-callout.info{border-color:color-mix(in srgb,var(--info) 36%,var(--line));background:color-mix(in srgb,var(--info) 8%,var(--panel))} .k-callout.info>.ic{color:var(--info)} .k-callout.pos{border-color:color-mix(in srgb,var(--pos) 36%,var(--line));background:color-mix(in srgb,var(--pos) 8%,var(--panel))} .k-callout.pos>.ic{color:var(--pos)} .k-callout.warn{border-color:color-mix(in srgb,var(--warn) 40%,var(--line));background:color-mix(in srgb,var(--warn) 8%,var(--panel))} .k-callout.warn>.ic{color:var(--warn)} .k-callout.neg{border-color:color-mix(in srgb,var(--neg) 40%,var(--line));background:color-mix(in srgb,var(--neg) 7%,var(--panel))} .k-callout.neg>.ic{color:var(--neg)} /* ---------- Toolbar + filter bar ---------- */ .k-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px} .k-toolbar .k-search{flex:1;min-width:min(220px,100%)} .k-toolbar .sep{width:1px;align-self:stretch;background:var(--line);margin:2px 2px} .k-filterbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px} .k-filter{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 11px;border-radius:var(--r-pill);border:1px solid var(--line2);background:transparent;font-size:12.5px;font-weight:600;color:var(--ink2);transition:all var(--dur-1)} .k-filter:hover{color:var(--ink);border-color:color-mix(in srgb,var(--brand2) 45%,var(--line2))} .k-filter[aria-pressed="true"],.k-filter.on{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand2) 45%,transparent);color:var(--t2-ink)} .k-filter .k-badge{height:17px;min-width:17px;font-size:10.5px} @media(max-width:640px){.k-filter{min-height:40px}} /* ---------- Breadcrumbs ---------- */ .k-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--ink3);margin:0 0 10px;min-height:20px} .k-crumbs a{color:var(--ink2);font-weight:550} .k-crumbs a:hover{color:var(--ink)} .k-crumbs .sep{color:var(--ink3);opacity:.8} .k-crumbs [aria-current]{color:var(--ink);font-weight:600} .k-crumbs .k-back{display:inline-flex;align-items:center;gap:4px;margin-right:6px;padding:2px 8px 2px 4px;border-radius:var(--r-sm);color:var(--ink2);font-weight:600} .k-crumbs .k-back:hover{background:var(--panel2);color:var(--ink);text-decoration:none} .k-crumbs .pin{margin-left:auto} /* ---------- Split view + drawer ---------- */ .k-split{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:14px;align-items:start} .k-split>*{min-width:0} .k-split .ks-list{display:flex;flex-direction:column;gap:6px;max-height:70vh;overflow:auto} .k-split .ks-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r1);background:var(--panel)} .k-split .ks-item:hover{border-color:color-mix(in srgb,var(--brand2) 45%,var(--line))} .k-split .ks-item[aria-selected="true"],.k-split .ks-item.on{border-color:var(--brand2);background:var(--brand-soft)} @media(max-width:900px){.k-split{grid-template-columns:1fr}} .k-drawer-ov{position:fixed;inset:0;z-index:7600;background:var(--overlay);backdrop-filter:blur(3px);opacity:0;transition:opacity var(--dur-3) var(--ease)} .k-drawer-ov.in{opacity:1} .k-drawer{position:absolute;top:0;right:0;bottom:0;width:min(480px,94vw);background:var(--panel);border-left:1px solid var(--line2);display:flex;flex-direction:column;box-shadow:var(--shadow);transform:translateX(24px);transition:transform var(--dur-3) var(--ease-out)} .k-drawer-ov.in .k-drawer{transform:none} .k-drawer.wide{width:min(720px,96vw)} .k-drawer-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)} .k-drawer-t{font-weight:660;font-size:15.5px} .k-drawer-b{flex:1;overflow-y:auto;padding:16px 18px} .k-drawer-f{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)} /* ---------- Toasts ---------- */ #toasts{position:fixed;bottom:22px;right:22px;z-index:9000;display:flex;flex-direction:column;gap:9px;max-width:400px;pointer-events:none} .k-toast{ display:flex;gap:10px;align-items:flex-start;background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--info); border-radius:var(--r2);padding:12px 12px 12px 13px;font-size:13px;font-weight:550;line-height:1.5;box-shadow:var(--shadow);pointer-events:auto; opacity:0;transform:translateY(10px) scale(.98);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease-spring); } .k-toast.in{opacity:1;transform:none} .k-toast>div{flex:1;min-width:0;overflow-wrap:anywhere} .k-toast .tic{margin-top:1px;flex:none} .k-toast .tx{flex:none;width:24px;height:24px;margin:-3px -3px 0 0;border-radius:var(--r-xs);display:grid;place-items:center;color:var(--ink3)} .k-toast .tx:hover{background:var(--panel2);color:var(--ink)} .k-toast.ok{border-left-color:var(--pos)} .k-toast.err{border-left-color:var(--neg)} .k-toast.warn{border-left-color:var(--warn)} .k-toast.ok .tic{color:var(--pos)} .k-toast.err .tic{color:var(--neg)} .k-toast.warn .tic{color:var(--warn)} .k-toast.info .tic{color:var(--info)} @media(max-width:640px){#toasts{left:12px;right:12px;bottom:12px;max-width:none}} /* ---------- Modal / overlay ---------- */ .k-overlay{ position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(6px); z-index:8000;display:flex;align-items:center;justify-content:center;padding:22px; opacity:0;transition:opacity var(--dur-3) var(--ease); } .k-overlay.in{opacity:1} .k-modal{ background:var(--panel);border:1px solid var(--line2);border-radius:var(--r3); width:min(500px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden; transform:translateY(12px) scale(.985);transition:transform var(--dur-3) var(--ease-spring);box-shadow:var(--shadow); } .k-overlay.in .k-modal{transform:none} .k-modal.wide{width:min(880px,100%)} .k-modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 13px;border-bottom:1px solid var(--line)} .k-modal-title{font-weight:660;font-size:15.5px;display:flex;align-items:center;gap:8px;min-width:0;letter-spacing:-.01em} .k-x{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--ink2);flex:none} .k-x:hover{background:var(--panel2);color:var(--ink)} .k-modal-b{padding:16px 18px;overflow-y:auto} .k-modal-f{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;padding:13px 18px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel2) 50%,var(--panel))} .k-overlay.busy .k-modal-f::before{content:'';width:14px;height:14px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--brand2);animation:kSpin .8s linear infinite;align-self:center;margin-right:auto} /* phones: a dialog rises from the bottom edge, full width — thumbs reach it and nothing overflows 375px */ @media(max-width:640px){ .k-overlay{align-items:flex-end;padding:0} .k-modal,.k-modal.wide{width:100%;max-height:92vh;border-radius:var(--r3) var(--r3) 0 0;border-bottom:0;transform:translateY(28px)} .k-modal-f .k-btn{flex:1} } /* ---------- Command palette ("search everything") + shortcuts overlay ---------- */ .k-cmd .k-modal-b{padding:12px 14px 14px} .k-cmd-in{position:relative;margin-bottom:8px} .k-cmd-in>.ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink3);pointer-events:none} .k-cmd-in .k-input{padding-left:38px;min-height:44px;font-size:15px} .jq-hint{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:11.5px;color:var(--ink3);margin:4px 2px 8px} .jq-list{max-height:min(56vh,460px);overflow-y:auto;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain} .jq-sec{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);padding:10px 10px 4px} .jq-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:var(--ink);background:none;border:1px solid transparent;border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;min-height:40px} .jq-item>.ic{color:var(--ink3)} .jq-item:hover,.jq-item.on{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand2) 25%,transparent)} .jq-item.on>.ic{color:var(--t2-ink)} .jq-item .jq-t{font-weight:600;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .jq-item .jq-s{font-size:12px;color:var(--ink3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .jq-item .jq-p{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap;padding-left:8px} .jq-item .jq-pin{margin-left:6px;color:var(--gold-ink)} .jq-empty{padding:14px 10px;color:var(--ink2);font-size:13px} .jq-reason{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;padding:10px;border:1px dashed var(--line2);border-radius:var(--r1);margin:6px 0} .jq-reason .k-field{flex:1;min-width:200px;margin:0} .k-shortcuts .ks-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px} .k-shortcuts .ks-k{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px} .k-shortcuts .ks-k span:last-child{display:flex;gap:4px;flex:none} .k-shortcuts h4{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin:12px 0 2px;grid-column:1/-1} @media(max-width:640px){.k-shortcuts .ks-grid{grid-template-columns:1fr}} /* ---------- Not found ---------- */ .k-nf{max-width:620px;margin:40px auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px} .k-nf .nf-code{font-family:var(--font-m);font-size:12px;color:var(--ink3);letter-spacing:.08em} .k-nf h1{font-family:var(--font-d);font-weight:560;font-size:30px} .k-nf p{color:var(--ink2);max-width:480px} .k-nf .nf-route{font-family:var(--font-m);font-size:12.5px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 8px;color:var(--ink2);overflow-wrap:anywhere} .k-nf .nf-sugg{width:100%;margin-top:8px;text-align:left} .k-nf .nf-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px} /* ---------- Confirmation ceremony ---------- */ .cer .cer-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line2);font-size:14px} .cer .cer-row b{font-size:14.5px;text-align:right;overflow-wrap:anywhere} .cer .cer-note{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;color:var(--ink3);margin:12px 0 14px;line-height:1.45} .cer-hold{ position:relative;width:100%;padding:15px;border-radius:var(--r2);overflow:hidden; background:var(--panel2);border:1.5px solid var(--brand2);font-weight:700;font-size:14.5px;color:var(--ink); } .cer-hold .cer-fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width .15s} .cer-hold.holding .cer-fill{width:100%;transition:width .9s linear} .cer-hold.done .cer-fill{width:100%} .cer-hold .cer-lbl{position:relative;display:flex;gap:8px;align-items:center;justify-content:center} .cer-hold.done{border-color:var(--pos)} /* ---------- Sheets (phone) ---------- */ .k-sheet-ov{position:absolute;inset:0;background:rgba(8,14,11,.45);backdrop-filter:blur(3px);z-index:60;display:flex;align-items:flex-end;opacity:0;transition:opacity .22s;border-radius:inherit} .k-sheet-ov.in{opacity:1} .k-sheet{background:var(--panel);border-radius:20px 20px 0 0;width:100%;max-height:86%;overflow-y:auto;padding:10px 16px 20px;transform:translateY(30px);transition:transform .26s cubic-bezier(.2,.9,.3,1.1)} .k-sheet-ov.in .k-sheet{transform:none} .k-sheet-grip{width:38px;height:4px;border-radius:99px;background:var(--line2);margin:4px auto 10px} .k-sheet-t{font-weight:660;font-size:15px;margin-bottom:10px} /* ---------- Charts ---------- */ .ch-grid{stroke:var(--line);stroke-width:1} .ch-tick{fill:var(--ink3);font-size:10px;font-family:var(--font-m)} .ch-leg{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--ink2)} .ch-leg.col{flex-direction:column;gap:6px} .ch-leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px} .donut-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .donut-v{fill:var(--ink);font-size:19px;font-weight:650;font-family:var(--font-d)} .donut-l{fill:var(--ink3);font-size:10.5px} .k-heat{display:grid;gap:3px;font-size:10.5px} .k-heat .kh-c,.k-heat .kh-r{color:var(--ink3);display:flex;align-items:center;justify-content:center;padding:2px} .k-heat .kh-r{justify-content:flex-end;padding-right:7px;white-space:nowrap} .k-heat .kh-cell{aspect-ratio:1.6;border-radius:4px;background:color-mix(in srgb,var(--brand2) calc(var(--v)*88%),var(--panel2));cursor:default;transition:transform .1s} .k-heat .kh-cell:hover{transform:scale(1.12)} /* ---------- App layout: top bar ---------- */ #app{min-height:100vh;display:flex;flex-direction:column} .topbar{ display:flex;align-items:center;gap:12px;padding:0 16px;height:56px; border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 86%,transparent); backdrop-filter:blur(14px) saturate(1.2);position:sticky;top:0;z-index:500; } .brandmark{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;cursor:pointer;min-width:0;flex:none;white-space:nowrap} .brandmark .bm-logo{ width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none; background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#000));color:#F2F8F3; font-family:var(--font-d);font-size:17px;font-weight:640;box-shadow:0 6px 16px -7px var(--brand); } .brandmark .bm-sub{font-size:10px;color:var(--ink3);font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap} .topbar .k-seg button{padding:4px 11px} .top-clock{font-family:var(--font-m);font-size:12px;color:var(--ink2);display:flex;gap:7px;align-items:center;white-space:nowrap} .top-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--ink2);position:relative;flex:none} .top-ic:hover{background:var(--panel2);color:var(--ink)} .top-ic .dotn{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--neg)} /* the palette's door: a search box that says what it does and how to reach it from the keyboard */ .top-find{display:flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 10px;border-radius:var(--r1);border:1px solid var(--line2);background:color-mix(in srgb,var(--panel) 70%,transparent);color:var(--ink3);font-size:12.5px;font-weight:550;min-width:200px;transition:border-color var(--dur-2),background var(--dur-2)} .top-find:hover{border-color:color-mix(in srgb,var(--brand2) 50%,var(--line2));color:var(--ink2)} .top-find .tf-l{flex:1;text-align:left;white-space:nowrap} .top-find .kbd{font-size:10.5px} .userpill{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 5px;border-radius:99px;border:1px solid var(--line2);cursor:pointer;min-width:0;max-width:230px} .userpill:hover{border-color:var(--brand2)} .userpill>div{min-width:0} .userpill .up-n{font-size:12.5px;font-weight:650;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .userpill .up-r{font-size:10.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:1420px){.top-clock .tc-d{display:none}.top-find{min-width:0}.top-find .tf-l{display:none}} @media(max-width:1280px){.brandmark .bm-sub{display:none}} @media(max-width:1180px){.top-clock{display:none}.userpill .up-r{display:none}} /* ---------- App layout: rail + content ---------- */ .main{flex:1;display:flex;min-height:0} .sidenav{ width:220px;flex:none;border-right:1px solid var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:1px; background:var(--bg2);overflow-y:auto;position:sticky;top:56px;align-self:flex-start;height:calc(100vh - 56px);scrollbar-width:thin; } .sidenav .sn-p{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);padding:12px 11px 6px} .sidenav .sn-p:first-child{padding-top:4px} .sn-item{ display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:var(--r1);font-weight:570;font-size:13.5px; color:var(--ink2);cursor:pointer;transition:color var(--dur-1),background var(--dur-1),border-color var(--dur-1);border:1px solid transparent;position:relative; } .sn-item:hover{color:var(--ink);background:var(--panel);text-decoration:none} .sn-item>.ic{color:var(--ink3);transition:color var(--dur-1)} .sn-item:hover>.ic{color:var(--ink2)} .sn-item.on{color:var(--t2-ink);background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand2) 22%,transparent);font-weight:620} .sn-item.on>.ic{color:var(--t2-ink)} .sn-item.on::before{content:'';position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand2)} .sn-item .k-chip{margin-left:auto} .sn-item .lbl{min-width:0;line-height:1.3} /* rail items are links / buttons (keyboard-reachable): neutralise UA styles, show focus */ a.sn-item{text-decoration:none} button.sn-item{font:inherit;background:none;width:100%;text-align:left} .sn-item:focus-visible,.pp-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .sn-more{color:var(--ink3)} /* account opening (modules/account-opening.js) */ .ao-prod{border:0;padding:0;margin:0 0 6px;display:flex;flex-direction:column;gap:6px;min-width:0} .ao-opt{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;min-height:40px} .ao-opt:has(input:checked){border-color:var(--brand2);background:var(--brand-soft)} .ao-opt input{margin-top:3px;flex:none} .ao-list{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:4px} .ao-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:8px} .ao-num{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 4px} .ao-num .mono{font-size:20px;font-weight:650;letter-spacing:.04em} .sn-fill{flex:1} .content{flex:1;overflow-y:auto;padding:20px 28px 64px;min-width:0;view-transition-name:bq-screen} .content.center{display:flex;justify-content:center} .page-h{margin-bottom:18px} .page-h h1{font-size:22px;display:flex;align-items:center;gap:10px;line-height:1.25} .page-h h1:focus{outline:none} .page-h .ph-s{color:var(--ink2);font-size:13.5px;margin-top:4px;max-width:78ch;line-height:1.55} .page-h.spread{align-items:flex-end} @media(max-width:900px){.sidenav{width:64px;padding:12px 8px}.sidenav .sn-item span.lbl,.sidenav .sn-p{display:none}.content{padding:16px 14px 50px} /* the icon rail has no room for a count chip: keep it as a corner marker instead of letting it spill */ .sidenav .sn-item{position:relative;justify-content:center} .sidenav .sn-item.on::before{left:-8px} .sidenav .sn-item .k-chip{position:absolute;top:2px;right:2px;margin:0;padding:0 4px;font-size:9.5px;line-height:14px;min-width:14px;justify-content:center}} /* PHONE: below 640px the rail becomes a labelled, horizontally scrolling tab strip above the content, and the content gets the full width. */ @media(max-width:640px){ .main{flex-direction:column} .sidenav{width:auto;height:auto;position:static;flex-direction:row;align-items:center;align-self:stretch;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line);padding:6px 10px;gap:4px;scrollbar-width:none;background:color-mix(in srgb,var(--bg2) 92%,transparent);backdrop-filter:blur(12px)} .sidenav::-webkit-scrollbar{display:none} .sidenav .sn-p,.sidenav .sn-fill{display:none} .sidenav .sn-item{flex:none;width:auto;padding:7px 11px;white-space:nowrap;font-size:13px;min-height:40px} .sidenav .sn-item.on::before{display:none} .sidenav .sn-item span.lbl{display:inline} .sidenav .sn-item .k-chip{position:static;margin-left:4px;font-size:10.5px;padding:0 6px} .content{padding:14px 16px 56px} .topbar{padding:0 10px;gap:8px} .page-h h1{font-size:20px} } /* View Transitions (app.js navigates inside document.startViewTransition when the browser has it): the screen cross-fades with a short rise; the top bar and the rail stay put. */ ::view-transition-old(bq-screen){animation:vtOut var(--dur-2) var(--ease) both} ::view-transition-new(bq-screen){animation:vtIn var(--dur-3) var(--ease-out) both} @keyframes vtOut{to{opacity:0}} @keyframes vtIn{from{opacity:0;transform:translateY(6px)}} /* ---------- Phone frame ---------- */ .phone-wrap{display:flex;justify-content:center;padding:8px 0 30px} .phone{ width:392px;max-width:100%;height:816px;border-radius:44px;position:relative; background:#050807;border:1.5px solid #2A3A32;box-shadow:0 40px 90px -30px rgba(0,0,0,.75),inset 0 0 0 7px #0B0F0D; display:flex;flex-direction:column;overflow:hidden; } .phone-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:112px;height:26px;border-radius:16px;background:#0B0F0D;z-index:40;border:1px solid #1A241F} .phone-status{ height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:12px 26px 0; /* v2: the time and the signal icons sit on the SCREEN, either side of the notch — on the paper screen they were #EDF2F8 on #FAF7F0 (1.1:1, invisible). Dark ink on paper; light on a dark screen. */ font-family:var(--font-m);font-size:12.5px;font-weight:600;color:#14171F;z-index:30;background:transparent; position:absolute;top:0;left:7px;right:7px;pointer-events:none; } .phone:has(.phone-screen.dark) .phone-status, .phone:has(.sg-root:not(.porcelain)) .phone-status{color:#EDF2F8} .phone-status .ps-r{display:flex;gap:5px;align-items:center} .phone-status .ps-net{font-size:10px} .phone-screen{ flex:1;margin:7px;margin-top:7px;border-radius:37px;overflow:hidden;position:relative; background:var(--bg);display:flex;flex-direction:column; } .phone-screen{--bg:#FAF7F0;--bg2:#F4EFE2;--panel:#FFFFFF;--panel2:#FAF7F0;--line:#E7DFC9;--line2:#DAD2BC; /* this block re-declares the paper palette, so it needs the same calibration as html[data-theme=paper] */ --ink:#14171F;--ink2:#4A5260;--ink3:#626A78;--pos:#1A6338;--neg:#B03225;--warn:#85560E;--info:#245E9E; /* the phone re-scopes its own surfaces, so it must re-scope the accent INKS too */ --gold-ink:color-mix(in srgb,var(--gold) 52%,#000);--t2-ink:color-mix(in srgb,var(--t2,#3AA6A6) 60%,#000); --brand2:var(--t2,#3AA6A6); --pri:var(--brand);--pri-ink:#FAF7F0; --shadow:0 16px 34px -16px rgba(13,43,78,.24);--e1:0 1px 2px rgba(13,43,78,.06); background:var(--bg);color:var(--ink); } .phone-screen.dark{--bg:#061A33;--bg2:#0A2547;--panel:#0E2C50;--panel2:#123458;--line:#1C3A5E;--line2:#274A72; /* --ink3 lifted from #7A93AE (4.07 on this block's --panel2 #123458); accent inks go bright again on dark */ --ink:#EEF3F9;--ink2:#9DB2CC;--ink3:#87A0BB;--pos:#4CC488;--neg:#F59A9A;--warn:#E3A93D;--info:#7DB6EA; --gold-ink:var(--gold);--t2-ink:color-mix(in srgb,var(--t2,#3AA6A6) 72%,#fff); --pri:color-mix(in srgb,var(--brand2) 72%,#000);--pri-ink:#F4FBFA} .phone-home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:120px;height:4.5px;border-radius:99px;background:#B9AE90;z-index:41} .phone .app-body{flex:1;overflow-y:auto;padding:52px 16px 86px;scrollbar-width:none} .phone .app-body::-webkit-scrollbar{display:none} .phone .tabbar{ position:absolute;bottom:0;left:0;right:0;height:74px;display:flex;z-index:50; background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(16px); border-top:1px solid var(--line);padding:6px 6px 16px; } .phone .tabbar button{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:650; color:var(--ink3);border-radius:12px;padding-top:6px;transition:color .15s; } .phone .tabbar button.on{color:var(--brand)} .phone .tabbar button.fab-tab{position:relative} .phone .fab-move{ width:46px;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#000));color:#F4FAF5; margin-top:-19px;box-shadow:0 10px 22px -8px var(--brand); } /* ---------- Login gate ---------- */ .gate{min-height:100vh;display:grid;grid-template-columns:minmax(380px,42%) 1fr} @media(max-width:980px){.gate{grid-template-columns:1fr}.gate-brand{display:none}} .gate-brand{ position:sticky;top:0;height:100vh;overflow:hidden;padding:48px 52px;display:flex;flex-direction:column;justify-content:space-between;gap:28px; background: radial-gradient(900px 640px at -10% -10%, color-mix(in srgb,var(--brand2) 20%,transparent), transparent 60%), radial-gradient(760px 560px at 110% 110%, color-mix(in srgb,var(--gold) 12%,transparent), transparent 55%), linear-gradient(160deg,#0D2B4E,#061529 68%); border-right:1px solid var(--line); } .gate-brand .gb-quote{font-family:var(--font-d);font-size:28px;line-height:1.3;font-weight:520;letter-spacing:-.015em;max-width:440px} .gate-brand .gb-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:440px} .gate-brand .gb-facts{list-style:none;display:flex;flex-direction:column;gap:12px;max-width:440px} .gate-brand .gb-facts li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink2);line-height:1.5} .gate-brand .gb-facts li>.ic{color:var(--t2-ink);margin-top:2px} .gate-brand .gb-facts b{color:var(--ink);font-weight:650} .gate-panel{padding:44px 48px;overflow-y:auto} @media(max-width:640px){.gate-panel{padding:28px 16px}} .gate h1{font-size:26px;font-family:var(--font-d);font-weight:560;letter-spacing:-.02em} .id-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} @media(max-width:640px){.id-grid{grid-template-columns:1fr}} .id-card{ display:flex;gap:11px;align-items:center;padding:12px;border-radius:var(--r2); background:var(--panel);border:1px solid var(--line);cursor:pointer;transition:border-color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2) var(--ease);text-align:left;min-width:0; } .id-card:hover{border-color:color-mix(in srgb,var(--brand2) 60%,var(--line));box-shadow:var(--e2)} .id-card>div{min-width:0} .id-card .idc-n{font-weight:650;font-size:13.5px;line-height:1.25} .id-card .idc-r{font-size:11.5px;color:var(--ink2);margin-top:2px} .id-card .idc-p{font-size:10.5px;color:var(--ink3)} .gate-sec{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin:24px 0 4px;display:flex;align-items:center;gap:8px} .gate-sec::after{content:'';flex:1;height:1px;background:var(--line)} /* ---------- Portal picker ---------- */ .pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} .pp-card{ position:relative;padding:18px;border-radius:var(--r3);background:var(--panel);border:1px solid var(--line); cursor:pointer;transition:border-color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2) var(--ease);overflow:hidden;min-height:132px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--e1); } .pp-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand2) 60%,var(--line));box-shadow:var(--e2);text-decoration:none} .pp-card .ppc-ic{ width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:var(--brand-soft);color:var(--t2-ink); } .pp-card .ppc-n{font-weight:680;font-size:15px;letter-spacing:-.01em} .pp-card .ppc-d{font-size:12px;color:var(--ink2);line-height:1.5} /* the whole card was once opacity:.55 (every label below AA) — recess the SURFACE, keep full ink */ .pp-card.locked{background:var(--bg2);border-color:var(--line);cursor:not-allowed;box-shadow:none} .pp-card.locked .ppc-ic{opacity:.5} .pp-card.locked .ppc-n{color:var(--ink2)} .pp-card.locked:hover{transform:none;border-color:var(--line);box-shadow:none} /* cards are /