:root {
  --bg:#0c1013; --sidebar:#0b0e10; --surface:#151a1e; --surface2:#181d21; --surface3:#20262a;
  --edge:#292f32; --edge2:#343b3e; --text:#f3f5f4; --sub:#b6bec1; --muted:#7e888b;
  --cream:#ead4a5; --ivory:#f6e5c7; --green:#8de0a5; --orange:#e7a06e; --red:#e59aa1;
  --shadow:0 18px 60px rgba(0,0,0,.12); --radius:11px;
}
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; color:var(--text); background:var(--bg); font-family:Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Arial,sans-serif; -webkit-font-smoothing:antialiased; font-size:13px; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--cream);outline-offset:3px; }
input,select,textarea { color:var(--text); background:#111619; border:1px solid var(--edge2); border-radius:9px; }
a { color:inherit; text-decoration:none; }
svg { display:block; }
button svg,span svg { flex:none; }
.ico { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round;stroke-linejoin:round; }
.app-shell { display:grid; grid-template-columns:208px minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky;top:0;height:100vh;background:linear-gradient(170deg,#0d1012,#0b0e10 68%);border-right:1px solid #292d30; display:flex;flex-direction:column;padding:0 9px 19px; }
.brand { height:74px; display:flex;align-items:center; margin:0 14px 12px; white-space:nowrap; letter-spacing:5.5px; color:#f2dec1; font-size:14px;font-weight:650; }
.brand .brand-mark { display:none; }
.sidebar-nav { display:flex;flex-direction:column;gap:7px; }
.nav-link { width:100%; height:44px; border:0; background:transparent; color:#a1a9ab; display:flex; align-items:center;gap:16px; text-align:left; padding:0 19px; border-radius:8px; font-size:13px;font-weight:500; }
.nav-link.active { color:#f0e0bf;background:#222526; }
.nav-link:hover:not(.active) { background:#171c1f;color:#e1e4e4; }
.nav-link .ico { width:17px;height:17px; }
.sidebar-bottom { margin-top:auto;padding:0 6px; }
.plan-card { padding:16px 17px 14px;border:1px solid #23292b;border-radius:10px;background:linear-gradient(150deg,rgba(21,26,30,.7),rgba(13,17,19,.4));margin:0 0 13px; }
.plan-card .plan { font-size:12px; color:#ebebea; }
.plan-card .plan-usage {font-size:10px;color:#929b9e;margin:7px 0 11px}
.progress { height:5px;border-radius:6px;background:#262c2f;overflow:hidden; }
.progress>i { display:block;height:100%;border-radius:6px;background:#c4c8c8;width:57%; }
.support-button { border:0;background:transparent;color:#8f9698;display:flex;align-items:center;gap:13px;padding:9px 9px;font-size:12px; }
.support-button:hover { color:#e5ebeb; }
.workarea { min-width:0; }
.topbar { height:74px;border-bottom:1px solid #252b2d;display:flex;align-items:center;justify-content:space-between;padding:0 32px 0 26px;gap:16px; position:relative;z-index:3; }
.search-wrap { width:418px;max-width:45%;position:relative; }
.search-wrap .ico { position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#8f989b;width:15px; }
.search-wrap input { width:100%;height:38px;padding:0 15px 0 38px;background:#111518;border-radius:9px;color:#e3e6e4;font-size:12px; }
.search-wrap input::placeholder { color:#777f82; }
.top-actions { display:flex;align-items:center;gap:22px; }
.dropdown-wrap { position:relative; }
.date-button { height:38px;display:flex;align-items:center;gap:11px;border-radius:9px;border:1px solid #33393b;background:#121619;padding:0 12px;color:#e9e9e8;font-size:11px; }
.date-button .ico { width:15px;height:15px; }
.date-button .chev { width:12px;height:12px;color:#aaa; }
.top-icon { border:0;background:transparent;color:#c8cece;padding:8px;position:relative; }
.notif-dot { position:absolute;right:7px;top:7px;width:5px;height:5px;background:var(--cream);border-radius:50%; }
.profile-btn { display:flex;align-items:center;gap:11px;background:transparent;border:0;color:#eee;text-align:left;padding:2px; }
.avatar { display:grid;place-items:center;height:36px;width:36px;border-radius:50%;background:linear-gradient(145deg,#4f555b,#242a30);border:1px solid #8a9195;color:#f5f6f6;font-size:12px;box-shadow:inset 0 1px 2px #ffffff2b; }
.profile-name {font-size:12px;font-weight:650;}
.profile-co {font-size:10px;color:#a2a9ac;margin-top:4px;}
.profile-btn .ico {width:13px;color:#989fa0;}
.drop { position:absolute;right:0;top:calc(100% + 8px);width:220px;padding:7px;border:1px solid #353d40;border-radius:10px;background:#1a2023;z-index:20;box-shadow:0 14px 45px #0008; }
.drop.hidden,.hidden { display:none !important; }
.drop button { display:flex;width:100%;border:0;background:transparent;color:#e5e7e7;border-radius:6px;text-align:left;align-items:center;gap:9px;padding:10px;font-size:12px; }
.drop button:hover { background:#2b3135; }
.drop p { color:#aeb7bb;font-size:11px;line-height:1.5;margin:7px 10px; }
.main { margin:0 auto;max-width:1515px;padding:18px 24px 42px 26px; }
.page-heading { margin:0 0 18px; }
.page-heading h1 { margin:0;color:#f5f6f6;font-size:30px;letter-spacing:-1px;line-height:1.16;font-weight:760; }
.page-heading p { margin:6px 0 0;color:#aab2b4;font-size:14px;line-height:1.5; }
.demo-line { color:#858e90; font-size:10px;margin:0 0 15px;letter-spacing:.02em; }
.metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px; }
.metric { background:linear-gradient(145deg,#171c20,#151a1e); border:1px solid #2a3033;border-radius:10px;min-height:143px; padding:16px 21px 17px;position:relative;overflow:hidden; }
.metric-top { display:flex;align-items:center;gap:12px;margin-bottom:17px; }
.metric-icon { width:41px;height:41px;display:grid;place-items:center;background:#24292c;border-radius:11px;color:#dadcdd; }
.metric-icon.gold { color:#e8c996;background:#292724; }
.metric-top .name { color:#d3d7d6;font-size:12px;white-space:nowrap; }
.metric-data { display:flex;align-items:baseline;gap:14px;position:relative;z-index:2; }
.metric-value { font-size:31px;font-weight:720;letter-spacing:-1px;line-height:1.2;white-space:nowrap; }
.metric-change {color:#7ddf99;font-size:12px;font-weight:650;white-space:nowrap;}
.metric-sub { font-size:11px;color:#a4aeaf;margin:5px 0 0; }
.metric-chart { position:absolute;bottom:30px;right:8px;width:105px;height:51px;opacity:.78;pointer-events:none; }
.panel { background:linear-gradient(135deg,#171c20,#14191d);border:1px solid #282f32;border-radius:10px;box-shadow:var(--shadow); }
.panel-title {font-size:18px;font-weight:720;color:#f1f3f2;margin:0 0 5px;letter-spacing:-.35px; }
.panel-sub {font-size:12px;color:#a9b0b3;margin:0;line-height:1.4; }
.comparison-panel { padding:20px 24px 16px;margin-bottom:14px; }
.panel-head { display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:16px; }
.range-btn {background:#151a1d;color:#d6dadd;border:1px solid #343a3d;padding:9px 15px;border-radius:8px;font-size:11px;display:flex;align-items:center;gap:10px;white-space:nowrap;}
.agents-compare {display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);align-items:center;gap:0;}
.agent-card { border:1px solid #2b3134;border-radius:9px; padding:17px 19px 19px;min-width:0;background:#151a1d; }
.agent-head {display:flex;align-items:center;gap:13px;margin-bottom:13px;padding-bottom:13px;border-bottom:1px solid #242a2c;}
.agent-symbol { height:44px;width:44px;background:#262d31;border-radius:10px;display:grid;place-items:center;color:#e8eeef; flex:none; }
.agent-symbol.sun { background:#222321;color:#f4a271;font-size:24px; }
.agent-names {flex:1; min-width:0;}
.agent-names strong {display:block;font-size:14px;font-weight:690;}
.agent-names small {display:block;color:#a5acaf;font-size:11px;margin-top:7px;}
.agent-letter {border:0;border-radius:6px;background:#303538;padding:5px 10px;font-size:12px;color:#e2e6e5;font-weight:700;}
.agent-letter.gold {background:#39352b;color:#ebd4aa;}
.winner-pill {background:#8fe3b1;color:#102417;border-radius:7px;padding:7px 12px;font-weight:690;font-size:11px;white-space:nowrap; }
.score-row {display:grid;grid-template-columns:116px minmax(50px,1fr) 40px;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:#d0d5d5;}
.score-row:first-of-type {margin-top:3px;}
.score-row strong {color:#f2f4f3;font-weight:690;text-align:right;}
.score-track {width:100%;height:13px;background:#293033;border-radius:8px;overflow:hidden;}
.score-fill {height:100%;border-radius:8px;background:linear-gradient(90deg,#e9e9e9,#c7cdd0);box-shadow:0 0 10px #edf2f21f;}
.score-fill.gold {background:linear-gradient(90deg,#e8d3a5,#f5e0be);}
.vs-col {display:flex;align-items:center;justify-content:center;position:relative;height:calc(100% - 45px);}
.vs-col::before {content:"";height:100%;width:1px;background:#384044;position:absolute;left:50%;top:0;}
.vs { display:grid;place-items:center;border:1px solid #667175;border-radius:50%;height:36px;width:36px;background:#111619;z-index:1;color:#f5f7f5;font-size:11px; }
.bottom-grid {display:grid;grid-template-columns:minmax(0,1.9fr) minmax(318px,1fr);gap:14px;align-items:stretch;}
.table-panel {padding:18px 14px 15px;min-height:354px;}
.table-panel .panel-head {padding:0 9px;margin-bottom:16px;}
.inline-btn {border:0;background:none;color:#e2e8e7;display:flex;gap:8px;align-items:center;font-size:11px;}
.inline-btn .ico {width:15px;}
.table-scroll {overflow:auto;border:1px solid #2a3033;border-radius:8px;}
table {border-collapse:collapse;width:100%;min-width:600px;font-size:11px;}
th {color:#9fa9ab;font-weight:500;text-align:left;background:#171c20;padding:13px 11px;border-bottom:1px solid #2d3436;white-space:nowrap;}
td {padding:12px 11px;border-bottom:1px solid #262d30;color:#cbd2d2;white-space:nowrap;}
tr:last-child td {border-bottom:0;}
tbody tr:hover {background:#1e2527;cursor:pointer;}
td:first-child {font-weight:650;color:#e5e9e8;}
.tiny-tag {display:inline-grid;place-items:center;background:#86df9f;color:#08250f;min-width:24px;height:20px;border-radius:6px;font-weight:730;font-size:11px;}
.tiny-tag.alt {background:#c7cdd0;color:#202627;}
.col-action {text-align:right;}
.text-button {color:#cbd2d0;background:none;border:0;padding:3px;}
.audit-panel {padding:17px 18px 16px;min-height:354px;}
.audit-header {font-size:13px;font-weight:670;margin:0 0 5px;}
.audit-note {color:#9eaaad;font-size:11px;margin:0 0 14px;}
.audit-overview { display:grid;grid-template-columns:146px 1fr;gap:8px;align-items:center;padding-bottom:16px;border-bottom:1px solid #262c2e; }
.donut {width:123px;height:123px;display:grid;place-items:center;border-radius:50%;margin:0 auto;background:conic-gradient(#80d9a1 0 70%,#e4e6e5 70% 90%,#c2a66c 90% 96%,#b46e8d 96% 100%);transform:rotate(-25deg);position:relative;}
.donut::before {content:"";inset:10px;background:#171c20;border-radius:50%;position:absolute;}
.donut-center {z-index:1;text-align:center;transform:rotate(25deg);}
.donut-center strong {display:block;font-size:20px;letter-spacing:-.6px;}
.donut-center span {font-size:10px;color:#cdd6d1;}
.legend {display:grid;gap:10px;min-width:0;}
.legend-row {display:flex;align-items:center;gap:9px;color:#c7ced0;font-size:10px;}
.legend-row strong {margin-left:auto;color:#e3e9e9;font-size:10px;font-weight:500;}
.legend-dot {display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;}
.trace-head {display:flex;justify-content:space-between;align-items:center;margin:14px 0 9px;}
.trace-head strong {font-size:12px;}
.trace {margin:0 0 0 8px;padding:0 0 0 15px;list-style:none;border-left:1px solid #3a4343;}
.trace li {position:relative;display:flex;align-items:center;justify-content:space-between;gap:5px;margin:10px 0;color:#a6b1b3;font-size:10px;}
.trace li:before {content:"";position:absolute;left:-21px;width:8px;height:8px;background:#f2e1b9;border-radius:50%;}
.trace li .check {color:#80d8a1;margin-left:auto;}
.trace li .time {min-width:30px;text-align:right;color:#bdc5c6;}
.section-panel {padding:24px;margin-bottom:18px;}
.stack {display:grid;gap:18px;}
.toolbar {display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px;}
.btn {border:1px solid #3b4143;color:#f3f3f2;background:#252a2d;border-radius:8px;padding:10px 15px;font-weight:550; font-size:12px;display:inline-flex;align-items:center;gap:9px;justify-content:center;}
.btn:hover {background:#30373a;}
.btn.primary {background:#ebd7ad;color:#181813;border-color:#ebd7ad;font-weight:680;}
.btn.primary:hover {background:#fff0d1;}
.btn.small {padding:7px 11px;font-size:11px;}
.btn.ghost {background:transparent;}
.input {height:40px;padding:0 12px;width:100%;}
.textarea {padding:12px;min-height:110px;width:100%;resize:vertical;line-height:1.5;}
.label {display:block;color:#aeb8ba;font-size:11px;margin:0 0 7px;}
.field {margin-bottom:15px;}
.split {display:grid;grid-template-columns:1fr 1fr;gap:17px;}
.highlight {border:1px solid #3b4037;background:#252820;color:#eee0bd;padding:13px 14px;border-radius:9px;font-size:12px;line-height:1.6;}
.list-cards {display:grid;gap:10px;}
.case-item {text-align:left;border:1px solid #2e3537;border-radius:9px;padding:16px;background:#171c1f;color:#e9eeed;display:flex;justify-content:space-between;gap:15px;align-items:center;}
.case-item:hover {background:#1f2629;}
.case-item strong {display:block;font-size:13px;}
.case-item small {display:block;color:#aab4b6;margin-top:5px;line-height:1.5;}
.cards-3 {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;}
.mini-stat {padding:18px;border:1px solid #2c3335;border-radius:10px;background:#1a2023;}
.mini-stat .val {font-size:25px;margin:8px 0 2px;font-weight:690;}
.mini-stat .meta {font-size:11px;color:#abb5b6;}
.progress-labeled {margin-top:16px;}
.progress-labeled .top {display:flex;justify-content:space-between;margin-bottom:8px;color:#b7bfc1;font-size:11px;}
.progress-labeled .progress {height:10px;}
.progress-labeled .progress>i {background:linear-gradient(90deg,#d3c5a8,#f6e0b3);}
.modal-overlay {position:fixed;inset:0;background:#030606c9;display:grid;place-items:center;padding:22px;z-index:35;}
.modal {width:min(680px,100%);max-height:90vh;overflow:auto;background:#1a2023;border:1px solid #3b4345;border-radius:14px;box-shadow:0 40px 100px #000b;padding:24px;}
.modal-header {display:flex;align-items:start;justify-content:space-between;margin-bottom:18px;gap:20px;}
.modal-close {background:none;border:0;color:#d9dfe0;padding:4px;}
.modal h2 {margin:0;font-size:22px;}
.modal h3 {font-size:13px;margin:18px 0 9px;}
.modal p {color:#b6c0c1;font-size:12px;line-height:1.7;}
.reply {background:#14191c;border:1px solid #343c3e;padding:13px;border-radius:8px;color:#d9e0e0;line-height:1.6;font-size:12px;white-space:pre-wrap;}
.status-flag {display:inline-flex;gap:6px;align-items:center;font-size:10px;border:1px solid #4b5546;border-radius:999px;color:#a6e5b0;padding:5px 9px;}
.toast {position:fixed;bottom:22px;right:25px;z-index:55;background:#252e2b;color:#ebf2ec;border:1px solid #51785e;border-radius:9px;padding:13px 18px;box-shadow:0 15px 40px #000a;font-size:12px;max-width:350px;}
.footer {margin-top:27px;color:#677275;font-size:10px;line-height:1.5;}
@media (min-width:1500px){.main{padding-left:28px;padding-right:32px;}}
@media (max-width:1200px){.metrics{gap:10px}.metric{padding:15px}.metric-value{font-size:27px}.metric-data{gap:7px}.bottom-grid{grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr)}.score-row{grid-template-columns:105px minmax(55px,1fr) 34px}.main{padding:21px 17px}.agent-card{padding:13px}}
@media (max-width:1010px){.sidebar{width:72px;padding:0 6px 15px}.app-shell{grid-template-columns:72px 1fr}.brand{letter-spacing:0;font-size:0;justify-content:center;margin:0 0 12px}.brand-mark{display:block!important;font-size:19px!important;letter-spacing:0}.nav-link{justify-content:center;padding:0;font-size:0;gap:0}.nav-link .ico{height:21px;width:21px}.sidebar-bottom .plan-card,.sidebar-bottom .support-button span{display:none}.sidebar-bottom .support-button{justify-content:center}.bottom-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.audit-overview{grid-template-columns:160px 1fr}}
@media (max-width:690px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;width:auto;height:57px;flex-direction:row;align-items:center;justify-content:space-between;padding:0 9px;border-right:0;border-bottom:1px solid #2e3536}.brand{height:auto;margin:0 7px;font-size:12px;letter-spacing:2.2px}.brand-mark{display:none!important}.sidebar-nav{display:flex;flex-direction:row;gap:0;overflow:auto}.nav-link{width:37px;height:40px;font-size:0}.nav-link .ico{width:17px;height:17px}.sidebar-bottom{display:none}.topbar{height:62px;padding:0 12px}.search-wrap{max-width:100%;width:100%;flex:1}.top-actions{gap:6px}.date-button{display:none}.profile-btn .profile-name,.profile-btn .profile-co,.profile-btn>.ico{display:none}.avatar{width:32px;height:32px}.main{padding:24px 13px}.page-heading h1{font-size:24px}.page-heading p{font-size:12px}.metrics{gap:9px}.metric{padding:13px;min-height:120px}.metric-top{gap:7px;margin-bottom:12px}.metric-icon{width:32px;height:32px}.metric-icon .ico{width:14px}.metric-top .name{font-size:10px;white-space:normal}.metric-value{font-size:23px}.metric-change{font-size:10px}.metric-chart{width:65px;right:0;bottom:20px}.comparison-panel{padding:16px 12px}.agents-compare{grid-template-columns:1fr}.vs-col{height:26px}.vs-col:before{display:none}.vs{height:25px;width:25px}.agent-card{padding:13px}.score-row{grid-template-columns:110px 1fr 32px}.agent-head{gap:9px}.agent-names strong{font-size:12px}.agent-symbol{width:34px;height:34px}.winner-pill{padding:5px 6px;font-size:10px}.split,.cards-3{grid-template-columns:1fr}.section-panel{padding:17px}.table-panel{padding:13px}.bottom-grid{gap:10px}}