/* Shared styles for Section Configurations */
.section-config-container {
    min-height: 100%;
    flex: 1 0 auto;
    padding: 20px;
    background:
        linear-gradient(180deg, var(--primary-glow), var(--primary-glow) 220px),
        radial-gradient(circle at 80% 0%, rgba(6, 182, 212, 0.08), rgba(6, 182, 212, 0) 280px),
        var(--bg-void);
}

.section-modal-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.section-modal-list-item:hover {
    background: var(--bg-card-hover);
}

.section-modal-list-item:last-child {
    border-bottom: none;
}

/* Enterprise configuration console primitives */
.config-console-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.config-console-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0 12px;
    border-bottom: 1px solid var(--border);
}

.config-console-heading {
    min-width: 0;
}

.config-console-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.config-console-title {
    margin: 0;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.config-console-category {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.config-console-category::before {
    content: "·";
    margin-right: 10px;
    color: var(--text-dim);
}

.config-console-meta {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.config-console-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.config-console-status,
.config-console-actions,
.config-table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.config-section-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 38px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: thin;
}

.config-section-nav-item {
    position: relative;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.config-section-nav-item:hover {
    color: var(--text-main);
}

.config-section-nav-item.is-active {
    color: var(--text-main);
}

.config-section-nav-item.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--primary);
}

.config-console-content {
    min-width: 0;
}

.edge-config-stage {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: calc(100vh - 190px);
    padding: 22px 24px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
        var(--bg-depth);
}

.edge-config-body {
    display: grid;
    gap: 16px;
}

.edge-config-stage .config-console-header {
    padding: 0 0 16px;
    flex: 0 0 auto;
}

.config-console-toggle.section-switch.section-switch-module {
    width: 58px;
    height: 26px;
}

.config-console-toggle.section-switch.section-switch-module .section-switch-slider {
    inset: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8px 0 26px;
    border-color: color-mix(in srgb, var(--border-strong, var(--border)) 88%, transparent);
    background: var(--bg-depth);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.config-console-toggle.section-switch.section-switch-module .section-switch-slider::before {
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text-main) 86%, var(--bg-card));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.config-console-toggle-label {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.config-console-toggle.section-switch.section-switch-module input:checked + .section-switch-slider {
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
    justify-content: flex-start;
    padding: 0 26px 0 8px;
    background: color-mix(in srgb, var(--primary) 86%, black 10%);
}

.config-console-toggle.section-switch.section-switch-module input:checked + .section-switch-slider::before {
    transform: translateX(31px);
    background: #ffffff;
}

.config-console-toggle.section-switch.section-switch-module input:checked + .section-switch-slider .config-console-toggle-label {
    color: #ffffff;
}

.edge-config-stage .config-section-nav {
    flex: 0 0 auto;
    margin-top: -6px;
}

.edge-config-stage .config-console-content {
    flex: 1 1 auto;
}

.edge-overview-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.edge-summary-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.edge-summary-label,
.edge-summary-metrics span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.edge-summary-main strong {
    color: var(--text-main);
    font-size: 24px;
    font-weight: 750;
    line-height: 1.1;
}

.edge-summary-main span:last-child {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 550;
}

.edge-summary-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.edge-summary-metrics div {
    display: flex;
    min-height: 62px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-depth);
}

.edge-summary-metrics strong {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 750;
}

.edge-operations-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.edge-operations-grid .config-panel:first-child {
    grid-column: 1 / -1;
}

.edge-operations-grid .config-panel:first-child .config-panel-body {
    min-height: auto;
}

.edge-config-stage .config-panel {
    min-height: 100%;
    background: var(--bg-card);
}

.edge-config-stage .config-panel-body {
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.edge-engine-original {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
}

.edge-engine-original .bot-overview-settings-grid {
    flex: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.edge-engine-original .bot-overview-setting-card {
    min-width: 0;
}

.edge-response-check {
    margin-top: 12px;
}

.edge-attack-section {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 0;
}

.edge-quiet-empty {
    display: flex;
    flex: 1;
    min-height: 210px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.08);
    text-align: center;
}

.edge-quiet-empty strong {
    color: var(--text-main);
    font-size: 14px;
}

.edge-quiet-empty span {
    max-width: 320px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.edge-config-stage .config-form-grid {
    align-items: end;
}

.edge-config-stage .config-action-row {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.config-overview-stack,
.config-list-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.config-metric-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    overflow: hidden;
}

.config-metric-item {
    min-width: 0;
    padding: 13px 14px;
    border-right: 1px solid var(--border);
}

.config-metric-item:last-child {
    border-right: 0;
}

.config-metric-value {
    color: var(--text-main);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
}

.config-metric-label {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.config-metric-item.tone-success .config-metric-value {
    color: var(--success);
}

.config-metric-item.tone-active .config-metric-value {
    color: var(--primary);
}

.config-metric-item.tone-warning .config-metric-value {
    color: var(--warning);
}

.config-metric-item.tone-danger .config-metric-value {
    color: var(--danger);
}

.config-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.config-panel,
.config-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.config-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
}

.config-panel-title {
    margin: 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 700;
}

.config-panel-body {
    padding: 16px;
}

.config-kv-grid,
.config-compact-list {
    display: grid;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.config-kv-row,
.config-compact-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
}

.config-kv-row:last-child,
.config-compact-row:last-child {
    border-bottom: 0;
}

.config-kv-row strong,
.config-compact-row strong {
    color: var(--text-main);
    font-weight: 700;
}

.config-subsection {
    margin-top: 16px;
}

.config-subsection-title {
    margin-bottom: 8px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.config-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.config-field,
.config-check-row {
    display: grid;
    gap: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.config-check-row {
    grid-template-columns: auto 1fr;
    align-items: center;
    align-self: end;
    min-height: 38px;
}

.config-action-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.config-action-row .section-save-actions {
    margin: 0;
}

.config-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 2px);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: none;
    box-sizing: border-box;
}

.config-status-pill.tone-success,
.config-status-pill.tone-active {
    background: var(--status-success-bg, rgba(89, 171, 143, 0.12)) !important;
    border-color: var(--status-success-border, rgba(89, 171, 143, 0.28)) !important;
    color: var(--slate-green, #59ab8f) !important;
}

.config-status-pill.tone-danger,
.config-status-pill.tone-error {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
    color: #f87171 !important;
}

.config-status-pill.tone-warning {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(249, 115, 22, 0.28) !important;
    color: #fb923c !important;
}

.config-status-pill.tone-info {
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.28) !important;
    color: #38bdf8 !important;
}

.config-status-pill.tone-primary {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(249, 115, 22, 0.28) !important;
    color: #fb923c !important;
}

.config-status-pill.tone-neutral {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}

.config-console-status .config-status-pill {
    min-height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-sm, 2px);
    background: transparent;
}

.config-console-status .config-status-pill.tone-danger {
    border-color: var(--status-neutral-border);
    background: var(--status-neutral-bg);
    color: var(--text-dim);
}

.config-console-status .config-status-pill.tone-warning {
    border-color: var(--status-neutral-border);
    background: var(--status-neutral-bg);
    color: var(--text-main);
}

.config-console-status .config-status-pill.tone-active {
    border-color: var(--status-neutral-border);
    background: var(--status-neutral-bg);
    color: var(--text-main);
}

.config-console-status .config-status-pill.tone-neutral {
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
}

.config-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.config-toolbar-search {
    max-width: 320px;
}

.config-toolbar-select {
    max-width: 180px;
}

.config-toolbar-spacer {
    flex: 1 1 auto;
}

.config-toolbar-summary {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.config-toolbar-summary strong {
    color: var(--text-main);
}

.config-table-wrap {
    overflow-x: auto;
}

.config-enterprise-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.config-enterprise-table th,
.config-enterprise-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.config-enterprise-table th {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-depth);
}

.config-enterprise-table tr:last-child td {
    border-bottom: 0;
}

.security-events-routing-table-wrap {
    max-width: 100%;
}

.security-events-routing-table {
    min-width: 1120px;
    table-layout: fixed;
}

.security-events-routing-table th:nth-child(1) { width: 142px; }
.security-events-routing-table th:nth-child(2) { width: 76px; }
.security-events-routing-table th:nth-child(3) { width: 24%; }
.security-events-routing-table th:nth-child(4) { width: 24%; }
.security-events-routing-table th:nth-child(5) { width: 148px; }
.security-events-routing-table th:nth-child(6) { width: 170px; }
.security-events-routing-table th:nth-child(7) { width: 96px; }
.security-events-routing-table th:nth-child(8) { width: 64px; }

.security-events-routing-table td {
    white-space: nowrap;
}

.security-events-routing-table .security-events-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
}

.security-events-routing-table .security-events-status strong {
    color: var(--text-main);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.security-events-routing-table .security-events-status.is-error,
.security-events-routing-table .security-events-status.is-error strong {
    color: var(--brand-orange);
}

[data-theme="dark"] .security-events-routing-table .security-events-status.is-error,
[data-theme="dark"] .security-events-routing-table .security-events-status.is-error strong {
    color: #edaa7b;
}

.security-events-routing-table .waf-dashboard-request > span,
.security-events-routing-table .waf-dashboard-rule > span,
.security-events-routing-source > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.security-events-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
}

.security-events-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.security-events-pagination-page {
    min-width: 46px;
    color: var(--text-secondary);
    text-align: center;
}

.security-events-page-size-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 6px;
    white-space: nowrap;
}

.security-events-page-size {
    min-width: 64px;
    height: 30px;
    padding: 0 26px 0 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-main);
    font: inherit;
}

@media (max-width: 720px) {
    .security-events-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .security-events-pagination-controls {
        flex-wrap: wrap;
    }
}

.config-table-primary {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
}

.config-table-sub {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.config-table-code {
    display: block;
    max-width: 440px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-main);
}

.config-table-empty-cell {
    padding: 24px !important;
}

.config-table-empty-cell .empty-state {
    padding: 12px;
}

.config-table-empty-cell .empty-state-icon {
    display: none;
}

.config-table-empty-cell .empty-state h3 {
    margin: 0 0 6px;
    font-size: 14px;
}

.config-table-empty-cell .empty-state p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 960px) {
    .config-console-header,
    .config-console-right {
        align-items: flex-start;
        flex-direction: column;
    }

    .config-metric-strip,
    .config-panel-grid,
    .config-form-grid,
    .edge-overview-summary,
    .edge-operations-grid {
        grid-template-columns: 1fr;
    }

    .firewall-overview-shell .edge-firewall-controls .bot-overview-settings-grid,
    .firewall-overview-shell .firewall-threat-snapshot .bot-overview-settings-grid {
        grid-template-columns: 1fr;
    }

    .edge-choice-row,
    .edge-level-grid,
    .edge-rules-grid {
        grid-template-columns: 1fr;
    }

    .config-metric-item {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .config-metric-item:last-child {
        border-bottom: 0;
    }
}

/* Enterprise configuration page header */
.config-page-hero {
    margin-bottom: 20px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, var(--glass-highlight), var(--glass-highlight)),
        linear-gradient(90deg, var(--primary-glow), rgba(6, 182, 212, 0.035) 46%, var(--glass-highlight) 100%),
        var(--bg-card);
    box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
}

.config-page-hero-main {
    min-width: 0;
    max-width: 760px;
}

.config-page-hero-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.config-page-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.config-page-hero-kicker {
    margin-bottom: 7px;
    color: var(--secondary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.config-page-hero-title {
    margin: 0;
    color: var(--text-main);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.config-page-hero-subtitle {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* Shared section navigation primitives */
.section-tab-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 18px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--glass-highlight), var(--glass-highlight)), var(--bg-depth);
    box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-xs);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.section-tab-btn::before,
.section-tab-btn::after {
    display: none !important;
}

.section-tab-btn.btn-primary,
.section-tab-btn.active,
.section-tab-btn.is-active {
    background: linear-gradient(180deg, var(--primary-dim), var(--primary-dim)) !important;
    border-color: var(--primary-dim) !important;
    color: var(--bg-card) !important;
}

.section-tab-btn.btn-primary svg,
.section-tab-btn.active svg,
.section-tab-btn.is-active svg {
    color: var(--secondary);
    opacity: 1;
}

/* Shared section hero/header primitives */
.section-hero-shell {
    margin-bottom: 24px;
}

.section-hero-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.section-hero-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.section-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
}

.section-hero-body {
    flex: 1;
    min-width: 0;
}

.section-hero-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.section-hero-sub {
    font-size: 13px;
    color: var(--text-muted);
}

/* Shared section status bar primitives */
.section-status-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.section-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
}

.section-status-dot.is-success {
    background: var(--success);
}

.section-status-dot.is-danger {
    background: var(--danger);
}

.section-status-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.section-status-divider {
    color: var(--text-dim);
}

.section-status-meta {
    color: var(--text-muted);
    font-size: 13px;
}

.section-status-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-status-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    font-weight: 600;
}

/* Shared overview metric primitives */
.section-metric-card {
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.section-metric-card-wide {
    padding: 16px 20px;
}

.section-metric-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.section-metric-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    font-family: var(--font-main);
}

.section-metric-unit {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 2px;
    font-family: inherit;
    font-weight: 500;
}

.section-metric-icon {
    opacity: 0.8;
    display: inline-flex;
}

.section-metric-icon.tone-primary {
    color: var(--primary);
}

.section-metric-icon.tone-info {
    color: var(--info);
}

.section-metric-icon.tone-success {
    color: var(--success);
}

.section-metric-icon.tone-warning {
    color: var(--warning);
}

.section-metric-icon.tone-danger {
    color: var(--danger);
}

/* Shared feature/module card primitives */
.section-feature-card {
    display: block;
    padding: 12px 16px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.section-feature-card.is-readonly {
    cursor: default;
}

.section-feature-card.tone-primary {
    --section-feature-accent: var(--primary);
}

.section-feature-card.tone-info {
    --section-feature-accent: var(--info);
}

.section-feature-card.tone-success {
    --section-feature-accent: var(--success);
}

.section-feature-card.tone-warning {
    --section-feature-accent: var(--warning);
}

.section-feature-card.tone-danger {
    --section-feature-accent: var(--danger);
}

.section-feature-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.section-feature-row-start {
    align-items: flex-start;
}

.section-feature-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.section-feature-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-feature-title {
    font-size: 13px;
    display: block;
    color: var(--text-main);
    font-weight: 600;
}

.section-feature-desc {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    line-height: 1.4;
}

.section-feature-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-feature-card.is-active .section-feature-indicator {
    border-color: var(--section-feature-accent, var(--success));
}

.section-feature-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--section-feature-accent, var(--success));
}

.section-feature-row-start {
    align-items: flex-start;
}

.section-feature-icon-sm {
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
}

/* Shared section layout shells */
.section-panel-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-tabs-wrap {
    align-items: center;
    flex-wrap: nowrap;
}

.section-tabs-wrap .btn {
    min-height: 38px;
}

.section-page-card {
    overflow: visible;
    padding: 20px;
    background:
        linear-gradient(180deg, var(--glass-highlight), var(--glass-highlight)),
        var(--bg-card);
    border-color: var(--border);
}

.section-console-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.section-console-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 0 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}

.section-console-main,
.section-console-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.section-console-title {
    font-size: 14px;
    font-weight: 750;
    color: var(--text-main);
}

.section-console-sub {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
}

.section-console-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.section-console-rail {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.section-console-nav {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
}

.section-console-nav:hover {
    background: var(--bg-depth);
}

.section-console-nav.is-active {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border-left-color: var(--primary);
    color: var(--text-main);
}

.section-console-nav-icon {
    width: 18px;
    display: inline-flex;
    justify-content: center;
    color: var(--primary);
}

.section-console-nav-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.section-console-nav-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-main);
}

.section-console-nav-desc {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--font-main);
}

.section-console-workspace {
    min-width: 0;
    padding: 0 0 16px;
}

.section-workspace-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.section-workspace-kicker {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0;
}

.section-workspace-title {
    margin: 2px 0 0;
    color: var(--text-main);
    font-size: 20px;
    line-height: 1.2;
}

.section-workspace-sub {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.section-workspace-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.section-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
}

.section-kpi-strip .section-overview-stat {
    border: 0;
    border-radius: 0;
    border-right: 1px solid var(--border);
    background: var(--bg-card);
    text-align: left;
    padding: 12px 14px;
}

.section-kpi-strip .section-overview-stat:last-child {
    border-right: 0;
}

.section-kpi-strip .section-overview-stat-value {
    font-size: 20px;
    margin-bottom: 2px;
}

.section-flat-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    margin-bottom: 16px;
}

.section-flat-grid-4 {
    grid-template-columns: 1fr;
}

.section-flat-grid-2 {
    grid-template-columns: 1fr;
}

.section-flat-link {
    min-height: 74px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.section-flat-link:hover {
    background: var(--bg-depth);
}

.section-flat-link.is-active {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.section-flat-link:last-child {
    border-bottom: 0;
}

.section-flat-link-icon {
    color: var(--primary);
    display: inline-flex;
}

.section-flat-link-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.section-flat-link-desc {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.section-flat-link-state {
    color: var(--text-dim);
    font-size: 11px;
    font-family: var(--font-main);
    text-transform: uppercase;
}

.section-console-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
    gap: 14px;
    align-items: start;
}

.section-flat-panel {
    padding: 14px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
}

.section-table-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

@media (max-width: 1100px) {
    .section-console-layout {
        grid-template-columns: 1fr;
    }

    .section-console-rail {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .section-console-nav {
        border-left: 0;
        border-bottom: 3px solid transparent;
    }

    .section-console-nav.is-active {
        border-left-color: transparent;
        border-bottom-color: var(--primary);
    }

    .section-console-edit-grid {
        grid-template-columns: 1fr;
    }
}

.section-status-bar {
    border: 1px solid var(--border);
}

.section-overview-grid {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.section-health-card {
    min-height: 176px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.section-stats-grid .section-metric-card {
    min-height: 82px;
}

.section-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.section-feature-card {
    background: var(--bg-depth);
}

.section-feature-card:hover {
    border-color: var(--border-strong);
    background: linear-gradient(180deg, var(--glass-highlight), var(--glass-highlight)), var(--bg-card-hover);
}

.section-feature-card.is-active {
    border-color: var(--primary);
    background: linear-gradient(180deg, var(--primary-glow), var(--primary-glow)), var(--bg-depth);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.section-feature-card[data-waf-action],
.section-feature-card[data-traffic-action],
.section-feature-card[data-httpsec-action],
.section-feature-card[data-access-action],
.section-feature-card[data-api-security-action],
.section-feature-card[data-antibot-action] {
    cursor: pointer;
}

.section-config-card {
    margin-bottom: 16px;
    padding: 0;
    overflow: hidden;
    border-left: 0;
}

.section-config-card:hover {
    background: var(--bg-card);
}

.section-config-card .feature-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-depth);
}

.section-config-card.active .feature-header {
    border-bottom-color: var(--primary-dim);
}

.section-config-card>.mt-16,
.section-config-card>.mt-20,
.section-config-card>.grid-2 {
    padding: 18px;
    margin-top: 0;
}

.feature-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-status {
    min-width: 56px;
    text-align: right;
}

.gauge-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-elevated);
}

.gauge-fill {
    width: var(--pct, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--success);
}

.gauge-fill.tone-warning {
    background: var(--warning);
}

.gauge-fill.tone-danger {
    background: var(--danger);
}

.section-choice-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[data-httpsec-action].border-primary .section-choice-icon,
.tile.border-primary .section-choice-icon {
    color: var(--primary);
    background: var(--primary-glow);
}

.feature-header {
    gap: 12px;
    flex-wrap: wrap;
}

.feature-meta {
    min-width: 0;
    flex: 1;
}

.feature-meta>div:last-child {
    min-width: 0;
}

.feature-meta p {
    word-break: break-word;
}

.module-card-compact {
    min-height: 88px;
}

.module-card-body {
    align-items: flex-start;
}

.modules-dashboard-shell,
.module-config-shell {
    width: 100%;
    max-width: none;
}

.module-console-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.module-console-hero {
    margin-bottom: 0;
}

.module-console-summary {
    display: grid;
    min-width: 360px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.module-summary-pill {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
}

.module-summary-pill span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.module-summary-pill strong {
    display: block;
    color: var(--text-main);
    font-size: 20px;
    line-height: 1;
}

.module-summary-pill.success strong {
    color: var(--text-main);
}

.module-summary-pill.primary strong {
    color: var(--text-main);
}

.module-console-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.module-widgets-section {
    width: 100%;
}

.module-widgets-grid {
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: 16px;
}

.module-widget-restored {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;
    min-height: 300px;
    aspect-ratio: 1.05 / 1;
    border-radius: var(--radius-lg);
    text-align: center;
    padding: 22px;
    overflow: hidden;
}

.module-widget-restored::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--text-main) 7%, transparent), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 46%, transparent), transparent 52%);
    opacity: 0.45;
}

.module-widget-restored > div:first-child {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0 20px;
}

.module-widget-restored .module-widget-icon {
    width: 92px;
    height: 92px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-depth) 82%, black);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 12px 28px color-mix(in srgb, black 24%, transparent);
    transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.module-widget-restored .module-widget-icon svg {
    width: 40px;
    height: 40px;
}

.module-widget-restored:hover .module-widget-icon {
    transform: translateY(-2px);
    color: var(--text-main);
    border-color: var(--border-strong);
}

.module-widget-restored .module-widget-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 0;
    margin-bottom: 0;
    transform: none;
}

.module-widget-restored .module-widget-info h4 {
    font-size: 18px;
    line-height: 1.2;
}

.module-widget-restored .module-widget-desc {
    max-width: 280px;
    min-height: 0;
    margin: 14px auto 0;
    text-align: center;
}

.module-widget-restored .module-widget-footer {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    margin-top: auto;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1;
}

.module-widget-restored .module-widget-status,
.module-widget-restored .module-widget-actions {
    justify-content: center;
}

.module-widget-restored .module-widget-actions {
    flex-direction: row;
    gap: 12px;
}

.module-widget-restored.module-locked {
    pointer-events: auto;
}

.module-widget-metric {
    margin-left: 0;
}

.module-header-switch {
    flex: 0 0 auto;
}

.module-registry-panel,
.module-side-panel,
.module-config-panel {
    padding: 18px;
}

.module-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.module-panel-header h3,
.module-side-panel h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
}

.module-panel-header p,
.module-side-panel p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.module-panel-count {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.module-registry-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.module-registry-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 128px auto;
    gap: 12px;
    align-items: center;
    min-height: 76px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
}

.module-registry-row.is-active {
    border-color: var(--border-strong);
}

.module-registry-row.is-disabled {
    opacity: 0.68;
}

.module-registry-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.module-registry-main {
    min-width: 0;
}

.module-registry-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.module-registry-status {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.module-registry-status.success {
    color: var(--success);
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
}

.module-registry-status.warning {
    color: var(--warning);
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
}

.module-registry-meta {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.35;
}

.module-registry-meta span,
.module-registry-meta strong {
    display: block;
}

.module-registry-meta strong {
    margin-top: 3px;
    color: var(--text-muted);
    font-weight: 600;
}

.module-registry-actions {
    display: flex;
    justify-content: flex-end;
}

.module-map-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.module-map-item {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
}

.module-map-item span,
.module-map-item strong {
    display: block;
}

.module-map-item span {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.module-map-item strong {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.module-config-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.module-config-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 16px;
    align-items: start;
}

.challenge-preview-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.challenge-preview-layout > aside {
    display: flex;
    min-width: 0;
}

.challenge-preview-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.challenge-preview-card .preview-box {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
}

.challenge-preview-card .preview-inner {
    max-width: 430px;
    padding: 34px;
}

.challenge-preview-card .spinner-preview {
    width: 42px;
    height: 42px;
    margin-bottom: 20px;
}

.challenge-preview-card .preview-footer {
    bottom: 18px;
    font-size: 11px;
}

.challenge-preview-card .preview-empty {
    background: var(--bg-depth);
    border-style: dashed;
}

.preview-empty-state {
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.preview-empty-state strong {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 700;
}

.preview-empty-state span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.module-provider-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.module-provider-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 82px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
    cursor: pointer;
}

.module-provider-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-card-hover);
}

.module-provider-card.is-active {
    border-color: var(--primary);
    background: var(--primary-glow);
}

.module-provider-card input {
    margin-top: 2px;
}

.module-provider-card span,
.module-provider-card strong,
.module-provider-card small {
    display: block;
}

.module-provider-card strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.module-provider-card small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.provider-favicon-local {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: var(--primary-glow);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.module-old-shell {
    width: 100%;
    display: grid;
    gap: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.module-old-header,
.module-old-card {
    border-radius: var(--radius);
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: none;
}

.module-old-header {
    margin-bottom: 0;
    padding: 20px 22px;
}

.module-old-card {
    padding: 22px;
}

.module-old-card .settings-section-title {
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

.module-old-card .settings-section-title small {
    margin-left: auto;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.captcha-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.captcha-module-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

.captcha-module-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-depth));
}

.captcha-module-icon svg {
    width: 22px;
    height: 22px;
}

.captcha-module-title {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.captcha-module-kicker {
    color: var(--primary);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.1em;
}

.captcha-module-title h4 {
    margin: 0;
    color: var(--text-main);
    font-size: 18px;
}

.captcha-module-title p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.captcha-module-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 650;
}

.captcha-module-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-success, #2fbf71);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-success, #2fbf71) 15%, transparent);
}

.captcha-provider-grid {
    align-items: stretch;
}

.module-choice-tile {
    min-height: 74px;
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
}

.captcha-provider-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    min-height: 82px;
    padding: 14px 16px;
    background: var(--bg-depth);
    border-width: 2px;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.captcha-provider-card-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.captcha-provider-tile:hover {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    background: var(--bg-elevated);
}

.captcha-provider-tile:focus-within {
    outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
}

.captcha-provider-logo {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    border-radius: var(--radius);
    background: var(--bg-depth);
    border: 1px solid var(--border);
}

.captcha-provider-logo svg {
    width: 30px;
    height: 30px;
    display: block;
}

.captcha-provider-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.captcha-provider-copy strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.captcha-provider-copy small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.captcha-provider-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 13px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 650;
}

.captcha-provider-card-footer svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 140ms ease;
}

.captcha-provider-tile:hover .captcha-provider-card-footer svg {
    transform: translateX(2px);
}

.captcha-provider-tile.active .captcha-provider-card-footer {
    color: var(--primary);
}

.captcha-credentials-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.captcha-credentials-divider > div {
    display: grid;
    gap: 4px;
}

.captcha-credentials-divider strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.captcha-credentials-divider span {
    color: var(--text-muted);
    font-size: 11px;
}

.captcha-credentials-grid {
    margin-top: 16px;
}

.captcha-provider-tile.active .captcha-provider-logo {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-depth));
}

.captcha-provider-tile.active {
    border-color: var(--primary);
    background: var(--bg-elevated);
    box-shadow: inset 3px 0 0 var(--primary);
}

.challenge-old-grid {
    align-items: start;
}

.challenge-old-preview-card .preview-box {
    min-height: 300px;
}

.challenge-old-preview-card .preview-inner {
    max-width: 390px;
}

@media (max-width: 1180px) {
    .module-console-layout,
    .module-config-panel-grid,
    .challenge-preview-layout,
    .challenge-old-grid {
        grid-template-columns: 1fr;
    }

    .module-console-summary {
        min-width: 0;
        width: 100%;
    }

    .challenge-preview-card .preview-box {
        min-height: 340px;
    }

    .module-provider-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

[data-theme="light"] .config-list-stack {
    display: grid;
    gap: 14px;
}

[data-theme="light"] .config-toolbar {
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid #dedfe3;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025);
}

[data-theme="light"] .config-toolbar-summary {
    gap: 4px;
    padding-right: 14px;
    border-right: 1px solid #ededf0;
}

[data-theme="light"] .config-toolbar-summary strong {
    color: #111111;
    font-size: 13px;
    font-weight: 760;
}

[data-theme="light"] .config-toolbar-summary span {
    color: #686b72;
    font-size: 11px;
}

[data-theme="light"] .config-toolbar-spacer {
    flex: 1 1 auto;
}

[data-theme="light"] .config-enterprise-table {
    min-width: 860px;
}

[data-theme="light"] .config-enterprise-table th {
    text-transform: uppercase;
}

[data-theme="light"] .edge-custom-rules-table td:nth-child(1) {
    width: 18%;
}

[data-theme="light"] .edge-custom-rules-table td:nth-child(2) {
    width: 31%;
}

[data-theme="light"] .edge-custom-rules-table td:nth-child(3),
[data-theme="light"] .edge-custom-rules-table td:nth-child(4),
[data-theme="light"] .edge-custom-rules-table td:nth-child(5) {
    width: 11%;
}

[data-theme="light"] .edge-custom-rules-table td:nth-child(6) {
    width: 18%;
}

[data-theme="light"] .config-table-actions {
    justify-content: flex-start;
}

[data-theme="light"] .config-table-actions .section-switch {
    margin-left: 2px;
}



[data-theme="light"] .config-metric-strip {
    border: 1px solid #dedfe3;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025);
}

[data-theme="light"] .config-metric-item {
    min-height: 58px;
    border-right: 1px solid #ededf0;
}

[data-theme="light"] .config-metric-item:last-child {
    border-right: 0;
}

[data-theme="light"] .config-metric-item.tone-success,
[data-theme="light"] .config-metric-item.tone-warning,
[data-theme="light"] .config-metric-item.tone-danger,
[data-theme="light"] .config-metric-item.tone-primary {
    background: #ffffff !important;
}

[data-theme="light"] .config-metric-value {
    color: #111111 !important;
    font-size: 17px;
    font-weight: 760;
}

[data-theme="light"] .config-metric-label {
    color: #686b72 !important;
    font-size: 11px;
}

/* Final light empty-state guardrail: no dark legacy empty panels in config tables. */
[data-theme="light"] .config-table-empty-cell {
    height: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
    background: #ffffff !important;
    border-color: #ededf0 !important;
}

[data-theme="light"] .config-enterprise-table tr:has(.config-table-empty-cell):hover td,
[data-theme="light"] .config-table-empty-cell:hover {
    background: #ffffff !important;
}

[data-theme="light"] .config-enterprise-table tr:has(.config-table-empty-cell),
[data-theme="light"] .config-enterprise-table tr:has(.config-table-empty-cell) td {
    height: auto !important;
}

[data-theme="light"] .config-table-empty-cell .empty-state,
[data-theme="light"] .edge-config-stage .empty-state {
    height: auto !important;
    min-height: 112px !important;
    padding: 18px !important;
    border: 1px dashed #d6d6da !important;
    border-radius: 6px !important;
    background: #fbfbfc !important;
    box-shadow: none !important;
    color: #5f6368 !important;
}

[data-theme="light"] .config-table-wrap:has(.config-table-empty-cell) {
    min-height: 0 !important;
}

[data-theme="light"] .config-table-empty-cell .empty-state-icon,
[data-theme="light"] .edge-config-stage .empty-state-icon {
    display: none !important;
}

[data-theme="light"] .config-table-empty-cell .empty-state h3,
[data-theme="light"] .edge-config-stage .empty-state h3 {
    color: #171717 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

[data-theme="light"] .config-table-empty-cell .empty-state p,
[data-theme="light"] .edge-config-stage .empty-state p {
    color: #6b6f76 !important;
    font-size: 12px !important;
}

@media (max-width: 760px) {
    .module-console-summary,
    .module-provider-grid {
        grid-template-columns: 1fr;
    }

    .module-widget-restored {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .module-widget-restored .module-widget-header,
    .module-widget-restored .module-widget-footer {
        justify-content: center;
    }

    .module-widget-restored .module-widget-header {
        flex-direction: column;
    }

    .module-widget-restored .module-widget-desc {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .module-registry-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .module-registry-row .module-registry-status {
        margin-top: 8px;
    }

    .module-registry-title-row {
        display: block;
    }

    .module-registry-meta,
    .module-registry-actions {
        grid-column: 2;
    }

    .module-registry-actions {
        justify-content: flex-start;
    }
}

.table-compact th,
.table-compact td {
    vertical-align: middle;
    padding: 12px;
}

.table-compact th {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-depth);
}

.table-compact td input.settings-input,
.table-compact td select.settings-input {
    margin: 0;
}

.pill {
    max-width: 100%;
}

.pill .btn-ghost {
    margin-top: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.toggle-card {
    border-width: 1px;
    background: var(--bg-depth);
}

.toggle-card.active {
    border-color: var(--success);
}

.section-control-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.section-control-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
    overflow: hidden;
}

.section-control-card.is-active {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.section-control-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.section-control-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.section-control-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: var(--primary-glow);
    flex-shrink: 0;
}

.section-control-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.section-control-card-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.section-control-card-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.section-control-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 16px;
}

.section-control-row {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.section-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.section-presets-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.section-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.section-chip-row .pill {
    min-height: 28px;
}

.section-segment-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.section-size-grid .section-limit-card {
    min-height: 132px;
}

.httpsec-request-card {
    min-width: 0;
}

.httpsec-request-card .httpsec-request-body {
    gap: 10px;
}

.httpsec-request-card .section-presets-row {
    gap: 6px;
}

.httpsec-request-card .section-chip-row {
    gap: 6px;
}

.httpsec-request-card .section-chip-row .pill {
    min-height: 24px;
}

.httpsec-request-card .section-size-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.httpsec-request-card .section-size-grid .section-limit-card {
    min-height: 0;
    padding: 12px;
}

.httpsec-unit-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
}

.httpsec-unit-input .section-input {
    border: 0;
    background: transparent;
    border-radius: 0;
}

.httpsec-unit-input span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    border-left: 1px solid var(--border);
    font-size: 11px;
    font-weight: 800;
}

.httpsec-ext-panel {
    display: grid;
    gap: 8px;
}

.httpsec-mini-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.httpsec-extension-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.httpsec-extension-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 8px;
    color: var(--text-main);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 12px;
    cursor: pointer;
}

.httpsec-extension-chip:hover {
    background: var(--surface-subtle, rgba(148, 163, 184, 0.08));
    border-color: var(--text-muted);
}

.httpsec-extension-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    color: var(--text-muted);
    background: transparent;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1;
}

.httpsec-empty-note {
    width: 100%;
    padding: 10px 12px;
    color: var(--text-muted);
    background: var(--bg-depth);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-size: 12px;
}

.httpsec-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.httpsec-check-tile {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 6px 8px;
    color: var(--text-main);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 12px;
    cursor: pointer;
}

.httpsec-check-tile input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--primary);
}

.httpsec-check-tile.is-active {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 9%, var(--bg-depth));
}

.httpsec-method-grid-blocklist .httpsec-check-tile.is-active {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-depth));
}

.httpsec-method-grid-blocklist .httpsec-check-tile input {
    accent-color: var(--danger);
}

.httpsec-method-grid-allowlist .httpsec-check-tile.is-active {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    background: color-mix(in srgb, var(--success) 10%, var(--bg-depth));
}

.httpsec-method-grid-allowlist .httpsec-check-tile input {
    accent-color: var(--success);
}

.httpsec-response-groups {
    display: grid;
    gap: 16px;
}

.httpsec-response-group {
    display: grid;
    gap: 10px;
}

.httpsec-response-group-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 0 2px;
}

.httpsec-response-group-head h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.httpsec-response-group-head span {
    color: var(--text-muted);
    font-size: 12px;
}

.httpsec-simple-stack {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.httpsec-simple-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
    gap: 16px;
    align-items: center;
    padding: 12px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.httpsec-simple-row .section-segment-row {
    justify-content: flex-end;
}

.httpsec-simple-select {
    width: 260px;
    justify-self: end;
}

.httpsec-advanced-details {
    clear: both;
    margin-top: 14px;
    padding: 12px;
    background: color-mix(in srgb, var(--bg-depth) 60%, transparent);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.httpsec-advanced-details summary {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.httpsec-advanced-details summary::marker {
    color: var(--text-muted);
}

.httpsec-choice-panel {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.httpsec-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.httpsec-choice-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.httpsec-choice-button {
    position: relative;
    display: grid;
    gap: 4px;
    width: 100%;
    min-height: 78px;
    padding: 14px 42px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-depth);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.httpsec-choice-button:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-strong);
}

.httpsec-choice-button.is-active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 11%, var(--bg-depth));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
}

.httpsec-choice-button-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 72px;
}

.httpsec-choice-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.httpsec-choice-check svg {
    width: 12px;
    height: 12px;
}

.httpsec-choice-button.is-active .httpsec-choice-check {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-glow);
}

.httpsec-file-types-panel {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
}

.httpsec-file-types-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.httpsec-file-type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
}

.httpsec-file-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-depth);
    color: var(--text-main);
    cursor: pointer;
    appearance: none;
}

.httpsec-file-type-chip:hover {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, var(--bg-depth));
}

.httpsec-file-type-chip-add:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, var(--bg-depth));
}

.httpsec-file-type-remove {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: var(--bg-elevated);
}

.httpsec-file-type-chip:hover .httpsec-file-type-remove {
    color: var(--danger);
}

.httpsec-file-type-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.httpsec-file-type-suggestions {
    display: grid;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

@media (max-width: 1200px) {
    .section-module-grid,
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .config-page-hero {
        padding: 16px;
    }

    .config-page-hero-title {
        font-size: 19px;
    }

    .section-overview-grid,
    .section-stats-grid,
    .section-module-grid,
    .grid-3,
    .grid-2,
    .grid-2-cols,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .section-status-bar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .section-status-right {
        margin-left: 0;
        width: 100%;
    }

    .section-managed-policy-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-managed-policy-meta {
        width: 100%;
        justify-content: space-between;
    }

    .feature-header {
        align-items: flex-start;
    }

    .feature-meta {
        width: 100%;
    }

    .feature-header .switch {
        margin-left: 0;
    }

    .section-control-card-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-control-card-main {
        width: 100%;
    }

    .section-control-card-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .section-control-row {
        grid-template-columns: 1fr;
    }

    .httpsec-choice-grid,
    .httpsec-choice-grid-2 {
        grid-template-columns: 1fr;
    }

    .section-inline-form {
        grid-template-columns: 1fr;
    }

    .httpsec-file-types-head,
    .httpsec-file-type-add {
        grid-template-columns: 1fr;
    }

    .httpsec-file-types-head {
        display: grid;
    }

    .section-inline-form .btn {
        justify-self: flex-start;
    }

    .httpsec-response-group-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .httpsec-simple-row {
        grid-template-columns: 1fr;
    }

    .httpsec-simple-row .section-segment-row {
        justify-content: flex-start;
    }

    .httpsec-simple-select {
        width: 100%;
        justify-self: stretch;
    }

    .httpsec-request-card .section-size-grid,
    .httpsec-check-grid {
        grid-template-columns: 1fr;
    }

    .section-config-card .feature-header>div:last-child {
        width: 100%;
        justify-content: space-between;
    }
}

/* Shared modal/dialog primitives */
.section-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.section-modal-overlay-padded {
    padding: 20px;
}

.section-modal-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.section-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.section-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.section-modal-sub {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.section-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

.section-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.section-confirm-modal {
    width: min(460px, calc(100vw - 32px));
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.section-confirm-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.section-confirm-head.is-danger {
    background: linear-gradient(180deg, color-mix(in srgb, var(--section-confirm-accent, var(--danger)) 10%, transparent), var(--bg-card));
}

.section-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--section-confirm-accent, var(--warning));
    background: color-mix(in srgb, var(--section-confirm-accent, var(--warning)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--section-confirm-accent, var(--warning)) 35%, transparent);
    border-radius: var(--radius);
}

.section-confirm-icon svg,
.section-confirm-close svg {
    display: block;
}

.section-confirm-title-block {
    min-width: 0;
}

.section-confirm-title {
    margin: 0;
    color: var(--text-main);
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
}

.section-confirm-sub {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.section-confirm-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.section-confirm-close:hover,
.section-confirm-close:focus-visible {
    color: var(--text-main);
    background: var(--glass-highlight);
}

.section-confirm-body {
    padding: 18px 20px;
}

.section-confirm-message {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.section-confirm-message p {
    margin: 10px 0 0;
}

.section-confirm-rule-name {
    display: block;
    max-width: 100%;
    padding: 10px 12px;
    color: var(--text-main);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.section-confirm-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-depth);
}

.section-confirm-primary.is-danger {
    color: #fff;
    background: var(--section-confirm-accent, var(--danger));
    border-color: var(--section-confirm-accent, var(--danger));
}

.section-confirm-primary.is-danger:hover,
.section-confirm-primary.is-danger:focus-visible {
    filter: brightness(0.94);
}

.section-confirm-primary[disabled] {
    opacity: 0.65;
    cursor: wait;
}

/* WAF section: shared layout primitives */
.section-status-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.section-header {
    border-left: 4px solid var(--primary);
}

.section-header-icon {
    padding: 12px;
    background: var(--primary-muted);
    color: var(--primary);
}

.section-header-title {
    margin: 0;
}

.section-header-sub {
    margin-top: 4px;
}

.section-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
}

.section-status-dot.is-active {
    background: var(--success);
}

.section-status-dot.is-inactive {
    background: var(--text-dim);
}

.section-status-dot.success {
    background: var(--success);
}

.section-status-dot.danger {
    background: var(--danger);
}

.section-status-title {
    font-weight: 600;
    font-size: 14px;
}

.section-status-divider {
    color: var(--text-dim);
}

.section-status-meta {
    color: var(--text-muted);
    font-size: 13px;
}

.section-security-score.good {
    color: var(--success);
}

/* =============================================================================
   ADMIN UI SIMPLIFICATION
   Flatten section screens and keep configuration surfaces attached
   ============================================================================= */

.section-config-container {
    padding: 18px 20px 24px;
    background: var(--bg-void);
}

.config-page-hero {
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: none;
}

.config-page-hero-kicker {
    color: var(--text-dim);
}

.config-page-hero-title {
    font-size: 20px;
}

.config-page-hero-subtitle {
    margin-top: 6px;
    color: var(--text-muted);
}

.config-page-hero-actions {
    margin-top: 2px;
}

.section-tab-row {
    margin-bottom: 14px;
    padding: 4px;
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    box-shadow: none;
}

.section-tab-btn.btn-primary,
.section-tab-btn.active,
.section-tab-btn.is-active {
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-interactive)) !important;
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border)) !important;
    color: var(--text-main) !important;
}

.section-tab-btn.btn-primary svg,
.section-tab-btn.active svg,
.section-tab-btn.is-active svg {
    color: var(--primary);
}

.section-hero-shell {
    margin-bottom: 18px;
}

.section-status-bar {
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
}

.section-metric-card,
.section-control-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.section-metric-card {
    padding: 14px 16px;
}

.section-control-card-head,
.section-control-card-body {
    padding-left: 14px;
    padding-right: 14px;
}

.section-control-card-icon {
    border-radius: var(--radius-lg);
    background: var(--primary-glow);
}

.toggle-card {
    background: var(--bg-card);
}

.toggle-card.active {
    border-color: color-mix(in srgb, var(--success) 55%, var(--border));
}

.section-header {
    border-left: 0;
}

.section-header-icon {
    padding: 10px;
    border-radius: var(--radius-lg);
    background: var(--primary-glow);
}

.section-btn-table:hover,
.section-btn-table:focus-visible {
    background: var(--glass-highlight);
    border-color: var(--border-strong);
    color: var(--text-main);
}

.section-btn-table-danger:hover,
.section-btn-table-danger:focus-visible {
    background: var(--status-danger-bg);
    border-color: color-mix(in srgb, var(--danger) 60%, var(--border));
    color: var(--danger);
}

.section-security-score.warn {
    color: var(--warning);
}

.section-status-mode {
    color: var(--text-dim);
}

.section-status-mode.mode-blocking {
    color: var(--danger);
}

.section-status-mode.mode-detection {
    color: var(--primary);
}

.section-status-mode.mode-off {
    color: var(--text-dim);
}

.section-status-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-status-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    font-weight: 600;
}

.section-state-pill {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.section-state-pill.is-running {
    background: var(--status-success-bg);
    color: var(--success);
}

.section-state-pill.is-stopped {
    background: var(--status-danger-bg);
    color: var(--danger);
}

.section-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.section-metric-card {
    padding: 24px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
}

.section-metric-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 16px;
    opacity: 0.05;
    color: var(--text-main);
    font-size: 48px;
    transform: rotate(15deg);
}

.section-metric-icon.tone-neutral {
    color: var(--text-main);
}

.section-metric-icon.tone-danger {
    color: var(--danger);
}

.section-metric-icon.tone-info {
    color: var(--info);
}

.section-metric-icon.tone-success {
    color: var(--success);
}

.section-metric-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
}

.section-metric-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.5px;
}

.section-metric-unit {
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 2px;
}

.section-metric-sub {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}

.section-metric-sub.is-bold {
    font-weight: 500;
}

.section-metric-sub.is-danger {
    color: var(--danger);
}

.section-metric-sub.is-success {
    color: var(--success);
}

.section-metric-sub.is-muted {
    color: var(--text-dim);
}

.section-metric-sub-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--section-sub-dot, var(--primary));
}

.section-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
}

.section-chart-svg {
    width: 100%;
    height: 100%;
}

.section-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.section-col-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.section-panel {
    padding: 24px;
    border: 1px solid var(--border);
}

.section-panel-title {
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-panel-title-tight {
    margin-bottom: 16px;
}

.section-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.section-mode-option {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    background: transparent;
    text-align: center;
    transition: all 0.2s;
}

.section-mode-icon {
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
}

.section-mode-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 2px;
}

.section-mode-option.is-active {
    background: var(--bg-elevated);
}

.section-mode-option.is-active .section-mode-title {
    color: var(--text-main);
}

.section-mode-option.tone-danger.is-active {
    border-color: var(--danger);
}

.section-mode-option.tone-danger.is-active .section-mode-icon {
    color: var(--danger);
}

.section-mode-option.tone-primary.is-active {
    border-color: var(--primary);
}

.section-mode-option.tone-primary.is-active .section-mode-icon {
    color: var(--primary);
}

.section-mode-option.tone-muted.is-active {
    border-color: var(--text-muted);
}

.section-mode-option.tone-muted.is-active .section-mode-icon {
    color: var(--text-muted);
}

.section-mode-subtitle {
    font-size: 10px;
    color: var(--text-muted);
}

.section-policy-card {
    background: var(--bg-depth);
    padding: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-policy-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.section-policy-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-muted);
    color: var(--primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.section-policy-main {
    flex: 1;
}

.section-policy-kicker {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.section-policy-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-policy-badge {
    font-size: 10px;
    color: var(--bg-card);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.section-policy-badge-active {
    background: var(--success);
}

.section-policy-badge-manual {
    background: var(--bg-card-hover);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
}

.section-policy-desc {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
    line-height: 1.4;
}

.section-policy-actions {
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px;
    padding-top: 16px;
}

.section-policy-actions .btn {
    flex: 1;
}

.section-side-panel {
    height: fit-content;
}

.section-warning-box {
    margin-bottom: 20px;
    padding: 12px;
    background: var(--status-warning-bg);
    border: 1px solid var(--status-warning-border);
    border-radius: var(--radius);
    display: flex;
    gap: 12px;
}

.section-warning-icon {
    color: var(--warning);
    margin-top: 2px;
}

.section-warning-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--warning);
    margin-bottom: 2px;
}

.section-warning-text {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.section-paranoia-wrap {
    margin-bottom: 24px;
}

.section-paranoia-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    align-items: center;
}

.section-paranoia-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.section-paranoia-help {
    font-size: 11px;
    color: var(--text-muted);
}

.section-paranoia-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.section-paranoia-card {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    background: transparent;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.section-paranoia-card.is-recommended {
    border-color: var(--primary);
}

.section-paranoia-recommended {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primary);
    color: var(--bg-card);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-bottom-left-radius: 6px;
    text-transform: uppercase;
}

.section-paranoia-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-paranoia-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.section-paranoia-subtitle {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
}

.section-paranoia-active-check {
    position: absolute;
    bottom: 4px;
    right: 4px;
}

.section-paranoia-card.tone-success .section-paranoia-dot {
    background: var(--success);
}

.section-paranoia-card.tone-success .section-paranoia-active-check {
    color: var(--success);
}

.section-paranoia-card.tone-info .section-paranoia-dot {
    background: var(--info);
}

.section-paranoia-card.tone-info .section-paranoia-active-check {
    color: var(--info);
}

.section-paranoia-card.tone-warning .section-paranoia-dot {
    background: var(--warning);
}

.section-paranoia-card.tone-warning .section-paranoia-active-check {
    color: var(--warning);
}

.section-paranoia-card.tone-danger .section-paranoia-dot {
    background: var(--danger);
}

.section-paranoia-card.tone-danger .section-paranoia-active-check {
    color: var(--danger);
}

.section-paranoia-card.is-active .section-paranoia-title {
    color: var(--text-main);
}

.section-paranoia-card.tone-success.is-active {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 5%, transparent);
}

.section-paranoia-card.tone-info.is-active {
    border-color: var(--info);
    background: color-mix(in srgb, var(--info) 5%, transparent);
}

.section-paranoia-card.tone-warning.is-active {
    border-color: var(--warning);
    background: color-mix(in srgb, var(--warning) 5%, transparent);
}

.section-paranoia-card.tone-danger.is-active {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 5%, transparent);
}

.section-feature-card {
    background: var(--bg-depth);
}

.section-feature-card.is-active {
    border-color: var(--primary);
}

.section-feature-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-muted);
}

.section-feature-icon.is-active {
    background: var(--primary-muted);
    color: var(--primary);
}

.section-feature-dot {
    width: 6px;
    height: 6px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--border);
}

.section-feature-dot.is-active {
    background: var(--success);
}

.section-adv-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

.section-adv-toggle-icon {
    font-size: 10px;
    display: inline-flex;
}

.section-advanced-box {
    display: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.section-advanced-box.is-open {
    display: block;
}

.section-field-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-items: center;
}

.section-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.section-field-icon {
    color: var(--text-dim);
    display: inline-flex;
}

.section-threshold-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.section-threshold-input {
    width: 80px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    text-align: center;
    font-weight: 700;
}

.section-threshold-suffix {
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-left: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
}

.section-threshold-help {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-dim);
}

.section-config-panel {
    padding: 16px;
    border-radius: var(--radius-lg);
}

.section-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.section-panel-head .section-panel-title {
    margin: 0;
}

.section-mode-grid-compact {
    gap: 10px;
}

.section-mode-grid-compact .section-mode-option {
    min-height: 112px;
}

.section-profile-grid-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.section-profile-row {
    display: grid;
    width: 100%;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.section-profile-row:hover {
    background: var(--bg-depth);
}

.section-profile-row.is-active {
    border-color: color-mix(in srgb, var(--success) 38%, var(--border));
}

.section-profile-row-icon {
    color: var(--primary);
    display: inline-flex;
}

.section-profile-row-icon.warning {
    color: var(--warning);
}

.section-profile-row-icon.danger {
    color: var(--danger);
}

.section-profile-row-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.section-profile-row-desc {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
}

.section-profile-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 11px;
    font-family: var(--font-main);
}

.section-profile-row-meta strong {
    color: var(--primary);
    font-family: inherit;
    text-transform: uppercase;
}

.section-compact-stats {
    gap: 10px;
}

.section-compact-stats .section-overview-stat {
    text-align: left;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
}

.section-compact-stats .section-overview-stat-value {
    font-size: 20px;
    margin-bottom: 3px;
}

.section-feature-meta {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--font-main);
}

.section-managed-tile {
    padding: 0;
    margin-bottom: 24px;
    cursor: pointer;
    border-left: 4px solid var(--warning);
    transition: all 0.2s;
}

.section-managed-tile:hover {
    background: var(--bg-card-hover);
}

.section-managed-tile-body {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.section-managed-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--status-warning-bg);
    color: var(--warning);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-managed-main {
    flex: 1;
}

.section-managed-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.section-managed-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.section-badge-soft {
    background: var(--bg-depth);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.section-badge-success {
    background: var(--surface-interactive);
    color: var(--text-main);
    border: 1px solid var(--border-strong);
}

.section-badge-warning {
    background: var(--surface-interactive);
    color: var(--text-main);
    border: 1px solid var(--border-strong);
}

.section-badge-danger {
    background: var(--bg-card);
    color: var(--text-dim);
    border: 1px solid var(--border);
}

.section-badge-muted {
    background: var(--glass-highlight);
    color: var(--text-muted);
    border: 1px solid var(--glass-highlight);
}

.section-managed-desc {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.section-managed-arrow {
    color: var(--text-dim);
}

.section-rules-head {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-rules-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-rules-sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.section-folder-summary {
    margin-bottom: 24px;
    border-left: 4px solid var(--warning);
    padding: 24px;
}

.section-folder-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-folder-main {
    display: flex;
    align-items: center;
    gap: 20px;
}

.section-folder-meta h4 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
}

.section-folder-meta p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.section-folder-actions {
    display: flex;
    gap: 8px;
}

.section-managed-console {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-managed-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
}

.section-managed-status .section-status-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

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

.section-managed-warning {
    margin: 0;
}

.section-managed-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.section-managed-metrics .section-overview-stat {
    text-align: left;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
}

.section-managed-metrics .section-overview-stat-value {
    font-size: 20px;
    margin-bottom: 3px;
}

.section-managed-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.section-managed-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    max-width: 100%;
}

.section-managed-group strong {
    color: var(--text-main);
    font-weight: 750;
}

.section-managed-table-card {
    border-radius: var(--radius-lg);
}

.section-managed-policy-list {
    display: grid;
    gap: 12px;
}

.section-managed-policy-group {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.section-managed-policy-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 78px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.section-managed-policy-summary::-webkit-details-marker {
    display: none;
}

.section-managed-policy-summary:hover,
.section-managed-policy-group[open] .section-managed-policy-summary {
    background: var(--bg-card-hover);
}

.section-managed-policy-group[open] .section-managed-policy-summary {
    border-bottom: 1px solid var(--border);
}

.section-managed-policy-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.section-managed-policy-title {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 780;
    line-height: 1.3;
}

.section-managed-policy-desc {
    max-width: 680px;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.section-managed-policy-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.section-managed-policy-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-dim);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.section-managed-policy-summary:hover .section-managed-policy-chevron,
.section-managed-policy-group[open] .section-managed-policy-chevron {
    color: var(--text-main);
}

.section-managed-policy-group[open] .section-managed-policy-chevron {
    transform: rotate(180deg);
}

.section-managed-policy-body {
    background: var(--bg-depth);
}

.section-managed-policy-body .section-table-wrap {
    min-height: auto;
}

.section-managed-table .section-th,
.section-managed-table .section-td {
    padding: 11px 14px;
    vertical-align: middle;
}

.section-managed-table .section-row-main {
    align-items: flex-start;
}

.section-managed-group-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 12px;
}

.section-managed-status-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-managed-rule-name {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}

.section-managed-table .section-row-sub {
    max-width: 620px;
}

.section-managed-rule-description {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.section-managed-table .section-switch {
    justify-content: flex-end;
}

.section-managed-empty {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.section-rules-head-compact {
    margin-bottom: 12px;
}

.section-excl-filter-row-compact {
    margin: 0;
}

.section-folder-empty {
    padding: 48px;
    text-align: center;
    color: var(--text-muted);
}

.section-folder-empty-icon {
    margin-bottom: 12px;
    opacity: 0.3;
    transform: scale(1.5);
}

.section-card-flush {
    padding: 0;
    overflow: hidden;
}

.section-table-wrap {
    min-height: 200px;
    padding: 0;
}

.section-table {
    width: 100%;
    border-collapse: collapse;
}

.section-table-head {
    background: var(--bg-depth);
    border-bottom: 1px solid var(--border);
}

.section-th {
    text-align: left;
    padding: 10px 12px;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 600;
}

.section-th-right {
    text-align: right;
}

.section-row {
    border-bottom: 1px solid var(--border-subtle);
    transition: background-color 0.15s;
}

.section-row:hover {
    background-color: var(--bg-card-hover);
}

.section-row-dim {
    opacity: 0.6;
}

.section-td {
    padding: 10px 12px;
}

.section-td-right {
    text-align: right;
}

.section-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-row-icon {
    width: 16px;
    display: flex;
    justify-content: center;
    color: var(--text-muted);
    opacity: 1;
}

.section-row-icon.is-muted {
    color: var(--text-dim);
    opacity: 0.5;
}

.section-row-icon.tone-request {
    color: var(--primary);
}

.section-row-icon.tone-response {
    color: var(--warning);
}

.section-row-icon.tone-other {
    color: var(--text-muted);
}

.section-row-icon.tone-critical {
    color: var(--danger);
}

.section-row-icon.tone-high {
    color: var(--brand-orange);
}

.section-row-icon.tone-medium {
    color: var(--warning);
}

.section-row-icon.tone-low {
    color: var(--primary);
}

.section-row-icon-fallback {
    font-size: 16px;
    line-height: 1;
}

.section-row-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-main);
}

.section-row-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-main);
}

.section-file-name {
    font-size: 13px;
    font-family: var(--font-main);
    color: var(--text-main);
}

.section-file-name-muted {
    color: var(--text-muted);
    text-decoration: line-through;
}

.section-cat-pill {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

.section-cat-pill.tone-request,
.section-cat-pill.tone-low {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

.section-cat-pill.tone-response,
.section-cat-pill.tone-medium {
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 20%, transparent);
}

.section-cat-pill.tone-critical {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}

.section-cat-pill.tone-high {
    background: color-mix(in srgb, var(--brand-orange) 10%, transparent);
    color: var(--brand-orange);
    border-color: color-mix(in srgb, var(--brand-orange) 20%, transparent);
}

.section-cat-pill.tone-other {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    color: var(--text-muted);
    border-color: color-mix(in srgb, var(--text-muted) 20%, transparent);
}

.section-action-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 600;
}

.section-switch-sm {
    transform: scale(0.8);
    display: inline-block;
}

.section-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.section-btn-table {
    padding: 4px 8px;
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
}

.section-btn-table:hover {
    background: var(--bg-depth);
    color: var(--text-main);
}

.section-btn-table-danger {
    color: var(--danger);
}

.section-btn-table-danger:hover {
    background: var(--status-danger-bg);
    border-color: var(--danger);
}

.section-excl-rule-id {
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 4px;
}

.section-excl-type-badge {
    font-size: 9px;
}

.section-excl-scope-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.section-excl-scope-chip {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--font-main);
}

.section-excl-scope-chip.path {
    background: rgba(59, 130, 246, 0.1);
    color: var(--control-accent);
}

.section-excl-scope-chip.ip {
    background: var(--status-success-bg);
    color: var(--success);
}

.section-excl-scope-chip.param {
    background: rgba(14, 165, 233, 0.12);
    color: var(--primary);
}

.section-excl-global {
    font-size: 11px;
    color: var(--text-dim);
}

.section-excl-reason {
    font-size: 13px;
    color: var(--text);
}

.section-excl-expiry-cell {
    font-size: 12px;
}

.section-excl-expiry {
    color: var(--text-muted);
}

.section-excl-expiry.expired {
    color: var(--warning);
}

.section-excl-expired-flag {
    font-size: 9px;
    color: var(--warning);
    font-weight: 700;
}

.section-excl-delete-btn {
    color: var(--danger);
}

.section-excl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.section-excl-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.section-excl-stat-chip {
    padding: 6px 12px;
    background: var(--bg-depth);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-muted);
}

.section-excl-stat-value.total {
    color: var(--text);
}

.section-excl-stat-value.active {
    color: var(--success);
}

.section-excl-stat-value.expired {
    color: var(--warning);
}

.section-excl-filter-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.section-excl-empty-cell {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

.section-excl-modal-overlay {
    background: var(--overlay-backdrop);
    z-index: 999;
}

.section-excl-modal-dialog {
    width: 500px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.section-excl-modal-head {
    padding: 20px 24px;
    gap: 10px;
}

.section-excl-modal-head-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-excl-modal-icon {
    padding: 8px;
    border-radius: var(--radius-lg);
    background: var(--primary-muted);
    color: var(--primary);
}

.section-excl-modal-sub {
    margin-top: 2px;
}

.section-excl-modal-close {
    font-size: 18px;
    padding: 4px 8px;
}

.section-excl-modal-body {
    padding: 24px;
}

.section-excl-field {
    margin-bottom: 20px;
}

.section-excl-field.tight {
    margin-bottom: 4px;
}

.section-excl-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.section-excl-label span {
    color: var(--text-dim);
    text-transform: none;
    font-weight: 400;
}

.section-excl-input-mono {
    font-family: var(--font-main);
}

.section-excl-enabled-wrap {
    margin-top: 16px;
}

.section-excl-enabled-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.section-excl-enabled-text {
    font-size: 12px;
    color: var(--text-muted);
}

.section-excl-modal-footer {
    padding: 16px 24px;
    gap: 8px;
}

.section-empty-state {
    text-align: center;
    padding: 48px 32px;
}

.section-empty-icon {
    color: var(--text-muted);
    margin-bottom: 8px;
}

.section-empty-icon svg {
    opacity: 0.3;
    margin: 0 auto 12px;
}

.section-empty-title {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 4px;
}

.section-empty-subtitle {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 16px;
}

.section-editor-segment {
    display: flex;
    background: var(--bg-depth);
    border-radius: var(--radius);
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--border);
}

.section-editor-segment .btn {
    font-size: 12px;
    gap: 6px;
    height: 28px;
}

.section-editor-mode-btn {
    min-width: 82px;
    justify-content: center;
}

.section-editor-mode-btn svg,
.section-editor-footer .btn svg {
    width: 14px;
    height: 14px;
}

.section-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.section-editor-card {
    margin-bottom: 20px;
}

.section-editor-section-title {
    margin: 0 0 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-editor-section-title.compact {
    margin: 0;
}

.section-rule-identity-grid {
    display: grid;
    grid-template-columns: 140px 1fr 160px;
    gap: 20px;
    margin-bottom: 20px;
}

.section-rule-identity-grid-secondary {
    display: grid;
    grid-template-columns: 1fr 160px 160px;
    gap: 20px;
}

.section-input-readonly {
    opacity: 0.7;
    cursor: not-allowed;
    background: var(--bg-depth);
}

.section-conditions-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}

.section-conditions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-conditions-empty {
    text-align: center;
    padding: 32px;
    color: var(--text-muted);
    font-size: 13px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

.section-preview-card {
    background: var(--bg-depth);
}

.section-preview-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-preview-code {
    margin: 0;
    padding: 14px;
    background: var(--glass-highlight-strong);
    border-radius: var(--radius-lg);
    font-family: var(--font-main);
    font-size: 12px;
    color: #a5d6ff;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.section-code-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-code-kicker {
    font-size: 11px;
    color: var(--text-dim);
}

.section-code-note {
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--bg-depth);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.section-code-note-icon {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 2px;
}

.section-code-note-text {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.5;
}

.section-code-id-grid {
    display: grid;
    grid-template-columns: 140px 1fr 140px;
    gap: 20px;
    margin-bottom: 20px;
}

.section-code-textarea {
    width: 100%;
    height: 320px;
    font-family: var(--font-main);
    font-size: 13px;
    line-height: 1.6;
    padding: 16px;
    background: var(--bg-depth);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    resize: vertical;
    tab-size: 4;
    outline: none;
    box-sizing: border-box;
}

.section-code-textarea:focus {
    border-color: var(--primary);
}

.section-condition-row {
    background: var(--bg-elevated);
    padding: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    transition: all 0.2s;
    position: relative;
}

.section-condition-row:hover {
    border-color: var(--border-strong);
}

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

.section-condition-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.section-condition-remove {
    color: var(--text-muted);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.section-condition-remove:hover {
    background: var(--bg-depth);
    color: var(--danger);
}

.section-condition-remove-icon {
    font-size: 16px;
    line-height: 1;
}

.section-condition-grid {
    display: grid;
    grid-template-columns: 140px 140px 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.section-operator-row {
    display: flex;
    gap: 8px;
}

.section-hidden-input {
    display: none;
}

.section-pattern-input {
    font-family: var(--font-main);
    font-size: 12px;
}

.section-transform-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.section-transform-chip {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: var(--radius-lg);
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-muted);
    user-select: none;
}

.section-transform-chip.active {
    background: var(--bg-depth);
    border-color: var(--primary);
    color: var(--primary);
}

.section-modal-overlay {
    background: var(--overlay-backdrop);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s;
}

.section-modal-overlay.is-visible {
    opacity: 1;
}

.section-modal-dialog {
    width: 900px;
    max-width: 92%;
    height: 80vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 50px 100px -20px var(--overlay-backdrop);
}

.section-modal-header {
    padding: 16px 24px;
    background: var(--bg-depth);
}

.section-modal-title {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-modal-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.section-modal-body {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.section-modal-textarea {
    flex: 1;
    width: 100%;
    border: none;
    resize: none;
    padding: 20px 24px;
    font-family: var(--font-main);
    font-size: 12px;
    line-height: 1.6;
    background: var(--bg-depth);
    color: var(--text-main);
    outline: none;
    tab-size: 4;
}

.section-modal-footer {
    padding: 12px 24px;
    background: var(--bg-depth);
    justify-content: space-between;
}

.section-modal-note {
    font-size: 11px;
    color: var(--text-dim);
}

.section-modal-actions {
    display: flex;
    gap: 8px;
}

.section-policy-library-overlay {
    background: var(--overlay-backdrop);
    z-index: 9999;
}

.section-policy-library-dialog {
    width: 1000px;
    max-width: 92%;
    height: 85vh;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.section-policy-library-head {
    padding: 24px 32px;
    align-items: start;
    background: var(--bg-depth);
    gap: 12px;
}

.section-policy-library-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-policy-library-sub {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.5;
}

.section-policy-library-warning {
    color: var(--warning);
    font-weight: 600;
}

.section-policy-library-close {
    opacity: 0.7;
    cursor: pointer;
}

.section-policy-library-body {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    background: var(--bg-body);
}

.section-policy-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.section-policy-library-footer {
    padding: 20px 32px;
    background: var(--bg-card);
    gap: 16px;
}

.section-policy-library-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    margin-right: auto;
}

.section-policy-library-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px;
    color: var(--text-muted);
}

.section-policy-library-empty-icon {
    font-size: 32px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.section-policy-lib-card {
    border: 1px solid var(--border);
    background: var(--bg-card);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    position: relative;
}

.section-policy-lib-card.active {
    border-color: var(--primary);
    box-shadow: none;
}

.section-policy-lib-active-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--primary);
    color: var(--bg-card);
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px var(--glass-highlight-strong);
    display: flex;
    align-items: center;
    gap: 4px;
}

.section-policy-lib-body {
    padding: 24px;
    flex: 1;
}

.section-policy-lib-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.section-policy-lib-icon.success {
    background: color-mix(in srgb, var(--success) 10%, var(--bg-depth));
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 20%, transparent);
}

.section-policy-lib-icon.warning {
    background: color-mix(in srgb, var(--warning) 10%, var(--bg-depth));
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 20%, transparent);
}

.section-policy-lib-icon.danger {
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-depth));
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}

.section-policy-lib-name {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    padding-right: 60px;
}

.section-policy-lib-desc {
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.6;
}

.section-policy-lib-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.section-policy-lib-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-depth);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.section-policy-lib-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.section-policy-lib-dot.success {
    background: var(--success);
}

.section-policy-lib-dot.warning {
    background: var(--warning);
}

.section-policy-lib-dot.danger {
    background: var(--danger);
}

.section-policy-lib-footer {
    padding: 16px 24px;
    background: var(--bg-depth);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.section-policy-lib-kind {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-policy-lib-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-policy-lib-action.active {
    color: var(--primary);
}

.section-legacy-crs-overlay {
    background: var(--overlay-backdrop);
    z-index: 10001;
}

.section-legacy-crs-dialog {
    width: 90%;
    height: 90%;
    padding: 0;
}

.section-legacy-crs-head {
    padding: 16px;
}

.section-legacy-crs-textarea {
    flex: 1;
    padding: 16px;
    font-family: var(--font-main);
    border: none;
    resize: none;
    outline: none;
    background: var(--bg-depth);
    color: var(--text);
    line-height: 1.5;
}

.section-legacy-crs-footer {
    padding: 16px;
    gap: 12px;
}

.section-score-ring {
    transition: stroke-dashoffset 1s ease;
}

.section-hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.section-hero-icon-accent {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--primary-glow);
    color: var(--primary);
}

.section-hero-icon-accent.success {
    background: var(--status-success-bg);
    color: var(--success);
}

.section-hero-title-compact {
    margin-bottom: 4px;
}

.section-hero-sub-compact {
    margin: 0;
}

.section-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.section-search-row,
.section-search-row {
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.section-search-wrap,
.section-search-wrap {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.section-search-icon,
.section-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    display: inline-flex;
}

.section-search-input,
.section-search-input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 13px;
    transition: all 0.2s;
    color: var(--text-main);
    outline: none;
}

.section-search-input:focus,
.section-search-input:focus {
    border-color: var(--primary);
    box-shadow: none;
}

.section-search-input.section-search-input-noicon {
    padding-left: 12px;
}

.section-search-count,
.section-search-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.section-list-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-empty-state {
    text-align: center;
    padding: 80px 20px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}

.section-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: var(--primary-glow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.section-empty-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-main);
}

.section-empty-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 0;
}

.section-empty-sub.has-action {
    margin-bottom: 20px;
}

/* Access Control API keys primitives */
.section-entity-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.section-entity-card.active .section-entity-accent,
.section-entity-card.never .section-entity-accent {
    background: var(--success);
}

.section-entity-card.expiring .section-entity-accent {
    background: var(--warning);
}

.section-entity-card.expired .section-entity-accent {
    background: var(--danger);
}

.section-entity-card.soon .section-entity-accent {
    background: var(--primary);
}

.section-entity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px var(--glass-highlight-strong);
    border-color: var(--primary);
}

.section-entity-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--border);
}

.section-entity-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-left: 12px;
    gap: 16px;
}

.section-entity-main {
    flex: 1;
    min-width: 0;
}

.section-entity-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.section-entity-icon {
    width: 44px;
    height: 44px;
    background: var(--primary-glow);
    color: var(--primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-entity-title-wrap {
    flex: 1;
    min-width: 0;
}

.section-entity-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-main);
    margin-bottom: 2px;
}

.section-entity-prefix {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-main);
    opacity: 0.8;
}

.section-entity-status {
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-depth);
    color: var(--text-main);
}

.section-entity-status.active {
    background: var(--status-success-bg);
    color: var(--success);
}

.section-entity-status.expiring {
    background: var(--status-warning-bg);
    color: var(--warning);
}

.section-entity-status.expired {
    background: var(--status-danger-bg);
    color: var(--danger);
}

.section-entity-status.never {
    background: var(--bg-card);
    color: var(--text-muted);
}

.section-entity-status.soon {
    background: var(--bg-card);
    color: var(--text-main);
}

.section-entity-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    padding: 12px;
    background: var(--bg-depth);
    border-radius: var(--radius);
}

.section-entity-meta-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.section-entity-meta-value {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.section-entity-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.section-entity-role-pill {
    padding: 3px 8px;
    background: var(--primary-dim);
    color: var(--primary);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.section-entity-empty-roles {
    font-size: 11px;
    color: var(--text-dim);
}

.section-entity-description {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 12px;
    padding: 10px;
    background: var(--bg-depth);
    border-radius: var(--radius);
    border-left: 3px solid var(--primary);
}

.section-action-menu {
    position: relative;
    margin-left: 16px;
}

.section-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 8px;
    color: var(--text-muted);
    border-radius: var(--radius);
    transition: all 0.2s;
}

.section-menu-trigger:hover {
    background: var(--bg-card);
    border-color: var(--primary);
    color: var(--primary);
}

.section-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px var(--glass-highlight-strong);
    min-width: 180px;
    z-index: 100;
    overflow: hidden;
}

.section-menu.is-open {
    display: block;
}

.section-menu-item {
    display: flex;
    width: 100%;
    padding: 10px 14px;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-main);
    transition: background 0.15s;
}

.section-menu-item:hover {
    background: var(--bg-depth);
}

.section-menu-item.danger {
    color: var(--danger);
}

.section-menu-item.danger:hover {
    background: var(--status-danger-bg);
}

.section-menu-divider {
    border-top: 1px solid var(--border);
    margin: 4px 0;
}

.section-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-backdrop);
    z-index: 999;
    justify-content: center;
    align-items: center;
}

.section-modal-overlay.is-open {
    display: flex;
}

.section-modal-overlay-top {
    z-index: 1000;
}

.section-modal-dialog {
    background: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    width: 480px;
    max-width: min(92vw, 520px);
}

.section-modal-dialog-lg {
    width: 500px;
}

.section-modal-dialog-xl {
    width: 550px;
}

.section-modal-title {
    margin: 0 0 20px;
}

.section-modal-head {
    text-align: center;
    margin-bottom: 20px;
}

.section-modal-head-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--status-success-bg);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.section-modal-head-title {
    margin: 0;
}

.section-modal-head-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.section-modal-block {
    margin-bottom: 16px;
}

.section-modal-note {
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.section-modal-note-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.section-modal-note-code {
    font-family: var(--font-main);
    font-size: 11px;
    color: var(--text-dim);
}

.section-modal-note-code div {
    line-height: 1.5;
}

.section-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.section-key-secret {
    background: var(--bg-depth);
    padding: 12px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border);
}

.section-key-secret code {
    font-family: var(--font-main);
    font-size: 13px;
    color: var(--primary);
    word-break: break-all;
}

.section-key-copy-btn {
    margin-left: 12px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.section-key-copy-btn.is-copied {
    background: var(--status-success-bg);
    color: var(--success);
}

.section-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--glass-highlight-strong);
    backdrop-filter: blur(4px);
    z-index: 999;
}

.section-panel-overlay.is-open {
    display: block;
}

.section-edit-panel {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 450px;
    max-width: 100%;
    height: 100%;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    z-index: 1000;
    box-shadow: -8px 0 30px var(--glass-highlight-strong);
    overflow-y: auto;
}

.section-edit-panel.is-open {
    display: block;
}

.section-edit-panel-body {
    padding: 24px;
}

.section-edit-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-edit-panel-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
}

.section-form-group {
    margin-bottom: 20px;
}

.section-form-group-lg {
    margin-bottom: 24px;
}

.section-form-label {
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-weight: 500;
}

.section-form-required {
    color: var(--danger);
}

.section-form-textarea {
    min-height: 80px;
    resize: vertical;
}

/* Unified control primitives (cross-section consistency baseline) */
.section-input,
.settings-input,
.form-control {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-sizing: border-box;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    line-height: 1.4;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.section-input:focus,
.settings-input:focus,
.form-control:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.section-input::placeholder,
.settings-input::placeholder,
.form-control::placeholder {
    color: var(--text-dim);
}

.section-input[disabled],
.settings-input[disabled],
.form-control[disabled] {
    opacity: 0.75;
    color: var(--text-muted);
}

input[type="file"].section-input,
input[type="file"].settings-input,
input[type="file"].form-control {
    padding: 6px 8px;
    cursor: pointer;
}

input[type="file"].section-input::file-selector-button,
input[type="file"].settings-input::file-selector-button,
input[type="file"].form-control::file-selector-button {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    padding: 4px 10px;
    margin-right: 12px;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease;
}

input[type="file"].section-input::file-selector-button:hover,
input[type="file"].settings-input::file-selector-button:hover,
input[type="file"].form-control::file-selector-button:hover {
    background: var(--glass-highlight);
    border-color: var(--border-strong);
}

.section-switch,
.switch {
    position: relative;
    width: 36px;
    height: 20px;
    display: inline-block;
}

.section-switch input,
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.section-switch-slider,
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--control-track-off, var(--bg-depth));
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.section-switch-slider::before,
.slider::before {
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    bottom: auto;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
    transition: transform 0.16s ease;
}

.section-switch input:checked + .section-switch-slider,
.section-switch input:checked + .slider,
.switch input:checked + .section-switch-slider,
.switch input:checked + .slider {
    border-color: var(--control-accent, var(--primary));
    background: var(--control-accent, var(--primary));
}

.httpsec-operator-frame .httpsec-builder {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-subtle, rgba(148, 163, 184, 0.08));
}

.httpsec-operator-frame .httpsec-builder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.httpsec-operator-frame .httpsec-builder-head strong {
    font-size: 13px;
    color: var(--text-main);
}

.httpsec-operator-frame .httpsec-builder-head span,
.httpsec-operator-frame .httpsec-builder-warning {
    font-size: 12px;
    color: var(--text-muted);
}

.httpsec-operator-frame .httpsec-builder-warning {
    color: var(--warning, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-header-builder-rows,
.httpsec-operator-frame .httpsec-csp-directives,
.httpsec-operator-frame .httpsec-permissions-grid {
    display: grid;
    gap: 8px;
}

.httpsec-operator-frame .httpsec-header-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.7fr) minmax(180px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.httpsec-operator-frame .httpsec-csp-row {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(180px, 1fr);
    gap: 8px 12px;
    align-items: center;
}

.httpsec-operator-frame .httpsec-csp-row .section-inline-form {
    grid-column: 2;
}

.httpsec-operator-frame .httpsec-csp-row label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

.httpsec-operator-frame .httpsec-permissions-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.httpsec-operator-frame .httpsec-payload-upload-stack .httpsec-response-summary-box {
    max-width: 360px;
}

@media (max-width: 720px) {
    .httpsec-operator-frame .httpsec-header-row,
    .httpsec-operator-frame .httpsec-csp-row {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-csp-row .section-inline-form {
        grid-column: auto;
    }
}

.section-switch input:checked + .switch-slider {
    border-color: var(--control-accent, var(--primary));
    background: var(--control-accent, var(--primary));
}

.section-switch input:checked + .section-switch-slider::before,
.section-switch input:checked + .slider::before,
.switch input:checked + .section-switch-slider::before,
.switch input:checked + .slider::before,
.section-switch input:checked + .switch-slider::before {
    transform: translateX(16px);
    background: #ffffff;
}

.section-switch.section-switch-module {
    width: 36px;
    height: 20px;
}

.section-switch.section-switch-module .section-switch-slider,
.section-switch.section-switch-module .switch-slider {
    inset: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--control-track-off, var(--bg-depth));
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.section-switch.section-switch-module .section-switch-slider::before,
.section-switch.section-switch-module .switch-slider::before {
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    bottom: auto;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
}

.section-switch.section-switch-module input:checked + .section-switch-slider,
.section-switch.section-switch-module input:checked + .switch-slider {
    border-color: var(--control-accent, var(--primary));
    background: var(--control-accent, var(--primary));
}

.section-switch.section-switch-module input:checked + .section-switch-slider::before,
.section-switch.section-switch-module input:checked + .switch-slider::before {
    transform: translateX(16px);
    background: #ffffff;
}

.section-switch-sm {
    transform: scale(0.84);
    transform-origin: left center;
}

.section-choice-card,
.section-choice-card.section-choice-card-compact,
.radio-card,
.mode-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-depth);
    color: var(--text-muted);
}

.section-choice-card.active,
.section-choice-card.is-active,
.radio-card.active,
.radio-card.is-active,
.mode-card.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-depth));
    color: var(--text-main);
}

.mode-card.active-block {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-depth));
    color: var(--danger);
}

.mode-card.active-allow {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, var(--bg-depth));
    color: var(--success);
}

.section-badge,
.section-status-badge,
.badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    border: 1px solid transparent;
}

.section-status-badge.status-success,
.status-badge.status-success,
.status-badge.enabled {
    color: var(--text-main);
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
}

.section-status-badge.status-warning,
.status-badge.status-warning {
    color: var(--text-main);
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
}

.section-status-badge.status-primary {
    color: var(--text-main);
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
}

.section-status-badge.status-danger,
.status-badge.status-danger,
.status-badge.disabled {
    color: var(--text-dim);
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
}

.section-status-badge.status-neutral,
.status-badge.status-neutral {
    color: var(--text-muted);
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
}

.section-form-hint {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 6px;
}

.section-form-actions {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.section-form-actions .btn {
    flex: 1;
}

.section-tag-input {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    align-items: center;
    min-height: 42px;
    transition: border-color 0.2s;
}

.section-tag-input:hover {
    border-color: var(--text-muted);
}

.section-tag-input:focus-within {
    border-color: var(--primary);
}

.section-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.section-tag-input-field {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    min-width: 120px;
    flex: 1;
    color: var(--text-main);
    padding: 4px;
}

.section-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary);
    border-radius: 4px;
    font-size: 12px;
}

.section-tag-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
    opacity: 0.8;
    display: inline-flex;
    align-items: center;
    padding: 0;
}

/* Shared card primitives for list/detail sections */
.section-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 16px;
}

.section-card {
    padding: 20px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.section-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px var(--glass-highlight-strong);
    border-color: var(--primary);
}

.section-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
}

.section-card-head-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.section-item-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--bg-depth);
}

.section-item-avatar.builtin {
    background: var(--primary-glow);
}

.section-item-avatar-text {
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.section-item-avatar.builtin .section-item-avatar-text {
    color: var(--primary);
}

.section-item-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-item-id {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-main);
    margin-top: 2px;
}

.section-item-badge {
    padding: 2px 8px;
    background: var(--primary-glow);
    color: var(--primary);
    border-radius: var(--radius-lg);
    font-size: 10px;
    font-weight: 600;
    border: 1px solid var(--primary-dim);
}

.section-item-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
    min-height: 18px;
    line-height: 1.4;
}

.section-empty-italic {
    color: var(--text-dim);
    font-style: italic;
}

.section-meta-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
}

.section-meta-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.section-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.section-meta-pill {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.section-meta-pill-outline {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-main);
}

.section-meta-pill-primary {
    background: var(--primary-glow);
    color: var(--primary);
    font-weight: 600;
}

.section-meta-pill-success {
    background: var(--status-success-bg);
    color: var(--success);
    font-weight: 600;
}

.section-meta-empty {
    font-size: 11px;
    color: var(--text-dim);
}

.section-card-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-policy-card {
    padding: 20px;
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 70%),
        var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.section-policy-card.allow {
    border-left-color: var(--success);
}

.section-policy-card.deny {
    border-left-color: var(--danger);
}

.section-policy-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.section-policy-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.section-policy-main {
    flex: 1;
}

.section-policy-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.section-policy-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-depth);
    color: var(--text-muted);
}

.section-policy-icon.allow {
    background: var(--status-success-bg);
    color: var(--success);
}

.section-policy-icon.deny {
    background: var(--status-danger-bg);
    color: var(--danger);
}

.section-policy-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-policy-priority {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-depth);
    color: var(--text-muted);
}

.section-policy-id {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-main);
    margin-top: 2px;
}

.section-policy-desc {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1.5;
}

.section-policy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px;
    background: color-mix(in srgb, var(--bg-depth) 82%, var(--bg-card));
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.section-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.section-mono-pill {
    padding: 4px 8px;
    background: var(--bg-card);
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--font-main);
    border: 1px solid var(--border);
    color: var(--text-main);
}

.section-accent-pill {
    background: var(--primary-glow);
    color: var(--primary);
    font-weight: 600;
    border: 1px solid var(--primary-dim);
    font-family: inherit;
}

.section-inline-row {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.section-inline-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    margin-top: 3px;
}

.section-inline-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.section-inline-pill {
    font-size: 11px;
    color: var(--text-main);
    padding: 3px 7px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-weight: 600;
}

.section-inline-more {
    font-size: 11px;
    color: var(--text-muted);
}

.section-panel-overlay-soft {
    background: var(--glass-highlight-strong);
    backdrop-filter: blur(2px);
}

.section-edit-panel-md {
    width: 500px;
}

.section-edit-panel-lg {
    width: 600px;
}

.section-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.section-panel-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
}

.section-panel-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.section-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.section-form-col {
    flex: 1;
}

.section-form-col-sm {
    width: 120px;
}

.section-form-hint-inline {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
}

.section-panel-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-depth);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.section-choice-grid {
    display: flex;
    gap: 12px;
}

.section-choice-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.section-choice-card input[type="radio"],
.section-choice-card input[type="checkbox"] {
    flex: 0 0 auto;
}

.section-choice-card.allow:hover {
    border-color: var(--success);
    background: var(--status-success-bg);
}

.section-choice-card.deny:hover {
    border-color: var(--danger);
    background: var(--status-danger-bg);
}

.section-choice-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
}

.section-choice-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.section-choice-grid-stack-compact {
    display: grid;
    gap: 10px;
}

.section-choice-grid-stack-compact .section-choice-card {
    align-items: flex-start;
    padding: 14px;
}

.section-choice-grid-stack-compact .section-radio-accent {
    margin-top: 2px;
}

.section-choice-grid-stack-compact .section-choice-title {
    line-height: 1.25;
}

.section-choice-grid-stack-compact .section-choice-sub {
    margin-top: 3px;
    line-height: 1.45;
}

.section-control-heading-spaced {
    display: block;
    margin-bottom: 20px !important;
}

.section-mode-grid.section-mode-grid-geo {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    justify-content: center;
    gap: 18px;
    width: 100%;
}

.geo-fencing-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.geo-fencing-state .section-geo-mode-card {
    min-height: 96px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    color: var(--text-main);
}

.geo-fencing-state .section-geo-mode-card svg {
    width: 18px;
    height: 18px;
}

.geo-fencing-state .section-geo-mode-card .section-geo-mode-title {
    display: block;
    line-height: 1.3;
    font-size: 13px;
    font-weight: 600;
}

.geo-fencing-state .section-geo-mode-card .section-geo-mode-sub {
    display: block;
    line-height: 1.35;
    font-size: 11px;
    color: var(--text-muted);
}

.geo-fencing-state .section-geo-mode-card.active.active-block {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-depth));
}

.geo-fencing-state .section-geo-mode-card.active.active-allow {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    background: color-mix(in srgb, var(--success) 10%, var(--bg-depth));
}

.geo-fencing-state .section-geo-mode-card.active .section-geo-mode-sub {
    color: var(--text-note);
}

.geo-fencing-state .section-note {
    max-width: 360px;
}

button.section-choice-card,
button.section-geo-mode-card {
    width: 100%;
    text-align: left;
    appearance: none;
}

.section-method-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.section-method-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    color: var(--text-main);
}

.section-method-item:hover {
    border-color: var(--primary);
}

.section-accent-primary {
    accent-color: var(--primary);
}

.section-accent-success {
    accent-color: var(--success);
}

.section-accent-danger {
    accent-color: var(--danger);
}

/* Access Control auth provider primitives (JWT/OIDC) */
.section-auth-hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.section-auth-hero-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-auth-hero-icon.success {
    background: var(--status-success-bg);
    color: var(--success);
}

.section-auth-hero-body {
    flex: 1;
}

.section-auth-hero-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-main);
}

.section-auth-hero-sub {
    font-size: 13px;
    color: var(--text-muted);
}

.section-auth-card {
    margin-bottom: 24px;
}

.section-auth-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.section-auth-card-head.no-divider {
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: 0;
}

.section-auth-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.section-empty-box {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}

.section-empty-box-sm {
    text-align: center;
    padding: 40px 20px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}

.section-empty-circle {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-empty-circle.success {
    background: var(--status-success-bg);
    color: var(--success);
}

.section-empty-circle.muted {
    background: var(--bg-card);
    color: var(--text-muted);
}

.section-empty-heading {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-main);
}

.section-empty-heading.muted {
    color: var(--text-muted);
}

.section-empty-subtext {
    font-size: 13px;
    color: var(--text-muted);
}

.section-empty-subtext.dim {
    color: var(--text-dim);
}

.section-btn-top {
    margin-top: 12px;
}

.section-disabled-box {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}

.section-disabled-box-sm {
    text-align: center;
    padding: 40px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}

.section-issuer-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-issuer-card {
    padding: 18px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.section-issuer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px var(--glass-highlight-strong);
    border-color: var(--success);
}

.section-issuer-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.section-issuer-main {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
}

.section-issuer-avatar {
    width: 40px;
    height: 40px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.section-issuer-avatar-text {
    font-weight: 700;
    font-size: 14px;
}

.section-issuer-name {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
}

.section-issuer-url {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-main);
    background: var(--bg-depth);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    overflow-wrap: anywhere;
}

.section-issuer-meta-row {
    margin-top: 12px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.section-issuer-meta-item {
    font-size: 11px;
    color: var(--text-dim);
}

.section-issuer-meta-item strong {
    color: var(--text-muted);
}

.section-issuer-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text-muted);
    border-radius: var(--radius);
    transition: all 0.2s;
    flex-shrink: 0;
}

.section-issuer-delete:hover {
    background: var(--status-danger-bg);
    color: var(--danger);
}

.section-check-chip-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.section-check-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
    padding: 6px 10px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s;
    color: var(--text-main);
}

.section-check-chip:hover {
    border-color: var(--primary);
}

.section-check-chip input {
    accent-color: var(--primary);
}

.section-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.section-provider-card {
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.section-provider-card.enabled {
    border-color: var(--primary);
}

.section-provider-card:hover {
    border-color: var(--primary);
}

.section-provider-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.section-provider-name-row {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.section-provider-avatar {
    width: 24px;
    height: 24px;
    background: var(--bg-depth);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    flex-shrink: 0;
}

.section-provider-remove {
    color: var(--danger);
    padding: 2px 8px;
    font-size: 11px;
}

.section-provider-line {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.section-provider-callback-wrap {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

.section-provider-callback-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.section-provider-callback-value {
    font-family: var(--font-main);
    font-size: 10px;
    background: var(--bg-depth);
    padding: 4px 6px;
    border-radius: 4px;
    word-break: break-all;
    user-select: all;
}

/* Access Control sessions and security primitives */
.section-session-header-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-session-status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.section-session-status.active {
    color: var(--success);
}

.section-session-status.inactive {
    color: var(--text-dim);
}

.section-session-card {
    margin-bottom: 24px;
}

.section-session-card-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.section-session-card-title.compact {
    margin-bottom: 2px;
}

.section-session-card-sub {
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--text-muted);
}

.section-session-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.section-session-stat-box {
    text-align: center;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
    border: 1px solid var(--border);
}

.section-session-stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-main);
}

.section-session-stat-value.primary {
    color: var(--primary);
}

.section-session-stat-value.warning {
    color: var(--warning);
}

.section-session-stat-value.success {
    color: var(--success);
}

.section-session-stat-value.muted {
    color: var(--text-muted);
}

.section-session-stat-label {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.section-session-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.section-session-list-sub {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.section-session-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-session-danger-btn {
    border-color: var(--status-danger-border);
    color: var(--danger);
}

.section-session-danger-btn:hover {
    background: var(--status-danger-bg);
    border-color: var(--danger);
}

.section-session-empty {
    text-align: center;
    padding: 40px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}

.section-session-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-session-empty-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-main);
}

.section-session-empty-sub {
    font-size: 13px;
    color: var(--text-muted);
}

.section-session-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-session-item {
    position: relative;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.section-session-item-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 10px 0 0 10px;
    background: var(--warning);
}

.section-session-item.recent .section-session-item-accent {
    background: var(--success);
}

.section-session-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.section-session-user-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.section-session-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-session-avatar-text {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.section-session-user-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.section-session-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.section-session-presence {
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.section-session-presence.recent {
    background: var(--status-success-bg);
    color: var(--success);
}

.section-session-presence.idle {
    background: var(--status-warning-bg);
    color: var(--warning);
}

.section-session-id {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-main);
    overflow-wrap: anywhere;
}

.section-session-terminate-btn {
    color: var(--danger);
    border-color: var(--status-danger-border);
}

.section-session-terminate-btn:hover {
    background: var(--status-danger-bg);
    border-color: var(--danger);
}

.section-session-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.section-session-meta-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.section-session-meta-value {
    font-size: 12px;
    color: var(--text-main);
}

.section-session-meta-value.mono {
    font-family: var(--font-main);
}

.section-session-meta-value.recent {
    color: var(--success);
    font-weight: 600;
}

.section-session-config-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.section-session-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.section-security-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}

.section-security-toggle:hover {
    border-color: var(--primary);
}

.section-security-toggle.enabled {
    border-color: var(--primary);
}

.section-security-toggle-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-security-toggle.enabled .section-security-toggle-icon {
    background: var(--primary-dim);
    border-color: var(--primary);
    color: var(--primary);
}

.section-security-toggle-body {
    flex: 1;
}

.section-security-toggle-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

.section-security-toggle-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.section-security-toggle-switch {
    flex-shrink: 0;
}

.section-session-disabled {
    text-align: center;
    padding: 56px 24px;
}

.section-session-disabled-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-session-disabled-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-main);
}

.section-session-disabled-sub {
    max-width: 560px;
    margin: 0 auto 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

@media (max-width: 1100px) {
    .section-session-stats-grid,
    .section-session-config-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .section-session-security-grid {
        grid-template-columns: 1fr;
    }

    .section-session-list-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-session-head-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 680px) {
    .section-session-stats-grid,
    .section-session-config-grid {
        grid-template-columns: 1fr;
    }

    .section-session-item-head {
        flex-direction: column;
    }
}

/* Access Control authentication settings primitives */
.section-hero-depth {
    background: var(--bg-depth);
}

.section-hero-icon-accent.secondary {
    background: rgba(6, 182, 212, 0.1);
    color: var(--secondary);
}

.section-authn-card {
    margin-bottom: 24px;
}

.section-authn-title {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.section-authn-hint {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 8px;
}

.section-authn-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.section-authn-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.section-authn-choice {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
    color: var(--text-main);
}

.section-authn-choice.allow.active {
    background: var(--status-success-bg);
    border-color: var(--success);
}

.section-authn-choice.deny.active {
    background: var(--status-danger-bg);
    border-color: var(--danger);
}

.section-authn-choice-label {
    font-weight: 600;
}

.section-authn-rbac-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    cursor: pointer;
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}

.section-authn-rbac-toggle.active {
    border-color: var(--primary);
}

.section-authn-rbac-content {
    margin-top: 1px;
}

.section-authn-rbac-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-main);
}

.section-authn-rbac-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.section-authn-mfa-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.section-authn-mfa-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    cursor: pointer;
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}

.section-authn-mfa-option.active {
    border-color: var(--primary);
}

.section-authn-mfa-title {
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-main);
}

.section-authn-mfa-sub {
    font-size: 10px;
    color: var(--text-muted);
}

.section-authn-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-main);
}

.section-authn-empty {
    text-align: center;
    padding: 30px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}

.section-authn-empty-text {
    font-size: 13px;
    color: var(--text-muted);
}

.section-authn-policy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.section-authn-field-label {
    display: block;
    font-size: 11px;
    margin-bottom: 4px;
    color: var(--text-muted);
}

.section-authn-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.section-authn-check-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-main);
}

.section-authn-lockout-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.section-authn-summary {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 12px;
}

.section-authn-choice input,
.section-authn-rbac-toggle input,
.section-authn-mfa-option input,
.section-authn-check-row input,
.section-authn-check-item input {
    accent-color: var(--primary);
}

.section-authn-choice .section-choice-sub {
    margin-top: 3px;
    line-height: 1.35;
}

@media (max-width: 980px) {
    .section-authn-grid {
        grid-template-columns: 1fr;
    }

    .section-authn-mfa-grid,
    .section-authn-policy-grid,
    .section-authn-check-grid,
    .section-authn-lockout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .section-authn-choice-grid,
    .section-authn-mfa-grid,
    .section-authn-policy-grid,
    .section-authn-check-grid,
    .section-authn-lockout-grid {
        grid-template-columns: 1fr;
    }
}

/* Access Control audit primitives */
.section-audit-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.section-audit-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.section-audit-sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.section-audit-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.section-audit-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.section-audit-stat-card {
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    text-align: center;
}

.section-audit-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.1;
}

.section-audit-stat-value.primary {
    color: var(--primary);
}

.section-audit-stat-value.success {
    color: var(--success);
}

.section-audit-stat-value.danger {
    color: var(--danger);
}

.section-audit-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.section-audit-filter-card {
    margin-bottom: 24px;
    padding: 16px;
}

.section-filter-row,
.section-audit-filter-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.section-audit-search {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.section-audit-select {
    padding: 8px 12px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 13px;
    outline: none;
}

.section-audit-select.full {
    width: 100%;
}

.section-audit-count {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: auto;
}

.section-audit-empty {
    text-align: center;
    padding: 60px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}

.section-audit-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: var(--bg-depth);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.section-audit-empty-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-main);
}

.section-audit-empty-sub {
    font-size: 13px;
    color: var(--text-muted);
}

.section-audit-log-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-audit-entry {
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
}

.section-audit-entry.success {
    border-left-color: var(--success);
}

.section-audit-entry.failure {
    border-left-color: var(--danger);
}

.section-audit-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.section-audit-entry-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.section-audit-entry-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: var(--bg-depth);
    flex-shrink: 0;
}

.section-audit-entry-icon.success {
    background: var(--status-success-bg);
    color: var(--success);
}

.section-audit-entry-icon.failure {
    background: var(--status-danger-bg);
    color: var(--danger);
}

.section-audit-entry-action {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
}

.section-audit-entry-route {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
    overflow-wrap: anywhere;
}

.section-audit-entry-time {
    text-align: right;
}

.section-audit-entry-time-main {
    font-size: 12px;
    color: var(--text-muted);
}

.section-audit-entry-time-sub {
    font-size: 10px;
    color: var(--text-dim);
}

.section-audit-entry-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.section-audit-meta-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.section-audit-meta-value {
    font-size: 12px;
    color: var(--text-main);
}

.section-audit-meta-value.strong {
    font-weight: 500;
}

.section-audit-meta-value.mono {
    font-family: var(--font-main);
}

.section-audit-status {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-depth);
}

.section-audit-status.success {
    background: var(--status-success-bg);
    color: var(--success);
}

.section-audit-status.failure {
    background: var(--status-danger-bg);
    color: var(--danger);
}

.section-audit-reason {
    margin-top: 8px;
    padding: 8px;
    background: var(--status-danger-bg);
    border-radius: var(--radius);
    font-size: 11px;
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-audit-limit-note {
    text-align: center;
    padding: 16px;
    color: var(--text-muted);
    font-size: 13px;
}

.section-audit-retention-card {
    margin-top: 24px;
}

.section-audit-retention-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.section-audit-storage {
    padding: 10px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-main);
}

@media (max-width: 980px) {
    .section-audit-stats-grid,
    .section-audit-retention-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .section-audit-head,
    .section-audit-entry-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-audit-entry-time,
    .section-audit-count {
        margin-left: 0;
        text-align: left;
    }

    .section-audit-search {
        max-width: none;
    }
}

@media (max-width: 680px) {
    .section-audit-stats-grid,
    .section-audit-retention-grid {
        grid-template-columns: 1fr;
    }

    .section-audit-empty {
        padding: 40px 20px;
    }
}

.section-save-actions,
.section-save-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.section-save-actions > .btn-primary,
.section-save-actions > .btn:last-child.btn-primary {
    margin-left: auto;
}

.section-save-actions > .btn:only-child {
    margin-left: auto;
}

.section-save-actions > .btn {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0;
    gap: 8px;
}

.section-save-actions > .btn svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.section-save-actions > .btn.btn-outline {
    background: var(--bg-panel);
}

.section-save-actions > .btn.btn-primary {
    min-width: 144px;
}

/* Shared selection card primitives */
.section-select-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.section-select-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.section-select-card:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.02);
}

.section-select-card.active {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
}

.section-select-icon {
    font-size: 24px;
    line-height: 1;
}

.section-select-info {
    flex: 1;
}

.section-select-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}

.section-select-code {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-main);
    margin-top: 2px;
}

.section-select-check {
    color: var(--primary);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s;
}

.section-select-card.active .section-select-check {
    opacity: 1;
    transform: scale(1);
}

.section-modal-geo {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 600px;
}

.section-modal-toolbar {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-depth);
}

.section-input-search {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 14px;
}

.section-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.section-modal-list-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.section-modal-blacklist-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    overflow-y: auto;
}

.section-modal-blacklist-form .section-form-group {
    margin-bottom: 0;
}

.section-modal-panel-md {
    width: 620px;
    max-width: min(620px, 92vw);
    max-height: 84vh;
}

.section-modal-panel-wide {
    width: 760px;
    max-width: min(760px, 94vw);
}

.section-modal-panel-md .section-modal-body {
    overflow-y: auto;
}

.section-modal-form {
    display: contents;
}

.section-modal-stack-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
}

.section-modal-stack-body .section-alert-success-soft,
.section-modal-stack-body .section-panel-soft,
.section-modal-stack-body .section-form-group {
    margin-bottom: 0;
}

.section-modal-stack-body .grid-2 {
    align-items: start;
}

.section-modal-stack-body .section-panel-soft {
    padding: 14px 16px;
}

.section-modal-rate-rule .section-form-group:last-child {
    padding-bottom: 2px;
}

.section-modal-blacklist-form #modal-ip-input,
.section-modal-panel-md #modal-vip-input {
    min-height: 96px;
    max-height: 160px;
    resize: vertical;
}

/* Traffic modal form primitives */
.section-form-group {
    margin-bottom: 16px;
}

.section-form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.section-radio-accent {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    flex: 0 0 auto;
}

.section-selection-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
}

.section-selection-list {
    flex: 1;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
}

.section-selection-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.section-selection-row.section-selection-row-region {
    background: rgba(var(--primary-rgb), 0.03);
}

.section-country-checkbox {
    width: auto;
    margin-right: 12px;
}

.section-range-primary {
    width: 100%;
    accent-color: var(--primary);
    margin-bottom: 20px;
    height: 6px;
    border-radius: 3px;
}

.section-range-warning {
    width: 100%;
    accent-color: var(--warning);
    margin-bottom: 12px;
}

.section-input-stack {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.section-input-stack .section-input-main {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 6px 0 0 6px;
    background: var(--bg-depth);
    font-weight: 600;
}

.section-input-stack .section-input-addon {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 0 12px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.section-input-stack .section-select-addon {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    background: var(--bg-card);
    cursor: pointer;
}

.section-input-stack .section-input-addon-tight {
    border-left: none;
    border-radius: 0 6px 6px 0;
}

.section-panel-soft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.section-panel-soft--stacked {
    display: block;
}

.section-panel-soft--stacked > .section-form-label {
    margin-bottom: 12px;
}

.section-glass-hero {
    padding: 20px 24px;
    margin-bottom: 32px;
    background: linear-gradient(135deg, var(--primary-glow) 0%, var(--primary-glow) 100%);
    border: 1px solid var(--primary-dim);
}

.section-vip-card {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.section-vip-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--success) 0%, var(--success) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-card);
    box-shadow: 0 2px 4px var(--status-success-border);
}

.section-alert-success-soft {
    padding: 12px;
    background: var(--status-success-bg);
    border: 1px solid var(--status-success-border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--success);
}

.section-alert-danger-soft {
    padding: 12px;
    background: var(--status-danger-bg);
    border: 1px solid var(--status-danger-border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--danger);
}

@media (max-width: 720px) {
    .section-select-grid {
        grid-template-columns: 1fr;
    }
}

/* Antibot overview and shared header primitives */

.section-overview-hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.section-overview-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-overview-hero.enabled .section-overview-hero-icon {
    background: var(--status-success-bg);
    color: var(--success);
}

.section-overview-hero.disabled .section-overview-hero-icon {
    background: var(--status-danger-bg);
    color: var(--danger);
}

.section-overview-hero-body {
    flex: 1;
}

.section-overview-hero-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-main);
}

.section-overview-hero-sub {
    font-size: 13px;
    color: var(--text-muted);
}

.section-overview-card {
    margin-bottom: 24px;
}

.section-overview-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.section-overview-sub {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--text-muted);
}

.section-overview-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.section-overview-stat {
    text-align: center;
    padding: 20px 16px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.section-overview-stat-value {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-main);
}

.section-overview-stat.success .section-overview-stat-value {
    color: var(--success);
}

.section-overview-stat.danger .section-overview-stat-value {
    color: var(--danger);
}

.section-overview-stat.warning .section-overview-stat-value {
    color: var(--warning);
}

.section-overview-stat.primary .section-overview-stat-value {
    color: var(--primary);
}

.section-overview-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.section-command-strip {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) minmax(220px, auto);
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.section-command-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.section-command-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, var(--bg-depth));
    border: 1px solid color-mix(in srgb, var(--success) 20%, transparent);
    flex: 0 0 auto;
}

.section-command-strip.disabled .section-command-icon {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-depth));
    border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}

.section-command-kicker {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
}

.section-command-title {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 750;
    line-height: 1.2;
}

.section-command-sub {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 3px;
}

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

.section-command-metrics,
.section-command-health {
    grid-column: 1 / -1;
}

.section-command-metrics.section-overview-stats-grid,
.section-command-metrics .section-overview-stats-grid,
.section-command-health .section-overview-stats-grid {
    gap: 10px;
}

.section-command-strip .section-overview-stat {
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    text-align: left;
}

.section-command-strip .section-overview-stat-value {
    font-size: 20px;
    margin-bottom: 3px;
}

.section-ops-overview-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
    gap: 18px;
}

.section-ops-overview-grid .section-col-stack {
    gap: 18px;
}

.section-profile-panel,
.section-tuning-panel {
    padding: 18px;
    border-radius: var(--radius-lg);
}

.section-current-profile {
    padding: 14px;
    border-radius: var(--radius-lg);
    background: transparent;
}

.section-current-profile .section-policy-icon {
    width: 40px;
    height: 40px;
}

.section-profile-card {
    background: var(--bg-depth);
    padding: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.section-profile-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-muted);
    color: var(--primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-current-profile .section-profile-icon {
    width: 40px;
    height: 40px;
}

.section-profile-main {
    flex: 1;
}

.section-profile-kicker {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 4px;
}

.section-profile-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-profile-badge {
    font-size: 10px;
    color: var(--bg-card);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.section-profile-badge-active {
    background: var(--success);
}

.section-profile-badge-manual {
    background: var(--bg-card-hover);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
}

.section-profile-desc {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
    line-height: 1.4;
}

.section-profile-library-grid {
    display: grid;
}

.section-profile-grid.section-profile-library-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.section-profile-lib-card {
    border: 1px solid var(--border);
    background: var(--bg-card);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    position: relative;
}

.section-profile-lib-card.active {
    border-color: var(--primary);
    box-shadow: none;
}

.section-profile-lib-active-badge {
    position: absolute;
    background: var(--primary);
    color: var(--bg-card);
    font-weight: 800;
    border-radius: 99px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}

.section-profile-lib-body {
    flex: 1;
}

.section-profile-lib-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.section-profile-lib-icon.success {
    background: color-mix(in srgb, var(--success) 10%, var(--bg-depth));
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 20%, transparent);
}

.section-profile-lib-icon.warning {
    background: color-mix(in srgb, var(--warning) 10%, var(--bg-depth));
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 20%, transparent);
}

.section-profile-lib-icon.danger {
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-depth));
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}

.section-profile-lib-name {
    color: var(--text-main);
    font-weight: 700;
}

.section-profile-lib-desc {
    color: var(--text-muted);
    font-weight: 500;
}

.section-profile-lib-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.section-profile-lib-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-depth);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    font-weight: 600;
    color: var(--text-muted);
}

.section-profile-lib-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.section-profile-lib-dot.success {
    background: var(--success);
}

.section-profile-lib-dot.warning {
    background: var(--warning);
}

.section-profile-lib-dot.danger {
    background: var(--danger);
}

.section-profile-lib-footer {
    background: var(--bg-depth);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.section-profile-lib-kind {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.section-profile-lib-action {
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-profile-lib-action.active {
    color: var(--primary);
}

.section-profile-tile {
    border-radius: var(--radius-lg);
    min-height: 150px;
}

.section-profile-tile .section-profile-lib-body {
    padding: 14px;
}

.section-profile-tile .section-profile-lib-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
}

.section-profile-tile .section-profile-lib-name {
    font-size: 13px;
    padding-right: 44px;
    margin-bottom: 5px;
}

.section-profile-tile .section-profile-lib-desc {
    font-size: 11px;
    line-height: 1.35;
    margin-bottom: 10px;
}

.section-profile-tile .section-profile-lib-chip {
    padding: 3px 7px;
    font-size: 10px;
}

.section-profile-tile .section-profile-lib-footer {
    padding: 10px 14px;
}

.section-profile-tile .section-profile-lib-kind,
.section-profile-tile .section-profile-lib-action {
    font-size: 10px;
}

.section-profile-tile .section-profile-lib-active-badge {
    top: 8px;
    right: 8px;
    padding: 3px 7px;
    font-size: 9px;
}

.section-mode-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.section-mode-card {
    display: block;
    padding: 12px 16px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.section-mode-card.readonly {
    cursor: default;
}

.section-mode-card.strict {
    --section-mode-color: var(--danger);
}

.section-mode-card.balanced {
    --section-mode-color: var(--primary);
}

.section-mode-card.permissive {
    --section-mode-color: var(--success);
}

.section-mode-card.custom {
    --section-mode-color: var(--warning);
}

.section-mode-card.active {
    border-color: var(--section-mode-color);
    background: var(--bg-elevated);
}

.section-mode-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.section-mode-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-mode-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-mode-card.active .section-mode-icon-wrap {
    background: var(--section-mode-color);
    color: var(--bg-card);
}

.section-mode-title {
    font-size: 13px;
    display: block;
    color: var(--text-main);
}

.section-mode-desc {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
}

.section-mode-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-mode-card.active .section-mode-indicator {
    border-color: var(--section-mode-color);
}

.section-mode-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--section-mode-color);
}

.section-stat-card.success {
    border-top: 3px solid var(--success);
}

.section-stat-card.danger {
    border-top: 3px solid var(--danger);
}

.section-stat-card.warning {
    border-top: 3px solid var(--warning);
}

.section-stat-card.primary {
    border-top: 3px solid var(--primary);
}

.section-stat-card.secondary {
    border-top: 3px solid var(--secondary);
}

.section-header {
    border-left: 4px solid var(--border);
}

.section-header.active {
    border-left-color: var(--primary);
}

.section-header-icon {
    padding: 12px;
    background: var(--bg-elevated);
    color: var(--text-muted);
}

.section-header-icon.active {
    background: var(--primary-glow);
    color: var(--primary);
}

.section-header-title {
    margin: 0;
}

.section-header-sub {
    margin-top: 4px;
}

.section-header-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-header-status {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-header-status.active {
    color: var(--success);
}

.section-header-status.inactive {
    color: var(--text-dim);
}

.section-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--bg-depth);
    border-radius: var(--radius);
}

.section-toggle-row-label {
    font-size: 13px;
    color: var(--text-main);
}

.section-detection-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.section-detection-card {
    height: 100%;
}

.section-detection-title {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.section-detection-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-threshold-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.section-threshold-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    align-items: center;
}

.section-threshold-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.section-threshold-value {
    font-size: 12px;
    font-family: var(--font-main);
}

.section-threshold-value.danger {
    color: var(--danger);
}

.section-threshold-value.warning {
    color: var(--warning);
}

.section-threshold-range {
    width: 100%;
    height: 6px;
    border-radius: 3px;
}

.section-threshold-range.danger {
    accent-color: var(--danger);
}

.section-threshold-range.warning {
    accent-color: var(--warning);
}

.section-threshold-zones {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.section-threshold-zones-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.section-threshold-zones-bar {
    position: relative;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-elevated);
}

.section-threshold-zone {
    position: absolute;
    top: 0;
    height: 100%;
}

.section-threshold-zone.allow {
    left: 0;
    width: calc(var(--challenge) * 1%);
    background: linear-gradient(90deg, var(--status-success-border), var(--success));
}

.section-threshold-zone.challenge {
    left: calc(var(--challenge) * 1%);
    width: calc((var(--block) - var(--challenge)) * 1%);
    background: linear-gradient(90deg, var(--status-warning-border), var(--warning));
}

.section-threshold-zone.block {
    left: calc(var(--block) * 1%);
    width: calc((100 - var(--block)) * 1%);
    background: linear-gradient(90deg, var(--status-danger-border), var(--danger));
}

.section-score-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
}

.section-score-marker.challenge {
    left: calc(var(--challenge) * 1%);
    background: var(--warning);
}

.section-score-marker.block {
    left: calc(var(--block) * 1%);
    background: var(--danger);
}

.section-threshold-zones-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 10px;
    color: var(--text-muted);
    gap: 8px;
    flex-wrap: wrap;
}

.section-threshold-zones-legend .allow {
    color: var(--success);
}

.section-threshold-zones-legend .challenge {
    color: var(--warning);
}

.section-threshold-zones-legend .block {
    color: var(--danger);
}

.section-fp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.section-fp-card {
    width: 100%;
    cursor: pointer;
    padding: 24px 20px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
}

.section-fp-card:focus-visible {
    outline: 2px solid var(--section-fp-color, var(--primary));
    outline-offset: 3px;
}

.section-fp-card.privacy {
    --section-fp-color: var(--success);
}

.section-fp-card.balanced {
    --section-fp-color: var(--primary);
}

.section-fp-card.maximum {
    --section-fp-color: var(--warning);
}

.section-fp-card.active {
    border-color: var(--section-fp-color);
    background: var(--bg-elevated);
}

.section-fp-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--section-fp-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-fp-icon-wrap {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.section-fp-card.active .section-fp-icon-wrap {
    background: var(--section-fp-color);
    color: var(--bg-card);
}

.section-fp-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}

.section-fp-card.active .section-fp-title {
    color: var(--text-main);
}

.section-fp-sub {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.4;
}

.section-fp-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.section-fp-signal {
    padding: 3px 8px;
    background: var(--bg-depth);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-dim);
}

.section-fp-cache-card {
    margin-bottom: 24px;
}

.section-fp-cache-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.section-fp-cache-label {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.section-fp-cache-input {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-main);
    width: 100px;
    font-size: 14px;
}

.section-fp-cache-help {
    font-size: 12px;
    color: var(--text-dim);
}

.section-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    background: var(--section-logo-bg, var(--bg-elevated));
    color: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    overflow: hidden;
}

.section-logo svg {
    width: 16px;
    height: 16px;
    display: block;
}

.section-logo-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
}

.section-rules-hero {
    background: linear-gradient(135deg, var(--bg-card), var(--bg-depth));
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--border);
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px -1px var(--glass-highlight-strong);
    gap: 16px;
}

.section-rules-hero-main {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.section-rules-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--primary-glow);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--primary-dim);
    flex-shrink: 0;
}

.section-rules-hero-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-main);
}

.section-rules-hero-sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    max-width: 500px;
    line-height: 1.4;
}

.section-rules-hero-btn {
    padding: 10px 20px;
    font-weight: 600;
    box-shadow: none;
}

.section-rules-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 16px;
}

.section-rules-hero-plus {
    font-size: 16px;
    margin-right: 6px;
}

.section-rules-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.section-rules-empty {
    text-align: center;
    padding: 60px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}

.section-rules-empty-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-depth);
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.section-rules-empty-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.section-rules-empty-sub {
    margin: 0 auto 24px;
    font-size: 13px;
    color: var(--text-muted);
    max-width: 300px;
}

.section-rule-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, background 0.15s ease;
    box-shadow: none;
}

.section-rule-row:hover {
    border-color: var(--primary-dim);
    background: var(--glass-highlight);
}

.section-rule-priority {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 36px;
    align-self: stretch;
    padding-right: 10px;
    border-right: 1px solid var(--border);
}

.section-rule-priority-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    color: var(--text-muted);
    cursor: pointer;
}

.section-rule-priority-btn:hover:not(:disabled) {
    color: var(--primary);
    background: var(--primary-glow);
    border-color: var(--primary-dim);
}

.section-rule-priority-btn.disabled {
    opacity: 0.22;
    pointer-events: none;
}

.section-rule-priority-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 20px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    font-family: var(--font-main);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.section-rule-info {
    flex: 1;
    min-width: 0;
}

.section-rule-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    min-width: 0;
}

.section-rule-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    color: var(--text-main);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-rule-disabled-pill {
    font-size: 10px;
    background: var(--bg-depth);
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

.section-rule-scope-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.section-rule-scope-pill.skip {
    background: var(--status-warning-bg);
    color: var(--warning, var(--warning));
    border: 1px solid var(--status-warning-border);
}

.section-rule-conditions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    overflow: hidden;
    min-width: 0;
}

.section-rule-condition-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: min(100%, 620px);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.section-rule-condition-icon {
    color: var(--text-dim);
    display: flex;
    align-items: center;
}

.section-rule-condition-field {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    opacity: 0.8;
}

.section-rule-condition-operator {
    color: var(--primary);
    font-weight: 700;
}

.section-rule-condition-value {
    color: var(--text-main);
    font-weight: 500;
    font-family: var(--font-main);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-rule-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
    min-width: max-content;
}

.section-rule-actions svg,
.section-rule-priority svg,
.section-rule-action-badge svg,
.section-rule-condition-icon svg,
.section-rule-scope-pill svg {
    display: block;
    flex: 0 0 auto;
}

.section-rule-actions .section-switch {
    width: 34px;
    height: 20px;
}

.section-rule-actions .section-switch-slider::before {
    width: 12px;
    height: 12px;
    left: 3px;
    bottom: 3px;
}

.section-rule-actions .section-switch input:checked + .section-switch-slider::before {
    transform: translateX(14px);
}

.section-rule-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 88px;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.section-rule-action-badge.block {
    background: var(--status-danger-bg);
    color: var(--danger);
    border-color: var(--status-danger-border);
}

.section-rule-action-badge.allow {
    background: var(--status-success-bg);
    color: var(--success);
    border-color: var(--status-success-border);
}

.section-rule-action-badge.challenge {
    background: var(--status-warning-bg);
    color: var(--warning);
    border-color: var(--status-warning-border);
}

.section-rule-action-badge.log {
    background: var(--primary-glow);
    color: var(--primary);
    border-color: var(--primary-dim);
}

.section-rule-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
}

.section-rule-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 9px;
    color: var(--text-muted);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.section-rule-action-btn:hover {
    color: var(--text-main);
    background: var(--glass-highlight);
    border-color: var(--border-strong);
}

.section-rule-delete-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.section-rule-delete-btn {
    margin-right: 0;
    opacity: 1;
}

.section-modal-overlay-soft {
    display: none;
    background: var(--overlay-backdrop);
    backdrop-filter: blur(2px);
    z-index: 999;
}

.section-modal-overlay-soft.open {
    display: flex;
    opacity: 1;
}

.section-modal-panel-compact {
    padding: 24px;
    width: 640px;
    max-width: 100%;
    overflow: visible;
    box-shadow: 0 20px 25px -5px var(--glass-highlight-strong), 0 10px 10px -5px var(--glass-highlight-strong);
}

.section-modal-head-plain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border-bottom: 0;
    margin-bottom: 20px;
}

.section-modal-title-lg {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
}

.section-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    padding: 0;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.section-modal-close:hover {
    background: var(--bg-interactive);
    color: var(--text-main);
}

.section-rule-form-group {
    margin-bottom: 20px;
}

.section-rule-form-group.action {
    margin-bottom: 24px;
}

.section-rule-form-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.section-rule-name-input {
    width: 100%;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-main);
    box-sizing: border-box;
}

.section-rule-condition-inputs {
    display: flex;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.section-rule-segment {
    border-right: 1px solid var(--border);
    min-width: 0;
}

.section-rule-segment:last-child {
    border-right: 0;
}

.section-rule-segment.field {
    flex: 1;
}

.section-rule-segment.key {
    width: 120px;
}

.section-rule-segment.operator {
    width: 130px;
}

.section-rule-segment.value {
    flex: 1.5;
}

.section-rule-select,
.section-rule-input {
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 13px;
    box-sizing: border-box;
}

.section-rule-select {
    cursor: pointer;
}

.section-rule-action-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.section-choice-card.section-choice-card-compact {
    appearance: none;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: var(--radius);
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s ease;
}

.section-choice-title.section-choice-title-compact {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.section-choice-card.section-choice-card-compact.danger.active {
    border-color: var(--danger);
    background: var(--bg-elevated);
}

.section-choice-card.section-choice-card-compact.warning.active {
    border-color: var(--warning);
    background: var(--bg-elevated);
}

.section-choice-card.section-choice-card-compact.success.active {
    border-color: var(--success);
    background: var(--bg-elevated);
}

.section-choice-card.section-choice-card-compact.secondary.active {
    border-color: var(--secondary);
    background: var(--bg-elevated);
}

.section-choice-card.section-choice-card-compact.danger.active .section-choice-title.section-choice-title-compact {
    color: var(--danger);
}

.section-choice-card.section-choice-card-compact.warning.active .section-choice-title.section-choice-title-compact {
    color: var(--warning);
}

.section-choice-card.section-choice-card-compact.success.active .section-choice-title.section-choice-title-compact {
    color: var(--success);
}

.section-choice-card.section-choice-card-compact.secondary.active .section-choice-title.section-choice-title-compact {
    color: var(--secondary);
}

.section-modal-actions-plain {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.section-classification-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 24px;
    background: linear-gradient(135deg, var(--bg-card), var(--bg-depth));
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px -1px var(--glass-highlight-strong);
}

.section-classification-hero-main {
    display: flex;
    align-items: center;
    gap: 20px;
}

.section-classification-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--primary-glow);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--primary-dim);
}

.section-classification-hero-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.section-classification-hero-sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    max-width: 500px;
    line-height: 1.4;
}

.section-classification-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    margin-top: 16px;
}

@media (max-width: 960px) {
    .section-classification-grid {
        grid-template-columns: 1fr;
    }
}

.section-class-verified-card,
.section-class-policy-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.section-class-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.section-class-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.section-class-sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.section-class-verified-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    flex: 1;
}

.section-class-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.section-class-preview-grid.dimmed {
    opacity: 0.5;
    pointer-events: none;
}

.section-class-preview-bot {
    padding: 6px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-main);
}

.section-class-preview-bot.disabled {
    opacity: 0.45;
    text-decoration: line-through;
}

.section-class-preview-more {
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.section-class-preview-more:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.section-class-manage-btn {
    width: 100%;
    justify-content: center;
}

.section-class-policy-list {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.section-class-policy-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 16px;
    flex: 1;
}

.section-class-policy-item.last {
    border-bottom: none;
}

.section-class-policy-item-main {
    flex: 1;
    min-width: 0;
}

.section-class-policy-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 2px;
}

.section-class-policy-item-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Good Bots Modal */
.section-modal-overlay-soft {
    background: var(--overlay-backdrop);
    z-index: 9999;
}

.section-goodbot-panel {
    width: min(720px, calc(100vw - 32px));
    max-height: 85vh;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.section-goodbot-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.section-goodbot-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.section-goodbot-close:hover {
    background: var(--bg-elevated);
    color: var(--text-main);
}

.section-goodbot-global-warning {
    padding: 10px 20px;
    background: var(--bg-elevated);
    color: var(--warning);
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}

.section-goodbot-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.section-goodbot-body.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.section-goodbot-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.section-goodbot-search {
    flex: 1;
    max-width: 320px;
}

.section-goodbot-toolbar-count {
    font-size: 12px;
    color: var(--text-muted);
}

.section-goodbot-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 13px;
}

.section-goodbot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
}

.section-goodbot-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.section-goodbot-card:hover {
    border-color: var(--border-strong, var(--border));
}

.section-goodbot-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.section-goodbot-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.section-goodbot-card.active .section-goodbot-icon {
    color: var(--text-main);
}

.section-goodbot-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-goodbot-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}

.section-radio-main {
    flex: 1;
}

.section-radio-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.section-radio-desc {
    font-size: 12px;
    color: var(--text-muted);
}

.section-ddos-layout > .flex {
    min-width: 0;
}

.section-honeypot-card {
    margin-bottom: 24px;
}

.section-honeypot-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.section-honeypot-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.section-honeypot-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.section-honeypot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.section-honeypot-trap-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}

.section-honeypot-trap-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.section-honeypot-trap-main {
    flex: 1;
    min-width: 0;
    margin-right: 8px;
}

.section-honeypot-trap-path {
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-honeypot-trap-strategy {
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-honeypot-trap-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
}

.section-honeypot-trap-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: capitalize;
}

.section-honeypot-trap-strategy.block .section-honeypot-trap-dot {
    background: var(--danger);
}

.section-honeypot-trap-strategy.poison .section-honeypot-trap-dot {
    background: var(--warning);
}

.section-honeypot-trap-strategy.tarpit .section-honeypot-trap-dot {
    background: var(--primary);
}

.section-honeypot-trap-strategy.signature .section-honeypot-trap-dot {
    background: var(--success);
}

.section-honeypot-delete-btn {
    color: var(--text-muted);
    opacity: 0.6;
    padding: 4px;
}

.section-honeypot-trap-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section-honeypot-trap-footer {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: auto;
}

.section-honeypot-trap-detail {
    font-size: 11px;
    color: var(--text-muted);
}

.section-honeypot-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-dim);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
}

.section-honeypot-retaliation-card {
    margin-bottom: 24px;
}

.section-honeypot-retaliation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.section-honeypot-retaliation-item {
    padding: 12px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--border);
}

.section-honeypot-retaliation-item strong {
    font-size: 13px;
}

.section-honeypot-retaliation-item p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.section-honeypot-retaliation-item.block {
    border-left-color: var(--danger);
}

.section-honeypot-retaliation-item.poison {
    border-left-color: var(--warning);
}

.section-honeypot-retaliation-item.tarpit {
    border-left-color: var(--primary);
}

.section-honeypot-retaliation-item.signature {
    border-left-color: var(--success);
}

.section-modal-overlay-soft {
    display: none;
    background: var(--overlay-backdrop);
    z-index: 999;
}

.section-modal-overlay-soft.open {
    display: flex;
    opacity: 1;
}

.section-modal-panel-standard {
    width: 600px;
    max-width: 100%;
    max-height: 90vh;
}

.section-modal-head-plain {
    display: block;
    padding: 20px;
    background: var(--bg-elevated);
}

.section-modal-title-lg {
    margin: 0;
    font-size: 18px;
}

.section-trap-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.section-trap-tabs {
    display: flex;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-depth);
}

.section-modal-tab-btn {
    background: none;
    border: none;
    padding: 12px 16px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.section-modal-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.section-modal-tab-btn:hover {
    color: var(--text-main);
}

.section-modal-body-scroll {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.section-modal-tab-content {
    display: none;
}

.section-modal-tab-content.is-active {
    display: block;
}

.section-trap-form-group {
    margin-bottom: 20px;
}

.section-trap-form-group.compact {
    margin-bottom: 16px;
}

.section-trap-form-group.no-margin {
    margin-bottom: 0;
}

.section-trap-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}

.section-trap-label.methods {
    margin-bottom: 8px;
}

.section-trap-required {
    color: var(--danger);
}

.section-trap-input,
.section-trap-select,
.section-trap-textarea,
.section-trap-inline-input {
    width: 100%;
    box-sizing: border-box;
}

.section-trap-input,
.section-trap-select,
.section-trap-textarea {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
    color: var(--text-main);
    padding: 8px 10px;
}

.section-trap-input-mono {
    font-family: var(--font-main);
}

.section-trap-textarea {
    font-size: 12px;
    resize: vertical;
}

.section-trap-help {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 6px;
}

.section-trap-help.strategy {
    min-height: 16px;
}

.section-trap-range-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    align-items: center;
}

.section-trap-label-inline {
    font-size: 12px;
    font-weight: 600;
}

.section-trap-range-value {
    font-size: 12px;
    font-weight: 600;
}

.section-trap-range {
    width: 100%;
}

.section-trap-range.grow {
    flex: 1;
}

.section-trap-custom-box {
    padding: 12px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.section-trap-advanced-note {
    padding: 12px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    margin-bottom: 20px;
}

.section-trap-note-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.section-trap-note-icon {
    color: var(--text-muted);
}

.section-trap-note-text {
    font-size: 12px;
    color: var(--text-muted);
}

.section-trap-advanced-title {
    font-size: 13px;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}

.section-trap-range-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.section-trap-prob-value {
    font-size: 12px;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

.section-trap-methods {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.section-trap-method-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
}

.section-trap-inline-field {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-trap-inline-main {
    flex: 1;
}

.section-trap-inline-input {
    width: 80px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
    color: var(--text-main);
    padding: 8px 10px;
}

.section-modal-footer-bar {
    padding: 16px 24px;
    background: var(--bg-elevated);
    gap: 12px;
}

.section-modal-overlay-soft {
    display: none;
    background: var(--overlay-backdrop);
    backdrop-filter: blur(4px);
    z-index: 9999;
}

.section-modal-overlay-soft.open {
    display: flex;
    opacity: 1;
}

.section-modal-panel-standard {
    border-radius: var(--radius-lg);
    width: 600px;
    max-width: 100%;
    max-height: 85vh;
    box-shadow: 0 25px 50px -12px var(--glass-highlight-strong);
}

.section-modal-head-block {
    display: block;
    padding: 24px 24px 16px;
    background: var(--bg-card);
    z-index: 10;
}

.section-modal-head-block-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 10px;
}

.section-modal-title-lg {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-modal-title-lg-icon {
    font-size: 20px;
}

.section-presets-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.section-presets-counter {
    text-align: right;
}

.section-presets-counter-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
}

.section-presets-counter-value span {
    font-size: 14px;
    color: var(--text-dim);
    font-weight: 500;
}

.section-presets-counter-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.section-presets-search-wrap {
    max-width: none;
}

.section-presets-search-icon {
    color: var(--text-dim);
}

.section-presets-search-input {
    font-size: 14px;
    padding-left: 36px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.section-presets-search-input:focus {
    border-color: var(--primary);
    box-shadow: none;
}

.section-presets-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-card);
}

.section-presets-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.section-preset-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: all 0.2s ease;
}

.section-preset-row:hover {
    border-color: var(--primary-dim);
}

.section-preset-row.is-active {
    background: var(--bg-depth);
    opacity: 0.7;
    cursor: default;
}

.section-preset-row.selected {
    border-color: var(--primary-dim);
    background: color-mix(in srgb, var(--primary) 7%, var(--bg-elevated));
}

.section-preset-check {
    display: none;
}

.section-preset-check-icon {
    padding-top: 2px;
    color: var(--text-dim);
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.section-preset-check-icon .icon-checked {
    display: none;
    color: var(--primary);
}

.section-preset-row.selected .section-preset-check-icon .icon-unchecked,
.section-preset-row.is-active .section-preset-check-icon .icon-unchecked {
    display: none;
}

.section-preset-row.selected .section-preset-check-icon .icon-checked,
.section-preset-row.is-active .section-preset-check-icon .icon-checked {
    display: block;
}

.section-preset-main {
    flex: 1;
    min-width: 0;
}

.section-preset-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 8px;
}

.section-preset-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.section-preset-path {
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-preset-new-badge {
    font-size: 9px;
    background: var(--primary);
    color: var(--bg-card);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
    flex-shrink: 0;
}

.section-preset-strategy-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 100px;
    flex-shrink: 0;
}

.section-preset-strategy-badge.block {
    color: var(--danger);
    background: var(--status-danger-bg);
}

.section-preset-strategy-badge.poison {
    color: var(--warning);
    background: var(--status-warning-bg);
}

.section-preset-strategy-badge.tarpit {
    color: var(--primary);
    background: var(--primary-glow);
}

.section-preset-strategy-badge.signature {
    color: var(--success);
    background: var(--status-success-bg);
}

.section-preset-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.section-presets-footer {
    padding: 16px 24px;
    background: var(--bg-elevated);
    justify-content: space-between;
    gap: 10px;
}

.section-presets-selectall-btn {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-presets-footer-actions {
    display: flex;
    gap: 12px;
}

.section-presets-cancel-btn {
    min-width: 100px;
    border-radius: var(--radius-lg);
}

.section-presets-deploy-btn {
    min-width: 140px;
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.section-ai-hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.section-ai-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--primary-glow);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-ai-hero-main {
    flex: 1;
}

.section-ai-hero-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.section-ai-hero-sub {
    font-size: 13px;
    color: var(--text-muted);
}

.section-ai-card-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
}

.section-ai-card-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.section-ai-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.section-ai-bot-card {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
}

.section-ai-bot-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.section-ai-bot-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-ai-bot-name {
    font-weight: 600;
    font-size: 13px;
}

.section-ai-bot-category {
    font-size: 10px;
    color: var(--text-dim);
}

.section-ai-toggle-group {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.section-ai-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 8px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.section-ai-toggle-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
}

.section-ai-toggle-btn.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-depth));
    color: var(--text-main);
}

.section-ai-toggle-btn.active.allow {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, var(--bg-depth));
    color: var(--success);
}

.section-ai-toggle-btn.active.challenge {
    border-color: var(--warning);
    background: color-mix(in srgb, var(--warning) 10%, var(--bg-depth));
    color: var(--warning);
}

.section-ai-toggle-btn.active.block {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-depth));
    color: var(--danger);
}

.section-card-accent-primary {
    border-left: 4px solid var(--primary);
}

.section-card-accent-info {
    border-left: 4px solid var(--info);
}

.section-card-accent-muted {
    border-left: 4px solid var(--border);
}

.section-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
}

.section-blacklist-row {
    transition: background-color 0.15s;
}

.section-hero-pattern {
    background: linear-gradient(to bottom right, var(--bg-card), color-mix(in srgb, var(--primary) 5%, transparent));
    border: 1px solid var(--border);
}

.section-icon-chip {
    padding: 10px;
    border-radius: var(--radius-lg);
    background: var(--primary-glow);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.section-code-tag {
    display: block;
    padding: 8px;
    background: var(--bg-depth);
    border-radius: var(--radius);
    font-size: 11px;
    border: 1px solid var(--border);
}

.section-glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.section-banner-primary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-left: 4px solid var(--primary);
}

.section-banner-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--primary-glow);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-banner-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.section-banner-sub {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.section-traffic-like-hero.section-rules-hero,
.section-traffic-like-hero.section-classification-hero,
.section-traffic-like-hero.section-ai-hero,
.section-traffic-like-hero.exc-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    background: linear-gradient(to bottom right, var(--bg-card), color-mix(in srgb, var(--primary) 5%, transparent));
    overflow: visible;
}

.section-traffic-like-hero .section-rules-hero-main,
.section-traffic-like-hero .section-classification-hero-main,
.section-traffic-like-hero .section-ai-hero-main,
.section-traffic-like-hero .exc-hero-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 0;
}

.section-traffic-like-hero .section-rules-hero-icon,
.section-traffic-like-hero .section-classification-hero-icon,
.section-traffic-like-hero .section-ai-hero-icon,
.section-traffic-like-hero .exc-hero-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: var(--radius-lg);
    border: 0;
    background: var(--primary-glow);
    color: var(--primary);
    box-shadow: none;
}

.section-traffic-like-hero .section-rules-hero-title,
.section-traffic-like-hero .section-classification-hero-title,
.section-traffic-like-hero .section-ai-hero-title,
.section-traffic-like-hero .exc-hero-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0;
}

.section-traffic-like-hero .section-rules-hero-sub,
.section-traffic-like-hero .section-classification-hero-sub,
.section-traffic-like-hero .section-ai-hero-sub,
.section-traffic-like-hero .exc-hero-sub {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.section-traffic-like-hero.exc-hero .exc-hero-divider {
    display: none;
}

.section-traffic-like-hero.exc-hero .exc-hero-stats {
    flex: 0 0 auto;
    border-top: 0;
}

.section-traffic-like-hero.exc-hero .exc-hero-stat {
    min-width: 74px;
    padding: 0 12px;
    border-right: 1px solid var(--border);
}

.section-traffic-like-hero.exc-hero .exc-hero-stat:last-child {
    border-right: 0;
}

.is-hidden {
    display: none !important;
}

@media (max-width: 980px) {
    .section-ai-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-overview-stats-grid,
    .section-mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-fp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .section-ai-grid {
        grid-template-columns: 1fr;
    }

    .section-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-overview-stats-grid,
    .section-mode-grid {
        grid-template-columns: 1fr;
    }

    .section-fp-grid {
        grid-template-columns: 1fr;
    }

    .section-rules-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-rules-hero-main {
        width: 100%;
    }

    .section-traffic-like-hero.section-rules-hero,
    .section-traffic-like-hero.section-classification-hero,
    .section-traffic-like-hero.section-ai-hero,
    .section-traffic-like-hero.exc-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-traffic-like-hero .section-rules-hero-btn,
    .section-traffic-like-hero.exc-hero .exc-hero-stats {
        width: 100%;
    }

    .section-traffic-like-hero.exc-hero .exc-hero-stats {
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
    }

    .section-traffic-like-hero.exc-hero .exc-hero-stat {
        flex: 1 1 96px;
        border-right: 0;
        border-top: 1px solid var(--border);
        padding-top: 10px;
    }

    .section-rule-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .section-rule-priority {
        flex-direction: row;
        justify-content: flex-start;
        align-self: auto;
        padding-right: 0;
        padding-bottom: 8px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .section-rule-actions {
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .section-rule-condition-inputs {
        flex-direction: column;
    }

    .section-rule-segment {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .section-rule-segment:last-child {
        border-bottom: 0;
    }

    .section-rule-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-classification-grid {
        grid-template-columns: 1fr;
    }

    .section-class-verified-head,
    .section-modal-head-plain {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-modal-head-plain-actions {
        width: 100%;
    }

    .section-goodbot-search {
        width: 100%;
    }

    .section-honeypot-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-honeypot-retaliation-grid {
        grid-template-columns: 1fr;
    }

    .section-modal-head-block-row,
    .section-presets-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-presets-footer-actions {
        width: 100%;
    }

    .section-presets-footer-actions .btn {
        flex: 1;
    }

    .section-preset-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =============================================================================
   DUAL THEME SECTION CONFIG NORMALIZATION
   This file loads last, so keep section/page-specific surfaces token-driven here.
   ============================================================================= */

.section-config-container,
.config-page,
.firewall-overview-shell,
.bot-config-shell,
.httpsecurity-config-shell,
.apisecurity-config-shell {
    background: var(--surface-base);
    color: var(--text-main);
}

:where(
    .config-page-hero,
    .section-hero-shell,
    .section-status-bar,
    .section-metric-card,
    .section-overview-stat,
    .firewall-threat-snapshot,
    .section-feature-card,
    .section-control-card,
    .section-card,
    .section-panel,
    .section-console-panel,
    .section-rules-hero,
    .section-rule-row,
    .section-rule-card,
    .section-profile-card,
    .section-preset-card,
    .section-goodbot-card,
    .section-honeypot-card,
    .section-modal,
    .section-modal-panel,
    .section-modal-content,
    .section-drawer,
    .section-drawer-panel,
    .section-dropdown,
    .section-popover,
    .toggle-card,
    .radio-card,
    .section-security-toggle,
    .section-authn-rbac-toggle,
    .section-policy-toggle,
    .route-security-toggle,
    .route-enabled-toggle
) {
    background: var(--surface-card) !important;
    border-color: var(--divider) !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-xs) !important;
}

:where(
    .config-page-hero,
    .section-hero-shell,
    .section-rules-hero
) {
    background: var(--hero-accent), var(--section-surface-gradient) !important;
}

:where(
    .section-feature-card:hover,
    .section-control-card:hover,
    .section-card:hover,
    .section-rule-row:hover,
    .section-profile-card:hover,
    .section-preset-card:hover,
    .section-goodbot-card:hover,
    .section-honeypot-card:hover,
    .toggle-card:hover,
    .radio-card:hover,
    .section-security-toggle:hover,
    .section-policy-toggle:hover,
    .route-security-toggle:hover,
    .route-enabled-toggle:hover,
    .section-modal-list-item:hover
) {
    background: var(--surface-card-hover) !important;
    border-color: var(--divider) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

:where(
    .section-tab-row,
    .section-console-nav,
    .section-rule-segment,
    .section-mode-grid,
    .section-profile-library-grid,
    .section-paranoia-grid,
    .section-goodbot-search,
    .section-modal-head,
    .section-modal-head-plain,
    .section-presets-footer,
    .section-footer,
    .section-toolbar,
    .section-filter-bar
) {
    background: var(--surface-panel) !important;
    border-color: var(--divider) !important;
    color: var(--text-main) !important;
}

:where(
    .section-tab-btn.active,
    .section-tab-btn.is-active,
    .section-tab-btn.btn-primary,
    .section-mode-option.active,
    .section-mode-option.is-active,
    .firewall-overview-shell .section-mode-option.is-active,
    .toggle-card.active,
    .toggle-card.is-active,
    .section-feature-card.is-active,
    .section-security-toggle.enabled,
    .section-authn-rbac-toggle.active,
    .section-policy-toggle.is-active,
    .section-policy-toggle:has(input:checked),
    .route-security-toggle:has(input:checked)
) {
    background: var(--surface-selected) !important;
    border-color: var(--status-primary-border) !important;
    color: var(--text-main) !important;
}

:where(
    .section-input,
    .section-select,
    .section-textarea,
    .section-rule-input,
    .section-rule-select,
    .section-rule-textarea,
    .section-search-input,
    .section-filter-input,
    .section-filter-select,
    .bot-overview-field .input-sm,
    .bot-overview-field .select-sm,
    .section-code,
    .section-code-editor,
    .section-expression-editor,
    .section-json-preview,
    .section-preview,
    .section-log-preview,
    .section-debug-panel,
    .section-fp-value,
    .section-rule-condition-inputs input,
    .section-rule-condition-inputs select,
    .section-rule-condition-inputs textarea
) {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-main) !important;
}

:where(
    .section-code,
    .section-code-editor,
    .section-expression-editor,
    .section-json-preview,
    .section-log-preview,
    .section-debug-panel,
    pre,
    code
) {
    background: var(--surface-code) !important;
    color: var(--surface-code-text) !important;
}

:where(
    .section-input::placeholder,
    .section-textarea::placeholder,
    .section-rule-input::placeholder,
    .section-rule-textarea::placeholder,
    .section-search-input::placeholder
) {
    color: var(--input-placeholder) !important;
}

:where(
    .section-table,
    .section-data-table,
    .section-rule-table,
    .section-events-table,
    .section-breakdown-table
) {
    background: var(--surface-card) !important;
    color: var(--text-main) !important;
    border-color: var(--divider) !important;
}

:where(
    .section-table th,
    .section-data-table th,
    .section-rule-table th,
    .section-events-table th,
    .section-breakdown-table th
) {
    background: var(--table-header-bg) !important;
    color: var(--text-secondary) !important;
    border-color: var(--divider) !important;
}

:where(
    .section-table td,
    .section-data-table td,
    .section-rule-table td,
    .section-events-table td,
    .section-breakdown-table td
) {
    border-color: var(--divider-muted) !important;
}

:where(
    .section-table tbody tr:hover,
    .section-data-table tbody tr:hover,
    .section-rule-table tbody tr:hover,
    .section-events-table tbody tr:hover,
    .section-breakdown-table tbody tr:hover
) {
    background: var(--table-row-hover) !important;
}

:where(
    .section-modal-backdrop,
    .section-overlay,
    .section-drawer-backdrop,
    .section-presets-overlay
) {
    background: var(--overlay-backdrop) !important;
}

:where(
    .section-toast,
    .section-alert,
    .section-banner,
    .section-empty-state,
    .section-error-state,
    .dashboard-empty-state
) {
    background: var(--surface-card) !important;
    border-color: var(--divider) !important;
    color: var(--text-main) !important;
}

:where(.tone-success, .section-status-success, .section-pill-success, .section-badge-success) {
    background: var(--status-success-bg) !important;
    border-color: var(--status-success-border) !important;
    color: var(--success) !important;
}

:where(.tone-danger, .section-status-danger, .section-pill-danger, .section-badge-danger) {
    background: var(--status-danger-bg) !important;
    border-color: var(--status-danger-border) !important;
    color: var(--danger) !important;
}

:where(.tone-warning, .section-status-warning, .section-pill-warning, .section-badge-warning) {
    background: var(--status-warning-bg) !important;
    border-color: var(--status-warning-border) !important;
    color: var(--warning) !important;
}

:where(.tone-info, .section-status-info, .section-pill-info, .section-badge-info) {
    background: var(--status-info-bg) !important;
    border-color: var(--status-info-border) !important;
    color: var(--info) !important;
}

:where(.tone-primary, .section-status-primary, .section-pill-primary, .section-badge-primary) {
    background: var(--status-primary-bg) !important;
    border-color: var(--status-primary-border) !important;
    color: var(--primary) !important;
}

:where(
    .section-switch-slider,
    .section-switch .slider,
    .toggle-slider,
    .section-policy-toggle-switch,
    .section-security-toggle-switch
) {
    background: var(--switch-track-off) !important;
    border-color: var(--switch-border-off) !important;
}

:where(
    .section-switch input:checked + .section-switch-slider,
    .section-switch input:checked + .slider,
    .switch input:checked + .section-switch-slider,
    .toggle-switch input:checked + .toggle-slider
) {
    background: var(--switch-track-on) !important;
    border-color: var(--switch-border-on) !important;
}

:where(
    .section-switch input:checked + .section-switch-slider::before,
    .section-switch input:checked + .slider::before,
    .switch input:checked + .section-switch-slider::before,
    .toggle-switch input:checked + .toggle-slider::before
) {
    background: var(--switch-thumb-on) !important;
}

.section-managed-status-cell .section-switch-slider {
    background: var(--switch-track-off);
    border-color: var(--switch-border-off);
}

.section-managed-status-cell .section-switch-slider::before {
    background: var(--switch-thumb-off);
}

.section-managed-status-cell .section-switch input:checked + .section-switch-slider {
    background: var(--switch-track-on) !important;
    border-color: var(--switch-border-on) !important;
}

.section-managed-status-cell .section-switch input:checked + .section-switch-slider::before {
    background: var(--switch-thumb-on) !important;
}

.section-excl-modal-dialog {
    width: 620px;
    max-width: min(620px, 92vw);
    max-height: 84vh;
}

.section-excl-modal-dialog .section-modal-head {
    padding: 18px 22px;
}

.section-excl-modal-dialog .section-excl-modal-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px 22px;
    overflow-y: auto;
}

.section-excl-modal-dialog .section-excl-field {
    margin-bottom: 0;
}

.section-excl-modal-dialog .section-excl-field.tight,
.section-excl-modal-dialog .section-excl-enabled-wrap {
    grid-column: 1 / -1;
}

.section-excl-modal-dialog .section-excl-enabled-wrap {
    margin-top: 0;
    padding: 10px 12px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    background: var(--surface-inset);
}

.section-excl-modal-dialog .section-excl-enabled-row {
    justify-content: flex-start;
}

.section-excl-modal-dialog .section-excl-enabled-row input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
}

.section-excl-modal-dialog .section-excl-enabled-text {
    color: var(--text-main);
}

.section-excl-modal-dialog .section-excl-modal-footer {
    padding: 14px 22px;
    background: var(--surface-panel);
}

.section-crs-viewer-dialog {
    width: min(1100px, calc(100vw - 72px)) !important;
    max-width: calc(100vw - 72px) !important;
    height: min(860px, calc(100vh - 72px)) !important;
    max-height: calc(100vh - 72px) !important;
    padding: 0 !important;
}

.section-crs-viewer-dialog .section-modal-header {
    padding: 20px 24px;
}

.section-crs-viewer-dialog .section-modal-textarea {
    padding: 24px 28px;
    font-size: 13px;
    line-height: 1.65;
}

.section-crs-viewer-dialog .section-modal-footer {
    padding: 14px 24px;
}

@media (max-width: 720px) {
    .section-excl-modal-dialog .section-excl-modal-body {
        grid-template-columns: 1fr;
    }
}

.firewall-overview-shell {
    gap: 16px;
    background: transparent;
}

.firewall-overview-shell .bot-analytics-head {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.firewall-overview-shell .security-rule-eyebrow {
    color: var(--primary);
}

.firewall-overview-shell .bot-analytics-head h3 {
    margin: 2px 0 6px;
    padding-bottom: 0;
    border-bottom: 0;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 750;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
}

.firewall-overview-shell .section-overview-sub {
    margin-bottom: 0;
    color: var(--text-muted);
}

.firewall-overview-shell .bot-overview-settings,
.firewall-overview-shell .firewall-threat-snapshot {
    border: 1px solid var(--divider);
    background: var(--surface-card) !important;
    color: var(--text-main);
    box-shadow: var(--shadow-xs);
}

.firewall-overview-shell .bot-overview-settings-grid {
    align-items: stretch;
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-settings-grid,
.firewall-overview-shell .firewall-threat-snapshot .bot-overview-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-setting-card,
.firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-card {
    display: flex;
    min-height: 172px;
    flex-direction: column;
    gap: 14px;
    justify-content: flex-start !important;
    padding: 16px;
    border: 1px solid var(--divider) !important;
    border-radius: var(--radius);
    background: var(--surface-card) !important;
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-setting-card {
    min-height: 214px;
}

.firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-card {
    min-height: 0;
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-setting-label,
.firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-label {
    margin: -16px -16px 2px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--divider);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-setting-value,
.firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-value {
    margin-top: 0;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.35;
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-setting-sub,
.firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-sub {
    max-width: 52ch;
    margin-top: -4px;
    line-height: 1.55;
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-field-grid {
    margin-top: auto;
}

.firewall-overview-shell .edge-firewall-controls .section-mode-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 86px;
    align-content: center;
    gap: 6px;
    overflow: hidden;
    border-color: var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option::before {
    content: none;
    display: none;
    background: transparent;
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option:hover {
    border-color: var(--waf-mode-accent, var(--status-primary-border));
    background: var(--surface-card);
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option.tone-muted {
    --waf-mode-accent: var(--text-muted);
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option.tone-primary {
    --waf-mode-accent: var(--primary);
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option.tone-danger {
    --waf-mode-accent: var(--danger);
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option.is-active {
    border-width: 2px;
    border-color: var(--waf-mode-accent);
    background: var(--input-bg);
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option.is-active::before {
    content: none;
    display: none;
}

.firewall-overview-shell .edge-firewall-controls .section-mode-icon {
    margin-bottom: 0;
    color: var(--waf-mode-accent, var(--text-muted));
}

.firewall-overview-shell .edge-firewall-controls .section-mode-title {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
}

.firewall-overview-shell .edge-firewall-controls .section-mode-subtitle {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option.is-active .section-mode-title {
    color: var(--text-main);
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option.is-active .section-mode-icon {
    color: var(--waf-mode-accent);
}

.edge-choice-row,
.edge-level-grid {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.edge-choice-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.edge-profile-select-wrap {
    position: relative;
    margin-top: auto;
}

.edge-profile-select-wrap::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    pointer-events: none;
    transform: translateY(-65%) rotate(45deg);
}

.edge-profile-select {
    width: 100%;
    min-height: 58px;
    padding: 0 48px 0 18px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    appearance: none;
    background: var(--input-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    line-height: 58px;
    outline: none;
    cursor: pointer;
}

.edge-profile-select:hover {
    border-color: var(--status-primary-border);
}

.edge-profile-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.edge-level-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.edge-level-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.edge-level-orb {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--waf-level-border);
    border-radius: 999px;
    background: transparent;
    color: var(--waf-level-fg) !important;
    font-size: 14px !important;
    font-weight: 850;
    line-height: 1;
}

.edge-level-standard {
    --waf-level-border: rgba(59, 130, 246, 0.42);
    --waf-level-fg: var(--control-accent);
}

.edge-level-balanced {
    --waf-level-border: rgba(34, 197, 94, 0.42);
    --waf-level-fg: #4ade80;
}

.edge-level-strict {
    --waf-level-border: rgba(var(--brand-orange-rgb), 0.48);
    --waf-level-fg: var(--brand-orange);
}

.edge-level-paranoid {
    --waf-level-border: rgba(239, 68, 68, 0.5);
    --waf-level-fg: #f87171;
}

.edge-choice-btn.is-active,
.edge-level-btn.is-active {
    border-color: var(--waf-level-border, var(--status-primary-border));
    border-width: 2px;
    background: var(--input-bg);
    color: var(--text-main);
}

.edge-level-btn.is-active .edge-level-orb {
    border-color: var(--waf-level-border);
    box-shadow: none;
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option.is-active {
    border-width: 2px !important;
    border-color: var(--waf-mode-accent) !important;
    background: var(--input-bg) !important;
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option.is-active .section-mode-icon {
    color: var(--waf-mode-accent) !important;
}

.firewall-overview-shell .edge-firewall-controls .edge-level-btn.is-active {
    border-width: 2px !important;
    border-color: var(--waf-level-border) !important;
    background: var(--input-bg) !important;
}

.edge-paranoia-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(var(--brand-orange-rgb), 0.36);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-main);
}

.edge-paranoia-warning div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.edge-paranoia-warning strong {
    color: var(--brand-orange);
    font-size: 12px;
    font-weight: 800;
}

.edge-paranoia-warning span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.edge-paranoia-warning button {
    min-height: 30px;
    flex: 0 0 auto;
    padding: 0 10px;
    border: 1px solid rgba(var(--brand-orange-rgb), 0.4);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--brand-orange);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.edge-paranoia-warning button:hover {
    border-color: rgba(var(--brand-orange-rgb), 0.7);
    color: var(--text-main);
}

.edge-paranoia-warning.is-critical {
    border-color: rgba(239, 68, 68, 0.42);
    background: var(--input-bg);
}

.edge-paranoia-warning.is-critical strong {
    color: #f87171;
}

.edge-paranoia-warning.is-critical button {
    border-color: rgba(239, 68, 68, 0.44);
    color: #f87171;
}

.edge-paranoia-warning.is-critical button:hover {
    border-color: rgba(239, 68, 68, 0.72);
    color: var(--text-main);
}

.edge-threshold-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-main);
}

.edge-threshold-toggle span:first-child {
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-threshold-toggle strong {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.edge-threshold-toggle:hover {
    border-color: var(--status-primary-border);
    color: var(--text-main);
}

.edge-empty-compact {
    display: grid;
    gap: 6px;
    align-content: center;
    min-height: 94px;
    padding: 18px;
    border: 1px dashed var(--divider);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    text-align: center;
}

.edge-empty-compact strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
}

.edge-empty-compact span {
    color: var(--text-muted);
    font-size: 12px;
}

.edge-rules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
}

.edge-rule-link {
    display: grid;
    min-height: 74px;
    align-content: center;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.edge-rule-link strong {
    color: var(--text-main);
    font-size: 18px;
    line-height: 1;
}

.edge-rule-link span {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
}

.edge-rule-link:hover {
    border-color: var(--status-primary-border);
    color: var(--text-main);
}

.edge-rule-link:focus-visible {
    border-color: var(--primary);
    border-width: 2px;
    outline: none;
}

.firewall-overview-shell .edge-firewall-controls .section-advanced-box {
    margin-top: 12px;
    padding-top: 12px;
}

.edge-threshold-range {
    width: 100%;
    margin-top: 10px;
    accent-color: var(--primary);
}

.firewall-overview-shell .edge-firewall-controls .flex-row {
    margin-top: auto;
}

.firewall-overview-shell .bot-overview-setting-card,
.firewall-overview-shell .section-overview-stat {
    background: var(--surface-card) !important;
    border-color: var(--divider) !important;
}

.firewall-overview-shell .bot-overview-setting-label,
.firewall-overview-shell .section-overview-stat-label,
.firewall-overview-shell .bot-overview-field,
.firewall-overview-shell .bot-overview-setting-sub,
.firewall-overview-shell .bot-aggregate-row span {
    color: var(--text-muted);
}

.firewall-overview-shell .bot-overview-setting-value,
.firewall-overview-shell .bot-aggregate-row strong,
.firewall-overview-shell .section-mode-title {
    color: var(--text-main);
}

.firewall-overview-shell .bot-overview-mode {
    background: var(--surface-panel) !important;
    border-color: var(--input-border) !important;
    color: var(--text-secondary) !important;
}

.firewall-overview-shell .bot-overview-mode.blocking {
    border-color: var(--status-danger-border) !important;
    color: var(--danger) !important;
}

.firewall-overview-shell .bot-overview-mode.detection {
    border-color: var(--status-warning-border) !important;
    color: var(--warning) !important;
}

.firewall-overview-shell .bot-overview-mode.off {
    color: var(--text-muted) !important;
}

.firewall-overview-shell .section-mode-option {
    min-width: 0;
}

.firewall-overview-shell .section-mode-option.is-active .section-mode-icon {
    color: var(--primary);
}

.firewall-overview-shell .section-advanced-box {
    border-top-color: var(--divider-muted);
}

.firewall-overview-shell .section-threshold-row {
    background: var(--input-bg);
    border-color: var(--input-border);
}

.firewall-overview-shell .section-threshold-suffix,
.firewall-overview-shell .section-threshold-help {
    color: var(--text-muted);
}

.firewall-overview-shell .btn.btn-outline {
    color: var(--text-main);
}

@media (max-width: 760px) {
    .firewall-overview-shell .bot-analytics-head {
        padding: 0;
    }

    .firewall-overview-shell .bot-analytics-head > .flex-row {
        width: 100%;
        justify-content: flex-start;
    }
}

[data-theme="light"] :where(
    .config-page-hero,
    .section-hero-shell,
    .section-rules-hero,
    .section-firewall-hero
) {
    box-shadow: var(--shadow-sm) !important;
}

[data-theme="light"] :where(
    [class*="input"],
    [class*="select"],
    [class*="textarea"],
    [class*="search"],
    [class*="editor"],
    [class*="preview"],
    [class*="code"]
):not(
    [class*="icon"],
    [class*="btn"],
    [class*="badge"],
    [class*="pill"],
    .challenge-operator-preview,
    .challenge-operator-preview *,
    .challenge-runtime-preview,
    .challenge-runtime-preview *
) {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-main) !important;
}

[data-theme="light"] :where(
    [class*="overlay"],
    [class*="backdrop"]
) {
    background: var(--overlay-backdrop) !important;
}

[data-theme="light"] :where(
    [class*="table"] th,
    [class*="table-head"],
    [class*="table-header"]
) {
    background: var(--table-header-bg) !important;
    color: var(--text-secondary) !important;
}

[data-theme="light"] .config-page-hero,
[data-theme="light"] .section-hero-shell,
[data-theme="light"] .section-rules-hero {
    background:
        linear-gradient(90deg, var(--primary-glow), var(--primary-glow) 36%),
        linear-gradient(135deg, var(--bg-card) 0%, #fbfdff 58%, #f1f6ff 100%) !important;
    border-color: #d8e2ef !important;
    box-shadow: 0 1px 2px var(--glass-highlight-strong), 0 10px 24px var(--glass-highlight-strong) !important;
}

[data-theme="light"] :where(
    .section-status-bar,
    .section-control-card,
    .section-card,
    .section-panel,
    .section-console-panel,
    .section-rule-row,
    .section-rule-card,
    .section-feature-card,
    .section-profile-card,
    .section-preset-card,
    .section-goodbot-card,
    .section-honeypot-card,
    .section-policy-toggle,
    .section-security-toggle,
    .route-security-toggle,
    .route-enabled-toggle
) {
    background: var(--bg-card) !important;
    border-color: #dfe6ef !important;
    box-shadow: 0 1px 2px var(--glass-highlight-strong) !important;
}

[data-theme="light"] :where(
    .section-metric-card,
    .section-mode-option,
    .toggle-card,
    .radio-card
) {
    background: #fbfcff !important;
    border-color: #dfe6ef !important;
}

[data-theme="light"] :where(
    .section-feature-card:hover,
    .section-control-card:hover,
    .section-card:hover,
    .section-rule-row:hover,
    .section-policy-toggle:hover,
    .section-security-toggle:hover
) {
    background: #f9fbff !important;
    border-color: #cdd8e7 !important;
}

[data-theme="light"] :where(
    .section-tab-row,
    .section-toolbar,
    .section-filter-bar,
    .section-modal-head,
    .section-modal-head-plain,
    .section-presets-footer
) {
    background: var(--bg-card) !important;
    border-color: #dfe6ef !important;
    box-shadow: 0 1px 2px var(--glass-highlight-strong) !important;
}

[data-theme="light"] :where(
    .section-tab-btn.active,
    .section-tab-btn.is-active,
    .section-tab-btn.btn-primary,
    .section-mode-option.active,
    .section-mode-option.is-active,
    .toggle-card.active,
    .toggle-card.is-active,
    .section-policy-toggle.is-active,
    .section-policy-toggle:has(input:checked)
) {
    background: var(--control-accent-soft) !important;
    border-color: var(--primary) !important;
    color: var(--control-accent-hover) !important;
}

/* ============================================================
   FINAL LIGHT MODE POLISH — appended last for max specificity
   ============================================================ */

/* 1. Page container — grey canvas, not white */
[data-theme="light"] .section-config-container {
    background: #f4f6f8 !important;
}

/* 2. Section hero banner — white card with blue left accent on grey canvas */
[data-theme="light"] .config-page-hero,
[data-theme="light"] .section-rules-hero {
    background: #ffffff !important;
    border: 1px solid #e2e5ea !important;
    border-left: 3px solid var(--control-accent) !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07) !important;
}

/* Hero kicker — blue accent colour */
[data-theme="light"] .config-page-hero-kicker {
    color: var(--control-accent) !important;
}

/* 3. Section-hero-shell (inline hero inside a section page) */
[data-theme="light"] .section-hero-shell {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. Tab bar track — grey pill, not white (matches Linear/Vercel) */
[data-theme="light"] .section-tab-row {
    background: #f1f3f5 !important;
    border: 1px solid #eaecf0 !important;
    box-shadow: inset 0 1px 2px rgba(16,24,40,0.04) !important;
}

/* Active tab — white pill floating on grey track */
[data-theme="light"] .section-tab-btn.active,
[data-theme="light"] .section-tab-btn.is-active,
[data-theme="light"] .section-tab-btn.btn-primary {
    background: #ffffff !important;
    border: 1px solid #eaecf0 !important;
    color: var(--control-accent) !important;
    box-shadow: 0 1px 3px rgba(16,24,40,0.10) !important;
    border-radius: 6px !important;
}

/* Inactive tab hover */
[data-theme="light"] .section-tab-btn:hover:not(.active):not(.is-active):not(.btn-primary) {
    background: rgba(0,0,0,0.04) !important;
    color: #374151 !important;
}

/* 5. Metric cards — white on grey canvas */
[data-theme="light"] .section-metric-card,
[data-theme="light"] .section-mode-option,
[data-theme="light"] .toggle-card,
[data-theme="light"] .radio-card {
    background: #ffffff !important;
    border-color: #e2e5ea !important;
    box-shadow: 0 1px 2px rgba(16,24,40,0.05) !important;
}

/* 6. Feature/status cards — white + visible shadow on grey */
[data-theme="light"] .section-status-bar,
[data-theme="light"] .section-control-card,
[data-theme="light"] .section-card,
[data-theme="light"] .section-panel,
[data-theme="light"] .section-feature-card,
[data-theme="light"] .section-preset-card {
    background: #ffffff !important;
    border-color: #e2e5ea !important;
    box-shadow: 0 1px 2px rgba(16,24,40,0.06) !important;
}

[data-theme="light"] .section-feature-card:hover,
[data-theme="light"] .section-control-card:hover,
[data-theme="light"] .section-card:hover {
    background: #fafbfc !important;
    border-color: #c8cdd8 !important;
    box-shadow: 0 4px 8px rgba(16,24,40,0.09) !important;
}

/* 7. Toolbar / filter bars — white with bottom border, not heavy box */
[data-theme="light"] .section-tab-row,
[data-theme="light"] .section-toolbar,
[data-theme="light"] .section-filter-bar {
    border-color: #eaecf0 !important;
}

[data-theme="light"] .section-toolbar,
[data-theme="light"] .section-filter-bar {
    background: #ffffff !important;
    box-shadow: none !important;
}

/* 8. Section rule rows */
[data-theme="light"] .section-rule-row {
    background: #ffffff !important;
    border-color: #eaecf0 !important;
}

[data-theme="light"] .section-rule-row:hover {
    background: #f8f9fa !important;
    border-color: #d0d5dd !important;
}

.section-ai-card .section-ai-bot-card {
    border-radius: var(--radius) !important;
}

.section-ai-card .section-ai-toggle-btn {
    border-radius: var(--radius) !important;
    background: var(--bg-depth) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

.section-ai-card .section-ai-toggle-btn:hover {
    background: var(--glass-highlight) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-main) !important;
}

.section-ai-card .section-ai-toggle-btn.active.allow {
    background: color-mix(in srgb, var(--success) 12%, var(--bg-depth)) !important;
    border-color: color-mix(in srgb, var(--success) 70%, var(--border)) !important;
    color: var(--success) !important;
}

.section-ai-card .section-ai-toggle-btn.active.challenge {
    background: color-mix(in srgb, var(--warning) 14%, var(--bg-depth)) !important;
    border-color: color-mix(in srgb, var(--warning) 75%, var(--border)) !important;
    color: var(--warning) !important;
}

.section-ai-card .section-ai-toggle-btn.active.block {
    background: color-mix(in srgb, var(--danger) 13%, var(--bg-depth)) !important;
    border-color: color-mix(in srgb, var(--danger) 75%, var(--border)) !important;
    color: var(--danger) !important;
}

.section-ai-card .section-ai-toggle-btn.active .section-ai-toggle-dot {
    opacity: 1;
}

.exc-hero-summary {
    margin-bottom: 14px;
}

.exc-table-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.exc-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.exc-table th {
    padding: 10px 12px;
    color: var(--text-muted);
    background: var(--bg-depth);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

.exc-table th:nth-child(1) { width: 25%; }
.exc-table th:nth-child(2) { width: 72px; }
.exc-table th:nth-child(3) { width: 28%; }
.exc-table th:nth-child(4) { width: 28%; }
.exc-table th:nth-child(5) { width: 92px; }

.exc-table-row {
    border-bottom: 1px solid var(--border);
}

.exc-table-row:last-child {
    border-bottom: 0;
}

.exc-table-row:hover {
    background: var(--glass-highlight);
}

.exc-table-cell {
    padding: 10px 12px;
    vertical-align: top;
}

.exc-type-wrap {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.exc-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
}

.exc-card-icon svg,
.exc-tag-remove svg,
.exc-empty-row svg,
.exc-apply-btn svg,
.exc-table-note svg {
    display: block;
}

.exc-icon-success { color: var(--success); }
.exc-icon-primary { color: var(--primary); }
.exc-icon-warning { color: var(--warning); }
.exc-icon-secondary { color: var(--text-muted); }
.exc-icon-danger { color: var(--danger); }

.exc-card-title {
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
}

.exc-card-subtitle {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.exc-table-count {
    text-align: center;
}

.exc-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 40px;
    height: 26px;
    padding: 0 8px;
    color: var(--text-muted);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.exc-count-pill--active {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
    background: color-mix(in srgb, var(--success) 9%, var(--bg-depth));
}

.exc-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 74px;
    overflow: hidden;
}

.exc-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    min-width: 0;
    height: 24px;
    padding: 0 6px;
    color: var(--text-main);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
}

.exc-tag-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exc-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

.exc-tag-remove:hover {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.exc-tag-overflow {
    color: var(--text-muted);
}

.exc-empty-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    min-height: 26px;
}

.exc-textarea {
    width: 100%;
    min-height: 74px;
    resize: vertical;
    padding: 8px 10px;
    color: var(--text-main);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-main);
    font-size: 12px;
    line-height: 1.45;
}

.exc-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.exc-input-hint {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.3;
}

.exc-table-action {
    text-align: right;
}

.exc-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    border-radius: var(--radius);
}

.exc-table-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: var(--text-muted);
    background: var(--bg-depth);
    border-top: 1px solid var(--border);
    font-size: 12px;
}

@media (max-width: 1100px) {
    .exc-table,
    .exc-table thead,
    .exc-table tbody,
    .exc-table tr,
    .exc-table th,
    .exc-table td {
        display: block;
    }

    .exc-table thead {
        display: none;
    }

    .exc-table-row {
        padding: 12px;
    }

    .exc-table-cell {
        padding: 8px 0;
    }

    .exc-table-count,
    .exc-table-action {
        text-align: left;
    }
}

.exc-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-depth);
    border-bottom: 1px solid var(--border);
}

.exc-table-toolbar-title {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.exc-table-toolbar-title span {
    color: var(--text-main);
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
}

.exc-table-toolbar-title strong {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.exc-add-btn,
.exc-modal-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--radius);
}

.exc-table th:nth-child(1) { width: 54px; }
.exc-table th:nth-child(2) { width: 190px; }
.exc-table th:nth-child(3) { width: auto; }
.exc-table th:nth-child(4) { width: 84px; }
.exc-table th:nth-child(5) { width: auto; }

.exc-th-index,
.exc-table-index {
    text-align: center;
}

.exc-row-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 800;
}

.exc-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 30px;
    padding: 5px 9px;
    color: var(--text-main);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.exc-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.exc-type-icon svg {
    display: block;
}

.exc-type-success,
.exc-hint-type.exc-type-success {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 34%, var(--border));
    background: color-mix(in srgb, var(--success) 8%, var(--bg-depth));
}

.exc-type-primary,
.exc-hint-type.exc-type-primary {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-depth));
}

.exc-type-warning,
.exc-hint-type.exc-type-warning {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    background: color-mix(in srgb, var(--warning) 9%, var(--bg-depth));
}

.exc-type-secondary,
.exc-hint-type.exc-type-secondary {
    color: var(--text-muted);
    border-color: var(--border);
    background: var(--bg-depth);
}

.exc-type-danger,
.exc-hint-type.exc-type-danger {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
    background: color-mix(in srgb, var(--danger) 8%, var(--bg-depth));
}

.exc-value-code {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 30px;
    padding: 7px 9px;
    overflow: hidden;
    color: var(--text-main);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-family: var(--font-main);
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--text-muted);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.exc-icon-btn svg {
    display: block;
}

.exc-danger-btn:hover {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-depth));
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.exc-empty-table-row td {
    padding: 22px 16px;
}

.exc-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    text-align: left;
}

.exc-empty-state strong,
.exc-empty-state span {
    display: block;
}

.exc-empty-state strong {
    color: var(--text-main);
    font-size: 13px;
    margin-bottom: 2px;
}

.exc-empty-state span {
    font-size: 12px;
}

.exc-modal-panel {
    width: min(560px, calc(100vw - 28px));
    border-radius: var(--radius);
}

.exc-modal-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.exc-modal-header h3 {
    margin: 2px 0 0;
    color: var(--text-main);
    font-size: 18px;
    line-height: 1.2;
}

.exc-modal-body {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.exc-modal-body .form-group {
    display: grid;
    gap: 7px;
    margin: 0;
}

.exc-modal-body .form-group span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.exc-type-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.exc-type-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    color: var(--text-muted);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.exc-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.exc-type-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.exc-type-option-icon svg {
    display: block;
}

.exc-type-option:hover {
    color: var(--text-main);
    border-color: var(--border-strong);
    background: var(--glass-highlight);
}

.exc-type-option:has(input:checked) {
    color: var(--text-main);
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-depth));
    box-shadow: inset 3px 0 0 var(--primary);
}

.exc-modal-actions {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
    .exc-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .exc-add-btn {
        justify-content: center;
        width: 100%;
    }

    .exc-table-row {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 38px;
        gap: 8px;
    }

    .exc-table-index {
        grid-row: 1 / 3;
    }

    .exc-table-type {
        grid-column: 2;
    }

    .exc-table-values {
        grid-column: 2;
    }

    .exc-table-action {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        text-align: right;
    }

    .exc-type-options {
        grid-template-columns: 1fr;
    }
}

.section-goodbot-panel .section-goodbot-card {
    background: var(--operator-surface, var(--surface-card)) !important;
    border-color: var(--operator-line-soft, var(--divider-muted)) !important;
    box-shadow: none !important;
}

.section-goodbot-panel .section-goodbot-card:hover {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, var(--surface-card))) !important;
    border-color: var(--operator-line, var(--divider)) !important;
}

.section-goodbot-panel .section-goodbot-card.active {
    background: var(--operator-surface, var(--surface-card)) !important;
    border-color: var(--operator-line-soft, var(--divider-muted)) !important;
}

.section-goodbot-panel .section-goodbot-head,
.section-goodbot-panel .section-goodbot-body,
.section-goodbot-panel .section-goodbot-footer {
    background: var(--operator-surface, var(--surface-card)) !important;
}

@media (max-width: 760px) {
    .section-goodbot-head {
        grid-template-columns: minmax(0, 1fr) 34px;
    }

    .section-goodbot-head-stats {
        grid-column: 1 / -1;
        justify-content: flex-start;
        order: 3;
    }

    .section-goodbot-grid {
        grid-template-columns: 1fr;
    }
}

/* Current-only WAF auxiliary tabs retained on top of the zipped WAF UI. */
.section-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.section-config-grid .section-config-panel {
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.bot-overview-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bot-overview-field {
    display: grid;
    gap: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.bot-overview-field input,
.bot-overview-field select,
.bot-overview-field textarea {
    width: 100%;
}

.leak-console {
    display: grid;
    gap: 16px;
}

.aux-console {
    display: grid;
    gap: 16px;
}

.leak-command {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: 8px;
}

.leak-command-ops,
.aux-command {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
        var(--bg-card);
}

.aux-command {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.aux-command-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.aux-command h3 {
    margin: 0;
    color: var(--text-main);
    letter-spacing: 0;
}

.aux-command p {
    margin: 5px 0 0;
    color: var(--text-muted);
    line-height: 1.45;
}

.leak-command-main,
.leak-command-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.leak-command-main {
    min-width: 0;
}

.leak-command-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--primary);
    background: var(--bg-depth);
    flex: 0 0 auto;
}

.leak-kicker {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.leak-command h3,
.leak-pack-card h4 {
    margin: 0;
    color: var(--text-main);
    letter-spacing: 0;
}

.leak-command p,
.leak-pack-card p {
    margin: 5px 0 0;
    color: var(--text-muted);
    line-height: 1.45;
}

.leak-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.leak-status-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    gap: 10px;
}

.aux-status-strip {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.leak-status-tile {
    display: grid;
    gap: 5px;
    min-width: 0;
    min-height: 88px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-depth);
}

.leak-status-tile span,
.leak-status-tile small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.leak-status-tile span {
    font-weight: 750;
    text-transform: uppercase;
}

.leak-status-tile strong {
    overflow-wrap: anywhere;
    color: var(--text-main);
    font-size: 16px;
    line-height: 1.2;
}

.leak-status-tile.tone-success {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
}

.leak-status-tile.tone-warning {
    border-color: color-mix(in srgb, var(--warning) 46%, var(--border));
}

.leak-status-tile.tone-danger {
    border-color: color-mix(in srgb, var(--danger) 46%, var(--border));
}

.leak-rollout-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(180px, 0.8fr);
    gap: 10px;
}

.leak-rollout-step,
.leak-rollout-note {
    display: flex;
    gap: 10px;
    min-width: 0;
    min-height: 76px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
}

.leak-rollout-step.is-done {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
}

.leak-rollout-index {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 750;
}

.leak-rollout-step.is-done .leak-rollout-index {
    border-color: var(--success);
    color: var(--success);
}

.leak-rollout-step strong,
.leak-rollout-note strong {
    display: block;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.25;
}

.leak-rollout-step span,
.leak-rollout-note span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.leak-rollout-note {
    display: block;
}

.leak-rollout-note.tone-warning {
    border-color: color-mix(in srgb, var(--warning) 48%, var(--border));
}

.leak-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
    gap: 16px;
    align-items: start;
}

.leak-main-column,
.leak-side-column {
    display: grid;
    gap: 16px;
}

.section-config-grid .section-config-panel.leak-panel,
.leak-panel {
    border-radius: 8px;
}

.leak-pack-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.leak-pack-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-depth);
}

.leak-pack-matrix .leak-pack-card {
    grid-template-rows: auto minmax(42px, auto) auto auto;
}

.leak-pack-head,
.leak-pack-meta,
.leak-brief-list > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.leak-pack-head span,
.leak-pack-meta span,
.leak-brief-list span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.leak-pack-meta strong {
    flex: 0 0 auto;
}

.leak-pack-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.leak-pack-categories span {
    max-width: 100%;
    padding: 4px 7px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.leak-brief-list {
    display: grid;
    gap: 10px;
}

.leak-brief-list > div {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.leak-brief-list > div:last-child {
    border-bottom: 0;
}

.leak-brief-list strong {
    color: var(--text-main);
}

.leak-next-step {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-depth);
}

.leak-noise-grid {
    display: grid;
    gap: 10px;
}

.leak-noise-grid > div {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-depth);
}

.leak-noise-grid span,
.leak-noise-grid small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.leak-noise-grid span {
    font-weight: 750;
    text-transform: uppercase;
}

.leak-noise-grid strong {
    color: var(--text-main);
    font-size: 15px;
    overflow-wrap: anywhere;
}

.leak-sim-warnings {
    display: grid;
    gap: 8px;
}

.leak-sim-warning {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-depth);
}

.leak-sim-warning.tone-warning {
    border-color: color-mix(in srgb, var(--warning) 48%, var(--border));
}

.leak-sim-warning.tone-info {
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
}

.leak-sim-warning strong {
    color: var(--text-main);
    font-size: 13px;
}

.leak-sim-warning span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.aux-config-grid .section-config-panel,
.aux-panel {
    border-radius: 8px;
}

@media (max-width: 960px) {
    .section-config-grid,
    .bot-overview-field-grid,
    .leak-workspace,
    .leak-pack-grid,
    .leak-summary-grid,
    .leak-status-strip,
    .leak-rollout-rail {
        grid-template-columns: 1fr;
    }

    .leak-command,
    .aux-command-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* WAF Core light-mode tuning. White mode is the primary target for this console. */
[data-theme="light"] .edge-console-shell {
    --waf-light-canvas: #edf3f8;
    --waf-light-panel: #ffffff;
    --waf-light-panel-soft: #f8fafc;
    --waf-light-border: #cfd9e6;
    --waf-light-border-soft: #dde5ef;
    --waf-light-text: #0f172a;
    --waf-light-muted: #526173;
    --waf-light-dim: #758195;
    --waf-light-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 28px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .edge-config-stage {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

[data-theme="light"] .edge-config-stage .config-console-header {
    border-bottom-color: var(--waf-light-border-soft) !important;
}

[data-theme="light"] .edge-config-stage .config-console-title,
[data-theme="light"] .edge-config-stage .config-section-nav-item.is-active {
    color: var(--waf-light-text) !important;
}

[data-theme="light"] .edge-config-stage .config-console-category,
[data-theme="light"] .edge-config-stage .config-console-meta,
[data-theme="light"] .edge-config-stage .config-section-nav-item {
    color: var(--waf-light-muted) !important;
}

[data-theme="light"] .edge-config-stage .config-section-nav {
    border-bottom-color: var(--waf-light-border-soft) !important;
}

[data-theme="light"] .edge-config-stage .config-section-nav-item:hover {
    color: var(--waf-light-text) !important;
}

[data-theme="light"] .firewall-overview-shell {
    gap: 24px;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stats-grid {
    gap: 16px;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat {
    min-height: 96px;
    border: 1px solid var(--waf-light-border) !important;
    background: var(--waf-light-panel) !important;
    box-shadow: var(--waf-light-shadow) !important;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat-value {
    color: var(--control-accent) !important;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat.success .section-overview-stat-value {
    color: #16a34a !important;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat.warning .section-overview-stat-value {
    color: var(--brand-orange) !important;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat.danger .section-overview-stat-value {
    color: #dc2626 !important;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat-label {
    color: var(--waf-light-muted) !important;
}

[data-theme="light"] .firewall-overview-shell .bot-overview-settings,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot {
    border: 1px solid var(--waf-light-border) !important;
    background: var(--waf-light-panel) !important;
    box-shadow: var(--waf-light-shadow) !important;
}

[data-theme="light"] .firewall-overview-shell .bot-overview-settings-head h4 {
    color: var(--waf-light-text) !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .bot-overview-setting-card,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-card {
    border-color: var(--waf-light-border) !important;
    background: var(--waf-light-panel) !important;
    box-shadow: none !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .bot-overview-setting-label,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-label {
    border-bottom-color: var(--waf-light-border-soft) !important;
    background: var(--waf-light-panel-soft) !important;
    color: var(--waf-light-text) !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .bot-overview-setting-value,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-value,
[data-theme="light"] .firewall-overview-shell .bot-aggregate-row strong,
[data-theme="light"] .firewall-overview-shell .section-mode-title {
    color: var(--waf-light-text) !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .bot-overview-setting-sub,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-sub,
[data-theme="light"] .firewall-overview-shell .bot-aggregate-row span,
[data-theme="light"] .firewall-overview-shell .section-mode-subtitle {
    color: var(--waf-light-muted) !important;
}

[data-theme="light"] .firewall-overview-shell .bot-aggregate-row {
    border-bottom-color: var(--waf-light-border-soft) !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.tone-muted {
    --waf-mode-accent: #64748b;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.tone-primary {
    --waf-mode-accent: var(--control-accent);
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.tone-danger {
    --waf-mode-accent: #dc2626;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.is-active {
    border-color: var(--waf-mode-accent) !important;
    background: #ffffff !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-icon {
    color: var(--waf-mode-accent, #64748b) !important;
}

[data-theme="light"] .firewall-overview-shell .edge-level-standard {
    --waf-level-border: var(--control-accent);
    --waf-level-fg: var(--control-accent);
}

[data-theme="light"] .firewall-overview-shell .edge-level-balanced {
    --waf-level-border: #16a34a;
    --waf-level-fg: #16a34a;
}

[data-theme="light"] .firewall-overview-shell .edge-level-strict {
    --waf-level-border: var(--brand-orange);
    --waf-level-fg: var(--brand-orange);
}

[data-theme="light"] .firewall-overview-shell .edge-level-paranoid {
    --waf-level-border: #dc2626;
    --waf-level-fg: #dc2626;
}

[data-theme="light"] .firewall-overview-shell .edge-level-btn.is-active {
    border-color: var(--waf-level-border) !important;
    background: #ffffff !important;
}

[data-theme="light"] .firewall-overview-shell .edge-level-orb {
    border-color: var(--waf-level-border) !important;
    color: var(--waf-level-fg) !important;
}

[data-theme="light"] .firewall-overview-shell .edge-paranoia-warning {
    background: rgba(var(--brand-orange-rgb), 0.06) !important;
    border-color: var(--brand-orange) !important;
}

[data-theme="light"] .firewall-overview-shell .edge-paranoia-warning.is-critical {
    background: #fff5f5 !important;
    border-color: #ef4444 !important;
}

[data-theme="light"] .firewall-overview-shell .edge-empty-compact {
    border-color: #c9d6e5 !important;
    background: #fbfdff !important;
}

[data-theme="light"] .firewall-overview-shell .edge-empty-compact strong {
    color: var(--waf-light-text) !important;
}

[data-theme="light"] .firewall-overview-shell .edge-empty-compact span,
[data-theme="light"] .firewall-overview-shell .edge-threshold-toggle strong,
[data-theme="light"] .firewall-overview-shell .section-threshold-help,
[data-theme="light"] .firewall-overview-shell .section-threshold-suffix {
    color: var(--waf-light-muted) !important;
}


.bot-overview-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.bot-overview-setting-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-main);
    text-align: left;
    box-shadow: var(--shadow-xs);
}

button.bot-overview-setting-card {
    width: 100%;
    font: inherit;
    cursor: pointer;
}

button.bot-overview-setting-card:hover,
.bot-overview-setting-card.is-active,
.bot-overview-setting-card.active {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--divider));
    background: var(--surface-panel);
}

.bot-overview-setting-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bot-overview-setting-value {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 750;
    line-height: 1.2;
}

.bot-overview-setting-sub {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.bot-overview-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.bot-overview-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.bot-operator-overview {
    display: grid;
    gap: 0;
}

.bot-operator-overview .operator-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.bot-operator-overview .operator-section + .operator-section {
    margin-top: 0;
}

.bot-operator-control-grid,
.bot-operator-expert-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bot-operator-expert-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bot-operator-control-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.bot-operator-control-card .httpsec-mode-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.bot-operator-control-card .httpsec-mode-card {
    --bot-choice-accent: var(--operator-orange, var(--brand-orange));
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 4px 10px;
    min-width: 0;
    min-height: 84px;
    padding: 13px 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
    white-space: normal;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.bot-operator-control-card .httpsec-mode-card:hover {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 52%, var(--operator-surface, #ffffff));
}

.bot-operator-control-card .httpsec-mode-card.is-active {
    border-color: var(--bot-choice-accent);
    background: var(--operator-surface, #ffffff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bot-choice-accent) 58%, transparent);
}

.bot-operator-control-card .httpsec-mode-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--bot-choice-accent) 72%, #ffffff);
    outline-offset: 2px;
}

.bot-operator-control-card .httpsec-mode-card .httpsec-choice-check {
    grid-column: 2;
    grid-row: 1 / 3;
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 999px;
    color: transparent;
    font-size: 11px;
    line-height: 1;
}

.bot-operator-control-card .httpsec-mode-card.is-active .httpsec-choice-check {
    border-color: var(--bot-choice-accent);
    background: var(--bot-choice-accent);
    color: #ffffff;
}

.bot-operator-control-card .httpsec-mode-card strong,
.bot-operator-control-card .httpsec-mode-card small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.bot-operator-control-card .httpsec-mode-card strong {
    grid-column: 1;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 740;
    line-height: 1.25;
}

.bot-operator-control-card .httpsec-mode-card small {
    grid-column: 1;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.botdefense-operator-frame .bot-managed-setting-list {
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.botdefense-operator-frame .bot-managed-setting-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.46fr) minmax(0, 1.54fr);
    align-items: center;
    gap: 18px;
    min-height: 64px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.botdefense-operator-frame .bot-managed-setting-row:last-child {
    border-bottom: 0;
}

.botdefense-operator-frame .bot-managed-setting-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.botdefense-operator-frame .bot-managed-setting-copy strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 740;
    line-height: 1.25;
}

.botdefense-operator-frame .bot-managed-setting-copy small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.botdefense-operator-frame .bot-managed-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.botdefense-operator-frame .bot-managed-option {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
    font-weight: 680;
    text-align: left;
    cursor: pointer;
}

.botdefense-operator-frame .bot-managed-option:hover {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.botdefense-operator-frame .bot-managed-option.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    color: var(--text-main);
}

.botdefense-operator-frame .bot-managed-option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 72%, #ffffff);
    outline-offset: 2px;
}

.botdefense-operator-frame .bot-managed-option-indicator {
    width: 14px;
    height: 14px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 999px;
    background: var(--operator-surface, #ffffff);
}

.botdefense-operator-frame .bot-managed-option.is-active .bot-managed-option-indicator {
    border: 4px solid var(--operator-orange, var(--brand-orange));
}

[data-theme="dark"] .botdefense-operator-frame .bot-managed-setting-list,
[data-theme="dark"] .botdefense-operator-frame .bot-managed-option,
[data-theme="dark"] .botdefense-operator-frame .bot-managed-option-indicator {
    background: var(--operator-surface, #11141a);
}

.botdefense-operator-frame .bot-managed-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.botdefense-operator-frame .bot-managed-policy-panel {
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.botdefense-operator-frame .bot-managed-policy-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 11px;
    min-height: 76px;
    padding: 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, var(--operator-orange, var(--brand-orange)));
}

.botdefense-operator-frame .bot-managed-policy-head .operator-control-icon {
    width: 34px;
    height: 34px;
    margin: 0;
    border: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
    color: var(--operator-orange, var(--brand-orange));
}

.botdefense-operator-frame .bot-managed-policy-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.botdefense-operator-frame .bot-managed-policy-kicker {
    color: var(--operator-orange, var(--brand-orange));
    font-size: 9px;
    font-weight: 780;
    letter-spacing: .075em;
    line-height: 1.2;
    text-transform: uppercase;
}

.botdefense-operator-frame .bot-managed-policy-copy strong {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 760;
    line-height: 1.25;
}

.botdefense-operator-frame .bot-managed-policy-copy small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.botdefense-operator-frame .bot-managed-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.botdefense-operator-frame .bot-managed-choice-card {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    min-width: 0;
    min-height: 106px;
    padding: 14px 36px 13px 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.botdefense-operator-frame .bot-managed-choice-card:hover {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.botdefense-operator-frame .bot-managed-choice-card.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 4%, var(--operator-surface, #ffffff));
}

.botdefense-operator-frame .bot-managed-choice-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 72%, #ffffff);
    outline-offset: 2px;
}

.botdefense-operator-frame .bot-managed-choice-check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 999px;
    background: var(--operator-surface, #ffffff);
    color: transparent;
}

.botdefense-operator-frame .bot-managed-choice-check svg {
    width: 11px;
    height: 11px;
}

.botdefense-operator-frame .bot-managed-choice-card.is-active .bot-managed-choice-check {
    border-color: var(--operator-orange, var(--brand-orange));
    background: var(--operator-orange, var(--brand-orange));
    color: #ffffff;
}

.botdefense-operator-frame .bot-managed-choice-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: var(--operator-surface-muted, #f7f8fa);
    color: var(--text-muted);
}

.botdefense-operator-frame .bot-managed-choice-icon svg {
    width: 18px;
    height: 18px;
}

.botdefense-operator-frame .bot-managed-choice-card.is-active .bot-managed-choice-icon {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 50%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 6%, var(--operator-surface, #ffffff));
    color: var(--operator-orange, var(--brand-orange));
}

.botdefense-operator-frame .bot-managed-choice-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.botdefense-operator-frame .bot-managed-choice-copy strong {
    padding-right: 4px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
}

.botdefense-operator-frame .bot-managed-choice-copy small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.38;
}

.botdefense-operator-frame .bot-managed-choice-copy > span {
    margin-top: 2px;
    color: color-mix(in srgb, var(--text-main) 76%, var(--text-muted));
    font-size: 9px;
    font-weight: 780;
    letter-spacing: .055em;
    line-height: 1.25;
    text-transform: uppercase;
}

[data-theme="dark"] .botdefense-operator-frame .bot-managed-policy-panel,
[data-theme="dark"] .botdefense-operator-frame .bot-managed-policy-head .operator-control-icon,
[data-theme="dark"] .botdefense-operator-frame .bot-managed-choice-card,
[data-theme="dark"] .botdefense-operator-frame .bot-managed-choice-check {
    background: var(--operator-surface, #11141a);
}

[data-theme="dark"] .botdefense-operator-frame .bot-managed-choice-icon {
    background: var(--operator-canvas, #0b0d12);
}

.bot-operator-action-list .operator-control-row {
    min-height: 66px;
}

.bot-operator-details {
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.bot-operator-details summary {
    min-height: 46px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 720;
    cursor: pointer;
}

.bot-operator-details:not([open]) summary {
    border-bottom: 0;
}

.bot-operator-details .bot-operator-expert-grid {
    padding: 14px;
}

.bot-operator-overview .bot-analytics-card {
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 0;
    background: var(--operator-surface, #ffffff);
    box-shadow: none;
}

.bot-operator-overview .bot-analytics-card .card-header {
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.bot-operator-overview .operator-sticky-actions .section-save-actions {
    margin: 0;
}

.botdefense-operator-frame .bot-rules-overview-section,
.botdefense-operator-frame .bot-rules-table-section {
    padding-bottom: 0;
    border-bottom: 0;
}

.botdefense-operator-frame .bot-rules-table-section .operator-section-head {
    align-items: flex-start;
}

.botdefense-operator-frame .bot-rules-table-section .operator-section-actions {
    align-items: center;
    gap: 10px;
}

.botdefense-operator-frame .bot-rules-muted,
.botdefense-operator-frame .bot-rules-table-note {
    color: var(--text-dim);
    font-size: 10px;
}

.botdefense-operator-frame .bot-rules-table-surface {
    display: grid;
    min-width: 0;
    gap: 0;
}

.botdefense-operator-frame .bot-rules-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    min-height: 42px;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-bottom: 0;
    border-radius: var(--radius-sm, 2px) var(--radius-sm, 2px) 0 0;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--operator-surface-muted, #f7f8fa));
}

.botdefense-operator-frame .bot-rules-table-metrics {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    flex-wrap: wrap;
}

.botdefense-operator-frame .bot-rules-table-metrics span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-height: 26px;
    padding: 4px 8px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.botdefense-operator-frame .bot-rules-table-metrics strong {
    color: var(--text-main);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 780;
    letter-spacing: 0;
}

.botdefense-operator-frame .bot-rules-table-note {
    flex: 0 1 360px;
    max-width: 360px;
    padding-left: 10px;
    border-left: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 640;
    line-height: 1.35;
    text-align: left;
}

.botdefense-operator-frame .bot-rules-enterprise-table.config-table-wrap {
    margin: 0;
    border-radius: 0 0 var(--radius-sm, 2px) var(--radius-sm, 2px);
    overflow-x: auto;
    overflow-y: visible;
}

.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table {
    min-width: 1040px;
    table-layout: fixed;
}

.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table th {
    padding: 11px 14px;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table td {
    padding: 12px 14px;
    vertical-align: middle;
}

.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table th:nth-child(1) { width: 26%; }
.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table th:nth-child(2) { width: 34%; }
.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table th:nth-child(3) { width: 11%; }
.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table th:nth-child(4) { width: 112px; }
.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table th:nth-child(5) { width: 90px; }
.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table th:nth-child(6) { width: 96px; }

.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table th:nth-child(5),
.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table td:nth-child(5) {
    text-align: center;
}

.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table th:nth-child(6),
.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table td:nth-child(6) {
    text-align: right;
}

.botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table tbody tr:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, #ffffff));
}

.botdefense-operator-frame .bot-rules-table-rule {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 10px;
}

.botdefense-operator-frame .bot-rules-table-rule-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: var(--operator-surface-muted, var(--surface-panel));
    color: var(--text-muted);
}

.botdefense-operator-frame .bot-rules-table-rule-icon svg {
    display: block;
    width: 15px;
    height: 15px;
}

.botdefense-operator-frame .bot-rules-table-rule-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.botdefense-operator-frame .bot-rules-table-rule-title {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.botdefense-operator-frame .bot-rules-table-rule-title .btn-link {
    appearance: none;
    width: fit-content;
    max-width: 260px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    font-size: 13px;
    font-weight: 760;
    line-height: 1.25;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.botdefense-operator-frame .bot-rules-table-rule-title .btn-link:hover,
.botdefense-operator-frame .bot-rules-table-rule-title .btn-link:focus-visible {
    background: transparent;
    color: var(--operator-link, var(--primary));
    outline: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.botdefense-operator-frame .bot-rules-table-rule-meta {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
}

.botdefense-operator-frame .bot-rules-table-matches {
    gap: 5px;
}

.botdefense-operator-frame .bot-rules-priority-control {
    display: inline-flex;
    min-width: 0;
    align-self: auto;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 3px;
    padding: 0;
    border-right: 0;
}

.botdefense-operator-frame .section-rule-priority-index {
    background: var(--operator-surface-muted, var(--surface-panel));
    border-color: var(--operator-line-soft, #eceff3);
    border-radius: 4px;
}

.botdefense-operator-frame .bot-rules-status-toggle {
    margin: 0 auto;
}

.botdefense-operator-frame .section-rule-priority-btn {
    border-radius: 4px;
}

.botdefense-operator-frame .section-rule-priority-btn:hover:not(:disabled) {
    color: var(--text-main);
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 5%, var(--operator-surface, #ffffff));
    border-color: var(--operator-line, #d9dde3);
}

.botdefense-operator-frame .section-rule-name {
    font-size: 13px;
    font-weight: 720;
}

.botdefense-operator-frame .section-rule-disabled-pill,
.botdefense-operator-frame .section-rule-scope-pill {
    border: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface-muted, var(--surface-panel));
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.botdefense-operator-frame .section-rule-scope-pill.skip {
    background: var(--operator-surface-muted, var(--surface-panel));
    color: var(--text-muted);
    border-color: var(--operator-line-soft, #eceff3);
}

.botdefense-operator-frame .section-rule-condition-chip {
    max-width: min(100%, 520px);
    background: var(--operator-surface-muted, var(--surface-panel));
    border-color: var(--operator-line-soft, #eceff3);
    color: var(--text-muted);
}

.botdefense-operator-frame .section-rule-condition-field,
.botdefense-operator-frame .section-rule-condition-operator {
    color: var(--text-secondary);
}

.botdefense-operator-frame .section-rule-condition-value {
    color: var(--text-main);
}

.botdefense-operator-frame .section-rule-actions {
    justify-content: flex-end;
    min-width: 0;
    align-self: auto;
    gap: 8px;
    padding: 0;
    border-left: 0;
}

.botdefense-operator-frame .section-rule-action-badge,
.botdefense-operator-frame .section-rule-action-badge.block,
.botdefense-operator-frame .section-rule-action-badge.allow,
.botdefense-operator-frame .section-rule-action-badge.challenge,
.botdefense-operator-frame .section-rule-action-badge.log {
    min-width: 82px;
    background: var(--operator-surface-muted, var(--surface-panel));
    border-color: var(--operator-line-soft, #eceff3);
    color: var(--text-main);
}

.botdefense-operator-frame .bot-rules-table-actions {
    justify-content: flex-end;
    min-width: 0;
    padding: 0;
    border-left: 0;
}

.botdefense-operator-frame .bot-rules-action-menu .operator-action-menu-trigger {
    min-height: 30px;
    padding-inline: 9px;
}

.botdefense-operator-frame .bot-rules-enterprise-table .config-table-empty-cell {
    padding: 0 !important;
    background: var(--operator-surface, #ffffff);
}

.botdefense-operator-frame .bot-rules-enterprise-table .config-table-empty-cell .empty-state {
    display: grid;
    min-height: clamp(280px, 42vh, 430px) !important;
    height: auto !important;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 34px 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 56%, transparent), transparent 68%),
        var(--operator-surface, #ffffff) !important;
    box-shadow: none !important;
}

.botdefense-operator-frame .bot-rules-enterprise-table .config-table-empty-cell .empty-state h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 760;
    line-height: 1.3;
}

.botdefense-operator-frame .bot-rules-enterprise-table .config-table-empty-cell .empty-state p {
    max-width: 430px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

[data-theme="dark"] .botdefense-operator-frame .bot-rules-table-toolbar,
[data-theme="dark"] .botdefense-operator-frame .bot-rules-enterprise-table .config-table-empty-cell {
    background: var(--operator-surface, #11141a) !important;
}

[data-theme="dark"] .botdefense-operator-frame .bot-rules-table-metrics span {
    background: var(--operator-canvas, #0b0d12);
}

[data-theme="dark"] .botdefense-operator-frame .bot-rules-enterprise-table .config-table-empty-cell .empty-state {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--operator-canvas, #0b0d12) 64%, transparent), transparent 70%),
        var(--operator-surface, #11141a) !important;
}

[data-theme="dark"] .botdefense-operator-frame .section-rule-priority-index,
[data-theme="dark"] .botdefense-operator-frame .bot-rules-table-rule-icon,
[data-theme="dark"] .botdefense-operator-frame .section-rule-disabled-pill,
[data-theme="dark"] .botdefense-operator-frame .section-rule-scope-pill,
[data-theme="dark"] .botdefense-operator-frame .section-rule-condition-chip,
[data-theme="dark"] .botdefense-operator-frame .section-rule-action-badge {
    background: var(--operator-canvas, #0b0d12);
}

[data-theme="dark"] .bot-operator-control-card,
[data-theme="dark"] .bot-operator-details,
[data-theme="dark"] .bot-operator-overview .bot-analytics-card,
[data-theme="dark"] .bot-operator-control-card .httpsec-mode-card {
    background: var(--operator-surface, #11141a);
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator {
    padding: 0 !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-builder-head {
    min-height: 64px;
    padding: 0 0 18px !important;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3) !important;
    background: transparent !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-builder-head h3 {
    margin-top: 5px !important;
    font-size: 20px !important;
    font-weight: 720 !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-toggle {
    min-width: 146px;
    border-color: var(--operator-line-soft, #eceff3) !important;
    background: var(--operator-surface-muted, #f9fafb) !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-cf-section {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 24px;
    padding: 24px 0 !important;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3) !important;
    background: transparent !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-preview-section {
    padding: 22px 0 0 72px !important;
    border-bottom: 0 !important;
    background: transparent !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-cf-step {
    width: 28px;
    height: 28px;
    border-color: var(--operator-line, #d9dde3) !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-cf-content {
    max-width: none;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-cf-title {
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 720;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-priority-row {
    max-width: 268px;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group {
    margin-bottom: 12px;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group input,
.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group select,
.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group textarea,
.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-field-search {
    border-color: var(--operator-line, #d9dde3) !important;
    border-radius: 4px !important;
    background: var(--operator-surface, #ffffff) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-card,
.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-action-panel,
.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-targeting-panel,
.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-expression-preview {
    padding: 0 !important;
    border: 1px solid var(--operator-line, #d9dde3) !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-card {
    position: relative;
    z-index: 20;
    overflow: visible;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-action-panel,
.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-targeting-panel,
.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-expression-preview {
    overflow: hidden;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-head {
    min-height: 52px;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3) !important;
    background: transparent !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-conditions {
    gap: 0;
    padding: 14px;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-row {
    grid-template-columns: 86px minmax(240px, 1fr) minmax(170px, 0.7fr) minmax(240px, 1.05fr) 42px;
    grid-template-areas: "joiner field operator value remove";
    gap: 12px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-row:hover {
    background: transparent !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-field-dropdown {
    z-index: 60;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-field-dropdown.is-open {
    z-index: 90;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-field-menu {
    z-index: 100;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-joiner {
    padding-top: 26px;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-joiner .status-pill,
.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-remove {
    border-color: var(--operator-line-soft, #eceff3) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-action-panel,
.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-targeting-panel {
    margin-top: 14px;
    padding: 14px !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-pane-title {
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-bot-scope-item {
    border-color: var(--operator-line-soft, #eceff3) !important;
    border-radius: 5px !important;
    background: transparent !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-preview-bottom {
    padding: 14px !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-preview-bottom code {
    border-color: var(--operator-line-soft, #eceff3) !important;
    background: var(--surface-code, #f8fafc) !important;
    color: var(--surface-code-text, #101214) !important;
}

.botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-footer {
    padding: 16px 0 0 !important;
    border-top: 0 !important;
    background: transparent !important;
}

[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-builder-head,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-cf-section,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-preview-section,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-footer {
    background: transparent !important;
    box-shadow: none !important;
}

[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-toggle {
    background: var(--operator-canvas, #0b0d12) !important;
}

[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group input,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group select,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group textarea,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-field-search {
    border-color: var(--operator-line-soft, #eceff3) !important;
    background: var(--operator-canvas, #0b0d12) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-preview-bottom code {
    border-color: var(--operator-line-soft, #eceff3) !important;
    background: var(--operator-canvas, #0b0d12) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-card,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-action-panel,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-targeting-panel,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-expression-preview {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 34%, transparent) !important;
}

[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group input,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group input,
[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group select,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group select,
[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group textarea,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .form-group textarea,
[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-field-search,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-field-search {
    background: #ffffff !important;
    border-color: #d7dce3 !important;
    color: var(--text-main, #101214) !important;
}

@media (max-width: 760px) {
    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-builder-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-toggle {
        justify-content: flex-start;
        width: 100%;
    }

    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-cf-section {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 22px 0 !important;
    }

    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-cf-step {
        margin-left: 0;
    }

    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-head {
        align-items: stretch;
        flex-direction: column;
    }

    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-head .btn {
        width: 100%;
    }

    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "joiner"
            "field"
            "operator"
            "value"
            "remove";
    }

    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-joiner,
    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-condition-remove {
        padding-top: 0;
        margin-top: 0;
    }

    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-footer,
    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-footer .flex-row {
        align-items: stretch;
        flex-direction: column;
    }

    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-footer .btn {
        width: 100%;
    }

    .botdefense-operator-frame .security-rule-builder-bot.security-rule-builder-operator .security-rule-preview-section {
        padding-left: 0 !important;
    }
}

@media (max-width: 1100px) {
    .botdefense-operator-frame .bot-managed-setting-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .botdefense-operator-frame .bot-managed-policy-grid {
        grid-template-columns: 1fr;
    }

    .bot-operator-expert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .bot-operator-control-grid,
    .bot-operator-expert-grid,
    .bot-operator-control-card .httpsec-mode-cards,
    .botdefense-operator-frame .bot-managed-choice-grid {
        grid-template-columns: 1fr;
    }

    .botdefense-operator-frame .bot-managed-policy-head {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .botdefense-operator-frame .bot-managed-policy-head .config-status-pill {
        grid-column: 2;
        justify-self: start;
    }

    .botdefense-operator-frame .bot-managed-choice-card {
        min-height: 96px;
    }

    .botdefense-operator-frame .bot-managed-setting-row {
        padding: 12px;
    }

    .botdefense-operator-frame .bot-managed-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .botdefense-operator-frame .section-rule-actions {
        flex-wrap: wrap;
    }

    .botdefense-operator-frame .bot-rules-table-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .botdefense-operator-frame .bot-rules-table-note {
        padding-left: 0;
        border-left: 0;
        max-width: none;
        text-align: left;
    }

    .botdefense-operator-frame .bot-rules-table-section .operator-section-head,
    .botdefense-operator-frame .bot-rules-table-section .operator-section-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .botdefense-operator-frame .bot-rules-table-section .operator-section-actions,
    .botdefense-operator-frame .bot-rules-table-section .operator-section-actions .btn {
        width: 100%;
    }

    .botdefense-operator-frame .bot-rules-enterprise-table .config-enterprise-table {
        min-width: 920px;
    }

    .botdefense-operator-frame .bot-rules-table-rule-title .btn-link {
        max-width: 220px;
    }
}

/* WAF Core enterprise cleanup: dense, neutral, state-driven. */
.edge-config-stage {
    gap: 14px;
    padding: 18px 20px 20px;
    border: 1px solid var(--divider) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface-card) !important;
    box-shadow: none !important;
    overflow: hidden;
}

.edge-config-stage .config-console-header {
    margin: -18px -20px 0;
    padding: 16px 18px 12px;
    background: transparent;
}

.edge-config-stage .config-console-title {
    font-size: 18px;
}

.edge-config-stage .config-console-category,
.edge-config-stage .config-console-meta {
    font-size: 11px;
}

.edge-config-stage .config-section-nav {
    gap: 18px;
    min-height: 34px;
    margin: -14px -20px 0;
    padding: 0 18px;
}

.edge-config-stage .config-section-nav-item {
    height: 34px;
    font-size: 12px;
}

.firewall-overview-shell {
    gap: 14px !important;
}

.edge-overview-panel {
    display: grid;
    gap: 0;
    margin: -14px -20px -20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.edge-overview-panel > * + * {
    border-top: 1px solid var(--divider);
}

.edge-overview-metrics {
    padding: 12px;
}

.edge-overview-band {
    display: grid;
    gap: 12px;
    padding: 14px 16px 16px;
}

.edge-overview-band-head h4 {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 750;
}

.firewall-overview-shell .section-overview-stats-grid {
    gap: 10px !important;
}

.firewall-overview-shell .section-overview-stat {
    min-height: 72px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--divider) !important;
    background: var(--surface-card) !important;
    box-shadow: none !important;
}

.firewall-overview-shell .section-overview-stat-value {
    font-size: 20px !important;
}

.firewall-overview-shell .section-overview-stat-label {
    font-size: 10px !important;
}

.firewall-overview-shell .bot-overview-settings,
.firewall-overview-shell .firewall-threat-snapshot,
.leak-console .section-config-panel,
.leak-command,
.leak-status-tile,
.section-managed-policy-group {
    border: 1px solid var(--divider) !important;
    background: var(--surface-card) !important;
    box-shadow: none !important;
}

.edge-overview-panel .bot-overview-settings,
.edge-overview-panel .firewall-threat-snapshot {
    border: 0 !important;
    background: transparent !important;
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-settings-grid,
.firewall-overview-shell .firewall-threat-snapshot .bot-overview-settings-grid {
    gap: 10px;
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-setting-card,
.firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-card {
    min-height: 0 !important;
    gap: 10px;
    padding: 12px;
    border-color: var(--divider) !important;
    border-radius: var(--radius-sm);
    box-shadow: none !important;
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-setting-label,
.firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-label {
    margin: -12px -12px 0;
    padding: 10px 12px;
    font-size: 10px;
    letter-spacing: 0.06em;
    background: var(--surface-panel);
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-setting-value,
.firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-value {
    font-size: 14px;
}

.firewall-overview-shell .edge-firewall-controls .section-mode-subtitle,
.leak-console .section-mode-subtitle,
.leak-status-tile small:empty,
.bot-overview-setting-sub:empty {
    display: none;
}

.edge-profile-select {
    min-height: 42px;
    line-height: 42px;
    font-size: 13px;
}

.edge-level-orb {
    width: 28px;
    height: 28px;
    font-size: 12px !important;
}

.edge-rule-link strong {
    font-size: 15px;
}

.edge-empty-compact {
    min-height: 52px;
    padding: 12px;
}

.section-managed-policy-summary,
.leak-command {
    padding: 12px 14px !important;
}

.section-managed-policy-desc,
.section-row-sub,
.config-table-sub {
    font-size: 11px;
}

.leak-console {
    gap: 14px;
}

.leak-command h3,
.leak-panel h3 {
    margin: 0;
    font-size: 15px;
}

.leak-command p,
.leak-panel p,
.leak-pack-card p,
.section-panel-head p {
    display: none;
}

.leak-status-strip {
    gap: 8px;
}

.leak-status-tile {
    min-height: 58px;
    padding: 10px 12px;
}

.leak-status-tile strong {
    font-size: 15px;
}

.leak-pack-card {
    gap: 10px;
    border-color: var(--divider) !important;
    background: var(--surface-card) !important;
    box-shadow: none !important;
}

.section-editor-compact-head {
    padding: 12px 14px !important;
}

[data-theme="light"] .edge-config-stage,
[data-theme="light"] .edge-overview-panel,
[data-theme="light"] .firewall-overview-shell .section-overview-stat,
[data-theme="light"] .firewall-overview-shell .bot-overview-settings,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot,
[data-theme="light"] .leak-console .section-config-panel,
[data-theme="light"] .leak-command,
[data-theme="light"] .leak-status-tile,
[data-theme="light"] .section-managed-policy-group {
    border-color: var(--waf-light-border-soft, #dde5ef) !important;
    box-shadow: none !important;
}

[data-theme="light"] .edge-config-stage {
    background: #ffffff !important;
}

[data-theme="light"] .edge-overview-panel {
    background: transparent !important;
}

/* WAF Core overview refinement: organized single workspace. */
.edge-overview-panel {
    gap: 14px;
    padding: 14px 16px 18px;
}

.edge-overview-panel > * + * {
    border-top: 0;
}

.edge-overview-metrics {
    padding: 0;
}

.edge-overview-band {
    gap: 12px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--divider) 86%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface-panel) 72%, transparent);
}

.edge-overview-band + .edge-overview-band {
    margin-top: 0;
}

.edge-overview-band-head {
    display: flex;
    align-items: center;
    min-height: 20px;
}

.edge-overview-band-head h4 {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.firewall-overview-shell .section-overview-stat {
    min-height: 68px !important;
    border-color: color-mix(in srgb, var(--divider) 82%, transparent) !important;
    background: color-mix(in srgb, var(--surface-panel) 78%, transparent) !important;
}

.firewall-overview-shell .section-overview-stat:hover {
    border-color: color-mix(in srgb, var(--primary) 32%, var(--divider)) !important;
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-setting-card,
.firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-card {
    border-color: color-mix(in srgb, var(--divider) 76%, transparent) !important;
    background: color-mix(in srgb, var(--bg-depth) 58%, transparent) !important;
}

.firewall-overview-shell .edge-firewall-controls .bot-overview-setting-label,
.firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-label {
    margin: -12px -12px 2px;
    padding: 9px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--divider) 68%, transparent);
    background: color-mix(in srgb, var(--surface-panel) 62%, transparent);
}

.firewall-overview-shell .edge-firewall-controls .bot-aggregate-row,
.firewall-overview-shell .firewall-threat-snapshot .bot-aggregate-row {
    border-bottom-color: color-mix(in srgb, var(--divider) 45%, transparent);
}

.firewall-overview-shell .edge-firewall-controls .section-mode-option.is-active,
.firewall-overview-shell .edge-firewall-controls .edge-level-btn.is-active {
    background: color-mix(in srgb, var(--surface-panel) 86%, transparent) !important;
}

.edge-rules-grid,
.edge-level-grid,
.firewall-overview-shell .edge-firewall-controls .section-mode-grid-compact {
    gap: 8px;
}

.firewall-overview-shell .section-save-actions {
    margin-top: 0;
    padding-top: 2px;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat,
[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .bot-overview-setting-card,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-card {
    background: #f8fafc !important;
    border-color: #dbe3ee !important;
}

[data-theme="light"] .edge-overview-band {
    background: #f8fafc !important;
    border-color: #dbe3ee !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .bot-overview-setting-label,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-label {
    background: #f1f5f9 !important;
    border-bottom-color: #dbe3ee !important;
}

/* WAF Core white-first skin: black/white console, color reserved for state. */
[data-theme="light"] .edge-console-shell {
    --waf-light-canvas: #f4f4f5;
    --waf-light-panel: #ffffff;
    --waf-light-panel-soft: #fafafa;
    --waf-light-border: #d4d4d8;
    --waf-light-border-soft: #e5e5e5;
    --waf-light-text: #111111;
    --waf-light-muted: #525252;
    --waf-light-dim: #737373;
    --waf-light-shadow: none;
}

[data-theme="light"] .edge-config-stage {
    border: 1px solid #d4d4d8 !important;
    border-radius: var(--radius-sm) !important;
    background: #ffffff !important;
    color: #111111 !important;
    box-shadow: none !important;
}

[data-theme="light"] .edge-config-stage .config-console-header,
[data-theme="light"] .edge-config-stage .config-section-nav {
    border-color: #e5e5e5 !important;
}

[data-theme="light"] .edge-config-stage .config-console-title {
    color: #111111 !important;
}

[data-theme="light"] .edge-config-stage .config-console-category,
[data-theme="light"] .edge-config-stage .config-console-meta,
[data-theme="light"] .edge-config-stage .config-section-nav-item {
    color: #525252 !important;
}

[data-theme="light"] .edge-config-stage .config-section-nav-item:hover,
[data-theme="light"] .edge-config-stage .config-section-nav-item.is-active {
    color: #111111 !important;
}

[data-theme="light"] .edge-config-stage .config-section-nav-item.is-active::after {
    background: var(--primary) !important;
}

[data-theme="light"] .edge-overview-panel {
    background: transparent !important;
}

[data-theme="light"] .edge-overview-band,
[data-theme="light"] .firewall-overview-shell .section-overview-stat,
[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .bot-overview-setting-card,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-card,
[data-theme="light"] .section-managed-policy-group,
[data-theme="light"] .leak-console .section-config-panel,
[data-theme="light"] .leak-command,
[data-theme="light"] .leak-status-tile {
    background: #fafafa !important;
    border-color: #d4d4d8 !important;
    color: #111111 !important;
    box-shadow: none !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .bot-overview-setting-label,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-label {
    background: #f4f4f5 !important;
    border-bottom-color: #d4d4d8 !important;
    color: #111111 !important;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat.danger .section-overview-stat-value {
    color: #b91c1c !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.tone-muted,
[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.tone-primary {
    --waf-mode-accent: #111111;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.tone-danger {
    --waf-mode-accent: #b91c1c;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.is-active,
[data-theme="light"] .firewall-overview-shell .edge-level-btn.is-active {
    background: #f4f4f5 !important;
    border-color: var(--primary) !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.tone-danger.is-active {
    border-color: #b91c1c !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-icon,
[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.is-active .section-mode-icon,
[data-theme="light"] .firewall-overview-shell .edge-level-orb {
    color: var(--waf-mode-accent, #111111) !important;
    border-color: currentColor !important;
}

[data-theme="light"] .firewall-overview-shell .edge-level-standard,
[data-theme="light"] .firewall-overview-shell .edge-level-balanced,
[data-theme="light"] .firewall-overview-shell .edge-level-strict {
    --waf-level-border: var(--primary);
    --waf-level-fg: #111111;
}

[data-theme="light"] .firewall-overview-shell .edge-level-paranoid {
    --waf-level-border: #b91c1c;
    --waf-level-fg: #b91c1c;
}

[data-theme="light"] .firewall-overview-shell .edge-paranoia-warning {
    background: #f8f9fb !important;
    border-color: #d7dbe0 !important;
}

[data-theme="light"] .firewall-overview-shell .edge-paranoia-warning.is-critical {
    background: #fef2f2 !important;
    border-color: #b91c1c !important;
}

[data-theme="light"] .firewall-overview-shell .edge-paranoia-warning strong {
    color: #111111 !important;
}

[data-theme="light"] .firewall-overview-shell .edge-paranoia-warning.is-critical strong {
    color: #b91c1c !important;
}

/* Shared configuration surface refinement for the white-first console. */
[data-theme="light"] .section-config-container {
    background: #f4f4f5 !important;
}

[data-theme="light"] .config-console-shell {
    gap: 12px;
}

[data-theme="light"] .config-console-header {
    padding: 16px 18px 14px;
    border-bottom-color: #e5e5e5;
}

[data-theme="light"] .config-console-title {
    font-size: 18px;
    font-weight: 750;
    letter-spacing: 0;
}

[data-theme="light"] .config-console-category,
[data-theme="light"] .config-console-meta {
    color: #5f6368;
}

[data-theme="light"] .config-section-nav {
    min-height: 40px;
    gap: 0;
    padding: 0 18px;
    border-bottom-color: #e5e5e5;
}

[data-theme="light"] .config-section-nav-item {
    height: 40px;
    padding: 0 12px;
    color: #525252;
    font-size: 12px;
    font-weight: 650;
}

[data-theme="light"] .config-section-nav-item:hover,
[data-theme="light"] .config-section-nav-item.is-active {
    color: #111111;
}

[data-theme="light"] .config-section-nav-item.is-active::after {
    right: 12px;
    left: 12px;
    height: 2px;
    background: var(--primary);
}

[data-theme="light"] .config-console-content {
    padding: 14px 18px 18px;
}

[data-theme="light"] .config-toolbar,
[data-theme="light"] .config-metric-strip {
    margin-bottom: 14px;
}

[data-theme="light"] .config-table-wrap,
[data-theme="light"] .section-table-wrap {
    min-height: 0;
    overflow: hidden;
    border: 1px solid #d4d4d8;
    border-radius: var(--radius-sm, 2px);
    background: #ffffff;
}

[data-theme="light"] .config-enterprise-table,
[data-theme="light"] .section-table {
    border-collapse: separate;
    border-spacing: 0;
}

[data-theme="light"] .config-enterprise-table th,
[data-theme="light"] .section-table th,
[data-theme="light"] .section-th {
    padding: 10px 13px;
    border-bottom: 1px solid #d4d4d8;
    background: #f7f7f7 !important;
    color: #525252;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.08em;
}

[data-theme="light"] .config-enterprise-table td,
[data-theme="light"] .section-table td {
    padding: 11px 13px;
    border-bottom: 1px solid #eeeeee;
    background: #ffffff;
    color: #111111;
    font-size: 12px;
}

[data-theme="light"] .config-enterprise-table tbody tr:hover td,
[data-theme="light"] .section-table tbody tr:hover td,
[data-theme="light"] .section-row:hover {
    background: #fafafa;
}

[data-theme="light"] .config-table-primary {
    color: #111111;
    font-size: 12px;
    font-weight: 750;
}

[data-theme="light"] .config-table-sub,
[data-theme="light"] .section-row-sub {
    color: #6b7280;
    font-size: 11px;
}

[data-theme="light"] .config-table-code {
    color: #111111;
    font-size: 11px;
}

[data-theme="light"] .config-table-actions,
[data-theme="light"] .section-rule-actions,
[data-theme="light"] .rule-actions {
    gap: 6px;
}

/* WAF rides on the shared shell, with less spreadsheet weight. */
[data-theme="light"] .edge-config-stage {
    gap: 0;
    min-height: 0 !important;
    padding: 0 !important;
    border-color: #d4d4d8 !important;
    background: #ffffff !important;
}

[data-theme="light"] .edge-config-stage .config-console-header {
    margin: 0 !important;
    padding: 14px 18px 12px;
}

[data-theme="light"] .edge-config-stage .config-section-nav {
    margin: 0 !important;
}

[data-theme="light"] .edge-config-stage .config-console-content {
    flex: 0 1 auto;
}

[data-theme="light"] .firewall-overview-shell {
    gap: 14px;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stats-grid {
    gap: 10px;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat {
    min-height: 58px !important;
    border-color: #d9d9de !important;
    background: #fafafa !important;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat-value {
    font-size: 19px;
    font-weight: 760;
}

[data-theme="light"] .edge-overview-band,
[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .bot-overview-setting-card,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-card,
[data-theme="light"] .leak-console .section-config-panel,
[data-theme="light"] .leak-command,
[data-theme="light"] .leak-status-tile,
[data-theme="light"] .section-managed-policy-group {
    border-color: #d9d9de !important;
    background: #ffffff !important;
}

[data-theme="light"] .edge-overview-band {
    padding: 13px;
}

[data-theme="light"] .edge-overview-band-head h4,
[data-theme="light"] .bot-overview-setting-label,
[data-theme="light"] .section-panel-head h3,
[data-theme="light"] .leak-command h3,
[data-theme="light"] .leak-panel h3 {
    color: #111111;
    letter-spacing: 0.05em;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.is-active,
[data-theme="light"] .firewall-overview-shell .edge-level-btn.is-active {
    border-color: var(--primary) !important;
    background: #f7f7f7 !important;
    box-shadow: inset 0 0 0 1px var(--primary) !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.tone-danger.is-active {
    border-color: #b91c1c !important;
    box-shadow: inset 0 0 0 1px #b91c1c !important;
}

[data-theme="light"] .leak-console {
    gap: 12px;
}

[data-theme="light"] .leak-command {
    padding: 12px 14px !important;
}

[data-theme="light"] .leak-status-strip {
    gap: 8px;
}

[data-theme="light"] .leak-status-tile {
    min-height: 52px;
    padding: 9px 10px;
}

[data-theme="light"] .leak-pack-card {
    border-color: #d9d9de !important;
    background: #ffffff !important;
}

[data-theme="light"] .section-status-badge,
[data-theme="light"] .status-badge,
[data-theme="light"] .badge,
[data-theme="light"] .config-status-pill {
    min-height: 20px;
    padding: 0 7px;
    border-radius: 3px;
    background: #f5f5f5 !important;
    border: 1px solid #d4d4d8 !important;
    color: #3f3f46 !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

[data-theme="light"] .section-status-badge.status-success,
[data-theme="light"] .status-badge.status-success,
[data-theme="light"] .status-badge.enabled,
[data-theme="light"] .config-status-pill.tone-success,
[data-theme="light"] .config-status-pill.tone-active {
    background: var(--status-neutral-bg) !important;
    border-color: var(--status-neutral-border) !important;
    color: var(--text-main) !important;
}

[data-theme="light"] .section-status-badge.status-warning,
[data-theme="light"] .status-badge.status-warning,
[data-theme="light"] .config-status-pill.tone-warning {
    background: var(--status-neutral-bg) !important;
    border-color: var(--status-neutral-border) !important;
    color: var(--text-main) !important;
}

[data-theme="light"] .section-status-badge.status-danger,
[data-theme="light"] .status-badge.status-danger,
[data-theme="light"] .status-badge.disabled,
[data-theme="light"] .config-status-pill.tone-danger {
    background: var(--status-neutral-bg) !important;
    border-color: var(--status-neutral-border) !important;
    color: var(--text-dim) !important;
}

/* WAF Core pro SaaS refresh. This is the reference language for config pages. */
[data-theme="light"] .content-area,
[data-theme="light"] .view-container,
[data-theme="light"] #view-container {
    background: var(--operator-surface, #ffffff) !important;
}

[data-theme="light"] #waf-config-content {
    padding: 0 !important;
    background: transparent !important;
}

[data-theme="light"] .edge-console-shell {
    max-width: none;
}

[data-theme="light"] .edge-config-stage {
    overflow: visible;
    border: 1px solid #d9dadd !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.05) !important;
}

[data-theme="light"] .edge-config-stage .config-console-header {
    min-height: 74px;
    align-items: center;
    padding: 16px 20px 15px;
    border-bottom-color: #e7e7e9 !important;
}

[data-theme="light"] .edge-config-stage .config-console-title-row {
    gap: 9px;
}

[data-theme="light"] .edge-config-stage .config-console-title {
    font-size: 19px;
    font-weight: 760;
    line-height: 1.1;
}

[data-theme="light"] .edge-config-stage .config-console-category {
    color: #55565a !important;
    font-size: 11px;
    font-weight: 650;
}

[data-theme="light"] .edge-config-stage .config-console-meta {
    margin-top: 8px;
    color: #65676c !important;
    font-size: 11px;
}

[data-theme="light"] .edge-config-stage .config-section-nav {
    min-height: 44px;
    padding: 0 18px;
    background: #ffffff;
    border-bottom-color: #e7e7e9 !important;
}

[data-theme="light"] .edge-config-stage .config-section-nav-item {
    height: 44px;
    padding: 0 12px;
    color: #55565a !important;
    font-size: 12px;
    font-weight: 650;
}

[data-theme="light"] .edge-config-stage .config-section-nav-item.is-active {
    color: #111111 !important;
}

[data-theme="light"] .edge-config-stage .config-section-nav-item.is-active::after {
    right: 12px;
    left: 12px;
    height: 2px;
    background: var(--primary) !important;
}

[data-theme="light"] .edge-config-stage .config-console-content {
    padding: 18px 20px 20px;
    background: #fbfbfc;
    border-radius: 0 0 6px 6px;
}

[data-theme="light"] .section-overview-stats-grid.edge-overview-metrics {
    gap: 12px;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat {
    min-height: 66px !important;
    padding: 14px 16px !important;
    border-color: #dedfe3 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035) !important;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat-value {
    color: #111111 !important;
    font-size: 21px;
    font-weight: 760;
    letter-spacing: 0;
}

[data-theme="light"] .firewall-overview-shell .section-overview-stat-label {
    margin-top: 6px;
    color: #606268 !important;
    font-size: 11px;
    font-weight: 550;
    text-transform: none;
}

[data-theme="light"] .edge-overview-band,
[data-theme="light"] .leak-command,
[data-theme="light"] .leak-console .section-config-panel {
    padding: 16px !important;
    border-color: #dedfe3 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035) !important;
}

[data-theme="light"] .edge-overview-band-head {
    min-height: 22px;
    margin-bottom: 4px;
}

[data-theme="light"] .edge-overview-band-head h4,
[data-theme="light"] .section-panel-head h3,
[data-theme="light"] .leak-command h3,
[data-theme="light"] .leak-panel h3 {
    color: #171717 !important;
    font-size: 13px;
    font-weight: 720;
    letter-spacing: 0;
    text-transform: none;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .bot-overview-setting-card,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-card {
    padding: 14px !important;
    border-color: #e4e4e7 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .bot-overview-setting-label,
[data-theme="light"] .firewall-overview-shell .firewall-threat-snapshot .bot-overview-setting-label {
    margin: -14px -14px 10px;
    padding: 10px 14px;
    border-bottom-color: #ededf0 !important;
    background: #fafafa !important;
    color: #4d4f55 !important;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.07em;
}

[data-theme="light"] .firewall-overview-shell .bot-overview-setting-value {
    color: #111111 !important;
    font-size: 15px;
    font-weight: 720;
}

[data-theme="light"] .firewall-overview-shell .bot-aggregate-row {
    min-height: 34px;
    border-bottom-color: #eeeeef !important;
}

[data-theme="light"] .firewall-overview-shell .bot-aggregate-row span {
    color: #5f6268 !important;
}

[data-theme="light"] .firewall-overview-shell .bot-aggregate-row strong {
    color: #171717 !important;
    font-weight: 680;
}

[data-theme="light"] .firewall-overview-shell .edge-firewall-controls .section-mode-option.is-active,
[data-theme="light"] .firewall-overview-shell .edge-level-btn.is-active {
    background: #f5f5f5 !important;
    border-color: var(--primary) !important;
    box-shadow: inset 0 0 0 1px var(--primary) !important;
}

[data-theme="light"] .firewall-overview-shell .section-mode-icon,
[data-theme="light"] .edge-level-orb {
    color: #111111 !important;
}

[data-theme="light"] .config-table-wrap,
[data-theme="light"] .section-table-wrap {
    border-color: #dedfe3 !important;
    border-radius: var(--radius-sm, 2px);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025);
}

[data-theme="light"] .config-enterprise-table th,
[data-theme="light"] .section-table th,
[data-theme="light"] .section-th {
    height: 38px;
    padding: 0 14px !important;
    background: #f8f8f9 !important;
    border-bottom-color: #e4e4e7 !important;
    color: #55565a !important;
    font-size: 10px;
    font-weight: 760 !important;
    letter-spacing: 0.08em;
}

[data-theme="light"] .config-enterprise-table td,
[data-theme="light"] .section-table td,
[data-theme="light"] tbody td {
    height: 50px;
    padding: 10px 14px !important;
    border-bottom-color: #ededf0 !important;
    color: #171717 !important;
    font-family: var(--font-main) !important;
    font-size: 12px;
}

[data-theme="light"] .config-enterprise-table tbody tr:last-child td,
[data-theme="light"] .section-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

[data-theme="light"] .config-enterprise-table tbody tr:hover td,
[data-theme="light"] .section-table tbody tr:hover td {
    background: #fafafa !important;
}

[data-theme="light"] .config-table-primary {
    color: #111111 !important;
    font-size: 12px;
    font-weight: 720;
    letter-spacing: 0;
}

[data-theme="light"] .config-table-sub,
[data-theme="light"] .section-row-sub {
    color: #6b6f76 !important;
    font-size: 11px;
}

[data-theme="light"] .config-table-code {
    color: #2f3137 !important;
    font-family: var(--font-main) !important;
    font-size: 11px;
}

[data-theme="light"] .edge-config-stage .btn {
    border-radius: 4px;
    font-family: var(--font-main) !important;
}

[data-theme="light"] .edge-config-stage .btn-primary,
[data-theme="light"] .edge-config-stage .btn:not(.btn-outline):not(.btn-ghost):not(.btn-danger):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-success) {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

[data-theme="light"] .edge-config-stage .btn-ghost,
[data-theme="light"] .edge-config-stage .btn-outline {
    background: #ffffff !important;
    border-color: #d8dadd !important;
    color: #232323 !important;
}

[data-theme="light"] .config-table-actions .btn-ghost {
    min-width: 44px;
}

[data-theme="light"] .config-status-pill,
[data-theme="light"] .section-status-badge,
[data-theme="light"] .status-badge {
    min-height: 20px;
    border-radius: 4px;
    font-size: 10px;
    letter-spacing: 0.01em;
}

[data-theme="light"] .config-status-pill.tone-success,
[data-theme="light"] .section-status-badge.status-success,
[data-theme="light"] .status-badge.enabled {
    background: #f4f4f5 !important;
    border-color: #d4d4d8 !important;
    color: #171717 !important;
}

[data-theme="light"] .leak-status-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

[data-theme="light"] .leak-status-tile {
    min-height: 58px;
    padding: 10px 12px;
    border-color: #dedfe3 !important;
    border-radius: 6px;
    background: #ffffff !important;
}

[data-theme="light"] .leak-status-tile span {
    color: #686b72 !important;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.06em;
}

[data-theme="light"] .leak-status-tile strong {
    margin-top: 4px;
    color: #111111 !important;
    font-size: 15px;
    font-weight: 740;
}

[data-theme="light"] .leak-workspace {
    gap: 14px;
}

[data-theme="light"] .leak-pack-card {
    padding: 14px;
    border-color: #dedfe3 !important;
    border-radius: 6px;
    background: #ffffff !important;
}

[data-theme="light"] .leak-pack-categories span,
[data-theme="light"] .section-tag,
[data-theme="light"] .tag {
    border-color: #dedfe3 !important;
    background: #fafafa !important;
    color: #55565a !important;
}

/* WAF v2 command-console layout. */
[data-theme="light"] .edge-pro-overview {
    display: grid;
    gap: 14px;
}

[data-theme="light"] .edge-command-panel,
[data-theme="light"] .edge-control-plane,
[data-theme="light"] .edge-telemetry-panel,
[data-theme="light"] .edge-side-card {
    border: 1px solid #dedfe3;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035);
}

[data-theme="light"] .edge-command-panel {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
}

[data-theme="light"] .edge-command-primary {
    display: grid;
    gap: 4px;
}

[data-theme="light"] .edge-command-kicker,
[data-theme="light"] .edge-command-primary span,
[data-theme="light"] .edge-command-metrics span,
[data-theme="light"] .edge-control-label span,
[data-theme="light"] .edge-panel-title-row span {
    color: #686b72;
    font-size: 11px;
    font-weight: 600;
}

[data-theme="light"] .edge-command-kicker {
    color: #4b4d52;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme="light"] .edge-command-primary strong {
    color: #111111;
    font-size: 28px;
    font-weight: 780;
    line-height: 1.05;
}

[data-theme="light"] .edge-command-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #ededf0;
    border-radius: 5px;
    overflow: hidden;
    background: #fafafa;
}

[data-theme="light"] .edge-command-metrics div {
    display: grid;
    gap: 4px;
    min-height: 58px;
    padding: 10px 12px;
    border-right: 1px solid #ededf0;
}

[data-theme="light"] .edge-command-metrics div:last-child {
    border-right: 0;
}

[data-theme="light"] .edge-command-metrics strong {
    color: #111111;
    font-size: 18px;
    font-weight: 760;
}

[data-theme="light"] .edge-command-metrics strong.is-danger {
    color: #b91c1c;
}

[data-theme="light"] .edge-control-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr);
    gap: 14px;
    align-items: start;
}

[data-theme="light"] .edge-control-plane,
[data-theme="light"] .edge-telemetry-panel,
[data-theme="light"] .edge-side-card {
    padding: 16px;
}

[data-theme="light"] .edge-telemetry-panel {
    display: grid;
    gap: 12px;
    background: #fbfbfc;
}

[data-theme="light"] .edge-side-card {
    box-shadow: none;
}

[data-theme="light"] .edge-panel-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

[data-theme="light"] .edge-panel-title-row h3 {
    margin: 0 0 3px;
    color: #111111;
    font-size: 14px;
    font-weight: 740;
    letter-spacing: 0;
}

[data-theme="light"] .edge-control-section {
    display: grid;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid #ededf0;
}

[data-theme="light"] .edge-control-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

[data-theme="light"] .edge-control-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

[data-theme="light"] .edge-control-label strong {
    color: #111111;
    font-size: 13px;
    font-weight: 720;
}

[data-theme="light"] .edge-control-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    border-top: 1px solid #ededf0;
}

[data-theme="light"] .edge-control-split .edge-control-section {
    border-top: 0;
}

[data-theme="light"] .edge-mode-grid {
    background: transparent !important;
    gap: 8px;
}

[data-theme="light"] .edge-mode-grid .section-mode-option {
    min-height: 70px;
    align-items: flex-start;
    padding: 12px;
}

[data-theme="light"] .edge-mode-grid .section-mode-icon {
    margin-bottom: 6px;
}

[data-theme="light"] .edge-level-grid {
    gap: 8px;
}

[data-theme="light"] .edge-profile-select,
[data-theme="light"] .edge-threshold-toggle {
    min-height: 42px;
    border-radius: 5px;
}

[data-theme="light"] .edge-fact-list {
    display: grid;
}

[data-theme="light"] .edge-fact-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    border-top: 1px solid #ededf0;
}

[data-theme="light"] .edge-fact-list > div:first-child {
    border-top: 0;
}

[data-theme="light"] .edge-fact-list span {
    color: #62656c;
    font-size: 12px;
}

[data-theme="light"] .edge-fact-list strong {
    color: #111111;
    font-size: 12px;
    font-weight: 720;
}

[data-theme="light"] .edge-empty-line {
    justify-content: center !important;
    min-height: 52px !important;
    color: #686b72;
    border: 1px dashed #d6d6da !important;
    border-radius: 5px;
}

[data-theme="light"] .edge-rules-grid {
    gap: 8px;
}

[data-theme="light"] .edge-rule-link {
    min-height: 62px;
    align-items: flex-start;
    padding: 11px 12px;
    border-radius: 5px;
}

[data-theme="light"] .edge-rule-link strong {
    font-size: 18px;
}

[data-theme="light"] .edge-rule-link span {
    font-size: 11px;
    text-transform: none;
}

/* Reduce table/empty-state dead space across config pages. */
[data-theme="light"] .config-table-empty-cell {
    height: auto !important;
    padding: 24px !important;
}

[data-theme="light"] .config-table-empty-cell .empty-state,
[data-theme="light"] .section-excl-empty-cell,
[data-theme="light"] .empty-state {
    min-height: 0;
    padding: 18px;
}

[data-theme="light"] .empty-state h3 {
    font-size: 13px;
}

[data-theme="light"] .empty-state p {
    font-size: 12px;
}

[data-theme="light"] .section-managed-policy-list {
    display: grid;
    gap: 10px;
}

[data-theme="light"] .section-managed-policy-group {
    border-radius: 6px !important;
    overflow: hidden;
}

[data-theme="light"] .section-managed-policy-summary {
    min-height: 64px;
    padding: 12px 14px !important;
}

[data-theme="light"] .section-managed-policy-title {
    color: #111111;
    font-size: 13px;
    font-weight: 740;
}

[data-theme="light"] .section-managed-policy-desc {
    color: #686b72;
    font-size: 11px;
}

[data-theme="light"] .section-row-icon {
    display: none;
}

[data-theme="light"] .section-managed-policy-body {
    background: #fbfbfc !important;
    border-top: 1px solid #ededf0;
}

@media (max-width: 1180px) {
    [data-theme="light"] .edge-command-panel,
    [data-theme="light"] .edge-control-layout,
    [data-theme="light"] .edge-control-split {
        grid-template-columns: 1fr;
    }

    [data-theme="light"] .edge-command-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* WAF Core reset: AWS console structure with Apple-grade restraint. */
[data-theme="light"] #waf-config-content {
    padding: 0 !important;
    background: transparent !important;
}

[data-theme="light"] .edge-config-stage {
    width: min(100%, 1480px);
    min-height: calc(100vh - 190px);
    margin: 0 auto;
    overflow: hidden;
    background: #ffffff !important;
    border: 1px solid #d7dbe0 !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07) !important;
}

[data-theme="light"] .edge-config-stage .config-console-header {
    min-height: 72px;
    padding: 18px 22px 14px !important;
    background: #ffffff !important;
    border-bottom: 0 !important;
}

[data-theme="light"] .edge-config-stage .config-console-title-row {
    gap: 10px;
}

[data-theme="light"] .edge-config-stage .config-console-title {
    color: #101418 !important;
    font-size: 19px !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

[data-theme="light"] .edge-config-stage .config-console-category,
[data-theme="light"] .edge-config-stage .config-console-meta {
    color: #5c6670 !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

[data-theme="light"] .edge-config-stage .config-console-category::before {
    color: #a1a8b0;
}

[data-theme="light"] .edge-config-stage .config-section-nav {
    min-height: 42px;
    padding: 0 22px !important;
    gap: 20px !important;
    background: #ffffff !important;
    border-top: 1px solid #eff1f3 !important;
    border-bottom: 1px solid #dfe3e8 !important;
}

[data-theme="light"] .edge-config-stage .config-section-nav-item {
    height: 42px !important;
    padding: 0 !important;
    color: #424b57 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

[data-theme="light"] .edge-config-stage .config-section-nav-item:hover,
[data-theme="light"] .edge-config-stage .config-section-nav-item.is-active {
    color: #101418 !important;
}

[data-theme="light"] .edge-config-stage .config-section-nav-item.is-active::after {
    height: 2px !important;
    background: var(--primary) !important;
    border-radius: 999px !important;
}

[data-theme="light"] .edge-config-stage .config-console-content {
    min-height: calc(100vh - 306px);
    padding: 18px !important;
    background: #f6f7f8 !important;
}

[data-theme="light"] .edge-policy-console {
    display: grid;
    gap: 16px;
}

[data-theme="light"] .edge-policy-statusbar {
    display: grid;
    grid-template-columns: 1.24fr repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d7dbe0;
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

[data-theme="light"] .edge-policy-statusbar > div {
    display: grid;
    gap: 5px;
    min-height: 78px;
    padding: 15px 17px;
    border-left: 1px solid #edf0f2;
}

[data-theme="light"] .edge-policy-statusbar > div:first-child {
    border-left: 0;
    background: #fbfcfd;
}

[data-theme="light"] .edge-policy-label,
[data-theme="light"] .edge-policy-field > span,
[data-theme="light"] .edge-policy-list span {
    color: #66727e;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

[data-theme="light"] .edge-policy-statusbar strong {
    color: #101418;
    font-size: 18px;
    font-weight: 760;
    letter-spacing: 0;
}

[data-theme="light"] .edge-policy-statusbar > div:first-child strong {
    font-size: 24px;
    line-height: 1.05;
}

[data-theme="light"] .edge-policy-statusbar strong.is-danger {
    color: #b42318;
}

[data-theme="light"] .edge-policy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 348px;
    gap: 16px;
    align-items: start;
}

[data-theme="light"] .edge-policy-main,
[data-theme="light"] .edge-policy-aside {
    display: grid;
    gap: 14px;
}

[data-theme="light"] .edge-policy-section,
[data-theme="light"] .config-toolbar,
[data-theme="light"] .config-table-wrap,
[data-theme="light"] .config-metric-strip,
[data-theme="light"] .section-managed-policy-group,
[data-theme="light"] .leak-command,
[data-theme="light"] .leak-console .section-config-panel,
[data-theme="light"] .leak-status-tile,
[data-theme="light"] .leak-pack-card,
[data-theme="light"] .section-config-panel,
[data-theme="light"] .config-panel {
    background: #ffffff !important;
    border: 1px solid #d7dbe0 !important;
    border-radius: var(--radius-sm, 2px) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035) !important;
}

[data-theme="light"] .edge-policy-section {
    padding: 16px;
}

[data-theme="light"] .edge-policy-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

[data-theme="light"] .edge-policy-section-head h3 {
    margin: 0 0 3px;
    color: #101418;
    font-size: 14px;
    font-weight: 760;
    letter-spacing: 0;
}

[data-theme="light"] .edge-policy-section-head span {
    color: #66727e;
    font-size: 12px;
    font-weight: 500;
}

[data-theme="light"] .edge-policy-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

[data-theme="light"] .edge-policy-field {
    display: grid;
    gap: 7px;
}

[data-theme="light"] .edge-policy-list {
    display: grid;
}

[data-theme="light"] .edge-policy-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 38px;
    border-top: 1px solid #edf0f2;
}

[data-theme="light"] .edge-policy-list > div:first-child {
    border-top: 0;
}

[data-theme="light"] .edge-policy-list strong {
    color: #101418;
    font-size: 12px;
    font-weight: 720;
}

[data-theme="light"] .edge-policy-empty {
    justify-content: center !important;
    min-height: 64px !important;
    color: #66727e;
    border: 1px dashed #cfd5dc !important;
    border-radius: 8px;
    background: #fbfcfd;
}

[data-theme="light"] .edge-config-stage .btn,
[data-theme="light"] .edge-config-stage button,
[data-theme="light"] .edge-config-stage select,
[data-theme="light"] .edge-config-stage input {
    letter-spacing: 0 !important;
}

[data-theme="light"] .edge-config-stage .btn {
    min-height: 32px;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

[data-theme="light"] .edge-config-stage .btn-primary,
[data-theme="light"] .edge-config-stage .btn:not(.btn-outline):not(.btn-ghost):not(.btn-danger):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-success) {
    color: #ffffff !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: none !important;
}

[data-theme="light"] .edge-config-stage .btn-ghost,
[data-theme="light"] .edge-config-stage .btn-outline {
    color: #101418 !important;
    background: #ffffff !important;
    border-color: #cfd5dc !important;
}

[data-theme="light"] .edge-mode-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
    background: transparent !important;
}

[data-theme="light"] .edge-mode-grid .section-mode-option {
    min-height: 74px;
    align-items: flex-start;
    padding: 13px !important;
    background: #ffffff !important;
    border: 1px solid #d7dbe0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

[data-theme="light"] .edge-mode-grid .section-mode-option:hover {
    border-color: #aeb7c2 !important;
    background: #fbfcfd !important;
}

[data-theme="light"] .edge-mode-grid .section-mode-option.is-active {
    background: #f9fafb !important;
    border-color: var(--primary) !important;
    box-shadow: inset 0 0 0 1px var(--primary) !important;
}

[data-theme="light"] .edge-mode-grid .section-mode-option.tone-danger.is-active {
    border-color: #b42318 !important;
    box-shadow: inset 0 0 0 1px #b42318 !important;
}

[data-theme="light"] .edge-mode-grid .section-mode-title,
[data-theme="light"] .edge-mode-grid .section-mode-copy strong {
    color: #101418 !important;
    font-size: 13px !important;
}

[data-theme="light"] .edge-mode-grid .section-mode-desc,
[data-theme="light"] .edge-mode-grid .section-mode-copy span {
    color: #66727e !important;
    font-size: 11px !important;
}

[data-theme="light"] .edge-level-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

[data-theme="light"] .edge-profile-select,
[data-theme="light"] .edge-threshold-toggle {
    min-height: 44px;
    padding: 0 12px !important;
}

[data-theme="light"] .edge-level-btn.is-active {
    background: #f9fafb !important;
    border-color: var(--primary) !important;
    box-shadow: inset 0 0 0 1px var(--primary) !important;
}

[data-theme="light"] .edge-level-orb {
    color: #101418 !important;
    background: #f3f4f6 !important;
    border-color: #cfd5dc !important;
}

[data-theme="light"] .edge-level-copy strong {
    color: #101418 !important;
    font-size: 13px !important;
}

[data-theme="light"] .edge-level-copy span {
    color: #66727e !important;
    font-size: 11px !important;
}

[data-theme="light"] .edge-rules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

[data-theme="light"] .edge-rule-link {
    min-height: 66px;
    align-items: flex-start;
    padding: 12px !important;
}

[data-theme="light"] .edge-rule-link:hover {
    background: #fbfcfd !important;
    border-color: #aeb7c2 !important;
}

[data-theme="light"] .edge-rule-link strong {
    color: #101418 !important;
    font-size: 19px !important;
    font-weight: 760 !important;
}

[data-theme="light"] .edge-rule-link span {
    color: #66727e !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    text-transform: none !important;
}

[data-theme="light"] .section-save-actions {
    justify-content: flex-end;
    margin-top: 0;
    padding-top: 14px;
    border-top: 1px solid #edf0f2;
}

[data-theme="light"] .edge-config-stage .section-advanced-box {
    margin-top: 12px;
    background: #fbfcfd !important;
    border: 1px solid #d7dbe0 !important;
    border-radius: 8px !important;
}

[data-theme="light"] .edge-config-stage .config-toolbar {
    min-height: 58px;
    padding: 12px 16px !important;
}

[data-theme="light"] .edge-config-stage .config-toolbar h3,
[data-theme="light"] .edge-config-stage .config-toolbar strong,
[data-theme="light"] .edge-config-stage .section-config-title,
[data-theme="light"] .edge-config-stage .config-panel-title {
    color: #101418 !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

[data-theme="light"] .edge-config-stage .config-toolbar p,
[data-theme="light"] .edge-config-stage .section-config-description,
[data-theme="light"] .edge-config-stage .config-panel-description {
    color: #66727e !important;
    font-size: 12px !important;
}

[data-theme="light"] .edge-config-stage .config-enterprise-table,
[data-theme="light"] .edge-config-stage .section-table {
    background: #ffffff !important;
    border-collapse: separate;
    border-spacing: 0;
}

[data-theme="light"] .edge-config-stage .config-enterprise-table th,
[data-theme="light"] .edge-config-stage .section-table th,
[data-theme="light"] .edge-config-stage .section-th {
    height: 40px !important;
    padding: 0 14px !important;
    color: #47515d !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    letter-spacing: 0.04em !important;
    background: #f8f9fb !important;
    border-bottom: 1px solid #d7dbe0 !important;
}

[data-theme="light"] .edge-config-stage .config-enterprise-table td,
[data-theme="light"] .edge-config-stage .section-table td,
[data-theme="light"] .edge-config-stage .section-td {
    min-height: 52px;
    padding: 12px 14px !important;
    color: #101418 !important;
    border-bottom: 1px solid #edf0f2 !important;
}

[data-theme="light"] .edge-config-stage .config-enterprise-table tr:hover td,
[data-theme="light"] .edge-config-stage .section-table tr:hover td {
    background: #fbfcfd !important;
}

[data-theme="light"] .edge-config-stage .status-badge,
[data-theme="light"] .edge-config-stage .section-status-pill,
[data-theme="light"] .edge-config-stage .config-badge {
    min-height: 22px;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

[data-theme="light"] .edge-config-stage .section-managed-policy-list,
[data-theme="light"] .edge-config-stage .leak-grid,
[data-theme="light"] .edge-config-stage .leak-console {
    gap: 12px !important;
}

[data-theme="light"] .edge-config-stage .section-managed-policy-summary {
    min-height: 60px;
    padding: 12px 14px !important;
    background: #ffffff !important;
}

[data-theme="light"] .edge-config-stage .section-managed-policy-title,
[data-theme="light"] .edge-config-stage .leak-pack-title,
[data-theme="light"] .edge-config-stage .leak-status-title {
    color: #101418 !important;
    font-size: 13px !important;
    font-weight: 760 !important;
}

[data-theme="light"] .edge-config-stage .section-managed-policy-desc,
[data-theme="light"] .edge-config-stage .leak-pack-description,
[data-theme="light"] .edge-config-stage .leak-status-description {
    color: #66727e !important;
    font-size: 12px !important;
}

[data-theme="light"] .edge-config-stage .section-panel,
[data-theme="light"] .edge-config-stage .section-editor-card,
[data-theme="light"] .edge-config-stage .section-preview-card,
[data-theme="light"] .edge-config-stage .section-condition-row {
    background: #ffffff !important;
    border: 1px solid #d7dbe0 !important;
    border-radius: 9px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035) !important;
}

[data-theme="light"] .edge-config-stage .section-editor-compact-head {
    margin-bottom: 14px !important;
    padding: 14px !important;
}

[data-theme="light"] .edge-config-stage .section-editor-card,
[data-theme="light"] .edge-config-stage .section-preview-card {
    margin-bottom: 14px !important;
    padding: 16px !important;
}

[data-theme="light"] .edge-config-stage .section-editor-section-title,
[data-theme="light"] .edge-config-stage .section-preview-title,
[data-theme="light"] .edge-config-stage .section-condition-title {
    color: #101418 !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

[data-theme="light"] .edge-config-stage .section-form-label {
    color: #66727e !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

[data-theme="light"] .edge-config-stage .section-rule-identity-grid,
[data-theme="light"] .edge-config-stage .section-rule-identity-grid-secondary,
[data-theme="light"] .edge-config-stage .section-condition-grid {
    gap: 12px !important;
}

[data-theme="light"] .edge-config-stage .section-condition-row {
    padding: 14px !important;
}

[data-theme="light"] .edge-config-stage .section-condition-remove {
    color: #101418 !important;
    background: #ffffff !important;
    border: 1px solid #cfd5dc !important;
    border-radius: 6px !important;
}

[data-theme="light"] .edge-config-stage .section-transform-chip {
    color: #47515d !important;
    background: #f8f9fb !important;
    border: 1px solid #d7dbe0 !important;
    border-radius: 5px !important;
}

[data-theme="light"] .edge-config-stage .section-transform-chip:has(input:checked),
[data-theme="light"] .edge-config-stage .section-editor-mode-btn.is-active {
    color: #ffffff !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

[data-theme="light"] .edge-config-stage .section-input:focus,
[data-theme="light"] .edge-config-stage input:focus,
[data-theme="light"] .edge-config-stage select:focus,
[data-theme="light"] .edge-config-stage textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(16, 20, 24, 0.12) !important;
    outline: none !important;
}

[data-theme="light"] .edge-config-stage .section-preview-code {
    color: #101418 !important;
    background: #f8f9fb !important;
    border: 1px solid #d7dbe0 !important;
    border-radius: 8px !important;
}

[data-theme="light"] .edge-config-stage .section-editor-footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 18px -18px -18px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid #d7dbe0;
    backdrop-filter: blur(12px);
}

[data-theme="light"] .section-modal-overlay {
    background: rgba(16, 20, 24, 0.48) !important;
    backdrop-filter: blur(8px);
}

[data-theme="light"] .section-modal-panel,
[data-theme="light"] .section-modal-dialog {
    border: 1px solid #d7dbe0 !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22) !important;
}

[data-theme="light"] .section-modal-header,
[data-theme="light"] .section-modal-footer {
    background: #ffffff !important;
    border-color: #dfe3e8 !important;
}

[data-theme="light"] .section-modal-title {
    color: #101418 !important;
    font-size: 17px !important;
    font-weight: 760 !important;
}

[data-theme="light"] .section-modal-subtitle,
[data-theme="light"] .section-modal-description {
    color: #66727e !important;
    font-size: 12px !important;
}

@media (max-width: 1180px) {
    [data-theme="light"] .edge-policy-grid,
    [data-theme="light"] .edge-policy-form-grid {
        grid-template-columns: 1fr;
    }

    [data-theme="light"] .edge-policy-statusbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    [data-theme="light"] #waf-config-content {
        padding: 0 !important;
    }

    [data-theme="light"] .edge-config-stage .config-section-nav {
        overflow-x: auto;
    }

    [data-theme="light"] .edge-policy-statusbar,
    [data-theme="light"] .edge-mode-grid,
    [data-theme="light"] .edge-level-grid,
    [data-theme="light"] .edge-rules-grid {
        grid-template-columns: 1fr;
    }
}

/* WAF Core enterprise policy refinements. */
[data-theme="light"] .edge-policy-control-grid {
    grid-template-columns: minmax(220px, 1.4fr) minmax(190px, 1fr) minmax(170px, 0.8fr);
}

[data-theme="light"] .edge-policy-switch-field {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    min-height: 58px;
}

[data-theme="light"] .section-managed-toolbar {
    align-items: center;
    border: 1px solid #d9dee5;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 18, 20, 0.04);
}

[data-theme="light"] .section-managed-toolbar .config-toolbar-search {
    min-width: 260px;
}

[data-theme="light"] .config-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[data-theme="light"] .config-scope-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    max-width: 220px;
    padding: 0 8px;
    overflow: hidden;
    border: 1px solid #d9dee5;
    border-radius: 6px;
    background: #f6f7f9;
    color: #47515d;
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="light"] .edge-exclusions-table td:nth-child(2) {
    min-width: 260px;
}

[data-theme="light"] .edge-exclusions-table .config-table-actions {
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 1180px) {
    [data-theme="light"] .edge-policy-control-grid {
        grid-template-columns: 1fr;
    }

    [data-theme="light"] .section-managed-toolbar .config-toolbar-search {
        min-width: 0;
    }
}

/* Retired WAF-specific workspace treatments. Kept isolated while older views are phased out. */
@media not all {
[data-theme="light"] #waf-config-content {
    padding: 8px 0 24px !important;
    background: #f6f7f9 !important;
}

[data-theme="light"] .edge-console-shell {
    width: 100%;
}

[data-theme="light"] .edge-config-stage {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 88px) !important;
    margin: 0 !important;
    overflow: visible !important;
    border-radius: 8px !important;
    border-color: #cfd5dc !important;
    box-shadow: 0 1px 2px rgba(16, 18, 20, 0.035) !important;
}

[data-theme="light"] .edge-config-stage .config-console-header {
    min-height: 68px !important;
    padding: 15px 28px 12px !important;
}

[data-theme="light"] .edge-config-stage .config-section-nav {
    min-height: 46px !important;
    padding: 0 28px !important;
    gap: 28px !important;
}

[data-theme="light"] .edge-config-stage .config-section-nav-item.is-active::after {
    background: var(--brand-orange) !important;
}

[data-theme="light"] .edge-config-stage .config-console-content {
    min-height: calc(100vh - 222px) !important;
    padding: 18px 22px 22px !important;
    overflow: visible !important;
}

[data-theme="light"] .edge-policy-console {
    gap: 18px;
}

[data-theme="light"] .edge-policy-statusbar {
    grid-template-columns: minmax(240px, 1.15fr) repeat(4, minmax(150px, 1fr));
}

[data-theme="light"] .edge-policy-statusbar > div {
    min-height: 88px;
    padding: 17px 20px;
}

[data-theme="light"] .edge-policy-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 400px);
    gap: 18px;
}

[data-theme="light"] .edge-policy-section {
    padding: 20px !important;
}

[data-theme="light"] .edge-mode-grid .section-mode-option {
    min-height: 92px;
    align-items: center;
    justify-content: center;
}

[data-theme="light"] .edge-mode-grid .section-mode-option.is-active {
    border-color: var(--primary) !important;
    box-shadow: inset 0 0 0 1px var(--primary), inset 0 3px 0 var(--brand-orange) !important;
}

[data-theme="light"] .edge-mode-grid .section-mode-option.tone-danger.is-active {
    border-color: var(--primary) !important;
    box-shadow: inset 0 0 0 1px var(--primary), inset 0 3px 0 var(--brand-orange) !important;
}

[data-theme="light"] .edge-mode-grid .section-mode-option.tone-danger.is-active .section-mode-icon,
[data-theme="light"] .edge-mode-grid .section-mode-option.tone-danger.is-active .section-mode-title {
    color: #101214 !important;
}

[data-theme="light"] .edge-policy-control-grid {
    grid-template-columns: minmax(320px, 1.55fr) minmax(240px, 1fr) minmax(190px, 0.72fr);
}

[data-theme="light"] .edge-policy-switch-field {
    min-height: 48px;
    padding: 0 2px;
}

[data-theme="light"] .edge-level-btn.is-active {
    border-color: var(--primary) !important;
    box-shadow: inset 0 0 0 1px var(--primary), inset 0 3px 0 var(--brand-orange) !important;
}

[data-theme="light"] .edge-policy-aside .edge-policy-section {
    min-height: 0;
}

[data-theme="light"] .edge-policy-aside .edge-policy-list > div {
    min-height: 40px;
}

@media (min-width: 1760px) {
    [data-theme="light"] .edge-policy-grid {
        grid-template-columns: minmax(0, 1fr) minmax(390px, 430px);
    }
}

@media (max-width: 1180px) {
    [data-theme="light"] .edge-config-stage {
        min-height: auto !important;
    }

    [data-theme="light"] .edge-policy-grid,
    [data-theme="light"] .edge-policy-control-grid {
        grid-template-columns: 1fr;
    }
}

/* WAF Core shared-page alignment: match the rest of config pages. */
[data-theme="light"] #waf-config-content {
    padding: 0 !important;
    background: transparent !important;
}

[data-theme="light"] .edge-waf-page {
    display: grid;
    gap: 14px;
}

[data-theme="light"] .edge-waf-tabs {
    margin-bottom: 0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    border-color: #d9dee5 !important;
    box-shadow: 0 1px 2px rgba(16, 18, 20, 0.035) !important;
}

[data-theme="light"] .edge-waf-tabs .security-nav-tab {
    border-radius: 4px !important;
    color: #47515d !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

[data-theme="light"] .edge-waf-tabs .security-nav-tab svg {
    color: #69727d !important;
}

[data-theme="light"] .edge-waf-tabs .security-nav-tab:hover {
    color: #101214 !important;
    background: #f6f7f9 !important;
}

[data-theme="light"] .edge-waf-tabs .security-nav-tab.active,
[data-theme="light"] .edge-waf-tabs .security-nav-tab.is-active {
    color: #101214 !important;
    background: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: inset 0 -2px 0 var(--brand-orange) !important;
}

[data-theme="light"] .edge-waf-tabs .security-nav-tab.active svg,
[data-theme="light"] .edge-waf-tabs .security-nav-tab.is-active svg {
    color: var(--brand-orange) !important;
}

[data-theme="light"] .edge-waf-page .edge-config-stage {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid #d9dee5 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(16, 18, 20, 0.035) !important;
}

[data-theme="light"] .edge-waf-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 50px;
    padding: 10px 16px;
    border-bottom: 1px solid #e7ebf0;
    background: #ffffff;
}

[data-theme="light"] .edge-waf-statuscopy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    min-width: 0;
    color: #69727d;
    font-size: 12px;
    line-height: 1.4;
}

[data-theme="light"] .edge-waf-statuscopy span {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 10px;
    border-left: 1px solid #d9dee5;
    white-space: nowrap;
}

[data-theme="light"] .edge-waf-statuscopy span:first-child {
    padding-left: 0;
    border-left: 0;
    color: #101214;
    font-weight: 700;
}

[data-theme="light"] .edge-waf-page .config-console-content {
    min-height: 0 !important;
    padding: 16px !important;
    background: #ffffff !important;
    overflow: visible !important;
}

[data-theme="light"] .edge-waf-page .edge-policy-console {
    gap: 14px;
}

[data-theme="light"] .edge-waf-page .edge-policy-statusbar,
[data-theme="light"] .edge-waf-page .edge-policy-section,
[data-theme="light"] .edge-waf-page .config-toolbar,
[data-theme="light"] .edge-waf-page .config-table-wrap,
[data-theme="light"] .edge-waf-page .config-metric-strip,
[data-theme="light"] .edge-waf-page .section-managed-policy-group,
[data-theme="light"] .edge-waf-page .leak-command,
[data-theme="light"] .edge-waf-page .leak-console .section-config-panel,
[data-theme="light"] .edge-waf-page .leak-status-tile,
[data-theme="light"] .edge-waf-page .leak-pack-card,
[data-theme="light"] .edge-waf-page .section-config-panel,
[data-theme="light"] .edge-waf-page .config-panel,
[data-theme="light"] .edge-waf-page .section-panel,
[data-theme="light"] .edge-waf-page .section-editor-card,
[data-theme="light"] .edge-waf-page .section-preview-card,
[data-theme="light"] .edge-waf-page .section-condition-row {
    border-radius: var(--radius-sm, 2px) !important;
    border-color: #d9dee5 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

[data-theme="light"] .edge-waf-page .edge-policy-statusbar {
    grid-template-columns: minmax(210px, 1.15fr) repeat(4, minmax(130px, 1fr));
    overflow: hidden;
}

[data-theme="light"] .edge-waf-page .edge-policy-statusbar > div {
    min-height: 74px;
    padding: 14px 16px;
}

[data-theme="light"] .edge-waf-page .edge-policy-grid {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 360px);
    gap: 14px;
}

[data-theme="light"] .edge-waf-page .edge-policy-main,
[data-theme="light"] .edge-waf-page .edge-policy-aside {
    gap: 14px;
}

[data-theme="light"] .edge-waf-page .edge-policy-section {
    padding: 16px !important;
}

[data-theme="light"] .edge-waf-page .edge-policy-section-head {
    margin-bottom: 12px;
}

[data-theme="light"] .edge-waf-page .edge-policy-section-head h3 {
    font-size: 13px !important;
}

[data-theme="light"] .edge-waf-page .edge-mode-grid .section-mode-option {
    min-height: 76px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 13px 14px !important;
}

[data-theme="light"] .edge-waf-page .edge-mode-grid .section-mode-option.is-active,
[data-theme="light"] .edge-waf-page .edge-mode-grid .section-mode-option.tone-danger.is-active,
[data-theme="light"] .edge-waf-page .edge-level-btn.is-active {
    border-color: var(--primary) !important;
    background: #ffffff !important;
    box-shadow: inset 0 -2px 0 var(--brand-orange) !important;
}

[data-theme="light"] .edge-waf-page .edge-policy-control-grid {
    grid-template-columns: minmax(260px, 1.35fr) minmax(210px, 1fr) minmax(180px, 0.75fr);
}

[data-theme="light"] .edge-waf-page .edge-rule-link {
    min-height: 58px !important;
}

[data-theme="light"] .edge-waf-page .section-save-actions {
    padding-top: 12px;
}

@media (min-width: 1760px) {
    [data-theme="light"] .edge-waf-page .edge-policy-grid {
        grid-template-columns: minmax(0, 1fr) minmax(350px, 380px);
    }
}

@media (max-width: 1180px) {
    [data-theme="light"] .edge-waf-page .edge-policy-grid,
    [data-theme="light"] .edge-waf-page .edge-policy-control-grid {
        grid-template-columns: 1fr;
    }

    [data-theme="light"] .edge-waf-page .edge-policy-statusbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
}

/* WAF Core uses the same shared configuration composition as Bot Protection. */
.security-firewall-policy-overview .section-overview-sub {
    margin-bottom: 0;
}

.security-firewall-policy-overview .section-overview-stats-grid {
    margin-bottom: 0;
}

.security-firewall-policy-overview .bot-overview-setting-card {
    border-radius: var(--radius);
    box-shadow: none;
}

.security-firewall-policy-overview .security-firewall-mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.security-firewall-policy-overview .security-firewall-mode-grid .section-mode-option {
    min-height: 58px;
    padding: 9px 6px;
    border-radius: var(--radius-sm);
}

.security-firewall-policy-overview .security-firewall-mode-grid .section-mode-option.is-active {
    border-color: var(--text-main);
    background: var(--bg-card);
    box-shadow: inset 0 -2px 0 var(--primary);
}

.security-firewall-policy-overview .section-input {
    width: 100%;
    min-height: 38px;
    border-radius: var(--radius-sm);
}

.security-firewall-policy-overview .section-save-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.security-firewall-inventory-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.security-firewall-inventory-link:hover span {
    color: var(--primary);
}

.security-firewall-inventory-link span {
    color: var(--text-muted);
    font-size: 12px;
}

.security-firewall-threat-summary {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .security-firewall-policy-operations {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Edition Feature Gate: Upgrade Banner + Locked Tab Styles
   ============================================================ */

/* Upgrade banner — shown in place of locked section/tab content */
.upgrade-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 32px 28px;
    border: 1px solid var(--border, #2a2f3a);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-depth, #0f1117);
    margin: 8px 0;
}

.upgrade-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    opacity: 0.9;
}

.upgrade-banner-icon svg {
    width: 22px;
    height: 22px;
}

.upgrade-banner-body {
    flex: 1;
    min-width: 0;
}

.upgrade-banner-title {
    color: var(--text-main, #f0f2f5);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.3;
}

.upgrade-banner-sub {
    color: var(--text-muted, #8090a8);
    font-size: 13px;
    line-height: 1.5;
}

.upgrade-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 7px 12px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.upgrade-banner-badge svg {
    width: 12px;
    height: 12px;
}

/* Locked tab button state */
.btn-tab.tab-locked {
    opacity: 0.72;
    position: relative;
}

.btn-tab.tab-locked:hover {
    opacity: 0.9;
}

/* Lock badge on tab button */
.tab-lock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.75;
    color: var(--text-muted, #8090a8);
}

.tab-lock-badge svg {
    width: 11px;
    height: 11px;
}

/* Light theme adjustments */
[data-theme="light"] .upgrade-banner {
    background: #f8fafc;
    border-color: #dde5ef;
}

[data-theme="light"] .upgrade-banner-title {
    color: #0f172a;
}

[data-theme="light"] .upgrade-banner-sub {
    color: #526173;
}

@media (max-width: 640px) {
    .upgrade-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px 16px;
    }
}

/* =============================================================================
   OPERATOR SECTION TEMPLATE
   Shared line-divided config surface used by App Security and future sections.
   ============================================================================= */

.operator-frame {
    --operator-actionbar-h: 64px;
    min-height: 100%;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
}

.operator-frame-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px 18px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.operator-frame-title-block {
    min-width: 0;
    max-width: 980px;
}

.operator-frame-kicker {
    margin-bottom: 7px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.operator-frame-title {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 760;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.operator-frame-subtitle {
    max-width: 1120px;
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.operator-frame-meta,
.operator-frame-status,
.operator-frame-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.operator-line-tabs {
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 52px;
    padding: 0 32px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    overflow-x: auto;
    scrollbar-width: thin;
}

.operator-line-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 52px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 560;
    white-space: nowrap;
    cursor: pointer;
}

.operator-line-tab:hover {
    color: var(--text-main);
}

.operator-line-tab.is-active {
    color: var(--text-main);
    font-weight: 650;
}

.operator-line-tab.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--operator-link, var(--primary));
}

.operator-line-tab-icon,
.operator-line-tab-icon svg {
    width: 15px;
    height: 15px;
}

.operator-line-tabs-scroll-hint {
    display: none;
}

@media (max-width: 760px) {
    .operator-frame:not(.httpsec-operator-frame) .operator-line-tabs[data-scrollable-tabs="true"] {
        position: relative;
        padding-right: 52px;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .operator-frame:not(.httpsec-operator-frame) .operator-line-tabs[data-scrollable-tabs="true"]::-webkit-scrollbar {
        display: none;
    }

    .operator-frame:not(.httpsec-operator-frame) .operator-line-tabs[data-scrollable-tabs="true"] .operator-line-tab {
        scroll-snap-align: start;
    }

    .operator-frame:not(.httpsec-operator-frame) .operator-line-tabs-scroll-hint {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        display: inline-flex;
        width: 42px;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg, transparent, var(--operator-surface, #ffffff) 45%);
        color: var(--text-muted);
        font-size: 18px;
        pointer-events: none;
    }
}

.operator-frame-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px 32px calc(32px + var(--operator-actionbar-h, 64px));
}

.operator-section {
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    padding: 0 0 20px;
}

.operator-section + .operator-section {
    padding-top: 22px;
}

.operator-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.operator-section-head h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 690;
}

.operator-section-head p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.operator-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.operator-metric-item {
    min-width: 0;
    padding: 14px 16px;
    border-right: 1px solid var(--operator-line, #d9dde3);
}

.operator-metric-item:last-child {
    border-right: 0;
}

.operator-metric-label {
    display: block;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.operator-metric-value {
    margin-top: 6px;
    color: var(--text-main);
    font-size: 25px;
    font-weight: 760;
    line-height: 1.08;
}

.operator-metric-sub {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.edge-access-operator-frame .section-error-inline,
.edge-access-operator-frame .section-warning-inline {
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 24%, var(--operator-line, #d9dde3));
    border-radius: 6px;
    background: color-mix(in srgb, var(--danger, #ef4444) 7%, var(--operator-surface, #ffffff));
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.45;
}

.edge-access-operator-frame .section-warning-inline {
    border-color: color-mix(in srgb, var(--warning, var(--brand-orange)) 28%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--warning, var(--brand-orange)) 8%, var(--operator-surface, #ffffff));
}

/* ==========================================================================
   Operator Info Tooltip (Reusable across all section configuration pages)
   ========================================================================== */
.operator-info-tooltip,
.flow-info-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    vertical-align: middle;
    margin-left: 6px;
    width: 16px;
    height: 16px;
    color: var(--text-dim, #64748b);
    cursor: help;
    border-radius: 50%;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    font-size: 12px;
    transition: color 0.15s ease, background-color 0.15s ease;
    flex-shrink: 0;
}

.operator-info-tooltip svg,
.flow-info-tooltip svg {
    width: 13px;
    height: 13px;
    pointer-events: none;
    transition: transform 0.15s ease;
}

.operator-info-tooltip:hover,
.operator-info-tooltip:focus-visible,
.flow-info-tooltip:hover,
.flow-info-tooltip:focus-visible {
    color: var(--primary, #6366f1);
    outline: none;
}

.operator-info-tooltip:hover svg,
.operator-info-tooltip:focus-visible svg,
.flow-info-tooltip:hover svg,
.flow-info-tooltip:focus-visible svg {
    transform: scale(1.1);
}

.operator-info-tooltip:focus-visible,
.flow-info-tooltip:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #6366f1) 40%, transparent);
}

/* Tooltip Popup Balloon */
.operator-info-tooltip::after,
.flow-info-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 280px;
    padding: 7px 11px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.5), 0 4px 10px -2px rgba(0, 0, 0, 0.3);
    color: #f8fafc;
    font-family: var(--font-main, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 11px;
    font-weight: 450;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.18s;
    z-index: 10000;
}

/* Tooltip Arrow */
.operator-info-tooltip::before,
.flow-info-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    background: #0f172a;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.18s;
    z-index: 10001;
}

/* Active Hover & Focus States */
.operator-info-tooltip:hover::after,
.operator-info-tooltip:focus-visible::after,
.flow-info-tooltip:hover::after,
.flow-info-tooltip:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.operator-info-tooltip:hover::before,
.operator-info-tooltip:focus-visible::before,
.flow-info-tooltip:hover::before,
.flow-info-tooltip:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

/* Light Theme Contrast */
[data-theme="light"] .operator-info-tooltip::after,
[data-theme="light"] .flow-info-tooltip::after {
    background: #1e293b;
    border-color: #334155;
    color: #f8fafc;
    box-shadow: 0 10px 25px -3px rgba(15, 23, 42, 0.25), 0 4px 8px -2px rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .operator-info-tooltip::before,
[data-theme="light"] .flow-info-tooltip::before {
    background: #1e293b;
    border-right-color: #334155;
    border-bottom-color: #334155;
}

.operator-control-list {
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.operator-control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 58px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
}

.operator-control-row:last-child {
    border-bottom: 0;
}

.operator-control-row[role="button"] {
    cursor: pointer;
}

.operator-control-row[role="button"]:hover {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, #ffffff));
}

.operator-control-row[role="button"]:focus-visible {
    outline: 2px solid var(--operator-link, var(--primary));
    outline-offset: -2px;
}

.operator-control-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.operator-control-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--operator-orange, var(--brand-orange));
}

.operator-control-icon svg {
    width: 16px;
    height: 16px;
}

.operator-control-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.operator-control-title {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 650;
}

.operator-control-title--heading {
    margin: 0;
    line-height: inherit;
}

.operator-control-desc {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.operator-control-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.operator-control-content {
    grid-column: 1 / -1;
    min-width: 0;
}

/* WAF uses the same shared operator sections as Traffic Control and API Security. */
.firewall-operator-frame .firewall-overview-stack {
    display: grid;
    gap: 0;
}

.firewall-operator-frame .firewall-overview-stack > .section-warning-box {
    margin-bottom: 16px;
}

.firewall-operator-frame .firewall-overview-stack .operator-section:last-of-type {
    padding-bottom: 0;
}

.firewall-operator-frame .operator-number {
    display: inline-flex;
    min-height: 34px;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.firewall-operator-frame .operator-number:focus-within {
    border-color: var(--operator-orange, var(--brand-orange));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 18%, transparent);
}

.firewall-operator-frame .operator-number input {
    width: 92px;
    min-height: 32px;
    padding: 0 9px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
    font-weight: 680;
}

.firewall-operator-frame .operator-number span {
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-left: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 650;
}

@media (max-width: 640px) {
    .firewall-operator-frame .operator-section-actions {
        width: 100%;
        justify-content: space-between;
    }

    .firewall-operator-frame .operator-number,
    .firewall-operator-frame .operator-number input {
        width: 100%;
    }
}

.operator-control-panel {
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.operator-control-panel + .operator-control-panel {
    margin-top: 10px;
}

.operator-control-panel .operator-control-row {
    border: 0;
}

.operator-back-button {
    appearance: none;
    display: inline-flex;
    width: fit-content;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 680;
    cursor: pointer;
    transition: color 140ms ease;
}

.operator-back-button-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-muted);
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.operator-back-button-icon svg {
    width: 14px;
    height: 14px;
    transform: rotate(180deg);
}

.operator-back-button:hover {
    color: var(--text-main);
}

.operator-back-button:hover .operator-back-button-icon {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 50%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
    color: var(--operator-orange, var(--brand-orange));
}

.operator-back-button:focus-visible {
    border-radius: 3px;
    outline: 2px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 50%, transparent);
    outline-offset: 3px;
}

.operator-back-button:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: .46;
}

.operator-back-button:disabled .operator-back-button-icon,
.operator-back-button:disabled:hover .operator-back-button-icon {
    border-color: var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-muted);
}

.operator-control-panel-body {
    padding: 14px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.operator-sticky-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: var(--operator-actionbar-h, 64px);
    margin: 0;
    padding: 0 32px;
    border-top: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 -1px 2px rgba(15, 23, 42, 0.04);
}

.operator-sticky-actions .section-save-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.operator-frame .btn-primary,
.operator-sticky-actions .btn-primary {
    background: var(--operator-link, var(--primary));
    border-color: var(--operator-link, var(--primary));
    color: #ffffff;
}

.operator-frame .btn-primary:hover,
.operator-sticky-actions .btn-primary:hover {
    background: var(--operator-link-hover, var(--primary-hover));
    border-color: var(--operator-link-hover, var(--primary-hover));
}

.operator-frame .btn-outline {
    background: var(--operator-surface, #ffffff);
    border-color: var(--operator-line, #d9dde3);
}

.operator-frame .config-status-pill {
    border-radius: 3px;
}

.operator-toolbar,
.operator-table-toolbar,
.operator-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.operator-toolbar {
    margin-bottom: 14px;
}

.operator-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.operator-toolbar-note {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.operator-table-panel {
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    overflow: hidden;
    background: var(--operator-surface, #ffffff);
}

.operator-frame .operator-table-panel {
    margin-bottom: 0;
}

.operator-frame .operator-table-panel > .table-container {
    flex: 0 0 auto;
    height: clamp(260px, 36vh, 380px);
    min-height: 260px;
}

.operator-framed-section {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: 0;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    overflow: hidden;
}

.operator-framed-section + .operator-framed-section {
    padding-top: 0;
}

.operator-framed-section .operator-section-head {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.operator-detail-list {
    display: grid;
    gap: 0;
    padding: 6px 14px 14px;
}

.operator-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.operator-detail-row:last-child {
    border-bottom: 0;
}

.operator-detail-row span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 620;
}

.operator-detail-row strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text-main);
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    font-weight: 720;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operator-table-toolbar,
.operator-pagination {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.operator-table-toolbar {
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.operator-pagination {
    justify-content: center;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.operator-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.operator-choice-card {
    display: grid;
    gap: 5px;
    min-height: 68px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}

.operator-choice-card:hover {
    border-color: var(--operator-line, #d9dde3);
    background: #f8fafc;
}

.operator-choice-card.is-active {
    border-color: var(--operator-link, var(--primary));
    box-shadow: inset 0 0 0 1px var(--operator-link, var(--primary));
}

.operator-callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.operator-callout-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--operator-link, var(--primary));
}

.operator-callout-title,
.operator-mini-title {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 650;
}

.operator-callout-sub,
.operator-mini-sub {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.operator-section-status {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* App Security implementation of the operator template */
.httpsec-operator-frame .httpsec-overview-stack,
.httpsec-operator-frame .httpsec-response-groups {
    display: grid;
    gap: 0;
}

.httpsec-operator-frame .httpsec-response-group {
    gap: 10px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-response-group + .httpsec-response-group {
    padding-top: 22px;
}

.httpsec-operator-frame .httpsec-response-group-head {
    align-items: flex-start;
    padding: 0;
}

.httpsec-operator-frame .httpsec-response-group-head h3 {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 690;
    text-transform: none;
}

.httpsec-operator-frame .httpsec-response-group-head span {
    max-width: 640px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.httpsec-operator-frame .httpsec-simple-row,
.httpsec-operator-frame .httpsec-advanced-details,
.httpsec-operator-frame .httpsec-file-types-panel,
.httpsec-operator-frame .bg-depth,
.httpsec-operator-frame .tile,
.httpsec-operator-frame .httpsec-choice-button,
.httpsec-operator-frame .httpsec-check-tile,
.httpsec-operator-frame .httpsec-ext-panel {
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    border-color: var(--operator-line-soft, #eceff3);
    box-shadow: none;
}

.httpsec-operator-frame .httpsec-simple-row {
    padding: 10px 12px;
}

.httpsec-operator-frame .httpsec-control-head {
    min-height: 56px;
}

.httpsec-operator-frame .httpsec-inline-toggle {
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    margin-bottom: 8px;
}

.httpsec-operator-frame .httpsec-module-row .operator-control-actions svg {
    width: 15px;
    height: 15px;
    color: var(--text-dim);
}

.httpsec-operator-frame .httpsec-securitytxt-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.42fr);
    gap: 16px;
}

.httpsec-operator-frame,
.httpsec-operator-frame .operator-frame-body,
.httpsec-operator-frame .operator-section,
.httpsec-operator-frame .operator-section-body {
    min-width: 0;
}

.httpsec-operator-frame {
    overflow-x: clip;
}

.httpsec-operator-frame .httpsec-validation-summary {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 34%, var(--operator-line, #d9dde3));
    border-radius: 6px;
    background: color-mix(in srgb, var(--danger, #ef4444) 7%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-validation-summary > div {
    display: grid;
    gap: 3px;
}

.httpsec-operator-frame .httpsec-validation-summary strong {
    color: var(--text-main);
    font-size: 14px;
}

.httpsec-operator-frame .httpsec-validation-summary > div > span {
    color: var(--text-secondary);
    font-size: 12px;
}

.httpsec-operator-frame .httpsec-validation-summary ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.httpsec-operator-frame .httpsec-validation-summary button {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.httpsec-operator-frame .httpsec-validation-summary button:hover,
.httpsec-operator-frame .httpsec-validation-summary button:focus-visible {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 54%, var(--operator-line, #d9dde3));
    outline: none;
}

.httpsec-operator-frame .httpsec-validation-summary button > span {
    font-family: var(--font-mono, monospace);
    font-weight: 650;
}

.httpsec-operator-frame [data-httpsec-path][aria-invalid="true"] {
    border-color: var(--danger, #ef4444) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger, #ef4444) 18%, transparent);
}

.httpsec-operator-frame .httpsec-securitytxt-form,
.httpsec-operator-frame .httpsec-securitytxt-preview {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
}

.httpsec-operator-frame .httpsec-securitytxt-input-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

.httpsec-operator-frame .httpsec-securitytxt-input-row .section-input {
    flex: 1 1 auto;
    min-width: 0;
}

.httpsec-operator-frame .httpsec-securitytxt-input-row .operator-btn {
    min-height: 44px;
}

.httpsec-operator-frame .httpsec-securitytxt-preview {
    padding: 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--operator-link, var(--primary)) 4%);
}

.httpsec-operator-frame .httpsec-securitytxt-preview-row {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.httpsec-operator-frame .httpsec-securitytxt-preview-row > span {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.httpsec-operator-frame .httpsec-securitytxt-preview-row > strong {
    overflow-wrap: anywhere;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.45;
}

.httpsec-operator-frame .httpsec-securitytxt-preview .operator-btn {
    justify-self: start;
    min-height: 44px;
}

.httpsec-operator-frame .httpsec-endpoint-chip {
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 3px;
    padding: 3px 6px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, var(--operator-link, var(--primary)) 6%);
}

/* Proxy Settings clean operator catalog implementation */
body.setup-wizard-active .view-container:has(.proxy-operator-frame) {
    overflow-x: hidden;
    overflow-y: auto;
}

.proxy-operator-frame .proxy-operator-stack {
    display: grid;
    gap: 18px;
}

.proxy-operator-frame .proxy-operator-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    gap: 18px;
    align-items: start;
}

.proxy-operator-frame .proxy-config-column {
    display: grid;
    min-width: 0;
    gap: 18px;
}

.proxy-operator-frame .proxy-guide-column {
    position: sticky;
    top: calc(var(--header-h, 66px) + 16px);
    min-width: 0;
    align-self: start;
}

.proxy-operator-frame .proxy-catalog-section {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 3px);
    background: var(--operator-surface, #ffffff);
}

.proxy-operator-frame .proxy-catalog-section > .operator-section-head {
    min-height: 48px;
    margin: 0;
    padding: 10px 18px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f8fafc) 65%, var(--operator-surface, #ffffff));
}

[data-theme="dark"] .proxy-operator-frame .proxy-catalog-section > .operator-section-head {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 94%, var(--bg-primary, #090c10));
}

.proxy-operator-frame .proxy-catalog-section > .operator-section-body {
    min-width: 0;
    padding: 0;
}

.proxy-operator-frame .proxy-settings-surface {
    min-width: 0;
    background: var(--operator-surface, #ffffff);
}

[data-theme="dark"] .proxy-operator-frame .proxy-settings-surface {
    background: var(--operator-surface, #11141a);
}

.proxy-operator-frame .proxy-dynamic-fields {
    display: grid;
    gap: 0;
}

.proxy-operator-frame .proxy-setting-row {
    display: grid;
    grid-template-columns: minmax(160px, 200px) 1fr;
    align-items: center;
    gap: 16px;
    min-height: 52px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.proxy-operator-frame .proxy-setting-row:last-child {
    border-bottom: 0;
}

.proxy-operator-frame .proxy-setting-row-tall {
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 14px;
}

.proxy-operator-frame .proxy-setting-row-tall .operator-control-main {
    padding-top: 4px;
}

.proxy-operator-frame .proxy-setting-control {
    width: 100%;
    max-width: 520px;
}

.proxy-operator-frame .proxy-setting-control select.settings-input,
.proxy-operator-frame .proxy-setting-control input.settings-input {
    width: 100%;
    min-height: 36px;
    border-radius: var(--radius-sm, 3px);
}

.proxy-operator-frame .proxy-setting-control textarea.settings-input {
    width: 100%;
    min-height: 72px;
    padding: 8px 10px;
    border-radius: var(--radius-sm, 3px);
    resize: vertical;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    line-height: 1.5;
}

.proxy-operator-frame .operator-inline-notice {
    padding: 14px 18px;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    line-height: 1.5;
    background: color-mix(in srgb, var(--operator-surface-muted, #f8fafc) 60%, var(--operator-surface, #ffffff));
}

[data-theme="dark"] .proxy-operator-frame .operator-inline-notice {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 90%, var(--bg-primary, #090c10));
}

.proxy-operator-frame .proxy-advanced-settings {
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.proxy-operator-frame .proxy-advanced-settings > summary {
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.proxy-operator-frame .proxy-advanced-settings > summary::-webkit-details-marker {
    display: none;
}

.proxy-operator-frame .proxy-advanced-settings > summary::after {
    content: '+';
    font-size: 15px;
    color: var(--text-muted, #94a3b8);
}

.proxy-operator-frame .proxy-advanced-settings[open] > summary::after {
    content: '−';
}

.proxy-operator-frame .proxy-advanced-body {
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

/* Guide column */
.proxy-operator-frame .proxy-guide-surface {
    display: flex;
    flex-direction: column;
    background: var(--operator-surface, #ffffff);
}

[data-theme="dark"] .proxy-operator-frame .proxy-guide-surface {
    background: var(--operator-surface, #11141a);
}

.proxy-operator-frame .proxy-guide-body {
    padding: 16px 18px;
    display: grid;
    gap: 14px;
}

.proxy-operator-frame .proxy-guide-steps {
    display: grid;
    gap: 8px;
}

.proxy-operator-frame .proxy-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary, #334155);
}

[data-theme="dark"] .proxy-operator-frame .proxy-guide-step {
    color: var(--text-secondary, #94a3b8);
}

.proxy-operator-frame .proxy-guide-step-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--control-accent, var(--primary)) 12%, transparent);
    color: var(--control-accent, var(--primary));
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.proxy-operator-frame .proxy-guide-code-wrap {
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 3px);
    overflow: hidden;
    background: #0f172a;
}

.proxy-operator-frame .proxy-guide-code-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #090e1a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.proxy-operator-frame .proxy-guide-filename {
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    color: #94a3b8;
}

.proxy-operator-frame .proxy-guide-config {
    margin: 0;
    padding: 12px;
    max-height: 400px;
    overflow: auto;
    background: #0f172a;
    color: #e2e8f0;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    line-height: 1.5;
    border: 0;
    border-radius: 0;
}

@media (max-width: 1080px) {
    .proxy-operator-frame .proxy-operator-grid {
        grid-template-columns: 1fr;
    }

    .proxy-operator-frame .proxy-guide-column {
        position: static;
    }
}

@media (max-width: 680px) {
    .proxy-operator-frame .proxy-setting-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .proxy-operator-frame .proxy-setting-control {
        max-width: 100%;
    }
}


/* SSL Certificates implementation of the operator template */
.ssl-operator-frame .ssl-operator-stack {
    display: grid;
    gap: 18px;
}

.ssl-operator-frame .ssl-metric-strip .operator-metric-item {
    min-height: 82px;
    padding: 11px 14px;
}

.ssl-operator-frame .ssl-metric-strip .operator-metric-label {
    font-size: 12px;
}

.ssl-operator-frame .ssl-metric-strip .operator-metric-value {
    margin-top: 4px;
    font-size: 21px;
}

.ssl-operator-frame .ssl-metric-strip .operator-metric-sub {
    margin-top: 2px;
    font-size: 11px;
}

.ssl-operator-frame .ssl-catalog-section {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.ssl-operator-frame .ssl-configuration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.ssl-operator-frame .ssl-catalog-section > .operator-section-head {
    min-height: 66px;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

[data-theme="dark"] .ssl-operator-frame .ssl-catalog-section > .operator-section-head {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

.ssl-operator-frame .ssl-catalog-section > .operator-section-body {
    min-width: 0;
    padding: 16px;
}

.ssl-operator-frame .ssl-auto-section > .operator-section-body {
    padding: 0;
}

.ssl-operator-frame .ssl-auto-settings {
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--operator-surface, #ffffff);
}

.ssl-operator-frame .ssl-auto-toggle-row,
.ssl-operator-frame .ssl-contact-row {
    min-height: 68px;
}

.ssl-operator-frame .ssl-auto-toggle-row {
    border-bottom: 0;
}

.ssl-operator-frame .ssl-auto-dependent {
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.ssl-operator-frame .ssl-contact-row {
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    border-bottom: 0;
}

.ssl-operator-frame .ssl-contact-control {
    width: min(100%, 460px);
}

.ssl-operator-frame .ssl-contact-input {
    width: 100%;
}

.ssl-operator-frame .ssl-operator-panel,
.ssl-operator-frame .ssl-certificate-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-radius: 0;
    box-shadow: none;
}

.ssl-operator-frame .ssl-config-body {
    padding: 14px;
}

.ssl-operator-frame .ssl-auto-section .ssl-operator-panel {
    border: 0;
    background: transparent;
}

.ssl-operator-frame .ssl-auto-section .ssl-config-body {
    padding: 0;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    background: transparent;
}

.ssl-operator-frame .ssl-panel-body,
.ssl-operator-frame .ssl-auto-fields {
    gap: 12px;
}

.ssl-operator-frame .ssl-auto-fields {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    align-items: start;
}

.ssl-operator-frame .ssl-auto-fields .ssl-panel-actions {
    grid-column: 1 / -1;
}

.ssl-operator-frame .ssl-provider-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, #f3f4f6);
}

.ssl-operator-frame .ssl-form-field {
    display: grid;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ssl-operator-frame .ssl-form-field > label {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ssl-operator-frame .settings-input,
.ssl-operator-frame .tags-input-container {
    border-color: var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    box-shadow: none;
}

.ssl-operator-frame .settings-input {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
}

.ssl-operator-frame .settings-input:focus,
.ssl-operator-frame .tags-input-container:focus-within {
    border-color: var(--operator-link, var(--primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--operator-link, var(--primary)) 16%, transparent);
}

.ssl-operator-frame .ssl-domain-manager {
    padding: 16px;
}

.ssl-operator-frame .ssl-domain-manager-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.ssl-operator-frame .ssl-domain-manager-head > div:first-child {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.ssl-operator-frame .ssl-domain-manager-head strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 690;
}

.ssl-operator-frame .ssl-domain-manager-head small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.ssl-operator-frame .ssl-domain-compose {
    display: grid;
    width: min(100%, 520px);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.ssl-operator-frame .ssl-domain-compose .ssl-domain-input {
    min-width: 0;
    max-width: none;
}

.ssl-operator-frame .ssl-domain-add {
    min-height: 38px;
    align-self: stretch;
    white-space: nowrap;
}

.ssl-operator-frame .ssl-domain-table-surface {
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.ssl-operator-frame .ssl-domain-table.config-table-wrap {
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.ssl-operator-frame .ssl-domain-table .config-enterprise-table {
    min-width: 560px;
    table-layout: fixed;
}

.ssl-operator-frame .ssl-domain-table .config-enterprise-table th:nth-child(1) { width: 66%; }
.ssl-operator-frame .ssl-domain-table .config-enterprise-table th:nth-child(2) { width: 20%; }
.ssl-operator-frame .ssl-domain-table .config-enterprise-table th:nth-child(3) { width: 14%; }

.ssl-operator-frame .ssl-domain-table th,
.ssl-operator-frame .ssl-domain-table td {
    padding: 11px 14px;
}

.ssl-operator-frame .ssl-domain-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.ssl-operator-frame .ssl-domain-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface-muted, var(--bg-tertiary));
    color: var(--text-secondary);
}

.ssl-operator-frame .ssl-domain-icon svg {
    width: 14px;
    height: 14px;
}

.ssl-operator-frame .ssl-domain-identity code {
    overflow: hidden;
    color: var(--text-main);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ssl-operator-frame .ssl-domain-row-actions {
    justify-content: flex-end;
}

.ssl-operator-frame .ssl-domain-table .config-table-empty-cell .empty-state {
    height: auto;
    min-height: 96px;
    padding: 20px;
    border: 0;
    background: transparent;
}

.ssl-operator-frame .ssl-panel-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.ssl-operator-frame .ssl-certificate-row {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(250px, 1.15fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 78px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
}

.ssl-operator-frame .ssl-certificate-row:last-child {
    border-bottom: 0;
}

.ssl-operator-frame .ssl-certificate-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.ssl-operator-frame .ssl-certificate-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(70px, 1fr));
    gap: 10px;
}

.ssl-operator-frame .ssl-certificate-meta span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.ssl-operator-frame .ssl-certificate-meta small {
    color: var(--text-dim);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ssl-operator-frame .ssl-certificate-meta strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ssl-operator-frame .ssl-certificate-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.ssl-operator-frame .ssl-certificate-empty {
    display: flex;
    flex: 1 1 auto;
    min-height: 206px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 28px;
    color: var(--text-muted);
    text-align: center;
}

.ssl-operator-frame .ssl-certificate-empty strong {
    color: var(--text-main);
    font-size: 14px;
}

.ssl-operator-frame .ssl-certificate-empty span:last-child {
    max-width: 320px;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .ssl-operator-frame .ssl-configuration-grid {
        grid-template-columns: 1fr;
    }

    .ssl-operator-frame .ssl-domain-manager-head {
        align-items: stretch;
        flex-direction: column;
    }

    .ssl-operator-frame .ssl-domain-compose {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .ssl-operator-frame .ssl-domain-add {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .ssl-operator-frame .ssl-contact-row {
        grid-template-columns: 1fr;
    }

    .ssl-operator-frame .ssl-contact-control {
        width: 100%;
        justify-content: stretch;
    }

    .ssl-operator-frame .ssl-certificate-row {
        grid-template-columns: 1fr;
    }

    .ssl-operator-frame .ssl-certificate-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

.ssl-operator-frame .ssl-certificate-table-surface {
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.ssl-operator-frame .ssl-certificate-table.config-table-wrap {
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.ssl-operator-frame .ssl-inventory-section > .operator-section-body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 16px;
}

.ssl-operator-frame .ssl-inventory-section {
    display: flex;
    flex-direction: column;
}

.ssl-operator-frame .ssl-inventory-section .ssl-certificate-table-surface {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
}

.ssl-operator-frame .ssl-inventory-section .ssl-certificate-table {
    width: 100%;
    height: 100%;
    min-width: 0;
}

.ssl-operator-frame .ssl-inventory-section .config-enterprise-table {
    border-top: 0;
}

.ssl-operator-frame .ssl-certificate-table .config-enterprise-table {
    width: 100%;
    height: 100%;
    min-width: 0;
    table-layout: fixed;
}

.ssl-operator-frame .ssl-certificate-table .config-enterprise-table th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.ssl-operator-frame .ssl-certificate-table .config-enterprise-table th:nth-child(1) { width: 46%; }
.ssl-operator-frame .ssl-certificate-table .config-enterprise-table th:nth-child(2) { width: 19%; }
.ssl-operator-frame .ssl-certificate-table .config-enterprise-table th:nth-child(3) { width: 17%; }
.ssl-operator-frame .ssl-certificate-table .config-enterprise-table th:nth-child(4) { width: 18%; }

.ssl-operator-frame .ssl-certificate-table .config-enterprise-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-secondary);
    font-size: 13px;
    vertical-align: middle;
}

.ssl-operator-frame .ssl-certificate-table .config-enterprise-table tbody tr:last-child td {
    border-bottom: 0;
}

.ssl-operator-frame .ssl-certificate-table .config-enterprise-table tbody tr:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, #ffffff));
}

.ssl-operator-frame .ssl-certificate-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.ssl-operator-frame .ssl-certificate-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface-muted, var(--bg-tertiary));
    color: var(--text-secondary);
}

.ssl-operator-frame .ssl-certificate-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.ssl-operator-frame .ssl-certificate-copy strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 690;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ssl-operator-frame .ssl-certificate-copy small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ssl-operator-frame .ssl-certificate-expiry {
    color: var(--text-main);
    font-size: 12px;
}

.ssl-operator-frame .ssl-row-actions {
    justify-content: flex-end;
}

.ssl-operator-frame .ssl-certificate-table .config-table-empty-cell .empty-state {
    height: auto;
    min-height: 112px;
    padding: 22px 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

@media (max-width: 760px) {
    .ssl-operator-frame .operator-frame-header {
        padding: 22px 18px 16px;
    }

    .ssl-operator-frame .operator-frame-body {
        padding: 18px 18px calc(24px + var(--operator-actionbar-h, 64px));
    }

    .ssl-operator-frame .operator-frame-actions,
    .ssl-operator-frame .operator-frame-actions .btn {
        width: 100%;
    }
}

/* Routing implementation of the operator template */
.routing-operator-frame .routing-operator-stack {
    display: grid;
    gap: 20px;
}

.routing-operator-frame .routing-metric-strip .operator-metric-item {
    min-height: 82px;
    padding: 11px 14px;
}

.routing-operator-frame .routing-metric-strip .operator-metric-label {
    font-size: 12px;
}

.routing-operator-frame .routing-metric-strip .operator-metric-value {
    margin-top: 4px;
    font-size: 21px;
}

.routing-operator-frame .routing-metric-strip .operator-metric-sub {
    margin-top: 2px;
    font-size: 11px;
}

.routing-operator-frame .operator-section {
    padding-bottom: 0;
    border-bottom: 0;
}

.routing-operator-frame .routing-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
}

.routing-operator-frame .routing-table th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.routing-operator-frame .routing-table th:nth-child(1) { width: 19%; }
.routing-operator-frame .routing-table th:nth-child(2) { width: 15%; }
.routing-operator-frame .routing-table th:nth-child(3) { width: 22%; }
.routing-operator-frame .routing-table th:nth-child(4) { width: 12%; }
.routing-operator-frame .routing-table th:nth-child(5) { width: 12%; }
.routing-operator-frame .routing-table th:nth-child(6) { width: 8%; }
.routing-operator-frame .routing-table th:nth-child(7) { width: 12%; }

.routing-operator-frame .routing-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-secondary);
    font-size: 13px;
    vertical-align: middle;
}

.routing-operator-frame .routing-route-main,
.routing-operator-frame .routing-route-copy {
    min-width: 0;
}

.routing-operator-frame .routing-route-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.routing-operator-frame .routing-route-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, var(--operator-surface, #ffffff));
    color: var(--operator-link, var(--primary));
}

.routing-operator-frame .routing-route-copy {
    display: grid;
    gap: 3px;
}

.routing-operator-frame .routing-route-copy strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 690;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.routing-operator-frame .routing-route-copy small,
.routing-operator-frame .routing-empty-value {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.routing-operator-frame .routing-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.routing-operator-frame .routing-path-chip {
    display: inline-flex;
    max-width: 100%;
    padding: 3px 7px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--operator-link, var(--primary)) 18%, var(--operator-line-soft, #eceff3));
    border-radius: 4px;
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, transparent);
    color: var(--operator-link, var(--primary));
    font-family: var(--font-main);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.routing-operator-frame .routing-backend-list {
    display: grid;
    gap: 6px;
}

.routing-operator-frame .routing-backend {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.routing-operator-frame .routing-backend > span:nth-child(2) {
    overflow: hidden;
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.routing-operator-frame .routing-backend small {
    color: var(--text-muted);
    font-size: 11px;
}

.routing-operator-frame .status-pill.success,
.routing-editor-workspace .status-pill.success {
    color: var(--success);
    background: var(--status-success-bg, color-mix(in srgb, var(--success) 12%, transparent));
}

.routing-operator-frame .status-pill.danger,
.routing-editor-workspace .status-pill.danger {
    color: var(--danger);
    background: var(--status-danger-bg, color-mix(in srgb, var(--danger) 12%, transparent));
}

.routing-operator-frame .status-pill.neutral,
.routing-editor-workspace .status-pill.neutral {
    color: var(--text-dim);
    background: var(--bg-depth, #f3f4f6);
}

.routing-operator-frame .routing-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

/* Settings implementation of the shared operator template */
.settings-operator-frame .settings-operator-stack {
    display: grid;
    min-width: 0;
    gap: 20px;
}

.settings-operator-frame .settings-workspace {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 2px;
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame .settings-workspace-nav {
    min-width: 0;
    padding: 14px 10px;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 68%, transparent);
}

[data-theme="dark"] .settings-operator-frame .settings-workspace-nav {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

.settings-operator-frame .settings-workspace-nav-label {
    padding: 0 10px 10px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.settings-operator-frame .settings-workspace-nav-list {
    display: grid;
    gap: 1px;
}

.settings-operator-frame .settings-nav-item {
    appearance: none;
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 660;
    text-align: left;
    cursor: pointer;
}

.settings-operator-frame .settings-nav-item:hover {
    border-color: var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 4%, var(--operator-surface, #ffffff));
    color: var(--text-main);
}

.settings-operator-frame .settings-nav-item.is-active {
    border-color: color-mix(in srgb, var(--operator-link, var(--primary)) 34%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 8%, var(--operator-surface, #ffffff));
    color: var(--text-main);
}

.settings-operator-frame .settings-nav-item:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--operator-link, var(--primary)) 34%, transparent);
    outline-offset: 2px;
}

.settings-operator-frame .settings-nav-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.settings-operator-frame .settings-nav-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.settings-operator-frame .settings-workspace-main {
    min-width: 0;
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame .settings-workspace-header {
    min-height: 72px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame .settings-workspace-header h3,
.settings-operator-frame .settings-workspace-header p {
    margin: 0;
}

.settings-operator-frame .settings-workspace-header h3 {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 720;
    letter-spacing: -.01em;
}

.settings-operator-frame .settings-workspace-header p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.settings-operator-frame .settings-catalog-section {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame .settings-catalog-section > .operator-section-head {
    min-height: 66px;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

.settings-operator-frame .settings-catalog-section > .operator-section-body {
    min-width: 0;
    padding: 0;
}

[data-theme="dark"] .settings-operator-frame .settings-catalog-section > .operator-section-head {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

.settings-workbench-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.settings-category-rail {
    background: var(--operator-surface, #ffffff);
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    overflow: hidden;
    position: sticky;
    top: 24px;
}

.settings-rail-header {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #718096);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 60%, transparent);
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-rail-nav {
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 2px;
}

.settings-rail-btn {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border: none !important;
    border-radius: var(--radius-sm, 2px) !important;
    background: transparent !important;
    color: var(--text-main, #2d3748) !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background 0.15s ease, color 0.15s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.settings-rail-btn:hover {
    background: var(--operator-surface-muted, #f7f8fa) !important;
    color: var(--text-main, #1a202c) !important;
}

.settings-rail-btn.is-active {
    background: color-mix(in srgb, var(--control-accent, #3182ce) 12%, transparent) !important;
    color: var(--control-accent, #2b6cb0) !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .settings-category-rail {
    background: var(--operator-surface, #11141a);
    border-color: var(--operator-line, rgba(248, 250, 252, 0.13));
}

[data-theme="dark"] .settings-rail-header {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
    border-bottom-color: var(--operator-line-soft, rgba(248, 250, 252, 0.08));
    color: var(--text-muted, #a0aec0);
}

[data-theme="dark"] .settings-rail-btn {
    color: var(--text-main, #e2e8f0) !important;
}

[data-theme="dark"] .settings-rail-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .settings-rail-btn.is-active {
    background: color-mix(in srgb, var(--control-accent, #63b3ed) 18%, transparent) !important;
    color: var(--control-accent, #90cdf4) !important;
}

.settings-rail-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

.settings-rail-icon svg,
.settings-rail-btn svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.settings-rail-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    line-height: 1.3 !important;
}

.settings-rail-title {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.settings-rail-desc {
    font-size: 11px !important;
    color: var(--text-muted, #718096) !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

[data-theme="dark"] .settings-rail-desc {
    color: var(--text-muted, #a0aec0) !important;
}

.settings-panel-stage {
    min-width: 0;
}

@media (max-width: 1024px) {
    .settings-workbench-layout {
        grid-template-columns: 1fr;
    }

    .settings-category-rail {
        position: static;
    }
}

.settings-operator-frame.legacy-admin-settings-shell .settings-content {
    width: 100%;
    min-width: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-panel-content {
    display: grid;
    gap: 0;
    padding: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-section {
    margin: 0;
    padding: 18px;
    border: 0;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 0;
    background: var(--operator-surface, #ffffff);
    box-shadow: none;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-section-title {
    margin: 0 0 14px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 720;
    letter-spacing: 0;
    text-transform: none;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-grid {
    gap: 16px;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-field {
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-field label {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 690;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-input {
    min-height: 38px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, #0f172a);
    box-shadow: none;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-input:focus {
    border-color: var(--operator-link, var(--primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--operator-link, var(--primary)) 16%, transparent);
}

.settings-operator-frame.legacy-admin-settings-shell .settings-toggle {
    border-radius: 3px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, #f3f4f6);
    box-shadow: none;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 14px 18px;
    border-top: 0;
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .settings-actions {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

.settings-operator-frame.legacy-admin-settings-shell .data-card,
.settings-operator-frame.legacy-admin-settings-shell .error-template-creator,
.settings-operator-frame.legacy-admin-settings-shell .error-template-row,
.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-frame,
.settings-operator-frame.legacy-admin-settings-shell .error-status-tab {
    border-radius: 3px;
    box-shadow: none;
}

.settings-operator-frame.legacy-admin-settings-shell .data-card {
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, #f3f4f6);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-workspace {
    display: grid;
    gap: 14px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-layout {
    grid-template-columns: minmax(224px, 0.34fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-template-sidebar {
    gap: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-template-creator {
    gap: 12px;
    padding: 14px;
    border-color: var(--operator-line, #d9dde3);
    background: var(--operator-surface-muted, #f7f8fa);
}

.settings-operator-frame.legacy-admin-settings-shell .error-template-copy {
    display: grid;
    gap: 4px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-template-copy strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 720;
}

.settings-operator-frame.legacy-admin-settings-shell .error-template-copy span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.settings-operator-frame.legacy-admin-settings-shell .error-template-list {
    gap: 6px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-template-row {
    min-height: 70px;
    padding: 10px 11px;
    border-color: var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
    font: inherit;
}

.settings-operator-frame.legacy-admin-settings-shell .error-template-row:hover {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.settings-operator-frame.legacy-admin-settings-shell .error-template-row.active {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
}

.settings-operator-frame.legacy-admin-settings-shell .error-template-row:focus-visible,
.settings-operator-frame.legacy-admin-settings-shell .error-status-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 70%, #ffffff);
    outline-offset: 2px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-workbench {
    min-width: 0;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
    overflow: hidden;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-workbench-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 66px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-workbench-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-workbench-copy strong,
.settings-operator-frame.legacy-admin-settings-shell .error-preview-label strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 720;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-workbench-copy span,
.settings-operator-frame.legacy-admin-settings-shell .error-preview-label span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-tabs {
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-tab {
    min-width: 42px;
    min-height: 32px;
    padding: 6px 8px;
    border-color: var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 760;
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-tab:hover,
.settings-operator-frame.legacy-admin-settings-shell .error-status-tab.active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    color: var(--text-main);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-workbench-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-editor-panel {
    min-width: 0;
    margin: 0;
    padding: 14px;
    border-top: 0;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-operator-frame.legacy-admin-settings-shell .error-editor-field {
    gap: 8px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-editor-field label {
    min-height: 20px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-editor-status {
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: 680;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.settings-operator-frame.legacy-admin-settings-shell .error-code-editor {
    height: 396px;
    min-height: 396px;
    padding: 11px;
    resize: vertical;
    line-height: 1.5;
}

.settings-operator-frame.legacy-admin-settings-shell .error-preview-section {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    border-left: 0;
    background: var(--operator-surface-muted, #f7f8fa);
}

.settings-operator-frame.legacy-admin-settings-shell .error-preview-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-height: 20px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-frame {
    min-height: 396px;
    border-color: var(--operator-line, #d9dde3);
    background: #ffffff;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-frame iframe {
    height: 396px;
}

[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-template-creator,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-page-workbench-head,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-preview-section {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-template-row,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-status-tab {
    background: var(--operator-surface, #11141a);
}

@media (max-width: 1100px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-page-workbench-grid {
        grid-template-columns: 1fr;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-editor-panel {
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }
}

@media (max-width: 860px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-pages-layout {
        grid-template-columns: 1fr;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-template-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-page-workbench-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-status-tabs {
        width: 100%;
        justify-content: flex-start;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-template-list {
        grid-template-columns: 1fr;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-code-editor,
    .settings-operator-frame.legacy-admin-settings-shell .error-page-preview-frame,
    .settings-operator-frame.legacy-admin-settings-shell .error-page-preview-frame iframe {
        height: 320px;
        min-height: 320px;
    }
}

.settings-operator-frame.legacy-admin-settings-shell .danger-zone {
    padding-top: 18px;
    border-top: 0;
}

@media (max-width: 960px) {
    .settings-operator-frame .operator-frame-header {
        flex-direction: column;
    }

    .settings-operator-frame .operator-frame-meta,
    .settings-operator-frame .operator-frame-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 820px) {
    .settings-operator-frame .settings-workspace {
        grid-template-columns: 1fr;
    }

    .settings-operator-frame .settings-workspace-nav {
        padding: 10px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .settings-operator-frame .settings-workspace-nav-label {
        display: none;
    }

    .settings-operator-frame .settings-workspace-nav-list {
        display: flex;
        width: max-content;
        min-width: 100%;
        gap: 4px;
    }

    .settings-operator-frame .settings-nav-item {
        width: auto;
        min-width: max-content;
        padding: 0 12px;
    }
}

@media (max-width: 640px) {
    .settings-operator-frame.legacy-admin-settings-shell .settings-section {
        padding: 16px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .settings-actions {
        padding: 12px 16px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .settings-actions,
    .settings-operator-frame.legacy-admin-settings-shell .settings-actions .btn {
        width: 100%;
    }
}

/* Settings workspace: one navigation and content language across every category. */
.settings-operator-frame .settings-workspace {
    min-height: 640px;
    border-radius: 3px;
    box-shadow: none;
}

.settings-operator-frame .settings-workspace-nav {
    width: 232px;
    padding: 16px 10px;
}

.settings-operator-frame .settings-workspace-nav-label {
    padding: 0 10px 12px;
}

.settings-operator-frame .settings-nav-item {
    min-height: 44px;
    padding: 0 11px;
    border-radius: 3px;
}

.settings-operator-frame .settings-nav-item:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 4%, var(--operator-surface, #ffffff));
}

.settings-operator-frame .settings-nav-item.is-active {
    border-color: transparent;
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 7%, var(--operator-surface, #ffffff));
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
    color: var(--text-main);
}

.settings-operator-frame .settings-nav-item.is-active .settings-nav-icon {
    color: var(--operator-orange, var(--brand-orange));
}

.settings-operator-frame .settings-workspace-main {
    display: flex;
    flex-direction: column;
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame .settings-workspace-header {
    min-height: 92px;
    padding: 18px 22px;
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 58%, transparent);
}

.settings-operator-frame .settings-workspace-kicker {
    margin-bottom: 4px;
    color: var(--operator-orange, var(--brand-orange));
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.settings-operator-frame .settings-workspace-header h3 {
    font-size: 18px;
    font-weight: 740;
    letter-spacing: -.015em;
}

.settings-operator-frame .settings-workspace-header p {
    max-width: 640px;
    font-size: 12px;
    line-height: 1.48;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-content {
    flex: 1 1 auto;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-section {
    padding: 20px 22px;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-section-title {
    margin-bottom: 12px;
    padding-bottom: 11px;
    font-size: 13px;
    font-weight: 730;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-hint {
    line-height: 1.48;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-grid {
    gap: 18px;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-field {
    gap: 7px;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-input {
    min-height: 40px;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-actions {
    min-height: 66px;
    padding: 14px 22px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-operator-frame.legacy-admin-settings-shell .data-card {
    min-height: 88px;
    border-color: var(--operator-line-soft, #eceff3);
    border-radius: 3px;
    box-shadow: none;
}

[data-theme="dark"] .settings-operator-frame .settings-workspace-header {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

@media (max-width: 900px) {
    .settings-operator-frame .settings-workspace {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .settings-operator-frame .settings-workspace-nav {
        width: auto;
        padding: 10px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .settings-operator-frame .settings-workspace-nav-label {
        display: none;
    }

    .settings-operator-frame .settings-workspace-nav-list {
        display: flex;
        width: max-content;
        min-width: 100%;
        gap: 4px;
    }

    .settings-operator-frame .settings-nav-item {
        width: auto;
        min-width: max-content;
        padding: 0 12px;
    }
}

@media (max-width: 640px) {
    .settings-operator-frame .settings-workspace-header,
    .settings-operator-frame.legacy-admin-settings-shell .settings-section {
        padding: 16px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .settings-actions {
        padding: 12px 16px;
    }
}

.settings-operator-frame.legacy-admin-settings-shell .settings-inline-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-inline-actions--end {
    justify-content: flex-end;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-danger-toggle {
    border-color: color-mix(in srgb, var(--danger, #dc2626) 32%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--danger, #dc2626) 3%, var(--operator-surface, #ffffff));
}

@media (max-width: 640px) {
    .settings-operator-frame.legacy-admin-settings-shell .settings-inline-actions,
    .settings-operator-frame.legacy-admin-settings-shell .settings-inline-actions--end {
        justify-content: stretch;
    }

    .settings-operator-frame.legacy-admin-settings-shell .settings-inline-actions .btn {
        flex: 1 1 auto;
    }
}

/* Error pages: reuse the Smart Challenge selection and edit/preview canvas. */
.settings-operator-frame.legacy-admin-settings-shell .error-pages-canvas {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-card {
    appearance: none;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 82px;
    padding: 12px;
    border: 0;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-card:last-child {
    border-right: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-card:hover {
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 4%, var(--operator-surface, #ffffff));
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-card.active {
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 6%, var(--operator-surface, #ffffff));
    box-shadow: inset 0 3px 0 var(--operator-orange, var(--brand-orange));
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-card:focus-visible,
.settings-operator-frame.legacy-admin-settings-shell .error-page-template-btn:focus-visible {
    outline: 2px solid var(--operator-link, var(--primary));
    outline-offset: -2px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 32%, var(--operator-line, #d9dde3));
    border-radius: 5px;
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 6%, var(--operator-surface, #ffffff));
    color: var(--operator-orange, var(--brand-orange));
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-icon svg,
.settings-operator-frame.legacy-admin-settings-shell .error-status-state svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-copy strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 730;
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-copy small {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-state,
.settings-operator-frame.legacy-admin-settings-shell .error-status-state > span {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-state > span {
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 50%;
    color: var(--operator-surface, #ffffff);
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-card.active .error-status-state > span {
    border-color: var(--operator-orange, var(--brand-orange));
    background: var(--operator-orange, var(--brand-orange));
}

.settings-operator-frame.legacy-admin-settings-shell .error-status-card:not(.active) .error-status-state svg {
    display: none;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-editor-grid {
    display: grid;
    grid-template-columns: minmax(340px, .95fr) minmax(340px, 1.05fr);
    align-items: stretch;
    gap: 16px;
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-editor-pane,
.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-pane {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
    overflow: hidden;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-editor-pane-head,
.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-pane-head {
    padding: 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-editor-pane-copy,
.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-pane-head > div {
    display: grid;
    gap: 3px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-editor-pane-copy strong,
.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-pane-head strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 720;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-editor-pane-copy span,
.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-pane-head span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-field {
    display: grid;
    gap: 9px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-copy strong {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-copy span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
    text-align: right;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 3px;
    background: var(--operator-surface-depth, var(--bg-depth));
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-btn {
    appearance: none;
    min-height: 38px;
    padding: 7px 9px;
    border: 0;
    border-right: 1px solid var(--operator-line, #d9dde3);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 10px;
    font-weight: 680;
    cursor: pointer;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-btn:last-child {
    border-right: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-btn:hover {
    color: var(--text-main);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-btn.active {
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 8%, var(--operator-surface, #ffffff));
    color: var(--operator-orange, var(--brand-orange));
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-editor-pane .error-editor-panel {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-editor-pane .error-editor-field {
    display: grid;
    min-height: 0;
    gap: 8px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-editor-pane .error-code-editor {
    height: 330px;
    min-height: 260px;
    resize: vertical;
    line-height: 1.5;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-editor-footer > span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-pane {
    padding: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-frame {
    flex: 1 1 auto;
    min-height: 0;
    margin: 14px;
    border-color: var(--operator-line, #d9dde3);
    border-radius: 3px;
    background: #ffffff;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-frame iframe {
    height: 442px;
}

[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-page-editor-pane-head,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-page-preview-pane-head,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-page-editor-footer {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-status-card {
    background: var(--operator-surface, #11141a);
}

@media (max-width: 1080px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-pages-editor-grid {
        grid-template-columns: 1fr;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-page-preview-frame iframe {
        height: 360px;
    }
}

@media (max-width: 640px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-status-grid {
        grid-template-columns: 1fr;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-status-card {
        min-height: 66px;
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-status-card:last-child {
        border-bottom: 0;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-page-template-copy,
    .settings-operator-frame.legacy-admin-settings-shell .error-page-editor-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-page-editor-footer .btn {
        width: 100%;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-page-editor-pane .error-code-editor,
    .settings-operator-frame.legacy-admin-settings-shell .error-page-preview-frame iframe {
        height: 300px;
        min-height: 300px;
    }
}

/* Origin, error page, and licence workflows: clarify scope, draft state, and irreversible actions. */
.settings-operator-frame.legacy-admin-settings-shell .origin-settings-intro {
    display: grid;
    grid-template-columns: minmax(118px, 0.26fr) minmax(0, 1fr);
    gap: 4px 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 66%, transparent);
}

.settings-operator-frame.legacy-admin-settings-shell .origin-settings-intro-label,
.settings-operator-frame.legacy-admin-settings-shell .license-overview-eyebrow {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .04em;
    line-height: 1.35;
    text-transform: uppercase;
}

.settings-operator-frame.legacy-admin-settings-shell .origin-settings-intro-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.settings-operator-frame.legacy-admin-settings-shell .origin-settings-intro-copy strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 720;
}

.settings-operator-frame.legacy-admin-settings-shell .origin-settings-intro-copy span,
.settings-operator-frame.legacy-admin-settings-shell .origin-settings-intro-scope {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.settings-operator-frame.legacy-admin-settings-shell .origin-settings-intro-scope {
    grid-column: 2;
}

.settings-operator-frame.legacy-admin-settings-shell .origin-tuning-intro {
    display: block;
    max-width: 78ch;
}

.settings-operator-frame.legacy-admin-settings-shell .origin-tuning-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.settings-operator-frame.legacy-admin-settings-shell .origin-tuning-group {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 3px;
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 52%, var(--operator-surface, #ffffff));
}

.settings-operator-frame.legacy-admin-settings-shell .origin-tuning-group-head {
    display: grid;
    gap: 3px;
    margin-bottom: 12px;
}

.settings-operator-frame.legacy-admin-settings-shell .origin-tuning-group-head strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 720;
}

.settings-operator-frame.legacy-admin-settings-shell .origin-tuning-group-head span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.settings-operator-frame.legacy-admin-settings-shell .origin-tuning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.settings-operator-frame.legacy-admin-settings-shell .origin-tuning-grid .settings-field label {
    min-height: 32px;
    line-height: 1.35;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-workspace-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-workspace-intro > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-workspace-intro strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 720;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-workspace-intro > div > span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-workflow {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-workflow li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 7px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 680;
    white-space: nowrap;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-workflow li span {
    color: var(--operator-orange, var(--brand-orange));
    font-weight: 780;
}

.settings-operator-frame.legacy-admin-settings-shell .license-workspace {
    gap: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .license-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-operator-frame.legacy-admin-settings-shell .license-overview-head > div {
    display: grid;
    gap: 3px;
}

.settings-operator-frame.legacy-admin-settings-shell .license-overview-head strong {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 740;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.settings-operator-frame.legacy-admin-settings-shell .license-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 0;
}

.settings-operator-frame.legacy-admin-settings-shell .license-fact {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 3px;
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 54%, var(--operator-surface, #ffffff));
}

.settings-operator-frame.legacy-admin-settings-shell .license-fact dt {
    margin: 0 0 5px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 680;
    line-height: 1.35;
}

.settings-operator-frame.legacy-admin-settings-shell .license-fact dd {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.settings-operator-frame.legacy-admin-settings-shell .license-action-intro {
    display: block;
    max-width: 70ch;
    margin: 0 0 14px;
}

.settings-operator-frame.legacy-admin-settings-shell .license-danger-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-operator-frame.legacy-admin-settings-shell .license-danger-actions > div {
    display: grid;
    gap: 3px;
}

.settings-operator-frame.legacy-admin-settings-shell .license-danger-actions strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 720;
}

.settings-operator-frame.legacy-admin-settings-shell .license-danger-actions span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.settings-operator-frame.legacy-admin-settings-shell .license-community-panel .settings-hint {
    display: block;
    max-width: 70ch;
}

[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .origin-settings-intro,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .origin-tuning-group,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .license-fact {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

@media (max-width: 1040px) {
    .settings-operator-frame.legacy-admin-settings-shell .origin-tuning-groups {
        grid-template-columns: 1fr;
    }

    .settings-operator-frame.legacy-admin-settings-shell .license-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .settings-operator-frame.legacy-admin-settings-shell .origin-settings-intro {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px 16px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .origin-settings-intro-scope {
        grid-column: auto;
    }

    .settings-operator-frame.legacy-admin-settings-shell .origin-tuning-grid,
    .settings-operator-frame.legacy-admin-settings-shell .license-facts {
        grid-template-columns: 1fr;
    }

    .settings-operator-frame.legacy-admin-settings-shell .origin-tuning-grid .settings-field label {
        min-height: 0;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-pages-workspace-intro,
    .settings-operator-frame.legacy-admin-settings-shell .license-overview-head,
    .settings-operator-frame.legacy-admin-settings-shell .license-danger-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-pages-workflow {
        width: 100%;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-pages-workflow li {
        flex: 1 1 0;
        justify-content: center;
    }

    .settings-operator-frame.legacy-admin-settings-shell .license-overview-head .license-status,
    .settings-operator-frame.legacy-admin-settings-shell .license-danger-actions .btn {
        width: 100%;
    }
}

/* Error Pages: Smart Challenge-style selection library with a dedicated live preview surface. */
.settings-operator-frame.legacy-admin-settings-shell .error-pages-library-layout {
    display: grid;
    grid-template-columns: minmax(292px, .44fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
    overflow: hidden;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-head {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-head > div {
    display: grid;
    gap: 3px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-head strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 720;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-head span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-group {
    padding: 12px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-group--custom {
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 48%, transparent);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-group-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 730;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-group-title .error-page-library-group-label {
    margin: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-add-button {
    min-height: 28px;
    padding: 0 8px;
    font-size: 10px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-limit {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.3;
    text-align: right;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-list {
    display: grid;
    gap: 6px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 56px;
    padding: 9px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-item:hover {
    border-color: var(--operator-line, #d9dde3);
    background: var(--operator-surface-muted, #f7f8fa);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-item.is-active {
    border-color: var(--operator-line, #d9dde3);
    background: var(--operator-surface-muted, #f7f8fa);
    box-shadow: inset 2px 0 0 var(--operator-orange, var(--brand-orange));
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-theme-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: -1px;
    padding: 8px 10px 2px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-theme-label {
    color: var(--text-main);
    font-size: 10px;
    font-weight: 700;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-theme-options {
    display: flex;
    align-items: center;
    gap: 2px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-theme-option {
    min-height: 28px;
    padding: 0 9px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 10px;
    font-weight: 680;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-theme-option:hover {
    border-bottom-color: var(--operator-line, #d9dde3);
    background: transparent;
    color: var(--text-main);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-theme-option.is-active {
    border-bottom-color: var(--operator-orange, var(--brand-orange));
    background: transparent;
    color: var(--text-main);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-template-theme-option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 72%, #ffffff);
    outline-offset: 2px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 72%, #ffffff);
    outline-offset: 2px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-muted);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-item.is-active .error-page-library-icon {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 26%, var(--operator-line, #d9dde3));
    color: var(--operator-orange, var(--brand-orange));
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-copy strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-copy small,
.settings-operator-frame.legacy-admin-settings-shell .error-page-library-empty {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-library-state {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 680;
    white-space: nowrap;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-creator {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 30%, var(--operator-line, #d9dde3));
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-creator[hidden] {
    display: none;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-creator > div:first-child {
    display: grid;
    gap: 3px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-creator strong,
.settings-operator-frame.legacy-admin-settings-shell .error-page-custom-editor-head strong {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 720;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-creator > div:first-child span,
.settings-operator-frame.legacy-admin-settings-shell .error-page-custom-editor-head span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-creator label,
.settings-operator-frame.legacy-admin-settings-shell .error-page-custom-editor > label {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 690;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-creator .settings-inline-actions {
    margin-top: 2px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-custom-editor {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-custom-editor[hidden] {
    display: none;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-custom-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-custom-editor-head > div {
    display: grid;
    gap: 3px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-custom-editor-head .btn {
    min-height: 28px;
    padding: 0 8px;
    font-size: 10px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-custom-editor .error-code-editor {
    height: 260px;
    min-height: 220px;
    padding: 10px;
    resize: vertical;
    font-size: 11px;
    line-height: 1.5;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-pane--library .error-page-preview-frame {
    margin: 14px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-pane--library .error-page-preview-pane-head {
    display: grid;
    gap: 12px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-status-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: thin;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-status-tab {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-muted);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-status-tab:hover {
    border-color: var(--operator-orange, var(--brand-orange));
    color: var(--text-main);
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-status-tab.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 8%, var(--operator-surface, #ffffff));
    color: var(--text-main);
    box-shadow: inset 0 -2px 0 var(--operator-orange, var(--brand-orange));
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-status-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 72%, #ffffff);
    outline-offset: 2px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-page-preview-pane--library .error-page-preview-frame iframe {
    height: 600px;
    min-height: 600px;
}

[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-page-library,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-page-library-item,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-page-creator {
    background: var(--operator-surface, #11141a);
}

[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-page-library-head,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-page-library-group--custom {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

@media (max-width: 980px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-pages-library-layout {
        grid-template-columns: 1fr;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-page-preview-pane--library .error-page-preview-frame iframe {
        height: 440px;
        min-height: 440px;
    }
}

@media (max-width: 640px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-page-library-group-title,
    .settings-operator-frame.legacy-admin-settings-shell .error-page-custom-editor-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-page-add-button,
    .settings-operator-frame.legacy-admin-settings-shell .error-page-custom-editor-head .btn {
        width: 100%;
        min-height: 44px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-page-preview-status-tab {
        min-height: 44px;
        padding: 0 12px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-page-template-theme-option {
        min-height: 44px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-page-library-limit {
        text-align: left;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-page-creator .settings-inline-actions .btn {
        flex: 1 1 0;
        min-height: 44px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-page-preview-pane--library .error-page-preview-frame iframe {
        height: 320px;
        min-height: 320px;
    }
}

/* Error Pages: native Settings workspace. */
.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-workspace {
    display: grid;
    gap: 18px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-workspace-heading > div {
    display: grid;
    gap: 5px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-workspace-heading span,
.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-templates-head > div > span:last-child,
.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-empty,
.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-limit {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-layout {
    display: grid;
    grid-template-columns: minmax(276px, .42fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-picker {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-group,
.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-templates {
    display: grid;
    gap: 9px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-templates {
    padding-top: 16px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-group-label {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-list {
    display: grid;
    gap: 7px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-option {
    overflow: hidden;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-option.is-active {
    border-color: var(--operator-line, #d9dde3);
    box-shadow: inset 2px 0 0 var(--operator-orange, var(--brand-orange));
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-choice {
    display: grid;
    width: 100%;
    min-height: 58px;
    gap: 3px;
    padding: 11px 13px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-choice:hover {
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--text-main));
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-choice:focus-visible,
.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-mode-option:focus-visible,
.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 72%, #ffffff);
    outline-offset: -2px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-choice strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-choice small {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 13px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-mode > span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-mode > div {
    display: flex;
    align-items: center;
    gap: 4px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-mode-option {
    min-height: 28px;
    padding: 0 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 10px;
    font-weight: 680;
    cursor: pointer;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-mode-option:hover {
    color: var(--text-main);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-mode-option.is-active {
    border-bottom-color: var(--operator-orange, var(--brand-orange));
    color: var(--text-main);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-templates-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-templates-head > div {
    display: grid;
    gap: 4px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-add-template {
    min-height: 30px;
    padding: 0 9px;
    font-size: 10px;
    white-space: nowrap;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-creator,
.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-editor {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-creator[hidden],
.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-editor[hidden] {
    display: none;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-creator-copy,
.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-editor-head > div {
    display: grid;
    gap: 4px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-creator-copy strong,
.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-editor-head strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-creator-copy span,
.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-editor-head span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-template-creator label,
.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-editor > label {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 680;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-editor .error-code-editor {
    min-height: 240px;
    padding: 10px;
    resize: vertical;
    font-size: 11px;
    line-height: 1.5;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-surface {
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-head > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-head strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-head span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tabs {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tab {
    min-height: 30px;
    padding: 0 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 10px;
    font-weight: 680;
    white-space: nowrap;
    cursor: pointer;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tab:hover {
    color: var(--text-main);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tab.is-active {
    border-bottom-color: var(--operator-orange, var(--brand-orange));
    color: var(--text-main);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-canvas {
    padding: 14px;
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-canvas iframe {
    display: block;
    width: 100%;
    height: 520px;
    min-height: 520px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    background: #ffffff;
}

[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-pages-template-option,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-pages-template-creator,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-editor,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-surface,
[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-canvas {
    background: var(--operator-surface, #11141a);
}

@media (max-width: 980px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-pages-template-layout {
        grid-template-columns: 1fr;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-canvas iframe {
        height: 420px;
        min-height: 420px;
    }
}

@media (max-width: 640px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-templates-head,
    .settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-editor-head,
    .settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-head {
        flex-direction: column;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-pages-add-template {
        width: 100%;
        min-height: 44px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-pages-template-mode-option,
    .settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tab {
        min-height: 44px;
        padding: 0 10px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-canvas iframe {
        height: 320px;
        min-height: 320px;
    }
}

/* Error Pages: form-based configuration, aligned with the Settings surface. */
.settings-operator-frame.legacy-admin-settings-shell .error-pages-form-workspace {
    display: grid;
    gap: 18px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-form-layout {
    display: grid;
    grid-template-columns: minmax(272px, .4fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-form-controls {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-form-controls > div:first-child {
    display: grid;
    gap: 5px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-form-controls > div:first-child .settings-hint {
    max-width: 34ch;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-form-controls .settings-field {
    display: grid;
    gap: 7px;
    margin: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-form-controls .settings-field .settings-input {
    width: 100%;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-form-controls .settings-field .w-200 {
    max-width: 200px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-actions > div {
    display: grid;
    gap: 4px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-actions strong {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-actions span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-actions .btn {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 9px;
    font-size: 10px;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-pages-form-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-pages-custom-actions .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* Error Pages follows the Challenge editor hierarchy: configure on the left, review on the right. */
.settings-operator-frame.legacy-admin-settings-shell .error-pages-editor-grid {
    grid-template-columns: minmax(330px, .9fr) minmax(0, 1.1fr);
    gap: 16px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-editor-grid > .error-pages-operator-section {
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-editor-grid > .error-pages-operator-section > .operator-section-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-appearance-panel {
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-appearance-panel .settings-field {
    display: grid;
    gap: 7px;
    margin: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-appearance-panel .settings-input {
    width: 100%;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-theme-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-theme-btn {
    min-width: 0;
    padding-inline: 8px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-operator-preview {
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-toolbar strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tabs {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface-depth, var(--bg-depth));
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tab {
    min-width: 40px;
    min-height: 32px;
    padding: 0 9px;
    border: 0;
    border-right: 1px solid var(--operator-line, #d9dde3);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tab:last-child {
    border-right: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tab:hover {
    color: var(--text-main);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tab.is-active {
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tab:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--operator-link, var(--primary));
    outline-offset: -2px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-panel {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface-depth, var(--bg-depth));
    padding: 12px;
}

.settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-panel iframe {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 430px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    background: #ffffff;
}

@media (max-width: 1100px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-pages-editor-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tabs {
        width: 100%;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-tab {
        flex: 1 1 0;
        min-height: 40px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-panel {
        padding: 8px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .error-pages-preview-panel iframe {
        min-height: 360px;
    }
}

/* Audit Log implementation of the shared operator and enterprise table template */
.audit-operator-frame .audit-operator-stack {
    display: grid;
    min-width: 0;
    gap: 20px;
}

.audit-operator-frame .audit-metric-strip .operator-metric-item {
    min-height: 82px;
    padding: 11px 14px;
}

.audit-operator-frame .audit-metric-strip .operator-metric-label {
    font-size: 12px;
}

.audit-operator-frame .audit-metric-strip .operator-metric-value {
    margin-top: 4px;
    font-size: 21px;
}

.audit-operator-frame .audit-metric-strip .operator-metric-sub {
    margin-top: 2px;
    font-size: 11px;
}

.audit-operator-frame .audit-catalog-section {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.audit-operator-frame .audit-catalog-section > .operator-section-head {
    min-height: 66px;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

.audit-operator-frame .audit-catalog-section > .operator-section-body {
    min-width: 0;
    padding: 16px;
}

[data-theme="dark"] .audit-operator-frame .audit-catalog-section > .operator-section-head {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

.audit-operator-frame .audit-event-surface {
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.audit-operator-frame .audit-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(150px, .9fr) minmax(150px, .9fr) minmax(360px, 1.7fr) auto;
    align-items: end;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--bg-panel, #12161b);
}

.audit-operator-frame .audit-filter-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.audit-operator-frame .audit-filter-field > span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 720;
    line-height: 1;
}

.audit-operator-frame .audit-filter-range {
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 14px;
    border: 0;
    border-left: 1px solid var(--operator-line-soft, #eceff3);
    gap: 5px;
}

.audit-operator-frame .audit-filter-range legend {
    padding: 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 720;
    line-height: 1;
}

.audit-operator-frame .audit-filter-range-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.audit-operator-frame .audit-filter-range-separator {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 650;
    text-transform: lowercase;
}

.audit-operator-frame .audit-filter-field .settings-input,
.audit-operator-frame .audit-filter-range .settings-input {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 6px 9px;
}

.audit-operator-frame .audit-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    white-space: nowrap;
}

.audit-operator-frame .audit-event-table.config-table-wrap {
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.audit-operator-frame .audit-event-table .config-enterprise-table {
    min-width: 780px;
    table-layout: fixed;
}

.audit-operator-frame .audit-event-table .config-enterprise-table th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.audit-operator-frame .audit-event-table .config-enterprise-table th:nth-child(1) { width: 19%; }
.audit-operator-frame .audit-event-table .config-enterprise-table th:nth-child(2) { width: 19%; }
.audit-operator-frame .audit-event-table .config-enterprise-table th:nth-child(3) { width: 48%; }
.audit-operator-frame .audit-event-table .config-enterprise-table th:nth-child(4) { width: 14%; }

.audit-operator-frame .audit-event-table .config-enterprise-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-secondary);
    font-size: 13px;
    vertical-align: middle;
}

.audit-operator-frame .audit-event-table .config-enterprise-table tbody tr:last-child td {
    border-bottom: 0;
}

.audit-operator-frame .audit-event-table .config-enterprise-table tbody tr:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, #ffffff));
}

.audit-operator-frame .audit-event-time {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.audit-operator-frame .audit-actor {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.audit-operator-frame .audit-actor-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, var(--operator-surface, #ffffff));
    color: var(--operator-link, var(--primary));
}

.audit-operator-frame .audit-actor-icon svg {
    width: 15px;
    height: 15px;
}

.audit-operator-frame .audit-actor-name,
.audit-operator-frame .audit-resource-name {
    overflow: hidden;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 690;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-operator-frame .audit-resource-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.audit-operator-frame .audit-resource-detail {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.audit-operator-frame .audit-activity {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.audit-operator-frame .audit-activity strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 690;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-operator-frame .audit-activity span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.audit-operator-frame .audit-source-ip {
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-operator-frame .audit-event-table .config-status-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-operator-frame .audit-button-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.audit-operator-frame .audit-button-icon svg {
    width: 15px;
    height: 15px;
}

.audit-operator-frame .audit-event-table .config-table-empty-cell .empty-state {
    height: auto;
    min-height: 220px;
    padding: 32px 20px;
}

.audit-operator-frame .audit-event-table.legacy-admin-table-wrap {
    margin: 0;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
}

.audit-operator-frame .audit-event-table .legacy-admin-table {
    width: 100%;
    min-width: 720px;
    table-layout: fixed;
}

.audit-operator-frame .audit-event-table .legacy-admin-table th {
    padding: 8px 12px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.audit-operator-frame .audit-event-table .legacy-admin-table th:nth-child(1) { width: 20%; }
.audit-operator-frame .audit-event-table .legacy-admin-table th:nth-child(2) { width: 18%; }
.audit-operator-frame .audit-event-table .legacy-admin-table th:nth-child(3) { width: 47%; }
.audit-operator-frame .audit-event-table .legacy-admin-table th:nth-child(4) { width: 15%; }

.audit-operator-frame .audit-event-table .legacy-admin-table td {
    padding: 8px 12px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
    vertical-align: middle;
}

.audit-operator-frame .audit-event-table .legacy-admin-table td:first-child {
    color: var(--text-muted);
    white-space: nowrap;
}

.audit-operator-frame .audit-event-table .legacy-admin-table td:nth-child(2) {
    color: var(--text-main);
    font-weight: 650;
}

.audit-operator-frame .audit-event-table .legacy-admin-table td:last-child {
    color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    white-space: nowrap;
}

@media (max-width: 960px) {
    .audit-operator-frame .operator-frame-header {
        flex-direction: column;
    }

    .audit-operator-frame .operator-frame-meta,
    .audit-operator-frame .operator-frame-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .audit-operator-frame .audit-filter-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audit-operator-frame .audit-filter-range {
        padding-left: 0;
        border-left: 0;
    }

    .audit-operator-frame .audit-filter-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .audit-operator-frame .operator-frame-actions,
    .audit-operator-frame .operator-frame-actions .btn {
        width: 100%;
    }

    .audit-operator-frame .audit-filter-toolbar {
        grid-template-columns: 1fr;
    }
}

/* User Management implementation of the shared operator and enterprise table template */
.users-operator-frame .users-operator-stack {
    display: grid;
    min-width: 0;
    gap: 20px;
}

.users-operator-frame .users-metric-strip .operator-metric-item {
    min-height: 82px;
    padding: 11px 14px;
}

.users-operator-frame .users-metric-strip .operator-metric-label {
    font-size: 12px;
}

.users-operator-frame .users-metric-strip .operator-metric-value {
    margin-top: 4px;
    font-size: 21px;
}

.users-operator-frame .users-metric-strip .operator-metric-sub {
    margin-top: 2px;
    font-size: 11px;
}

.users-operator-frame .users-catalog-section {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.users-operator-frame .users-catalog-section > .operator-section-head {
    min-height: 66px;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

.users-operator-frame .users-catalog-section > .operator-section-body {
    min-width: 0;
    padding: 16px;
}

[data-theme="dark"] .users-operator-frame .users-catalog-section > .operator-section-head {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

.users-operator-frame .users-account-surface {
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.users-operator-frame .users-account-table.config-table-wrap {
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.users-operator-frame .users-account-table .config-enterprise-table {
    min-width: 760px;
    table-layout: fixed;
}

.users-operator-frame .users-account-table .config-enterprise-table th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.users-operator-frame .users-account-table .config-enterprise-table th:nth-child(1) { width: 36%; }
.users-operator-frame .users-account-table .config-enterprise-table th:nth-child(2) { width: 18%; }
.users-operator-frame .users-account-table .config-enterprise-table th:nth-child(3) { width: 14%; }
.users-operator-frame .users-account-table .config-enterprise-table th:nth-child(4) { width: 22%; }
.users-operator-frame .users-account-table .config-enterprise-table th:nth-child(5) { width: 10%; }

.users-operator-frame .users-account-table .config-enterprise-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-secondary);
    font-size: 13px;
    vertical-align: middle;
}

.users-operator-frame .users-account-table .config-enterprise-table tbody tr:last-child td {
    border-bottom: 0;
}

.users-operator-frame .users-account-table .config-enterprise-table tbody tr:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, #ffffff));
}

.users-operator-frame .users-account-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.users-operator-frame .users-account-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, var(--operator-surface, #ffffff));
    color: var(--operator-link, var(--primary));
}

.users-operator-frame .users-account-icon svg {
    width: 15px;
    height: 15px;
}

.users-operator-frame .users-account-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.users-operator-frame .users-account-link {
    appearance: none;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 690;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-operator-frame .users-account-link:hover {
    background: transparent;
    color: var(--operator-link, var(--primary));
}

.users-operator-frame .users-account-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--operator-link, var(--primary)) 42%, transparent);
    outline-offset: 3px;
}

.users-operator-frame .users-account-name {
    color: var(--text-main);
    font-weight: 650;
}

.users-operator-frame .users-readonly-note {
    color: var(--text-muted);
    font-size: 12px;
}

.users-operator-frame .users-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 2px 0;
    color: var(--text-muted);
    font-size: 12px;
}

.users-operator-frame .users-pagination-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.users-operator-frame .users-pagination-page {
    min-width: 92px;
    text-align: center;
}

.users-role-permissions {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 11px;
}

.users-role-permissions strong {
    color: var(--text-main);
    font-size: 11px;
}

.users-role-permissions > span {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.users-role-permissions code {
    border: 1px solid var(--operator-line, var(--border));
    border-radius: 4px;
    padding: 2px 5px;
    background: var(--operator-surface-muted, var(--bg-depth));
    color: var(--text-main);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
}

.users-operator-frame .users-account-email,
.users-operator-frame .users-last-login {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-operator-frame .users-account-table .config-status-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-operator-frame .users-row-actions {
    justify-content: flex-end;
}

.users-operator-frame .users-button-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.users-operator-frame .users-button-icon svg {
    width: 15px;
    height: 15px;
}

.users-operator-frame .users-account-table .config-table-empty-cell .empty-state {
    height: auto;
    min-height: 220px;
    padding: 32px 20px;
}

.users-modal-content {
    width: min(600px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 48px));
    overflow: auto;
    border-radius: var(--radius-sm, 2px);
}

.users-role-modal-content {
    width: min(760px, calc(100vw - 32px));
    max-height: min(820px, calc(100vh - 48px));
    overflow: auto;
    border-radius: var(--radius-sm, 2px);
}

.users-role-permission-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
}

.users-role-permission-list legend {
    padding: 0 4px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 690;
}

.users-role-permission-list legend span {
    color: var(--danger);
}

.users-role-permission-list > p {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.users-role-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.users-role-permission-option {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: var(--radius-sm, 2px);
    cursor: pointer;
}

.users-role-permission-option:has(input:disabled) {
    cursor: not-allowed;
    opacity: .56;
}

.users-role-permission-option input {
    margin: 2px 0 0;
}

.users-role-permission-option > span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.users-role-permission-option code {
    overflow: hidden;
    color: var(--text-main);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-role-permission-option small {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.users-modal-header {
    align-items: flex-start;
}

.users-modal-header > div {
    display: grid;
    gap: 4px;
}

.users-modal-header h3,
.users-modal-header p {
    margin: 0;
}

.users-modal-header p {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.users-modal-body {
    display: grid;
    gap: 20px;
}

.users-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
}

.users-form-field {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.users-form-field > label {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 690;
}

.users-form-field > label span {
    color: var(--danger);
}

.users-form-field .settings-input {
    width: 100%;
}

.users-form-field .settings-hint {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.users-account-state {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    cursor: pointer;
}

.users-account-state > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.users-account-state .toggle-switch {
    flex: 0 0 auto;
}

.users-account-state-copy {
    display: grid;
    gap: 3px;
}

.users-account-state-copy strong {
    color: var(--text-main);
    font-size: 13px;
}

.users-account-state-copy small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.users-modal-footer {
    gap: 8px;
}

@media (max-width: 960px) {
    .users-operator-frame .operator-frame-header {
        flex-direction: column;
    }

    .users-operator-frame .operator-frame-meta,
    .users-operator-frame .operator-frame-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .users-operator-frame .operator-frame-actions,
    .users-operator-frame .operator-frame-actions .btn {
        width: 100%;
    }

    .users-form-grid {
        grid-template-columns: 1fr;
    }

    .users-role-permission-grid {
        grid-template-columns: 1fr;
    }

    .users-operator-frame .users-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Profile implementation of the shared operator template */
.profile-operator-frame .profile-operator-stack {
    display: grid;
    min-width: 0;
    gap: 20px;
}

.profile-operator-frame .profile-summary-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

[data-theme="dark"] .profile-operator-frame .profile-summary-panel {
    background: var(--operator-surface, #11141a);
}

.profile-operator-frame .profile-avatar-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    background: var(--brand-orange, var(--primary));
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.profile-operator-frame .profile-summary-main {
    min-width: 0;
    flex: 1;
}

.profile-operator-frame .profile-summary-kicker {
    color: var(--text-secondary, var(--text-dim));
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-operator-frame .profile-summary-main h3 {
    margin: 2px 0 3px;
    color: var(--text-main);
    font-size: 18px;
    font-weight: 760;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.profile-operator-frame .profile-summary-main p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.profile-operator-frame .profile-summary-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.profile-operator-frame .profile-configuration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.profile-operator-frame .profile-catalog-section {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.profile-operator-frame .profile-catalog-section > .operator-section-head {
    min-height: 66px;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

[data-theme="dark"] .profile-operator-frame .profile-catalog-section > .operator-section-head {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

.profile-operator-frame .profile-catalog-section > .operator-section-body {
    min-width: 0;
    padding: 16px;
}

.profile-operator-frame .profile-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.profile-operator-frame .profile-readonly-field {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: var(--radius-sm, 2px);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 50%, transparent);
}

[data-theme="dark"] .profile-operator-frame .profile-readonly-field {
    border-color: rgba(248, 250, 252, 0.08);
    background: color-mix(in srgb, var(--operator-surface, #11141a) 92%, var(--bg-primary));
}

.profile-operator-frame .profile-readonly-field span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-secondary, var(--text-dim));
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.profile-operator-frame .profile-readonly-field strong {
    display: block;
    overflow: hidden;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-operator-frame .profile-password-form {
    display: grid;
    gap: 14px;
}

.profile-operator-frame .profile-form-field {
    display: block;
}

.profile-operator-frame .profile-form-field span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-secondary, var(--text-dim));
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.profile-operator-frame .profile-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}

.profile-operator-frame .profile-form-footer > span {
    color: var(--text-muted);
    font-size: 12px;
}

.profile-operator-frame .profile-verification-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-operator-frame .profile-verification-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: var(--radius-sm, 2px);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 50%, transparent);
}

[data-theme="dark"] .profile-operator-frame .profile-verification-card {
    border-color: rgba(248, 250, 252, 0.08);
    background: color-mix(in srgb, var(--operator-surface, #11141a) 92%, var(--bg-primary));
}

.profile-operator-frame .profile-verification-card.enabled {
    border-color: color-mix(in srgb, var(--success) 36%, var(--border));
}

.profile-operator-frame .profile-security-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
    border-radius: var(--radius-sm, 2px);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--brand-orange, var(--primary));
}

.profile-operator-frame .profile-security-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-operator-frame .profile-verification-main {
    min-width: 0;
    flex: 1;
}

.profile-operator-frame .profile-verification-title {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 750;
}

.profile-operator-frame .profile-verification-sub {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.profile-operator-frame .profile-verification-state {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 960px) {
    .profile-operator-frame .operator-frame-header {
        flex-direction: column;
    }

    .profile-operator-frame .operator-frame-meta {
        width: 100%;
        justify-content: flex-start;
    }

    .profile-operator-frame .profile-configuration-grid {
        grid-template-columns: 1fr;
    }

    .profile-operator-frame .profile-summary-panel {
        flex-wrap: wrap;
    }

    .profile-operator-frame .profile-summary-badges {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .profile-operator-frame .profile-field-grid {
        grid-template-columns: 1fr;
    }

    .profile-operator-frame .profile-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-operator-frame .profile-verification-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Origins implementation of the shared Apps and Routing operator template */
.origins-operator-frame .origins-operator-stack {
    display: grid;
    min-width: 0;
    gap: 20px;
}

.origins-operator-frame .origins-metric-strip .operator-metric-item {
    min-height: 82px;
    padding: 11px 14px;
}

.origins-operator-frame .origins-metric-strip .operator-metric-label {
    font-size: 12px;
}

.origins-operator-frame .origins-metric-strip .operator-metric-value {
    margin-top: 4px;
    font-size: 21px;
}

.origins-operator-frame .origins-metric-strip .operator-metric-sub {
    margin-top: 2px;
    font-size: 11px;
}

.origins-operator-frame .origins-catalog-section {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.origins-operator-frame .origins-catalog-section > .operator-section-head {
    min-height: 66px;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

.origins-operator-frame .origins-catalog-section > .operator-section-body {
    min-width: 0;
    padding: 16px;
}

[data-theme="dark"] .origins-operator-frame .origins-catalog-section > .operator-section-head {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

.origins-operator-frame .origins-pool-surface {
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.origins-operator-frame .origins-pool-table.config-table-wrap {
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.origins-operator-frame .origins-pool-table .config-enterprise-table {
    min-width: 940px;
    table-layout: fixed;
}

.origins-operator-frame .origins-pool-table .config-enterprise-table th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.origins-operator-frame .origins-pool-table .config-enterprise-table th:nth-child(1) { width: 18%; }
.origins-operator-frame .origins-pool-table .config-enterprise-table th:nth-child(2) { width: 28%; }
.origins-operator-frame .origins-pool-table .config-enterprise-table th:nth-child(3) { width: 14%; }
.origins-operator-frame .origins-pool-table .config-enterprise-table th:nth-child(4) { width: 15%; }
.origins-operator-frame .origins-pool-table .config-enterprise-table th:nth-child(5) { width: 15%; }
.origins-operator-frame .origins-pool-table .config-enterprise-table th:nth-child(6) { width: 10%; }

.origins-operator-frame .origins-pool-table .config-enterprise-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-secondary);
    font-size: 13px;
    vertical-align: middle;
}

.origins-operator-frame .origins-pool-table .config-enterprise-table tbody tr:last-child td {
    border-bottom: 0;
}

.origins-operator-frame .origins-pool-table .config-enterprise-table tbody tr:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, #ffffff));
}

.origins-operator-frame .origins-pool-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.origins-operator-frame .origins-pool-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, var(--operator-surface, #ffffff));
    color: var(--operator-link, var(--primary));
}

.origins-operator-frame .origins-pool-icon svg {
    width: 15px;
    height: 15px;
}

.origins-operator-frame .origins-pool-link {
    appearance: none;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 690;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.origins-operator-frame .origins-pool-link:hover {
    background: transparent;
    color: var(--operator-link, var(--primary));
    text-decoration: none;
}

.origins-operator-frame .origins-pool-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--operator-link, var(--primary)) 42%, transparent);
    outline-offset: 3px;
}

.origins-operator-frame .origins-empty-value {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.origins-operator-frame .origins-target-list {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.origins-operator-frame .origins-target-url {
    display: block;
    overflow: hidden;
    color: var(--text-main);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.origins-operator-frame .origins-row-actions {
    justify-content: flex-end;
}

.origins-operator-frame .origins-button-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.origins-operator-frame .origins-button-icon svg {
    width: 15px;
    height: 15px;
}

.origins-operator-frame .origins-pool-table .config-table-empty-cell .empty-state {
    height: auto;
    min-height: 220px;
    padding: 32px 20px;
}

@media (max-width: 960px) {
    .origins-operator-frame .operator-frame-header {
        flex-direction: column;
    }

    .origins-operator-frame .operator-frame-meta,
    .origins-operator-frame .operator-frame-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .origins-operator-frame .operator-frame-actions,
    .origins-operator-frame .operator-frame-actions .btn {
        width: 100%;
    }
}

/* Routing table surface follows the same compact resource pattern as Origins. */
.routing-operator-frame .routing-catalog-section {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.routing-operator-frame .routing-catalog-section > .operator-section-head {
    min-height: 66px;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

.routing-operator-frame .routing-catalog-section > .operator-section-body {
    min-width: 0;
    padding: 16px;
}

[data-theme="dark"] .routing-operator-frame .routing-catalog-section > .operator-section-head {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

.routing-operator-frame .routing-table-surface,
.apisecurity-operator-frame .routing-table-surface {
    min-width: 0;
    overflow: visible;
    border: none;
    border-radius: var(--radius-sm, 2px);
    background: transparent;
}

.routing-operator-frame .routing-rule-table.config-table-wrap,
.apisecurity-operator-frame .routing-rule-table.config-table-wrap {
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.routing-operator-frame .routing-rule-table .config-enterprise-table,
.apisecurity-operator-frame .routing-rule-table .config-enterprise-table {
    min-width: 1000px;
    table-layout: fixed;
}

.routing-operator-frame .routing-rule-table .config-enterprise-table th,
.apisecurity-operator-frame .routing-rule-table .config-enterprise-table th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.routing-operator-frame .routing-rule-table .config-enterprise-table th:nth-child(1) { width: 20%; }
.routing-operator-frame .routing-rule-table .config-enterprise-table th:nth-child(2) { width: 16%; }
.routing-operator-frame .routing-rule-table .config-enterprise-table th:nth-child(3) { width: 24%; }
.routing-operator-frame .routing-rule-table .config-enterprise-table th:nth-child(4) { width: 14%; }
.routing-operator-frame .routing-rule-table .config-enterprise-table th:nth-child(5) { width: 11%; }
.routing-operator-frame .routing-rule-table .config-enterprise-table th:nth-child(6) { width: 7%; }
.routing-operator-frame .routing-rule-table .config-enterprise-table th:nth-child(7) { width: 8%; }

.routing-operator-frame .routing-rule-table .config-enterprise-table td,
.apisecurity-operator-frame .routing-rule-table .config-enterprise-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-secondary);
    font-size: 13px;
    vertical-align: middle;
}

.routing-operator-frame .routing-rule-table .config-enterprise-table tbody tr:last-child td,
.apisecurity-operator-frame .routing-rule-table .config-enterprise-table tbody tr:last-child td {
    border-bottom: 0;
}

.routing-operator-frame .routing-rule-table .config-enterprise-table tbody tr:hover td,
.apisecurity-operator-frame .routing-rule-table .config-enterprise-table tbody tr:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, #ffffff));
}

.routing-operator-frame .routing-backend-list {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.routing-operator-frame .routing-backend-url {
    display: block;
    overflow: hidden;
    color: var(--text-main);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.routing-operator-frame .routing-status-toggle-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    font: inherit;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.routing-operator-frame .routing-status-toggle-btn:hover {
    opacity: 0.85;
    transform: scale(1.04);
}

.routing-operator-frame .routing-status-toggle-btn:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
}

.routing-operator-frame .routing-row-actions {
    justify-content: flex-end;
}

.routing-operator-frame .routing-rule-table .config-table-empty-cell .empty-state,
.apisecurity-operator-frame .routing-rule-table .config-table-empty-cell .empty-state {
    height: auto;
    min-height: 220px;
    padding: 32px 20px;
}

@media (max-width: 960px) {
    .routing-operator-frame .operator-frame-header {
        flex-direction: column;
    }

    .routing-operator-frame .operator-frame-meta,
    .routing-operator-frame .operator-frame-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .routing-operator-frame .operator-frame-actions,
    .routing-operator-frame .operator-frame-actions .btn {
        width: 100%;
    }
}

.routing-editor-workspace {
    min-height: 100%;
    flex: 1 0 auto;
    padding: 24px 32px 40px;
    background: var(--operator-surface, #ffffff);
}

.origins-operator-frame .origins-target-entry {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.origins-operator-frame .origins-target-entry .config-status-pill {
    font-size: 10px;
    white-space: nowrap;
}

.routing-editor-workspace .operator-resource-header {
    align-items: center;
}

.routing-editor-workspace .operator-resource-actions > .btn {
    min-height: 40px;
}

.routing-editor-workspace .operator-resource-body {
    padding-top: 20px;
}

.routing-editor-form,
.routing-editor-layout,
.routing-editor-main,
.routing-editor-aside {
    min-width: 0;
}

.routing-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
    gap: 18px;
}

.routing-editor-aside {
    display: grid;
    gap: 18px;
}

.routing-editor-panel {
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.routing-editor-panel-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

.routing-editor-panel-head h3,
.routing-editor-panel-head p,
.routing-editor-group-copy h4,
.routing-editor-group-copy p {
    margin: 0;
}

.routing-editor-panel-head h3 {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
    letter-spacing: -0.01em;
}

.routing-editor-panel-head p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.routing-editor-group {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 20px;
}

.routing-editor-group + .routing-editor-group {
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.routing-editor-group-copy h4 {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.routing-editor-group-copy p {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.routing-editor-fields {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.routing-editor-fields.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.routing-editor-workspace .settings-field {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.routing-editor-workspace .settings-field > label {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.routing-editor-workspace .routing-required {
    margin-left: 5px;
    color: var(--operator-link, var(--primary));
    font-size: 9px;
    letter-spacing: 0.06em;
}

.routing-editor-workspace .settings-field input,
.routing-editor-workspace .settings-field select,
.routing-editor-workspace .settings-field textarea {
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
    box-shadow: none;
}

.routing-editor-workspace .settings-field textarea {
    min-height: 112px;
    padding: 10px 11px;
    line-height: 1.5;
    resize: vertical;
}

.routing-editor-workspace .settings-field input:focus,
.routing-editor-workspace .settings-field select:focus,
.routing-editor-workspace .settings-field textarea:focus {
    outline: none;
    border-color: var(--operator-link, var(--primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--operator-link, var(--primary)) 16%, transparent);
}

.routing-editor-workspace .settings-hint {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.routing-editor-side-body {
    padding: 16px 18px;
}

.routing-editor-workspace .route-enabled-toggle {
    min-height: 48px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.routing-editor-workspace .routing-edge-context {
    display: grid;
    gap: 10px;
}

.routing-editor-workspace .routing-edge-context-row {
    display: flex;
    min-height: 48px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.routing-editor-workspace .routing-edge-context-row > span:nth-child(2) {
    flex: 1 1 180px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 1080px) {
    .routing-editor-layout {
        grid-template-columns: 1fr;
    }

    .routing-editor-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .routing-editor-workspace {
        padding: 18px 18px 28px;
    }

    .routing-editor-workspace .operator-resource-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .routing-editor-workspace .operator-resource-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .routing-editor-group,
    .routing-editor-fields.two,
    .routing-editor-aside {
        grid-template-columns: 1fr;
    }

    .routing-editor-group {
        gap: 14px;
        padding: 16px;
    }
}

@media (max-width: 520px) {
    .routing-editor-workspace .operator-resource-actions,
    .routing-editor-workspace .operator-resource-actions > .btn {
        width: 100%;
    }

    .routing-editor-workspace .operator-resource-actions > .btn {
        min-height: 44px;
    }
}

.flow-operator-frame .flow-operator-stack {
    display: grid;
    gap: 0;
}

.flow-operator-frame .flow-operator-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 16px;
    align-items: start;
}

.flow-operator-frame .flow-operator-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

/* IP reputation console */
.flow-operator-frame .flow-reputation-console {
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-reputation-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-reputation-kpi {
    display: flex;
    min-height: 116px;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
    padding: 14px 16px;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-reputation-kpi:last-child {
    border-right: 0;
}

.flow-operator-frame .flow-reputation-kpi-label,
.flow-operator-frame .flow-reputation-control-label {
    display: inline-flex;
    align-items: center;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.flow-operator-frame .flow-reputation-kpi strong {
    color: var(--text-main);
    font-size: 22px;
    font-weight: 740;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.flow-operator-frame .flow-reputation-kpi strong small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

.flow-operator-frame .flow-reputation-kpi-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.flow-operator-frame .flow-reputation-kpi-note i {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-reputation-kpi-note i.is-active {
    background: var(--success, #16a34a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #16a34a) 12%, transparent);
}

.flow-operator-frame .flow-reputation-section + .flow-reputation-section {
    border-top: 1px solid var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-reputation-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-reputation-section-head h3 {
    display: inline-flex;
    align-items: center;
    margin: 5px 0 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
    line-height: 1.25;
}

.flow-operator-frame .flow-reputation-section-head p {
    max-width: 760px;
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.flow-operator-frame .flow-reputation-policy-section {
    padding: 16px;
    border-bottom: 0;
}

.flow-operator-frame .flow-reputation-policy-section .operator-section-head {
    margin-bottom: 12px;
}

.flow-operator-frame .flow-reputation-policy-section .operator-section-body {
    min-width: 0;
}

.flow-operator-frame .flow-reputation-policy-list {
    display: grid;
    gap: 10px;
    border: 0;
    background: transparent;
}

.flow-operator-frame .flow-reputation-policy-row {
    border: 1px solid var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-reputation-policy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
}

.flow-operator-frame .flow-reputation-threshold {
    min-width: 0;
    padding: 20px 22px 18px;
}

.flow-operator-frame .flow-reputation-control-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.flow-operator-frame .flow-reputation-control-head p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.flow-operator-frame .flow-reputation-score {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--text-muted);
    white-space: nowrap;
}

.flow-operator-frame .flow-reputation-score strong {
    color: var(--text-main);
    font-size: 28px;
    font-weight: 760;
    letter-spacing: -0.04em;
    line-height: 1;
}

.flow-operator-frame .flow-reputation-score span {
    font-size: 11px;
    font-weight: 650;
}

.flow-operator-frame .flow-reputation-scale {
    display: grid;
    grid-template-columns: 35fr 30fr 35fr;
    margin-bottom: 7px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.flow-operator-frame .flow-reputation-scale span:nth-child(2) {
    text-align: center;
}

.flow-operator-frame .flow-reputation-scale span:last-child {
    text-align: right;
}

.flow-operator-frame .flow-reputation-track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--operator-line, rgba(255, 255, 255, 0.1));
}

.flow-operator-frame .flow-reputation-track-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--operator-orange, var(--brand-orange));
    opacity: 0.9;
}

.flow-operator-frame .flow-reputation-track-marker {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 2px solid var(--operator-surface, #11141a);
    border-radius: 50%;
    background: var(--operator-orange, var(--brand-orange));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transform: translate(-50%, -50%);
}

.flow-operator-frame .flow-reputation-range {
    width: 100%;
    height: 24px;
    margin: -16px 0 0;
    cursor: pointer;
    opacity: 0;
}

.flow-operator-frame .flow-reputation-scale-values {
    display: flex;
    justify-content: space-between;
    margin-top: -3px;
    color: var(--text-dim);
    font-size: 9px;
}

.flow-operator-frame .flow-reputation-decision-note {
    margin-top: 16px;
    padding: 9px 11px;
    border-left: 3px solid var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.flow-operator-frame .flow-reputation-actions {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 16px;
    border-left: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-reputation-action {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 11px 12px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.14s ease, background-color 0.14s ease;
}

.flow-operator-frame .flow-reputation-action:hover,
.flow-operator-frame .flow-reputation-provider:hover {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.flow-operator-frame .flow-reputation-action.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-reputation-action-icon,
.flow-operator-frame .flow-reputation-provider-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
}

.flow-operator-frame .flow-reputation-action-icon svg,
.flow-operator-frame .flow-reputation-provider-icon svg {
    width: 17px;
    height: 17px;
}

.flow-operator-frame .flow-reputation-action.is-active .flow-reputation-action-icon {
    color: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-reputation-action-copy {
    display: grid;
    gap: 3px;
}

.flow-operator-frame .flow-reputation-action-copy strong {
    font-size: 12px;
    font-weight: 700;
}

.flow-operator-frame .flow-reputation-action-copy small {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.flow-operator-frame .flow-reputation-action-check {
    width: 10px;
    height: 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 50%;
}

.flow-operator-frame .flow-reputation-action.is-active .flow-reputation-action-check {
    border: 3px solid var(--operator-orange, var(--brand-orange));
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-reputation-sources-head {
    align-items: center;
}

.flow-operator-frame .flow-reputation-cti-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-reputation-cti-main {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}

.flow-operator-frame .flow-reputation-cti-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 12%, transparent);
    color: var(--operator-orange, var(--brand-orange));
    flex-shrink: 0;
}

.flow-operator-frame .flow-reputation-cti-details {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.flow-operator-frame .flow-reputation-cti-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow-operator-frame .flow-reputation-cti-title-row h4 {
    margin: 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 740;
    letter-spacing: -0.01em;
}

.flow-operator-frame .flow-reputation-cti-desc {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    max-width: 720px;
}

.flow-operator-frame .flow-reputation-cti-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 4px;
}

.flow-operator-frame .flow-reputation-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 500;
}

.flow-operator-frame .flow-reputation-meta-item svg {
    width: 13px;
    height: 13px;
    color: var(--text-dim);
    flex-shrink: 0;
}

.flow-operator-frame .flow-reputation-meta-item strong {
    color: var(--text-main);
    font-weight: 600;
}

.flow-operator-frame .flow-reputation-cti-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .flow-operator-frame .flow-reputation-cti-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .flow-operator-frame .flow-reputation-cti-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* IP Reputation Policy Exceptions (App UI Alignment) */

/* Policy Exceptions & Rules Table */
.flow-operator-frame .flow-reputation-table-container {
    width: 100%;
    overflow-x: auto;
}

.flow-operator-frame .flow-reputation-rules-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.flow-operator-frame .flow-reputation-rules-table th {
    height: 38px;
    padding: 0 18px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
}

.flow-operator-frame .flow-reputation-rules-table th.th-rule-target { width: 28%; min-width: 150px; }
.flow-operator-frame .flow-reputation-rules-table th.th-rule-action { width: 14%; min-width: 80px; }
.flow-operator-frame .flow-reputation-rules-table th.th-rule-score  { width: 14%; min-width: 80px; }
.flow-operator-frame .flow-reputation-rules-table th.th-rule-desc   { width: 34%; }
.flow-operator-frame .flow-reputation-rules-table th.th-rule-actions{ width: 10%; min-width: 80px; text-align: right; }

.flow-operator-frame .flow-reputation-rules-table td {
    height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    vertical-align: middle;
    color: var(--text-main);
    font-size: 13px;
}

.flow-operator-frame .flow-reputation-rules-table tr:hover td {
    background: var(--operator-surface-soft, rgba(255, 255, 255, 0.02));
}

.flow-operator-frame .flow-reputation-rules-table tr:last-child td {
    border-bottom: 0;
}

.flow-operator-frame .flow-reputation-action-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid var(--operator-line, rgba(255, 255, 255, 0.14));
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main, #f1f5f9) !important;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.flow-operator-frame .flow-reputation-rules-table .btn-delete-rule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: auto;
}

.flow-operator-frame .flow-reputation-rules-table .btn-delete-rule:hover {
    border-color: #ef4444;
    background: #ef4444;
}

.flow-operator-frame .flow-rate-row-action {
    padding: 3px 8px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.flow-operator-frame .flow-rate-row-action.is-danger:hover {
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger, #ef4444);
}

@media (max-width: 900px) {
    .flow-operator-frame .flow-reputation-rules-table {
        min-width: 600px;
    }
}

/* Tor Threat Feed Independent KPI Cards & Inventory Table */
.flow-operator-frame .tor-feed-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.flow-operator-frame .tor-feed-kpi-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 96px;
    padding: 14px 16px;
    border: 1px solid var(--operator-line, #232a35);
    border-radius: 6px;
    background: var(--operator-surface, #11141a);
}

.flow-operator-frame .tor-feed-kpi-label {
    display: block;
    color: var(--text-dim, #717d8f);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.flow-operator-frame .tor-feed-kpi-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
    color: var(--text-main, #f1f5f9);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}

.flow-operator-frame .tor-feed-kpi-unit {
    color: var(--text-muted, #94a3b8);
    font-size: 12px;
    font-weight: 500;
}

.flow-operator-frame .tor-feed-kpi-sub {
    display: block;
    margin-top: 4px;
    color: var(--text-muted, #94a3b8);
    font-size: 11px;
    line-height: 1.3;
}

.flow-operator-frame .tor-inventory-table {
    width: 100%;
    table-layout: fixed;
}

.flow-operator-frame .tor-inventory-table th {
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim, #717d8f);
    border-bottom: 1px solid var(--operator-line, #232a35);
}

.flow-operator-frame .tor-inventory-table td {
    padding: 11px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--operator-line-soft, rgba(255, 255, 255, 0.04));
}

.flow-operator-frame .tor-inventory-table tr:hover td {
    background: var(--operator-surface-soft, rgba(255, 255, 255, 0.02));
}

.flow-operator-frame .tor-th-ip {
    width: 36%;
    min-width: 200px;
}

.flow-operator-frame .tor-th-proto {
    width: 14%;
}

.flow-operator-frame .tor-th-category {
    width: 20%;
}

.flow-operator-frame .tor-th-source {
    width: 18%;
}

.flow-operator-frame .tor-th-status {
    width: 12%;
    text-align: right;
}

.flow-operator-frame .tor-ip-cell {
    min-width: 200px;
}

.flow-operator-frame .tor-ip-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow-operator-frame .tor-ip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--operator-link, var(--control-accent)) 12%, var(--operator-surface, #11141a));
    color: var(--operator-link, var(--control-accent));
    flex-shrink: 0;
}

.flow-operator-frame .tor-ip-icon svg {
    width: 13px;
    height: 13px;
}

.flow-operator-frame .tor-ip-code {
    color: var(--text-main, #f1f5f9);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

@media (max-width: 900px) {
    .flow-operator-frame .tor-feed-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    .flow-operator-frame .tor-feed-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.flow-operator-frame .flow-rate-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}

.flow-operator-frame .flow-rate-page {
    display: grid;
    gap: 14px;
}

.flow-operator-frame .flow-rate-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-rate-summary-item {
    min-width: 0;
    padding: 14px 16px;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-rate-summary-item:last-child {
    border-right: 0;
}

.flow-operator-frame .flow-rate-summary-item > span,
.flow-operator-frame .flow-rate-eyebrow {
    display: block;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.flow-operator-frame .flow-rate-summary-item > span {
    position: relative;
    padding-left: 13px;
}

.flow-operator-frame .flow-rate-summary-item > span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--text-dim);
    transform: translateY(-50%);
}

.flow-operator-frame .flow-rate-summary-item.is-primary > span::before,
.flow-operator-frame .flow-rate-summary-item:nth-child(4) > span::before {
    background: var(--operator-link, var(--primary));
}

.flow-operator-frame .flow-rate-summary-item strong {
    display: block;
    margin-top: 8px;
    color: var(--text-main);
    font-size: 27px;
    font-weight: 760;
    line-height: 1;
}

.flow-operator-frame .flow-rate-summary-item small {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-operator-frame .flow-rate-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
    align-items: start;
}

.flow-operator-frame .flow-rate-main-column,
.flow-operator-frame .flow-rate-side-column {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.flow-operator-frame .flow-rate-card {
    min-width: 0;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-rate-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: linear-gradient(180deg, color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f8fafc), var(--operator-surface, #ffffff));
}

.flow-operator-frame .flow-rate-card-head-compact {
    padding-bottom: 12px;
}

.flow-operator-frame .flow-rate-card-head h3 {
    margin: 6px 0 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 720;
    line-height: 1.25;
}

.flow-operator-frame .flow-rate-card-head p {
    max-width: 680px;
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.flow-operator-frame .flow-rate-chip {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 650;
}

.flow-operator-frame .flow-rate-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.flow-operator-frame .flow-rate-control {
    min-width: 0;
    padding: 18px;
}

.flow-operator-frame .flow-rate-control + .flow-rate-control {
    border-left: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-rate-control-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.flow-operator-frame .flow-rate-control-head label,
.flow-operator-frame .flow-rate-field label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 720;
}

.flow-operator-frame .flow-rate-control-head span {
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 650;
}

.flow-operator-frame .flow-rate-control p,
.flow-operator-frame .flow-rate-field p {
    margin: 9px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.flow-operator-frame .flow-rate-range {
    width: 100%;
    height: 18px;
    margin: 0 0 14px;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.flow-operator-frame .flow-rate-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--operator-link, var(--primary)), color-mix(in srgb, var(--operator-link, var(--primary)) 28%, var(--operator-line, #d9dde3)));
}

.flow-operator-frame .flow-rate-range-secondary::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--operator-orange, var(--brand-orange)), color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 26%, var(--operator-line, #d9dde3)));
}

.flow-operator-frame .flow-rate-range::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -6px;
    appearance: none;
    border: 2px solid var(--operator-surface, #ffffff);
    border-radius: 999px;
    background: var(--text-main);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
}

.flow-operator-frame .flow-rate-range::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 46%, var(--operator-line, #d9dde3));
}

.flow-operator-frame .flow-rate-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid var(--operator-surface, #ffffff);
    border-radius: 999px;
    background: var(--text-main);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
}

.flow-operator-frame .flow-rate-input-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto minmax(140px, 0.75fr);
    align-items: stretch;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-rate-input-row-compact {
    grid-template-columns: minmax(140px, 1fr) auto;
    max-width: 360px;
}

.flow-operator-frame .flow-rate-input,
.flow-operator-frame .flow-rate-select {
    min-width: 0;
    min-height: 36px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
    font-weight: 620;
}

.flow-operator-frame .flow-rate-input {
    padding: 0 12px;
}

.flow-operator-frame .flow-rate-select {
    padding: 0 32px 0 12px;
    border-left: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-rate-select-full {
    width: 100%;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-rate-divider,
.flow-operator-frame .flow-rate-unit {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border-left: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
}

.flow-operator-frame .flow-rate-input:focus,
.flow-operator-frame .flow-rate-select:focus {
    outline: 0;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--operator-link, var(--primary)) 38%, transparent);
}

.flow-operator-frame .flow-rate-policy-card {
    display: flex;
    flex-direction: column;
}

.flow-operator-frame .flow-rate-algo-list {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.flow-operator-frame .flow-rate-algo-option,
.flow-operator-frame .flow-rate-choice,
.flow-operator-frame .flow-rate-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    border: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
    cursor: pointer;
    transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.flow-operator-frame .flow-rate-algo-option {
    padding: 12px;
}

.flow-operator-frame .flow-rate-algo-option:hover,
.flow-operator-frame .flow-rate-choice:hover,
.flow-operator-frame .flow-rate-toggle-row:hover {
    border-color: var(--operator-line, #d9dde3);
    background: #f8fafc;
}

.flow-operator-frame .flow-rate-algo-option.is-active,
.flow-operator-frame .flow-rate-choice.is-active {
    border-color: var(--operator-link, var(--primary));
    box-shadow: inset 0 0 0 1px var(--operator-link, var(--primary));
}

.flow-operator-frame .flow-rate-algo-mark,
.flow-operator-frame .flow-rate-choice-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    margin-top: 4px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 999px;
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-rate-algo-option.is-active .flow-rate-algo-mark,
.flow-operator-frame .flow-rate-choice.is-active .flow-rate-choice-dot {
    border-color: var(--operator-link, var(--primary));
    background: var(--operator-link, var(--primary));
    box-shadow: inset 0 0 0 2px var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-rate-algo-option strong,
.flow-operator-frame .flow-rate-choice strong,
.flow-operator-frame .flow-rate-toggle-row strong {
    display: block;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 720;
    line-height: 1.25;
}

.flow-operator-frame .flow-rate-algo-option small,
.flow-operator-frame .flow-rate-choice small,
.flow-operator-frame .flow-rate-toggle-row small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.flow-operator-frame .flow-rate-field {
    margin-top: auto;
    padding: 14px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-rate-field label {
    display: block;
    margin-bottom: 8px;
}

.flow-operator-frame .flow-rate-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
}

.flow-operator-frame .flow-rate-choice-grid-stack {
    grid-template-columns: 1fr;
}

.flow-operator-frame .flow-rate-choice {
    min-height: 72px;
    padding: 13px;
}

.flow-operator-frame .flow-rate-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.flow-operator-frame .flow-rate-toggle-list {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.flow-operator-frame .flow-rate-toggle-row {
    align-items: center;
    justify-content: space-between;
    padding: 12px;
}

.flow-operator-frame .flow-rate-toggle-row > span:first-child {
    min-width: 0;
}

.flow-operator-frame .flow-rate-overrides-card .flow-rate-card-head {
    align-items: center;
}

.flow-operator-frame .flow-rate-table-wrap {
    margin: 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    overflow: auto;
}

.flow-operator-frame .flow-rate-table {
    width: 100%;
    border-collapse: collapse;
}

.flow-operator-frame .flow-rate-table th {
    height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: #f8fafc;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.flow-operator-frame .flow-rate-table td {
    height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-main);
    font-size: 12px;
}

.flow-operator-frame .flow-rate-table tr:last-child td {
    border-bottom: 0;
}

.flow-operator-frame .flow-rate-path {
    font-family: var(--font-main);
    font-weight: 650;
}

.flow-operator-frame .flow-rate-actions {
    text-align: right;
}

.flow-operator-frame .flow-rate-empty {
    height: 86px !important;
    text-align: center;
}

.flow-operator-frame .flow-rate-empty strong,
.flow-operator-frame .flow-rate-empty span {
    display: block;
}

.flow-operator-frame .flow-rate-empty strong {
    color: var(--text-main);
    font-size: 13px;
}

.flow-operator-frame .flow-rate-empty span {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.flow-operator-frame .flow-rate-console {
    gap: 0;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-rate-console .flow-rate-summary {
    border: 0;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-rate-console .flow-rate-summary-item {
    min-height: 132px;
    padding: 12px 16px;
}

.flow-operator-frame .flow-rate-console .flow-rate-summary-item strong {
    font-size: 23px;
}

.flow-operator-frame .flow-rate-kpi {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}

.flow-operator-frame .flow-rate-kpi-head {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.flow-operator-frame .flow-rate-kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.flow-operator-frame .flow-rate-kpi-value-row strong,
.flow-operator-frame .flow-rate-kpi.is-policy > strong {
    margin: 0;
}

.flow-operator-frame .flow-rate-kpi-value-row small {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    white-space: normal;
}

.flow-operator-frame .flow-rate-kpi-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-rate-kpi-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-rate-kpi-meter-split {
    display: flex;
    gap: 2px;
}

.flow-operator-frame .flow-rate-kpi-meter-split i {
    flex: 0 0 auto;
    border-radius: 1px;
    transition: width 0.2s ease;
}

.flow-operator-frame .flow-rate-kpi-meter-split .is-burst {
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 48%, var(--operator-line, #d9dde3));
}

.flow-operator-frame .flow-rate-kpi-scale {
    display: flex;
    justify-content: space-between;
    color: var(--text-dim);
    font-size: 9px;
}

.flow-operator-frame .flow-rate-kpi-scale b {
    font-weight: 600;
}

.flow-operator-frame .flow-rate-kpi-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 34px;
}

.flow-operator-frame .flow-rate-kpi-bars i {
    flex: 1 1 0;
    min-width: 4px;
    max-width: 15px;
    border-radius: 2px 2px 0 0;
    background: var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-rate-kpi-bars i.is-live {
    background: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-rate-kpi-caption {
    margin: 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.3;
    white-space: normal;
}

.flow-operator-frame .flow-rate-kpi-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.flow-operator-frame .flow-rate-kpi-badges span {
    padding: 3px 7px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 4px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, #f3f4f6);
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
}

.flow-operator-frame .flow-rate-kpi-badges span::before {
    display: none;
}

.flow-operator-frame .flow-rate-section {
    border-bottom: 1px solid var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-rate-section:last-child {
    border-bottom: 0;
}

.flow-operator-frame .flow-rate-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-rate-section-head h3,
.flow-operator-frame .flow-rate-rail-title {
    margin: 5px 0 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
    line-height: 1.25;
}

.flow-operator-frame .flow-rate-section-head p {
    max-width: 820px;
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.flow-operator-frame .flow-rate-policy-grid,
.flow-operator-frame .flow-rate-behavior-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    min-height: 0;
}

.flow-operator-frame .flow-rate-budget-stack {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flow-operator-frame .flow-rate-measurement,
.flow-operator-frame .flow-rate-toggle-list {
    border-left: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-rate-control-row {
    padding: 14px 16px;
}

.flow-operator-frame .flow-rate-control-row + .flow-rate-control-row {
    border-left: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-rate-measurement {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px;
}

.flow-operator-frame .flow-rate-rail-title {
    margin: 0;
}

.flow-operator-frame .flow-rate-algo-list-inline {
    padding: 0;
}

.flow-operator-frame .flow-rate-behavior-grid .flow-rate-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px 16px;
}

.flow-operator-frame .flow-rate-behavior-grid .flow-rate-toggle-list {
    padding: 14px;
}

.flow-operator-frame .flow-rate-range::-webkit-slider-runnable-track {
    background: var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-rate-range-secondary::-webkit-slider-runnable-track {
    background: var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-rate-range::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border-color: var(--operator-surface, #ffffff);
    background: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-rate-range::-moz-range-track {
    background: var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-rate-range::-moz-range-thumb {
    background: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-rate-algo-option,
.flow-operator-frame .flow-rate-choice,
.flow-operator-frame .flow-rate-toggle-row {
    border-radius: 0;
}

.flow-operator-frame .flow-rate-algo-option.is-active,
.flow-operator-frame .flow-rate-choice.is-active {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-rate-algo-option.is-active .flow-rate-algo-mark,
.flow-operator-frame .flow-rate-choice.is-active .flow-rate-choice-dot {
    border-color: var(--operator-orange, var(--brand-orange));
    background: var(--operator-orange, var(--brand-orange));
}

/* The enforcement cards share the bypass column's height. Use that space to
   make the selected decision immediately legible instead of leaving it blank. */
.flow-operator-frame .flow-rate-behavior-grid .flow-rate-choice {
    position: relative;
    display: grid;
    place-items: center;
    padding: 28px 18px;
    text-align: center;
}

.flow-operator-frame .flow-rate-behavior-grid .flow-rate-choice-dot {
    position: absolute;
    top: 14px;
    left: 14px;
    margin: 0;
}

.flow-operator-frame .flow-rate-choice-content {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 250px;
}

.flow-operator-frame .flow-rate-choice-icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 50%;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 92%, var(--operator-line-soft, #eceff3));
    color: var(--text-muted);
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.flow-operator-frame .flow-rate-choice-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.flow-operator-frame .flow-rate-choice-copy {
    display: grid;
    gap: 3px;
}

.flow-operator-frame .flow-rate-behavior-grid .flow-rate-choice-copy strong {
    font-size: 14px;
    font-weight: 740;
}

.flow-operator-frame .flow-rate-behavior-grid .flow-rate-choice-copy small {
    margin-top: 0;
}

.flow-operator-frame .flow-rate-behavior-grid .flow-rate-choice:hover .flow-rate-choice-icon {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 46%, var(--operator-line, #d9dde3));
    color: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-rate-behavior-grid .flow-rate-choice.is-active .flow-rate-choice-icon {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 10%, var(--operator-surface, #ffffff));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 10%, transparent);
    color: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-rate-behavior-grid .flow-rate-choice:has(input:checked) {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-rate-behavior-grid .flow-rate-choice:has(input:checked) .flow-rate-choice-dot {
    border-color: var(--operator-orange, var(--brand-orange));
    background: var(--operator-orange, var(--brand-orange));
    box-shadow: inset 0 0 0 2px var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-rate-behavior-grid .flow-rate-choice:has(input:checked) .flow-rate-choice-icon {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 10%, var(--operator-surface, #ffffff));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 10%, transparent);
    color: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-rate-behavior-grid .flow-rate-choice:focus-within {
    outline: 2px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 68%, transparent);
    outline-offset: -3px;
}

@media (max-width: 700px) {
    .flow-operator-frame .flow-rate-behavior-grid .flow-rate-choice {
        min-height: 164px;
    }
}

.flow-operator-frame .flow-rate-table-surface {
    display: grid;
    min-width: 0;
    gap: 0;
}

.flow-operator-frame .rate-rules-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    min-height: 42px;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-bottom: 0;
    border-radius: var(--radius-sm, 2px) var(--radius-sm, 2px) 0 0;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--operator-surface-muted, #f7f8fa));
}

.flow-operator-frame .rate-rules-table-metrics {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    flex-wrap: wrap;
}

.flow-operator-frame .rate-rules-table-metrics span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-height: 26px;
    padding: 4px 8px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.flow-operator-frame .rate-rules-table-metrics strong {
    color: var(--text-main);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 780;
    letter-spacing: 0;
}

.flow-operator-frame .rate-rules-table-note {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    text-align: right;
}

.flow-operator-frame .rate-limit-rules-table.config-table-wrap {
    margin: 0;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
    overflow-x: auto;
    overflow-y: visible;
}

.flow-operator-frame .rate-rules-table-toolbar + .rate-limit-rules-table.config-table-wrap {
    border-top: 0;
    border-radius: 0 0 var(--radius-sm, 2px) var(--radius-sm, 2px);
}

.flow-operator-frame .rate-limit-rules-table .config-enterprise-table {
    min-width: 880px;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

.flow-operator-frame .rate-limit-rules-table .config-enterprise-table th {
    height: 38px;
    padding: 0 16px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, #f3f4f6);
    color: var(--text-dim, #64748b);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

/* 7 Columns Widths & Alignments */
.flow-operator-frame .rate-limit-rules-table .config-enterprise-table th:nth-child(1) { width: 28%; min-width: 170px; } /* Target Route */
.flow-operator-frame .rate-limit-rules-table .config-enterprise-table th:nth-child(2) { width: 14%; min-width: 110px; } /* Scope & Match */
.flow-operator-frame .rate-limit-rules-table .config-enterprise-table th:nth-child(3) { width: 15%; min-width: 110px; } /* Rate & Burst */
.flow-operator-frame .rate-limit-rules-table .config-enterprise-table th:nth-child(4) { width: 15%; min-width: 120px; } /* Mitigation */
.flow-operator-frame .rate-limit-rules-table .config-enterprise-table th:nth-child(5) { width: 14%; min-width: 110px; } /* Engine Tuning */
.flow-operator-frame .rate-limit-rules-table .config-enterprise-table th:nth-child(6) { width: 6%; min-width: 65px; text-align: center; } /* Priority */
.flow-operator-frame .rate-limit-rules-table .config-enterprise-table th:nth-child(7) { width: 8%; min-width: 95px; text-align: right; padding-right: 18px; } /* Actions */

.flow-operator-frame .rate-limit-rules-table .config-enterprise-table td {
    height: 52px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    vertical-align: middle;
    font-size: 12px;
    color: var(--text-main);
}

.flow-operator-frame .rate-limit-rules-table .config-enterprise-table td:nth-child(6) {
    text-align: center;
}

.flow-operator-frame .rate-limit-rules-table .config-enterprise-table td:nth-child(7) {
    text-align: right;
    padding-right: 18px;
}

.flow-operator-frame .rate-limit-rules-table .config-enterprise-table td:nth-child(7) .config-table-actions {
    justify-content: flex-end;
    gap: 4px;
}

.flow-operator-frame .rate-limit-rules-table .config-enterprise-table tr:last-child td {
    border-bottom: 0;
}

.flow-operator-frame .rate-limit-rules-table .config-enterprise-table tbody tr {
    transition: background-color 0.14s ease;
}

.flow-operator-frame .rate-limit-rules-table .config-enterprise-table tbody tr:hover td {
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

[data-theme="dark"] .flow-operator-frame .rate-rules-table-toolbar {
    background: var(--operator-surface, #11141a) !important;
    border-color: var(--operator-line, #232a35) !important;
}

[data-theme="dark"] .flow-operator-frame .rate-rules-table-metrics span {
    background: var(--operator-canvas, #0b0d12) !important;
    border-color: var(--operator-line, #232a35) !important;
}

[data-theme="dark"] .flow-operator-frame .rate-limit-rules-table.config-table-wrap {
    background: var(--operator-surface, #11141a) !important;
    border-color: var(--operator-line, #232a35) !important;
}

[data-theme="dark"] .flow-operator-frame .rate-limit-rules-table .config-enterprise-table th {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 90%, #1a202c) !important;
    border-color: var(--operator-line, #232a35) !important;
}

[data-theme="dark"] .flow-operator-frame .rate-limit-rules-table .config-enterprise-table td {
    border-color: var(--operator-line-soft, rgba(255, 255, 255, 0.06)) !important;
}

[data-theme="dark"] .flow-operator-frame .rate-limit-rules-table .config-enterprise-table tbody tr:hover td {
    background: color-mix(in srgb, var(--brand-orange, #f97316) 6%, var(--operator-surface, #11141a)) !important;
}

.flow-operator-frame .flow-rate-path-mark {
    display: inline-block;
    width: 3px;
    height: 16px;
    margin-right: 9px;
    border-radius: 1px;
    background: var(--operator-orange, var(--brand-orange));
    vertical-align: -3px;
}

.flow-operator-frame .flow-rate-limit-value,
.flow-operator-frame .flow-rate-burst-value {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 740;
}

.flow-operator-frame .flow-rate-limit-unit {
    margin-left: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 520;
}

.flow-operator-frame .flow-rate-actions-head,
.flow-operator-frame .flow-rate-actions {
    text-align: right;
}

.flow-operator-frame .flow-rate-remove-rule {
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 620;
}

.flow-operator-frame .flow-rate-remove-rule:hover {
    border-color: color-mix(in srgb, var(--danger, #dc2626) 34%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--danger, #dc2626) 5%, var(--operator-surface, #ffffff));
    color: var(--danger, #dc2626);
}


.flow-operator-frame .flow-rate-empty {
    height: 64px !important;
}

/* ===== Rate Limit Creative UI ===== */

/* 2-column editor layout */
.flow-operator-frame .rl-editor-grid {
    display: grid;
    grid-template-columns: minmax(600px, 1.1fr) minmax(480px, 0.9fr);
    min-height: 0;
}

/* Left: dials panel */
.flow-operator-frame .rl-dials-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    border-right: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .rl-dial-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 20px 24px 22px;
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .rl-dial-block-primary {
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .rl-dial-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 720;
}

.flow-operator-frame .rl-dial-hint {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 560;
}

.flow-operator-frame .rl-dials-divider {
    width: 1px;
    height: auto;
    background: var(--operator-line-soft, #eceff3);
}

/* Scrubby dial stage */
.flow-operator-frame .rl-dial-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 16px 0 10px;
}

/* Scrubby big number */
.flow-operator-frame .rl-scrubby {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 142px;
    min-height: 92px;
    padding: 9px 16px;
    border: 1.5px solid var(--operator-line, #d9dde3);
    border-radius: 8px;
    background: var(--operator-surface, #ffffff);
    cursor: ns-resize;
    user-select: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.flow-operator-frame .rl-scrubby-primary {
    width: 142px;
    min-height: 92px;
    border-color: var(--operator-line, #d9dde3);
}

.flow-operator-frame .rl-scrubby:hover {
    border-color: var(--operator-orange, var(--brand-orange));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 12%, transparent);
}

.flow-operator-frame .rl-scrubby:focus-within {
    border-color: var(--operator-orange, var(--brand-orange));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 16%, transparent);
}

.flow-operator-frame .rl-scrubby:focus-visible {
    outline: none;
    border-color: var(--operator-orange, var(--brand-orange));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 18%, transparent);
}

.flow-operator-frame .rl-scrubby.is-dragging {
    border-color: var(--operator-orange, var(--brand-orange));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 22%, transparent);
}

.flow-operator-frame .rl-scrubby-value {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 34px;
    font-weight: 780;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    appearance: textfield;
    cursor: text;
    transition: color 0.1s;
}

.flow-operator-frame .rl-scrubby-value::-webkit-inner-spin-button,
.flow-operator-frame .rl-scrubby-value::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.flow-operator-frame .rl-scrubby-value:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .rl-scrubby.is-dragging .rl-scrubby-value {
    color: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .rl-scrubby-arrow {
    color: var(--text-dim);
    display: flex;
    transition: color 0.1s, transform 0.1s;
}

.flow-operator-frame .rl-scrubby:hover .rl-scrubby-arrow {
    color: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .rl-scrubby:hover .rl-scrubby-up {
    transform: translateY(-2px);
}

.flow-operator-frame .rl-scrubby:hover .rl-scrubby-down {
    transform: translateY(2px);
}

/* Vertical dial track (fill bar) */
.flow-operator-frame .rl-dial-track {
    position: absolute;
    top: 50%;
    left: calc(50% + 84px);
    width: 8px;
    height: 92px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--operator-line-soft, #eceff3);
    overflow: hidden;
}

.flow-operator-frame .rl-dial-block-primary .rl-dial-track {
    left: calc(50% + 84px);
    height: 92px;
}

.flow-operator-frame .rl-dial-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--operator-orange, var(--brand-orange)), color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 55%, #fff));
    transition: height 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.flow-operator-frame .rl-dial-fill-burst {
    background: linear-gradient(180deg, var(--primary, var(--primary)), color-mix(in srgb, var(--primary, var(--primary)) 55%, #fff));
}

/* Window segmented picker */
.flow-operator-frame .rl-window-row {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 10px;
    margin-top: 6px;
}

.flow-operator-frame .rl-window-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
}

.flow-operator-frame .rl-seg {
    display: inline-flex;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    overflow: hidden;
}

.flow-operator-frame .rl-seg-item {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.flow-operator-frame .rl-seg-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.flow-operator-frame .rl-seg-item span {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-right: 1px solid var(--operator-line, #d9dde3);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
    transition: background 0.12s, color 0.12s;
}

.flow-operator-frame .rl-seg-item:last-child span {
    border-right: 0;
}

.flow-operator-frame .rl-seg-item:hover span {
    background: #f8fafc;
    color: var(--text-main);
}

.flow-operator-frame .rl-seg-item.is-active span {
    background: var(--operator-orange, var(--brand-orange));
    color: #ffffff;
    font-weight: 720;
}

/* Right panel */
.flow-operator-frame .rl-right-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Arc gauge */
.flow-operator-frame .rl-gauge-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 116px;
    padding: 12px 20px 6px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .rl-gauge-summary {
    min-height: 94px;
    padding: 0;
    border: 0;
}

.flow-operator-frame .rl-gauge-summary .rl-gauge-svg {
    width: 134px;
}

.flow-operator-frame .rl-gauge-summary .rl-gauge-center {
    bottom: 13px;
}

.flow-operator-frame .rl-gauge-svg {
    width: 148px;
    height: auto;
}

.flow-operator-frame .rl-gauge-track {
    stroke: var(--operator-line, #d9dde3);
}

.flow-operator-frame .rl-gauge-fill {
    stroke: var(--operator-orange, var(--brand-orange));
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 50%, transparent));
    transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.flow-operator-frame .rl-gauge-center {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.flow-operator-frame .rl-gauge-value {
    display: block;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 22px;
    font-weight: 780;
    line-height: 1;
}

.flow-operator-frame .rl-gauge-unit {
    display: block;
    margin-top: 3px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 660;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Algorithm cards */
.flow-operator-frame .rl-algo-section,
.flow-operator-frame .rl-trackby-section {
    padding: 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .rl-trackby-section {
    border-bottom: 0;
}

.flow-operator-frame .rl-algo-label {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.flow-operator-frame .rl-algo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.flow-operator-frame .rl-algo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px;
    border: 1.5px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    cursor: pointer;
    transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}

.flow-operator-frame .rl-algo-card:focus-visible,
.flow-operator-frame .rl-trackby-card:focus-within {
    outline: 2px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 70%, transparent);
    outline-offset: 2px;
}

.flow-operator-frame .rl-algo-card:hover {
    border-color: var(--operator-line, #d9dde3);
    background: #f8fafc;
}

.flow-operator-frame .rl-algo-card.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 6%, var(--operator-surface, #ffffff));
}

.flow-operator-frame .rl-algo-icon {
    color: var(--text-dim);
    display: flex;
    transition: color 0.14s;
}

.flow-operator-frame .rl-algo-card.is-active .rl-algo-icon {
    color: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .rl-algo-card strong {
    display: block;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 720;
    line-height: 1.2;
}

.flow-operator-frame .rl-algo-card small {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.3;
}

.flow-operator-frame .rl-algo-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--operator-line, #d9dde3);
    border-radius: 999px;
    background: var(--operator-surface, #ffffff);
    transition: border-color 0.14s, background 0.14s;
}

.flow-operator-frame .rl-algo-card.is-active .rl-algo-check {
    border-color: var(--operator-orange, var(--brand-orange));
    background: var(--operator-orange, var(--brand-orange));
    box-shadow: inset 0 0 0 2px var(--operator-surface, #ffffff);
}

/* Track-by cards */
.flow-operator-frame .rl-trackby-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.flow-operator-frame .rl-trackby-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 4px;
    border: 1.5px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    cursor: pointer;
    transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
    text-align: center;
}

.flow-operator-frame .rl-trackby-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.flow-operator-frame .rl-trackby-card:hover {
    border-color: var(--operator-line, #d9dde3);
    background: #f8fafc;
}

.flow-operator-frame .rl-trackby-card.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 6%, var(--operator-surface, #ffffff));
}

.flow-operator-frame .rl-trackby-icon {
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.14s;
}

.flow-operator-frame .rl-trackby-card.is-active .rl-trackby-icon {
    color: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .rl-trackby-label {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 680;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: color 0.14s;
}

.flow-operator-frame .rl-trackby-card.is-active .rl-trackby-label {
    color: var(--text-main);
}

/* Responsive */
@media (max-width: 1100px) {
    .flow-operator-frame .rl-editor-grid {
        grid-template-columns: 1fr;
    }

    .flow-operator-frame .rl-dials-panel {
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .flow-operator-frame .rl-algo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .flow-operator-frame .rl-trackby-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 700px) {
    .flow-operator-frame .rl-dials-panel {
        grid-template-columns: 1fr;
    }

    .flow-operator-frame .rl-dials-divider {
        width: auto;
        height: 1px;
    }

    .flow-operator-frame .rl-dial-block {
        padding: 16px;
    }

    .flow-operator-frame .rl-scrubby {
        width: min(152px, calc(100vw - 112px));
    }

    .flow-operator-frame .rl-scrubby-primary {
        width: min(152px, calc(100vw - 112px));
    }

    .flow-operator-frame .rl-window-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-operator-frame .rl-seg {
        width: 100%;
    }

    .flow-operator-frame .rl-seg-item {
        flex: 1 1 0;
    }

    .flow-operator-frame .rl-seg-item span {
        width: 100%;
        justify-content: center;
    }

    .flow-operator-frame .rl-algo-grid {
        grid-template-columns: 1fr;
    }

    .flow-operator-frame .rl-trackby-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


.flow-operator-frame .flow-operator-side {
    display: grid;
    gap: 14px;
}

.flow-operator-frame .flow-geo-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-geo-kpi {
    display: flex;
    min-height: 112px;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
    padding: 14px 16px;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-geo-kpi:last-child {
    border-right: 0;
}

.flow-operator-frame .flow-geo-kpi-label {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.flow-operator-frame .flow-geo-kpi strong {
    color: var(--text-main);
    font-size: 22px;
    font-weight: 740;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.flow-operator-frame .flow-geo-kpi-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.flow-operator-frame .flow-geo-kpi-note i {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-geo-kpi-note i.is-active {
    background: var(--success, #16a34a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #16a34a) 12%, transparent);
}

.flow-operator-frame .operator-map-panel {
    position: relative;
    min-height: 420px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    overflow: hidden;
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-geo-layout {
    grid-template-columns: minmax(460px, 1.4fr) minmax(350px, 0.8fr);
    gap: 18px;
}

.flow-operator-frame .flow-geo-layout > .flow-operator-side {
    height: clamp(430px, 56vh, 620px);
    min-height: 430px;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.flow-operator-frame .geo-policy-panel,
.flow-operator-frame .geo-zones-panel {
    min-height: 0;
}

.flow-operator-frame .geo-console-panel {
    display: flex;
    min-height: 0;
    flex-direction: column;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .geo-console-head {
    display: flex;
    min-height: 70px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .geo-console-head h3 {
    margin: 5px 0 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
}

.flow-operator-frame .geo-console-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.flow-operator-frame .geo-zones-panel {
    height: 100%;
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.flow-operator-frame .geo-map-panel {
    height: clamp(430px, 56vh, 620px);
    min-height: 430px;
    isolation: isolate;
    background:
        linear-gradient(rgba(148, 163, 184, 0.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.11) 1px, transparent 1px),
        #f8fafc;
    background-size: 32px 32px;
}

.flow-operator-frame .geo-map-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.flow-operator-frame .geo-map-canvas.is-ready {
    opacity: 1;
}

.flow-operator-frame .geo-map-canvas .jvm-container,
.flow-operator-frame .geo-map-canvas svg {
    width: 100% !important;
    height: 100% !important;
}

.flow-operator-frame .geo-map-state {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
    background: rgba(248, 250, 252, 0.76);
    transition: opacity 0.16s ease, visibility 0.16s ease;
}

.flow-operator-frame .geo-map-state.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.flow-operator-frame .geo-map-state.is-error {
    flex-direction: column;
    padding: 24px;
    text-align: center;
}

.flow-operator-frame .geo-map-state.is-error strong {
    color: var(--text-main);
    font-size: 14px;
}

.flow-operator-frame .geo-map-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--operator-line, #d9dde3);
    border-top-color: var(--operator-link, var(--primary));
    border-radius: 50%;
    animation: geo-map-spin 0.7s linear infinite;
}

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

.flow-operator-frame .geo-map-panel .map-overlay {
    z-index: 4;
    top: 16px;
    left: 16px;
    padding: 11px 13px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

.flow-operator-frame .geo-map-panel .geo-map-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 9px;
}

.flow-operator-frame .geo-map-panel .map-overlay-right {
    right: 16px;
    left: auto;
    padding: 8px 10px;
}

.flow-operator-frame .geo-map-summary .overlay-label {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 620;
    letter-spacing: 0;
    text-transform: none;
}

.flow-operator-frame .geo-map-summary .overlay-value {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 760;
    line-height: 1;
}

.flow-operator-frame .geo-map-enforcement .overlay-chip {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 680;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.flow-operator-frame .geo-map-legend {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.85);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.flow-operator-frame .geo-map-legend-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.flow-operator-frame .geo-map-legend-swatch.is-allow {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.flow-operator-frame .geo-map-panel .jvm-zoom-btn {
    position: absolute;
    z-index: 5;
    left: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.82);
    color: #f1f5f9;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    user-select: none;
}

.flow-operator-frame .geo-map-panel .jvm-zoom-btn:hover {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(96, 165, 250, 0.4);
    color: #60a5fa;
}

.flow-operator-frame .geo-map-panel .jvm-zoom-btn:active {
    background: rgba(51, 65, 85, 0.95);
    transform: scale(0.95);
}

.flow-operator-frame .geo-map-panel .jvm-zoom-btn.jvm-zoomin {
    top: 16px;
    border-radius: 8px 8px 0 0;
    border-bottom: 0;
}

.flow-operator-frame .geo-map-panel .jvm-zoom-btn.jvm-zoomout {
    top: 48px;
    border-radius: 0 0 8px 8px;
}

.jvm-tooltip {
    position: absolute;
    z-index: 9999;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #f8fafc !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    pointer-events: none !important;
    font-family: inherit !important;
}

.flow-operator-frame .geo-fencing-state {
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px;
}

.flow-operator-frame .geo-fencing-state .operator-choice-grid {
    gap: 8px;
}

.flow-operator-frame .geo-fencing-state .operator-choice-card {
    min-height: 56px;
    align-content: center;
    gap: 0;
    padding: 10px 12px;
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f8fafc);
    box-shadow: none;
    transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.flow-operator-frame .geo-fencing-state .operator-choice-card:hover {
    border-color: #94a3b8;
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .geo-fencing-state .operator-choice-card.is-active {
    box-shadow: inset 0 0 0 1px currentColor;
}

.flow-operator-frame .geo-fencing-state .operator-choice-card.is-active.is-block {
    border-color: color-mix(in srgb, var(--danger) 70%, var(--operator-line, #d9dde3));
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 5%, var(--operator-surface, #ffffff));
}

.flow-operator-frame .geo-fencing-state .operator-choice-card.is-active.is-allow {
    border-color: color-mix(in srgb, var(--success) 70%, var(--operator-line, #d9dde3));
    color: var(--success);
    background: color-mix(in srgb, var(--success) 5%, var(--operator-surface, #ffffff));
}

.flow-operator-frame .geo-mode-card-head {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.flow-operator-frame .section-geo-mode-icon {
    display: inline-flex;
    color: var(--text-muted);
}

.flow-operator-frame .section-geo-mode-icon svg {
    width: 17px;
    height: 17px;
}

.flow-operator-frame .geo-fencing-state .section-geo-mode-title {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 690;
}

.flow-operator-frame .geo-policy-readiness {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.flow-operator-frame .geo-policy-readiness .flow-status-dot {
    margin-top: 3px;
    flex: 0 0 auto;
}

.flow-operator-frame .geo-zones-table {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .geo-zones-table-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 66px 28px;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 10px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, #e2e8f0);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 730;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* Keep action-only columns available to assistive technology without consuming layout space. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
}

.flow-operator-frame .flow-operator-side .section-selection-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: var(--operator-surface, #ffffff);
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.flow-operator-frame .flow-operator-side .section-selection-list::-webkit-scrollbar {
    width: 10px;
}

.flow-operator-frame .flow-operator-side .section-selection-list::-webkit-scrollbar-thumb {
    min-height: 34px;
    border: 2px solid color-mix(in srgb, var(--operator-surface, #ffffff) 94%, #e2e8f0);
    border-radius: 999px;
    background: #94a3b8;
}

.flow-operator-frame .flow-operator-side .section-selection-list::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, #e2e8f0);
}

.flow-operator-frame .flow-operator-side .section-selection-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 66px 28px;
    gap: 8px;
    min-height: 54px;
    padding: 8px 10px;
    border-bottom-color: var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-operator-side .section-selection-row:last-child {
    border-bottom: 0;
}

.flow-operator-frame .geo-zone-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.flow-operator-frame .country-flag {
    width: 34px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

.flow-operator-frame .geo-zone-identity .text-13 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-operator-frame .geo-zone-type {
    align-self: center;
    color: var(--text-muted);
    font-size: 11px;
}

.flow-operator-frame .geo-zone-remove {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 18px;
    cursor: pointer;
}

.flow-operator-frame .geo-zone-remove:hover,
.flow-operator-frame .geo-zone-remove:focus-visible {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
    outline: 0;
}

.flow-operator-frame .geo-manage-btn {
    min-height: 34px;
    flex: 0 0 auto;
    font-weight: 640;
}

.flow-operator-frame .geo-manage-btn > span {
    font-size: 17px;
    font-weight: 400;
}

.flow-operator-frame .geo-zones-empty {
    flex: 1 1 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.flow-operator-frame .geo-zones-empty strong {
    color: var(--text-main);
    font-size: 13px;
}

.flow-operator-frame .geo-zones-empty-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 50%;
    color: var(--operator-link, var(--primary));
    background: #f8fafc;
}

.flow-operator-frame .geo-zones-empty-icon svg {
    width: 17px;
    height: 17px;
}

.flow-operator-frame .flow-module-status,
.apisecurity-operator-frame .flow-module-status {
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.flow-operator-frame .flow-module-status::before,
.apisecurity-operator-frame .flow-module-status::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--operator-link, var(--primary));
    opacity: 0.9;
}

.flow-operator-frame .flow-module-status:not(.is-active)::before,
.apisecurity-operator-frame .flow-module-status:not(.is-active)::before {
    background: var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-module-status .operator-control-row,
.apisecurity-operator-frame .flow-module-status .operator-control-row {
    min-height: 54px;
    padding-left: 16px;
}

.flow-operator-frame .flow-module-status .operator-control-icon,
.apisecurity-operator-frame .flow-module-status .operator-control-icon {
    width: 30px;
    height: 30px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 88%, #f8fafc);
    color: var(--operator-link, var(--primary));
}

.flow-operator-frame .flow-module-status .operator-control-title,
.apisecurity-operator-frame .flow-module-status .operator-control-title,
.flow-operator-frame .flow-module-row .operator-control-title {
    letter-spacing: 0;
}

.flow-operator-frame .flow-module-status .operator-control-desc,
.apisecurity-operator-frame .flow-module-status .operator-control-desc {
    max-width: 620px;
}

.flow-operator-frame .flow-module-row .operator-control-actions svg {
    display: none;
}

.flow-operator-frame .flow-vip-list {
    display: grid;
    gap: 0;
    margin-top: 12px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-vip-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

/* Priority queue */
.flow-operator-frame .flow-priority-console {
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-priority-policy {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) minmax(230px, 0.34fr);
    align-items: start;
    gap: 15px;
    padding: 18px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-priority-policy-icon,
.flow-operator-frame .flow-priority-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 28%, var(--operator-line, #d9dde3));
    border-radius: 5px;
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    color: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-priority-policy-icon {
    width: 42px;
    height: 42px;
}

.flow-operator-frame .flow-priority-policy-icon svg {
    width: 18px;
    height: 18px;
}

.flow-operator-frame .flow-priority-policy-copy h3,
.flow-operator-frame .flow-priority-head h3 {
    margin: 5px 0 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
    line-height: 1.25;
}

.flow-operator-frame .flow-priority-policy-copy > p,
.flow-operator-frame .flow-priority-head p {
    max-width: 760px;
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.flow-operator-frame .flow-priority-bypasses {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.flow-operator-frame .flow-priority-bypasses > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 650;
}

.flow-operator-frame .flow-priority-bypasses i {
    display: inline-flex;
    color: var(--text-dim);
}

.flow-operator-frame .flow-priority-bypasses svg {
    width: 13px;
    height: 13px;
}

.flow-operator-frame .flow-priority-policy-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px;
    border-left: 3px solid var(--operator-link, var(--primary));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 4%, var(--operator-surface, #ffffff));
}

.flow-operator-frame .flow-priority-policy-note > span {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--operator-link, var(--primary));
}

.flow-operator-frame .flow-priority-policy-note svg {
    width: 15px;
    height: 15px;
}

.flow-operator-frame .flow-priority-policy-note p {
    margin: 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.45;
}

.flow-operator-frame .flow-priority-policy-note strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text-main);
    font-size: 11px;
}

.flow-operator-frame .flow-priority-head {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-priority-list {
    display: grid;
}

.flow-operator-frame .flow-priority-row {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 80px minmax(120px, 0.35fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-priority-row:last-child {
    border-bottom: 0;
}

.flow-operator-frame .flow-priority-row:hover {
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 2.5%, var(--operator-surface, #ffffff));
}

.flow-operator-frame .flow-priority-source {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.flow-operator-frame .flow-priority-source-icon {
    display: inline-flex;
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--success, #16a34a) 25%, var(--operator-line, #d9dde3));
    border-radius: 50%;
    background: color-mix(in srgb, var(--success, #16a34a) 6%, var(--operator-surface, #ffffff));
    color: var(--success, #16a34a);
}

.flow-operator-frame .flow-priority-source-icon svg {
    width: 13px;
    height: 13px;
}

.flow-operator-frame .flow-priority-source-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.flow-operator-frame .flow-priority-source-copy strong {
    overflow: hidden;
    color: var(--text-main);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-operator-frame .flow-priority-source-copy small {
    color: var(--text-dim);
    font-size: 9px;
}

.flow-operator-frame .flow-priority-type {
    width: fit-content;
    padding: 3px 6px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 3px;
    color: var(--text-dim);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.flow-operator-frame .flow-priority-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--success, #16a34a);
    font-size: 9px;
    font-weight: 680;
    white-space: nowrap;
}

.flow-operator-frame .flow-priority-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.flow-operator-frame .flow-priority-remove {
    min-height: 27px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
}

.flow-operator-frame .flow-priority-remove:hover {
    border-color: color-mix(in srgb, var(--danger, #dc2626) 30%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--danger, #dc2626) 5%, var(--operator-surface, #ffffff));
    color: var(--danger, #dc2626);
}

.flow-operator-frame .flow-priority-empty {
    display: flex;
    min-height: 250px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 32px;
    color: var(--text-muted);
    text-align: center;
}

.flow-operator-frame .flow-priority-empty-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 3px;
}

.flow-operator-frame .flow-priority-empty-icon svg {
    width: 17px;
    height: 17px;
}

.flow-operator-frame .flow-priority-empty strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.flow-operator-frame .flow-priority-empty > span:not(.flow-priority-empty-icon) {
    font-size: 11px;
}

.flow-operator-frame .section-blacklist-row.is-selected {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 5%, var(--operator-surface, #ffffff));
}

.flow-operator-frame .flow-tab-toolbar {
    align-items: center;
    margin: 14px 0 10px;
}

/* IP blacklist console */
.flow-operator-frame .flow-blacklist-console {
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-blacklist-summary {
    margin-bottom: 14px;
}

.flow-operator-frame .flow-blacklist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 74px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-blacklist-head h3 {
    margin: 5px 0 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
    line-height: 1.25;
}

.flow-operator-frame .flow-blacklist-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.flow-operator-frame .flow-blacklist-head-actions,
.flow-operator-frame .flow-blacklist-tools,
.flow-operator-frame .flow-blacklist-row-actions,
.flow-operator-frame .flow-blacklist-pagination > div,
.flow-operator-frame .flow-blacklist-selection > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flow-operator-frame .flow-blacklist-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 46px;
    padding: 7px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--operator-link, var(--primary)) 24%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 5%, var(--operator-surface, #ffffff));
    color: var(--text-secondary);
    font-size: 11px;
}

.flow-operator-frame .flow-blacklist-selection strong {
    color: var(--operator-link, var(--primary));
    font-size: 13px;
}

.flow-operator-frame .flow-blacklist-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.flow-operator-frame .flow-blacklist-count {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--text-muted);
    font-size: 10px;
}

.flow-operator-frame .flow-blacklist-count strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 730;
}

.flow-operator-frame .flow-blacklist-search {
    position: relative;
    display: flex;
    align-items: center;
}

.flow-operator-frame .flow-blacklist-search > span {
    position: absolute;
    left: 10px;
    z-index: 1;
    display: inline-flex;
    color: var(--text-dim);
    pointer-events: none;
}

.flow-operator-frame .flow-blacklist-search svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.flow-operator-frame .flow-blacklist-search .flow-search-input {
    width: 230px;
    min-width: 0;
    padding: 0 10px 0 31px;
}

.flow-operator-frame .flow-page-size-select {
    padding: 0 28px 0 10px;
}

.flow-operator-frame .flow-blacklist-table-wrap {
    overflow: auto;
}

.flow-operator-frame .flow-blacklist-table {
    width: 100%;
    min-width: 720px;
    font-family: var(--font-main);
}

.flow-operator-frame .flow-blacklist-table th,
.flow-operator-frame .flow-blacklist-table td {
    padding: 0 14px;
}

.flow-operator-frame .flow-blacklist-table th {
    text-align: left;
    text-transform: uppercase;
}

.flow-operator-frame .flow-blacklist-table th:first-child,
.flow-operator-frame .flow-blacklist-table td:first-child {
    padding-left: 16px;
}

.flow-operator-frame .flow-blacklist-table th:last-child,
.flow-operator-frame .flow-blacklist-table td:last-child {
    padding-right: 16px;
}

.flow-operator-frame .flow-blacklist-actions-head,
.flow-operator-frame .flow-blacklist-actions {
    text-align: right !important;
}

.flow-operator-frame .flow-blacklist-row-actions {
    justify-content: flex-end;
}

.flow-operator-frame .flow-blacklist-row-action {
    min-height: 26px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
}

.flow-operator-frame .flow-blacklist-row-action:hover {
    border-color: var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
}

.flow-operator-frame .flow-blacklist-row-action.is-danger:hover {
    border-color: color-mix(in srgb, var(--danger, #dc2626) 30%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--danger, #dc2626) 5%, var(--operator-surface, #ffffff));
    color: var(--danger, #dc2626);
}

.flow-operator-frame .flow-target-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.flow-operator-frame .flow-target-copy small {
    color: var(--text-dim);
    font-size: 9px;
    line-height: 1.2;
}

.flow-operator-frame .section-blacklist-row.is-expired .flow-target-copy,
.flow-operator-frame .section-blacklist-row.is-expired .flow-type-pill {
    opacity: 0.58;
}

.flow-operator-frame .flow-blacklist-empty {
    display: flex;
    min-height: 230px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 30px;
    color: var(--text-muted);
    text-align: center;
}

.flow-operator-frame .flow-blacklist-empty-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 92%, #f3f4f6);
    color: var(--text-dim);
}

.flow-operator-frame .flow-blacklist-empty-icon svg {
    width: 19px;
    height: 19px;
}

.flow-operator-frame .flow-blacklist-empty strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.flow-operator-frame .flow-blacklist-empty > span:not(.flow-blacklist-empty-icon) {
    max-width: 390px;
    font-size: 11px;
    line-height: 1.45;
}

.flow-operator-frame .flow-blacklist-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 8px 14px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-muted);
    font-size: 10px;
}

.flow-operator-frame .flow-blacklist-pagination strong {
    color: var(--text-main);
}

/* DDoS defense console */
.flow-operator-frame .flow-ddos-console {
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-ddos-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-ddos-kpi {
    display: flex;
    min-height: 116px;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
    padding: 14px 16px;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-ddos-kpi:last-child {
    border-right: 0;
}

.flow-operator-frame .flow-ddos-kpi-label,
.flow-operator-frame .flow-ddos-control-label,
.flow-operator-frame .flow-ddos-field > span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.flow-operator-frame .flow-ddos-kpi > strong {
    color: var(--text-main);
    font-size: 22px;
    font-weight: 740;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.flow-operator-frame .flow-ddos-kpi > strong small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 620;
    letter-spacing: 0;
}

.flow-operator-frame .flow-ddos-kpi-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.flow-operator-frame .flow-ddos-kpi-note i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-ddos-kpi-note i.is-active {
    background: var(--success, #16a34a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #16a34a) 12%, transparent);
}

.flow-operator-frame .flow-ddos-section + .flow-ddos-section {
    border-top: 1px solid var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-ddos-section-head {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-ddos-section-head h3 {
    display: inline-flex;
    align-items: center;
    margin: 5px 0 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
}

.flow-operator-frame .flow-ddos-section-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.flow-operator-frame .flow-ddos-threshold-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flow-operator-frame .flow-ddos-threshold {
    min-width: 0;
    padding: 18px 20px;
}

.flow-operator-frame .flow-ddos-threshold + .flow-ddos-threshold {
    border-left: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-ddos-control-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 17px;
}

.flow-operator-frame .flow-ddos-control-head p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}

.flow-operator-frame .flow-ddos-value,
.flow-operator-frame .flow-ddos-field > div {
    display: flex;
    min-height: 36px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
}

.flow-operator-frame .flow-ddos-value input,
.flow-operator-frame .flow-ddos-field input {
    width: 88px;
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
    font-weight: 720;
    outline: 0;
}

.flow-operator-frame .flow-ddos-value span,
.flow-operator-frame .flow-ddos-value select,
.flow-operator-frame .flow-ddos-field b {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-left: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 650;
    white-space: nowrap;
}

.flow-operator-frame .flow-ddos-value select {
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
    font-family: var(--font-main);
}

.flow-operator-frame .flow-ddos-value select option,
.flow-operator-frame .flow-ddos-field select option {
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
}

.flow-operator-frame .flow-ddos-range {
    width: 100%;
    height: 18px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.flow-operator-frame .flow-ddos-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-ddos-range::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
    appearance: none;
    -webkit-appearance: none;
    border: 3px solid var(--operator-surface, #ffffff);
    border-radius: 50%;
    background: var(--operator-orange, var(--brand-orange));
    box-shadow: 0 0 0 1px var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-ddos-range::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--operator-line, #d9dde3);
}

.flow-operator-frame .flow-ddos-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 3px solid var(--operator-surface, #ffffff);
    border-radius: 50%;
    background: var(--operator-orange, var(--brand-orange));
    box-shadow: 0 0 0 1px var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-ddos-range-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    color: var(--text-dim);
    font-size: 9px;
}

.flow-operator-frame .flow-ddos-field {
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 16px;
}

.flow-operator-frame .flow-ddos-field + .flow-ddos-field {
    border-left: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-ddos-field > div {
    width: fit-content;
}

.flow-operator-frame .flow-ddos-field select {
    min-width: 180px;
    height: 36px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
}

.flow-operator-frame .flow-ddos-default-tuning {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-ddos-default-tuning .flow-ddos-field {
    max-width: none;
}

.flow-operator-frame .flow-ddos-field small {
    max-width: 320px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.flow-operator-frame .flow-ddos-response-grid {
    display: block;
}

.flow-operator-frame .flow-ddos-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 12px;
    padding: 16px;
}

.flow-operator-frame .flow-ddos-action {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 10px 12px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.flow-operator-frame .flow-ddos-action:hover,
.flow-operator-frame .flow-ddos-mode:hover {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.flow-operator-frame .flow-ddos-action.is-active,
.flow-operator-frame .flow-ddos-mode.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-ddos-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
}

.flow-operator-frame .flow-ddos-action.is-active .flow-ddos-action-icon {
    color: var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-ddos-action > span:nth-child(2),
.flow-operator-frame .flow-ddos-mode {
    display: grid;
    gap: 3px;
}

.flow-operator-frame .flow-ddos-action strong,
.flow-operator-frame .flow-ddos-mode strong,
.flow-operator-frame .flow-ddos-automation-row strong {
    font-size: 12px;
    font-weight: 700;
}

.flow-operator-frame .flow-ddos-action small,
.flow-operator-frame .flow-ddos-mode small,
.flow-operator-frame .flow-ddos-automation-row small {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.flow-operator-frame .flow-ddos-action > i,
.flow-operator-frame .flow-ddos-mode > i {
    width: 10px;
    height: 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 50%;
}

.flow-operator-frame .flow-ddos-action.is-active > i,
.flow-operator-frame .flow-ddos-mode.is-active > i {
    border: 3px solid var(--operator-orange, var(--brand-orange));
}

.flow-operator-frame .flow-ddos-automation {
    border-left: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-ddos-automation-row {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-ddos-automation-row > div {
    display: grid;
    gap: 3px;
}

.flow-operator-frame .flow-ddos-response-context {
    display: flex;
    min-height: 96px;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-ddos-response-context > div {
    display: grid;
    gap: 3px;
}

.flow-operator-frame .flow-ddos-response-context strong {
    font-size: 12px;
    font-weight: 700;
}

.flow-operator-frame .flow-ddos-response-context small {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.flow-operator-frame .flow-ddos-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-ddos-mode {
    position: relative;
    min-height: 64px;
    padding: 10px 28px 10px 11px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.flow-operator-frame .flow-ddos-mode:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.flow-operator-frame .flow-ddos-mode > i {
    position: absolute;
    top: 12px;
    right: 11px;
}

.flow-operator-frame .flow-ddos-field-compact {
    padding: 12px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-frame .flow-ddos-ban-row {
    border-top: 0;
}

.flow-operator-frame .operator-table-panel {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.flow-operator-frame .operator-table-toolbar {
    min-height: 52px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f8fafc), var(--operator-surface, #ffffff));
}

.flow-operator-frame .flow-page-size-select,
.flow-operator-frame .flow-search-input {
    min-height: 34px;
    border-color: var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-family: var(--font-main);
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.flow-operator-frame .flow-search-input {
    flex: 1 1 280px;
    min-width: min(100%, 240px);
}

.flow-operator-frame .flow-page-size-select:focus,
.flow-operator-frame .flow-search-input:focus {
    border-color: color-mix(in srgb, var(--operator-link, var(--primary)) 55%, var(--operator-line, #d9dde3));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--operator-link, var(--primary)) 12%, transparent);
    outline: 0;
}

.flow-operator-frame .flow-blacklist-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.flow-operator-frame .flow-blacklist-table th:nth-child(1),
.flow-operator-frame .flow-blacklist-table td:nth-child(1) {
    width: 42px;
}

.flow-operator-frame .flow-blacklist-table th:nth-child(2),
.flow-operator-frame .flow-blacklist-table td:nth-child(2) {
    width: 38%;
}

.flow-operator-frame .flow-blacklist-table th:nth-child(3),
.flow-operator-frame .flow-blacklist-table td:nth-child(3) {
    width: 12%;
}

.flow-operator-frame .flow-blacklist-table th:nth-child(4),
.flow-operator-frame .flow-blacklist-table td:nth-child(4) {
    width: 22%;
}

.flow-operator-frame .flow-blacklist-table th:nth-child(5),
.flow-operator-frame .flow-blacklist-table td:nth-child(5) {
    width: 18%;
}

.flow-operator-frame .flow-blacklist-table thead {
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 92%, #f3f4f6);
}

.flow-operator-frame .flow-blacklist-table th {
    height: 38px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: 0.08em;
}

.flow-operator-frame .flow-blacklist-table td {
    height: 50px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    font-family: var(--font-main);
    transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

.flow-operator-frame .flow-blacklist-table tbody tr:last-child td {
    border-bottom: 0;
}

.flow-operator-frame .flow-blacklist-table tbody tr:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 4%, var(--operator-surface, #ffffff));
}

.flow-operator-frame .section-blacklist-row {
    position: relative;
}

.flow-operator-frame .section-blacklist-row.is-selected td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, var(--operator-surface, #ffffff));
}

.flow-operator-frame .section-blacklist-row.is-selected td:first-child {
    box-shadow: inset 3px 0 0 var(--operator-link, var(--primary));
}

.flow-operator-frame .flow-check-cell {
    width: 42px;
}

.flow-operator-frame .flow-blacklist-table input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--operator-link, var(--primary));
    cursor: pointer;
}

.flow-operator-frame .flow-target-cell {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}

.flow-operator-frame .flow-target-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 999px;
    color: var(--text-main);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 92%, #f8fafc);
}

.flow-operator-frame .flow-target-icon.is-muted {
    color: var(--text-dim);
}

.flow-operator-frame .flow-target-icon svg {
    width: 13px;
    height: 13px;
}

.flow-operator-frame .flow-target-value {
    min-width: 0;
    overflow: hidden;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-operator-frame .flow-type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border-color: color-mix(in srgb, var(--operator-link, var(--primary)) 20%, var(--operator-line-soft, #eceff3));
    border-radius: 999px;
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 6%, var(--operator-surface, #ffffff));
    color: var(--text-main);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: 0.03em;
}

.flow-operator-frame .flow-expiry-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 560;
}

.flow-operator-frame .flow-expiry-pill.is-expired {
    color: var(--danger);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.flow-operator-frame .flow-row-action {
    opacity: 0.9;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.flow-operator-frame .flow-row-action:hover {
    transform: translateY(-1px);
}

.flow-operator-frame .operator-btn-danger.flow-row-action:hover {
    border-color: color-mix(in srgb, var(--danger) 28%, var(--operator-line, #d9dde3));
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 5%, var(--operator-surface, #ffffff));
}

.flow-operator-frame .flow-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--text-dim);
}

.flow-operator-frame .flow-status-dot.is-on {
    background: var(--operator-link, var(--primary));
}

.flow-operator-frame .section-choice-card,
.flow-operator-frame .section-ai-toggle-btn,
.flow-operator-frame .section-geo-mode-card {
    border-radius: 6px;
    border-color: var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
    box-shadow: none;
}

.flow-operator-frame .section-choice-card.active,
.flow-operator-frame .section-ai-toggle-btn.active,
.flow-operator-frame .section-geo-mode-card.active {
    border-color: var(--operator-link, var(--primary));
    box-shadow: inset 0 0 0 1px var(--operator-link, var(--primary));
}

.flow-operator-frame .text-danger,
.flow-operator-frame .text-warning,
.flow-operator-frame .text-success,
.flow-operator-frame .text-primary {
    color: var(--text-main) !important;
}

.flow-operator-frame .bg-danger,
.flow-operator-frame .bg-warning,
.flow-operator-frame .bg-success,
.flow-operator-frame .bg-primary,
.flow-operator-frame .dot-6,
.flow-operator-frame .dot-8 {
    background: var(--operator-link, var(--primary)) !important;
}

.flow-operator-frame .pill-danger,
.flow-operator-frame .pill-warning,
.flow-operator-frame .pill-success,
.flow-operator-frame .tag-pill,
.flow-operator-frame .code-chip,
.flow-operator-frame .overlay-chip {
    border-color: var(--operator-line-soft, #eceff3);
    background: #f7f8fa;
    color: var(--text-main);
}

.flow-operator-frame .modal-content,
.flow-operator-frame .section-modal-panel-md,
.flow-operator-modal {
    border-radius: 6px;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
    box-shadow: var(--shadow-modal);
}

.flow-operator-frame .section-modal-head,
.flow-operator-frame .section-modal-footer,
.flow-operator-modal .section-modal-head,
.flow-operator-modal .section-modal-footer {
    border-color: var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
}

.flow-operator-modal .edge-access-v2-attach-advanced {
    margin-top: 8px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    overflow: hidden;
    background: var(--operator-surface, #171b21);
}

.flow-operator-modal .edge-access-v2-attach-advanced > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 0 14px;
    background: var(--operator-surface-muted, #1d232b);
    color: var(--text-main) !important;
    font-size: 13px;
    font-weight: 680;
    cursor: pointer;
    list-style: none;
}

.flow-operator-modal .edge-access-v2-attach-advanced > summary::-webkit-details-marker {
    display: none;
}

.flow-operator-modal .edge-access-v2-attach-advanced > summary::after {
    content: '+';
    color: var(--text-muted);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.flow-operator-modal .edge-access-v2-attach-advanced[open] > summary {
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-operator-modal .edge-access-v2-attach-advanced[open] > summary::after {
    content: '−';
}

.flow-operator-modal .edge-access-v2-attach-advanced > summary span {
    flex: 1;
    color: var(--text-muted) !important;
    font-size: 11px;
    font-weight: 500;
    text-align: right;
}

.flow-operator-modal .edge-access-v2-attach-advanced .section-panel-soft {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--operator-surface, #171b21);
    padding: 14px;
}

.flow-operator-modal .edge-access-v2-attach-advanced .edge-access-v2-field-help {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.flow-operator-modal .edge-access-v2-attach-advanced .section-form-group {
    margin-bottom: 14px;
}

.flow-operator-modal .edge-access-v2-attach-advanced .section-form-group:last-child {
    margin-bottom: 0;
}

.flow-operator-modal #edge-access-v2-library-attach-channels {
    min-height: 108px;
    padding: 8px 10px;
    border-color: var(--operator-line, #343b45);
    background: #0f1216;
    color: var(--text-main);
    line-height: 1.55;
}

.flow-operator-modal #edge-access-v2-library-attach-channels option {
    padding: 3px 4px;
}

.flow-operator-modal .edge-access-v2-attach-advanced .text-note {
    margin-left: 4px;
    color: var(--text-muted);
    font-weight: 500;
}

.flow-operator-frame .section-modal-footer .btn-primary,
.flow-operator-frame .section-modal-footer .btn-danger {
    background: var(--operator-link, var(--primary));
    border-color: var(--operator-link, var(--primary));
    color: #ffffff;
}

.flow-operator-frame .section-modal-footer .btn-outline {
    background: var(--operator-surface, #ffffff);
    border-color: var(--operator-line, #d9dde3);
    color: var(--text-main);
}

.firewall-operator-frame .config-console-content,
.flow-operator-frame #traffic-tab-content,
.apisecurity-operator-frame #apisecurity-tab-content,
.identity-operator-frame #access-tab-content,
.botdefense-operator-frame #bot-tab-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.firewall-operator-frame .edge-config-stage,
.flow-operator-frame .section-page-card,
.apisecurity-operator-frame .section-page-card,
.identity-operator-frame .section-page-card,
.botdefense-operator-frame .section-page-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.operator-frame .section-overview-hero,
.operator-frame .section-overview-card,
.operator-frame .card.section-config-card,
.operator-frame .card.card-feature,
.operator-frame .policy-card,
.operator-frame .section-feature-card,
.operator-frame .bot-overview-setting-card,
.operator-frame .section-panel,
.operator-frame .config-panel,
.operator-frame .edge-overview-summary,
.operator-frame .edge-config-stage,
.operator-frame .flow-policy-card,
.operator-frame .identity-card {
    border-color: var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    box-shadow: none;
}

.operator-frame .section-overview-hero {
    min-height: auto;
    padding: 14px 16px;
}

.operator-frame .section-overview-card,
.operator-frame .card.section-config-card,
.operator-frame .card.card-feature {
    padding: 14px;
}

.operator-frame .section-module-grid,
.operator-frame .section-overview-stats-grid,
.operator-frame .bot-overview-settings-grid,
.operator-frame .grid-2,
.operator-frame .grid-3,
.operator-frame .grid-4 {
    gap: 10px;
}

.operator-frame .section-policy-toggle,
.operator-frame .feature-header,
.operator-frame .section-control-row,
.operator-frame .bot-overview-field,
.operator-frame .section-table-wrap,
.operator-frame .config-table-wrap,
.operator-frame .table-container {
    border-color: var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    box-shadow: none;
}

.operator-frame .section-table-wrap,
.operator-frame .config-table-wrap,
.operator-frame .table-container {
    overflow: auto;
}

.operator-frame .section-save-actions:not(.operator-sticky-actions .section-save-actions) {
    position: sticky;
    bottom: 0;
    z-index: 7;
    justify-content: flex-end;
    margin: 20px -32px -32px;
    padding: 12px 32px;
    border-top: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: none;
}

.operator-frame .section-save-actions .btn-primary,
.operator-frame .section-save-actions .btn:last-child {
    background: var(--operator-link, var(--primary));
    border-color: var(--operator-link, var(--primary));
    color: #ffffff;
}

.operator-frame .section-save-actions .btn-primary:hover,
.operator-frame .section-save-actions .btn:last-child:hover {
    background: var(--operator-link-hover, var(--primary-hover));
    border-color: var(--operator-link-hover, var(--primary-hover));
}

.operator-frame .section-save-actions .btn-outline,
.operator-frame .section-save-actions .btn:first-child {
    background: var(--operator-surface, #ffffff);
    border-color: var(--operator-line, #d9dde3);
    color: var(--text-main);
}

.firewall-operator-frame .firewall-console {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.firewall-operator-frame .firewall-console-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--operator-line, #d9dde3);
}

.firewall-operator-frame .firewall-console-kpi {
    display: flex;
    min-height: 108px;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
    padding: 14px 16px;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
}

.firewall-operator-frame .firewall-console-kpi:last-child {
    border-right: 0;
}

.firewall-operator-frame .firewall-console-kpi-label,
.firewall-operator-frame .firewall-console-control-label,
.firewall-operator-frame .firewall-console-field > span,
.firewall-operator-frame .firewall-console-eyebrow {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.firewall-operator-frame .firewall-console-kpi strong {
    color: var(--text-main);
    font-size: 22px;
    font-weight: 740;
    letter-spacing: 0;
    line-height: 1.1;
}

.firewall-operator-frame .firewall-console-kpi-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.firewall-operator-frame .firewall-console-kpi-note i {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--operator-line, #d9dde3);
}

.firewall-operator-frame .firewall-console-kpi-note i.is-active {
    background: var(--success, #16a34a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #16a34a) 12%, transparent);
}

.firewall-operator-frame .firewall-console-section + .firewall-console-section {
    border-top: 1px solid var(--operator-line, #d9dde3);
}

.firewall-operator-frame .firewall-console-section-head {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.firewall-operator-frame .firewall-console-section-head h3 {
    margin: 5px 0 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
    line-height: 1.25;
}

.firewall-operator-frame .firewall-console-section-head p {
    max-width: 760px;
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.firewall-operator-frame .firewall-policy-grid,
.firewall-operator-frame .firewall-sensitivity-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
}

.firewall-operator-frame .firewall-mode-choices,
.firewall-operator-frame .firewall-pl-choices {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 16px;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
}

.firewall-operator-frame .firewall-pl-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.firewall-operator-frame .firewall-choice {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 10px 12px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.firewall-operator-frame .firewall-choice:hover,
.firewall-operator-frame .firewall-rule-link:hover {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.firewall-operator-frame .firewall-choice.is-active,
.firewall-operator-frame .firewall-rule-link.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
}

.firewall-operator-frame .firewall-choice-icon,
.firewall-operator-frame .firewall-rule-icon,
.firewall-operator-frame .firewall-rule-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
}

.firewall-operator-frame .firewall-choice.is-active .firewall-choice-icon,
.firewall-operator-frame .firewall-rule-link.is-active .firewall-rule-icon {
    color: var(--operator-orange, var(--brand-orange));
}

.firewall-operator-frame .firewall-choice-copy,
.firewall-operator-frame .firewall-rule-copy,
.firewall-operator-frame .firewall-profile-note {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.firewall-operator-frame .firewall-choice strong,
.firewall-operator-frame .firewall-rule-copy span,
.firewall-operator-frame .firewall-profile-note strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.firewall-operator-frame .firewall-choice small,
.firewall-operator-frame .firewall-rule-copy small,
.firewall-operator-frame .firewall-profile-note span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.firewall-operator-frame .firewall-choice > i {
    width: 10px;
    height: 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 50%;
}

.firewall-operator-frame .firewall-choice.is-active > i {
    border: 3px solid var(--operator-orange, var(--brand-orange));
    background: var(--operator-surface, #ffffff);
}

.firewall-operator-frame .firewall-choice-rank {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    color: var(--text-dim);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 760;
}

.firewall-operator-frame .firewall-choice.is-active .firewall-choice-rank {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 45%, var(--operator-line, #d9dde3));
    color: var(--operator-orange, var(--brand-orange));
}

.firewall-operator-frame .firewall-profile-panel,
.firewall-operator-frame .firewall-threshold-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
}

.firewall-operator-frame .firewall-console-field {
    display: grid;
    gap: 8px;
    margin: 0;
}

.firewall-operator-frame .firewall-console-field select,
.firewall-operator-frame .firewall-console-field input,
.firewall-operator-frame .firewall-threshold-value input {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    box-shadow: none;
}

.firewall-operator-frame .firewall-profile-note {
    padding: 11px 12px;
    border-left: 3px solid var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
}

.firewall-operator-frame .firewall-console-warning {
    margin: 12px 16px;
}

.firewall-operator-frame .firewall-console > .firewall-console-warning:first-child {
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0;
}

.firewall-operator-frame .firewall-threshold-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.firewall-operator-frame .firewall-threshold-head p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.firewall-operator-frame .firewall-threshold-value {
    display: flex;
    min-height: 36px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
}

.firewall-operator-frame .firewall-threshold-value input {
    width: 74px;
    height: 34px;
    min-height: 34px;
    padding: 0 9px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
    font-weight: 720;
    outline: 0;
}

.firewall-operator-frame .firewall-threshold-value span {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-left: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 650;
}

.firewall-operator-frame .firewall-console-range {
    width: 100%;
    height: 4px;
    appearance: none;
    border-radius: 2px;
    background: var(--operator-line, #d9dde3);
    cursor: pointer;
}

.firewall-operator-frame .firewall-console-range::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    appearance: none;
    border: 3px solid var(--operator-surface, #ffffff);
    border-radius: 50%;
    background: var(--operator-orange, var(--brand-orange));
    box-shadow: 0 0 0 1px var(--operator-orange, var(--brand-orange));
}

.firewall-operator-frame .firewall-console-range::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: 3px solid var(--operator-surface, #ffffff);
    border-radius: 50%;
    background: var(--operator-orange, var(--brand-orange));
}

.firewall-operator-frame .firewall-console-range-scale {
    display: flex;
    justify-content: space-between;
    margin-top: -4px;
    color: var(--text-dim);
    font-size: 9px;
}

.firewall-operator-frame .firewall-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 680;
    white-space: nowrap;
}

.firewall-operator-frame .firewall-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.firewall-operator-frame .firewall-rule-link {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    min-height: 82px;
    padding: 13px 16px;
    border: 0;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.firewall-operator-frame .firewall-rule-link:last-child {
    border-right: 0;
}

.firewall-operator-frame .firewall-rule-copy strong {
    color: var(--text-main);
    font-family: var(--font-mono, monospace);
    font-size: 18px;
    font-weight: 760;
    line-height: 1;
}

@media (max-width: 1100px) {
    .firewall-operator-frame .firewall-console-summary,
    .firewall-operator-frame .firewall-rule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .firewall-operator-frame .firewall-console-kpi:nth-child(2),
    .firewall-operator-frame .firewall-rule-link:nth-child(2) {
        border-right: 0;
    }

    .firewall-operator-frame .firewall-console-kpi:nth-child(n + 3),
    .firewall-operator-frame .firewall-rule-link:nth-child(n + 3) {
        border-top: 1px solid var(--operator-line-soft, #eceff3);
    }

    .firewall-operator-frame .firewall-policy-grid,
    .firewall-operator-frame .firewall-sensitivity-grid {
        grid-template-columns: 1fr;
    }

    .firewall-operator-frame .firewall-mode-choices,
    .firewall-operator-frame .firewall-pl-choices {
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }
}

@media (max-width: 760px) {
    .firewall-operator-frame .firewall-console-section-head,
    .firewall-operator-frame .firewall-threshold-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .firewall-operator-frame .firewall-console-summary,
    .firewall-operator-frame .firewall-pl-choices,
    .firewall-operator-frame .firewall-rule-grid {
        grid-template-columns: 1fr;
    }

    .firewall-operator-frame .firewall-console-kpi,
    .firewall-operator-frame .firewall-rule-link,
    .firewall-operator-frame .firewall-console-kpi:nth-child(2),
    .firewall-operator-frame .firewall-rule-link:nth-child(2) {
        border-right: 0;
    }

    .firewall-operator-frame .firewall-console-kpi + .firewall-console-kpi,
    .firewall-operator-frame .firewall-rule-link + .firewall-rule-link {
        border-top: 1px solid var(--operator-line-soft, #eceff3);
    }

    .firewall-operator-frame .firewall-inline-toggle {
        white-space: normal;
    }
}

.apisecurity-operator-frame .apisecurity-overview-stack {
    display: grid;
    gap: 0;
}

.apisecurity-operator-frame .apisecurity-overview-stack .operator-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.apisecurity-operator-frame .apisecurity-module-list .operator-control-row {
    cursor: pointer;
    min-height: 56px;
    padding-top: 11px;
    padding-bottom: 11px;
}

.apisecurity-operator-frame .apisecurity-module-row .operator-control-actions {
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-module-row .operator-control-actions svg {
    color: var(--text-muted);
    transition: transform 0.16s ease, color 0.16s ease;
}

.apisecurity-operator-frame .apisecurity-module-row:hover .operator-control-actions svg {
    color: var(--operator-link, var(--primary));
    transform: translateX(2px);
}

.apisecurity-operator-frame .apisecurity-config-stack {
    display: grid;
    gap: 0;
    padding-bottom: calc(var(--operator-actionbar-h, 64px) + 18px);
}

.apisecurity-operator-frame .apisecurity-config-stack .operator-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.apisecurity-operator-frame .apisecurity-policy-catalog {
    margin-top: 14px;
}

.apisecurity-operator-frame .apisecurity-policy-catalog-row {
    align-items: start;
}

.apisecurity-operator-frame .apisecurity-policy-catalog-row:hover {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, #ffffff));
}

.apisecurity-operator-frame .apisecurity-policy-catalog-row .operator-control-actions {
    align-self: start;
}

.apisecurity-operator-frame .apisecurity-policy-catalog-row .operator-control-content {
    padding-top: 6px;
}

.apisecurity-operator-frame .apisecurity-policy-summary-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-policy-surface-note {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.apisecurity-operator-frame .apisecurity-policy-surface-cell small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.apisecurity-operator-frame .apisecurity-policy-segment {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    min-height: 32px;
    padding: 2px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface-muted, #f7f8fa);
    white-space: nowrap;
}

.apisecurity-operator-frame .apisecurity-policy-segment button {
    min-height: 26px;
    padding: 0 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 720;
}

.apisecurity-operator-frame .apisecurity-policy-segment button.is-active {
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    box-shadow: inset 0 0 0 1px var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-policy-segment button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.apisecurity-operator-frame .apisecurity-policy-profile-segment {
    white-space: normal;
    max-width: 100%;
}

.apisecurity-operator-frame .apisecurity-setting-switch.section-switch,
.flow-operator-frame .apisecurity-setting-switch.section-switch {
    width: 38px;
    height: 20px;
    flex: 0 0 38px;
}

.apisecurity-operator-frame .apisecurity-setting-switch .switch-slider,
.flow-operator-frame .apisecurity-setting-switch .switch-slider {
    inset: 0;
    border-radius: 999px;
    border-color: var(--border);
    background: var(--control-track-off);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.apisecurity-operator-frame .apisecurity-setting-switch .switch-slider::before,
.flow-operator-frame .apisecurity-setting-switch .switch-slider::before {
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    bottom: auto;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
}

.apisecurity-operator-frame .apisecurity-setting-switch input:checked + .switch-slider,
.flow-operator-frame .apisecurity-setting-switch input:checked + .switch-slider {
    border-color: var(--control-accent, var(--primary));
    background: var(--control-accent, var(--primary));
}

.apisecurity-operator-frame .apisecurity-setting-switch input:checked + .switch-slider::before,
.flow-operator-frame .apisecurity-setting-switch input:checked + .switch-slider::before {
    transform: translateX(18px);
    background: #ffffff;
}

.apisecurity-operator-frame .apisecurity-policy-state-segment {
    width: 100%;
}

.apisecurity-operator-frame .apisecurity-policy-state-segment button {
    flex: 1 1 0;
    min-width: 64px;
}

.apisecurity-operator-frame .apisecurity-policy-surface-cell {
    min-width: 180px;
}

.apisecurity-operator-frame .apisecurity-policy-detail-stack {
    gap: 18px;
}

.apisecurity-operator-frame .apisecurity-policy-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-policy-editor-panel,
.apisecurity-operator-frame .apisecurity-settings-editor {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-settings-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.apisecurity-operator-frame .apisecurity-settings-toolbar input {
    flex: 1 1 260px;
    min-width: 0;
    min-height: 38px;
}

.apisecurity-operator-frame .apisecurity-settings-overview-groups {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-settings-area-group,
.apisecurity-operator-frame .apisecurity-settings-search-panel {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-settings-group-head {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-settings-group-head strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 720;
    line-height: 1.25;
}

.apisecurity-operator-frame .apisecurity-settings-group-head span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.apisecurity-operator-frame .apisecurity-settings-area-row {
    min-height: 66px;
}

.apisecurity-operator-frame .apisecurity-settings-area-row:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 68%, transparent);
    outline-offset: -2px;
}

.apisecurity-operator-frame .apisecurity-settings-area-row .operator-control-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.apisecurity-operator-frame .apisecurity-settings-area-fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.apisecurity-operator-frame .apisecurity-settings-area-fact strong {
    color: var(--text-main);
    font-weight: 750;
}

.apisecurity-operator-frame .apisecurity-settings-page {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-settings-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-settings-page-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-settings-page-title h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 18px;
    font-weight: 760;
    line-height: 1.2;
}

.apisecurity-operator-frame .apisecurity-settings-page-title p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.apisecurity-operator-frame .apisecurity-settings-page-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-settings-page-body {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-settings-page-body > .operator-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.apisecurity-operator-frame .apisecurity-settings-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-settings-category-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 760;
    text-align: left;
    cursor: pointer;
}

.apisecurity-operator-frame .apisecurity-settings-category-card:hover {
    border-color: var(--operator-line, #d9dde3);
    color: var(--text-main);
}

.apisecurity-operator-frame .apisecurity-settings-category-card.is-active {
    border-color: var(--operator-line, #d9dde3);
    background: var(--operator-surface-muted, #f7f8fa);
    color: var(--text-main);
    box-shadow: inset 3px 0 0 var(--operator-link, var(--primary));
}

.apisecurity-operator-frame .apisecurity-settings-category-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apisecurity-operator-frame .apisecurity-settings-category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 780;
}

.apisecurity-operator-frame .apisecurity-settings-editor {
    display: grid;
    min-width: 0;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.apisecurity-operator-frame .apisecurity-settings-editor-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    padding: 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--operator-line-soft, #eceff3));
}

.apisecurity-operator-frame .apisecurity-settings-editor-kicker {
    display: block;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-settings-editor-head h3 {
    margin: 4px 0 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 780;
    line-height: 1.25;
}

.apisecurity-operator-frame .apisecurity-settings-editor-body {
    display: grid;
    gap: 0;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-settings-editor-body > .operator-section {
    padding: 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-settings-editor-body > .operator-section + .operator-section {
    padding-top: 14px;
}

.apisecurity-operator-frame .apisecurity-settings-editor-body > .operator-section:last-child {
    border-bottom: 0;
}

.apisecurity-operator-frame .apisecurity-settings-editor-body > .operator-section .operator-section-head {
    margin-bottom: 12px;
}

.apisecurity-operator-frame .apisecurity-settings-preview-card {
    display: grid;
    gap: 7px;
    min-width: 240px;
    padding: 0;
    border: 0;
    background: transparent;
}

.apisecurity-operator-frame .apisecurity-settings-preview-facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.apisecurity-operator-frame .apisecurity-settings-preview-facts span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 3px 7px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
}

.apisecurity-operator-frame .apisecurity-settings-changed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.apisecurity-operator-frame .apisecurity-setting-row {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
}

.apisecurity-operator-frame .apisecurity-setting-row .operator-control-main {
    display: grid;
    gap: 3px;
    align-items: start;
}

.apisecurity-operator-frame .apisecurity-setting-actions {
    align-self: start;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 360px;
}

.apisecurity-operator-frame .apisecurity-setting-block-control {
    grid-column: 1 / -1;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-setting-block-control .apisecurity-structured-editor {
    margin-top: 0;
}

.apisecurity-operator-frame .apisecurity-setting-number {
    width: 96px;
}

.apisecurity-operator-frame .apisecurity-inline-segmented {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface-muted, #f7f8fa);
}

.apisecurity-operator-frame .apisecurity-inline-segmented button {
    border: 0;
    border-radius: 4px;
    padding: 5px 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 760;
    cursor: pointer;
}

.apisecurity-operator-frame .apisecurity-inline-segmented button.is-active {
    background: var(--operator-surface, #fff);
    color: var(--text-main);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.apisecurity-operator-frame .apisecurity-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-template-card {
    display: grid;
    gap: 4px;
    min-height: 72px;
    padding: 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #fff);
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
}

.apisecurity-operator-frame .apisecurity-template-card strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 780;
}

.apisecurity-operator-frame .apisecurity-template-card span {
    font-size: 11px;
    line-height: 1.35;
}

.apisecurity-operator-frame .apisecurity-template-card.is-active {
    border-color: color-mix(in srgb, var(--operator-accent, #2563eb) 42%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-accent, #2563eb) 8%, var(--operator-surface, #fff));
}

.apisecurity-operator-frame .apisecurity-policy-surface-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-policy-surface-panel strong {
    display: block;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.3;
}

.apisecurity-operator-frame .apisecurity-policy-surface-panel span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.apisecurity-operator-frame .apisecurity-vector-list .operator-control-actions {
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-auth-provider-list .operator-control-actions {
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-graphql-schema-list .operator-control-actions {
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-data-detector-list .operator-control-actions,
.apisecurity-operator-frame .apisecurity-data-handling-list .operator-control-actions {
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-bola-control-list .operator-control-actions {
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-abuse-control-list .operator-control-actions {
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px 14px;
}

.apisecurity-operator-frame .apisecurity-field-grid-wide {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.apisecurity-operator-frame .apisecurity-field-grid-three {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.apisecurity-operator-frame .apisecurity-field-grid .bot-overview-field {
    display: grid;
    gap: 6px;
    margin: 0;
    min-width: 0;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 650;
}

.apisecurity-operator-frame .apisecurity-field-grid .bot-overview-field > span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-field-grid .bot-overview-field input,
.apisecurity-operator-frame .apisecurity-field-grid .bot-overview-field select,
.apisecurity-operator-frame .apisecurity-field-grid .bot-overview-field textarea {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 650;
}

.apisecurity-operator-frame .apisecurity-field-grid .bot-overview-field select {
    cursor: pointer;
}

.apisecurity-operator-frame .apisecurity-rule-list {
    display: grid;
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-rule-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    align-items: end;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.apisecurity-operator-frame .apisecurity-rule-row .bot-overview-field {
    display: grid;
    gap: 6px;
    margin: 0;
}

.apisecurity-operator-frame .apisecurity-rule-row .bot-overview-field > span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-rule-row .bot-overview-field input,
.apisecurity-operator-frame .apisecurity-rule-row .bot-overview-field select {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 650;
}

.apisecurity-operator-frame .apisecurity-rule-row > .btn {
    justify-self: start;
}

.apisecurity-operator-frame .apisecurity-function-console {
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.apisecurity-operator-frame .apisecurity-function-console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 74px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-function-eyebrow,
.apisecurity-operator-frame .apisecurity-function-operation-grid label > span,
.apisecurity-operator-frame .apisecurity-function-claim-grid label > span,
.apisecurity-operator-frame .apisecurity-auth-value-head > span,
.apisecurity-operator-frame .apisecurity-function-context label > span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-function-console-head h3 {
    margin: 4px 0 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 760;
}

.apisecurity-operator-frame .apisecurity-function-console-head p,
.apisecurity-operator-frame .apisecurity-function-context p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.apisecurity-operator-frame .apisecurity-function-console-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-function-console-actions .apisecurity-policy-mode-select {
    min-width: 104px;
}

.apisecurity-operator-frame .apisecurity-authorization-control-row {
    cursor: pointer;
}

.apisecurity-operator-frame .apisecurity-authorization-control-row:focus-visible {
    outline: 2px solid var(--operator-orange, var(--brand-orange));
    outline-offset: -2px;
}

.apisecurity-operator-frame .apisecurity-authorization-list-arrow {
    color: var(--text-muted);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.apisecurity-operator-frame .apisecurity-authorization-control-row:hover .apisecurity-authorization-list-arrow {
    color: var(--operator-orange, var(--brand-orange));
}

.apisecurity-operator-frame .apisecurity-authorization-detail-nav {
    display: flex;
    align-items: center;
    min-height: 36px;
    margin-bottom: 6px;
}

.apisecurity-operator-frame .apisecurity-graphql-console {
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.apisecurity-operator-frame .apisecurity-graphql-console-head,
.apisecurity-operator-frame .apisecurity-graphql-console-title,
.apisecurity-operator-frame .apisecurity-graphql-section-head,
.apisecurity-operator-frame .apisecurity-graphql-advanced summary {
    display: flex;
    align-items: center;
}

.apisecurity-operator-frame .apisecurity-graphql-console-head {
    justify-content: space-between;
    gap: 18px;
    min-height: 78px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-graphql-console-title {
    gap: 12px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-graphql-console-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    color: var(--operator-orange, var(--brand-orange));
}

.apisecurity-operator-frame .apisecurity-graphql-console-title h3 {
    margin: 4px 0 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 760;
}

.apisecurity-operator-frame .apisecurity-graphql-console-title p,
.apisecurity-operator-frame .apisecurity-graphql-section-head span,
.apisecurity-operator-frame .apisecurity-graphql-advanced summary small {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.apisecurity-operator-frame .apisecurity-graphql-console-section {
    padding: 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-graphql-section-head {
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.apisecurity-operator-frame .apisecurity-graphql-section-head > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-graphql-section-head strong,
.apisecurity-operator-frame .apisecurity-graphql-advanced summary strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 760;
}

.apisecurity-operator-frame .apisecurity-graphql-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-graphql-profile {
    display: grid;
    gap: 4px;
    min-height: 74px;
    padding: 11px 12px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-muted);
    cursor: pointer;
    text-align: left;
}

.apisecurity-operator-frame .apisecurity-graphql-profile:hover,
.apisecurity-operator-frame .apisecurity-graphql-profile.is-active {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 48%, var(--operator-line, #d9dde3));
}

.apisecurity-operator-frame .apisecurity-graphql-profile.is-active {
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 7%, var(--operator-surface, #ffffff));
}

.apisecurity-operator-frame .apisecurity-graphql-profile strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 760;
}

.apisecurity-operator-frame .apisecurity-graphql-profile span {
    font-size: 11px;
    line-height: 1.35;
}

.apisecurity-operator-frame .apisecurity-graphql-limit-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-graphql-limit-summary > span {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 9px 10px;
    background: var(--operator-surface, #ffffff);
}

.apisecurity-operator-frame .apisecurity-graphql-limit-summary small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-graphql-limit-summary strong {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 760;
}

.apisecurity-operator-frame .apisecurity-graphql-advanced {
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-graphql-advanced summary {
    justify-content: space-between;
    gap: 16px;
    min-height: 62px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.apisecurity-operator-frame .apisecurity-graphql-advanced summary::-webkit-details-marker {
    display: none;
}

.apisecurity-operator-frame .apisecurity-graphql-advanced summary > span:first-child {
    display: grid;
    gap: 2px;
}

.apisecurity-operator-frame .apisecurity-graphql-advanced[open] .apisecurity-function-rule-chevron {
    transform: rotate(180deg);
}

.apisecurity-operator-frame .apisecurity-graphql-advanced-body {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
}

.apisecurity-operator-frame .apisecurity-graphql-request-controls .operator-control-row {
    border: 0;
}

.apisecurity-operator-frame .apisecurity-graphql-scope-list .operator-control-row {
    border: 0;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-graphql-scope-table .config-table-wrap {
    max-height: min(50vh, 460px);
    overflow: auto;
    border: 0;
    border-radius: 0;
}

.apisecurity-operator-frame .apisecurity-graphql-scope-table .config-enterprise-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.apisecurity-operator-frame .apisecurity-graphql-schema-shell-body {
    padding: 14px;
}

.apisecurity-operator-frame .apisecurity-graphql-limits-shell-body {
    padding: 14px;
}

.apisecurity-operator-frame .apisecurity-config-section-body {
    padding: 14px;
}

.apisecurity-operator-frame .apisecurity-config-section-body.is-flush {
    padding: 0;
}

.apisecurity-operator-frame .apisecurity-list-table-section .table-container {
    min-height: 0;
    height: auto;
}

.apisecurity-operator-frame .apisecurity-list-table-input {
    width: 100%;
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
}

.apisecurity-operator-frame .apisecurity-list-table-input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 38%, transparent);
    outline-offset: 2px;
}

.apisecurity-block-confirm-modal {
    width: min(520px, calc(100vw - 32px));
}

.apisecurity-block-confirm-modal .section-modal-head {
    align-items: flex-start;
    padding: 18px 22px 14px;
}

.apisecurity-block-confirm-modal .section-modal-title {
    margin: 0;
    line-height: 1.3;
}

.apisecurity-block-confirm-modal .section-modal-sub {
    margin: 4px 0 0;
    line-height: 1.4;
}

.apisecurity-block-confirm-modal .section-modal-body {
    padding: 18px 22px;
}

.apisecurity-block-confirm-modal .section-modal-body p {
    max-width: 56ch;
    margin: 0;
    color: var(--text-main);
    line-height: 1.5;
}

.apisecurity-block-confirm-modal .section-modal-footer {
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 22px;
}

.apisecurity-block-confirm-modal .section-modal-footer .btn {
    min-height: 36px;
}

.apisecurity-operator-frame .apisecurity-settings-area-row-clickable {
    cursor: pointer;
}

.apisecurity-operator-frame .apisecurity-settings-area-arrow {
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
}

.apisecurity-operator-frame .apisecurity-settings-area-row-clickable:hover .apisecurity-settings-area-arrow,
.apisecurity-operator-frame .apisecurity-settings-area-row-clickable:focus-visible .apisecurity-settings-area-arrow {
    color: var(--operator-orange, var(--brand-orange));
}

.apisecurity-operator-frame .apisecurity-settings-page .operator-control-list,
.apisecurity-operator-frame .apisecurity-settings-page .operator-table-panel,
.apisecurity-operator-frame .apisecurity-settings-page .apisecurity-structured-editor,
.apisecurity-operator-frame .apisecurity-settings-page .section-fp-card {
    border-radius: 3px;
}

.apisecurity-operator-frame .apisecurity-settings-page input:not([type="checkbox"]):not([type="radio"]),
.apisecurity-operator-frame .apisecurity-settings-page select,
.apisecurity-operator-frame .apisecurity-settings-page textarea {
    border-radius: 3px;
}

.apisecurity-operator-frame .apisecurity-settings-page-header {
    border-radius: 3px;
}


.apisecurity-operator-frame .apisecurity-graphql-schema-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.apisecurity-operator-frame .apisecurity-graphql-schema-grid .edge-access-v2-provider-template {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    min-height: 118px;
    padding: 16px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.apisecurity-operator-frame .apisecurity-graphql-schema-grid .edge-access-v2-provider-template:hover,
.apisecurity-operator-frame .apisecurity-graphql-schema-grid .edge-access-v2-provider-template.is-selected {
    border-color: var(--operator-orange, var(--brand-orange));
    background: var(--operator-surface, #ffffff);
}

.apisecurity-operator-frame .apisecurity-graphql-schema-grid .edge-access-v2-provider-template:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 38%, transparent);
    outline-offset: 3px;
}

.apisecurity-operator-frame .apisecurity-graphql-schema-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    color: var(--operator-orange, var(--brand-orange));
}

.apisecurity-operator-frame .apisecurity-graphql-schema-mark svg {
    width: 17px;
    height: 17px;
}

.apisecurity-operator-frame .apisecurity-graphql-schema-grid .edge-access-v2-provider-template-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-graphql-schema-grid .edge-access-v2-provider-template-copy strong {
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.3;
}

.apisecurity-operator-frame .apisecurity-graphql-schema-grid .edge-access-v2-provider-template-copy > span {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.apisecurity-operator-frame .apisecurity-graphql-schema-grid .edge-access-v2-provider-template-copy small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-graphql-schema-grid .edge-access-v2-provider-template-check {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--operator-orange, var(--brand-orange));
    color: #fff;
}

.apisecurity-operator-frame .apisecurity-graphql-schema-grid .edge-access-v2-provider-template-check svg {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

.apisecurity-operator-frame .apisecurity-graphql-schema-grid .edge-access-v2-provider-template.is-selected .edge-access-v2-provider-template-check {
    display: inline-flex;
}

@media (max-width: 640px) {
    .apisecurity-operator-frame .apisecurity-graphql-schema-grid {
        grid-template-columns: 1fr;
    }
}

.apisecurity-operator-frame .apisecurity-graphql-policy-workspace {
    display: grid;
    gap: 0;
}

.apisecurity-operator-frame .apisecurity-graphql-control-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.apisecurity-operator-frame .apisecurity-graphql-control-card,
.apisecurity-operator-frame .apisecurity-graphql-preset-card {
    appearance: none;
    width: 100%;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 0;
    background: var(--operator-surface, #ffffff);
    box-shadow: none;
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.apisecurity-operator-frame .apisecurity-graphql-control-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    min-height: 172px;
    padding: 16px;
}

.apisecurity-operator-frame .apisecurity-graphql-control-card:hover,
.apisecurity-operator-frame .apisecurity-graphql-control-card:focus-visible,
.apisecurity-operator-frame .apisecurity-graphql-preset-card:hover,
.apisecurity-operator-frame .apisecurity-graphql-preset-card:focus-visible {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 4%, var(--operator-surface, #ffffff));
    outline: none;
}

.apisecurity-operator-frame .apisecurity-graphql-control-card:focus-visible,
.apisecurity-operator-frame .apisecurity-graphql-preset-card:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 28%, transparent);
}

.apisecurity-operator-frame .apisecurity-graphql-control-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--operator-line, #d9dde3);
    color: var(--operator-orange, var(--brand-orange));
}

.apisecurity-operator-frame .apisecurity-graphql-control-card-icon svg {
    width: 16px;
    height: 16px;
}

.apisecurity-operator-frame .apisecurity-graphql-control-card-content,
.apisecurity-operator-frame .apisecurity-graphql-control-card-action,
.apisecurity-operator-frame .apisecurity-graphql-preset-card,
.apisecurity-operator-frame .apisecurity-graphql-preset-card-head {
    display: grid;
}

.apisecurity-operator-frame .apisecurity-graphql-control-card-content {
    align-content: start;
    gap: 5px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-graphql-control-card-eyebrow {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-graphql-control-card strong {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.25;
}

.apisecurity-operator-frame .apisecurity-graphql-control-card-description,
.apisecurity-operator-frame .apisecurity-graphql-preset-card-description {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.apisecurity-operator-frame .apisecurity-graphql-control-card-metrics,
.apisecurity-operator-frame .apisecurity-graphql-preset-card-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 8px;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 680;
    line-height: 1.35;
}

.apisecurity-operator-frame .apisecurity-graphql-control-card-metrics span + span::before,
.apisecurity-operator-frame .apisecurity-graphql-preset-card-metrics span + span::before {
    margin-right: 12px;
    color: var(--text-muted);
    content: '·';
}

.apisecurity-operator-frame .apisecurity-graphql-control-card-action {
    justify-items: end;
    gap: 16px;
}

.apisecurity-operator-frame .apisecurity-graphql-control-card-arrow {
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
}

.apisecurity-operator-frame .apisecurity-graphql-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.apisecurity-operator-frame .apisecurity-graphql-preset-card {
    gap: 10px;
    min-height: 160px;
    padding: 16px;
}

.apisecurity-operator-frame .apisecurity-graphql-preset-card.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 6%, var(--operator-surface, #ffffff));
}

.apisecurity-operator-frame .apisecurity-graphql-preset-card-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-graphql-preset-card-head strong {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 760;
}

.apisecurity-operator-frame .apisecurity-graphql-preset-card-metrics {
    align-self: end;
    padding-top: 10px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

@media (max-width: 860px) {
    .apisecurity-operator-frame .apisecurity-graphql-control-cards,
    .apisecurity-operator-frame .apisecurity-graphql-preset-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .apisecurity-operator-frame .apisecurity-graphql-control-card {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .apisecurity-operator-frame .apisecurity-graphql-control-card-action {
        grid-column: 2;
        grid-template-columns: 1fr auto;
        align-items: center;
        justify-items: stretch;
    }
}

.apisecurity-operator-frame .apisecurity-function-context {
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 58px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.apisecurity-operator-frame .apisecurity-function-context label,
.apisecurity-operator-frame .apisecurity-function-operation-grid label,
.apisecurity-operator-frame .apisecurity-function-claim-grid label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-function-context p {
    margin: 0;
}

.apisecurity-operator-frame .apisecurity-function-context input,
.apisecurity-operator-frame .apisecurity-function-operation-grid input,
.apisecurity-operator-frame .apisecurity-function-claim-grid input,
.apisecurity-operator-frame .apisecurity-object-header-grid input,
.apisecurity-operator-frame .apisecurity-object-rule-grid input,
.apisecurity-operator-frame .apisecurity-mass-path-field input,
.apisecurity-operator-frame .apisecurity-auth-value-add input {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 650;
}

.apisecurity-operator-frame .apisecurity-object-context,
.apisecurity-operator-frame .apisecurity-protected-defaults {
    display: grid;
    gap: 18px;
    padding: 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.apisecurity-operator-frame .apisecurity-object-context {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-protected-defaults {
    grid-template-columns: 210px minmax(0, 1fr);
}

.apisecurity-operator-frame .apisecurity-object-header-grid,
.apisecurity-operator-frame .apisecurity-object-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-object-header-grid label,
.apisecurity-operator-frame .apisecurity-object-rule-grid label,
.apisecurity-operator-frame .apisecurity-mass-path-field label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-object-header-grid label > span,
.apisecurity-operator-frame .apisecurity-object-rule-grid label > span,
.apisecurity-operator-frame .apisecurity-mass-path-field label > span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-authorization-scope {
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-authorization-scope summary {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 18px;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}

.apisecurity-operator-frame .apisecurity-authorization-scope summary::-webkit-details-marker {
    display: none;
}

.apisecurity-operator-frame .apisecurity-authorization-scope summary > span:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-main);
    font-size: 12px;
}

.apisecurity-operator-frame .apisecurity-authorization-scope summary small {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-authorization-scope summary > span:last-child {
    color: var(--text-muted);
    font-size: 11px;
}

.apisecurity-operator-frame .apisecurity-authorization-scope > .apisecurity-structured-editor {
    margin: 0 14px 14px 242px;
}

.apisecurity-operator-frame .apisecurity-function-rule-list {
    display: grid;
}

.apisecurity-operator-frame .apisecurity-function-rule + .apisecurity-function-rule {
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-function-rule-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 62px;
    padding: 8px 12px;
}

.apisecurity-operator-frame .apisecurity-function-rule.is-expanded .apisecurity-function-rule-summary {
    background: color-mix(in srgb, var(--operator-accent, var(--brand-orange)) 4%, var(--operator-surface, #ffffff));
}

.apisecurity-operator-frame .apisecurity-function-rule-toggle {
    display: grid;
    grid-template-columns: 30px minmax(190px, 1.5fr) minmax(170px, 1fr) 70px auto 18px;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.apisecurity-operator-frame .apisecurity-object-rule-toggle {
    grid-template-columns: 30px minmax(220px, 1.5fr) minmax(120px, 0.75fr) 100px auto 18px;
}

.apisecurity-operator-frame .apisecurity-mass-rule-toggle {
    grid-template-columns: 30px minmax(240px, 1fr) 90px auto 18px;
}

.apisecurity-operator-frame .apisecurity-object-owner-key,
.apisecurity-operator-frame .apisecurity-mass-field-summary {
    color: var(--text-muted);
    font-size: 11px;
}

.apisecurity-operator-frame .apisecurity-function-rule-number {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 760;
}

.apisecurity-operator-frame .apisecurity-function-rule-identity {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-function-rule-identity strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 760;
}

.apisecurity-operator-frame .apisecurity-function-rule-path {
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apisecurity-operator-frame .apisecurity-function-rule-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.apisecurity-operator-frame .apisecurity-function-rule-methods span {
    padding: 2px 5px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 760;
}

.apisecurity-operator-frame .apisecurity-function-rule-methods span.is-empty,
.apisecurity-operator-frame .apisecurity-function-rule-roles {
    color: var(--text-muted);
    font-size: 11px;
}

.apisecurity-operator-frame .apisecurity-function-rule-chevron {
    color: var(--text-muted);
    font-size: 16px;
    transition: transform 0.16s ease;
}

.apisecurity-operator-frame .apisecurity-function-rule.is-expanded .apisecurity-function-rule-chevron {
    transform: rotate(180deg);
}

.apisecurity-operator-frame .apisecurity-function-rule-toggle:focus-visible {
    outline: 2px solid var(--operator-accent, var(--brand-orange));
    outline-offset: 3px;
}

.apisecurity-operator-frame .apisecurity-function-rule-editor {
    display: grid;
    gap: 0;
    margin: 0 12px 12px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.apisecurity-operator-frame .apisecurity-function-editor-section {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 18px;
    padding: 14px;
}

.apisecurity-operator-frame .apisecurity-function-editor-section + .apisecurity-function-editor-section,
.apisecurity-operator-frame .apisecurity-function-claim,
.apisecurity-operator-frame .apisecurity-function-rule-editor > .apisecurity-rule-preview {
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-function-editor-heading {
    display: grid;
    align-content: start;
    gap: 4px;
}

.apisecurity-operator-frame .apisecurity-function-editor-heading strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 760;
}

.apisecurity-operator-frame .apisecurity-function-editor-heading span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.apisecurity-operator-frame .apisecurity-function-operation-grid {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) minmax(240px, 1.3fr) minmax(300px, 1fr);
    gap: 10px;
    align-items: start;
}

.apisecurity-operator-frame .apisecurity-auth-value-editor {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-auth-value-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-auth-value-head small,
.apisecurity-operator-frame .apisecurity-auth-value-empty {
    color: var(--text-muted);
    font-size: 10px;
}

.apisecurity-operator-frame .apisecurity-auth-quick-options,
.apisecurity-operator-frame .apisecurity-auth-value-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.apisecurity-operator-frame .apisecurity-auth-quick-option,
.apisecurity-operator-frame .apisecurity-auth-value-chip {
    min-height: 28px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: 760;
}

.apisecurity-operator-frame .apisecurity-auth-quick-option {
    padding: 4px 9px;
    cursor: pointer;
}

.apisecurity-operator-frame .apisecurity-auth-quick-option.is-active {
    border-color: color-mix(in srgb, var(--operator-accent, var(--brand-orange)) 64%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-accent, var(--brand-orange)) 9%, var(--operator-surface, #ffffff));
    color: var(--operator-accent, var(--brand-orange));
}

.apisecurity-operator-frame .apisecurity-auth-quick-option:focus-visible,
.apisecurity-operator-frame .apisecurity-auth-value-chip button:focus-visible {
    outline: 2px solid var(--operator-accent, var(--brand-orange));
    outline-offset: 2px;
}

.apisecurity-operator-frame .apisecurity-auth-value-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 5px 3px 8px;
}

.apisecurity-operator-frame .apisecurity-auth-value-chip button {
    display: inline-grid;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    place-items: center;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.apisecurity-operator-frame .apisecurity-auth-value-add {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto;
    gap: 6px;
    align-items: center;
    max-width: 520px;
}

.apisecurity-operator-frame .apisecurity-function-claim {
    padding: 0;
}

.apisecurity-operator-frame .apisecurity-function-claim summary {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 18px;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}

.apisecurity-operator-frame .apisecurity-function-claim summary::-webkit-details-marker {
    display: none;
}

.apisecurity-operator-frame .apisecurity-function-claim summary > span:first-child {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-main);
    font-size: 12px;
}

.apisecurity-operator-frame .apisecurity-function-claim summary small {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-function-claim summary > span:last-child {
    color: var(--text-muted);
    font-size: 11px;
}

.apisecurity-operator-frame .apisecurity-function-claim-grid {
    display: grid;
    grid-template-columns: minmax(180px, 0.45fr) minmax(320px, 1fr);
    gap: 10px;
    padding: 0 14px 14px 242px;
}

.apisecurity-operator-frame .apisecurity-mass-path-field {
    max-width: 680px;
}

.apisecurity-operator-frame .apisecurity-function-rule-editor > .apisecurity-rule-preview {
    margin: 0;
    padding: 11px 14px;
}

.apisecurity-operator-frame .apisecurity-function-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 36px 18px;
    color: var(--text-muted);
    text-align: center;
}

.apisecurity-operator-frame .apisecurity-function-empty strong {
    color: var(--text-main);
    font-size: 13px;
}

.apisecurity-operator-frame .apisecurity-function-empty span {
    max-width: 460px;
    font-size: 12px;
    line-height: 1.45;
}

.apisecurity-operator-frame .apisecurity-function-empty .operator-btn {
    margin-top: 6px;
}

.apisecurity-operator-frame .apisecurity-structured-editor {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface-muted, #f7f8fa);
}

.apisecurity-operator-frame .apisecurity-rule-row .apisecurity-structured-editor {
    grid-column: span 2;
    margin-top: 0;
    background: var(--operator-surface-muted, #f7f8fa);
}

.apisecurity-operator-frame .apisecurity-structured-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-structured-editor-head span {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.3;
}

.apisecurity-operator-frame .apisecurity-structured-editor-head small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.apisecurity-operator-frame .apisecurity-structured-list {
    display: grid;
    gap: 6px;
}

.apisecurity-operator-frame .apisecurity-structured-row,
.apisecurity-operator-frame .apisecurity-structured-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-structured-add:has(select) {
    grid-template-columns: minmax(140px, 0.55fr) minmax(180px, 1fr) auto;
}

.apisecurity-operator-frame .apisecurity-structured-row input,
.apisecurity-operator-frame .apisecurity-structured-add input,
.apisecurity-operator-frame .apisecurity-structured-add select {
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 650;
}

.apisecurity-operator-frame .apisecurity-structured-editor-chip .apisecurity-structured-row {
    grid-template-columns: minmax(120px, 1fr) auto;
}

.apisecurity-operator-frame .apisecurity-structured-editor .section-empty-state.compact {
    min-height: 0;
    padding: 8px 10px;
    border: 1px dashed var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: transparent;
}

.apisecurity-operator-frame .apisecurity-structured-editor .section-empty-state.compact .section-empty-title {
    font-size: 12px;
}

.apisecurity-operator-frame .apisecurity-primary-policy {
    display: grid;
    gap: 14px;
}

.apisecurity-operator-frame .apisecurity-primary-policy-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.apisecurity-operator-frame .apisecurity-primary-policy-copy {
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-primary-policy-copy h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 760;
    line-height: 1.25;
}

.apisecurity-operator-frame .apisecurity-primary-policy-copy p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.apisecurity-operator-frame .apisecurity-primary-policy-grid {
    display: grid;
    grid-template-columns: minmax(180px, 0.55fr) repeat(2, minmax(180px, 1fr));
    gap: 12px;
}

.apisecurity-operator-frame .apisecurity-primary-policy-grid:empty {
    display: none;
}

.apisecurity-operator-frame .apisecurity-profile-field select {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 650;
}

.apisecurity-operator-frame .apisecurity-profile-field {
    display: grid;
    gap: 6px;
    margin: 0;
}

.apisecurity-operator-frame .apisecurity-profile-field > span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-primary-fact {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.apisecurity-operator-frame .apisecurity-primary-fact span,
.apisecurity-operator-frame .apisecurity-impact-label {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-primary-fact strong {
    min-width: 0;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.apisecurity-operator-frame .apisecurity-impact-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 92%, var(--primary) 8%);
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.4;
}

.apisecurity-operator-frame .apisecurity-impact-preview.tone-danger {
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 88%, var(--danger, #ef4444) 12%);
}

.apisecurity-operator-frame .apisecurity-impact-preview.tone-warning {
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 88%, var(--warning, var(--brand-orange)) 12%);
}

.apisecurity-operator-frame .apisecurity-primary-policy-list .operator-control-actions {
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-inline-select {
    width: auto;
    min-width: 96px;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
}

.apisecurity-operator-frame .apisecurity-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.apisecurity-operator-frame .apisecurity-chip.is-active {
    border-color: color-mix(in srgb, var(--primary) 48%, var(--operator-line, #d9dde3));
    color: var(--text-main);
}

.apisecurity-operator-frame .apisecurity-chip small {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
}

.apisecurity-operator-frame .apisecurity-inventory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.apisecurity-operator-frame .apisecurity-inventory-console {
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.apisecurity-operator-frame .apisecurity-inventory-kpis {
    border: 0;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
}

.apisecurity-operator-frame .apisecurity-inventory-surface {
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-inventory-console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 74px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-inventory-eyebrow {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-inventory-console-head h4 {
    margin: 5px 0 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
    line-height: 1.25;
}

.apisecurity-operator-frame .apisecurity-inventory-console-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.apisecurity-operator-frame .apisecurity-inventory-head-actions,
.apisecurity-operator-frame .apisecurity-inventory-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-inventory-count {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--text-muted);
    font-size: 10px;
}

.apisecurity-operator-frame .apisecurity-inventory-count strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 730;
}

.apisecurity-operator-frame .apisecurity-inventory-view-summary {
    margin-left: 4px;
    color: var(--text-dim);
}

.apisecurity-operator-frame .apisecurity-inventory-settings-panel {
    display: grid;
    gap: 12px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface-muted, #f7f8fa);
}

.apisecurity-operator-frame .apisecurity-inventory-toolbar-main {
    align-items: center;
    flex: 1 1 auto;
    justify-content: flex-start;
}

.apisecurity-operator-frame .apisecurity-inventory-search {
    position: relative;
    display: block;
    width: 230px;
    min-width: 0;
    margin-left: 0;
}

.apisecurity-operator-frame .apisecurity-inventory-search-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 11px;
    display: inline-flex;
    color: var(--text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.apisecurity-operator-frame .apisecurity-inventory-search-icon svg {
    width: 15px;
}

.apisecurity-operator-frame .apisecurity-inventory-search-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 11px;
    display: inline-flex;
    color: var(--text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.apisecurity-operator-frame .apisecurity-inventory-search-icon svg {
    width: 15px;
    height: 15px;
}

.apisecurity-operator-frame .apisecurity-inventory-search .input {
    width: 100%;
    min-height: 32px;
    padding-left: 31px;
    border-radius: 6px;
}

.apisecurity-operator-frame .apisecurity-inventory-filter-chips {
    padding: 8px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 4%, var(--operator-surface, #ffffff));
}

.apisecurity-operator-frame .apisecurity-inventory-filter-menu {
    position: relative;
}

.apisecurity-operator-frame .apisecurity-inventory-filter-popover {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 10px;
    width: min(520px, calc(100vw - 48px));
    padding: 12px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}

.apisecurity-operator-frame .apisecurity-inventory-filter-field {
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-inventory-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface-muted, #f7f8fa);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.apisecurity-operator-frame .apisecurity-inventory-filter-chip strong {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-inventory-filter-chip button {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.apisecurity-operator-frame .apisecurity-inventory-filter-chip button:hover {
    background: var(--operator-line-soft, #eceff3);
    color: var(--text-main);
}

.apisecurity-operator-frame .apisecurity-api-cell.routing-route-main {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.apisecurity-operator-frame .routing-route-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, var(--operator-surface, #ffffff));
    color: var(--operator-link, var(--primary));
}

.apisecurity-operator-frame .routing-route-icon svg {
    width: 15px;
    height: 15px;
}

.apisecurity-operator-frame .apisecurity-endpoint-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-endpoint-path {
    overflow: hidden;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apisecurity-operator-frame .apisecurity-endpoint-host {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apisecurity-method-badge,
.apisecurity-operator-frame .apisecurity-method-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 22px;
    padding: 0 6px;
    flex-shrink: 0;
    border-radius: 4px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--status-neutral-bg, rgba(15, 23, 42, 0.06));
    color: var(--text-muted, #64748b);
    border: 1px solid var(--status-neutral-border, rgba(15, 23, 42, 0.16));
}

.apisecurity-operator-frame .apisecurity-method-get,
.apisecurity-operator-frame .apisecurity-method-post,
.apisecurity-operator-frame .apisecurity-method-put,
.apisecurity-operator-frame .apisecurity-method-patch,
.apisecurity-operator-frame .apisecurity-method-delete,
.apisecurity-operator-frame .apisecurity-method-default {
    background: var(--status-neutral-bg, rgba(15, 23, 42, 0.06));
    color: var(--text-muted, #64748b);
    border-color: var(--status-neutral-border, rgba(15, 23, 42, 0.16));
}

[data-theme="dark"] .apisecurity-method-badge,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-method-badge,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-method-get,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-method-post,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-method-put,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-method-patch,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-method-delete,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-method-default {
    background: var(--status-neutral-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #cbd5e1);
    border-color: var(--status-neutral-border, rgba(255, 255, 255, 0.16));
}

.apisecurity-operator-frame .apisecurity-traffic-cell,
.apisecurity-operator-frame .apisecurity-schema-cell,
.apisecurity-operator-frame .apisecurity-posture-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.apisecurity-operator-frame .apisecurity-cell-subtext,
.apisecurity-operator-frame .apisecurity-last-seen-date {
    font-size: 11px;
    color: var(--text-muted);
}

.apisecurity-operator-frame .apisecurity-risk-chip {
    border-color: color-mix(in srgb, var(--tone-warning-border, #f59e0b) 40%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--tone-warning-bg, #fef3c7) 60%, transparent);
    color: var(--tone-warning-text, #92400e);
    font-size: 10.5px;
    font-weight: 600;
}

.apisecurity-operator-frame .routing-row-actions.apisecurity-table-actions {
    display: flex;
    justify-content: flex-end;
}

.apisecurity-operator-frame .apisecurity-table-actions .operator-action-menu-trigger {
    min-height: 30px;
    padding-inline: 9px;
}

.apisecurity-operator-frame .apisecurity-inventory-table--8 .config-enterprise-table th:nth-child(1) { width: 28%; }
.apisecurity-operator-frame .apisecurity-inventory-table--8 .config-enterprise-table th:nth-child(2) { width: 8%; }
.apisecurity-operator-frame .apisecurity-inventory-table--8 .config-enterprise-table th:nth-child(3) { width: 10%; }
.apisecurity-operator-frame .apisecurity-inventory-table--8 .config-enterprise-table th:nth-child(4) { width: 11%; }
.apisecurity-operator-frame .apisecurity-inventory-table--8 .config-enterprise-table th:nth-child(5) { width: 16%; }
.apisecurity-operator-frame .apisecurity-inventory-table--8 .config-enterprise-table th:nth-child(6) { width: 12%; }
.apisecurity-operator-frame .apisecurity-inventory-table--8 .config-enterprise-table th:nth-child(7) { width: 8%; }
.apisecurity-operator-frame .apisecurity-inventory-table--8 .config-enterprise-table th:nth-child(8) { width: 7%; }

.apisecurity-operator-frame .apisecurity-inventory-table--7 .config-enterprise-table th:nth-child(1) { width: 30%; }
.apisecurity-operator-frame .apisecurity-inventory-table--7 .config-enterprise-table th:nth-child(2) { width: 9%; }
.apisecurity-operator-frame .apisecurity-inventory-table--7 .config-enterprise-table th:nth-child(3) { width: 11%; }
.apisecurity-operator-frame .apisecurity-inventory-table--7 .config-enterprise-table th:nth-child(4) { width: 13%; }
.apisecurity-operator-frame .apisecurity-inventory-table--7 .config-enterprise-table th:nth-child(5) { width: 18%; }
.apisecurity-operator-frame .apisecurity-inventory-table--7 .config-enterprise-table th:nth-child(6) { width: 11%; }
.apisecurity-operator-frame .apisecurity-inventory-table--7 .config-enterprise-table th:nth-child(7) { width: 8%; }

.apisecurity-operator-frame .apisecurity-inventory-table--6 .config-enterprise-table th:nth-child(1) { width: 32%; }
.apisecurity-operator-frame .apisecurity-inventory-table--6 .config-enterprise-table th:nth-child(2) { width: 12%; }
.apisecurity-operator-frame .apisecurity-inventory-table--6 .config-enterprise-table th:nth-child(3) { width: 14%; }
.apisecurity-operator-frame .apisecurity-inventory-table--6 .config-enterprise-table th:nth-child(4) { width: 22%; }
.apisecurity-operator-frame .apisecurity-inventory-table--6 .config-enterprise-table th:nth-child(5) { width: 11%; }
.apisecurity-operator-frame .apisecurity-inventory-table--6 .config-enterprise-table th:nth-child(6) { width: 9%; }

.apisecurity-operator-frame .apisecurity-inventory-table .config-enterprise-table th:last-child,
.apisecurity-operator-frame .apisecurity-inventory-table .config-enterprise-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.apisecurity-operator-frame .apisecurity-inventory-workspace {
    display: grid;
    gap: 16px;
    align-items: start;
}

.apisecurity-operator-frame .apisecurity-inventory-workspace.has-selection {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
}

.apisecurity-operator-frame .apisecurity-inventory-table-pane {
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-inventory-table .config-table-empty-cell {
    padding: 0 !important;
}

.apisecurity-operator-frame .apisecurity-inventory-table .config-table-empty-cell .empty-state {
    display: grid;
    place-items: center;
    min-height: 230px !important;
    height: auto !important;
    padding: 30px !important;
    border: 0;
    border-radius: 0;
    background: var(--operator-surface, #ffffff);
    text-align: center;
}

.apisecurity-operator-frame .apisecurity-inventory-table .config-table-empty-cell .empty-state-icon {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    margin-bottom: 3px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 92%, #f3f4f6);
    color: var(--text-dim);
}

.apisecurity-operator-frame .apisecurity-inventory-table .config-table-empty-cell .empty-state h3 {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.apisecurity-operator-frame .apisecurity-inventory-table .config-table-empty-cell .empty-state p {
    max-width: 390px;
    font-size: 11px;
    line-height: 1.45;
}

[data-theme="light"] .apisecurity-operator-frame .apisecurity-inventory-table .config-table-empty-cell .empty-state {
    min-height: 230px !important;
    padding: 30px !important;
}

[data-theme="light"] .apisecurity-operator-frame .apisecurity-inventory-table .config-table-empty-cell .empty-state-icon {
    display: inline-grid !important;
}

.apisecurity-operator-frame .apisecurity-inventory-table .config-enterprise-table tr:has(.apisecurity-api-cell.is-selected) td {
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 90%, var(--primary) 10%);
}

.apisecurity-operator-frame .apisecurity-api-cell.is-selected .text-main {
    color: var(--primary);
}

.apisecurity-operator-frame .apisecurity-api-cell.is-selected .config-status-pill {
    border-color: color-mix(in srgb, var(--primary) 48%, var(--operator-line, #d9dde3));
}

.apisecurity-operator-frame .apisecurity-inventory-view-popover {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: min(520px, calc(100vw - 48px));
    min-width: min(520px, calc(100vw - 48px));
    padding: 0;
    overflow: hidden;
}

.apisecurity-operator-frame .apisecurity-inventory-view-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 16px;
    padding: 16px;
}

.apisecurity-operator-frame .apisecurity-inventory-view-layout select {
    appearance: none;
    padding-right: 32px;
    background-color: var(--input-bg, var(--operator-surface, #ffffff)) !important;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position:
        calc(100% - 15px) 50%,
        calc(100% - 10px) 50% !important;
    background-repeat: no-repeat !important;
    background-size: 5px 5px, 5px 5px !important;
}

.apisecurity-operator-frame .apisecurity-inventory-view-columns {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.apisecurity-operator-frame .apisecurity-inventory-view-columns legend,
.apisecurity-operator-frame .apisecurity-inventory-view-section-title {
    padding: 0;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-inventory-view-column-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.apisecurity-operator-frame .apisecurity-inventory-view-save,
.apisecurity-operator-frame .apisecurity-inventory-local-views {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    margin: 0;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-inventory-view-save-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-inventory-view-save-row input {
    width: 100%;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-inventory-local-view,
.apisecurity-operator-frame .apisecurity-inventory-recent-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #fff);
}

.apisecurity-operator-frame .apisecurity-inventory-recent-filter {
    grid-template-columns: minmax(0, 1fr);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}

.apisecurity-operator-frame .apisecurity-inventory-local-view strong,
.apisecurity-operator-frame .apisecurity-inventory-recent-filter strong,
.apisecurity-operator-frame .apisecurity-inventory-local-view small,
.apisecurity-operator-frame .apisecurity-inventory-recent-filter small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apisecurity-operator-frame .apisecurity-inventory-column-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 28px;
    padding: 3px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.apisecurity-operator-frame .apisecurity-inventory-column-option input {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--input-border, var(--operator-line, #d9dde3)) !important;
    border-radius: 3px;
    background: var(--input-bg, var(--operator-surface, #ffffff)) !important;
    cursor: pointer;
}

.apisecurity-operator-frame .apisecurity-inventory-column-option input:checked {
    border-color: var(--primary) !important;
    background: var(--primary) !important;
}

.apisecurity-operator-frame .apisecurity-inventory-column-option input:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.apisecurity-operator-frame .apisecurity-inventory-column-option span {
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-inventory-view-empty {
    padding: 2px 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .apisecurity-operator-frame .apisecurity-inventory-view-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .apisecurity-operator-frame .apisecurity-inventory-view-save-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .apisecurity-operator-frame .apisecurity-inventory-view-save-row .btn {
        width: 100%;
    }
}

.apisecurity-operator-frame .apisecurity-inventory-grouped-table {
    display: grid;
    gap: 16px;
}

.apisecurity-operator-frame .apisecurity-inventory-group {
    border-top: 1px solid var(--operator-line, #d9dde3);
    display: grid;
    gap: 8px;
    padding-top: 12px;
}

.apisecurity-operator-frame .apisecurity-inventory-group:first-child {
    border-top: 0;
    padding-top: 0;
}

.apisecurity-operator-frame .apisecurity-inventory-group-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.apisecurity-operator-frame .apisecurity-scope-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-scope-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 26px;
    padding: 5px 8px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.apisecurity-operator-frame .apisecurity-scope-chip.is-empty,
.apisecurity-operator-frame .apisecurity-scope-chip.is-muted {
    color: var(--text-muted);
}

.apisecurity-operator-frame .apisecurity-rule-preview {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-schema-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.apisecurity-operator-frame .apisecurity-schema-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.apisecurity-operator-frame .apisecurity-scope-picker,
.apisecurity-operator-frame .apisecurity-blocking-review {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.apisecurity-operator-frame .apisecurity-scope-picker-head,
.apisecurity-operator-frame .apisecurity-blocking-review-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.apisecurity-operator-frame .apisecurity-scope-picker-head strong,
.apisecurity-operator-frame .apisecurity-blocking-review-head strong {
    display: block;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.3;
}

.apisecurity-operator-frame .apisecurity-scope-picker-head span,
.apisecurity-operator-frame .apisecurity-blocking-review-head span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.apisecurity-operator-frame .apisecurity-wizard-drawer,
.apisecurity-operator-frame .apisecurity-wizard-head {
    display: grid;
    gap: 12px;
}

.apisecurity-operator-frame .apisecurity-wizard-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.apisecurity-operator-frame .apisecurity-surface-choice-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-surface-choice {
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 88px;
    padding: 12px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.apisecurity-operator-frame .apisecurity-surface-choice:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.apisecurity-operator-frame .apisecurity-surface-choice.is-active {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 90%, var(--primary) 10%);
}

.apisecurity-operator-frame .apisecurity-surface-choice strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.25;
}

.apisecurity-operator-frame .apisecurity-surface-choice span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}

.apisecurity-operator-frame .apisecurity-surface-choice .bot-overview-field {
    display: grid;
    gap: 5px;
    margin: 0;
}

.apisecurity-operator-frame .apisecurity-surface-choice select {
    width: 100%;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
}

.apisecurity-operator-frame .apisecurity-scope-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(130px, 1fr));
    gap: 10px;
}

.apisecurity-operator-frame .apisecurity-scope-filter-grid .bot-overview-field {
    display: grid;
    gap: 6px;
    margin: 0;
}

.apisecurity-operator-frame .apisecurity-scope-filter-grid .bot-overview-field > span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-scope-filter-grid input,
.apisecurity-operator-frame .apisecurity-scope-filter-grid select {
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 650;
}

.apisecurity-operator-frame .apisecurity-scope-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.apisecurity-operator-frame .apisecurity-scope-manual-entry {
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.apisecurity-operator-frame .apisecurity-scope-manual-entry .bot-overview-field {
    display: grid;
    flex: 1;
    gap: 6px;
    margin: 0;
}

.apisecurity-operator-frame .apisecurity-scope-manual-entry .bot-overview-field > span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-scope-manual-entry input {
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
}

.apisecurity-operator-frame .apisecurity-scope-option span {
    overflow-wrap: anywhere;
}

.apisecurity-operator-frame .apisecurity-rollout-list .operator-control-actions {
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-setup-guide {
    display: grid;
    gap: 12px;
}

.apisecurity-operator-frame .apisecurity-setup-list .operator-control-actions,
.apisecurity-operator-frame .apisecurity-readiness-list .operator-control-actions {
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-triage-list .operator-control-actions,
.apisecurity-operator-frame .apisecurity-posture-task-list .operator-control-actions {
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-endpoint-detail {
    display: grid;
    gap: 14px;
    min-width: 0;
    max-height: calc(100vh - 160px);
    overflow: auto;
    padding: 14px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    position: sticky;
    top: 16px;
}

.apisecurity-operator-frame .apisecurity-endpoint-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.apisecurity-operator-frame .apisecurity-endpoint-detail-head strong {
    display: block;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.apisecurity-operator-frame .apisecurity-endpoint-detail-head span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.apisecurity-operator-frame .apisecurity-endpoint-title {
    min-width: 0;
}

.apisecurity-operator-frame .apisecurity-endpoint-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 2px 0 6px 0;
}

.apisecurity-operator-frame .apisecurity-endpoint-actions .btn {
    width: 100% !important;
    min-height: 32px;
    height: 32px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
    box-sizing: border-box;
}

.apisecurity-operator-frame .apisecurity-endpoint-chip-row,
.apisecurity-operator-frame .apisecurity-endpoint-policy-grid,
.apisecurity-operator-frame .apisecurity-endpoint-fact-grid {
    display: grid;
    gap: 8px;
}

.apisecurity-operator-frame .apisecurity-endpoint-chip-row {
    display: flex;
    flex-wrap: wrap;
}

.apisecurity-operator-frame .apisecurity-endpoint-detail-section {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.apisecurity-operator-frame .apisecurity-endpoint-section-title {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.apisecurity-operator-frame .apisecurity-endpoint-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.apisecurity-operator-frame .apisecurity-endpoint-fact,
.apisecurity-operator-frame .apisecurity-endpoint-policy {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface-muted, #f7f8fa);
}

.apisecurity-operator-frame .apisecurity-endpoint-fact span,
.apisecurity-operator-frame .apisecurity-endpoint-fact small,
.apisecurity-operator-frame .apisecurity-endpoint-policy span,
.apisecurity-operator-frame .apisecurity-endpoint-policy small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.apisecurity-operator-frame .apisecurity-endpoint-fact strong,
.apisecurity-operator-frame .apisecurity-endpoint-policy strong {
    min-width: 0;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.apisecurity-operator-frame .apisecurity-endpoint-detail .apisecurity-field-grid-wide {
    grid-template-columns: 1fr;
}

.apisecurity-operator-frame .link-button {
    display: grid;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.apisecurity-operator-frame .link-button:hover .text-main {
    color: var(--primary);
}

@media (max-width: 900px) {
    .apisecurity-operator-frame .apisecurity-primary-policy-head,
    .apisecurity-operator-frame .apisecurity-primary-policy-grid,
    .apisecurity-operator-frame .apisecurity-surface-choice-grid,
    .apisecurity-operator-frame .apisecurity-wizard-head,
    .apisecurity-operator-frame .apisecurity-policy-row-grid,
    .apisecurity-operator-frame .apisecurity-rule-row,
    .apisecurity-operator-frame .apisecurity-function-operation-grid,
    .apisecurity-operator-frame .apisecurity-function-claim-grid,
    .apisecurity-operator-frame .apisecurity-object-header-grid,
    .apisecurity-operator-frame .apisecurity-object-rule-grid,
    .apisecurity-operator-frame .apisecurity-structured-row,
    .apisecurity-operator-frame .apisecurity-structured-add,
    .apisecurity-operator-frame .apisecurity-structured-add:has(select),
    .apisecurity-operator-frame .apisecurity-scope-filter-grid,
    .apisecurity-operator-frame .apisecurity-inventory-workspace.has-selection,
    .apisecurity-operator-frame .apisecurity-endpoint-fact-grid {
        grid-template-columns: 1fr;
    }

    .apisecurity-operator-frame .apisecurity-function-claim-grid {
        padding-left: 14px;
    }

    .apisecurity-operator-frame .apisecurity-authorization-scope > .apisecurity-structured-editor {
        margin-left: 14px;
    }

    .apisecurity-operator-frame .apisecurity-settings-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .apisecurity-operator-frame .apisecurity-settings-editor-head {
        grid-template-columns: 1fr;
    }

    .apisecurity-operator-frame .apisecurity-settings-preview-facts {
        justify-content: flex-start;
    }

    .apisecurity-operator-frame .apisecurity-setting-row {
        grid-template-columns: 1fr;
    }

    .apisecurity-operator-frame .apisecurity-setting-actions {
        justify-content: flex-start;
        max-width: none;
    }

    .apisecurity-operator-frame .apisecurity-settings-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .apisecurity-operator-frame .apisecurity-settings-toolbar input {
        flex: 0 0 auto;
        width: 100%;
    }

    .apisecurity-operator-frame .apisecurity-settings-area-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .apisecurity-operator-frame .apisecurity-settings-area-row .operator-control-actions {
        justify-content: flex-start;
    }

    .apisecurity-operator-frame .apisecurity-settings-page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .apisecurity-operator-frame .apisecurity-settings-page-actions {
        justify-content: flex-start;
    }

    .apisecurity-operator-frame .apisecurity-inventory-toolbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .apisecurity-operator-frame .apisecurity-inventory-search {
        width: 320px;
    }

    .apisecurity-operator-frame .apisecurity-policy-detail-actions {
        grid-column: auto;
    }

    .apisecurity-operator-frame .apisecurity-rule-row .apisecurity-structured-editor {
        grid-column: auto;
    }

    .apisecurity-operator-frame .apisecurity-scope-picker-head,
    .apisecurity-operator-frame .apisecurity-blocking-review-head,
    .apisecurity-operator-frame .apisecurity-endpoint-detail-head,
    .apisecurity-operator-frame .apisecurity-policy-surface-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .apisecurity-operator-frame .apisecurity-primary-policy-head .operator-control-icon {
        display: none;
    }

    .apisecurity-operator-frame .apisecurity-policy-detail-actions {
        justify-content: flex-start;
    }

    .apisecurity-operator-frame .apisecurity-endpoint-detail {
        max-height: none;
        position: static;
    }

    .apisecurity-operator-frame .apisecurity-endpoint-actions {
        justify-content: flex-start;
    }

}

@media (max-width: 700px) {
    .apisecurity-operator-frame .operator-section {
        min-width: 0;
    }

    .apisecurity-operator-frame .apisecurity-function-console-head {
        align-items: stretch;
        flex-direction: column;
    }

    .apisecurity-operator-frame .apisecurity-function-console-head .operator-btn {
        align-self: flex-start;
    }

    .apisecurity-operator-frame .apisecurity-function-console-actions {
        align-self: stretch;
    }

    .apisecurity-operator-frame .apisecurity-graphql-console-head {
        align-items: stretch;
        flex-direction: column;
    }

    .apisecurity-operator-frame .apisecurity-graphql-profile-grid,
    .apisecurity-operator-frame .apisecurity-graphql-limit-summary,
    .apisecurity-operator-frame .apisecurity-graphql-advanced-body {
        grid-template-columns: 1fr;
    }

    .apisecurity-operator-frame .apisecurity-graphql-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .apisecurity-operator-frame .apisecurity-function-context,
    .apisecurity-operator-frame .apisecurity-function-editor-section,
    .apisecurity-operator-frame .apisecurity-function-claim summary,
    .apisecurity-operator-frame .apisecurity-object-context,
    .apisecurity-operator-frame .apisecurity-protected-defaults,
    .apisecurity-operator-frame .apisecurity-authorization-scope summary {
        grid-template-columns: 1fr;
    }

    .apisecurity-operator-frame .apisecurity-function-rule-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .apisecurity-operator-frame .apisecurity-function-rule-toggle {
        grid-template-columns: 26px minmax(0, 1fr) auto 18px;
    }

    .apisecurity-operator-frame .apisecurity-function-rule-methods,
    .apisecurity-operator-frame .apisecurity-function-rule-roles,
    .apisecurity-operator-frame .apisecurity-object-owner-key,
    .apisecurity-operator-frame .apisecurity-mass-field-summary {
        display: none;
    }

    .apisecurity-operator-frame .apisecurity-function-rule-summary > .operator-btn {
        justify-self: start;
    }

    .apisecurity-operator-frame .apisecurity-auth-value-add {
        grid-template-columns: 1fr;
    }

    .apisecurity-operator-frame .apisecurity-policy-table-wrap {
        overflow: visible;
    }

    .apisecurity-operator-frame .apisecurity-policy-table,
    .apisecurity-operator-frame .apisecurity-policy-table thead,
    .apisecurity-operator-frame .apisecurity-policy-table tbody,
    .apisecurity-operator-frame .apisecurity-policy-table tr,
    .apisecurity-operator-frame .apisecurity-policy-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .apisecurity-operator-frame .apisecurity-policy-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .apisecurity-operator-frame .apisecurity-policy-table tbody {
        display: grid;
        gap: 12px;
    }

    .apisecurity-operator-frame .apisecurity-policy-table tr {
        display: grid;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--operator-line, #d9dde3);
        border-radius: 6px;
        background: var(--operator-surface, #ffffff);
    }

    .apisecurity-operator-frame .apisecurity-policy-table td {
        padding: 0;
        border: 0;
    }

    .apisecurity-operator-frame .apisecurity-policy-table td:nth-child(n + 2)::before {
        display: block;
        margin: 0 0 4px;
        color: var(--text-dim);
        font-size: 10px;
        font-weight: 760;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .apisecurity-operator-frame .apisecurity-policy-table td:nth-child(2)::before {
        content: "Enabled";
    }

    .apisecurity-operator-frame .apisecurity-policy-table td:nth-child(3)::before {
        content: "Mode";
    }

    .apisecurity-operator-frame .apisecurity-policy-table td:nth-child(4)::before {
        content: "Profile";
    }

    .apisecurity-operator-frame .apisecurity-policy-table td:nth-child(5)::before {
        content: "Protected surface";
    }

    .apisecurity-operator-frame .apisecurity-policy-table td:nth-child(6)::before {
        content: "Actions";
    }

    .apisecurity-operator-frame .apisecurity-inventory-table .config-enterprise-table,
    .apisecurity-operator-frame .apisecurity-inventory-table .config-enterprise-table thead,
    .apisecurity-operator-frame .apisecurity-inventory-table .config-enterprise-table tbody,
    .apisecurity-operator-frame .apisecurity-inventory-table .config-enterprise-table tr,
    .apisecurity-operator-frame .apisecurity-inventory-table .config-enterprise-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .apisecurity-operator-frame .apisecurity-inventory-table .config-enterprise-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .apisecurity-operator-frame .apisecurity-inventory-table .config-enterprise-table tbody {
        display: grid;
        gap: 12px;
    }

    .apisecurity-operator-frame .apisecurity-inventory-table .config-enterprise-table tr {
        display: grid;
        gap: 8px;
        padding: 12px;
        border: 1px solid var(--operator-line, #d9dde3);
        border-radius: 6px;
        background: var(--operator-surface, #ffffff);
    }

    .apisecurity-operator-frame .apisecurity-inventory-table .config-enterprise-table td {
        padding: 0;
        border: 0;
    }

    .apisecurity-operator-frame .apisecurity-policy-name-cell {
        min-width: 0;
    }

    .apisecurity-operator-frame .apisecurity-policy-segment,
    .apisecurity-operator-frame .apisecurity-inline-segmented {
        display: flex;
        width: 100%;
        white-space: normal;
    }

    .apisecurity-operator-frame .apisecurity-policy-catalog-row .operator-control-actions {
        justify-content: flex-start;
    }

    .apisecurity-operator-frame .apisecurity-settings-category-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin-right: 0;
        overflow: visible;
        padding-bottom: 0;
    }

    .apisecurity-operator-frame .apisecurity-settings-category-card {
        min-height: 38px;
    }

    .apisecurity-operator-frame .apisecurity-policy-row-grid {
        grid-template-columns: 1fr;
    }

    .apisecurity-operator-frame .apisecurity-policy-segment button,
    .apisecurity-operator-frame .apisecurity-inline-segmented button {
        flex: 1 1 auto;
        min-width: max-content;
    }

    .apisecurity-operator-frame .apisecurity-field-grid,
    .apisecurity-operator-frame .apisecurity-field-grid-wide,
    .apisecurity-operator-frame .apisecurity-field-grid-three {
        grid-template-columns: 1fr;
    }

    .apisecurity-operator-frame .apisecurity-structured-row,
    .apisecurity-operator-frame .apisecurity-structured-add,
    .apisecurity-operator-frame .apisecurity-structured-add:has(select) {
        grid-template-columns: 1fr;
    }

    .apisecurity-operator-frame .apisecurity-structured-row .btn,
    .apisecurity-operator-frame .apisecurity-structured-add .btn {
        justify-self: stretch;
    }

    .apisecurity-operator-frame .apisecurity-inventory-filter-popover {
        position: static;
        width: 100%;
        grid-template-columns: 1fr;
        margin-top: 8px;
        box-shadow: none;
    }

    .apisecurity-operator-frame .apisecurity-inventory-toolbar-main,
    .apisecurity-operator-frame .apisecurity-table-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .apisecurity-operator-frame .apisecurity-inventory-console-head,
    .apisecurity-operator-frame .apisecurity-inventory-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .apisecurity-operator-frame .apisecurity-inventory-head-actions,
    .apisecurity-operator-frame .apisecurity-inventory-tools {
        width: 100%;
    }

    .apisecurity-operator-frame .apisecurity-inventory-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .apisecurity-operator-frame .apisecurity-inventory-search {
        width: 100%;
        margin-left: 0;
    }

    .apisecurity-operator-frame .apisecurity-inventory-view-summary {
        display: none;
    }

    .apisecurity-operator-frame .apisecurity-table-actions .btn,
    .apisecurity-operator-frame .apisecurity-endpoint-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

.identity-operator-frame .identity-overview-stack {
    display: grid;
    gap: 0;
}

.identity-operator-frame .identity-overview-stack .operator-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.identity-operator-frame .identity-module-list .operator-control-row {
    cursor: pointer;
}

.identity-operator-frame .identity-module-row .operator-control-actions {
    gap: 10px;
}

.identity-operator-frame .identity-module-row .operator-control-actions svg {
    color: var(--text-muted);
    transition: transform 0.16s ease, color 0.16s ease;
}

.identity-operator-frame .identity-module-row:hover .operator-control-actions svg {
    color: var(--operator-link, var(--primary));
    transform: translateX(2px);
}

.identity-operator-frame .identity-config-stack {
    display: grid;
    gap: 0;
    padding-bottom: calc(var(--operator-actionbar-h, 64px) + 18px);
}

.identity-operator-frame .identity-config-stack .operator-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.identity-operator-frame .identity-operator-search-row {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: transparent;
}

.identity-operator-frame .identity-operator-search-row .section-search-wrap {
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.identity-operator-frame .identity-api-key-list .section-entity-card,
.identity-operator-frame .identity-jwt-issuer-list .section-issuer-card,
.identity-operator-frame .identity-oidc-provider-grid .section-provider-card,
.identity-operator-frame .identity-role-grid .section-card,
.identity-operator-frame .identity-policy-list .section-policy-card,
.identity-operator-frame .identity-session-list .section-session-item,
.identity-operator-frame .identity-audit-log-list .section-audit-entry {
    border-color: var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    box-shadow: none;
}

.identity-operator-frame .identity-api-key-list .section-entity-card:hover,
.identity-operator-frame .identity-jwt-issuer-list .section-issuer-card:hover,
.identity-operator-frame .identity-oidc-provider-grid .section-provider-card:hover,
.identity-operator-frame .identity-role-grid .section-card:hover,
.identity-operator-frame .identity-policy-list .section-policy-card:hover,
.identity-operator-frame .identity-session-list .section-session-item:hover,
.identity-operator-frame .identity-audit-log-list .section-audit-entry:hover {
    transform: none;
    border-color: var(--operator-link, var(--primary));
    box-shadow: none;
}

.identity-operator-frame .identity-oidc-provider-grid,
.identity-operator-frame .identity-role-grid {
    gap: 12px;
}

.identity-operator-frame .identity-policy-list {
    gap: 12px;
}

.identity-operator-frame .section-session-config-grid .section-input {
    min-height: 38px;
    border-color: var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-weight: 650;
}

.identity-operator-frame .section-session-security-grid .section-policy-toggle {
    margin: 0;
    border-color: var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.identity-operator-frame .identity-audit-filter-row {
    align-items: stretch;
}

.identity-operator-frame .identity-audit-filter-row .section-input,
.identity-operator-frame .identity-audit-filter-row .section-audit-select,
.identity-operator-frame .identity-audit-retention-grid .section-input,
.identity-operator-frame .identity-audit-retention-grid .section-audit-select,
.identity-operator-frame .identity-audit-retention-grid .section-audit-storage {
    min-height: 38px;
    border-color: var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
}

.identity-operator-frame .identity-audit-filter-row .section-audit-count {
    align-self: center;
}

[data-theme="dark"] .operator-frame,
[data-theme="dark"] .operator-metric-strip,
[data-theme="dark"] .operator-control-list,
[data-theme="dark"] .operator-control-row,
[data-theme="dark"] .operator-control-panel,
[data-theme="dark"] .operator-frame .btn-outline,
[data-theme="dark"] .httpsec-operator-frame .httpsec-simple-row,
[data-theme="dark"] .httpsec-operator-frame .httpsec-advanced-details,
[data-theme="dark"] .httpsec-operator-frame .httpsec-file-types-panel,
[data-theme="dark"] .httpsec-operator-frame .bg-depth,
[data-theme="dark"] .httpsec-operator-frame .tile,
[data-theme="dark"] .httpsec-operator-frame .httpsec-choice-button,
[data-theme="dark"] .httpsec-operator-frame .httpsec-check-tile,
[data-theme="dark"] .httpsec-operator-frame .httpsec-ext-panel {
    background: var(--operator-surface, #11141a);
}

[data-theme="dark"] .operator-frame .section-overview-hero,
[data-theme="dark"] .operator-frame .section-overview-card,
[data-theme="dark"] .operator-frame .card.section-config-card,
[data-theme="dark"] .operator-frame .card.card-feature,
[data-theme="dark"] .operator-frame .policy-card,
[data-theme="dark"] .operator-frame .section-feature-card,
[data-theme="dark"] .operator-frame .bot-overview-setting-card,
[data-theme="dark"] .operator-frame .section-panel,
[data-theme="dark"] .operator-frame .config-panel,
[data-theme="dark"] .operator-frame .edge-overview-summary,
[data-theme="dark"] .operator-frame .section-policy-toggle,
[data-theme="dark"] .operator-frame .feature-header,
[data-theme="dark"] .operator-frame .section-control-row,
[data-theme="dark"] .operator-frame .bot-overview-field,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-field-grid .bot-overview-field input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-field-grid .bot-overview-field select,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-field-grid .bot-overview-field textarea,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-rule-row,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-function-console,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-function-rule-editor,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-function-context input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-function-operation-grid input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-function-claim-grid input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-object-header-grid input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-object-rule-grid input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-mass-path-field input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-auth-value-add input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-auth-value-chip,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-auth-quick-option,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-rule-row .bot-overview-field input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-rule-row .bot-overview-field select,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-structured-editor,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-structured-row input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-structured-add input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-structured-add select,
[data-theme="dark"] .operator-frame .section-table-wrap,
[data-theme="dark"] .operator-frame .config-table-wrap,
[data-theme="dark"] .operator-frame .table-container,
[data-theme="dark"] .operator-frame .section-save-actions .btn-outline,
[data-theme="dark"] .operator-frame .section-save-actions .btn:first-child {
    background: var(--operator-surface, #11141a);
}

[data-theme="dark"] .apisecurity-operator-frame .apisecurity-function-console,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-function-rule-editor,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-auth-quick-option,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-auth-value-chip {
    border-color: #303846;
}

[data-theme="dark"] .apisecurity-operator-frame .apisecurity-function-context,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-object-context,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-protected-defaults,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-function-rule.is-expanded .apisecurity-function-rule-summary {
    background: #151a22;
}

[data-theme="dark"] .apisecurity-operator-frame .apisecurity-auth-quick-option.is-active {
    border-color: var(--brand-orange);
    background: rgba(var(--brand-orange-rgb), 0.12);
    color: var(--brand-orange);
}

[data-theme="dark"] .apisecurity-operator-frame .apisecurity-auth-quick-option:hover {
    border-color: #596579;
    background: #191e27;
}

[data-theme="dark"] .apisecurity-operator-frame .apisecurity-auth-quick-option.is-active:hover {
    border-color: var(--brand-orange);
    background: rgba(var(--brand-orange-rgb), 0.16);
}

[data-theme="dark"] .operator-control-panel-body,
[data-theme="dark"] .operator-sticky-actions,
[data-theme="dark"] .operator-frame .section-save-actions:not(.operator-sticky-actions .section-save-actions) {
    background: var(--bg-depth);
}

[data-theme="dark"] .apisecurity-operator-frame .apisecurity-policy-table tr,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-policy-segment,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-inline-segmented,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-settings-area-fact,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-settings-category-card,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-settings-category-card.is-active,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-settings-editor,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-settings-editor-head,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-settings-preview-card,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-template-card,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-policy-surface-panel,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-policy-confirm-modal,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-primary-policy-head,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-primary-fact,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-impact-preview,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-scope-chip,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-scope-picker,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-blocking-review,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-surface-choice,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-endpoint-detail,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-endpoint-fact,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-endpoint-policy,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-inventory-settings-panel,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-inventory-filter-popover,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-inventory-filter-chip,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-inventory-local-view,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-inventory-recent-filter {
    border-color: #303846;
    background: #11141a;
}

[data-theme="dark"] .apisecurity-operator-frame .apisecurity-policy-segment button.is-active,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-inline-segmented button.is-active,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-settings-category-card.is-active,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-template-card.is-active,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-surface-choice.is-active {
    border-color: color-mix(in srgb, var(--operator-link, var(--brand-orange)) 48%, #303846);
    background: #171c23;
    color: #f3f7fb;
    box-shadow: none;
}

[data-theme="dark"] .apisecurity-operator-frame .apisecurity-policy-segment button,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-inline-segmented button,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-settings-category-card {
    color: #b7c3d1;
}

[data-theme="dark"] .apisecurity-operator-frame .apisecurity-settings-category-count,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-settings-preview-facts span {
    border-color: #303846;
    color: #f3f7fb;
}

[data-theme="dark"] .apisecurity-operator-frame .apisecurity-policy-segment button:disabled,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-inline-segmented button:disabled {
    color: #6f7b8c;
    opacity: 1;
}

[data-theme="dark"] .apisecurity-operator-frame .apisecurity-settings-toolbar input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-profile-field select,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-inline-select,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-surface-choice select,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-scope-filter-grid input,
[data-theme="dark"] .apisecurity-operator-frame .apisecurity-scope-filter-grid select {
    border-color: #303846;
    background: #0f1319;
    color: #f3f7fb;
}

[data-theme="dark"] .proxy-operator-frame .proxy-form-field,
[data-theme="dark"] .proxy-operator-frame .proxy-toggle-field,
[data-theme="dark"] .proxy-operator-frame .legacy-admin-panel.is-subtle {
    border-color: #303846;
    background: #171c23;
}

[data-theme="dark"] .proxy-operator-frame .proxy-dynamic-fields,
[data-theme="dark"] .proxy-operator-frame .proxy-advanced-settings,
[data-theme="dark"] .proxy-operator-frame .proxy-advanced-settings > summary {
    background: var(--operator-surface, #11141a);
}

[data-theme="dark"] .proxy-operator-frame .settings-input {
    border-color: #303846;
    background: #10141a;
    color: #f3f7fb;
}

[data-theme="dark"] .proxy-operator-frame .settings-input:focus {
    border-color: var(--operator-link, var(--primary));
    box-shadow: 0 0 0 3px rgba(var(--brand-orange-rgb), 0.18);
}

[data-theme="dark"] .proxy-operator-frame .proxy-guide-content {
    background: #171c23;
}

[data-theme="dark"] .proxy-operator-frame .proxy-guide-step {
    border-color: #303846;
    background: #10141a;
    color: #d9e4f2;
}

[data-theme="dark"] .ssl-operator-frame .ssl-provider-row,
[data-theme="dark"] .ssl-operator-frame .ssl-form-field {
    border-color: #303846;
    background: #171c23;
}

[data-theme="dark"] .ssl-operator-frame .settings-input,
[data-theme="dark"] .ssl-operator-frame .tags-input-container,
[data-theme="dark"] .ssl-operator-frame .ssl-certificate-row {
    border-color: #303846;
    background: #10141a;
    color: #f3f7fb;
}

[data-theme="dark"] .ssl-operator-frame .settings-input:focus,
[data-theme="dark"] .ssl-operator-frame .tags-input-container:focus-within {
    border-color: var(--operator-link, var(--primary));
    box-shadow: 0 0 0 3px rgba(var(--brand-orange-rgb), 0.18);
}

[data-theme="dark"] .routing-operator-frame .routing-table th {
    border-color: #303846;
    background: #171c23;
}

[data-theme="dark"] .routing-operator-frame .routing-table td {
    border-color: #252c36;
}

[data-theme="dark"] .routing-operator-frame .routing-route-icon {
    border-color: #303846;
    background: rgba(var(--brand-orange-rgb), 0.08);
}

[data-theme="dark"] .routing-operator-frame .routing-path-chip {
    border-color: rgba(var(--brand-orange-rgb), 0.22);
    background: rgba(var(--brand-orange-rgb), 0.08);
}

[data-theme="dark"] .routing-editor-workspace,
[data-theme="dark"] .routing-editor-workspace .routing-editor-panel {
    background: #11151b;
}

[data-theme="dark"] .routing-editor-workspace .routing-editor-panel,
[data-theme="dark"] .routing-editor-workspace .routing-editor-panel-head {
    border-color: #303846 !important;
    background: #171c23 !important;
}

[data-theme="dark"] .routing-editor-workspace .settings-field input,
[data-theme="dark"] .routing-editor-workspace .settings-field select,
[data-theme="dark"] .routing-editor-workspace .settings-field textarea {
    border-color: #303846;
    background: #10141a;
    color: #f3f7fb;
}

[data-theme="dark"] .routing-editor-workspace .routing-editor-group + .routing-editor-group {
    border-color: #303846;
}

[data-theme="dark"] .httpsec-operator-frame .httpsec-endpoint-chip {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .flow-operator-frame .flow-module-status,
[data-theme="dark"] .apisecurity-operator-frame .flow-module-status,
[data-theme="dark"] .flow-operator-frame .operator-table-panel {
    box-shadow: none;
}

[data-theme="dark"] .flow-operator-frame .flow-module-status .operator-control-icon,
[data-theme="dark"] .apisecurity-operator-frame .flow-module-status .operator-control-icon,
[data-theme="dark"] .flow-operator-frame .flow-target-icon,
[data-theme="dark"] .flow-operator-frame .flow-page-size-select,
[data-theme="dark"] .flow-operator-frame .flow-search-input {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 92%, #ffffff);
}

[data-theme="dark"] .flow-operator-frame .operator-table-toolbar,
[data-theme="dark"] .flow-operator-frame .flow-blacklist-table thead {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 92%, #ffffff);
}

[data-theme="dark"] .flow-operator-frame .flow-blacklist-table tbody tr:hover td,
[data-theme="dark"] .flow-operator-frame .section-blacklist-row.is-selected td {
    background: color-mix(in srgb, var(--operator-link, var(--control-accent)) 10%, var(--operator-surface, #11141a));
}

[data-theme="dark"] .flow-operator-frame .flow-type-pill {
    background: color-mix(in srgb, var(--operator-link, var(--control-accent)) 10%, var(--operator-surface, #11141a));
}

[data-theme="dark"] .flow-operator-frame .geo-map-panel {
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        #0f1319;
    background-size: 32px 32px;
}

[data-theme="dark"] .flow-operator-frame .geo-map-state {
    background: rgba(15, 19, 25, 0.8);
}

[data-theme="dark"] .flow-operator-frame .geo-map-panel .map-overlay,
[data-theme="dark"] .flow-operator-frame .geo-map-legend,
[data-theme="dark"] .flow-operator-frame .geo-map-panel .jvm-zoom-btn {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(17, 20, 26, 0.9);
}

[data-theme="dark"] .flow-operator-frame .geo-zones-empty-icon {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 90%, var(--primary));
}

[data-theme="dark"] .flow-operator-frame .operator-btn-danger.flow-row-action:hover {
    background: color-mix(in srgb, var(--danger) 12%, var(--operator-surface, #11141a));
}

[data-theme="dark"] .flow-operator-frame .flow-rate-summary,
[data-theme="dark"] .flow-operator-frame .flow-rate-card,
[data-theme="dark"] .flow-operator-frame .flow-rate-chip,
[data-theme="dark"] .flow-operator-frame .flow-rate-input-row,
[data-theme="dark"] .flow-operator-frame .flow-rate-select-full,
[data-theme="dark"] .flow-operator-frame .flow-rate-algo-option,
[data-theme="dark"] .flow-operator-frame .flow-rate-choice,
[data-theme="dark"] .flow-operator-frame .flow-rate-toggle-row,
[data-theme="dark"] .flow-operator-frame .flow-rate-table-wrap,
[data-theme="dark"] .flow-operator-frame .flow-reputation-console,
[data-theme="dark"] .flow-operator-frame .flow-reputation-action,
[data-theme="dark"] .flow-operator-frame .flow-reputation-provider,
[data-theme="dark"] .flow-operator-frame .flow-blacklist-console,
[data-theme="dark"] .flow-operator-frame .flow-blacklist-row-action:hover,
[data-theme="dark"] .flow-operator-frame .flow-ddos-console,
[data-theme="dark"] .flow-operator-frame .flow-ddos-action,
[data-theme="dark"] .flow-operator-frame .flow-ddos-mode,
[data-theme="dark"] .flow-operator-frame .flow-ddos-value,
[data-theme="dark"] .flow-operator-frame .flow-ddos-field > div,
[data-theme="dark"] .flow-operator-frame .flow-priority-console,
[data-theme="dark"] .flow-operator-frame .geo-console-panel,
[data-theme="dark"] .flow-operator-frame .flow-geo-summary {
    background: var(--operator-surface, #11141a);
}

[data-theme="dark"] .flow-operator-frame .flow-blacklist-toolbar,
[data-theme="dark"] .flow-operator-frame .flow-blacklist-empty-icon {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 92%, #ffffff);
}

[data-theme="dark"] .flow-operator-frame .flow-blacklist-selection {
    background: color-mix(in srgb, var(--operator-link, var(--control-accent)) 8%, var(--operator-surface, #11141a));
}

[data-theme="dark"] .flow-operator-frame .flow-priority-bypasses > span,
[data-theme="dark"] .flow-operator-frame .flow-priority-source-icon {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 92%, #ffffff);
}

[data-theme="dark"] .flow-operator-frame .flow-priority-policy-note {
    background: color-mix(in srgb, var(--operator-link, var(--control-accent)) 7%, var(--operator-surface, #11141a));
}

[data-theme="dark"] .flow-operator-frame .flow-rate-card-head,
[data-theme="dark"] .flow-operator-frame .flow-rate-table th {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 92%, #ffffff);
}

[data-theme="dark"] .flow-operator-frame .flow-rate-algo-option:hover,
[data-theme="dark"] .flow-operator-frame .flow-rate-choice:hover,
[data-theme="dark"] .flow-operator-frame .flow-rate-toggle-row:hover {
    background: color-mix(in srgb, var(--operator-link, var(--control-accent)) 7%, var(--operator-surface, #11141a));
}

[data-theme="dark"] .flow-operator-frame .flow-rate-console,
[data-theme="dark"] .flow-operator-frame .flow-rate-section-head,
[data-theme="dark"] .flow-operator-frame .flow-rate-table th {
    background: var(--operator-surface, #11141a);
}

[data-theme="dark"] .flow-operator-frame .flow-rate-algo-option.is-active,
[data-theme="dark"] .flow-operator-frame .flow-rate-choice.is-active {
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 10%, var(--operator-surface, #11141a));
}

@media (max-width: 1100px) {
    .operator-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operator-metric-item:nth-child(2n) {
        border-right: 0;
    }

    .operator-metric-item:nth-child(n + 3) {
        border-top: 1px solid var(--operator-line, #d9dde3);
    }

    .httpsec-operator-frame .httpsec-securitytxt-body {
        grid-template-columns: 1fr;
    }

    .flow-operator-frame .flow-rate-summary,
    .flow-operator-frame .flow-rate-editor,
    .flow-operator-frame .flow-rate-policy-grid,
    .flow-operator-frame .flow-rate-behavior-grid,
    .flow-operator-frame .flow-rate-budget-stack,
    .flow-operator-frame .flow-rate-control-grid,
    .flow-operator-frame .flow-geo-layout,
    .flow-operator-frame .flow-reputation-policy-grid {
        grid-template-columns: 1fr;
    }

    .flow-operator-frame .flow-geo-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flow-operator-frame .flow-geo-kpi:nth-child(2) {
        border-right: 0;
    }

    .flow-operator-frame .flow-geo-kpi:nth-child(n + 3) {
        border-top: 1px solid var(--operator-line-soft, #eceff3);
    }

    .flow-operator-frame .flow-rate-summary-item {
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .flow-operator-frame .flow-rate-summary-item:last-child {
        border-bottom: 0;
    }

    .flow-operator-frame .flow-rate-control + .flow-rate-control {
        border-top: 1px solid var(--operator-line-soft, #eceff3);
        border-left: 0;
    }

    .flow-operator-frame .flow-rate-control-row + .flow-rate-control-row,
    .flow-operator-frame .flow-rate-measurement,
    .flow-operator-frame .flow-rate-toggle-list,
    .flow-operator-frame .flow-reputation-actions {
        border-top: 1px solid var(--operator-line-soft, #eceff3);
        border-left: 0;
    }

    .flow-operator-frame .flow-reputation-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flow-operator-frame .flow-ddos-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flow-operator-frame .flow-ddos-kpi:nth-child(2) {
        border-right: 0;
    }

    .flow-operator-frame .flow-ddos-kpi:nth-child(n + 3) {
        border-top: 1px solid var(--operator-line-soft, #eceff3);
    }

    .flow-operator-frame .flow-ddos-response-grid {
        display: block;
    }

    .flow-operator-frame .flow-ddos-actions {
        grid-template-columns: 1fr;
    }

    .flow-operator-frame .flow-priority-policy {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .flow-operator-frame .flow-priority-policy-note {
        grid-column: 1 / -1;
    }

    .flow-operator-frame .flow-ddos-field + .flow-ddos-field,
    .flow-operator-frame .flow-ddos-automation {
        border-top: 1px solid var(--operator-line-soft, #eceff3);
        border-left: 0;
    }

    .flow-operator-frame .flow-reputation-kpi:nth-child(2) {
        border-right: 0;
    }

    .flow-operator-frame .flow-reputation-kpi:nth-child(n + 3) {
        border-top: 1px solid var(--operator-line-soft, #eceff3);
    }

    .flow-operator-frame .flow-geo-layout > .flow-operator-side {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .flow-operator-frame .geo-zones-panel .operator-section {
        height: auto;
    }

    .flow-operator-frame .flow-operator-side .section-selection-list {
        max-height: 230px;
    }
}

@media (max-width: 760px) {
    .operator-frame-header {
        flex-direction: column;
        padding: 22px 18px 16px;
    }

    .httpsec-operator-frame .operator-frame-meta,
    .httpsec-operator-frame .operator-frame-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .operator-frame-title {
        font-size: 25px;
    }

    .operator-line-tabs {
        gap: 20px;
        padding: 0 18px;
    }

    .httpsec-operator-frame .operator-line-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 12px;
        min-height: 0;
        overflow: visible;
    }

    .httpsec-operator-frame .operator-line-tab {
        justify-content: flex-start;
        width: 100%;
        height: auto;
        min-height: 48px;
        padding: 7px 0;
        white-space: normal;
        line-height: 1.25;
        text-align: left;
    }

    .httpsec-operator-frame .operator-line-tab:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--primary) 42%, transparent);
        outline-offset: -3px;
    }

    .operator-frame-body {
        padding: 16px 18px calc(26px + var(--operator-actionbar-h, 64px));
    }

    .httpsec-operator-frame .httpsec-runtime-banner {
        display: grid;
        gap: 5px;
        align-items: start;
        border-radius: 6px;
    }

    .httpsec-operator-frame .httpsec-runtime-banner small {
        line-height: 1.45;
    }

    .httpsec-operator-frame .httpsec-securitytxt-input-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-securitytxt-input-row .operator-btn {
        width: 100%;
    }

    .operator-metric-strip {
        grid-template-columns: 1fr;
    }

    .operator-metric-item,
    .operator-metric-item:nth-child(2n) {
        border-right: 0;
    }

    .operator-metric-item + .operator-metric-item {
        border-top: 1px solid var(--operator-line, #d9dde3);
    }

    .operator-control-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .operator-control-actions {
        justify-content: flex-start;
    }

    .operator-choice-grid,
    .flow-operator-frame .flow-operator-layout,
    .flow-operator-frame .flow-operator-grid,
    .flow-operator-frame .flow-rate-layout,
    .flow-operator-frame .flow-rate-choice-grid,
    .operator-callout,
    .flow-operator-frame .flow-reputation-summary,
    .flow-operator-frame .flow-reputation-provider-grid,
    .flow-operator-frame .flow-ddos-summary,
    .flow-operator-frame .flow-ddos-threshold-grid,
    .flow-operator-frame .flow-ddos-default-tuning,
    .flow-operator-frame .flow-geo-summary {
        grid-template-columns: 1fr;
    }

    .flow-operator-frame .flow-geo-kpi,
    .flow-operator-frame .flow-geo-kpi:nth-child(2) {
        min-height: 92px;
        border-top: 1px solid var(--operator-line-soft, #eceff3);
        border-right: 0;
    }

    .flow-operator-frame .flow-geo-kpi:first-child {
        border-top: 0;
    }

    .flow-operator-frame .flow-ddos-kpi,
    .flow-operator-frame .flow-ddos-kpi:nth-child(2) {
        min-height: 92px;
        border-top: 1px solid var(--operator-line-soft, #eceff3);
        border-right: 0;
    }

    .flow-operator-frame .flow-ddos-kpi:first-child {
        border-top: 0;
    }

    .flow-operator-frame .flow-ddos-threshold + .flow-ddos-threshold {
        border-top: 1px solid var(--operator-line-soft, #eceff3);
        border-left: 0;
    }

    .flow-operator-frame .flow-reputation-kpi,
    .flow-operator-frame .flow-reputation-kpi:nth-child(2) {
        min-height: 94px;
        border-top: 1px solid var(--operator-line-soft, #eceff3);
        border-right: 0;
    }

    .flow-operator-frame .flow-reputation-kpi:first-child {
        border-top: 0;
    }

    .flow-operator-frame .flow-reputation-provider,
    .flow-operator-frame .flow-reputation-provider:nth-child(2n),
    .flow-operator-frame .flow-reputation-provider:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .flow-operator-frame .flow-reputation-provider:last-child {
        border-bottom: 0;
    }

    .flow-operator-frame .flow-reputation-section-head,
    .flow-operator-frame .flow-reputation-control-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-operator-frame .flow-blacklist-head,
    .flow-operator-frame .flow-blacklist-toolbar,
    .flow-operator-frame .flow-blacklist-selection {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-operator-frame .flow-blacklist-head-actions,
    .flow-operator-frame .flow-blacklist-tools {
        width: 100%;
    }

    .flow-operator-frame .flow-blacklist-search {
        flex: 1 1 auto;
    }

    .flow-operator-frame .flow-blacklist-search .flow-search-input {
        width: 100%;
    }

    .flow-operator-frame .flow-blacklist-selection > div {
        flex-wrap: wrap;
    }

    .flow-operator-frame .flow-blacklist-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-operator-frame .flow-ddos-section-head,
    .flow-operator-frame .flow-ddos-control-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-operator-frame .flow-ddos-mode-grid {
        grid-template-columns: 1fr;
    }

    .flow-operator-frame .flow-priority-policy {
        grid-template-columns: 1fr;
    }

    .flow-operator-frame .flow-priority-policy-icon {
        width: 38px;
        height: 38px;
    }

    .flow-operator-frame .flow-priority-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-operator-frame .flow-priority-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
        padding: 11px 14px;
    }

    .flow-operator-frame .flow-priority-type {
        justify-self: end;
    }

    .flow-operator-frame .flow-priority-state {
        grid-column: 1;
        padding-left: 37px;
    }

    .flow-operator-frame .flow-priority-remove {
        grid-column: 2;
        grid-row: 2;
    }

    .flow-operator-frame .flow-reputation-threshold {
        padding: 18px;
    }

    .flow-operator-frame .geo-map-panel {
        height: 390px;
        min-height: 390px;
    }

    .flow-operator-frame .geo-map-legend-help {
        display: none;
    }

    .flow-operator-frame .geo-fencing-state .operator-choice-grid {
        grid-template-columns: 1fr;
    }

    .flow-operator-frame .geo-console-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-operator-frame .geo-zones-head .geo-manage-btn {
        width: 100%;
    }

    .flow-operator-frame .flow-rate-card-head,
    .flow-operator-frame .flow-rate-overrides-card .flow-rate-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-operator-frame .flow-rate-input-row {
        grid-template-columns: 1fr;
    }

    .flow-operator-frame .flow-rate-select,
    .flow-operator-frame .flow-rate-divider,
    .flow-operator-frame .flow-rate-unit {
        border-top: 1px solid var(--operator-line-soft, #eceff3);
        border-left: 0;
    }

    .operator-toolbar,
    .operator-table-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .operator-sticky-actions {
        height: var(--operator-actionbar-h, 64px);
        margin: 0;
        padding: 0 18px;
    }

    .operator-frame .section-save-actions:not(.operator-sticky-actions .section-save-actions) {
        margin-right: -18px;
        margin-bottom: -26px;
        margin-left: -18px;
        padding: 12px 18px;
    }
}


/* RESTORED OPERATOR BTNS */
.operator-btn {
    min-width: 84px;
    min-height: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    box-shadow: none;
}

.operator-sticky-actions .btn svg,
.operator-sticky-actions .operator-btn svg {
    width: 15px;
    height: 15px;
}

.operator-sticky-actions .btn-outline,
.operator-sticky-actions .operator-btn-secondary {
    background: var(--operator-surface, #ffffff);
    border: 1px solid var(--operator-line, #d9dde3);
    color: var(--text-main);
}

.operator-sticky-actions .btn-outline:hover,
.operator-sticky-actions .operator-btn-secondary:hover {
    background: #f5f7fa;
    border-color: var(--operator-line, #d9dde3);
    color: var(--text-main);
}

.operator-frame .btn-primary,
.operator-sticky-actions .btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.operator-frame .btn-primary:hover,
.operator-sticky-actions .btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.operator-frame .btn-outline {
    background: var(--operator-surface, #ffffff);
    border-color: var(--operator-line, #d9dde3);
}

.operator-frame .config-status-pill {
    border-radius: 3px;
}

.operator-btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
    font-weight: 560;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.operator-btn:hover {
    background: #f5f7fa;
    border-color: var(--operator-line, #d9dde3);
}

.operator-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.operator-btn svg {
    width: 15px;
    height: 15px;
}

.operator-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.operator-btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.operator-btn-danger {
    border-color: var(--operator-line, #d9dde3);
    color: var(--text-main);
}

.operator-btn-danger:hover {
    background: #f5f7fa;
    border-color: var(--operator-line, #d9dde3);
}

.operator-btn-xs {
    min-height: 26px;
    padding: 0 8px;
    font-size: 12px;
}

/* Request Controls — operational console */
.httpsec-operator-frame .httpsec-request-console {
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-request-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--operator-line, #d9dde3);
}

.httpsec-operator-frame .httpsec-request-kpi {
    display: flex;
    min-height: 112px;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
    padding: 14px 16px;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-request-kpi:last-child {
    border-right: 0;
}

.httpsec-operator-frame .httpsec-request-kpi-label,
.httpsec-operator-frame .httpsec-request-console .flow-rate-eyebrow {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.httpsec-operator-frame .httpsec-request-kpi strong {
    color: var(--text-main);
    font-size: 22px;
    font-weight: 740;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.httpsec-operator-frame .httpsec-request-kpi strong small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 620;
    letter-spacing: 0;
}

.httpsec-operator-frame .httpsec-request-kpi-note {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.httpsec-operator-frame .httpsec-request-section + .httpsec-request-section {
    border-top: 1px solid var(--operator-line, #d9dde3);
}

.httpsec-operator-frame .httpsec-request-section-head {
    min-height: 70px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-request-section-head h3 {
    margin: 5px 0 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
    line-height: 1.25;
}

.httpsec-operator-frame .httpsec-request-section-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.httpsec-operator-frame .httpsec-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.httpsec-operator-frame .httpsec-request-workspace {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.httpsec-operator-frame .httpsec-request-workspace .httpsec-request-card {
    margin: 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    box-shadow: none;
}

.httpsec-operator-frame .httpsec-request-workspace .httpsec-request-card:nth-child(2n) {
    border-left: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-request-workspace .httpsec-request-card:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.httpsec-operator-frame .httpsec-request-grid .httpsec-request-card {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.httpsec-operator-frame .httpsec-request-grid .httpsec-request-card:nth-child(2) {
    border-left: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-request-card .httpsec-control-head {
    min-height: 62px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-request-card .operator-control-icon {
    width: 30px;
    height: 30px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, #f3f4f6);
    color: var(--text-dim);
}

.httpsec-operator-frame .httpsec-request-card.is-active .operator-control-icon {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 30%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    color: var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-request-card .operator-control-title {
    font-size: 12px;
    font-weight: 710;
}

.httpsec-operator-frame .httpsec-request-card .operator-control-desc {
    font-size: 10px;
}

.httpsec-operator-frame .httpsec-request-card .httpsec-request-body {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 182px;
    padding: 14px;
    border-top: 0;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-request-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
    align-items: center;
    gap: 14px;
}

.httpsec-operator-frame .httpsec-request-field-row > div:first-child {
    display: grid;
    gap: 3px;
}

.httpsec-operator-frame .httpsec-request-field-row label,
.httpsec-operator-frame .httpsec-request-subhead strong {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
}

.httpsec-operator-frame .httpsec-request-field-row > div:first-child > span,
.httpsec-operator-frame .httpsec-request-subhead span {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.35;
}

.httpsec-operator-frame .httpsec-unit-input {
    width: 144px;
    justify-self: end;
    border-color: var(--operator-line, #d9dde3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-unit-input span {
    border-left: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 650;
}

.httpsec-operator-frame .httpsec-request-presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.httpsec-operator-frame .httpsec-request-preset {
    min-height: 31px;
    padding: 0 7px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-secondary);
    font: inherit;
    font-size: 9px;
    font-weight: 650;
    cursor: pointer;
}

.httpsec-operator-frame .httpsec-request-preset:hover {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-request-preset.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 6%, var(--operator-surface, #ffffff));
    color: var(--text-main);
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-ext-panel {
    padding: 0;
    border: 0;
    background: transparent;
}

.httpsec-operator-frame .httpsec-request-subhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.httpsec-operator-frame .httpsec-request-subhead > div {
    display: grid;
    gap: 3px;
}

.httpsec-operator-frame .httpsec-request-subhead small {
    color: var(--text-dim);
    font-size: 9px;
    white-space: nowrap;
}

.httpsec-operator-frame .httpsec-extension-grid {
    gap: 6px;
    min-height: 38px;
}

.httpsec-operator-frame .httpsec-extension-chip {
    min-height: 28px;
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 9px;
}

.httpsec-operator-frame .httpsec-request-field-row .section-inline-form {
    width: min(100%, 250px);
    justify-self: end;
}

.httpsec-operator-frame .httpsec-request-field-row .section-input,
.httpsec-operator-frame .httpsec-simple-select {
    min-height: 34px;
    border-color: var(--operator-line, #d9dde3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    font-family: var(--font-main);
    font-size: 10px;
}

.httpsec-operator-frame .httpsec-simple-select {
    width: 190px;
    justify-self: end;
}

.httpsec-operator-frame .httpsec-method-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
}

.httpsec-operator-frame .httpsec-check-tile {
    min-height: 38px;
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 9px;
    font-weight: 680;
}

.httpsec-operator-frame .httpsec-check-tile.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 6%, var(--operator-surface, #ffffff));
    color: var(--text-main);
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-domain-table {
    overflow: hidden;
    border: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-domain-table table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-main);
}

.httpsec-operator-frame .httpsec-domain-table th {
    height: 32px;
    padding: 0 10px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 95%, #f3f4f6);
    color: var(--text-dim);
    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.httpsec-operator-frame .httpsec-domain-table td {
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-main);
    font-size: 10px;
}

.httpsec-operator-frame .httpsec-domain-table tbody tr:last-child td {
    border-bottom: 0;
}

.httpsec-operator-frame .httpsec-request-remove {
    min-height: 25px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 9px;
    font-weight: 650;
    cursor: pointer;
}

.httpsec-operator-frame .httpsec-request-remove:hover {
    border-color: color-mix(in srgb, var(--danger, #dc2626) 30%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--danger, #dc2626) 5%, var(--operator-surface, #ffffff));
    color: var(--danger, #dc2626);
}

.httpsec-operator-frame .httpsec-request-limit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.httpsec-operator-frame .httpsec-request-limit {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.httpsec-operator-frame .httpsec-request-limit > span {
    color: var(--text-main);
    font-size: 10px;
    font-weight: 680;
}

.httpsec-operator-frame .httpsec-request-limit > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 34px;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-request-limit input {
    min-width: 0;
    width: 100%;
    padding: 0 9px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 11px;
    font-weight: 680;
    outline: 0;
}

.httpsec-operator-frame .httpsec-request-limit b {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-left: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 650;
}

.httpsec-operator-frame .httpsec-request-limit small {
    color: var(--text-muted);
    font-size: 8px;
    line-height: 1.35;
}

.httpsec-operator-frame .httpsec-request-inline-note {
    padding: 9px 10px;
    border-left: 3px solid var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 4%, var(--operator-surface, #ffffff));
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.4;
}

.httpsec-operator-frame .httpsec-module-status {
    margin-bottom: 0;
    border-bottom: 0;
}

.httpsec-operator-frame .httpsec-workspace-console {
    margin-top: 0;
}

.httpsec-operator-frame .httpsec-workspace-section {
    padding: 16px;
    border-top: 1px solid var(--operator-line, #d9dde3);
}

.httpsec-operator-frame .httpsec-workspace-section:first-child {
    border-top: 0;
}

.httpsec-operator-frame .httpsec-workspace-section .httpsec-response-group-head {
    margin-bottom: 14px;
}

.httpsec-operator-frame .httpsec-workspace-section-body {
    display: grid;
    gap: 12px;
}

.httpsec-operator-frame .httpsec-workspace-section .operator-control-panel {
    margin: 0;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    box-shadow: none;
}

.httpsec-operator-frame .httpsec-workspace-section .operator-control-panel .operator-control-panel-body {
    padding: 12px;
}

.httpsec-operator-frame .httpsec-workspace-section .bot-overview-field {
    display: grid;
    gap: 6px;
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 650;
}

.httpsec-operator-frame .httpsec-workspace-section .bot-overview-field > span {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.httpsec-operator-frame .httpsec-workspace-section .bot-overview-field input,
.httpsec-operator-frame .httpsec-workspace-section .bot-overview-field select,
.httpsec-operator-frame .httpsec-workspace-section .bot-overview-field textarea,
.httpsec-operator-frame .httpsec-workspace-section textarea.section-input {
    min-height: 38px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
}

.httpsec-operator-frame .httpsec-entitlement-section {
    padding: 0;
}

.httpsec-operator-frame .httpsec-entitlement-section .upgrade-banner,
.httpsec-operator-frame .httpsec-entitlement-section [class*="upgrade"] {
    margin: 0;
    border-radius: 0;
}

.httpsec-operator-frame .httpsec-payload-overview-stack .operator-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.httpsec-operator-frame .httpsec-payload-overview-stack {
    padding-bottom: calc(var(--operator-actionbar-h, 64px) + 18px);
}

.httpsec-operator-frame .httpsec-payload-control-list .operator-control-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.httpsec-operator-frame .httpsec-payload-ceiling-row .operator-control-content {
    padding-top: 2px;
}

.httpsec-operator-frame .httpsec-payload-limit-editor {
    display: grid;
    grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 0;
    overflow: hidden;
}

.httpsec-operator-frame .httpsec-payload-limit-status {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 112px;
    padding: 16px;
    border-right: 1px solid var(--operator-line-soft, var(--border-color));
    background: var(--operator-surface, var(--bg-secondary));
}

.httpsec-operator-frame .httpsec-payload-limit-status > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.httpsec-operator-frame .httpsec-payload-limit-status strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 720;
}

.httpsec-operator-frame .httpsec-payload-limit-status div span {
    color: var(--text-muted);
    font-size: 11px;
}

.httpsec-operator-frame .httpsec-payload-limit-status .section-switch {
    margin-left: auto;
}

.httpsec-operator-frame .httpsec-payload-limit-controls {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr);
    gap: 16px;
    align-items: end;
    padding: 16px;
}

.httpsec-operator-frame .httpsec-payload-limit-controls .bot-overview-field {
    display: grid;
    gap: 7px;
    margin: 0;
}

.httpsec-operator-frame .httpsec-payload-limit-controls .bot-overview-field > span,
.httpsec-operator-frame .httpsec-payload-limit-presets > span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.httpsec-operator-frame .httpsec-payload-limit-controls .httpsec-unit-input {
    width: 100%;
}

.httpsec-operator-frame .httpsec-payload-limit-presets {
    display: grid;
    gap: 7px;
}

.httpsec-operator-frame .httpsec-payload-limit-presets .httpsec-request-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.httpsec-operator-frame .httpsec-payload-expert-header {
    display: grid;
    gap: 12px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--operator-line, var(--border-color));
}

.httpsec-operator-frame .httpsec-payload-expert-back {
    justify-self: start;
}

.httpsec-operator-frame .httpsec-payload-expert-title {
    display: grid;
    gap: 4px;
}

.httpsec-operator-frame .httpsec-payload-expert-title > span {
    color: var(--operator-orange, var(--primary));
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.httpsec-operator-frame .httpsec-payload-expert-title h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 20px;
    line-height: 1.2;
}

.httpsec-operator-frame .httpsec-payload-expert-title p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.httpsec-operator-frame .httpsec-payload-expert-threshold {
    width: min(100%, 280px);
}

.httpsec-operator-frame .httpsec-payload-expert-threshold .bot-overview-field {
    display: grid;
    gap: 6px;
}

.httpsec-operator-frame .httpsec-payload-expert-threshold .bot-overview-field > span {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.httpsec-operator-frame .httpsec-payload-choice-list {
    width: 100%;
}

.httpsec-operator-frame .httpsec-payload-choice-row {
    grid-template-columns: minmax(220px, 0.8fr) minmax(420px, 1.2fr);
    gap: 20px;
    min-height: 70px;
}

.httpsec-operator-frame .httpsec-payload-choice-row .operator-control-actions {
    min-width: 0;
    justify-self: stretch;
}

.httpsec-operator-frame .httpsec-payload-choice-presets {
    width: 100%;
    gap: 6px;
}

.httpsec-operator-frame .httpsec-payload-mode-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.httpsec-operator-frame .httpsec-payload-profile-presets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.httpsec-operator-frame .httpsec-payload-choice-preset {
    min-height: 36px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 650;
}

.httpsec-operator-frame .httpsec-payload-choice-preset:focus-visible {
    outline: 2px solid var(--operator-link, var(--primary));
    outline-offset: 1px;
}

.httpsec-operator-frame .httpsec-payload-policy-grid,
.httpsec-operator-frame .httpsec-payload-guard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.httpsec-operator-frame .httpsec-payload-policy-grid .bot-overview-field,
.httpsec-operator-frame .httpsec-payload-guard-grid .bot-overview-field {
    display: grid;
    gap: 6px;
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 650;
}

.httpsec-operator-frame .httpsec-payload-policy-grid .bot-overview-field > span,
.httpsec-operator-frame .httpsec-payload-guard-grid .bot-overview-field > span {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.httpsec-operator-frame .httpsec-payload-policy-grid .bot-overview-field input,
.httpsec-operator-frame .httpsec-payload-policy-grid .bot-overview-field select,
.httpsec-operator-frame .httpsec-payload-guard-grid .bot-overview-field input,
.httpsec-operator-frame .httpsec-payload-guard-grid .bot-overview-field select {
    min-height: 38px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
}

.httpsec-operator-frame .httpsec-payload-guard-grid .operator-control-panel {
    margin: 0;
    overflow: hidden;
    border-color: var(--operator-line, #d9dde3);
    border-radius: 0;
    box-shadow: none;
}

.httpsec-operator-frame .httpsec-payload-guard-grid .operator-control-row {
    min-height: 52px;
    padding: 11px 14px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, #f3f4f6);
}

.httpsec-operator-frame .httpsec-payload-guard-grid .operator-control-title {
    font-size: 13px;
    font-weight: 740;
}

.httpsec-operator-frame .httpsec-payload-guard-grid .operator-control-actions {
    gap: 8px;
}

.httpsec-operator-frame .httpsec-payload-guard-grid .httpsec-guard-panel-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    padding: 14px;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-payload-guard-grid .bot-overview-field {
    min-width: 0;
}

.httpsec-operator-frame .httpsec-payload-guard-grid .bot-overview-field input[type="number"] {
    width: 100%;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 650;
}

.httpsec-operator-frame .httpsec-payload-guard-grid .httpsec-toggle-field {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, #f3f4f6);
}

.httpsec-operator-frame .httpsec-payload-guard-grid .httpsec-toggle-field > span:first-child {
    font-size: 11px;
}

.httpsec-operator-frame .httpsec-payload-guard-grid .httpsec-toggle-field .section-switch {
    justify-self: end;
}

.httpsec-operator-frame .httpsec-payload-upgrade .upgrade-banner,
.httpsec-operator-frame .httpsec-payload-upgrade [class*="upgrade"] {
    margin: 0;
}

.httpsec-operator-frame .httpsec-request-overview-stack .operator-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.httpsec-operator-frame .httpsec-request-overview-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    padding-bottom: calc(var(--operator-actionbar-h, 64px) + 18px);
}

.httpsec-operator-frame .httpsec-request-overview-stack > .operator-section {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 7px;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-request-overview-stack > .operator-section.httpsec-request-statistics,
.httpsec-operator-frame .httpsec-request-overview-stack > .operator-section:last-child:nth-child(6) {
    grid-column: 1 / -1;
}

.httpsec-operator-frame .httpsec-request-overview-stack > .operator-section > .operator-section-head {
    min-height: 0;
    padding: 11px 14px 8px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-request-overview-stack > .operator-section > .operator-section-head h3 {
    font-size: 13px;
    line-height: 1.25;
}

.httpsec-operator-frame .httpsec-request-overview-stack > .operator-section > .operator-section-head p {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
}

.httpsec-operator-frame .httpsec-request-overview-stack > .operator-section > .operator-section-body {
    padding: 0;
}

.httpsec-operator-frame .httpsec-request-overview-stack .httpsec-request-statistics > .operator-section-body {
    padding: 0;
}

.httpsec-operator-frame .httpsec-request-overview-row {
    align-items: start;
    padding: 10px 12px 12px;
}

.httpsec-operator-frame .httpsec-request-overview-row .operator-control-content {
    display: grid;
    gap: 8px;
    padding-top: 0;
}

.httpsec-operator-frame .httpsec-request-overview-row .httpsec-compact-editor {
    margin-top: 0;
}

.httpsec-operator-frame .httpsec-request-overview-row .httpsec-mode-card {
    min-height: 54px;
    gap: 2px;
    padding: 8px 9px 8px 31px;
    box-shadow: none;
}

.httpsec-operator-frame .httpsec-request-overview-row .httpsec-mode-card .httpsec-choice-check {
    top: 11px;
    left: 10px;
    width: 13px;
    height: 13px;
    font-size: 8px;
}

.httpsec-operator-frame .httpsec-request-overview-row .httpsec-mode-card strong {
    font-size: 12px;
    line-height: 1.2;
}

.httpsec-operator-frame .httpsec-request-overview-row .httpsec-mode-card small {
    font-size: 10px;
    line-height: 1.25;
}

.httpsec-operator-frame .httpsec-request-overview-row textarea.section-input {
    min-height: 104px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
}

.httpsec-operator-frame .httpsec-request-overview-row .httpsec-mode-cards {
    gap: 6px;
}

.httpsec-operator-frame .httpsec-request-overview-row .httpsec-compact-editor {
    gap: 8px;
    padding: 8px;
    border-radius: 5px;
}

.httpsec-operator-frame .httpsec-request-overview-row .httpsec-extension-grid {
    gap: 5px;
    min-height: 32px;
    padding: 6px;
}

.httpsec-operator-frame .httpsec-request-overview-row .section-inline-form {
    min-height: 32px;
}

.httpsec-operator-frame .httpsec-request-overview-row .httpsec-request-limit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.httpsec-operator-frame .httpsec-upload-overview-stack .operator-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.httpsec-operator-frame .httpsec-upload-overview-stack {
    padding-bottom: calc(var(--operator-actionbar-h, 64px) + 18px);
}

.httpsec-operator-frame .httpsec-upload-policy-row {
    align-items: start;
}

.httpsec-operator-frame .httpsec-upload-policy-row .operator-control-content {
    display: grid;
    gap: 12px;
    padding-top: 2px;
}

.httpsec-operator-frame .httpsec-upload-policy-row .section-inline-form {
    max-width: 360px;
}

.httpsec-operator-frame .httpsec-upload-field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 12px 14px;
}

.httpsec-operator-frame .httpsec-upload-field-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px;
}

.httpsec-operator-frame .httpsec-upload-field-grid .bot-overview-field {
    display: grid;
    gap: 6px;
    margin: 0;
    min-width: 0;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 650;
}

.httpsec-operator-frame .httpsec-upload-field-grid .bot-overview-field > span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.httpsec-operator-frame .httpsec-upload-field-grid .bot-overview-field input,
.httpsec-operator-frame .httpsec-upload-field-grid .bot-overview-field select,
.httpsec-operator-frame .httpsec-upload-field-grid .bot-overview-field textarea {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 650;
}

.httpsec-operator-frame .httpsec-upload-field-grid .bot-overview-field select {
    cursor: pointer;
}

.httpsec-operator-frame .httpsec-upload-field-grid .bot-overview-field textarea {
    min-height: 96px;
    padding-top: 9px;
    line-height: 1.45;
    resize: vertical;
}

.httpsec-operator-frame .httpsec-upload-field-grid .httpsec-toggle-field {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, #f3f4f6);
}

.httpsec-operator-frame .httpsec-upload-field-grid .httpsec-toggle-field > span:first-child {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 720;
    letter-spacing: 0;
    text-transform: none;
}

.httpsec-operator-frame .httpsec-upload-field-grid .httpsec-toggle-field .section-switch {
    justify-self: end;
}

.httpsec-operator-frame .httpsec-upload-upgrade .upgrade-banner,
.httpsec-operator-frame .httpsec-upload-upgrade [class*="upgrade"] {
    margin: 0;
}

.httpsec-operator-frame .httpsec-response-overview-stack .operator-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.httpsec-operator-frame .httpsec-response-area-row {
    min-height: 62px;
    cursor: pointer;
}

.httpsec-operator-frame .httpsec-response-area-row:hover {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-response-area-row:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--operator-link, var(--primary));
    outline-offset: -2px;
}

.httpsec-operator-frame .httpsec-response-page-header {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-bottom: 10px;
}

.httpsec-operator-frame .httpsec-response-overview-row {
    align-items: start;
}

.httpsec-operator-frame .httpsec-response-overview-row .operator-control-content {
    display: grid;
    gap: 12px;
    padding-top: 2px;
}

.httpsec-operator-frame .httpsec-response-overview-row .httpsec-compact-editor,
.httpsec-operator-frame .httpsec-response-overview-row .httpsec-advanced-details {
    margin-top: 0;
}

.httpsec-operator-frame .httpsec-response-overview-row .httpsec-mode-card {
    min-height: 78px;
}

.httpsec-operator-frame .httpsec-browser-posture {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr);
    gap: 20px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-browser-posture-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.httpsec-operator-frame .httpsec-browser-posture-label {
    color: var(--operator-orange, var(--brand-orange));
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.httpsec-operator-frame .httpsec-browser-posture-copy strong {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 720;
    line-height: 1.2;
}

.httpsec-operator-frame .httpsec-browser-posture-copy small,
.httpsec-operator-frame .httpsec-browser-policy-field small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.httpsec-operator-frame .httpsec-browser-profile-field,
.httpsec-operator-frame .httpsec-browser-policy-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.httpsec-operator-frame .httpsec-browser-profile-field > span,
.httpsec-operator-frame .httpsec-browser-policy-field > span {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.httpsec-operator-frame .httpsec-browser-profile-field select,
.httpsec-operator-frame .httpsec-browser-policy-field select,
.httpsec-operator-frame .httpsec-browser-inline-select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 0;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
}

.httpsec-operator-frame .httpsec-browser-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.httpsec-operator-frame .httpsec-browser-policy-field {
    min-height: 116px;
    align-content: start;
    padding: 13px 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-browser-policy-field select {
    margin-top: auto;
}

.httpsec-operator-frame .httpsec-browser-mime-row {
    grid-column: 1 / -1;
    min-height: 62px;
    padding: 12px 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-browser-mime-row .operator-control-actions {
    width: min(100%, 250px);
}

@media (max-width: 760px) {
    .httpsec-operator-frame .httpsec-browser-posture,
    .httpsec-operator-frame .httpsec-browser-policy-grid {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-browser-mime-row .operator-control-actions {
        width: 100%;
    }
}

.httpsec-operator-frame .httpsec-response-inline-list {
    border-color: var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-response-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.httpsec-operator-frame .httpsec-response-field-grid .bot-overview-field {
    display: grid;
    gap: 6px;
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 650;
}

.httpsec-operator-frame .httpsec-response-field-grid .bot-overview-field > span {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.httpsec-operator-frame .httpsec-response-field-grid .bot-overview-field input,
.httpsec-operator-frame .httpsec-response-field-grid .bot-overview-field select,
.httpsec-operator-frame .httpsec-response-field-grid .bot-overview-field textarea {
    min-height: 38px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
}

.httpsec-operator-frame .httpsec-response-field-grid .bot-overview-field textarea {
    min-height: 104px;
    resize: vertical;
}

.httpsec-operator-frame .httpsec-response-summary-box {
    display: grid;
    align-content: center;
    gap: 6px;
    min-height: 92px;
    padding: 13px 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.httpsec-operator-frame .httpsec-response-summary-box span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.httpsec-operator-frame .httpsec-response-summary-box strong {
    color: var(--text-main);
    font-size: 24px;
    font-weight: 760;
    line-height: 1;
}

.httpsec-operator-frame .httpsec-response-summary-box small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.httpsec-operator-frame .httpsec-privacy-workspace {
    display: grid;
    gap: 12px;
}

.httpsec-operator-frame .httpsec-privacy-surface {
    overflow: hidden;
    border: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-privacy-disclosure-surface {
    border-left: 2px solid var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-privacy-surface-head {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 13px 14px 12px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-privacy-surface-head .operator-control-icon {
    width: 28px;
    height: 28px;
    margin: 0;
    border: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 4%, var(--operator-surface, #ffffff));
    color: var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-privacy-surface-head > div {
    display: grid;
    gap: 2px;
}

.httpsec-operator-frame .httpsec-privacy-surface-head strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 740;
}

.httpsec-operator-frame .httpsec-privacy-surface-head span:not(.operator-control-icon) {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.httpsec-operator-frame .httpsec-privacy-disclosure-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr);
}

.httpsec-operator-frame .httpsec-privacy-policy-field,
.httpsec-operator-frame .httpsec-privacy-hidden-summary {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    min-height: 116px;
    padding: 13px 14px;
}

.httpsec-operator-frame .httpsec-privacy-policy-field {
    border-right: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-privacy-policy-field > span,
.httpsec-operator-frame .httpsec-privacy-hidden-summary > span,
.httpsec-operator-frame .httpsec-privacy-suggestions > span,
.httpsec-operator-frame .httpsec-privacy-add-row > label {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.httpsec-operator-frame .httpsec-privacy-policy-field small,
.httpsec-operator-frame .httpsec-privacy-hidden-summary small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.httpsec-operator-frame .httpsec-privacy-policy-field select {
    width: 100%;
    min-height: 38px;
    margin-top: auto;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
}

.httpsec-operator-frame .httpsec-privacy-hidden-summary {
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--operator-orange, var(--brand-orange)));
}

.httpsec-operator-frame .httpsec-privacy-hidden-summary strong {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 740;
    line-height: 1.2;
}

.httpsec-operator-frame .httpsec-privacy-header-editor {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.httpsec-operator-frame .httpsec-privacy-add-row {
    display: grid;
    gap: 6px;
}

.httpsec-operator-frame .httpsec-privacy-add-row .section-inline-form {
    align-items: stretch;
}

.httpsec-operator-frame .httpsec-privacy-add-row .section-input {
    min-width: 0;
}

.httpsec-operator-frame .httpsec-privacy-suggestions {
    display: grid;
    gap: 7px;
    padding-top: 2px;
}

.httpsec-operator-frame .httpsec-response-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 760px) {
    .httpsec-operator-frame .httpsec-privacy-disclosure-grid {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-privacy-policy-field {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .httpsec-operator-frame .httpsec-privacy-hidden-summary {
        min-height: 0;
    }

    .httpsec-operator-frame .httpsec-privacy-add-row .section-inline-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-privacy-add-row .btn {
        width: 100%;
        min-height: 42px;
    }
}

[data-theme="dark"] .httpsec-operator-frame .httpsec-request-console,
[data-theme="dark"] .httpsec-operator-frame .httpsec-request-card .httpsec-request-body,
[data-theme="dark"] .httpsec-operator-frame .httpsec-request-preset,
[data-theme="dark"] .httpsec-operator-frame .httpsec-unit-input,
[data-theme="dark"] .httpsec-operator-frame .httpsec-request-field-row .section-input,
[data-theme="dark"] .httpsec-operator-frame .httpsec-simple-select,
[data-theme="dark"] .httpsec-operator-frame .httpsec-request-limit > div,
[data-theme="dark"] .httpsec-operator-frame .httpsec-workspace-section .operator-control-panel,
[data-theme="dark"] .httpsec-operator-frame .httpsec-workspace-section .bot-overview-field input,
[data-theme="dark"] .httpsec-operator-frame .httpsec-workspace-section .bot-overview-field select,
[data-theme="dark"] .httpsec-operator-frame .httpsec-workspace-section .bot-overview-field textarea,
[data-theme="dark"] .httpsec-operator-frame .httpsec-workspace-section textarea.section-input,
[data-theme="dark"] .httpsec-operator-frame .httpsec-payload-policy-grid .bot-overview-field input,
[data-theme="dark"] .httpsec-operator-frame .httpsec-payload-policy-grid .bot-overview-field select,
[data-theme="dark"] .httpsec-operator-frame .httpsec-payload-guard-grid .bot-overview-field input,
[data-theme="dark"] .httpsec-operator-frame .httpsec-payload-guard-grid .bot-overview-field select,
[data-theme="dark"] .httpsec-operator-frame .httpsec-payload-guard-grid .operator-control-row,
[data-theme="dark"] .httpsec-operator-frame .httpsec-payload-guard-grid .httpsec-guard-panel-body,
[data-theme="dark"] .httpsec-operator-frame .httpsec-payload-guard-grid .httpsec-toggle-field,
[data-theme="dark"] .httpsec-operator-frame .httpsec-request-overview-row textarea.section-input,
[data-theme="dark"] .httpsec-operator-frame .httpsec-upload-field-grid .bot-overview-field input,
[data-theme="dark"] .httpsec-operator-frame .httpsec-upload-field-grid .bot-overview-field select,
[data-theme="dark"] .httpsec-operator-frame .httpsec-upload-field-grid .bot-overview-field textarea,
[data-theme="dark"] .httpsec-operator-frame .httpsec-upload-field-grid .httpsec-toggle-field,
[data-theme="dark"] .httpsec-operator-frame .httpsec-response-field-grid .bot-overview-field input,
[data-theme="dark"] .httpsec-operator-frame .httpsec-response-field-grid .bot-overview-field select,
[data-theme="dark"] .httpsec-operator-frame .httpsec-response-field-grid .bot-overview-field textarea,
[data-theme="dark"] .httpsec-operator-frame .httpsec-response-summary-box {
    background: var(--operator-surface, #11141a);
}

@media (max-width: 1100px) {
    .httpsec-operator-frame .httpsec-request-overview-stack {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-request-summary,
    .httpsec-operator-frame .httpsec-request-grid,
    .httpsec-operator-frame .httpsec-request-workspace,
    .httpsec-operator-frame .httpsec-payload-policy-grid,
    .httpsec-operator-frame .httpsec-payload-guard-grid,
    .httpsec-operator-frame .httpsec-upload-field-grid,
    .httpsec-operator-frame .httpsec-response-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .httpsec-operator-frame .httpsec-request-kpi:nth-child(2) {
        border-right: 0;
    }

    .httpsec-operator-frame .httpsec-request-kpi:nth-child(n + 3) {
        border-top: 1px solid var(--operator-line-soft, #eceff3);
    }
}

@media (max-width: 760px) {
    .httpsec-operator-frame .httpsec-request-overview-row .httpsec-request-limit-grid {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-request-summary,
    .httpsec-operator-frame .httpsec-request-grid,
    .httpsec-operator-frame .httpsec-request-workspace,
    .httpsec-operator-frame .httpsec-payload-policy-grid,
    .httpsec-operator-frame .httpsec-payload-guard-grid,
    .httpsec-operator-frame .httpsec-payload-guard-grid .operator-control-panel-body,
    .httpsec-operator-frame .httpsec-payload-guard-grid .httpsec-guard-panel-body,
    .httpsec-operator-frame .httpsec-upload-field-grid,
    .httpsec-operator-frame .httpsec-upload-field-grid-2,
    .httpsec-operator-frame .httpsec-response-field-grid {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-payload-control-list .operator-control-row,
    .httpsec-operator-frame .httpsec-upload-control-list .operator-control-row {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-payload-limit-editor,
    .httpsec-operator-frame .httpsec-payload-limit-controls {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-payload-limit-status {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
    }

    .httpsec-operator-frame .httpsec-request-kpi,
    .httpsec-operator-frame .httpsec-request-kpi:nth-child(2) {
        min-height: 90px;
        border-top: 1px solid var(--operator-line-soft, #eceff3);
        border-right: 0;
    }

    .httpsec-operator-frame .httpsec-request-kpi:first-child {
        border-top: 0;
    }

    .httpsec-operator-frame .httpsec-request-grid .httpsec-request-card:nth-child(2) {
        border-top: 1px solid var(--operator-line-soft, #eceff3);
        border-left: 0;
    }

    .httpsec-operator-frame .httpsec-request-workspace .httpsec-request-card,
    .httpsec-operator-frame .httpsec-request-workspace .httpsec-request-card:nth-child(2n),
    .httpsec-operator-frame .httpsec-request-workspace .httpsec-request-card:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
        border-left: 0;
    }

    .httpsec-operator-frame .httpsec-request-workspace .httpsec-request-card:last-child {
        border-bottom: 0;
    }

    .httpsec-operator-frame .httpsec-request-field-row {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-unit-input,
    .httpsec-operator-frame .httpsec-request-field-row .section-inline-form,
    .httpsec-operator-frame .httpsec-simple-select {
        width: 100%;
        justify-self: stretch;
    }

    .httpsec-operator-frame .httpsec-request-presets,
    .httpsec-operator-frame .httpsec-method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .httpsec-operator-frame .httpsec-request-limit-grid {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-mode-cards,
    .httpsec-operator-frame .httpsec-boundary-presets,
    .httpsec-operator-frame .httpsec-mode-cards-3,
    .httpsec-operator-frame .httpsec-mode-cards-4 {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-payload-choice-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .httpsec-operator-frame .httpsec-payload-profile-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .httpsec-operator-frame .httpsec-method-group-head {
        display: grid;
        gap: 4px;
    }

    .httpsec-operator-frame .httpsec-policy-card:nth-child(2n) {
        border-left: 0;
    }
}

/* Request Controls — master/detail editor */
.httpsec-operator-frame .httpsec-request-master-detail {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 520px;
}

.httpsec-operator-frame .httpsec-request-nav {
    border-right: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, #f3f4f6);
}

.httpsec-operator-frame .httpsec-request-nav-head {
    display: grid;
    gap: 5px;
    padding: 20px 18px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-request-nav-head strong {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 720;
}

.httpsec-operator-frame .httpsec-request-nav-head span {
    color: var(--text-muted);
    font-size: 12px;
}

.httpsec-operator-frame .httpsec-request-nav-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 68px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: transparent;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.httpsec-operator-frame .httpsec-request-nav-item:hover {
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-request-nav-item.is-selected {
    background: var(--operator-surface, #ffffff);
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-request-nav-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    color: var(--text-dim);
}

.httpsec-operator-frame .httpsec-request-nav-item.is-selected .httpsec-request-nav-icon {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 34%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 6%, var(--operator-surface, #ffffff));
    color: var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-request-nav-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.httpsec-operator-frame .httpsec-request-nav-copy strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 690;
}

.httpsec-operator-frame .httpsec-request-nav-copy small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.httpsec-operator-frame .httpsec-request-nav-state {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
}

.httpsec-operator-frame .httpsec-request-nav-state.is-on {
    color: var(--success, #16a34a);
}

.httpsec-operator-frame .httpsec-request-editor {
    min-width: 0;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-request-editor-head {
    display: flex;
    min-height: 104px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
}

.httpsec-operator-frame .httpsec-request-editor-title {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 14px;
}

.httpsec-operator-frame .httpsec-request-editor-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    color: var(--text-dim);
}

.httpsec-operator-frame .httpsec-request-editor.is-active .httpsec-request-editor-icon {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 34%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 6%, var(--operator-surface, #ffffff));
    color: var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-request-editor-title h2 {
    margin: 5px 0 0;
    color: var(--text-main);
    font-size: 21px;
    font-weight: 740;
    letter-spacing: -0.02em;
}

.httpsec-operator-frame .httpsec-request-editor-title p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.httpsec-operator-frame .httpsec-request-editor-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 680;
}

.httpsec-operator-frame .httpsec-request-editor-body {
    display: grid;
    align-content: start;
    gap: 22px;
    max-width: 920px;
    padding: 28px 30px 36px;
}

.httpsec-operator-frame .httpsec-request-editor-body .httpsec-request-field-row label,
.httpsec-operator-frame .httpsec-request-editor-body .httpsec-request-subhead strong,
.httpsec-operator-frame .httpsec-request-editor-body .httpsec-request-limit > span {
    font-size: 14px;
}

.httpsec-operator-frame .httpsec-request-editor-body .httpsec-request-field-row > div:first-child > span,
.httpsec-operator-frame .httpsec-request-editor-body .httpsec-request-subhead span,
.httpsec-operator-frame .httpsec-request-editor-body .httpsec-request-limit small {
    font-size: 12px;
}

.httpsec-operator-frame .httpsec-request-editor-body .httpsec-unit-input,
.httpsec-operator-frame .httpsec-request-editor-body .httpsec-request-limit > div,
.httpsec-operator-frame .httpsec-request-editor-body .section-input,
.httpsec-operator-frame .httpsec-request-editor-body .httpsec-simple-select {
    min-height: 42px;
}

.httpsec-operator-frame .httpsec-request-editor-body .httpsec-request-preset {
    min-height: 40px;
    font-size: 12px;
}

.httpsec-operator-frame .httpsec-request-editor-body .httpsec-check-tile {
    min-height: 48px;
    font-size: 12px;
}

.httpsec-operator-frame .httpsec-request-editor-body .httpsec-extension-chip {
    min-height: 34px;
    font-size: 11px;
}

.httpsec-operator-frame .httpsec-request-editor-body .httpsec-domain-table th {
    height: 38px;
    font-size: 10px;
}

.httpsec-operator-frame .httpsec-request-editor-body .httpsec-domain-table td {
    height: 48px;
    font-size: 12px;
}

.httpsec-operator-frame .httpsec-policy-intro {
    display: grid;
    gap: 6px;
    padding: 13px 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-left: 3px solid var(--operator-orange, var(--brand-orange));
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-policy-intro strong {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
    line-height: 1.35;
}

.httpsec-operator-frame .httpsec-policy-intro span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.httpsec-operator-frame .httpsec-mode-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.httpsec-operator-frame .httpsec-mode-card {
    position: relative;
    display: grid;
    min-height: 92px;
    gap: 6px;
    padding: 14px 14px 14px 44px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.httpsec-operator-frame .httpsec-mode-card:hover {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-mode-card.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 6%, var(--operator-surface, #ffffff));
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-mode-card .httpsec-choice-check {
    position: absolute;
    left: 14px;
    top: 16px;
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 999px;
    color: transparent;
}

.httpsec-operator-frame .httpsec-mode-card.is-active .httpsec-choice-check {
    border-color: var(--operator-orange, var(--brand-orange));
    background: var(--operator-orange, var(--brand-orange));
    color: #fff;
}

.httpsec-operator-frame .httpsec-mode-card strong {
    font-size: 14px;
    font-weight: 740;
}

.httpsec-operator-frame .httpsec-mode-card small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.httpsec-operator-frame .httpsec-method-group {
    display: grid;
    gap: 9px;
}

.httpsec-operator-frame .httpsec-method-group + .httpsec-method-group {
    padding-top: 4px;
}

.httpsec-operator-frame .httpsec-method-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.httpsec-operator-frame .httpsec-method-group-head strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 720;
}

.httpsec-operator-frame .httpsec-method-group-head span {
    color: var(--text-muted);
    font-size: 12px;
}

.httpsec-operator-frame .httpsec-boundary-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.httpsec-operator-frame .httpsec-boundary-presets .httpsec-request-preset {
    display: grid;
    height: auto;
    min-height: 64px;
    align-content: center;
    gap: 4px;
    padding: 10px 12px;
    text-align: left;
}

.httpsec-operator-frame .httpsec-boundary-presets .httpsec-request-preset strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 720;
}

.httpsec-operator-frame .httpsec-boundary-presets .httpsec-request-preset span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.httpsec-operator-frame .httpsec-advanced-request-body {
    display: grid;
    gap: 16px;
    margin-top: 14px;
}

.httpsec-operator-frame .httpsec-policy-preview {
    display: grid;
    gap: 7px;
    margin-top: 2px;
    padding: 14px 15px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.httpsec-operator-frame .httpsec-policy-preview p {
    margin: 0;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.5;
}

.httpsec-operator-frame .httpsec-simple-policy-console {
    overflow: hidden;
}

.httpsec-operator-frame .httpsec-policy-section {
    padding: 18px 18px 20px;
    border-top: 1px solid var(--operator-line, #d9dde3);
}

.httpsec-operator-frame .httpsec-policy-section .httpsec-response-group-head {
    margin-bottom: 14px;
}

.httpsec-operator-frame .httpsec-policy-section .httpsec-response-group-head h3 {
    margin: 4px 0 0;
    color: var(--text-main);
    font-size: 17px;
    font-weight: 740;
    letter-spacing: -0.01em;
}

.httpsec-operator-frame .httpsec-policy-section .httpsec-response-group-head span {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.httpsec-operator-frame .httpsec-mode-cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.httpsec-operator-frame .httpsec-simple-policy-console .httpsec-advanced-details {
    margin-top: 12px;
}

.httpsec-operator-frame .httpsec-simple-policy-console .httpsec-advanced-details summary {
    font-size: 13px;
}

.httpsec-operator-frame .httpsec-policy-card {
    display: grid;
    align-content: start;
    border-top: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-policy-card:nth-child(2n) {
    border-left: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-policy-card-wide {
    grid-column: 1 / -1;
}

.httpsec-operator-frame .httpsec-policy-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 12px;
}

.httpsec-operator-frame .httpsec-policy-card-head .operator-control-icon {
    width: 36px;
    height: 36px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    color: var(--text-dim);
}

.httpsec-operator-frame .httpsec-policy-card-head h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 16px;
    font-weight: 740;
    letter-spacing: -0.01em;
}

.httpsec-operator-frame .httpsec-policy-card-head p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.httpsec-operator-frame .httpsec-policy-card-body {
    display: grid;
    gap: 12px;
    padding: 0 18px 18px;
}

.httpsec-operator-frame .httpsec-mode-cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.httpsec-operator-frame .httpsec-compact-editor {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.httpsec-operator-frame .httpsec-request-policy-groups .operator-control-panel-body {
    display: grid;
    gap: 10px;
}

.httpsec-operator-frame .httpsec-request-policy-groups .httpsec-simple-row {
    min-height: 48px;
}

.httpsec-operator-frame .httpsec-request-policy-groups .section-segment-row {
    justify-content: flex-end;
}

.httpsec-operator-frame .httpsec-request-policy-groups .httpsec-compact-editor {
    margin-top: 0;
}

.httpsec-operator-frame .httpsec-request-policy-panel .httpsec-simple-stack {
    gap: 8px;
    margin-top: 0;
}

.httpsec-operator-frame .httpsec-request-policy-panel {
    overflow: hidden;
    border-color: var(--operator-line, #d9dde3);
}

.httpsec-operator-frame .httpsec-request-policy-panel .httpsec-control-head {
    min-height: 52px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 98%, var(--brand, var(--brand-orange)));
}

.httpsec-operator-frame .httpsec-request-policy-panel .operator-control-panel-body {
    padding: 12px;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-request-policy-row {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 52px;
    padding: 8px 10px;
    border-left: 2px solid transparent;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.httpsec-operator-frame .httpsec-request-policy-row:hover {
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--brand, var(--brand-orange)));
}

.httpsec-operator-frame .httpsec-request-policy-row.is-active {
    border-left-color: var(--brand, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, var(--brand, var(--brand-orange)));
}

.httpsec-operator-frame .httpsec-request-policy-row-copy {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.httpsec-operator-frame .httpsec-request-policy-row-copy .operator-control-icon {
    width: 26px;
    height: 26px;
    color: var(--text-muted);
    border-color: var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-request-policy-row.is-active .operator-control-icon {
    color: var(--brand, var(--brand-orange));
    border-color: color-mix(in srgb, var(--brand, var(--brand-orange)) 38%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--brand, var(--brand-orange)) 8%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-request-policy-row .section-segment-row {
    gap: 6px;
}

.httpsec-operator-frame .httpsec-request-policy-row .btn-sm {
    min-height: 30px;
    min-width: 68px;
}

.httpsec-operator-frame .httpsec-request-policy-row .section-policy-toggle-switch {
    margin-left: 6px;
}

[data-theme="dark"] .httpsec-operator-frame .httpsec-request-nav,
[data-theme="dark"] .httpsec-operator-frame .httpsec-request-editor,
[data-theme="dark"] .httpsec-operator-frame .httpsec-request-nav-item.is-selected,
[data-theme="dark"] .httpsec-operator-frame .httpsec-mode-card,
[data-theme="dark"] .httpsec-operator-frame .httpsec-policy-preview,
[data-theme="dark"] .httpsec-operator-frame .httpsec-simple-policy-console,
[data-theme="dark"] .httpsec-operator-frame .httpsec-policy-card,
[data-theme="dark"] .httpsec-operator-frame .httpsec-compact-editor {
    background: var(--operator-surface, #11141a);
}

@media (max-width: 980px) {
    .httpsec-operator-frame .httpsec-request-master-detail {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-request-nav {
        display: flex;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--operator-line, #d9dde3);
    }

    .httpsec-operator-frame .httpsec-request-nav-head {
        display: none;
    }

    .httpsec-operator-frame .httpsec-request-nav-item {
        flex: 0 0 190px;
        border-right: 1px solid var(--operator-line-soft, #eceff3);
        border-bottom: 0;
    }

    .httpsec-operator-frame .httpsec-request-nav-item.is-selected {
        box-shadow: inset 0 -3px 0 var(--operator-orange, var(--brand-orange));
    }
}

@media (max-width: 760px) {
    .apisecurity-operator-frame .apisecurity-field-grid {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-request-summary {
        display: none;
    }

    .httpsec-operator-frame .httpsec-request-editor-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .httpsec-operator-frame .httpsec-request-editor-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .httpsec-operator-frame .httpsec-request-editor-body {
        padding: 22px 18px 30px;
    }
}

/* =============================================================================
   System Health dashboard
   ============================================================================= */

.system-health-frame {
    min-height: auto;
}

.system-health-frame .operator-frame-header {
    align-items: center;
}

.system-health-body {
    gap: 20px;
    padding-bottom: 32px;
}

.system-health-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}



.system-health-metrics .operator-metric-value {
    font-size: 23px;
    text-transform: none;
}

.system-health-main-grid,
.system-health-secondary-grid {
    display: grid;
    gap: 18px;
}

.system-health-main-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
    align-items: stretch;
}

.system-health-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.system-health-section {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: 0;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    overflow: hidden;
}

.system-health-section + .system-health-section {
    padding-top: 0;
}

.system-health-section .operator-section-head {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.system-health-chart-panel {
    height: 282px;
    padding: 16px;
}

.system-health-chart-panel {
    position: relative;
    min-height: 282px;
}

.system-health-chart-empty {
    display: grid;
    height: 100%;
    place-items: center;
    color: var(--text-muted);
    font-size: 13px;
}

.system-health-timeline-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.system-health-timeline-grid {
    stroke: color-mix(in srgb, var(--operator-line-soft, #eceff3) 82%, transparent);
    stroke-width: 1;
}

.system-health-timeline-value,
.system-health-timeline-label {
    fill: var(--text-muted);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 650;
}

.system-health-timeline-area {
    fill: color-mix(in srgb, #5f86a2 17%, transparent);
}

.system-health-timeline-line {
    fill: none;
    stroke: #5f86a2;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.system-health-timeline-point {
    fill: var(--operator-surface, #ffffff);
    stroke: #5f86a2;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.system-health-timeline-hitbox {
    fill: transparent;
    pointer-events: all;
}

.system-health-timeline-tooltip {
    position: absolute;
    z-index: 2;
    display: grid;
    gap: 2px;
    min-width: 92px;
    padding: 7px 9px;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
    color: var(--text-main);
    font-size: 11px;
    line-height: 1.3;
    pointer-events: none;
}

.system-health-timeline-tooltip[hidden] {
    display: none !important;
}

.system-health-timeline-tooltip strong {
    font-size: 11px;
    font-weight: 720;
}

[data-theme="dark"] .system-health-timeline-tooltip {
    border-color: var(--operator-line, #303641);
    background: var(--operator-surface, #11141a);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .26);
}

.system-health-row-list {
    display: grid;
    gap: 0;
    padding: 6px 14px 14px;
}

.system-health-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.system-health-row:last-child {
    border-bottom: 0;
}

.system-health-row span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 620;
}

.system-health-row strong {
    color: var(--text-main);
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    font-weight: 720;
    text-align: right;
}

.system-health-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}

.system-health-module-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, #f3f4f6);
}

.system-health-module-card-action {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.system-health-module-card-action:hover {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 38%, var(--operator-line-soft, #eceff3));
}

.system-health-module-card-action:focus-visible {
    outline: 2px solid var(--operator-orange, var(--brand-orange));
    outline-offset: 2px;
}

.system-health-module-empty {
    display: grid;
    grid-column: 1 / -1;
    gap: 4px;
    padding: 18px;
    border: 1px dashed var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 98%, #f3f4f6);
}

.system-health-module-empty strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.system-health-module-empty span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.system-health-module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.system-health-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 30%, var(--operator-line-soft, #eceff3));
    border-radius: 999px;
    color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 7%, transparent);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.04em;
}

.system-health-module-name {
    display: block;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 690;
}

.system-health-module-count {
    display: block;
    margin-top: 8px;
    color: var(--operator-link, var(--primary));
    font-size: 22px;
    font-weight: 760;
    line-height: 1;
}

.system-health-module-sub {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

[data-theme="dark"] .operator-framed-section,
[data-theme="dark"] .system-health-section,
[data-theme="dark"] .system-health-module-card {
    background: var(--operator-surface, #11141a);
}

@media (max-width: 1180px) {
    .system-health-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .system-health-main-grid,
    .system-health-secondary-grid {
        grid-template-columns: 1fr;
    }

    .system-health-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .system-health-frame .operator-frame-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .system-health-metrics,
    .system-health-module-grid {
        grid-template-columns: 1fr;
    }

    .system-health-chart-panel {
        height: 230px;
    }
}

/* =============================================================================
   Shared dashboard components
   ============================================================================= */

.dashboard-shell {
    min-height: auto;
    --dashboard-panel-bg: var(--operator-surface, #ffffff);
    --dashboard-panel-border: var(--operator-line, #d9dde3);
    --dashboard-panel-soft: var(--operator-line-soft, #eceff3);
}

.dashboard-shell .operator-frame-header,
.dashboard-shell-header {
    align-items: center;
}

.dashboard-shell .operator-frame-actions,
.dashboard-shell-actions {
    align-items: center;
}

.dashboard-shell-actions .security-refresh-state,
.dashboard-shell .operator-frame-actions .security-refresh-state {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--dashboard-panel-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--dashboard-panel-bg) 96%, #f3f4f6);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 680;
}

.dashboard-shell-body {
    gap: 20px;
    padding-bottom: 32px;
}

.dashboard-explorer {
    display: grid;
    gap: 18px;
}

.dashboard-filter-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

.dashboard-filter-builder {
    position: relative;
}

.dashboard-filter-trigger {
    gap: 7px;
}

.dashboard-filter-popover {
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    z-index: 60;
    min-width: min(560px, calc(100vw - 32px));
}

.dashboard-period-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--dashboard-panel-soft);
    border-radius: 6px;
    background: var(--dashboard-panel-bg);
}

.dashboard-period-control span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dashboard-period-control .security-toolbar-time-select {
    min-height: 28px;
    padding: 0 24px 0 4px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 720;
}

.dashboard-active-filters {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--dashboard-panel-soft);
    border-radius: 6px;
    background: var(--dashboard-panel-bg);
}

.dashboard-panel {
    padding: 0;
    overflow: hidden;
    border-color: var(--dashboard-panel-border);
    border-radius: 6px;
}

.dashboard-panel-head {
    margin: 0;
    min-height: 58px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--dashboard-panel-soft);
    background: color-mix(in srgb, var(--dashboard-panel-bg) 94%, #f3f4f6);
}

.dashboard-panel-head h3 {
    letter-spacing: 0;
}

.dashboard-panel-body {
    padding: 14px;
}

.dashboard-filter-panel,
.dashboard-filter-actions {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.dashboard-filter-panel {
    justify-content: space-between;
}

.dashboard-filter-actions {
    align-items: center;
}

.dashboard-panel .security-active-filters {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--dashboard-panel-soft);
    border-radius: 6px;
    background: var(--dashboard-panel-bg);
}

.dashboard-metric-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    gap: 0;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    overflow: hidden;
}

.dashboard-metric-item {
    position: relative;
    min-height: 112px;
    overflow: hidden;
    padding: 14px 16px;
    border: 0 !important;
    border-right: 1px solid var(--operator-line, #d9dde3) !important;
    border-radius: 0;
    background: var(--operator-surface, #ffffff);
    box-shadow: none !important;
}

.dashboard-metric-item:last-child {
    border-right: 0 !important;
}

.dashboard-metric-item::before {
    display: none !important;
    content: none !important;
}

.dashboard-metric-item .operator-metric-value {
    font-size: 23px;
}

.dashboard-metric-item .operator-metric-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dashboard-chart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.85fr);
    gap: 18px;
}

.dashboard-side-stack {
    display: grid;
    gap: 18px;
}

.dashboard-chart-panel-body {
    padding: 14px;
}

.dashboard-chart-host {
    width: 100%;
    min-height: 238px;
}

.dashboard-chart-host-large {
    min-height: 360px;
}

.dashboard-breakdown-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--dashboard-panel-soft);
    border-radius: 6px;
    background: var(--dashboard-panel-bg);
}

.dashboard-breakdown-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--dashboard-panel-soft);
    background: color-mix(in srgb, var(--dashboard-panel-bg) 96%, #f3f4f6);
}

.dashboard-breakdown-panel-head strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 720;
    letter-spacing: 0;
}

.dashboard-breakdown-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--dashboard-panel-soft);
    border-radius: 5px;
    background: var(--dashboard-panel-bg);
    color: var(--text-muted);
    cursor: pointer;
}

.dashboard-breakdown-expand:hover:not(:disabled) {
    border-color: var(--operator-link, var(--primary));
    color: var(--operator-link, var(--primary));
}

.dashboard-breakdown-expand:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.dashboard-breakdown-list {
    padding: 10px 12px;
}

.dashboard-breakdown-list .security-aggregate-row {
    min-height: 38px;
}

.dashboard-events-panel-body {
    padding: 0;
}

.dashboard-events-table-container {
    border-radius: 0;
}

.dashboard-events-table th {
    height: 42px;
    font-size: 11px;
}

.dashboard-events-table td {
    height: 48px;
    font-size: 13px;
}

.is-dashboard-loading .dashboard-metric-value,
.is-dashboard-loading .dashboard-metric-sub > span {
    color: transparent !important;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.16), rgba(148, 163, 184, 0.32), rgba(148, 163, 184, 0.16));
    background-size: 220% 100%;
    animation: dashboard-loading-shimmer 1.15s linear infinite;
}

.is-dashboard-loading .dashboard-metric-value {
    max-width: 120px;
}

.is-dashboard-loading .dashboard-metric-sub > span {
    display: inline-block;
    min-width: 96px;
}

.is-dashboard-loading .dashboard-chart-host,
.is-dashboard-loading .dashboard-breakdown-list,
.is-dashboard-loading .dashboard-events-table-container {
    position: relative;
}

.is-dashboard-loading .dashboard-chart-host::before,
.is-dashboard-loading .dashboard-breakdown-list::before,
.is-dashboard-loading .dashboard-events-table-container::before {
    position: absolute;
    inset: 12px;
    z-index: 3;
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(148, 163, 184, 0.10), rgba(148, 163, 184, 0.24), rgba(148, 163, 184, 0.10)),
        repeating-linear-gradient(180deg, transparent 0 14px, rgba(148, 163, 184, 0.14) 14px 15px, transparent 15px 34px);
    background-size: 220% 100%, 100% 48px;
    animation: dashboard-loading-shimmer 1.15s linear infinite;
    content: "";
    pointer-events: none;
}

.is-dashboard-loading .dashboard-chart-host::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    transform: translate(-50%, -50%);
    padding: 6px 10px;
    border: 1px solid var(--dashboard-panel-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--dashboard-panel-bg) 92%, #f3f4f6);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    content: "Loading chart";
}

.is-dashboard-loading .dashboard-breakdown-list > *,
.is-dashboard-loading .dashboard-events-table tbody {
    opacity: 0.22;
}

@keyframes dashboard-loading-shimmer {
    from {
        background-position: 120% 0, 0 0;
    }
    to {
        background-position: -120% 0, 0 0;
    }
}

[data-theme="dark"] .dashboard-shell {
    --dashboard-panel-bg: var(--operator-surface, #11141a);
}

@media (max-width: 1240px) {
    .dashboard-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-metric-strip .dashboard-metric-item {
        border-right: 1px solid var(--operator-line, #d9dde3) !important;
        border-top: 0 !important;
    }

    .dashboard-metric-strip .dashboard-metric-item:nth-child(3n) {
        border-right: 0 !important;
    }

    .dashboard-metric-strip .dashboard-metric-item:nth-child(n + 4) {
        border-top: 1px solid var(--operator-line, #d9dde3) !important;
    }

    .dashboard-chart-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .dashboard-shell .operator-frame-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-metric-strip {
        grid-template-columns: 1fr;
    }

    .dashboard-metric-strip .dashboard-metric-item,
    .dashboard-metric-strip .dashboard-metric-item:nth-child(3n) {
        border-right: 0 !important;
    }

    .dashboard-metric-strip .dashboard-metric-item + .dashboard-metric-item {
        border-top: 1px solid var(--operator-line, #d9dde3) !important;
    }

    .dashboard-filter-panel,
    .dashboard-filter-actions,
    .dashboard-filter-toolbar {
        align-items: stretch;
        width: 100%;
    }

    .dashboard-filter-toolbar {
        justify-content: flex-start;
    }

    .dashboard-filter-actions .security-time-select-shell {
        width: 100%;
    }

    .dashboard-filter-popover {
        right: auto;
        left: 0;
    }

    .dashboard-period-control {
        justify-content: space-between;
        width: 100%;
    }
}

/* =============================================================================
   WAF Core dashboard
   ============================================================================= */

.firewall-core-frame {
    min-height: auto;
    --operator-orange: var(--operator-line-soft, #eceff3);
    --brand: var(--operator-line-soft, #eceff3);
    --waf-panel-bg: var(--operator-surface, #ffffff);
    --waf-panel-border: var(--operator-line, #d9dde3);
    --waf-panel-soft: var(--operator-line-soft, #eceff3);
    --dashboard-panel-bg: var(--operator-surface, #ffffff);
    --dashboard-panel-border: var(--operator-line, #d9dde3);
    --dashboard-panel-soft: var(--operator-line-soft, #eceff3);
}

body:has(.firewall-core-frame) {
    --operator-orange: var(--operator-line-soft, #eceff3);
    --brand: var(--operator-line-soft, #eceff3);
}

body:has(.firewall-core-frame) .operator-line-tab.is-active::after,
body:has(.firewall-core-frame) .config-section-nav-item.is-active::after,
body:has(.firewall-core-frame) .edge-breakdown-tab.is-active::after {
    display: none !important;
    background: transparent !important;
}

body:has(.firewall-core-frame) .edge-breakdown-tab.is-active,
body:has(.firewall-core-frame) .section-mode-option.is-active,
body:has(.firewall-core-frame) .edge-level-btn.is-active {
    box-shadow: none !important;
}

.firewall-core-frame .operator-frame-header {
    align-items: flex-start;
    gap: 24px;
}

.firewall-core-frame .operator-frame-actions {
    flex: 1 1 520px;
    align-items: center;
    justify-content: flex-end;
}

.firewall-core-frame .operator-frame-actions .security-refresh-state {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 999px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 680;
}

.firewall-core-frame .operator-sticky-actions,
.firewall-core-frame .section-save-actions {
    display: none !important;
}

body:has(.firewall-core-frame) .operator-sticky-actions,
body:has(.firewall-core-frame) .section-save-actions {
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.firewall-core-body {
    gap: 16px;
    padding-bottom: 24px;
}

.firewall-core-explorer {
    gap: 16px;
}

.firewall-core-filter-section,
.firewall-core-timeline-section,
.firewall-core-chart-section,
.firewall-core-score-section,
.firewall-core-rule-section,
.firewall-core-evidence-section,
.firewall-core-breakdown-section,
.firewall-core-events-section {
    padding: 0;
    overflow: hidden;
    border-color: var(--waf-panel-border);
    border-radius: 6px;
}

.firewall-core-filter-section .operator-section-head,
.firewall-core-timeline-section .operator-section-head,
.firewall-core-chart-section .operator-section-head,
.firewall-core-score-section .operator-section-head,
.firewall-core-rule-section .operator-section-head,
.firewall-core-evidence-section .operator-section-head,
.firewall-core-breakdown-section .operator-section-head,
.firewall-core-events-section .operator-section-head {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3) !important;
    background: color-mix(in srgb, var(--waf-panel-bg) 94%, #f3f4f6);
    box-shadow: none !important;
}

.firewall-core-filter-section .operator-section-head h3,
.firewall-core-timeline-section .operator-section-head h3,
.firewall-core-chart-section .operator-section-head h3,
.firewall-core-score-section .operator-section-head h3,
.firewall-core-rule-section .operator-section-head h3,
.firewall-core-evidence-section .operator-section-head h3,
.firewall-core-breakdown-section .operator-section-head h3,
.firewall-core-events-section .operator-section-head h3 {
    letter-spacing: 0;
}

.firewall-core-filter-section-body,
.firewall-core-rule-body,
.firewall-core-evidence-body,
.firewall-core-breakdown-body,
.firewall-core-events-body {
    padding: 12px 14px 14px;
}

.firewall-core-filter-panel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.firewall-core-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.firewall-core-filter-section .security-active-filters {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.firewall-core-metric-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
}

.firewall-core-metric-strip .operator-metric-label,
.firewall-core-metric-strip .operator-metric-sub {
    color: var(--text-muted) !important;
}

.firewall-core-metric-strip .operator-metric-value {
    color: var(--text-main) !important;
    font-size: 23px;
}

.firewall-core-metric-strip .operator-metric-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.firewall-core-metric-strip .security-events-metric-filter {
    margin-left: auto;
}

.firewall-core-intelligence-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.8fr);
    align-items: start;
    gap: 16px;
}

.firewall-core-timeline-body {
    min-height: 286px;
    padding: 12px 14px 14px;
    border-top: 0 !important;
    box-shadow: inset 0 1px 0 var(--operator-line-soft, #eceff3) !important;
}

.firewall-core-frame .dashboard-chart-panel-body,
.firewall-core-frame .dashboard-chart-host,
.firewall-core-frame .security-events-chart-fallback {
    border-top-color: var(--operator-line-soft, #eceff3) !important;
    box-shadow: none !important;
}

.firewall-echart-host {
    width: 100%;
    min-height: 184px;
}

.firewall-echart-host-large {
    min-height: 286px;
}

.firewall-core-side-stack {
    display: grid;
    gap: 16px;
}

.firewall-core-chart-section {
    min-height: 0;
}

.firewall-core-side-chart-body {
    padding: 12px 14px 14px;
}

.firewall-recommendation-head span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.firewall-evidence-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: 16px;
}

.firewall-evidence-stack {
    display: grid;
    gap: 16px;
}

.firewall-recommendation-list {
    min-height: 164px;
    overflow: hidden;
    border: 1px solid var(--waf-panel-soft);
    border-radius: 6px;
    background: var(--waf-panel-bg);
}

.firewall-recommendation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--waf-panel-soft);
    background: color-mix(in srgb, var(--waf-panel-bg) 96%, #f3f4f6);
}

.firewall-recommendation-head strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 760;
}

.firewall-recommendation-items {
    display: grid;
    gap: 8px;
    padding: 10px;
    background: color-mix(in srgb, var(--waf-panel-bg) 96%, #f3f4f6);
}

.firewall-recommendation-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--waf-panel-soft);
    border-radius: 6px;
    background: var(--waf-panel-bg);
}

.firewall-recommendation-item strong {
    display: block;
    color: var(--text-main);
    font-size: 13px;
}

.firewall-recommendation-item span {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
}

.firewall-recommendation-empty {
    min-height: 116px;
    padding: 16px;
}

.firewall-core-events-body .table-container {
    border-radius: 6px;
}

.firewall-core-breakdown-body .grid-3-wide,
.firewall-core-breakdown-body .grid-4 {
    margin-bottom: 0;
}

.firewall-breakdown-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--waf-panel-soft);
    border-radius: 6px;
    background: var(--waf-panel-bg);
}

.firewall-breakdown-panel .dashboard-empty-state {
    min-height: 104px;
    padding: 12px;
}

.firewall-breakdown-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--waf-panel-soft);
    background: color-mix(in srgb, var(--waf-panel-bg) 96%, #f3f4f6);
}

.firewall-breakdown-panel-head strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 720;
    letter-spacing: 0;
}

.firewall-breakdown-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--waf-panel-soft);
    border-radius: 5px;
    background: var(--waf-panel-bg);
    color: var(--text-muted);
    cursor: pointer;
}

.firewall-breakdown-expand:hover:not(:disabled) {
    border-color: var(--operator-link, var(--primary));
    color: var(--operator-link, var(--primary));
}

.firewall-breakdown-expand:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.firewall-aggregate-list {
    min-height: 126px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--waf-panel-bg) 96%, #f3f4f6);
}

.firewall-aggregate-list .security-aggregate-row {
    min-height: 38px;
}

.firewall-core-frame .security-events-chart-fallback {
    min-height: inherit;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 680;
}

.firewall-core-frame .security-health-banner {
    margin-bottom: 0 !important;
}

.firewall-core-frame .security-health-status {
    min-height: auto;
    padding: 11px 14px;
}

@media (max-width: 1240px) {
    .firewall-core-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .firewall-core-intelligence-layout,
    .firewall-evidence-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 720px) {
    .firewall-core-frame .operator-frame-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .firewall-core-metric-strip {
        grid-template-columns: 1fr;
    }

    .firewall-core-filter-panel,
    .firewall-core-filter-actions {
        align-items: stretch;
    }

    .firewall-core-filter-actions .security-time-select-shell {
        width: 100%;
    }
}

/* =============================================================================
   Bot Protection dashboard
   ============================================================================= */

.bot-protection-frame {
    min-height: auto;
    --operator-orange: var(--operator-line-soft, #eceff3);
    --brand: var(--operator-line-soft, #eceff3);
    --bot-panel-bg: var(--operator-surface, #ffffff);
    --bot-panel-border: var(--operator-line, #d9dde3);
    --bot-panel-soft: var(--operator-line-soft, #eceff3);
    --dashboard-panel-bg: var(--operator-surface, #ffffff);
    --dashboard-panel-border: var(--operator-line, #d9dde3);
    --dashboard-panel-soft: var(--operator-line-soft, #eceff3);
}

body:has(.bot-protection-frame) {
    --operator-orange: var(--operator-line-soft, #eceff3);
    --brand: var(--operator-line-soft, #eceff3);
}

body:has(.bot-protection-frame) .operator-line-tab.is-active::after,
body:has(.bot-protection-frame) .config-section-nav-item.is-active::after,
body:has(.bot-protection-frame) .edge-breakdown-tab.is-active::after {
    display: none !important;
    background: transparent !important;
}

body:has(.bot-protection-frame) .edge-breakdown-tab.is-active,
body:has(.bot-protection-frame) .section-mode-option.is-active,
body:has(.bot-protection-frame) .edge-level-btn.is-active {
    box-shadow: none !important;
}

.bot-protection-frame .operator-frame-header {
    align-items: flex-start;
    gap: 24px;
}

.bot-protection-frame .operator-frame-actions {
    flex: 1 1 520px;
    align-items: center;
    justify-content: flex-end;
}

.bot-protection-frame .operator-frame-actions .security-refresh-state {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 999px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 680;
}

.bot-protection-frame .operator-sticky-actions,
.bot-protection-frame .section-save-actions,
body:has(.bot-protection-frame) .operator-sticky-actions,
body:has(.bot-protection-frame) .section-save-actions {
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.bot-protection-body,
.bot-protection-root {
    gap: 16px;
}

.bot-protection-timeline-section,
.bot-protection-chart-section,
.bot-protection-score-section,
.bot-protection-challenge-section,
.bot-protection-rules-section,
.bot-protection-fingerprint-section,
.bot-protection-policy-section,
.bot-protection-model-section,
.bot-protection-events-section,
.bot-protection-nested-chart,
.bot-protection-watch-card {
    padding: 0;
    overflow: hidden;
    border-color: var(--bot-panel-border);
    border-radius: 6px;
}

.bot-protection-frame .operator-section-head {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3) !important;
    background: color-mix(in srgb, var(--bot-panel-bg) 94%, #f3f4f6);
    box-shadow: none !important;
}

.bot-protection-frame .operator-section-head h3 {
    letter-spacing: 0;
}

.bot-protection-metric-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
}

.bot-protection-metric-strip .operator-metric-label,
.bot-protection-metric-strip .operator-metric-sub {
    color: var(--text-muted) !important;
}

.bot-protection-metric-strip .operator-metric-value {
    color: var(--text-main) !important;
    font-size: 23px;
}

.bot-protection-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.8fr);
    align-items: start;
    gap: 16px;
}

.bot-protection-side-stack,
.bot-protection-watch-columns {
    display: grid;
    gap: 16px;
}

.bot-protection-timeline-body,
.bot-protection-side-chart-body,
.bot-protection-score-body,
.bot-protection-challenge-body,
.bot-protection-breakdown-body,
.bot-protection-policy-body,
.bot-protection-model-body {
    padding: 12px 14px 14px;
}

.bot-protection-frame .dashboard-chart-panel-body,
.bot-protection-frame .dashboard-chart-host,
.bot-protection-frame .security-events-chart-fallback {
    border-top-color: var(--operator-line-soft, #eceff3) !important;
    box-shadow: none !important;
}

.bot-echart-host {
    width: 100%;
    min-height: 184px;
}

.bot-protection-timeline-body .bot-echart-host {
    min-height: 286px;
}

.bot-protection-signal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.bot-rule-focus-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.2fr) repeat(3, minmax(0, 0.9fr));
    gap: 16px;
}

.bot-protection-watch-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
    gap: 16px;
}

.bot-protection-watch-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bot-protection-watch-columns h4 {
    margin: 0 0 8px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 760;
}

.bot-protection-model-body {
    display: grid;
    gap: 14px;
}

.bot-protection-breakdown-body .grid-4 {
    margin-bottom: 0;
}

.bot-protection-frame .dashboard-breakdown-panel {
    border-color: var(--bot-panel-soft);
    background: var(--bot-panel-bg);
}

.bot-protection-frame .dashboard-empty-state,
.bot-protection-frame .security-events-chart-fallback {
    min-height: 96px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 680;
}

.bot-score-meter-row {
    display: grid;
    gap: 7px;
    padding: 9px 0;
}

.bot-score-meter-row + .bot-score-meter-row {
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.bot-score-meter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 680;
}

.bot-score-meter {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--operator-line-soft, #eceff3) 75%, transparent);
}

.bot-score-meter > div {
    height: 100%;
    border-radius: inherit;
    background: var(--operator-link, var(--primary));
}

.bot-protection-events-body .table-container {
    border-radius: 6px;
}

@media (max-width: 1240px) {
    .bot-protection-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bot-protection-main-grid,
    .bot-protection-watch-grid {
        grid-template-columns: 1fr;
    }

    .bot-protection-signal-grid {
        grid-template-columns: 1fr;
    }

    .bot-rule-focus-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .bot-protection-frame .operator-frame-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bot-protection-metric-strip,
    .bot-protection-watch-columns {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   API Security Dashboard
   ============================================================================= */

.apisec-frame {
    min-height: auto;
    --operator-orange: var(--operator-line-soft, #eceff3);
    --brand: var(--operator-line-soft, #eceff3);
    --apisec-panel-bg: var(--operator-surface, #ffffff);
    --apisec-panel-border: var(--operator-line, #d9dde3);
    --apisec-panel-soft: var(--operator-line-soft, #eceff3);
    --dashboard-panel-bg: var(--operator-surface, #ffffff);
    --dashboard-panel-border: var(--operator-line, #d9dde3);
    --dashboard-panel-soft: var(--operator-line-soft, #eceff3);
}

body:has(.apisec-frame) {
    --operator-orange: var(--operator-line-soft, #eceff3);
    --brand: var(--operator-line-soft, #eceff3);
}

body:has(.apisec-frame) .operator-line-tab.is-active::after,
body:has(.apisec-frame) .config-section-nav-item.is-active::after,
body:has(.apisec-frame) .edge-breakdown-tab.is-active::after {
    display: none !important;
    background: transparent !important;
}

body:has(.apisec-frame) .edge-breakdown-tab.is-active,
body:has(.apisec-frame) .section-mode-option.is-active,
body:has(.apisec-frame) .edge-level-btn.is-active {
    box-shadow: none !important;
}

.apisec-frame .operator-frame-header {
    align-items: flex-start;
    gap: 24px;
}

.apisec-frame .operator-frame-actions {
    flex: 1 1 520px;
    align-items: center;
    justify-content: flex-end;
}

.apisec-frame .operator-frame-actions .security-refresh-state {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 999px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 680;
}

.apisec-frame .operator-sticky-actions,
.apisec-frame .section-save-actions {
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.apisec-body,
.apisec-root {
    gap: 16px;
}

.apisec-timeline-section,
.apisec-chart-section,
.apisec-function-section,
.apisec-endpoint-section,
.apisec-schema-section,
.apisec-policy-section,
.apisec-events-section {
    padding: 0;
    overflow: hidden;
    border-color: var(--apisec-panel-border);
    border-radius: 6px;
}

.apisec-frame .operator-section-head {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3) !important;
    background: color-mix(in srgb, var(--apisec-panel-bg) 94%, #f3f4f6);
    box-shadow: none !important;
}

.apisec-frame .operator-section-head h3 {
    letter-spacing: 0;
}

.apisec-metric-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
}

.apisec-metric-strip .operator-metric-label,
.apisec-metric-strip .operator-metric-sub {
    color: var(--text-muted) !important;
}

.apisec-metric-strip .operator-metric-value {
    color: var(--text-main) !important;
    font-size: 23px;
}

.apisec-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.8fr);
    align-items: start;
    gap: 16px;
}

.apisec-side-stack {
    display: grid;
    gap: 16px;
}

.apisec-timeline-body,
.apisec-side-chart-body,
.apisec-breakdown-body,
.apisec-policy-body {
    padding: 12px 14px 14px;
}

.apisec-frame .dashboard-chart-panel-body,
.apisec-frame .dashboard-chart-host,
.apisec-frame .security-events-chart-fallback {
    border-top-color: var(--operator-line-soft, #eceff3) !important;
    box-shadow: none !important;
}

.apisec-echart-host {
    width: 100%;
    min-height: 184px;
}

.apisec-timeline-body .apisec-echart-host {
    min-height: 286px;
}

.apisec-rule-grid,
.apisec-schema-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.apisec-endpoint-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 0.8fr);
    gap: 16px;
}

.apisec-status-card {
    display: grid;
    gap: 12px;
    min-height: 100%;
    padding: 14px;
    border: 1px solid var(--apisec-panel-soft);
    border-radius: 6px;
    background: var(--apisec-panel-bg);
}

.apisec-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.apisec-status-card h4,
.apisec-drawer-section h4 {
    margin: 0;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.apisec-status-card strong {
    color: var(--text-main);
    font-size: 22px;
    line-height: 1;
}

.apisec-status-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.apisec-frame .dashboard-breakdown-panel {
    border-color: var(--apisec-panel-soft);
    background: var(--apisec-panel-bg);
}

.apisec-frame .dashboard-empty-state,
.apisec-frame .security-events-chart-fallback {
    min-height: 96px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 680;
}

.apisec-events-body .table-container {
    border-radius: 6px;
}

.apisec-drawer-section {
    display: grid;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.apisec-drawer-section:first-child {
    padding-top: 0;
}

.apisec-drawer-section:last-child {
    border-bottom: 0;
}

.httpsec-body,
.httpsec-root {
    gap: 16px;
}

.httpsec-frame {
    min-height: auto;
    --operator-orange: var(--operator-line-soft, #eceff3);
    --brand: var(--operator-line-soft, #eceff3);
    --dashboard-panel-bg: var(--operator-surface, #ffffff);
    --dashboard-panel-border: var(--operator-line, #d9dde3);
    --dashboard-panel-soft: var(--operator-line-soft, #eceff3);
}

body:has(.httpsec-frame) {
    --operator-orange: var(--operator-line-soft, #eceff3);
    --brand: var(--operator-line-soft, #eceff3);
}

body:has(.httpsec-frame) .operator-line-tab.is-active::after,
body:has(.httpsec-frame) .config-section-nav-item.is-active::after,
body:has(.httpsec-frame) .edge-breakdown-tab.is-active::after {
    display: none !important;
    background: transparent !important;
}

body:has(.httpsec-frame) .edge-breakdown-tab.is-active,
body:has(.httpsec-frame) .section-mode-option.is-active,
body:has(.httpsec-frame) .edge-level-btn.is-active {
    box-shadow: none !important;
}

.httpsec-timeline-section,
.httpsec-chart-section,
.httpsec-rule-section,
.httpsec-request-section,
.httpsec-response-section,
.httpsec-evidence-section,
.httpsec-policy-section,
.httpsec-events-section {
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
}

.httpsec-frame .operator-section-head {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3) !important;
    background: color-mix(in srgb, var(--surface) 94%, #f3f4f6);
    box-shadow: none !important;
}

.httpsec-frame .operator-section-head h3 {
    letter-spacing: 0;
}

.httpsec-metric-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
}

.httpsec-metric-strip .operator-metric-label,
.httpsec-metric-strip .operator-metric-sub {
    color: var(--text-muted) !important;
}

.httpsec-metric-strip .operator-metric-value {
    color: var(--text-main) !important;
    font-size: 23px;
}

.httpsec-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.8fr);
    align-items: start;
    gap: 16px;
}

.httpsec-side-stack {
    display: grid;
    gap: 16px;
}

.httpsec-timeline-body,
.httpsec-side-chart-body,
.httpsec-breakdown-body,
.httpsec-policy-body {
    padding: 12px 14px 14px;
}

.httpsec-frame .dashboard-chart-panel-body,
.httpsec-frame .dashboard-chart-host,
.httpsec-frame .security-events-chart-fallback {
    border-top-color: var(--operator-line-soft, #eceff3) !important;
    box-shadow: none !important;
}

.httpsec-echart-host {
    width: 100%;
    min-height: 184px;
}

.httpsec-timeline-body .httpsec-echart-host {
    min-height: 286px;
}

.httpsec-rule-grid,
.httpsec-request-grid,
.httpsec-response-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.httpsec-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.httpsec-status-card {
    display: grid;
    gap: 12px;
    min-height: 100%;
    padding: 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--surface);
}

.httpsec-status-card h4,
.httpsec-drawer-section h4 {
    margin: 0;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.httpsec-status-card strong {
    color: var(--text-main);
    font-size: 22px;
    line-height: 1.1;
}

.httpsec-status-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.httpsec-frame .dashboard-breakdown-panel {
    background: var(--surface);
}

.httpsec-frame .dashboard-empty-state,
.httpsec-frame .security-events-chart-fallback {
    min-height: 96px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 680;
}

.httpsec-events-body .table-container {
    border-radius: 6px;
}

.httpsec-drawer-section {
    display: grid;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-drawer-section:first-child {
    padding-top: 0;
}

.httpsec-drawer-section:last-child {
    border-bottom: 0;
}

/* =============================================================================
   Command Center Dashboard
   ============================================================================= */

.command-center-frame {
    min-height: auto;
    --operator-orange: var(--operator-line-soft, #eceff3);
    --brand: var(--operator-line-soft, #eceff3);
    --dashboard-panel-bg: var(--operator-surface, #ffffff);
    --dashboard-panel-border: var(--operator-line, #d9dde3);
    --dashboard-panel-soft: var(--operator-line-soft, #eceff3);
}

body:has(.command-center-frame) {
    --operator-orange: var(--operator-line-soft, #eceff3);
    --brand: var(--operator-line-soft, #eceff3);
}

body:has(.command-center-frame) .operator-line-tab.is-active::after,
body:has(.command-center-frame) .config-section-nav-item.is-active::after,
body:has(.command-center-frame) .edge-breakdown-tab.is-active::after {
    display: none !important;
    background: transparent !important;
}

.command-center-body,
.command-center-root {
    gap: 16px;
}

.command-center-metric-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.command-center-metric-strip .operator-metric-label,
.command-center-metric-strip .operator-metric-sub {
    color: var(--text-muted) !important;
}

.command-center-metric-strip .operator-metric-value {
    color: var(--text-main) !important;
    font-size: 23px;
}

.command-posture-section,
.command-incident-section,
.command-recommendation-section,
.command-chart-section,
.command-gaps-section,
.command-launcher-section {
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
}

.command-center-frame .operator-section-head {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3) !important;
    background: color-mix(in srgb, var(--operator-surface, #fff) 94%, #f3f4f6);
    box-shadow: none !important;
}

.command-center-main-grid,
.command-center-secondary-grid,
.command-center-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: 16px;
    align-items: start;
}

.command-posture-body,
.command-gaps-body,
.command-launcher-body,
.command-recommendation-body,
.command-chart-body {
    padding: 12px 14px 14px;
}

.command-posture-grid,
.command-gap-grid,
.command-launcher-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.command-posture-list,
.command-launcher-list {
    display: grid;
    gap: 10px;
}

.command-posture-card,
.command-gap-card,
.command-launcher-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #fff);
}

.command-posture-head {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.command-posture-card h4,
.command-gap-card h4,
.command-launcher-card h4 {
    margin: 0;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 760;
}

.command-posture-card p,
.command-gap-card p,
.command-launcher-card p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.command-posture-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.command-posture-metrics div {
    padding: 9px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: color-mix(in srgb, var(--operator-surface, #fff) 92%, #f8fafc);
}

.command-posture-metrics span,
.command-posture-foot {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.command-posture-metrics strong {
    display: block;
    margin-top: 4px;
    color: var(--text-main);
    font-size: 18px;
}

.command-posture-foot {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.command-section-filter {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0;
}

.command-filter-count {
    color: var(--text-main);
    font-size: 11px;
}

.command-echart-host {
    min-height: 184px;
}

.command-center-frame .dashboard-chart-panel-body,
.command-center-frame .dashboard-chart-host,
.command-center-frame .security-events-chart-fallback {
    border-top-color: var(--operator-line-soft, #eceff3) !important;
    box-shadow: none !important;
}

.command-action-list {
    display: grid;
    gap: 8px;
    border-top: 0;
    background: transparent;
}

.command-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #fff);
}

.command-action-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.command-action-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--text-muted);
}

.command-action-dot.success {
    background: var(--success);
}

.command-action-dot.warning {
    background: var(--warning);
}

.command-action-dot.danger {
    background: var(--danger);
}

.command-launcher-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.command-truncate {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-center-frame .dashboard-empty-state,
.command-center-frame .security-events-chart-fallback {
    min-height: 96px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 680;
}

@media (max-width: 1240px) {
    .apisec-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .apisec-main-grid,
    .apisec-endpoint-grid,
    .httpsec-main-grid,
    .command-center-main-grid,
    .command-center-secondary-grid,
    .command-center-chart-grid {
        grid-template-columns: 1fr;
    }

    .apisec-rule-grid,
    .apisec-schema-grid,
    .apisec-status-grid,
    .httpsec-rule-grid,
    .httpsec-request-grid,
    .httpsec-response-grid,
    .httpsec-status-grid,
    .command-posture-grid,
    .command-gap-grid,
    .command-launcher-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .httpsec-metric-strip,
    .command-center-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .apisec-frame .operator-frame-header,
    .httpsec-frame .operator-frame-header,
    .command-center-frame .operator-frame-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .apisec-metric-strip,
    .apisec-rule-grid,
    .apisec-schema-grid,
    .apisec-status-grid,
    .httpsec-metric-strip,
    .httpsec-rule-grid,
    .httpsec-request-grid,
    .httpsec-response-grid,
    .httpsec-status-grid,
    .command-center-metric-strip,
    .command-posture-grid,
    .command-gap-grid,
    .command-launcher-grid,
    .command-posture-metrics {
        grid-template-columns: 1fr;
    }

    .command-posture-card,
    .command-launcher-card,
    .command-posture-head,
    .command-posture-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .command-posture-foot,
    .command-launcher-actions {
        justify-content: flex-start;
    }
}

/* =============================================================================
   Traffic Control Dashboard
   ============================================================================= */

.flow-control-frame {
    min-height: auto;
    --operator-orange: var(--operator-line-soft, #eceff3);
    --brand: var(--operator-line-soft, #eceff3);
    --flow-control-panel-bg: var(--operator-surface, #ffffff);
    --flow-control-panel-border: var(--operator-line, #d9dde3);
    --flow-control-panel-soft: var(--operator-line-soft, #eceff3);
    --dashboard-panel-bg: var(--operator-surface, #ffffff);
    --dashboard-panel-border: var(--operator-line, #d9dde3);
    --dashboard-panel-soft: var(--operator-line-soft, #eceff3);
}

body:has(.flow-control-frame) {
    --operator-orange: var(--operator-line-soft, #eceff3);
    --brand: var(--operator-line-soft, #eceff3);
}

body:has(.flow-control-frame) .operator-line-tab.is-active::after,
body:has(.flow-control-frame) .config-section-nav-item.is-active::after,
body:has(.flow-control-frame) .edge-breakdown-tab.is-active::after {
    display: none !important;
    background: transparent !important;
}

body:has(.flow-control-frame) .edge-breakdown-tab.is-active,
body:has(.flow-control-frame) .section-mode-option.is-active,
body:has(.flow-control-frame) .edge-level-btn.is-active {
    box-shadow: none !important;
}

.flow-control-frame .operator-frame-header {
    align-items: flex-start;
    gap: 24px;
}

.flow-control-frame .operator-frame-actions {
    flex: 1 1 520px;
    align-items: center;
    justify-content: flex-end;
}

.flow-control-frame .operator-frame-actions .security-refresh-state {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 999px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 680;
}

.flow-control-frame .operator-sticky-actions,
.flow-control-frame .section-save-actions,
body:has(.flow-control-frame) .operator-sticky-actions,
body:has(.flow-control-frame) .section-save-actions {
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.flow-control-body,
.flow-control-explorer {
    gap: 16px;
}

.flow-control-timeline-section,
.flow-control-chart-section,
.flow-control-pressure-section,
.flow-control-policy-surface-section,
.flow-control-reputation-section,
.flow-control-policy-health-section,
.flow-control-events-section {
    padding: 0;
    overflow: hidden;
    border-color: var(--flow-control-panel-border);
    border-radius: 6px;
}

.flow-control-frame .operator-section-head {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3) !important;
    background: color-mix(in srgb, var(--flow-control-panel-bg) 94%, #f3f4f6);
    box-shadow: none !important;
}

.flow-control-frame .operator-section-head h3 {
    letter-spacing: 0;
}

.flow-control-metric-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
}

.flow-control-metric-strip .operator-metric-label,
.flow-control-metric-strip .operator-metric-sub {
    color: var(--text-muted) !important;
}

.flow-control-metric-strip .operator-metric-value {
    color: var(--text-main) !important;
    font-size: 23px;
}

.flow-control-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.8fr);
    align-items: start;
    gap: 16px;
}

.flow-control-side-stack {
    display: grid;
    gap: 16px;
}

.flow-control-timeline-body,
.flow-control-side-chart-body,
.flow-control-breakdown-body,
.flow-control-policy-health-body {
    padding: 12px 14px 14px;
}

.flow-control-frame .dashboard-chart-panel-body,
.flow-control-frame .dashboard-chart-host,
.flow-control-frame .security-events-chart-fallback {
    border-top-color: var(--operator-line-soft, #eceff3) !important;
    box-shadow: none !important;
}

.flow-control-echart-host {
    width: 100%;
    min-height: 184px;
}

.flow-control-timeline-body .flow-control-echart-host {
    min-height: 286px;
}

.flow-control-pressure-grid,
.flow-control-policy-grid,
.flow-control-reputation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.flow-control-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.flow-control-status-card {
    display: grid;
    gap: 12px;
    min-height: 100%;
    padding: 14px;
    border: 1px solid var(--flow-control-panel-soft);
    border-radius: 6px;
    background: var(--flow-control-panel-bg);
}

.flow-control-status-card h4,
.flow-control-drawer-section h4 {
    margin: 0;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.flow-control-status-card strong {
    color: var(--text-main);
    font-size: 22px;
    line-height: 1.1;
}

.flow-control-status-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.flow-control-status-card-inner {
    display: grid;
    gap: 10px;
}

.flow-control-mini-grid {
    display: grid;
    gap: 8px;
}

.flow-control-frame .dashboard-breakdown-panel {
    border-color: var(--flow-control-panel-soft);
    background: var(--flow-control-panel-bg);
}

.flow-control-frame .dashboard-empty-state,
.flow-control-frame .security-events-chart-fallback {
    min-height: 96px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 680;
}

.flow-control-events-body .table-container {
    border-radius: 6px;
}

.flow-control-events-section .dashboard-events-table {
    table-layout: fixed;
}

.flow-control-events-section .dashboard-events-table th:nth-child(1) {
    width: 132px;
}

.flow-control-events-section .dashboard-events-table th:nth-child(2) {
    width: 168px;
}

.flow-control-events-section .dashboard-events-table th:nth-child(3) {
    width: 30%;
}

.flow-control-events-section .dashboard-events-table th:nth-child(4) {
    width: 116px;
}

.flow-control-events-section .dashboard-events-table th:nth-child(5) {
    width: 112px;
}

.flow-control-events-section .dashboard-events-table th:nth-child(6) {
    width: 24%;
}

.flow-control-events-section .dashboard-events-table th:nth-child(7) {
    width: 92px;
}

.flow-control-events-section .dashboard-events-table td {
    height: 62px;
    vertical-align: middle;
}

.flow-decision-row:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 5%, transparent);
}

.flow-decision-time,
.flow-decision-client,
.flow-decision-request,
.flow-decision-reason {
    min-width: 0;
}

.flow-decision-time {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 680;
    white-space: nowrap;
}

.flow-decision-client,
.flow-decision-reason {
    display: grid;
    gap: 3px;
}

.flow-decision-client strong,
.flow-decision-reason strong,
.flow-decision-request strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 720;
    letter-spacing: 0;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-decision-client span,
.flow-decision-meta,
.flow-decision-reason span,
.flow-decision-reason em {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 580;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-decision-request {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flow-method-chip,
.flow-action-badge,
.flow-risk-cell {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.flow-method-chip {
    flex: 0 0 auto;
    padding: 0 8px;
    background: color-mix(in srgb, var(--bg-depth) 62%, transparent);
    color: var(--text-secondary);
}

.flow-action-badge {
    justify-content: center;
    min-width: 82px;
    padding: 0 10px;
    background: color-mix(in srgb, var(--bg-depth) 70%, transparent);
    color: var(--text-secondary);
}

.flow-action-badge.allow {
    border-color: color-mix(in srgb, var(--success, #22c55e) 34%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent);
    color: var(--success, #16a34a);
}

.flow-action-badge.block,
.flow-action-badge.ratelimit,
.flow-action-badge.error {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 34%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--danger, #ef4444) 10%, transparent);
    color: var(--danger, #dc2626);
}

.flow-action-badge.challenge {
    border-color: color-mix(in srgb, var(--warning, var(--brand-orange)) 42%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--warning, var(--brand-orange)) 12%, transparent);
    color: var(--warning, var(--brand-orange));
}

.flow-risk-cell {
    display: grid;
    gap: 2px;
    min-width: 86px;
    padding: 6px 9px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-depth) 52%, transparent);
}

.flow-risk-cell span {
    font-size: 11px;
    font-weight: 800;
}

.flow-risk-cell strong {
    font-size: 11px;
    font-weight: 640;
}

.flow-risk-cell.tone-success {
    border-color: color-mix(in srgb, var(--success, #22c55e) 30%, var(--operator-line-soft, #eceff3));
    color: var(--success, #16a34a);
}

.flow-risk-cell.tone-warning {
    border-color: color-mix(in srgb, var(--warning, var(--brand-orange)) 38%, var(--operator-line-soft, #eceff3));
    color: var(--warning, var(--brand-orange));
}

.flow-risk-cell.tone-danger {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 32%, var(--operator-line-soft, #eceff3));
    color: var(--danger, #dc2626);
}

.flow-risk-cell.tone-neutral {
    color: var(--text-muted);
}

.flow-latency-value {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 720;
    white-space: nowrap;
}

.flow-control-drawer-section {
    display: grid;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-control-drawer-section:first-child {
    padding-top: 0;
}

.flow-control-drawer-section:last-child {
    border-bottom: 0;
}

@media (max-width: 1240px) {
    .flow-control-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .flow-control-main-grid,
    .flow-control-pressure-grid,
    .flow-control-policy-grid,
    .flow-control-reputation-grid {
        grid-template-columns: 1fr;
    }

    .flow-control-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .flow-control-frame .operator-frame-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-control-metric-strip,
    .flow-control-status-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   Traffic Events
   ============================================================================= */

.flow-events-frame {
    min-height: auto;
}

.flow-events-frame .operator-frame-header {
    align-items: center;
}

.flow-events-header-actions {
    align-items: center;
}

.flow-events-header-actions .security-refresh-state {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 999px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 680;
}

.flow-events-period-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.flow-events-period-control span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 680;
}

.flow-events-period-control .security-toolbar-time-select {
    min-height: 28px;
    padding: 0 24px 0 6px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.flow-events-body {
    gap: 20px;
    padding-bottom: 32px;
}

.flow-events-filter-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    justify-content: flex-start;
    gap: 12px;
    min-height: 60px;
    padding: 12px 14px;
}

.flow-events-filter-controls {
    display: grid;
    grid-template-columns: 160px 150px 98px 116px minmax(150px, 1fr) minmax(170px, 1.1fr) 92px 84px minmax(140px, 1fr);
    gap: 10px;
    width: 100%;
}

.flow-events-filter-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.flow-events-filter-field span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 720;
    line-height: 1;
}

.flow-events-filter-field :is(input, select) {
    width: 100%;
    min-width: 0;
}

.flow-events-filter-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    min-height: 49px;
}

.flow-events-frame .security-active-filters {
    grid-column: 1 / -1;
    margin-left: 0;
    padding: 10px 12px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.flow-events-explorer {
    display: grid;
    gap: 20px;
}

.flow-events-metric-strip {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    margin: 0;
}

.flow-events-metric-strip .operator-metric-value {
    font-size: 21px;
}

.flow-events-metric-strip .operator-metric-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.flow-events-metric-filter {
    flex: 0 0 auto;
    min-height: 22px;
    padding: 0 7px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-secondary);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.flow-events-metric-filter:hover {
    border-color: var(--operator-link, var(--primary));
    color: var(--operator-link, var(--primary));
}

.flow-events-timeline-panel,
.flow-events-table-panel {
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
}

.flow-events-primary-grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.94fr) minmax(420px, 1.06fr);
    gap: 16px;
    align-items: stretch;
}

.flow-events-primary-grid > * {
    min-width: 0;
}

.flow-events-timeline-panel .security-flow-card {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.flow-events-geo-panel {
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
}

.flow-events-geo-head {
    min-height: 62px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.flow-events-geo-summary {
    display: grid;
    gap: 2px;
    min-width: 96px;
    text-align: right;
}

.flow-events-geo-summary strong {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.flow-events-geo-summary span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 680;
}

.flow-events-geo-body {
    display: grid;
    grid-template-rows: minmax(260px, 1fr) auto;
    gap: 12px;
    padding: 14px;
}

.flow-events-map-shell {
    position: relative;
    min-height: 280px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #eef6ff), var(--operator-surface, #ffffff));
    overflow: hidden;
}

.flow-events-world-map {
    position: absolute;
    inset: 8% 5%;
    width: 90%;
    height: 84%;
    color: color-mix(in srgb, var(--operator-link, var(--primary)) 22%, var(--text-muted));
    opacity: 0.42;
}

.flow-events-world-map path {
    fill: currentColor;
}

.flow-events-map-point {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    border: 2px solid var(--operator-surface, #ffffff);
    border-radius: 999px;
    background: var(--operator-link, var(--primary));
    box-shadow: 0 10px 24px color-mix(in srgb, #000 18%, transparent);
    color: #ffffff;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.flow-events-map-point.tone-denied {
    background: var(--warning, var(--brand-orange));
}

.flow-events-map-point.tone-error {
    background: var(--danger, #ef4444);
}

.flow-events-map-point:hover,
.flow-events-map-point:focus-visible {
    z-index: 2;
    outline: 3px solid color-mix(in srgb, var(--operator-link, var(--primary)) 26%, transparent);
    outline-offset: 2px;
}

.flow-events-map-point span {
    pointer-events: none;
}

.flow-events-map-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.flow-events-country-list {
    display: grid;
    gap: 8px;
}

.flow-events-statistics-deck {
    margin: 0;
}

.flow-events-statistics-deck .security-events-context-grid {
    gap: 12px;
    align-items: start;
}

.system-health-status-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.system-health-status-detail {
    max-width: 320px;
    margin: 0;
    color: var(--text-secondary, #667085);
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
}

.system-health-refresh-detail {
    display: inline-flex;
    min-height: 32px;
    max-width: 310px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 999px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}

.system-health-row-detail {
    align-items: flex-start;
    padding: 10px 0;
}

.system-health-row-detail strong {
    max-width: 68%;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 620;
    line-height: 1.4;
}

.flow-events-statistics-deck .security-stat-card {
    height: auto;
    min-height: 0;
    border-radius: 6px;
    overflow: hidden;
}

.flow-events-statistics-deck .security-aggregate-list.is-compact {
    height: auto;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.flow-events-statistics-deck .security-stat-card-head {
    min-height: 48px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.flow-events-table-panel .security-events-header {
    min-height: 62px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.flow-events-table-panel .security-events-tools {
    gap: 10px;
}

.flow-events-table-panel .table-container {
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.flow-events-table-panel .security-events-table th {
    height: 42px;
    font-size: 11px;
}

.flow-events-table-panel .security-events-table td {
    height: 48px;
    font-size: 13px;
}

.flow-events-table-panel .security-events-table {
    table-layout: fixed;
}

.flow-events-table-panel .security-events-table th:nth-child(1) {
    width: 140px;
}

.flow-events-table-panel .security-events-table th:nth-child(2) {
    width: 170px;
}

.flow-events-table-panel .security-events-table th:nth-child(3) {
    width: 34%;
}

.flow-events-table-panel .security-events-table th:nth-child(4) {
    width: 96px;
}

.flow-events-table-panel .security-events-table th:nth-child(5) {
    width: 24%;
}

.flow-events-table-panel .security-events-table th:nth-child(6) {
    width: 96px;
}

.flow-row-byte-value {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 680;
}

.flow-request-row:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 5%, transparent);
}

.flow-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-depth) 70%, transparent);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.flow-status-badge.tone-success {
    border-color: color-mix(in srgb, var(--success, #22c55e) 34%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent);
    color: var(--success, #16a34a);
}

.flow-status-badge.tone-warning {
    border-color: color-mix(in srgb, var(--warning, var(--brand-orange)) 42%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--warning, var(--brand-orange)) 12%, transparent);
    color: var(--warning, var(--brand-orange));
}

.flow-status-badge.tone-error {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 34%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--danger, #ef4444) 10%, transparent);
    color: var(--danger, #dc2626);
}

.flow-events-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid var(--status-warning-border, var(--brand-orange));
    border-radius: 6px;
    background: color-mix(in srgb, var(--warning, var(--brand-orange)) 7%, var(--operator-surface, #ffffff));
}

.flow-events-notice span {
    color: var(--warning, var(--brand-orange));
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.flow-events-notice strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 680;
}

[data-theme="dark"] .flow-events-period-control,
[data-theme="dark"] .flow-events-frame .security-active-filters,
[data-theme="dark"] .flow-events-metric-filter {
    background: var(--operator-surface, #11141a);
}

[data-theme="dark"] .flow-events-map-shell {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--operator-surface, #11141a) 92%, #0f2438), var(--operator-surface, #11141a));
}

@media (max-width: 1220px) {
    .flow-events-metric-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .flow-events-filter-panel,
    .flow-events-primary-grid {
        grid-template-columns: 1fr;
    }

    .flow-events-filter-actions {
        justify-content: flex-start;
        min-height: 0;
    }

    .flow-events-filter-controls {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .flow-events-frame .operator-frame-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-events-filter-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flow-events-header-actions,
    .flow-events-frame .security-active-filters {
        justify-content: flex-start;
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 680px) {
    .flow-events-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flow-events-header-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .flow-events-period-control {
        justify-content: space-between;
        width: 100%;
    }

    .flow-events-filter-controls {
        grid-template-columns: 1fr;
    }

    .flow-events-map-shell {
        min-height: 230px;
    }

    .flow-events-geo-body {
        grid-template-rows: auto auto;
    }
}

@media (max-width: 520px) {
    .flow-events-metric-strip {
        grid-template-columns: 1fr;
    }

    .flow-events-geo-summary {
        width: 100%;
        text-align: left;
    }
}

/* =============================================================================
   Security Events
   ============================================================================= */

.security-events-frame {
    min-height: auto;
}

.flow-events-filter-builder-row {
    grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.7fr);
}

.security-events-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-bottom: 0;
}

.security-events-page-header .operator-frame-title-block {
    max-width: 920px;
}

.security-events-page-header .operator-frame-subtitle {
    max-width: 880px;
}

.security-events-command-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
    min-height: 54px;
    margin: 20px -32px 0;
    padding: 8px 32px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
}

.security-events-header-actions {
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-left: auto;
}

.security-events-header-filters {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.security-events-header-time {
    display: inline-flex;
    align-items: center;
}

.security-events-header-time .security-events-time-menu {
    margin-left: 0;
}

.security-events-refresh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 6px;
    font-weight: 720;
    white-space: nowrap;
}

.security-events-refresh-button[aria-busy="true"] svg,
#waf-dashboard-refresh[aria-busy="true"] svg {
    animation: security-refresh-spin 0.8s linear infinite;
}

@keyframes security-refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#security-analytics-content,
#waf-dashboard .waf-dashboard-body,
#security-events-table-region {
    transition: opacity 0.15s ease-in-out;
}

#security-analytics-content.is-loading,
#waf-dashboard.is-loading .waf-dashboard-body,
#traffic-dashboard.is-loading .waf-dashboard-body,
#security-events-table-region.is-loading {
    opacity: 0.65;
    pointer-events: none;
}

.security-events-header-actions .security-refresh-state {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 999px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 680;
}

.security-events-body {
    gap: 16px;
    padding-bottom: 32px;
}

.security-events-operator-explorer {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.security-events-metric-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
}

.security-events-metric-strip .operator-metric-value {
    font-size: 23px;
    text-transform: none;
}

.security-events-metric-filter {
    flex: 0 0 auto;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--operator-link, var(--primary));
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.security-events-metric-filter:hover,
.security-events-metric-filter:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.security-events-filter-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    min-height: 60px;
    padding: 12px 14px;
}

.security-events-filter-toolbar {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 2px 0 0;
    flex-wrap: wrap;
}

.security-events-filter-left {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.security-time-panel-head span,
.security-time-field span,
.security-time-mode-tabs {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 780;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.security-events-time-menu,
.security-events-filter-menu {
    position: relative;
}

.security-filter-add-button,
.security-filter-clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 11px;
    border-radius: 6px;
    font: inherit;
    font-size: 12px;
    font-weight: 720;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.security-filter-add-button {
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
}

.security-filter-add-button:hover,
.security-filter-add-button:focus-visible {
    border-color: var(--operator-link, var(--primary));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, var(--operator-surface, #ffffff));
    color: var(--operator-link, var(--primary));
}

.security-filter-clear-button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
}

.security-filter-clear-button:hover,
.security-filter-clear-button:focus-visible {
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 88%, var(--operator-line, #d9dde3));
    color: var(--text-main);
}

.security-events-time-menu {
    margin-left: auto;
}

.security-time-dropdown-trigger {
    display: inline-grid;
    grid-template-columns: 15px minmax(0, auto) 14px;
    align-items: center;
    gap: 8px;
    max-width: min(420px, calc(100vw - 48px));
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.security-time-trigger-icon {
    color: var(--text-muted);
}

.security-time-dropdown-trigger strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 740;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-time-trigger-chevron {
    color: var(--text-muted);
    transition: transform 140ms ease;
}

.security-time-dropdown-trigger[aria-expanded="true"] .security-time-trigger-chevron {
    transform: rotate(180deg);
}

.security-time-dropdown-trigger:hover,
.security-time-dropdown-trigger:focus-visible {
    border-color: var(--operator-link, var(--primary));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, var(--operator-surface, #ffffff));
    color: var(--operator-link, var(--primary));
}

.security-time-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 72;
    display: grid;
    gap: 12px;
    width: min(460px, calc(100vw - 40px));
    padding: 14px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 7px;
    background: var(--operator-surface, #ffffff);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
}

.security-time-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.security-time-panel-head strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-time-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.security-time-mode {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 760;
    cursor: pointer;
}

.security-time-mode:hover,
.security-time-mode:focus-visible,
.security-time-mode.is-active {
    border-color: var(--operator-link, var(--primary));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 8%, transparent);
    color: var(--operator-link, var(--primary));
}

.security-time-mode-panel {
    display: grid;
    gap: 12px;
}

.security-time-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.security-time-preset,
.security-time-apply {
    min-height: 30px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, #f3f4f6);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 740;
    cursor: pointer;
}

.security-time-preset {
    min-width: 48px;
    padding: 0 10px;
}

.security-time-preset:hover,
.security-time-preset:focus-visible,
.security-time-preset.is-active,
.security-time-apply:hover,
.security-time-apply:focus-visible {
    border-color: var(--operator-link, var(--primary));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 8%, var(--operator-surface, #ffffff));
    color: var(--operator-link, var(--primary));
}

.security-time-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.security-time-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.security-time-apply-wide {
    grid-column: 1 / -1;
}

.security-time-field input,
.security-time-field select {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
    font-weight: 680;
}

.security-time-inline {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    gap: 8px;
}

.security-time-apply {
    padding: 0 11px;
}

.security-time-apply-wide {
    width: max-content;
}

.security-events-filter-toolbar .security-active-filters {
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.security-events-filter-toolbar .security-filter-summary {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.security-events-period-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.security-events-period-control span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 680;
}

.security-events-period-control .security-toolbar-time-select {
    min-height: 28px;
    padding: 0 24px 0 6px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.security-events-frame .security-active-filters {
    margin-left: auto;
    padding: 10px 12px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.security-events-frame .security-events-filter-toolbar .security-active-filters {
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.security-events-frame .security-events-header-filters .security-active-filters {
    justify-content: flex-start;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.security-events-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid var(--status-warning-border, var(--brand-orange));
    border-radius: 6px;
    background: color-mix(in srgb, var(--warning, var(--brand-orange)) 7%, var(--operator-surface, #ffffff));
}

.security-events-notice span {
    color: var(--warning, var(--brand-orange));
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.security-events-notice strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 680;
}



.security-events-analysis-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.7fr);
    gap: 16px;
    align-items: stretch;
}

.security-events-timeline-panel,
.security-events-action-chart-card,
.security-events-table-panel {
    min-width: 0;
    margin: 0;
    border-color: var(--operator-line-soft, #eceff3);
    box-shadow: none;
}

.security-events-chart-panel {
    position: relative;
    min-height: 0;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.security-events-chart-canvas {
    min-height: 260px;
    height: auto;
    aspect-ratio: 55 / 16;
    color: var(--operator-link, var(--primary));
}

.security-events-timeline-svg,
.security-events-action-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.security-events-svg-grid-line {
    stroke: color-mix(in srgb, var(--operator-line-soft, #e2e8f0) 84%, transparent);
    stroke-width: 1;
}

.security-events-svg-axis-line {
    stroke: var(--operator-line, #d9dde3);
    stroke-width: 1;
}

.security-events-svg-axis-label,
.security-events-svg-legend-label {
    fill: var(--text-muted);
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 620;
}

.security-events-svg-legend,
.security-events-svg-bar,
.security-events-action-segment rect {
    transition: opacity 140ms ease, filter 140ms ease;
}

.security-events-svg-legend.is-mitigated,
.security-events-svg-bar.is-mitigated,
.security-events-action-segment.action-block rect {
    fill: var(--brand-orange);
}

.security-events-action-segment.action-challenge rect,
.security-events-action-segment.action-rate_limit rect {
    fill: var(--brand-orange);
}

.security-events-action-segment.action-challenge rect {
    opacity: .72;
}

.security-events-action-segment.action-rate_limit rect {
    opacity: .48;
}

.security-events-svg-legend.is-origin,
.security-events-svg-bar.is-origin,
.security-events-action-segment.action-redirect rect,
.security-events-action-segment.action-log rect,
.security-events-action-segment.action-allow rect {
    fill: #5f86a2;
}

.security-events-svg-legend.is-observed,
.security-events-svg-bar.is-observed {
    fill: #5f86a2;
    opacity: .58;
}

.security-events-action-segment.action-log rect {
    opacity: .72;
}

.security-events-action-segment.action-allow rect {
    opacity: .48;
}

.security-events-svg-action {
    cursor: pointer;
}

.security-events-density-area {
    fill: url(#security-events-density-fill);
}

.security-events-density-line,
.security-events-density-legend-swatch {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.security-events-density-line {
    stroke-width: 2;
}

.security-events-density-legend-swatch {
    stroke-width: 2.5;
}

.security-events-density-bucket {
    color: var(--brand-orange, #f97316);
    outline: none;
    text-decoration: none;
}

.security-events-density-hitbox {
    fill: transparent;
    transition: fill 140ms ease;
    cursor: pointer;
}

.security-events-density-bucket:hover .security-events-density-hitbox,
.security-events-density-bucket:focus .security-events-density-hitbox {
    fill: color-mix(in srgb, var(--brand-orange, #f97316) 6%, transparent);
}

.security-events-density-point {
    fill: var(--brand-orange, #f97316);
    stroke: var(--operator-surface, #11141a);
    stroke-width: 2.5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1), r 160ms cubic-bezier(0.16, 1, 0.3, 1), stroke-width 160ms ease, filter 160ms ease;
}

.security-events-density-point.is-single-point {
    opacity: 1;
    r: 4;
}

.security-events-density-bucket:hover .security-events-density-point,
.security-events-density-bucket:focus .security-events-density-point {
    opacity: 1;
    r: 5.5;
    fill: var(--brand-orange, #f97316);
    stroke: var(--operator-surface, #11141a);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.55));
}

.security-events-svg-action:hover .security-events-svg-bar,
.security-events-svg-action:focus .security-events-svg-bar,
.security-events-svg-action:hover rect,
.security-events-svg-action:focus rect {
    filter: brightness(1.08);
    opacity: .82;
}

.security-events-svg-action:focus {
    outline: none;
}

.security-events-svg-action:focus .security-events-svg-bar,
.security-events-svg-action:focus rect {
    stroke: var(--text-main);
    stroke-width: 1.5;
}

.security-events-chart-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 680;
}

.security-events-operator-explorer .security-statistics-deck {
    margin: 0;
    border: 0;
    background: transparent;
}

.security-events-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

.security-events-statistics-deck:not(.is-expanded) .security-events-stat-grid > .security-statistics-card:nth-child(n + 10) {
    display: none;
}

/* Larger desktop displays gain a fourth card; five remains reserved for ultrawide workspaces. */
@media (min-width: 1800px) {
    .security-events-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .security-events-statistics-deck:not(.is-expanded) .security-events-stat-grid > .security-statistics-card:nth-child(n + 9) {
        display: none;
    }
}

@media (min-width: 2560px) {
    .security-events-stat-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .security-events-statistics-deck:not(.is-expanded) .security-events-stat-grid > .security-statistics-card:nth-child(n + 11) {
        display: none;
    }
}

.security-events-stat-card {
    min-height: 100%;
    border-radius: 8px;
    border: 1px solid var(--operator-line-soft, #eaedf1);
    background: var(--operator-surface, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.security-events-stat-card:hover {
    border-color: var(--operator-line, #d0d5dd);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.security-events-stat-card .operator-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 42px;
    padding: 10px 14px;
    margin: 0;
    border-bottom: 1px solid var(--operator-line-soft, #f0f2f5);
}

.security-events-stat-card .operator-section-head h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.25;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.security-events-stat-card .security-stat-card-expand {
    position: static;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--operator-line-soft, #eaedf1);
    border-radius: 5px;
    background: var(--operator-surface-muted, #f8f9fa);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.security-events-stat-card .security-stat-card-expand:hover {
    border-color: var(--operator-link, var(--primary));
    color: var(--operator-link, var(--primary));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 8%, transparent);
}

.security-events-stat-body {
    display: grid;
    gap: 3px;
    padding: 8px 12px 10px;
}

.waf-dashboard-frame .waf-dashboard-detail-panel.waf-dashboard-security-stat-card {
    padding: 0;
    overflow: hidden;
}

.security-events-action-chart-card .operator-section-head {
    align-items: center;
    min-height: 48px;
}

.security-events-action-chart-card .operator-section-head h3 {
    font-size: 14px;
}

.security-events-action-chart-card {
    min-height: 100%;
}

.security-events-action-mix-body {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 244px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.security-events-action-chart {
    width: 100%;
    height: 54px;
    min-height: 54px;
    padding: 0;
}

.security-events-action-svg {
    height: 54px;
}

.security-events-action-svg-track {
    fill: color-mix(in srgb, var(--operator-line, #d9dde3) 72%, transparent);
}

.security-events-action-legend {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.security-events-action-legend-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.security-events-action-legend-row:first-child {
    border-top: 0;
}

.security-events-action-legend-row:hover .security-events-action-label,
.security-events-action-legend-row:focus-visible .security-events-action-label {
    color: var(--operator-link, var(--primary));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.security-events-action-legend-row:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--operator-link, var(--primary)) 35%, transparent);
    outline-offset: 3px;
}

.security-events-action-swatch {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--text-muted);
}

.security-events-action-swatch.action-block {
    background: var(--brand-orange);
}

.security-events-action-swatch.action-challenge,
.security-events-action-swatch.action-rate_limit {
    background: var(--brand-orange);
}

.security-events-action-swatch.action-challenge {
    opacity: .72;
}

.security-events-action-swatch.action-rate_limit {
    opacity: .48;
}

.security-events-action-swatch.action-redirect,
.security-events-action-swatch.action-log,
.security-events-action-swatch.action-allow {
    background: #5f86a2;
}

.security-events-action-swatch.action-log {
    opacity: .72;
}

.security-events-action-swatch.action-allow {
    opacity: .48;
}

.security-events-action-label {
    min-width: 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-events-action-legend-row strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 780;
}

.security-events-action-legend-row em {
    min-width: 42px;
    color: var(--text-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 680;
    text-align: right;
}

.security-events-stat-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 33px;
    padding: 2px 6px;
    border-radius: 5px;
    border-bottom: 1px solid color-mix(in srgb, var(--operator-line-soft, #eceff3) 70%, transparent);
    transition: background 0.12s ease;
}

.security-events-stat-row:last-child {
    border-bottom: 0;
}

.security-events-stat-row.is-filterable,
.security-events-stat-row[role="button"] {
    cursor: pointer;
    user-select: none;
}

.security-events-stat-row:hover,
.security-events-stat-row:focus-visible {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 8%, transparent);
    outline: none;
}

.security-events-stat-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--operator-orange, #f97316) 12%, transparent);
    color: var(--operator-orange, #ea580c);
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.security-events-stat-copy {
    display: grid;
    min-width: 0;
    gap: 0;
}

.security-events-stat-value-button,
.security-events-stat-copy > span:first-child {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-family: var(--font-main);
    font-size: 12.5px;
    font-weight: 580;
    line-height: 1.3;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.12s ease;
}

.security-events-stat-value-button {
    cursor: pointer;
}

.security-events-stat-value-button:hover,
.security-events-stat-value-button:focus-visible {
    color: var(--operator-link, var(--primary));
    text-decoration: none;
}

.security-events-stat-copy > span:first-child:hover {
    color: var(--operator-link, var(--primary));
}

.security-events-stat-count {
    min-width: 34px;
    padding: 2px 7px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 8%, transparent);
    color: var(--operator-link, var(--primary));
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.security-events-stat-empty {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.security-events-statistics-deck .security-statistics-show-more,
.waf-dashboard-frame .security-statistics-show-more {
    width: 100%;
    min-height: 40px;
    margin-top: 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 720;
    cursor: pointer;
}

.security-events-statistics-deck .security-statistics-show-more:hover,
.security-events-statistics-deck .security-statistics-show-more:focus-visible,
.waf-dashboard-frame .security-statistics-show-more:hover,
.waf-dashboard-frame .security-statistics-show-more:focus-visible {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 5%, transparent);
    color: var(--text-main);
}

/* Traffic Events & Security Dashboard: breakdown inspector */
.security-events-frame .security-statistics-modal,
.waf-dashboard-frame .security-statistics-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: color-mix(in srgb, #05070b 82%, transparent);
    backdrop-filter: blur(5px);
}

.security-events-frame .security-statistics-modal.hidden,
.waf-dashboard-frame .security-statistics-modal.hidden {
    display: none;
}

.security-events-frame .security-statistics-modal-panel,
.waf-dashboard-frame .security-statistics-modal-panel {
    width: min(680px, calc(100vw - 48px));
    max-height: min(680px, calc(100vh - 48px));
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 8px;
    background: var(--operator-surface, #ffffff);
    box-shadow: 0 24px 72px rgba(0, 0, 0, .32);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.security-events-frame .security-statistics-modal-head,
.waf-dashboard-frame .security-statistics-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
}

.security-events-frame .security-statistics-modal-head h3,
.waf-dashboard-frame .security-statistics-modal-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 720;
    letter-spacing: 0;
}

.security-events-frame .security-statistics-modal-close,
.waf-dashboard-frame .security-statistics-modal-close {
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface-muted, #f7f8fa);
    font-size: 11px;
    cursor: pointer;
}

.security-events-frame .security-statistics-modal-body,
.waf-dashboard-frame .security-statistics-modal-body {
    padding: 14px 20px 18px;
    background: var(--operator-surface, #ffffff);
    overflow-y: auto;
}

.security-events-frame .security-statistics-modal-summary,
.waf-dashboard-frame .security-statistics-modal-summary {
    display: block;
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
}

.security-events-frame .security-statistics-modal-list,
.waf-dashboard-frame .security-statistics-modal-list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.security-events-frame .security-statistics-modal-row,
.waf-dashboard-frame .security-statistics-modal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(56px, auto) auto;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.security-events-frame .security-statistics-modal-row:last-child,
.waf-dashboard-frame .security-statistics-modal-row:last-child {
    border-bottom: 0;
}

.security-events-frame .security-statistics-modal-value,
.waf-dashboard-frame .security-statistics-modal-value {
    min-width: 0;
}

.security-events-frame .security-statistics-modal-value span,
.waf-dashboard-frame .security-statistics-modal-value span {
    font-size: 13px;
    font-weight: 680;
}

.security-events-frame .security-statistics-modal-bar,
.waf-dashboard-frame .security-statistics-modal-bar {
    position: relative;
    height: 3px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--operator-line-soft, #eceff3);
    overflow: hidden;
}

.security-events-frame .security-statistics-modal-bar::before,
.waf-dashboard-frame .security-statistics-modal-bar::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--stat-width, 0%);
    border-radius: inherit;
    background: var(--operator-link, var(--primary));
}

.security-events-frame .security-statistics-modal-metrics,
.waf-dashboard-frame .security-statistics-modal-metrics {
    display: grid;
    justify-items: end;
    gap: 1px;
}

.security-events-frame .security-statistics-modal-metrics strong,
.waf-dashboard-frame .security-statistics-modal-metrics strong {
    font-size: 14px;
    font-weight: 760;
}

.security-events-frame .security-statistics-modal-metrics small,
.waf-dashboard-frame .security-statistics-modal-metrics small {
    color: var(--text-muted);
    font-size: 11px;
}

.security-events-frame .security-statistics-modal-filter,
.waf-dashboard-frame .security-statistics-modal-filter {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    background: var(--operator-surface-muted, #f7f8fa);
    font-size: 11px;
    font-weight: 740;
    cursor: pointer;
}

[data-theme="dark"] .security-events-frame .security-statistics-modal-panel,
[data-theme="dark"] .security-events-frame .security-statistics-modal-head,
[data-theme="dark"] .security-events-frame .security-statistics-modal-body,
[data-theme="dark"] .waf-dashboard-frame .security-statistics-modal-panel,
[data-theme="dark"] .waf-dashboard-frame .security-statistics-modal-head,
[data-theme="dark"] .waf-dashboard-frame .security-statistics-modal-body {
    background: #12161c;
}

[data-theme="dark"] .security-events-frame .security-statistics-modal-close,
[data-theme="dark"] .security-events-frame .security-statistics-modal-filter,
[data-theme="dark"] .waf-dashboard-frame .security-statistics-modal-close,
[data-theme="dark"] .waf-dashboard-frame .security-statistics-modal-filter {
    border-color: #2b313b;
    background: #191e26;
    color: var(--text-main);
}

[data-theme="dark"] .security-events-frame .security-statistics-modal-list,
[data-theme="dark"] .security-events-frame .security-statistics-modal-row,
[data-theme="dark"] .waf-dashboard-frame .security-statistics-modal-list,
[data-theme="dark"] .waf-dashboard-frame .security-statistics-modal-row {
    border-color: #292f38;
}

[data-theme="dark"] .security-events-frame .security-statistics-modal-bar,
[data-theme="dark"] .waf-dashboard-frame .security-statistics-modal-bar {
    background: #272d36;
}

@media (max-width: 640px) {
    .security-events-frame .security-statistics-modal,
    .waf-dashboard-frame .security-statistics-modal {
        padding: 12px;
    }

    .security-events-frame .security-statistics-modal-panel,
    .waf-dashboard-frame .security-statistics-modal-panel {
        width: 100%;
    }

    .security-events-frame .security-statistics-modal-head,
    .security-events-frame .security-statistics-modal-body,
    .waf-dashboard-frame .security-statistics-modal-head,
    .waf-dashboard-frame .security-statistics-modal-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .security-events-frame .security-statistics-modal-row,
    .waf-dashboard-frame .security-statistics-modal-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .security-events-frame .security-statistics-modal-filter,
    .waf-dashboard-frame .security-statistics-modal-filter {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.security-events-table-head {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 14px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--bg-depth));
}

.security-events-table-head h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
    letter-spacing: 0;
}

.security-events-table-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-color: var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-card));
    box-shadow: none;
}

.security-events-table-card .dashboard-widget-head {
    min-height: 64px;
}

.security-events-table-card .card-title-sm {
    margin-top: 2px;
}

.security-events-table-panel .security-events-tools {
    gap: 10px;
}

.security-events-table-panel .table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-top: 0;
    background: var(--operator-surface, var(--bg-card));
}

.security-events-table-panel .security-events-table {
    min-width: 1040px;
    table-layout: fixed;
}

.security-events-table-panel .security-events-table th {
    height: 36px;
    padding: 0 12px;
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--bg-depth));
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.security-events-table-panel .security-events-table td {
    height: 52px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    font-size: 13px;
    vertical-align: middle;
}

.security-events-table-panel .security-events-table th:nth-child(1) {
    width: 134px;
}

.security-events-table-panel .security-events-table th:nth-child(2) {
    width: auto;
}

.security-events-table-panel .security-events-table th:nth-child(3) {
    width: 130px;
}

.security-events-table-panel .security-events-table th:nth-child(4) {
    width: 160px;
}

.security-events-table-panel .security-events-table th:nth-child(5) {
    width: 172px;
}

.security-events-table-panel .security-events-table th:nth-child(6) {
    width: 88px;
}

.security-events-table-panel .security-events-table th:nth-child(7) {
    width: 44px;
}

.security-events-table-panel .security-events-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Request events: dense investigation table */
.security-events-table-head {
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 0 18px;
    background: var(--operator-surface, #ffffff);
}

.security-events-table-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 10px;
}

.security-events-table-head h3 {
    font-size: 15px;
    font-weight: 720;
}

.security-events-table-heading > span,
.security-events-table-hint {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 560;
}

.security-events-table-heading > span {
    padding-left: 10px;
    border-left: 1px solid var(--operator-line-soft, #eceff3);
    font-variant-numeric: tabular-nums;
}

.security-events-table-hint {
    white-space: nowrap;
}

.security-events-table-panel .table-container {
    max-height: min(620px, 64vh);
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    scrollbar-color: var(--operator-line, #d9dde3) transparent;
    scrollbar-width: thin;
}

.security-events-table-panel .security-events-table {
    min-width: 1100px;
}

.security-events-table-panel .security-events-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 40px;
    padding: 0 14px;
    border-bottom-color: var(--operator-line, #d9dde3);
    background: var(--operator-surface-muted, #f7f8fa);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .065em;
}

.security-events-table-panel .security-events-table td {
    height: 60px;
    padding: 9px 14px;
    border-bottom-color: var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
}

.security-events-table-panel .security-events-table th:nth-child(1) { width: 130px; }
.security-events-table-panel .security-events-table th:nth-child(2) { width: 65px; }
.security-events-table-panel .security-events-table th:nth-child(3) { width: 15%; }
.security-events-table-panel .security-events-table th:nth-child(4) { width: 15%; }
.security-events-table-panel .security-events-table th:nth-child(5) { width: 130px; }
.security-events-table-panel .security-events-table th:nth-child(6) { width: 145px; }
.security-events-table-panel .security-events-table th:nth-child(7) { width: 135px; }
.security-events-table-panel .security-events-table th:nth-child(8) { width: 65px; }
.security-events-table-panel .security-events-table th:nth-child(9) { width: 75px; }
.security-events-table-panel .security-events-table th:nth-child(10) { width: 30px; }

.security-events-table-panel .security-decision-row:hover td,
.security-events-table-panel .security-decision-row:focus-visible td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, #ffffff));
}

.security-events-table-panel .security-event-time-cell {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 580;
    font-variant-numeric: tabular-nums;
}

.security-events-table-panel .security-event-request {
    gap: 9px;
}

.security-events-table-panel .security-event-chip {
    min-width: 42px;
    min-height: 20px;
    padding: 0 6px;
    border-color: var(--operator-line-soft, #eceff3);
    background: var(--operator-surface-muted, #f7f8fa);
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 700;
}

.security-events-table-panel .security-event-request-link,
.security-events-table-panel .security-source-ip strong,
.security-events-table-panel .security-event-route strong {
    font-size: 13px;
    font-weight: 680;
    line-height: 1.25;
}

.security-events-table-panel .security-events-table-path .security-event-request-link,
.security-events-table-panel .security-events-table-host .security-event-host {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-events-table-panel .security-event-host {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 580;
}

.security-events-table-panel .security-event-meta,
.security-events-table-panel .security-source-ip > span,
.security-events-table-panel .security-event-route > span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 520;
    line-height: 1.25;
}

.security-events-table-panel .security-events-table-status .security-status-plain {
    min-height: 24px;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 10px;
}

.security-events-table-panel .security-events-table-status .security-status-plain > strong {
    font-size: 10px;
    font-weight: 720;
}

.security-events-table-panel .security-events-table-status .security-status-plain > span:last-child {
    font-size: 9px;
    font-weight: 600;
}

.security-events-table-panel .security-event-latency strong,
.security-events-table-panel .security-event-transfer {
    font-size: 12px;
    font-weight: 680;
    font-variant-numeric: tabular-nums;
}

.security-events-table-panel .security-event-latency span {
    font-size: 10px;
    font-weight: 560;
}

@media (max-width: 720px) {
    .security-events-table-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
        padding: 13px 14px;
    }

    .security-events-table-hint {
        display: none;
    }
}

[data-theme="dark"] .security-events-table-panel .security-events-table th {
    background: #161b22;
}

[data-theme="dark"] .security-events-table-panel .security-events-table td {
    background: #12161c;
    border-bottom-color: #282e37;
}

[data-theme="dark"] .security-events-table-panel .security-event-chip {
    border-color: #303743;
    background: #1a2029;
    color: #c6ced9;
}

[data-theme="dark"] .security-events-table-panel .security-decision-row:hover td,
[data-theme="dark"] .security-events-table-panel .security-decision-row:focus-visible td {
    background: #171d25;
}

.security-event-stack {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.security-event-primary,
.security-event-meta,
.security-event-chip,
.security-event-time-cell,
.security-event-score,
.security-event-latency {
    line-height: 1.35;
}

.security-event-primary {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 650;
}

.security-event-meta,
.security-event-time-cell,
.security-event-latency {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 520;
}

.system-health-module-action {
    display: block;
    margin-top: 11px;
    color: var(--operator-link, var(--primary));
    font-size: 12px;
    font-weight: 700;
}

.security-event-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 18px;
    padding: 0 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: color-mix(in srgb, var(--bg-depth) 74%, transparent);
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.security-event-score {
    color: var(--text-main);
    font-weight: 700;
}

.security-decision-row {
    outline: 0;
    transition: background 140ms ease;
}

.security-decision-row:hover td,
.security-decision-row:focus-visible td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, var(--bg-card)));
}

.security-decision-row:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--operator-link, var(--primary)) 72%, transparent);
    outline-offset: -2px;
}

.security-event-client,
.security-event-evidence,
.security-source-ip {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.security-event-request {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.security-event-decision {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.security-status-plain,
.security-action-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 21px;
    padding: 0 6px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.security-event-client strong,
.security-event-request strong,
.security-event-decision strong,
.security-event-evidence strong,
.security-source-ip strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-event-request-link {
    cursor: pointer;
    transition: color 140ms ease, text-decoration-color 140ms ease;
}

.security-event-request-link:hover {
    color: var(--operator-orange, var(--brand-orange));
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
}

.security-event-client span,
.security-event-decision .security-event-stack > span,
.security-event-evidence span,
.security-event-evidence em,
.security-source-ip > span,
.security-event-route > span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 520;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-action-badge {
    justify-content: center;
    min-width: 58px;
}

.security-action-badge.tone-neutral,
.security-status-plain.tone-neutral {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--bg-depth) 72%, transparent);
    color: var(--text-secondary);
}

.security-action-badge.tone-success,
.security-status-plain.tone-success,
.security-action-badge.tone-info,
.security-status-plain.tone-info {
    border-color: color-mix(in srgb, #5f86a2 30%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, #5f86a2 10%, transparent);
    color: color-mix(in srgb, #5f86a2 88%, var(--text-main));
}

.security-action-badge.tone-warning,
.security-status-plain.tone-warning,
.security-action-badge.tone-danger,
.security-status-plain.tone-danger {
    border-color: color-mix(in srgb, var(--brand-orange) 30%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--brand-orange) 9%, transparent);
    color: color-mix(in srgb, var(--brand-orange) 88%, var(--text-main));
}

.security-status-plain {
    gap: 4px;
    padding-right: 6px;
}

.security-status-plain > strong {
    color: currentColor;
    font-size: 10px;
    font-weight: 700;
}

.security-status-plain > span:last-child {
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 650;
}

.security-status-dot {
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: currentColor;
}

.security-event-time-cell {
    display: block;
    color: var(--text-secondary);
    white-space: nowrap;
}

.security-event-source-address,
.security-event-route strong {
    font-weight: 650;
}

.security-event-transfer {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.security-event-latency {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 3px;
    white-space: nowrap;
}

.security-event-latency strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 740;
}

.security-event-latency span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
}

.security-decision-open-head,
.security-decision-open-cell {
    padding-right: 12px !important;
    padding-left: 0 !important;
    text-align: right !important;
}

.security-decision-open {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    color: var(--text-muted);
    transform: rotate(45deg);
    transition: color 140ms ease, transform 140ms ease;
}

.security-decision-row:hover .security-decision-open,
.security-decision-row:focus-visible .security-decision-open {
    color: var(--operator-link, var(--primary));
    transform: translateX(2px) rotate(45deg);
}

.security-drawer-body {
    padding: 16px 18px 22px;
}

.security-event-snapshot {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
}

.security-event-snapshot-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.security-event-snapshot-kicker {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.security-event-snapshot-main strong {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 720;
    line-height: 1.25;
}

.security-event-snapshot-main span:last-child {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
}

.security-event-snapshot-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.security-event-snapshot-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--operator-line-soft, var(--border));
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 680;
    line-height: 1;
}

.security-detail-actions {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
}

.security-detail-action-group {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.security-detail-action-group > span {
    padding-top: 7px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.security-detail-action-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.security-detail-action {
    min-height: 26px;
    padding: 0 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 680;
}

.security-event-detail-section {
    margin-top: 18px;
}

.security-event-detail-section:first-of-type {
    margin-top: 14px;
}

.security-event-detail-section h4,
.security-raw-event summary {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.security-detail-rows {
    display: grid;
    border-top: 1px solid var(--operator-line-soft, var(--border));
}

.security-detail-grid .security-detail-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.security-detail-row {
    display: grid;
    grid-template-columns: minmax(108px, 0.34fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
    background: transparent;
}

.security-detail-grid .security-detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-right: 12px;
}

.security-detail-row span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
}

.security-detail-row strong {
    min-width: 0;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.security-detail-collapse {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--operator-line-soft, var(--border));
}

.security-detail-collapse summary,
.security-raw-event summary {
    cursor: pointer;
}

.security-detail-code,
.security-raw-event pre {
    margin: 8px 0 0;
    padding: 10px 0 0;
    max-height: 240px;
    overflow: auto;
    border-top: 1px solid var(--operator-line-soft, var(--border));
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace);
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.security-detail-empty {
    padding: 10px 0;
    border-top: 1px solid var(--operator-line-soft, var(--border));
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 620px) {
    .security-detail-grid .security-detail-rows,
    .security-detail-action-group {
        grid-template-columns: 1fr;
    }

    .security-detail-action-group > span {
        padding-top: 0;
    }

    .security-detail-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.security-event-inspector-panel {
    width: min(680px, 100vw);
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--operator-line, var(--border));
    background: var(--operator-surface, var(--bg-card));
    box-shadow: -12px 0 36px color-mix(in srgb, #000 18%, transparent);
    animation: security-inspector-enter 160ms ease-out;
}

@keyframes security-inspector-enter {
    from { transform: translateX(18px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.security-event-inspector-header {
    min-height: 72px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--operator-line, var(--border));
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--bg-depth));
}

.security-event-inspector-title-block {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.security-event-inspector-heading > span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.security-event-inspector-heading h3 {
    max-width: 540px;
    margin: 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 17px;
    font-weight: 760;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-event-inspector-close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--operator-line, var(--border));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-card));
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.security-event-inspector-close:hover,
.security-event-inspector-close:focus-visible {
    border-color: var(--operator-link, var(--primary));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, var(--operator-surface, var(--bg-card)));
    color: var(--operator-link, var(--primary));
    outline: 0;
}

.security-event-inspector-body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: color-mix(in srgb, var(--operator-surface, var(--bg-card)) 98%, var(--bg-depth));
}

.security-event-inspector {
    min-height: 100%;
    padding-bottom: 18px;
}

.security-inspector-overview {
    padding: 16px 18px;
    border-bottom: 1px solid var(--operator-line, var(--border));
    background: var(--operator-surface, var(--bg-card));
}

.security-inspector-decision {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.security-inspector-decision-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: var(--text-secondary);
}

.security-inspector-decision-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.security-inspector-decision-copy > span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.security-inspector-decision-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.security-inspector-decision-title strong {
    color: var(--text-main);
    font-size: 19px;
    font-weight: 780;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.security-inspector-decision-title span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    border: 1px solid var(--operator-line, var(--border));
    border-radius: 4px;
    background: color-mix(in srgb, var(--bg-depth) 72%, transparent);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 720;
    line-height: 1;
}

.security-inspector-decision-copy p {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}

.security-inspector-decision-copy p small {
    color: var(--text-muted);
    font: inherit;
    font-weight: 560;
}

.security-inspector-overview.tone-success .security-inspector-decision-icon,
.security-inspector-overview.tone-info .security-inspector-decision-icon {
    color: #5f86a2;
}

.security-inspector-overview.tone-warning .security-inspector-decision-icon,
.security-inspector-overview.tone-danger .security-inspector-decision-icon {
    color: var(--brand-orange);
}

.security-inspector-summary {
    display: grid;
    grid-template-columns: 1.35fr .75fr .65fr 1fr;
    margin: 14px 0 0;
    overflow: hidden;
    border: 1px solid var(--operator-line-soft, var(--border));
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--bg-depth));
}

.security-inspector-summary > div {
    min-width: 0;
    padding: 9px 10px;
}

.security-inspector-summary > div + div {
    border-left: 1px solid var(--operator-line-soft, var(--border));
}

.security-inspector-summary dt {
    margin: 0 0 3px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.security-inspector-summary dd {
    margin: 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-inspector-command-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--operator-line, var(--border));
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--bg-depth));
}

.security-inspector-command-bar > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.security-inspector-command-bar-open {
    margin-left: auto;
}

.security-inspector-action {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid var(--operator-line, var(--border));
    border-radius: 4px;
    background: var(--operator-surface, var(--bg-card));
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.security-inspector-action > span {
    display: inline-flex;
    color: var(--text-muted);
}

.security-inspector-action > span svg {
    width: 13px;
    height: 13px;
}

.security-inspector-action strong {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.security-inspector-action:hover,
.security-inspector-action:focus-visible {
    border-color: var(--operator-link, var(--primary));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 6%, var(--operator-surface, var(--bg-card)));
    color: var(--operator-link, var(--primary));
    outline: 0;
}

.security-inspector-action:hover > span,
.security-inspector-action:focus-visible > span {
    color: currentColor;
}

.security-inspector-context-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
    align-items: start;
    gap: 12px;
    padding: 16px 18px 0;
}

.security-inspector-section {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, var(--border));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-card));
}

.security-inspector-section--evidence,
.security-inspector-raw {
    margin: 12px 18px 0;
}

.security-inspector-section-head {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--bg-depth));
}

.security-inspector-section-head > span {
    display: inline-flex;
    color: var(--text-muted);
}

.security-inspector-section-head > span svg {
    width: 14px;
    height: 14px;
}

.security-inspector-section-head h4,
.security-inspector-section-head strong {
    margin: 0;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 740;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.security-inspector-fields {
    margin: 0;
}

.security-inspector-fields > div {
    display: grid;
    grid-template-columns: minmax(86px, .34fr) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-width: 0;
    padding: 9px 12px;
}

.security-inspector-fields > div + div {
    border-top: 1px solid var(--operator-line-soft, var(--border));
}

.security-inspector-fields dt {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.35;
}

.security-inspector-fields dd {
    min-width: 0;
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 680;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.security-inspector-section--request .security-inspector-fields > div:nth-child(2) dd,
.security-inspector-section--source .security-inspector-fields > div:first-child dd {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace);
}

.security-inspector-disclosure {
    margin: 0 12px 10px;
    padding-top: 9px;
    border-top: 1px solid var(--operator-line-soft, var(--border));
}

.security-inspector-disclosure summary,
.security-inspector-raw summary {
    cursor: pointer;
}

.security-inspector-disclosure summary {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
}

.security-inspector-code,
.security-inspector-raw pre {
    max-height: 280px;
    margin: 8px 0 0;
    overflow: auto;
    color: var(--text-secondary);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace);
    font-size: 10px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.security-inspector-code {
    padding: 9px 0 0;
    border-top: 1px solid var(--operator-line-soft, var(--border));
}

.security-inspector-empty {
    padding: 12px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.security-inspector-raw > summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 12px;
    list-style: none;
}

.security-inspector-raw > summary::-webkit-details-marker {
    display: none;
}

.security-inspector-raw > summary > span:last-child {
    display: inline-flex;
    color: var(--text-muted);
    transition: transform 140ms ease;
}

.security-inspector-raw[open] > summary > span:last-child {
    transform: rotate(180deg);
}

.security-inspector-raw pre {
    margin: 0;
    padding: 12px;
    border-top: 1px solid var(--operator-line-soft, var(--border));
    background: color-mix(in srgb, var(--bg-depth) 64%, transparent);
}

@media (max-width: 720px) {
    .security-event-inspector-panel {
        width: 100vw;
        border-left: 0;
    }

    .security-event-inspector-close {
        width: 44px;
        height: 44px;
    }

    .security-inspector-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .security-inspector-summary > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--operator-line-soft, var(--border));
    }

    .security-inspector-summary > div:nth-child(4) {
        border-top: 1px solid var(--operator-line-soft, var(--border));
    }

    .security-inspector-command-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .security-inspector-command-bar-open {
        margin-left: 0;
    }

    .security-inspector-action {
        min-height: 44px;
    }

    .security-inspector-context-grid {
        grid-template-columns: 1fr;
    }
}

/* Security Events: native flat operator inspector */
.security-event-inspector-panel {
    width: min(720px, 100vw);
    border-radius: 0;
    background: var(--operator-surface, var(--bg-card));
    box-shadow: -8px 0 24px color-mix(in srgb, #000 16%, transparent);
    animation: none;
}

.security-event-inspector-header {
    min-height: 72px;
    padding: 0 20px;
    background: var(--operator-surface, var(--bg-card));
}

.security-event-inspector-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.security-event-inspector-method {
    min-width: 48px;
    min-height: 28px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border: 1px solid var(--operator-line, var(--border));
    border-radius: 0;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, var(--bg-depth));
    color: var(--text-secondary);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .04em;
}

.security-event-inspector-heading {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.security-event-inspector-header h3 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 17px;
    font-weight: 720;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-event-inspector-title-block p {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    margin: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 590;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-event-inspector-close {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 0;
    color: var(--text-secondary);
}

.security-event-inspector-close svg {
    width: 15px;
    height: 15px;
}

.security-event-inspector-close:hover,
.security-event-inspector-close:focus-visible {
    border-color: var(--operator-line, var(--border));
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, var(--bg-depth));
    color: var(--text-main);
}

.security-event-inspector-body {
    background: var(--operator-surface, var(--bg-card));
}

.security-event-inspector {
    min-height: 100%;
    padding: 0;
}

.security-inspector-overview {
    padding: 0;
    border-bottom: 1px solid var(--operator-line, var(--border));
    background: var(--operator-surface, var(--bg-card));
}

.security-inspector-decision {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 172px;
    gap: 20px;
    padding: 18px 20px;
    box-shadow: inset 2px 0 0 var(--operator-orange, var(--brand-orange));
}

.security-inspector-label {
    padding-top: 0;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.security-inspector-decision-copy {
    gap: 6px;
}

.security-inspector-decision-title {
    gap: 8px;
}

.security-inspector-decision-title strong {
    font-size: 22px;
    font-weight: 740;
    letter-spacing: -.02em;
}

.security-inspector-decision-copy p {
    gap: 5px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 620;
}

.security-inspector-decision-copy p span {
    color: var(--text-muted);
    font-weight: 560;
}

.security-inspector-decision-copy p span::before {
    content: "·";
    margin-right: 5px;
}

.security-inspector-response {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
    padding-left: 18px;
    border-left: 1px solid var(--operator-line-soft, var(--border));
}

.security-inspector-response > span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.security-inspector-response strong {
    color: var(--text-main);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 14px;
    font-weight: 720;
    line-height: 1.3;
}

.security-inspector-response small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 590;
    line-height: 1.25;
}

.security-inspector-summary {
    grid-template-columns: 1.35fr .7fr .7fr 1fr;
    margin: 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--operator-line-soft, var(--border));
    border-radius: 0;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--bg-depth));
}

.security-inspector-summary > div {
    padding: 11px 14px;
}

.security-inspector-summary > div:first-child {
    padding-left: 20px;
}

.security-inspector-summary > div:last-child {
    padding-right: 20px;
}

.security-inspector-summary dt {
    margin-bottom: 4px;
    font-size: 9px;
}

.security-inspector-summary dd {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 11px;
    font-weight: 700;
}

.security-inspector-command-bar {
    min-height: 52px;
    padding: 9px 20px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--bg-depth));
}

.security-inspector-command-bar-open {
    padding-left: 10px;
    border-left: 1px solid var(--operator-line-soft, var(--border));
}

.security-inspector-action {
    min-height: 32px;
    gap: 6px;
    padding: 0 10px;
    border-radius: 0;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 680;
}

.security-inspector-action > span {
    display: inline-flex;
    color: var(--text-muted);
}

.security-inspector-action > span svg {
    width: 13px;
    height: 13px;
}

.security-inspector-action strong {
    font-size: 10px;
    font-weight: 680;
}

.security-inspector-action:hover,
.security-inspector-action:focus-visible {
    border-color: var(--operator-line, var(--border));
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, var(--bg-depth));
    color: var(--text-main);
}

.security-inspector-details {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(238px, .8fr);
    align-items: stretch;
    border-bottom: 1px solid var(--operator-line, var(--border));
}

.security-inspector-section {
    min-width: 0;
    margin: 0;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--operator-line, var(--border));
    border-radius: 0;
    background: transparent;
}

.security-inspector-section--evidence,
.security-inspector-raw {
    margin: 0;
}

.security-inspector-details .security-inspector-section {
    border-bottom: 0;
}

.security-inspector-section--source {
    border-left: 1px solid var(--operator-line, var(--border));
}

.security-inspector-section-head {
    min-height: 46px;
    padding: 0 20px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--bg-depth));
}

.security-inspector-section-head h4,
.security-inspector-section-head strong {
    font-size: 12px;
    font-weight: 700;
}

.security-inspector-fields > div {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    min-height: 44px;
    padding: 10px 20px;
}

.security-inspector-fields dt {
    font-size: 11px;
    font-weight: 620;
}

.security-inspector-fields dd {
    font-size: 12px;
    font-weight: 660;
}

.security-inspector-disclosure {
    margin: 0 20px 12px;
    padding-top: 10px;
}

.security-inspector-disclosure summary {
    font-size: 10px;
    font-weight: 680;
}

.security-inspector-empty {
    padding: 16px 20px;
    font-size: 12px;
}

.security-inspector-raw > summary {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 0;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--bg-depth));
}

.security-inspector-raw > summary > strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 680;
}

.security-inspector-raw pre {
    padding: 16px 20px;
    border-radius: 0;
}

@media (max-width: 720px) {
    .security-event-inspector-header {
        padding: 0 14px;
    }

    .security-event-inspector-close {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
    }

    .security-inspector-decision {
        grid-template-columns: minmax(0, 1fr) 148px;
        padding-right: 14px;
        padding-left: 14px;
    }

    .security-inspector-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .security-inspector-summary > div:first-child,
    .security-inspector-summary > div:last-child {
        padding-right: 12px;
        padding-left: 12px;
    }

    .security-inspector-command-bar {
        padding-right: 14px;
        padding-left: 14px;
    }

    .security-inspector-command-bar-open {
        padding-top: 8px;
        padding-left: 0;
        border-top: 1px solid var(--operator-line-soft, var(--border));
        border-left: 0;
    }

    .security-inspector-action {
        min-height: 36px;
    }

    .security-inspector-details {
        grid-template-columns: 1fr;
    }

    .security-inspector-section--source {
        border-top: 1px solid var(--operator-line, var(--border));
        border-left: 0;
    }

    .security-inspector-section-head,
    .security-inspector-fields > div,
    .security-inspector-raw > summary {
        padding-right: 14px;
        padding-left: 14px;
    }
}

@media (max-width: 480px) {
    .security-event-inspector-method {
        min-width: 44px;
    }

    .security-inspector-decision {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .security-inspector-response {
        padding-top: 12px;
        padding-left: 0;
        border-top: 1px solid var(--operator-line-soft, var(--border));
        border-left: 0;
    }

    .security-inspector-fields > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Security Events: operator workbench drawer */
.security-event-inspector-panel {
    width: min(740px, 100vw);
    border-radius: 0;
    background: var(--operator-surface, var(--bg-card));
    box-shadow: -12px 0 32px color-mix(in srgb, #000 20%, transparent);
}

.security-event-inspector-header {
    min-height: 84px;
    padding: 14px 20px;
    align-items: center;
    background: var(--operator-surface, var(--bg-card));
}

.security-event-workbench-heading {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.security-event-workbench-kicker {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
}

.security-event-workbench-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}

.security-event-workbench-title > span {
    min-height: 24px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 48%, var(--operator-line, var(--border)));
    border-radius: 0;
    color: var(--operator-orange, var(--brand-orange));
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .04em;
}

.security-event-workbench-title h3 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-event-workbench-heading > p {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    margin: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 560;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-event-inspector-close {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    margin-top: 2px;
    border-radius: 0;
}

.security-event-inspector-body {
    overflow: hidden;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 98%, var(--bg-depth));
}

.security-event-workbench {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.security-event-workbench-tabs {
    min-height: 44px;
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 20px;
    padding: 0 20px;
    border-bottom: 1px solid var(--operator-line, var(--border));
    background: var(--operator-surface, var(--bg-card));
}

.security-event-workbench-tab {
    position: relative;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 620;
    cursor: pointer;
}

.security-event-workbench-tab:hover,
.security-event-workbench-tab:focus-visible {
    color: var(--text-main);
    outline: 0;
}

.security-event-workbench-tab.is-active {
    color: var(--text-main);
    font-weight: 690;
}

.security-event-workbench-tab.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--operator-orange, var(--brand-orange));
}

.security-event-workbench-panels {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 18px 20px;
}

.security-event-workbench-view {
    display: grid;
    gap: 12px;
}

.security-event-workbench-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, var(--border));
    border-radius: 0;
    background: var(--operator-surface, var(--bg-card));
}

.security-event-workbench-panel-head {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, var(--bg-depth));
}

.security-event-workbench-panel-head > div:first-child {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.security-event-workbench-panel-head h4 {
    margin: 0;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.security-event-workbench-panel-head p {
    margin: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 560;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-event-workbench-outcome {
    display: grid;
    flex: 0 0 auto;
    gap: 2px;
    padding-left: 14px;
    border-left: 1px solid var(--operator-line-soft, var(--border));
    text-align: right;
}

.security-event-workbench-outcome strong {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.security-event-workbench-outcome.is-error strong {
    color: var(--operator-orange, var(--brand-orange));
}

.security-event-workbench-outcome span {
    color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 9px;
    font-weight: 620;
    line-height: 1.25;
}

.security-event-workbench-metrics {
    display: grid;
    grid-template-columns: 1fr 1.45fr .7fr .7fr;
    margin: 0;
}

.security-event-workbench-metrics > div {
    min-width: 0;
    padding: 10px 12px;
    border-right: 1px solid var(--operator-line-soft, var(--border));
}

.security-event-workbench-metrics > div:last-child {
    border-right: 0;
}

.security-event-workbench-metrics dt,
.security-event-workbench-rows dt {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1.2;
}

.security-event-workbench-metrics dd {
    margin: 5px 0 0;
    overflow: hidden;
    color: var(--text-main);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 11px;
    font-weight: 680;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-event-workbench-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(238px, .75fr);
    gap: 14px;
}

.security-event-workbench-panel-body {
    min-width: 0;
}

.security-event-workbench-rows {
    margin: 0;
}

.security-event-workbench-rows > div {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 40px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
}

.security-event-workbench-rows > div:last-child {
    border-bottom: 0;
}

.security-event-workbench-rows dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
}

.security-event-workbench-panel--request .security-event-workbench-rows dd:first-of-type,
.security-event-workbench-panel--source .security-event-workbench-rows > div:first-child dd {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
}

.security-event-workbench-disclosure {
    margin: 0 16px 12px;
    padding-top: 10px;
    border-top: 1px solid var(--operator-line-soft, var(--border));
}

.security-event-workbench-disclosure summary {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
}

.security-event-workbench-disclosure > div {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--operator-line-soft, var(--border));
    color: var(--text-secondary);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.security-event-workbench-empty {
    padding: 16px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.security-event-workbench-raw {
    max-height: none;
    margin: 0;
    padding: 16px;
    overflow: auto;
    border: 0;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, var(--bg-depth));
    color: var(--text-secondary);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.security-event-workbench-actions {
    min-height: 54px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-top: 1px solid var(--operator-line, var(--border));
    background: var(--operator-surface, var(--bg-card));
}

.security-event-workbench-action-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.security-event-workbench-action-group--filters {
    padding-left: 8px;
    border-left: 1px solid var(--operator-line-soft, var(--border));
}

.security-event-workbench-action-group--destination {
    margin-left: auto;
}

.security-event-workbench-action {
    min-height: 30px;
    gap: 5px;
    padding: 0 8px;
    border-radius: 0;
}

.security-event-workbench-action > span {
    display: inline-flex;
}

.security-event-workbench-action > span svg {
    width: 13px;
    height: 13px;
}

.security-event-workbench-action strong {
    font-size: 9px;
    font-weight: 650;
}

/* Traffic event details follow the flat Security Events inspection pattern. */
.security-event-inspector-panel {
    width: min(720px, 100vw);
    box-shadow: -8px 0 24px color-mix(in srgb, #000 18%, transparent);
}

.security-event-inspector-header {
    min-height: 72px;
    padding: 12px 18px;
}

.security-event-workbench-title h3 {
    font-size: 18px;
    font-weight: 680;
}

.security-event-workbench-title > span {
    min-height: 22px;
    padding: 0 6px;
    font-size: 8px;
}

.security-event-workbench-tabs {
    min-height: 42px;
    gap: 18px;
    padding: 0 18px;
}

.security-event-workbench-tab {
    min-height: 42px;
    font-size: 11px;
}

.security-event-workbench-panels {
    padding: 16px 18px 18px;
}

.security-event-workbench-view {
    gap: 16px;
}

.security-event-detail-response,
.security-event-detail-section {
    min-width: 0;
    border: 1px solid var(--operator-line, var(--border));
    background: var(--operator-surface, var(--bg-card));
}

.security-event-detail-response-head,
.security-event-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
}

.security-event-detail-response-head > div:first-child,
.security-event-detail-section-head > div:first-child {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.security-event-detail-response-head h4,
.security-event-detail-section-head h4 {
    margin: 0;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.security-event-detail-response-head p,
.security-event-detail-section-head p {
    margin: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-event-detail-outcome {
    display: grid;
    flex: 0 0 auto;
    gap: 1px;
    padding-left: 12px;
    border-left: 1px solid var(--operator-line-soft, var(--border));
    color: var(--text-muted);
    text-align: right;
}

.security-event-detail-outcome strong {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
}

.security-event-detail-outcome span {
    font-size: 9px;
    line-height: 1.2;
}

.security-event-detail-outcome.is-error strong {
    color: var(--operator-orange, var(--brand-orange));
}

.security-event-detail-metrics {
    display: grid;
    grid-template-columns: 1fr 1.35fr .7fr .7fr;
    margin: 0;
}

.security-event-detail-metrics > div {
    min-width: 0;
    padding: 9px 12px;
    border-right: 1px solid var(--operator-line-soft, var(--border));
}

.security-event-detail-metrics > div:last-child {
    border-right: 0;
}

.security-event-detail-metrics dt,
.security-event-detail-rows dt {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.2;
}

.security-event-detail-metrics dd {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-event-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
    gap: 16px;
}

.security-event-detail-rows {
    margin: 0;
}

.security-event-detail-rows > div {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    align-items: center;
    min-height: 38px;
    gap: 12px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
}

.security-event-detail-rows > div:last-child {
    border-bottom: 0;
}

.security-event-detail-rows dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-main);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.3;
}

.security-event-workbench-panel--request .security-event-detail-rows dd:first-of-type,
.security-event-workbench-panel--source .security-event-detail-rows > div:first-child dd {
    font-family: var(--font-main);
}

.security-event-detail-section .security-event-workbench-disclosure {
    margin: 0 12px 10px;
    padding-top: 8px;
}

.security-event-detail-section .security-event-workbench-raw {
    padding: 12px;
    font-size: 10px;
}

.security-event-workbench-actions {
    min-height: 50px;
    gap: 6px;
    padding: 8px 18px;
}

.security-event-workbench-action-group {
    gap: 4px;
}

.security-event-workbench-action {
    min-height: 28px;
    padding: 0 7px;
}

.security-event-workbench-action strong {
    font-size: 9px;
    font-weight: 620;
}

@media (max-width: 720px) {
    .security-event-detail-grid {
        grid-template-columns: 1fr;
    }

    .security-event-detail-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .security-event-detail-metrics > div:nth-child(2) {
        border-right: 0;
    }

    .security-event-detail-metrics > div:nth-child(n + 3) {
        border-top: 1px solid var(--operator-line-soft, var(--border));
    }
}

/* Traffic Event drawer: enterprise inspection workbench */
#security-event-explorer-drawer,
.security-event-drawer {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: 100% !important;
    min-height: 100vh !important;
    min-height: 100% !important;
    max-height: none !important;
    z-index: 99999 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    background: var(--overlay-backdrop, rgba(0, 0, 0, 0.65)) !important;
    overflow: hidden !important;
}

#security-event-explorer-drawer.hidden,
.security-event-drawer.hidden {
    display: none !important;
}

.security-event-inspector-panel,
.security-event-drawer-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(560px, 100vw) !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: 100% !important;
    min-height: 100vh !important;
    min-height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: -14px 0 36px rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--bg-card) !important;
    z-index: 100000 !important;
}

.security-event-inspector-header {
    min-height: 68px !important;
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 16px 20px 14px !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    flex: 0 0 auto !important;
    min-height: 74px !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.security-event-workbench-heading {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.security-event-workbench-kicker {
    color: var(--text-dim, #8b949e) !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-family: var(--font-main) !important;
    line-height: 1.2 !important;
}

.security-event-workbench-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.security-event-workbench-title > span,
.security-event-workbench-title .security-event-method {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    padding: 2px 7px !important;
    border-radius: var(--radius-sm, 3px) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    background: color-mix(in srgb, var(--text-main) 8%, var(--bg-depth)) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    letter-spacing: 0.04em !important;
    font-family: var(--font-mono, monospace) !important;
    flex-shrink: 0 !important;
}

.security-event-workbench-title h3 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -.015em !important;
    color: var(--text-main) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-family: var(--font-mono, monospace) !important;
    line-height: 1.3 !important;
}

.security-event-workbench-heading > p {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
    font-family: var(--font-mono, monospace) !important;
    line-height: 1.2 !important;
}

.security-event-inspector-close {
    align-self: flex-start !important;
    margin-top: 2px !important;
    width: auto !important;
    min-width: 68px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: var(--radius-sm, 3px) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-depth) !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}

.security-event-inspector-close svg {
    width: 12px !important;
    height: 12px !important;
    stroke-width: 2 !important;
}

.security-event-inspector-close:hover,
.security-event-inspector-close:focus-visible {
    color: var(--text-main) !important;
    border-color: var(--border-hover, var(--text-muted)) !important;
    background: color-mix(in srgb, var(--text-main) 6%, var(--bg-depth)) !important;
    outline: none !important;
}

/* Body: Flex container that DOES NOT SCROLL */
.security-event-inspector-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100% - 68px) !important;
    height: calc(100vh - 68px) !important;
    height: calc(100dvh - 68px) !important;
    max-height: none !important;
    overflow: hidden !important;
    background: var(--bg-depth) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* Workbench container: Full height flex column */
.security-event-workbench {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    background: var(--bg-depth) !important;
    box-sizing: border-box !important;
}

/* Tabs: Pinned at top */
.security-event-workbench-tabs {
    min-height: 40px !important;
    height: 40px !important;
    display: flex !important;
    flex: 0 0 40px !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    box-sizing: border-box !important;
}

.security-event-workbench-tab {
    position: relative;
    min-height: 40px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color 0.12s ease;
}

.security-event-workbench-tab:hover,
.security-event-workbench-tab:focus-visible {
    color: var(--text-main);
    outline: none;
}

.security-event-workbench-tab.is-active {
    color: var(--text-main);
    font-weight: 700;
}

.security-event-workbench-tab.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--brand-orange, #e06c75);
}

/* Panels: The SINGLE scrollable container in the drawer */
.security-event-workbench-panels {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 16px 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: var(--bg-depth) !important;
    box-sizing: border-box !important;
}

.security-event-workbench-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Hero summary card */
.security-event-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 3px);
    background: var(--bg-card);
    gap: 12px;
    flex-shrink: 0;
}

.security-event-hero-status {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.security-event-hero-code {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-main);
}

.security-event-hero-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.security-event-hero-status.is-error .security-event-hero-code,
.security-event-hero-status.is-error .security-event-hero-label {
    color: var(--brand-orange, #e06c75);
}

.security-event-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.security-event-hero-latency {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    color: var(--text-muted);
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
}

/* Enterprise detail cards */
.security-event-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 3px);
    background: var(--bg-card);
    overflow: hidden;
    flex-shrink: 0;
}

.security-event-card-head {
    padding: 9px 14px;
    background: color-mix(in srgb, var(--bg-depth) 65%, var(--bg-card));
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.security-event-card-title {
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim, #8b949e);
    font-family: var(--font-main);
}

.security-event-card-body {
    padding: 2px 14px;
}

.security-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.04));
    gap: 16px;
}

.security-event-row:last-child {
    border-bottom: 0;
}

.security-event-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.security-event-val {
    margin: 0;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.security-event-val.is-mono {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 500;
}

/* Raw event view */
.security-event-raw-card {
    display: flex;
    flex-direction: column;
}

.security-event-raw-body {
    margin: 0;
    padding: 16px;
    background: var(--bg-depth);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-height: none;
    overflow: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Docked Bottom Command Bar - Clean, Compact, Integrated (No floating/overlap) */
.security-event-workbench-actions {
    position: relative !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 12px 18px !important;
    border-top: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    box-shadow: none !important;
    z-index: 5 !important;
}

.security-event-action-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.security-event-action-kicker {
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim, #8b949e);
    font-family: var(--font-main);
    line-height: 1.2;
}

.security-event-action-buttons,
.security-event-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.security-event-action-btn {
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: var(--radius-sm, 3px);
    border: 1px solid var(--border);
    background: var(--bg-depth);
    color: var(--text-secondary);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.security-event-action-btn:hover,
.security-event-action-btn:focus-visible {
    border-color: var(--border-hover, var(--text-muted));
    background: color-mix(in srgb, var(--text-main) 7%, var(--bg-depth));
    color: var(--text-main);
    outline: none;
}

.security-event-action-btn.is-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.security-event-action-btn.is-primary:hover {
    filter: brightness(1.08);
}

.security-event-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-dim, #8b949e);
}

.security-event-action-icon svg {
    width: 12px;
    height: 12px;
}

.security-event-action-btn:hover .security-event-action-icon {
    color: var(--text-main);
}

@media (max-width: 540px) {
    .security-event-inspector-header {
        padding: 16px 18px;
    }

    .security-event-simple-detail {
        padding: 0 18px 18px;
    }

    .security-event-simple-detail .security-event-detail-rows > div {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: 12px;
    }
}

@media (max-width: 720px) {
    .security-event-inspector-header {
        min-height: 86px;
        padding: 14px;
    }

    .security-event-workbench-title h3 {
        font-size: 19px;
    }

    .security-event-workbench-tabs {
        padding: 0 14px;
    }

    .security-event-workbench-panels {
        padding: 14px;
    }

    .security-event-workbench-grid {
        grid-template-columns: 1fr;
    }

    .security-event-workbench-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .security-event-workbench-metrics > div:nth-child(2) {
        border-right: 0;
    }

    .security-event-workbench-metrics > div:nth-child(n + 3) {
        border-top: 1px solid var(--operator-line-soft, var(--border));
    }

    .security-event-workbench-actions {
        align-items: stretch;
        flex-wrap: wrap;
        padding: 10px 14px;
    }

    .security-event-workbench-action-group--destination {
        width: 100%;
        margin-left: 0;
    }

    .security-event-workbench-action-group--destination .security-event-workbench-action {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .security-event-workbench-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .security-event-workbench-outcome {
        width: 100%;
        padding-top: 10px;
        padding-left: 0;
        border-top: 1px solid var(--operator-line-soft, var(--border));
        border-left: 0;
        text-align: left;
    }

    .security-event-workbench-rows > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .security-event-workbench-action-group {
        width: 100%;
        flex-wrap: wrap;
    }

    .security-event-workbench-action-group--filters {
        padding-top: 8px;
        padding-left: 0;
        border-top: 1px solid var(--operator-line-soft, var(--border));
        border-left: 0;
    }
}

.security-filterable-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
}

.security-filterable-value > span {
    min-width: 0;
}

.security-filter-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-card) 82%, transparent);
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 140ms ease, color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.security-filter-trigger:hover,
.security-filter-trigger:focus-visible,
.security-events-table tbody tr:hover .security-filter-trigger,
.security-events-table tbody tr:focus-within .security-filter-trigger {
    opacity: 1;
}

.security-filter-trigger:hover,
.security-filter-trigger:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
    color: var(--primary);
}

.security-events-table .text-right .security-filterable-value {
    justify-content: flex-end;
}

/* Traffic events table follows the Origins table enterprise style */
.security-events-routing-table.config-enterprise-table th {
    padding: 11px 14px;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
}

.security-events-routing-table.config-enterprise-table td {
    padding: 13px 14px;
    font-size: 13px;
}

.security-events-empty-state {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px;
    text-align: center;
}

.security-events-empty-state h3,
.security-events-empty-state p {
    margin: 0;
}

[data-theme="dark"] .security-events-period-control,
[data-theme="dark"] .security-time-dropdown-trigger,
[data-theme="dark"] .security-time-panel,
[data-theme="dark"] .security-time-field input,
[data-theme="dark"] .security-time-field select,
[data-theme="dark"] .security-time-preset,
[data-theme="dark"] .security-time-mode,
[data-theme="dark"] .security-time-apply,
[data-theme="dark"] .security-events-frame .security-active-filters,
[data-theme="dark"] .security-events-stat-card .security-stat-card-expand {
    background: var(--operator-surface, #11141a);
}

@media (max-width: 1220px) {
    .security-events-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .security-events-analysis-grid {
        grid-template-columns: 1fr;
    }

    .security-events-action-mix-body {
        min-height: auto;
    }
}

@media (max-width: 900px) {
    .security-events-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .security-events-filter-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .security-events-page-header {
        padding-right: 24px;
        padding-left: 24px;
    }

    .security-events-command-bar {
        align-items: flex-start;
        flex-wrap: wrap;
        margin-right: -24px;
        margin-left: -24px;
        padding-right: 24px;
        padding-left: 24px;
    }

    .security-events-table-card .dashboard-widget-head {
        min-height: auto;
    }

    .security-events-table-panel .security-events-table th:nth-child(3) {
        width: 280px;
    }

    .security-events-frame .security-active-filters {
        justify-content: flex-start;
        width: auto;
        margin-left: 0;
    }

    .security-events-header-actions {
        justify-content: flex-end;
        width: auto;
        margin-left: auto;
    }
}

@media (max-width: 720px) {
    .security-events-metric-strip {
        grid-template-columns: 1fr;
    }

    .security-events-metric-strip .operator-metric-item,
    .security-events-metric-strip .operator-metric-item:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 680px) {
    .security-events-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .security-events-action-legend-row {
        min-height: 44px;
    }

    .security-events-page-header {
        padding: 22px 18px 0;
    }

    .security-events-command-bar {
        margin: 20px -18px 0;
        padding: 12px 18px;
    }

    .security-events-header-actions {
        align-items: stretch;
        flex-direction: row;
    }

    .security-events-period-control {
        justify-content: space-between;
        width: 100%;
    }

    .security-events-filter-toolbar {
        width: 100%;
    }

    .security-events-filter-left,
    .security-events-filter-menu,
    .security-events-time-menu,
    .security-time-dropdown-trigger {
        width: auto;
    }

    .security-filter-add-button {
        width: auto;
        min-height: 44px;
    }

    .security-filter-clear-button,
    .security-events-refresh-button {
        min-height: 44px;
    }

    .security-events-refresh-button {
        width: 44px;
        min-width: 44px;
    }

    .security-events-header-time {
        flex: 1 1 auto;
        min-width: 0;
    }

    .security-events-time-menu {
        margin-left: 0;
    }

    .security-time-dropdown-trigger {
        grid-template-columns: 15px minmax(0, 1fr) 14px;
        max-width: none;
        min-height: 44px;
    }

    .security-time-panel {
        width: min(100%, calc(100vw - 36px));
    }

    .security-time-panel-grid,
    .security-time-inline {
        grid-template-columns: 1fr;
    }

    .security-time-apply-wide {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .security-events-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* Edge Access V2 identity inventory */
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-inventory-section .operator-section-body {
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-inventory {
    display: grid;
    gap: 14px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-inventory .config-table-wrap {
    margin: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-inventory .config-enterprise-table th:last-child,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-inventory .config-enterprise-table td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-cell > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-cell strong,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-cell span.text-mono {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-cell span.text-mono {
    max-width: 390px;
    color: var(--text-muted);
    font-size: 11px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 6px;
    background: var(--operator-surface-raised, var(--bg-card));
    color: var(--text-secondary);
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-mark svg {
    width: 18px;
    height: 18px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-mark.brand-okta,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-mark.brand-okta-jwt {
    border-color: color-mix(in srgb, #1662dd 42%, var(--operator-line, var(--border-color)));
    color: #3d7be0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-mark.brand-auth0,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-mark.brand-auth0-jwt {
    border-color: color-mix(in srgb, #eb5424 42%, var(--operator-line, var(--border-color)));
    color: #eb6a3e;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-mark.brand-google {
    border-color: color-mix(in srgb, #4285f4 42%, var(--operator-line, var(--border-color)));
    color: #4285f4;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-mark.brand-cognito-jwt {
    border-color: color-mix(in srgb, #ff9900 42%, var(--operator-line, var(--border-color)));
    color: #e68a00;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-mark.brand-keycloak,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-mark.brand-keycloak-jwt {
    border-color: color-mix(in srgb, #4d9de0 42%, var(--operator-line, var(--border-color)));
    color: #4d9de0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-letter {
    font-size: 13px;
    font-weight: 760;
    letter-spacing: -0.03em;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-ms-grid {
    display: grid;
    grid-template-columns: repeat(2, 7px);
    grid-template-rows: repeat(2, 7px);
    gap: 2px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-ms-grid i:nth-child(1) { background: #f35325; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-ms-grid i:nth-child(2) { background: #81bc06; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-ms-grid i:nth-child(3) { background: #05a6f0; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-ms-grid i:nth-child(4) { background: #ffba08; }

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-validation {
    display: grid;
    justify-items: start;
    gap: 6px;
    min-width: 132px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-validation > span:last-child {
    color: var(--text-muted);
    font-size: 11px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-setup-shell {
    max-width: 1180px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-editor-section > .operator-section-body {
    display: grid;
    gap: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-type-step {
    max-width: 620px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-type-field {
    gap: 7px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-type-field .input {
    min-height: 44px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-type-catalog {
    margin-top: 20px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-type-options {
    display: grid;
    gap: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-type-options[hidden] {
    display: none;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-type-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-type-summary > div {
    display: grid;
    gap: 3px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-type-summary strong {
    color: var(--text-main);
    font-size: 13px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-type-summary span {
    color: var(--text-muted);
    font-size: 11px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    min-height: 126px;
    padding: 16px;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-secondary));
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template:hover {
    border-color: color-mix(in srgb, var(--operator-link, var(--primary)) 48%, var(--operator-line, var(--border-color)));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--operator-link, var(--primary)) 38%, transparent);
    outline-offset: 3px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template.is-selected {
    border-color: var(--operator-link, var(--primary));
    background: var(--operator-surface, var(--bg-secondary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template-copy strong {
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.3;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template-copy > span {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template-copy small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template-check {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--operator-link, var(--primary));
    color: #fff;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template-check svg {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template.is-selected .edge-access-v2-provider-template-check {
    display: inline-flex;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-config-section {
    border-bottom: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-page-form {
    padding: 18px;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 4px;
    background: var(--operator-surface, var(--bg-secondary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-form-grid .edge-access-v2-setup-field--wide {
    grid-column: 1 / -1;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-form-grid .edge-access-v2-setup-field {
    align-content: start;
    gap: 7px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-form-grid .input {
    min-height: 42px;
    background: var(--operator-surface-raised, var(--bg-card));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-form-grid textarea.input {
    min-height: 126px;
    resize: vertical;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-form-grid .input[readonly] {
    background: var(--operator-surface-muted, var(--bg-tertiary));
    color: var(--text-muted);
    cursor: default;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-page-form .edge-access-v2-create-actions {
    margin-top: 18px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-advanced {
    margin-top: 18px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-advanced .edge-access-v2-setup-field {
    gap: 7px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-advanced .input {
    min-height: 42px;
    background: var(--operator-surface-raised, var(--bg-card));
}

@media (max-width: 900px) {
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template-grid,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-form-grid {
        grid-template-columns: 1fr;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-template {
        min-height: 0;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-page-form {
        padding: 14px;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-provider-type-summary {
        align-items: flex-start;
    }
}

/* Upload Security: compact, flat workspace built from the shared operator controls. */
.httpsec-operator-frame .httpsec-upload-security-workspace .httpsec-mode-card {
    min-height: 78px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.httpsec-operator-frame .httpsec-upload-profile-options {
    padding: 0 0 18px;
    border-bottom: 1px solid var(--operator-line, var(--border-color));
}

.httpsec-operator-frame .httpsec-upload-file-policy {
    display: block;
}

.httpsec-operator-frame .httpsec-file-policy-summary {
    min-height: 72px;
    margin: 0;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 0;
    background: transparent;
}

.httpsec-filetype-modal .httpsec-filetype-toolbar {
    align-items: flex-end;
}

.httpsec-filetype-modal .httpsec-filetype-custom-input {
    display: grid;
    width: min(100%, 360px);
    gap: 5px;
}

.httpsec-filetype-modal .httpsec-filetype-custom-input .section-form-hint {
    margin: 0;
}

.httpsec-filetype-modal .httpsec-filetype-grid {
    max-height: 400px;
    overflow-y: auto;
}

.httpsec-filetype-modal .httpsec-filetype-icon {
    color: var(--text-main);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.04em;
}

.httpsec-filetype-modal .httpsec-filetype-category {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 10px;
}

.httpsec-operator-frame .httpsec-upload-primary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 0;
}

.httpsec-operator-frame .httpsec-upload-primary-grid .bot-overview-field {
    display: grid;
    min-width: 0;
    gap: 6px;
    margin: 0;
    padding: 14px;
    border-right: 1px solid var(--operator-line-soft, var(--border-color));
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
}

.httpsec-operator-frame .httpsec-upload-primary-grid .bot-overview-field:nth-child(3n) {
    border-right: 0;
}

.httpsec-operator-frame .httpsec-upload-primary-grid .bot-overview-field:nth-last-child(-n + 3) {
    border-bottom: 0;
}

.httpsec-operator-frame .httpsec-upload-primary-grid .bot-overview-field > span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.httpsec-operator-frame .httpsec-upload-primary-grid .bot-overview-field > input,
.httpsec-operator-frame .httpsec-upload-primary-grid .bot-overview-field > select {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    font-weight: 650;
}

.httpsec-operator-frame .httpsec-upload-primary-grid .httpsec-unit-input {
    width: 100%;
    min-height: 38px;
    justify-self: stretch;
    border-color: var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-upload-primary-grid .httpsec-unit-input .section-input {
    min-width: 0;
    min-height: 36px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.httpsec-operator-frame .httpsec-upload-primary-grid .httpsec-unit-input span {
    font-size: 10px;
    font-weight: 720;
}

.httpsec-operator-frame .httpsec-upload-advanced-grid {
    display: grid;
    gap: 18px;
}

.httpsec-operator-frame .httpsec-upload-advanced-details {
    margin: 0;
}

.httpsec-operator-frame .httpsec-upload-advanced-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 42px;
    color: var(--text-main);
    cursor: pointer;
}

.httpsec-operator-frame .httpsec-upload-advanced-details summary > span {
    font-size: 13px;
    font-weight: 700;
}

.httpsec-operator-frame .httpsec-upload-advanced-details summary small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
}

.httpsec-operator-frame .httpsec-upload-advanced-details[open] summary {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
}

.httpsec-operator-frame .httpsec-upload-advanced-details-body {
    padding-top: 16px;
}

.httpsec-operator-frame .httpsec-upload-advanced-group {
    display: grid;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--operator-line-soft, var(--border-color));
}

.httpsec-operator-frame .httpsec-upload-advanced-group:first-child {
    padding-top: 0;
    border-top: 0;
}

.httpsec-operator-frame .httpsec-upload-advanced-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.httpsec-operator-frame .httpsec-upload-advanced-group-head strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 720;
}

.httpsec-operator-frame .httpsec-upload-advanced-group-head span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
}

@media (max-width: 760px) {
    .httpsec-operator-frame .httpsec-upload-primary-grid {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-upload-primary-grid .bot-overview-field,
    .httpsec-operator-frame .httpsec-upload-primary-grid .bot-overview-field:nth-child(3n) {
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
    }

    .httpsec-operator-frame .httpsec-upload-primary-grid .bot-overview-field:last-child {
        border-bottom: 0;
    }

    .httpsec-filetype-modal .httpsec-filetype-toolbar {
        align-items: stretch;
    }

    .httpsec-filetype-modal .httpsec-filetype-custom-input {
        width: 100%;
    }

    .httpsec-operator-frame .httpsec-upload-advanced-group-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .httpsec-operator-frame .httpsec-upload-advanced-group-head span {
        text-align: left;
    }

    .httpsec-operator-frame .httpsec-upload-advanced-details summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
        padding: 8px 0;
    }

    .httpsec-operator-frame .httpsec-upload-advanced-details summary small {
        text-align: left;
    }


}

/* App overview: route context remains prominent while actions stay compact. */
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-overview {
    display: grid;
    gap: 16px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 16px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-panel {
    margin: 0;
    border-color: var(--operator-line, var(--border-color));
    background: var(--operator-surface, var(--bg-secondary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-route-only {
    grid-column: 1 / -1;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-panel .config-panel-head {
    min-height: 0;
    padding: 14px 16px;
    border-bottom-color: var(--operator-line-soft, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-panel .config-panel-body {
    padding: 16px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-readonly-grid > div {
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-readonly-grid dt {
    margin: 0 0 5px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-readonly-grid dd {
    margin: 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
    text-overflow: ellipsis;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-actions {
    gap: 8px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-decisions-section {
    display: grid;
    gap: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-decisions-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-decisions-heading h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 15px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-decisions-heading p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-decisions-empty {
    border: 1px solid var(--operator-line-soft, var(--border-color));
    border-radius: 7px;
    background: var(--operator-surface, var(--bg-secondary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-decisions-empty .empty-state {
    min-height: 180px;
    padding: 28px 20px;
}

@media (max-width: 900px) {
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-readonly-grid {
        grid-template-columns: 1fr;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-decisions-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* App Security: Request Policy inspector */
.httpsec-operator-frame .httpsec-policy-inspector {
    display: grid;
    gap: 14px;
    padding-bottom: calc(var(--operator-actionbar-h, 64px) + 18px);
}

.httpsec-operator-frame .httpsec-policy-inspector-summary {
    display: grid;
    grid-template-columns: minmax(235px, 0.8fr) minmax(0, 2.2fr);
    gap: 18px;
    align-items: stretch;
    padding: 16px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 7px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 98%, var(--brand, var(--brand-orange)));
}

.httpsec-operator-frame .httpsec-policy-inspector-summary-copy {
    display: grid;
    align-content: center;
    gap: 4px;
}

.httpsec-operator-frame .httpsec-policy-inspector-kicker {
    color: var(--operator-orange, var(--brand-orange));
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.httpsec-operator-frame .httpsec-policy-inspector-summary h3,
.httpsec-operator-frame .httpsec-policy-inspector-detail h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 17px;
    font-weight: 740;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.httpsec-operator-frame .httpsec-policy-inspector-summary p,
.httpsec-operator-frame .httpsec-policy-inspector-detail p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.httpsec-operator-frame .httpsec-policy-inspector-summary .operator-metric-strip {
    min-width: 0;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-policy-inspector-summary .operator-metric-item {
    min-width: 0;
    padding: 10px 12px;
}

.httpsec-operator-frame .httpsec-policy-inspector-summary .operator-metric-value {
    font-size: 18px;
}

.httpsec-operator-frame .httpsec-policy-inspector-workspace {
    display: grid;
    grid-template-columns: minmax(250px, 0.78fr) minmax(0, 2.22fr);
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 7px;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-policy-inspector-nav {
    padding: 8px;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, #f3f4f6);
}

.httpsec-operator-frame .httpsec-policy-inspector-nav-head {
    display: grid;
    gap: 2px;
    padding: 8px 10px 10px;
}

.httpsec-operator-frame .httpsec-policy-inspector-nav-head strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 740;
}

.httpsec-operator-frame .httpsec-policy-inspector-nav-head span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.httpsec-operator-frame .httpsec-policy-inspector-nav-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    width: 100%;
    min-height: 58px;
    gap: 8px;
    align-items: center;
    padding: 9px 8px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.httpsec-operator-frame .httpsec-policy-inspector-nav-item:hover {
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 94%, var(--brand, var(--brand-orange)));
}

.httpsec-operator-frame .httpsec-policy-inspector-nav-item.is-selected {
    border-left-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 8%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-policy-inspector-nav-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    color: var(--text-muted);
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-policy-inspector-nav-item.is-selected .httpsec-policy-inspector-nav-icon {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 38%, var(--operator-line-soft, #eceff3));
    color: var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-policy-inspector-nav-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.httpsec-operator-frame .httpsec-policy-inspector-nav-copy strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.httpsec-operator-frame .httpsec-policy-inspector-nav-copy small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.httpsec-operator-frame .httpsec-policy-inspector-nav-item .config-status-pill {
    padding: 3px 5px;
    font-size: 9px;
}

.httpsec-operator-frame .httpsec-policy-inspector-detail {
    min-width: 0;
}

.httpsec-operator-frame .httpsec-policy-inspector-detail-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 76px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-policy-inspector-detail-head > .operator-control-icon {
    width: 34px;
    height: 34px;
    color: var(--operator-orange, var(--brand-orange));
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 38%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 8%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-policy-inspector-detail-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.httpsec-operator-frame .httpsec-policy-inspector-detail-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.httpsec-operator-frame .httpsec-policy-inspector-detail-body {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.httpsec-operator-frame .httpsec-policy-inspector-detail .httpsec-mode-cards {
    gap: 8px;
}

.httpsec-operator-frame .httpsec-policy-inspector-detail .httpsec-mode-card {
    min-height: 68px;
    gap: 3px;
    padding: 10px 11px 10px 36px;
}

.httpsec-operator-frame .httpsec-policy-inspector-detail .httpsec-mode-card .httpsec-choice-check {
    top: 13px;
    left: 11px;
    width: 15px;
    height: 15px;
    font-size: 9px;
}

.httpsec-operator-frame .httpsec-policy-inspector-detail .httpsec-mode-card strong {
    font-size: 12px;
}

.httpsec-operator-frame .httpsec-policy-inspector-detail .httpsec-mode-card small {
    font-size: 10px;
    line-height: 1.3;
}

.httpsec-operator-frame .httpsec-policy-inspector-detail .httpsec-compact-editor {
    margin-top: 0;
}

[data-theme="dark"] .httpsec-operator-frame .httpsec-policy-inspector-summary,
[data-theme="dark"] .httpsec-operator-frame .httpsec-policy-inspector-workspace,
[data-theme="dark"] .httpsec-operator-frame .httpsec-policy-inspector-summary .operator-metric-strip,
[data-theme="dark"] .httpsec-operator-frame .httpsec-policy-inspector-nav,
[data-theme="dark"] .httpsec-operator-frame .httpsec-policy-inspector-nav-icon {
    background: var(--operator-surface, #11141a);
}

@media (max-width: 960px) {
    .httpsec-operator-frame .httpsec-policy-inspector-summary {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-policy-inspector-workspace {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-policy-inspector-nav {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 8px;
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .httpsec-operator-frame .httpsec-policy-inspector-nav-head {
        display: none;
    }

    .httpsec-operator-frame .httpsec-policy-inspector-nav-item {
        flex: 0 0 210px;
    }
}

@media (max-width: 640px) {
    .httpsec-operator-frame .httpsec-policy-inspector-summary,
    .httpsec-operator-frame .httpsec-policy-inspector-detail-body {
        padding: 12px;
    }

    .httpsec-operator-frame .httpsec-policy-inspector-summary .operator-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .httpsec-operator-frame .httpsec-policy-inspector-detail-head {
        grid-template-columns: 30px minmax(0, 1fr);
        min-height: 0;
        padding: 12px;
    }

    .httpsec-operator-frame .httpsec-policy-inspector-detail-actions {
        grid-column: 1 / -1;
        justify-content: space-between;
    }

    .httpsec-operator-frame .httpsec-policy-inspector-detail .httpsec-mode-cards-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* App Security: Request Policy pipeline */
.httpsec-operator-frame .httpsec-request-pipeline {
    display: grid;
    gap: 14px;
    padding-bottom: calc(var(--operator-actionbar-h, 64px) + 18px);
}

.httpsec-operator-frame .httpsec-request-pipeline-detail h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 17px;
    font-weight: 740;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.httpsec-operator-frame .httpsec-request-pipeline-flow,
.httpsec-operator-frame .httpsec-request-pipeline-detail {
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 7px;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-request-pipeline-flow-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px 11px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-request-pipeline-flow-head > div {
    display: grid;
    gap: 3px;
}

.httpsec-operator-frame .httpsec-request-pipeline-flow-head strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 740;
}

.httpsec-operator-frame .httpsec-request-pipeline-flow-head > span {
    color: var(--text-muted);
    font-size: 11px;
}

.httpsec-operator-frame .httpsec-request-pipeline-track {
    display: flex;
    min-width: max-content;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
}

.httpsec-operator-frame .httpsec-request-pipeline-flow {
    overflow-x: auto;
}

.httpsec-operator-frame .httpsec-request-pipeline-entry,
.httpsec-operator-frame .httpsec-request-pipeline-node {
    position: relative;
    min-width: 142px;
    min-height: 74px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-request-pipeline-entry {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    padding: 10px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 96%, #f3f4f6);
}

.httpsec-operator-frame .httpsec-request-pipeline-entry span {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    color: var(--text-muted);
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-request-pipeline-entry strong {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.httpsec-operator-frame .httpsec-request-pipeline-entry.is-destination span {
    color: var(--operator-orange, var(--brand-orange));
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 38%, var(--operator-line-soft, #eceff3));
}

.httpsec-operator-frame .httpsec-request-pipeline-node {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 7px;
    padding: 10px;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.httpsec-operator-frame .httpsec-request-pipeline-node:hover {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 50%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-request-pipeline-node.is-selected {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 7%, var(--operator-surface, #ffffff));
    box-shadow: inset 0 -2px 0 var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-request-pipeline-node-index {
    position: absolute;
    top: -7px;
    left: 8px;
    display: inline-flex;
    min-width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--operator-surface, #ffffff);
    font-size: 9px;
    font-weight: 740;
}

.httpsec-operator-frame .httpsec-request-pipeline-node.is-selected .httpsec-request-pipeline-node-index {
    border-color: var(--operator-orange, var(--brand-orange));
    color: #fff;
    background: var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-request-pipeline-node-icon {
    display: inline-flex;
    grid-row: span 2;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    align-self: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    color: var(--text-muted);
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-request-pipeline-node.is-selected .httpsec-request-pipeline-node-icon {
    color: var(--operator-orange, var(--brand-orange));
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 38%, var(--operator-line-soft, #eceff3));
}

.httpsec-operator-frame .httpsec-request-pipeline-node-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.httpsec-operator-frame .httpsec-request-pipeline-node-copy strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.httpsec-operator-frame .httpsec-request-pipeline-node-copy small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.httpsec-operator-frame .httpsec-request-pipeline-node .config-status-pill {
    justify-self: start;
    padding: 2px 5px;
    font-size: 9px;
}

.httpsec-operator-frame .httpsec-request-pipeline-arrow {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 76px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-request-pipeline-detail-head > .operator-control-icon {
    width: 34px;
    height: 34px;
    color: var(--operator-orange, var(--brand-orange));
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 38%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 8%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-request-pipeline-detail-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail-body {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-mode-cards {
    gap: 8px;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-mode-card {
    min-height: 68px;
    gap: 3px;
    padding: 10px 11px 10px 36px;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-mode-card .httpsec-choice-check {
    top: 13px;
    left: 11px;
    width: 15px;
    height: 15px;
    font-size: 9px;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-mode-card strong {
    font-size: 12px;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-mode-card small {
    font-size: 10px;
    line-height: 1.3;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-policy-choice-cards {
    gap: 12px;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-policy-choice-cards.httpsec-mode-cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-policy-choice-card {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 136px;
    align-items: start;
    align-content: center;
    justify-items: stretch;
    gap: 14px;
    padding: 18px 40px 18px 18px;
    background: var(--operator-surface, #ffffff);
    text-align: left;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-policy-choice-card.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: var(--operator-surface, #ffffff);
    box-shadow: none;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-policy-choice-card .httpsec-choice-check {
    top: 13px;
    right: 13px;
    left: auto;
    width: 18px;
    height: 18px;
}

.httpsec-operator-frame .httpsec-policy-choice-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 5px;
    background: var(--operator-surface-muted, #f7f8fa);
    color: var(--text-muted);
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.httpsec-operator-frame .httpsec-policy-choice-icon svg {
    width: 19px;
    height: 19px;
}

.httpsec-operator-frame .httpsec-policy-choice-card.is-active .httpsec-policy-choice-icon {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 55%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    color: var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-policy-choice-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
    justify-items: start;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-policy-choice-card strong {
    padding-right: 10px;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.25;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-policy-choice-card small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.42;
}

.httpsec-operator-frame .httpsec-policy-choice-meta {
    margin-top: 2px;
    color: color-mix(in srgb, var(--text-main) 78%, var(--text-muted));
    font-size: 9px;
    font-weight: 780;
    letter-spacing: 0.055em;
    line-height: 1.3;
    text-transform: uppercase;
}

.httpsec-operator-frame .httpsec-policy-choice-card:focus-visible,
.httpsec-operator-frame .httpsec-compact-mode-option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 70%, #ffffff);
    outline-offset: 2px;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-custom-editor {
    gap: 14px;
    padding: 16px;
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 98%, var(--operator-orange, var(--brand-orange)));
}

.httpsec-operator-frame .httpsec-custom-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-custom-editor-copy {
    display: grid;
    gap: 4px;
}

.httpsec-operator-frame .httpsec-custom-editor-copy strong,
.httpsec-operator-frame .httpsec-custom-field-label strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 740;
}

.httpsec-operator-frame .httpsec-custom-editor-copy small,
.httpsec-operator-frame .httpsec-custom-field-label small {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.httpsec-operator-frame .httpsec-custom-editor-meta {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.httpsec-operator-frame .httpsec-compact-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.httpsec-operator-frame .httpsec-compact-mode-option {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    min-height: 58px;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.httpsec-operator-frame .httpsec-compact-mode-option:hover {
    border-color: var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-compact-mode-option.is-active {
    border-color: var(--operator-orange, var(--brand-orange));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 5%, var(--operator-surface, #ffffff));
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-compact-mode-indicator {
    display: inline-flex;
    width: 14px;
    height: 14px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 999px;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-compact-mode-option.is-active .httpsec-compact-mode-indicator {
    border: 4px solid var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-compact-mode-copy {
    display: grid;
    gap: 3px;
}

.httpsec-operator-frame .httpsec-compact-mode-copy strong {
    font-size: 11px;
    font-weight: 730;
}

.httpsec-operator-frame .httpsec-compact-mode-copy small {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.35;
}

.httpsec-operator-frame .httpsec-custom-field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.httpsec-operator-frame .httpsec-custom-editor .httpsec-check-tile {
    min-height: 42px;
    font-size: 10px;
}

[data-theme="dark"] .httpsec-operator-frame .httpsec-policy-choice-icon {
    background: var(--operator-canvas, #0b0d12);
}

[data-theme="dark"] .httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-policy-choice-card.is-active {
    background: var(--operator-surface, #11141a);
}

[data-theme="dark"] .httpsec-operator-frame .httpsec-policy-choice-card.is-active .httpsec-policy-choice-icon {
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 7%, var(--operator-surface, #11141a));
}

[data-theme="dark"] .httpsec-operator-frame .httpsec-custom-editor-meta,
[data-theme="dark"] .httpsec-operator-frame .httpsec-compact-mode-option,
[data-theme="dark"] .httpsec-operator-frame .httpsec-compact-mode-indicator {
    background: var(--operator-surface, #11141a);
}

[data-theme="dark"] .httpsec-operator-frame .httpsec-request-pipeline-flow,
[data-theme="dark"] .httpsec-operator-frame .httpsec-request-pipeline-detail,
[data-theme="dark"] .httpsec-operator-frame .httpsec-request-pipeline-entry,
[data-theme="dark"] .httpsec-operator-frame .httpsec-request-pipeline-node,
[data-theme="dark"] .httpsec-operator-frame .httpsec-request-pipeline-node-icon,
[data-theme="dark"] .httpsec-operator-frame .httpsec-request-pipeline-entry span {
    background: var(--operator-surface, #11141a);
}

@media (max-width: 960px) {
    .httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-policy-choice-cards.httpsec-mode-cards-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .httpsec-operator-frame .httpsec-request-pipeline-detail-body {
        padding: 12px;
    }

    .httpsec-operator-frame .httpsec-request-pipeline-flow-head {
        align-items: start;
        flex-direction: column;
        gap: 4px;
        padding: 12px;
    }

    .httpsec-operator-frame .httpsec-request-pipeline-detail-head {
        grid-template-columns: 30px minmax(0, 1fr);
        min-height: 0;
        padding: 12px;
    }

    .httpsec-operator-frame .httpsec-request-pipeline-detail-actions {
        grid-column: 1 / -1;
        justify-content: space-between;
    }

    .httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-policy-choice-cards,
    .httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-policy-choice-cards.httpsec-mode-cards-4 {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-policy-choice-card {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 118px;
        gap: 12px;
        padding: 14px 36px 14px 14px;
    }

    .httpsec-operator-frame .httpsec-custom-editor-head,
    .httpsec-operator-frame .httpsec-custom-field-label {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .httpsec-operator-frame .httpsec-compact-mode-switch {
        grid-template-columns: 1fr;
    }
}

/* Request Policy pipeline: align with the shared operator-section language. */
.httpsec-operator-frame .httpsec-request-pipeline {
    gap: 0;
}

.httpsec-operator-frame .httpsec-request-pipeline > .operator-section {
    padding-bottom: 18px;
}

.httpsec-operator-frame .httpsec-request-pipeline > .operator-section + .operator-section {
    padding-top: 20px;
}

.httpsec-operator-frame .httpsec-request-pipeline-flow,
.httpsec-operator-frame .httpsec-request-pipeline-detail {
    display: block;
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.httpsec-operator-frame .httpsec-request-pipeline-flow .operator-section-head,
.httpsec-operator-frame .httpsec-request-pipeline-detail .operator-section-head {
    margin-bottom: 12px;
}

.httpsec-operator-frame .httpsec-request-pipeline-flow .operator-section-body {
    overflow-x: auto;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-request-pipeline-section-note {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.httpsec-operator-frame .httpsec-request-pipeline-track {
    padding: 12px 0;
}

.httpsec-operator-frame .httpsec-request-pipeline-entry,
.httpsec-operator-frame .httpsec-request-pipeline-node,
.httpsec-operator-frame .httpsec-request-pipeline-entry span,
.httpsec-operator-frame .httpsec-request-pipeline-node-icon {
    border-radius: 0;
}

.httpsec-operator-frame .httpsec-request-pipeline-entry,
.httpsec-operator-frame .httpsec-request-pipeline-node {
    min-height: 64px;
}

.httpsec-operator-frame .httpsec-request-pipeline-node {
    border-color: var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-request-pipeline-node.is-selected {
    box-shadow: inset 0 -2px 0 var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-request-pipeline-node-index {
    border-radius: 999px;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .operator-section-head {
    align-items: center;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .operator-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .operator-section-body {
    display: grid;
    gap: 12px;
}

.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-mode-card,
.httpsec-operator-frame .httpsec-request-pipeline-detail .httpsec-compact-editor {
    border-radius: 0;
}

@media (max-width: 640px) {
    .httpsec-operator-frame .httpsec-request-pipeline > .operator-section + .operator-section {
        padding-top: 16px;
    }

    .httpsec-operator-frame .httpsec-request-pipeline-flow .operator-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .httpsec-operator-frame .httpsec-request-pipeline-detail .operator-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .httpsec-operator-frame .httpsec-request-pipeline-detail .operator-section-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* Journey endpoints are labels, not configurable controls. */
.httpsec-operator-frame .httpsec-request-pipeline-track {
    gap: 12px;
}

.httpsec-operator-frame .httpsec-request-pipeline-entry {
    display: inline-flex;
    min-width: auto;
    min-height: 0;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
}

.httpsec-operator-frame .httpsec-request-pipeline-entry span,
.httpsec-operator-frame .httpsec-request-pipeline-entry.is-destination span {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 0;
    color: var(--text-muted);
    background: transparent;
}

.httpsec-operator-frame .httpsec-request-pipeline-entry.is-destination span {
    color: var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-request-pipeline-entry strong {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 720;
    line-height: 1.2;
    white-space: nowrap;
}

.httpsec-operator-frame .httpsec-request-pipeline-entry.is-destination strong {
    color: var(--text-main);
}

.httpsec-operator-frame .httpsec-request-pipeline-node {
    min-width: 172px;
    min-height: 72px;
    padding: 11px 12px;
}

.httpsec-operator-frame .httpsec-request-pipeline-node-copy strong {
    font-size: 12px;
}

.httpsec-operator-frame .httpsec-request-pipeline-node-copy small {
    font-size: 10px;
}

/* Let real controls fill a wide operator workspace; endpoints stay compact. */
@media (min-width: 1180px) {
    .httpsec-operator-frame .httpsec-request-pipeline-track {
        width: 100%;
        min-width: 0;
    }

    .httpsec-operator-frame .httpsec-request-pipeline-node {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Pipeline steps use the same quiet icon-and-copy hierarchy as operator rows. */
.httpsec-operator-frame .httpsec-request-pipeline-node {
    grid-template-columns: 14px 24px minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 8px;
    align-items: center;
    min-height: 68px;
}

.httpsec-operator-frame .httpsec-request-pipeline-node-index {
    position: static;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--text-dim);
    background: transparent;
    font-size: 10px;
    font-weight: 720;
}

.httpsec-operator-frame .httpsec-request-pipeline-node.is-selected .httpsec-request-pipeline-node-index {
    border: 0;
    color: var(--operator-orange, var(--brand-orange));
    background: transparent;
}

.httpsec-operator-frame .httpsec-request-pipeline-node-icon {
    grid-row: auto;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 0;
    color: var(--text-muted);
    background: transparent;
}

.httpsec-operator-frame .httpsec-request-pipeline-node.is-selected .httpsec-request-pipeline-node-icon {
    border: 0;
    color: var(--operator-orange, var(--brand-orange));
    background: transparent;
}

.httpsec-operator-frame .httpsec-request-pipeline-node-copy {
    gap: 3px;
}

.httpsec-operator-frame .httpsec-request-pipeline-node.is-idle .httpsec-request-pipeline-node-copy strong,
.httpsec-operator-frame .httpsec-request-pipeline-node.is-idle .httpsec-request-pipeline-node-copy small {
    color: var(--text-muted);
}

/* Edge Access follows the shared operator-frame and Routing catalog treatment. */
.edge-access-operator-frame .operator-frame-header {
    align-items: flex-start;
    gap: 24px;
}

.edge-access-operator-frame .operator-frame-actions {
    flex: 1 1 360px;
    justify-content: flex-end;
}

.edge-access-operator-frame .operator-line-tabs {
    margin-bottom: 20px;
}

.edge-access-operator-frame .edge-access-v2-catalog-stack {
    display: grid;
    gap: 20px;
}

.edge-access-operator-frame .edge-access-v2-catalog-section {
    padding-bottom: 0;
    border: 0;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
}

.edge-access-operator-frame .edge-access-v2-catalog-section > .operator-section-head {
    min-height: 0;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--operator-line, var(--border-color));
    background: transparent;
}

.edge-access-operator-frame .edge-access-v2-catalog-section > .operator-section-body {
    padding: 0;
}

.edge-access-operator-frame .edge-access-v2-app-filters {
    padding: 14px 0;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
}

.edge-access-operator-frame .edge-access-v2-filter-search {
    max-width: 460px;
}

.edge-access-operator-frame .edge-access-v2-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.edge-access-operator-frame .edge-access-v2-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    table-layout: fixed;
}

.edge-access-operator-frame .edge-access-v2-table th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--operator-line, var(--border-color));
    background: color-mix(in srgb, var(--operator-surface, var(--bg-secondary)) 96%, var(--bg-primary));
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.edge-access-operator-frame .edge-access-v2-table th:nth-child(1) { width: 25%; }
.edge-access-operator-frame .edge-access-v2-table th:nth-child(2) { width: 21%; }
.edge-access-operator-frame .edge-access-v2-table th:nth-child(3) { width: 14%; }
.edge-access-operator-frame .edge-access-v2-table th:nth-child(4) { width: 16%; }
.edge-access-operator-frame .edge-access-v2-table th:nth-child(5) { width: 11%; }
.edge-access-operator-frame .edge-access-v2-table th:nth-child(6) { width: 13%; }

.edge-access-operator-frame .edge-access-v2-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
    color: var(--text-secondary);
    font-size: 13px;
    vertical-align: middle;
}

.edge-access-operator-frame .edge-access-v2-catalog-row:last-child td {
    border-bottom: 0;
}

.edge-access-operator-frame .edge-access-v2-catalog-row:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, var(--bg-secondary)));
}

.edge-access-operator-frame .edge-access-v2-app-identity {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.edge-access-operator-frame .edge-access-v2-app-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--operator-line-soft, var(--border-color));
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, var(--operator-surface, var(--bg-secondary)));
    color: var(--operator-link, var(--primary));
}

.edge-access-operator-frame .edge-access-v2-app-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.edge-access-operator-frame .edge-access-v2-row-actions {
    display: flex;
    justify-content: flex-end;
}

.edge-access-operator-frame .edge-access-v2-row-actions .btn {
    min-height: 30px;
    padding: 4px 9px;
    font-size: 12px;
}

.edge-access-operator-frame .edge-access-v2-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--text-muted);
    text-align: center;
}

.edge-access-operator-frame .edge-access-v2-empty-state > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--operator-line-soft, var(--border-color));
    border-radius: 7px;
    color: var(--operator-link, var(--primary));
}

.edge-access-operator-frame .edge-access-v2-empty-state strong {
    color: var(--text-main);
    font-size: 13px;
}

.edge-access-operator-frame .edge-access-v2-empty-state p {
    max-width: 420px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .edge-access-operator-frame .operator-frame-header {
        flex-direction: column;
    }

    .edge-access-operator-frame .operator-frame-actions {
        flex: initial;
        width: 100%;
        justify-content: flex-start;
    }
}

.httpsec-runtime-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, currentColor 7%, transparent);
}
.httpsec-runtime-banner strong { text-transform: uppercase; letter-spacing: .04em; }
.httpsec-runtime-banner span { font-weight: 600; }
.httpsec-runtime-banner small { flex-basis: 100%; opacity: .82; }
.httpsec-securitytxt-card.is-unavailable { opacity: .82; }

/* =============================================================================
   EDGE ACCESS V2 FOUNDATION
   The App-first shell is deliberately separate from the legacy six-tab UI.
   ============================================================================= */

.edge-access-v2-shell {
    gap: 0;
}

.edge-access-v2-shell .config-console-header {
    align-items: center;
    padding: 4px 0 14px;
}

.edge-access-v2-shell .config-console-title {
    font-size: 22px;
}

.edge-access-v2-shell .config-console-meta {
    max-width: 720px;
}

.edge-access-v2-shell .edge-access-v2-primary-nav {
    gap: 28px;
}

.edge-access-v2-shell .edge-access-v2-subnav {
    min-height: 34px;
    margin: 0 0 18px;
    gap: 18px;
}

.edge-access-v2-shell .edge-access-v2-subnav .config-section-nav-item {
    height: 34px;
    font-size: 12px;
}

.edge-access-v2-shell .edge-access-v2-content {
    display: grid;
    gap: 18px;
    padding-top: 18px;
}

.edge-access-v2-shell .operator-section {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.edge-access-v2-shell .operator-section-head {
    min-height: 62px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 94%, var(--bg-primary));
}

.edge-access-v2-shell .operator-section-body {
    padding: 16px;
}

.edge-access-v2-shell .edge-access-v2-min-target {
    min-height: 44px;
}

.edge-access-v2-shell .edge-access-v2-nav-item:focus-visible,
.edge-access-v2-shell .edge-access-v2-min-target:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 42%, transparent);
    outline-offset: 3px;
}

.edge-access-v2-shell .edge-access-v2-capability {
    margin-bottom: 16px;
}

.edge-access-v2-shell .edge-access-v2-field {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
}

.edge-access-v2-shell .edge-access-v2-field-label {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.edge-access-v2-shell .edge-access-v2-field-input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
}

.edge-access-v2-shell textarea.edge-access-v2-field-input {
    min-height: 110px;
    resize: vertical;
}

.edge-access-v2-shell .edge-access-v2-field-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.edge-access-v2-shell .edge-access-v2-workflow-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.edge-access-v2-shell .edge-access-v2-workflow-form > .edge-access-v2-workflow-intro,
.edge-access-v2-shell .edge-access-v2-workflow-form > .edge-access-v2-field--wide,
.edge-access-v2-shell .edge-access-v2-workflow-form > .edge-access-v2-app-trust,
.edge-access-v2-shell .edge-access-v2-workflow-form > .edge-access-v2-route-shortcut,
.edge-access-v2-shell .edge-access-v2-workflow-form > .section-actions,
.edge-access-v2-shell .edge-access-v2-workflow-form > .section-warning-inline {
    grid-column: 1 / -1;
}

.edge-access-v2-shell .edge-access-v2-workflow-form > .edge-access-v2-field {
    margin-bottom: 16px;
}

.edge-access-v2-shell .edge-access-v2-workflow-intro {
    display: grid;
    gap: 4px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 5%, var(--bg-secondary));
}

.edge-access-v2-shell .edge-access-v2-workflow-intro > span {
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.edge-access-v2-shell .edge-access-v2-workflow-intro > p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.edge-access-v2-shell .edge-access-v2-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

.edge-access-v2-shell .edge-access-v2-field-grid .edge-access-v2-field--wide {
    grid-column: 1 / -1;
}

.edge-access-v2-shell .edge-access-v2-channel-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-height: 38px;
}

.edge-access-v2-shell .edge-access-v2-summary-metrics {
    display: grid;
    gap: 3px;
    min-width: 132px;
}

.edge-access-v2-shell .edge-access-v2-summary-metrics strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 650;
}

.edge-access-v2-shell .edge-access-v2-summary-metrics span {
    color: var(--text-secondary);
    font-size: 12px;
}

.edge-access-v2-shell .edge-access-v2-app-link {
    font-weight: 650;
}

.edge-access-v2-shell .edge-access-v2-app-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    margin: 0 0 16px;
}

.edge-access-v2-shell .edge-access-v2-filter-search {
    flex: 1 1 320px;
    max-width: 560px;
}

.edge-access-v2-shell .edge-access-v2-filter-search .input {
    width: 100%;
}

.edge-access-v2-shell .edge-access-v2-filter-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.edge-access-v2-shell .edge-access-v2-filter-controls .input {
    width: min(190px, 100%);
}

.edge-access-v2-shell .edge-access-v2-active-allow-filter {
    padding: 0 2px;
    white-space: nowrap;
}

.edge-access-v2-shell .edge-access-v2-active-allow-filter span {
    color: var(--text-secondary);
}

.edge-access-v2-shell .edge-access-v2-policy-filters,
.edge-access-v2-shell .edge-access-v2-decision-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.8fr) repeat(2, minmax(150px, .8fr)) auto;
    gap: 10px;
    align-items: center;
    margin: 0 0 16px;
}

.edge-access-v2-shell .edge-access-v2-policy-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    color: var(--text-secondary);
}

.edge-access-v2-shell .edge-access-v2-inline-check {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    margin-top: 2px;
    padding: 10px 12px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface-muted, #f7f8fa);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.edge-access-v2-shell .edge-access-v2-inline-check:hover {
    border-color: var(--operator-line, #d9dde3);
}

.edge-access-v2-shell .edge-access-v2-inline-check input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--operator-link, var(--primary));
}

.edge-access-v2-shell .edge-access-v2-inline-check > span {
    display: grid;
    gap: 2px;
}

.edge-access-v2-shell .edge-access-v2-inline-check strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 680;
}

.edge-access-v2-shell .edge-access-v2-inline-check small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.edge-access-v2-shell .edge-access-v2-runtime-section .operator-section-body {
    padding: 0;
}

.edge-access-v2-shell .edge-access-v2-runtime-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.edge-access-v2-shell .edge-access-v2-runtime-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.edge-access-v2-shell .edge-access-v2-runtime-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.edge-access-v2-shell .edge-access-v2-runtime-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.edge-access-v2-shell .edge-access-v2-runtime-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--operator-line, var(--border-color, #2a313b));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-secondary, #171b21));
}

.edge-access-v2-shell .edge-access-v2-runtime-panel--fill {
    height: 100%;
}

.edge-access-v2-shell .edge-access-v2-runtime-panel-head {
    margin-bottom: 16px;
}

.edge-access-v2-shell .edge-access-v2-runtime-panel-head h3 {
    margin: 0 0 4px;
    color: var(--text-main, #f3f4f6);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.edge-access-v2-shell .edge-access-v2-runtime-panel-head p {
    margin: 0;
    color: var(--text-muted, #9ca3af);
    font-size: 12px;
    line-height: 1.45;
}

.edge-access-v2-shell .edge-access-v2-runtime-panel-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.edge-access-v2-shell .edge-access-v2-runtime-panel .edge-access-v2-checkbox-row {
    width: 100%;
    max-width: 100%;
    padding: 2px 0;
}

.edge-access-v2-shell .edge-access-v2-runtime-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.edge-access-v2-shell .edge-access-v2-runtime-panel .edge-access-v2-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.edge-access-v2-shell .edge-access-v2-runtime-panel .edge-access-v2-field--wide {
    grid-column: 1 / -1;
}

.edge-access-v2-shell .edge-access-v2-runtime-panel .edge-access-v2-field-label {
    color: var(--text-main, #e5e7eb);
    font-size: 13px;
    font-weight: 600;
}

.edge-access-v2-shell .edge-access-v2-runtime-panel .edge-access-v2-field-input {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--operator-line, #343b45);
    border-radius: 6px;
    background: #0f1216;
    color: var(--text-main, #f3f4f6);
    font-size: 13px;
    font-family: inherit;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.edge-access-v2-shell .edge-access-v2-runtime-panel .edge-access-v2-field-input:focus {
    border-color: var(--operator-link, var(--primary, #f97316));
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
    outline: none;
}

.edge-access-v2-shell .edge-access-v2-runtime-panel .edge-access-v2-field-hint {
    margin: 0;
    color: var(--text-muted, #9ca3af);
    font-size: 12px;
    line-height: 1.45;
}

.edge-access-v2-shell .edge-access-v2-runtime-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 4px;
}

.edge-access-v2-shell .edge-access-v2-runtime-actions > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.edge-access-v2-shell .edge-access-v2-runtime-actions strong {
    color: var(--text-main, #f3f4f6);
    font-size: 12px;
    font-weight: 650;
}

.edge-access-v2-shell .edge-access-v2-runtime-actions span {
    color: var(--text-muted, #9ca3af);
    font-size: 11px;
    font-family: var(--font-mono, monospace);
}

.edge-access-v2-shell .edge-access-v2-runtime-actions .section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 860px) {
    .edge-access-v2-shell .edge-access-v2-runtime-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .edge-access-v2-shell .edge-access-v2-runtime-field-grid {
        grid-template-columns: 1fr;
    }

    .edge-access-v2-shell .edge-access-v2-runtime-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .edge-access-v2-shell .edge-access-v2-runtime-actions .section-actions {
        width: 100%;
        flex-direction: column;
    }

    .edge-access-v2-shell .edge-access-v2-runtime-actions .section-actions .btn {
        width: 100%;
    }
}

.edge-access-v2-shell .edge-access-v2-app-section {
    display: grid;
    gap: 16px;
}

.edge-access-v2-shell .edge-access-v2-app-section h2,
.edge-access-v2-shell .edge-access-v2-app-section h3 {
    margin: 0;
    color: var(--text-primary);
}

.edge-access-v2-shell .edge-access-v2-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.edge-access-v2-shell .edge-access-v2-readonly-grid > div {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-secondary);
}

.edge-access-v2-shell .edge-access-v2-readonly-grid dt {
    margin: 0 0 5px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.edge-access-v2-shell .edge-access-v2-readonly-grid dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.45;
}

.edge-access-v2-shell .edge-access-v2-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 12px;
    border-left: 3px solid var(--primary);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 13px;
}

.edge-access-v2-shell .edge-access-v2-app-trust legend {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.edge-access-v2-shell .edge-access-v2-app-trust {
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

@media (max-width: 760px) {
    .edge-access-v2-shell .edge-access-v2-subnav {
        gap: 18px;
    }

    .edge-access-v2-shell .edge-access-v2-policy-filters,
    .edge-access-v2-shell .edge-access-v2-decision-filters,
    .edge-access-v2-shell .edge-access-v2-readonly-grid,
    .edge-access-v2-shell .edge-access-v2-workflow-form,
    .edge-access-v2-shell .edge-access-v2-field-grid {
        grid-template-columns: 1fr;
    }

    .edge-access-v2-shell .edge-access-v2-app-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .edge-access-v2-shell .edge-access-v2-filter-search,
    .edge-access-v2-shell .edge-access-v2-filter-controls {
        max-width: none;
        width: 100%;
    }

    .edge-access-v2-shell .edge-access-v2-filter-controls {
        justify-content: flex-start;
    }
}

/* =============================================================================
   EDGE ACCESS WORKSPACE
   A compact configuration workspace shared with the rest of the admin surface.
   ============================================================================= */

.edge-access-v2-shell {
    --edge-access-panel: var(--bg-secondary);
    --edge-access-line: var(--border-color);
    --edge-access-muted: var(--text-secondary);
    display: grid;
    gap: 0;
    min-width: 0;
}

.edge-access-v2-shell .edge-access-v2-workspace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--edge-access-line);
}

.edge-access-v2-shell .edge-access-v2-workspace-title {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.edge-access-v2-shell .edge-access-v2-workspace-eyebrow,
.edge-access-v2-shell .edge-access-v2-catalog-eyebrow {
    color: var(--primary);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.edge-access-v2-shell .edge-access-v2-workspace-heading-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.edge-access-v2-shell .edge-access-v2-workspace-heading-row h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.edge-access-v2-shell .edge-access-v2-workspace-description {
    overflow: hidden;
    color: var(--edge-access-muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-v2-shell .edge-access-v2-workspace-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.edge-access-v2-shell .edge-access-v2-workspace-actions .edge-access-v2-min-target {
    min-height: 38px;
    padding-inline: 12px;
}

.edge-access-v2-shell .edge-access-v2-primary-nav {
    min-height: 46px;
    margin: 0;
    padding: 0;
    gap: 26px;
}

.edge-access-v2-shell .edge-access-v2-primary-nav .config-section-nav-item {
    height: 46px;
    font-size: 13px;
}

.edge-access-v2-shell .edge-access-v2-content {
    display: grid;
    gap: 20px;
    min-width: 0;
    padding: 24px 0 4px;
}

.edge-access-v2-shell .edge-access-v2-catalog {
    overflow: hidden;
    border: 1px solid var(--edge-access-line);
    border-radius: 8px;
    background: var(--edge-access-panel);
}

.edge-access-v2-shell .edge-access-v2-catalog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border-bottom: 1px solid var(--edge-access-line);
}

.edge-access-v2-shell .edge-access-v2-catalog-header > div:first-child {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.edge-access-v2-shell .edge-access-v2-catalog-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 680;
    letter-spacing: -.01em;
}

.edge-access-v2-shell .edge-access-v2-catalog-header p {
    margin: 0;
    color: var(--edge-access-muted);
    font-size: 13px;
    line-height: 1.45;
}

.edge-access-v2-shell .edge-access-v2-catalog-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

.edge-access-v2-shell .edge-access-v2-catalog-count {
    color: var(--edge-access-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.edge-access-v2-shell .edge-access-v2-catalog-toolbar {
    padding: 14px 20px;
    border-bottom: 1px solid var(--edge-access-line);
    background: color-mix(in srgb, var(--bg-primary) 55%, var(--edge-access-panel));
}

.edge-access-v2-shell .edge-access-v2-app-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    margin: 0;
}

.edge-access-v2-shell .edge-access-v2-filter-search {
    position: relative;
    flex: 1 1 340px;
    max-width: 500px;
}

.edge-access-v2-shell .edge-access-v2-filter-search .input {
    width: 100%;
    min-height: 38px;
    background: var(--bg-primary);
}

.edge-access-v2-shell .edge-access-v2-filter-controls {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.edge-access-v2-shell .edge-access-v2-filter-controls .input {
    width: min(184px, 100%);
    min-height: 38px;
}

.edge-access-v2-shell .edge-access-v2-active-allow-filter {
    min-height: 38px;
    padding: 0 4px;
    font-size: 12px;
    white-space: nowrap;
}

.edge-access-v2-shell .edge-access-v2-catalog-results {
    min-width: 0;
}

.edge-access-v2-shell .edge-access-v2-catalog-table.config-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table {
    min-width: 900px;
}

.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table thead {
    background: color-mix(in srgb, var(--bg-primary) 48%, var(--edge-access-panel));
}

.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table th {
    padding-top: 11px;
    padding-bottom: 11px;
    color: var(--edge-access-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table td {
    padding-top: 15px;
    padding-bottom: 15px;
    vertical-align: middle;
}

.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 3%, transparent);
}

.edge-access-v2-shell .edge-access-v2-app-identity {
    display: grid;
    gap: 4px;
    min-width: 190px;
}

.edge-access-v2-shell .edge-access-v2-app-link {
    width: fit-content;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 680;
    text-align: left;
}

.edge-access-v2-shell .edge-access-v2-app-identity > span {
    overflow: hidden;
    color: var(--edge-access-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-v2-shell .edge-access-v2-route-address {
    display: block;
    max-width: 300px;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-v2-shell .edge-access-v2-channel-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.edge-access-v2-shell .edge-access-v2-channel {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    border: 1px solid var(--edge-access-line);
    border-radius: 999px;
    color: var(--edge-access-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.edge-access-v2-shell .edge-access-v2-summary-metrics {
    min-width: 160px;
    gap: 4px;
}

.edge-access-v2-shell .edge-access-v2-summary-metrics strong {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 650;
}

.edge-access-v2-shell .edge-access-v2-summary-metrics span {
    color: var(--edge-access-muted);
    font-size: 11px;
}

.edge-access-v2-shell .operator-section {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--edge-access-line);
    border-radius: 8px;
    background: var(--edge-access-panel);
}

.edge-access-v2-shell .operator-section-head {
    min-height: 64px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--edge-access-line);
    background: color-mix(in srgb, var(--bg-primary) 38%, var(--edge-access-panel));
}

.edge-access-v2-shell .operator-section-body {
    padding: 20px;
}

.edge-access-v2-shell .edge-access-v2-subnav {
    min-height: 38px;
    margin: 0 0 20px;
    gap: 18px;
}

.edge-access-v2-shell .edge-access-v2-subnav .config-section-nav-item {
    height: 38px;
}

.edge-access-v2-shell .edge-access-v2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .edge-access-v2-shell .edge-access-v2-workspace-header,
    .edge-access-v2-shell .edge-access-v2-catalog-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .edge-access-v2-shell .edge-access-v2-workspace-actions,
    .edge-access-v2-shell .edge-access-v2-catalog-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .edge-access-v2-shell .edge-access-v2-app-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .edge-access-v2-shell .edge-access-v2-filter-search,
    .edge-access-v2-shell .edge-access-v2-filter-controls {
        max-width: none;
        width: 100%;
    }

    .edge-access-v2-shell .edge-access-v2-filter-controls {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .edge-access-v2-shell .edge-access-v2-workspace-heading-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .edge-access-v2-shell .edge-access-v2-workspace-description {
        white-space: normal;
    }

    .edge-access-v2-shell .edge-access-v2-workspace-actions .btn,
    .edge-access-v2-shell .edge-access-v2-catalog-actions .btn {
        flex: 1 1 auto;
    }

    .edge-access-v2-shell .edge-access-v2-catalog-header,
    .edge-access-v2-shell .edge-access-v2-catalog-toolbar,
    .edge-access-v2-shell .operator-section-head,
    .edge-access-v2-shell .operator-section-body {
        padding-right: 14px;
        padding-left: 14px;
    }
}

/* =============================================================================
   EDGE ACCESS V2 — NATIVE OPERATOR WORKSPACE
   The earlier V2 console styles above are retained for compatibility with
   in-flight markup. The current shell deliberately follows the shared
   operator-frame used by Routing, App Security, and API Security.
   ============================================================================= */

.operator-frame.edge-access-operator-frame.edge-access-v2-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .operator-frame-actions {
    gap: 8px;
}

.edge-access-operator-frame.edge-access-v2-shell .operator-frame-actions .edge-access-v2-min-target {
    min-height: 36px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-content {
    display: grid;
    gap: 24px;
    min-width: 0;
    padding: 0;
}

/* Keep every V2 destination on the same line-divided operator surface. */
.edge-access-operator-frame.edge-access-v2-shell .operator-section {
    overflow: visible;
    padding: 0 0 24px;
    border: 0;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
    border-radius: 0;
    background: transparent;
}

.edge-access-operator-frame.edge-access-v2-shell .operator-section + .operator-section {
    padding-top: 24px;
}

.edge-access-operator-frame.edge-access-v2-shell .operator-section-head {
    min-height: 0;
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    background: transparent;
}

.edge-access-operator-frame.edge-access-v2-shell .operator-section-body {
    padding: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .operator-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-subnav {
    min-height: 44px;
    margin: 0 0 20px;
    padding: 0;
    gap: 20px;
    border-bottom-color: var(--operator-line-soft, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-subnav .operator-line-tab {
    height: 44px;
    font-size: 13px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-nav-item:focus-visible,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-min-target:focus-visible,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--operator-link, var(--primary)) 42%, transparent);
    outline-offset: 3px;
}

/* Apps catalog: the same information hierarchy as the Routing catalog. */
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-stack {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 0;
    border-bottom: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-section > .operator-section-head {
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--operator-line, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-section > .operator-section-body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-library-surface {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-secondary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-filters {
    display: grid;
    grid-template-columns: minmax(260px, 520px) 176px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-library-filters {
    padding: 12px 14px;
    background: transparent;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-search {
    position: relative;
    display: block;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-search .input {
    width: 100%;
    padding-left: 38px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-search-icon svg {
    width: 15px;
    height: 15px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-status {
    display: block;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-status .input {
    width: 100%;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-field {
    display: grid;
    gap: 5px;
    min-width: 148px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-field .input {
    width: min(184px, 100%);
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-active-allow-filter {
    align-self: end;
    min-height: 38px;
    padding: 0 4px;
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-button-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-button-icon svg {
    width: 15px;
    height: 15px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-table {
    margin: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-library-table.config-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table {
    min-width: 720px;
    table-layout: fixed;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--operator-line, var(--border-color));
    background: color-mix(in srgb, var(--operator-surface, var(--bg-secondary)) 96%, var(--bg-primary));
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table th:nth-child(1) { width: 30%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table th:nth-child(2) { width: 26%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table th:nth-child(3) { width: 18%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table th:nth-child(4) { width: 12%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table th:nth-child(5) { width: 14%; }

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
    color: var(--text-secondary);
    font-size: 13px;
    vertical-align: middle;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table tbody tr:last-child td {
    border-bottom: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-table .config-enterprise-table tbody tr:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, var(--bg-secondary)));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-library-surface > .section-loading,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-library-surface > .section-error {
    margin: 16px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-library-table .config-table-empty-cell .empty-state {
    height: auto;
    min-height: 120px;
    padding: 20px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--operator-line-soft, var(--border-color));
    border-radius: 6px;
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, var(--operator-surface, var(--bg-secondary)));
    color: var(--operator-link, var(--primary));
    white-space: normal;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-icon svg {
    width: 15px;
    height: 15px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
    overflow: visible;
    padding: 0;
    color: inherit;
    font-size: inherit;
    white-space: normal;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-link {
    appearance: none;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 690;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-link:hover {
    background: transparent;
    color: var(--operator-link, var(--primary));
    text-decoration: none;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-copy > span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-address {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--text-main);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-channel-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-channel {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    border: 1px solid var(--operator-line-soft, var(--border-color));
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-summary-metrics {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-summary-metrics strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-policy-summary {
    color: var(--text-secondary);
    font-size: 13px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-summary-metrics span {
    color: var(--text-muted);
    font-size: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 260px;
    padding: 48px 20px;
    color: var(--text-muted);
    text-align: center;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-empty-state > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--operator-line-soft, var(--border-color));
    border-radius: 6px;
    color: var(--operator-link, var(--primary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-empty-state strong {
    color: var(--text-main);
    font-size: 13px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-empty-state p {
    max-width: 420px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

/* Policy library: shared catalog controls and enterprise table in one stable surface. */
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 0;
    border-bottom: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-section > .operator-section-head {
    margin-bottom: 14px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-section > .operator-section-body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-surface {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-secondary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-filters {
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
    background: transparent;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table {
    margin: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table.config-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table .config-enterprise-table {
    min-width: 720px;
    table-layout: fixed;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table .config-enterprise-table th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--operator-line, var(--border-color));
    background: color-mix(in srgb, var(--operator-surface, var(--bg-secondary)) 96%, var(--bg-primary));
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table .config-enterprise-table th:nth-child(1) { width: 40%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table .config-enterprise-table th:nth-child(2) { width: 13%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table .config-enterprise-table th:nth-child(3) { width: 20%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table .config-enterprise-table th:nth-child(4) { width: 13%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table .config-enterprise-table th:nth-child(5) { width: 14%; }

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table .config-enterprise-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
    color: var(--text-secondary);
    font-size: 13px;
    vertical-align: middle;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table .config-enterprise-table tbody tr:last-child td {
    border-bottom: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table .config-enterprise-table tbody tr:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, var(--bg-secondary)));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-library-policy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-library-policy-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--operator-line-soft, var(--border-color));
    border-radius: 6px;
    background: var(--operator-surface-muted, var(--bg-tertiary));
    color: var(--text-secondary);
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-library-policy-icon svg {
    width: 15px;
    height: 15px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-library-policy > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-library-policy-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-library-policy .btn-link {
    appearance: none;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 690;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-library-policy .btn-link:hover {
    background: transparent;
    color: var(--operator-link, var(--primary));
    text-decoration: none;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-library-policy > div > span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-library-apps {
    color: var(--text-secondary);
    font-size: 13px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-library-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-library-actions .operator-action-menu-panel {
    position: absolute !important;
    inset: auto 0 auto auto !important;
    top: calc(100% + 6px) !important;
    left: auto !important;
    right: 0 !important;
    min-width: 184px;
    z-index: 1210;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-surface > .section-loading,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-surface > .section-error {
    margin: 16px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table .config-table-empty-cell .empty-state {
    height: auto;
    min-height: 120px;
    padding: 20px;
}

.operator-table-scroll-hint {
    display: none;
}

@media (max-width: 960px) {
    .edge-access-operator-frame.edge-access-v2-shell .operator-frame-header {
        flex-direction: column;
    }

    .edge-access-operator-frame.edge-access-v2-shell .operator-frame-meta,
    .edge-access-operator-frame.edge-access-v2-shell .operator-frame-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-filters {
        grid-template-columns: 1fr;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-search {
        max-width: none;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-controls {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .edge-access-operator-frame.edge-access-v2-shell .operator-frame-header {
        padding: 22px 18px 16px;
    }

    .edge-access-operator-frame.edge-access-v2-shell .operator-frame-body {
        padding: 18px 18px calc(24px + var(--operator-actionbar-h, 64px));
    }

    .edge-access-operator-frame.edge-access-v2-shell .operator-line-tabs {
        gap: 18px;
        padding-inline: 18px;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-subnav {
        padding: 0;
    }

    .edge-access-operator-frame.edge-access-v2-shell .operator-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .edge-access-operator-frame.edge-access-v2-shell .operator-section-actions,
    .edge-access-operator-frame.edge-access-v2-shell .operator-section-actions .btn {
        width: 100%;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-field,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-controls .btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-filter-field .input {
        width: 100%;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-filters {
        padding: 12px;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-filters .edge-access-v2-filter-controls {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        width: 100%;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-filters .edge-access-v2-filter-field,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-filters .edge-access-v2-filter-field .input,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-filters .edge-access-v2-filter-controls .btn {
        width: 100%;
        min-height: 44px;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-catalog-table.config-table-wrap,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-library-table.config-table-wrap,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-table.config-table-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-color: var(--operator-line, var(--border-color)) transparent;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .edge-access-operator-frame.edge-access-v2-shell .operator-table-scroll-hint {
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 36px;
        margin: 0;
        padding: 0 12px;
        border-top: 1px solid var(--operator-line-soft, var(--border-color));
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 650;
    }

    .edge-access-operator-frame.edge-access-v2-shell .operator-table-scroll-hint > span {
        color: var(--operator-link, var(--primary));
        font-size: 14px;
        line-height: 1;
    }
}

/* New App is a guided creation flow, not a schema form. */
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-create-shell,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-new-app-shell {
    display: grid;
    max-width: 1120px;
    gap: 8px;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-new-app-section {
    max-width: 1120px;
    padding-bottom: 0;
    border-bottom: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-new-app-section > .operator-section-head {
    max-width: 980px;
}

/* =============================================================================
   RESOURCE WORKSPACE RESET
   Shared detail chrome for resource-oriented admin pages.
   ============================================================================= */

.operator-resource-workspace {
    display: grid;
    min-width: 0;
    gap: 0;
}

.operator-resource-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 12px;
}

.operator-resource-breadcrumb-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--operator-link, var(--primary));
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.operator-resource-breadcrumb-link:hover {
    color: var(--text-main);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.operator-resource-breadcrumb-separator {
    color: var(--text-dim);
}

.operator-resource-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
    padding-bottom: 18px;
}

.operator-resource-workspace--no-tabs .operator-resource-header {
    border-bottom: 1px solid var(--operator-line, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header .operator-resource-title-block {
    display: none;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header .operator-resource-breadcrumbs {
    min-height: 54px;
    margin: 0;
    padding: 0 20px 14px 0;
    border-bottom: 1px solid var(--operator-line, var(--border-color));
    font-size: 13px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header .operator-resource-breadcrumbs [aria-current="page"] {
    min-width: 0;
    overflow: hidden;
    color: var(--text-main);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header .operator-resource-header {
    min-height: 54px;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 14px 20px;
    border-bottom: 1px solid var(--operator-line, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header .operator-resource-actions {
    flex-wrap: nowrap;
    gap: 10px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header .operator-resource-actions > .btn,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header .operator-resource-actions > .operator-action-menu .btn {
    min-height: 38px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header .operator-resource-body {
    grid-column: 1 / -1;
}

@media (max-width: 760px) {
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header .operator-resource-breadcrumbs {
        min-height: 0;
        padding: 0 0 10px;
        border-bottom: 0;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header .operator-resource-header {
        min-height: 0;
        padding: 0 0 14px;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header .operator-resource-actions {
        justify-content: flex-end;
    }
}

.operator-resource-title-block {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.operator-resource-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.operator-resource-title-line h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 22px;
    font-weight: 720;
    line-height: 1.2;
}

.operator-resource-metadata {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--text-muted);
    font-size: 12px;
}

.operator-resource-meta-item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.operator-resource-meta-item > svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--operator-link, var(--primary));
}

.operator-resource-meta-item .edge-access-v2-route-address {
    display: inline;
    max-width: 420px;
}

.operator-resource-meta-divider {
    color: var(--text-dim);
}

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

.operator-resource-tabs {
    min-width: 0;
    border-bottom: 1px solid var(--operator-line, var(--border-color));
}

.operator-resource-tabs .operator-line-tabs {
    min-height: 44px;
    padding: 0;
    gap: 24px;
    overflow-x: visible;
    border-bottom: 0;
}

.operator-resource-tabs .operator-line-tab {
    height: 44px;
    font-size: 13px;
}

.operator-resource-body {
    display: grid;
    min-width: 0;
    gap: 20px;
    padding-top: 20px;
}

.operator-action-menu {
    position: relative;
    display: inline-flex;
}

.operator-action-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding-inline: 10px;
    white-space: nowrap;
}

.operator-action-menu-trigger svg {
    width: 14px;
    height: 14px;
}

.operator-action-menu-panel {
    position: fixed;
    z-index: 1200;
    display: grid;
    min-width: 168px;
    max-width: calc(100vw - 16px);
    padding: 4px;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-secondary));
    box-shadow: 0 12px 28px color-mix(in srgb, #000 22%, transparent);
}

.operator-action-menu-panel[hidden] {
    display: none;
}

.operator-action-menu-item {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.operator-action-menu-item:hover,
.operator-action-menu-item:focus-visible {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 9%, var(--operator-surface, var(--bg-secondary)));
    color: var(--text-main);
    outline: none;
}

.operator-action-menu-item.is-danger {
    color: var(--text-danger, #e05a5a);
}

@media (max-width: 640px) {
    .operator-action-menu-trigger,
    .operator-action-menu-item {
        min-height: 66px;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace--compact-header .operator-resource-actions > .operator-action-menu .operator-action-menu-trigger {
        min-height: 66px;
    }
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace .operator-section {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
    background: transparent;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace .operator-section-head {
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    background: transparent;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace .operator-section-body {
    padding: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-overview {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
    align-items: stretch;
    gap: 16px;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace .edge-access-v2-overview-card.operator-section {
    display: flex;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-secondary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-grid > .operator-section + .operator-section {
    padding-top: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace .edge-access-v2-overview-card > .operator-section-head {
    min-height: 66px;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
    background: color-mix(in srgb, var(--operator-surface-muted, var(--bg-tertiary)) 62%, transparent);
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace .edge-access-v2-overview-card > .operator-section-head h3 {
    font-size: 14px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace .edge-access-v2-overview-card > .operator-section-head p {
    margin-top: 3px;
    font-size: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-app-workspace .edge-access-v2-overview-card > .operator-section-body {
    flex: 1;
    padding: 16px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-overview {
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 24px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-identity {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 6px;
    background: var(--operator-surface-muted, var(--bg-tertiary));
    color: var(--operator-link, var(--primary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-identity > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-identity strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-eyebrow,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-facts dt {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-facts {
    display: grid;
    grid-template-columns: minmax(200px, 1.1fr) minmax(180px, 1fr) minmax(110px, auto);
    gap: 0;
    margin: 0;
    padding-left: 20px;
    border-left: 1px solid var(--operator-line-soft, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-facts > div {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    padding-inline: 20px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-facts > div:first-child {
    padding-left: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-facts > div + div {
    border-left: 1px solid var(--operator-line-soft, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-facts dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-main);
    font-size: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-summary > .operator-section-body,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-decisions-section > .operator-section-body {
    padding: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policies-section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policies-section > .operator-section-body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-table-surface {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-secondary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-table.config-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-table .config-enterprise-table {
    table-layout: fixed;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-table .config-enterprise-table th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--operator-line, var(--border-color));
    background: color-mix(in srgb, var(--operator-surface, var(--bg-secondary)) 96%, var(--bg-primary));
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-table .config-enterprise-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
    color: var(--text-secondary);
    font-size: 13px;
    vertical-align: middle;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-table .config-enterprise-table tbody tr:last-child td {
    border-bottom: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-table .config-enterprise-table tbody tr:hover td {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, var(--bg-secondary)));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-summary-table .config-enterprise-table {
    min-width: 480px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-summary-table .config-enterprise-table th:nth-child(1) { width: 52%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-summary-table .config-enterprise-table th:nth-child(2) { width: 28%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-summary-table .config-enterprise-table th:nth-child(3) { width: 20%; }

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-attached-policy-table .config-enterprise-table {
    min-width: 920px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-attached-policy-table .config-enterprise-table th:nth-child(1) { width: 24%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-attached-policy-table .config-enterprise-table th:nth-child(2) { width: 14%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-attached-policy-table .config-enterprise-table th:nth-child(3) { width: 12%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-attached-policy-table .config-enterprise-table th:nth-child(4) { width: 26%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-attached-policy-table .config-enterprise-table th:nth-child(5) { width: 12%; }
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-attached-policy-table .config-enterprise-table th:nth-child(6) { width: 12%; }

@media (max-width: 640px) {
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-table.config-table-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-color: var(--operator-line, var(--border-color)) transparent;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-summary .config-table-wrap,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-decisions-section .config-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-summary-table th,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-summary-table td {
    padding: 11px 14px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-empty {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 12px;
    padding: 16px;
    color: var(--text-muted);
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-empty > span {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-line-soft, var(--border-color));
    border-radius: 6px;
    background: var(--operator-surface-muted, var(--bg-tertiary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-empty > div {
    display: grid;
    gap: 3px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-empty strong {
    color: var(--text-main);
    font-size: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-empty small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-secondary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-message > svg {
    flex: 0 0 auto;
    color: var(--text-muted);
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-message > div {
    display: grid;
    gap: 2px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-message strong {
    color: var(--text-main);
    font-size: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-message span {
    color: var(--text-muted);
    font-size: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-message--warning {
    border-color: color-mix(in srgb, var(--warning) 34%, var(--operator-line, var(--border-color)));
    background: color-mix(in srgb, var(--warning) 7%, var(--operator-surface, var(--bg-secondary)));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-message--warning > svg {
    color: var(--warning);
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-section .config-table-wrap {
    margin: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-summary-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-summary-name strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 690;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-summary-foot {
    padding: 9px 14px 12px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: right;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-decisions-empty .empty-state {
    height: auto;
    min-height: 128px;
    padding: 22px 20px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-decisions-section .edge-access-v2-decisions-empty {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-decisions-section .edge-access-v2-decisions-empty .empty-state {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-readonly-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-readonly-grid > div {
    padding: 0;
    border: 0;
    background: transparent;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-cell,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-history-change {
    display: grid;
    gap: 7px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-cell > .btn-link {
    appearance: none;
    width: fit-content;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 680;
    line-height: 1.35;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-cell > .btn-link:hover,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-cell > .btn-link:focus-visible {
    background: transparent;
    color: var(--operator-link, var(--primary));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-inline-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--operator-line-soft, var(--border-color));
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-inline-note > svg {
    flex: 0 0 auto;
    color: var(--operator-link, var(--primary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-inline-note strong {
    color: var(--text-main);
    font-weight: 650;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-history-change span {
    color: var(--text-muted);
    font-size: 11px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-trust-form {
    display: grid;
    gap: 18px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-trust-save {
    margin: 0;
}

@media (max-width: 1100px) {
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-overview-grid {
        grid-template-columns: 1fr;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-overview {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-facts {
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px solid var(--operator-line-soft, var(--border-color));
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .operator-resource-header {
        flex-direction: column;
        gap: 14px;
    }

    .operator-resource-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .operator-resource-tabs .operator-line-tabs {
        gap: 18px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .operator-resource-tabs .operator-line-tabs::-webkit-scrollbar {
        display: none;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-readonly-grid,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-grid {
        grid-template-columns: 1fr;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-facts {
        grid-template-columns: 1fr;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-facts > div {
        padding: 10px 0;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-facts > div:first-child {
        padding-top: 0;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-facts > div + div {
        border-top: 1px solid var(--operator-line-soft, var(--border-color));
        border-left: 0;
    }
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-new-app-form {
    display: grid;
    gap: 0;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--operator-line-soft, var(--border-color));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-secondary));
    color: var(--operator-link, var(--primary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-icon svg {
    width: 16px;
    height: 16px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-setup-section {
    min-width: 0;
    margin: 0;
    padding: 28px 0;
    border: 0;
    border-top: 1px solid var(--operator-line-soft, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-setup-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-setup-heading > div,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-setup-heading > span:last-child {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-setup-heading h3,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-setup-heading strong {
    margin: 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-setup-heading p,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-setup-heading > span:last-child > span {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-setup-field {
    display: grid;
    width: min(100%, 640px);
    gap: 7px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-setup-field--wide {
    width: 100%;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-setup-field > .input {
    min-height: 40px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-setup-field > small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-card,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-choice {
    position: relative;
    display: flex;
    min-width: 0;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 7px;
    background: var(--operator-surface, var(--bg-secondary));
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-card {
    align-items: flex-start;
    gap: 12px;
    min-height: 112px;
    padding: 16px;
    cursor: pointer;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-card:hover,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-choice:hover {
    border-color: color-mix(in srgb, var(--operator-link, var(--primary)) 48%, var(--operator-line, var(--border-color)));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-card:has(input:checked),
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-choice:has(input:checked) {
    border-color: var(--operator-link, var(--primary));
    background: var(--operator-surface, var(--bg-secondary));
    box-shadow: none;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-card:has(input:focus-visible),
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-choice:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--operator-link, var(--primary)) 38%, transparent);
    outline-offset: 3px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-card:has(input:checked) .edge-access-v2-choice-icon,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-choice:has(input:checked) .edge-access-v2-choice-icon {
    border-color: color-mix(in srgb, var(--operator-link, var(--primary)) 40%, var(--operator-line, var(--border-color)));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 11%, var(--operator-surface, var(--bg-secondary)));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-selection-mark {
    position: absolute;
    top: 12px;
    right: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--operator-link, var(--primary));
    color: #ffffff;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-selection-mark svg {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-card:has(input:checked) .edge-access-v2-selection-mark,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-choice:has(input:checked) .edge-access-v2-selection-mark {
    display: inline-flex;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-copy strong {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-copy span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-panel {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--operator-line-soft, var(--border-color));
    border-radius: 7px;
    background: color-mix(in srgb, var(--operator-surface, var(--bg-secondary)) 96%, var(--bg-primary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-panel[hidden],
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-configuration[hidden] {
    display: none;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-safety {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-safety > span:first-child {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--operator-link, var(--primary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-safety svg {
    width: 15px;
    height: 15px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-field-grid .edge-access-v2-setup-field {
    width: 100%;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-advanced-route-options {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--operator-line-soft, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-advanced-route-options summary {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-advanced-route-options[open] summary {
    margin-bottom: 14px;
    color: var(--text-main);
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-trust-setup {
    padding-bottom: 28px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-choice {
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    min-height: 0;
    padding: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 110px;
    padding: 16px;
    cursor: pointer;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-toggle > input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-choice--simple .edge-access-v2-source-toggle {
    width: 100%;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-configuration {
    padding: 0 16px 16px;
    border-top: 1px solid var(--operator-line-soft, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-configuration .edge-access-v2-setup-field {
    width: 100%;
    margin-top: 14px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-select {
    width: 100%;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-hint {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-hint .btn-link {
    font-size: inherit;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-create-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 18px 0 0;
    border-top: 1px solid var(--operator-line, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-create-actions .operator-control-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Create Policy reuses the guided Add App setup language. */
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-editor-section {
    max-width: 1120px;
    padding-bottom: 0;
    border-bottom: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-editor-section > .operator-section-head {
    max-width: 880px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-details-grid {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-description {
    min-height: 92px;
    resize: vertical;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-decision-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-decision-grid .edge-access-v2-choice-card {
    min-height: 104px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-checkbox-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: fit-content;
    max-width: 640px;
    min-height: 44px;
    padding: 4px 0;
    cursor: pointer;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-checkbox-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-checkbox-control {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 4px;
    background: var(--operator-surface, var(--bg-secondary));
    color: transparent;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-checkbox-control svg {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-checkbox-row:hover .edge-access-v2-checkbox-control {
    border-color: color-mix(in srgb, var(--operator-link, var(--primary)) 58%, var(--operator-line, var(--border-color)));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-checkbox-row:has(input:checked) .edge-access-v2-checkbox-control {
    border-color: var(--operator-link, var(--primary));
    background: var(--operator-link, var(--primary));
    color: #ffffff;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-checkbox-row:has(input:focus-visible) .edge-access-v2-checkbox-control {
    outline: 3px solid color-mix(in srgb, var(--operator-link, var(--primary)) 38%, transparent);
    outline-offset: 3px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-checkbox-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-checkbox-copy strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 680;
    line-height: 1.35;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-checkbox-copy span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-picker {
    min-width: 0;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-picker > legend {
    margin-bottom: 9px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 680;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-picker-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-option {
    width: 100%;
    max-width: none;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 4px;
    background: transparent;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-option:has(input:checked) {
    border-color: var(--operator-link, var(--primary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-option:has(input:checked) .edge-access-v2-checkbox-control {
    border-color: var(--operator-link, var(--primary));
    background: transparent;
    color: var(--operator-link, var(--primary));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-cell {
    display: grid;
    gap: 5px;
    min-width: 220px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-cell-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-cell-title strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 680;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-cell > span {
    max-width: 520px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-access {
    display: grid;
    gap: 4px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-access strong {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 640;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-access span {
    color: var(--text-muted);
    font-size: 11px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-roles-section .config-enterprise-table th:last-child,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-roles-section .config-enterprise-table td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

@media (max-width: 700px) {
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-role-picker-options {
        grid-template-columns: 1fr;
    }
}

.edge-access-operator-frame.edge-access-v2-shell [data-edge-access-v2-policy-identity-controls][hidden],
.edge-access-operator-frame.edge-access-v2-shell [data-edge-access-v2-policy-specific-identities][hidden],
.edge-access-operator-frame.edge-access-v2-shell [data-edge-access-v2-policy-bypass-note][hidden] {
    display: none;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-identity-mode-grid {
    margin-bottom: 2px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-bypass-note {
    margin: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-principal-grid,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-requirement-grid,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-attachment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    min-width: 0;
    margin-top: 16px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-principal-grid .edge-access-v2-setup-field,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-requirement-grid .edge-access-v2-setup-field,
.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-attachment-grid .edge-access-v2-setup-field {
    width: 100%;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-attachment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-requirement-grid {
    margin-top: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-advanced-disclosure {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--operator-line-soft, var(--border-color));
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-advanced-disclosure summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 680;
    cursor: pointer;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-advanced-disclosure summary small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-advanced-disclosure[open] summary {
    color: var(--text-main);
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-advanced-disclosure-body {
    display: grid;
    gap: 16px;
    padding-top: 16px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-advanced .edge-access-v2-advanced-disclosure-body > .edge-access-v2-policy-principal-grid {
    margin-top: 0;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-claims {
    min-height: 112px;
    resize: vertical;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-runtime-note {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-requirement-grid + .edge-access-v2-inline-note {
    margin-top: 14px;
}

.edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-channel-select {
    min-height: 112px;
}

@media (max-width: 800px) {
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-route-field-grid,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-grid,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-principal-grid,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-requirement-grid,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-attachment-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-choice-grid,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-policy-decision-grid {
        grid-template-columns: 1fr;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-source-configuration {
        padding-left: 16px;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-create-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-create-actions .operator-control-actions,
    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-create-actions .operator-control-actions .btn {
        width: 100%;
    }

    .edge-access-operator-frame.edge-access-v2-shell .edge-access-v2-advanced-disclosure summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

/* App Security: compact browser policy builders. */
.httpsec-operator-frame .httpsec-browser-builders {
    overflow: hidden;
    padding: 0;
    border-radius: 0;
}

.httpsec-operator-frame .httpsec-browser-builders > summary,
.httpsec-operator-frame .httpsec-browser-raw-values > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 16px;
    padding: 13px 14px;
    list-style: none;
}

.httpsec-operator-frame .httpsec-browser-builders > summary::-webkit-details-marker,
.httpsec-operator-frame .httpsec-browser-raw-values > summary::-webkit-details-marker {
    display: none;
}

.httpsec-operator-frame .httpsec-browser-builders > summary > span,
.httpsec-operator-frame .httpsec-browser-raw-values > summary > span {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 760;
}

.httpsec-operator-frame .httpsec-browser-builders > summary > small,
.httpsec-operator-frame .httpsec-browser-raw-values > summary > small {
    grid-column: 1;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
}

.httpsec-operator-frame .httpsec-browser-builders > summary::after,
.httpsec-operator-frame .httpsec-browser-raw-values > summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--text-muted);
    content: '+';
    font-size: 17px;
}

.httpsec-operator-frame .httpsec-browser-builders[open] > summary::after,
.httpsec-operator-frame .httpsec-browser-raw-values[open] > summary::after {
    content: '−';
}

.httpsec-operator-frame .httpsec-browser-builders[open] > summary,
.httpsec-operator-frame .httpsec-browser-raw-values[open] > summary {
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-browser-builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr);
    align-items: start;
    gap: 12px;
    padding: 12px;
}

.httpsec-operator-frame .httpsec-browser-builder-grid .httpsec-builder {
    align-content: start;
    gap: 0;
    overflow: hidden;
    padding: 0;
    border-color: var(--operator-line-soft, #eceff3);
    border-radius: 0;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-browser-builder-grid .httpsec-builder-head {
    min-height: 62px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-builder-head-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.httpsec-operator-frame .httpsec-browser-builder-grid .httpsec-builder-head-copy strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 760;
}

.httpsec-operator-frame .httpsec-builder-head-copy small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
}

.httpsec-operator-frame .httpsec-builder-count {
    flex: 0 0 auto;
    padding: 3px 7px;
    border: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.httpsec-operator-frame .httpsec-builder-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-builder-preset {
    appearance: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10px;
    min-width: 0;
    min-height: 76px;
    align-items: start;
    gap: 8px;
    padding: 11px 12px;
    border: 0;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.httpsec-operator-frame .httpsec-builder-preset:last-child {
    border-right: 0;
}

.httpsec-operator-frame .httpsec-builder-preset > span {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.httpsec-operator-frame .httpsec-builder-preset strong {
    font-size: 11px;
    font-weight: 740;
}

.httpsec-operator-frame .httpsec-builder-preset small {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.35;
}

.httpsec-operator-frame .httpsec-builder-preset i {
    width: 9px;
    height: 9px;
    margin-top: 2px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 50%;
}

.httpsec-operator-frame .httpsec-builder-preset:hover,
.httpsec-operator-frame .httpsec-builder-preset:focus-visible {
    z-index: 1;
    outline: none;
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 3%, var(--operator-surface, #ffffff));
}

.httpsec-operator-frame .httpsec-builder-preset:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 45%, transparent);
}

.httpsec-operator-frame .httpsec-builder-preset.is-active {
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 4%, var(--operator-surface, #ffffff));
    box-shadow: inset 0 -2px 0 var(--operator-orange, var(--brand-orange));
}

.httpsec-operator-frame .httpsec-builder-preset.is-active i {
    border-color: var(--operator-orange, var(--brand-orange));
    background: var(--operator-orange, var(--brand-orange));
    box-shadow: inset 0 0 0 2px var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-browser-builder-grid .httpsec-builder-warning {
    margin: 10px 12px 0;
    padding: 8px 10px;
    border-left: 2px solid var(--warning, var(--brand-orange));
    background: color-mix(in srgb, var(--warning, var(--brand-orange)) 7%, transparent);
    font-size: 10px;
}

.httpsec-operator-frame .httpsec-browser-builder-grid .httpsec-csp-directives {
    gap: 0;
}

.httpsec-operator-frame .httpsec-browser-builder-grid .httpsec-csp-row {
    grid-template-columns: minmax(100px, 132px) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-browser-builder-grid .httpsec-csp-row:last-child {
    border-bottom: 0;
}

.httpsec-operator-frame .httpsec-csp-row-label,
.httpsec-operator-frame .httpsec-csp-row-editor,
.httpsec-operator-frame .httpsec-permission-field > span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.httpsec-operator-frame .httpsec-csp-row-label {
    padding-top: 4px;
}

.httpsec-operator-frame .httpsec-csp-row-label strong {
    color: var(--text-main);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
}

.httpsec-operator-frame .httpsec-csp-row-label small,
.httpsec-operator-frame .httpsec-permission-field small {
    color: var(--text-muted);
    font-size: 9px;
}

.httpsec-operator-frame .httpsec-csp-row-editor {
    gap: 7px;
}

.httpsec-operator-frame .httpsec-browser-builder-grid .httpsec-extension-grid {
    min-height: 30px;
}

.httpsec-operator-frame .httpsec-browser-builder-grid .httpsec-empty-note {
    min-height: 30px;
    padding: 7px 9px;
    border-radius: 0;
    font-size: 9px;
}

.httpsec-operator-frame .httpsec-browser-builder-grid .section-inline-form {
    width: 100%;
}

.httpsec-operator-frame .httpsec-browser-builder-grid .section-inline-form .section-input,
.httpsec-operator-frame .httpsec-browser-builder-grid .section-inline-form .btn,
.httpsec-operator-frame .httpsec-permission-field select {
    min-height: 34px;
    border-radius: 0;
    font-size: 10px;
}

.httpsec-operator-frame .httpsec-browser-builder-grid .httpsec-permissions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.httpsec-operator-frame .httpsec-permission-field {
    display: grid;
    min-width: 0;
    gap: 8px;
    padding: 11px 12px;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.httpsec-operator-frame .httpsec-permission-field:nth-child(2n) {
    border-right: 0;
}

.httpsec-operator-frame .httpsec-permission-field strong {
    color: var(--text-main);
    font-size: 10px;
    font-weight: 720;
}

.httpsec-operator-frame .httpsec-permission-field select {
    width: 100%;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
}

.httpsec-operator-frame .httpsec-browser-raw-values {
    margin: 0 12px 12px;
    border-radius: 0;
    background: var(--operator-surface, #ffffff);
}

.httpsec-operator-frame .httpsec-browser-raw-values .httpsec-response-field-grid {
    padding: 12px;
}

@media (max-width: 1100px) {
    .httpsec-operator-frame .httpsec-browser-builder-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .httpsec-operator-frame .httpsec-browser-builders > summary,
    .httpsec-operator-frame .httpsec-browser-raw-values > summary {
        padding: 12px;
    }

    .httpsec-operator-frame .httpsec-browser-builder-grid {
        padding: 10px;
    }

    .httpsec-operator-frame .httpsec-builder-presets,
    .httpsec-operator-frame .httpsec-browser-builder-grid .httpsec-permissions-grid {
        grid-template-columns: 1fr;
    }

    .httpsec-operator-frame .httpsec-builder-preset {
        min-height: 60px;
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .httpsec-operator-frame .httpsec-builder-preset:last-child {
        border-bottom: 0;
    }

    .httpsec-operator-frame .httpsec-browser-builder-grid .httpsec-csp-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .httpsec-operator-frame .httpsec-csp-row-label {
        padding-top: 0;
    }

    .httpsec-operator-frame .httpsec-permission-field {
        border-right: 0;
    }

    .httpsec-operator-frame .httpsec-browser-raw-values {
        margin: 0 10px 10px;
    }
}

/* Module Registry: enterprise service cards within the shared operator language. */
.module-registry-operator-stack {
    display: grid;
    gap: 0;
}

.module-registry-operator-frame .module-registry-section {
    padding-bottom: 0;
    border-bottom: 0;
}

.module-registry-operator-frame .module-registry-section .operator-section-head {
    margin-bottom: 14px;
}

.module-registry-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.module-registry-service-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 238px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    transition: border-color 140ms ease, background-color 140ms ease;
}

.module-registry-service-card:hover {
    border-color: color-mix(in srgb, var(--operator-link, var(--primary)) 34%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 2%, var(--operator-surface, #ffffff));
}

.module-registry-service-card:focus-within {
    border-color: color-mix(in srgb, var(--operator-link, var(--primary)) 48%, var(--operator-line, #d9dde3));
}

.module-registry-service-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    padding: 18px;
}

.module-registry-module-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 7px;
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 4%, var(--operator-surface, #ffffff));
    border-color: color-mix(in srgb, var(--operator-link, var(--primary)) 20%, var(--operator-line, #d9dde3));
    color: var(--operator-link, var(--primary));
    transition: border-color 140ms ease, background-color 140ms ease;
}

.module-registry-module-icon svg {
    width: 30px;
    height: 30px;
}

.module-registry-service-card:hover .module-registry-module-icon {
    border-color: color-mix(in srgb, var(--operator-link, var(--primary)) 40%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 7%, var(--operator-surface, #ffffff));
}

.module-registry-service-copy {
    min-width: 0;
    padding-top: 3px;
}

.module-registry-service-copy h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.module-registry-service-copy p {
    max-width: 300px;
    margin: 7px 0 0;
    color: var(--operator-muted, var(--text-muted));
    font-size: 12px;
    line-height: 1.5;
}

.module-registry-service-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 999px;
    background: var(--operator-surface-depth, var(--bg-secondary));
    color: var(--operator-text-soft, var(--text-secondary));
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.module-registry-service-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--operator-link, var(--primary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--operator-link, var(--primary)) 14%, transparent);
}

.module-registry-service-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--operator-line, #d9dde3);
    border-bottom: 1px solid var(--operator-line, #d9dde3);
    background: color-mix(in srgb, var(--operator-surface-depth, var(--bg-secondary)) 58%, transparent);
}

.module-registry-service-facts > div {
    min-width: 0;
    padding: 12px 18px 13px;
}

.module-registry-service-facts > div + div {
    border-left: 1px solid var(--operator-line, #d9dde3);
}

.module-registry-service-facts dt {
    margin: 0 0 5px;
    color: var(--operator-muted, var(--text-muted));
    font-size: 9px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.module-registry-service-facts dd {
    overflow: hidden;
    margin: 0;
    color: var(--operator-text-soft, var(--text-secondary));
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.module-registry-service-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 14px 18px;
}

.module-registry-service-footer > span {
    color: var(--operator-muted, var(--text-muted));
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.module-registry-service-action {
    gap: 5px;
    min-width: 106px;
    justify-content: center;
}

.module-registry-service-action svg {
    width: 13px;
    height: 13px;
    transition: transform 140ms ease;
}

.module-registry-service-action:hover svg {
    transform: translateX(2px);
}

@media (max-width: 1020px) {
    .module-registry-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .module-registry-module-grid {
        grid-template-columns: 1fr;
    }

    .module-registry-service-card {
        min-height: 224px;
    }

    .module-registry-service-head {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }

    .module-registry-module-icon {
        width: 52px;
        height: 52px;
    }

    .module-registry-module-icon svg {
        width: 27px;
        height: 27px;
    }

    .module-registry-service-status {
        grid-column: 2;
        width: fit-content;
        margin-top: -2px;
    }

    .module-registry-service-facts > div {
        padding-right: 16px;
        padding-left: 16px;
    }

    .module-registry-service-footer {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media (max-width: 420px) {
    .module-registry-service-facts {
        grid-template-columns: 1fr;
    }

    .module-registry-service-facts > div + div {
        border-top: 1px solid var(--operator-line, #d9dde3);
        border-left: 0;
    }
}

/* Module Registry: restored compact operator cards. */
.module-registry-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.module-registry-module-card {
    appearance: none;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-content: start;
    align-items: center;
    gap: 0 11px;
    min-width: 0;
    min-height: 112px;
    padding: 14px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.module-registry-module-card:hover {
    border-color: color-mix(in srgb, var(--operator-link, var(--primary)) 35%, var(--operator-line, #d9dde3));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 3%, var(--operator-surface, #ffffff));
}

.module-registry-module-card:focus-visible {
    outline: 2px solid var(--operator-link, var(--primary));
    outline-offset: 2px;
}

.module-registry-module-card .module-registry-module-icon {
    align-self: start;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--operator-orange, var(--brand-orange));
}

.module-registry-module-card .module-registry-module-icon svg {
    width: 20px;
    height: 20px;
}

.module-registry-module-card .operator-control-copy {
    gap: 4px;
}

.module-registry-module-card .operator-control-title {
    font-size: 14px;
    font-weight: 680;
}

.module-registry-module-card .operator-control-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.module-registry-module-open {
    display: inline-flex;
    grid-column: 2;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin-top: 12px;
    color: var(--operator-link, var(--primary));
    font-size: 11px;
    font-weight: 650;
}

.module-registry-module-open svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 1020px) {
    .module-registry-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .module-registry-module-grid {
        grid-template-columns: 1fr;
    }

    .module-registry-module-card {
        min-height: 104px;
    }
}

/* =============================================================================
   IP REPUTATION MODULE (Enterprise Operator Presentation)
   Sleek dark cards, glowing accent indicators, and unified operator metrics.
   ============================================================================= */

.reputation-operator-frame {
    min-height: 100%;
}

.reputation-operator-frame .operator-frame-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.reputation-operator-stack {
    display: grid;
    gap: 24px;
}

.reputation-section {
    min-width: 0;
}

/* Card Surface Container */
.reputation-card {
    background: var(--surface-card, #171a1f);
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.2));
}

[data-theme="light"] .reputation-card {
    background: #ffffff;
    border-color: var(--border, #d9dee5);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* Metric Strip Elevation */
.reputation-metric-strip.operator-metric-strip {
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-card, #171a1f);
}

[data-theme="light"] .reputation-metric-strip.operator-metric-strip {
    border-color: var(--border, #d9dee5);
    background: #ffffff;
}

/* Controls List (Protection Policies) */
.reputation-control-list.operator-control-list {
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-card, #171a1f);
}

[data-theme="light"] .reputation-control-list.operator-control-list {
    border-color: var(--border, #d9dee5);
    background: #ffffff;
}

.reputation-control-list .operator-control-row {
    background: var(--surface-card, #171a1f);
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    padding: 14px 18px;
    min-height: 64px;
    transition: background-color 140ms ease;
}

[data-theme="light"] .reputation-control-list .operator-control-row {
    background: #ffffff;
    border-bottom-color: var(--border-subtle, #f0f2f5);
}

.reputation-control-list .operator-control-row:hover {
    background: var(--surface-card-hover, #1f242c);
}

[data-theme="light"] .reputation-control-list .operator-control-row:hover {
    background: #f8fafc;
}

.reputation-control-list .operator-control-row:last-child {
    border-bottom: 0;
}

.reputation-control-list .operator-control-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.1);
    border: 1px solid rgba(var(--brand-orange-rgb, 249, 115, 22), 0.22);
    color: var(--brand-orange, #f97316);
}

[data-theme="light"] .reputation-control-list .operator-control-icon {
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.08);
    border-color: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.2);
}

.reputation-control-list .operator-control-icon svg {
    width: 18px;
    height: 18px;
}

/* Decision Policy 2-Column Grid */
.reputation-decision-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr);
    gap: 16px;
    align-items: stretch;
}

@media (max-width: 960px) {
    .reputation-decision-grid {
        grid-template-columns: 1fr;
    }
}

.reputation-threshold-card {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.reputation-actions-card {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    justify-content: stretch;
    box-sizing: border-box;
}

.reputation-control-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.reputation-control-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim, #94a3b8);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

[data-theme="light"] .reputation-control-label {
    color: #64748b;
}

.reputation-score-box {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}

.reputation-score-box strong {
    color: var(--text-main, #f8fafc);
    font-size: 28px;
    font-weight: 760;
    letter-spacing: -0.04em;
}

[data-theme="light"] .reputation-score-box strong {
    color: #0f172a;
}

.reputation-score-box span {
    color: var(--text-muted, #94a3b8);
    font-size: 12px;
    font-weight: 600;
}

.reputation-scale-labels {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 680;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.reputation-scale-labels .tone-high {
    color: var(--danger, #ef4444);
    text-align: left;
}

.reputation-scale-labels .tone-mid {
    color: #eab308;
    text-align: center;
}

.reputation-scale-labels .tone-trusted {
    color: var(--success, #22c55e);
    text-align: right;
}

.reputation-slider-track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: -11px;
    pointer-events: none;
}

[data-theme="light"] .reputation-slider-track {
    background: #e2e8f0;
}

.reputation-track-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    background: var(--brand-orange, #f97316);
}

.reputation-track-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2.5px solid var(--brand-orange, #f97316);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.45);
}

.reputation-range-slider {
    width: 100%;
    height: 24px;
    opacity: 0;
    cursor: pointer;
    position: relative;
    z-index: 2;
    margin: 0;
}

.reputation-scale-values {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim, #64748b);
    font-family: var(--font-mono, monospace);
    margin-top: 2px;
}

.reputation-decision-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.08);
    border: 1px solid rgba(var(--brand-orange-rgb, 249, 115, 22), 0.22);
    color: var(--text-main, #f8fafc);
    font-size: 12px;
    line-height: 1.4;
}

[data-theme="light"] .reputation-decision-note {
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.06);
    border-color: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.2);
    color: #1e293b;
}

.reputation-cache-field {
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.07));
}

[data-theme="light"] .reputation-cache-field {
    border-top-color: #f0f2f5;
}

/* Action Choices (Strict Block vs Smart Challenge) - Fill Container */
.reputation-actions-card {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    justify-content: stretch;
    box-sizing: border-box;
}

.reputation-actions-card .flow-reputation-action,
.reputation-actions-card .reputation-action-option {
    appearance: none;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 6px;
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    background: var(--bg-interactive, #1a1e24);
    color: var(--text-main, #f8fafc);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

[data-theme="light"] .reputation-actions-card .flow-reputation-action,
[data-theme="light"] .reputation-actions-card .reputation-action-option {
    background: #ffffff;
    border-color: #d9dee5;
    color: #0f172a;
}

.reputation-actions-card .flow-reputation-action:hover:not(.is-active),
.reputation-actions-card .reputation-action-option:hover:not(.is-active) {
    background: var(--surface-card-hover, #1f242c);
    border-color: rgba(255, 255, 255, 0.22);
}

[data-theme="light"] .reputation-actions-card .flow-reputation-action:hover:not(.is-active),
[data-theme="light"] .reputation-actions-card .reputation-action-option:hover:not(.is-active) {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.reputation-actions-card .flow-reputation-action:focus-visible,
.reputation-actions-card .reputation-action-option:focus-visible {
    outline: 2px solid var(--brand-orange, #f97316);
    outline-offset: -2px;
}

.reputation-actions-card .flow-reputation-action.is-active,
.reputation-actions-card .reputation-action-option.is-active {
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.08);
    border-color: var(--brand-orange, #f97316);
    box-shadow: 0 0 0 1px var(--brand-orange, #f97316), 0 4px 16px rgba(249, 115, 22, 0.12);
}

[data-theme="light"] .reputation-actions-card .flow-reputation-action.is-active,
[data-theme="light"] .reputation-actions-card .reputation-action-option.is-active {
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.05);
}

.reputation-actions-card .flow-reputation-action-icon,
.reputation-actions-card .reputation-action-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #94a3b8);
    transition: all 140ms ease;
}

[data-theme="light"] .reputation-actions-card .flow-reputation-action-icon,
[data-theme="light"] .reputation-actions-card .reputation-action-icon {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}

.reputation-actions-card .flow-reputation-action.is-active .flow-reputation-action-icon,
.reputation-actions-card .reputation-action-option.is-active .reputation-action-icon {
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.14);
    border-color: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.28);
    color: var(--brand-orange, #f97316);
}

.reputation-actions-card .flow-reputation-action-icon svg,
.reputation-actions-card .reputation-action-icon svg {
    width: 20px;
    height: 20px;
}

.reputation-actions-card .flow-reputation-action-copy,
.reputation-actions-card .reputation-action-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.reputation-actions-card .flow-reputation-action-copy strong,
.reputation-actions-card .reputation-action-copy strong {
    color: var(--text-main, #f8fafc);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

[data-theme="light"] .reputation-actions-card .flow-reputation-action-copy strong,
[data-theme="light"] .reputation-actions-card .reputation-action-copy strong {
    color: #0f172a;
}

.reputation-actions-card .flow-reputation-action-copy small,
.reputation-actions-card .reputation-action-copy small {
    color: var(--text-muted, #94a3b8);
    font-size: 12px;
    line-height: 1.45;
}

[data-theme="light"] .reputation-actions-card .flow-reputation-action-copy small,
[data-theme="light"] .reputation-actions-card .reputation-action-copy small {
    color: #64748b;
}

.reputation-actions-card .flow-reputation-action-check,
.reputation-actions-card .reputation-action-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    position: relative;
    transition: all 140ms ease;
    box-sizing: border-box;
}

[data-theme="light"] .reputation-actions-card .flow-reputation-action-check,
[data-theme="light"] .reputation-actions-card .reputation-action-radio {
    border-color: #cbd5e1;
}

.reputation-actions-card .flow-reputation-action.is-active .flow-reputation-action-check,
.reputation-actions-card .reputation-action-option.is-active .reputation-action-radio {
    border-color: var(--brand-orange, #f97316);
    background: var(--brand-orange, #f97316);
    box-shadow: inset 0 0 0 4px var(--surface-card, #171a1f);
}

[data-theme="light"] .reputation-actions-card .flow-reputation-action.is-active .flow-reputation-action-check,
[data-theme="light"] .reputation-actions-card .reputation-action-option.is-active .reputation-action-radio {
    box-shadow: inset 0 0 0 4px #ffffff;
}

/* Rules / Table Card */
.reputation-table-container {
    width: 100%;
    overflow-x: auto;
}

.reputation-rules-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.reputation-rules-table th {
    height: 40px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-dim, #94a3b8);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}

[data-theme="light"] .reputation-rules-table th {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
    color: #64748b;
}

.reputation-rules-table th.th-rule-target { width: 28%; min-width: 160px; }
.reputation-rules-table th.th-rule-action { width: 16%; min-width: 90px; }
.reputation-rules-table th.th-rule-score  { width: 14%; min-width: 80px; }
.reputation-rules-table th.th-rule-desc   { width: 32%; }
.reputation-rules-table th.th-rule-actions{ width: 10%; min-width: 80px; text-align: right; }

.reputation-rules-table td {
    height: 52px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    vertical-align: middle;
    color: var(--text-main, #f8fafc);
    font-size: 13px;
}

[data-theme="light"] .reputation-rules-table td {
    border-bottom-color: #f0f2f5;
    color: #1e293b;
}

.reputation-rules-table tr:hover td {
    background: var(--surface-card-hover, rgba(255, 255, 255, 0.02));
}

[data-theme="light"] .reputation-rules-table tr:hover td {
    background: #f8fafc;
}

.reputation-rules-table tr:last-child td {
    border-bottom: 0;
}

.reputation-ip-code {
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--text-main, #f8fafc);
}

[data-theme="light"] .reputation-ip-code {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #0f172a;
}

.reputation-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.reputation-badge.badge-allow,
.reputation-badge.badge-bypass {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.reputation-badge.badge-block {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.28);
}

.reputation-badge.badge-challenge {
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.12);
    color: var(--brand-orange, #f97316);
    border: 1px solid rgba(var(--brand-orange-rgb, 249, 115, 22), 0.28);
}

.reputation-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    color: var(--text-muted, #94a3b8);
}

.reputation-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-dim, #64748b);
    margin-bottom: 4px;
}

[data-theme="light"] .reputation-empty-icon {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.reputation-empty-state strong {
    color: var(--text-main, #f8fafc);
    font-size: 14px;
}

[data-theme="light"] .reputation-empty-state strong {
    color: #0f172a;
}

.reputation-empty-state p {
    margin: 0;
    font-size: 12px;
}

/* Threat Directory inside Reputation Card */
.reputation-threat-card .flow-blacklist-console {
    border: 0;
    background: transparent;
}

.reputation-threat-card .flow-blacklist-toolbar {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .reputation-threat-card .flow-blacklist-toolbar {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
}

.reputation-threat-card .threat-directory-table {
    width: 100%;
    border-collapse: collapse;
}

.reputation-threat-card .threat-directory-table th {
    background: rgba(255, 255, 255, 0.015);
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim, #94a3b8);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[data-theme="light"] .reputation-threat-card .threat-directory-table th {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
    color: #64748b;
}

.reputation-threat-card .threat-directory-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    color: var(--text-main, #f8fafc);
}

[data-theme="light"] .reputation-threat-card .threat-directory-table td {
    border-bottom-color: #f0f2f5;
    color: #1e293b;
}

.reputation-threat-card .flow-threat-row:hover td {
    background: var(--surface-card-hover, rgba(255, 255, 255, 0.02));
}

[data-theme="light"] .reputation-threat-card .flow-threat-row:hover td {
    background: #f8fafc;
}

.reputation-threat-card .flow-blacklist-pagination {
    padding: 12px 18px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.01);
}

[data-theme="light"] .reputation-threat-card .flow-blacklist-pagination {
    border-top-color: #e2e8f0;
    background: #f8fafc;
}

/* Global Captcha: shared operator-frame presentation for module configuration. */
.captcha-operator-frame .operator-frame-actions {
    display: inline-flex;
    align-items: center;
}

.captcha-operator-stack {
    display: grid;
    gap: 22px;
}

.captcha-operator-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
    gap: 16px;
    align-items: stretch;
}

.captcha-operator-grid > .operator-section + .operator-section {
    padding-top: 0;
}

.captcha-operator-grid > .operator-section {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.captcha-operator-grid > .operator-section > .operator-section-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.captcha-provider-list {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
}

.captcha-provider-card {
    appearance: none;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 13px;
    min-width: 0;
    min-height: 82px;
    padding: 14px 16px;
    border: 0;
    border-right: 1px solid var(--operator-line-soft, #eceff3);
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.captcha-provider-card:nth-child(2n) {
    border-right: 0;
}

.captcha-provider-card:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.captcha-provider-card:hover {
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 4%, var(--operator-surface, #ffffff));
}

.captcha-provider-card:focus-visible {
    outline: 2px solid var(--operator-orange, var(--brand-orange));
    outline-offset: -2px;
}

.captcha-provider-card.is-active {
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 6%, var(--operator-surface, #ffffff));
    box-shadow: inset 3px 0 0 var(--operator-orange, var(--brand-orange));
}

.captcha-provider-mark {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 32%, var(--operator-line, #d9dde3));
    border-radius: 7px;
    background: var(--operator-surface-depth, var(--bg-depth));
    color: var(--operator-orange, var(--brand-orange));
}

.captcha-provider-mark svg {
    width: 34px;
    height: 34px;
}

.captcha-provider-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.captcha-provider-copy strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.captcha-provider-copy small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.captcha-provider-check {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    color: var(--operator-orange, var(--brand-orange));
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.captcha-provider-check svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.3;
}

.captcha-provider-card:hover .captcha-provider-check {
    opacity: 0.35;
}

.captcha-provider-card.is-active .captcha-provider-mark {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 60%, var(--operator-line, #d9dde3));
}

.captcha-provider-card.is-active .captcha-provider-check {
    opacity: 1;
    transform: translateX(0);
}

.captcha-credentials-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    padding: 16px;
    border: 1px solid var(--operator-line, #d9dde3);
    background: var(--operator-surface, #ffffff);
}

.captcha-field-grid {
    display: grid;
    gap: 14px;
}

.captcha-field-grid .settings-field {
    min-width: 0;
}

.captcha-score-field {
    padding-top: 2px;
}

.captcha-form-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.captcha-note-icon {
    display: inline-flex;
    width: 17px;
    height: 17px;
    align-items: center;
    justify-content: center;
    flex: 0 0 17px;
    border: 1px solid color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 45%, var(--operator-line, #d9dde3));
    border-radius: 50%;
    color: var(--operator-orange, var(--brand-orange));
    font-size: 10px;
    font-weight: 800;
}

@media (max-width: 1020px) {
    .captcha-operator-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .captcha-provider-list {
        grid-template-columns: 1fr;
    }

    .captcha-provider-card,
    .captcha-provider-card:nth-child(2n) {
        border-right: 0;
    }

    .captcha-provider-card:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .captcha-provider-card:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 680px) {
    .captcha-module-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .captcha-module-status {
        margin-left: 56px;
    }

    .module-old-card .settings-section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .module-old-card .settings-section-title small {
        margin-left: 0;
    }
}

/* Keep the redesigned provider cards aligned inside the original module structure. */
.module-old-shell .captcha-provider-tile {
    align-items: stretch;
}

/* Captcha module surface: use the same full-width section rhythm as the module registry. */
.view:not(.view-operator) .module-old-shell {
    width: calc(100% + 48px);
    margin: -24px;
    gap: 0;
}

/* Captcha keeps the original vertical configuration flow: selection, then credentials. */
.captcha-operator-grid {
    grid-template-columns: 1fr;
    gap: 22px;
}

.captcha-operator-grid > .operator-section + .operator-section {
    padding-top: 22px;
    border-top: 0;
}

.captcha-operator-grid > .operator-section {
    display: block;
}

.captcha-operator-grid > .operator-section > .operator-section-body {
    display: block;
}

.captcha-operator-grid .captcha-provider-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.captcha-operator-grid .captcha-provider-card:nth-child(2n) {
    border-right: 1px solid var(--operator-line-soft, #eceff3);
}

.captcha-operator-grid .captcha-provider-card:nth-child(3n) {
    border-right: 0;
}

.captcha-operator-grid .captcha-provider-card:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.captcha-operator-grid .captcha-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.captcha-operator-grid .captcha-score-field {
    grid-column: 1 / -1;
}

.view:not(.view-operator) .module-old-header,
.view:not(.view-operator) .module-old-card {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: var(--bg-panel);
}

.view:not(.view-operator) .module-old-header {
    padding: 28px 32px 24px;
    border-top: 0;
    border-bottom: 1px solid var(--border);
}

.view:not(.view-operator) .module-old-card {
    padding: 26px 32px 30px;
    border-bottom: 1px solid var(--border);
}

.view:not(.view-operator) .captcha-module-title h4 {
    font-size: 22px;
    line-height: 1.15;
}

.view:not(.view-operator) .captcha-module-title p {
    font-size: 13px;
}

.view:not(.view-operator) .module-old-card .settings-section-title {
    font-size: 16px;
}

@media (max-width: 900px) {
    .captcha-operator-grid .captcha-provider-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .captcha-operator-grid .captcha-provider-card:nth-child(3n) {
        border-right: 1px solid var(--operator-line-soft, #eceff3);
    }

    .captcha-operator-grid .captcha-provider-card:nth-child(2n) {
        border-right: 0;
    }

    .captcha-operator-grid .captcha-provider-card:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .captcha-operator-grid .captcha-provider-card:last-child {
        border-bottom: 0;
    }

    .view:not(.view-operator) .module-old-shell {
        width: calc(100% + 32px);
        margin: -16px;
    }

    .view:not(.view-operator) .module-old-header,
    .view:not(.view-operator) .module-old-card {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 680px) {
    .captcha-operator-grid .captcha-provider-list,
    .captcha-operator-grid .captcha-field-grid {
        grid-template-columns: 1fr;
    }

    .captcha-operator-grid .captcha-provider-card,
    .captcha-operator-grid .captcha-provider-card:nth-child(2n),
    .captcha-operator-grid .captcha-provider-card:nth-child(3n) {
        border-right: 0;
    }

    .captcha-operator-grid .captcha-provider-card:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .captcha-operator-grid .captcha-provider-card:last-child {
        border-bottom: 0;
    }
}

/* Smart Challenge: shared operator presentation with policy-first configuration. */
.challenge-operator-frame .operator-frame-actions {
    display: inline-flex;
    align-items: center;
}

.challenge-operator-stack {
    display: grid;
    gap: 22px;
}

.challenge-operator-frame .operator-section {
    min-width: 0;
}

.challenge-mode-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    border-radius: 6px;
    background: var(--surface-card, #171a1f);
}

.challenge-mode-card {
    appearance: none;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 84px;
    padding: 14px 16px;
    border: 0;
    border-right: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: var(--surface-card, #171a1f);
    color: var(--text-main, #f8fafc);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.challenge-mode-card:last-child {
    border-right: 0;
}

.challenge-mode-card:hover:not(:disabled) {
    background: var(--surface-card-hover, #1f242c);
}

.challenge-mode-card:focus-visible {
    outline: 2px solid var(--brand-orange, #f97316);
    outline-offset: -2px;
}

.challenge-mode-card.is-active {
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.08);
    box-shadow: inset 0 3px 0 var(--brand-orange, #f97316);
}

.challenge-mode-card.is-unavailable {
    cursor: not-allowed;
    opacity: 0.42;
}

.challenge-mode-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--brand-orange-rgb, 249, 115, 22), 0.28);
    border-radius: 6px;
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.1);
    color: var(--brand-orange, #f97316);
}

.challenge-mode-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.challenge-mode-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.challenge-mode-copy strong {
    color: var(--text-main, #f8fafc);
    font-size: 12.5px;
    font-weight: 600;
}

.challenge-mode-copy small {
    color: var(--text-dim, #64748b);
    font-size: 10.5px;
    line-height: 1.35;
}

.challenge-mode-state {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
}

.challenge-mode-state > span {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18));
    border-radius: 50%;
    color: transparent;
    transition: all 140ms ease;
}

.challenge-mode-state svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
}

.challenge-mode-card.is-active .challenge-mode-state > span {
    border-color: var(--brand-orange, #f97316);
    background: var(--brand-orange, #f97316);
    color: #ffffff;
}

.challenge-editor-grid {
    display: grid;
    grid-template-columns: minmax(330px, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: start;
}

.challenge-editor-column {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.challenge-editor-column > .operator-section {
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    padding: 0 0 20px;
}

.challenge-editor-column > .operator-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.challenge-editor-grid > .operator-section + .operator-section {
    padding-top: 0;
}

.challenge-editor-grid > .operator-section {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-bottom: 0 !important;
    padding-bottom: 0;
}

.challenge-editor-grid > .operator-section > .operator-section-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.challenge-appearance-panel,
.challenge-operator-preview {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.challenge-appearance-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 16px;
    padding: 0;
}

.challenge-appearance-panel .settings-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.challenge-appearance-panel .settings-field label {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    width: fit-content;
}

.challenge-appearance-panel .settings-input {
    width: 100%;
    background: var(--input-bg, var(--bg-depth));
    border: 1px solid var(--border);
    border-radius: var(--radius, 2px);
    color: var(--text-main);
    padding: 9px 12px;
    font-size: 13px;
    font-family: var(--font-main);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.challenge-appearance-panel .settings-input:focus {
    border-color: var(--brand-orange, #f97316);
    box-shadow: 0 0 0 2px rgba(var(--brand-orange-rgb, 249, 115, 22), 0.18);
    outline: none;
}

[data-theme="light"] .challenge-appearance-panel .settings-input {
    background: #ffffff;
    border-color: var(--border, #d9dee5);
    color: var(--text-main, #101214);
}

.challenge-appearance-panel .settings-hint {
    color: var(--text-dim, #64748b);
    font-size: 11px;
    line-height: 1.35;
}

.challenge-message-input {
    min-height: 90px;
    resize: vertical;
}

.challenge-theme-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius, 2px);
    background: var(--bg-depth);
}

[data-theme="light"] .challenge-theme-group {
    border-color: var(--border, #d9dee5);
    background: #f2f4f7;
}

.challenge-theme-btn {
    appearance: none;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border: 0;
    background: transparent !important;
    color: var(--text-muted, #94a3b8) !important;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 140ms ease;
}

[data-theme="light"] .challenge-theme-btn {
    color: var(--text-muted, #69727d) !important;
}

.challenge-theme-btn + .challenge-theme-btn {
    border-left: 1px solid var(--border);
}

[data-theme="light"] .challenge-theme-btn + .challenge-theme-btn {
    border-left-color: var(--border, #d9dee5);
}

.challenge-theme-btn:hover {
    color: var(--text-main, #f8fafc) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="light"] .challenge-theme-btn:hover {
    color: var(--text-main, #101214) !important;
    background: rgba(0, 0, 0, 0.03) !important;
}

.challenge-theme-btn:focus-visible {
    outline: 2px solid var(--brand-orange, #f97316);
    outline-offset: -2px;
}

.challenge-theme-btn.is-active {
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.16) !important;
    color: var(--brand-orange, #f97316) !important;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(var(--brand-orange-rgb, 249, 115, 22), 0.35);
}

[data-theme="light"] .challenge-theme-btn.is-active {
    background: #ffffff !important;
    color: #ea580c !important;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(234, 88, 12, 0.35) !important;
}

.challenge-theme-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Simple Preview Section */
.challenge-operator-preview {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 440px;
}

.challenge-operator-preview .preview-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 440px;
    border-radius: var(--radius-lg, 4px);
    overflow: hidden;
    position: relative;
    padding: 32px 24px 48px;
    box-sizing: border-box;
    border: 1px solid var(--border, #30363d);
    transition: background 180ms ease, border-color 180ms ease;
}

/* Dark mode visitor preview - isolated from admin console theme */
.challenge-operator-preview .preview-box.preview-dark,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark,
.challenge-runtime-preview.preview-dark,
[data-theme="light"] .challenge-runtime-preview.preview-dark {
    background: #11141a !important;
    border: 1px solid #2a3039 !important;
    color: #f4f6f8 !important;
}

/* Light mode visitor preview - isolated from admin console theme */
.challenge-operator-preview .preview-box.preview-light,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light,
.challenge-runtime-preview.preview-light,
[data-theme="light"] .challenge-runtime-preview.preview-light {
    background: #f6f7f9 !important;
    border: 1px solid var(--border, #d8dde5) !important;
    color: #171b22 !important;
}

.challenge-operator-preview .preview-box.preview-empty {
    border: 1px dashed var(--border, #30363d);
    background: var(--bg-depth, #0f1115);
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-empty {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.challenge-operator-preview .preview-inner {
    width: 100%;
    max-width: 420px;
    padding: 32px 28px;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
}

.challenge-operator-preview .challenge-runtime-preview-footer {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
}

/* Typography for Dark visitor preview */
.challenge-operator-preview .preview-box.preview-dark .challenge-runtime-preview-content h3,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .challenge-runtime-preview-content h3,
.challenge-operator-preview .preview-title-dark {
    color: #f4f6f8 !important;
}

.challenge-operator-preview .preview-box.preview-dark .challenge-runtime-preview-content p,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .challenge-runtime-preview-content p,
.challenge-operator-preview .preview-msg-dark {
    color: #a2aab6 !important;
}

.challenge-operator-preview .preview-box.preview-dark .challenge-runtime-preview-footer,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .challenge-runtime-preview-footer,
.challenge-operator-preview .challenge-runtime-preview-footer.preview-footer-dark {
    color: #737d8c !important;
}

.challenge-operator-preview .preview-box.preview-dark .challenge-runtime-preview-footer strong,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .challenge-runtime-preview-footer strong {
    color: #a2aab6 !important;
}

/* Typography for Light visitor preview */
.challenge-operator-preview .preview-box.preview-light .challenge-runtime-preview-content h3,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .challenge-runtime-preview-content h3,
.challenge-operator-preview .preview-title-light {
    color: #171b22 !important;
}

.challenge-operator-preview .preview-box.preview-light .challenge-runtime-preview-content p,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .challenge-runtime-preview-content p,
.challenge-operator-preview .preview-msg-light {
    color: #606a78 !important;
}

.challenge-operator-preview .preview-box.preview-light .challenge-runtime-preview-footer,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .challenge-runtime-preview-footer,
.challenge-operator-preview .challenge-runtime-preview-footer.preview-footer-light {
    color: #7b8695 !important;
}

.challenge-operator-preview .preview-box.preview-light .challenge-runtime-preview-footer strong,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .challenge-runtime-preview-footer strong {
    color: #606a78 !important;
}

.challenge-operator-preview .preview-empty-state {
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.challenge-operator-preview .preview-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.12);
    color: var(--brand-orange, #f97316);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.challenge-operator-preview .preview-empty-state strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main, #f8fafc);
}

[data-theme="light"] .challenge-operator-preview .preview-empty-state strong {
    color: #0f172a;
}

.challenge-operator-preview .preview-empty-state span {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted, #94a3b8);
}

[data-theme="light"] .challenge-operator-preview .preview-empty-state span {
    color: #64748b;
}

.preview-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    max-width: 360px;
}

.preview-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.1);
    color: var(--brand-orange, #f97316);
    margin-bottom: 6px;
}

.preview-empty-state strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main, #f8fafc);
}

.preview-empty-state span {
    font-size: 12px;
    color: var(--text-dim, #64748b);
    line-height: 1.5;
}

.challenge-runtime-preview {
    position: relative;
    padding: 0;
    border-color: #2a3039;
    background: #11141a;
}

.challenge-runtime-preview.preview-light {
    border-color: var(--border, #d8dde5);
    background: #f6f7f9;
}

.challenge-runtime-preview-footer,
.challenge-operator-preview .challenge-runtime-preview-footer {
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    color: #737d8c;
    font-size: 10px;
    line-height: 1.35;
    text-align: center;
    background: transparent !important;
    border: 0 !important;
}

.challenge-runtime-preview-content,
.challenge-operator-preview .challenge-runtime-preview-content,
.challenge-runtime-preview .challenge-runtime-preview-content,
[data-theme="light"] .challenge-runtime-preview-content,
[data-theme="light"] .challenge-operator-preview .challenge-runtime-preview-content,
[data-theme="light"] .challenge-runtime-preview .challenge-runtime-preview-content,
.challenge-runtime-preview .preview-inner,
.challenge-runtime-preview .preview-inner-light,
.challenge-runtime-preview .preview-inner-dark,
[data-theme="light"] .challenge-runtime-preview .preview-inner,
[data-theme="light"] .challenge-runtime-preview .preview-inner-light,
[data-theme="light"] .challenge-runtime-preview .preview-inner-dark,
.challenge-operator-preview .preview-inner,
.challenge-operator-preview .preview-inner-light,
.challenge-operator-preview .preview-inner-dark,
[data-theme="light"] .challenge-operator-preview .preview-inner,
[data-theme="light"] .challenge-operator-preview .preview-inner-light,
[data-theme="light"] .challenge-operator-preview .preview-inner-dark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(88%, 460px);
    max-width: 460px;
    padding: 34px 28px 42px;
    margin: 0 auto;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    text-align: center;
    box-sizing: border-box;
}

/* Ensure dark mode preview elements inside dark visitor box retain their dark styling regardless of admin light theme */
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark,
[data-theme="light"] .challenge-runtime-preview.preview-dark {
    background: #11141a !important;
    border-color: #2a3039 !important;
    color: #f4f6f8 !important;
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .challenge-runtime-preview-content,
[data-theme="light"] .challenge-runtime-preview.preview-dark .challenge-runtime-preview-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark #preview-title,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .preview-title-dark,
[data-theme="light"] .challenge-runtime-preview.preview-dark #preview-title,
.challenge-operator-preview .preview-box.preview-dark #preview-title,
.challenge-operator-preview .preview-box.preview-dark .preview-title-dark,
.challenge-runtime-preview.preview-dark #preview-title {
    color: #f4f6f8 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark #preview-msg,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .preview-msg-dark,
[data-theme="light"] .challenge-runtime-preview.preview-dark #preview-msg,
.challenge-operator-preview .preview-box.preview-dark #preview-msg,
.challenge-operator-preview .preview-box.preview-dark .preview-msg-dark,
.challenge-runtime-preview.preview-dark #preview-msg {
    color: #a2aab6 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .preview-widget-box,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .preview-captcha-box,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .preview-click-control,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .preview-slide-control,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .preview-sequence-control,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .preview-match-control {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: #2a3039 !important;
    color: #f4f6f8 !important;
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .challenge-runtime-preview-footer,
[data-theme="light"] .challenge-runtime-preview.preview-dark .challenge-runtime-preview-footer {
    color: #737d8c !important;
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-dark .challenge-runtime-preview-footer strong,
[data-theme="light"] .challenge-runtime-preview.preview-dark .challenge-runtime-preview-footer strong {
    color: #a2aab6 !important;
}

/* Ensure light mode preview elements inside light visitor box retain their light styling regardless of admin theme */
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light,
[data-theme="light"] .challenge-runtime-preview.preview-light {
    background: #f6f7f9 !important;
    border-color: var(--border, #d8dde5) !important;
    color: #171b22 !important;
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .challenge-runtime-preview-content,
[data-theme="light"] .challenge-runtime-preview.preview-light .challenge-runtime-preview-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-light #preview-title,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .preview-title-light,
[data-theme="light"] .challenge-runtime-preview.preview-light #preview-title,
.challenge-operator-preview .preview-box.preview-light #preview-title,
.challenge-operator-preview .preview-box.preview-light .preview-title-light,
.challenge-runtime-preview.preview-light #preview-title {
    color: #171b22 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-light #preview-msg,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .preview-msg-light,
[data-theme="light"] .challenge-runtime-preview.preview-light #preview-msg,
.challenge-operator-preview .preview-box.preview-light #preview-msg,
.challenge-operator-preview .preview-box.preview-light .preview-msg-light,
.challenge-runtime-preview.preview-light #preview-msg {
    color: #606a78 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .preview-widget-box,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .preview-captcha-box,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .preview-click-control,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .preview-slide-control,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .preview-sequence-control,
[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .preview-match-control {
    background: #eef1f4 !important;
    border-color: #d8dde5 !important;
    color: #171b22 !important;
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .challenge-runtime-preview-footer,
[data-theme="light"] .challenge-runtime-preview.preview-light .challenge-runtime-preview-footer {
    color: #8b95a5 !important;
}

[data-theme="light"] .challenge-operator-preview .preview-box.preview-light .challenge-runtime-preview-footer strong,
[data-theme="light"] .challenge-runtime-preview.preview-light .challenge-runtime-preview-footer strong {
    color: #606a78 !important;
}

.challenge-runtime-preview-content h3,
[data-theme="light"] .challenge-runtime-preview-content h3 {
    margin: 0 0 10px;
    color: #f4f6f8;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.challenge-runtime-preview-content p,
[data-theme="light"] .challenge-runtime-preview-content p {
    max-width: 360px;
    margin: 0 auto;
    color: #a2aab6;
    font-size: 12px;
    line-height: 1.55;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Spinner in Dark Mode preview */
.challenge-runtime-preview.preview-dark .spinner-preview,
.preview-box.preview-dark .spinner-preview,
.challenge-operator-preview .spinner-preview,
.challenge-runtime-preview .spinner-preview,
[data-theme="light"] .challenge-runtime-preview.preview-dark .spinner-preview,
[data-theme="light"] .preview-box.preview-dark .spinner-preview,
[data-theme="light"] .challenge-operator-preview .spinner-preview,
[data-theme="light"] .challenge-runtime-preview .spinner-preview {
    width: 44px;
    height: 44px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: transparent !important;
    border: 3.5px solid rgba(255, 255, 255, 0.2) !important;
    border-top-color: #f97316 !important;
    box-shadow: none !important;
    animation: spin 0.95s linear infinite !important;
}

/* Spinner in Light Mode preview - high-contrast track and solid orange arc */
.challenge-runtime-preview.preview-light .spinner-preview,
.preview-box.preview-light .spinner-preview,
[data-theme="light"] .challenge-runtime-preview.preview-light .spinner-preview,
[data-theme="light"] .preview-box.preview-light .spinner-preview {
    width: 44px;
    height: 44px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: transparent !important;
    border: 3.5px solid #cbd5e1 !important;
    border-top-color: #f97316 !important;
    box-shadow: none !important;
    animation: spin 0.95s linear infinite !important;
}

.challenge-runtime-preview-footer strong {
    color: #a2aab6;
    font-weight: 650;
}

.challenge-runtime-preview.preview-light .challenge-runtime-preview-footer strong {
    color: #606a78;
}

.challenge-runtime-preview-content .preview-widget-box,
.challenge-runtime-preview-content .preview-captcha-box {
    display: grid;
    width: min(300px, 100%);
    min-height: 60px;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 20px auto 0;
    padding: 10px 12px;
    border-color: #2a3039;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
}

.challenge-runtime-preview-content .preview-widget-box {
    appearance: none;
    position: relative;
    overflow: hidden;
    border-style: solid;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.challenge-runtime-preview-content .preview-widget-box::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: rgba(var(--brand-orange-rgb), 0.09);
    pointer-events: none;
}

.challenge-runtime-preview-content .preview-widget-box > * {
    position: relative;
    z-index: 1;
}

.challenge-runtime-preview-content .preview-widget-box.is-holding::before {
    width: 100%;
    transition: width 1.1s linear;
}

.challenge-runtime-preview-content .preview-widget-box.is-complete::before {
    width: 100%;
    background: rgba(var(--brand-orange-rgb), 0.13);
}

.challenge-runtime-preview-content .preview-widget-action-icon {
    position: relative;
    display: inline-flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border: 1px solid #2a3039;
    border-radius: 4px;
    background: #11141a;
}

.challenge-runtime-preview-content .preview-widget-action-icon::before,
.challenge-runtime-preview-content .preview-widget-action-icon::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 2px;
    border-radius: 999px;
    background: var(--operator-orange, var(--brand-orange));
}

.challenge-runtime-preview-content .preview-widget-action-icon::after {
    width: 2px;
    height: 9px;
}

.challenge-runtime-preview-content .preview-widget-title {
    font-size: 11px;
}

.challenge-runtime-preview-content .preview-widget-subtitle {
    font-size: 9px;
}

.challenge-runtime-preview-content .preview-widget-brand {
    color: var(--operator-orange, var(--brand-orange));
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
}

.challenge-runtime-preview.preview-light .preview-widget-box,
.challenge-runtime-preview.preview-light .preview-captcha-box {
    border-color: #d8dde5;
    background: #eef1f4;
}

.challenge-runtime-preview.preview-light .preview-widget-action-icon {
    border-color: #d8dde5;
    background: #f6f7f9;
}

.challenge-runtime-preview-content .preview-click-control {
    appearance: none;
    display: grid;
    width: min(300px, 100%);
    min-height: 60px;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 20px auto 0;
    padding: 10px 12px;
    border: 1px solid #2a3039;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
}

.challenge-runtime-preview-content .preview-click-check {
    position: relative;
    display: inline-flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border: 1px solid #2a3039;
    border-radius: 3px;
    background: #11141a;
}

.challenge-runtime-preview-content .preview-click-check::before {
    content: "";
    width: 10px;
    height: 6px;
    border-bottom: 2px solid var(--operator-orange, var(--brand-orange));
    border-left: 2px solid var(--operator-orange, var(--brand-orange));
    transform: translateY(-1px) rotate(-45deg);
}

.challenge-runtime-preview-content .preview-click-copy {
    display: grid;
    gap: 3px;
}

.challenge-runtime-preview-content .preview-click-brand {
    color: #737d8c;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.08em;
}

.challenge-runtime-preview-content .preview-slide-control {
    --preview-slide-progress: 0px;
    position: relative;
    width: min(320px, 100%);
    height: 58px;
    margin: 20px auto 0;
    overflow: hidden;
    border: 1px solid #2a3039;
    border-radius: 4px;
    background: transparent;
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
}

.challenge-runtime-preview-content .preview-slide-control::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(51px + var(--preview-slide-progress));
    background: rgba(var(--brand-orange-rgb), 0.08);
    transition: width 120ms ease;
}

.challenge-runtime-preview-content .preview-slide-thumb {
    position: absolute;
    top: 5px;
    left: 5px;
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-orange, var(--brand-orange));
    border-radius: 4px;
    background: #11141a;
    color: var(--operator-orange, var(--brand-orange));
    transform: translateX(var(--preview-slide-progress));
    transition: transform 120ms ease;
}

.challenge-runtime-preview-content .preview-slide-thumb svg,
.challenge-runtime-preview-content .preview-slide-end svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.challenge-runtime-preview-content .preview-slide-copy {
    position: absolute;
    inset: 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f4f6f8;
    font-size: 10px;
    font-weight: 700;
}

.challenge-runtime-preview-content .preview-slide-end {
    position: absolute;
    top: 0;
    right: 13px;
    bottom: 0;
    display: flex;
    align-items: center;
    color: #737d8c;
}

.challenge-runtime-preview-content .preview-sequence-control,
.challenge-runtime-preview-content .preview-match-control {
    width: min(310px, 100%);
    margin: 20px auto 0;
    padding: 11px;
    border: 1px solid #2a3039;
    border-radius: 4px;
    background: transparent;
    text-align: left;
}

.challenge-runtime-preview-content .preview-method-label,
.challenge-runtime-preview-content .preview-match-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
    color: #737d8c;
    font-size: 9px;
    font-weight: 650;
}

.challenge-runtime-preview-content .preview-sequence-steps,
.challenge-runtime-preview-content .preview-match-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.challenge-runtime-preview-content .preview-sequence-steps button,
.challenge-runtime-preview-content .preview-match-options button {
    appearance: none;
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #2a3039;
    border-radius: 4px;
    background: transparent;
    color: #a2aab6;
    font: inherit;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}

.challenge-runtime-preview-content .preview-match-prompt strong {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--operator-orange, var(--brand-orange));
    border-radius: 4px;
    color: var(--operator-orange, var(--brand-orange));
    font-size: 14px;
}

.challenge-runtime-preview-content .preview-sequence-steps button {
    font-size: 11px;
}

.challenge-runtime-preview-content .preview-match-options button {
    font-size: 14px;
}

.challenge-runtime-preview.preview-light .preview-click-control,
.challenge-runtime-preview.preview-light .preview-slide-control,
.challenge-runtime-preview.preview-light .preview-sequence-control,
.challenge-runtime-preview.preview-light .preview-match-control,
.challenge-runtime-preview.preview-light .preview-click-check,
.challenge-runtime-preview.preview-light .preview-sequence-steps button,
.challenge-runtime-preview.preview-light .preview-match-options button {
    border-color: #d8dde5;
    background: #eef1f4;
}

.challenge-runtime-preview.preview-light .preview-click-check,
.challenge-runtime-preview.preview-light .preview-slide-thumb {
    background: #f6f7f9;
}

.challenge-runtime-preview.preview-light .preview-widget-title,
.challenge-runtime-preview.preview-light .preview-slide-copy,
.challenge-runtime-preview.preview-light .preview-sequence-steps button,
.challenge-runtime-preview.preview-light .preview-match-options button {
    color: #171b22;
}

.challenge-runtime-preview.preview-light .preview-widget-subtitle,
.challenge-runtime-preview.preview-light .preview-click-brand,
.challenge-runtime-preview.preview-light .preview-slide-end,
.challenge-runtime-preview.preview-light .preview-method-label,
.challenge-runtime-preview.preview-light .preview-match-prompt {
    color: #606a78;
}

.challenge-runtime-preview-content [data-preview-action]:focus-visible,
.challenge-runtime-preview-content [data-preview-value]:focus-visible {
    outline: 2px solid var(--operator-orange, var(--brand-orange));
    outline-offset: 2px;
}

.challenge-runtime-preview-content [data-preview-action].is-complete {
    border-color: var(--operator-orange, var(--brand-orange));
    box-shadow: inset 0 0 0 1px rgba(var(--brand-orange-rgb), 0.22);
}

.challenge-runtime-preview-content .preview-widget-box.is-complete .preview-widget-action-icon,
.challenge-runtime-preview-content .preview-click-control.is-complete .preview-click-check {
    border-color: var(--operator-orange, var(--brand-orange));
}

.challenge-runtime-preview-content .preview-widget-box.is-complete .preview-widget-action-icon::before {
    width: 10px;
    height: 6px;
    border-bottom: 2px solid var(--operator-orange, var(--brand-orange));
    border-left: 2px solid var(--operator-orange, var(--brand-orange));
    border-radius: 0;
    background: transparent;
    transform: translateY(-1px) rotate(-45deg);
}

.challenge-runtime-preview-content .preview-widget-box.is-complete .preview-widget-action-icon::after {
    display: none;
}

.challenge-runtime-preview-content .preview-slide-control.is-dragging .preview-slide-thumb {
    transition: none;
}

.challenge-runtime-preview-content .preview-slide-control.is-dragging::before {
    transition: none;
}

.challenge-runtime-preview-content .preview-slide-control.is-complete .preview-slide-end {
    color: var(--operator-orange, var(--brand-orange));
}

.challenge-runtime-preview-content .preview-sequence-steps button:hover,
.challenge-runtime-preview-content .preview-match-options button:hover {
    border-color: var(--operator-orange, var(--brand-orange));
    color: var(--operator-orange, var(--brand-orange));
}

.challenge-runtime-preview-content .preview-sequence-steps button.is-selected,
.challenge-runtime-preview-content .preview-match-options button.is-selected {
    border-color: var(--operator-orange, var(--brand-orange));
    background: rgba(var(--brand-orange-rgb), 0.12);
    color: var(--operator-orange, var(--brand-orange));
}

.challenge-runtime-preview-content .preview-sequence-steps button.is-wrong,
.challenge-runtime-preview-content .preview-match-options button.is-wrong {
    border-color: var(--brand-orange);
    color: var(--brand-orange);
}

@media (max-width: 680px) {
    .challenge-runtime-preview-content.preview-inner {
        width: 92%;
        padding: 32px 18px 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .challenge-runtime-preview-content .preview-widget-box.is-holding::before,
    .challenge-runtime-preview-content .preview-slide-control::before,
    .challenge-runtime-preview-content .preview-slide-thumb {
        transition-duration: 1ms;
    }
}

@media (max-width: 1100px) {
    .challenge-editor-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .challenge-mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .challenge-mode-card:nth-child(2n) {
        border-right: 0;
    }

    .challenge-mode-card:nth-child(-n + 2) {
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }
}

@media (max-width: 680px) {
    .challenge-mode-grid {
        grid-template-columns: 1fr;
    }

    .challenge-mode-card {
        border-right: 0;
        border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    }

    .challenge-mode-card:last-child {
        border-bottom: 0;
    }
}

.challenge-policy-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.1));
    border-radius: 6px;
    background: var(--surface-card, #171a1f);
}

.challenge-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.challenge-policy-panel .settings-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.challenge-policy-panel .settings-input {
    width: 100%;
    background: var(--bg-depth, #0f1115);
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
    border-radius: 4px;
    color: var(--text-main, #f8fafc);
    padding: 8px 12px;
    font-size: 13px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.challenge-policy-panel .settings-input:focus {
    border-color: var(--brand-orange, #f97316);
    box-shadow: 0 0 0 2px rgba(var(--brand-orange-rgb, 249, 115, 22), 0.2);
    outline: none;
}

.challenge-policy-panel .settings-hint {
    color: var(--text-dim, #64748b);
    font-size: 11px;
    line-height: 1.35;
}

.challenge-policy-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 4px;
    border-left: 3px solid var(--brand-orange, #f97316);
    background: rgba(var(--brand-orange-rgb, 249, 115, 22), 0.06);
}

.challenge-policy-note-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--brand-orange, #f97316);
    margin-top: 1px;
}

.challenge-policy-note-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.challenge-policy-note-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.challenge-policy-note-copy strong {
    color: var(--text-main, #f8fafc);
    font-size: 12px;
    font-weight: 600;
}

.challenge-policy-note-copy small {
    color: var(--text-muted, #cbd5e1);
    font-size: 11px;
    line-height: 1.4;
}

@media (max-width: 780px) {
    .challenge-policy-grid {
        grid-template-columns: 1fr;
    }
}

/* Settings tab icon polish. */
.settings-operator-frame.legacy-admin-settings-shell .operator-line-tab-icon {
    display: inline-flex;
    width: 15px;
    height: 15px;
    align-items: center;
    justify-content: center;
    flex: 0 0 15px;
    color: inherit;
}

.settings-operator-frame.legacy-admin-settings-shell .operator-line-tab-icon svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.settings-operator-frame.legacy-admin-settings-shell .operator-line-tab.is-active .operator-line-tab-icon {
    color: var(--operator-orange, var(--brand-orange));
}

/* Settings rhythm: compact section headings, readable field groups, and local secondary actions. */
.settings-operator-frame.legacy-admin-settings-shell .settings-section {
    padding: 18px 22px;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-section-title {
    margin-bottom: 10px;
    padding-bottom: 9px;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-section > .settings-hint {
    display: block;
    max-width: 68ch;
    margin: 0 0 14px;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-grid {
    column-gap: 18px;
    row-gap: 16px;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-field {
    gap: 6px;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-inline-actions {
    margin-top: 14px;
}

/* Storage follows the paired-configuration layout used by Certificates. */
.settings-operator-frame.legacy-admin-settings-shell .storage-settings {
    padding: 18px;
}

.settings-operator-frame.legacy-admin-settings-shell .storage-configuration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.settings-operator-frame.legacy-admin-settings-shell .settings-storage-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame.legacy-admin-settings-shell .settings-storage-card > .operator-section-head {
    min-height: 66px;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface-muted, #f7f8fa) 62%, transparent);
}

.settings-operator-frame.legacy-admin-settings-shell .settings-storage-card > .operator-section-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    padding: 16px;
}

.settings-operator-frame.legacy-admin-settings-shell .storage-settings-panel {
    display: flex;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 14px;
}

.settings-operator-frame.legacy-admin-settings-shell .storage-runtime-status {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.settings-operator-frame.legacy-admin-settings-shell .storage-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 14px;
}

.settings-operator-frame.legacy-admin-settings-shell .storage-settings-options {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.settings-operator-frame.legacy-admin-settings-shell .storage-settings-options--single {
    grid-template-columns: minmax(0, 1fr);
}

.settings-operator-frame.legacy-admin-settings-shell .storage-settings-grid .settings-field {
    gap: 7px;
}

.settings-operator-frame.legacy-admin-settings-shell .storage-settings-grid .settings-field > label {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

.settings-operator-frame.legacy-admin-settings-shell .storage-settings-grid .settings-input {
    min-height: 40px;
    padding: 0 10px;
    border-color: var(--operator-line, #d9dde3);
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame.legacy-admin-settings-shell .storage-settings-grid .settings-hint {
    font-size: 10px;
    line-height: 1.35;
}

.settings-operator-frame.legacy-admin-settings-shell .storage-tls-control {
    min-width: 0;
}

.settings-operator-frame.legacy-admin-settings-shell .storage-tls-control .settings-toggle {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 12px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 3px;
    background: var(--operator-surface, #ffffff);
}

.settings-operator-frame.legacy-admin-settings-shell .storage-tls-control .toggle-label {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .storage-tls-control .settings-toggle {
    border-color: var(--divider, #2a3039);
    background: var(--surface-card, #11141a);
}

.settings-operator-frame.legacy-admin-settings-shell .storage-settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

[data-theme="dark"] .settings-operator-frame.legacy-admin-settings-shell .settings-storage-card > .operator-section-head {
    background: color-mix(in srgb, var(--operator-surface, #11141a) 96%, var(--bg-primary));
}

@media (max-width: 640px) {
    .settings-operator-frame.legacy-admin-settings-shell .settings-section {
        padding: 16px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .settings-section > .settings-hint {
        margin-bottom: 12px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .storage-settings {
        padding: 16px;
    }

    .settings-operator-frame.legacy-admin-settings-shell .storage-settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-operator-frame.legacy-admin-settings-shell .storage-settings-options {
        grid-template-columns: 1fr;
    }

    .settings-operator-frame.legacy-admin-settings-shell .storage-settings-actions {
        align-items: stretch;
    }

    .settings-operator-frame.legacy-admin-settings-shell .storage-settings-actions .btn {
        width: 100%;
    }
}

@media (max-width: 980px) {
    .settings-operator-frame.legacy-admin-settings-shell .storage-configuration-grid {
        grid-template-columns: 1fr;
    }
}

/* Routing uses the same focused resource-workspace hierarchy as the app editors. */
.routing-editor-workspace {
    padding: 20px 28px 36px;
    background: var(--bg-primary, var(--operator-surface, #ffffff));
}

.routing-editor-workspace .operator-resource-header {
    align-items: flex-start;
}

.routing-editor-workspace .operator-resource-body {
    padding-top: 18px;
}

.routing-editor-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.routing-editor-aside {
    gap: 16px;
}

.routing-editor-workspace .routing-editor-panel {
    border-color: var(--operator-line, #d9dde3);
    border-radius: var(--radius-sm, 2px);
    background: var(--operator-surface, #ffffff);
}

.routing-editor-main {
    overflow: hidden;
}

.routing-editor-section {
    padding: 20px 22px;
}

.routing-editor-section + .routing-editor-section {
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.routing-editor-section-head {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
}

.routing-editor-section-head h3,
.routing-editor-section-head p {
    margin: 0;
}

.routing-editor-section-head h3 {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 720;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.routing-editor-section-head p {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.routing-editor-section-head--with-control {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.routing-editor-inline-toggle {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.routing-editor-workspace .routing-editor-fields {
    gap: 14px;
}

.routing-editor-workspace .routing-editor-delivery-targets {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}

.routing-editor-workspace .settings-field {
    gap: 7px;
}

.routing-editor-workspace .settings-field > label {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
}

.routing-editor-workspace .routing-required {
    color: var(--operator-link, var(--primary));
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.routing-editor-workspace .settings-field input,
.routing-editor-workspace .settings-field select,
.routing-editor-workspace .settings-field textarea {
    min-height: 40px;
    border-radius: 3px;
    font-size: 13px;
}

.routing-editor-workspace .settings-field textarea {
    min-height: 96px;
}

.routing-editor-workspace .settings-hint {
    font-size: 10px;
    line-height: 1.35;
}

.routing-editor-advanced {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
}

.routing-editor-advanced > summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
}

.routing-editor-advanced > summary::-webkit-details-marker {
    display: none;
}

.routing-editor-advanced > summary::after {
    content: '+';
    color: var(--text-muted);
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
}

.routing-editor-advanced[open] > summary::after {
    content: '−';
}

.routing-editor-advanced > summary > span {
    font-size: 12px;
    font-weight: 700;
}

.routing-editor-advanced > summary > small {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
    text-align: right;
}

.routing-editor-advanced[open] > summary {
    color: var(--text-main);
}

.routing-editor-advanced-body {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.routing-editor-workspace .routing-editor-advanced .route-enabled-toggle {
    min-height: 48px;
    margin-top: 2px;
    padding: 10px 12px;
    border: 1px solid var(--operator-line, #d9dde3) !important;
    border-radius: 3px;
    background: var(--operator-surface-muted, #f7f8fa) !important;
}

.routing-editor-workspace .routing-editor-side-body {
    padding: 14px 16px;
}

.routing-editor-workspace .routing-editor-state .route-enabled-toggle {
    min-height: 48px;
}

.routing-editor-workspace .routing-editor-panel-head {
    padding: 14px 16px;
}

[data-theme="dark"] .routing-editor-workspace {
    background: var(--bg-primary, #0d1015);
}

[data-theme="dark"] .routing-editor-workspace .routing-editor-panel {
    border-color: var(--divider, #2a3039);
    background: var(--surface-card, #11141a);
}

[data-theme="dark"] .routing-editor-workspace .routing-editor-section + .routing-editor-section,
[data-theme="dark"] .routing-editor-workspace .routing-editor-advanced {
    border-color: var(--divider, #2a3039);
}

[data-theme="dark"] .routing-editor-workspace .routing-editor-advanced .route-enabled-toggle {
    border-color: var(--divider, #2a3039) !important;
    background: var(--operator-surface, #11141a) !important;
}

@media (max-width: 980px) {
    .routing-editor-layout {
        grid-template-columns: 1fr;
    }

    .routing-editor-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .routing-editor-workspace {
        padding: 16px 16px 28px;
    }

    .routing-editor-section {
        padding: 16px;
    }

    .routing-editor-section-head--with-control {
        align-items: flex-start;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .routing-editor-workspace .routing-editor-fields.two,
    .routing-editor-workspace .routing-editor-delivery-targets,
    .routing-editor-aside {
        grid-template-columns: 1fr;
    }

    .routing-editor-advanced > summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .routing-editor-advanced > summary::after {
        position: absolute;
        right: 0;
        top: 0;
    }

    .routing-editor-advanced > summary {
        position: relative;
        padding-right: 20px;
    }

    .routing-editor-advanced > summary > small {
        text-align: left;
    }
}

/* Routing creation follows the Add identity source setup flow. */
.routing-editor-create-shell {
    display: grid;
    width: min(100%, 1120px);
    max-width: 1120px;
    min-width: 0;
    gap: 8px;
}

.routing-editor-create-section {
    width: 100%;
    max-width: 1120px;
    padding-bottom: 0;
    border-bottom: 0;
}

.routing-editor-create-section > .operator-section-body {
    display: grid;
    gap: 0;
}

.route-create-form {
    width: min(100%, 1040px);
}

.route-create-setup-section {
    min-width: 0;
    margin: 0;
    padding: 28px 0;
    border: 0;
    border-top: 1px solid var(--operator-line-soft, var(--border-color));
}

.route-create-setup-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
}

.route-create-setup-heading > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.route-create-setup-heading h3,
.route-create-setup-heading p {
    margin: 0;
}

.route-create-setup-heading h3 {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.route-create-setup-heading p {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.route-create-state-control {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding: 10px 12px;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 4px;
    background: var(--operator-surface, var(--bg-secondary));
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.route-create-toggle-row.route-create-match-all-control {
    min-height: 44px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: transparent;
}

.route-create-default-target {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.route-create-field-grid {
    display: grid;
    min-width: 0;
    gap: 18px;
}

.route-create-field-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-create-basics-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr);
    align-items: end;
}

.route-create-enable-control {
    min-height: 40px;
    margin: 0;
}

.route-create-delivery-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}

.route-create-form .settings-field {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
}

.route-create-form [hidden] {
    display: none !important;
}

.route-create-form .settings-field > label {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

.route-create-required {
    margin-left: 5px;
    color: var(--operator-link, var(--primary));
    font-size: 10px;
    font-weight: 650;
}

.route-create-form .settings-field > .input {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
}

.route-create-form .settings-field > textarea.input {
    min-height: 112px;
    resize: vertical;
}

.route-create-form .settings-hint {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
}

.route-create-inline-delivery {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--operator-line-soft, var(--border-color));
}

.route-create-advanced {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--operator-line-soft, var(--border-color));
}

.route-create-advanced-settings {
    margin-top: 0;
    padding: 24px 0 0;
}

.route-create-advanced > summary {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
}

.route-create-advanced > summary::-webkit-details-marker {
    display: none;
}

.route-create-advanced > summary::after {
    content: '+';
    margin-left: auto;
    color: var(--text-muted);
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
}

.route-create-advanced[open] > summary::after {
    content: '−';
}

.route-create-advanced > summary > span {
    font-size: 13px;
    font-weight: 650;
}

.route-create-advanced > summary > small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
}

.route-create-advanced-body {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.route-create-advanced-settings-body {
    gap: 24px;
}

.route-create-advanced-group {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.route-create-advanced-group + .route-create-advanced-group {
    padding-top: 22px;
    border-top: 1px solid var(--operator-line-soft, var(--border-color));
}

.route-create-advanced-group h4 {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.route-create-subdisclosure {
    gap: 0;
}

.route-create-subdisclosure > summary {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    list-style: none;
}

.route-create-subdisclosure > summary::-webkit-details-marker {
    display: none;
}

.route-create-subdisclosure > summary::after {
    content: '+';
    margin-left: auto;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 400;
}

.route-create-subdisclosure[open] > summary::after {
    content: '−';
}

.route-create-subdisclosure > .route-create-field-grid {
    margin-top: 16px;
}

.route-create-field-grid--compact {
    grid-template-columns: minmax(0, 340px);
}

.route-create-toggle-row {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid var(--operator-line, var(--border-color));
    border-radius: 4px;
    background: var(--operator-surface, var(--bg-secondary));
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
}

.route-create-setup-section .routing-edge-context {
    display: grid;
    gap: 10px;
}

.route-create-setup-section .routing-edge-context-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 0;
}

.route-create-setup-section .routing-edge-context-row > span:nth-child(2) {
    flex: 1 1 180px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.route-create-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--operator-line, var(--border-color));
}

.route-create-actions .operator-control-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="dark"] .route-create-setup-section,
[data-theme="dark"] .route-create-advanced,
[data-theme="dark"] .route-create-actions,
[data-theme="dark"] .route-create-inline-delivery,
[data-theme="dark"] .route-create-advanced-group + .route-create-advanced-group {
    border-color: var(--divider, #2a3039);
}

[data-theme="dark"] .route-create-toggle-row {
    border-color: #303846;
    background: #171c23;
}

[data-theme="dark"] .route-create-state-control {
    border-color: #303846;
    background: #171c23;
}

[data-theme="dark"] .route-create-form .settings-field > .input {
    border-color: #303846 !important;
    background: #10141a !important;
    color: #f3f7fb !important;
}

[data-theme="dark"] .routing-editor-create-shell .operator-back-button-icon {
    border-color: #303846;
    background: #171c23;
    color: var(--text-muted);
}

@media (max-width: 760px) {
    .route-create-setup-section {
        padding: 22px 0;
    }

    .route-create-field-grid--two,
    .route-create-basics-grid,
    .route-create-delivery-grid {
        grid-template-columns: 1fr;
    }

    .route-create-enable-control {
        width: 100%;
    }

    .route-create-advanced > summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
        position: relative;
        padding-right: 20px;
    }

    .route-create-advanced > summary::after {
        position: absolute;
        top: 0;
        right: 0;
    }

    .route-create-advanced > summary > small {
        text-align: left;
    }

    .route-create-actions,
    .route-create-actions .operator-control-actions,
    .route-create-actions .operator-control-actions .btn {
        width: 100%;
    }
}

/* WAF Core dashboard: compact security analytics built on the operator surface. */
.waf-dashboard-frame {
    --waf-dashboard-line: var(--operator-line, #d9dde3);
    --waf-dashboard-soft-line: var(--operator-line-soft, #eceff3);
    --waf-dashboard-accent: var(--brand-orange, #f97316);
}

.waf-dashboard-frame .operator-frame-header {
    padding-bottom: 18px;
}

.waf-dashboard-frame .operator-frame-subtitle {
    max-width: 700px;
}

.waf-dashboard-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    row-gap: 0;
}

.waf-dashboard-header-actions {
    align-self: start;
    margin-left: auto;
}

.waf-dashboard-command-bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
    min-height: 54px;
    margin: 20px -32px 0;
    padding: 8px 32px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    background: var(--operator-surface, #ffffff);
}

.waf-dashboard-command-bar.is-empty {
    display: none;
}

.waf-dashboard-command-spacer {
    flex: 1 1 auto;
    min-width: 0;
}

.waf-dashboard-header-filters {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
}

.waf-dashboard-filter-chips {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.waf-dashboard-filter-chip,
.waf-dashboard-clear-filters {
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid var(--waf-dashboard-line);
    background: var(--operator-surface, #ffffff);
    color: var(--text-secondary);
    font: inherit;
    font-size: 11px;
    font-weight: 620;
    line-height: 1;
    white-space: nowrap;
}

.waf-dashboard-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.waf-dashboard-filter-chip span {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
}

.waf-dashboard-filter-chip:hover,
.waf-dashboard-clear-filters:hover {
    border-color: color-mix(in srgb, var(--waf-dashboard-accent) 55%, var(--waf-dashboard-line));
    color: var(--text-main);
}

.waf-dashboard-clear-filters {
    color: var(--text-muted);
}

.waf-dashboard-header-time {
    display: inline-flex;
    align-items: center;
}

.waf-dashboard-header-time .security-events-time-menu {
    margin-left: 0;
}

.waf-dashboard-header-time .security-time-panel {
    right: auto;
    left: 0;
}

.waf-dashboard-frame .waf-dashboard-body {
    gap: 22px;
}

.waf-dashboard-banner {
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--warning, var(--brand-orange)) 55%, var(--waf-dashboard-line));
    background: color-mix(in srgb, var(--warning, var(--brand-orange)) 7%, var(--operator-surface, #ffffff));
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.45;
}

.waf-dashboard-banner.is-danger {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 50%, var(--waf-dashboard-line));
    background: color-mix(in srgb, var(--danger, #ef4444) 7%, var(--operator-surface, #ffffff));
}

.waf-dashboard-frame .waf-dashboard-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.waf-dashboard-frame .is-filterable {
    cursor: pointer;
}

.waf-dashboard-frame .is-filterable:focus-visible,
.waf-dashboard-table-filter:focus-visible,
.waf-dashboard-filter-chip:focus-visible,
.waf-dashboard-clear-filters:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-orange) 72%, transparent);
    outline-offset: 2px;
}

.waf-dashboard-frame .operator-metric-item.is-filterable:hover {
    background: color-mix(in srgb, var(--waf-dashboard-accent) 7%, var(--operator-surface, #ffffff));
}

.waf-dashboard-primary-grid,
.waf-dashboard-dual-grid,
.waf-dashboard-rule-grid,
.waf-dashboard-evidence-grid,
.waf-dashboard-exposure-grid {
    display: grid;
    gap: 16px;
}

.waf-dashboard-primary-grid {
    grid-template-columns: minmax(0, 2fr) minmax(290px, .72fr);
    align-items: stretch;
}

.waf-dashboard-panel--timeline,
.waf-dashboard-panel--posture {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.waf-dashboard-dual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.waf-dashboard-rule-grid,
.waf-dashboard-evidence-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.waf-dashboard-exposure-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.waf-dashboard-section-analytics {
    min-width: 0;
}

.waf-dashboard-section-analytics-tabs {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    overflow-x: auto;
    border-bottom: 1px solid var(--waf-dashboard-line);
    scrollbar-width: thin;
}

.waf-dashboard-section-analytics-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 42px;
    margin: 0;
    padding: 11px 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 18px;
    cursor: pointer;
}

.waf-dashboard-section-analytics-tab svg {
    flex-shrink: 0;
    opacity: 0.78;
}

.waf-dashboard-section-analytics-tab.is-active svg {
    opacity: 1;
    color: var(--brand-orange);
}

.waf-dashboard-section-analytics-tab:hover {
    color: var(--text-main);
}

.waf-dashboard-section-analytics-tab.is-active {
    border-bottom-color: var(--brand-orange);
    color: var(--text-main);
}

.waf-dashboard-section-analytics-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-orange) 72%, transparent);
    outline-offset: -2px;
}

.waf-dashboard-section-analytics-panel {
    padding-top: 16px;
}

.waf-dashboard-section-analytics-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.waf-dashboard-frame .waf-dashboard-panel,
.waf-dashboard-frame .waf-dashboard-detail-panel {
    min-width: 0;
    margin: 0;
    border: 1px solid var(--waf-dashboard-line);
    background: var(--operator-surface, #ffffff);
}

.waf-dashboard-frame .waf-dashboard-panel {
    padding: 16px;
}

.waf-dashboard-frame .waf-dashboard-panel--timeline,
.waf-dashboard-frame .waf-dashboard-panel--posture {
    min-height: 0;
    padding: 16px;
}

.waf-dashboard-frame .waf-dashboard-panel--timeline .operator-section-head,
.waf-dashboard-frame .waf-dashboard-panel--posture .operator-section-head {
    margin-bottom: 10px;
}

.waf-dashboard-frame .waf-dashboard-detail-panel {
    padding: 14px;
}

.waf-dashboard-frame .waf-dashboard-panel .operator-section-head,
.waf-dashboard-frame .waf-dashboard-section > .operator-section-head {
    margin-bottom: 14px;
}

.waf-dashboard-frame .waf-dashboard-detail-panel h4 {
    margin: 0 0 12px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.waf-dashboard-frame .waf-dashboard-detail-panel.waf-dashboard-security-stat-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 116px;
    padding: 12px 14px;
}

.waf-dashboard-frame .waf-dashboard-security-stat-card .operator-section-head {
    min-height: 0;
    margin: 0;
    padding: 0 0 9px;
    border-bottom: 1px solid var(--waf-dashboard-soft-line);
}

.waf-dashboard-frame .waf-dashboard-security-stat-card .operator-section-head h4 {
    margin: 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 730;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waf-dashboard-frame .waf-dashboard-security-stat-card .waf-dashboard-breakdown-list {
    gap: 8px;
}

.waf-dashboard-frame .waf-dashboard-security-stat-card .waf-dashboard-breakdown-row {
    grid-template-columns: minmax(110px, 1fr) minmax(82px, .72fr) minmax(24px, auto);
    gap: 10px;
    min-height: 22px;
}

.waf-dashboard-frame .waf-dashboard-security-stat-card .waf-dashboard-breakdown-row.is-filterable {
    margin: -3px -4px;
    padding: 3px 4px;
}

.waf-dashboard-frame .waf-dashboard-security-stat-card .waf-dashboard-breakdown-label {
    font-size: 12px;
    font-weight: 690;
}

.waf-dashboard-frame .waf-dashboard-security-stat-card .waf-dashboard-breakdown-track {
    height: 3px;
}

.waf-dashboard-frame .waf-dashboard-security-stat-card .waf-dashboard-breakdown-row strong {
    min-width: 2ch;
    font-size: 12px;
    font-weight: 740;
    text-align: right;
}

.waf-dashboard-frame .waf-dashboard-section {
    padding-bottom: 22px;
}

.waf-dashboard-frame .waf-dashboard-section + .waf-dashboard-section {
    padding-top: 0;
}

.waf-dashboard-timeline-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 280px;
    align-items: stretch;
    padding: 0;
}

.waf-dashboard-timeline-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 0 4px 10px;
}

.waf-dashboard-timeline-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.waf-timeline-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.waf-timeline-legend-item strong {
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
}

.waf-timeline-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

.waf-timeline-swatch.is-total,
.waf-timeline-swatch.total {
    background: #5f86a2;
    box-shadow: 0 0 6px color-mix(in srgb, #5f86a2 45%, transparent);
}

.waf-timeline-swatch.is-blocked,
.waf-timeline-swatch.blocked {
    background: var(--brand-orange, #f97316);
    box-shadow: 0 0 6px rgba(var(--brand-orange-rgb, 249, 115, 22), 0.45);
}

.waf-timeline-swatch.is-detected,
.waf-timeline-swatch.detected {
    background: var(--brand-orange, #f97316);
    opacity: .72;
    box-shadow: 0 0 6px rgba(var(--brand-orange-rgb, 249, 115, 22), 0.35);
}

.waf-dashboard-timeline-svg {
    display: block;
    width: 100%;
    height: 260px;
    overflow: visible;
}

.waf-dashboard-timeline-grid {
    stroke: color-mix(in srgb, var(--waf-dashboard-soft-line) 88%, transparent);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.waf-dashboard-timeline-axis {
    stroke: var(--waf-dashboard-line);
    stroke-width: 1;
}

.waf-dashboard-timeline-total-area {
    fill: url(#waf-timeline-total-grad);
}

.waf-dashboard-timeline-total-line {
    fill: none;
    stroke: #5f86a2;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.waf-dashboard-timeline-blocked-area {
    fill: url(#waf-timeline-blocked-grad);
}

.waf-dashboard-timeline-blocked-line {
    fill: none;
    stroke: var(--brand-orange, #f97316);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.waf-dashboard-timeline-detected-line {
    fill: none;
    stroke: var(--brand-orange, #f97316);
    opacity: .72;
    stroke-width: 2;
    stroke-dasharray: 5 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.waf-dashboard-timeline-crosshair {
    stroke: color-mix(in srgb, #5f86a2 55%, var(--border));
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
    pointer-events: none;
}

.waf-point-total {
    fill: #5f86a2;
    stroke: #ffffff;
    stroke-width: 1.5;
    transition: r 140ms ease, opacity 140ms ease;
}

.waf-point-blocked {
    fill: var(--brand-orange, #f97316);
    stroke: #ffffff;
    stroke-width: 1.5;
    transition: r 140ms ease, opacity 140ms ease;
}

.waf-point-detected {
    fill: var(--brand-orange, #f97316);
    opacity: .75;
    stroke: #ffffff;
    stroke-width: 1.5;
    transition: r 140ms ease, opacity 140ms ease;
}

.waf-dashboard-timeline-point circle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, r 140ms ease;
}

.waf-dashboard-timeline-point circle.is-visible {
    opacity: 0.9;
    pointer-events: all;
}

.waf-dashboard-timeline-point:hover circle {
    opacity: 1;
    r: 6;
}

[data-theme="dark"] .waf-point-total,
[data-theme="dark"] .waf-point-blocked,
[data-theme="dark"] .waf-point-detected {
    stroke: #0f172a;
}

.waf-dashboard-timeline-hitbox {
    fill: transparent;
    cursor: crosshair;
    pointer-events: all;
}

.waf-dashboard-timeline-tooltip {
    position: absolute;
    z-index: 3;
    display: grid;
    gap: 3px;
    min-width: 160px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--brand-orange, #f97316) 48%, var(--waf-dashboard-line));
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    box-shadow: 0 10px 24px color-mix(in srgb, #000 24%, transparent);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
    pointer-events: none;
}

.waf-dashboard-timeline-tooltip[hidden] {
    display: none;
}

.waf-dashboard-timeline-tooltip strong {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
}

.waf-dashboard-timeline-tooltip-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.waf-dashboard-timeline-tooltip-stat > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}

.waf-dashboard-timeline-tooltip-stat strong {
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.waf-dashboard-timeline-label,
.waf-dashboard-timeline-value {
    fill: var(--text-secondary, #334155);
    stroke: none;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

[data-theme="light"] .waf-dashboard-timeline-label,
[data-theme="bright"] .waf-dashboard-timeline-label {
    fill: #0f172a;
    stroke: none;
    font-weight: 700;
}

[data-theme="light"] .waf-dashboard-timeline-value,
[data-theme="bright"] .waf-dashboard-timeline-value {
    fill: #334155;
    stroke: none;
    font-weight: 650;
}

[data-theme="dark"] .waf-dashboard-timeline-label,
[data-theme="dark"] .waf-dashboard-timeline-value {
    fill: #cbd5e1;
    stroke: none;
}

[data-theme="light"] .waf-point-total,
[data-theme="bright"] .waf-point-total,
[data-theme="light"] .waf-point-blocked,
[data-theme="bright"] .waf-point-blocked,
[data-theme="light"] .waf-point-detected,
[data-theme="bright"] .waf-point-detected {
    stroke: #ffffff;
}

.waf-dashboard-status-list {
    display: grid;
    border-top: 1px solid var(--waf-dashboard-soft-line);
}

.waf-dashboard-status-list > div {
    display: grid;
    grid-template-columns: minmax(86px, .7fr) minmax(0, 1.3fr);
    gap: 3px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--waf-dashboard-soft-line);
}

.waf-dashboard-status-list > div:last-child {
    border-bottom: 0;
}

/* Protection sections uses the reusable breakdown renderer. Keep its rows
   distinct from the status rows above so labels and bars remain in one column,
   and ensure Protection sections matches the height of the Threat activity chart. */
.waf-dashboard-panel--posture #waf-dashboard-protection-sections,
.waf-dashboard-protection-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

#waf-dashboard-protection-sections .waf-dashboard-breakdown-list,
.waf-dashboard-protection-shell .waf-dashboard-breakdown-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    padding: 0;
    margin: 0;
    border-bottom: 0;
    height: 100%;
}

#waf-dashboard-protection-sections .waf-dashboard-breakdown-row,
.waf-dashboard-protection-shell .waf-dashboard-breakdown-row {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(80px, .65fr) auto;
    gap: 12px;
    min-height: 38px;
    padding: 6px 0;
    align-items: center;
    border-bottom: 1px solid var(--waf-dashboard-soft-line);
}

#waf-dashboard-protection-sections .waf-dashboard-breakdown-row.is-filterable,
.waf-dashboard-protection-shell .waf-dashboard-breakdown-row.is-filterable {
    margin: 0;
    padding: 6px 0;
}

#waf-dashboard-protection-sections .waf-dashboard-breakdown-row:last-child,
.waf-dashboard-protection-shell .waf-dashboard-breakdown-row:last-child {
    border-bottom: 0;
}

#waf-dashboard-protection-sections .waf-dashboard-empty,
.waf-dashboard-protection-shell .waf-dashboard-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

#waf-dashboard-protection-sections .waf-dashboard-breakdown-label {
    font-size: 13px;
}

#waf-dashboard-protection-sections .waf-dashboard-breakdown-row strong {
    min-width: 2ch;
    font-size: 13px;
    text-align: right;
}

.waf-dashboard-status-list span {
    color: var(--text-muted);
    font-size: 12px;
}

.waf-dashboard-status-list strong {
    min-width: 0;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 690;
    text-align: right;
}

.waf-dashboard-status-list small {
    grid-column: 2;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
    text-align: right;
}

.waf-dashboard-breakdown-list {
    display: grid;
    gap: 10px;
}

.waf-dashboard-breakdown-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(42px, .8fr) auto;
    align-items: center;
    gap: 8px;
}

.waf-dashboard-breakdown-row.is-filterable {
    margin: -4px;
    padding: 4px;
}

.waf-dashboard-breakdown-row.is-filterable:hover {
    background: color-mix(in srgb, var(--waf-dashboard-accent) 6%, transparent);
}

.waf-dashboard-breakdown-label {
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 560;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waf-dashboard-breakdown-track {
    display: block;
    height: 4px;
    overflow: hidden;
}

.waf-dashboard-breakdown-track svg {
    display: block;
    width: 100%;
    height: 100%;
}

.waf-dashboard-breakdown-svg-track {
    fill: color-mix(in srgb, var(--waf-dashboard-line) 72%, transparent);
}

.waf-dashboard-breakdown-svg-fill {
    fill: var(--waf-dashboard-accent);
}

.waf-dashboard-breakdown-row strong {
    color: var(--text-main);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.waf-dashboard-empty,
.waf-dashboard-chart-empty,
.waf-dashboard-table-empty {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.waf-dashboard-chart-empty {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--waf-dashboard-soft-line);
}

.waf-dashboard-recommendations {
    display: grid;
    gap: 8px;
}

.waf-dashboard-recommendation {
    display: grid;
    gap: 3px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--waf-dashboard-soft-line);
}

.waf-dashboard-recommendation:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.waf-dashboard-recommendation.is-filterable {
    margin: -4px;
    padding: 4px 4px 9px;
}

.waf-dashboard-recommendation.is-filterable:last-child {
    padding-bottom: 4px;
}

.waf-dashboard-recommendation.is-filterable:hover {
    background: color-mix(in srgb, var(--waf-dashboard-accent) 6%, transparent);
}

.waf-dashboard-recommendation strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 690;
}

.waf-dashboard-recommendation span,
.waf-dashboard-recommendation small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.waf-dashboard-recommendation small {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.waf-dashboard-frame .waf-dashboard-events-section {
    padding-bottom: 0;
    border-bottom: 0;
}

.waf-dashboard-table-wrap {
    border: 1px solid var(--waf-dashboard-line);
}

.waf-dashboard-table {
    min-width: 700px;
}

.waf-action-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
}

.waf-action-pill.tone-danger {
    background: color-mix(in srgb, #ef4444 14%, transparent);
    color: #ef4444;
    border: 1px solid color-mix(in srgb, #ef4444 32%, transparent);
}

.waf-action-pill.tone-warning {
    background: color-mix(in srgb, #f59e0b 14%, transparent);
    color: #f59e0b;
    border: 1px solid color-mix(in srgb, #f59e0b 32%, transparent);
}

.waf-action-pill.tone-success {
    background: color-mix(in srgb, #10b981 14%, transparent);
    color: #10b981;
    border: 1px solid color-mix(in srgb, #10b981 32%, transparent);
}

.waf-action-pill.tone-info {
    background: color-mix(in srgb, #3b82f6 14%, transparent);
    color: #3b82f6;
    border: 1px solid color-mix(in srgb, #3b82f6 32%, transparent);
}

.waf-score-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    background: color-mix(in srgb, var(--text-main) 8%, transparent);
    color: var(--text-main);
}

.waf-score-pill.is-critical {
    background: color-mix(in srgb, #ef4444 18%, transparent);
    color: #ef4444;
}

.waf-score-pill.is-high {
    background: color-mix(in srgb, #f97316 18%, transparent);
    color: #f97316;
}

.waf-score-pill.is-medium {
    background: color-mix(in srgb, #f59e0b 18%, transparent);
    color: #f59e0b;
}

.waf-event-row {
    cursor: pointer;
    transition: background-color 120ms ease;
}

.waf-event-row:hover td {
    background: color-mix(in srgb, var(--brand-orange, #f97316) 4%, var(--operator-surface, var(--bg-card)));
}

.waf-dashboard-chip-remove {
    margin-left: 3px;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 120ms ease;
}

.waf-dashboard-filter-chip:hover .waf-dashboard-chip-remove {
    opacity: 1;
}

.security-events-request-table {
    width: 100%;
    min-width: 1120px;
    table-layout: fixed;
}

/* Traffic Events: investigation-focused data grid. */
.security-events-request-panel {
    overflow: hidden;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    background: var(--operator-surface, #ffffff);
    box-shadow: 0 10px 26px rgba(18, 32, 48, .045);
}

.security-events-request-panel .security-events-request-head {
    justify-content: space-between;
    min-height: 64px;
    padding: 0 20px;
    border-bottom: 1px solid #dfe5ec;
    background: #fbfcfe;
    box-shadow: inset 3px 0 0 var(--brand-orange);
}

.security-events-request-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 10px;
}

.security-events-request-heading h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 720;
    letter-spacing: -.01em;
}

.security-events-request-heading > span,
.security-events-request-hint {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 560;
}

.security-events-request-heading > span {
    padding: 3px 7px;
    border: 1px solid #dfe5ec;
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.security-events-request-hint {
    white-space: nowrap;
}

.security-events-request-panel .waf-dashboard-table-wrap {
    max-height: min(620px, 64vh);
    overflow: auto;
    border: 0;
    scrollbar-color: var(--operator-line, #d9dde3) transparent;
    scrollbar-width: thin;
}

.security-events-request-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 42px;
    padding: 0 13px;
    border-bottom: 1px solid #dfe5ec;
    background: #f5f7fa;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.security-events-request-table td {
    height: 66px;
    padding: 10px 13px;
    border-bottom: 1px solid #e8edf2;
    background: var(--operator-surface, #ffffff);
    vertical-align: middle;
}

.security-events-request-table th:nth-child(1) { width: 126px; }
.security-events-request-table th:nth-child(2) { width: 68px; }
.security-events-request-table th:nth-child(3) { width: 15%; }
.security-events-request-table th:nth-child(4) { width: 16%; }
.security-events-request-table th:nth-child(5) { width: 126px; }
.security-events-request-table th:nth-child(6) { width: 142px; }
.security-events-request-table th:nth-child(7) { width: 130px; }
.security-events-request-table th:nth-child(8) { width: 68px; }
.security-events-request-table th:nth-child(9) { width: 78px; }
.security-events-request-table th:nth-child(10) { width: 28px; }

.security-events-request-table .security-decision-row {
    transition: background-color 140ms ease;
}

.security-events-request-table .security-decision-row:hover td,
.security-events-request-table .security-decision-row:focus-visible td {
    background: #f7faff;
}

.security-events-request-table .security-decision-row:nth-child(even) td {
    background: #fcfdff;
}

.security-events-request-table .security-decision-row:hover td:first-child,
.security-events-request-table .security-decision-row:focus-visible td:first-child {
    box-shadow: inset 3px 0 0 var(--brand-orange);
}

.security-events-request-table .security-event-time-cell {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.security-events-request-table .security-event-chip {
    min-width: 42px;
    min-height: 20px;
    padding: 0 6px;
    border-color: #dce4ec;
    background: #f6f8fa;
    color: var(--text-secondary);
}

.security-events-request-table .security-event-chip.is-read {
    border-color: #c9d8e6;
    background: #f1f6fa;
    color: #356b8e;
}

.security-events-request-table .security-event-chip.is-write {
    border-color: #f4d0b8;
    background: #fff6f0;
    color: #b64a16;
}

.security-events-request-path .security-event-primary,
.security-events-request-host .security-event-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-events-request-path .security-event-primary {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 680;
}

.security-events-request-host .security-event-meta {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 560;
}

.security-events-request-table .security-source-ip strong,
.security-events-request-table .security-event-route strong {
    font-size: 12px;
    font-weight: 680;
}

.security-events-request-table .security-source-ip > span,
.security-events-request-table .security-event-route > span {
    font-size: 10px;
}

.security-events-request-table .security-status-plain {
    min-height: 24px;
    padding: 0 8px;
    border-radius: 5px;
}

.security-events-request-table .security-status-plain.tone-success {
    border-color: #b8dfc9;
    background: #f1faf5;
    color: #28794c;
}

.security-events-request-table .security-status-plain.tone-info {
    border-color: #c7d9e8;
    background: #f1f7fb;
    color: #356b8e;
}

.security-events-request-table .security-status-plain.tone-warning {
    border-color: #f1d0b4;
    background: #fff6ee;
    color: #b4511e;
}

.security-events-request-table .security-status-plain.tone-danger {
    border-color: #efc1bf;
    background: #fff4f3;
    color: #af3e3a;
}

.security-events-request-table .security-status-plain > span:last-child {
    color: currentColor;
    opacity: .86;
}

.security-events-request-table .security-decision-open {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce4ec;
    border-radius: 50%;
    background: #ffffff;
    color: var(--text-secondary);
    transform: none;
}

.security-events-request-table .security-decision-open::after {
    width: 5px;
    height: 5px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    content: '';
    transform: rotate(45deg);
}

.security-events-request-table .security-decision-row:hover .security-decision-open,
.security-events-request-table .security-decision-row:focus-visible .security-decision-open {
    border-color: var(--brand-orange);
    background: #fff6f0;
    color: var(--brand-orange);
    transform: none;
}

.security-events-request-table .security-event-latency strong,
.security-events-request-table .security-event-transfer {
    font-size: 12px;
    font-weight: 680;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .security-events-request-panel,
[data-theme="dark"] .security-events-request-panel .security-events-request-head,
[data-theme="dark"] .security-events-request-table td {
    background: #12161c;
}

[data-theme="dark"] .security-events-request-panel {
    border-color: #303743;
    box-shadow: none;
}

[data-theme="dark"] .security-events-request-panel .security-events-request-head {
    border-bottom-color: #303743;
    background: #151a21;
}

[data-theme="dark"] .security-events-request-table th {
    background: #161b22;
}

[data-theme="dark"] .security-events-request-table td {
    border-bottom-color: #282e37;
}

[data-theme="dark"] .security-events-request-table .security-decision-row:nth-child(even) td {
    background: #14191f;
}

[data-theme="dark"] .security-events-request-table .security-event-chip {
    border-color: #303743;
    background: #1a2029;
    color: #c6ced9;
}

[data-theme="dark"] .security-events-request-table .security-decision-open {
    border-color: #303743;
    background: #1a2029;
}

[data-theme="dark"] .security-events-request-table .security-decision-row:hover td,
[data-theme="dark"] .security-events-request-table .security-decision-row:focus-visible td {
    background: #171d25;
}

@media (max-width: 720px) {
    .security-events-request-panel .security-events-request-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
        padding: 13px 14px;
    }

    .security-events-request-hint {
        display: none;
    }
}

/* Traffic Events: app-native request table. */
.security-events-app-table-panel {
    overflow: hidden;
    border-color: var(--operator-line, var(--border));
    border-radius: 0;
    background: var(--operator-surface, var(--bg-card));
    box-shadow: none;
}

.security-events-app-table-panel .security-events-app-table-head {
    justify-content: space-between;
    min-height: 54px;
    padding: 0 16px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-subtle));
    background: var(--operator-surface, var(--bg-card));
}

.security-events-app-table-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.security-events-app-table-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.security-events-app-table-title > span {
    color: var(--brand-orange);
    font-size: 11px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.security-events-app-table-panel .table-container {
    max-height: min(620px, 64vh);
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    scrollbar-color: var(--operator-line, var(--border)) transparent;
    scrollbar-width: thin;
}

.security-events-app-table {
    min-width: 1120px;
    table-layout: fixed;
}

.security-events-app-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 42px;
    padding: 0 14px;
    background: var(--table-header-bg);
}

.security-events-app-table td {
    height: 58px;
    padding: 10px 14px;
    vertical-align: middle;
}

.security-events-app-table th:nth-child(1) { width: 138px; }
.security-events-app-table th:nth-child(2) { width: 72px; }
.security-events-app-table th:nth-child(3) { width: 16%; }
.security-events-app-table th:nth-child(4) { width: 16%; }
.security-events-app-table th:nth-child(5) { width: 148px; }
.security-events-app-table th:nth-child(6) { width: 156px; }
.security-events-app-table th:nth-child(7) { width: 144px; }
.security-events-app-table th:nth-child(8) { width: 78px; }
.security-events-app-table th:nth-child(9) { width: 84px; }
.security-events-app-table th:nth-child(10) { width: 58px; }

.security-events-app-table .security-events-request-path .security-event-primary,
.security-events-app-table .security-events-request-host .security-event-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-events-app-table .security-events-request-path .security-event-primary {
    font-size: 13px;
    font-weight: 650;
}

.security-events-app-table .security-events-request-host .security-event-meta {
    color: var(--text-secondary);
    font-size: 11px;
}

.security-events-app-view {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand-orange);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.security-events-app-view:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.security-events-app-view:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-orange) 55%, transparent);
    outline-offset: 3px;
}

[data-theme="dark"] .security-events-app-table-panel .security-events-app-table-head {
    border-bottom-color: var(--operator-line, var(--border));
}

@media (max-width: 720px) {
    .security-events-app-table-panel .security-events-app-table-head {
        min-height: 50px;
        padding: 0 14px;
    }
}

/* ==========================================================================
   TRAFFIC EVENTS: REQUEST EVENTS TABLE (ORIGINS REFERENCE STYLE)
   ========================================================================== */

.security-events-routing-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 3px);
    background: var(--bg-card);
}

.security-events-routing-table {
    width: 100%;
    min-width: 1060px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-family: var(--font-main);
    font-size: 13px;
}

.security-events-routing-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 11px 14px;
    background: color-mix(in srgb, var(--bg-card) 95%, #ffffff 5%);
    border-bottom: 1px solid var(--border);
    color: var(--text-dim, #8b949e);
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: .08em;
    vertical-align: middle;
    white-space: nowrap;
    text-align: left;
}

[data-theme="dark"] .security-events-routing-table thead th {
    background: #12151c;
    color: #9aa2b1;
    border-bottom-color: var(--border);
}

.security-events-routing-table tbody tr {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.security-events-routing-table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary, #3b82f6) 4%, var(--bg-card));
}

.security-events-routing-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.04));
    vertical-align: middle;
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

.security-events-routing-table tbody tr:last-child td {
    border-bottom: 0;
}

.security-events-routing-table th:nth-child(1), .security-events-routing-table td:nth-child(1) { width: 135px; }
.security-events-routing-table th:nth-child(2), .security-events-routing-table td:nth-child(2) { width: 80px; }
.security-events-routing-table th:nth-child(3), .security-events-routing-table td:nth-child(3) { width: 32%; }
.security-events-routing-table th:nth-child(4), .security-events-routing-table td:nth-child(4) { width: 22%; }
.security-events-routing-table th:nth-child(5), .security-events-routing-table td:nth-child(5) { width: 140px; }
.security-events-routing-table th:nth-child(6), .security-events-routing-table td:nth-child(6) { width: 175px; }
.security-events-routing-table th:nth-child(7), .security-events-routing-table td:nth-child(7) { width: 72px; }

.security-events-routing-table time {
    color: var(--text-secondary);
    font-size: 12px;
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
}

.security-events-routing-table .security-event-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 2px 7px;
    border-radius: var(--radius-sm, 3px);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    background: color-mix(in srgb, var(--text-main) 6%, transparent);
    border: 1px solid var(--border);
    color: var(--text-main);
    letter-spacing: 0.04em;
    font-family: var(--font-mono, monospace);
}

.security-events-routing-table .waf-dashboard-request > span,
.security-events-routing-table .security-event-path-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    letter-spacing: -0.01em;
}

.security-events-routing-table td:nth-child(4).waf-dashboard-request > span,
.security-events-routing-table .security-event-host-text {
    color: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-mono, monospace);
    font-weight: 400;
}

.security-events-routing-table .security-events-status {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
}

.security-events-routing-table .security-events-status strong {
    color: var(--text-main);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.security-events-routing-table .security-events-status.is-error,
.security-events-routing-table .security-events-status.is-error strong {
    color: var(--brand-orange, #e06c75);
}

[data-theme="dark"] .security-events-routing-table .security-events-status.is-error,
[data-theme="dark"] .security-events-routing-table .security-events-status.is-error strong {
    color: #edaa7b;
}

.security-events-source-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.security-events-country-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: var(--radius-sm, 3px);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    flex-shrink: 0;
}

.security-events-ip-text {
    color: var(--text-secondary);
    font-size: 12px;
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-events-routing-table .btn.btn-sm {
    min-height: 28px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-sm, 3px);
}

.security-events-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    background: var(--bg-card);
}

.security-events-pagination-summary {
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.security-events-pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.security-events-pagination-page {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.security-events-page-size-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 11px;
}

.security-events-page-size {
    height: 28px;
    padding: 0 8px;
    border-radius: var(--radius-sm, 3px);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-size: 11px;
    font-family: var(--font-main);
    cursor: pointer;
}

.waf-dashboard-table td {
    vertical-align: middle;
}

.waf-dashboard-decision-cell {
    width: 122px;
}

.waf-dashboard-table-empty {
    padding: 28px !important;
    text-align: center;
}

.waf-dashboard-request,
.waf-dashboard-rule {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waf-dashboard-table-filter {
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.waf-dashboard-table-filter:not(:disabled):hover,
.waf-dashboard-score-filter:hover {
    color: var(--waf-dashboard-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.waf-dashboard-score-filter {
    cursor: pointer;
}

.waf-dashboard-action {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    gap: 5px;
    padding: 0 7px;
    border: 1px solid var(--waf-dashboard-line);
    background: color-mix(in srgb, var(--waf-dashboard-accent) 7%, transparent);
    color: var(--waf-dashboard-accent);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
}

.waf-dashboard-action::before {
    width: 4px;
    height: 4px;
    flex: 0 0 auto;
    background: currentColor;
    content: "";
}

.waf-dashboard-action.tone-intervened {
    border-color: color-mix(in srgb, var(--brand-orange) 42%, var(--waf-dashboard-line));
    background: color-mix(in srgb, var(--brand-orange) 9%, transparent);
    color: var(--brand-orange);
}

.waf-dashboard-action.tone-observed,
.waf-dashboard-action.tone-allowed {
    border-color: color-mix(in srgb, var(--waf-dashboard-accent) 42%, var(--waf-dashboard-line));
    background: color-mix(in srgb, var(--waf-dashboard-accent) 9%, transparent);
    color: var(--waf-dashboard-accent);
}

[data-theme="dark"] .waf-dashboard-header-time .security-time-dropdown-trigger,
[data-theme="dark"] .waf-dashboard-header-time .security-time-panel,
[data-theme="dark"] .waf-dashboard-header-actions .btn.btn-outline {
    border-color: var(--operator-line, rgba(248, 250, 252, 0.13)) !important;
    background: var(--operator-surface, #11141a) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .waf-dashboard-header-time .security-time-dropdown-trigger strong {
    color: var(--text-main) !important;
}

.waf-dashboard-drawer[hidden] { display: none; }

.waf-dashboard-drawer {
    position: fixed;
    z-index: 90;
    top: var(--header-h, 66px);
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    border-left: 1px solid var(--waf-dashboard-line);
    background: var(--operator-surface, #ffffff);
    box-shadow: -18px 0 42px color-mix(in srgb, #000 16%, transparent);
}

.waf-dashboard-drawer-panel {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.waf-dashboard-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--waf-dashboard-line);
}

.waf-dashboard-drawer-head span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.waf-dashboard-drawer-head h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 16px;
}

.waf-dashboard-drawer-body {
    overflow: auto;
    padding: 18px 20px 32px;
}

.waf-dashboard-event-detail {
    display: grid;
    margin: 0;
    border-top: 1px solid var(--waf-dashboard-soft-line);
}

.waf-dashboard-event-detail > div {
    display: grid;
    grid-template-columns: minmax(105px, .65fr) minmax(0, 1.35fr);
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--waf-dashboard-soft-line);
}

.waf-dashboard-event-detail dt {
    color: var(--text-muted);
    font-size: 11px;
}

.waf-dashboard-event-detail dd {
    min-width: 0;
    margin: 0;
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-align: right;
}

@media (max-width: 1200px) {
    .waf-dashboard-frame .waf-dashboard-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .waf-dashboard-frame .waf-dashboard-metrics .operator-metric-item:nth-child(4) {
        border-right: 0;
    }

    .waf-dashboard-frame .waf-dashboard-metrics .operator-metric-item:nth-child(n + 5) {
        border-top: 1px solid var(--waf-dashboard-line);
    }
}

@media (max-width: 1100px) {
    .waf-dashboard-frame .waf-dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .waf-dashboard-frame .waf-dashboard-metrics .operator-metric-item {
        border-top: 0;
        border-right: 1px solid var(--waf-dashboard-line);
    }

    .waf-dashboard-frame .waf-dashboard-metrics .operator-metric-item:nth-child(2n) {
        border-right: 0;
    }

    .waf-dashboard-frame .waf-dashboard-metrics .operator-metric-item:nth-child(n + 3) {
        border-top: 1px solid var(--waf-dashboard-line);
    }

    .waf-dashboard-primary-grid,
    .waf-dashboard-rule-grid,
    .waf-dashboard-evidence-grid {
        grid-template-columns: 1fr;
    }

    .waf-dashboard-exposure-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .waf-dashboard-frame .operator-frame-header {
        gap: 16px;
    }

    .waf-dashboard-page-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .waf-dashboard-header-actions {
        justify-content: flex-start;
        margin-left: 0;
    }

    .waf-dashboard-command-bar {
        align-items: flex-start;
        flex-wrap: wrap;
        margin-right: -24px;
        margin-left: -24px;
        padding-right: 24px;
        padding-left: 24px;
    }

    .waf-dashboard-frame .waf-dashboard-metrics,
    .waf-dashboard-dual-grid,
    .waf-dashboard-exposure-grid {
        grid-template-columns: 1fr;
    }

    .waf-dashboard-section-analytics-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .waf-dashboard-frame .waf-dashboard-metrics .operator-metric-item {
        border-right: 0;
        border-top: 0;
        border-bottom: 1px solid var(--waf-dashboard-line);
    }

    .waf-dashboard-frame .waf-dashboard-metrics .operator-metric-item:last-child {
        border-bottom: 0;
    }

    .waf-dashboard-status-list > div {
        grid-template-columns: 1fr;
    }

    #waf-dashboard-protection-sections .waf-dashboard-breakdown-row {
        grid-template-columns: minmax(0, 1fr) minmax(88px, .72fr) auto;
    }

    .waf-dashboard-status-list strong,
    .waf-dashboard-status-list small {
        grid-column: auto;
        text-align: left;
    }

    .waf-dashboard-timeline-svg {
        height: 188px;
    }

    .waf-dashboard-frame .waf-dashboard-panel--timeline {
        min-height: 0;
    }

    .waf-dashboard-timeline-shell {
        min-height: 188px;
    }
}

/* =============================================================================
   System Health intelligence dashboard
   ============================================================================= */

.system-health-frame.dashboard-shell {
    --system-health-accent: #5f86a2;
}

.system-health-frame .operator-frame-actions {
    gap: 10px;
}

.system-health-metrics.dashboard-metric-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.system-health-metrics.dashboard-metric-strip .dashboard-metric-item {
    min-height: 116px;
}

.system-health-metrics .operator-metric-label {
    letter-spacing: .055em;
}

.system-health-main-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(340px, .8fr);
}

.system-health-readiness-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .925fr) minmax(280px, .925fr);
    gap: 18px;
}

.system-health-section-meta {
    display: grid;
    justify-items: end;
    gap: 2px;
    text-align: right;
}

.system-health-section-meta strong {
    color: var(--operator-link, var(--primary));
    font-family: var(--font-mono, monospace);
    font-size: 14px;
    font-weight: 780;
}

.system-health-section-meta span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 680;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.system-capacity-summary {
    display: grid;
    gap: 7px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 98%, var(--system-health-accent));
}

.system-capacity-summary > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.system-capacity-summary span:first-child {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.system-capacity-summary strong {
    color: var(--operator-link, var(--primary));
    font-family: var(--font-mono, monospace);
    font-size: 24px;
    font-weight: 780;
    line-height: 1;
}

.system-capacity-bar {
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--system-health-accent) 13%, var(--operator-line-soft, #eceff3));
}

.system-capacity-bar > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--system-health-accent);
    transition: width 260ms ease, background-color 180ms ease;
}

.system-capacity-bar > span.is-warning {
    background: var(--operator-orange, var(--brand-orange));
}

.system-capacity-bar > span.is-elevated {
    background: var(--status-danger, #d95d39);
}

.system-capacity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 7px 14px;
}

.system-capacity-item {
    display: grid;
    min-width: 0;
    gap: 4px;
    min-height: 55px;
    align-content: center;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.system-capacity-item:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.system-capacity-item:nth-child(odd) {
    padding-right: 12px;
}

.system-capacity-item:nth-child(even) {
    padding-left: 12px;
    border-left: 1px solid var(--operator-line-soft, #eceff3);
}

.system-capacity-item span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-capacity-item strong {
    overflow: hidden;
    color: var(--text-main);
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-capacity-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-top: 1px solid var(--operator-line-soft, #eceff3);
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 97%, #f3f4f6);
}

.system-capacity-footer span {
    display: grid;
    gap: 3px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 680;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.system-capacity-footer strong {
    overflow: hidden;
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 720;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.system-health-check-summary {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--status-success, #2fbf71) 26%, var(--operator-line-soft, #eceff3));
    border-radius: 999px;
    background: color-mix(in srgb, var(--status-success, #2fbf71) 7%, transparent);
    color: var(--status-success, #27875a);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.system-health-check-summary.is-attention {
    border-color: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 34%, var(--operator-line-soft, #eceff3));
    background: color-mix(in srgb, var(--operator-orange, var(--brand-orange)) 7%, transparent);
    color: var(--operator-orange, var(--brand-orange));
}

.system-health-check-list {
    display: grid;
    gap: 0;
    padding: 6px 14px 14px;
}

.system-health-check-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-height: 60px;
    padding: 11px 0;
    border-bottom: 1px solid var(--operator-line-soft, #eceff3);
}

.system-health-check-row:last-child {
    border-bottom: 0;
}

.system-health-check-row .status-pill {
    min-width: 65px;
    justify-content: center;
    margin-top: 1px;
    text-transform: capitalize;
}

.system-health-check-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.system-health-check-copy strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 730;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-health-check-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.system-health-check-empty {
    padding: 18px 0 8px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.system-health-module-card {
    position: relative;
    min-height: 166px;
    border-radius: 4px;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.system-health-module-card-action:hover {
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 95%, var(--system-health-accent));
    transform: translateY(-1px);
}

@media (max-width: 1240px) {
    .system-health-metrics.dashboard-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .system-health-readiness-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .system-health-signals-section {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .system-health-main-grid,
    .system-health-readiness-grid {
        grid-template-columns: 1fr;
    }

    .system-health-signals-section {
        grid-column: auto;
    }
}

@media (max-width: 720px) {
    .system-health-metrics.dashboard-metric-strip {
        grid-template-columns: 1fr;
    }

    .system-health-frame .operator-frame-actions {
        width: 100%;
        align-items: stretch;
    }

    .system-health-status-summary {
        align-items: flex-start;
    }

    .system-health-status-detail {
        max-width: none;
        text-align: left;
    }

    .system-health-refresh-detail {
        max-width: none;
    }

    .system-health-section-meta {
        justify-items: start;
        text-align: left;
    }

    .system-health-section .operator-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .system-capacity-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* System Health follows the Security Events analytic dashboard system. */
.system-health-frame.security-events-frame {
    min-height: auto;
}

.system-health-frame .system-health-body.security-events-operator-explorer {
    gap: 16px;
    padding-bottom: 32px;
}

.system-health-frame .system-health-metrics.security-events-metric-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
}

.system-health-frame .system-health-metrics .operator-metric-item {
    min-height: 0;
}

.system-health-frame .system-health-metrics .operator-metric-value {
    font-size: 23px;
    text-transform: none;
}

.system-health-main-grid.security-events-analysis-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, .7fr);
    gap: 16px;
}

.system-health-main-grid .security-events-timeline-panel,
.system-health-main-grid .system-health-capacity-panel,
.system-health-protection-panel {
    margin: 0;
    border-color: var(--operator-line-soft, #eceff3);
    box-shadow: none;
}

.system-health-main-grid .system-health-capacity-panel {
    min-height: 100%;
}

.system-health-readiness-grid.security-events-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

.system-health-readiness-grid .security-events-stat-card {
    min-height: 100%;
}

.system-health-readiness-grid .security-events-stat-card .operator-section-head,
.system-health-protection-panel .operator-section-head {
    align-items: center;
    min-height: 42px;
    padding: 9px 14px;
}

.system-health-readiness-grid .security-events-stat-card .operator-section-head h3,
.system-health-protection-panel .operator-section-head h3 {
    font-size: 13px;
}

.system-health-frame .system-capacity-summary {
    padding: 12px 14px;
    background: var(--operator-surface, #ffffff);
}

.system-health-frame .system-capacity-bar,
.system-health-frame .system-capacity-bar > span {
    border-radius: 0;
}

.system-health-frame .system-capacity-grid {
    padding: 2px 14px 10px;
}

.system-health-frame .system-capacity-footer {
    background: var(--operator-surface-muted, #f7f8fa);
}

.system-health-frame .system-health-check-list,
.system-health-frame .system-health-row-list {
    padding: 2px 14px 10px;
}

.system-health-frame .system-health-check-summary {
    border-radius: 5px;
}

.system-health-protection-panel .system-health-module-grid.security-events-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

.system-health-protection-panel .system-health-module-card {
    min-height: 0;
    padding: 13px 14px;
    border-color: var(--operator-line-soft, #eceff3);
    border-radius: 0;
    background: var(--operator-surface, #ffffff);
    box-shadow: none;
}

.system-health-protection-panel .system-health-module-card-action:hover {
    border-color: var(--operator-link, var(--primary));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 5%, var(--operator-surface, #ffffff));
    transform: none;
}

.system-health-protection-panel .system-health-module-icon {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
}

.system-health-protection-panel .system-health-module-name {
    font-size: 13px;
    font-weight: 720;
}

.system-health-protection-panel .system-health-module-count {
    margin-top: 10px;
    color: var(--operator-link, var(--primary));
    font-family: var(--font-mono, monospace);
    font-size: 21px;
    font-weight: 760;
}

.system-health-protection-panel .system-health-module-sub {
    font-size: 11px;
}

@media (max-width: 1220px) {
    .system-health-frame .system-health-metrics.security-events-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .system-health-main-grid.security-events-analysis-grid {
        grid-template-columns: 1fr;
    }

    .system-health-readiness-grid.security-events-stat-grid,
    .system-health-protection-panel .system-health-module-grid.security-events-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .system-health-frame .system-health-metrics.security-events-metric-strip,
    .system-health-readiness-grid.security-events-stat-grid,
    .system-health-protection-panel .system-health-module-grid.security-events-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* System Health uses the compact card treatment from Security Events. */
.system-health-frame {
    --system-health-accent: var(--operator-link, var(--primary));
}

.system-health-security-deck {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding-bottom: 32px;
}

.system-health-security-metric-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
}

.system-health-security-metric-strip .operator-metric-value {
    font-size: 23px;
    text-transform: none;
}

.system-health-security-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, .7fr);
    gap: 16px;
}

.system-health-security-card.security-stat-card {
    height: auto;
    min-height: 0;
    margin: 0;
    border-color: var(--operator-line-soft, #eceff3);
    border-radius: 6px;
    background: var(--operator-surface, #ffffff);
    box-shadow: none;
}

.system-health-security-card .operator-section-head {
    align-items: center;
    min-height: 48px;
    padding: 12px 16px;
    border-bottom-color: var(--operator-line-soft, #eceff3);
    background: var(--operator-surface-muted, #f7f8fa);
}

.system-health-security-card .operator-section-head h3 {
    font-size: 13px;
    font-weight: 760;
}

.system-health-security-card .system-health-row-list,
.system-health-security-card .system-health-check-list {
    padding: 4px 16px 12px;
}

.system-health-security-card .system-health-module-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
}

.system-health-security-card .system-health-module-card {
    min-height: 156px;
    border-radius: 6px;
    background: var(--operator-surface-muted, #f7f8fa);
    box-shadow: none;
}

.system-health-security-card .system-health-module-card-action:hover {
    border-color: var(--operator-link, var(--primary));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 5%, var(--operator-surface, #ffffff));
    transform: none;
}

[data-theme="dark"] .system-health-frame .system-health-security-card.security-stat-card {
    border-color: #2b313b;
    background: #12161c;
}

[data-theme="dark"] .system-health-frame .system-health-security-card .operator-section-head {
    border-bottom-color: #2b313b;
    background: #191e26;
}

[data-theme="dark"] .system-health-frame .system-health-capacity-summary {
    background: #12161c;
}

[data-theme="dark"] .system-health-frame .system-capacity-footer {
    border-top-color: #2b313b;
    background: #191e26;
}

[data-theme="dark"] .system-health-frame .system-capacity-footer span,
[data-theme="dark"] .system-health-frame .system-capacity-footer strong {
    color: var(--text-secondary, #a6afbd);
}

[data-theme="dark"] .system-health-frame .system-health-module-card {
    border-color: #2b313b;
    background: #191e26;
}

@media (max-width: 1220px) {
    .system-health-security-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .system-health-security-grid,
    .system-health-readiness-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .system-health-security-metric-strip,
    .system-health-security-card .system-health-module-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 680px) {
    .waf-dashboard-section-analytics-cards {
        grid-template-columns: 1fr;
    }

    .waf-dashboard-command-bar {
        margin: 20px -18px 0;
        padding: 12px 18px;
    }

    .waf-dashboard-header-actions {
        width: 100%;
        align-items: stretch;
    }

    .waf-dashboard-header-time {
        flex: 1 1 auto;
        min-width: 0;
    }

    .waf-dashboard-header-time .security-events-time-menu,
    .waf-dashboard-header-time .security-time-dropdown-trigger {
        width: 100%;
    }
}

/* Origins uses the same dedicated setup pattern as Routing. */
.origins-editor-create-shell {
    display: grid;
    width: min(100%, 1120px);
    max-width: 1120px;
    min-width: 0;
    gap: 8px;
}

.origins-editor-create-section {
    width: 100%;
    max-width: 1120px;
    padding-bottom: 0;
    border-bottom: 0;
}

.origins-editor-create-section > .operator-section-body {
    display: grid;
    gap: 0;
}

.origins-editor-form {
    width: min(100%, 1040px);
}

.origins-editor-form [hidden] {
    display: none !important;
}

.origins-editor-setup-section {
    min-width: 0;
    margin: 0;
    padding: 28px 0;
    border: 0;
    border-top: 1px solid var(--operator-line-soft, var(--border-color));
}

.origins-editor-setup-heading {
    min-width: 0;
    margin: 0 0 18px;
    padding: 0;
}

.origins-editor-setup-heading h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.origins-editor-section-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.origins-editor-section-line .origins-editor-setup-heading {
    margin-bottom: 18px;
}

.origins-editor-section-line > .btn {
    margin: 0 0 18px;
}

.origins-editor-field-grid {
    display: grid;
    min-width: 0;
    gap: 18px;
}

.origins-editor-field-grid--two,
.origins-editor-basics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.origins-editor-form .settings-field {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
}

.origins-editor-form .settings-field > label {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

.origins-editor-required {
    margin-left: 5px;
    color: var(--operator-link, var(--primary));
    font-size: 10px;
    font-weight: 650;
}

.origins-editor-form .settings-field > .input {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
}

.origins-editor-targets {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.origins-editor-target-row {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(112px, 0.2fr) auto;
    align-items: end;
    gap: 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border-color));
}

.origins-editor-target-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.origins-editor-remove-target {
    min-height: 40px;
}

.origins-editor-advanced {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--operator-line-soft, var(--border-color));
}

.origins-editor-advanced > summary {
    display: flex;
    align-items: baseline;
    gap: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
}

.origins-editor-advanced > summary::-webkit-details-marker {
    display: none;
}

.origins-editor-advanced > summary::after {
    content: '+';
    margin-left: auto;
    color: var(--text-muted);
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
}

.origins-editor-advanced[open] > summary::after {
    content: '−';
}

.origins-editor-advanced > summary > span {
    font-size: 13px;
    font-weight: 650;
}

.origins-editor-advanced-body {
    display: grid;
    gap: 24px;
    margin-top: 18px;
}

.origins-editor-advanced-group {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.origins-editor-advanced-group + .origins-editor-advanced-group {
    padding-top: 22px;
    border-top: 1px solid var(--operator-line-soft, var(--border-color));
}

.origins-editor-toggle-row {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0;
    border: 0;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
}

.origins-editor-switch {
    display: inline-block;
    box-sizing: border-box;
    width: 38px;
    height: 20px;
    min-width: 38px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    flex: 0 0 38px;
}

.origins-editor-thresholds {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.origins-editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--operator-line, var(--border-color));
}

.origins-editor-actions .operator-control-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="dark"] .origins-editor-setup-section,
[data-theme="dark"] .origins-editor-advanced,
[data-theme="dark"] .origins-editor-actions,
[data-theme="dark"] .origins-editor-advanced-group + .origins-editor-advanced-group,
[data-theme="dark"] .origins-editor-target-row {
    border-color: var(--divider, #2a3039);
}

[data-theme="dark"] .origins-editor-form .settings-field > .input {
    border-color: #303846 !important;
    background: #10141a !important;
    color: #f3f7fb !important;
}

[data-theme="dark"] .origins-editor-create-shell .operator-back-button-icon {
    border-color: #303846;
    background: #171c23;
    color: var(--text-muted);
}

@media (max-width: 760px) {
    .origins-editor-setup-section {
        padding: 22px 0;
    }

    .origins-editor-field-grid--two,
    .origins-editor-basics-grid,
    .origins-editor-target-row {
        grid-template-columns: 1fr;
    }

    .origins-editor-target-row {
        align-items: stretch;
    }

    .origins-editor-remove-target,
    .origins-editor-actions,
    .origins-editor-actions .operator-control-actions,
    .origins-editor-actions .operator-control-actions .btn {
        width: 100%;
    }
}

[data-theme="dark"] .security-events-stat-card {
    background: #13171f;
    border-color: #242a35;
    box-shadow: none;
}

[data-theme="dark"] .security-events-stat-card:hover {
    border-color: #353d4c;
}

[data-theme="dark"] .security-events-stat-card .operator-section-head {
    border-bottom-color: #1f2530;
}

[data-theme="dark"] .security-events-stat-card .security-stat-card-expand {
    background: #1a202a;
    border-color: #2a3240;
    color: #94a3b8;
}

[data-theme="dark"] .security-events-stat-card .security-stat-card-expand:hover {
    border-color: var(--operator-link, var(--primary));
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 15%, transparent);
}

[data-theme="dark"] .security-events-stat-row {
    border-bottom-color: #1c222b;
}

[data-theme="dark"] .security-events-stat-row:hover {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 8%, transparent);
}

[data-theme="dark"] .security-events-stat-rank {
    background: color-mix(in srgb, #f97316 16%, transparent);
    color: #fb923c;
}

[data-theme="dark"] .security-events-stat-count {
    background: color-mix(in srgb, var(--operator-link, var(--primary)) 14%, transparent);
}

/* ==========================================================================
   Threat Intelligence & Directory Console Styles
   ========================================================================== */
.threat-directory-table {
    width: 100%;
    border-collapse: collapse;
}

.threat-directory-table th,
.threat-directory-table td {
    padding: 12px 16px;
    vertical-align: middle;
}

.threat-directory-table .th-indicator { width: 28%; min-width: 180px; }
.threat-directory-table .th-severity { width: 14%; min-width: 105px; }
.threat-directory-table .th-score { width: 15%; min-width: 100px; }
.threat-directory-table .th-proto { width: 10%; min-width: 75px; }
.threat-directory-table .th-category { width: 21%; min-width: 160px; }
.threat-directory-table .th-confidence { width: 12%; min-width: 100px; }

.sortable-th {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.sortable-th:hover {
    color: var(--text-main, #ffffff);
    background: color-mix(in srgb, var(--primary, #3b82f6) 6%, transparent);
}

.sortable-th.is-sorted {
    color: var(--primary, #3b82f6);
    font-weight: 700;
}

.th-content-flex {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sort-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: currentColor;
}

.risk-score-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 13px;
}

.risk-score-meter-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 70px;
}

.risk-score-bar-bg {
    width: 100%;
    height: 4px;
    background: color-mix(in srgb, var(--operator-line, #e2e8f0) 50%, transparent);
    border-radius: 2px;
    overflow: hidden;
}

.risk-score-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.25s ease-out;
}

.threat-category-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--operator-surface, #ffffff) 90%, var(--primary, #3b82f6));
    border: 1px solid color-mix(in srgb, var(--operator-line, #d9dde3) 80%, transparent);
    font-size: 11px;
    font-weight: 500;
}

/* Threat Severity Tags - App native palette (Subtle, non-bright, no status dot) */
.threat-severity-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Critical Severity (Red - app danger) */
.threat-severity-tag.severity-critical,
.threat-severity-tag.tone-danger,
.threat-severity-tag.tone-error {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.22);
}

[data-theme="dark"] .threat-severity-tag.severity-critical,
[data-theme="dark"] .threat-severity-tag.tone-danger,
[data-theme="dark"] .threat-severity-tag.tone-error {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.26);
}

/* High Severity (Orange - app brand orange) */
.threat-severity-tag.severity-high,
.threat-severity-tag.tone-warning {
    background: rgba(249, 115, 22, 0.08);
    color: #c2410c;
    border-color: rgba(249, 115, 22, 0.22);
}

[data-theme="dark"] .threat-severity-tag.severity-high,
[data-theme="dark"] .threat-severity-tag.tone-warning {
    background: rgba(249, 115, 22, 0.12);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.26);
}

/* Medium Severity (Response distribution grey/slate: #5f86a2) */
.threat-severity-tag.severity-medium,
.threat-severity-tag.tone-info,
.threat-severity-tag.tone-grey {
    background: rgba(95, 134, 162, 0.09);
    color: #43637b;
    border-color: rgba(95, 134, 162, 0.22);
}

[data-theme="dark"] .threat-severity-tag.severity-medium,
[data-theme="dark"] .threat-severity-tag.tone-info,
[data-theme="dark"] .threat-severity-tag.tone-grey {
    background: rgba(95, 134, 162, 0.14);
    color: #9bbcd2;
    border-color: rgba(95, 134, 162, 0.28);
}

/* Low Severity / Success Green */
.threat-severity-tag.severity-low,
.threat-severity-tag.tone-success {
    background: rgba(22, 163, 74, 0.08);
    color: #15803d;
    border-color: rgba(22, 163, 74, 0.20);
}

[data-theme="dark"] .threat-severity-tag.severity-low,
[data-theme="dark"] .threat-severity-tag.tone-success {
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.24);
}

/* Neutral Tone alias (also mapped to #5f86a2) */
.threat-severity-tag.tone-neutral {
    background: rgba(95, 134, 162, 0.08);
    color: #43637b;
    border-color: rgba(95, 134, 162, 0.20);
}

[data-theme="dark"] .threat-severity-tag.tone-neutral {
    background: rgba(95, 134, 162, 0.12);
    color: #9bbcd2;
    border-color: rgba(95, 134, 162, 0.24);
}

/* ==========================================================================
   Content Signatures & Malware Defense - Native Operator Card Grid
   ========================================================================== */

.httpsec-operator-frame .httpsec-upload-signatures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 12px;
}

.httpsec-operator-frame .httpsec-upload-signatures-grid .operator-control-row {
    border: 1px solid var(--operator-line, #d9dde3);
    border-radius: 5px;
    background: var(--operator-surface, #ffffff);
    padding: 14px 16px;
    min-height: 72px;
    transition: border-color 0.15s ease;
}

.httpsec-operator-frame .httpsec-upload-signatures-grid .operator-control-row:hover {
    border-color: var(--operator-line-strong, #b8c0cc);
}

.httpsec-operator-frame .httpsec-upload-signatures-grid .operator-control-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-main);
}

.httpsec-operator-frame .httpsec-upload-signatures-grid .operator-control-desc {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

[data-theme="dark"] .httpsec-operator-frame .httpsec-upload-signatures-grid .operator-control-row {
    border-color: var(--operator-line, #334155);
    background: var(--operator-surface, #1e293b);
}

[data-theme="dark"] .httpsec-operator-frame .httpsec-upload-signatures-grid .operator-control-row:hover {
    border-color: rgba(148, 163, 184, 0.35);
}

.firewall-operator-frame .firewall-leak-mime-list {
    margin-bottom: 20px;
}

.firewall-operator-frame .firewall-leak-mime-row {
    transition: background 0.15s ease;
}

.firewall-operator-frame .firewall-leak-mime-desc {
    display: block;
    color: var(--text-muted, #94a3b8);
    font-size: 12px;
    line-height: 1.4;
}

.firewall-operator-frame .firewall-leak-mime-tags {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.firewall-operator-frame .firewall-leak-mime-pill {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    padding: 1px 7px;
    letter-spacing: 0.01em;
}

.firewall-operator-frame .firewall-leak-subhead {
    margin-top: 24px;
    margin-bottom: 10px;
}

.firewall-operator-frame .firewall-leak-subhead h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 650;
    color: var(--text-main);
}

.firewall-operator-frame .firewall-leak-subhead p {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* ==========================================================================
   Threat Logs Operator Frame & Forensics UI
   Aegis Dashboard Palette: Unified with WAF & Security Dashboards
   ========================================================================== */

.threat-operator-frame .threat-operator-stack {
    display: grid;
    min-width: 0;
    gap: 20px;
}

.threat-operator-frame .threat-header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.threat-operator-frame .threat-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
}

/* Metric Strip (Aligned with WAF & Security Dashboards) */
.threat-operator-frame .threat-metric-strip .operator-metric-item {
    min-height: 82px;
    padding: 12px 16px;
    background: var(--bg-card, #171a1f);
    border-right: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    transition: background-color 150ms ease;
}

.threat-operator-frame .threat-metric-strip .operator-metric-item:last-child {
    border-right: none;
}

.threat-operator-frame .threat-metric-strip .operator-metric-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.threat-operator-frame .threat-metric-strip .operator-metric-value {
    margin-top: 5px;
    font-size: 22px;
    font-weight: 760;
    color: var(--text-main, #f8fafc);
}

.threat-operator-frame .threat-metric-strip .operator-metric-item.tone-danger .operator-metric-value {
    color: #ef4444;
}

.threat-operator-frame .threat-metric-strip .operator-metric-item.tone-success .operator-metric-value {
    color: #10b981;
}

.threat-operator-frame .threat-metric-strip .operator-metric-sub {
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-muted, #cbd5e1);
}

/* Catalog Section Surface */
.threat-operator-frame .threat-catalog-section {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    border-radius: var(--radius-sm, 3px);
    background: var(--bg-card, #171a1f);
}

.threat-operator-frame .threat-catalog-section > .operator-section-head {
    min-height: 56px;
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    background: color-mix(in srgb, var(--bg-panel, #12161b) 85%, var(--bg-card, #171a1f));
}

.threat-operator-frame .threat-catalog-section > .operator-section-body {
    min-width: 0;
    padding: 0;
}

.threat-operator-frame .threat-event-surface {
    min-width: 0;
    overflow: visible;
    background: var(--bg-card, #171a1f);
}

/* Toolbar & Filters (Aligned with WAF Dashboard Filters) */
.threat-operator-frame .threat-filter-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    background: color-mix(in srgb, var(--bg-panel, #12161b) 70%, var(--bg-card, #171a1f));
}

.threat-operator-frame .threat-filter-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.threat-operator-frame .threat-search-icon {
    position: absolute;
    left: 12px;
    display: inline-flex;
    align-items: center;
    color: var(--text-dim, #64748b);
    pointer-events: none;
}

.threat-operator-frame .threat-search-icon svg {
    width: 14px;
    height: 14px;
}

.threat-operator-frame .threat-search-input {
    width: 100%;
    min-height: 36px;
    padding: 7px 32px 7px 36px;
    font-size: 13px;
    background: var(--bg-card, #171a1f);
    border: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    border-radius: var(--radius-sm, 2px);
    color: var(--text-main, #f8fafc);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.threat-operator-frame .threat-search-input:focus {
    border-color: var(--brand-orange, #f97316);
    outline: none;
    box-shadow: 0 0 0 1px var(--brand-orange, #f97316);
}

.threat-operator-frame .threat-search-clear {
    position: absolute;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-dim, #64748b);
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
}

.threat-operator-frame .threat-search-clear:hover {
    color: var(--brand-orange, #f97316);
}

.threat-operator-frame .threat-filter-dropdowns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.threat-operator-frame .threat-filter-select-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 140px;
    min-width: 130px;
}

.threat-operator-frame .threat-select-label {
    color: var(--text-muted, #cbd5e1);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.threat-operator-frame .threat-filter-select-group .settings-input {
    min-height: 32px;
    height: 32px;
    padding: 4px 8px;
    font-size: 12px;
    background: var(--bg-card, #171a1f);
    border: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    border-radius: var(--radius-sm, 2px);
    color: var(--text-main, #f8fafc);
}

.threat-operator-frame .threat-filter-select-group .settings-input:focus {
    border-color: var(--brand-orange, #f97316);
    outline: none;
}

/* Table Styling & 9-Column Architecture */
.threat-operator-frame .threat-log-table.config-table-wrap {
    margin: 0;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
}

.threat-operator-frame .threat-log-table .config-enterprise-table {
    min-width: 980px;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

.threat-operator-frame .threat-log-table .config-enterprise-table th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    background: color-mix(in srgb, var(--bg-panel, #12161b) 60%, var(--bg-card, #171a1f));
    color: var(--text-dim, #64748b);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .07em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

/* 8 Columns Widths (Verdict merged) */
.threat-operator-frame .threat-log-table .config-enterprise-table th:nth-child(1) { width: 11%; } /* Time */
.threat-operator-frame .threat-log-table .config-enterprise-table th:nth-child(2) { width: 15%; } /* Client IP */
.threat-operator-frame .threat-log-table .config-enterprise-table th:nth-child(3) { width: 7%; }  /* Method */
.threat-operator-frame .threat-log-table .config-enterprise-table th:nth-child(4) { width: 25%; } /* Path */
.threat-operator-frame .threat-log-table .config-enterprise-table th:nth-child(5) { width: 6%; }  /* Status */
.threat-operator-frame .threat-log-table .config-enterprise-table th:nth-child(6) { width: 21%; } /* Triggered Rule */
.threat-operator-frame .threat-log-table .config-enterprise-table th:nth-child(7) { width: 9%; }  /* Verdict */
.threat-operator-frame .threat-log-table .config-enterprise-table th:nth-child(8) { width: 6%; text-align: right; } /* Actions */

.threat-operator-frame .threat-log-table .config-enterprise-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle, rgba(248, 250, 252, 0.05));
    vertical-align: middle;
    font-size: 12px;
}

.threat-operator-frame .threat-log-table .config-enterprise-table tbody tr:hover td {
    background: color-mix(in srgb, var(--brand-orange, #f97316) 5%, var(--bg-card, #171a1f));
}

/* Time Cell */
.threat-time-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.threat-time-exact {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #dbe4f0);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.threat-time-relative {
    font-size: 10px;
    color: var(--text-dim, #64748b);
    white-space: nowrap;
}

/* Client IP & Country Flag with real image and tooltip */
.threat-ip-cell {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
}

.threat-country-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: help;
    user-select: none;
    flex-shrink: 0;
    transition: transform 0.12s ease;
}

.threat-country-flag:hover {
    transform: scale(1.15);
}

.threat-country-flag svg {
    display: inline-block;
    width: 18px;
    height: 13.5px;
    border-radius: 2px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
    vertical-align: middle;
    flex-shrink: 0;
    overflow: hidden;
}

.threat-flag-icon {
    display: inline-block;
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
    vertical-align: middle;
    flex-shrink: 0;
}

.threat-flag-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    color: var(--text-dim, #64748b);
    padding: 1px 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.05);
}

.threat-flag-globe {
    font-size: 14px;
    line-height: 1;
}

.threat-ip-address {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main, #f8fafc);
    letter-spacing: -0.01em;
}

.threat-inline-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-dim, #64748b);
    cursor: pointer;
    border-radius: 2px;
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.threat-inline-copy:hover {
    opacity: 1;
    color: var(--brand-orange, #f97316);
}

/* Method Pill: Uniform subtle slate-grey for all request types (GET, POST, PUT, DELETE, etc.) */
.threat-method-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    border-radius: var(--radius-sm, 2px);
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-align: center;
    color: var(--text-dim, #94a3b8);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border, rgba(248, 250, 252, 0.08));
}

/* Path (Aligned with waf-dashboard-request) */
.threat-path {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--text-secondary, #cbd5e1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

/* Status Code: Clean tabular numeric text in muted neutral (No screaming orange!) */
.threat-status-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim, #94a3b8);
}

/* Triggered Rule - Clean without ID or Category clutter */
.threat-rule-cell {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow: hidden;
}

.threat-rule-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main, #f8fafc);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Verdict Cell: Clean stacked typography with zero pill boxes or status dots */
.threat-verdict-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.threat-verdict-action {
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.threat-verdict-action.is-blocked {
    color: var(--brand-orange, #f97316);
}

.threat-verdict-action.is-allowed {
    color: #5f86a2;
}

.threat-verdict-sub {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-dim, #64748b);
    line-height: 1.2;
    white-space: nowrap;
}

/* Modal Verdict Tag */
.threat-verdict-tag {
    font-size: 11px;
    font-weight: 650;
    padding: 2px 7px;
    border-radius: var(--radius-sm, 2px);
}

.threat-verdict-tag.is-blocked {
    color: var(--brand-orange, #f97316);
    background: color-mix(in srgb, var(--brand-orange, #f97316) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-orange, #f97316) 28%, transparent);
}

.threat-verdict-tag.is-allowed {
    color: #5f86a2;
    background: color-mix(in srgb, #5f86a2 12%, transparent);
    border: 1px solid color-mix(in srgb, #5f86a2 28%, transparent);
}

/* Metric Strip Overrides: Retain clean gunmetal cards matching Security Events */
.threat-operator-frame .threat-metric-strip .operator-metric-card {
    background: var(--bg-card, #171a1f) !important;
    border-color: var(--border, rgba(248, 250, 252, 0.08)) !important;
}

.threat-operator-frame .threat-metric-strip .operator-metric-card:hover {
    border-color: var(--border-strong, rgba(248, 250, 252, 0.14)) !important;
}

/* Row Actions */
.threat-row-actions {
    display: flex;
    justify-content: flex-end;
}

.threat-inspect-btn {
    padding: 3px 8px;
    font-size: 11px;
    white-space: nowrap;
    border-color: var(--border-strong, rgba(248, 250, 252, 0.14));
    color: var(--text-secondary, #dbe4f0);
}

.threat-inspect-btn:hover {
    border-color: var(--brand-orange, #f97316);
    color: var(--brand-orange, #f97316);
    background: color-mix(in srgb, var(--brand-orange, #f97316) 12%, transparent);
}

.threat-inspect-btn .threat-btn-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

.threat-inspect-btn .threat-btn-icon svg {
    width: 12px;
    height: 12px;
}

/* Pagination */
.threat-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    border-top: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    background: var(--bg-card, #171a1f);
    font-size: 12px;
}

.threat-pagination-summary {
    color: var(--text-muted, #cbd5e1);
}

.threat-pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.threat-pagination-page {
    font-size: 11px;
    color: var(--text-dim, #64748b);
    font-weight: 600;
}

.threat-page-size-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted, #cbd5e1);
    font-size: 11px;
}

.threat-page-size-label .settings-input {
    min-height: 28px;
    height: 28px;
    padding: 2px 6px;
    font-size: 11px;
    background: var(--bg-card, #171a1f);
    border: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    color: var(--text-main, #f8fafc);
}

/* Forensic Inspector Modal */
.threat-modal-container {
    max-width: 820px !important;
    width: 92vw !important;
    max-height: 90vh !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    background: var(--bg-card, #171a1f);
    border: 1px solid var(--border-strong, rgba(248, 250, 252, 0.14));
    border-radius: var(--radius, 2px);
}

.threat-inspector-modal {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    min-height: 0;
}

.threat-inspector-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    background: var(--bg-card, #171a1f);
}

.threat-inspector-title-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.threat-inspector-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main, #f8fafc);
    line-height: 1.35;
    word-break: break-word;
}

.threat-inspector-subtitle {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted, #94a3b8);
}

.threat-verdict-text {
    font-weight: 600;
}

.threat-verdict-text.is-blocked {
    color: var(--brand-orange, #f97316);
}

.threat-verdict-text.is-allowed {
    color: #5f86a2;
}

.threat-meta-sep {
    color: var(--border-strong, #475569);
    font-size: 9px;
    user-select: none;
}

.threat-meta-risk,
.threat-meta-score {
    color: var(--text-muted, #94a3b8);
}

.threat-meta-time {
    font-size: 11px;
    color: var(--text-dim, #64748b);
}

.threat-inspector-close {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-dim, #64748b);
    cursor: pointer;
    padding: 0 4px;
    margin-left: 16px;
    margin-top: -2px;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.threat-inspector-close:hover {
    color: var(--text-main, #f8fafc);
}

.threat-inspector-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.threat-inspector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 680px) {
    .threat-inspector-grid {
        grid-template-columns: 1fr;
    }
}

.threat-inspector-card {
    background: var(--bg-elevated, #1a1e24);
    border: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    border-radius: var(--radius-sm, 3px);
    padding: 14px 16px;
}

.threat-card-title {
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted, #cbd5e1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.threat-card-icon {
    display: inline-flex;
    color: var(--brand-orange, #f97316);
}

.threat-prop-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.threat-prop-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    font-size: 12px;
}

.threat-prop-label {
    color: var(--text-dim, #64748b);
    font-weight: 600;
    flex-shrink: 0;
}

.threat-prop-val {
    color: var(--text-main, #f8fafc);
    text-align: right;
    word-break: break-word;
}

.threat-ua-text {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.threat-full-path {
    color: var(--text-main, #f8fafc);
}

.threat-code-pill {
    padding: 2px 6px;
    background: color-mix(in srgb, var(--brand-orange, #f97316) 8%, var(--bg-depth, rgba(0, 0, 0, 0.05)));
    border: 1px solid color-mix(in srgb, var(--brand-orange, #f97316) 28%, transparent);
    border-radius: 2px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--brand-orange, #f97316);
}

/* WAF Rule & Detection Breakdown - clean left-to-right definition layout */
.threat-detection-card .threat-prop-list {
    gap: 12px;
}

.threat-detection-card .threat-prop-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: baseline;
    justify-content: start;
    gap: 16px;
}

.threat-detection-card .threat-prop-label {
    text-align: left;
    color: var(--text-dim, #64748b);
    font-weight: 600;
}

.threat-detection-card .threat-prop-val {
    text-align: left;
    color: var(--text-main, #f8fafc);
}

.threat-detection-card .threat-msg-list {
    margin: 0;
    padding-left: 18px;
    text-align: left;
}

@media (max-width: 640px) {
    .threat-detection-card .threat-prop-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.threat-msg-list {
    margin: 0;
    padding-left: 16px;
    text-align: left;
}

.threat-msg-list li {
    margin-bottom: 4px;
    color: var(--text-secondary, #dbe4f0);
}

.threat-msg-text {
    margin: 0;
    text-align: left;
    color: var(--text-secondary, #dbe4f0);
}

.threat-json-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.threat-json-block {
    margin: 0;
    padding: 12px;
    background: #090b0e;
    border: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    border-radius: var(--radius-sm, 2px);
    max-height: 220px;
    overflow-y: auto;
}

.threat-json-block code {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--text-secondary, #dbe4f0);
    white-space: pre-wrap;
    word-break: break-all;
}

.threat-inspector-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-top: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    background: color-mix(in srgb, var(--bg-panel, #12161b) 85%, var(--bg-card, #171a1f));
}