/* ============================================================ LYKA ERP · Unified Design System One shell, five products: CRM · HRMS · CMS · AML · Super Admin Light theme, production-grade SaaS. Module accent is set with ============================================================ */ /* ---------- Reset & base ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:13.5px;line-height:1.55;color:var(--ink); background:var(--page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} a{color:inherit;text-decoration:none} ::selection{background:var(--accent-soft);color:var(--accent-dk)} /* ---------- Tokens ---------- */ :root{ /* neutrals */ --page:#F6F5FA; /* app background */ --card:#FFFFFF; /* surfaces */ --card-2:#FAFAFD; /* nested / subtle surface */ --line:#EAE8F2; /* hairline border */ --line-2:#DDDAEA; /* stronger border */ --ink:#17152E; /* primary text */ --ink-2:#4A4766; /* secondary text */ --muted:#6E6B87; /* tertiary text */ --hint:#9B98B0; /* placeholder / faint */ /* brand */ --brand:#6A4FE8;--brand-dk:#5238C9;--brand-soft:#EFECFD;--brand-ring:rgba(106,79,232,.28); --side-bg:#151329;--side-bg-2:#1D1A38;--side-ink:#A5A1C4;--side-ink-hi:#FFFFFF;--side-line:#2A2648; /* status (never used for chart series) */ --ok:#0E8345;--ok-bg:#E4F5EC;--ok-line:#BFE7D0; --warn:#9A6700;--warn-bg:#FBF0D7;--warn-line:#EEDCA8; --bad:#C0303A;--bad-bg:#FBE9EA;--bad-line:#F3C6C9; --info:#175FA9;--info-bg:#E8F1FB;--info-line:#C3DBF3; --neut:#5D5A75;--neut-bg:#EFEEF5;--neut-line:#DDDAEA; /* validated categorical chart palette (light, fixed order — never cycled) */ --s1:#2a78d6;--s2:#1baf7a;--s3:#eda100;--s4:#008300;--s5:#4a3aa7;--s6:#e34948;--s7:#e87ba4;--s8:#eb6834; --grid:#ECEAF4;--axis:#C9C6DA; /* geometry */ --r-s:8px;--r-m:12px;--r-l:16px; --shadow-s:0 1px 2px rgba(23,21,46,.05); --shadow-m:0 1px 3px rgba(23,21,46,.06),0 8px 24px -12px rgba(23,21,46,.14); --shadow-l:0 24px 64px -24px rgba(23,21,46,.28); --side-w:252px;--top-h:60px; /* default accent = brand */ --accent:var(--brand);--accent-dk:var(--brand-dk);--accent-soft:var(--brand-soft);--accent-ring:var(--brand-ring); } body[data-module="crm"] {--accent:#6A4FE8;--accent-dk:#5238C9;--accent-soft:#EFECFD;--accent-ring:rgba(106,79,232,.28)} body[data-module="hrms"] {--accent:#0E9573;--accent-dk:#0A7A5E;--accent-soft:#E2F5EF;--accent-ring:rgba(14,149,115,.28)} body[data-module="cms"] {--accent:#D96B0B;--accent-dk:#B25409;--accent-soft:#FCEFDF;--accent-ring:rgba(217,107,11,.28)} body[data-module="aml"] {--accent:#BE3144;--accent-dk:#9E2537;--accent-soft:#FBE9EC;--accent-ring:rgba(190,49,68,.28)} body[data-module="super"]{--accent:#B7791F;--accent-dk:#96621A;--accent-soft:#F9F0DE;--accent-ring:rgba(183,121,31,.30); --side-bg:#0F1222;--side-bg-2:#161A30;--side-line:#232946} /* ---------- App shell ---------- */ .app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh} /* Sidebar */ .side{background:var(--side-bg);color:var(--side-ink);position:sticky;top:0;height:100vh; display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#39355c transparent} .side::-webkit-scrollbar{width:5px}.side::-webkit-scrollbar-thumb{background:#39355c;border-radius:3px} .side-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px} .side-brand .logo{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--accent),var(--accent-dk));color:#fff;font-weight:800;font-size:15px;letter-spacing:-.02em} .side-brand .t{line-height:1.2} .side-brand .t b{display:block;color:#fff;font-size:14.5px;font-weight:700;letter-spacing:-.01em} .side-brand .t span{font-size:11px;color:var(--side-ink);font-weight:500} .side-mod{margin:2px 14px 12px;padding:7px 11px;border:1px solid var(--side-line);border-radius:9px; display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:#CFCBEA;background:var(--side-bg-2)} .side-mod .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)} .side-mod .chev{margin-left:auto;color:var(--side-ink)} .nav{flex:1;padding:2px 10px 12px} .nav-group{padding:14px 10px 5px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#66628E} .nav-i{display:flex;align-items:center;gap:11px;padding:8px 11px;margin:1px 0;border-radius:9px; font-size:13px;font-weight:500;color:var(--side-ink);cursor:pointer;transition:background .12s,color .12s} .nav-i:hover{background:var(--side-bg-2);color:var(--side-ink-hi)} .nav-i.on{background:linear-gradient(90deg,var(--accent) -180%,var(--side-bg-2) 60%);color:#fff;font-weight:600; box-shadow:inset 3px 0 0 var(--accent)} .nav-i.on svg{color:var(--accent);filter:brightness(1.35)} .nav-i svg{width:17px;height:17px;flex:none;stroke-width:1.9} .nav-i .ct{margin-left:auto;font-size:10.5px;font-weight:700;background:#332e52;color:#CFC9F0;padding:1px 7px;border-radius:9px} .nav-i .ct.hot{background:var(--accent);color:#fff} .side-foot{border-top:1px solid var(--side-line);padding:12px 16px;display:flex;align-items:center;gap:10px} .side-foot .av{width:34px;height:34px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--accent),var(--accent-dk)); color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center} .side-foot .t{line-height:1.25;min-width:0} .side-foot .t b{display:block;color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side-foot .t span{font-size:11px;color:var(--side-ink)} .side-foot svg{margin-left:auto;color:var(--side-ink);width:16px;height:16px;cursor:pointer} /* Main column */ .main{min-width:0;display:flex;flex-direction:column} .topbar{position:sticky;top:0;z-index:40;height:var(--top-h);background:rgba(255,255,255,.86);backdrop-filter:blur(10px); border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 24px} .crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);white-space:nowrap} .crumb b{color:var(--ink);font-weight:600} .crumb .sep{color:var(--hint)} .topbar .sp{flex:1} .gsearch{position:relative;width:min(340px,30vw)} .gsearch input{width:100%;height:36px;padding:0 64px 0 34px;border:1px solid var(--line);border-radius:10px; background:var(--page);font-size:12.5px;outline:none;transition:border .12s,box-shadow .12s} .gsearch input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);background:#fff} .gsearch input::placeholder{color:var(--hint)} .gsearch>svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--hint)} .gsearch .kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10.5px;color:var(--hint); border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;background:#fff} .icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;display:flex;align-items:center; justify-content:center;cursor:pointer;color:var(--ink-2);position:relative;transition:background .12s} .icon-btn:hover{background:var(--page)} .icon-btn svg{width:17px;height:17px} .icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--bad);border:1.5px solid #fff} .top-av{display:flex;align-items:center;gap:9px;padding:4px 6px 4px 4px;border-radius:10px;cursor:pointer} .top-av:hover{background:var(--page)} .top-av .av{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dk); font-weight:700;font-size:11.5px;display:flex;align-items:center;justify-content:center} .top-av .t{line-height:1.2;font-size:12px} .top-av .t b{display:block;font-weight:600;font-size:12.5px} .top-av .t span{color:var(--muted);font-size:11px} /* Content */ .content{padding:24px 24px 48px;display:flex;flex-direction:column;gap:18px} .page-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap} .page-head .t h1{font-size:20px;font-weight:700;letter-spacing:-.02em} .page-head .t p{color:var(--muted);font-size:12.5px;margin-top:2px} .page-head .actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:9px;border:1px solid transparent; font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s,border .12s,box-shadow .12s} .btn svg{width:15px;height:15px} .btn-pri{background:var(--accent);color:#fff;box-shadow:var(--shadow-s)} .btn-pri:hover{background:var(--accent-dk)} .btn-sec{background:#fff;border-color:var(--line-2);color:var(--ink)} .btn-sec:hover{background:var(--page);border-color:var(--hint)} .btn-ghost{background:transparent;color:var(--ink-2)} .btn-ghost:hover{background:var(--neut-bg)} .btn-danger{background:#fff;border-color:var(--bad-line);color:var(--bad)} .btn-danger:hover{background:var(--bad-bg)} .btn-sm{height:30px;padding:0 10px;font-size:12px;border-radius:8px} .btn-lg{height:42px;padding:0 18px;font-size:13.5px;border-radius:10px} /* ---------- Forms ---------- */ .field{display:flex;flex-direction:column;gap:5px;min-width:0} .field>label{font-size:12px;font-weight:600;color:var(--ink-2)} .field .req{color:var(--bad)} .field .help{font-size:11.5px;color:var(--muted)} .input,.select,textarea.input{height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:9px;background:#fff; font-size:13px;outline:none;width:100%;transition:border .12s,box-shadow .12s} textarea.input{height:auto;padding:10px 12px;resize:vertical;min-height:88px} .input:focus,.select:focus,textarea.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)} .input::placeholder{color:var(--hint)} .select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6B87' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;cursor:pointer} .checkbox{width:16px;height:16px;accent-color:var(--accent);cursor:pointer} .switch{position:relative;width:36px;height:20px;border-radius:12px;background:var(--line-2);cursor:pointer;border:none;transition:background .15s;flex:none} .switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s} .switch.on{background:var(--accent)} .switch.on::after{left:18px} .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px} .form-grid .span2{grid-column:span 2} /* ---------- Cards & panels ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-s)} .card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)} .card-h h2{font-size:14px;font-weight:700;letter-spacing:-.01em} .card-h .sub{font-size:12px;color:var(--muted);font-weight:400} .card-h .sp{flex:1} .card-b{padding:18px} .card-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px} /* KPI stat tile */ .kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-s); padding:16px 18px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden} .kpi .k-top{display:flex;align-items:center;gap:9px} .kpi .k-ic{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent-dk); display:flex;align-items:center;justify-content:center;flex:none} .kpi .k-ic svg{width:15px;height:15px} .kpi .k-ic.ok{background:var(--ok-bg);color:var(--ok)} .kpi .k-ic.warn{background:var(--warn-bg);color:var(--warn)} .kpi .k-ic.bad{background:var(--bad-bg);color:var(--bad)} .kpi .k-ic.info{background:var(--info-bg);color:var(--info)} .kpi .k-lbl{font-size:12px;font-weight:600;color:var(--muted)} .kpi .k-val{font-size:24px;font-weight:750;letter-spacing:-.03em;line-height:1.1} .kpi .k-val small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0} .kpi .k-sub{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px} .delta{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:20px} .delta.up{color:var(--ok);background:var(--ok-bg)} .delta.down{color:var(--bad);background:var(--bad-bg)} .delta.flat{color:var(--neut);background:var(--neut-bg)} .kpi .spark{position:absolute;right:12px;bottom:10px;opacity:.9} /* ---------- Pills / badges / tags ---------- */ .pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:2.5px 9px;border-radius:20px; border:1px solid;white-space:nowrap} .pill .d{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .pill-ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)} .pill-warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)} .pill-bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)} .pill-info{color:var(--info);background:var(--info-bg);border-color:var(--info-line)} .pill-neut{color:var(--neut);background:var(--neut-bg);border-color:var(--neut-line)} .pill-acc{color:var(--accent-dk);background:var(--accent-soft);border-color:transparent} .tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:var(--ink-2);background:var(--neut-bg); border-radius:6px;padding:2px 8px} /* ---------- Tabs & segmented ---------- */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto} .tab{padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent; white-space:nowrap;display:flex;align-items:center;gap:7px} .tab:hover{color:var(--ink)} .tab.on{color:var(--accent-dk);border-bottom-color:var(--accent)} .tab .ct{font-size:10.5px;font-weight:700;background:var(--neut-bg);color:var(--neut);padding:0 6px;border-radius:9px} .tab.on .ct{background:var(--accent-soft);color:var(--accent-dk)} .seg{display:inline-flex;background:var(--neut-bg);border-radius:9px;padding:3px;gap:2px} .seg button{border:none;background:transparent;padding:5px 12px;border-radius:7px;font-size:12px;font-weight:600; color:var(--muted);cursor:pointer} .seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-s)} /* ---------- Filter bar ---------- */ .fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .fbar .sp{flex:1} .fchip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:9px;border:1px dashed var(--line-2); background:#fff;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer} .fchip:hover{border-color:var(--accent);color:var(--accent-dk)} .fchip.set{border-style:solid;background:var(--accent-soft);border-color:transparent;color:var(--accent-dk)} .fchip svg{width:13px;height:13px} /* ---------- Tables ---------- */ .tbl-wrap{overflow-x:auto;border-radius:0 0 var(--r-m) var(--r-m)} table.tbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px} .tbl thead th{position:sticky;top:0;background:var(--card-2);z-index:2;text-align:left;font-size:11px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap} .tbl thead th.sort{color:var(--ink);cursor:pointer} .tbl thead th.sort::after{content:"↓";margin-left:5px;color:var(--accent)} .tbl tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle} .tbl tbody tr{transition:background .1s} .tbl tbody tr:hover{background:var(--card-2)} .tbl tbody tr.sel{background:var(--accent-soft)} .tbl tbody tr:last-child td{border-bottom:none} .tbl .num{text-align:right;font-variant-numeric:tabular-nums} .tbl .c{text-align:center} .tbl .strong{font-weight:600;color:var(--ink)} .tbl .dim{color:var(--muted);font-size:12px} .tbl .row-actions{display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:opacity .12s} .tbl tbody tr:hover .row-actions{opacity:1} .ent{display:flex;align-items:center;gap:10px;min-width:0} .ent .av{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;background:var(--accent-soft);color:var(--accent-dk)} .ent .av.sq{border-radius:8px} .ent .t{min-width:0;line-height:1.3} .ent .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ent .t span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .tbl-foot{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)} .pgr{margin-left:auto;display:flex;gap:4px} .pgr button{min-width:28px;height:28px;padding:0 8px;border-radius:7px;border:1px solid var(--line);background:#fff;font-size:12px; font-weight:600;color:var(--ink-2);cursor:pointer} .pgr button.on{background:var(--accent);border-color:var(--accent);color:#fff} .pgr button:hover:not(.on){background:var(--page)} /* avatar stack */ .avs{display:flex} .avs .av{width:26px;height:26px;border-radius:50%;border:2px solid #fff;margin-left:-7px;font-size:10px;font-weight:700; display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-dk)} .avs .av:first-child{margin-left:0} /* progress */ .meter{height:6px;border-radius:4px;background:var(--neut-bg);overflow:hidden;min-width:70px} .meter>i{display:block;height:100%;border-radius:4px;background:var(--accent)} .meter.ok>i{background:var(--ok)} .meter.warn>i{background:#eda100} .meter.bad>i{background:var(--bad)} /* ---------- Kanban ---------- */ .kanban{display:grid;grid-auto-flow:column;grid-auto-columns:272px;gap:14px;overflow-x:auto;padding-bottom:8px;align-items:start} .kcol{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-m);display:flex;flex-direction:column;max-height:72vh} .kcol-h{display:flex;align-items:center;gap:8px;padding:11px 13px;font-size:12.5px;font-weight:700} .kcol-h .d{width:8px;height:8px;border-radius:50%} .kcol-h .ct{margin-left:auto;font-size:11px;color:var(--muted);background:#fff;border:1px solid var(--line);padding:0 7px;border-radius:9px} .kcol-b{padding:0 9px 9px;display:flex;flex-direction:column;gap:8px;overflow-y:auto} .kcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;box-shadow:var(--shadow-s);cursor:grab; display:flex;flex-direction:column;gap:7px} .kcard:hover{border-color:var(--line-2);box-shadow:var(--shadow-m)} .kcard .t{font-size:12.5px;font-weight:600;line-height:1.35} .kcard .m{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)} .kcard .m .sp{flex:1} /* ---------- Activity / timeline ---------- */ .feed{display:flex;flex-direction:column} .feed-i{display:flex;gap:12px;position:relative;padding-bottom:18px} .feed-i::before{content:"";position:absolute;left:14px;top:30px;bottom:0;width:2px;background:var(--line)} .feed-i:last-child::before{display:none} .feed-i .ic{width:28px;height:28px;border-radius:50%;flex:none;background:var(--accent-soft);color:var(--accent-dk); display:flex;align-items:center;justify-content:center;z-index:1} .feed-i .ic svg{width:13px;height:13px} .feed-i .ic.ok{background:var(--ok-bg);color:var(--ok)} .feed-i .ic.warn{background:var(--warn-bg);color:var(--warn)} .feed-i .ic.bad{background:var(--bad-bg);color:var(--bad)} .feed-i .ic.info{background:var(--info-bg);color:var(--info)} .feed-i .t{font-size:12.5px;line-height:1.45;padding-top:4px} .feed-i .t b{font-weight:600} .feed-i .t .when{display:block;font-size:11px;color:var(--hint);margin-top:2px} /* ---------- Empty state ---------- */ .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:44px 20px;gap:8px} .empty .ic{width:52px;height:52px;border-radius:16px;background:var(--accent-soft);color:var(--accent-dk); display:flex;align-items:center;justify-content:center} .empty .ic svg{width:24px;height:24px} .empty h3{font-size:14.5px;font-weight:700} .empty p{font-size:12.5px;color:var(--muted);max-width:340px} /* ---------- Modal / drawer (rendered inline on mock pages) ---------- */ .overlay{position:fixed;inset:0;background:rgba(23,21,46,.44);backdrop-filter:blur(2px);z-index:80; display:flex;align-items:center;justify-content:center;padding:24px} .modal{background:#fff;border-radius:var(--r-l);box-shadow:var(--shadow-l);width:min(560px,100%);max-height:88vh; display:flex;flex-direction:column;overflow:hidden} .modal .card-b{overflow-y:auto} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,92vw);background:#fff;box-shadow:var(--shadow-l);z-index:81; display:flex;flex-direction:column;border-left:1px solid var(--line)} /* ---------- Toast ---------- */ .toast{position:fixed;bottom:22px;right:22px;z-index:90;background:var(--ink);color:#fff;border-radius:11px; padding:11px 16px;font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:9px;box-shadow:var(--shadow-l)} .toast svg{width:15px;height:15px;color:#5AD597} /* ---------- Charts ---------- */ .chart{position:relative} .chart svg text{font-family:inherit;font-size:10.5px;fill:var(--muted)} .chart svg .axisline{stroke:var(--axis);stroke-width:1} .chart svg .gridline{stroke:var(--grid);stroke-width:1} .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2);align-items:center} .legend .li{display:flex;align-items:center;gap:6px;font-weight:500} .legend .sw{width:9px;height:9px;border-radius:3px;flex:none} .viz-tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:11.5px;line-height:1.45; padding:7px 10px;border-radius:8px;box-shadow:var(--shadow-m);z-index:50;opacity:0;transition:opacity .1s;white-space:nowrap} .viz-tip b{font-weight:700} .viz-tip.show{opacity:1} .donut-c{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .hbar{display:grid;grid-template-columns:minmax(90px,max-content) 1fr max-content;gap:6px 12px;align-items:center;font-size:12px} .hbar .lbl{color:var(--ink-2);font-weight:500;white-space:nowrap} .hbar .val{font-variant-numeric:tabular-nums;font-weight:600;text-align:right} .hbar .bar{height:16px;border-radius:0 4px 4px 0;background:var(--s1);min-width:2px} /* ---------- Grid helpers ---------- */ .grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g23{grid-template-columns:minmax(0,2fr) minmax(0,1fr)} .g32{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} .g13{grid-template-columns:minmax(0,1fr) minmax(0,3fr)} @media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:860px){.g2,.g3,.g4,.g23,.g32,.g13{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .span2{grid-column:span 1}} /* ---------- Utilities ---------- */ .row{display:flex;align-items:center;gap:10px} .row .sp{flex:1} .stack{display:flex;flex-direction:column;gap:10px} .mut{color:var(--muted)} .sm{font-size:12px} .xs{font-size:11px} .b{font-weight:600} .num{font-variant-numeric:tabular-nums} .mt0{margin-top:0}.hr{border:none;border-top:1px solid var(--line);margin:4px 0} .link{color:var(--accent-dk);font-weight:600;cursor:pointer} .link:hover{text-decoration:underline} /* ---------- Auth (login) layout ---------- */ .auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .auth-brand{background:var(--side-bg);color:#fff;display:flex;flex-direction:column;justify-content:space-between; padding:44px 48px;position:relative;overflow:hidden} .auth-brand::after{content:"";position:absolute;inset:auto -140px -180px auto;width:460px;height:460px;border-radius:50%; background:radial-gradient(circle at 30% 30%,var(--accent-ring),transparent 65%)} .auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--page)} .auth-card{width:min(400px,100%);display:flex;flex-direction:column;gap:18px} @media(max-width:900px){.auth{grid-template-columns:1fr}.auth-brand{display:none}} /* ---------- Print ---------- */ @media print{.side,.topbar{display:none}.app{grid-template-columns:1fr}.content{padding:0}}