*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary: #3b82f6;--primary-hover: #2563eb;--sidebar-bg: #1e293b;--sidebar-text: #e2e8f0;--bg: #f1f5f9;--card-bg: #ffffff;--text: #1e293b;--text-muted: #64748b;--border: #e2e8f0;--shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);--radius: 8px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}html,body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;height:100%}#root{height:100%}.app-layout{display:grid;grid-template-columns:240px 1fr;grid-template-rows:56px 1fr;grid-template-areas:"topbar topbar" "sidebar main";height:100vh}.top-bar{grid-area:topbar;background:var(--sidebar-bg);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:10}.top-bar h1{font-size:18px;font-weight:600}.top-bar-right{display:flex;align-items:center;gap:16px}.last-refreshed{font-size:12px;color:var(--sidebar-text)}.sidebar{grid-area:sidebar;background:var(--sidebar-bg);color:var(--sidebar-text);padding:24px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}.sidebar-section{display:flex;flex-direction:column;gap:6px}.sidebar-section label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;font-weight:600}.sidebar select,.sidebar input[type=date]{width:100%;padding:8px 10px;border:1px solid #334155;border-radius:6px;background:#0f172a;color:#e2e8f0;font-size:14px;font-family:var(--font)}.sidebar select:focus,.sidebar input[type=date]:focus{outline:none;border-color:var(--primary)}.sidebar-refresh{margin-top:auto}.main-content{grid-area:main;padding:24px;overflow-y:auto;position:relative}.btn-primary{background:var(--primary);color:#fff;border:none;padding:8px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;font-family:var(--font);transition:background .15s}.btn-primary:hover{background:var(--primary-hover)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.loading-overlay{position:absolute;inset:0;background:#f1f5f9b3;display:flex;align-items:center;justify-content:center;z-index:5}.spinner{width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.kpi-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:4px}.kpi-label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:600}.kpi-value{font-size:28px;font-weight:700;color:var(--text)}.kpi-sub{font-size:12px;color:var(--text-muted)}.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}.chart-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.chart-card h3{font-size:16px;font-weight:600;margin-bottom:16px;color:var(--text)}.chart-card h4{font-size:14px;font-weight:600;margin:16px 0 8px;color:var(--text)}.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:24px}.card h3{font-size:16px;font-weight:600;margin-bottom:16px;color:var(--text)}.retention-card{margin-bottom:24px}.no-data{color:var(--text-muted);font-size:14px;text-align:center;padding:32px 0}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}thead th{text-align:left;padding:10px 12px;border-bottom:2px solid var(--border);font-weight:600;color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:hover{color:var(--primary)}tbody td{padding:10px 12px;border-bottom:1px solid var(--border)}tbody tr:nth-child(2n){background:#f8fafc}tbody tr:hover{background:#eff6ff}.alerts-panel{margin-bottom:24px}.alerts-list{display:flex;flex-direction:column;gap:12px}.alert-item{padding:14px 16px;border-radius:6px;border-left:4px solid #f59e0b;background:#fffbeb}.alert-critical{border-left-color:#ef4444;background:#fef2f2}.alert-warning{border-left-color:#f59e0b;background:#fffbeb}.alert-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.alert-header strong{font-size:14px}.alert-rule{font-size:12px;color:var(--text-muted);background:var(--border);padding:2px 8px;border-radius:4px}.alert-message{font-size:14px;color:var(--text);margin-bottom:8px}.alert-footer{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}@media(max-width:900px){.app-layout{grid-template-columns:1fr;grid-template-rows:56px auto 1fr;grid-template-areas:"topbar" "sidebar" "main"}.sidebar{flex-direction:row;flex-wrap:wrap;padding:12px 16px;gap:12px}.sidebar-section{flex:1;min-width:140px}.sidebar-refresh{margin-top:0}.kpi-grid{grid-template-columns:repeat(2,1fr)}.charts-grid{grid-template-columns:1fr}}@media(max-width:600px){.kpi-grid{grid-template-columns:1fr}.top-bar{padding:0 12px}.top-bar h1{font-size:14px}.main-content{padding:16px}}