:root{--ink-900: #0e1f38;--ink-700: #24384f;--ink-500: #5a6b80;--ink-400: #8494a6;--ink-200: #c3cddb;--surface: #ffffff;--surface-2: #fafbfd;--surface-3: #f2f5f9;--app-bg: #f4f6fa;--line: #e4e9f0;--line-strong: #d3dae4;--brand-900: #10375f;--brand-700: #1b4b8a;--brand-600: #2a63ad;--brand-100: #e6eefa;--brand-050: #f2f6fd;--gold-700: #a5701a;--gold-100: #fbf1de;--green-700: #1a6f4b;--green-100: #e3f3ea;--red-700: #a92a22;--red-100: #fbe9e7;--amber-700: #9a6400;--amber-100: #fdf0d9;--violet-700: #543f9c;--violet-100: #eeeaf9;--teal-700: #0e6a72;--teal-100: #e2f1f2;--font-ui: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--font-num: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--rail: #e9eef5;--rail-line: #d4dde9;--rail-hover: #dde5f0;--rail-active: #ffffff;--rail-ink: #1c3452;--tint-blue: #e8f0fb;--tint-blue-ink: #12406f;--tint-green: #e6f4ec;--tint-green-ink: #14553a;--tint-amber: #fbf1dd;--tint-amber-ink: #6f4a0d;--tint-violet: #efeafa;--tint-violet-ink: #402c7a;--tint-teal: #e3f2f4;--tint-teal-ink: #0a4f57;--tint-rose: #fbeceb;--tint-rose-ink: #8a2019;--tint-sand: #f6efe3;--tint-sand-ink: #6b4d16;--tint-slate: #eaeef3;--tint-slate-ink: #2b3f57;--t-display: 32px;--t-h1: 24px;--t-h2: 18px;--t-body: 15px;--t-sm: 13.5px;--t-xs: 12px;--t-micro: 11px;--dv-1: #1b4b8a;--dv-2: #a5701a;--dv-3: #0e6a72;--dv-4: #6d4fa8;--dv-5: #1a6f4b;--dv-6: #a92a22;--dv-7: #4a7fbf;--dv-8: #8494a6;--r-sm: 4px;--r: 6px;--r-lg: 10px;--shadow-1: 0 1px 2px rgba(14, 31, 56, .05);--shadow-2: 0 4px 16px -6px rgba(14, 31, 56, .16);--shadow-3: 0 18px 48px -18px rgba(14, 31, 56, .32);--sidebar-w: 244px;--topbar-h: 58px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--app-bg);color:var(--ink-700);font-family:var(--font-ui);font-size:var(--t-body);line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"cv05" 1,"ss01" 1}h1,h2,h3,h4{color:var(--ink-900);margin:0;font-weight:600;letter-spacing:-.01em}h1{font-size:var(--t-h1)}h2{font-size:var(--t-h2)}a{color:var(--brand-700);text-decoration:none}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#cfd8e4;border-radius:20px;border:2px solid var(--app-bg)}::-webkit-scrollbar-track{background:transparent}:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px;border-radius:3px}.survey-grid{background-image:linear-gradient(to right,rgba(27,75,138,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(27,75,138,.055) 1px,transparent 1px);background-size:22px 22px}.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}.eyebrow{font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400)}.muted{color:var(--ink-500)}.row{display:flex;align-items:center}.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.spacer{flex:1}.grid{display:grid;gap:16px}@media (max-width: 900px){.hide-sm{display:none!important}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.shell{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--rail);border-right:1px solid var(--rail-line);color:var(--ink-700);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:17px 16px;border-bottom:1px solid var(--rail-line)}.brand-mark{width:34px;height:34px;border-radius:9px;flex:0 0 auto;background:url("/assets/riksa-logo.webp") center/contain no-repeat;color:transparent;display:grid;place-items:center;font-weight:700;font-size:0;letter-spacing:-.02em;box-shadow:0 2px 6px #1b4b8a47}.brand-name{font-weight:600;color:var(--ink-900);letter-spacing:-.01em;line-height:1.2}.brand-sub{font-size:11.5px;color:var(--ink-500);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}.sidebar-scope{margin:12px;padding:10px 12px;background:var(--surface);border:1px solid var(--rail-line);border-radius:var(--r);cursor:pointer;text-align:left;width:calc(100% - 24px);transition:border-color .12s,box-shadow .12s}.sidebar-scope:hover{border-color:var(--brand-600);box-shadow:var(--shadow-1)}.sidebar-scope .lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);font-weight:600}.sidebar-scope .val{color:var(--ink-900);font-size:14px;font-weight:600;margin-top:3px;display:flex;justify-content:space-between;align-items:center;gap:8px}.sidebar-scope .sub{color:var(--ink-500);font-size:12px;margin-top:1px}.nav{flex:1;overflow-y:auto;padding-bottom:14px}.nav::-webkit-scrollbar-thumb{background:var(--ink-200);border-color:transparent}.nav-section+.nav-section{margin-top:2px}.nav-group{display:flex;align-items:center;gap:8px;width:100%;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-500);padding:15px 12px 7px;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;font-weight:700}.nav-group:hover{color:var(--ink-700)}.nav-group span{flex:1}.nav-group svg{opacity:.55;transition:transform .15s ease}.nav-group.shut svg{transform:rotate(-90deg)}.nav-group .grp-dot{width:5px;height:5px;border-radius:50%;background:var(--brand-700)}.nav-item{display:flex;align-items:center;gap:10px;height:35px;margin:1px 8px;padding:0 11px;border-radius:var(--r);color:var(--ink-700);font-size:14px;text-decoration:none;cursor:pointer;position:relative;transition:background .12s,color .12s}.nav-item:hover{background:var(--rail-hover);color:var(--ink-900)}.nav-item.active{background:var(--rail-active);color:var(--brand-900);font-weight:600}.nav-item.active:before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-700)}.nav-item.active .ico{opacity:1;color:var(--brand-700)}.nav-item .ico{opacity:.62;flex:0 0 auto}.nav-item .count{margin-left:auto;font-size:11px;font-weight:600;background:var(--brand-700);color:#fff;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}.nav-item.active .count{background:var(--brand-100);color:var(--brand-700)}.main{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:var(--topbar-h);flex:0 0 var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:30}.searchbox{display:flex;align-items:center;gap:8px;background:var(--surface-3);border:1px solid transparent;border-radius:var(--r);padding:6px 11px;width:330px;max-width:40vw}.searchbox:focus-within{background:#fff;border-color:var(--brand-600)}.searchbox input{border:none;background:none;outline:none;width:100%;font-size:14.5px}.searchbox kbd{font-family:var(--font-num);font-size:11.5px;color:var(--ink-400);border:1px solid var(--line-strong);border-radius:3px;padding:0 4px}.icon-btn{width:32px;height:32px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;position:relative}.icon-btn:hover{background:var(--surface-3)}.icon-btn .dot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--red-700)}.userchip{display:flex;align-items:center;gap:9px;cursor:pointer;padding:4px 6px;border-radius:var(--r);border:none;background:none}.userchip:hover{background:var(--surface-3)}.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:grid;place-items:center;font-size:13px;font-weight:600}.userchip .nm{font-size:14px;font-weight:600;color:var(--ink-900);line-height:1.2}.userchip .rl{font-size:12px;color:var(--ink-400)}.content{padding:22px;flex:1}.pagehead{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}.pagehead .sub{color:var(--ink-500);font-size:var(--t-sm);margin-top:3px}.crumb{font-size:var(--t-xs);color:var(--ink-400);letter-spacing:.05em;margin-bottom:5px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}.card-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}.card-head h2{font-size:15.5px}.card-head .hint{font-size:var(--t-xs);color:var(--ink-400)}.card-body{padding:16px}.grid>*,.kpi-grid>*,.stat-band>*{min-width:0}.card{min-width:0}.card-foot{padding:10px 16px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}.kpi{background:var(--tint, var(--surface));border:1px solid var(--tint-line, var(--line));border-radius:var(--r-lg);padding:15px 16px 13px;position:relative;box-shadow:var(--shadow-1);min-width:0}.kpi:before{border-radius:var(--r-lg) 0 0 var(--r-lg)}.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent, var(--brand-700))}.kpi .lbl{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tint-ink, var(--ink-500));opacity:.82}.kpi .val{font-family:var(--font-num);font-size:23px;font-weight:600;color:var(--tint-ink, var(--ink-900));margin:7px 0 2px;letter-spacing:-.03em;overflow-wrap:anywhere;line-height:1.15}.kpi .meta{font-size:var(--t-xs);color:var(--tint-ink, var(--ink-500));opacity:.78;display:flex;align-items:center;gap:5px}.delta{font-weight:600;font-family:var(--font-num);font-size:12.5px}.delta.up{color:var(--green-700)}.delta.down{color:var(--red-700)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:33px;padding:0 14px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-700);font-size:14px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s;white-space:nowrap}.btn:hover{background:var(--surface-3)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--brand-700);border-color:var(--brand-700);color:#fff}.btn-primary:hover{background:var(--brand-900);border-color:var(--brand-900)}.btn-ghost{border-color:transparent;background:transparent}.btn-ghost:hover{background:var(--surface-3)}.btn-danger{color:var(--red-700);border-color:#f0cfcb;background:var(--red-100)}.btn-sm{height:27px;padding:0 10px;font-size:13px}.btn-block{width:100%}.badge{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:20px;font-size:var(--t-xs);font-weight:600;letter-spacing:.01em;background:var(--surface-3);color:var(--ink-500);white-space:nowrap}.badge .pip{width:6px;height:6px;border-radius:50%;background:currentColor}.badge.green{background:var(--green-100);color:var(--green-700)}.badge.red{background:var(--red-100);color:var(--red-700)}.badge.amber{background:var(--amber-100);color:var(--amber-700)}.badge.blue{background:var(--brand-100);color:var(--brand-700)}.badge.gold{background:var(--gold-100);color:var(--gold-700)}.badge.violet{background:var(--violet-100);color:var(--violet-700)}.badge.teal{background:var(--teal-100);color:var(--teal-700)}.table-wrap{overflow-x:auto}table.tbl{width:100%;border-collapse:collapse}/* a table wider than its card scrolls inside it, rather than running out of it. Scoped with :has so it touches only cards that actually hold a table — a blanket overflow on every card would clip menus and popovers that are meant to escape. */.card:has(> .tbl),.card:has(> .table-wrap > .tbl){overflow-x:auto}.card:has(> .tbl) > .tbl{min-width:max-content}.tbl th{text-align:left;font-size:var(--t-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400);padding:9px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap;position:sticky;top:0}.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}.tbl tbody tr:hover{background:var(--brand-050)}.tbl tbody tr:last-child td{border-bottom:none}.tbl .r{text-align:right}.tbl .strong{font-weight:600;color:var(--ink-900)}.linkcell{color:var(--brand-700);font-weight:600;cursor:pointer}.linkcell:hover{text-decoration:underline}.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}.field{display:flex;flex-direction:column;gap:5px}.field label{font-size:var(--t-xs);font-weight:600;color:var(--ink-500);letter-spacing:.04em}.input,select.input,textarea.input{height:33px;padding:0 10px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);outline:none;font-size:14.5px}textarea.input{height:auto;padding:8px 10px;resize:vertical}.input:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-050)}.input::placeholder{color:var(--ink-400)}.segment{display:inline-flex;background:var(--surface-3);border-radius:var(--r);padding:2px}.segment button{border:none;background:none;padding:5px 12px;border-radius:4px;font-size:13.5px;font-weight:600;color:var(--ink-500);cursor:pointer}.segment button.on{background:var(--surface);color:var(--ink-900);box-shadow:var(--shadow-1)}.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}.tabs button{border:none;background:none;padding:9px 14px;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--ink-500);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}.tabs button:hover{color:var(--ink-900)}.tabs button.on{color:var(--brand-700);border-bottom-color:var(--brand-700)}.mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}.mosaic.lg{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}.plot-tile{aspect-ratio:auto;min-height:96px;padding:12px 10px;border-radius:8px;border:1.5px solid var(--line-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-family:var(--font-num);font-size:19px;font-weight:700;letter-spacing:-.01em;cursor:pointer;background:var(--surface-3);color:var(--ink-500);transition:transform .1s ease,box-shadow .1s ease}.plot-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);z-index:2}.plot-tile .sqft{font-size:13px;font-weight:500;opacity:.9;font-family:var(--font-num);letter-spacing:0}.plot-state{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.8;font-family:var(--font-sans,inherit)}.plot-acts{display:flex;gap:6px;margin-top:8px;width:100%}.plot-acts .btn{flex:1;padding:7px 8px;font-size:12.5px;font-weight:600;border-radius:6px}.plot-tile.available{background:#e6f4ec;border-color:#9ed3b5;color:#14603f}.plot-tile.enquiry{background:#fdeceb;border-color:#f2b8b3;color:#a92a22}.plot-tile.held{background:#fbdcd9;border-color:#e79a92;color:#8f221b;background-image:repeating-linear-gradient(45deg,rgba(169,42,34,.1) 0 4px,transparent 4px 8px)}.plot-tile.booked{background:#e2ecfa;border-color:#a9c6ee;color:#16407a}.plot-tile.registered{background:#1b4b8a;border-color:#163d70;color:#fff}.plot-tile.blocked{background:var(--surface-3);border-color:var(--line-strong);color:var(--ink-400);background-image:repeating-linear-gradient(45deg,rgba(132,148,166,.22) 0 3px,transparent 3px 7px)}.plot-tile.on{outline:2px solid var(--ink-900);outline-offset:1px;z-index:3}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--ink-500)}.legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:5px;border:1px solid var(--line-strong)}.pipeline{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px}.stage{background:var(--surface-3);border-radius:var(--r-lg);padding:10px;border:1px solid var(--line)}.stage-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;padding:0 2px}.stage-head .nm{font-size:13.5px;font-weight:700;color:var(--ink-900);letter-spacing:.02em}.stage-head .ct{font-family:var(--font-num);font-size:12.5px;color:var(--ink-400)}.stage-bar{height:3px;border-radius:2px;margin-bottom:9px}.lead-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 11px;margin-bottom:8px;cursor:pointer;box-shadow:var(--shadow-1)}.lead-card:hover{border-color:var(--brand-600);box-shadow:var(--shadow-2)}.lead-card .nm{font-size:14.5px;font-weight:600;color:var(--ink-900)}.lead-card .meta{font-size:12.5px;color:var(--ink-400);margin-top:2px}.lead-card .amt{font-family:var(--font-num);font-size:13.5px;font-weight:600;color:var(--gold-700)}.bar{height:6px;border-radius:4px;background:var(--surface-3);overflow:hidden}.bar>i{display:block;height:100%;border-radius:4px;background:var(--brand-700)}.bar-mini{height:4px}.timeline{position:relative;padding-left:20px}.timeline:before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:1px;background:var(--line-strong)}.tl-item{position:relative;padding-bottom:16px}.tl-item:before{content:"";position:absolute;left:-19px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--brand-700)}.tl-item.done:before{background:var(--green-700);border-color:var(--green-700)}.tl-item .when{font-size:var(--t-xs);color:var(--ink-400);font-family:var(--font-num)}.tl-item .what{font-size:14.5px;color:var(--ink-700)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0e1f386b;z-index:90;display:grid;place-items:center;padding:20px}.modal{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:560px;box-shadow:var(--shadow-3);max-height:88vh;display:flex;flex-direction:column}.modal-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center}.modal-body{padding:18px;overflow-y:auto}.modal-foot{padding:13px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid .full{grid-column:1 / -1}.empty{text-align:center;padding:46px 20px;color:var(--ink-500)}.empty .t{font-size:15.5px;font-weight:600;color:var(--ink-900);margin-bottom:4px}.empty .d{font-size:14px;max-width:380px;margin:0 auto 14px}.login{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}.login-art{background:var(--brand-900);color:#fff;padding:46px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.login-art .grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;background-image:linear-gradient(to right,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px);background-size:34px 34px}.login-art .plots{position:absolute;right:-60px;bottom:-40px;display:grid;grid-template-columns:repeat(5,74px);gap:6px;opacity:.16}.login-art .plots i{display:block;height:96px;border:1.5px solid #fff;border-radius:3px}.login-art .plots i:nth-child(3n){background:#ffffff59}.login-art>*{position:relative;z-index:2}.login-art h1{color:#fff;font-size:31px;line-height:1.22;letter-spacing:-.02em;max-width:15ch}.login-art .brand-name{color:#fff;font-weight:700;letter-spacing:-.01em}.login-art .brand-sub{color:#a9c0dc;font-weight:600;letter-spacing:.14em}.login-art .brand-mark{background:#fff url("/assets/riksa-logo.webp") center/72% no-repeat;color:transparent;box-shadow:0 3px 12px #00000038}.login-art p{color:#a9bfdb;max-width:42ch;font-size:15px}.login-form{display:grid;place-items:center;padding:40px 24px;background:var(--surface)}.login-form .box{width:100%;max-width:366px}.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.role-pick button{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r);padding:9px 10px;text-align:left;cursor:pointer}.role-pick button:hover{border-color:var(--brand-600)}.role-pick button.on{border-color:var(--brand-700);background:var(--brand-050);box-shadow:0 0 0 1px var(--brand-700) inset}.role-pick .rn{font-size:14px;font-weight:600;color:var(--ink-900)}.role-pick .rd{font-size:12px;color:var(--ink-400)}.kv{display:grid;grid-template-columns:132px 1fr;gap:9px 12px;font-size:14.5px}.kv dt{color:var(--ink-400);font-size:13.5px}.kv dd{margin:0;color:var(--ink-900);font-weight:500}.divider{height:1px;background:var(--line);margin:16px 0}.chip-row{display:flex;gap:6px;flex-wrap:wrap}.toast-wrap{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;gap:8px}.toast{background:var(--ink-900);color:#fff;padding:10px 14px;border-radius:var(--r);font-size:14px;box-shadow:var(--shadow-3);animation:slidein .18s ease}@keyframes slidein{0%{transform:translateY(8px);opacity:0}}.balance{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.balance>div{padding:13px 16px}.balance>div+div{border-left:1px solid var(--line)}.balance .lb{font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}.balance .vl{font-family:var(--font-num);font-size:21px;font-weight:600;color:var(--ink-900);letter-spacing:-.03em}.balance .sub{font-size:12.5px;color:var(--ink-400);margin-top:2px}.stackbar{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--surface-3)}.stackbar>i{display:block;height:100%}.stackbar>i+i{border-left:1px solid #fff}.share-row{display:flex;align-items:center;gap:10px;padding:7px 0}.share-row+.share-row{border-top:1px dashed var(--line)}.share-row .dot{width:9px;height:9px;border-radius:2px;flex:0 0 auto}.share-row .nm{font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.share-row .pc{font-family:var(--font-num);font-size:13px;color:var(--ink-400);width:44px;text-align:right}.share-row .vl{font-family:var(--font-num);font-size:14px;font-weight:600;color:var(--ink-900);width:78px;text-align:right}.ring-row{display:flex;align-items:center;gap:13px;padding:11px 0}.ring-row+.ring-row{border-top:1px solid var(--line)}.ring{position:relative;flex:0 0 auto}.ring svg{display:block;transform:rotate(-90deg)}.ring span{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:var(--font-num);font-size:13px;font-weight:600;color:var(--ink-900)}.mobile-nav{display:none}.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}.cal-head{background:var(--surface-2);padding:8px 10px;font-size:var(--t-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400);text-align:center}.cal-cell{background:var(--surface);min-height:118px;padding:7px 8px}.cal-cell.dim{background:var(--surface-2)}.cal-cell.today{background:var(--brand-050);box-shadow:inset 0 0 0 1px var(--brand-600)}.cal-date{font-family:var(--font-num);font-size:13px;color:var(--ink-400);margin-bottom:5px}.cal-cell.today .cal-date{color:var(--brand-700);font-weight:600}.post-chip{display:block;width:100%;text-align:left;border:none;cursor:pointer;border-radius:4px;padding:5px 6px;margin-bottom:4px;font-size:12.5px;line-height:1.3;background:var(--surface-3);color:var(--ink-700);border-left:3px solid var(--ink-400)}.post-chip:hover{background:var(--brand-050)}.post-chip .tm{font-family:var(--font-num);font-size:11px;color:var(--ink-400);display:block}.channel-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:3px}.studio{display:grid;grid-template-columns:268px 1fr 268px;gap:16px;align-items:start}.poster-stage{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:grid;place-items:center;min-height:460px}.poster{box-shadow:var(--shadow-3);border-radius:4px;overflow:hidden;max-width:100%}.tpl-card{border:1px solid var(--line);border-radius:var(--r);padding:10px 11px;cursor:pointer;background:var(--surface);margin-bottom:8px;width:100%;text-align:left}.tpl-card:hover{border-color:var(--brand-600)}.tpl-card.on{border-color:var(--brand-700);background:var(--brand-050);box-shadow:0 0 0 1px var(--brand-700) inset}.tpl-card .tn{font-size:14px;font-weight:600;color:var(--ink-900)}.tpl-card .tu{font-size:12px;color:var(--ink-400)}.swatches{display:flex;gap:6px;flex-wrap:wrap}.swatch{width:26px;height:26px;border-radius:5px;border:2px solid transparent;cursor:pointer}.swatch.on{border-color:var(--ink-900)}@media (max-width: 1100px){.studio{grid-template-columns:1fr}}.menu-btn{display:none}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0e1f386b;z-index:39;animation:fade .15s ease}@keyframes fade{0%{opacity:0}}@media (max-width: 1080px){.content{padding:16px}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}.kpi .val{font-size:20px}.studio{grid-template-columns:1fr}.searchbox{width:200px}}@media (max-width: 900px){.grid[style*=grid-template-columns]{grid-template-columns:1fr!important}}@media (max-width: 760px){:root{--topbar-h: 54px}.menu-btn{display:grid}.sidebar{position:fixed;top:0;left:0;height:100dvh;transform:translate(-100%);transition:transform .22s ease;width:268px;flex-basis:268px}.sidebar.open{transform:translate(0);box-shadow:var(--shadow-3)}.topbar{padding:0 12px;gap:8px}.searchbox{width:auto;flex:1;max-width:none;padding:6px 9px}.searchbox kbd,.userchip .nm,.userchip .rl{display:none}.content{padding:12px}.pagehead{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:14px}.pagehead h1{font-size:21px}.pagehead .row{flex-wrap:wrap}.pagehead .btn{flex:1 1 auto}.kpi-grid{grid-template-columns:1fr 1fr;gap:10px}.kpi{padding:12px 12px 10px}.kpi .val{font-size:20px}.kpi .lbl{font-size:11.5px}.kpi .meta{font-size:12px}.toolbar{gap:8px}.toolbar .input,.toolbar select.input{flex:1 1 140px;min-width:0}.toolbar .spacer{display:none}.segment{width:100%}.segment button{flex:1}.card-body{padding:13px}.card-head{padding:12px 13px;flex-wrap:wrap}.tbl thead{display:none}.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}.tbl tr{border:1px solid var(--line);border-radius:var(--r);margin:0 0 9px;padding:4px 0;background:var(--surface)}.tbl tbody tr:hover{background:var(--surface)}.tbl td{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:7px 12px;border-bottom:1px dashed var(--line);text-align:left!important}.tbl td:last-child{border-bottom:none}.tbl td:before{content:attr(data-label);flex:0 0 40%;font-size:var(--t-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-400)}.tbl td[data-label=""]{justify-content:flex-end}.tbl td[data-label=""]:before{content:none}.tbl td.r{justify-content:space-between}.table-wrap{overflow-x:visible}.pipeline{grid-auto-columns:82vw;gap:10px}.mosaic{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:3px}.plot-tile{font-size:11px}.plot-tile .sqft{font-size:8px}.cal{grid-template-columns:1fr}.cal-head{display:none}.cal-cell{min-height:0;display:flex;gap:10px;align-items:flex-start;padding:9px 12px}.cal-cell.dim{display:none}.cal-cell:empty{display:none}.cal-date{margin:0;flex:0 0 26px;font-weight:600}.cal-cell>div:not(.cal-date){flex:1}.post-chip{margin-bottom:5px}.overlay{padding:0;align-items:flex-end}.modal{max-width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0}.modal-foot{flex-wrap:wrap}.modal-foot .btn{flex:1 1 auto}.form-grid{grid-template-columns:1fr;gap:12px}.kv{grid-template-columns:108px 1fr;font-size:14px}.login{grid-template-columns:1fr}.login-art{display:none}.role-pick{grid-template-columns:1fr}.recharts-wrapper{font-size:11.5px}.legend{gap:8px;font-size:12.5px}.balance{grid-template-columns:1fr}.balance>div+div{border-left:none;border-top:1px solid var(--line)}.mobile-nav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--surface);border-top:1px solid var(--line);padding:5px 4px calc(5px + env(safe-area-inset-bottom));box-shadow:0 -2px 12px -6px #0e1f3838}.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:var(--r);font-size:11.5px;font-weight:600;color:var(--ink-400);text-decoration:none}.mobile-nav a.active{color:var(--brand-700);background:var(--brand-050)}.mobile-nav a .lbl{letter-spacing:.01em}.content{padding-bottom:76px}}@media (max-width: 400px){.kpi-grid{grid-template-columns:1fr}.tbl td:before{flex-basis:45%}.pipeline{grid-auto-columns:88vw}}@media (pointer: coarse){.btn{height:38px}.btn-sm{height:32px}.input,select.input{height:38px}.nav-item{padding:10px}.icon-btn{width:36px;height:36px}}@media print{.sidebar,.topbar,.toolbar,.btn,.tabs{display:none!important}.content{padding:0}.card{border-color:#ccc;box-shadow:none;break-inside:avoid}}.board{display:grid;grid-template-columns:1fr 372px;gap:16px;align-items:start}.board-map{min-width:0}.board-panel{position:sticky;top:calc(var(--topbar-h) + 22px)}.mosaic.lg{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:5px}.mosaic.lg .plot-tile{aspect-ratio:4/5;font-size:13.5px}.mosaic.lg .plot-tile .sqft{font-size:11px}.status-key{display:flex;gap:6px;flex-wrap:wrap}.status-key button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r);padding:6px 10px;cursor:pointer;font-size:13.5px;font-weight:600}.status-key button.on{border-color:var(--ink-900);box-shadow:0 0 0 1px var(--ink-900) inset}.status-key .sw{width:13px;height:13px;border-radius:3px;border:1px solid rgba(0,0,0,.12)}.status-key .ct{font-family:var(--font-num);color:var(--ink-400)}.compare-bar{position:sticky;bottom:0;z-index:20;background:var(--ink-900);color:#fff;border-radius:var(--r-lg);padding:10px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:var(--shadow-3)}.compare-bar .btn{background:#ffffff1f;border-color:#fff3;color:#fff}.compare-bar .btn:hover{background:#fff3}.compare-bar .btn-primary{background:#fff;color:var(--brand-900);border-color:#fff}@media (max-width: 1080px){.board{grid-template-columns:1fr}.board-panel{position:static}}@media (max-width: 760px){.mosaic.lg{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}}.kpi-link{display:block;width:100%;text-align:left;cursor:pointer;color:inherit;text-decoration:none;font:inherit;transition:border-color .12s,box-shadow .12s,transform .12s}.kpi-link:hover{border-color:var(--brand-600);box-shadow:var(--shadow-2)}.kpi-link .kpi-go{position:absolute;right:13px;top:13px;font-size:15.5px;color:var(--ink-200);transition:color .12s,transform .12s}.kpi-link:hover .kpi-go{color:var(--brand-700);transform:translate(2px)}.row-link{cursor:pointer;border-radius:var(--r);transition:background .12s}.row-link:hover{background:var(--brand-050)}.count-link{border:none;background:var(--brand-100);color:var(--brand-700);font:inherit;font-size:var(--t-xs);font-weight:600;height:21px;padding:0 9px;border-radius:20px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}.count-link:hover{background:var(--brand-700);color:#fff}.count-link:after{content:"→";font-size:12.5px}.platform-tile{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:16px;text-align:center;position:relative}.platform-tile.off{background:var(--surface-2);border-style:dashed}.platform-mark{width:40px;height:40px;border-radius:10px;margin:0 auto 10px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:16.5px}.platform-tile .pn{font-size:15px;font-weight:600;color:var(--ink-900)}.platform-tile .ph{font-size:12.5px;color:var(--ink-400);margin-top:2px}.thread{display:flex;flex-direction:column;gap:8px}.bubble{max-width:78%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.55}.bubble.them{background:var(--surface-3);border-bottom-left-radius:3px;align-self:flex-start}.bubble.agent{background:var(--brand-100);color:var(--brand-900);border-bottom-right-radius:3px;align-self:flex-end}.bubble .who{font-size:11.5px;font-weight:600;opacity:.7;display:block;margin-bottom:3px}.chat-shell{display:flex;flex-direction:column;height:560px}.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.chat-input{border-top:1px solid var(--line);padding:12px 14px;display:flex;gap:8px}.chat-input input{flex:1}.chat-msg{max-width:76%;padding:11px 14px;border-radius:12px;font-size:14.5px;line-height:1.6}.chat-msg.user{background:var(--brand-700);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}.chat-msg.agent{background:var(--surface-3);align-self:flex-start;border-bottom-left-radius:3px}.agent-card{position:relative;min-width:0}.agent-card:before{border-radius:var(--r-lg) 0 0 var(--r-lg)}.agent-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent, var(--dv-1))}.pulse{width:7px;height:7px;border-radius:50%;background:var(--dv-5);display:inline-block;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.wizard-step{display:flex;gap:12px;align-items:flex-start;padding:12px 0}.wizard-num{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-family:var(--font-num);font-size:12.5px;font-weight:600;background:var(--surface-3);color:var(--ink-400)}.wizard-step.on .wizard-num{background:var(--brand-700);color:#fff}.wizard-step.done .wizard-num{background:var(--dv-5);color:#fff}@media (max-width: 760px){.chat-shell{height:440px}.chat-msg,.bubble{max-width:88%}}.module-tile{display:flex;align-items:flex-start;gap:10px;min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 13px;background:var(--surface);color:inherit;text-decoration:none;transition:border-color .12s,box-shadow .12s}.module-tile:hover{border-color:var(--brand-600);box-shadow:var(--shadow-2)}.module-tile .mt-ico{width:30px;height:30px;border-radius:8px;flex:0 0 auto;background:var(--brand-050);color:var(--brand-700);display:grid;place-items:center}.module-tile:hover .mt-ico{background:var(--brand-700);color:#fff}.module-tile .mt-name{display:block;overflow-wrap:anywhere;font-size:14px;font-weight:600;color:var(--ink-900)}.module-tile .mt-note{display:block;font-size:12px;color:var(--ink-400);margin-top:2px}.visit-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}.visit-tile{position:relative;overflow:clip;min-width:0;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 15px 13px;background:var(--surface);display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s,transform .12s}.visit-tile:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--tone)}.visit-tile:after{content:"";position:absolute;right:-22px;bottom:-22px;width:78px;height:78px;border-radius:50%;background:var(--tone);opacity:.07}.visit-tile:hover{border-color:var(--tone);box-shadow:var(--shadow-2);transform:translateY(-1px)}.visit-tile .vt-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--surface-3);color:var(--tone);margin-bottom:9px}.visit-tile:hover .vt-ico{background:var(--tone);color:#fff}.visit-tile .vt-n{font-size:23px;font-weight:600;color:var(--ink-900);letter-spacing:-.03em;line-height:1.1}.visit-tile .vt-label{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);margin-top:5px}.visit-tile .vt-sub{font-size:12px;color:var(--ink-400);margin-top:3px}.visit-project{display:flex;gap:13px;align-items:center;min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 14px;background:var(--surface)}.visit-project:hover{border-color:var(--brand-600)}@media (max-width: 760px){.visit-band{grid-template-columns:1fr 1fr;gap:10px}.visit-tile .vt-n{font-size:20px}}.stat-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:13px;margin-bottom:18px}.stat-tile{position:relative;overflow:clip;text-decoration:none;color:inherit;min-width:0;border:1px solid var(--tint-line, var(--line));border-radius:var(--r-lg);padding:17px 18px 16px;background:var(--tint, var(--surface));display:flex;flex-direction:column;transition:border-color .14s,box-shadow .14s,transform .14s}.stat-tile:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--tone)}.stat-tile:after{content:"";position:absolute;right:-30px;bottom:-30px;width:96px;height:96px;border-radius:50%;background:var(--tone);opacity:.06}.stat-tile:hover{border-color:var(--tone);box-shadow:var(--shadow-2);transform:translateY(-1px)}.stat-tile .st-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#ffffffb8;color:var(--tone);margin-bottom:11px;transition:background .14s,color .14s}.stat-tile:hover .st-ico{background:var(--tone);color:#fff}.stat-tile .st-value{font-size:25px;font-weight:600;color:var(--tint-ink, var(--ink-900));letter-spacing:-.035em;line-height:1.12;overflow-wrap:anywhere}.stat-tile .st-label{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tint-ink, var(--ink-500));opacity:.82;margin-top:7px}.stat-tile .st-sub{font-size:12px;color:var(--tint-ink, var(--ink-400));opacity:.74;margin-top:4px}.stat-tile .st-delta{font-size:12px;font-weight:600;margin-top:6px;font-family:var(--font-num)}.stat-tile .st-delta.up{color:var(--green-700)}.stat-tile .st-delta.down{color:var(--red-700)}.attention-band{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}.attention{display:inline-flex;align-items:center;gap:9px;border-radius:30px;padding:9px 15px 9px 11px;font-size:13.5px;text-decoration:none;border:1px solid var(--line);background:var(--surface);color:var(--ink-700);transition:border-color .14s,background .14s}.attention .at-n{font-size:16px;font-weight:600}.attention.warn{border-color:var(--amber-300, #e8d5a8);background:var(--amber-050, #fdf8ec);color:var(--amber-700)}.attention.warn:hover{background:var(--amber-100, #f8edd4)}.attention.urgent{border-color:#eccac6;background:#fdf1f0;color:var(--red-700)}.attention.urgent:hover{background:#fbe6e3}.attention.calm{border-color:var(--green-200, #cde3d6);background:var(--green-050, #f1f8f4);color:var(--green-700);margin-bottom:18px}.rank-list{display:flex;flex-direction:column}.rl-row{padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;display:block}.rl-row:last-child{border-bottom:none}a.rl-row:hover .rl-name{color:var(--brand-700)}.rl-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:12px}.rl-name{font-size:14px;color:var(--ink-900);font-weight:500;min-width:0;overflow-wrap:anywhere}.rl-value{font-size:14px;font-weight:600;color:var(--ink-900)}.rl-note{font-size:12px;color:var(--ink-400);margin-top:5px}.progress-card{display:flex;align-items:center;gap:15px;min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 17px;background:var(--surface);text-decoration:none;color:inherit;transition:border-color .14s,box-shadow .14s}a.progress-card:hover{border-color:var(--brand-600);box-shadow:var(--shadow-2)}.pc-label{font-size:14.5px;font-weight:600;color:var(--ink-900)}.pc-sub{font-size:12.5px;color:var(--ink-400);margin-top:3px}@media (max-width: 760px){.stat-band{grid-template-columns:1fr 1fr;gap:11px}.stat-tile{padding:14px 14px 13px}.stat-tile .st-value{font-size:21px}.attention{font-size:13px}}.num,.linkcell,.kv dd{overflow-wrap:anywhere}.kv dd .num{word-break:break-all}@media (max-width: 760px){.kv{grid-template-columns:1fr!important;gap:2px 0}.kv dt{font-size:12px;color:var(--ink-400);margin-top:9px}.kv dd{margin-bottom:2px}.chip-row{gap:5px}.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs button{white-space:nowrap}.segment{overflow-x:auto;scrollbar-width:none}.segment::-webkit-scrollbar{display:none}.toolbar{flex-wrap:wrap}.modal{max-width:100%!important}.form-grid{grid-template-columns:1fr}.stat-tile .st-value{font-size:20px}.attention-band{gap:8px}}.login-proof{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}.login-proof>div{display:flex;flex-direction:column}.login-proof .num{font-size:25px;font-weight:600;color:#fff;letter-spacing:-.03em}.login-proof span:last-child{font-size:11.5px;color:#8fa9c9;text-transform:uppercase;letter-spacing:.09em;margin-top:3px}.login-pillars{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}.login-pillars .lp{display:flex;gap:11px;align-items:flex-start}.login-pillars .lp-ico{width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;background:#ffffff1a;color:#cfe0f2}.login-pillars .lp-title{font-size:13.5px;font-weight:600;color:#fff}.login-pillars .lp-body{font-size:12.5px;color:#93aac7;margin-top:3px;line-height:1.5}.login-foot{font-size:12px;color:#7b93b3}.login-mini-brand{display:none;align-items:center;gap:10px;margin-bottom:22px}.role-note{margin-top:11px;padding:11px 13px;background:var(--brand-050);border:1px solid var(--brand-100);border-radius:var(--r)}@media (max-width: 900px){.login{grid-template-columns:1fr}.login-art{padding:28px 22px 30px;gap:22px;min-height:auto}.login-art h1{font-size:25px;max-width:none}.login-art .plots{display:none}.login-pillars{grid-template-columns:1fr 1fr;gap:14px 18px}.login-foot{display:none}}@media (max-width: 620px){.login-art{display:none}.login-mini-brand{display:flex}.login-form{padding:26px 20px 40px;align-items:start}.login-form .box{max-width:none}.role-pick{grid-template-columns:1fr 1fr}}@media (max-width: 760px){.tbl td:not([data-label]):before{display:none}.tbl td:not([data-label]){justify-content:flex-start}.tbl td:not([data-label]).r{justify-content:flex-end}}@media (min-width: 761px) and (max-width: 1180px){:root{--sidebar-w: 208px}.content{padding:20px 20px 40px}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}.stat-band{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:11px}.grid[style*="repeat(auto-fit"]{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important}.grid[style*="1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important}.grid[style*="1.4fr 1fr"],.grid[style*="1.3fr 1fr"]{grid-template-columns:1fr!important}.nav-item{height:34px;font-size:13.5px}.pagehead h1{font-size:21px}.modal{max-width:90vw!important}.board{grid-template-columns:1fr}}@media (min-width: 1700px){.content{max-width:1640px;margin:0 auto}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}@media (max-width: 760px){.sidebar{position:fixed;left:0;top:0;bottom:0;transform:translate(-100%);transition:transform .22s ease;box-shadow:none;border-right:1px solid var(--rail-line)}.sidebar.open{transform:translate(0);box-shadow:0 0 0 100vw #0e1f3861,var(--shadow-3)}.nav-item{height:40px;font-size:15px}.nav-group{font-size:11px;padding:16px 12px 8px}}.t-blue{--tint: var(--tint-blue);--tint-ink: var(--tint-blue-ink);--tint-line: #cfe0f5;--tone: #1b4b8a}.t-green{--tint: var(--tint-green);--tint-ink: var(--tint-green-ink);--tint-line: #c8e4d5;--tone: #1a6f4b}.t-amber{--tint: var(--tint-amber);--tint-ink: var(--tint-amber-ink);--tint-line: #eddcb6;--tone: #9a6400}.t-violet{--tint: var(--tint-violet);--tint-ink: var(--tint-violet-ink);--tint-line: #d9cff2;--tone: #543f9c}.t-teal{--tint: var(--tint-teal);--tint-ink: var(--tint-teal-ink);--tint-line: #c2dfe3;--tone: #0e6a72}.t-rose{--tint: var(--tint-rose);--tint-ink: var(--tint-rose-ink);--tint-line: #f0cdca;--tone: #a92a22}.t-sand{--tint: var(--tint-sand);--tint-ink: var(--tint-sand-ink);--tint-line: #e6d8bc;--tone: #a5701a}.t-slate{--tint: var(--tint-slate);--tint-ink: var(--tint-slate-ink);--tint-line: #d3dae3;--tone: #2b3f57}.module-tile.t-blue .mt-ico,.module-tile.t-green .mt-ico,.module-tile.t-amber .mt-ico,.module-tile.t-violet .mt-ico,.module-tile.t-teal .mt-ico,.module-tile.t-rose .mt-ico,.module-tile.t-sand .mt-ico,.module-tile.t-slate .mt-ico{background:#ffffffbf;color:var(--tone)}.module-tile[class*=t-]{background:var(--tint);border-color:var(--tint-line)}.module-tile[class*=t-] .mt-name{color:var(--tint-ink)}.module-tile[class*=t-] .mt-note{color:var(--tint-ink);opacity:.74}.module-tile[class*=t-]:hover .mt-ico{background:var(--tone);color:#fff}.built-by{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-500)}.built-by .bb-mark{width:18px;height:18px;border-radius:5px;flex:0 0 auto;background:linear-gradient(140deg,var(--brand-700),var(--brand-900));color:#fff;display:grid;place-items:center;font-size:9px;font-weight:700;letter-spacing:-.02em}.built-by strong{color:var(--ink-700);font-weight:600}.login-art .built-by{color:#8fa9c9}.login-art .built-by strong{color:#cfe0f2}.login-art .built-by .bb-mark{background:#ffffff29;color:#fff} /* An error toast should not look like a confirmation. The same grey box for "created" and "invalid" is why a refusal reads as nothing having happened. */ .toast.toast-error{background:#8c1d16;color:#fff;border:1px solid #6d1610} .toast.toast-error a,.toast.toast-error strong{color:#fff} /* ============================================================ Screens larger and smaller than a laptop. Appended last so these win without editing the rules above. ============================================================ */ /* --- Tablet portrait ------------------------------------------------- The sidebar became a drawer only below 760px, so a 768px tablet held a permanent 208px rail and left 560px for the work — two columns of a table and nothing else. The drawer now starts at 1024px, which covers iPad portrait and most Android tablets held upright. Tables keep their normal shape here; the card-stacking below 760px is for phones. */ @media (max-width: 1023px) { .menu-btn { display: grid } .sidebar { position: fixed; top: 0; left: 0; height: 100dvh; width: 272px; flex-basis: 272px; transform: translate(-100%); transition: transform .22s ease; z-index: 46; } .sidebar.open { transform: translate(0); box-shadow: var(--shadow-3) } .content { padding: 16px 18px 32px } .form-grid { grid-template-columns: 1fr 1fr } } /* Tablet landscape keeps the rail, but a narrower one. */ @media (min-width: 1024px) and (max-width: 1280px) { :root { --sidebar-w: 216px } .content { padding: 18px 20px 36px } } /* --- Large screens --------------------------------------------------- Everything was capped at 1640px with no type scaling, so a 27-inch monitor showed a narrow column in a wide grey field, and a television or projector showed text too small to read from across the room. The type scale, the rail and the cap all move together, because widening the page without growing the text only makes lines harder to follow. */ @media (min-width: 1600px) { :root { --sidebar-w: 264px; --t-display: 34px; --t-h1: 26px; --t-h2: 19px; --t-body: 15.5px; --t-sm: 14px; --t-xs: 12.5px; } .content { max-width: 1760px; margin: 0 auto; padding: 24px 28px 48px } .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px } } @media (min-width: 1920px) { :root { --sidebar-w: 288px; --topbar-h: 60px; --t-display: 38px; --t-h1: 29px; --t-h2: 21px; --t-body: 16.5px; --t-sm: 15px; --t-xs: 13.5px; --t-micro: 12px; } .content { max-width: 1960px; padding: 28px 34px 56px } .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px } .form-grid { grid-template-columns: repeat(3, 1fr); gap: 16px } .form-grid .full { grid-column: 1 / -1 } } /* 2K and ultrawide desks. */ @media (min-width: 2400px) { :root { --sidebar-w: 320px; --topbar-h: 66px; --t-display: 44px; --t-h1: 33px; --t-h2: 24px; --t-body: 18.5px; --t-sm: 17px; --t-xs: 15px; --t-micro: 13.5px; } .content { max-width: 2280px; padding: 34px 44px 64px } .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 22px } .card-body { padding: 22px } .tbl td, .tbl th { padding-top: 13px; padding-bottom: 13px } } /* Television and projector. Read from the back of a room, not a desk. */ @media (min-width: 3000px) { :root { --sidebar-w: 400px; --topbar-h: 84px; --t-display: 58px; --t-h1: 44px; --t-h2: 32px; --t-body: 24px; --t-sm: 22px; --t-xs: 19px; --t-micro: 17px; } .content { max-width: 3000px; padding: 44px 60px 80px } .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 30px } .card-body { padding: 30px } .tbl td, .tbl th { padding-top: 18px; padding-bottom: 18px } .btn { padding: 11px 18px } .input { padding: 11px 13px } } /* ============================================================ Dialogs. The popup carried the plain defaults everywhere: the same 560px box on a phone and on a projector, a form that could scroll away under the fold with no sign it had, and two buttons crowded into a corner on a screen 360px wide. A dialog is where somebody commits a figure to the books, and it should look like the most careful part of the product rather than the least. ============================================================ */ .overlay { background: #0e1f3859; backdrop-filter: blur(2px); align-items: center; animation: eh-fade .14s ease-out; } .modal { border: 1px solid var(--line); box-shadow: 0 24px 64px -20px #0e1f3859, 0 2px 8px -2px #0e1f3826; animation: eh-rise .16s cubic-bezier(.22, .8, .3, 1); } @keyframes eh-fade { from { opacity: 0 } } @keyframes eh-rise { from { opacity: 0; transform: translateY(8px) scale(.985) } } /* The head carries the title and, underneath, the sentence that says what this dialog is for. Both were cramped against the rule below them. */ .modal-head { padding: 17px 22px 15px; gap: 12px; align-items: flex-start } .modal-head h2 { font-size: var(--t-h2); line-height: 1.3; margin: 0; letter-spacing: -.01em } .modal-head .hint { margin-top: 3px; line-height: 1.45 } .modal-body { padding: 20px 22px } /* A form long enough to scroll now says so, with a hairline shadow that appears only when there is more below. */ .modal-body { scroll-behavior: smooth } .modal-foot { padding: 14px 22px; box-shadow: 0 -1px 0 var(--line) } /* The primary action sits right, with everything else to its left — and a destructive action pushed to the far side, so Delete is never the button beside Save. */ .modal-foot .btn { min-width: 92px; justify-content: center } /* --- Phones ---------------------------------------------------------- A centred box wastes the top of a small screen and puts the buttons where a thumb cannot reach. It becomes a sheet from the bottom. */ @media (max-width: 620px) { .overlay { padding: 0; align-items: flex-end } .modal { max-width: none; width: 100%; max-height: 92dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; animation: eh-sheet .2s cubic-bezier(.22, .8, .3, 1); } .modal-head { padding: 16px 16px 13px } .modal-body { padding: 16px } .modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-direction: row-reverse; border-radius: 0; } .modal-foot .btn { flex: 1 1 0; min-width: 0 } /* A form in a sheet has one column; two of them are 140px each. */ .modal .form-grid { grid-template-columns: 1fr } } @keyframes eh-sheet { from { transform: translateY(18px); opacity: .6 } } /* --- Large screens --------------------------------------------------- The dialog grows with the type scale, or it becomes a postage stamp in the middle of a television. */ @media (min-width: 1600px) { .modal { max-width: 620px } .modal-head { padding: 20px 26px 17px } .modal-body { padding: 24px 26px } .modal-foot { padding: 16px 26px } } @media (min-width: 1920px) { .modal { max-width: 700px } .modal-head { padding: 23px 30px 19px } .modal-body { padding: 27px 30px } .modal-foot { padding: 18px 30px } } @media (min-width: 2400px) { .modal { max-width: 840px } .modal-head { padding: 27px 36px 22px } .modal-body { padding: 32px 36px } .modal-foot { padding: 22px 36px } .modal-foot .btn { min-width: 120px } } @media (min-width: 3000px) { .modal { max-width: 1080px } .modal-head { padding: 34px 46px 28px } .modal-body { padding: 40px 46px } .modal-foot { padding: 28px 46px } .modal-foot .btn { min-width: 150px } } /* --- Inside the form ------------------------------------------------- The label, the box and the line of guidance under it were three different sizes with no rhythm between them. */ .modal .field > label { display: block; margin-bottom: 5px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-900); letter-spacing: -.005em; } .modal .field .hint { margin-top: 5px; font-size: var(--t-xs); line-height: 1.45 } .modal .field .input:focus { outline: 2px solid var(--brand-600); outline-offset: -1px } .modal .form-grid { gap: 16px 14px } .modal .form-grid .full { grid-column: 1 / -1 } /* ============================================================ Alignment inside a dialog. Three chunks wrote their fields as