:root { color-scheme: light; --bg:#f5f8fb; --panel:#ffffff; --line:#dbe4ec; --text:#142231; --muted:#607487; --cyan:#087f99; --green:#147a55; --amber:#a65f00; }
* { box-sizing: border-box; }
body { margin:0; min-width:320px; background:#f5f8fb; color:var(--text); font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
.shell { max-width:1320px; margin:auto; padding:38px 32px 28px; }
.topbar,.card-head,.row,.channels li,.exceptions li,footer { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.eyebrow { color:var(--cyan); font-size:11px; font-weight:800; letter-spacing:.16em; margin:0 0 8px; } .demo-label { display:block; margin-top:5px; color:var(--amber); font-size:11px; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(28px,4vw,48px); line-height:1.05; letter-spacing:-.04em; margin-bottom:12px; } h2 { font-size:18px; margin:0; } .muted,small { color:var(--muted); }
.status { border:1px solid #c6d9d2; color:var(--green); background:#f0faf5; border-radius:999px; padding:9px 14px; white-space:nowrap; font-size:12px; cursor:pointer; } .status span { display:inline-block; width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:8px; }
.pipeline { display:flex; align-items:stretch; margin:42px 0 24px; overflow:auto; padding-bottom:4px; } .step { min-width:150px; border:1px solid var(--line); background:#fff; border-radius:12px; padding:15px; box-shadow:0 3px 12px #23384d0a; } .step.active { border-color:#80c8d2; background:#effbfc; } .step b { color:var(--cyan); display:block; font-size:11px; } .step strong { display:block; margin-top:7px; font-size:16px; } .step small { display:block; margin-top:4px; } .arrow { color:#8aa0b1; font-size:24px; align-self:center; padding:0 12px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; } .metrics article,.card { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 3px 12px #23384d0a; } .metrics article { padding:18px; } .metrics span { color:var(--amber); display:block; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .metrics strong { display:block; font-size:28px; margin:7px 0 2px; } em { color:var(--muted); font-size:12px; font-style:normal; } .up { color:var(--green); }
.grid { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; } .card { padding:22px; } .wide { grid-row:span 2; } button { background:transparent; color:var(--cyan); border:0; font:inherit; cursor:pointer; }
.notice { display:flex; gap:12px; align-items:center; margin:24px 0 18px; padding:13px 16px; border:1px solid #e8c98c; border-radius:12px; background:#fffaf0; } .notice strong { color:var(--amber); white-space:nowrap; } .notice span { color:var(--muted); font-size:12px; }
.accounts { margin-bottom:18px; } .primary { background:var(--cyan); color:#fff; border-radius:8px; padding:9px 12px; font-weight:800; }
.account-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:20px; } .account { text-align:left; border:1px solid var(--line); border-radius:10px; padding:12px; color:var(--text); background:#fff; } .account:hover,.account.selected { border-color:var(--cyan); background:#effbfc; } .account b,.account span,.account em { display:block; } .account span { color:var(--muted); font-size:11px; margin:4px 0 7px; } .account em { color:var(--amber); font-size:10px; font-style:normal; text-transform:uppercase; letter-spacing:.08em; }
.modal { border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--text); max-width:470px; width:calc(100% - 32px); } .modal::backdrop { background:#14223166; } .modal-box { padding:24px; } .modal-box label { display:block; color:var(--muted); font-size:12px; margin:16px 0; } .modal-box input,.modal-box select { display:block; width:100%; margin-top:6px; padding:10px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--text); } .modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.table { margin-top:20px; } .row { border-top:1px solid var(--line); padding:15px 0; display:grid; grid-template-columns:2fr 1fr .5fr 1fr; } .row.heading { border-top:0; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; padding-top:0; } .row span { min-width:0; } .row small { display:block; margin-top:3px; font-size:12px; } .score { color:var(--cyan); font-weight:800; font-size:18px; }
.pill { border-radius:999px; padding:4px 9px; font-size:11px; justify-self:start; } .good { color:var(--green); background:#e6f6ef; } .warn { color:var(--amber); background:#fff3dc; } .count { color:var(--amber); background:#fff3dc; border-radius:50%; width:28px;height:28px;text-align:center;padding-top:4px;font-weight:800; }
.channels,.exceptions { list-style:none; padding:0; margin:20px 0 0; } .channels li { margin:17px 0; font-size:13px; } .channels em { width:30px; text-align:right; color:var(--green); } .bar { background:#e5edf2; border-radius:4px; flex:1; height:6px; margin-left:auto; } .bar i { display:block; height:100%; border-radius:4px; background:var(--cyan); }
.exceptions li { justify-content:flex-start; margin:17px 0; } .exceptions div { flex:1; } .exceptions b,.exceptions small { display:block; } time { color:var(--muted); font-size:12px; } .dot { width:8px;height:8px;border-radius:50%; } .red { background:#ef786e; } .amber { background:var(--amber); }
footer { border-top:1px solid var(--line); margin-top:22px; padding-top:18px; color:var(--muted); font-size:12px; } footer b { color:var(--text); } .safe { color:var(--green); }
.toast { position:fixed; right:24px; bottom:24px; max-width:340px; padding:12px 15px; border:1px solid #b8dce3; border-radius:10px; background:#fff; color:var(--text); box-shadow:0 8px 28px #23384d22; opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s ease; } .toast.show { opacity:1; transform:translateY(0); }
.demo-label { display:block; margin-top:5px; color:var(--amber); font-size:11px; }
@media (max-width:1000px) { .account-grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:800px) { .shell { padding:24px 16px; } .topbar { align-items:flex-start; flex-direction:column; } .metrics { grid-template-columns:repeat(2,1fr); } .grid { grid-template-columns:1fr; } .wide { grid-row:auto; } }
@media (max-width:520px) { .account-grid { grid-template-columns:repeat(2,1fr); } .notice { align-items:flex-start; flex-direction:column; } .metrics { grid-template-columns:1fr 1fr; gap:8px; } .metrics article { padding:13px; } .metrics strong { font-size:22px; } .row { grid-template-columns:1.7fr .8fr .5fr; } .row span:nth-child(4),.row.heading span:nth-child(4) { display:none; } }