/* =========================================================
   OpsGate Admin Styles (admin.css)
   Phase 5: Central dashboard premium visual rebuild.
   - Inter font applied globally
   - Color tokens applied to all elements
   - Card system (8px radius, 1px border, 4px shadow) on all cards
   - Radial score gauge, trend arrow, two-column layout
   - Event icons, detail links, usage meters, help panel
   - Preserves all existing selectors + layout behavior.
   ========================================================= */

/* =========================================================
   PHASE 5 — INTER FONT
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.opsgate-admin,
.opsgate-admin *,
.opsgate-admin-remote-companion,
.opsgate-admin-remote-companion * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =========================================================
   PHASE 5 — GLOBAL TOKEN APPLICATION
   Headings, body, cards, badges, CTAs use token colors.
   ========================================================= */
.opsgate-admin h1,
.opsgate-admin h2,
.opsgate-admin h3,
.opsgate-admin h4,
.opsgate-admin h5 {
    color: var(--og-text-1);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.opsgate-admin p,
.opsgate-admin li,
.opsgate-admin td,
.opsgate-admin label {
    color: var(--og-text-1);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.opsgate-admin .description {
    color: var(--og-text-2);
    font-size: 13px;
}

/* Page title with OpsGate logo mark */
.opsgate-admin .wp-heading-inline {
    font-size: 24px;
    font-weight: 600;
    color: var(--og-navy);
}

.opsgate-central-header-logo {
    display: inline-flex;
    align-items: center;
}

/* Shared logo mark styles (central + remote) */
.opsgate-admin .opsgate-remote-logo-mark,
.opsgate-admin-remote-companion .opsgate-remote-logo-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.opsgate-admin .opsgate-remote-logo-shield,
.opsgate-admin-remote-companion .opsgate-remote-logo-shield {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.opsgate-admin .opsgate-remote-logo-text,
.opsgate-admin-remote-companion .opsgate-remote-logo-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--og-navy, #1e3a5f);
    letter-spacing: -0.4px;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   PHASE 5 — CARD SYSTEM
   8px radius, 1px border, 4px box-shadow on all section cards.
   ========================================================= */
.opsgate-admin .opsgate-card,
.opsgate-admin .opsgate-overview-dashboard,
.opsgate-admin .opsgate-overview-surface,
.opsgate-admin .opsgate-overview-metric-card,
.opsgate-admin .opsgate-overview-mini-card,
.opsgate-admin .opsgate-activity-dashboard,
.opsgate-admin .opsgate-activity-featured,
.opsgate-admin .opsgate-activity-item,
.opsgate-admin .opsgate-reports-card,
.opsgate-admin .opsgate-reports-ready-band,
.opsgate-admin .opsgate-billing-tier-card,
.opsgate-admin .opsgate-pricing-card,
.opsgate-admin .opsgate-pricing-summary-card,
.opsgate-admin .opsgate-alerts-channel-family-card,
.opsgate-admin .opsgate-triage-support-strip-card,
.opsgate-admin .opsgate-remote-breakdown-card,
.opsgate-admin .opsgate-remote-action-card,
.opsgate-admin .opsgate-settings-zone-b-body,
.opsgate-admin .opsgate-activity-summary-card,
.opsgate-admin .opsgate-p5-section-card {
    background: var(--og-card);
    border-radius: var(--og-radius);
    border: 1px solid var(--og-border);
    box-shadow: var(--og-shadow);
}

.opsgate-admin .opsgate-card {
    padding: 24px;
    margin-bottom: 24px;
}

/* =========================================================
   PHASE 5 — TWO-COLUMN LAYOUT (60/40)
   ========================================================= */
@media screen and (min-width: 900px) {
    .opsgate-p5-two-col {
        display: grid;
        grid-template-columns: 60fr 40fr;
        gap: 24px;
        align-items: start;
    }
}

/* =========================================================
   PHASE 5 — RADIAL SCORE GAUGE (SVG-based)
   ========================================================= */
.opsgate-p5-gauge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    width: 180px;
    height: 180px;
}

.opsgate-p5-gauge-svg {
    width: 180px;
    height: 180px;
}

.opsgate-p5-gauge-track {
    fill: none;
    stroke: var(--og-border);
    stroke-width: 10;
}

.opsgate-p5-gauge-arc {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.6s ease;
}

.opsgate-p5-gauge-arc.tone-good { stroke: var(--og-green); }
.opsgate-p5-gauge-arc.tone-warn { stroke: var(--og-amber); }
.opsgate-p5-gauge-arc.tone-bad  { stroke: var(--og-red);   }
.opsgate-p5-gauge-arc.tone-info { stroke: var(--og-info);  }
.opsgate-p5-gauge-arc.tone-neutral { stroke: var(--og-border-med); }

.opsgate-p5-gauge-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1;
}

.opsgate-p5-gauge-score {
    display: block;
    font-size: 48px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

.opsgate-p5-gauge-score.tone-good { color: var(--og-green); }
.opsgate-p5-gauge-score.tone-warn { color: var(--og-amber); }
.opsgate-p5-gauge-score.tone-bad  { color: var(--og-red);   }
.opsgate-p5-gauge-score.tone-info { color: var(--og-info);  }
.opsgate-p5-gauge-score.tone-neutral { color: var(--og-text-2); }

.opsgate-p5-gauge-out-of {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--og-text-2);
    line-height: 1;
    margin-top: 1px;
}

.opsgate-p5-gauge-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--og-text-2);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
}

/* P1-A — Stale scan ring + label */
.opsgate-score-stale .opsgate-p5-gauge-track {
    stroke: rgba(240, 165, 0, 0.15);
}

.opsgate-score-stale-label {
    color: #f0a500;
    font-weight: 600;
}

/* P1-A — Secondary action links below primary CTA */
.opsgate-p5-action-links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
}

.opsgate-p5-action-links a {
    color: var(--og-text-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.opsgate-p5-action-links a:hover {
    color: var(--og-blue);
}

.opsgate-p5-action-sep {
    color: var(--og-border-med);
}

/* =========================================================
   PHASE 5 — TREND ARROW
   ========================================================= */
.opsgate-p5-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
}

.opsgate-p5-trend.trend-up {
    background: var(--og-green-bg);
    color: #065F46;
}

.opsgate-p5-trend.trend-down {
    background: var(--og-red-bg);
    color: #991B1B;
}

.opsgate-p5-trend.trend-flat {
    background: var(--og-bg);
    color: var(--og-text-2);
}

/* =========================================================
   PHASE 5 — DASHBOARD HERO REBUILD
   ========================================================= */
.opsgate-p5-dashboard-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: var(--og-card);
    border-radius: var(--og-radius);
    border: 1px solid var(--og-border);
    box-shadow: var(--og-shadow);
    margin-bottom: 20px;
}

.opsgate-p5-dashboard-hero-main {
    flex: 1;
    min-width: 0;
}

.opsgate-p5-dashboard-hero-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--og-text-1);
    margin: 0 0 4px;
}

.opsgate-p5-dashboard-hero-subtitle {
    font-size: 14px;
    color: var(--og-text-2);
    margin: 0 0 12px;
}

.opsgate-p5-dashboard-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.opsgate-p5-last-checked {
    font-size: 12px;
    color: var(--og-text-2);
}

/* =========================================================
   PHASE 5 — 3-BUTTON ACTION STRIP
   ========================================================= */
.opsgate-p5-action-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.opsgate-p5-action-strip .button-primary {
    background-color: var(--og-blue);
    border-color: var(--og-blue);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.opsgate-p5-action-strip .button-primary:hover {
    background-color: #1D4ED8;
    border-color: #1D4ED8;
}

.opsgate-p5-action-strip .button-secondary {
    background: var(--og-card);
    border: 1px solid var(--og-blue);
    color: var(--og-blue);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.opsgate-p5-action-strip .button-secondary:hover {
    background: var(--og-blue-light);
}

/* =========================================================
   PHASE 5 — 5 COMPACT DIMENSION CHIPS
   ========================================================= */
.opsgate-p5-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.opsgate-p5-dim-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    border: 1px solid transparent;
    white-space: nowrap;
}

.opsgate-p5-dim-chip .opsgate-p5-dim-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.opsgate-p5-dim-chip.tone-good { background: var(--og-green-bg); color: #065F46; border-color: #A7F3D0; }
.opsgate-p5-dim-chip.tone-good .opsgate-p5-dim-dot { background: var(--og-green); }
.opsgate-p5-dim-chip.tone-warn { background: var(--og-amber-bg); color: #92400E; border-color: #FDE68A; }
.opsgate-p5-dim-chip.tone-warn .opsgate-p5-dim-dot { background: var(--og-amber); }
.opsgate-p5-dim-chip.tone-bad  { background: var(--og-red-bg);   color: #991B1B; border-color: #FECACA; }
.opsgate-p5-dim-chip.tone-bad  .opsgate-p5-dim-dot { background: var(--og-red);   }
.opsgate-p5-dim-chip.tone-info { background: var(--og-info-bg);  color: #1E40AF; border-color: #BFDBFE; }
.opsgate-p5-dim-chip.tone-info .opsgate-p5-dim-dot { background: var(--og-info); }
.opsgate-p5-dim-chip.tone-neutral { background: var(--og-bg); color: var(--og-text-2); border-color: var(--og-border); }
.opsgate-p5-dim-chip.tone-neutral .opsgate-p5-dim-dot { background: var(--og-text-3); }

/* =========================================================
   PHASE 5 — INLINE ACTIVITY FEED (3-item)
   ========================================================= */
.opsgate-p5-mini-feed {
    margin-top: 16px;
}

.opsgate-p5-mini-feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.opsgate-p5-mini-feed-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--og-text-1);
}

.opsgate-p5-mini-feed-viewall {
    font-size: 12px;
    color: var(--og-blue);
    text-decoration: none;
    font-weight: 500;
}

.opsgate-p5-mini-feed-viewall:hover {
    text-decoration: underline;
}

.opsgate-p5-mini-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--og-border);
}

.opsgate-p5-mini-feed-item:last-child {
    border-bottom: none;
}

.opsgate-p5-mini-feed-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
}

.opsgate-p5-mini-feed-icon.family-triage  { background: #2563EB; color: #fff; }
.opsgate-p5-mini-feed-icon.family-scan    { background: #2563EB; color: #fff; }
.opsgate-p5-mini-feed-icon.family-alert   { background: var(--og-amber-bg); color: #92400E; }
.opsgate-p5-mini-feed-icon.family-report  { background: var(--og-green-bg); color: #065F46; }
.opsgate-p5-mini-feed-icon.family-proof   { background: var(--og-bg);       color: var(--og-text-2); }
.opsgate-p5-mini-feed-icon.family-connection { background: #F3E8FF; color: #6D28D9; }
.opsgate-p5-mini-feed-icon.family-system  { background: var(--og-bg);       color: var(--og-text-2); }
.opsgate-p5-mini-feed-icon.family-timeline{ background: var(--og-bg);       color: var(--og-text-2); }
.opsgate-p5-mini-feed-icon.family-delivery{ background: var(--og-green-bg); color: #065F46; }

.opsgate-p5-mini-feed-body {
    flex: 1;
    min-width: 0;
}

.opsgate-p5-mini-feed-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--og-text-1);
    line-height: 1.3;
}

.opsgate-p5-mini-feed-when {
    font-size: 11px;
    color: var(--og-text-2);
    margin-top: 1px;
}

/* =========================================================
   PHASE 5 — ACTIVITY TAB EVENT TYPE ICONS + DETAIL LINKS
   ========================================================= */
.opsgate-p5-event-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.opsgate-p5-event-icon.family-triage   { background: #2563EB; color: #fff; }
.opsgate-p5-event-icon.family-scan     { background: #2563EB; color: #fff; }
.opsgate-p5-event-icon.family-alert    { background: var(--og-amber-bg); color: #92400E; }
.opsgate-p5-event-icon.family-report   { background: var(--og-green-bg); color: #065F46; }
.opsgate-p5-event-icon.family-proof    { background: var(--og-bg);       color: var(--og-text-2); }
.opsgate-p5-event-icon.family-connection { background: #F3E8FF; color: #6D28D9; }
.opsgate-p5-event-icon.family-system   { background: var(--og-bg);       color: var(--og-text-2); }
.opsgate-p5-event-icon.family-timeline { background: var(--og-bg);       color: var(--og-text-2); }
.opsgate-p5-event-icon.family-delivery { background: var(--og-green-bg); color: #065F46; }

.opsgate-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--og-border);
}

.opsgate-activity-item:last-child { border-bottom: none; }

.opsgate-activity-item-body {
    flex: 1;
    min-width: 0;
}

.opsgate-p5-detail-link {
    font-size: 12px;
    color: var(--og-blue);
    text-decoration: none;
    font-weight: 500;
    margin-left: 8px;
    white-space: nowrap;
}

.opsgate-p5-detail-link:hover {
    text-decoration: underline;
}

/* =========================================================
   PHASE 5 — USAGE METERS (Billing)
   ========================================================= */
.opsgate-p5-usage-meters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.opsgate-p5-usage-meter {
    background: var(--og-card);
    border: 1px solid var(--og-border);
    border-radius: var(--og-radius);
    box-shadow: var(--og-shadow);
    padding: 16px;
}

.opsgate-p5-usage-meter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--og-text-2);
    margin-bottom: 8px;
}

.opsgate-p5-usage-meter-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--og-text-1);
    margin-bottom: 4px;
}

.opsgate-p5-usage-bar-track {
    height: 6px;
    background: var(--og-border);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}

.opsgate-p5-usage-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--og-blue);
    transition: width 0.4s ease;
}

.opsgate-p5-usage-bar-fill.is-warn  { background: var(--og-amber); }
.opsgate-p5-usage-bar-fill.is-full  { background: var(--og-red);   }

/* =========================================================
   PHASE 5 — DELIVERY HISTORY (Reports tab — Phase 4 truth)
   ========================================================= */
.opsgate-p5-delivery-section {
    margin-top: 24px;
    background: var(--og-card);
    border: 1px solid var(--og-border);
    border-radius: var(--og-radius);
    box-shadow: var(--og-shadow);
    padding: 20px;
}

.opsgate-p5-delivery-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.opsgate-p5-delivery-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--og-text-1);
    margin: 0;
}

.opsgate-p5-delivery-section-sub {
    font-size: 13px;
    color: var(--og-text-2);
    margin: 0;
}

.opsgate-p5-delivery-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--og-border);
}

.opsgate-p5-delivery-row:last-child { border-bottom: none; }

.opsgate-p5-delivery-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.opsgate-p5-delivery-status-badge.status-sent     { background: var(--og-green-bg); color: #065F46; }
.opsgate-p5-delivery-status-badge.status-failed   { background: var(--og-red-bg);   color: #991B1B; }
.opsgate-p5-delivery-status-badge.status-queued,
.opsgate-p5-delivery-status-badge.status-sending  { background: var(--og-amber-bg); color: #92400E; }
.opsgate-p5-delivery-status-badge.status-delivered{ background: var(--og-green-bg); color: #065F46; }

.opsgate-p5-delivery-meta {
    flex: 1;
    min-width: 0;
}

.opsgate-p5-delivery-recipient {
    font-size: 13px;
    font-weight: 500;
    color: var(--og-text-1);
}

.opsgate-p5-delivery-detail {
    font-size: 11px;
    color: var(--og-text-2);
    margin-top: 2px;
}

.opsgate-p5-delivery-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #065F46;
    background: var(--og-green-bg);
    border-radius: 8px;
    padding: 2px 8px;
    white-space: nowrap;
}

.opsgate-p5-delivery-sender {
    font-size: 11px;
    color: var(--og-text-2);
}

.opsgate-p5-delivery-empty {
    padding: 16px 0;
    color: var(--og-text-2);
    font-size: 13px;
    text-align: center;
}

/* =========================================================
   PHASE 5 — PORTFOLIO CONTEXT CARD (Free/Starter in Dashboard)
   ========================================================= */
.opsgate-p5-portfolio-context-card {
    background: var(--og-card);
    border: 1px solid var(--og-border);
    border-radius: var(--og-radius);
    box-shadow: var(--og-shadow);
    padding: 20px;
    margin-top: 20px;
}

.opsgate-p5-portfolio-context-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.opsgate-p5-portfolio-context-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--og-text-1);
    margin: 0;
}

.opsgate-p5-portfolio-upgrade-cta {
    font-size: 12px;
    font-weight: 600;
    color: var(--og-blue);
    text-decoration: none;
}

.opsgate-p5-portfolio-upgrade-cta:hover { text-decoration: underline; }

/* Portfolio Pro/Agency site list */
.opsgate-p5-portfolio-site-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.opsgate-p5-portfolio-site-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--og-card);
    border: 1px solid var(--og-border);
    border-radius: var(--og-radius);
    box-shadow: var(--og-shadow);
}

.opsgate-p5-portfolio-site-score {
    font-size: 20px;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
}

.opsgate-p5-portfolio-site-score.tone-good { color: var(--og-green); }
.opsgate-p5-portfolio-site-score.tone-warn { color: var(--og-amber); }
.opsgate-p5-portfolio-site-score.tone-bad  { color: var(--og-red);   }
.opsgate-p5-portfolio-site-score.tone-neutral { color: var(--og-text-2); }

.opsgate-p5-portfolio-site-info {
    flex: 1;
    min-width: 0;
}

.opsgate-p5-portfolio-site-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--og-text-1);
}

.opsgate-p5-portfolio-site-meta {
    font-size: 12px;
    color: var(--og-text-2);
}

/* Agency command center */
.opsgate-p5-portfolio-agency-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.opsgate-p5-portfolio-agency-stat {
    background: var(--og-card);
    border: 1px solid var(--og-border);
    border-radius: var(--og-radius);
    padding: 14px;
    box-shadow: var(--og-shadow);
    text-align: center;
}

.opsgate-p5-portfolio-agency-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--og-navy);
}

.opsgate-p5-portfolio-agency-stat-label {
    font-size: 11px;
    color: var(--og-text-2);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* =========================================================
   PHASE 5 — REPORT GENERATION PROGRESS INDICATOR
   ========================================================= */
.opsgate-p5-report-progress {
    background: var(--og-info-bg);
    border: 1px solid #BFDBFE;
    border-radius: var(--og-radius);
    padding: 14px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.opsgate-p5-report-progress-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #BFDBFE;
    border-top-color: var(--og-blue);
    border-radius: 50%;
    animation: og-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes og-spin { to { transform: rotate(360deg); } }

.opsgate-p5-report-progress-copy {
    font-size: 13px;
    color: #1E40AF;
    font-weight: 500;
}

/* =========================================================
   PHASE 5 — WOOCOMMERCE SIGNAL CARD
   ========================================================= */
.opsgate-p5-woo-card {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: var(--og-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
}

.opsgate-p5-woo-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.opsgate-p5-woo-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #92400E;
    margin: 0;
}

.opsgate-p5-woo-signal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.opsgate-p5-woo-signal-list li {
    font-size: 13px;
    color: #92400E;
    padding: 4px 0;
    border-bottom: 1px solid #FDE68A;
}

.opsgate-p5-woo-signal-list li:last-child { border-bottom: none; }

.opsgate-p5-woo-notice {
    font-size: 13px;
    color: #92400E;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: var(--og-radius);
    padding: 10px 16px;
    margin-bottom: 12px;
}

/* =========================================================
   PHASE 5 — PRIORITY-RANKED TRIAGE (critical first)
   ========================================================= */
.opsgate-p5-triage-priority-section {
    margin-bottom: 24px;
}

.opsgate-p5-triage-priority-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--og-border);
}

.opsgate-p5-triage-priority-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--og-text-1);
    margin: 0;
}

/* =========================================================
   PHASE 5 — COLLAPSIBLE Q&A / GLOSSARY HELP PANEL
   ========================================================= */
.opsgate-p5-help-panel {
    margin-top: 28px;
    border: 1px solid var(--og-border);
    border-radius: var(--og-radius);
    background: var(--og-bg);
    overflow: hidden;
}

.opsgate-p5-help-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--og-text-2);
}

.opsgate-p5-help-panel > summary::-webkit-details-marker { display: none; }

.opsgate-p5-help-panel > summary::after {
    content: '›';
    font-size: 18px;
    color: var(--og-text-3);
    transition: transform .2s;
}

.opsgate-p5-help-panel[open] > summary::after {
    transform: rotate(90deg);
}

.opsgate-p5-help-panel-body {
    padding: 16px;
    border-top: 1px solid var(--og-border);
}

.opsgate-p5-help-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--og-border);
}

.opsgate-p5-help-item:last-child { border-bottom: none; }

.opsgate-p5-help-item-term {
    font-size: 12px;
    font-weight: 600;
    color: var(--og-text-1);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}

.opsgate-p5-help-item-def {
    font-size: 12px;
    color: var(--og-text-2);
    line-height: 1.5;
    margin: 0;
}

/* =========================================================
   ROUND 1 — SHARED VISUAL SYSTEM FOUNDATION (2026-05-15)
   Reusable classes for later audit slices (A–L).
   These are foundational — no tab rewrites happen here.
   ========================================================= */

/* --- Hero band pattern --- */
.opsgate-r1-hero-band {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--og-card);
    border: 1px solid var(--og-border);
    border-radius: var(--og-radius);
    box-shadow: var(--og-shadow-md);
    margin-bottom: 20px;
}

/* --- Status color utilities --- */
.opsgate-r1-status-good    { color: var(--og-green); }
.opsgate-r1-status-warn    { color: var(--og-amber); }
.opsgate-r1-status-bad     { color: var(--og-red);   }
.opsgate-r1-status-info    { color: var(--og-info);  }
.opsgate-r1-status-neutral { color: var(--og-text-2); }

.opsgate-r1-bg-good    { background: var(--og-green-bg); color: #065F46; }
.opsgate-r1-bg-warn    { background: var(--og-amber-bg); color: #92400E; }
.opsgate-r1-bg-bad     { background: var(--og-red-bg);   color: #991B1B; }
.opsgate-r1-bg-info    { background: var(--og-info-bg);  color: #1E40AF; }
.opsgate-r1-bg-neutral { background: var(--og-bg);       color: var(--og-text-2); }

/* --- Action button hierarchy --- */
.opsgate-r1-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    background: var(--og-blue);
    color: #fff;
    border: none;
    border-radius: var(--og-radius-sm);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    transition: background .15s;
}
.opsgate-r1-btn-primary:hover { background: #1d4ed8; color: #fff; text-decoration: none; }

.opsgate-r1-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    background: var(--og-card);
    color: var(--og-blue);
    border: 1px solid var(--og-blue);
    border-radius: var(--og-radius-sm);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    transition: background .15s;
}
.opsgate-r1-btn-secondary:hover { background: var(--og-blue-light); text-decoration: none; }

.opsgate-r1-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    background: transparent;
    color: var(--og-text-2);
    border: 1px solid var(--og-border);
    border-radius: var(--og-radius-sm);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}
.opsgate-r1-btn-ghost:hover { background: var(--og-bg); color: var(--og-text-1); text-decoration: none; }

/* --- Typography hierarchy --- */
.opsgate-r1-heading-1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--og-text-1);
    margin: 0 0 4px;
    line-height: 1.2;
}
.opsgate-r1-heading-2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--og-text-1);
    margin: 0 0 4px;
    line-height: 1.3;
}
.opsgate-r1-heading-3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--og-text-1);
    margin: 0 0 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.opsgate-r1-body {
    font-size: 14px;
    color: var(--og-text-1);
    line-height: 1.6;
    margin: 0;
}
.opsgate-r1-meta {
    font-size: 12px;
    color: var(--og-text-2);
    line-height: 1.5;
    margin: 0;
}

/* --- Section spacing --- */
.opsgate-r1-section {
    padding: 20px 24px;
    background: var(--og-card);
    border: 1px solid var(--og-border);
    border-radius: var(--og-radius);
    box-shadow: var(--og-shadow);
    margin-bottom: 16px;
}
.opsgate-r1-section-gap { margin-bottom: 20px; }

/* --- Guidance / empty-state pattern --- */
.opsgate-r1-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 24px;
    text-align: center;
    background: var(--og-bg);
    border: 1px dashed var(--og-border-med);
    border-radius: var(--og-radius);
}
.opsgate-r1-empty-state-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--og-text-1);
    margin: 0;
}
.opsgate-r1-empty-state-body {
    font-size: 13px;
    color: var(--og-text-2);
    max-width: 400px;
    line-height: 1.55;
    margin: 0;
}

.opsgate-r1-guidance-card {
    padding: 16px 20px;
    background: var(--og-info-bg);
    border: 1px solid #BFDBFE;
    border-radius: var(--og-radius);
    font-size: 13px;
    color: #1E40AF;
    line-height: 1.55;
    margin-bottom: 16px;
}

/* --- Compact metric / chip --- */
.opsgate-r1-metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--og-border);
    background: var(--og-bg);
    color: var(--og-text-2);
    white-space: nowrap;
}
.opsgate-r1-metric-chip.good { background: var(--og-green-bg); border-color: #A7F3D0; color: #065F46; }
.opsgate-r1-metric-chip.warn { background: var(--og-amber-bg); border-color: #FDE68A; color: #92400E; }
.opsgate-r1-metric-chip.bad  { background: var(--og-red-bg);   border-color: #FECACA; color: #991B1B; }
.opsgate-r1-metric-chip.info { background: var(--og-info-bg);  border-color: #BFDBFE; color: #1E40AF; }

/* --- Evidence / status badge --- */
.opsgate-r1-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.6;
}
.opsgate-r1-badge-good    { background: var(--og-green-bg); color: #065F46; }
.opsgate-r1-badge-warn    { background: var(--og-amber-bg); color: #92400E; }
.opsgate-r1-badge-bad     { background: var(--og-red-bg);   color: #991B1B; }
.opsgate-r1-badge-info    { background: var(--og-info-bg);  color: #1E40AF; }
.opsgate-r1-badge-neutral { background: var(--og-bg); border: 1px solid var(--og-border); color: var(--og-text-2); }

/* --- Support / diagnostic demotion pattern --- */
.opsgate-r1-support-demoted {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--og-border);
    opacity: .8;
}
.opsgate-r1-support-demoted-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--og-text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
}

/* --- Q&A / Glossary shared help framework (Round 1) ---
   Canonical forward-looking class for tab-level help panels.
   Alias for .opsgate-p5-help-panel — same behavior, consistent naming.
   Later slices use .opsgate-r1-help-panel for new help panels.
   --------------------------------------------------------- */
.opsgate-r1-help-panel {
    margin-top: 28px;
    border: 1px solid var(--og-border);
    border-radius: var(--og-radius);
    background: var(--og-bg);
    overflow: hidden;
}
.opsgate-r1-help-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--og-text-2);
}
.opsgate-r1-help-panel > summary::-webkit-details-marker { display: none; }
.opsgate-r1-help-panel > summary::after {
    content: '›';
    font-size: 18px;
    color: var(--og-text-3);
    transition: transform .2s;
}
.opsgate-r1-help-panel[open] > summary::after { transform: rotate(90deg); }
.opsgate-r1-help-panel-body {
    padding: 16px;
    border-top: 1px solid var(--og-border);
}
.opsgate-r1-help-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--og-border);
}
.opsgate-r1-help-item:last-child { border-bottom: none; }
.opsgate-r1-help-item-term {
    font-size: 12px;
    font-weight: 600;
    color: var(--og-text-1);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}
.opsgate-r1-help-item-def {
    font-size: 12px;
    color: var(--og-text-2);
    line-height: 1.5;
    margin: 0;
}

/* Round 2: evidence help dl */
.opsgate-r1-help-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 12px;
}
.opsgate-r1-help-dl dt {
    font-weight: 600;
    color: var(--og-text-1);
    white-space: nowrap;
}
.opsgate-r1-help-dl dd {
    color: var(--og-text-2);
    margin: 0;
    line-height: 1.5;
}

/* Round 2: evidence help panel spacing */
.opsgate-triage-evidence-help {
    margin-bottom: 14px;
}

/* Round 2: legacy receipt demoted panel */
.opsgate-triage-legacy-receipt > summary {
    font-size: 12px;
    color: var(--og-text-3);
    cursor: pointer;
    padding: 6px 0;
}

/* =========================================================
   PHASE 5 — UPGRADE CTA BUTTONS
   ========================================================= */
.opsgate-p5-upgrade-btn {
    display: inline-block;
    padding: 8px 18px;
    background: var(--og-blue);
    color: #fff;
    border: none;
    border-radius: var(--og-radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}

.opsgate-p5-upgrade-btn:hover {
    background: #1D4ED8;
    color: #fff;
    text-decoration: none;
}

/* =========================================================
   PHASE 5 — GREYED BUTTON TOOLTIP/EXPLANATION
   ========================================================= */
.opsgate-p5-disabled-hint {
    display: block;
    font-size: 11px;
    color: var(--og-text-2);
    margin-top: 4px;
    font-style: italic;
}

/* =========================================================
   PHASE 5 — TYPOGRAPHY HIERARCHY
   ========================================================= */
.opsgate-admin .opsgate-p5-page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--og-navy);
    font-family: 'Inter', sans-serif;
    margin-bottom: 4px;
}

.opsgate-admin .opsgate-p5-section-heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--og-text-1);
    font-family: 'Inter', sans-serif;
    margin-bottom: 8px;
}

.opsgate-admin .opsgate-p5-body-text {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: var(--og-text-1);
    line-height: 1.6;
}

.opsgate-admin .opsgate-p5-meta-text {
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: var(--og-text-2);
}

