*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0f1117; color: #e2e8f0; font-size: 15px; line-height: 1.5; }
nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: #1a1d27; border-bottom: 1px solid #2d3148; }
.nav-brand { font-weight: 600; }
nav a { color: #94a3b8; text-decoration: none; font-size: 14px; }
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
section { margin-bottom: 32px; }
h2 { font-size: 13px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
h3 { font-size: 13px; color: #64748b; margin: 16px 0 8px; }

.status-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pill { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #1e2235; border: 1px solid #2d3148; color: #94a3b8; }
.pill.halt { background: #3b1a1a; border-color: #ef4444; color: #f87171; }
.regime-on { border-color: #22c55e !important; color: #4ade80 !important; }
.regime-off { border-color: #ef4444 !important; color: #f87171 !important; }

.summary-card { background: #1a1d27; border: 1px solid #2d3148; border-radius: 8px; padding: 20px; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; margin-top: 12px; }
.summary-grid label { display: block; font-size: 11px; color: #64748b; text-transform: uppercase; margin-bottom: 4px; }
.summary-grid value { display: block; font-size: 20px; font-weight: 600; }
.summary-grid note { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 8px 12px; color: #64748b; font-size: 12px; font-weight: 500; border-bottom: 1px solid #2d3148; }
td { padding: 10px 12px; border-bottom: 1px solid #1a1d27; }
tr:hover td { background: #161926; }

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.chart-wrap { background: #1a1d27; border: 1px solid #2d3148; border-radius: 8px; padding: 20px; }
@media (max-width: 680px) { .charts { grid-template-columns: 1fr; } }

.auth-card, .approve-card, .result-card { max-width: 480px; margin: 60px auto; background: #1a1d27; border: 1px solid #2d3148; border-radius: 12px; padding: 32px; }
.auth-card h1, .approve-card h1, .result-card h1 { font-size: 20px; margin-bottom: 16px; }
.detail-table { width: 100%; margin: 16px 0; font-size: 14px; }
.detail-table th { color: #94a3b8; width: 90px; padding: 6px 0; font-weight: 500; }
.detail-table td { padding: 6px 0; }
pre { background: #0a0c14; border: 1px solid #2d3148; border-radius: 6px; padding: 12px; font-size: 13px; margin: 12px 0; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.approve-actions { display: flex; gap: 16px; align-items: center; margin-top: 24px; }
.result-ok { color: #4ade80; }
.result-fail { color: #f87171; }

.btn-primary { display: inline-block; padding: 10px 20px; background: #3b82f6; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; text-decoration: none; }
.btn-primary:hover { background: #2563eb; }
.btn-approve { display: inline-block; padding: 5px 12px; background: #1d4ed8; color: #fff; border-radius: 4px; text-decoration: none; font-size: 13px; }
.btn-approve:hover { background: #1e40af; }
.btn-confirm { padding: 10px 24px; background: #dc2626; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; }
.btn-confirm:hover { background: #b91c1c; }
.btn-cancel { color: #94a3b8; text-decoration: none; font-size: 14px; }
.data-note, .note { font-size: 12px; color: #64748b; }
.data-note { margin-bottom: 8px; }
.empty { color: #475569; font-size: 14px; font-style: italic; }
.error { color: #f87171; font-size: 14px; margin-top: 12px; }
.success { color: #4ade80; font-size: 14px; margin-top: 12px; }
.hidden { display: none !important; }