:root {
    color-scheme: light;
    --bg: #f2f6fb;
    --surface: #ffffff;
    --surface-2: #f8fbff;
    --sidebar: #07172e;
    --sidebar-2: #0b2449;
    --ink: #142238;
    --muted: #6e7d92;
    --line: #dce6f1;
    --blue: #0969e8;
    --blue-dark: #0b397e;
    --cyan: #39b7ff;
    --green: #039855;
    --orange: #e07900;
    --red: #d92d20;
    --shadow: 0 18px 50px rgba(30,58,95,.10);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.login-view { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); }
.login-art { display: grid; align-items: end; padding: 70px; color: white; background: radial-gradient(circle at 20% 15%, rgba(54,170,255,.36), transparent 32rem), linear-gradient(145deg, #06132a 0%, #0a2c5f 52%, #0969e8 150%); position: relative; overflow: hidden; }
.login-art::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(black, transparent); }
.login-art-content { position: relative; z-index: 1; max-width: 720px; }
.login-art h1 { margin: 12px 0 18px; max-width: 680px; font-size: clamp(46px, 6vw, 78px); line-height: .98; letter-spacing: -.06em; }
.login-art p { max-width: 610px; color: #c5d6ea; line-height: 1.75; font-size: 17px; }
.feature-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.feature-grid span { padding: 14px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.06); backdrop-filter: blur(10px); color: #e5f0fc; font-size: 13px; }
.login-panel { display: grid; place-items: center; padding: 35px; background: #f7faff; }
.login-card { width: min(430px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow); }
.brand, .sidebar-brand { display: flex; align-items: center; gap: 12px; }
.brand strong, .brand small, .sidebar-brand strong, .sidebar-brand small { display: block; }
.brand small, .sidebar-brand small { color: var(--muted); margin-top: 2px; font-size: 11px; }
.brand-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: white; font-weight: 900; background: linear-gradient(145deg, var(--cyan), var(--blue-dark)); box-shadow: 0 9px 22px rgba(9,105,232,.25); }
.login-card h2 { margin: 30px 0 5px; font-size: 28px; letter-spacing: -.035em; }
.login-card > p { margin: 0 0 24px; color: var(--muted); }
label { display: grid; gap: 7px; margin-top: 15px; color: #304157; font-size: 13px; font-weight: 700; }
input, select { width: 100%; min-height: 45px; border: 1px solid #cfdbea; border-radius: 11px; padding: 10px 12px; color: var(--ink); background: white; outline: none; }
input:focus, select:focus { border-color: #6bb5ff; box-shadow: 0 0 0 4px rgba(9,105,232,.10); }
.primary-button, .secondary-button, .logout-button, .icon-button { border: 0; border-radius: 11px; font-weight: 750; }
.primary-button { width: 100%; margin-top: 22px; min-height: 47px; padding: 11px 17px; color: white; background: linear-gradient(135deg, var(--blue), #064eb2); box-shadow: 0 9px 22px rgba(9,105,232,.22); }
.primary-button.compact { width: auto; margin: 0; min-height: 42px; }
.secondary-button { min-height: 40px; padding: 9px 14px; color: #29405d; background: #edf3f9; border: 1px solid #d7e2ee; }
.form-error { margin-top: 14px; padding: 11px 13px; border-radius: 10px; color: #b42318; background: #fff1f0; border: 1px solid #f4c7c2; font-size: 13px; }
.app-view { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 26px 18px; color: white; background: radial-gradient(circle at top left, rgba(36,125,238,.25), transparent 18rem), linear-gradient(180deg, var(--sidebar), #091c38); }
.sidebar-brand { padding: 0 10px 25px; border-bottom: 1px solid rgba(255,255,255,.09); }
.sidebar-brand small { color: #8fa7c4; }
.sidebar nav { display: grid; gap: 7px; margin-top: 26px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 13px; border: 0; border-radius: 11px; color: #a9bed7; background: transparent; text-align: left; font-weight: 700; }
.nav-item span { width: 24px; color: #5db7ff; font-size: 19px; }
.nav-item:hover, .nav-item.active { color: white; background: rgba(255,255,255,.09); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 12px; }
.protection-state { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.045); }
.protection-state i { width: 9px; height: 9px; border-radius: 50%; background: #32d583; box-shadow: 0 0 0 5px rgba(50,213,131,.13); }
.protection-state strong, .protection-state small { display: block; }
.protection-state strong { font-size: 12px; }
.protection-state small { margin-top: 2px; color: #91a9c5; font-size: 10px; }
.logout-button { padding: 10px; color: #b8c8dc; background: transparent; border: 1px solid rgba(255,255,255,.1); }
.workspace { min-width: 0; padding: 28px 34px 50px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.eyebrow { color: var(--blue); text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 850; }
.topbar h1 { margin: 4px 0 0; font-size: 31px; letter-spacing: -.04em; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 7px 11px 7px 7px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.user-chip > span { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 10px; color: white; font-weight: 850; background: var(--blue-dark); }
.user-chip strong, .user-chip small { display: block; }
.user-chip strong { font-size: 12px; }
.user-chip small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.view { display: none; }
.view.active-view { display: block; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.metric-card { min-height: 150px; display: grid; grid-template-columns: 1fr auto; align-content: space-between; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 5px 22px rgba(30,58,95,.05); }
.metric-card span, .metric-card small { color: var(--muted); }
.metric-card span { font-size: 12px; font-weight: 700; }
.metric-card strong { display: block; margin-top: 10px; font-size: 34px; letter-spacing: -.05em; }
.metric-card small { grid-column: 1 / -1; font-size: 11px; }
.metric-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; color: var(--blue); background: #eaf4ff; font-style: normal; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(300px,.7fr); gap: 16px; margin-top: 16px; }
.panel { border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 5px 22px rgba(30,58,95,.05); }
.chart-panel { padding: 20px; }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.panel-header h2 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.02em; }
.period-chip { padding: 7px 10px; border-radius: 999px; color: var(--blue-dark); background: #edf5ff; font-size: 11px; font-weight: 750; }
#trafficChart { display: block; width: 100%; height: 300px; margin-top: 17px; }
.top-list { padding: 12px 20px 20px; }
.top-list-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 13px 0; border-bottom: 1px solid #edf2f7; }
.top-list-row:last-child { border-bottom: 0; }
.top-list-row strong { font-size: 13px; }
.top-list-row small { color: var(--muted); }
.risk-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--orange); }
.section-actions, .filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.section-actions p { margin: 0; color: var(--muted); }
.site-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.site-card { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 5px 22px rgba(30,58,95,.05); }
.site-card-head { display: flex; justify-content: space-between; gap: 10px; }
.site-card h3 { margin: 0; font-size: 17px; }
.site-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.status-badge, .decision-badge { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.status-badge { color: #067647; background: #ecfdf3; }
.site-key { margin: 18px 0; padding: 12px; border-radius: 10px; background: #f2f6fb; color: #42536a; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.site-card-actions { display: flex; gap: 8px; }
.site-card-actions button { flex: 1; }
.filter-bar { justify-content: flex-start; }
.filter-bar select { width: auto; min-width: 180px; min-height: 40px; }
.table-panel { overflow: hidden; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 16px; border-bottom: 1px solid #edf2f7; text-align: left; white-space: nowrap; font-size: 12px; }
th { color: #65758b; background: #f8fafc; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
td { color: #34465d; }
.decision-badge.allow { color: #067647; background: #ecfdf3; }
.decision-badge.challenge { color: #b54708; background: #fff7e8; }
.decision-badge.block { color: #b42318; background: #fff1f0; }
.risk-meter { width: 72px; height: 6px; border-radius: 999px; background: #edf2f7; overflow: hidden; }
.risk-meter span { display: block; height: 100%; background: linear-gradient(90deg, #32d583, #fdb022, #f04438); }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 16px; }
.pagination span { color: var(--muted); font-size: 12px; }
.empty-state { padding: 28px; color: var(--muted); text-align: center; }
.modal { width: min(530px, calc(100% - 26px)); border: 0; border-radius: 18px; padding: 24px; color: var(--ink); box-shadow: 0 28px 90px rgba(10,35,70,.28); }
.modal::backdrop { background: rgba(4,18,38,.62); backdrop-filter: blur(4px); }
.wide-modal { width: min(760px, calc(100% - 26px)); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.modal-header h2 { margin: 4px 0 0; }
.icon-button { width: 35px; height: 35px; color: #52657d; background: #edf2f7; font-size: 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.modal p { color: var(--muted); line-height: 1.6; }
pre { max-height: 310px; overflow: auto; padding: 16px; border-radius: 12px; color: #d8e9ff; background: #08182f; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 1000; max-width: 380px; padding: 13px 16px; border-radius: 12px; color: white; background: #12233d; box-shadow: var(--shadow); font-size: 13px; }
@media (max-width: 1180px) { .metric-grid { grid-template-columns: repeat(2,1fr); } .site-grid { grid-template-columns: repeat(2,1fr); } .dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 850px) { .login-view { grid-template-columns: 1fr; } .login-art { min-height: 45vh; padding: 40px 25px; } .app-view { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; } .sidebar nav { grid-template-columns: repeat(2,1fr); } .sidebar-bottom { margin-top: 20px; } .workspace { padding: 24px 18px; } }
@media (max-width: 620px) { .login-art h1 { font-size: 44px; } .feature-grid, .metric-grid, .site-grid { grid-template-columns: 1fr; } .topbar, .section-actions, .filter-bar { align-items: stretch; flex-direction: column; } .user-chip { align-self: flex-start; } .filter-bar select { width: 100%; } .sidebar nav { grid-template-columns: 1fr; } }
.risk-fill.risk-0{width:0}.risk-fill.risk-10{width:10%}.risk-fill.risk-20{width:20%}.risk-fill.risk-30{width:30%}.risk-fill.risk-40{width:40%}.risk-fill.risk-50{width:50%}.risk-fill.risk-60{width:60%}.risk-fill.risk-70{width:70%}.risk-fill.risk-80{width:80%}.risk-fill.risk-90{width:90%}.risk-fill.risk-100{width:100%}