/* Nav tabs with Inter */
.opsgate-nav-tabs .nav-tab {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.opsgate-nav-tabs .nav-tab-active {
    font-weight: 600;
    color: var(--og-blue);
    border-bottom-color: var(--og-blue);
}

/* =========================================================
   DESIGN TOKENS — Sprint 10 indigo palette alignment
   Aligned to website/console --og-* token system (globals.css).
   ========================================================= */
:root {
    /* Brand — indigo/violet, matches website --og-acc + console palette */
    --og-navy:       #312e81;           /* indigo-900 — heading/wordmark authority tone */
    --og-blue:       #6366f1;           /* indigo-500 — matches --og-acc (website dark mode) */
    --og-blue-light: rgba(99,102,241,0.08); /* matches --og-acc-d */
    --og-primary:    #6366f1;           /* fallback alias for var(--og-primary, ...) refs */
    --og-accent:     #6366f1;           /* fallback alias for var(--og-accent, ...) refs */
    --og-accent-dark:#4f46e5;           /* fallback for var(--og-accent-dark, ...) refs */
    --og-grad-cta:   linear-gradient(135deg, #6366f1 0%, #a855f7 100%); /* matches console */

    /* Posture tones — unchanged, semantics are correct */
    --og-green:      #10B981;
    --og-green-bg:   #ECFDF5;
    --og-amber:      #F59E0B;
    --og-amber-bg:   #FFFBEB;
    --og-red:        #EF4444;
    --og-red-bg:     #FEF2F2;
    --og-info:       #3B82F6;
    --og-info-bg:    #EFF6FF;

    /* Neutral surfaces — unchanged, already match website light mode */
    --og-bg:         #F8FAFC;
    --og-card:       #FFFFFF;
    --og-border:     #E2E8F0;
    --og-border-med: #CBD5E1;
    --og-text-1:     #111827;
    --og-text-2:     #6B7280;
    --og-text-3:     #9CA3AF;

    /* Spacing + elevation — unchanged */
    --og-radius:     8px;
    --og-radius-sm:  4px;
    --og-radius-lg:  14px;              /* matches --og-r2 on website — for large section cards */
    --og-shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --og-shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
}

/* =========================================================
   DARK MODE — keyed to data-og-theme="dark" on .wrap.opsgate-admin
   Mirrors the web console dark palette exactly.
   ========================================================= */
.wrap.opsgate-admin[data-og-theme="dark"],
.wrap.opsgate-admin[data-og-theme="dark"] *,
.wrap.opsgate-admin-remote-companion[data-og-theme="dark"],
.wrap.opsgate-admin-remote-companion[data-og-theme="dark"] * {
    color-scheme: dark;
}
.wrap.opsgate-admin[data-og-theme="dark"],
.wrap.opsgate-admin-remote-companion[data-og-theme="dark"] {
    --og-bg:         #0d1117;
    --og-card:       #161b22;
    --og-border:     #2a3444;
    --og-border-med: #3a4759;
    --og-text-1:     #f0f4f8;
    --og-text-2:     #a8b8cc;
    --og-text-3:     #6b7a8d;
    --og-navy:       #a5b4fc;           /* indigo-300 — readable on dark */
    --og-blue:       #818cf8;           /* indigo-400 — readable on dark */
    --og-blue-light: rgba(99,102,241,0.12);
    --og-primary:    #818cf8;
    --og-accent:     #818cf8;
    --og-shadow:     0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --og-shadow-md:  0 4px 6px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
    --og-green-bg:   rgba(16,185,129,0.12);
    --og-amber-bg:   rgba(245,158,11,0.12);
    --og-red-bg:     rgba(239,68,68,0.12);
    --og-info-bg:    rgba(59,130,246,0.12);
}

/* =========================================================
   DARK MODE — card surface overrides (Slice 10-B)
   ========================================================= */
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-card,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-overview-dashboard,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-overview-surface,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-overview-metric-card,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-overview-mini-card,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-activity-dashboard,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-activity-featured,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-reports-card,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-billing-tier-card,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-pricing-card,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-alerts-channel-family-card,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-remote-breakdown-card,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-remote-action-card,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-settings-zone-b-body,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-p5-section-card {
    background: var(--og-card);
    border-color: var(--og-border);
}

/* DARK MODE — tone chip text overrides: hardcoded hex → readable on dark */
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-p5-dim-chip.tone-good,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-chip.tone-good {
    color: #6ee7b7; /* emerald-300 */
    border-color: rgba(16,185,129,0.3);
}
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-p5-dim-chip.tone-warn,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-chip.tone-warn {
    color: #fcd34d; /* amber-300 */
    border-color: rgba(245,158,11,0.3);
}
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-p5-dim-chip.tone-bad,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-chip.tone-bad {
    color: #fca5a5; /* red-300 */
    border-color: rgba(239,68,68,0.3);
}
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-p5-dim-chip.tone-info,
.wrap.opsgate-admin[data-og-theme="dark"] .opsgate-chip.tone-info {
    color: #93c5fd; /* blue-300 */
    border-color: rgba(59,130,246,0.3);
}

/* =========================================================
   SPRINT 10 — CTA gradient alignment (Slice 10-B)
   Primary buttons use --og-grad-cta matching console.
   ========================================================= */
.opsgate-admin .opsgate-r1-btn-primary {
    background: var(--og-grad-cta);
    border: none;
}
.opsgate-admin .opsgate-r1-btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
    color: #fff;
}
.opsgate-admin .opsgate-p5-action-strip .button-primary,
.opsgate-admin .opsgate-overview-action-primary.button.button-primary,
.opsgate-admin .opsgate-triage-action-primary.button.button-primary,
.opsgate-admin .opsgate-triage-command-run-button.button.button-primary {
    background: var(--og-grad-cta);
    border-color: #6366f1;
    color: #fff;
}
.opsgate-admin .opsgate-p5-action-strip .button-primary:hover,
.opsgate-admin .opsgate-overview-action-primary.button.button-primary:hover,
.opsgate-admin .opsgate-triage-action-primary.button.button-primary:hover,
.opsgate-admin .opsgate-triage-command-run-button.button.button-primary:hover,
.opsgate-admin .opsgate-triage-command-run-button.button.button-primary:focus {
    background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
    border-color: #4f46e5;
}

/* =========================================================
   SPRINT 10 — Large card radius (Slice 10-B)
   Major section wrappers use --og-radius-lg (14px).
   ========================================================= */
.opsgate-admin .opsgate-overview-dashboard,
.opsgate-admin .opsgate-activity-dashboard,
.opsgate-admin .opsgate-reports-card,
.opsgate-admin .opsgate-p5-section-card {
    border-radius: var(--og-radius-lg);
}

/* =========================================================
   SPRINT 10 — Typography polish (Slice 10-C)
   Letter-spacing on headings matches web console.
   ========================================================= */
.opsgate-admin h1,
.opsgate-admin h2,
.opsgate-admin h3 {
    letter-spacing: -0.4px;
}
.opsgate-admin h1 { letter-spacing: -0.6px; }

/* Wordmark text — already uses var(--og-navy); inherits indigo-900 / indigo-300 dark */
.opsgate-admin .opsgate-remote-logo-text,
.opsgate-admin-remote-companion .opsgate-remote-logo-text {
    letter-spacing: -0.4px;
}

/* =========================================================
   SPRINT 10 — Theme toggle button (Slice 10-B)
   Injected into WP admin header by PHP in class-opsgate-admin.php
   ========================================================= */
.opsgate-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    background: var(--og-card);
    color: var(--og-text-2);
    border: 1px solid var(--og-border);
    border-radius: var(--og-radius);
    cursor: pointer;
    transition: background .15s, color .15s;
    vertical-align: middle;
    line-height: 1.4;
}
.opsgate-theme-toggle:hover {
    background: var(--og-bg);
    color: var(--og-text-1);
}
.opsgate-theme-toggle svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: currentColor;
}
/* Position the toggle in the plugin's nav tab header area */
.opsgate-nav-tabs-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* =========================================================
   SCORE GAUGE — dominant score display
   ========================================================= */
.opsgate-score-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 6px solid var(--og-border);
    background: var(--og-card);
    flex-shrink: 0;
}
.opsgate-score-gauge.tone-good  { border-color: var(--og-green); }
.opsgate-score-gauge.tone-warn  { border-color: var(--og-amber); }
.opsgate-score-gauge.tone-bad   { border-color: var(--og-red);   }
.opsgate-score-gauge.tone-info  { border-color: var(--og-info);  }

.opsgate-score-gauge-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: var(--og-text-1);
}
.opsgate-score-gauge-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--og-text-2);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* =========================================================
   DIMENSION CHIPS — 5-chip strip below score
   ========================================================= */
.opsgate-chip-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.opsgate-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
}
.opsgate-chip.tone-good    { background: var(--og-green-bg); color: #065F46; border-color: #A7F3D0; }
.opsgate-chip.tone-warn    { background: var(--og-amber-bg); color: #92400E; border-color: #FDE68A; }
.opsgate-chip.tone-bad     { background: var(--og-red-bg);   color: #991B1B; border-color: #FECACA; }
.opsgate-chip.tone-neutral { background: var(--og-bg);       color: var(--og-text-2); border-color: var(--og-border); }
.opsgate-chip.tone-info    { background: var(--og-info-bg);  color: #1E40AF; border-color: #BFDBFE; }
.opsgate-chip .dashicons   { font-size: 14px; width: 14px; height: 14px; }

/* =========================================================
   ACTION STRIP — 3-button horizontal band
   ========================================================= */
.opsgate-action-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.opsgate-action-strip .button { white-space: nowrap; }

/* =========================================================
   SUB-NAVIGATION — for Alerts and other tab-within-tab
   ========================================================= */
.opsgate-sub-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--og-border);
    margin-bottom: 20px;
}
.opsgate-sub-nav-item {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--og-text-2);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.opsgate-sub-nav-item:hover {
    color: var(--og-blue);
    text-decoration: none;
}
.opsgate-sub-nav-item.is-active {
    color: var(--og-blue);
    border-bottom-color: var(--og-blue);
    font-weight: 600;
}
.opsgate-sub-panel { display: none; }
.opsgate-sub-panel.is-active { display: block; }

/* =========================================================
   SETTINGS ZONES — Zone A visible / Zone B collapsed
   ========================================================= */
.opsgate-settings-zone-a-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--og-text-2);
    margin-bottom: 12px;
}
.opsgate-settings-zone-b {
    margin-top: 24px;
}
.opsgate-settings-zone-b-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--og-text-2);
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
}
.opsgate-settings-zone-b-toggle .dashicons {
    font-size: 16px; width: 16px; height: 16px;
    transition: transform .2s;
}
.opsgate-settings-zone-b-toggle.is-open .dashicons {
    transform: rotate(90deg);
}
.opsgate-settings-zone-b-body {
    display: none;
    margin-top: 12px;
    padding: 16px;
    background: var(--og-bg);
    border: 1px solid var(--og-border);
    border-radius: var(--og-radius);
}
.opsgate-settings-zone-b-body.is-open { display: block; }

/* =========================================================
   ACTIVITY FILTER BAR
   ========================================================= */
.opsgate-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--og-border);
}
.opsgate-filter-btn {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--og-border-med);
    background: var(--og-card);
    color: var(--og-text-2);
    cursor: pointer;
    transition: all .15s;
}
.opsgate-filter-btn:hover {
    border-color: var(--og-blue);
    color: var(--og-blue);
}
.opsgate-filter-btn.is-active {
    background: var(--og-blue);
    border-color: var(--og-blue);
    color: #fff;
}

/* Activity day grouping */
.opsgate-activity-day-group { margin-bottom: 20px; }
.opsgate-activity-day-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--og-text-3);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 0;
    border-bottom: 1px solid var(--og-border);
    margin-bottom: 8px;
}

/* =========================================================
   REPORTS — client-ready outputs band at top
   ========================================================= */
.opsgate-reports-ready-band {
    background: var(--og-green-bg);
    border: 1px solid #A7F3D0;
    border-radius: var(--og-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.opsgate-reports-ready-band .opsgate-reports-ready-copy { flex: 1; }
.opsgate-reports-ready-band .opsgate-reports-ready-title {
    font-size: 15px;
    font-weight: 600;
    color: #065F46;
    margin: 0 0 4px;
}
.opsgate-reports-ready-band .opsgate-reports-ready-meta {
    font-size: 13px;
    color: #047857;
    margin: 0;
}
.opsgate-reports-empty-guidance {
    background: var(--og-info-bg);
    border: 1px solid #BFDBFE;
    border-radius: var(--og-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.opsgate-reports-empty-guidance p { margin: 0; color: #1E40AF; font-size: 13px; }
.opsgate-reports-empty-guidance strong { display: block; font-size: 14px; color: #1E3A8A; margin-bottom: 4px; }

/* =========================================================
   TRIAGE FILTER STRIP
   ========================================================= */
.opsgate-triage-filter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--og-border);
}
.opsgate-triage-filter-btn {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--og-border-med);
    background: var(--og-card);
    color: var(--og-text-2);
    cursor: pointer;
    transition: all .15s;
}
.opsgate-triage-filter-btn:hover {
    border-color: var(--og-blue);
    color: var(--og-blue);
}
.opsgate-triage-filter-btn.is-active {
    background: var(--og-navy);
    border-color: var(--og-navy);
    color: #fff;
}

/* Severity dot */
.opsgate-severity-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.opsgate-severity-dot.tone-bad  { background: var(--og-red);   }
.opsgate-severity-dot.tone-warn { background: var(--og-amber); }
.opsgate-severity-dot.tone-good { background: var(--og-green); }

/* =========================================================
   OPERATOR-ONLY ZONE — hidden from non-operators
   ========================================================= */
.opsgate-operator-only { display: none; }
.opsgate-is-operator .opsgate-operator-only { display: block; }

/* Minimal admin badge styling */
.wrap .opsgate-badge strong { font-weight: 600; }

/* Root container */
.opsgate-admin {
    width: 100%;
    max-width: none;
}

.opsgate-admin-overview {
    max-width: none;
    margin-right: 20px;
    padding-right: 0;
}

.opsgate-admin-tab-triage {
    max-width: none;
    margin-right: 20px;
    padding-right: 0;
}

.opsgate-admin-tab-reports {
    max-width: none;
    margin-right: 20px;
    padding-right: 0;
}

.opsgate-admin-tab-alerts,
.opsgate-admin-tab-activity,
.opsgate-admin-tab-clients,
.opsgate-admin-tab-billing,
.opsgate-admin-tab-settings {
    max-width: none;
    margin-right: 20px;
    padding-right: 0;
}

/* ===== HEADER ALIGNMENT FIX (Shield + Title) =====
   Keeps the existing PHP markup but aligns the dashicon and title text cleanly.
*/
.opsgate-admin .wp-heading-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1.2;
}

.opsgate-admin .wp-heading-inline .dashicons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    margin-right: 0 !important; /* override inline margin-right to rely on gap */
}

/* ===== NAV TABS ===== */
.opsgate-nav-tabs {
    margin: 20px 0 30px;
    padding: 0 5px;
}

.opsgate-nav-tabs .nav-tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 14px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.opsgate-nav-tabs .nav-tab:hover {
    background-color: #f0f0f1;
    border-bottom-color: #d0d0d1;
}

.opsgate-nav-tabs .nav-tab-active {
    border-bottom-color: #0073aa;
    background-color: #f0f6fc;
    color: #0073aa;
}

.opsgate-nav-tabs .dashicons {
    margin-right: 8px;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.opsgate-admin-overview .wp-heading-inline {
    margin-bottom: 10px;
    font-size: 34px;
    font-weight: 700;
}

/* =========================================================
   REMOTE PLUGIN — Full-width, premium visual layout
   ========================================================= */
.opsgate-admin-remote-companion {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Remove narrow max-width cap — use full WP admin content width */
.opsgate-admin-remote-companion .wp-heading-inline,
.opsgate-admin-remote-companion .wp-header-end,
.opsgate-admin-remote-companion .opsgate-remote-companion-shell,
.opsgate-admin-remote-companion .opsgate-remote-companion-shell-v2 {
    max-width: none;
}

/* OpsGate logo wordmark in remote header */
.opsgate-admin-remote-companion .wp-heading-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--og-navy, #1e3a5f);
    letter-spacing: -0.3px;
}

.opsgate-remote-logo-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.opsgate-remote-logo-shield {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.opsgate-remote-logo-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--og-navy, #1e3a5f);
    letter-spacing: -0.4px;
    font-family: 'Inter', sans-serif;
}

.opsgate-remote-companion-shell,
.opsgate-remote-companion-shell-v2 {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
}

/* Asymmetric hero: dominant main area + compact action sidebar */
.opsgate-remote-hero-band,
.opsgate-remote-hero-band-v2 {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(180px, 0.75fr);
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 24px 24px;
    border: 1px solid var(--og-border);
    border-radius: 20px;
    background: linear-gradient(145deg, #eef6ff 0%, #f8fbff 40%, #ffffff 100%);
    box-shadow: 0 2px 16px rgba(30,58,95,0.07), 0 1px 3px rgba(30,58,95,0.04);
    position: relative;
    overflow: hidden;
}

.opsgate-remote-hero-band-v2::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,115,170,0.07) 0%, transparent 70%);
    pointer-events: none;
}

.opsgate-remote-live-panel-hero {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #d8e5f2;
    background: rgba(255, 255, 255, 0.85);
}

.opsgate-remote-live-panel-hero h3 {
    margin: 0 0 8px;
    color: #17324a;
    font-size: 22px;
}

.opsgate-remote-onboarding {
    padding: 24px;
}

.opsgate-remote-onboarding-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--og-border);
}

.opsgate-remote-onboarding-brand h3 {
    margin: 4px 0 6px;
    font-size: 26px;
    color: var(--og-navy);
}

.opsgate-remote-onboarding-brand p {
    margin: 0;
    color: var(--og-text-2);
    font-size: 14px;
}

.opsgate-remote-onboarding-paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.opsgate-remote-onboarding-path {
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--og-border);
    background: var(--og-card);
    box-shadow: var(--og-shadow);
}

.opsgate-remote-onboarding-path-new {
    border-color: var(--og-blue);
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
}

.opsgate-remote-onboarding-path h4 {
    margin: 4px 0 8px;
    font-size: 17px;
    color: var(--og-text-1);
    font-weight: 600;
}

.opsgate-remote-onboarding-path p {
    margin: 0 0 16px;
    color: var(--og-text-2);
    font-size: 13px;
    line-height: 1.55;
}

.opsgate-remote-onboarding-url-row {
    margin-bottom: 14px;
}

.opsgate-remote-onboarding-url-row input.regular-text {
    width: 100%;
    max-width: none;
}

.opsgate-remote-onboarding-form {
    margin-top: 0;
}

.opsgate-remote-onboarding-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 14px 0 18px;
}

.opsgate-remote-onboarding-grid label {
    display: block;
    margin-bottom: 6px;
}

.opsgate-remote-onboarding-grid input.regular-text {
    width: 100%;
    max-width: none;
}

/* =========================================================
   SLICE 5.12 — Repair banner (credential_invalid / disconnected)
   ========================================================= */
.opsgate-remote-repair-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid #fbbf24;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.opsgate-remote-repair-banner-credential_invalid {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.opsgate-remote-repair-banner-disconnected {
    border-color: #d1d5db;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
}

.opsgate-remote-repair-banner-content strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--og-text-1);
}

.opsgate-remote-repair-banner-content p {
    margin: 0;
    font-size: 13px;
    color: var(--og-text-2);
}

.opsgate-remote-repair-banner .button {
    white-space: nowrap;
    flex-shrink: 0;
}

/* =========================================================
   SLICE 5.12 — Updated topline grid (2-col, timestamp style)
   ========================================================= */
.opsgate-admin-remote-companion .opsgate-remote-topline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opsgate-admin-remote-companion .opsgate-remote-topline-score {
    border-left: 3px solid transparent;
}

.opsgate-admin-remote-companion .opsgate-remote-topline-score.is-good {
    border-left-color: var(--og-green);
}

.opsgate-admin-remote-companion .opsgate-remote-topline-score.is-warn {
    border-left-color: var(--og-amber);
}

.opsgate-admin-remote-companion .opsgate-remote-topline-score.is-bad {
    border-left-color: var(--og-red);
}

.opsgate-admin-remote-companion .opsgate-remote-topline-timestamp {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--og-text-1) !important;
}

@media (max-width: 900px) {
    .opsgate-remote-onboarding-paths {
        grid-template-columns: 1fr;
    }

    .opsgate-remote-repair-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Hero band identity block */
.opsgate-remote-hero-band-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.opsgate-remote-hero-url {
    margin: 0;
    font-size: 13px;
    color: var(--og-text-2);
    word-break: break-all;
}

/* Scope card in secondary column sidebar */
.opsgate-remote-scope-card .opsgate-remote-meta-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.opsgate-remote-scope-card .opsgate-remote-meta-list span {
    font-size: 13px;
    color: var(--og-text-2);
}


.opsgate-remote-pairing-modal[hidden] {
    display: none;
}

.opsgate-remote-pairing-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
}

.opsgate-remote-pairing-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.opsgate-remote-pairing-dialog {
    position: relative;
    z-index: 1;
    width: min(680px, calc(100vw - 32px));
    margin: 8vh auto 0;
    border: 1px solid var(--og-border);
    border-radius: 20px;
    background: var(--og-card);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

.opsgate-remote-pairing-header,
.opsgate-remote-pairing-body {
    padding: 20px 22px;
}

.opsgate-remote-pairing-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--og-border);
}

.opsgate-remote-pairing-header h4 {
    margin: 4px 0 0;
    font-size: 22px;
    color: var(--og-text-1);
}

.opsgate-remote-pairing-close {
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
}

.opsgate-remote-pairing-form .notice.inline {
    margin: 0 0 16px;
}

.opsgate-remote-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.opsgate-remote-breakdown-card,
.opsgate-remote-action-card {
    padding: 18px;
    border: 1px solid var(--og-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
    box-shadow: var(--og-shadow-md);
}

.opsgate-remote-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
    gap: 18px;
}

.opsgate-remote-primary-column,
.opsgate-remote-secondary-column {
    display: grid;
    gap: 18px;
}

.opsgate-remote-progress-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.9fr);
    gap: 16px;
    align-items: start;
}

.opsgate-remote-progress-meter {
    height: 10px;
    margin: 14px 0 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe9f3;
}

.opsgate-remote-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
}

.opsgate-remote-phase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.opsgate-remote-phase-card {
    padding: 14px;
}

.opsgate-remote-phase-card.is-current {
    border-color: #4d8fd1;
    background: #edf6ff;
}

.opsgate-remote-phase-card.is-complete {
    border-color: #9cd4b1;
    background: #eefaf2;
}

.opsgate-remote-phase-card.is-failed {
    border-color: #d46a6a;
    background: #fff2f2;
}

.opsgate-remote-phase-title,
.opsgate-remote-phase-status {
    display: block;
}

.opsgate-remote-phase-title {
    color: #17324a;
    font-weight: 700;
}

.opsgate-remote-phase-status {
    margin-top: 6px;
    color: #60768b;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .opsgate-remote-hero-band,
    .opsgate-remote-hero-band-v2,
    .opsgate-remote-main-layout,
    .opsgate-remote-progress-grid,
    .opsgate-remote-breakdown-grid {
        grid-template-columns: 1fr;
    }
}

.opsgate-remote-companion-shell {
    display: grid;
    gap: 18px;
    margin: 18px 0 28px;
}

.opsgate-remote-hero,
.opsgate-remote-section,
.opsgate-remote-summary-card,
.opsgate-remote-stat-card,
.opsgate-remote-side-card,
.opsgate-remote-output-card,
.opsgate-remote-activity-card,
.opsgate-remote-phase-card {
    border: 1px solid var(--og-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--og-shadow-md);
}

.opsgate-remote-hero {
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(300px, 0.95fr);
    gap: 18px;
    padding: 24px;
    background:
        radial-gradient(circle at top right, rgba(19, 120, 194, 0.12), transparent 32%),
        linear-gradient(180deg, #fff 0%, #f4f8fc 100%);
}

.opsgate-remote-hero-main,
.opsgate-remote-hero-side,
.opsgate-remote-section,
.opsgate-remote-summary-card,
.opsgate-remote-output-card,
.opsgate-remote-activity-card {
    padding: 20px;
}

.opsgate-remote-hero-heading,
.opsgate-remote-section-head,
.opsgate-remote-activity-top,
.opsgate-remote-card-actions,
.opsgate-remote-progress-meta,
.opsgate-remote-meta-list,
.opsgate-remote-hero-pills,
.opsgate-remote-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.opsgate-remote-hero-heading,
.opsgate-remote-section-head {
    justify-content: space-between;
    align-items: flex-start;
}

.opsgate-remote-eyebrow,
.opsgate-remote-stat-label,
.opsgate-remote-output-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--og-text-2);
}

.opsgate-remote-hero h2,
.opsgate-remote-section h3,
.opsgate-remote-summary-card h3 {
    margin: 0 0 8px;
    color: var(--og-text-1);
    font-size: 28px;
    line-height: 1.1;
}

.opsgate-remote-summary-card h3,
.opsgate-remote-section h3 {
    font-size: 24px;
}

.opsgate-remote-hero p,
.opsgate-remote-summary-card p,
.opsgate-remote-stat-card p,
.opsgate-remote-side-card p,
.opsgate-remote-output-card p,
.opsgate-remote-activity-card p,
.opsgate-remote-progress-copy,
.opsgate-remote-progress-side p {
    margin: 0;
    color: var(--og-text-2);
    line-height: 1.6;
}

.opsgate-remote-hero-grid,
.opsgate-remote-summary-grid,
.opsgate-remote-output-grid,
.opsgate-remote-alert-grid,
.opsgate-remote-plan-grid,
.opsgate-remote-explainer-grid {
    display: grid;
    gap: 14px;
}

.opsgate-remote-hero-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
}

.opsgate-remote-summary-grid,
.opsgate-remote-output-grid,
.opsgate-remote-alert-grid,
.opsgate-remote-plan-grid,
.opsgate-remote-explainer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opsgate-remote-hero-side {
    display: grid;
    gap: 14px;
}

.opsgate-remote-side-card.is-soft,
.opsgate-remote-section.is-demoted {
    background: linear-gradient(180deg, #fbfcfd 0%, #f3f6fa 100%);
}

.opsgate-remote-pill,
.opsgate-remote-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eaf2fb;
    color: #264862;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-remote-pill.is-plan,
.opsgate-remote-chip.is-good {
    background: #dff6ec;
    color: #116341;
}

.opsgate-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--og-navy, #0d2137);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.opsgate-tier-badge-free { background: #60768b; }
.opsgate-tier-badge-starter { background: #0073aa; }
.opsgate-tier-badge-pro { background: #0d2137; }
.opsgate-tier-badge-agency { background: #116341; }

.opsgate-remote-meta-list {
    margin-top: 14px;
}

.opsgate-remote-meta-list span {
    font-size: 12px;
    color: var(--og-text-2);
}

.opsgate-remote-live-panel {
    margin-top: 16px;
    border: 1px solid var(--og-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #fcfdff 0%, #f4f8fc 100%);
    overflow: hidden;
}

.opsgate-remote-command-bar {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--og-border);
    background: linear-gradient(135deg, #17324a 0%, #295f84 100%);
}

.opsgate-remote-command-bar .opsgate-triage-command-bar-copy strong,
.opsgate-remote-command-bar .opsgate-triage-command-bar-copy span,
.opsgate-remote-command-bar .opsgate-triage-eyebrow {
    color: #f5f9fd;
}

.opsgate-remote-progress-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.9fr);
    gap: 18px;
    padding: 18px;
}

.opsgate-remote-progress-copy {
    margin-bottom: 14px;
}

.opsgate-remote-progress-meter {
    position: relative;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: #dce8f4;
}

.opsgate-remote-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
    transition: width 0.25s ease;
}

.opsgate-remote-progress-meta {
    margin: 14px 0 0;
}

.opsgate-remote-progress-meta span {
    font-size: 12px;
    color: var(--og-text-2);
}

.opsgate-remote-progress-side {
    padding: 18px;
    border-radius: 16px;
    background: #f3f7fb;
}

.opsgate-remote-phase-grid,
.opsgate-remote-support-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.opsgate-remote-phase-card {
    padding: 14px 12px;
    background: #fff;
}

.opsgate-remote-phase-card.is-current {
    border-color: #0e7bc8;
    box-shadow: 0 10px 28px rgba(14, 123, 200, 0.14);
}

.opsgate-remote-phase-card.is-complete {
    border-color: #7dd5aa;
    background: #f0fbf5;
}

.opsgate-remote-phase-card.is-failed {
    border-color: #ef8b8b;
    background: #fff5f5;
}

.opsgate-remote-phase-card.is-blocked {
    background: #f5f7fa;
    opacity: 0.8;
}

.opsgate-remote-phase-title,
.opsgate-remote-phase-status,
.opsgate-remote-explainer-title {
    display: block;
}

.opsgate-remote-phase-title,
.opsgate-remote-explainer-title {
    margin-bottom: 6px;
    color: var(--og-text-1);
    font-weight: 700;
}

.opsgate-remote-phase-status {
    font-size: 12px;
    color: var(--og-text-2);
}

.opsgate-remote-explainer-card {
    padding: 18px;
    border: 1px solid var(--og-border);
    border-radius: 16px;
    background: var(--og-card);
}

.opsgate-remote-explainer-card.is-locked {
    background: #fbfcfd;
}

.opsgate-remote-explainer-card ul {
    margin: 12px 0 0 18px;
    color: var(--og-text-2);
}

.opsgate-remote-explainer-card li {
    margin: 0 0 8px;
}

.opsgate-remote-output-card strong,
.opsgate-remote-summary-card strong,
.opsgate-remote-stat-card strong,
.opsgate-remote-side-card strong,
.opsgate-remote-activity-card strong,
.opsgate-remote-progress-side strong {
    display: block;
    margin-bottom: 8px;
    color: var(--og-text-1);
    font-size: 20px;
    line-height: 1.25;
}

.opsgate-remote-output-card.is-locked {
    background: #fafbfd;
}

.opsgate-remote-activity-list {
    display: grid;
    gap: 12px;
}

.opsgate-remote-activity-card.is-empty {
    border-style: dashed;
    background: #fcfdff;
}

.opsgate-remote-support-note {
    margin: 10px 0 0;
}

.opsgate-remote-support-details {
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid var(--og-border);
    border-radius: 16px;
    background: var(--og-bg);
}

.opsgate-remote-support-details summary {
    cursor: pointer;
    color: var(--og-text-1);
    font-weight: 700;
}

.opsgate-remote-support-warning {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff2e7;
    color: #7b4a1d;
}

@media (max-width: 1120px) {
    .opsgate-remote-hero,
    .opsgate-remote-progress-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-remote-hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsgate-remote-phase-grid,
    .opsgate-remote-support-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 782px) {
    .opsgate-remote-hero,
    .opsgate-remote-section,
    .opsgate-remote-summary-card,
    .opsgate-remote-output-card,
    .opsgate-remote-activity-card {
        padding: 16px;
    }

    .opsgate-remote-hero-grid,
    .opsgate-remote-summary-grid,
    .opsgate-remote-output-grid,
    .opsgate-remote-alert-grid,
    .opsgate-remote-plan-grid,
    .opsgate-remote-explainer-grid,
    .opsgate-remote-phase-grid,
    .opsgate-remote-support-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-remote-hero h2 {
        font-size: 24px;
    }

    .opsgate-remote-summary-card h3,
    .opsgate-remote-section h3 {
        font-size: 22px;
    }

    .opsgate-remote-card-actions .button,
    .opsgate-remote-command-bar .button {
        width: 100%;
        justify-content: center;
    }
}

.opsgate-admin-tab-triage .wp-heading-inline {
    margin-bottom: 10px;
    font-size: 34px;
    font-weight: 700;
}

.opsgate-admin-tab-reports .wp-heading-inline {
    margin-bottom: 10px;
    font-size: 34px;
    font-weight: 700;
}

.opsgate-admin-tab-alerts .wp-heading-inline,
.opsgate-admin-tab-activity .wp-heading-inline,
.opsgate-admin-tab-clients .wp-heading-inline,
.opsgate-admin-tab-billing .wp-heading-inline,
.opsgate-admin-tab-settings .wp-heading-inline {
    margin-bottom: 10px;
    font-size: 34px;
    font-weight: 700;
}

.opsgate-admin-overview .wp-header-end {
    display: none;
}

.opsgate-admin-tab-triage .wp-header-end {
    display: none;
}

.opsgate-admin-tab-reports .wp-header-end {
    display: none;
}

.opsgate-admin-tab-alerts .wp-header-end,
.opsgate-admin-tab-activity .wp-header-end,
.opsgate-admin-tab-clients .wp-header-end,
.opsgate-admin-tab-billing .wp-header-end,
.opsgate-admin-tab-settings .wp-header-end {
    display: none;
}

.opsgate-admin-overview .opsgate-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 16px;
    padding: 0 0 8px;
    border-bottom: 1px solid #d6e1ee;
}

.opsgate-admin-tab-triage .opsgate-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 16px;
    padding: 0 0 8px;
    border-bottom: 1px solid #d6e1ee;
}

