:root { --sidebar-width: 270px; --bg: #f4f6f9; --navy: #101827; --panel: #fff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: #1f2937; font-family: Inter, system-ui, sans-serif; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: var(--sidebar-width); min-height: 100vh; background: var(--navy); color: #fff; padding: 22px 16px; position: fixed; display: flex; flex-direction: column; }
.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.2rem; display: flex; gap: 12px; align-items: center; padding: 8px 12px; }
.brand i { font-size: 1.7rem; }
.sidebar .nav-link { color: #aeb8c7; border-radius: 10px; margin-bottom: 5px; padding: 11px 12px; }
.sidebar .nav-link i { width: 24px; display: inline-block; }
.sidebar .nav-link.active, .sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.sidebar-footer { margin-top: auto; padding: 12px; color: #8491a5; }
.main-content { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); min-height: 100vh; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 5; }
.panel, .stat-card { background: var(--panel); border: 1px solid #e6e9ef; border-radius: 14px; box-shadow: 0 4px 16px rgba(16,24,39,.04); }
.stat-card { padding: 20px; display: flex; align-items: center; gap: 16px; }
.stat-icon { width: 48px; height: 48px; border-radius: 12px; background: #e8efff; color: #2c5cc5; display: grid; place-items: center; font-size: 1.35rem; }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.stat-label { margin-top: 5px; color: #6b7280; }
.panel-header { padding: 18px 20px; border-bottom: 1px solid #edf0f4; }
.panel-body { padding: 20px; }
.service-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.service-list li:last-child { border-bottom: 0; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #20a464; box-shadow: 0 0 0 4px rgba(32,164,100,.12); align-self: center; }
.error-panel { max-width: 620px; padding: 42px; }
@media (max-width: 900px) { .sidebar { width: 82px; } .sidebar span, .sidebar .nav-link:not(.active) { font-size: 0; } .main-content { margin-left: 82px; width: calc(100% - 82px); } }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#101827,#263b63); }
.auth-card { width:min(440px,100%); background:#fff; border-radius:18px; padding:36px; box-shadow:0 24px 70px rgba(0,0,0,.3); }
thead th { white-space:nowrap; padding:14px 16px!important; color:#64748b!important; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
tbody td { padding:14px 16px!important; }

.status-pill { display:inline-flex; align-items:center; padding:.35rem .65rem; border-radius:999px; font-size:.78rem; font-weight:600; }
.status-pill.active { color:#087443; background:#dcfce7; }
.status-pill.inactive { color:#991b1b; background:#fee2e2; }
.detail-label { color:#64748b; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.3rem; }
.detail-value { font-weight:500; }
.text-prewrap { white-space:pre-wrap; }
.security-list { list-style:none; padding:0; margin:0; }
.security-list li { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 0; border-bottom:1px solid #edf0f4; }
.security-list li:last-child { border-bottom:0; }
.security-list strong { text-align:right; font-size:.9rem; }
.incident-badge { display:inline-flex; align-items:center; padding:.28rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:#eef2f7; color:#475569; }
.priority-critical,.severity-critical { background:#fee2e2; color:#991b1b; }.priority-high,.severity-major { background:#ffedd5; color:#9a3412; }.priority-medium,.severity-significant { background:#fef3c7; color:#92400e; }.priority-low,.severity-minor { background:#dcfce7; color:#166534; }
.status-new { background:#dbeafe; color:#1e40af; }.status-triage,.status-investigating { background:#ede9fe; color:#5b21b6; }.status-contained,.status-eradicated,.status-recovering { background:#fef3c7; color:#92400e; }.status-resolved,.status-closed { background:#dcfce7; color:#166534; }
.comment-item { padding:1rem 0; border-bottom:1px solid #edf0f4; }.comment-item:first-child { padding-top:0; }.attachment-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid #edf0f4; }
.detail-grid { display:grid; grid-template-columns:110px 1fr; gap:.8rem 1rem; margin:0; }.detail-grid dt { color:#64748b; font-size:.78rem; text-transform:uppercase; }.detail-grid dd { margin:0; font-weight:500; overflow-wrap:anywhere; }
.timeline { position:relative; }.timeline-item { position:relative; padding:0 0 1.4rem 1.4rem; border-left:2px solid #e2e8f0; }.timeline-item::before { content:''; position:absolute; width:10px; height:10px; border-radius:50%; background:#3b82f6; left:-6px; top:4px; }.timeline-item time { display:block; color:#64748b; font-size:.75rem; margin-top:.25rem; }
.workflow-check{display:flex;align-items:flex-start;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--bs-border-color)}
.workflow-check:last-child{border-bottom:0}