:root {
    --bg: #09111f;
    --surface: #101827;
    --surface2: #0c1422;
    --border: #22375f;
    --text: #e6efff;
    --muted: #9cb0d8;
    --accent: #5790ff;
    --ok: #14c97b;
    --warn: #e6a93c;
    --bad: #f05d6a;
}
body { margin: 0; background: linear-gradient(180deg, #081225 0%, #090f1e 100%); color: var(--text); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.app-shell { display: grid; grid-template-columns: 260px 1fr; gap: 14px; min-height: 100vh; }
/* When nav is removed (iframe mode), collapse to single column */
.premium-shell { grid-template-columns: 1fr; }
.card-grid { display: grid; gap: 12px; }

.premium-shell { padding: 12px; box-sizing: border-box; }
.siteops-nav {
    border: 1px solid rgba(95,149,255,.18);
    padding: 18px 14px;
    background: linear-gradient(180deg, rgba(8,14,28,.92), rgba(10,18,37,.86));
    position: sticky;
    top: 12px;
    height: calc(100vh - 24px);
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
    overflow: auto;
}
.siteops-nav-brand { font-size: 24px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.03em; }
.siteops-nav-subtitle { color: #9fb5e8; font-size: 12px; line-height: 1.45; margin-bottom: 14px; }
.ops-rail { border: 1px solid var(--border); border-radius: 10px; background: #101a33; padding: 10px; margin-bottom: 12px; }
.premium-rail { border-radius: 16px; padding: 14px; background: rgba(15, 26, 51, 0.92); }
.ops-rail-title { font-size: 12px; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.ops-rail-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-top: 6px; }
.siteops-subnav {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.siteops-subnav a,
.siteops-subnav .subnav-link {
    color: #cfe0ff;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(17,28,56,.56), rgba(12,20,40,.48));
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    text-align: left;
    font: inherit;
    cursor: pointer;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    line-height: 1.2;
}
.siteops-subnav a:hover,
.siteops-subnav .subnav-link:hover {
    border-color: rgba(95,149,255,.45);
    background: rgba(25,42,80,.74);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.15);
}
.siteops-subnav a.active,
.siteops-subnav .subnav-link.active {
    border-color: rgba(132,177,255,.7);
    background: rgba(35,73,143,.66);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(132,177,255,.18);
}
.dashboard-wrap { padding: 8px 4px 18px; }
.dashboard-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}
.dashboard-screen {
    display: none;
    min-width: 0;
    animation: dashboard-screen-in .18s ease-out;
}
.dashboard-screen.active { display: grid; gap: 12px; }
.dashboard-screen[hidden] { display: none !important; }
@keyframes dashboard-screen-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.premium-topbar { margin-top: 2px; }
.site-context { color: #d6e5ff; font-size: 12px; border: 1px solid rgba(95,149,255,.35); background: rgba(35,61,112,.22); width: fit-content; border-radius: 999px; padding: 4px 10px; }
.onboarding {
    border: 1px solid rgba(88, 122, 196, 0.36);
    background: linear-gradient(180deg, rgba(15, 25, 49, 0.96), rgba(11, 18, 35, 0.92));
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 16px 34px rgba(0,0,0,.18);
}
.onboarding.hidden { display: none; }
.onboarding-title { font-weight: 800; margin-bottom: 8px; font-size: 18px; letter-spacing: -.02em; }
.onboarding-steps { display: flex; gap: 8px; flex-wrap: wrap; color: #bff4d8; font-size: 12px; margin-bottom: 10px; }
.onboarding-steps span,
.onboarding-pill-row span {
    border: 1px solid rgba(95,149,255,.24);
    background: rgba(17,28,56,.52);
    color: #d6e5ff;
    padding: 6px 10px;
    border-radius: 999px;
}
.onboarding-premium {
    border-color: rgba(95,149,255,.42);
    background:
        radial-gradient(circle at top right, rgba(95,149,255,.13), transparent 36%),
        linear-gradient(180deg, rgba(14, 22, 44, 0.98), rgba(10, 16, 31, 0.95));
}
.onboarding-copy {
    color: #c7d7ff;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.onboarding-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.onboarding-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 14px;
    align-items: stretch;
}
.onboarding-hero,
.onboarding-form {
    border: 1px solid rgba(95,149,255,.18);
    border-radius: 14px;
    background: rgba(12, 20, 40, 0.72);
    padding: 16px;
}
.onboarding-hero h2 {
    margin: 10px 0 8px;
    font-size: clamp(24px, 2.8vw, 34px);
    letter-spacing: -.03em;
}
.onboarding-hero p {
    margin: 0;
    color: #b6c8ef;
    line-height: 1.5;
    max-width: 42ch;
}
.onboarding-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.onboarding-hero-note {
    margin-top: 14px;
    color: #dce8ff;
    font-size: 13px;
    line-height: 1.5;
    border-left: 3px solid rgba(63, 135, 255, 0.8);
    padding-left: 10px;
}
.onboarding-form {
    display: grid;
    gap: 10px;
    align-content: start;
}
.onboarding-form label {
    color: #d9e6ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.onboarding-form .input-group { margin-top: 0; }
.onboarding-form #onboardingUrlInput { min-height: 44px; }
.onboarding-summary {
    display: grid;
    gap: 8px;
    background: rgba(95,149,255,.08);
    border: 1px solid rgba(95,149,255,.18);
    border-radius: 12px;
    padding: 12px;
}
.onboarding-pages-wrap {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(95,149,255,.16);
    border-radius: 12px;
    background: rgba(10, 16, 31, 0.66);
    padding: 12px;
}
.onboarding-pages-wrap.hidden,
.onboarding-summary.hidden { display: none !important; }
.onboarding-pages-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.inline-status {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--muted);
}
.priority-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.card.priority { border-color: rgba(95,149,255,.45); box-shadow: inset 0 0 0 1px rgba(95,149,255,.12); }
.attention-first { margin-top: 2px; margin-bottom: 16px; }
.priority-sub { margin-top: 6px; color: #9fb6e4; font-size: 12px; }
.banner { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); margin-bottom: 12px; color: var(--muted); }
.banner.error { border-color: #7a2f38; color: #ffb8c0; }
.dashboard-topbar {
    display: grid;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}
.dashboard-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}
.toolbar-left {
    min-width: 0;
}
.toolbar-left h2 {
    margin: 0 0 6px;
    font-size: 26px;
    letter-spacing: -0.03em;
}
.toolbar-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.refresh-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    font-size: 12px;
    color: var(--muted);
}
.generated-at,
.refresh-label {
    color: var(--muted);
}
.overview-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.stat-card {
    border: 1px solid rgba(95,149,255,0.15);
    border-radius: 14px;
    background: rgba(15, 23, 41, 0.92);
    padding: 16px;
    min-height: 120px;
    display: grid;
    gap: 10px;
}
/* KPI sparkline + trend delta row (real backend series only) */
.kpi-spark-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: -2px 0 0;
    min-height: 26px;
}
.kpi-spark { display: block; opacity: .92; flex: none; }
.kpi-trend {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: .01em;
}
.kpi-trend.good { color: #4fd6a0; }
.kpi-trend.bad { color: #ff6b7a; }
.kpi-trend.flat { color: #7f97bd; }
.stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
}
.stat-value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
}
.stat-note {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}
.overview-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 360px);
    gap: 16px;
    align-items: start;
}
.overview-left { min-width: 0; }
.quick-actions-panel { justify-self: stretch; width: 100%; max-width: 100%; box-sizing: border-box; }
.overview-left {
    display: grid;
    gap: 16px;
}
.health-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.summary-card {
    border: 1px solid rgba(95,149,255,0.12);
    border-radius: 14px;
    background: rgba(15, 23, 41, 0.9);
    padding: 14px;
    display: grid;
    gap: 6px;
}
.summary-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
}
.summary-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}
.quick-actions-panel {
    border: 1px solid rgba(95,149,255,0.14);
    border-radius: 18px;
    background: rgba(12, 20, 37, 0.96);
    padding: 18px;
    width: 100%;
    box-shadow: 0 18px 35px rgba(0,0,0,0.18);
}