.opsgate-admin-tab-reports .opsgate-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 16px;
    padding: 0 0 8px;
    border-bottom: 1px solid #d6e1ee;
}

.opsgate-admin-tab-alerts .opsgate-nav-tabs,
.opsgate-admin-tab-activity .opsgate-nav-tabs,
.opsgate-admin-tab-clients .opsgate-nav-tabs,
.opsgate-admin-tab-billing .opsgate-nav-tabs,
.opsgate-admin-tab-settings .opsgate-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 16px;
    padding: 0 0 8px;
    border-bottom: 1px solid #d6e1ee;
}

.opsgate-admin-overview .opsgate-nav-tabs .nav-tab {
    margin-left: 0;
    padding: 12px 14px 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #5f7690;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.opsgate-admin-tab-triage .opsgate-nav-tabs .nav-tab {
    margin-left: 0;
    padding: 12px 14px 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #5f7690;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.opsgate-admin-tab-reports .opsgate-nav-tabs .nav-tab {
    margin-left: 0;
    padding: 12px 14px 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #5f7690;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.opsgate-admin-tab-alerts .opsgate-nav-tabs .nav-tab,
.opsgate-admin-tab-activity .opsgate-nav-tabs .nav-tab,
.opsgate-admin-tab-clients .opsgate-nav-tabs .nav-tab,
.opsgate-admin-tab-billing .opsgate-nav-tabs .nav-tab,
.opsgate-admin-tab-settings .opsgate-nav-tabs .nav-tab {
    margin-left: 0;
    padding: 12px 14px 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #5f7690;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.opsgate-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.opsgate-switch .opsgate-switch-track {
    position: relative;
    width: 46px;
    height: 26px;
    display: inline-block;
}

.opsgate-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.opsgate-overview-hero,
.opsgate-triage-hero,
.opsgate-pricing-hero {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 18px;
    margin: 18px 0;
}

.opsgate-overview-hero-main,
.opsgate-triage-hero-main,
.opsgate-pricing-hero-main,
.opsgate-overview-hero-side-card,
.opsgate-triage-hero-side-card,
.opsgate-pricing-hero-side-card,
.opsgate-reports-trust-card,
.opsgate-alerts-channel-family-card,
.opsgate-activity-summary-card {
    padding: 18px;
    border: 1px solid #d8e4ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 35, 52, 0.05);
}

.opsgate-overview-hero-side,
.opsgate-triage-hero-side,
.opsgate-pricing-hero-side {
    display: grid;
    gap: 12px;
}

.opsgate-overview-hero-package-row,
.opsgate-pricing-hero-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 8px 0 10px;
}

.opsgate-overview-hero-title,
.opsgate-triage-hero-title,
.opsgate-pricing-hero-title-row h3,
.opsgate-overview-hero-side-title,
.opsgate-triage-hero-side-title,
.opsgate-pricing-hero-side-title,
.opsgate-reports-trust-value {
    margin: 0;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    color: #163247;
}

.opsgate-overview-hero-copy,
.opsgate-triage-hero-copy,
.opsgate-pricing-hero-copy,
.opsgate-overview-hero-side-copy,
.opsgate-triage-hero-side-copy,
.opsgate-pricing-hero-side-card p,
.opsgate-reports-trust-copy {
    margin: 0 0 12px;
    color: #4d6174;
    line-height: 1.55;
}

.opsgate-overview-overline-pills,
.opsgate-reports-output-badge-row {
    margin: 0 0 12px;
}

.opsgate-reports-trust-hero,
.opsgate-alerts-channel-family-grid,
.opsgate-activity-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.opsgate-pricing-card.is-current {
    border-color: #0b6db6;
    box-shadow: 0 12px 26px rgba(11, 109, 182, 0.1);
}

.opsgate-pricing-badge-hero {
    font-size: 13px;
    padding: 6px 10px;
}

.opsgate-advanced-details {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #d8e4ef;
    border-radius: 14px;
    background: #f7fafc;
}

.opsgate-advanced-details summary {
    cursor: pointer;
    color: #163247;
}

.opsgate-overview-summary-strip {
    align-items: stretch;
}

.opsgate-pricing-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.opsgate-pricing-summary-card {
    padding: 18px;
    border: 1px solid #d8e4ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 35, 52, 0.05);
}

.opsgate-alerts-channel-family-card .opsgate-alerts-detail-value,
.opsgate-activity-summary-card .opsgate-activity-status-value {
    display: block;
    margin: 8px 0 10px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    color: #163247;
}

@media screen and (max-width: 960px) {
    .opsgate-overview-hero,
    .opsgate-triage-hero,
    .opsgate-pricing-hero,
    .opsgate-pricing-summary-grid,
    .opsgate-reports-trust-hero,
    .opsgate-alerts-channel-family-grid,
    .opsgate-activity-summary-grid {
        grid-template-columns: 1fr;
    }
}

.opsgate-switch .opsgate-slider {
    position: absolute;
    inset: 0;
    background: #c3c4c7;
    border-radius: 999px;
    transition: 0.18s ease;
}

.opsgate-switch .opsgate-slider:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: 0.18s ease;
}

.opsgate-switch input:checked + .opsgate-slider {
    background: #2271b1;
}

.opsgate-switch input:checked + .opsgate-slider:before {
    transform: translateX(20px);
}

.opsgate-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 10px;
}

.opsgate-pricing-card {
    border: 1px solid #d8e4ef;
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 35, 52, 0.05);
}

.opsgate-pricing-card ul {
    margin: 8px 0 0 18px;
}

.opsgate-pricing-card p {
    line-height: 1.55;
}

.opsgate-pricing-card h4 {
    margin: 0 0 10px;
    color: #163247;
    font-size: 22px;
}

.opsgate-pricing-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    background: #f0f0f0;
    margin-left: 6px;
}

.opsgate-admin-tab-billing .opsgate-pricing-form {
    display: grid;
    gap: 20px;
}

.opsgate-billing-hero {
    grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.9fr);
    gap: 16px;
    margin: 16px 0 10px;
}

.opsgate-billing-hero .opsgate-pricing-hero-main,
.opsgate-billing-hero .opsgate-pricing-hero-side-card {
    min-height: 100%;
    padding: 20px 22px;
    border-radius: 20px;
    border-color: #d6e1ec;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 14px 30px rgba(15, 35, 52, 0.06);
}

.opsgate-billing-hero .opsgate-pricing-hero-main {
    display: grid;
    gap: 14px;
}

.opsgate-billing-hero .opsgate-pricing-hero-title-row {
    margin: 4px 0 0;
}

.opsgate-billing-hero .opsgate-pricing-hero-title-row h3 {
    font-size: 38px;
    line-height: 1.02;
}

.opsgate-billing-hero .opsgate-pricing-hero-copy {
    margin: 0;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.55;
}

.opsgate-billing-hero-footprint {
    margin: -4px 0 0;
    color: #5b7389;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
}

.opsgate-billing-hero-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.opsgate-billing-hero-group {
    min-width: 0;
    padding-top: 4px;
    border-top: 1px solid #e3ebf3;
}

.opsgate-billing-hero-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}

.opsgate-billing-hero-list li,
.opsgate-billing-hero-empty {
    color: #36506b;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-billing-hero-list li {
    position: relative;
    padding-left: 13px;
}

.opsgate-billing-hero-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2271b1;
}

.opsgate-billing-hero-empty {
    margin: 8px 0 0;
}

.opsgate-billing-hero-side {
    align-content: stretch;
}

.opsgate-billing-next-card {
    display: grid;
    gap: 10px;
    align-content: start;
}

.opsgate-billing-next-card .opsgate-pricing-hero-side-title {
    font-size: 28px;
    line-height: 1.08;
}

.opsgate-billing-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.opsgate-billing-support-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.opsgate-billing-support-card {
    padding: 16px 18px;
    border-radius: 18px;
}

.opsgate-billing-support-card .opsgate-pricing-hero-side-title {
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.15;
}

.opsgate-billing-support-card p {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.opsgate-billing-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 2px;
}

.opsgate-billing-section-head .title {
    margin: 0;
}

.opsgate-billing-section-head .description {
    margin: 6px 0 0;
}

.opsgate-billing-section-head-secondary {
    margin-top: 4px;
}

.opsgate-billing-section-head-context {
    margin-top: 32px;
    padding-top: 6px;
}

.opsgate-billing-comparison-grid {
    align-items: stretch;
    gap: 18px;
    margin-top: 0;
    margin-bottom: 24px;
}

.opsgate-billing-tier-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
    padding: 18px 18px 16px;
}

.opsgate-billing-tier-card.is-current {
    background: linear-gradient(180deg, #ffffff 0%, #f1f8ff 100%);
}

.opsgate-billing-tier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.opsgate-billing-tier-head h4 {
    margin: 0;
}

.opsgate-billing-tier-card .opsgate-pricing-badge {
    margin-left: 0;
}

.opsgate-billing-tier-card.is-current .opsgate-pricing-badge {
    padding: 4px 10px;
    border: 1px solid #b9e4c8;
    border-radius: 999px;
    background: #edf9f1;
    color: #167c48;
    font-weight: 700;
}

.opsgate-billing-tier-price {
    color: #0f2540;
    font-size: 24px;
    line-height: 1.12;
    font-weight: 700;
}

.opsgate-billing-tier-footprint {
    margin-top: -6px;
    color: #5c748a;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
}

.opsgate-billing-tier-summary,
.opsgate-billing-tier-note {
    margin: 0;
}

.opsgate-billing-tier-summary {
    color: #223c56;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}

.opsgate-billing-tier-note {
    color: #526a81;
    font-size: 13px;
    line-height: 1.5;
}

.opsgate-billing-tier-groups {
    display: grid;
    gap: 12px;
}

.opsgate-billing-tier-group {
    padding-top: 10px;
    border-top: 1px solid #e5edf5;
}

.opsgate-billing-tier-group ul {
    margin: 8px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
}

.opsgate-billing-tier-group li {
    color: #38526b;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-billing-tier-footer {
    margin-top: auto;
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #e5edf5;
}

.opsgate-billing-tier-upgrade-note {
    color: #4d657b;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-billing-tier-footer form {
    margin: 0;
}

.opsgate-billing-tier-footer .button {
    width: 100%;
    justify-content: center;
    min-height: 38px;
    border-radius: 12px;
}

.opsgate-billing-capability-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 10px;
}

.opsgate-billing-capability-grid .opsgate-alerts-channel-family-card {
    min-height: 100%;
}

.opsgate-billing-confidence-card {
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
}

.opsgate-billing-payment-form {
    margin-top: 4px;
    margin-bottom: 30px;
}

.opsgate-billing-operator-details {
    margin-top: 6px !important;
    margin-bottom: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%);
}

.opsgate-billing-operator-body {
    display: grid;
    gap: 18px;
    padding-top: 16px;
}

.opsgate-billing-payment-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.opsgate-billing-payment-mode-card {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
}

.opsgate-billing-payment-mode-card .opsgate-pricing-hero-side-title {
    margin-top: 8px;
    font-size: 22px;
    line-height: 1.15;
}

.opsgate-billing-payment-mode-card p {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.opsgate-billing-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.opsgate-billing-payment-field {
    min-width: 0;
}

.opsgate-billing-payment-field label {
    display: block;
    margin-bottom: 6px;
    color: #163247;
}

.opsgate-billing-payment-field input {
    width: 100%;
    max-width: none;
}

.opsgate-billing-payment-field .description {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
}

.opsgate-billing-payment-save {
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.opsgate-billing-payment-save .button {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 12px;
}

.opsgate-admin-overview .opsgate-nav-tabs .nav-tab:hover {
    background: rgba(31, 111, 235, 0.05);
    border-bottom-color: #bdd2f3;
    color: #244260;
}

.opsgate-admin-tab-triage .opsgate-nav-tabs .nav-tab:hover {
    background: rgba(31, 111, 235, 0.05);
    border-bottom-color: #bdd2f3;
    color: #244260;
}

.opsgate-admin-tab-reports .opsgate-nav-tabs .nav-tab:hover {
    background: rgba(31, 111, 235, 0.05);
    border-bottom-color: #bdd2f3;
    color: #244260;
}

.opsgate-admin-tab-alerts .opsgate-nav-tabs .nav-tab:hover,
.opsgate-admin-tab-activity .opsgate-nav-tabs .nav-tab:hover,
.opsgate-admin-tab-clients .opsgate-nav-tabs .nav-tab:hover,
.opsgate-admin-tab-billing .opsgate-nav-tabs .nav-tab:hover,
.opsgate-admin-tab-settings .opsgate-nav-tabs .nav-tab:hover {
    background: rgba(31, 111, 235, 0.05);
    border-bottom-color: #bdd2f3;
    color: #244260;
}

.opsgate-admin-overview .opsgate-nav-tabs .nav-tab-active {
    background: transparent;
    border-bottom-color: #1f6feb;
    color: #1f6feb;
    box-shadow: inset 0 -1px 0 #1f6feb;
}

.opsgate-admin-tab-triage .opsgate-nav-tabs .nav-tab-active {
    background: transparent;
    border-bottom-color: #1f6feb;
    color: #1f6feb;
    box-shadow: inset 0 -1px 0 #1f6feb;
}

.opsgate-admin-tab-reports .opsgate-nav-tabs .nav-tab-active {
    background: transparent;
    border-bottom-color: #1f6feb;
    color: #1f6feb;
    box-shadow: inset 0 -1px 0 #1f6feb;
}

.opsgate-admin-tab-alerts .opsgate-nav-tabs .nav-tab-active,
.opsgate-admin-tab-activity .opsgate-nav-tabs .nav-tab-active,
.opsgate-admin-tab-clients .opsgate-nav-tabs .nav-tab-active,
.opsgate-admin-tab-billing .opsgate-nav-tabs .nav-tab-active,
.opsgate-admin-tab-settings .opsgate-nav-tabs .nav-tab-active {
    background: transparent;
    border-bottom-color: #1f6feb;
    color: #1f6feb;
    box-shadow: inset 0 -1px 0 #1f6feb;
}

.opsgate-admin-overview .opsgate-nav-tabs .dashicons {
    display: none;
}

.opsgate-admin-tab-triage .opsgate-nav-tabs .dashicons {
    display: none;
}

.opsgate-admin-tab-reports .opsgate-nav-tabs .dashicons {
    display: none;
}

.opsgate-admin-tab-alerts .opsgate-nav-tabs .dashicons,
.opsgate-admin-tab-activity .opsgate-nav-tabs .dashicons,
.opsgate-admin-tab-clients .opsgate-nav-tabs .dashicons,
.opsgate-admin-tab-billing .opsgate-nav-tabs .dashicons,
.opsgate-admin-tab-settings .opsgate-nav-tabs .dashicons {
    display: none;
}

/* ===== CARDS ===== */
.opsgate-card {
    background: #fff;
    border: 1px solid #ccd0d4;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    margin: 20px 0;
    padding: 25px;
    border-radius: 8px;
}

.opsgate-card h2 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1.5em;
    display: flex;
    align-items: center;
}

.opsgate-card h2 .dashicons {
    margin-right: 10px;
    color: #0073aa;
}

/* =========================================================
   SYSTEM STATUS BADGES
   - Keep your current gradient approach.
   - Provide stable class-based variants (optional).
   - Keep inline-style matching so current PHP still works.
   ========================================================= */
.opsgate-badges-container {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0 25px;
    gap: 15px;
}

/* Baseline badge */
.opsgate-badge {
    display: inline-flex !important;
    align-items: center !important;
    margin: 8px 16px 8px 0 !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12) !important;
    border-left: 5px solid !important;
    transition: all 0.3s ease !important;
    min-width: 200px;
}

.opsgate-badge:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
}

/* Inline-style matching (backward-compatible with current PHP inline bg) */
.opsgate-badge[style*="#2e7d32"] { /* OK */
    background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%) !important;
    border-left-color: #66bb6a !important;
}

