:root{--bg: #0d0d10;--surface: #15151a;--surface-2: #1b1b22;--border: #26262e;--text: #f2f2f4;--text-2: #9a9aa4;--green: #3ecf8e;--amber: #ef9f27;--red: #e24b4a;--blue: #5b9cf6;--purple: #c084fc;--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--ui: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;--radius: 10px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--ui);font-size:14px;-webkit-font-smoothing:antialiased}a{color:var(--blue);text-decoration:none}.mono{font-family:var(--mono)}.muted{color:var(--text-2)}.app{display:grid;grid-template-columns:232px 1fr;min-height:100%}.sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 14px;gap:4px}.brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:6px 10px 18px}.brand .brand-mark{color:var(--text);display:block}.brand .brand-sub{display:block;color:var(--text-2);font-size:11px;letter-spacing:.2px}.brand b{font-weight:600;letter-spacing:.2px}.brand small{display:block;color:var(--text-2);font-size:11px}.nav-link{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--text-2);font-weight:500;cursor:pointer}.nav-link:hover{background:var(--surface-2);color:var(--text)}.nav-link.active{background:var(--surface-2);color:var(--text);box-shadow:inset 2px 0 0 var(--amber)}.nav-link .ico{width:16px;text-align:center;opacity:.85}.sidebar .spacer{flex:1}.sidebar .userbox{border-top:1px solid var(--border);padding-top:12px;font-size:13px}.content{padding:24px 28px;max-width:1180px;min-width:0}.card{overflow-x:auto}.topbar{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--border)}.barlist{display:flex;flex-direction:column;gap:8px}.barrow{display:grid;grid-template-columns:120px 1fr 64px;align-items:center;gap:10px}.barlabel{font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bartrack{height:18px;background:var(--surface-2);border-radius:5px;overflow:hidden}.barfill{display:block;height:100%;border-radius:5px;min-width:2px;transition:width .3s}.barval{font-size:12px;text-align:right}.stacked{display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--surface-2)}.stackseg{height:100%}.clickrow{cursor:pointer}.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.filters select,.filters input{width:auto;min-width:130px}.thread{display:flex;flex-direction:column;gap:10px;max-height:380px;overflow-y:auto;padding:4px}.msg{max-width:78%;padding:9px 12px;border-radius:10px;font-size:13px}.msg .who{font-size:11px;color:var(--text-2);margin-bottom:3px}.msg.customer{align-self:flex-start;background:#5b9cf61f;border:1px solid rgba(91,156,246,.25)}.msg.admin{align-self:flex-end;background:#ef9f271f;border:1px solid rgba(239,159,39,.25)}.msg.system{align-self:center;background:var(--surface-2);color:var(--text-2);font-size:12px;max-width:92%;text-align:center}.page-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}.page-head h1{font-size:20px;font-weight:600;margin:0}.page-head p{margin:4px 0 0;color:var(--text-2)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.card h2{font-size:14px;font-weight:600;margin:0 0 14px}.grid{display:grid;gap:16px}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-2{grid-template-columns:repeat(2,1fr)}.stat .label{color:var(--text-2);font-size:12px;text-transform:uppercase;letter-spacing:.5px}.stat .value{font-family:var(--mono);font-size:26px;font-weight:600;margin-top:6px}.stat .sub{color:var(--text-2);font-size:12px;margin-top:4px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}th{color:var(--text-2);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.4px}tbody tr:hover{background:var(--surface-2)}td.mono,th.mono{font-family:var(--mono)}.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid transparent}.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.badge.green{color:var(--green);background:#3ecf8e1a;border-color:#3ecf8e40}.badge.amber{color:var(--amber);background:#ef9f271a;border-color:#ef9f2740}.badge.red{color:var(--red);background:#e24b4a1a;border-color:#e24b4a40}.badge.blue{color:var(--blue);background:#5b9cf61a;border-color:#5b9cf640}.badge.gray{color:var(--text-2);background:var(--surface-2);border-color:var(--border)}.badge.purple{color:var(--purple);background:#c084fc1a;border-color:#c084fc40}label.field{display:block;margin-bottom:12px}label.field span{display:block;color:var(--text-2);font-size:12px;margin-bottom:5px}input,textarea,select{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-family:var(--ui);font-size:14px}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue)}textarea{resize:vertical;min-height:70px;font-family:var(--mono);font-size:12px}input[type=file]{padding:7px}input[type=range]{padding:0;accent-color:var(--amber)}.btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 14px;font-family:var(--ui);font-size:13px;font-weight:500}.btn:hover{border-color:#3a3a44}.btn.primary{background:var(--amber);color:#14141a;border-color:var(--amber);font-weight:600}.btn.primary:hover{filter:brightness(1.06)}.btn.ghost{background:transparent}.btn:disabled{opacity:.5;cursor:not-allowed}.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.toast{padding:10px 12px;border-radius:8px;font-size:13px;margin:10px 0}.toast.ok{background:#3ecf8e1a;color:var(--green);border:1px solid rgba(62,207,142,.25)}.toast.err{background:#e24b4a1a;color:var(--red);border:1px solid rgba(226,75,74,.25)}@media (max-width: 960px){.cols-3,.cols-2{grid-template-columns:1fr}}@media (max-width: 720px){.app{grid-template-columns:1fr}.sidebar{flex-direction:row;flex-wrap:wrap;align-items:center}.sidebar .spacer{flex-basis:100%;height:0}.content{padding:18px 16px}}.login-wrap{display:grid;place-items:center;min-height:100vh;padding:20px}.login-card{width:360px}.login-card .brand{align-items:center;gap:10px;padding-bottom:22px}