:root{
  --bg-page:#0e1013; --bg-panel:#15181c; --bg-card:#1a1e23; --bg-elevated:#20242a;
  --border:#2a2f36; --border-strong:#383e46;
  --text-0:#eef0f2; --text-1:#9ba3ad; --text-2:#666e78;
  --blue:#5b8def; --blue-dim:#152540;
  --green:#3ecf8e; --green-dim:#0e2b22;
  --amber:#e3a53c; --amber-dim:#332711;
  --red:#ef5a72; --red-dim:#331319;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;
  --mono:'SF Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg-page);color:var(--text-0);font-family:var(--sans);font-size:13.5px;}
a{color:var(--blue);text-decoration:none;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px;}

.app{display:grid;grid-template-columns:210px 1fr;min-height:100vh;}
.sidebar{background:var(--bg-panel);border-right:1px solid var(--border);padding:16px 10px;}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;}
.brand-mark{width:28px;height:28px;border-radius:7px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;}
.brand-name{font-weight:600;font-size:14px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;color:var(--text-1);font-size:13px;cursor:pointer;text-decoration:none;}
.nav-item:hover{background:var(--bg-card);color:var(--text-0);}
.nav-item.active{background:var(--blue-dim);color:#bcd4ff;}

.main{padding:22px 28px;max-width:1300px;}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.page-title{font-size:19px;font-weight:600;}
.page-sub{font-size:12px;color:var(--text-2);margin-top:2px;}

.btn{background:var(--bg-card);border:1px solid var(--border-strong);color:var(--text-1);font-size:12px;padding:7px 12px;border-radius:7px;cursor:pointer;font-family:var(--sans);}
.btn:hover{background:var(--bg-elevated);color:var(--text-0);}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;}
.btn.danger{border-color:#4a2229;color:var(--red);}
.btn.danger:hover{background:var(--red-dim);}
.btn.small{padding:5px 9px;font-size:11px;}
input,select,textarea{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:7px;color:var(--text-0);font-size:12.5px;padding:8px 10px;font-family:var(--sans);outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--blue);}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.stat-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
.stat-label{font-size:10.5px;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.stat-value{font-size:22px;font-weight:600;font-family:var(--mono);}
.stat-value.bad{color:var(--red);} .stat-value.warn{color:var(--amber);} .stat-value.ok{color:var(--green);}

.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.panel-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.panel-title{font-size:13px;font-weight:600;}

.table{width:100%;border-collapse:collapse;}
.table th{text-align:left;font-size:10.5px;color:var(--text-2);text-transform:uppercase;letter-spacing:.03em;padding:9px 16px;border-bottom:1px solid var(--border);}
.table td{padding:11px 16px;font-size:12.5px;border-bottom:1px solid var(--border);vertical-align:middle;}
.table tr:hover td{background:var(--bg-card);cursor:pointer;}
.table tr:last-child td{border-bottom:none;}

.badge{display:inline-block;padding:2px 8px;border-radius:5px;font-size:10.5px;font-weight:700;letter-spacing:.02em;}
.badge.FATAL{background:var(--red-dim);color:var(--red);}
.badge.ERROR{background:var(--red-dim);color:var(--red);}
.badge.WARN{background:var(--amber-dim);color:var(--amber);}
.badge.new{background:var(--bg-elevated);color:var(--text-1);}
.badge.investigating{background:var(--amber-dim);color:var(--amber);}
.badge.acknowledged{background:var(--blue-dim);color:#a8c6ff;}
.badge.resolved{background:var(--green-dim);color:var(--green);}
.badge.ignored{background:var(--bg-card);color:var(--text-2);}
.code-chip{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--red);background:var(--red-dim);padding:2px 6px;border-radius:4px;}

.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
.toolbar .spacer{flex:1;}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.login-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:32px;width:340px;}
.login-card h1{font-size:16px;margin-bottom:4px;}
.login-card p{font-size:12px;color:var(--text-2);margin-bottom:20px;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:11.5px;color:var(--text-1);margin-bottom:5px;}
.field input{width:100%;}
.error-text{color:var(--red);font-size:12px;margin-top:10px;}

.empty-state{padding:40px 20px;text-align:center;color:var(--text-2);font-size:12.5px;}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border-strong);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.detail-grid{display:grid;grid-template-columns:1fr 280px;gap:16px;}
.kv-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px;}
.kv-row:last-child{border-bottom:none;}
.kv-row .k{color:var(--text-2);}
.kv-row .v{font-family:var(--mono);color:var(--text-0);text-align:right;max-width:220px;word-break:break-word;}
pre.stack{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:12px;font-family:var(--mono);font-size:11.5px;color:var(--text-1);overflow-x:auto;white-space:pre-wrap;word-break:break-word;}

.log-line{font-family:var(--mono);font-size:11.5px;padding:5px 16px;display:grid;grid-template-columns:70px 1fr;gap:10px;border-bottom:1px solid var(--border);}
.log-line .lt{color:var(--text-2);}
.redacted{color:var(--text-2);background:var(--bg-elevated);border:1px dashed var(--border-strong);padding:0 6px;border-radius:4px;}