/* Keep quick-actions anchored in the right column on large screens */
@media (min-width: 1200px) {
    .quick-actions-panel {
        position: sticky;
        top: 88px;
        align-self: start;
        z-index: 2;
    }
    .overview-main-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(260px, 360px);
    }
}

/* Fullscreen: quick-actions stays in grid flow */
body.fullscreen-mode .quick-actions-panel {
    position: static;
    max-width: 100%;
    margin-left: 0;
    align-self: stretch;
}
body.fullscreen-mode .overview-main-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 360px);
    align-items: start;
}
body.fullscreen-mode .dashboard-main {
    max-width: 100%;
    padding: 0 8px;
}

/* Constrain main content for very wide monitors so side panels don't float */
.dashboard-main {
    max-width: 1320px;
    margin: 0 auto;
}
.quick-actions-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.quick-actions-title {
    font-size: 18px;
    font-weight: 700;
    color: #f4f8ff;
}
.quick-actions-subtitle {
    font-size: 13px;
    color: var(--muted);
}
.quick-actions-row,
.secondary-actions-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.quick-actions-list {
    display: grid;
    gap: 10px;
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(17,28,56,.56), rgba(12,20,40,.48));
    border: 1px solid rgba(95,149,255,.08);
    text-align: left;
    color: #e8f4ff;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
}

.quick-action-item:hover:not(:disabled) {
    background: rgba(25,42,80,.74);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,.15);
}

