/* Credit Intelligence OS — design system */ /* Tokens are defined twice: the dark set on :root (the product's default look) and a light set under [data-theme="light"]. Everything downstream reads tokens only — no raw hex — so a single attribute on flips the whole surface, charts and SVG included. */ :root{ color-scheme:dark; --bg:#080b12; --bg-2:#0c111b; --panel:#111827; --panel-2:#151d2c; --panel-3:#1b2436; --line:#1e2a3d; --line-2:#2a3b55; --line-3:#33445f; --line-soft:#18233444; --ink:#e8edf7; --ink-2:#a8b6cd; --ink-3:#7a8aa4; --ink-4:#7286a8; --brand:#4d7cfe; --brand-2:#7aa2ff; --brand-dim:#4d7cfe22; --brand-line:#4d7cfe33; --brand-strong:#5b86ff; --brand-deep:#3b63d8; --violet:#8b5cf6; --green:#2ecc8f; --green-dim:#2ecc8f1f; --green-line:#2ecc8f55; --amber:#f5a623; --amber-2:#f59e0b; --amber-dim:#f5a6231f; --amber-line:#f5a62355; --red:#f2545b; --red-dim:#f2545b1f; --red-line:#f2545b55; --purple:#a855f7; --purple-dim:#a855f71f; --cyan:#22d3ee; --cyan-dim:#22d3ee1f; /* surfaces that used to be hardcoded */ --sidebar-a:#0a0f19; --sidebar-b:#080b12; --topbar-bg:#0a0e18cc; --row-hover:#141d2c; --row-sel:#152744; --track:#1b2436; --well:#0b111c; --scrim:#04060bb0; --bbox-scrim:#0009; --sb-thumb:#233149; --sb-thumb-h:#2f4159; --shimmer-a:#1a2436; --shimmer-b:#243149; --doc-bg:#0a0e17; --doc-img-bg:#0d1220; --doc-page:#fff; --thumb-ring:#0b1220; --on-brand:#fff; --on-amber:#100b02; --glow-1:#4d7cfe14; --glow-2:#a855f70f; --r:12px; --r-sm:8px; --r-lg:18px; --shadow:0 10px 40px -12px #0009; --shadow-lg:0 30px 80px -20px #000c; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif; --sidebar:242px; } [data-theme="light"]{ color-scheme:light; --bg:#f4f6fb; --bg-2:#eef1f8; --panel:#ffffff; --panel-2:#f2f5fa; --panel-3:#e6ebf4; --line:#dde3ee; --line-2:#c9d3e3; --line-3:#aeb9cc; --line-soft:#e4e9f2; --ink:#0f1729; --ink-2:#3d4a63; --ink-3:#586579; --ink-4:#5c6980; /* accents darkened to carry 4.5:1 as small text on a white ground */ --brand:#2f5fe0; --brand-2:#2450c9; --brand-dim:#2f5fe014; --brand-line:#2f5fe038; --brand-strong:#2f5fe0; --brand-deep:#2450c9; --violet:#7c3aed; --green:#07724a; --green-dim:#07724a14; --green-line:#07724a45; --amber:#8f5a00; --amber-2:#9c6200; --amber-dim:#8f5a0014; --amber-line:#8f5a0040; --red:#cf2f3c; --red-dim:#cf2f3c14; --red-line:#cf2f3c45; --purple:#8034d4; --purple-dim:#8034d414; --cyan:#097183; --cyan-dim:#09718314; --sidebar-a:#ffffff; --sidebar-b:#f7f9fd; --topbar-bg:#ffffffcc; --row-hover:#f2f5fa; --row-sel:#e4ecfd; --track:#e2e8f2; --well:#f4f6fb; --scrim:#1c243666; --bbox-scrim:#0f172959; --sb-thumb:#c8d1e0; --sb-thumb-h:#adb9cc; --shimmer-a:#e9edf5; --shimmer-b:#f6f8fc; --doc-bg:#eef1f8; --doc-img-bg:#e6ebf4; --doc-page:#fff; --thumb-ring:#ffffff; --on-brand:#fff; --on-amber:#fff; --glow-1:#2f5fe00f; --glow-2:#7c3aed0a; --shadow:0 10px 30px -14px #1c243626; --shadow-lg:0 26px 64px -22px #1c243633; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--sans); background:var(--bg); color:var(--ink); font-size:13.5px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow:hidden; } body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(900px 500px at 12% -10%, var(--glow-1), transparent 60%), radial-gradient(700px 400px at 100% 0%, var(--glow-2), transparent 55%); } ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:8px} ::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h)} ::-webkit-scrollbar-track{background:transparent} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;border:none;background:none} a{color:var(--brand-2);text-decoration:none} h1,h2,h3,h4{font-weight:640;letter-spacing:-.015em} /* ---------------------------------------------------------- app shell */ #app{display:grid;grid-template-columns:var(--sidebar) 1fr;height:100vh;position:relative;z-index:1} .sidebar{ background:linear-gradient(180deg,var(--sidebar-a),var(--sidebar-b));border-right:1px solid var(--line); display:flex;flex-direction:column;overflow:hidden } .brand{display:flex;gap:11px;align-items:center;padding:16px 16px 14px;border-bottom:1px solid var(--line)} .brand-mark{ width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center; background:linear-gradient(145deg,var(--brand),var(--violet));box-shadow:0 6px 18px -6px var(--brand); font-weight:800;font-size:14px;color:var(--on-brand);letter-spacing:-.5px } .brand-txt b{display:block;font-size:13px;letter-spacing:-.02em} .brand-txt span{display:block;font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase} .nav{flex:1;overflow-y:auto;padding:10px 10px 4px} .nav-group{margin:14px 0 4px;padding:0 8px;font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-4);font-weight:700} .nav-item{ display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm); color:var(--ink-2);width:100%;text-align:left;font-size:13px;transition:.13s;position:relative } .nav-item:hover{background:var(--panel-2);color:var(--ink)} .nav-item.on{background:linear-gradient(90deg,var(--brand-dim),transparent);color:var(--ink);font-weight:560} .nav-item.on::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px; background:var(--brand);border-radius:0 3px 3px 0} .nav-item .ico{width:16px;height:16px;flex:none;opacity:.85} .nav-item .pill{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:20px; background:var(--panel-3);color:var(--ink-2);font-variant-numeric:tabular-nums} .nav-item .pill.hot{background:var(--red-dim);color:var(--red)} .sidebar-foot{border-top:1px solid var(--line);padding:10px} /* ------------------------------------------------------------ topbar */ .main{display:flex;flex-direction:column;overflow:hidden;min-width:0} .topbar{ height:54px;flex:none;display:flex;align-items:center;gap:12px;padding:0 16px; border-bottom:1px solid var(--line);background:var(--topbar-bg);backdrop-filter:blur(14px) } .crumbs{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);min-width:0} .crumbs b{color:var(--ink);font-weight:600} .search{position:relative;flex:1;max-width:420px;margin-left:8px} .search input{ width:100%;height:34px;border-radius:9px;background:var(--panel);border:1px solid var(--line); padding:0 12px 0 32px;font-size:13px;outline:none;transition:.15s } .search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-dim)} .search .si{position:absolute;left:10px;top:9px;opacity:.5} .search-results{ position:absolute;top:40px;left:0;right:0;background:var(--panel);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow-lg);max-height:400px;overflow:auto;z-index:60 } .sr-item{display:flex;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line-soft);width:100%;text-align:left} .sr-item:hover{background:var(--panel-2)} .sr-kind{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4); border:1px solid var(--line);border-radius:5px;padding:1px 5px;flex:none} .top-actions{margin-left:auto;display:flex;align-items:center;gap:8px} /* ------------------------------------------------------------ content */ .content{flex:1;overflow-y:auto;padding:20px 22px 60px;scroll-behavior:smooth} .page-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap} .page-head h1{font-size:21px} .page-head p{color:var(--ink-3);font-size:12.5px;margin-top:3px;max-width:70ch} .page-head .spacer{flex:1} /* -------------------------------------------------------------- atoms */ .card{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line); border-radius:var(--r);overflow:hidden} .card-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)} .card-h h3{font-size:13px} .card-h .sub{font-size:11.5px;color:var(--ink-3)} .card-h .spacer{flex:1} .card-b{padding:14px} .grid{display:grid;gap:14px} .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))} .g5{grid-template-columns:repeat(5,minmax(0,1fr))} .g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)} .g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} .g-3-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)} @media(max-width:1280px){.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))} .g-2-1,.g-1-2,.g-3-2,.g3{grid-template-columns:minmax(0,1fr)}} .btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:9px; background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font-size:12.5px; font-weight:520;transition:.14s;white-space:nowrap} .btn:hover{background:var(--panel-3);border-color:var(--line-3)} .btn.primary{background:linear-gradient(160deg,var(--brand),var(--brand-deep));border-color:var(--brand-strong);color:var(--on-brand); box-shadow:0 6px 18px -8px var(--brand)} .btn.primary:hover{filter:brightness(1.08)} .btn.good{background:var(--green-dim);border-color:var(--green-line);color:var(--green)} .btn.warn{background:var(--amber-dim);border-color:var(--amber-line);color:var(--amber)} .btn.bad{background:var(--red-dim);border-color:var(--red-line);color:var(--red)} .btn.ghost{background:transparent} .btn.sm{height:26px;padding:0 9px;font-size:11.5px;border-radius:7px} .btn.lg{height:38px;padding:0 16px;font-size:13.5px} .btn:disabled{opacity:.45;cursor:not-allowed} .btn-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px; border:1px solid var(--line);background:var(--panel);position:relative} .btn-icon:hover{background:var(--panel-2)} .dot-badge{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--red)} .tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:640;padding:2px 8px; border-radius:20px;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent} .t-green{background:var(--green-dim);color:var(--green);border-color:var(--green-line)} .t-amber{background:var(--amber-dim);color:var(--amber);border-color:var(--amber-line)} .t-red{background:var(--red-dim);color:var(--red);border-color:var(--red-line)} .t-blue{background:var(--brand-dim);color:var(--brand-2);border-color:var(--brand-line)} .t-purple{background:var(--purple-dim);color:var(--purple);border-color:var(--purple)} .t-cyan{background:var(--cyan-dim);color:var(--cyan);border-color:var(--cyan)} .t-grey{background:var(--panel-3);color:var(--ink-2);border-color:var(--line)} .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:-.02em} .num{font-variant-numeric:tabular-nums} .muted{color:var(--ink-3)} .dim{color:var(--ink-4)} .small{font-size:11.5px} .tiny{font-size:10.5px} .up{text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:700;color:var(--ink-4)} .row{display:flex;align-items:center;gap:8px} .col{display:flex;flex-direction:column;gap:8px} .wrap{flex-wrap:wrap} .sep{height:1px;background:var(--line);margin:12px 0} .avatar{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:11.5px; font-weight:700;color:var(--on-brand);flex:none;background:linear-gradient(145deg,var(--brand),var(--violet))} .avatar.sm{width:26px;height:26px;font-size:10px;border-radius:7px} .avatar.lg{width:46px;height:46px;font-size:15px;border-radius:13px} /* ------------------------------------------------------------- kpis */ .kpi{background:linear-gradient(160deg,var(--panel),var(--bg-2));border:1px solid var(--line); border-radius:var(--r);padding:14px;position:relative;overflow:hidden;transition:.16s} .kpi:hover{border-color:var(--line-3);transform:translateY(-1px)} .kpi .lbl{font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:6px} .kpi .val{font-size:26px;font-weight:700;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums} .kpi .sub{font-size:11px;color:var(--ink-4);margin-top:3px} .kpi .spark{position:absolute;right:0;bottom:0;opacity:.5} .kpi.accent::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)} .kpi.accent-amber::after{background:var(--amber)} .kpi.accent-red::after{background:var(--red)} .kpi.accent-green::after{background:var(--green)} /* ------------------------------------------------------------ tables */ table{width:100%;border-collapse:collapse} th{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-4); text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap} td{padding:10px 12px;border-bottom:1px solid var(--line-soft);font-size:12.5px;vertical-align:middle} tbody tr{transition:.1s} tbody tr:hover{background:var(--row-hover)} tbody tr.sel{background:var(--row-sel);box-shadow:inset 3px 0 0 var(--brand)} tbody tr.clickable{cursor:pointer} td.r,th.r{text-align:right} .tw{overflow-x:auto} /* ------------------------------------------------------------ inputs */ .field{display:flex;flex-direction:column;gap:5px} .field label{font-size:11px;color:var(--ink-3);font-weight:560} .inp,select.inp,textarea.inp{ height:34px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line); padding:0 11px;font-size:13px;outline:none;transition:.14s;width:100% } textarea.inp{height:auto;padding:9px 11px;resize:vertical;line-height:1.55} .inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-dim)} select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236d7d97' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center;padding-right:28px} .chips{display:flex;gap:6px;flex-wrap:wrap} .chip{font-size:11.5px;padding:4px 10px;border-radius:20px;border:1px solid var(--line); background:var(--panel);color:var(--ink-2);transition:.12s} .chip:hover{border-color:var(--line-3);color:var(--ink)} .chip.on{background:var(--brand-dim);border-color:var(--brand-line);color:var(--brand-2);font-weight:600} input[type=range]{-webkit-appearance:none;height:5px;border-radius:5px;background:var(--panel-3);width:100%} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%; background:var(--brand);border:3px solid var(--thumb-ring);box-shadow:0 0 0 1px var(--brand);cursor:pointer} .switch{width:38px;height:21px;border-radius:20px;background:var(--panel-3);border:1px solid var(--line); position:relative;transition:.16s;flex:none} .switch i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%; background:var(--ink-3);transition:.16s} .switch.on{background:var(--brand-dim);border-color:var(--brand)} .switch.on i{left:19px;background:var(--brand)} .switch.danger.on{background:var(--red-dim);border-color:var(--red)} .switch.danger.on i{background:var(--red)} /* ------------------------------------------------------------- bars */ .bar{height:6px;border-radius:6px;background:var(--panel-3);overflow:hidden} .bar>i{display:block;height:100%;border-radius:6px;background:var(--brand);transition:width .5s cubic-bezier(.4,0,.2,1)} .bar.thin{height:4px} .meter{display:flex;align-items:center;gap:9px} .meter .bar{flex:1} .stack{display:flex;height:9px;border-radius:6px;overflow:hidden;background:var(--panel-3)} .stack>i{display:block;height:100%} /* ----------------------------------------------------------- drawer */ .scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(3px);z-index:80;animation:fade .16s} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,92vw);background:var(--bg-2); border-left:1px solid var(--line);z-index:90;display:flex;flex-direction:column; box-shadow:var(--shadow-lg);animation:slidein .22s cubic-bezier(.32,.72,0,1)} .drawer.wide{width:min(940px,96vw)} .drawer-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)} .drawer-b{flex:1;overflow-y:auto;padding:16px} .drawer-f{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap} @keyframes slidein{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}} .rise{animation:rise .26s cubic-bezier(.32,.72,0,1) both} /* ------------------------------------------------------------- tabs */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto} .tab{padding:9px 13px;font-size:12.5px;color:var(--ink-3);border-bottom:2px solid transparent; white-space:nowrap;transition:.13s;font-weight:520} .tab:hover{color:var(--ink)} .tab.on{color:var(--ink);border-bottom-color:var(--brand);font-weight:600} .tab .cnt{font-size:10px;background:var(--panel-3);border-radius:20px;padding:0 5px;margin-left:5px} /* ------------------------------------------------------- agent cards */ .agent{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden; transition:.18s} .agent:hover{border-color:var(--line-3)} .agent .ah{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer} .agent .an{font-size:12.5px;font-weight:620} .agent .ab{padding:0 13px 13px;font-size:12.5px;color:var(--ink-2);animation:rise .2s} .agent.thinking{border-color:var(--line-2)} .agent.thinking .an{color:var(--ink-3)} .pulse{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:pulse 1.1s infinite} @keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}} .shimmer{background:linear-gradient(90deg,var(--shimmer-a),var(--shimmer-b),var(--shimmer-a));background-size:200% 100%; animation:sh 1.3s linear infinite;border-radius:5px;height:9px} @keyframes sh{to{background-position:-200% 0}} .ev-chip{font-family:var(--mono);font-size:10px;padding:1px 6px;border-radius:5px; background:var(--panel-3);border:1px solid var(--line);color:var(--ink-2);cursor:pointer} .ev-chip:hover{border-color:var(--brand);color:var(--brand-2)} /* --------------------------------------------------------- doc viewer */ .doc-stage{background:var(--doc-bg);border:1px solid var(--line);border-radius:var(--r); position:relative;min-height:460px;display:grid;place-items:center;overflow:hidden} .doc-stage iframe,.doc-stage img{width:100%;height:520px;border:0;background:var(--doc-page);display:block} .doc-stage img{object-fit:contain;background:var(--doc-img-bg)} .bbox{position:absolute;border:2px solid var(--amber);background:var(--amber-dim);border-radius:3px; box-shadow:0 0 0 9999px var(--bbox-scrim);transition:.25s;pointer-events:none;z-index:5} .bbox::after{content:attr(data-l);position:absolute;top:-20px;left:0;background:var(--amber); color:var(--on-amber);font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;white-space:nowrap} .field-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px; border:1px solid transparent;transition:.12s;cursor:pointer} .field-row:hover{background:var(--panel-2);border-color:var(--line)} .field-row.on{background:var(--amber-dim);border-color:var(--amber-line)} .field-row .k{font-size:11.5px;color:var(--ink-3);flex:1} .field-row .v{font-size:12.5px;font-weight:600} .conf{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);width:34px;text-align:right} /* ------------------------------------------------------------- misc */ .timeline{position:relative;padding-left:20px} .timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)} .tl-item{position:relative;padding:0 0 15px} .tl-item::before{content:"";position:absolute;left:-18px;top:4px;width:9px;height:9px;border-radius:50%; background:var(--panel-3);border:2px solid var(--line)} .tl-item.hot::before{background:var(--amber);border-color:var(--amber)} .tl-item.ok::before{background:var(--green);border-color:var(--green)} .tl-item.blue::before{background:var(--brand);border-color:var(--brand)} .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px} .kv dt{color:var(--ink-3)} .kv dd{text-align:right;font-variant-numeric:tabular-nums} .note{border-left:2px solid var(--brand);background:var(--brand-dim);padding:9px 12px; border-radius:0 8px 8px 0;font-size:12px;color:var(--ink-2)} .note.amber{border-color:var(--amber);background:var(--amber-dim)} .note.red{border-color:var(--red);background:var(--red-dim)} .note.green{border-color:var(--green);background:var(--green-dim)} .note.purple{border-color:var(--purple);background:var(--purple-dim)} .empty{display:grid;place-items:center;gap:8px;padding:40px;color:var(--ink-4);text-align:center} .drop{border:1.5px dashed var(--line);border-radius:var(--r);padding:22px;text-align:center; color:var(--ink-3);transition:.15s;cursor:pointer} .drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-dim);color:var(--brand-2)} .toast-wrap{position:fixed;bottom:18px;right:18px;z-index:200;display:flex;flex-direction:column;gap:8px} .toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brand); border-radius:10px;padding:11px 14px;min-width:260px;box-shadow:var(--shadow-lg);animation:rise .2s} .toast.good{border-left-color:var(--green)} .toast.bad{border-left-color:var(--red)} .toast.warn{border-left-color:var(--amber)} .toast b{display:block;font-size:12.5px}.toast span{font-size:11.5px;color:var(--ink-3)} .chat{display:flex;flex-direction:column;gap:10px} .msg{max-width:86%;padding:10px 13px;border-radius:13px;font-size:12.8px;line-height:1.6;white-space:pre-wrap} .msg.me{align-self:flex-end;background:linear-gradient(160deg,var(--brand),var(--brand-deep));color:var(--on-brand);border-bottom-right-radius:4px} .msg.ai{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:4px} .msg.sys{align-self:center;background:var(--amber-dim);border:1px solid var(--amber-line);color:var(--amber); font-size:11.5px;border-radius:20px;padding:5px 12px} .stepper{display:flex;gap:0;overflow-x:auto;padding-bottom:2px} .step{display:flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;font-size:11.5px;color:var(--ink-4);white-space:nowrap} .step .n{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:9.5px; border:1px solid var(--line);background:var(--panel);font-weight:700} .step.done{color:var(--green)} .step.done .n{background:var(--green-dim);border-color:var(--green-line);color:var(--green)} .step.now{color:var(--brand-2)} .step.now .n{background:var(--brand-dim);border-color:var(--brand);color:var(--brand-2)} .gauge{position:relative;width:100%;display:grid;place-items:center} /* the label is centred on the ring, not offset from its top — otherwise the sub-label drifts down onto the stroke as the type scales */ .gauge .lbl{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:1px;text-align:center;pointer-events:none} .gauge .lbl b{display:block;font-size:23px;line-height:1.05;letter-spacing:-.03em; font-variant-numeric:tabular-nums} .gauge .lbl span{display:block;font-size:9.5px;line-height:1.2;color:var(--ink-3); text-transform:uppercase;letter-spacing:.07em;max-width:78%} .linkish{color:var(--brand-2);cursor:pointer} .linkish:hover{text-decoration:underline} .hl{background:var(--amber-dim);border-bottom:1px dashed var(--amber);padding:0 2px;border-radius:2px} .center{display:grid;place-items:center;height:100%} .spin{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--brand); border-radius:50%;animation:rot .7s linear infinite} @keyframes rot{to{transform:rotate(360deg)}} .kill-banner{background:linear-gradient(90deg,var(--red-dim),transparent);border:1px solid var(--red-line); border-radius:var(--r);padding:10px 14px;display:flex;align-items:center;gap:10px;margin-bottom:14px}