.opsgate-badge[style*="#f57c00"] { /* WARN */
    background: linear-gradient(135deg, #f57c00 0%, #ffa726 100%) !important;
    border-left-color: #ffb74d !important;
}

.opsgate-badge[style*="#d32f2f"] { /* ERR */
    background: linear-gradient(135deg, #d32f2f 0%, #e53935 100%) !important;
    border-left-color: #ef5350 !important;
}

.opsgate-badge[style*="#1976d2"] { /* INFO */
    background: linear-gradient(135deg, #1976d2 0%, #1e88e5 100%) !important;
    border-left-color: #42a5f5 !important;
}

/* Optional explicit badge variants (do not require PHP changes; safe future-proofing) */
.opsgate-badge.brighter-ok {
    background: linear-gradient(135deg, #388e3c 0%, #4caf50 100%) !important;
    border-left-color: #81c784 !important;
}

.opsgate-badge.brighter-warn {
    background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%) !important;
    border-left-color: #ffcc80 !important;
}

.opsgate-badge.brighter-err {
    background: linear-gradient(135deg, #e53935 0%, #ef5350 100%) !important;
    border-left-color: #e57373 !important;
}

.opsgate-badge.brighter-info {
    background: linear-gradient(135deg, #1e88e5 0%, #42a5f5 100%) !important;
    border-left-color: #90caf9 !important;
}

/* =========================================================
   TELEMETRY DASHBOARD
   ========================================================= */
.opsgate-telemetry-header {
    margin-bottom: 25px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #0073aa;
}

.opsgate-telemetry-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.opsgate-telemetry-status .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.opsgate-telemetry-status.enabled .status-indicator {
    background: #46b450;
    animation: pulse 2s infinite;
}

.opsgate-telemetry-status.disabled .status-indicator {
    background: #a7aaad;
}

.opsgate-telemetry-table-container {
    margin: 20px 0;
    overflow: visible;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.opsgate-telemetry-table {
    border: none;
    border-collapse: collapse;
    margin: 0;
    width: 100%;
}

/* REQUIRED: make "Metric / Count / Description" white while keeping background */
.opsgate-telemetry-table thead th,
.opsgate-telemetry-table thead th * {
    background: linear-gradient(135deg, #0073aa 0%, #005a87 100%);
    color: #ffffff !important;
    border: none;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.opsgate-telemetry-table tbody tr {
    transition: background-color 0.2s ease;
}

.opsgate-telemetry-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.opsgate-telemetry-table tbody tr:hover {
    background-color: #f0f6fc;
}

.opsgate-telemetry-table td {
    padding: 18px 20px;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.opsgate-telemetry-table .column-metric { width: 35%; }
.opsgate-telemetry-table .column-count { width: 20%; }
.opsgate-telemetry-table .column-description { width: 45%; }

.metric-name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #1d2327;
    font-size: 15px;
}

.metric-name .dashicons {
    color: #0073aa;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.metric-count .count-value {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, #0073aa 0%, #005a87 100%);
    color: #ffffff;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,115,170,0.2);
}

.metric-desc {
    color: #646970;
    font-size: 14px;
    line-height: 1.5;
}

/* =========================================================
   SETTINGS FORM
   ========================================================= */
.opsgate-settings-form {
    max-width: none;
}

.opsgate-toggle {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    margin-right: 20px;
}

.opsgate-toggle input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.opsgate-toggle .toggle-slider {
    width: 50px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    position: relative;
    margin-right: 10px;
    transition: background-color 0.3s;
}

.opsgate-toggle .toggle-slider:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.opsgate-toggle input:checked + .toggle-slider {
    background: #0073aa;
}

.opsgate-toggle input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

.opsgate-toggle .toggle-label {
    font-weight: 500;
}

/* Toggle label should reflect checkbox state without JS */
.opsgate-toggle .toggle-label-enabled { display: none; }
.opsgate-toggle input:checked + .toggle-slider + .toggle-label-disabled { display: none; }
.opsgate-toggle input:checked + .toggle-slider + .toggle-label-disabled + .toggle-label-enabled { display: inline; }

/* =========================================================
   SERVICES TAB
   ========================================================= */
.table-responsive {
    overflow-x: auto;
    margin: 20px 0;
}

.wp-list-table .column-service { width: 25%; }
.wp-list-table .column-status { width: 15%; }
.wp-list-table .column-plan { width: 15%; }
.wp-list-table .column-last-audit { width: 45%; }

.opsgate-plan-select {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #8c8f94;
    background: #ffffff;
    min-width: 100px;
}

.plan-free { color: #50575e; }
.plan-starter { color: #0073aa; }
.plan-pro { color: #1d2327; font-weight: 600; }

.last-scan-time {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.last-scan-time .dashicons {
    margin-right: 5px;
    color: #646970;
}

.output-files {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.file-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.file-badge.json { background: #e1f5fe; color: #0288d1; }
.file-badge.csv { background: #e8f5e8; color: #2e7d32; }
.file-badge.pdf { background: #fff3e0; color: #ef6c00; }

.submit-box {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #f0f0f0;
}

/* Audit card + button */
.opsgate-audit-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-left: 4px solid #0073aa;
}

.opsgate-audit-form {
    margin-top: 20px;
}

.opsgate-audit-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
}

.opsgate-audit-button .dashicons {
    margin-right: 8px;
}

.opsgate-audit-button:not(:disabled):hover {
    background: #0073aa;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,115,170,0.2);
}

.opsgate-audit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* =========================================================
   SCHEDULES TAB
   ========================================================= */
.opsgate-schedules-form .wp-list-table th {
    width: 20%;
}

.opsgate-schedule-mode,
.opsgate-dow-select,
.opsgate-dom-input,
.opsgate-time-input {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #8c8f94;
    background: #ffffff;
    min-width: 120px;
}

.opsgate-time-input { min-width: 100px; }
.opsgate-dom-input { min-width: 80px; }

/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */
@media screen and (max-width: 782px) {
    .opsgate-badges-container {
        flex-direction: column;
    }

    .opsgate-badge {
        width: 100%;
        margin: 8px 0;
    }

    .opsgate-nav-tabs .nav-tab {
        margin-bottom: 5px;
        width: 100%;
        justify-content: center;
    }

    /* Telemetry table: safe stacked layout (no data-label dependency) */
    .opsgate-telemetry-table thead {
        display: none;
    }

    .opsgate-telemetry-table,
    .opsgate-telemetry-table tbody,
    .opsgate-telemetry-table tr,
    .opsgate-telemetry-table td {
        display: block;
        width: 100%;
    }

    .opsgate-telemetry-table tr {
        margin-bottom: 15px;
        border: 1px solid #e2e4e7;
        border-radius: 8px;
        overflow: hidden;
        background: #ffffff;
    }

    .opsgate-telemetry-table td {
        padding: 14px 15px;
        border-bottom: 1px solid #f0f0f0;
    }

    .opsgate-telemetry-table td:last-child {
        border-bottom: none;
    }

    /* Make the three columns visually distinct without requiring HTML changes */
    .opsgate-telemetry-table td.metric-count {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .wp-list-table {
        font-size: 14px;
    }

    .wp-list-table th,
    .wp-list-table td {
        padding: 10px 8px;
    }
}

@media screen and (max-width: 600px) {
    .opsgate-card {
        padding: 15px;
        margin: 15px 0;
    }

    .opsgate-card h2 {
        font-size: 1.3em;
    }
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(70, 180, 80, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(70, 180, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(70, 180, 80, 0); }
}

@keyframes count-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.metric-count .count-value {
    animation: count-up 0.5s ease-out;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
.opsgate-toggle input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(0,115,170,0.3);
}

.opsgate-plan-select:focus,
.opsgate-schedule-mode:focus,
.opsgate-time-input:focus,
.opsgate-dow-select:focus,
.opsgate-dom-input:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0,115,170,0.2);
    outline: none;
}

.opsgate-audit-button:focus {
    box-shadow: 0 0 0 3px rgba(0,115,170,0.3);
    outline: none;
}

/* OpsGate Day 10 – Compact Monthly Plan Rollup boxes */
.opsgate-card h3 {
  margin-bottom: 6px;
}

.opsgate-card p {
  margin: 0 0 3px 0;
  line-height: 1.35;
}

.opsgate-card .opsgate-rollup-box {
  padding: 8px 10px;
}
/* Keep Monthly Rollup compact (stop full-width stretch) */
.opsgate-rollup-wrap {
  max-width: 900px;
}

/* =========================================================
   OpsGate Day 10 – Rollup header badges (Weekly/Monthly)
   ========================================================= */
.opsgate-rollup-badge{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  vertical-align:middle;
  border:1px solid transparent;
}

/* Green */
.opsgate-badge--good{
  background:#e8f5e9;
  color:#2e7d32;
  border-color:#a5d6a7;
}

/* Orange */
.opsgate-badge--warn{
  background:#fff3e0;
  color:#ef6c00;
  border-color:#ffcc80;
}

/* Red */
.opsgate-badge--bad{
  background:#ffebee;
  color:#c62828;
  border-color:#ef9a9a;
}

/* Gray */
.opsgate-badge--neutral{
  background:#f1f1f1;
  color:#50575e;
  border-color:#dcdcde;
}

/* =========================================================
   OPSGATE — WP-ADMIN FOOTER OVERLAP GUARDRAIL
   Ensures #wpfooter never overlays OpsGate content.
   ========================================================= */
.toplevel_page_opsgate #wpbody-content,
.opsgate_page_opsgate #wpbody-content {
    padding-bottom: 120px;
}

/* Schedules: ensure submit + helper text layout is stable */
.toplevel_page_opsgate .submit-box,
.opsgate_page_opsgate .submit-box {
    margin-top: 16px;
    margin-bottom: 10px;
    clear: both;
}

.toplevel_page_opsgate .submit-box .button,
.opsgate_page_opsgate .submit-box .button {
    display: inline-block;
}

.toplevel_page_opsgate .opsgate-schedules-form .description,
.opsgate_page_opsgate .opsgate-schedules-form .description {
    display: block;
    margin-top: 12px;
}
/* =========================================================
   OPSGATE — WP ADMIN FOOTER LAYOUT FIX (SCOPED)
   Prevent footer overlap on OpsGate screens only.
   ========================================================= */
.toplevel_page_opsgate #wpfooter,
.opsgate_page_opsgate #wpfooter {
    position: relative !important;
    clear: both !important;
    margin-top: 24px !important;
}

.toplevel_page_opsgate #wpbody-content,
.opsgate_page_opsgate #wpbody-content {
    min-height: calc(100vh - 140px) !important;
}

/* =========================================================
   OPSGATE — OVERVIEW DASHBOARD
   Scoped dashboard layout for the Overview tab only.
   ========================================================= */
.opsgate-overview-dashboard {
    width: min(1840px, calc(100vw - 178px));
    max-width: none;
    margin: 0 -28px 0 0;
    padding: 16px 18px 16px;
    border-radius: 20px;
    border-color: #d3ddea;
    box-shadow: 0 24px 48px rgba(15, 42, 71, 0.1);
    background:
        radial-gradient(circle at top left, rgba(31, 111, 235, 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.opsgate-overview-header {
    display: block;
    margin-bottom: 10px;
}

.opsgate-overview-header-copy {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.opsgate-overview-dashboard .opsgate-overview-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
    color: #0f2540;
}

.opsgate-overview-dashboard .opsgate-overview-subtitle {
    margin: 0;
    color: #48627f;
    font-size: 13px;
}

.opsgate-overview-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.opsgate-overview-action-form {
    margin: 0;
}

.opsgate-overview-action-primary,
.opsgate-overview-action-link {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 12px;
    font-weight: 600;
}

.opsgate-overview-action-primary.button.button-primary {
    background: linear-gradient(180deg, #1f6feb 0%, #165dbe 100%);
    border-color: #165dbe;
    box-shadow: 0 10px 18px rgba(31, 111, 235, 0.18);
}

.opsgate-overview-action-link.button.button-secondary {
    border-color: #d7dfe8;
    background: rgba(255, 255, 255, 0.86);
    color: #0f2540;
}

.opsgate-overview-dashboard .opsgate-overview-hero {
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.88fr);
    gap: 10px;
    margin: 8px 0 12px;
}

.opsgate-overview-dashboard .opsgate-overview-hero-current-state {
    padding: 10px;
    border: 1px solid #d7e2ee;
    border-radius: 18px;
    background: linear-gradient(180deg, #edf5ff 0%, #ffffff 100%);
    box-shadow: 0 14px 28px rgba(16, 39, 67, 0.05);
}

.opsgate-overview-dashboard .opsgate-overview-hero-current-state .opsgate-overview-hero-main,
.opsgate-overview-dashboard .opsgate-overview-hero-current-state .opsgate-overview-hero-side-card {
    padding: 14px 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.opsgate-overview-dashboard .opsgate-overview-hero-side {
    align-items: stretch;
    padding-left: 12px;
    border-left: 1px solid #dce7f1;
}

.opsgate-overview-dashboard .opsgate-overview-hero-side-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
}

.opsgate-overview-dashboard .opsgate-overview-hero-side-card-action {
    justify-content: flex-start;
    gap: 6px;
}

.opsgate-overview-hero-side-card-action .opsgate-overview-action-form,
.opsgate-overview-hero-side-card-action .opsgate-overview-action-primary.button.button-primary {
    align-self: flex-start;
}

.opsgate-overview-hero-side-card-action .opsgate-overview-hero-side-copy {
    margin-bottom: 6px;
}

.opsgate-overview-hero-side-card-action .opsgate-overview-action-primary.button.button-primary {
    min-height: 32px;
    padding: 0 18px;
    border-radius: 999px;
    box-shadow: 0 8px 16px rgba(31, 111, 235, 0.16);
}

.opsgate-overview-hero-current {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
    align-items: flex-start;
}

.opsgate-overview-hero-score-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.opsgate-overview-hero-score {
    color: #0f2540;
    font-size: 66px;
    line-height: 0.92;
    font-weight: 800;
}

.opsgate-overview-hero-score-label {
    color: #7588a3;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.opsgate-overview-hero-body {
    min-width: 0;
}

.opsgate-overview-hero-meta {
    margin: 0 0 12px;
}

.opsgate-overview-dashboard .opsgate-overview-hero-title {
    margin-bottom: 8px;
    font-size: 34px;
    line-height: 1.08;
}

.opsgate-overview-dashboard .opsgate-overview-hero-copy {
    max-width: 720px;
    margin: 0 0 10px;
    color: #48627f;
    font-size: 14px;
    line-height: 1.55;
}

.opsgate-overview-dashboard .opsgate-overview-hero-side-title {
    font-size: 26px;
    line-height: 1.12;
}

.opsgate-overview-dashboard .opsgate-overview-hero-side-copy {
    margin-top: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
}

.opsgate-overview-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.opsgate-overview-panel-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #356ba7;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(108, 150, 198, 0.28);
}

.opsgate-overview-status-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

.opsgate-overview-status-item {
    min-height: 58px;
    padding: 10px 14px;
    border: 1px solid #dce6f0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 6px 14px rgba(16, 39, 67, 0.035);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.opsgate-overview-status-item:last-child {
    border-right: 0;
}

.opsgate-overview-status-label {
    color: #6d8298;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.opsgate-overview-status-value {
    color: #22364d;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    white-space: normal;
}

.opsgate-overview-top-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1.35fr) repeat(3, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.opsgate-overview-panel,
.opsgate-overview-surface,
.opsgate-overview-metric-card,
.opsgate-overview-mini-card,
.opsgate-overview-activity-item,
.opsgate-overview-empty-state {
    border: 1px solid #d7e2ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 18px rgba(16, 39, 67, 0.04);
}

.opsgate-overview-panel {
    padding: 14px 16px 12px;
    min-height: 132px;
}

.opsgate-overview-panel-posture {
    background: linear-gradient(180deg, #edf5ff 0%, #dfeeff 100%);
}

.opsgate-overview-panel-alerts {
    background: linear-gradient(180deg, #fff8ec 0%, #fff4de 100%);
    border-color: #f1d39b;
}

.opsgate-overview-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7588a3;
}

.opsgate-overview-panel-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.opsgate-overview-panel-value {
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    color: #0f2540;
}

.opsgate-overview-panel-value-scope {
    font-size: 17px;
    line-height: 1.35;
}

.opsgate-overview-panel-subvalue {
    margin: 4px 0 0;
    color: #66819f;
    font-size: 12px;
}

.opsgate-overview-dashboard .opsgate-overview-panel-meta {
    margin: 10px 0 0;
    color: #5d738d;
    font-size: 12px;
}

.opsgate-overview-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.opsgate-overview-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-overview-pill-good {
    background: #e8f5e9;
    color: #1f7a35;
    border-color: #b9dfbe;
}

.opsgate-overview-pill-warn {
    background: #fff3de;
    color: #b86a00;
    border-color: #f2cf8c;
}

.opsgate-overview-pill-bad {
    background: #ffece9;
    color: #c03e31;
    border-color: #f0bbb3;
}

.opsgate-overview-pill-neutral {
    background: #eef3f8;
    color: #55687d;
    border-color: #d6e0ea;
}

.opsgate-overview-pill-soft-good,
.opsgate-overview-pill-soft-success {
    background: #edf9f0;
    color: #1f7a35;
    border-color: #c9e7cf;
}

.opsgate-overview-pill-soft-warn,
.opsgate-overview-pill-soft-warning {
    background: #fff4e3;
    color: #b86a00;
    border-color: #f1d097;
}

.opsgate-overview-pill-soft-bad,
.opsgate-overview-pill-soft-danger {
    background: #fff0ee;
    color: #c03e31;
    border-color: #efc3bc;
}

.opsgate-overview-pill-soft-info {
    background: #e9f2ff;
    color: #165dbe;
    border-color: #c6d9fb;
}

.opsgate-overview-pill-soft-neutral {
    background: #f3f6fa;
    color: #5a6f84;
    border-color: #d8e1ea;
}

.opsgate-overview-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.68fr) minmax(340px, 0.92fr);
    gap: 12px;
    align-items: start;
}

.opsgate-overview-surface {
    padding: 12px;
}

.opsgate-overview-surface-intro {
    margin: -2px 0 14px;
    color: #58718a;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-overview-surface-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.opsgate-overview-dashboard .opsgate-overview-surface-title {
    margin: 0;
    color: #0f2540;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-overview-surface-link {
    font-size: 12px;
    font-weight: 700;
    color: #165dbe;
    text-decoration: none;
}

.opsgate-overview-surface-link-muted {
    color: #1f6feb;
    opacity: 0.95;
}

.opsgate-overview-summary-grid,
.opsgate-overview-mini-grid {
    display: grid;
    gap: 12px;
}

.opsgate-overview-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 12px;
}

.opsgate-overview-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opsgate-overview-state-grid,
.opsgate-overview-support-grid,
.opsgate-overview-context-grid {
    display: grid;
    gap: 12px;
}

.opsgate-overview-state-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.opsgate-overview-state-grid-extended {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opsgate-overview-support-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 12px;
}

.opsgate-overview-context-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opsgate-overview-metric-card,
.opsgate-overview-mini-card {
    padding: 12px 14px;
}

.opsgate-overview-state-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 13px 14px;
}

.opsgate-overview-metric-card-updates {
    background: linear-gradient(180deg, #f3fbf7 0%, #eef9f2 100%);
    border-color: #cce6d5;
}

.opsgate-overview-metric-card-vulnerabilities {
    background: linear-gradient(180deg, #f8fbf7 0%, #f1f8f1 100%);
    border-color: #d7e6d6;
}

.opsgate-overview-metric-card-reachability {
    background: linear-gradient(180deg, #f4f8ff 0%, #eef5ff 100%);
    border-color: #cfddf3;
}

.opsgate-overview-state-card-updates {
    background: linear-gradient(180deg, #f3fbf7 0%, #eef9f2 100%);
    border-color: #cce6d5;
}

.opsgate-overview-state-card-vulnerabilities {
    background: linear-gradient(180deg, #f8fbf7 0%, #f1f8f1 100%);
    border-color: #d7e6d6;
}

.opsgate-overview-state-card-reachability {
    background: linear-gradient(180deg, #f4f8ff 0%, #eef5ff 100%);
    border-color: #cfddf3;
}

.opsgate-overview-state-card-availability {
    background: linear-gradient(180deg, #fff8ec 0%, #fff4de 100%);
    border-color: #f1d39b;
}

.opsgate-overview-state-card-performance {
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
    border-color: #dbe4ee;
}

.opsgate-overview-state-grid-extended .opsgate-overview-state-card-performance {
    grid-column: span 2;
}

.opsgate-overview-state-heading {
    color: #0f2540;
    font-size: 22px;
    line-height: 1.18;
    font-weight: 700;
}

.opsgate-overview-dashboard .opsgate-overview-state-summary {
    margin: 8px 0 0;
    color: #49637d;
    font-size: 13px;
    line-height: 1.52;
}

.opsgate-overview-state-facts {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.opsgate-overview-state-facts li {
    position: relative;
    margin: 0;
    padding-left: 12px;
    color: #36506b;
    font-size: 12px;
    line-height: 1.45;
}

.opsgate-overview-state-facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #7f97b3;
}

.opsgate-overview-state-facts-compact {
    margin-top: 8px;
}

.opsgate-overview-metric-value {
    font-size: 40px;
    line-height: 1;
    font-weight: 700;
    color: #0f2540;
}

.opsgate-overview-metric-value-text {
    font-size: 26px;
    line-height: 1.1;
}

.opsgate-overview-dashboard .opsgate-overview-metric-note,
.opsgate-overview-dashboard .opsgate-overview-mini-note,
.opsgate-overview-dashboard .opsgate-overview-activity-item-details,
.opsgate-overview-dashboard .opsgate-overview-activity-item-supporting,
.opsgate-overview-dashboard .opsgate-overview-empty-state p {
    margin: 8px 0 0;
    color: #4f6782;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-overview-mini-value {
    color: #0f2540;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

.opsgate-overview-activity-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.opsgate-overview-activity-list::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: #d4dfec;
}

.opsgate-overview-activity-item {
    position: relative;
    padding: 10px 12px 10px 18px;
    overflow: hidden;
    border-radius: 14px;
}

.opsgate-overview-activity-item::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 19px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1f6feb;
    box-shadow: 0 0 0 5px rgba(31, 111, 235, 0.1);
}

.opsgate-overview-activity-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.opsgate-overview-activity-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 110px;
}

.opsgate-overview-activity-item-label {
    color: #0f2540;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}

.opsgate-overview-activity-item-when {
    margin-top: 3px;
    color: #6b819b;
    font-size: 12px;
    line-height: 1.45;
}

.opsgate-overview-activity-item-stamp {
    display: flex;
    gap: 6px;
    color: #91a4bb;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
}

.opsgate-overview-activity-item-supporting {
    color: #6b819b;
    font-size: 12px;
}

.opsgate-overview-surface-activity {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fe 100%);
}

.opsgate-overview-surface-context {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.95);
}

.opsgate-overview-surface-context .opsgate-overview-mini-card {
    padding: 10px 12px;
}

.opsgate-overview-surface-context .opsgate-overview-mini-note {
    font-size: 12px;
    line-height: 1.4;
}

.opsgate-overview-rail-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #d9e4ef;
}

.opsgate-overview-rail-stat {
    border: 1px solid #d7e2ee;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    padding: 12px;
}

.opsgate-overview-rail-stat-value {
    color: #0f2540;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-overview-empty-state {
    padding: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9fe 100%);
}

.opsgate-overview-panel:hover,
.opsgate-overview-metric-card:hover,
.opsgate-overview-mini-card:hover,
.opsgate-overview-activity-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(16, 39, 67, 0.08);
}

.opsgate-overview-panel,
.opsgate-overview-metric-card,
.opsgate-overview-mini-card,
.opsgate-overview-activity-item {
    transition: transform 120ms ease, box-shadow 120ms ease;
}

@media screen and (max-width: 1280px) {
    .opsgate-overview-state-grid,
    .opsgate-overview-context-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsgate-overview-state-grid-extended {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 960px) {
    .opsgate-overview-dashboard .opsgate-overview-hero {
        grid-template-columns: 1fr;
    }

    .opsgate-overview-hero-current,
    .opsgate-overview-state-grid,
    .opsgate-overview-state-grid-extended,
    .opsgate-overview-context-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-overview-state-grid-extended .opsgate-overview-state-card-performance {
        grid-column: auto;
    }

    .opsgate-overview-dashboard .opsgate-overview-hero-side {
        padding-left: 0;
        border-left: 0;
    }
}

.opsgate-triage-dashboard {
    width: auto;
    max-width: 1660px;
    margin: 0;
    padding: 16px 18px 18px;
    border-radius: 24px;
    border-color: #d6e0eb;
    box-shadow: 0 28px 54px rgba(15, 42, 71, 0.09);
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    color: #16324c;
    font-family: "Segoe UI", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

.opsgate-triage-panel-head,
.opsgate-triage-surface-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.opsgate-triage-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.opsgate-triage-action-form {
    margin: 0;
}

.opsgate-triage-action-primary,
.opsgate-triage-action-link {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 12px;
    font-weight: 600;
}

.opsgate-triage-action-primary.button.button-primary {
    background: linear-gradient(180deg, #1f6feb 0%, #165dbe 100%);
    border-color: #165dbe;
    box-shadow: 0 10px 18px rgba(31, 111, 235, 0.18);
}

.opsgate-triage-current-band {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
    gap: 14px;
    margin-bottom: 14px;
    padding: 20px 22px 18px;
    border: 1px solid #d6e0eb;
    border-radius: 24px;
    box-shadow: 0 24px 46px rgba(16, 39, 67, 0.08);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.94), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 248, 255, 0.96) 100%);
}

.opsgate-triage-current-main,
.opsgate-triage-current-side {
    display: grid;
    gap: 12px;
}

.opsgate-triage-current-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.opsgate-triage-current-freshness {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid #d7e1ed;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: #536c86;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-triage-current-topline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
}

.opsgate-triage-current-score-wrap,
.opsgate-triage-current-copy {
    display: grid;
    gap: 8px;
}

.opsgate-triage-current-score-wrap {
    align-content: start;
}

.opsgate-triage-current-score {
    min-width: 96px;
    font-size: 68px;
    line-height: 0.95;
    font-weight: 800;
    color: #0f2540;
}

.opsgate-triage-current-score-label {
    color: #6b8097;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.opsgate-triage-panel-tone-good .opsgate-triage-current-score {
    color: #12965d;
}

.opsgate-triage-panel-tone-warn .opsgate-triage-current-score {
    color: #9c6300;
}

.opsgate-triage-panel-tone-bad .opsgate-triage-current-score {
    color: #b23a36;
}

.opsgate-triage-current-title {
    margin: 0;
    font-size: 36px;
    line-height: 1.03;
    font-weight: 780;
    color: #0f2540;
}

.opsgate-triage-current-note,
.opsgate-triage-current-side-copy {
    margin: 0;
    color: #4e667e;
    font-size: 13px;
    line-height: 1.5;
}

.opsgate-triage-current-side-meta {
    margin: 0;
    color: #6a8098;
    font-size: 12px;
    line-height: 1.45;
}

.opsgate-triage-current-side {
    align-content: stretch;
    justify-items: end;
}

.opsgate-triage-current-side-card {
    display: grid;
    gap: 10px;
    align-content: center;
    justify-items: start;
    width: max-content;
    max-width: 100%;
    padding: 10px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.opsgate-triage-current-side-value {
    color: #0f2540;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
}

.opsgate-triage-actions-hero {
    margin-top: 2px;
    align-items: flex-start;
    justify-content: flex-start;
}

.opsgate-triage-actions-hero .opsgate-triage-action-form {
    flex: 0 0 auto;
}

.opsgate-triage-actions-hero .opsgate-triage-action-link {
    flex: 1 1 calc(50% - 4px);
}

.opsgate-triage-actions-hero .opsgate-triage-action-primary {
    min-height: 44px;
    padding: 0 22px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
}

.opsgate-triage-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.opsgate-triage-check-item {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid #d6e1ea;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: #35506e;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-triage-status-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.opsgate-triage-status-item {
    min-height: 58px;
    padding: 11px 13px;
    border: 1px solid #d8e4ef;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 20px rgba(16, 39, 67, 0.04);
}

.opsgate-triage-status-label {
    color: #6d8298;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.opsgate-triage-status-value {
    color: #22364d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.opsgate-triage-live-state {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 14px;
    padding: 18px 20px;
    border: 1px solid #d8e3ef;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 18px 34px rgba(16, 39, 67, 0.06);
}

.opsgate-triage-live-state-good {
    border-color: #c8e4d4;
    background: linear-gradient(180deg, #f8fffb 0%, #eefaf3 100%);
}

.opsgate-triage-live-state-warn {
    border-color: #ecd191;
    background: linear-gradient(180deg, #fffdf7 0%, #fff5e0 100%);
}

.opsgate-triage-live-state-bad {
    border-color: #efc0be;
    background: linear-gradient(180deg, #fff9f8 0%, #ffefed 100%);
}

.opsgate-triage-live-state-copy {
    display: grid;
    gap: 8px;
    align-content: start;
}

.opsgate-triage-live-state-title {
    margin: 0;
    color: #0f2540;
    font-size: 28px;
    line-height: 1.08;
    font-weight: 780;
}

.opsgate-triage-live-state-note {
    margin: 0;
    color: #4f6880;
    font-size: 14px;
    line-height: 1.55;
}

.opsgate-triage-live-state-grid,
.opsgate-triage-action-grid,
.opsgate-triage-glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.opsgate-triage-live-state-card,
.opsgate-triage-action-card,
.opsgate-triage-glossary-card {
    padding: 14px 15px;
    border: 1px solid #d9e4ef;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px rgba(16, 39, 67, 0.04);
}

.opsgate-triage-live-state-value,
.opsgate-triage-action-card-title,
.opsgate-triage-glossary-title {
    color: #0f2540;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}

.opsgate-triage-action-card,
.opsgate-triage-glossary-card {
    display: grid;
    gap: 8px;
    align-content: start;
}

.opsgate-triage-action-card-copy,
.opsgate-triage-glossary-copy {
    margin: 0;
    color: #567088;
    font-size: 13px;
    line-height: 1.5;
}

.opsgate-triage-actions-surface,
.opsgate-triage-glossary-surface {
    margin-top: 16px;
}

.opsgate-triage-command-deck {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.92fr);
    gap: 20px;
    margin-bottom: 20px;
    padding: 28px 28px 24px;
    border: 1px solid #d9e4ee;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.94), transparent 34%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 250, 255, 0.985) 54%, rgba(240, 246, 253, 0.98) 100%);
    box-shadow: 0 34px 62px rgba(16, 39, 67, 0.1);
}

.opsgate-triage-command-deck-info {
    border-color: #c9dbf2;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.96), transparent 32%),
        linear-gradient(140deg, #fcfeff 0%, #f3f8ff 50%, #eef5ff 100%);
}

.opsgate-triage-command-deck-good {
    border-color: #c8e4d4;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.95), transparent 32%),
        linear-gradient(140deg, #fbfffd 0%, #f4fcf7 54%, #eef9f3 100%);
}

.opsgate-triage-command-deck-warn {
    border-color: #ebd08f;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.95), transparent 32%),
        linear-gradient(140deg, #fffef9 0%, #fff8ea 56%, #fff4dd 100%);
}

.opsgate-triage-command-deck-bad {
    border-color: #efc0be;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.95), transparent 32%),
        linear-gradient(140deg, #fffafa 0%, #fff4f3 56%, #ffefee 100%);
}

.opsgate-triage-command-main,
.opsgate-triage-command-side,
.opsgate-triage-posture-panel,
.opsgate-triage-action-spotlight,
.opsgate-triage-progress-main,
.opsgate-triage-progress-aside {
    display: grid;
    gap: 12px;
}

.opsgate-triage-command-head,
.opsgate-triage-dimension-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.opsgate-triage-command-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid #d5e3f4;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(91, 159, 255, 0.12), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    box-shadow: 0 12px 30px rgba(17, 72, 145, 0.08);
}

.opsgate-triage-command-bar-copy {
    display: grid;
    gap: 4px;
}

.opsgate-triage-command-bar-copy strong {
    color: #0f2540;
    font-size: 17px;
    line-height: 1.25;
}

.opsgate-triage-command-bar-copy span:last-child {
    color: #587189;
    font-size: 13px;
    line-height: 1.55;
}

.opsgate-triage-command-runtime-note {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: #33506f;
    font-size: 12px;
    font-weight: 600;
}

.opsgate-triage-command-runtime-note.is-success {
    color: #1f7b54;
}

.opsgate-triage-command-runtime-note.is-error {
    color: #a23a36;
}

.opsgate-triage-command-runtime-note.is-info,
.opsgate-triage-command-runtime-note.is-warn {
    color: #27558e;
}

.opsgate-triage-command-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.opsgate-triage-command-run-button.button.button-primary {
    min-width: 220px;
    min-height: 42px;
    padding: 0 18px;
    border-color: #1b5fc7;
    background: linear-gradient(180deg, #2b78ea 0%, #185fcf 100%);
    box-shadow: 0 14px 28px rgba(27, 95, 199, 0.18);
}

.opsgate-triage-command-run-button.button.button-primary:hover,
.opsgate-triage-command-run-button.button.button-primary:focus {
    border-color: #1654b1;
    background: linear-gradient(180deg, #347ff0 0%, #1d67db 100%);
}

.opsgate-triage-command-refresh.button.button-secondary {
    min-height: 42px;
}

.opsgate-triage-command-refresh.button.button-secondary.is-ready {
    border-color: #1b5fc7;
    color: #1b5fc7;
    box-shadow: 0 10px 18px rgba(27, 95, 199, 0.1);
}

.opsgate-triage-command-title {
    margin: 0;
    color: #0f2540;
    font-size: 44px;
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.opsgate-triage-command-copy {
    margin: 0;
    max-width: 760px;
    color: #49627c;
    font-size: 15px;
    line-height: 1.6;
}

.opsgate-triage-progress-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.72fr);
    gap: 18px;
    padding: 20px;
    border: 1px solid rgba(196, 212, 231, 0.96);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.88), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(243, 248, 255, 0.92) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 18px 32px rgba(16, 39, 67, 0.05);
}

.opsgate-triage-progress-meter {
    position: relative;
    height: 18px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(202, 215, 230, 0.92);
    background: linear-gradient(180deg, rgba(220, 229, 239, 0.72) 0%, rgba(204, 217, 232, 0.92) 100%);
    box-shadow: inset 0 2px 4px rgba(15, 37, 64, 0.08);
}

.opsgate-triage-progress-meter-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 16%, rgba(255, 255, 255, 0.18) 34%, rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0.18) 100%),
        linear-gradient(90deg, #1859b0 0%, #327ee9 45%, #57a1ff 100%);
    background-size: 220px 100%, 100% 100%;
    box-shadow: 0 12px 20px rgba(28, 100, 199, 0.22);
    animation: opsgateTriageProgressGlow 4.2s linear infinite;
    transition: width 520ms cubic-bezier(.22, 1, .36, 1), box-shadow 220ms ease, filter 220ms ease;
}

.opsgate-triage-command-deck-good .opsgate-triage-progress-meter-fill {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 16%, rgba(255, 255, 255, 0.18) 34%, rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0.18) 100%),
        linear-gradient(90deg, #1564ba 0%, #1ea379 58%, #74d6aa 100%);
    box-shadow: 0 12px 20px rgba(21, 100, 186, 0.18);
}

.opsgate-triage-command-deck-bad .opsgate-triage-progress-meter-fill {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 16%, rgba(255, 255, 255, 0.14) 34%, rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0.14) 100%),
        linear-gradient(90deg, #b23a36 0%, #cf5e57 55%, #e09d98 100%);
    box-shadow: 0 10px 18px rgba(178, 58, 54, 0.2);
}

@keyframes opsgateTriageProgressGlow {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 220px 0, 0 0;
    }
}

.opsgate-triage-progress-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(208, 220, 234, 0.82);
    color: #5b7289;
    font-size: 12px;
    line-height: 1.45;
}

.opsgate-triage-progress-summary strong {
    color: #0f2540;
    font-size: 13px;
}

.opsgate-triage-progress-aside {
    align-content: start;
    padding: 18px;
    border: 1px solid rgba(206, 219, 234, 0.94);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 249, 255, 0.95) 100%);
}

.opsgate-triage-progress-aside-title {
    color: #0f2540;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 760;
}

.opsgate-triage-progress-aside-copy {
    margin: 0;
    color: #526c83;
    font-size: 13px;
    line-height: 1.55;
}

.opsgate-triage-progress-block-note {
    padding: 11px 12px;
    border: 1px solid #e4d8ae;
    border-radius: 14px;
    background: linear-gradient(180deg, #fffdf4 0%, #fff7de 100%);
    color: #715721;
    font-size: 12px;
    line-height: 1.5;
}

.opsgate-triage-phase-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.opsgate-triage-phase-chip {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 14px 15px;
    border: 1px solid #d6e1ed;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 251, 255, 0.96) 100%);
    box-shadow: 0 10px 24px rgba(16, 39, 67, 0.05);
}

.opsgate-triage-phase-chip-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, #dde7f2 0%, #d1dcea 100%);
    color: #476177;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.opsgate-triage-phase-chip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.opsgate-triage-phase-chip-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(234, 241, 250, 0.92);
    color: #45627e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.opsgate-triage-phase-chip-copy {
    display: grid;
    gap: 4px;
}

.opsgate-triage-phase-chip-copy strong,
.opsgate-triage-command-context-item strong {
    color: #0f2540;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}

.opsgate-triage-phase-chip-copy span,
.opsgate-triage-command-context-meta {
    color: #5e748a;
    font-size: 12px;
    line-height: 1.5;
}

.opsgate-triage-phase-chip.is-complete {
    border-color: #c8e4d4;
    background: linear-gradient(180deg, #fbfffd 0%, #eef8f3 100%);
}

.opsgate-triage-phase-chip.is-complete .opsgate-triage-phase-chip-status {
    background: #e7f7ee;
    color: #1d7c49;
}

.opsgate-triage-phase-chip.is-complete .opsgate-triage-phase-chip-step {
    background: #1f9c61;
    color: #ffffff;
}

.opsgate-triage-phase-chip.is-current {
    border-color: #bdd2ef;
    background: linear-gradient(180deg, #ffffff 0%, #edf5ff 100%);
    box-shadow: 0 16px 28px rgba(22, 93, 190, 0.1);
    transform: translateY(-2px);
}

.opsgate-triage-phase-chip.is-current .opsgate-triage-phase-chip-status {
    background: #eaf2fd;
    color: #24558e;
}

.opsgate-triage-phase-chip.is-current .opsgate-triage-phase-chip-step {
    background: #165dbe;
    color: #ffffff;
}

.opsgate-triage-phase-chip.is-current::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(63, 126, 217, 0.18), 0 0 0 1px rgba(63, 126, 217, 0.06);
    pointer-events: none;
}

.opsgate-triage-phase-chip.is-failed {
    border-color: #efc0be;
    background: linear-gradient(180deg, #fffdfd 0%, #fff1f0 100%);
}

.opsgate-triage-phase-chip.is-failed .opsgate-triage-phase-chip-status {
    background: #fdeceb;
    color: #a23a36;
}

.opsgate-triage-phase-chip.is-failed .opsgate-triage-phase-chip-step {
    background: #b23a36;
    color: #ffffff;
}

.opsgate-triage-phase-chip.is-blocked {
    border-style: dashed;
    border-color: #d8dfcf;
    background: linear-gradient(180deg, #fbfcf8 0%, #f5f7f1 100%);
}

.opsgate-triage-phase-chip.is-blocked .opsgate-triage-phase-chip-status {
    background: #eef2e8;
    color: #65725b;
}

.opsgate-triage-phase-chip.is-blocked .opsgate-triage-phase-chip-step {
    background: #ccd5c2;
    color: #5f6954;
}

.opsgate-triage-phase-chip {
    position: relative;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.opsgate-triage-phase-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(16, 39, 67, 0.08);
}

.opsgate-triage-phase-chip-accent-queue {
    border-top: 3px solid #6a7f95;
}

.opsgate-triage-phase-chip-accent-inventory {
    border-top: 3px solid #24558e;
}

.opsgate-triage-phase-chip-accent-updates {
    border-top: 3px solid #c58600;
}

.opsgate-triage-phase-chip-accent-vulnerabilities {
    border-top: 3px solid #b23a36;
}

.opsgate-triage-phase-chip-accent-reachability {
    border-top: 3px solid #2a6fb4;
}

.opsgate-triage-phase-chip-accent-performance {
    border-top: 3px solid #5b64cf;
}

.opsgate-triage-phase-chip-accent-reports {
    border-top: 3px solid #2b7f7a;
}

.opsgate-triage-phase-chip-accent-complete {
    border-top: 3px solid #1f9c61;
}

.opsgate-triage-command-context-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.opsgate-triage-command-context-item {
    display: grid;
    gap: 6px;
    padding: 14px 15px;
    border: 1px solid rgba(210, 222, 236, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
}

.opsgate-triage-command-context-note {
    grid-column: 1 / -1;
    margin: -6px 0 0;
    color: #6c8198;
    font-size: 12px;
    line-height: 1.5;
}

.opsgate-triage-command-meta-item strong,
.opsgate-triage-action-list-title,
.opsgate-triage-reference-title {
    color: #0f2540;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 760;
}

.opsgate-triage-posture-note,
.opsgate-triage-action-spotlight-copy,
.opsgate-triage-action-list-copy,
.opsgate-triage-reference-list {
    color: #567088;
    font-size: 13.5px;
    line-height: 1.72;
}

.opsgate-triage-command-meta-label {
    display: block;
    margin-bottom: 4px;
    color: #72869d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.opsgate-triage-posture-panel {
    align-content: start;
    padding: 20px;
    border: 1px solid #dbe5ef;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.opsgate-triage-posture-panel-good {
    border-color: #c8e4d4;
    background: linear-gradient(180deg, #ffffff 0%, #f1fbf5 100%);
}

.opsgate-triage-posture-panel-warn {
    border-color: #ebd08f;
    background: linear-gradient(180deg, #ffffff 0%, #fff9ea 100%);
}

.opsgate-triage-posture-panel-bad {
    border-color: #efc0be;
    background: linear-gradient(180deg, #ffffff 0%, #fff3f2 100%);
}

.opsgate-triage-posture-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
}

.opsgate-triage-posture-score {
    min-width: 92px;
    color: #0f2540;
    font-size: 64px;
    line-height: 0.94;
    font-weight: 800;
}

.opsgate-triage-posture-panel-good .opsgate-triage-posture-score {
    color: #12965d;
}

.opsgate-triage-posture-panel-warn .opsgate-triage-posture-score {
    color: #9c6300;
}

.opsgate-triage-posture-panel-bad .opsgate-triage-posture-score {
    color: #b23a36;
}

.opsgate-triage-posture-title,
.opsgate-triage-action-spotlight-title {
    margin: 0;
    color: #0f2540;
    font-size: 24px;
    line-height: 1.16;
    font-weight: 760;
}

.opsgate-triage-posture-copy {
    display: grid;
    gap: 8px;
}

.opsgate-triage-posture-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.opsgate-triage-posture-meta-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(203, 216, 231, 0.94);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: #4f6880;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-triage-posture-list,
.opsgate-triage-reference-list {
    margin: 0;
    padding-left: 18px;
}

.opsgate-triage-posture-list li,
.opsgate-triage-reference-list li {
    margin: 0;
    color: #35506e;
    font-size: 12px;
    line-height: 1.5;
}

.opsgate-triage-posture-meta {
    margin: 0;
    color: #61788e;
    font-size: 12px;
    line-height: 1.5;
}

.opsgate-triage-workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

.opsgate-triage-assessment-workspace {
    display: grid;
    gap: 18px;
}

.opsgate-triage-driver-grid-priority {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
}

.opsgate-r1-scan-evidence-details {
    margin-top: 20px;
    border-top: 1px solid var(--og-border);
    padding-top: 12px;
}

.opsgate-r1-scan-evidence-summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--og-text-2);
    list-style: none;
    padding: 6px 0;
    user-select: none;
}

.opsgate-r1-scan-evidence-summary::-webkit-details-marker { display: none; }

.opsgate-r1-scan-evidence-count {
    font-weight: 400;
    color: var(--og-text-3);
}

.opsgate-r1-scan-evidence-details[open] .opsgate-r1-scan-evidence-summary {
    margin-bottom: 12px;
}

.opsgate-triage-evidence-workbench {
    display: grid;
    gap: 18px;
}

.opsgate-triage-evidence-group-stack,
.opsgate-triage-evidence-ledger {
    display: grid;
    gap: 14px;
}

.opsgate-triage-evidence-group {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #dce5ef;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.95) 100%);
}

.opsgate-triage-evidence-group-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.opsgate-triage-evidence-group-title {
    color: #27405e;
    font-size: 14px;
    line-height: 1.55;
}

.opsgate-triage-dimension-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr);
    gap: 14px;
    align-items: center;
    padding: 13px 15px;
    border: 1px solid #d8e4ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.opsgate-triage-dimension-row.is-foundation {
    border-color: #cddcf0;
    background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
    box-shadow: 0 16px 30px rgba(16, 39, 67, 0.06);
}

.opsgate-triage-dimension-row.is-warn {
    border-color: #f0d58d;
    background: linear-gradient(180deg, #fffdf8 0%, #fff8eb 100%);
}

.opsgate-triage-dimension-row.is-bad {
    border-color: #efc0be;
    background: linear-gradient(180deg, #fffdfd 0%, #fff3f2 100%);
}

.opsgate-triage-dimension-row.is-blocked {
    border-style: dashed;
    border-color: #d7decb;
    background: linear-gradient(180deg, #fbfcf8 0%, #f5f7f1 100%);
}

.opsgate-triage-dimension-main {
    display: grid;
    gap: 6px;
}

.opsgate-triage-dimension-value,
.opsgate-triage-context-value {
    color: #0f2540;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 760;
}

.opsgate-triage-dimension-copy {
    margin: 0;
    color: #4f6880;
    font-size: 14px;
    line-height: 1.5;
}

.opsgate-triage-dimension-meta {
    color: #60778d;
    font-size: 12px;
    line-height: 1.5;
}

.opsgate-triage-action-surface,
.opsgate-triage-reference-surface {
    display: grid;
    gap: 14px;
}

.opsgate-triage-action-spotlight {
    padding: 18px;
    border: 1px solid #cddcf0;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
    box-shadow: 0 18px 30px rgba(16, 39, 67, 0.05);
}

.opsgate-triage-action-spotlight-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.opsgate-triage-action-list {
    display: grid;
    gap: 10px;
}

.opsgate-triage-action-list-item,
.opsgate-triage-context-card {
    display: grid;
    gap: 10px;
    padding: 15px 16px;
    border: 1px solid #d8e4ef;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
}

.opsgate-triage-reference-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.opsgate-triage-reference-details {
    border: 1px solid #d8e4ef;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 255, 0.98) 100%);
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(16, 39, 67, 0.06);
}

.opsgate-triage-reference-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.opsgate-triage-reference-details summary::-webkit-details-marker {
    display: none;
}

.opsgate-triage-reference-details summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #eaf2fd;
    color: #1f58af;
    font-size: 18px;
    font-weight: 700;
    flex: 0 0 auto;
}

.opsgate-triage-reference-details[open] summary {
    border-bottom: 1px solid #d8e4ef;
    background: rgba(255, 255, 255, 0.96);
}

.opsgate-triage-reference-details[open] summary::after {
    content: "–";
}

.opsgate-triage-reference-details .opsgate-triage-reference-list {
    margin: 0;
    padding: 0 24px 20px 36px;
}

.opsgate-triage-reference-surface {
    background:
        radial-gradient(circle at top right, rgba(70, 129, 219, 0.1), transparent 32%),
        linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
}

.opsgate-triage-support-strip {
    margin-top: 14px;
    padding: 12px 14px;
    border-color: #e2e8ef;
    background: linear-gradient(180deg, #f6f8fb 0%, #f2f5f9 100%);
    box-shadow: none;
}

.opsgate-triage-support-strip-summary {
    cursor: pointer;
    list-style: none;
}

.opsgate-triage-support-strip-summary::-webkit-details-marker {
    display: none;
}

.opsgate-triage-support-strip-summary .opsgate-triage-section-intro {
    margin-bottom: 0;
}

.opsgate-triage-support-strip-body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(214, 224, 235, 0.88);
}

.opsgate-triage-top-grid {
    display: grid;
    grid-template-columns: minmax(340px, 1.3fr) repeat(3, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.opsgate-triage-panel,
.opsgate-triage-surface,
.opsgate-triage-evidence-card,
.opsgate-triage-rail-card,
.opsgate-triage-rail-stat {
    border: 1px solid #d7e2ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 18px rgba(16, 39, 67, 0.04);
}

.opsgate-triage-panel {
    padding: 14px 16px 12px;
    min-height: 132px;
}

.opsgate-triage-panel-result {
    background: linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%);
}

.opsgate-triage-panel-tone-good {
    background: linear-gradient(180deg, #f4faff 0%, #e9f3ff 100%);
    border-color: #c9ddf4;
}

.opsgate-triage-panel-tone-warn {
    background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
    border-color: #f0d58d;
}

.opsgate-triage-panel-tone-bad {
    background: linear-gradient(180deg, #ffffff 0%, #fff7f6 100%);
    border-color: #efc0be;
}

.opsgate-triage-panel-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #356ba7;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(108, 150, 198, 0.28);
}

.opsgate-triage-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7588a3;
}

.opsgate-triage-panel-value {
    font-size: 58px;
    line-height: 1;
    font-weight: 800;
    color: #0f2540;
}

.opsgate-triage-panel-tone-good .opsgate-triage-panel-value {
    color: #12965d;
}

.opsgate-triage-panel-tone-warn .opsgate-triage-panel-value {
    color: #9c6300;
}

.opsgate-triage-panel-tone-bad .opsgate-triage-panel-value {
    color: #b23a36;
}

.opsgate-triage-panel-value-sm {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    color: #0f2540;
}

.opsgate-triage-panel-copy,
.opsgate-triage-panel-meta,
.opsgate-triage-evidence-copy,
.opsgate-triage-evidence-meta,
.opsgate-triage-rail-copy,
.opsgate-triage-rail-meta {
    margin: 8px 0 0;
    color: #567088;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-triage-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.opsgate-triage-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-triage-pill-info {
    background: #e9f2ff;
    color: #165dbe;
    border-color: #c6d9fb;
}

.opsgate-triage-pill-neutral {
    background: #f3f6fa;
    color: #5a6f84;
    border-color: #d8e1ea;
}

.opsgate-triage-pill-soft-neutral {
    background: #f8fbff;
    color: #4c6785;
    border-color: #d7e3ef;
}

.opsgate-triage-pill-good {
    background: #eef9f2;
    color: #1d7c49;
    border-color: #bce3cc;
}

.opsgate-triage-pill-soft-good {
    background: #edf8f1;
    color: #2d7d53;
    border-color: #cfead9;
}

.opsgate-triage-pill-warn {
    background: #fff3d8;
    color: #9c6300;
    border-color: #f1d18a;
}

.opsgate-triage-pill-soft-warn {
    background: #fff8e8;
    color: #926400;
    border-color: #f3deaa;
}

.opsgate-triage-pill-bad {
    background: #ffe8e6;
    color: #b23a36;
    border-color: #f2b7b4;
}

.opsgate-triage-pill-soft-bad {
    background: #fff2f1;
    color: #b04a45;
    border-color: #f1c8c5;
}

.opsgate-triage-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 360px);
    gap: 18px;
    margin: 0 0 14px;
    padding: 22px 24px;
    border: 1px solid #d6e2ee;
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(48, 113, 221, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 251, 255, 0.98) 56%, rgba(238, 245, 253, 0.98) 100%);
    box-shadow: 0 28px 52px rgba(16, 39, 67, 0.1);
}

.opsgate-triage-hero-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.opsgate-triage-hero-score-wrap {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.opsgate-triage-hero-score {
    min-width: 108px;
    font-size: 80px;
    line-height: 0.9;
    font-weight: 800;
    color: #0f2540;
}

.opsgate-triage-hero-score-label {
    color: #7388a0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.opsgate-triage-panel-tone-good .opsgate-triage-hero-score {
    color: #12965d;
}

.opsgate-triage-panel-tone-warn .opsgate-triage-hero-score {
    color: #9c6300;
}

.opsgate-triage-panel-tone-bad .opsgate-triage-hero-score {
    color: #b23a36;
}

.opsgate-triage-hero-copy {
    display: grid;
    gap: 10px;
    margin: 0;
}

.opsgate-triage-hero-title-row {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;
}

.opsgate-triage-hero-title {
    margin: 0;
    color: #0f2540;
    font-size: 40px;
    line-height: 1;
    font-weight: 780;
}

.opsgate-triage-hero-freshness {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid #d6e1ed;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #536c86;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-triage-hero-note {
    margin: 0;
    max-width: 780px;
    color: #4f6880;
    font-size: 14px;
    line-height: 1.45;
}

.opsgate-triage-hero-actions {
    display: grid;
    gap: 10px;
    align-content: center;
    min-height: 100%;
    padding: 18px;
    border: 1px solid rgba(122, 151, 181, 0.26);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.98) 0%, rgba(239, 245, 253, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.opsgate-triage-hero-actions .button,
.opsgate-triage-hero-actions .opsgate-triage-action-form {
    width: 100%;
}

.opsgate-triage-hero-actions .button {
    justify-content: center;
    min-height: 40px;
    border-radius: 14px;
}

.opsgate-triage-status-strip-compact {
    margin-bottom: 18px;
}

.opsgate-triage-primary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 380px);
    gap: 18px;
    align-items: start;
}

.opsgate-triage-section,
.opsgate-triage-support-rail,
.opsgate-triage-support-strip {
    border: 1px solid #d7e2ee;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 28px rgba(16, 39, 67, 0.055);
}

.opsgate-triage-section,
.opsgate-triage-support-strip {
    padding: 18px 20px;
}

.opsgate-triage-support-rail {
    display: grid;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f7fd 100%);
}

.opsgate-triage-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.opsgate-triage-section-title {
    margin: 0;
    color: #0f2540;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 700;
}

.opsgate-triage-section-kicker {
    color: #165dbe;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-triage-section-intro {
    margin: 0 0 16px;
    color: #587089;
    font-size: 13px;
    line-height: 1.4;
}

.opsgate-triage-assessment-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.opsgate-triage-capability-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.opsgate-triage-assessment-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.opsgate-triage-assessment-card,
.opsgate-triage-assessment-support-card,
.opsgate-triage-evidence-product-card,
.opsgate-triage-rail-product-card,
.opsgate-triage-support-strip-card {
    padding: 15px 16px;
    border: 1px solid #d8e4ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 8px 18px rgba(16, 39, 67, 0.04);
}

.opsgate-triage-assessment-card,
.opsgate-triage-assessment-support-card,
.opsgate-triage-evidence-product-card,
.opsgate-triage-rail-product-card,
.opsgate-triage-support-strip-card {
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.opsgate-triage-assessment-card:hover,
.opsgate-triage-assessment-support-card:hover,
.opsgate-triage-evidence-product-card:hover,
.opsgate-triage-rail-product-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(16, 39, 67, 0.08);
}

.opsgate-triage-assessment-card.is-bad,
.opsgate-triage-evidence-product-card.is-bad {
    border-color: #efc0be;
    background: linear-gradient(180deg, #fffdfd 0%, #fff3f2 100%);
    box-shadow: 0 14px 28px rgba(178, 58, 54, 0.09);
}

.opsgate-triage-assessment-card.is-warn,
.opsgate-triage-assessment-support-card.is-warn,
.opsgate-triage-evidence-product-card.is-warn {
    border-color: #f0d58d;
    background: linear-gradient(180deg, #fffdf8 0%, #fff8eb 100%);
    box-shadow: 0 14px 28px rgba(156, 99, 0, 0.08);
}

.opsgate-triage-assessment-card.is-good {
    border-color: #c8e4d4;
    background: linear-gradient(180deg, #f9fffb 0%, #effaf4 100%);
}

.opsgate-triage-capability-grid .opsgate-triage-assessment-card {
    min-height: 100%;
    padding: 16px 17px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.92), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.opsgate-triage-proof-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.opsgate-triage-proof-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(197, 211, 228, 0.95);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 247, 255, 0.96) 100%);
    color: #28517f;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.opsgate-triage-assessment-card.is-good .opsgate-triage-proof-badge {
    border-color: #cce3d6;
    background: linear-gradient(180deg, #ffffff 0%, #eef8f3 100%);
    color: #1d7c49;
}

.opsgate-triage-assessment-card.is-warn .opsgate-triage-proof-badge {
    border-color: #ecd59a;
    background: linear-gradient(180deg, #fffef8 0%, #fff7e7 100%);
    color: #926100;
}

.opsgate-triage-assessment-card.is-bad .opsgate-triage-proof-badge {
    border-color: #efc9c7;
    background: linear-gradient(180deg, #fffefe 0%, #fff2f1 100%);
    color: #a43b37;
}

.opsgate-triage-capability-grid .opsgate-triage-assessment-card .opsgate-triage-card-facts {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(215, 226, 239, 0.8);
}

.opsgate-triage-capability-link {
    margin-top: 10px;
}

.opsgate-triage-assessment-card-title,
.opsgate-triage-evidence-product-title,
.opsgate-triage-rail-product-title,
.opsgate-triage-support-strip-value,
.opsgate-triage-detail-panel-title {
    color: #0f2540;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 700;
}

.opsgate-triage-rail-product-title {
    font-size: 18px;
}

.opsgate-triage-support-strip-value {
    font-size: 18px;
}

.opsgate-triage-assessment-card-summary,
.opsgate-triage-evidence-product-copy,
.opsgate-triage-rail-product-copy,
.opsgate-triage-support-strip-copy,
.opsgate-triage-detail-panel-note {
    margin: 6px 0 0;
    color: #55708a;
    font-size: 12.5px;
    line-height: 1.52;
}

.opsgate-triage-card-facts,
.opsgate-triage-rail-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    color: #304c69;
    font-size: 12.5px;
    line-height: 1.5;
    display: grid;
    gap: 4px;
}

.opsgate-triage-rail-product-card {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 14px 28px rgba(16, 39, 67, 0.06);
}

.opsgate-triage-rail-product-card .opsgate-triage-rail-list {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dce5ef;
}

.opsgate-triage-evidence-section {
    margin-top: 18px;
}

.opsgate-triage-evidence-grid-clean {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.opsgate-triage-evidence-product-card.is-foundation {
    grid-column: 1 / -1;
}

.opsgate-triage-evidence-product-card.is-priority {
    border-color: #cfdced;
    box-shadow: 0 14px 26px rgba(16, 39, 67, 0.06);
}

.opsgate-triage-evidence-product-card.is-support {
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}

.opsgate-triage-evidence-product-title {
    font-size: 20px;
}

.opsgate-triage-detail-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    padding: 5px;
    border: 1px solid #dbe4ee;
    border-radius: 16px;
    background: #f3f7fb;
}

.opsgate-triage-detail-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #35506e;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.opsgate-triage-detail-tab span {
    display: inline-flex;
    align-items: center;
    min-width: 20px;
    justify-content: center;
    color: #6d8298;
}

.opsgate-triage-detail-tab.is-active {
    border-color: #165dbe;
    background: #ffffff;
    color: #165dbe;
    box-shadow: 0 10px 18px rgba(22, 93, 190, 0.12);
}

.opsgate-triage-detail-tab.is-active span {
    color: #165dbe;
}

.opsgate-triage-detail-panel {
    margin-top: 12px;
    padding: 16px 18px 18px;
    border: 1px solid #d8e4ef;
    border-radius: 20px;
    background: linear-gradient(180deg, #fcfdff 0%, #f7fbff 100%);
    box-shadow: 0 14px 28px rgba(16, 39, 67, 0.05);
}

.opsgate-triage-detail-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.opsgate-triage-detail-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.opsgate-triage-detail-card {
    padding: 12px 14px;
    border: 1px solid #dce6ef;
    border-radius: 16px;
    background: #fff;
}

.opsgate-triage-detail-card-title {
    color: #0f2540;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-triage-detail-card-copy,
.opsgate-triage-detail-card-note {
    margin: 6px 0 0;
    color: #567088;
    font-size: 12px;
    line-height: 1.45;
}

.opsgate-triage-support-strip {
    margin-top: 18px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%);
    box-shadow: none;
}

.opsgate-triage-support-strip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.opsgate-triage-support-strip-card {
    padding: 12px 14px;
    box-shadow: none;
}

.opsgate-triage-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.58fr) minmax(320px, 0.9fr);
    gap: 16px;
    align-items: start;
}

.opsgate-triage-surface {
    padding: 16px;
}

.opsgate-triage-surface-title {
    margin: 0;
    color: #0f2540;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-triage-surface-link {
    font-size: 12px;
    font-weight: 700;
    color: #165dbe;
}

.opsgate-triage-surface-header-secondary {
    margin-top: 18px;
}

.opsgate-triage-explanation-card {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.9fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid #d8e4ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 14px 28px rgba(15, 35, 52, 0.05);
}

.opsgate-triage-assessment-copy {
    display: grid;
    gap: 8px;
}

.opsgate-triage-assessment-title {
    color: #0f2540;
    font-size: 28px;
    line-height: 1.08;
    font-weight: 760;
}

.opsgate-triage-assessment-note {
    margin: 0;
    color: #4e667e;
    font-size: 13px;
    line-height: 1.5;
}

.opsgate-triage-assessment-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-start;
    gap: 8px;
}

.opsgate-triage-assessment-tag,
.opsgate-triage-inline-detail-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #d8e4ef;
    border-radius: 999px;
    background: #f8fbff;
    color: #3e5b79;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.opsgate-triage-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: #165dbe;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.opsgate-triage-inline-link:hover,
.opsgate-triage-inline-link:focus {
    color: #0b57d0;
    text-decoration: underline;
}

.opsgate-triage-driver-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.opsgate-triage-driver-card {
    padding: 14px 15px;
    border: 1px solid #d8e4ef;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 20px rgba(15, 35, 52, 0.04);
}

.opsgate-triage-driver-card.is-priority {
    box-shadow: 0 14px 28px rgba(15, 35, 52, 0.06);
}

.opsgate-triage-driver-card.is-bad {
    border-color: #efc0be;
    background: linear-gradient(180deg, #fffdfd 0%, #fff3f2 100%);
}

.opsgate-triage-driver-card.is-warn {
    border-color: #f0d58d;
    background: linear-gradient(180deg, #fffdf8 0%, #fff8eb 100%);
}

.opsgate-triage-driver-card.is-good {
    border-color: #c8e4d4;
    background: linear-gradient(180deg, #f9fffb 0%, #effaf4 100%);
}

.opsgate-triage-driver-title {
    color: #0f2540;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-triage-driver-copy {
    margin: 6px 0 0;
    color: #4d667f;
    font-size: 12px;
    line-height: 1.45;
}

.opsgate-triage-driver-facts {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    color: #35506e;
    font-size: 12px;
    line-height: 1.45;
}

.opsgate-triage-driver-facts li + li {
    margin-top: 4px;
}

.opsgate-triage-evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.opsgate-triage-evidence-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 15px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}

.opsgate-triage-evidence-card.is-foundation {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.opsgate-triage-evidence-card.is-bad {
    border-color: #efc0be;
    background: linear-gradient(180deg, #fffdfd 0%, #fff3f2 100%);
}

.opsgate-triage-evidence-card.is-warn {
    border-color: #f0d58d;
    background: linear-gradient(180deg, #fffdf8 0%, #fff8eb 100%);
}

.opsgate-triage-evidence-card.is-neutral,
.opsgate-triage-evidence-card.is-muted {
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}

.opsgate-triage-evidence-card.is-priority {
    padding: 16px;
    box-shadow: 0 14px 26px rgba(15, 35, 52, 0.05);
}

.opsgate-triage-evidence-card.is-support {
    padding: 13px 14px;
}

.opsgate-triage-evidence-card-wide {
    grid-column: span 3;
}

.opsgate-triage-evidence-value,
.opsgate-triage-rail-value,
.opsgate-triage-rail-stat-value {
    color: #0f2540;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-triage-evidence-card.is-priority .opsgate-triage-evidence-value {
    font-size: 28px;
}

.opsgate-triage-evidence-card.is-support .opsgate-triage-evidence-value {
    font-size: 22px;
}

.opsgate-triage-evidence-card .opsgate-triage-inline-link {
    margin-top: auto;
    padding-top: 10px;
}

.opsgate-triage-surface-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
    padding: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f7fc 100%);
}

.opsgate-triage-surface-secondary {
    margin-top: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
}

.opsgate-triage-surface-support {
    padding: 12px 14px;
}

.opsgate-triage-rail-card,
.opsgate-triage-rail-stat {
    padding: 14px 15px;
}

.opsgate-triage-rail-card-primary {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border-color: #cddcf0;
    box-shadow: 0 16px 32px rgba(15, 35, 52, 0.07);
}

.opsgate-triage-rail-card-compact {
    margin-top: auto;
}

.opsgate-triage-download-grid,
.opsgate-triage-rail-stats {
    display: grid;
    gap: 10px;
}

.opsgate-triage-download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px;
}

.opsgate-triage-download-button {
    justify-content: center;
    min-height: 34px;
    border-radius: 10px;
}

.opsgate-triage-rail-context-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dce5ef;
}

.opsgate-triage-rail-context-item {
    display: grid;
    gap: 4px;
}

.opsgate-triage-rail-context-item.is-wide {
    grid-column: 1 / -1;
}

.opsgate-triage-rail-context-label {
    color: #7388a0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.opsgate-triage-rail-context-item strong {
    color: #16324d;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-triage-rail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.opsgate-triage-detail-region {
    margin-top: 16px;
}

.opsgate-triage-inline-detail-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    align-items: start;
}

.opsgate-triage-inline-detail {
    border: 1px solid #d8e4ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
    box-shadow: 0 10px 20px rgba(15, 35, 52, 0.04);
    overflow: hidden;
}

.opsgate-triage-inline-detail[open] {
    grid-column: 1 / -1;
}

.opsgate-triage-inline-detail summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 84px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    transition: background 180ms ease;
}

.opsgate-triage-inline-detail summary::-webkit-details-marker {
    display: none;
}

.opsgate-triage-inline-detail-title {
    color: #0f2540;
    font-size: 15px;
    font-weight: 700;
}

.opsgate-triage-inline-detail[open] summary {
    background: linear-gradient(180deg, rgba(244, 249, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.opsgate-triage-inline-detail-head {
    display: grid;
    gap: 4px;
}

.opsgate-triage-inline-detail-kicker {
    color: #59728b;
    font-size: 12px;
}

.opsgate-triage-inline-detail-body {
    padding: 16px;
    border-top: 1px solid #d8e4ef;
    background: rgba(255, 255, 255, 0.86);
}

.opsgate-triage-inline-link {
    font-weight: 700;
}

.opsgate-triage-inline-detail-body .opsgate-posture-detail-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.opsgate-triage-inline-detail-body .opsgate-posture-detail-item {
    padding: 12px 13px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: none;
}

.opsgate-triage-inline-detail-body .opsgate-posture-detail-item p {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
}

.opsgate-triage-inline-detail-body .opsgate-pricing-hero-side-title {
    font-size: 18px;
    line-height: 1.2;
}

.opsgate-triage-inline-detail-body .opsgate-posture-detail-facts {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.opsgate-triage-inline-detail-body .opsgate-posture-detail-facts li {
    color: #35506e;
}

.opsgate-triage-rail-stat-compact {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: none;
}

.opsgate-triage-rail-stat-compact .opsgate-triage-rail-stat-value {
    font-size: 22px;
}

.opsgate-triage-advanced-artifacts {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #dce5ef;
}

.opsgate-triage-advanced-artifacts summary {
    cursor: pointer;
    color: #165dbe;
    font-size: 12px;
    font-weight: 700;
    list-style: none;
}

.opsgate-triage-advanced-artifacts summary::-webkit-details-marker {
    display: none;
}

.opsgate-triage-advanced-artifacts[open] summary {
    margin-bottom: 8px;
}

.opsgate-triage-rail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opsgate-triage-secondary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.opsgate-triage-detail-drawer {
    margin-top: 16px;
}

.opsgate-triage-panel:hover,
.opsgate-triage-evidence-card:hover,
.opsgate-triage-rail-card:hover,
.opsgate-triage-rail-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(16, 39, 67, 0.08);
}

.opsgate-triage-panel,
.opsgate-triage-evidence-card,
.opsgate-triage-rail-card,
.opsgate-triage-rail-stat {
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.opsgate-reports-dashboard {
    width: min(1840px, calc(100vw - 178px));
    max-width: none;
    margin: 0 -28px 0 0;
    padding: 16px 18px;
    border-radius: 20px;
    border-color: #d3ddea;
    box-shadow: 0 24px 48px rgba(15, 42, 71, 0.1);
    background:
        linear-gradient(90deg, rgba(31, 111, 235, 0.05) 0, rgba(31, 111, 235, 0.05) 1px, transparent 1px, transparent 84px),
        radial-gradient(circle at top left, rgba(31, 111, 235, 0.05), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.opsgate-reports-header,
.opsgate-reports-surface-header,
.opsgate-reports-history-top,
.opsgate-reports-output-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.opsgate-reports-header {
    margin-bottom: 12px;
}

.opsgate-reports-header-copy {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.opsgate-reports-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
    color: #0f2540;
}

.opsgate-reports-subtitle {
    margin: 0;
    color: #48627f;
    font-size: 13px;
}

.opsgate-reports-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.opsgate-reports-action-link {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 12px;
    font-weight: 600;
}

.opsgate-reports-actions .opsgate-reports-action-link:first-child {
    border-color: #1b5fc7;
    color: #1b5fc7;
    box-shadow: 0 12px 22px rgba(27, 95, 199, 0.1);
}

.opsgate-reports-current-band {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.82fr);
    gap: 16px;
    margin: 14px 0;
    padding: 18px;
    border: 1px solid #d7e3ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    box-shadow: 0 10px 24px rgba(15, 42, 71, 0.05);
}

.opsgate-reports-current-band-tone-good {
    border-color: #cfe1f0;
    background: linear-gradient(180deg, #f8fdff 0%, #eef7ff 100%);
}

.opsgate-reports-current-band-tone-warn {
    border-color: #ecd8a2;
    background: linear-gradient(180deg, #fffdf8 0%, #fff6e4 100%);
}

.opsgate-reports-current-band-tone-bad {
    border-color: #efc7c4;
    background: linear-gradient(180deg, #fff8f7 0%, #ffefed 100%);
}

.opsgate-reports-current-main,
.opsgate-reports-current-side {
    min-width: 0;
}

.opsgate-reports-current-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.opsgate-reports-current-title {
    margin: 0;
    color: #0f2540;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 800;
}

.opsgate-reports-current-copy,
.opsgate-reports-current-side-copy {
    margin: 10px 0 0;
    color: #48627f;
    font-size: 14px;
    line-height: 1.55;
}

.opsgate-reports-current-side {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    padding-left: 18px;
    border-left: 1px solid #dbe6f1;
}

.opsgate-reports-current-side-title {
    margin: 0;
    color: #0f2540;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-reports-trust-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.opsgate-reports-trust-panel {
    padding: 14px 16px;
    border: 1px solid #d7e2ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px rgba(16, 39, 67, 0.04);
}

.opsgate-reports-trust-panel-tone-good {
    border-color: #bfe1cb;
    background: linear-gradient(180deg, #f3fcf6 0%, #e6f7ed 100%);
}

.opsgate-reports-trust-panel-tone-info {
    border-color: #cfdcf1;
    background: linear-gradient(180deg, #f5f9ff 0%, #eaf2ff 100%);
}

.opsgate-reports-trust-panel-tone-warn {
    border-color: #ead5a0;
    background: linear-gradient(180deg, #fffaf0 0%, #fff0d2 100%);
}

.opsgate-reports-trust-panel-tone-bad {
    border-color: #efc4c1;
    background: linear-gradient(180deg, #fff5f4 0%, #ffe8e6 100%);
}

.opsgate-reports-trust-panel-tone-neutral {
    border-color: #dce3ea;
    background: linear-gradient(180deg, #f9fafb 0%, #f2f4f6 100%);
}

.opsgate-reports-trust-panel-value {
    margin: 0;
    color: #163247;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}

.opsgate-reports-trust-panel-tone-good .opsgate-reports-trust-panel-value {
    color: #1d7c49;
}

.opsgate-reports-trust-panel-tone-info .opsgate-reports-trust-panel-value {
    color: #24558e;
}

.opsgate-reports-trust-panel-tone-warn .opsgate-reports-trust-panel-value {
    color: #9c6300;
}

.opsgate-reports-trust-panel-tone-bad .opsgate-reports-trust-panel-value {
    color: #b23a36;
}

.opsgate-reports-trust-panel-tone-neutral .opsgate-reports-trust-panel-value {
    color: #4a6274;
}

.opsgate-reports-trust-panel-copy,
.opsgate-reports-trust-panel-meta {
    margin: 8px 0 0;
    color: #567088;
    font-size: 13px;
    line-height: 1.5;
}

.opsgate-reports-status-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
    background: transparent;
}

.opsgate-reports-status-item {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #dbe5ef;
    border-right: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 6px 14px rgba(16, 39, 67, 0.03);
}

.opsgate-reports-status-item:last-child {
    border-right: 0;
}

.opsgate-reports-status-item-tone-good {
    border-color: #bfe1cb;
    background: linear-gradient(180deg, #f3fcf6 0%, #e6f7ed 100%);
}

.opsgate-reports-status-item-tone-info {
    border-color: #cfdcf1;
    background: linear-gradient(180deg, #f5f9ff 0%, #eaf2ff 100%);
}

.opsgate-reports-status-item-tone-warn {
    border-color: #ead5a0;
    background: linear-gradient(180deg, #fffaf0 0%, #fff0d2 100%);
}

.opsgate-reports-status-item-tone-bad {
    border-color: #efc4c1;
    background: linear-gradient(180deg, #fff5f4 0%, #ffe8e6 100%);
}

.opsgate-reports-status-label,
.opsgate-reports-eyebrow {
    color: #6d8298;
    font-size: 12px;
}

.opsgate-reports-status-value {
    color: #22364d;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opsgate-reports-status-item-tone-good .opsgate-reports-status-value {
    color: #1d7c49;
}

.opsgate-reports-status-item-tone-info .opsgate-reports-status-value {
    color: #24558e;
}

.opsgate-reports-status-item-tone-warn .opsgate-reports-status-value {
    color: #9c6300;
}

.opsgate-reports-status-item-tone-bad .opsgate-reports-status-value {
    color: #b23a36;
}

.opsgate-reports-story-surface,
.opsgate-reports-glossary-surface {
    margin-bottom: 14px;
}

.opsgate-reports-story-grid,
.opsgate-reports-story-note-grid,
.opsgate-reports-glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.opsgate-reports-story-note-grid {
    margin-top: 12px;
}

.opsgate-reports-story-card,
.opsgate-reports-story-note,
.opsgate-reports-glossary-card {
    padding: 14px 15px;
    border: 1px solid #d9e4ef;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 8px 18px rgba(16, 39, 67, 0.04);
}

.opsgate-reports-story-value,
.opsgate-reports-story-note-title,
.opsgate-reports-glossary-title {
    color: #0f2540;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-reports-story-copy,
.opsgate-reports-story-note-copy,
.opsgate-reports-glossary-copy {
    margin: 8px 0 0;
    color: #567088;
    font-size: 13px;
    line-height: 1.5;
}

.opsgate-reports-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.78fr);
    gap: 14px;
    margin-bottom: 16px;
}

.opsgate-reports-surface,
.opsgate-reports-output-card,
.opsgate-reports-technical-card,
.opsgate-reports-rail-card,
.opsgate-reports-history-card,
.opsgate-reports-technical-stat {
    border: 1px solid #d7e2ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 18px rgba(16, 39, 67, 0.04);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.opsgate-reports-surface,
.opsgate-reports-technical-card,
.opsgate-reports-rail-card,
.opsgate-reports-history-card {
    padding: 14px;
}

.opsgate-reports-surface-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.opsgate-reports-surface-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fe 100%);
}

.opsgate-reports-surface-title,
.opsgate-reports-technical-title {
    margin: 0;
    color: #0f2540;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-reports-surface-link {
    font-size: 12px;
    font-weight: 700;
    color: #165dbe;
}

.opsgate-reports-eyebrow {
    display: block;
    margin-bottom: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.opsgate-reports-output-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.opsgate-reports-output-card {
    padding: 14px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}

.opsgate-reports-output-card-json {
    background: linear-gradient(180deg, #fffaf0 0%, #fff5dc 100%);
}

.opsgate-reports-output-label {
    color: #0f2540;
    font-size: 16px;
    font-weight: 700;
}

.opsgate-reports-output-state {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef4fd;
    border: 1px solid #d0def5;
    color: #24558e;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-reports-output-state-good,
.opsgate-reports-history-state-good {
    background: #e7f7ee;
    border-color: #bce3cc;
    color: #1d7c49;
}

.opsgate-reports-output-state-warn,
.opsgate-reports-history-state-warn {
    background: #fff3d8;
    border-color: #f1d18a;
    color: #9c6300;
}

.opsgate-reports-output-state-bad,
.opsgate-reports-history-state-bad {
    background: #ffe8e6;
    border-color: #f2b7b4;
    color: #b23a36;
}

.opsgate-reports-output-state-pending,
.opsgate-reports-history-state-pending {
    background: #eef4fd;
    border-color: #d0def5;
    color: #24558e;
}

.opsgate-reports-output-meta,
.opsgate-reports-technical-copy,
.opsgate-reports-rail-copy,
.opsgate-reports-rail-meta,
.opsgate-reports-history-meta,
.opsgate-reports-history-copy,
.opsgate-reports-history-empty {
    margin: 8px 0 0;
    color: #567088;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-reports-output-actions,
.opsgate-reports-history-actions,
.opsgate-reports-advanced-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.opsgate-reports-output-actions {
    margin-top: auto;
    padding-top: 14px;
}

.opsgate-reports-inline-form {
    display: inline-flex;
    margin: 0;
}

.opsgate-reports-output-button {
    min-height: 34px;
    border-radius: 10px;
}

.opsgate-reports-output-empty {
    align-self: center;
    color: #7d90a6;
    font-size: 12px;
    font-weight: 600;
}

.opsgate-reports-technical-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.opsgate-reports-technical-stat {
    padding: 12px;
}

.opsgate-reports-technical-value,
.opsgate-reports-rail-value {
    color: #0f2540;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
}

.opsgate-reports-rail-card-tone-good {
    background: linear-gradient(180deg, #f4faff 0%, #e9f3ff 100%);
    border-color: #c9ddf4;
}

.opsgate-reports-rail-card-tone-warn {
    background: linear-gradient(180deg, #fff8e7 0%, #ffefc9 100%);
    border-color: #f0d58d;
}

.opsgate-reports-rail-card-tone-bad {
    background: linear-gradient(180deg, #fff1f0 0%, #ffdede 100%);
    border-color: #efc0be;
}

.opsgate-reports-rail-card-tone-good .opsgate-reports-rail-value {
    color: #12965d;
}

.opsgate-reports-rail-card-tone-warn .opsgate-reports-rail-value {
    color: #b67800;
}

.opsgate-reports-rail-card-tone-bad .opsgate-reports-rail-value {
    color: #c23c35;
}

.opsgate-reports-rail-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.opsgate-reports-rail-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-reports-rail-pill-good {
    background: #eef9f2;
    border-color: #bce3cc;
    color: #1d7c49;
}

.opsgate-reports-rail-pill-soft-good {
    background: #edf8f1;
    border-color: #cfead9;
    color: #2d7d53;
}

.opsgate-reports-rail-pill-warn {
    background: #fff3d8;
    border-color: #f1d18a;
    color: #9c6300;
}

.opsgate-reports-rail-pill-soft-warn {
    background: #fff8e8;
    border-color: #f3deaa;
    color: #926400;
}

.opsgate-reports-rail-pill-bad {
    background: #ffe8e6;
    border-color: #f2b7b4;
    color: #b23a36;
}

.opsgate-reports-rail-pill-soft-bad {
    background: #fff1f0;
    border-color: #f4c9c7;
    color: #b14b43;
}

.opsgate-reports-rail-pill-info {
    background: #eef5ff;
    border-color: #cdddf6;
    color: #24558e;
}

.opsgate-reports-rail-pill-soft-info {
    background: #f2f7ff;
    border-color: #d8e5f8;
    color: #356094;
}

.opsgate-reports-rail-pill-neutral {
    background: #f3f6fa;
    border-color: #d7e0ea;
    color: #5c7086;
}

.opsgate-reports-rail-pill-soft-neutral {
    background: #f7f9fc;
    border-color: #dde6ef;
    color: #60768c;
}

.opsgate-reports-advanced-details summary {
    cursor: pointer;
    color: #165dbe;
    font-size: 12px;
    font-weight: 700;
    list-style: none;
}

.opsgate-reports-advanced-details summary::-webkit-details-marker {
    display: none;
}

.opsgate-reports-history-surface {
    background: rgba(255, 255, 255, 0.94);
}

.opsgate-reports-history-list {
    display: grid;
    gap: 12px;
}

.opsgate-reports-history-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.opsgate-reports-history-main {
    flex: 1 1 auto;
    min-width: 0;
}

.opsgate-reports-history-format-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.opsgate-reports-history-format-pill {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.opsgate-reports-history-format-pill-excel {
    background: #eef9f1 !important;
    border-color: #bfe2ca !important;
    color: #1f7d4e !important;
}

.opsgate-reports-history-format-pill-html {
    background: #eef3ff !important;
    border-color: #cdd8f7 !important;
    color: #315ab1 !important;
}

.opsgate-reports-history-format-pill-csv {
    background: #fff4de !important;
    border-color: #f0d392 !important;
    color: #996300 !important;
}

.opsgate-reports-history-format-pill-pdf {
    background: #ffeceb !important;
    border-color: #efc3c0 !important;
    color: #b1403b !important;
}

.opsgate-reports-history-title {
    margin: 0;
    color: #0f2540;
    font-size: 16px;
    font-weight: 700;
}

.opsgate-reports-history-state {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f3f6fa;
    border: 1px solid #d8e1ea;
    color: #4e647b;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-reports-history-state.opsgate-reports-history-state-good {
    background: #e7f7ee;
    border-color: #bce3cc;
    color: #1d7c49;
}

.opsgate-reports-history-state.opsgate-reports-history-state-warn {
    background: #fff3d8;
    border-color: #f1d18a;
    color: #9c6300;
}

.opsgate-reports-history-state.opsgate-reports-history-state-bad {
    background: #ffe8e6;
    border-color: #f2b7b4;
    color: #b23a36;
}

.opsgate-reports-history-state.opsgate-reports-history-state-pending {
    background: #eef4fd;
    border-color: #d0def5;
    color: #24558e;
}

.opsgate-reports-history-card-active {
    border-color: #bdd2f3;
    box-shadow: 0 12px 24px rgba(31, 111, 235, 0.08);
}

.opsgate-reports-history-card {
    position: relative;
}

.opsgate-reports-history-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 16px 0 0 16px;
    background: linear-gradient(180deg, #cfdcf1 0%, #dbe5ef 100%);
}

.opsgate-reports-history-card-active::before {
    background: linear-gradient(180deg, #2c74df 0%, #5aa6ff 100%);
}

.opsgate-reports-history-card-empty {
    justify-content: flex-start;
}

.opsgate-reports-history-actions {
    min-width: 220px;
    width: 220px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.opsgate-reports-history-actions-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.opsgate-reports-history-action-details {
    width: auto;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.opsgate-reports-history-action-details summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #dce6f1;
    border-radius: 999px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    color: #165dbe;
    font-size: 12px;
    font-weight: 700;
    list-style: none;
}

.opsgate-reports-history-action-details summary::-webkit-details-marker {
    display: none;
}

.opsgate-reports-history-action-grid {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #dce6f1;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
}

.opsgate-reports-history-action-group {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid #e1e9f2;
}

.opsgate-reports-history-action-group:first-child {
    padding-top: 0;
    border-top: 0;
}

.opsgate-reports-history-action-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.opsgate-reports-technical-strip {
    margin-bottom: 16px;
    background: linear-gradient(180deg, #fffdf9 0%, #f7fbff 100%);
}

.opsgate-reports-technical-details > summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.opsgate-reports-technical-details > summary::-webkit-details-marker {
    display: none;
}

.opsgate-reports-technical-details[open] > summary {
    margin-bottom: 14px;
}

.opsgate-reports-technical-strip-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.75fr);
    gap: 14px;
    align-items: flex-start;
}

.opsgate-reports-technical-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.opsgate-reports-artifact-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.opsgate-reports-artifact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #dde6ef;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
}

.opsgate-reports-artifact-copy {
    min-width: 0;
}

.opsgate-reports-artifact-title {
    color: #0f2540;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
}

.opsgate-reports-artifact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}


.opsgate-reports-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
}

.opsgate-reports-modal[hidden] {
    display: none;
}

.opsgate-reports-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 37, 64, 0.58);
}

.opsgate-reports-modal-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1100px, calc(100vw - 80px));
    height: min(82vh, 900px);
    margin: 6vh auto 0;
    border-radius: 18px;
    border: 1px solid #cbd9ea;
    background: #fff;
    box-shadow: 0 24px 54px rgba(15, 37, 64, 0.28);
    overflow: hidden;
}

.opsgate-reports-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #dce5ef;
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

.opsgate-reports-modal-title {
    margin: 0;
    color: #0f2540;
    font-size: 18px;
    font-weight: 700;
}

.opsgate-reports-modal-close {
    color: #5f7690;
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
}

.opsgate-reports-modal-body {
    flex: 1;
    min-height: 0;
    background: #edf3fb;
}

.opsgate-reports-modal-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.opsgate-alerts-dashboard {
    width: auto;
    max-width: none;
    margin-right: 0;
    padding: 18px 20px 20px;
    border-radius: 20px;
    border: 1px solid #d7e2ee;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fe 100%);
    box-shadow: 0 16px 40px rgba(16, 39, 67, 0.08);
}

.opsgate-alerts-header,
.opsgate-alerts-surface-header,
.opsgate-alerts-rule-top,
.opsgate-alerts-history-top,
.opsgate-alerts-status-strip,
.opsgate-alerts-summary-grid,
.opsgate-alerts-columns,
.opsgate-alerts-history-time-grid,
.opsgate-alerts-rule-detail-grid,
.opsgate-alerts-rule-meta,
.opsgate-alerts-history-meta {
    display: flex;
}

.opsgate-alerts-header,
.opsgate-alerts-surface-header,
.opsgate-alerts-rule-top,
.opsgate-alerts-history-top {
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.opsgate-alerts-header {
    margin-bottom: 14px;
}

.opsgate-alerts-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 48px 32px;
    text-align: center;
}

.opsgate-alerts-empty-state-inner {
    max-width: 480px;
}

.opsgate-alerts-empty-state-title {
    margin: 0 0 12px;
    color: #0f2540;
    font-size: 22px;
    font-weight: 600;
}

.opsgate-alerts-empty-state-copy {
    margin: 0 0 24px;
    color: #4a5568;
    font-size: 14px;
    line-height: 1.6;
}

.opsgate-alerts-header-copy {
    min-width: 0;
}

.opsgate-alerts-title {
    margin: 0;
    color: #0f2540;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 800;
}

.opsgate-alerts-subtitle {
    margin: 6px 0 0;
    color: #567088;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-alerts-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.opsgate-alerts-status-strip {
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 14px;
    border: 1px solid #d7e2ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
}

.opsgate-alerts-status-item {
    flex: 1 1 210px;
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid #e1e8f0;
}

.opsgate-alerts-status-item:last-child {
    border-right: 0;
}

.opsgate-alerts-status-label,
.opsgate-alerts-eyebrow,
.opsgate-alerts-detail-label {
    display: block;
    color: #7890aa;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.opsgate-alerts-status-value,
.opsgate-alerts-detail-value {
    display: block;
    margin-top: 4px;
    color: #0f2540;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.opsgate-alerts-summary-grid {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.opsgate-alerts-summary-card,
.opsgate-alerts-surface,
.opsgate-alerts-rule-card,
.opsgate-alerts-history-card,
.opsgate-alerts-time-card {
    border: 1px solid #d7e2ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 18px rgba(16, 39, 67, 0.04);
}

.opsgate-alerts-summary-card {
    flex: 1 1 250px;
    min-width: 0;
    padding: 14px;
}

.opsgate-alerts-summary-card-primary {
    background: linear-gradient(180deg, #fbfdff 0%, #f1f7ff 100%);
}

.opsgate-alerts-summary-card-action {
    background: linear-gradient(180deg, #fffdf8 0%, #f8fbff 100%);
}

.opsgate-alerts-summary-grid-hero {
    align-items: stretch;
}

.opsgate-alerts-summary-grid-hero .opsgate-alerts-summary-card-primary {
    flex: 1.45 1 430px;
}

.opsgate-alerts-summary-grid-hero .opsgate-alerts-summary-card {
    min-height: 0;
}

.opsgate-alerts-summary-grid-compact {
    margin-bottom: 14px;
}

.opsgate-alerts-summary-card-good {
    background: linear-gradient(180deg, #f3fbf7 0%, #edf8f1 100%);
    border-color: #cce6d5;
}

.opsgate-alerts-summary-card-warn {
    background: linear-gradient(180deg, #fffaf0 0%, #fff3dd 100%);
    border-color: #f1d39b;
}

.opsgate-alerts-summary-card-bad {
    background: linear-gradient(180deg, #fff4f3 0%, #ffe8e6 100%);
    border-color: #f2c2bf;
}

.opsgate-alerts-summary-value {
    margin-top: 10px;
    color: #0f2540;
    font-size: 17px;
    line-height: 1.15;
    font-weight: 800;
}

.opsgate-alerts-summary-value-good {
    color: #1d7c49;
}

.opsgate-alerts-summary-value-warn {
    color: #9c6300;
}

.opsgate-alerts-summary-value-bad {
    color: #b23a36;
}

.opsgate-alerts-summary-copy,
.opsgate-alerts-history-copy,
.opsgate-alerts-history-subtitle,
.opsgate-alerts-rule-description,
.opsgate-alerts-detail-meta,
.opsgate-alerts-rule-id,
.opsgate-alerts-rule-scope {
    margin: 8px 0 0;
    color: #567088;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-alerts-summary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.opsgate-alerts-columns {
    align-items: flex-start;
    gap: 14px;
}

.opsgate-alerts-status-strip-refined {
    background: rgba(248, 251, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.opsgate-alerts-status-strip-refined .opsgate-alerts-status-item {
    padding: 10px 12px;
}

.opsgate-alerts-surface {
    padding: 14px;
}

.opsgate-alerts-surface-copy {
    min-width: 0;
}

.opsgate-alerts-surface-main {
    flex: 1 1 64%;
    min-width: 0;
}

.opsgate-alerts-surface-rail {
    flex: 0 0 min(34%, 460px);
    min-width: 320px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}

.opsgate-alerts-surface-title {
    margin: 0;
    color: #0f2540;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-alerts-surface-link {
    color: #165dbe;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-alerts-destinations-surface,
.opsgate-alerts-support-band {
    margin-bottom: 12px;
}

.opsgate-alert-inline-status {
    display: none;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #d7e2ee;
    background: #fff;
}

.opsgate-alert-inline-status.is-visible {
    display: block;
}

.opsgate-alert-inline-status.is-success {
    border-color: #bce3cc;
    background: #edf8f1;
}

.opsgate-alert-inline-status.is-error,
.opsgate-alert-panel-error {
    border-color: #f2b7b4;
    background: #fff1f0;
}

.opsgate-alert-inline-status p,
.opsgate-alert-panel p {
    margin: 0;
}

.opsgate-alert-panel {
    padding: 14px 16px;
    border: 1px solid #d7e2ee;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
}

.opsgate-alerts-legacy-block {
    display: none !important;
}

.opsgate-alerts-create-details,
.opsgate-alerts-inline-details,
.opsgate-alerts-support-details {
    margin: 0 0 14px;
    border: 1px solid #d7e2ee;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
}

.opsgate-alerts-inline-details {
    margin: 0;
}

.opsgate-alerts-support-details {
    margin-top: 14px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}

.opsgate-alerts-create-details > summary,
.opsgate-alerts-inline-details > summary,
.opsgate-alerts-support-details > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: #165dbe;
    font-size: 13px;
    font-weight: 700;
}

.opsgate-alerts-support-details > summary {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    color: #0f2540;
}

.opsgate-alerts-create-details > summary::-webkit-details-marker,
.opsgate-alerts-inline-details > summary::-webkit-details-marker,
.opsgate-alerts-support-details > summary::-webkit-details-marker {
    display: none;
}

.opsgate-alerts-create-panel {
    padding: 0 14px 10px;
}

.opsgate-alerts-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.opsgate-alerts-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    color: #36506b;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

.opsgate-alerts-form-field-wide {
    grid-column: 1 / -1;
}

.opsgate-alerts-form-field .regular-text,
.opsgate-alerts-form-field select {
    width: 100%;
    max-width: none;
}

.opsgate-alerts-form-field small {
    color: #6b849c;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
}

.opsgate-alerts-create-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin-top: 10px;
}

.opsgate-alerts-create-guidance {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.opsgate-alerts-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #36506b;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-alerts-destinations-list {
    display: grid;
    gap: 8px;
}

.opsgate-alerts-destination-card {
    padding: 10px 12px;
    border: 1px solid #d7e2ee;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 14px rgba(16, 39, 67, 0.035);
}

.opsgate-alerts-destination-top,
.opsgate-alerts-destination-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.opsgate-alerts-destination-statuses,
.opsgate-alerts-destination-action-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.opsgate-alerts-destination-grid,
.opsgate-alerts-history-detail-grid {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.opsgate-alerts-destination-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(210px, 0.95fr);
}

.opsgate-alerts-history-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opsgate-alerts-destination-actions {
    margin-top: 8px;
    align-items: center;
}

.opsgate-alerts-destination-secondary-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.opsgate-alerts-support-stack {
    display: grid;
    gap: 12px;
    padding: 0 14px 12px;
}

.opsgate-alerts-rules-list,
.opsgate-alerts-history-list {
    display: grid;
    gap: 10px;
}

.opsgate-alerts-rules-table-wrap {
    overflow-x: auto;
}

.opsgate-alerts-rules-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.opsgate-alerts-rules-table th,
.opsgate-alerts-rules-table td {
    padding: 9px 9px;
    border-bottom: 1px solid #e1e8f0;
    vertical-align: top;
    text-align: left;
}

.opsgate-alerts-rules-table th {
    color: #7890aa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.opsgate-alerts-rules-table tr:last-child td {
    border-bottom: 0;
}

.opsgate-alerts-table-copy {
    margin-top: 4px;
    color: #567088;
    font-size: 11.5px;
    line-height: 1.45;
}

.opsgate-alerts-rules-group-row td {
    padding: 8px 10px;
    background: linear-gradient(180deg, #f7fbff 0%, #f3f8ff 100%);
    border-bottom: 1px solid #d8e4f2;
}

.opsgate-alerts-rules-group-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eaf2fd;
    color: #24558e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.opsgate-alerts-rule-card {
    padding: 16px;
}

.opsgate-alerts-rule-card.is-enabled {
    border-color: #c9ddf8;
}

.opsgate-alerts-rule-copy,
.opsgate-alerts-history-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.opsgate-alerts-history-card {
    overflow: hidden;
}

.opsgate-alerts-history-heading {
    min-width: 0;
}

.opsgate-alerts-rule-title,
.opsgate-alerts-history-title {
    margin: 0;
    color: #0f2540;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-alerts-destination-card .opsgate-alerts-history-title {
    font-size: 16px;
}

.opsgate-alerts-destination-heading .opsgate-alerts-history-meta {
    margin-top: 0;
}

.opsgate-alerts-rule-toggle {
    flex: 0 0 auto;
}

.opsgate-alerts-rule-meta,
.opsgate-alerts-history-meta {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.opsgate-alerts-pill,
.opsgate-alerts-status-chip,
.opsgate-alerts-rule-state {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #d7e2ee;
    background: #f4f8fe;
    color: #33526f;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-alerts-pill-target,
.opsgate-alerts-history-reference {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    align-items: flex-start;
    text-align: left;
    line-height: 1.35;
}

.opsgate-alerts-pill-time {
    white-space: normal;
}

.opsgate-alerts-pill-event-vulnerability {
    background: #fff0ee;
    border-color: #efc0be;
    color: #a33a36;
}

.opsgate-alerts-pill-event-delivery {
    background: #eef4fd;
    border-color: #d0def5;
    color: #24558e;
}

.opsgate-alerts-status-chip-good {
    background: #e7f7ee;
    border-color: #bce3cc;
    color: #1d7c49;
}

.opsgate-alerts-status-chip-warn {
    background: #fff3d8;
    border-color: #f1d18a;
    color: #9c6300;
}

.opsgate-alerts-status-chip-info {
    background: #eef4fd;
    border-color: #d0def5;
    color: #24558e;
}

.opsgate-alerts-status-chip-bad,
.opsgate-alerts-rule-state-off {
    background: #ffe8e6;
    border-color: #f2b7b4;
    color: #b23a36;
}

.opsgate-alerts-rule-detail-grid,
.opsgate-alerts-history-time-grid {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.opsgate-alerts-rule-detail,
.opsgate-alerts-time-card {
    flex: 1 1 180px;
    min-width: 0;
}

.opsgate-alerts-time-card {
    padding: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
}

.opsgate-alerts-rule-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
}

.opsgate-alert-switch-form {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.opsgate-alert-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
}

.opsgate-alert-switch:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.opsgate-alert-switch-track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.opsgate-alert-switch-slider {
    position: absolute;
    inset: 0;
    background: #c3c4c7;
    border-radius: 999px;
    transition: 0.18s ease;
}

.opsgate-alert-switch-slider:before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: 0.18s ease;
}

.opsgate-alert-switch-form[data-current-enabled="1"] .opsgate-alert-switch-slider {
    background: #2271b1;
}

.opsgate-alert-switch-form[data-current-enabled="1"] .opsgate-alert-switch-slider:before {
    transform: translateX(20px);
}

.opsgate-alert-switch.is-busy,
.opsgate-alert-switch-form.is-busy {
    opacity: .55;
    pointer-events: none;
}

.opsgate-alert-switch-label {
    min-width: 28px;
    font-size: 12px;
    color: #50575e;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.opsgate-alerts-rule-routing-copy {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.opsgate-alerts-rule-routing-copy .opsgate-alerts-table-copy {
    margin-top: 0;
}

.opsgate-alerts-rule-remove-form {
    margin-top: 8px;
}

.opsgate-alerts-rule-remove-button {
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: 24px !important;
}

.opsgate-alerts-history-issue {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #f2d4a4;
    background: #fff7e7;
    color: #8c5f00;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

.opsgate-alerts-setup-steps {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #c8d8f0;
    background: #f0f5fc;
}

.opsgate-alerts-setup-steps > summary {
    font-size: 12px;
    font-weight: 600;
    color: #1a4080;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.opsgate-alerts-setup-steps > summary::before {
    content: '▶';
    font-size: 9px;
    transition: transform 0.15s;
    color: #4a7bc4;
}

.opsgate-alerts-setup-steps[open] > summary::before {
    transform: rotate(90deg);
}

.opsgate-alerts-setup-steps > summary::-webkit-details-marker {
    display: none;
}

.opsgate-alerts-setup-list {
    margin: 10px 0 2px 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.opsgate-alerts-setup-list li {
    font-size: 12px;
    color: #2c3e6a;
    line-height: 1.5;
}

.opsgate-alerts-history-list-compact .opsgate-alerts-history-card {
    padding: 10px 12px;
}

.opsgate-alerts-history-list-compact .opsgate-alerts-history-top {
    align-items: center;
}

.opsgate-alerts-history-list-compact .opsgate-alerts-history-copy {
    margin-top: 4px;
}

.opsgate-alerts-history-list-compact .opsgate-alerts-history-meta {
    margin-top: 6px;
}

.opsgate-alerts-history-reference-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.opsgate-alerts-history-reference {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid #d7e2ee;
    background: #f7fbff;
    color: #36506b;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
}

.opsgate-alerts-history-timing {
    margin: 6px 0 0;
    color: #567088;
    font-size: 12px;
    line-height: 1.45;
}

.opsgate-alerts-rules-table-secondary th,
.opsgate-alerts-rules-table-secondary td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.opsgate-alerts-button-quiet-danger {
    border-color: #f0c4c0 !important;
    color: #b23a36 !important;
    background: #fff5f4 !important;
}

.opsgate-alerts-button-quiet-danger:hover,
.opsgate-alerts-button-quiet-danger:focus {
    border-color: #e49d97 !important;
    background: #ffe8e6 !important;
    color: #9c2d2a !important;
}

.opsgate-alerts-support-band .opsgate-alerts-channel-family-card {
    min-height: 0;
    padding: 12px 14px;
    box-shadow: none;
}

.opsgate-alerts-support-band .opsgate-alerts-history-copy {
    margin-top: 5px;
    max-width: 42ch;
}

.opsgate-activity-dashboard {
    width: auto;
    max-width: none;
    margin-right: 0;
    padding: 18px 20px 20px;
    border-radius: 20px;
    border: 1px solid #d7e2ee;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fe 100%);
    box-shadow: 0 16px 40px rgba(16, 39, 67, 0.08);
}

.opsgate-activity-header,
.opsgate-activity-status-strip,
.opsgate-activity-summary-grid,
.opsgate-activity-item-head {
    display: flex;
}

.opsgate-activity-header,
.opsgate-activity-item-head {
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.opsgate-activity-header {
    margin-bottom: 14px;
}

.opsgate-activity-title {
    margin: 0;
    color: #0f2540;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 800;
}

.opsgate-activity-subtitle {
    margin: 6px 0 0;
    color: #567088;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-activity-actions {
    display: inline-flex;
    gap: 8px;
}

.opsgate-activity-status-strip {
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 10px;
    border: 1px solid #d7e2ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
}

.opsgate-activity-status-item {
    flex: 1 1 220px;
    min-width: 0;
    padding: 10px 14px;
    border-right: 1px solid #e1e8f0;
}

.opsgate-activity-status-item:last-child {
    border-right: 0;
}

.opsgate-activity-status-label,
.opsgate-activity-eyebrow {
    display: block;
    color: #7890aa;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.opsgate-activity-status-value,
.opsgate-activity-summary-value {
    display: block;
    margin-top: 4px;
    color: #0f2540;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 800;
}

.opsgate-activity-summary-grid {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.opsgate-activity-summary-card,
.opsgate-activity-item,
.opsgate-activity-empty {
    border: 1px solid #d7e2ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 18px rgba(16, 39, 67, 0.04);
}

.opsgate-activity-summary-card {
    flex: 0 1 220px;
    min-width: 0;
    padding: 12px 14px;
}

.opsgate-activity-summary-copy,
.opsgate-activity-item-when,
.opsgate-activity-item-details,
.opsgate-activity-item-supporting,
.opsgate-activity-empty p {
    margin: 8px 0 0;
    color: #567088;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-activity-empty {
    padding: 16px;
}

.opsgate-activity-feed {
    display: grid;
    gap: 10px;
}

.opsgate-activity-item {
    position: relative;
    padding: 12px 16px 12px 22px;
}

.opsgate-activity-item::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 12px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #1f6feb;
    box-shadow: 0 0 0 5px rgba(31, 111, 235, 0.08);
}

.opsgate-activity-item-label {
    margin: 0;
    color: #0f2540;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-activity-item-stamp {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #d7e2ee;
    background: #f4f8fe;
    color: #33526f;
}

.opsgate-activity-item-stamp-success {
    background: #e7f7ee;
    border-color: #bce3cc;
    color: #1d7c49;
}

.opsgate-activity-item-stamp-warning {
    background: #fff3d8;
    border-color: #f1d18a;
    color: #9c6300;
}

.opsgate-activity-item-stamp-danger {
    background: #ffe8e6;
    border-color: #f2b7b4;
    color: #b23a36;
}

.opsgate-activity-item-stamp-info {
    background: #eef4fd;
    border-color: #d0def5;
    color: #24558e;
}

.opsgate-activity-item.is-validation {
    border-color: #c9ddf8;
    background: linear-gradient(180deg, #fbfdff 0%, #f1f7ff 100%);
}

.opsgate-activity-featured {
    margin-bottom: 12px;
    padding: 18px 20px;
    border: 1px solid #d7e2ee;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    box-shadow: 0 12px 26px rgba(16, 39, 67, 0.05);
}

.opsgate-activity-featured-top,
.opsgate-activity-featured-bottom,
.opsgate-activity-surface-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.opsgate-activity-featured-title {
    margin: 8px 0 0;
    color: #0f2540;
    font-size: 28px;
    line-height: 1.08;
    font-weight: 800;
}

.opsgate-activity-featured-copy {
    margin: 10px 0 0;
    color: #46627d;
    font-size: 14px;
    line-height: 1.5;
}

.opsgate-activity-featured-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.opsgate-activity-featured-bottom {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #dde7f1;
}

.opsgate-activity-featured-when,
.opsgate-activity-featured-supporting,
.opsgate-activity-surface-note {
    color: #567088;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-activity-family-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid #d7e2ee;
    background: #f4f8fe;
    color: #33526f;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-activity-family-chip-report {
    background: #edf4ff;
    border-color: #d0def5;
    color: #24558e;
}

.opsgate-activity-family-chip-triage {
    background: #fff3d8;
    border-color: #f1d18a;
    color: #9c6300;
}

.opsgate-activity-family-chip-alert {
    background: #eef9f2;
    border-color: #bce3cc;
    color: #1d7c49;
}

.opsgate-activity-family-chip-proof {
    background: #f3f6fb;
    border-color: #d9e2ef;
    color: #58738d;
}

.opsgate-activity-featured-tone-good {
    background: linear-gradient(180deg, #f5fcf7 0%, #ebf8ef 100%);
    border-color: #bedfca;
}

.opsgate-activity-featured-tone-warn {
    background: linear-gradient(180deg, #fffaf0 0%, #fff2db 100%);
    border-color: #efcb80;
}

.opsgate-activity-featured-tone-bad {
    background: linear-gradient(180deg, #fff6f5 0%, #ffebe9 100%);
    border-color: #efb6b2;
}

.opsgate-activity-featured-tone-info,
.opsgate-activity-featured-tone-proof {
    background: linear-gradient(180deg, #fbfdff 0%, #f1f7ff 100%);
    border-color: #c9ddf8;
}

.opsgate-activity-schedule-nudge {
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px dashed #c4cfd8;
    border-radius: 7px;
    margin: 10px 0 4px;
}
.opsgate-activity-schedule-nudge p {
    margin: 0;
    font-size: 13px;
    color: #4a6274;
}
.opsgate-activity-schedule-nudge a {
    color: var(--og-accent, #1a6bcc);
    font-weight: 600;
    text-decoration: none;
}
.opsgate-activity-schedule-nudge a:hover { text-decoration: underline; }

.opsgate-activity-item-family-report::before {
    background: #1f6feb;
    box-shadow: 0 0 0 5px rgba(31, 111, 235, 0.08);
}

.opsgate-activity-item-family-triage::before {
    background: #d28a00;
    box-shadow: 0 0 0 5px rgba(210, 138, 0, 0.08);
}

.opsgate-activity-item-family-alert::before {
    background: #17965e;
    box-shadow: 0 0 0 5px rgba(23, 150, 94, 0.08);
}

.opsgate-activity-item-proof::before,
.opsgate-activity-item-family-proof::before {
    background: #7a90a8;
    box-shadow: 0 0 0 5px rgba(122, 144, 168, 0.08);
}

.opsgate-activity-item-tone-warn {
    background: linear-gradient(180deg, #fffdf8 0%, #fff7e7 100%);
    border-color: #f0dab0;
}

.opsgate-activity-item-tone-good {
    background: linear-gradient(180deg, #ffffff 0%, #f8fdf9 100%);
}

.opsgate-activity-item-tone-bad {
    background: linear-gradient(180deg, #fff9f8 0%, #fff1ef 100%);
    border-color: #f0cbc6;
}

.opsgate-activity-item-proof {
    opacity: 0.94;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
}

.opsgate-activity-proof-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #dde7f1;
}

.opsgate-activity-surface-title {
    margin: 0;
    color: #0f2540;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-clients-dashboard {
    width: auto;
    max-width: none;
    margin-right: 0;
    padding: 18px 20px 20px;
    border-radius: 20px;
    border: 1px solid #d7e2ee;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fe 100%);
    box-shadow: 0 16px 40px rgba(16, 39, 67, 0.08);
}

.opsgate-clients-header,
.opsgate-clients-status-strip,
.opsgate-clients-summary-grid,
.opsgate-clients-surfaces,
.opsgate-clients-surface-header,
.opsgate-clients-identity-grid {
    display: flex;
}

.opsgate-clients-header,
.opsgate-clients-surface-header {
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.opsgate-clients-header {
    margin-bottom: 14px;
}

.opsgate-clients-title {
    margin: 0;
    color: #0f2540;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 800;
}

.opsgate-clients-subtitle {
    margin: 6px 0 0;
    color: #567088;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-clients-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.95fr);
    gap: 16px;
    margin-bottom: 14px;
    padding: 20px;
    border: 1px solid #d7e2ee;
    border-radius: 20px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fe 100%);
    box-shadow: 0 12px 30px rgba(16, 39, 67, 0.06);
}

.opsgate-clients-hero-tone-good {
    background: linear-gradient(180deg, #f5fcf7 0%, #ebf8ef 100%);
    border-color: #bedfca;
}

.opsgate-clients-hero-tone-warn {
    background: linear-gradient(180deg, #fffaf0 0%, #fff2db 100%);
    border-color: #efcb80;
}

.opsgate-clients-hero-tone-bad {
    background: linear-gradient(180deg, #fff6f5 0%, #ffebe9 100%);
    border-color: #efb6b2;
}

.opsgate-clients-hero-main,
.opsgate-clients-hero-side {
    min-width: 0;
}

.opsgate-clients-hero-site {
    margin-top: 8px;
    color: #0f2540;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 800;
}

.opsgate-clients-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.opsgate-clients-hero-meta-item {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #d2deee;
    background: rgba(255, 255, 255, 0.72);
    color: #36536e;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-clients-hero-posture {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 18px;
}

.opsgate-clients-hero-score {
    flex: 0 0 auto;
    color: #0f2540;
    font-size: 78px;
    line-height: 0.9;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.opsgate-clients-hero-tone-good .opsgate-clients-hero-score {
    color: #16975e;
}

.opsgate-clients-hero-tone-warn .opsgate-clients-hero-score {
    color: #b67800;
}

.opsgate-clients-hero-tone-bad .opsgate-clients-hero-score {
    color: #c23c35;
}

.opsgate-clients-hero-state {
    min-width: 0;
    padding-top: 8px;
}

.opsgate-clients-hero-state-title {
    color: #0f2540;
    font-size: 30px;
    line-height: 1.08;
    font-weight: 800;
}

.opsgate-clients-hero-copy {
    margin: 10px 0 0;
    color: #46627d;
    font-size: 15px;
    line-height: 1.5;
}

.opsgate-clients-hero-side {
    align-self: stretch;
    padding: 18px;
    border: 1px solid rgba(210, 222, 238, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.opsgate-clients-hero-side-divider {
    height: 1px;
    margin: 16px 0;
    background: #dde7f1;
}

.opsgate-clients-confidence-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.opsgate-clients-confidence-item {
    padding: 12px 14px;
    border: 1px solid #d7e2ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 18px rgba(16, 39, 67, 0.04);
}

.opsgate-clients-status-strip {
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 14px;
    border: 1px solid #d7e2ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
}

.opsgate-clients-status-item {
    flex: 1 1 220px;
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid #e1e8f0;
}

.opsgate-clients-status-item:last-child {
    border-right: 0;
}

.opsgate-clients-status-label,
.opsgate-clients-eyebrow,
.opsgate-clients-detail-label {
    display: block;
    color: #7890aa;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.opsgate-clients-status-value,
.opsgate-clients-summary-value,
.opsgate-clients-detail-value {
    display: block;
    margin-top: 4px;
    color: #0f2540;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 800;
}

.opsgate-clients-summary-grid {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.opsgate-clients-summary-card,
.opsgate-clients-surface,
.opsgate-clients-empty,
.opsgate-clients-identity-card,
.opsgate-clients-reference-item {
    border: 1px solid #d7e2ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 18px rgba(16, 39, 67, 0.04);
}

.opsgate-clients-summary-card {
    flex: 1 1 260px;
    min-width: 0;
    padding: 16px;
}

.opsgate-clients-summary-card-tone-good {
    background: linear-gradient(180deg, #f4faff 0%, #e9f3ff 100%);
    border-color: #c9ddf4;
}

.opsgate-clients-summary-card-tone-warn {
    background: linear-gradient(180deg, #fff9ed 0%, #fff4de 100%);
    border-color: #f1d18a;
}

.opsgate-clients-summary-card-tone-bad {
    background: linear-gradient(180deg, #fff5f4 0%, #ffedea 100%);
    border-color: #f2b7b4;
}

.opsgate-clients-summary-score {
    margin-top: 8px;
    color: #0f2540;
    font-size: 56px;
    line-height: 1;
    font-weight: 800;
}

.opsgate-clients-summary-card-tone-good .opsgate-clients-summary-score {
    color: #12965d;
}

.opsgate-clients-summary-card-tone-warn .opsgate-clients-summary-score {
    color: #b67800;
}

.opsgate-clients-summary-card-tone-bad .opsgate-clients-summary-score {
    color: #c23c35;
}

.opsgate-clients-summary-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.opsgate-clients-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid #d7e2ee;
    background: #f4f8fe;
    color: #33526f;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-clients-pill-good {
    background: #eef9f2;
    border-color: #bce3cc;
    color: #1d7c49;
}

.opsgate-clients-pill-warn {
    background: #fff3d8;
    border-color: #f1d18a;
    color: #9c6300;
}

.opsgate-clients-pill-bad {
    background: #ffe8e6;
    border-color: #f2b7b4;
    color: #b23a36;
}

.opsgate-clients-pill-soft {
    background: #edf4ff;
    border-color: #d0def5;
    color: #24558e;
}

.opsgate-clients-summary-copy,
.opsgate-clients-surface-copy,
.opsgate-clients-empty p {
    margin: 8px 0 0;
    color: #567088;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-clients-surfaces {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 14px;
}

.opsgate-clients-surface {
    padding: 16px;
}

.opsgate-clients-surface-main,
.opsgate-clients-surface-secondary {
    min-width: 0;
}

.opsgate-clients-surface-secondary {
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}

.opsgate-clients-surface-title {
    margin: 0;
    color: #0f2540;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.opsgate-clients-surface-link {
    color: #165dbe;
    font-size: 12px;
    font-weight: 700;
}

.opsgate-clients-identity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.opsgate-clients-identity-card,
.opsgate-clients-reference-item {
    flex: 1 1 220px;
    min-width: 0;
    padding: 14px;
}

.opsgate-clients-reference-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.opsgate-clients-ops-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.opsgate-clients-list {
    margin: 12px 0 0;
    padding-left: 18px;
    color: #33526f;
    font-size: 13px;
    line-height: 1.45;
}

.opsgate-clients-list li + li {
    margin-top: 6px;
}

.opsgate-clients-reference-item code {
    display: block;
    margin-top: 6px;
    color: #33526f;
    font-size: 12px;
    word-break: break-word;
    white-space: pre-wrap;
}

.opsgate-clients-empty {
    padding: 16px;
}

.opsgate-pricing-dashboard,
.opsgate-settings-dashboard {
    padding: 18px 20px 20px;
    border-radius: 20px;
    border: 1px solid #d7e2ee;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fe 100%);
    box-shadow: 0 16px 40px rgba(16, 39, 67, 0.08);
}

/* Settings sub-navigation */
.opsgate-settings-subnav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    background: #f0f4f8;
    border-radius: 10px;
    border: 1px solid #dce3ea;
    width: fit-content;
}

.opsgate-settings-subnav-btn {
    padding: 6px 18px;
    border: none;
    background: transparent;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #4a6274;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.opsgate-settings-subnav-btn:hover {
    background: rgba(255,255,255,0.7);
    color: #163247;
}

.opsgate-settings-subnav-btn.is-active {
    background: #fff;
    color: #163247;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(16,39,67,0.10);
}

.opsgate-settings-form-spacing {
    margin-top: 18px;
}

.opsgate-settings-schedule-hero,
.opsgate-settings-site-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
    align-items: start;
    grid-auto-rows: min-content;
    gap: 14px;
    margin-top: 16px;
}

.opsgate-settings-site-grid {
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
}

.opsgate-settings-module-primary,
.opsgate-settings-identity-card {
    min-width: 0;
}

.opsgate-settings-schedule-hero > .opsgate-settings-module,
.opsgate-settings-site-grid > .opsgate-settings-module {
    align-self: start;
    height: auto;
}

.opsgate-settings-schedule-hero .opsgate-settings-module,
.opsgate-settings-site-grid .opsgate-settings-module {
    margin-top: 0;
}

.opsgate-settings-module-side {
    display: grid;
    gap: 12px;
}

.opsgate-settings-inline-stat + .opsgate-settings-inline-stat {
    padding-top: 12px;
    border-top: 1px solid #e2eaf2;
}

.opsgate-settings-inline-stat p,
.opsgate-settings-mode-card p,
.opsgate-settings-compact-tile p,
.opsgate-settings-context-card p,
.opsgate-settings-activity-card p {
    margin: 8px 0 0;
    color: #567089;
}

.opsgate-settings-mode-grid,
.opsgate-settings-compact-strip,
.opsgate-settings-context-grid,
.opsgate-settings-connection-grid {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.opsgate-settings-mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opsgate-settings-compact-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.opsgate-settings-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.opsgate-settings-mode-card,
.opsgate-settings-compact-tile,
.opsgate-settings-context-card {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #d8e4ef;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    overflow: hidden;
}

.opsgate-settings-mode-card-good {
    background: linear-gradient(180deg, #f4fcf7 0%, #edf8f1 100%);
    border-color: #cfe6d6;
}

.opsgate-settings-mode-card-warn {
    background: linear-gradient(180deg, #fffaf0 0%, #fff4e5 100%);
    border-color: #f0d8ab;
}

.opsgate-settings-mode-card-info {
    background: linear-gradient(180deg, #f5f9ff 0%, #eef4ff 100%);
    border-color: #cddcf6;
}

.opsgate-settings-mode-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.opsgate-settings-mode-card-title,
.opsgate-settings-value {
    display: block;
    margin: 0;
    font-size: 18px;
    line-height: 1.28;
    font-weight: 700;
    color: #0f2540;
}

.opsgate-settings-compact-tile {
    background: rgba(255, 255, 255, 0.76);
}

.opsgate-settings-value-compact {
    display: block;
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: #163247;
}

.opsgate-settings-value-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.opsgate-settings-inline-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.opsgate-settings-inline-form-schedule {
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid #e2eaf2;
}

.opsgate-settings-toggle-block {
    min-width: 200px;
}

.opsgate-settings-inline-note {
    flex: 1 1 260px;
    margin: 0;
    color: #5a7187;
}

.opsgate-settings-submit-box {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
    width: 100%;
}

.opsgate-settings-submit-box .button {
    margin: 0;
}

.opsgate-settings-inline-note-submit {
    margin-right: auto;
}

.opsgate-settings-submit-box .button.is-dirty,
.opsgate-settings-submit-box .button-primary.is-dirty {
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.14);
    background: #2271b1;
    border-color: #135e96;
    color: #fff;
}

.opsgate-settings-form.is-dirty .opsgate-settings-inline-note {
    color: #174b73;
}

.opsgate-settings-module {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #d8e4ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f7f9fc 100%);
    box-shadow: 0 10px 20px rgba(15, 35, 52, 0.04);
}

.opsgate-settings-module-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.opsgate-settings-form-grid,
.opsgate-settings-support-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.opsgate-settings-form-grid {
    margin-top: 16px;
}

.opsgate-settings-identity-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opsgate-settings-form-grid label {
    display: block;
    margin-bottom: 6px;
    color: #163247;
}

.opsgate-settings-form-grid .regular-text,
.opsgate-settings-support-card .regular-text {
    width: 100%;
    max-width: none;
}

.opsgate-overview-action-form + #opsgate-overview-runtime-status {
    margin-top: 10px;
}

.opsgate-overview-surface-header {
    margin-bottom: 14px;
}

.opsgate-overview-status-strip {
    gap: 10px;
    margin-bottom: 16px;
}

.opsgate-overview-activity-list {
    gap: 10px;
    padding-top: 2px;
}

.opsgate-overview-activity-item {
    padding: 12px 14px 12px 20px;
}

.opsgate-overview-activity-item-supporting,
.opsgate-overview-activity-item-details {
    max-width: 68ch;
}

.opsgate-reports-current-band {
    gap: 18px;
    padding: 20px;
}

.opsgate-alerts-destinations-list {
    gap: 12px;
}

.opsgate-alerts-destination-card {
    padding: 12px 14px;
}

.opsgate-activity-feed {
    gap: 12px;
}

.opsgate-activity-item {
    padding: 14px 16px 14px 24px;
}

.opsgate-billing-operator-details {
    border: 1px solid rgba(215, 226, 238, 0.9);
    background: linear-gradient(180deg, rgba(251, 253, 255, 0.92) 0%, rgba(246, 249, 253, 0.92) 100%);
    box-shadow: 0 8px 18px rgba(15, 35, 52, 0.035);
}

.opsgate-settings-module-head p,
.opsgate-settings-inline-note,
.opsgate-settings-inline-note-submit {
    max-width: 68ch;
}

.opsgate-settings-support-card {
    padding: 16px;
    border: 1px solid #d8e4ef;
    border-radius: 14px;
    background: #fff;
}

.opsgate-settings-support-card p {
    margin: 8px 0 12px;
    color: #4d637c;
}

.opsgate-settings-activity-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    align-self: start;
    min-height: 0;
}

.opsgate-settings-connection-actions {
    margin-top: 12px;
}

.opsgate-settings-context-card-webhook {
    grid-column: span 2;
    min-width: 0;
}

.opsgate-settings-context-card-webhook .opsgate-settings-value-compact {
    display: block;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.opsgate-settings-support-card .regular-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.opsgate-settings-support-intro {
    margin: 8px 0 14px;
    color: #5d7389;
}

.opsgate-advanced-details {
    margin-top: 18px;
    border: 1px solid #dbe5ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #f7faff 0%, #f2f6fb 100%);
}

.opsgate-advanced-details > summary {
    padding: 14px 16px;
    color: #16324c;
    font-weight: 700;
}

.opsgate-advanced-details[open] > summary {
    border-bottom: 1px solid #dbe5ef;
    background: rgba(255, 255, 255, 0.72);
}

.opsgate-settings-support-export {
    margin-top: 6px;
}

.opsgate-posture-detail-module.is-open {
    border-color: #9ebde2;
    box-shadow: 0 14px 30px rgba(20, 63, 109, 0.10);
}

.opsgate-posture-detail-body {
    display: none;
    margin-top: 16px;
}

.opsgate-posture-detail-module.is-open .opsgate-posture-detail-body {
    display: block;
}

.opsgate-posture-detail-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 0;
}

.opsgate-posture-detail-item {
    padding: 14px;
    border: 1px solid #d8e4ef;
    border-radius: 14px;
    background: #f8fbff;
}

.opsgate-posture-detail-item p {
    margin: 8px 0 0;
    color: #4d637c;
}

.opsgate-posture-detail-facts {
    margin: 10px 0 0;
    padding-left: 18px;
    color: #26415f;
}

.opsgate-posture-detail-facts li + li {
    margin-top: 4px;
}

.opsgate-posture-detail-reason,
.opsgate-posture-detail-action {
    margin-top: 10px;
}

.opsgate-posture-detail-empty {
    margin: 16px 0 0;
    color: #4d637c;
}

.opsgate-operator-validation-details summary {
    cursor: pointer;
    font-weight: 700;
    color: #30455d;
    list-style: none;
    letter-spacing: 0.01em;
    font-size: 12px;
}

.opsgate-operator-validation-details summary::-webkit-details-marker {
    display: none;
}

.opsgate-operator-validation-details summary::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    margin-right: 8px;
    color: #7f93a8;
    font-size: 16px;
    line-height: 1;
}

.opsgate-operator-validation-details[open] summary::before {
    content: "−";
}

.opsgate-operator-validation-details-body {
    margin-top: 10px;
}

.opsgate-operator-validation-details {
    margin-top: 22px;
    border: 1px dashed #d9e1e9;
    border-radius: 18px;
    background: linear-gradient(180deg, #f7f9fb 0%, #f1f4f7 100%);
    box-shadow: none;
}

.opsgate-operator-validation-status-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    padding: 8px 12px;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
}

.opsgate-operator-validation-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.opsgate-operator-validation-action {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: none;
}

.opsgate-operator-validation-action .button {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 9px;
    font-size: 12px;
    box-shadow: none;
}

.opsgate-operator-validation-action .description {
    margin: 0;
    color: #688098;
    font-size: 11px;
    line-height: 1.35;
}

.opsgate-operator-validation-note {
    margin: 10px 0 0;
    color: #6b8097;
    font-size: 12px;
}

.opsgate-operator-history {
    margin-top: 10px;
}

.opsgate-operator-history .description {
    margin: 6px 0 0;
}

.opsgate-proof-receipt-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.opsgate-proof-receipt-link {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 11px;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    background: #fff;
    color: #0f2540;
    text-decoration: none;
    box-shadow: none;
}

.opsgate-proof-receipt-link:hover,
.opsgate-proof-receipt-link:focus {
    border-color: #0b57d0;
    box-shadow: 0 10px 24px rgba(11, 87, 208, 0.08);
    color: #0f2540;
}

.opsgate-proof-reason-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.opsgate-posture-detail-body-static {
    display: block !important;
    margin-top: 0;
    padding-top: 8px;
}

.opsgate-triage-empty-state h3 {
    margin-top: 0;
}

@media (max-width: 1600px) {
    .opsgate-alerts-dashboard {
        width: auto;
        margin-right: 0;
    }

    .opsgate-activity-dashboard {
        width: auto;
        margin-right: 0;
    }

    .opsgate-clients-dashboard {
        width: auto;
        margin-right: 0;
    }
}

@media (max-width: 1180px) {
    .opsgate-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsgate-billing-hero,
    .opsgate-billing-capability-grid,
    .opsgate-billing-support-strip {
        grid-template-columns: 1fr;
    }

    .opsgate-billing-hero-groups {
        grid-template-columns: 1fr;
    }

    .opsgate-billing-payment-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-alerts-columns {
        flex-direction: column;
    }

    .opsgate-alerts-surface-rail {
        flex-basis: auto;
        width: 100%;
        min-width: 0;
    }

    .opsgate-clients-hero,
    .opsgate-clients-surfaces {
        grid-template-columns: 1fr;
    }

    .opsgate-clients-confidence-strip,
    .opsgate-clients-reference-grid,
    .opsgate-clients-ops-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsgate-settings-form-grid,
    .opsgate-settings-support-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsgate-settings-schedule-hero,
    .opsgate-settings-site-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-settings-mode-grid,
    .opsgate-settings-compact-strip,
    .opsgate-settings-context-grid,
    .opsgate-settings-connection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsgate-settings-context-card-webhook {
        grid-column: span 2;
    }

    .opsgate-alerts-summary-grid-hero .opsgate-alerts-summary-card-primary {
        flex-basis: 100%;
    }

    .opsgate-alerts-form-grid,
    .opsgate-alerts-destination-grid,
    .opsgate-alerts-history-detail-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-alerts-destination-top,
    .opsgate-alerts-destination-actions,
    .opsgate-alerts-create-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .opsgate-alerts-destination-statuses,
    .opsgate-alerts-destination-action-buttons,
    .opsgate-alerts-destination-secondary-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 782px) {
    .opsgate-pricing-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-billing-tier-head,
    .opsgate-billing-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .opsgate-billing-hero .opsgate-pricing-hero-main,
    .opsgate-billing-hero .opsgate-pricing-hero-side-card,
    .opsgate-billing-support-card,
    .opsgate-billing-tier-card {
        padding: 16px;
    }

    .opsgate-alerts-dashboard {
        padding: 16px;
    }

    .opsgate-alerts-header,
    .opsgate-alerts-surface-header,
    .opsgate-alerts-rule-top,
    .opsgate-alerts-history-top {
        flex-direction: column;
    }

    .opsgate-alerts-status-item {
        border-right: 0;
        border-bottom: 1px solid #e1e8f0;
    }

    .opsgate-alerts-status-item:last-child {
        border-bottom: 0;
    }

    .opsgate-alerts-support-details > summary {
        align-items: flex-start;
    }

    .opsgate-alerts-history-reference-row {
        flex-direction: column;
        align-items: stretch;
    }

    .opsgate-activity-dashboard {
        padding: 16px;
    }

    .opsgate-activity-header,
    .opsgate-activity-item-head,
    .opsgate-activity-featured-top,
    .opsgate-activity-featured-bottom,
    .opsgate-activity-surface-head {
        flex-direction: column;
    }

    .opsgate-settings-module-head,
    .opsgate-settings-inline-form {
        flex-direction: column;
        align-items: flex-start;
    }

    .opsgate-settings-form-grid,
    .opsgate-settings-support-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-settings-mode-grid,
    .opsgate-settings-compact-strip,
    .opsgate-settings-context-grid,
    .opsgate-settings-connection-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-settings-context-card-webhook {
        grid-column: span 1;
    }

    .opsgate-settings-inline-form-schedule {
        align-items: stretch;
    }

    .opsgate-activity-status-item {
        border-right: 0;
        border-bottom: 1px solid #e1e8f0;
    }

    .opsgate-activity-status-item:last-child {
        border-bottom: 0;
    }

    .opsgate-clients-dashboard {
        padding: 16px;
    }

    .opsgate-clients-header,
    .opsgate-clients-surface-header {
        flex-direction: column;
    }

    .opsgate-clients-hero-posture {
        flex-direction: column;
        gap: 12px;
    }

    .opsgate-clients-status-item {
        border-right: 0;
        border-bottom: 1px solid #e1e8f0;
    }

    .opsgate-clients-status-item:last-child {
        border-bottom: 0;
    }

    .opsgate-clients-confidence-strip,
    .opsgate-clients-reference-grid,
    .opsgate-clients-identity-grid,
    .opsgate-clients-ops-grid {
        grid-template-columns: 1fr;
    }
}

.opsgate-reports-output-card:hover,
.opsgate-reports-technical-card:hover,
.opsgate-reports-rail-card:hover,
.opsgate-reports-history-card:hover,
.opsgate-reports-technical-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(16, 39, 67, 0.08);
}

@media screen and (max-width: 1280px) {
    .opsgate-overview-dashboard {
        width: auto;
        margin-right: 0;
    }

    .opsgate-triage-dashboard {
        width: auto;
        margin-right: 0;
    }

    .opsgate-reports-dashboard {
        width: auto;
        margin-right: 0;
    }

    .opsgate-reports-current-band,
    .opsgate-reports-trust-band,
    .opsgate-reports-technical-strip-layout,
    .opsgate-triage-live-state,
    .opsgate-triage-command-deck,
    .opsgate-triage-progress-shell,
    .opsgate-triage-workspace,
    .opsgate-triage-dimension-row {
        grid-template-columns: 1fr;
    }

    .opsgate-overview-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsgate-overview-top-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsgate-overview-columns {
        grid-template-columns: 1fr;
    }

    .opsgate-reports-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsgate-reports-columns,
    .opsgate-reports-output-grid,
    .opsgate-reports-technical-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-reports-modal-dialog {
        width: calc(100vw - 40px);
        height: calc(100vh - 80px);
        margin-top: 20px;
    }

    .opsgate-triage-current-band,
    .opsgate-triage-columns,
    .opsgate-triage-evidence-grid,
    .opsgate-triage-hero,
    .opsgate-triage-primary-layout,
    .opsgate-triage-support-strip-grid,
    .opsgate-triage-command-context-row,
    .opsgate-triage-reference-stack {
        grid-template-columns: 1fr;
    }

    .opsgate-triage-driver-grid,
    .opsgate-triage-secondary-grid,
    .opsgate-triage-assessment-grid,
    .opsgate-triage-driver-grid-priority,
    .opsgate-triage-phase-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsgate-triage-assessment-support-grid,
    .opsgate-triage-evidence-grid-clean {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsgate-triage-status-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .opsgate-triage-explanation-card,
    .opsgate-triage-inline-detail-stack,
    .opsgate-operator-validation-actions {
        grid-template-columns: 1fr;
    }

    .opsgate-triage-assessment-tags {
        justify-content: flex-start;
    }

    .opsgate-triage-evidence-card-wide {
        grid-column: auto;
    }

    .opsgate-triage-evidence-product-card.is-foundation {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 860px) {
    .opsgate-admin-overview {
        margin-right: 0;
    }

    .opsgate-admin-tab-triage {
        margin-right: 0;
    }

    .opsgate-admin-tab-reports {
        margin-right: 0;
    }

    .opsgate-overview-header {
        flex-direction: column;
    }

    .opsgate-overview-status-strip,
    .opsgate-overview-actions {
        justify-content: flex-start;
    }

    .opsgate-overview-summary-grid,
    .opsgate-overview-mini-grid,
    .opsgate-overview-rail-stats {
        grid-template-columns: 1fr;
    }

    .opsgate-reports-header,
    .opsgate-reports-history-card {
        flex-direction: column;
    }

    .opsgate-reports-current-top,
    .opsgate-reports-history-action-group,
    .opsgate-reports-artifact-row,
    .opsgate-reports-technical-details > summary,
    .opsgate-triage-command-head,
    .opsgate-triage-dimension-title-row,
    .opsgate-triage-action-spotlight-actions,
    .opsgate-triage-progress-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .opsgate-reports-current-side {
        padding-left: 0;
        border-left: 0;
        padding-top: 12px;
        border-top: 1px solid #dbe6f1;
    }

    .opsgate-triage-actions,
    .opsgate-triage-status-strip {
        justify-content: flex-start;
    }

    .opsgate-reports-actions,
    .opsgate-reports-status-strip {
        justify-content: flex-start;
    }

    .opsgate-reports-history-actions,
    .opsgate-reports-history-action-links,
    .opsgate-reports-artifact-actions {
        width: 100%;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .opsgate-triage-download-grid,
    .opsgate-triage-rail-stats,
    .opsgate-triage-rail-context-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-triage-driver-grid,
    .opsgate-triage-secondary-grid,
    .opsgate-triage-assessment-grid,
    .opsgate-triage-assessment-support-grid,
    .opsgate-triage-evidence-grid-clean,
    .opsgate-triage-driver-grid-priority,
    .opsgate-triage-command-context-row,
    .opsgate-triage-phase-track,
    .opsgate-triage-reference-stack {
        grid-template-columns: 1fr;
    }

    .opsgate-triage-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsgate-triage-rail-actions {
        grid-template-columns: 1fr;
    }

    .opsgate-triage-current-topline {
        grid-template-columns: 1fr;
    }

    .opsgate-triage-command-title {
        font-size: 34px;
    }

    .opsgate-triage-posture-top {
        grid-template-columns: 1fr;
    }

    .opsgate-triage-hero-main,
    .opsgate-triage-hero-title-row,
    .opsgate-triage-detail-panel-head {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .opsgate-triage-inline-detail summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .opsgate-operator-validation-status-row {
        flex-direction: column;
    }
}

@media screen and (max-width: 640px) {
    .opsgate-overview-dashboard {
        width: auto;
        margin-right: 0;
        padding: 16px;
    }

    .opsgate-overview-header-copy {
        gap: 8px;
    }

    .opsgate-overview-title {
        font-size: 24px;
    }

    .opsgate-overview-top-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-overview-status-strip {
        grid-template-columns: 1fr;
    }

    .opsgate-admin-overview .opsgate-nav-tabs .nav-tab {
        width: auto;
        justify-content: flex-start;
    }

    .opsgate-triage-dashboard {
        width: auto;
        margin-right: 0;
        padding: 16px;
    }

    .opsgate-reports-dashboard {
        width: auto;
        margin-right: 0;
        padding: 16px;
    }

    .opsgate-reports-header-copy {
        gap: 8px;
    }

    .opsgate-reports-title {
        font-size: 24px;
    }

    .opsgate-triage-status-strip {
        grid-template-columns: 1fr;
    }

    .opsgate-triage-hero-title {
        font-size: 30px;
    }

    .opsgate-triage-hero-score {
        min-width: 0;
        font-size: 60px;
    }

    .opsgate-triage-current-title {
        font-size: 24px;
    }

    .opsgate-triage-current-score {
        min-width: 0;
        font-size: 56px;
    }

    .opsgate-triage-current-header {
        align-items: flex-start;
    }

    .opsgate-reports-status-strip,
    .opsgate-reports-output-grid,
    .opsgate-reports-technical-grid {
        grid-template-columns: 1fr;
    }

    .opsgate-admin-tab-triage .opsgate-nav-tabs .nav-tab {
        width: auto;
        justify-content: flex-start;
    }

.opsgate-admin-tab-reports .opsgate-nav-tabs .nav-tab {
        width: auto;
        justify-content: flex-start;
    }
}

.opsgate-validation-remediation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.opsgate-validation-remediation-form {
    margin: 0;
}

.opsgate-validation-remediation-form .button {
    min-width: 180px;
}

/* Remote companion normalization */
.opsgate-admin-remote-companion {
    width: 100%;
    max-width: none;
    margin-right: 20px;
    padding-right: 0;
}

.opsgate-admin-remote-companion .opsgate-remote-companion-shell {
    width: 100%;
    max-width: none;
    gap: 24px;
}

.opsgate-admin-remote-companion .opsgate-remote-hero-band {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(280px, 0.95fr);
    gap: 24px;
    padding: 28px;
    border: 1px solid #d7e1ec;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(19, 120, 194, 0.14), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
    box-shadow: 0 18px 42px rgba(18, 42, 66, 0.08);
}

.opsgate-admin-remote-companion .opsgate-remote-hero-band-head,
.opsgate-admin-remote-companion .opsgate-remote-card-actions,
.opsgate-admin-remote-companion .opsgate-remote-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.opsgate-admin-remote-companion .opsgate-remote-hero-band-head {
    justify-content: space-between;
    align-items: flex-start;
}

.opsgate-admin-remote-companion .opsgate-remote-hero-band h2 {
    margin: 0 0 6px;
    font-size: 34px;
    line-height: 1.05;
    color: var(--og-text-1);
}

.opsgate-admin-remote-companion .opsgate-remote-hero-band p,
.opsgate-admin-remote-companion .opsgate-remote-breakdown-card p,
.opsgate-admin-remote-companion .opsgate-remote-action-card p,
.opsgate-admin-remote-companion .opsgate-remote-plan-summary p,
.opsgate-admin-remote-companion .opsgate-remote-hero-support-copy {
    margin: 0;
    color: var(--og-text-2);
    line-height: 1.55;
}

.opsgate-admin-remote-companion .opsgate-remote-hero-band-actions {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 20px;
    background: rgba(255,255,255,0.7);
    border-radius: 16px;
    border: 1px solid rgba(220,232,240,0.8);
    backdrop-filter: blur(4px);
}

.opsgate-admin-remote-companion .button-hero-primary {
    min-height: 44px;
    font-weight: 600;
}

.opsgate-admin-remote-companion .opsgate-remote-hero-band-actions .button:not(.button-hero-primary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 8px 16px;
    box-sizing: border-box;
}

.opsgate-admin-remote-companion .opsgate-remote-topline-grid,
.opsgate-admin-remote-companion .opsgate-remote-breakdown-grid,
.opsgate-admin-remote-companion .opsgate-remote-action-card-grid {
    display: grid;
    gap: 16px;
}

.opsgate-admin-remote-companion .opsgate-remote-topline-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.opsgate-admin-remote-companion .opsgate-remote-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(320px, 0.95fr);
    gap: 24px;
    align-items: start;
}

.opsgate-admin-remote-companion .opsgate-remote-primary-column,
.opsgate-admin-remote-companion .opsgate-remote-secondary-column {
    display: grid;
    gap: 20px;
}

.opsgate-admin-remote-companion .opsgate-remote-section,
.opsgate-admin-remote-companion .opsgate-remote-topline-card,
.opsgate-admin-remote-companion .opsgate-remote-breakdown-card,
.opsgate-admin-remote-companion .opsgate-remote-action-card,
.opsgate-admin-remote-companion .opsgate-remote-activity-card,
.opsgate-admin-remote-companion .opsgate-remote-phase-card {
    background: var(--og-card);
    border: 1px solid var(--og-border);
    border-radius: 18px;
    box-shadow: var(--og-shadow-md);
}

.opsgate-admin-remote-companion .opsgate-remote-section {
    padding: 20px;
}

.opsgate-admin-remote-companion .opsgate-remote-section-head {
    margin-bottom: 14px;
}

.opsgate-admin-remote-companion .opsgate-remote-section h3 {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.15;
    color: var(--og-text-1);
}

.opsgate-admin-remote-companion .opsgate-remote-topline-card,
.opsgate-admin-remote-companion .opsgate-remote-breakdown-card,
.opsgate-admin-remote-companion .opsgate-remote-action-card {
    padding: 18px;
}

.opsgate-admin-remote-companion .opsgate-remote-topline-card strong {
    display: block;
    font-size: 48px;
    line-height: 1;
    color: var(--og-text-1);
}

.opsgate-admin-remote-companion .opsgate-remote-topline-card.is-good strong,
.opsgate-admin-remote-companion .opsgate-remote-breakdown-card.is-good strong {
    color: var(--og-green);
}

.opsgate-admin-remote-companion .opsgate-remote-topline-card.is-warn strong,
.opsgate-admin-remote-companion .opsgate-remote-breakdown-card.is-warn strong {
    color: var(--og-amber);
}

.opsgate-admin-remote-companion .opsgate-remote-topline-card.is-bad strong,
.opsgate-admin-remote-companion .opsgate-remote-breakdown-card.is-bad strong {
    color: var(--og-red);
}

.opsgate-admin-remote-companion .opsgate-remote-breakdown-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.opsgate-admin-remote-companion .opsgate-remote-breakdown-card strong,
.opsgate-admin-remote-companion .opsgate-remote-action-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 1.15;
    color: var(--og-text-1);
}

.opsgate-admin-remote-companion .opsgate-remote-breakdown-meta {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--og-text-2);
}

.opsgate-admin-remote-companion .opsgate-remote-activity-list.compact {
    display: grid;
    gap: 12px;
}

.opsgate-admin-remote-companion .opsgate-remote-live-panel {
    margin-top: 0;
}

@media (max-width: 1100px) {
    .opsgate-admin-remote-companion .opsgate-remote-hero-band,
    .opsgate-admin-remote-companion .opsgate-remote-main-layout,
    .opsgate-admin-remote-companion .opsgate-remote-progress-grid,
    .opsgate-admin-remote-companion .opsgate-remote-topline-grid,
    .opsgate-admin-remote-companion .opsgate-remote-breakdown-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PHASE 5 ROUND 3 — Reports filter bar + support demotion
   ========================================================= */

.opsgate-reports-generate-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border: 1px solid #b8d8f5;
    border-radius: 8px;
    margin-bottom: 16px;
}
.opsgate-reports-generate-cta-copy strong {
    display: block;
    font-size: 15px;
    color: #163247;
    margin-bottom: 4px;
}
.opsgate-reports-generate-cta-copy p {
    font-size: 13px;
    color: #4a6274;
    margin: 0;
}

.opsgate-reports-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 0 14px;
}

.opsgate-reports-filter-btn {
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid var(--og-border, #dde3ec);
    border-radius: 20px;
    background: var(--og-bg, #f4f6f9);
    color: var(--og-text-2, #5a6478);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.4;
}

.opsgate-reports-filter-btn:hover {
    background: var(--og-card, #fff);
    color: var(--og-text-1, #1a2236);
    border-color: var(--og-blue, #2563eb);
}

.opsgate-reports-filter-btn.is-active {
    background: var(--og-blue, #2563eb);
    color: #fff;
    border-color: var(--og-blue, #2563eb);
}

.opsgate-reports-filter-divider {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--og-border, #dde3ec);
    margin: 0 4px;
}

/* Support demotion collapse element */
.opsgate-r1-support-demotion {
    border: 1px solid var(--og-border, #dde3ec);
    border-radius: var(--og-radius, 8px);
    background: var(--og-bg, #f4f6f9);
    padding: 2px 0;
}

.opsgate-r1-support-demotion-summary {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--og-text-2, #5a6478);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.opsgate-r1-support-demotion-summary::-webkit-details-marker {
    display: none;
}

.opsgate-r1-support-demotion-summary::before {
    content: '\25B8\00A0';
    font-size: 10px;
    color: var(--og-text-3, #9aa3b5);
}

.opsgate-r1-support-demotion[open] > .opsgate-r1-support-demotion-summary::before {
    content: '\25BE\00A0';
}

/* Round 4 — Activity filter empty state */
.opsgate-activity-filter-empty {
    padding: 24px 20px;
    text-align: center;
    color: var(--og-text-2, #5a6478);
    background: var(--og-bg, #f4f6f9);
    border: 1px solid var(--og-border, #dde3ec);
    border-radius: var(--og-radius, 8px);
    margin-top: 12px;
}

.opsgate-activity-filter-empty p {
    margin: 0;
    font-size: 14px;
}

.opsgate-filter-btn-inline {
    background: none;
    border: none;
    color: var(--og-blue, #2563eb);
    cursor: pointer;
    font-size: inherit;
    padding: 0;
    text-decoration: underline;
}

.opsgate-filter-btn-inline:hover {
    color: var(--og-navy, #1e3a5f);
}

/* Round 4 — Billing upgrade contact note */
.opsgate-billing-tier-contact-note {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--og-text-2, #5a6478);
}

/* Contact-mailto variant: always active/clickable, not greyed out */
.opsgate-p5-upgrade-contact {
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.opsgate-p5-upgrade-btn[disabled],
.opsgate-p5-upgrade-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================
   5.QA.3 — Persistent context strip above tab bar
   ========================================================= */
.opsgate-ctx-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 7px 12px;
    background: var(--og-card, #fff);
    border: 1px solid var(--og-border, #dce3ed);
    border-radius: 6px;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--og-text-2, #5a6478);
}

.opsgate-ctx-strip-product {
    font-weight: 700;
    color: var(--og-blue, #2563EB);
    font-size: 13px;
    letter-spacing: .02em;
}

.opsgate-ctx-strip-sep {
    color: var(--og-border, #dce3ed);
    font-size: 14px;
}

.opsgate-ctx-strip-site {
    font-weight: 500;
    color: var(--og-text-1, #17324a);
}

.opsgate-ctx-strip-domain {
    font-weight: 400;
    color: var(--og-text-2, #5a6478);
}

.opsgate-ctx-strip-plan {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--og-blue-light, #EFF6FF);
    color: var(--og-blue, #2563EB);
}

.opsgate-ctx-strip-plan-agency {
    background: #f0fdf4;
    color: var(--og-green, #16a34a);
}

.opsgate-ctx-strip-plan-free {
    background: #f1f5f9;
    color: var(--og-text-2, #5a6478);
}

.opsgate-ctx-strip-mode {
    font-size: 12px;
    color: var(--og-text-2, #5a6478);
}

/* =========================================================
   5.QA.1 — Report delivery modal
   ========================================================= */
.opsgate-deliver-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 40, 0.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.opsgate-deliver-modal[hidden] {
    display: none;
}

.opsgate-deliver-modal-inner {
    background: var(--og-card, #fff);
    border: 1px solid var(--og-border, #dce3ed);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    padding: 28px 32px 24px;
    width: 100%;
    max-width: 460px;
    font-family: 'Inter', sans-serif;
}

.opsgate-deliver-modal-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: var(--og-text-1, #17324a);
}

.opsgate-deliver-modal-copy {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--og-text-2, #5a6478);
    line-height: 1.5;
}

.opsgate-deliver-modal-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--og-text-1, #17324a);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.opsgate-deliver-modal-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--og-border, #dce3ed);
    border-radius: 5px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: var(--og-text-1, #17324a);
    background: var(--og-bg, #f7fafc);
    margin-bottom: 10px;
}

.opsgate-deliver-modal-input:focus {
    outline: 2px solid var(--og-blue, #2563EB);
    border-color: var(--og-blue, #2563EB);
}

.opsgate-deliver-modal-status {
    min-height: 20px;
    font-size: 13px;
    margin-bottom: 14px;
    border-radius: 4px;
    padding: 0 4px;
}

.opsgate-deliver-modal-status-ok {
    color: var(--og-green, #16a34a);
}

.opsgate-deliver-modal-status-error {
    color: var(--og-red, #dc2626);
}

.opsgate-deliver-modal-status-info {
    color: var(--og-text-2, #5a6478);
}

.opsgate-deliver-modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* =========================================================
   5.QA.2 — Blocked-tab OpsGate-styled notice
   ========================================================= */
.opsgate-blocked-tab-notice {
    border-left: 4px solid var(--og-blue, #2563EB);
    background: var(--og-blue-light, #EFF6FF);
    color: var(--og-text-1, #17324a);
    padding: 10px 14px;
    border-radius: 0 5px 5px 0;
    font-size: 13px;
}

/* =========================================================
   P3 — Reports tab premium visual enhancement
   ========================================================= */

/* Reports dashboard: stronger header panel */
.opsgate-reports-dashboard {
    box-shadow: 0 32px 60px rgba(15, 42, 71, 0.12);
}

/* Current band: stronger visual */
.opsgate-reports-current-band {
    padding: 22px 24px;
    border-radius: 24px;
    box-shadow: 0 18px 38px rgba(15, 42, 71, 0.07);
}

/* Current title: more dominant */
.opsgate-reports-current-title {
    font-size: 34px;
    font-weight: 820;
    letter-spacing: -0.01em;
}

/* Ready band: make prominent */
.opsgate-reports-ready-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    margin-bottom: 14px;
    border: 1px solid #bfe1cb;
    border-radius: 20px;
    background: linear-gradient(135deg, #f2fcf5 0%, #e7f8ee 100%);
    box-shadow: 0 12px 24px rgba(15, 149, 88, 0.08);
}

.opsgate-reports-ready-title {
    margin: 0;
    color: #0e6640;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.opsgate-reports-ready-meta {
    margin: 4px 0 0;
    color: #1f7c4e;
    font-size: 12.5px;
}

/* Output grid: 2-column premium format cards */
.opsgate-reports-output-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Output cards: larger, more distinct by state */
.opsgate-reports-output-card {
    padding: 18px;
    border-radius: 20px;
    transition: transform 120ms ease, box-shadow 140ms ease;
}

.opsgate-reports-output-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px rgba(16, 39, 67, 0.09);
}

/* PDF card — deep navy accent */
.opsgate-reports-output-card[data-og-report-format="pdf"] {
    background: linear-gradient(135deg, #fafbff 0%, #f0f4ff 100%);
    border-color: #c8d4f0;
}

/* HTML card — teal accent */
.opsgate-reports-output-card[data-og-report-format="html"] {
    background: linear-gradient(135deg, #f8fffb 0%, #edfaf3 100%);
    border-color: #c2dece;
}

/* CSV card — amber accent */
.opsgate-reports-output-card[data-og-report-format="csv"] {
    background: linear-gradient(135deg, #fffef8 0%, #fff8e6 100%);
    border-color: #e8d599;
}

/* XLSX card — green accent */
.opsgate-reports-output-card[data-og-report-format="xlsx"] {
    background: linear-gradient(135deg, #f5fff8 0%, #e8f8ef 100%);
    border-color: #b8dfc6;
}

/* Ready state output card: stronger visual signal */
.opsgate-reports-output-card[data-og-report-state="ready"] {
    border-color: #b8dfc6;
    box-shadow: 0 14px 28px rgba(18, 150, 93, 0.1);
}

/* Output label: stronger */
.opsgate-reports-output-label {
    font-size: 17px;
    font-weight: 760;
}

/* Output actions: separate from content */
.opsgate-reports-output-actions {
    padding-top: 16px;
    border-top: 1px solid rgba(215, 226, 240, 0.7);
}

/* Story grid cards: stronger */
.opsgate-reports-story-card,
.opsgate-reports-story-note {
    padding: 16px 18px;
    border-radius: 20px;
    box-shadow: 0 10px 22px rgba(16, 39, 67, 0.05);
}

.opsgate-reports-story-value,
.opsgate-reports-story-note-title {
    font-size: 20px;
    font-weight: 760;
}

/* Trust panel: slightly stronger */
.opsgate-reports-trust-panel {
    padding: 16px 18px;
    border-radius: 20px;
    box-shadow: 0 10px 22px rgba(16, 39, 67, 0.05);
}

.opsgate-reports-trust-panel-value {
    font-size: 24px;
    font-weight: 820;
}

/* Rail card: stronger score display */
.opsgate-reports-rail-value {
    font-size: 28px;
    font-weight: 820;
    letter-spacing: -0.02em;
}

/* =========================================================
   P3 — Triage tab premium visual enhancement
   ========================================================= */

/* Command deck: swap column order so posture is on the LEFT (dominant position) */
.opsgate-triage-command-deck {
    grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.6fr);
    grid-template-areas: "side main";
    box-shadow: 0 40px 70px rgba(16, 39, 67, 0.12);
    align-items: start;
}

.opsgate-triage-command-main {
    grid-area: main;
}

.opsgate-triage-command-side {
    grid-area: side;
    align-content: start;
    gap: 16px;
}

/* Posture panel: full-bleed colour block — the dominant visual anchor */
.opsgate-triage-posture-panel {
    padding: 32px 28px;
    border-radius: 22px;
    background: linear-gradient(160deg, #f0f7ff 0%, #e8f1fb 60%, #deeaf8 100%);
    border: 1.5px solid #c4d9f0;
    box-shadow:
        0 28px 52px rgba(16, 39, 67, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    position: relative;
    overflow: hidden;
}

.opsgate-triage-posture-panel-good {
    background: linear-gradient(160deg, #f0fbf4 0%, #e2f5eb 60%, #d4eddf 100%);
    border-color: #b2dfc5;
}

.opsgate-triage-posture-panel-warn {
    background: linear-gradient(160deg, #fdf7ed 0%, #f9edd4 60%, #f5e4bc 100%);
    border-color: #e8cfa0;
}

.opsgate-triage-posture-panel-bad {
    background: linear-gradient(160deg, #fdf2f2 0%, #f8e4e4 60%, #f3d6d6 100%);
    border-color: #e0b8b8;
}

/* Dominant score number — large, centred, bold */
.opsgate-triage-posture-score {
    font-size: 96px !important;
    line-height: 0.9 !important;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
    display: block;
    text-align: center;
    margin-bottom: 4px;
}

/* Score color by posture tone */
.opsgate-triage-posture-panel-good .opsgate-triage-posture-score {
    color: #0a7a48 !important;
    text-shadow: 0 3px 16px rgba(10, 122, 72, 0.22) !important;
}

.opsgate-triage-posture-panel-warn .opsgate-triage-posture-score {
    color: #7a4e00 !important;
    text-shadow: 0 3px 16px rgba(122, 78, 0, 0.18) !important;
}

.opsgate-triage-posture-panel-bad .opsgate-triage-posture-score {
    color: #8a2422 !important;
    text-shadow: 0 3px 16px rgba(138, 36, 34, 0.18) !important;
}

/* Stronger posture title */
.opsgate-triage-posture-title {
    font-size: 16px;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
}

/* Action spotlight — softer, secondary treatment */
.opsgate-triage-action-spotlight {
    padding: 18px;
    border: 1px solid rgba(206, 218, 232, 0.9);
    border-radius: 22px;
    background: rgba(251, 253, 255, 0.96);
    box-shadow: 0 8px 18px rgba(16, 39, 67, 0.04);
}

/* Driver cards in priority grid: stronger visual weight */
.opsgate-triage-driver-grid-priority .opsgate-triage-driver-card.is-priority {
    padding: 16px;
    border-radius: 20px;
    box-shadow: 0 18px 36px rgba(15, 35, 52, 0.08);
}

.opsgate-triage-driver-grid-priority .opsgate-triage-driver-card.is-bad {
    box-shadow: 0 18px 36px rgba(178, 58, 54, 0.12);
}

.opsgate-triage-driver-grid-priority .opsgate-triage-driver-card.is-warn {
    box-shadow: 0 18px 36px rgba(156, 99, 0, 0.1);
}

.opsgate-triage-driver-title {
    font-size: 17px;
    font-weight: 740;
}

/* =========================================================
   P3 — Reports client-facing brief hero
   ========================================================= */

.opsgate-report-brief {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 28px;
    align-items: start;
    padding: 32px 36px;
    border-radius: 24px;
    margin-bottom: 24px;
    background: linear-gradient(140deg, #f4f9ff 0%, #eaf3fc 50%, #deeaf8 100%);
    border: 1.5px solid #c2d8ef;
    box-shadow: 0 24px 48px rgba(16, 39, 67, 0.1);
}

.opsgate-report-brief-tone-good {
    background: linear-gradient(140deg, #f0faf5 0%, #e1f4ea 50%, #d3eddf 100%);
    border-color: #aad8be;
}

.opsgate-report-brief-tone-warn {
    background: linear-gradient(140deg, #fffbf0 0%, #faf2da 50%, #f4e9c4 100%);
    border-color: #e2c88a;
}

.opsgate-report-brief-tone-bad {
    background: linear-gradient(140deg, #fff5f5 0%, #fae8e8 50%, #f5dbdb 100%);
    border-color: #deb6b6;
}

.opsgate-report-brief-score-col {
    text-align: center;
    padding: 16px 0;
}

.opsgate-report-brief-score {
    font-size: 80px;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: #1a3a5c;
}

.opsgate-report-brief-tone-good .opsgate-report-brief-score { color: #0a7040; }
.opsgate-report-brief-tone-warn .opsgate-report-brief-score { color: #7a5000; }
.opsgate-report-brief-tone-bad .opsgate-report-brief-score { color: #8a2020; }

.opsgate-report-brief-grade {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #496480;
    margin-top: 4px;
}

.opsgate-report-brief-grade-copy {
    font-size: 11px;
    color: #607a8f;
    margin: 4px 0 0;
    line-height: 1.3;
}

.opsgate-report-brief-body {
    padding: 4px 0;
}

.opsgate-report-brief-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5a7a96;
    margin-bottom: 6px;
}

.opsgate-report-brief-site {
    font-size: 28px;
    font-weight: 780;
    color: #0f2540;
    margin: 0 0 4px;
    line-height: 1.1;
}

.opsgate-report-brief-date {
    font-size: 13px;
    color: #6a8aaa;
    margin: 0 0 12px;
}

.opsgate-report-brief-summary {
    font-size: 15px;
    font-weight: 600;
    color: #1a3a5c;
    margin: 0 0 14px;
    line-height: 1.4;
}

.opsgate-report-brief-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.opsgate-report-brief-stat {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.opsgate-report-brief-stat-good {
    background: rgba(15, 149, 88, 0.1);
    color: #0a7040;
    border: 1px solid rgba(15, 149, 88, 0.25);
}

.opsgate-report-brief-stat-warn {
    background: rgba(200, 130, 0, 0.1);
    color: #7a5000;
    border: 1px solid rgba(200, 130, 0, 0.25);
}

.opsgate-report-brief-stat-bad {
    background: rgba(180, 40, 40, 0.1);
    color: #8a2020;
    border: 1px solid rgba(180, 40, 40, 0.25);
}

.opsgate-report-brief-stat-info {
    background: rgba(0, 100, 180, 0.08);
    color: #005090;
    border: 1px solid rgba(0, 100, 180, 0.2);
}

.opsgate-report-brief-meaning {
    font-size: 13px;
    color: #4a6880;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 860px) {
    .opsgate-report-brief {
        grid-template-columns: 1fr;
    }
    .opsgate-report-brief-score-col {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 0;
    }
    .opsgate-report-brief-score { font-size: 56px; }
}

/* =========================================================
   UI Adjustment — Triage full-width action grid
   ========================================================= */

/* The action grid spans both columns of the command deck */
.opsgate-triage-action-grid-fullwidth {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.opsgate-triage-action-grid-card {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 16px 18px;
    border: 1px solid #d8e4ef;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(16, 39, 67, 0.04);
}

.opsgate-triage-action-grid-card .opsgate-triage-download-button {
    margin-top: 4px;
    justify-self: start;
}

/* =========================================================
   UI Adjustment — Billing usage unavailable soft copy
   ========================================================= */

.opsgate-p5-usage-unavailable {
    color: #8a9aaa;
    font-style: italic;
    font-size: 13px;
}

/* =========================================================
   UI Adjustment — Settings Advanced diagnostics
   ========================================================= */

.opsgate-settings-advanced-diag summary::-webkit-details-marker {
    display: none;
}

.opsgate-settings-advanced-diag[open] summary .dashicons-admin-tools {
    opacity: 0.7;
}

/* =========================================================
   Billing — restructured layout (2026 pass)
   ========================================================= */

/* Plan hero: 2-column grid (plan info left, next-move right) */
.opsgate-billing-plan-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr);
    gap: 24px;
    align-items: start;
    margin-bottom: 28px;
}

@media (max-width: 860px) {
    .opsgate-billing-plan-hero {
        grid-template-columns: 1fr;
    }
}

.opsgate-billing-plan-hero-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opsgate-billing-hero-title-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.opsgate-billing-plan-name {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    color: var(--og-heading, #0f1923);
}

.opsgate-billing-hero-footprint {
    font-size: 13px;
    color: var(--og-muted, #6b7a8a);
    margin: 0;
}

.opsgate-billing-plan-copy {
    font-size: 14px;
    color: var(--og-text, #2c3e50);
    margin: 4px 0 0;
    line-height: 1.5;
}

.opsgate-billing-plan-hero-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.opsgate-billing-next-move-card {
    background: var(--og-card, #ffffff);
    border: 1px solid var(--og-border, #dde3ea);
    border-radius: var(--og-radius, 8px);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.opsgate-billing-next-move-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--og-heading, #0f1923);
    line-height: 1.2;
}

.opsgate-billing-next-move-copy {
    font-size: 13px;
    color: var(--og-muted, #6b7a8a);
    margin: 0;
    line-height: 1.5;
}

.opsgate-billing-next-move-cta {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--og-accent, #1a6bcc);
    text-decoration: none;
}
.opsgate-billing-next-move-cta:hover {
    text-decoration: underline;
    color: var(--og-accent-dark, #0f4f9e);
}

.opsgate-billing-hero-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Plan Usage section */
.opsgate-billing-usage-section {
    margin: 4px 0 24px;
}

.opsgate-billing-usage-heading {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--og-muted, #6b7a8a);
    margin: 0 0 12px;
}

.opsgate-billing-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.opsgate-billing-usage-card {
    background: var(--og-card, #ffffff);
    border: 1px solid var(--og-border, #dde3ea);
    border-radius: var(--og-radius, 8px);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.opsgate-billing-usage-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--og-muted, #6b7a8a);
}

.opsgate-billing-usage-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--og-heading, #0f1923);
    line-height: 1.1;
}

.opsgate-billing-usage-bar-track {
    height: 6px;
    background: var(--og-border, #dde3ea);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 2px;
}

.opsgate-billing-usage-bar-fill {
    height: 100%;
    background: var(--og-primary, #2563eb);
    border-radius: 3px;
    min-width: 4px;
    transition: width 0.3s ease;
}

.opsgate-billing-usage-unavailable {
    font-size: 12px;
    color: #8a9aaa;
    font-style: italic;
}

/* Slice 3 — QW4 security update badge */
.opsgate-triage-detail-card-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.opsgate-triage-security-badge {
    display: inline-block;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.opsgate-triage-detail-card-security-update {
    border-left: 3px solid #ef4444;
}

/* Slice 3 — QW5 last-seen amber indicator */
.opsgate-clients-lastseen {
    font-size: 12px;
    color: #64748b;
}

.opsgate-clients-lastseen-amber {
    color: #b45309;
    font-weight: 600;
}

/* Slice 3 — QW2 why-this-score note */
.opsgate-triage-why-note {
    font-size: 13px;
    color: #475569;
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
    padding: 8px 12px;
    margin: 0 0 12px 0;
    border-radius: 0 4px 4px 0;
    line-height: 1.5;
}

/* =========================================================
   SETUP WIZARD — Full-screen intercept onboarding flow
   ========================================================= */
.opsgate-setup-wizard-wrap {
    background: #f0f4f8;
    min-height: 100vh;
    padding: 0 !important;
}

.opsgate-setup-wizard {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 24px 60px;
}

.opsgate-setup-wizard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
}

.opsgate-setup-wizard-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.opsgate-setup-wizard-shield {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.opsgate-setup-wizard-skip {
    font-size: 13px;
    color: #64748b;
    text-decoration: none;
}
.opsgate-setup-wizard-skip:hover { color: #0073aa; text-decoration: underline; }

.opsgate-setup-wizard-hero {
    margin-bottom: 28px;
}
.opsgate-setup-wizard-hero h1 {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
    line-height: 1.2;
}
.opsgate-setup-wizard-hero p {
    font-size: 15px;
    color: #475569;
    margin: 0;
}

/* Progress step rows */
.opsgate-setup-wizard-progress {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px 0;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.opsgate-setup-step-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.opsgate-setup-step-row:last-child { border-bottom: none; }

.opsgate-setup-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    background: #e2e8f0;
    color: #94a3b8;
}
.opsgate-setup-step-row.is-done .opsgate-setup-step-num {
    background: #dcfce7;
    color: #16a34a;
}
.opsgate-setup-step-row.is-done .opsgate-setup-step-num .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}
.opsgate-setup-step-row.is-active .opsgate-setup-step-num {
    background: #0073aa;
    color: #fff;
}

.opsgate-setup-step-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}
.opsgate-setup-step-row.is-locked .opsgate-setup-step-label { color: #94a3b8; }

.opsgate-setup-step-status {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
}
.opsgate-setup-step-row.is-done .opsgate-setup-step-status { color: #16a34a; font-weight: 600; }
.opsgate-setup-step-row.is-active .opsgate-setup-step-status { color: #0073aa; font-weight: 600; }

/* Active step card */
.opsgate-setup-wizard-body { margin-bottom: 24px; }

.opsgate-setup-wizard-step-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 28px 28px 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.opsgate-setup-wizard-step-card h2 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.opsgate-setup-wizard-step-card > p {
    font-size: 14px;
    color: #475569;
    margin: 0 0 20px 0;
    line-height: 1.6;
}

.opsgate-setup-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0073aa;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Wizard form fields */
.opsgate-setup-wizard-form { margin: 0; }
.opsgate-setup-wizard-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.opsgate-setup-wizard-fields label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #374151;
}
.opsgate-setup-wizard-fields input.regular-text {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.opsgate-setup-wizard-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Connection status indicator inside wizard */
.opsgate-setup-wizard-connection-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 16px;
}
.opsgate-setup-wizard-status-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.opsgate-setup-wizard-status-chip-good  { background: #dcfce7; color: #15803d; }
.opsgate-setup-wizard-status-chip-warn  { background: #fef9c3; color: #b45309; }
.opsgate-setup-wizard-status-chip-info  { background: #dbeafe; color: #1d4ed8; }
.opsgate-setup-wizard-status-chip-error { background: #fee2e2; color: #dc2626; }
.opsgate-setup-wizard-status-copy {
    font-size: 13px;
    color: #475569;
}

/* Token copy row */
.opsgate-setup-wizard-token-row { margin-top: 16px; }
.opsgate-setup-wizard-token-row label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}
.opsgate-setup-wizard-token-copy-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.opsgate-setup-wizard-token-copy-row input.regular-text {
    flex: 1;
    font-family: monospace;
    font-size: 13px;
}

/* Footer */
.opsgate-setup-wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 0;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 10px;
}
.opsgate-setup-wizard-skip-footer {
    font-size: 13px;
    color: #64748b;
    text-decoration: none;
}
.opsgate-setup-wizard-skip-footer:hover { color: #0073aa; text-decoration: underline; }

/* Manage Connector block (Settings — connected state) */
.opsgate-manage-connector-card .opsgate-manage-connector-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}