.quick-action-item:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.qa-icon { width: 44px; height: 44px; border-radius: 8px; display:flex; align-items:center; justify-content:center; background: rgba(12,18,34,.6); border: 1px solid rgba(95,149,255,.06); }
.qa-icon svg { width: 20px; height: 20px; color: #cfe6ff; opacity: 0.95 }
.qa-copy { display:flex; flex-direction:column; align-items:flex-start; flex:1; min-width:0; }
.qa-title { font-weight:700; color: #f3f8ff; }
.qa-sub { font-size:12px; color: var(--muted); margin-top:2px; }
.qa-chevron { color: rgba(200,220,255,.78); font-size:22px; margin-left:8px; }
.status-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.section-summary {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 10px;
}
.section-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.panel-note {
    color: var(--muted);
    font-size: 13px;
    margin-top: 14px;
}
@media (max-width: 1080px) {
    .quick-actions-panel {
        position: static !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    .quick-action-item {
        padding: 10px 12px;
    }
    .qa-icon {
        width: 38px;
        height: 38px;
    }
    .qa-icon svg {
        width: 18px;
        height: 18px;
    }
    .qa-title {
        font-size: 13px;
    }
    .qa-sub {
        font-size: 11px;
    }
    .donut-ring {
        width: clamp(100px, 18vw, 160px);
        height: clamp(100px, 18vw, 160px);
    }
    .donut-core {
        inset: 12px;
    }
    .donut-value {
        font-size: 28px;
    }
    .donut-label {
        font-size: 11px;
    }
}
/* Narrow widths (e.g. AI sidebar open): collapse the fixed 260px nav into a
   compact top strip so the dashboard content uses the full remaining width
   instead of getting cramped and leaving gaps. */
@media (max-width: 1000px) {
    .app-shell { grid-template-columns: 1fr; }
    .siteops-nav {
        position: static;
        height: auto;
        padding: 12px 14px;
        border-radius: 16px;
    }
    .siteops-subnav {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}
@media (max-width: 960px) {
    .dashboard-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .overview-main-grid {
        grid-template-columns: 1fr;
    }
    .quick-actions-panel {
        padding: 12px;
        position: static !important;
    }
    .quick-action-item {
        padding: 10px 12px;
    }
    .qa-icon {
        width: 36px;
        height: 36px;
    }
    .donut-ring {
        width: clamp(100px, 20vw, 160px);
        height: clamp(100px, 20vw, 160px);
    }
}
@media (max-width: 720px) {
    .dashboard-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .overview-main-grid {
        grid-template-columns: 1fr;
    }
    .quick-actions-panel {
        padding: 10px;
        position: static !important;
    }
    .quick-action-item {
        padding: 10px 12px;
    }
    .qa-icon {
        width: 36px;
        height: 36px;
    }
    .donut-ring {
        width: clamp(90px, 20vw, 140px);
        height: clamp(90px, 20vw, 140px);
    }
    .donut-core {
        inset: 10px;
    }
    .donut-value {
        font-size: 24px;
    }
}
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(95,149,255,0.2);
    background: linear-gradient(180deg, rgba(23,39,74,0.96), rgba(17,27,52,0.96));
    color: #edf4ff;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.action-btn.secondary {
    background: linear-gradient(180deg, rgba(38,72,132,0.96), rgba(18,28,56,0.96));
    color: #e7f1ff;
}
.action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(0,0,0,0.18);
}
.action-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
@media (max-width: 1080px) {
    .dashboard-topbar {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .dashboard-topbar {
        grid-template-columns: 1fr;
    }
}
.topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 4px; }
.topbar-left { display: grid; gap: 8px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-filters { display: flex; gap: 8px; flex-wrap: wrap; }
h2,h3 { margin: 0; }
.sub { color: var(--muted); margin: 8px 0 12px; font-size: 13px; }
.guardrail-note {
    color: #c7d7ff;
    border: 1px solid rgba(88, 123, 196, 0.35);
    background: rgba(40, 73, 138, 0.18);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.45;
}
.actions { display: flex; gap: 8px; }
.search-input {
    min-width: 250px;
    border-radius: 8px;
    border: 1px solid #364a86;
    background: #0d1428;
    color: var(--text);
    padding: 7px 10px;
}
.range-select {
    border-radius: 8px;
    border: 1px solid #364a86;
    background: #0d1428;
    color: var(--text);
    padding: 7px 10px;
}
.hidden { display: none !important; }
.range-check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.icon-btn {
    border: 1px solid #2d4379;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    background: #111b36;
    color: var(--muted);
    cursor: pointer;
}
.btn { border: none; border-radius: 8px; padding: 8px 12px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.btn.secondary { background: #253965; }
.btn.danger { background: #dc2626; }
.btn.primary-cta {
    background: linear-gradient(180deg, #3f87ff 0%, #2c6de0 100%);
    box-shadow: 0 0 0 1px rgba(88, 139, 255, 0.45), 0 8px 20px rgba(25, 76, 194, 0.28);
}
.btn.ghost {
    background: transparent;
    border: 1px solid rgba(95,149,255,.28);
    color: #d7e6ff;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; margin-bottom: 12px; }
.card { border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(180deg,var(--surface),var(--surface2)); padding: 8px 10px; min-height: 92px; }
.k { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.v { font-size: 24px; font-weight: 700; margin-top: 4px; }
.trend-chip {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}
.trend-chip.up { color: var(--ok); }
.trend-chip.warn { color: var(--warn); }
.trend-chip.down { color: var(--bad); }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel-head-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.health-panel { min-height: 250px; }
.donut-layout { display: flex; align-items: center; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.uptime-layout { justify-content: flex-start; }
.donut-wrap { display: flex; align-items: center; justify-content: center; min-width: 160px; max-width: 220px; flex: 0 1 auto; }
.donut-ring {
    --ring: conic-gradient(var(--ok) 0deg 360deg);
    width: clamp(120px, 22vw, 180px);
    height: clamp(120px, 22vw, 180px);
    border-radius: 50%;
    background: var(--ring);
    position: relative;
    box-shadow: 0 0 0 1px rgba(51, 107, 206, 0.35), 0 0 28px rgba(20, 201, 123, 0.1) inset;
    transition: background 800ms ease-out;
}
.donut-core {
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at top, #162650, #0e1732 58%, #0b1227);
    border: 1px solid rgba(53, 92, 166, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.donut-value { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; }
.donut-label { color: var(--muted); font-size: 13px; margin-top: 2px; }
.donut-legend { display: grid; gap: 10px; min-width: 220px; }
.skeleton {
    display: inline-block;
    width: 100%;
    min-height: 1em;
    background: linear-gradient(90deg, rgba(41, 57, 97, 0.9), rgba(62, 84, 135, 0.35), rgba(41, 57, 97, 0.9));
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 6px;
    color: transparent;
}
.skeleton.short { width: 42%; }
.skeleton-title { width: 55%; height: 18px; margin-right: 10px; }
.skeleton-badge { width: 18%; height: 18px; }
.skeleton-line { width: 100%; height: 12px; margin-top: 8px; }
.skeleton-line.short { width: 65%; }
.skeleton-card {
    background: linear-gradient(90deg, rgba(41, 57, 97, 0.9), rgba(62, 84, 135, 0.35), rgba(41, 57, 97, 0.9));
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 14px;
    min-height: 120px;
}
.skeleton-value {
    height: 36px;
    width: 60%;
    background: linear-gradient(90deg, rgba(41, 57, 97, 0.9), rgba(62, 84, 135, 0.35), rgba(41, 57, 97, 0.9));
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 8px;
    margin: 8px 0;
}
.skeleton-label {
    height: 12px;
    width: 45%;
    background: linear-gradient(90deg, rgba(41, 57, 97, 0.9), rgba(62, 84, 135, 0.35), rgba(41, 57, 97, 0.9));
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 6px;
}
.skeleton-chart {
    height: 160px;
    background: linear-gradient(90deg, rgba(41, 57, 97, 0.9), rgba(62, 84, 135, 0.35), rgba(41, 57, 97, 0.9));
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 14px;
}
.skeleton-list-item {
    height: 64px;
    background: linear-gradient(90deg, rgba(41, 57, 97, 0.9), rgba(62, 84, 135, 0.35), rgba(41, 57, 97, 0.9));
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 10px;
    margin-bottom: 8px;
}
.item.skeleton-item {
    border-color: rgba(43, 57, 95, 0.8);
    background: rgba(18, 28, 48, 0.85);
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.overview-trend-strip {
    border: 1px solid rgba(95,149,255,0.14);
    border-radius: 14px;
    background: rgba(12, 18, 34, 0.92);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
.trend-strip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.trend-strip-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 700;
}
.trend-strip-summary {
    font-size: 12px;
    color: var(--muted);
}
.trend-strip {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 32px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.trend-dot {
    width: 6px;
    border-radius: 2px;
    min-height: 6px;
    flex: 1 1 auto;
    max-width: 12px;
    transition: all 160ms ease;
}
.trend-dot.ok {
    background: var(--ok);
    box-shadow: 0 0 6px rgba(20, 201, 123, 0.35);
}
.trend-dot.warn {
    background: var(--warn);
    box-shadow: 0 0 6px rgba(230, 169, 60, 0.3);
}
.trend-dot.bad {
    background: var(--bad);
    box-shadow: 0 0 6px rgba(240, 93, 106, 0.3);
}
.trend-dot.muted {
    background: #6d84b4;
}
.incident-tabs {
    display: flex;
    gap: 8px;
}
.incident-tab {
    border: 1px solid rgba(95,149,255,0.35);
    border-radius: 999px;
    background: #122349;
    color: #d9e7ff;
    font-size: 12px;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 160ms ease;
}
.incident-tab:hover {
    background: #1a305a;
    border-color: rgba(132,177,255,.5);
}
.incident-tab.active {
    background: #23498f;
    border-color: rgba(132,177,255,.7);
    color: #fff;
}
.tab-count {
    margin-left: 4px;
    opacity: 0.8;
    font-weight: 700;
}
.incidents-tab-content {
    position: relative;
}
.incidents-panel {
    display: none;
}
.incidents-panel.active {
    display: block;
}
.empty-state {
    padding: 32px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}
.empty-state-panel {
    padding: 40px 20px;
    text-align: center;
}
.alert-delivery-strip {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 48px;
    margin-top: 12px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(10, 15, 28, 0.6);
    border: 1px solid rgba(95,149,255,0.1);
}
.alert-delivery-bar {
    flex: 1 1 auto;
    min-height: 4px;
    max-height: 48px;
    border-radius: 3px;
    transition: all 160ms ease;
}
.alert-delivery-bar.ok {
    background: rgba(20,201,123,0.7);
}
.alert-delivery-bar.bad {
    background: rgba(240,93,106,0.7);
}
.alert-delivery-bar.muted {
    background: rgba(109,132,180,0.5);
}
.alerts-timeline {
    display: grid;
    gap: 0;
}
.alert-timeline-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(95,149,255,0.08);
}
.alert-timeline-item:last-child {
    border-bottom: none;
}
.alert-timeline-time {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.alert-timeline-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.alert-timeline-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.alert-timeline-meta {
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.alert-timeline-status {
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .alert-timeline-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .alert-timeline-time {
        font-size: 10px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .skeleton-card,
    .skeleton-value,
    .skeleton-label,
    .skeleton-chart,
    .skeleton-list-item {
        animation: none;
        background: rgba(41, 57, 97, 0.5);
    }
}
body.dashboard-loading .card,
body.dashboard-loading .panel,
body.dashboard-loading .banner,
body.dashboard-loading .search-input,
body.dashboard-loading .range-select,
body.dashboard-loading .icon-btn,
body.dashboard-loading .btn.secondary {
    background: #0d1328 !important;
}
body.dashboard-loading .v,
body.dashboard-loading .donut-value,
body.dashboard-loading .donut-label,
body.dashboard-loading .trend-chip,
body.dashboard-loading .meta,
body.dashboard-loading .meta-title,
body.dashboard-loading .legend-value,
body.dashboard-loading .legend-label,
body.dashboard-loading .id-line {
    color: transparent !important;
    background: rgba(52, 72, 112, 0.55);
}
body.dashboard-loading .donut-ring {
    background: radial-gradient(circle at center, rgba(48, 64, 104, 0.8) 0%, rgba(18, 29, 58, 0.8) 100%);
    box-shadow: none;
}
.legend-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.legend-label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--ok); box-shadow: 0 0 12px rgba(20, 201, 123, 0.45); }
.dot.warn { background: var(--warn); box-shadow: 0 0 12px rgba(230, 169, 60, 0.35); }
.dot.bad { background: var(--bad); box-shadow: 0 0 12px rgba(240, 93, 106, 0.4); }
.legend-value { color: var(--text); font-weight: 600; }
.uptime-meta { display: grid; gap: 10px; align-content: center; }
.meta-title { color: var(--muted); font-size: 13px; }
.meta-delta { font-size: 18px; font-weight: 700; color: var(--ok); }
.health-timeline { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.health-dot { width: 9px; height: 9px; border-radius: 999px; border: 1px solid rgba(185,210,255,.25); background: #6d84b4; }
.health-dot.ok { background: var(--ok); }
.health-dot.warn { background: var(--warn); }
.health-dot.bad { background: var(--bad); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 12px; }
.refined-grid { align-items: start; }
.panel { border: 1px solid rgba(74, 105, 168, 0.18); border-radius: 14px; background: rgba(12, 18, 34, 0.92); padding: 14px; min-height: 155px; box-shadow: 0 10px 22px rgba(0,0,0,0.14); }
.panel.full { grid-column: 1 / -1; }
.panel-hero { min-height: 320px; }
.incidents-hero { box-shadow: inset 0 0 0 1px rgba(240,93,106,0.12), 0 10px 28px rgba(0,0,0,0.16); }
.panel-secondary { min-height: 230px; }

.setup-panel { border-style: dashed; border-color: rgba(95,149,255,.34); }
.setup-panel .topbar-filters .btn.primary-cta,
.topbar-right .btn.primary-cta { min-width: 150px; }
.setup-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.setup-summary-card {
    border: 1px solid rgba(95,149,255,.22);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(14, 23, 46, 0.92);
}
.setup-summary-label {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
}
.setup-summary-value {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}
.list { margin-top: 7px; display: grid; gap: 6px; }
.activity-tabs { display: flex; gap: 8px; margin-top: 8px; }
.activity-tab {
    border: 1px solid rgba(95,149,255,.35);
    border-radius: 999px;
    background: #122349;
    color: #d9e7ff;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
}
.activity-tab.active {
    background: #23498f;
    border-color: rgba(132,177,255,.6);
    color: #fff;
}
.item { border: 1px solid rgba(74, 105, 168, 0.18); border-radius: 10px; background: rgba(13, 20, 37, 0.94); padding: 12px 14px; position: relative; transition: transform .16s ease, box-shadow .16s ease; }
.item:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(0,0,0,0.14); }
.item.critical { border-color: rgba(240,93,106,0.75); box-shadow: inset 4px 0 0 var(--bad), 0 0 0 1px rgba(240,93,106,0.18); }
.item.warning { border-color: rgba(230,169,60,0.75); box-shadow: inset 4px 0 0 var(--warn), 0 0 0 1px rgba(230,169,60,0.18); }
.item.healthy { border-color: rgba(20,201,123,0.75); box-shadow: inset 4px 0 0 var(--ok), 0 0 0 1px rgba(20,201,123,0.18); }
.row { display: flex; justify-content: space-between; gap: 8px; }
.title { font-size: 17px; font-weight: 700; line-height: 1.15; }
.id-line { color: #7f96cb; font-size: 11px; margin-top: 2px; }
.meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.site-chip { border: 1px solid rgba(95,149,255,.35); border-radius: 999px; padding: 1px 8px; color: #d9e8ff; background: rgba(29,50,95,.35); }
.actions-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.actions-row.ai-actions { margin-top: 4px; padding-top: 4px; border-top: 1px dashed rgba(95,149,255,.28); }
.incident-evidence {
    margin-top: 8px;
    border: 1px solid rgba(95,149,255,.22);
    border-radius: 8px;
    padding: 6px;
    background: #0b1430;
}
.incident-evidence img {
    width: 100%;
    max-height: 180px;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(95,149,255,.2);
    display: block;
    cursor: zoom-in;
}
.incident-evidence.compare {
    display: grid;
    gap: 8px;
}
.incident-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.incident-evidence-pane {
    border: 1px solid rgba(95,149,255,.2);
    border-radius: 8px;
    background: #0b1430;
    padding: 6px;
}
.incident-evidence-label {
    font-size: 11px;
    margin-bottom: 6px;
    color: #d7e6ff;
}
.incident-evidence-label.ok {
    color: #9cffd0;
}
.incident-evidence-label.danger {
    color: #ffb1b9;
}
.incident-evidence-empty {
    border: 1px dashed rgba(95,149,255,.3);
    border-radius: 7px;
    padding: 10px 8px;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}
.evidence-toggle-btn {
    border: 1px solid rgba(95,149,255,.35);
    border-radius: 999px;
    background: #112549;
    color: #d8e6ff;
    font-size: 11px;
    padding: 4px 10px;
    cursor: pointer;
    justify-self: start;
}
.incident-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(95,149,255,.14);
}
.incident-card .act-btn {
    font-size: 11px;
    padding: 5px 8px;
}
.incident-evidence.expanded img {
    max-height: none;
    object-fit: contain;
}
.evidence-modal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.evidence-modal-tab {
    border: 1px solid rgba(95,149,255,.35);
    border-radius: 999px;
    background: #112549;
    color: #d8e6ff;
    font-size: 12px;
    padding: 5px 12px;
    cursor: pointer;
}
.evidence-modal-tab.active {
    background: #23498f;
    border-color: rgba(132,177,255,.65);
    color: #fff;
}
.evidence-tab-panel { display: none; }
.evidence-tab-panel.active { display: block; }
.evidence-urlbar {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: #cfe2ff;
    background: rgba(17,37,73,.5);
    border: 1px solid rgba(95,149,255,.28);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}
.evidence-shot {
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(95,149,255,.25);
    background: #090f20;
    cursor: zoom-in;
}
.evidence-meta-grid {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 8px 12px;
    font-size: 12px;
}
.evidence-meta-k { color: #9bb0df; }
.evidence-meta-v { color: #e8f0ff; overflow-wrap: anywhere; }
.img-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: rgba(4, 9, 18, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.img-lightbox.hidden {
    display: none;
}
.img-lightbox-inner {
    position: relative;
    width: min(96vw, 1400px);
    max-height: 94vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scanmap-modal-inner {
    width: min(96vw, 1200px);
    max-height: 92vh;
}
.scanmap-modal-card {
    width: 100%;
    max-height: 92vh;
    overflow: auto;
}
.scanmap-tree-list {
    max-height: 70vh;
    overflow: auto;
}
.tree-item {
    display: grid;
    gap: 8px;
    border: 1px solid #2b3f6e;
    border-radius: 7px;
    padding: 6px 8px;
    background: #0f1830;
}
.tree-page-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tree-item-url {
    font-size: 12px;
    color: #d9e3ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tree-actions {
    margin-left: 24px;
    display: grid;
    gap: 5px;
}
.tree-action-row {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #304572;
    border-radius: 6px;
    background: #121f3b;
    padding: 4px 6px;
}
.tree-action-text {
    font-size: 12px;
    color: #d8e5ff;
    flex: 1;
}
.tree-action-severity {
    border-radius: 5px;
    border: 1px solid #304572;
    background: #0f1830;
    color: #e2e8f0;
    padding: 3px 6px;
    font-size: 11px;
    min-width: 100px;
    appearance: none;
}
.img-lightbox-img {
    max-width: 100%;
    max-height: 94vh;
    border-radius: 10px;
    border: 1px solid rgba(95,149,255,.35);
    background: #0b1326;
    box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.img-lightbox-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(148, 176, 232, 0.45);
    background: #12264d;
    color: #e7f0ff;
    font-weight: 700;
    cursor: pointer;
}
.act-btn {
    border: 1px solid #2e467e;
    border-radius: 7px;
    background: #101a35;
    color: #c0d2ff;
    font-size: 11px;
    padding: 4px 7px;
    cursor: pointer;
}
.item.critical .act-btn { font-size: 12px; padding: 6px 9px; border-color: rgba(255,164,176,.5); }
.item.warning .act-btn { font-size: 12px; padding: 6px 9px; border-color: rgba(255,219,145,.45); }
.item.healthy .act-btn { font-size: 12px; padding: 6px 9px; border-color: rgba(149,255,206,.38); }
.badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.ok { color: var(--ok); border: 1px solid rgba(20,201,123,.35); background: rgba(20,201,123,.12); }
.badge.warn { color: var(--warn); border: 1px solid rgba(230,169,60,.35); background: rgba(230,169,60,.12); }
.badge.bad { color: var(--bad); border: 1px solid rgba(240,93,106,.35); background: rgba(240,93,106,.12); }
.badge.muted { color: #95a7cf; border: 1px solid rgba(146,166,209,.25); background: rgba(124,140,180,.1); }

/* Beta honesty flags: surfaced (not hidden) states from the scanner backend so
   a "looks healthy" page is never confused with a "confirmed verified" one. */
.scan-page-flags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.scan-flag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}
.scan-flag.warn { color: var(--warn, #f5b75c); border: 1px solid rgba(230,169,60,.4); background: rgba(230,169,60,.12); }
.scan-flag.muted { color: #95a7cf; border: 1px solid rgba(146,166,209,.28); background: rgba(124,140,180,.1); }
.scan-flag-note { font-size: 11px; color: #8092b5; opacity: .92; }
.inc-row .badge.warn[title] { cursor: help; }

/* Beta known-limitations disclosure (dashboard + quick-scan) */
.beta-limits{margin-top:14px;border:1px solid rgba(146,166,209,.25);border-radius:12px;padding:10px 14px;background:rgba(124,140,180,.06);font-size:12.5px;line-height:1.5;color:#c4d2ec}
.beta-limits summary{cursor:pointer;font-weight:700;color:#9fb3d9;letter-spacing:.04em;text-transform:uppercase;font-size:11px}
.beta-limits ul{margin:8px 0 2px;padding-left:18px}
.beta-limits li{margin-bottom:6px}
.baseline-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.baseline-chip.ok { color: var(--ok); border: 1px solid rgba(20,201,123,.35); background: rgba(20,201,123,.12); }
.baseline-chip.warn { color: var(--warn); border: 1px solid rgba(230,169,60,.35); background: rgba(230,169,60,.12); }
.baseline-chip.bad { color: var(--bad); border: 1px solid rgba(240,93,106,.35); background: rgba(240,93,106,.12); }
.baseline-chip.muted { color: #95a7cf; border: 1px solid rgba(146,166,209,.25); background: rgba(124,140,180,.1); }
.needs-attention {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 1px solid rgba(240,93,106,.45);
    color: #ff9aa4;
    border-radius: 999px;
    padding: 3px 8px;
}
.resolved-panel {
    border-color: rgba(20, 201, 123, 0.35);
    box-shadow: inset 0 0 0 1px rgba(20, 201, 123, 0.15);
}
.resolved-chip {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 1px solid rgba(20, 201, 123, 0.45);
    color: #89efbe;
    border-radius: 999px;
    padding: 3px 8px;
}
.resolved-item {
    border-color: rgba(20, 201, 123, 0.4);
    box-shadow: inset 2px 0 0 var(--ok);
}
.list-toggle-btn {
    border: 1px solid rgba(95,149,255,.35);
    border-radius: 999px;
    background: #142446;
    color: #d2e3ff;
    font-size: 11px;
    padding: 4px 10px;
    cursor: pointer;
}
.btn-inline-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-spinner {
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.list-toggle-btn.hidden {
    display: none;
}
.list-more-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    flex-wrap: wrap;
}
.list-inline-toggle-btn {
    border: 1px solid rgba(95,149,255,.35);
    border-radius: 999px;
    background: #142446;
    color: #d2e3ff;
    font-size: 11px;
    padding: 6px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.list-inline-toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
.list-inline-toggle-btn.secondary {
    background: #0f1b34;
    color: #b8c9ee;
}
.list-inline-toggle-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.status { margin-top: 10px; color: var(--muted); font-size: 12px; }
.status.inline-status { margin-top: 0; font-size: 11px; }
.status.ok { color: var(--ok); }
.status.err { color: var(--bad); }
@media (max-width: 1200px) {
    .app-shell { grid-template-columns: 1fr; }
    .siteops-nav {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid rgba(95,149,255,.2);
    }
    .siteops-subnav { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
    .donut-layout { flex-direction: column; align-items: flex-start; gap: 14px; }
    .donut-wrap { min-width: 0; }
    .topbar { flex-direction: column; align-items: flex-start; }
    .topbar-right { width: 100%; justify-content: flex-end; }
    .onboarding-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .siteops-subnav { grid-template-columns: 1fr 1fr; }
    .priority-cards { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .health-grid { grid-template-columns: 1fr; }
    .search-input { min-width: 0; width: 100%; }
    .topbar-filters { width: 100%; }
    .topbar-right { justify-content: flex-start; flex-wrap: wrap; }
    .qa-panel {
        right: 10px;
        left: 10px;
        width: auto;
        top: 74px;
        max-height: calc(100vh - 90px);
    }
    .onboarding-pill-row { gap: 6px; }
    .siteops-subnav a,
    .siteops-subnav .subnav-link { padding: 11px 12px; min-height: 44px; }
}
#toastContainer { position:fixed;right:16px;bottom:16px;z-index:9999;pointer-events:none;display:grid;gap:8px; }
.toast { pointer-events:auto;border:1px solid rgba(95,149,255,.28);border-radius:10px;background:rgba(11,18,34,.96);padding:10px 12px;color:#e6f0ff;font-size:12px;box-shadow:0 14px 34px rgba(0,0,0,.32);animation:toast-in .2s ease-out;min-width:220px;max-width:320px;}
.toast-ok { border-color: rgba(20,201,123,.45); }
.toast-warn { border-color: rgba(230,169,60,.45); }
.toast-err { border-color: rgba(240,93,106,.45); }
.toast-action-btn {
    margin-top: 8px;
    appearance: none;
    background: rgba(95,149,255,.14);
    border: 1px solid rgba(95,149,255,.35);
    color: #a8d4ff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms ease;
}
.toast-action-btn:hover {
    background: rgba(95,149,255,.28);
    border-color: rgba(95,149,255,.6);
}
@keyframes toast-in { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }

/* Premium Investigate Modal Overlay - modularized component */
.siteops-investigate-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 9, 18, 0.72);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: investigate-fade-in 0.22s ease-out;
}
.siteops-investigate-backdrop.closing {
  animation: investigate-fade-out 0.18s ease-in forwards;
}
@keyframes investigate-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes investigate-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes investigate-scale-in {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.siteops-investigate-modal {
  background: linear-gradient(180deg, #111c38, #0b1328);
  border: 1px solid rgba(95, 149, 255, 0.28);
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(95, 149, 255, 0.12) inset;
  width: min(560px, calc(100vw - 24px));
  max-height: min(78vh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: investigate-scale-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.siteops-investigate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(95, 149, 255, 0.2);
  gap: 12px;
}
.siteops-investigate-header-title {
  font-size: 14px;
  font-weight: 600;
  color: #e6f0ff;
  letter-spacing: 0.01em;
}
.siteops-investigate-header-sub {
  font-size: 11px;
  color: #8aa3d6;
  font-weight: 400;
}
.siteops-investigate-close {
  appearance: none;
  background: transparent;
  color: #9fb5e8;
  border: 1px solid rgba(95, 149, 255, 0.2);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all 0.18s ease;
}
.siteops-investigate-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6f0ff;
  border-color: rgba(95, 149, 255, 0.4);
}
.siteops-investigate-meta {
  padding: 8px 18px;
  font-size: 11.5px;
  color: #8aa3d6;
  border-bottom: 1px solid rgba(95, 149, 255, 0.12);
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.siteops-investigate-meta.is-ok { color: #14c97b; }
.siteops-investigate-meta.is-warn { color: #e6a93c; }
.siteops-investigate-meta.is-err { color: #f05d6a; }
.siteops-investigate-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  min-height: 220px;
  max-height: 52vh;
  scroll-behavior: smooth;
}
.siteops-investigate-messages:empty::before {
  content: "Ask anything about the current dashboard view. AI will see exactly what you see.";
  color: #8aa3d6;
  font-size: 12px;
  justify-self: center;
  text-align: center;
  opacity: 0.7;
  padding: 24px 8px;
}
.siteops-investigate-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 92%;
  animation: investigate-scale-in 0.22s ease-out;
}
.siteops-investigate-msg.user {
  justify-self: end;
  flex-direction: row-reverse;
}
.siteops-investigate-msg.assistant {
  justify-self: start;
}
.siteops-investigate-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1px solid rgba(95, 149, 255, 0.35);
  background: #0d1a34;
  color: #d9e7ff;
}
.siteops-investigate-msg.user .siteops-investigate-avatar {
  background: #12264d;
  color: #e5f1ff;
  border-color: rgba(104, 163, 255, 0.45);
}
.siteops-investigate-bubble {
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid rgba(95, 149, 255, 0.22);
}
.siteops-investigate-msg.user .siteops-investigate-bubble {
  background: linear-gradient(180deg, #173061, #102041);
  color: #e6f0ff;
  border-color: rgba(104, 163, 255, 0.45);
  border-bottom-right-radius: 4px;
}
.siteops-investigate-msg.assistant .siteops-investigate-bubble {
  background: linear-gradient(180deg, #11233f, #0d1a34);
  color: #c8f5dd;
  border-color: rgba(71, 175, 126, 0.35);
  border-bottom-left-radius: 4px;
}
.siteops-investigate-typing {
  display: inline-flex;
  gap: 3px;
  padding: 4px 0;
}
.siteops-investigate-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9fd1ff;
  animation: investigate-blink 1.2s infinite;
}
.siteops-investigate-typing span:nth-child(2) { animation-delay: 0.2s; }
.siteops-investigate-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes investigate-blink {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}
.siteops-investigate-footer {
  border-top: 1px solid rgba(95, 149, 255, 0.2);
  padding: 10px 14px;
  display: grid;
  gap: 8px;
}
.siteops-investigate-input-wrap {
  display: grid;
  gap: 6px;
}
.siteops-investigate-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #364a86;
  background: #0d1428;
  color: #e6f0ff;
  padding: 9px 11px;
  font-size: 12.5px;
  resize: vertical;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  font-family: inherit;
  line-height: 1.45;
}
.siteops-investigate-input:focus {
  border-color: rgba(95, 149, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(95, 149, 255, 0.12);
}
.siteops-investigate-input::placeholder {
  color: #5a7ab5;
}
.siteops-investigate-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}
.siteops-investigate-actions .quota {
  margin-right: auto;
  font-size: 11px;
  color: #8aa3d6;
}
.siteops-investigate-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  color: #e6f0ff;
  background: #132350;
  border-color: rgba(95, 149, 255, 0.35);
}
.siteops-investigate-btn:hover:not(:disabled) {
  background: #1b2d5a;
  border-color: rgba(95, 149, 255, 0.55);
}
.siteops-investigate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.siteops-investigate-btn.primary {
  background: linear-gradient(180deg, #1b3d8a, #132350);
  border-color: rgba(95, 149, 255, 0.55);
}
.siteops-investigate-btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #244faa, #1b3d8a);
}
.siteops-investigate-screenshot-preview {
  padding: 8px 16px 0;
  display: none;
}
.siteops-investigate-screenshot-preview.has-shot {
  display: block;
}
.siteops-investigate-screenshot-preview img {
  width: 100%;
  max-height: 110px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(95, 149, 255, 0.2);
  opacity: 0.85;
}
@media (max-width: 900px) {
  .siteops-investigate-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 12px;
  }
  .siteops-investigate-messages {
    max-height: 40vh;
  }
}

/* ── Standalone screen pages (incidents, alerts, sites, journeys) ── */
.screen-page {
    padding: 28px 32px;
    max-width: 1100px;
    margin: 0 auto;
}
.screen-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.screen-page-header h2 {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.screen-page-sub {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}
.screen-page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.screen-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    min-width: 64px;
}
.screen-stat.warn .screen-stat-val { color: var(--warn); }
.screen-stat-val { font-size: 22px; font-weight: 700; line-height: 1; }
.screen-stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }

/* ── Incident tab bar ──────────────────────────────────────────── */
.inc-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 16px;
}
.inc-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.inc-tab:hover { color: var(--ok); }
.inc-tab.active { color: var(--ok); border-bottom-color: var(--ok); }
.inc-tab-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0,212,170,0.12);
    border: 1px solid rgba(0,212,170,0.2);
    color: var(--ok);
    font-size: 11px;
    font-weight: 700;
}

.incidents-panel { display: none; }
.incidents-panel.active { display: block; }

/* ── Compact incident rows ─────────────────────────────────────── */
.inc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.inc-list .empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.inc-row {
    display: grid;
    grid-template-columns: 3px 1fr auto;
    align-items: center;
    gap: 0 14px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.055);
    border-radius: 10px;
    padding: 11px 14px 11px 0;
    transition: background 140ms ease, border-color 140ms ease;
    overflow: hidden;
}
.inc-row:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}

.inc-row-bar {
    width: 3px;
    align-self: stretch;
    border-radius: 3px 0 0 3px;
    background: var(--muted);
    flex-shrink: 0;
}
.inc-row.critical .inc-row-bar,
.inc-row-bar.critical { background: var(--bad, #ff6b7a); }
.inc-row.warning  .inc-row-bar,
.inc-row-bar.warning  { background: var(--warn, #f5b75c); }
.inc-row.healthy  .inc-row-bar,
.inc-row-bar.healthy  { background: var(--ok, #00d4aa); }

.inc-row-body { min-width: 0; }
.inc-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}
.inc-row-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inc-row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--muted);
    flex-wrap: wrap;
}
.inc-row-time { white-space: nowrap; }
.inc-row-url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
    opacity: 0.65;
    font-size: 11px;
}
.inc-row-context {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.inc-flag {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    line-height: 18px;
}
.inc-flag.rev {
    color: #fca5a5;
    background: rgba(240,93,106,.14);
    border: 1px solid rgba(240,93,106,.3);
}
.inc-flag.rec {
    color: #fde68a;
    background: rgba(230,169,60,.14);
    border: 1px solid rgba(230,169,60,.3);
}
.inc-row-cause {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 17px;
    flex: 1 1 100%;
    margin-top: 2px;
}

.inc-row-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
    padding-right: 2px;
}
.act-btn {
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
}
.act-btn:hover:not(:disabled) {
    border-color: rgba(0,212,170,0.3);
    background: rgba(0,212,170,0.06);
    color: var(--ok);
}
.act-btn.act-btn-resolve { border-color: rgba(255,107,122,0.2); color: var(--bad, #ff6b7a); }
.act-btn.act-btn-resolve:hover:not(:disabled) { background: rgba(255,107,122,0.08); border-color: rgba(255,107,122,0.4); }
.act-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Alerts two-column layout ──────────────────────────────────── */
.alerts-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 900px) { .alerts-two-col { grid-template-columns: 1fr; } }

.alerts-col {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.alerts-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.alerts-col-header h3 { margin: 0; font-size: 14px; font-weight: 700; }

.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 520px;
    overflow-y: auto;
}
.alerts-list .empty-state {
    padding: 24px 12px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

/* Alert timeline rows */
.alert-timeline-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.015);
    transition: background 120ms ease;
}
.alert-timeline-item:hover { background: rgba(255,255,255,0.035); }
.alert-timeline-time { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.alert-timeline-title { font-size: 12px; font-weight: 600; color: var(--text); }
.alert-timeline-meta { font-size: 11px; color: var(--muted); margin-top: 1px; }
.alert-timeline-status { flex-shrink: 0; }

/* Evidence modal */
.evidence-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4,9,18,0.75);
    backdrop-filter: blur(6px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ev-fade-in 0.18s ease-out;
}
@keyframes ev-fade-in { from { opacity: 0; } to { opacity: 1; } }

.evidence-modal-card {
    background: linear-gradient(180deg, #111c38, #0b1328);
    border: 1px solid rgba(95,149,255,0.25);
    border-radius: 16px;
    box-shadow: 0 28px 70px rgba(0,0,0,0.6);
    width: min(680px, calc(100vw - 32px));
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ev-scale-in 0.22s cubic-bezier(0.22,1,0.36,1);
}
@keyframes ev-scale-in { from { opacity:0; transform:scale(0.96) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }

.evidence-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(95,149,255,0.15);
    flex-shrink: 0;
}
.evidence-modal-header strong { font-size: 14px; font-weight: 700; color: #e6f0ff; }
.evidence-modal-close {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(95,149,255,0.2);
    border-radius: 8px;
    width: 28px; height: 28px;
    color: #9fb5e8;
    cursor: pointer;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: all 160ms ease;
}
.evidence-modal-close:hover { background: rgba(255,255,255,0.06); color: #e6f0ff; }

.evidence-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(95,149,255,0.12);
    padding: 0 18px;
    flex-shrink: 0;
}
.evidence-modal-tab {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #7a9ab8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms ease;
}
.evidence-modal-tab:hover { color: #a8d4ff; }
.evidence-modal-tab.active { color: #a8d4ff; border-bottom-color: rgba(95,149,255,0.6); }

.evidence-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
}
.evidence-tab-panel { display: none; }
.evidence-tab-panel.active { display: block; }

.evidence-shot {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(95,149,255,0.15);
    margin-top: 8px;
    cursor: zoom-in;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.evidence-shot:hover { opacity: 0.85; }
.evidence-urlbar {
    font-size: 11px;
    color: #7a9ab8;
    padding: 6px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
}
.evidence-meta-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    font-size: 12px;
}
.evidence-meta-k { color: #7a9ab8; font-weight: 600; white-space: nowrap; }
.evidence-meta-v { color: #c8d8f0; word-break: break-all; }
.evidence-empty { padding: 24px; text-align: center; color: #7a9ab8; font-size: 12px; }

/* ── Evidence lightbox (click-to-zoom) ─────────────────────────── */
.evidence-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 16, 0.92);
    backdrop-filter: blur(10px);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: ev-fade-in 0.12s ease-out;
}
.evidence-lightbox img {
    max-width: 95vw;
    max-height: 92vh;
    border-radius: 12px;
    border: 1px solid rgba(95,149,255,0.3);
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
    object-fit: contain;
}
.evidence-lightbox-hint {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: #7a9ab8;
    font-size: 11px;
    background: rgba(2, 6, 16, 0.7);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(95,149,255,0.2);
    pointer-events: none;
}

/* ── False-positive escape hatch (force resolve / report) ─────────── */
.escape-intro { color: #c3d4f5; font-size: 13px; line-height: 1.6; margin: 0 0 14px; }
.escape-intro strong { color: #e6f0ff; }
.escape-note {
    width: 100%;
    min-height: 92px;
    resize: vertical;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,0.25);
    background: rgba(15, 23, 42, 0.9);
    color: #e6f0ff;
    font-family: inherit;
    font-size: 13px;
}
.escape-note:focus { outline: none; border-color: #56b6f7; box-shadow: 0 0 0 4px rgba(86,182,247,0.15); }
.escape-actions { margin-top: 16px; }
.escape-actions .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 10px; border: 1px solid transparent;
    font-weight: 600; font-size: 13px; cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.escape-actions .btn:hover { transform: translateY(-1px); }
.escape-actions .btn.primary { background: linear-gradient(135deg, #38bdf8, #2f7cf6); color: #061019; font-weight: 700; box-shadow: 0 10px 22px rgba(56,189,248,0.25); }
.escape-actions .btn.ghost { background: transparent; color: #9fb5e8; border-color: rgba(255,255,255,0.12); }
.escape-actions .btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.escape-status { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 13px; display: none; }
.escape-status.success { display: block; border-left: 3px solid #4ade80; background: rgba(74,222,128,0.08); color: #e6f0ff; }
.escape-status.error { display: block; border-left: 3px solid #ff6b76; background: rgba(255,107,118,0.08); color: #e6f0ff; }