/* High-DPI Canvas Fix for Sharp Charts */
canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.grid-5 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.grid-2-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.text-center {
    text-align: center;
}

.text-muted {
    color: var(--text-dim);
}

.text-small {
    font-size: 12px;
}

.text-xs {
    font-size: 11px;
}

.text-danger {
    color: var(--danger);
}

.text-success {
    color: var(--success);
}

.text-warning {
    color: var(--warning);
}

.text-info {
    color: var(--secondary);
}

.text-purple {
    color: var(--text-main);
}

.text-uc {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-tab {
    white-space: nowrap;
    gap: 8px;
}

.text-secondary {
    color: var(--secondary);
}

.text-main {
    color: var(--text-main);
}

.text-note {
    color: var(--text-dim);
    font-size: 11px;
}

.text-primary {
    color: var(--primary);
}

.emoji-lg {
    font-size: 32px;
    margin-bottom: 8px;
}

.inline-link {
    color: var(--primary);
    text-decoration: none;
}

.inline-link:hover {
    text-decoration: underline;
}

.transition-opacity {
    transition: opacity 0.3s ease;
}

.is-disabled {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(1);
}

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

.text-mono {
    font-family: var(--font-main);
}

.truncate-200 {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-depth);
    color: var(--text-main);
}

.icon-box-primary {
    background: var(--primary-dim);
    color: var(--primary);
}

.icon-box-sm {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-depth);
    color: var(--text-main);
}

.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;
}

.btn-xs {
    padding: 4px 10px !important;
    font-size: 10px !important;
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;
}

.btn-ghost:hover {
    color: var(--text-main);
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.page-header-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.page-title {
    color: var(--text-main);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.page-subtitle {
    color: var(--text-dim);
    font-size: 11px;
    font-family: var(--font-main);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.config-page-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding: 0;
    background: transparent;
    border: 0;
}

.config-page-hero-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.config-page-hero-kicker {
    color: var(--text-dim);
    font-size: 11px;
    font-family: var(--font-main);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.config-page-hero-title {
    margin: 0;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 600;
}

.config-page-hero-subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
    font-family: var(--font-main);
}

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

.security-nav,
.section-tab-row,
.dashboard-tabs,
.tabs,
.settings-tabs-bar {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    padding: 0 0 1px;
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.security-nav-tab::after,
.section-tab-btn::after,
.dashboard-tab::after,
.tab::after,
.settings-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: transparent;
    transition: background-color 0.15s ease;
}

.security-nav-tab.active,
.section-tab-btn.active,
.section-tab-btn.is-active,
.dashboard-tab.active,
.tab.active,
.settings-tab.active {
    color: var(--text-main);
    font-weight: 500;
}

.security-nav-tab.active::after,
.section-tab-btn.active::after,
.section-tab-btn.is-active::after,
.dashboard-tab.active::after,
.tab.active::after,
.settings-tab.active::after {
    background: var(--primary);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--empty-state-bg);
    text-align: center;
}

.empty-state-icon {
    color: var(--text-dim);
}

.empty-state h3 {
    margin: 0;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 500;
}

.empty-state p {
    margin: 0;
    max-width: 320px;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.6;
}

.table-container {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

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

thead th,
.table-compact th,
.data-table th {
    padding: 12px 16px;
    background: var(--table-header-bg);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border);
}

tbody td,
.table-compact td,
.data-table td,
.table-row td {
    padding: 12px 16px;
    color: var(--text-main);
    font-size: 13px;
    border-bottom: 1px solid var(--border-subtle);
}

tbody tr:hover td,
.table-hover tr:hover td,
.data-table tr:hover td {
    background: var(--table-row-hover);
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
    padding: 20px;
    background: var(--stat-card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.stat-value {
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 28px;
    line-height: 1.1;
}

.stat-label {
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.note-warning {
    background: var(--status-warning-bg);
    border: 1px solid var(--status-warning-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--text-main);
}

.section-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.toggle-group {
    display: flex;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 4px;
    gap: 4px;
}

.toggle-btn {
    flex: 1;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    height: 32px;
    box-shadow: none;
    border: 1px solid transparent;
    color: var(--text-muted);
    background: transparent;
}

.toggle-btn.active-dark {
    background: var(--primary);
    color: #f8fafc;
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent), 0 0 0 2px color-mix(in srgb, var(--primary) 14%, transparent);
}

/* Security Rules builder */
.security-rules-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
}

.security-rules-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.security-rules-tab {
    min-height: 42px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: var(--radius-lg);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
}

.security-rules-tab.is-active {
    border-color: var(--primary);
    background: var(--primary-dim);
}

.security-rules-main {
    min-width: 0;
}

.security-rule-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.security-rule-toolbar,
.security-rule-guide {
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 12px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.security-rule-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.security-rule-family-card {
    min-height: 82px;
    border: 1px solid var(--border);
    background: var(--bg-depth);
    color: var(--text-main);
    border-radius: var(--radius-lg);
    padding: 14px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.security-rule-family-card:hover {
    border-color: var(--primary);
}

.security-rule-guide-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.security-rule-editor-drawer {
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.security-rule-editor-head,
.security-rule-editor-footer {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.security-rule-editor-footer {
    border-top: 1px solid var(--border);
    border-bottom: 0;
    justify-content: flex-end;
}

.security-rule-editor-grid {
    display: grid;
    grid-template-columns: minmax(250px, 0.75fr) minmax(280px, 0.9fr) minmax(360px, 1.25fr);
    gap: 14px;
    padding: 14px;
}

.security-rule-code-editor {
    width: 100%;
    min-height: 270px;
    resize: vertical;
    font-family: var(--font-main);
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-main);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
}

.security-rule-field-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.security-rule-field-chip {
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: var(--radius-lg);
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    cursor: pointer;
}

.security-rule-field-chip span {
    color: var(--text-dim);
    font-family: var(--font-main);
    font-size: 10px;
    overflow-wrap: anywhere;
}

.security-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.card.security-rule-builder {
    overflow: hidden;
    padding: 0;
    border-color: var(--border-strong);
    background: var(--bg-card);
}

.security-rule-builder-head {
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--glass-highlight), transparent);
}

.security-rule-builder-head h3 {
    margin: 2px 0 4px;
    font-size: 20px;
    line-height: 1.25;
}

.security-rule-eyebrow {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.security-rule-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
}

.security-rule-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
}

.security-rule-type-card {
    min-height: 72px;
    border: 1px solid var(--border);
    background: var(--bg-depth);
    color: var(--text-main);
    border-radius: var(--radius-lg);
    padding: 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.security-rule-type-card:hover,
.security-rule-type-card.is-selected {
    border-color: var(--primary);
    background: var(--primary-dim);
}

.security-rule-type-card span {
    font-size: 13px;
    font-weight: 700;
}

.security-rule-type-card small {
    color: var(--text-dim);
    font-size: 11px;
}

.security-rule-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.security-rule-advanced-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--glass-highlight);
}

.security-rule-list-shell {
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.security-rule-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.security-rule-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.security-rule-list-actions .input-sm {
    min-width: 260px;
}

.security-rule-builder .security-rule-form {
    padding: 0;
}

.security-rule-cf-form {
    display: grid;
}

.security-rule-cf-section {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
}

.security-rule-cf-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: linear-gradient(180deg, var(--bg-depth), var(--glass-highlight));
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 var(--glass-highlight-strong);
}

.security-rule-cf-content {
    max-width: 1040px;
}

.security-rule-cf-title,
.security-rule-cf-title-row {
    margin-bottom: 12px;
}

.security-rule-cf-title {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
}

.security-rule-cf-title-row,
.security-rule-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.security-rule-cf-preview {
    margin-bottom: 14px;
    background: var(--surface-inset);
    border-color: var(--border-strong);
}

.security-rule-pane {
    border: 1px solid var(--border);
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    padding: 16px;
    align-self: start;
}

.security-rule-builder .form-group {
    margin-bottom: 10px;
}

.security-rule-builder .form-group input,
.security-rule-builder .form-group select,
.security-rule-builder .form-group textarea {
    margin-top: 5px;
}

.security-rule-builder input,
.security-rule-builder select {
    min-height: 40px;
}

.security-rule-scope-lock {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--glass-highlight);
}

.security-rule-scope-lock strong {
    margin-top: 4px;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.3;
}

.security-rule-pane-title {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.security-rule-pane-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.security-rule-pane-header .security-rule-pane-title {
    margin-bottom: 4px;
}

.security-rule-condition-card {
    border: 1px solid var(--border-strong);
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 14px;
}

.security-rule-condition-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.security-rule-conditions {
    display: grid;
    gap: 10px;
}

.security-rule-condition-row {
    display: grid;
    grid-template-columns: 82px minmax(190px, 1.1fr) minmax(130px, 0.7fr) minmax(190px, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--glass-highlight);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.security-rule-condition-row:hover {
    border-color: var(--border-strong);
    background: var(--glass-highlight);
}

.security-rule-condition-joiner {
    padding-top: 24px;
}

.security-rule-condition-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
}

.security-rule-condition-value[multiple] {
    min-height: 120px;
}

.security-rule-row-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.security-rule-chip {
    display: inline-flex;
    align-items: center;
    max-width: 280px;
    border: 1px solid var(--border);
    background: var(--glass-highlight);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.3;
    padding: 4px 8px;
    overflow-wrap: anywhere;
}

.security-rule-builder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 0;
}

.security-rule-validation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
}

.security-rule-code-group {
    margin-bottom: 0;
}

.security-rule-code-panel {
    border: 1px solid var(--border-strong);
    background: var(--surface-code);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.security-rule-code-input {
    width: 100%;
    min-height: 170px;
    font-family: var(--font-main);
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-main);
    background: var(--surface-inset);
    border: 0;
    border-radius: 0;
    margin-top: 0 !important;
    padding: 16px;
}

.security-rule-expression-preview,
.security-rule-test-result {
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
}

.security-rule-expression-preview code {
    display: block;
    margin-top: 10px;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 12px;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
    background: var(--overlay-backdrop);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
}

.security-rule-code-panel .security-rule-expression-preview {
    border-width: 1px 0 0;
    border-radius: 0;
    background: var(--glass-highlight);
}

.security-rule-test-result {
    margin-top: 10px;
}

.security-rule-builder .card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--glass-highlight);
}

.security-rule-builder-bot.card.security-rule-builder,
.security-rule-builder-bot {
    border: 1px solid var(--operator-line, var(--border));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-card));
    box-shadow: none;
}

.security-rule-builder-bot .security-rule-builder-head {
    align-items: flex-start;
    padding: 18px 20px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
    background: var(--operator-surface, var(--bg-card));
}

.security-rule-builder-bot .security-rule-builder-head h3 {
    width: auto !important;
    max-width: none !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--text-main) !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.security-rule-builder-bot .security-rule-eyebrow {
    color: var(--operator-orange, var(--primary));
}

.security-rule-builder-bot .security-rule-toggle {
    min-height: 36px;
    min-width: 120px;
    padding: 7px 10px;
    border-color: var(--operator-line-soft, var(--border));
    border-radius: 4px;
    background: var(--operator-surface-muted, var(--bg-depth));
    color: var(--text-muted);
    justify-content: center;
}

.security-rule-builder-bot .security-rule-cf-section {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
    background: transparent;
}

.security-rule-builder-bot .security-rule-cf-step {
    width: 28px;
    height: 28px;
    border-color: var(--operator-line, var(--border));
    background: var(--operator-surface, var(--bg-card));
    color: var(--text-muted);
    box-shadow: none;
}

.security-rule-builder-bot .security-rule-cf-content {
    max-width: none;
}

.security-rule-builder-bot .security-rule-cf-title {
    margin-bottom: 16px;
}

.security-rule-builder-bot .form-group {
    margin-bottom: 14px;
}

.security-rule-builder-bot .form-group input,
.security-rule-builder-bot .form-group select,
.security-rule-builder-bot .form-group textarea {
    margin-top: 8px;
    border-color: var(--operator-line, var(--border));
    border-radius: 4px;
    background: var(--operator-surface, var(--bg-card));
    box-shadow: none;
}

.security-rule-builder-bot .form-group input:focus,
.security-rule-builder-bot .form-group select:focus,
.security-rule-builder-bot .form-group textarea:focus,
.security-rule-builder-bot .security-rule-field-search:focus {
    border-color: var(--operator-orange, var(--primary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--operator-orange, var(--primary)) 16%, transparent);
    outline: none;
}

.security-rule-builder-bot .security-rule-priority-row {
    max-width: 240px;
}

.security-rule-builder-bot .security-rule-priority-row .form-group {
    margin-bottom: 0;
}

.security-rule-builder-bot .grid-2 {
    grid-template-columns: minmax(0, 1.25fr) minmax(180px, 0.75fr);
}

.security-rule-builder-bot .security-rule-condition-card,
.security-rule-builder-bot .security-rule-expression-preview {
    padding: 16px;
    border-color: var(--operator-line, var(--border));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-card));
}

.security-rule-builder-bot .security-rule-action-panel {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--operator-line, var(--border));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-card));
}

.security-rule-builder-bot .security-rule-action-panel .security-rule-pane-title {
    margin-bottom: 14px;
}

.security-rule-builder-bot .security-rule-condition-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
}

.security-rule-builder-bot .security-rule-condition-head strong {
    display: block;
    padding-top: 2px;
}

.security-rule-builder-bot .security-rule-condition-row {
    grid-template-columns: 76px minmax(240px, 1fr) minmax(160px, 0.7fr) minmax(240px, 1.1fr) 42px;
    grid-template-areas: "joiner field operator value remove";
    gap: 12px;
    padding: 14px;
    border-color: var(--operator-line-soft, var(--border));
    border-radius: 5px;
    background: transparent;
}

.security-rule-builder-bot .security-rule-condition-joiner {
    grid-area: joiner;
    align-self: start;
    padding-top: 26px;
    padding-bottom: 0;
}

.security-rule-builder-bot .security-rule-condition-joiner .security-rule-condition-join,
.security-rule-builder-bot .security-rule-condition-joiner .status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 10px;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.security-rule-builder-bot .security-rule-condition-joiner .status-pill {
    color: var(--text-main);
    background: var(--operator-surface-muted, var(--bg-depth));
    border: 1px solid var(--operator-line-soft, var(--border));
}

.security-rule-builder-bot .security-rule-condition-joiner .security-rule-condition-join {
    appearance: none;
    background-color: var(--operator-surface, var(--bg-card));
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 13px) 17px, calc(100% - 8px) 17px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 22px;
}

.security-rule-builder-bot .security-rule-condition-row .form-group {
    margin-bottom: 0;
}

.security-rule-builder-bot .security-rule-field-combobox {
    grid-area: field;
    position: relative;
}

.security-rule-builder-bot .security-rule-field-dropdown {
    position: relative;
}

.security-rule-builder-bot .security-rule-field-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--radius);
}

.security-rule-builder-bot .security-rule-condition-operator-shell {
    grid-area: operator;
}

.security-rule-builder-bot .security-rule-condition-value-shell {
    grid-area: value;
}

.security-rule-builder-bot .security-rule-condition-remove {
    grid-area: remove;
    align-self: start;
    margin-top: 26px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-color: var(--operator-line-soft, var(--border));
    border-radius: 4px;
    background: var(--operator-surface-muted, var(--bg-depth));
    color: var(--text-muted);
}

.security-rule-builder-bot .security-rule-condition-remove span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.security-rule-builder-bot .security-rule-condition-remove:hover,
.security-rule-builder-bot .security-rule-condition-remove:focus-visible {
    color: var(--danger);
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.security-rule-builder-bot .security-rule-field-search {
    width: 100%;
    padding-right: 40px;
}

.security-rule-builder-bot .security-rule-field-dropdown.is-open .security-rule-field-search {
    border-color: var(--operator-orange, var(--primary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--operator-orange, var(--primary)) 16%, transparent);
}

.security-rule-builder-bot .security-rule-field-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    transform: translateY(-50%);
    cursor: pointer;
}

.security-rule-builder-bot .security-rule-field-toggle:hover,
.security-rule-builder-bot .security-rule-field-toggle:focus-visible {
    color: var(--text-main);
    background: var(--operator-surface-muted, var(--bg-depth));
}

.security-rule-builder-bot .security-rule-field-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: none;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--operator-line, var(--border));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-card));
    box-shadow: 0 14px 34px color-mix(in srgb, #000 24%, transparent);
}

.security-rule-builder-bot .security-rule-field-dropdown.is-open .security-rule-field-menu {
    display: block;
}

.security-rule-builder-bot .security-rule-field-menu-head {
    position: sticky;
    top: -10px;
    z-index: 1;
    margin: -10px -10px 8px;
    padding: 10px 12px;
    color: var(--text-muted);
    background: var(--operator-surface, var(--bg-card));
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
}

.security-rule-builder-bot .security-rule-field-group + .security-rule-field-group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--operator-line-soft, var(--border));
}

.security-rule-builder-bot .security-rule-field-group-label {
    padding: 5px 8px 7px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
}

.security-rule-builder-bot .security-rule-field-option {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 4px 10px;
    width: 100%;
    padding: 9px 10px;
    color: var(--text-main);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.security-rule-builder-bot .security-rule-field-option:hover,
.security-rule-builder-bot .security-rule-field-option:focus-visible,
.security-rule-builder-bot .security-rule-field-option.is-selected {
    background: color-mix(in srgb, var(--operator-orange, var(--primary)) 7%, var(--operator-surface, var(--bg-card)));
}

.security-rule-builder-bot .security-rule-field-option.is-selected::after {
    content: "";
    align-self: center;
    justify-self: center;
    width: 7px;
    height: 12px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg);
}

.security-rule-builder-bot .security-rule-field-option-label {
    grid-column: 1;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 600;
}

.security-rule-builder-bot .security-rule-field-option code {
    grid-column: 1;
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 11px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.security-rule-builder-bot .security-rule-field-empty {
    padding: 10px 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.security-rule-builder-bot .security-rule-bot-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.security-rule-builder-bot .security-rule-targeting-panel {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--operator-line, var(--border));
    border-radius: 6px;
    background: var(--operator-surface, var(--bg-card));
}

.security-rule-builder-bot .security-rule-preview-section {
    padding: 20px 24px 24px 88px;
    border-bottom: 1px solid var(--operator-line-soft, var(--border));
    background: transparent;
}

.security-rule-builder-bot .security-rule-preview-bottom {
    margin: 0;
}

.security-rule-builder-bot .security-rule-preview-head {
    margin-bottom: 10px;
}

.security-rule-builder-bot .security-rule-footer {
    align-items: center;
    border-top: 1px solid var(--operator-line-soft, var(--border));
    background: var(--operator-surface, var(--bg-card));
}

.security-rule-builder-bot .security-rule-footer .flex-row {
    gap: 10px;
}

.security-rule-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ── Bot targeting checkboxes ─────────────────────────────────────── */
.security-rule-bot-scope {
    display: grid;
    gap: 10px;
}

.security-rule-bot-scope-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--glass-highlight);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    user-select: none;
}

.security-rule-bot-scope-item:hover {
    border-color: var(--border-strong);
    background: var(--glass-highlight);
}

.security-rule-bot-scope-item:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-dim, var(--primary-glow));
}

.security-rule-bot-scope-check {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}

/* Hide native checkbox, use custom box */
.security-rule-bot-scope-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.security-rule-bot-scope-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-strong);
    border-radius: 5px;
    background: var(--bg-depth);
    transition: border-color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.security-rule-bot-scope-box::after {
    content: '';
    display: block;
    width: 6px;
    height: 10px;
    border: 2px solid transparent;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) translateY(-1px);
    transition: border-color 0.15s ease;
}

.security-rule-bot-scope-check input:checked ~ .security-rule-bot-scope-box {
    background: var(--primary);
    border-color: var(--primary);
}

.security-rule-bot-scope-check input:checked ~ .security-rule-bot-scope-box::after {
    border-color: var(--bg-card);
}

.security-rule-bot-scope-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.security-rule-bot-scope-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.security-rule-bot-scope-label svg {
    color: var(--text-dim);
    flex-shrink: 0;
}

.security-rule-bot-scope-item:has(input:checked) .security-rule-bot-scope-label svg {
    color: var(--primary);
}

.security-rule-bot-scope-hint {
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .security-rules-shell,
    .security-rule-editor-grid {
        grid-template-columns: 1fr;
    }

    .security-rule-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .security-rule-toolbar,
    .security-rule-guide {
        align-items: stretch;
        flex-direction: column;
    }

    .security-rule-list-toolbar,
    .security-rule-list-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .security-rule-list-actions .input-sm {
        min-width: 0;
        width: 100%;
    }

    .security-rule-cf-section {
        grid-template-columns: 1fr;
    }

    .security-rule-cf-title-row,
    .security-rule-preview-head {
        align-items: stretch;
        flex-direction: column;
    }

    .security-rule-condition-row,
    .security-rule-advanced-filters {
        grid-template-columns: 1fr;
    }

    .security-rule-condition-joiner,
    .security-rule-condition-remove {
        padding-top: 0;
        margin-top: 0;
    }

    .security-rule-builder-bot .security-rule-condition-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "joiner"
            "field"
            "operator"
            "value"
            "remove";
    }

    .security-rule-builder-bot .security-rule-condition-joiner,
    .security-rule-builder-bot .security-rule-condition-remove {
        padding-top: 0;
        margin-top: 0;
    }

    .security-rule-builder-bot .security-rule-condition-joiner .security-rule-condition-join,
    .security-rule-builder-bot .security-rule-condition-joiner .status-pill {
        width: auto;
        min-width: 76px;
    }
}

.toggle-btn.active-light {
    background: #f8fafc;
    color: #0f172a;
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

.toggle-btn.is-active {
    font-weight: 700;
}

.icon-btn {
    width: 24px;
    height: 24px;
}

.radio-accent {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.select-sm {
    padding: 6px 12px;
    font-size: 13px;
    font-family: var(--font-main);
    min-width: 140px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-main);
}

/* Cards: Clean & Professional */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    position: relative;
    transition: background var(--transition-normal);
}

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

.card-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.card-body {
    padding: 16px;
}

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

.card-dashed {
    border-style: dashed;
}

.provider-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.provider-card.enabled {
    border-color: var(--primary);
}

.provider-card:hover {
    border-color: var(--primary);
}

.provider-favicon {
    width: 16px;
    height: 16px;
    opacity: 0.8;
    border-radius: 4px;
}

.provider-title {
    font-weight: 600;
    font-size: 13px;
}

.provider-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 8px;
}

.preview-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.preview-inner {
    padding: 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    width: 80%;
    backdrop-filter: blur(20px);
}

.preview-inner h3 {
    margin: 0 0 16px;
    padding: 0;
    border-bottom: 0;
    letter-spacing: 0;
}

.preview-footer {
    position: absolute;
    bottom: 12px;
    font-size: 10px;
    opacity: 0.5;
}

.preview-light {
    background: #f1f5f9;
}

.preview-dark {
    background: radial-gradient(circle at top center, var(--bg-depth) 0%, var(--bg-void) 100%);
}

.preview-inner-light {
    background: #ffffff;
    border: 1px solid #d7dee8;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.preview-inner-dark {
    background: var(--overlay-backdrop);
    border: 1px solid var(--glass-highlight-strong);
}

.preview-title-light {
    color: #0f172a !important;
}

.preview-title-dark {
    color: var(--text-secondary);
}

.preview-msg-light {
    color: #334155 !important;
}

.preview-msg-dark {
    color: var(--text-muted);
}

.preview-footer-light {
    color: #64748b !important;
}

.preview-footer-dark {
    color: var(--text-muted);
}

.spinner-preview {
    width: 30px;
    height: 30px;
    border: 3px solid var(--primary-dim);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin 1s linear infinite;
    margin: 0 auto 16px auto;
}

.preview-checkmark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    color: var(--success);
    background: var(--status-success-bg);
    border: 1px solid var(--status-success-border);
}

.preview-signal-bars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 120px;
    margin: 16px auto 0 auto;
}

.preview-signal-bars span {
    height: 4px;
    border-radius: 999px;
    background: var(--success);
}

.preview-signal-bars span:nth-child(2) {
    opacity: 0.7;
}

.preview-signal-bars span:nth-child(3) {
    opacity: 0.45;
}

.preview-widget-box,
.preview-captcha-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(260px, 100%);
    min-height: 54px;
    margin: 16px auto 0 auto;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 6px 18px var(--glass-highlight-strong);
    text-align: left;
}

.preview-widget-check,
.preview-captcha-check {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid var(--text-muted);
    background: var(--bg-elevated);
    flex: 0 0 auto;
}

.preview-widget-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.preview-widget-title {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.preview-widget-subtitle {
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.3;
    margin-top: 2px;
}

.preview-widget-brand {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.preview-captcha-text {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
}

.banner-danger {
    background: var(--status-danger-bg);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    color: var(--danger);
}

.card h3 {
    margin: 0 0 16px 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}

/* Dashboard Layouts */
.grid-main-chart {
    margin-bottom: 24px;
    height: 350px;
}

.grid-sub-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.grid-tables {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 250px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.chart-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* Stats Grid */
.grid-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-main);
    font-family: var(--font-main);
    letter-spacing: -0.5px;
    margin: 8px 0;
}

.stat-sub {
    font-size: 11px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-dim);
}

/* Charts Grid */
.grid-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.grid-certs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.grid-auto-320 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.grid-auto-300 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* Traffic Control shared layout helpers */
.grid-3-2 {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 24px;
}

.card-tight {
    padding: 4px;
}

.h-420 { height: 420px; }

.overflow-hidden {
    overflow: hidden;
}

.map-frame {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
    border: 1px solid var(--border);
}

.map-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--overlay-backdrop);
    backdrop-filter: blur(4px);
    padding: 8px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--glass-highlight-strong);
}

.map-overlay-right {
    right: 20px;
    left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.overlay-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.overlay-value {
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.overlay-sub {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.7;
}

.overlay-chip {
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.dot-8 { width: 8px; height: 8px; }

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

.mode-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    height: auto;
    border: 1px solid var(--border);
    background: var(--bg-depth);
    color: var(--text-muted);
    opacity: 0.7;
    box-shadow: none;
}

.mode-card.active-block {
    background: var(--status-danger-bg);
    border-color: var(--danger);
    color: var(--danger);
    opacity: 1;
}

.mode-card.active-allow {
    background: var(--status-success-bg);
    border-color: var(--success);
    color: var(--success);
    opacity: 1;
}

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

.selection-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
}

.selection-list {
    flex: 1;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
}

.selection-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.selection-row.region {
    background: rgba(var(--primary-rgb), 0.03);
}

.code-chip {
    font-family: var(--font-main);
    font-size: 11px;
    background: var(--bg-card);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.tag-pill {
    font-size: 9px;
    text-transform: uppercase;
    border: 1px solid var(--border);
    padding: 1px 4px;
    border-radius: var(--radius-sm, 2px);
}

.remove-icon {
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0.6;
    transition: opacity 0.2s;
}

.remove-icon:hover { opacity: 1; }

.empty-state-100 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: var(--text-muted);
    font-size: 13px;
}


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

.divider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 12px;
}

.divider-line { height: 1px; flex: 1; background: var(--border); }

.geo-country-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.country-checkbox {
    width: auto;
    margin-right: 12px;
}

.code-chip-sm { width: 30px; text-align: center; }

.modal-footer-bar {
    padding: 16px;
    border-top: 1px solid var(--border);
}

.banner-primary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-left: 4px solid var(--primary);
}

.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;
}

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

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

.range-primary {
    width: 100%;
    accent-color: var(--primary);
    margin-bottom: 20px;
    height: 6px;
    border-radius: 3px;
}

.range-warning {
    width: 100%;
    accent-color: var(--warning);
    margin-bottom: 12px;
}

.input-stack {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.input-stack .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;
}

.input-stack .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;
}

.input-stack .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;
}

.input-stack .input-addon-tight {
    border-left: none;
    border-radius: 0 6px 6px 0;
}

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

.table-compact th {
    text-align: left;
    padding: 12px;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-dim);
    background: var(--bg-depth);
    border-bottom: 1px solid var(--border);
}

.table-compact td {
    padding: 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-subtle);
}

.cell-center { text-align: center; }
.cell-right { text-align: right; }
.cell-mono { font-family: var(--font-main); }

.table-empty {
    text-align: center;
    padding: 32px;
    color: var(--text-muted);
    font-size: 13px;
}

.table-empty span { font-size: 11px; opacity: 0.7; }


.code-tag {
    display: block;
    padding: 8px;
    background: var(--bg-depth);
    border-radius: var(--radius);
    font-size: 11px;
    border: 1px solid var(--border);
}

.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);
}

.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);
}

.vip-card {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.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: white;
    box-shadow: 0 2px 4px var(--status-success-border);
}

.empty-tile {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: var(--radius);
    z-index: 9999;
    box-shadow: 0 4px 12px var(--overlay-backdrop);
    color: white;
}

.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-warning { background: var(--warning); }

.card-warning-soft {
    border: 1px solid var(--status-warning-border);
    background: linear-gradient(to bottom right, var(--bg-card), var(--status-warning-bg));
}

.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);
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pill-success {
    background: var(--status-success-bg);
    color: var(--success);
    border-radius: 20px;
    border: 1px solid var(--status-success-border);
    padding: 4px 10px;
    font-size: 12px;
}

.chart-container {
    height: 300px;
    position: relative;
    background: var(--glass-highlight-strong);
    border-radius: var(--radius-sm);
    margin-top: 8px;
}

/* Buttons: Professional */
.btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 13px;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary);
    color: white;
}

.btn:hover {
    opacity: 0.9;
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--bg-card);
}

.btn-danger:hover {
    opacity: 0.9;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
}

.btn-outline:hover {
    border-color: var(--text-dim);
    color: var(--text-main);
}

.btn-outline-danger {
    border-color: var(--danger);
    color: var(--danger);
    background: transparent;
}

.btn-outline-danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--status-danger-bg);
}

.btn-outline-warning {
    border-color: var(--warning);
    color: var(--warning);
    background: transparent;
}

.btn-outline-warning:hover {
    border-color: var(--warning);
    color: var(--warning);
    background: var(--status-warning-bg);
}

/* Feature / module cards */
.card-feature {
    margin-bottom: 20px;
    border-left: 4px solid var(--border);
}

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

.feature-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feature-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.feature-icon {
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-muted);
    display: inline-flex;
}

.card-feature.active .feature-icon {
    background: var(--primary-glow);
    color: var(--primary);
}

.feature-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
}

.card-feature.active .feature-status {
    color: var(--success);
}

.module-card-compact {
    padding: 14px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.module-card-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--glass-highlight-strong);
}

.module-card-compact.active {
    border-color: var(--primary);
    box-shadow: 0 4px 12px var(--glass-highlight-strong);
}

.module-card-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

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

.module-card-compact.active .module-card-icon {
    background: var(--primary-dim);
    color: var(--primary);
}

.module-card-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border);
    margin-top: 4px;
    flex-shrink: 0;
}

.module-card-compact.active .module-card-dot {
    background: var(--success);
}

.toggle-card {
    border: 2px solid var(--border);
}

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

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

.toggle-card.active .toggle-card-icon {
    background: var(--status-success-bg);
    color: var(--success);
}

/* Rule Editor */
.rule-editor-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    background: var(--bg-main);
}

.rule-editor-header {
    display: flex;
    flex-direction: column;
    padding: 24px 32px 0;
    background: var(--bg-depth);
    border-bottom: 1px solid var(--border);
}

.rule-editor-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.rule-editor-title {
    display: flex;
    align-items: center;
    gap: 20px;
}

.divider-vertical {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 4px;
}

.rule-heading {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--text-main);
}

.unsaved-badge {
    margin-left: 12px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    background: var(--warning);
    color: var(--bg-void);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.rule-actions {
    display: flex;
    gap: 12px;
}

.editor-tabs {
    display: flex;
    gap: 32px;
}

.editor-tab {
    background: none;
    border: none;
    padding: 12px 4px 16px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.editor-tab:hover {
    color: var(--text-main);
}

.editor-tab.active {
    color: var(--primary);
    font-weight: 600;
}

.editor-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
}

.rule-editor-body {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.rule-layout {
    display: flex;
    height: 100%;
}

.rules-sidebar {
    width: 300px;
    border-right: 1px solid var(--border);
    background: var(--bg-depth);
    display: flex;
    flex-direction: column;
}

.rules-sidebar-header {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.rules-search {
    position: relative;
}

.rules-search input {
    padding-left: 32px;
}

.rules-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rule-item {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}

.rule-item:hover {
    background: var(--bg-depth);
    border-color: var(--border);
}

.rule-item.selected {
    border-color: var(--primary);
    background: var(--primary-glow);
}

.rule-item:focus-visible,
.section-profile-row:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.icon-faded {
    opacity: 0.3;
}

.rule-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.rule-item-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.rule-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-muted);
}

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

.rule-detail {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-main);
}

.rule-detail-inner {
    padding: 32px;
    max-width: 900px;
    margin: 0 auto;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: var(--text-muted);
    gap: 8px;
}

.rule-section {
    margin-bottom: 24px;
}

.rule-section h3 {
    margin: 0 0 16px;
    font-size: 16px;
    color: var(--text-main);
}

.grid-2-cols-16 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.pattern-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pattern-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-depth);
    border-radius: var(--radius-sm);
}

.pattern-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 12px;
    background: var(--bg-depth);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
}

.pattern-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px var(--glass-highlight-strong);
}

.pattern-handle {
    cursor: grab;
    color: var(--text-dim);
    padding-top: 4px;
}

.pattern-number {
    color: var(--text-dim);
    font-size: 12px;
    min-width: 24px;
}

.pattern-body {
    flex: 1;
}

.code-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 12px;
}

.pattern-status {
    margin-top: 4px;
    font-size: 11px;
}

.test-patterns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.pattern-match-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.pattern-match-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dot-color, var(--text-muted));
}

.grid-auto-1fr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    font-size: 13px;
}

.btn-danger-text {
    color: var(--danger);
}

.alert-warning {
    padding: 12px 24px;
    background: var(--status-warning-bg);
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--warning);
    display: flex;
    align-items: center;
    gap: 8px;
}

.source-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.source-textarea {
    flex: 1;
    width: 100%;
    background: var(--bg-depth);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    line-height: 1.5;
    padding: 24px;
    border: none;
    resize: none;
    outline: none;
}

.score-slider {
    accent-color: var(--primary);
}

.tester-shell {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px;
}

.test-card {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.test-body {
    padding: 24px;
}

.test-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.test-row {
    display: flex;
    gap: 12px;
}

.alert-danger-soft {
    background: var(--status-danger-bg);
    border: 1px solid var(--status-danger-border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.alert-success-soft {
    background: rgba(39, 174, 96, 0.08);
    border: 1px solid rgba(39, 174, 96, 0.3);
    border-radius: var(--radius-lg);
    padding: 24px;
}

/* Toolbar period buttons */
.period-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 16px;
}

.period-btn {
    background: var(--bg-depth);
    border: 1px solid var(--border);
    color: var(--text-muted);
    box-shadow: none;
}

.period-btn.active {
    background: var(--primary);
    color: var(--bg-card);
    border-color: var(--primary);
}

/* Simple gauge */
.gauge-track {
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
    width: var(--pct, 0%);
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

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

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

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

.health-ring {
    transition: stroke-dashoffset 1s ease;
}

.gauge-circle {
    width: 100px;
    height: 100px;
}

.shadow-none {
    box-shadow: none;
}

.cert-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 11px;
    color: var(--text-dim);
    padding: 10px;
    background: var(--bg-depth);
    border-radius: var(--radius);
}

.btn-outline-success {
    background: transparent;
    border: 1px solid var(--success);
    color: var(--success);
}

.btn-outline-success:hover {
    background: var(--status-success-bg);
    color: var(--success);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Inputs: Clean */
input,
textarea,
select {
    background: var(--bg-depth);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    width: 100%;
    font-family: var(--font-main);
    font-size: 13px;
    transition: border-color var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    outline: none;
}

/* Switches */
.switch {
    position: relative;
    width: 36px;
    height: 20px;
    display: inline-block;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 1px;
    background-color: var(--bg-depth);
    transition: .2s;
    border-radius: 4px;
    /* Boxy toggle */
    border: 1px solid var(--border);
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-muted);
    transition: .2s;
    border-radius: 2px;
    /* Square knob */
}

input:checked+.slider {
    background-color: var(--status-success-border);
    border-color: var(--success);
}

input:checked+.slider:before {
    transform: translateX(16px);
    background-color: var(--success);
}

/* Tables: Clear Lines */
.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.table-row td {
    border-bottom: 1px solid var(--border);
}

.table-compact th,
.table-compact td {
    padding: 10px 16px;
    font-size: 12px;
}

.table-compact th {
    color: var(--text-dim);
    text-transform: uppercase;
    font-size: 11px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-depth);
}

th {
    text-align: left;
    padding: 12px 16px;
    color: var(--text-dim);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    border-bottom: 2px solid var(--border);
}

td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-main);
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: var(--bg-card-hover);
    color: var(--text-main);
}

/* Module Cards */
.module-card {
    transition: border-color 0.2s, box-shadow 0.2s;
}

.module-card:hover {
    border-color: var(--primary);
    box-shadow: none;
}

/* Module Filter Buttons */
.module-filter {
    transition: all 0.2s;
}

.module-filter.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.module-filter:not(.active):hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Form Elements in Modules */
.module-card input[type="text"],
.module-card input[type="number"],
.module-card select {
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 12px;
    transition: border-color 0.2s;
}

.module-card input[type="text"]:focus,
.module-card input[type="number"]:focus,
.module-card select:focus {
    outline: none;
    border-color: var(--primary);
}

.module-card input[type="checkbox"] {
    accent-color: var(--primary);
}

/* Responsive Modules Grid */
@media (max-width: 768px) {
    .grid-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-sub-charts {
        grid-template-columns: 1fr;
    }
}

/* Module Tabs */
.module-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: var(--bg-depth);
    padding: 4px;
    border-radius: var(--radius-lg);
    width: fit-content;
}

.module-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.module-tab:hover {
    color: var(--text-main);
}

.module-tab.active {
    background: var(--primary);
    color: white;
}

/* Modules Grid - 3 Column Layout */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .modules-grid {
        grid-template-columns: 1fr;
    }
}

.module-widget {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.module-widget:hover {
    border-color: var(--border-strong);
    background: var(--bg-card-hover);
    box-shadow: 0 1px 2px var(--glass-highlight);
}

.module-widget-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.module-widget-icon {
    font-size: 28px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 999px;
}

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

.module-widget-info h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}

.module-widget-tier {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.module-widget-desc {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
}

.module-widget-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.module-widget-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-dim);
}

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

.module-widget-status.active .status-dot {
    background: var(--text-muted);
    box-shadow: none;
}

.module-widget-status.active {
    color: var(--text-main);
}

.module-widget-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Tier Badges */
.tier-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}

.tier-free {
    background: var(--status-success-bg);
    color: var(--success);
    border: 1px solid var(--status-success-border);
}

.tier-pro {
    background: var(--status-warning-bg);
    color: var(--warning);
    border: 1px solid var(--status-warning-border);
}

.tier-enterprise {
    background: var(--primary-glow);
    color: var(--secondary);
    border: 1px solid var(--text-main);
}

/* Locked Module Overlay */
.module-locked {
    position: relative;
    opacity: 0.7;
    pointer-events: none;
}

.module-locked .lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    z-index: 10;
}

.module-locked .lock-overlay span {
    font-size: 24px;
    filter: drop-shadow(0 0 4px var(--overlay-backdrop));
}

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

.module-locked .module-widget-actions .btn-primary {
    background: var(--bg-depth);
    border: 1px solid var(--border);
}

.btn-sm {
    padding: 6px 12px !important;
    font-size: 11px !important;
}

/* Mini Switch Toggle */
.switch-mini {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.switch-mini input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-mini {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border);
    border-radius: 20px;
    transition: 0.3s;
}

.slider-mini:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.switch-mini input:checked+.slider-mini {
    background: var(--success);
}

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

/* Module Config Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 500px;
    max-width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s ease;
}

#route-modal .modal-content {
    width: min(760px, 92vw);
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-main);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-main);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-depth);
}

.modal-narrow {
    width: 500px;
    max-width: 90vw;
}

.status-pill {
    padding: 4px 10px;
    border-radius: var(--radius-sm, 2px);
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
}

.status-pill.blocked {
    color: var(--danger);
    background: var(--status-danger-bg);
}

.status-pill.allowed {
    color: var(--success);
    background: var(--status-success-bg);
}

.status-pill.warning {
    color: var(--warning);
    background: var(--status-warning-bg);
}

.status-pill.accent {
    color: var(--primary);
    background: var(--primary-glow);
}

.status-chip {
    font-size: 11px;
    color: var(--text-dim);
    background: var(--bg-depth);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid var(--border);
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.modal-input {
    padding: 10px 14px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 13px;
    font-family: var(--font-main);
}

.modal-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Checkbox Toggle in Modal */
.checkbox-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px 16px;
    background: var(--bg-depth);
    border-radius: var(--radius);
}

.checkbox-toggle input {
    display: none;
}

.checkbox-toggle-switch {
    width: 40px;
    height: 22px;
    background: var(--border);
    border-radius: 11px;
    position: relative;
    transition: background 0.2s;
}

.checkbox-toggle-switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
}

.checkbox-toggle input:checked+.checkbox-toggle-switch {
    background: var(--success);
}

.checkbox-toggle input:checked+.checkbox-toggle-switch::after {
    transform: translateX(18px);
}

.checkbox-toggle-label {
    font-size: 13px;
    color: var(--text-muted);
}

/* IP List Management */
.ip-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.ip-tab {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ip-tab:hover {
    border-color: var(--primary);
}

.ip-tab.active {
    background: var(--primary-glow);
    border-color: var(--primary);
    color: var(--primary);
}

.ip-count {
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    font-size: 11px;
}

.ip-panel {
    display: none;
}

.ip-panel.active {
    display: block;
}

.ip-add-section {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.ip-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
}

.ip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

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

.ip-item:hover {
    background: var(--status-success-bg);
}

.ip-item.blocked:hover {
    background: var(--status-danger-bg);
}

.ip-value {
    font-family: var(--font-main);
    font-size: 13px;
    color: var(--text-main);
}

.ip-item.blocked .ip-value {
    color: var(--danger);
}

.ip-remove {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}

.ip-remove:hover {
    color: var(--danger);
}

.ip-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-dim);
    font-size: 12px;
}

/* Mass Add Modal */
.mass-add-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    z-index: 10;
}

.mass-add-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 400px;
}

.mass-add-modal h4 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--text-main);
}

.mass-add-modal p {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-dim);
}

.mass-add-modal textarea {
    width: 100%;
    padding: 12px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 12px;
    resize: vertical;
    margin-bottom: 16px;
}

.mass-add-modal textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.mass-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Settings Page - Professional Layout */
.settings-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    min-height: 600px;
}

.settings-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: fit-content;
}

.settings-sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-depth);
}

.settings-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

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

.settings-nav.active {
    background: var(--primary-glow);
    border-left-color: var(--primary);
}

.settings-nav-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
}

.settings-nav-text {
    flex: 1;
}

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

.settings-nav-desc {
    display: block;
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}

.settings-main {
    min-height: 500px;
}

.settings-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: opacity 0.15s ease;
}

.settings-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.settings-header h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
}

.settings-header p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.settings-section {
    margin-bottom: 28px;
}

.settings-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.settings-grid.grid-2-1 {
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.target-row {
    display: flex;
    align-items: center;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.settings-input {
    padding: 10px 14px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 13px;
    font-family: var(--font-main);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.settings-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: none;
}

.settings-hint {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.4;
}

.hint-indent {
    margin-left: 56px;
    display: block;
}

.policy-card {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.policy-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--glass-highlight-strong);
}

.policy-card.disabled {
    opacity: 0.75;
}

.gauge-pulse {
    animation: pulse 2s infinite;
}

.map-card {
    position: relative;
    overflow: hidden;
}

.map-box {
    height: 100%;
    width: 100%;
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
}

.overlay-dark {
    position: absolute;
    background: var(--overlay-backdrop);
    backdrop-filter: blur(4px);
    padding: 8px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--glass-highlight-strong);
}

.overlay-top-left { top: 20px; left: 20px; }
.overlay-top-right { top: 20px; right: 20px; }

.settings-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px 16px;
    background: var(--bg-depth);
    border-radius: var(--radius);
    margin-bottom: 8px;
}

.settings-toggle input {
    display: none;
}

.toggle-switch {
    width: 40px;
    height: 22px;
    background: var(--border);
    border-radius: 11px;
    position: relative;
    transition: background 0.2s;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
}

.settings-toggle input:checked+.toggle-switch {
    background: var(--success);
}

.settings-toggle input:checked+.toggle-switch::after {
    transform: translateX(18px);
}

.toggle-label {
    font-size: 13px;
    color: var(--text-muted);
}

.settings-toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-actions {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* Data Management Cards */
.data-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.data-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s;
}

.data-card:hover {
    border-color: var(--primary);
}

.data-card-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-glow);
    border-radius: var(--radius-lg);
}

.data-card.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.data-card-content {
    flex: 1;
}

.data-card-content h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.data-card-content p {
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
}

.danger-zone {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--danger);
}

/* System Info Grid */
.system-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.system-item {
    padding: 16px;
    background: var(--bg-depth);
    border-radius: var(--radius);
}

.system-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.system-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.settings-error {
    padding: 40px;
    text-align: center;
    color: var(--danger);
    background: var(--status-danger-bg);
    border-radius: var(--radius-lg);
}

/* Slide up animation for toasts */
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 900px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .data-cards {
        grid-template-columns: 1fr;
    }
}

/* Module Config Page */
.module-config-page {
    max-width: 900px;
}

.page-header {
    margin-bottom: 24px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-dim);
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--primary);
}

.module-info-card {
    padding: 24px;
    margin-bottom: 24px;
}

.module-info-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.module-info-icon {
    font-size: 48px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-glow);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.module-info-details {
    flex: 1;
}

.module-info-details h1 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-main);
}

.module-info-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tier-badge {
    font-size: 10px;
    padding: 3px 10px;
    background: var(--primary);
    color: white;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.meta-tag {
    font-size: 10px;
    padding: 3px 10px;
    background: var(--bg-depth);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.module-info-details p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

.module-info-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.toggle-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.action-bar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 0;
    margin-top: 24px;
    border-top: 1px solid var(--border);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

/* Config Sections - Clean Style (inside card) */
.config-section {
    padding: 0 0 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.config-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

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

.config-body {
    margin-bottom: 32px;
}

.config-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}

.config-section h3 {
    margin: 0 0 20px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
}

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

.config-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.config-field>label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.config-input {
    padding: 10px 14px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 13px;
    font-family: var(--font-main);
}

.config-input:focus {
    outline: none;
    border-color: var(--primary);
}

.config-textarea {
    width: 100%;
    padding: 12px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 13px;
    font-family: var(--font-main);
    resize: vertical;
}

.config-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px 16px;
    background: var(--bg-depth);
    border-radius: var(--radius);
}

.config-toggle input {
    display: none;
}

.config-hint {
    font-size: 11px;
    color: var(--text-dim);
}

.config-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

/* IP Management Layout */
.ip-management {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ip-column {
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.ip-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.ip-column-header.allow {
    color: var(--success);
}

.ip-column-header.block {
    color: var(--danger);
}

.ip-badge {
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    font-size: 11px;
}

.ip-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.ip-list-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.ip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-family: var(--font-main);
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}

.ip-row:last-child {
    border-bottom: none;
}

.ip-row.allow span:first-child {
    color: var(--success);
}

.ip-row.block span:first-child {
    color: var(--danger);
}

.ip-row button {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 16px;
}

.ip-row button:hover {
    color: var(--danger);
}

/* Geo Layout */
.geo-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.geo-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.geo-selector>label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.geo-quick-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--text-dim);
}

/* Rules Table */
.rules-table {
    width: 100%;
    border-collapse: collapse;
}

.rules-table th,
.rules-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

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

.rules-table tr.disabled {
    opacity: 0.5;
}

.status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.status-badge.enabled {
    color: var(--text-main);
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
}

.status-badge.disabled {
    color: var(--text-dim);
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
}

.rule-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.rule-actions .btn-sm {
    padding: 6px 10px;
    font-size: 14px;
}

.btn-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
}

/* Dashboard Tabs */
.dashboard-tabs {
    display: flex;
    gap: 8px;
    background: var(--bg-card);
    padding: 8px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.dashboard-tab {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-main);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.dashboard-tab:hover {
    background: var(--bg-depth);
    color: var(--text-main);
}

.dashboard-tab.active {
    background: var(--primary);
    color: white;
}

.dashboard-tab.active:hover {
    background: var(--primary);
}

/* Settings Horizontal Tabs */
.settings-horizontal {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.settings-tabs-bar {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: fit-content;
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-main);
    cursor: pointer;
    border-radius: var(--radius);
    transition: all 0.15s ease;
}

.settings-tab:hover {
    background: var(--glass-highlight-strong);
    color: var(--text-main);
}

.settings-tab.active {
    background: var(--primary);
    color: white;
}

.settings-tab .tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-tab .tab-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-content {
    transition: opacity 0.15s ease;
}

.settings-panel-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

/* Modal Overlay & Dialog */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.15s ease;
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 450px;
    max-height: 90vh;
    overflow: auto;
    animation: slideUp 0.2s ease;
}

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

.modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-main);
}

.modal-body {
    padding: 20px;
}

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

/* Status Badges */
.status-badge {
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

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

.status-danger {
    background: var(--status-danger-bg);
    color: var(--danger);
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ========================================
   UI POLISH - TOAST NOTIFICATIONS
======================================== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px var(--overlay-backdrop);
    min-width: 280px;
    max-width: 400px;
    animation: slideInRight 0.3s ease;
}

.toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
    font-size: 13px;
    color: var(--text-main);
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}

.toast-close:hover {
    color: var(--text-main);
}

.toast.toast-success {
    border-left: 3px solid var(--success);
}

.toast.toast-error {
    border-left: 3px solid var(--danger);
}

.toast.toast-info {
    border-left: 3px solid var(--primary);
}

.toast.toast-warning {
    border-left: 3px solid var(--warning);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ========================================
   UI POLISH - IMPROVED BUTTONS
======================================== */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--glass-highlight-strong);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.btn:active::after {
    width: 200px;
    height: 200px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   UI POLISH - CARD ENHANCEMENTS
======================================== */
.card {
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.card:hover {
    border-color: var(--border-highlight);
}

.card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--overlay-backdrop);
}

/* ========================================
   UI POLISH - LOADING STATES & SKELETONS
======================================== */
.skeleton {
    background: linear-gradient(90deg, var(--skeleton-from, var(--bg-depth, #0f1115)) 25%, var(--skeleton-mid, var(--bg-card-hover, #1b1f25)) 50%, var(--skeleton-to, var(--bg-depth, #0f1115)) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}

[data-theme="light"] .skeleton {
    background: linear-gradient(90deg, var(--skeleton-from, #edf2f7) 25%, var(--skeleton-mid, #f8fafc) 50%, var(--skeleton-to, #edf2f7) 75%);
    background-size: 200% 100%;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Metric strip skeleton */
.skeleton-metric-val {
    width: 72px;
    height: 28px;
    border-radius: 6px;
    display: block;
}

.skeleton-metric-sub {
    width: 92px;
    height: 12px;
    border-radius: 4px;
    display: block;
    margin-top: 4px;
}

/* Skeleton text, badge, bar */
.skeleton-text {
    height: 13px;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}

.skeleton-title {
    height: 16px;
    border-radius: 4px;
    display: block;
    margin-bottom: 8px;
}

.skeleton-badge {
    height: 20px;
    border-radius: 999px;
    display: inline-block;
}

.skeleton-bar {
    height: 6px;
    border-radius: 999px;
    display: block;
}

/* Chart skeleton */
.skeleton-chart-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 240px;
    padding: 20px 16px 12px;
    box-sizing: border-box;
    justify-content: flex-end;
    gap: 16px;
}

.skeleton-chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    height: 170px;
    width: 100%;
    padding: 0 4px;
    border-bottom: 1px dashed var(--waf-dashboard-soft-line, rgba(255, 255, 255, 0.08));
}

.skeleton-chart-col {
    flex: 1;
    border-radius: 4px 4px 0 0;
    min-width: 8px;
    max-width: 32px;
    opacity: 0.85;
}

.skeleton-chart-axis {
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
    width: 100%;
}

/* Breakdown rows skeleton */
.skeleton-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 0;
    width: 100%;
}

.skeleton-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
}

.skeleton-breakdown-label {
    flex: 0 0 35%;
    min-width: 0;
}

.skeleton-breakdown-track {
    flex: 1 1 auto;
    min-width: 0;
}

.skeleton-breakdown-count {
    flex: 0 0 auto;
    text-align: right;
}

/* Table rows skeleton */
.skeleton-table-row td {
    padding: 12px 14px !important;
}

.skeleton-table-row td .skeleton {
    vertical-align: middle;
}

/* Analytic card skeleton */
.skeleton-analytic-card {
    border: 1px solid var(--waf-dashboard-line, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-lg, 6px);
    background: var(--operator-surface, var(--bg-card, #171a1f));
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ========================================
   UI POLISH - FORM IMPROVEMENTS
======================================== */
.settings-input {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.settings-input:focus {
    border-color: var(--primary);
    box-shadow: none;
}

.settings-input::placeholder {
    color: var(--text-dim);
}

/* ========================================
   UI POLISH - TABLE IMPROVEMENTS
======================================== */
tbody tr {
    transition: background 0.1s ease;
}

tbody tr:hover {
    background: var(--primary-glow);
}

/* ========================================
   UI POLISH - SCROLLBAR
======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-depth);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* ========================================
   UI POLISH - EMPTY STATES
======================================== */
.empty-state {
    text-align: center;
    padding: 60px 40px;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.empty-state h3 {
    margin: 0 0 8px;
    color: var(--text-main);
    border: none;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
}

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

/* ========================================
   UI POLISH - PULSE ANIMATION FOR STATUS
======================================== */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    position: relative;
}

.pulse-dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ========================================
   ADVANCED UI - DATA VISUALIZATION
======================================== */
.metric-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    opacity: 0.5;
}

.metric-card.success::before {
    background: var(--success);
}

.metric-card.danger::before {
    background: var(--danger);
}

.metric-card.warning::before {
    background: var(--warning);
}

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

.metric-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

.metric-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: var(--radius-lg);
    font-weight: 500;
}

.metric-trend.up {
    background: var(--status-success-bg);
    color: var(--success);
}

.metric-trend.down {
    background: var(--status-danger-bg);
    color: var(--danger);
}

/* ========================================
   ADVANCED UI - TABLES
======================================== */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    background: var(--bg-depth);
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

.data-table tr:hover td {
    background: var(--bg-card-hover);
}

.data-table tr:last-child td {
    border-bottom: none;
}

/* ========================================
   ADVANCED UI - BADGES & TAGS
======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--radius-sm, 2px);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-success {
    background: var(--status-success-bg);
    color: var(--success);
}

.badge-danger {
    background: var(--status-danger-bg);
    color: var(--danger);
}

.badge-warning {
    background: rgba(234, 179, 8, 0.12);
    color: var(--warning);
}

.badge-info {
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary);
}

.badge-neutral {
    background: var(--bg-card-hover);
    color: var(--text-muted);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: var(--radius-sm, 2px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-main);
}

/* ========================================
   ADVANCED UI - HEADER BAR
======================================== */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.page-header-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

.page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.content-fade {
    transition: opacity 0.15s ease;
}

.content-fade.is-faded {
    opacity: 0;
}

.is-open {
    display: block;
}

.is-faded {
    opacity: 0.5;
}

.is-interactive {
    pointer-events: auto;
}

.about-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

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

.about-label {
    color: var(--text-muted);
    font-size: 13px;
}

.about-value {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    text-align: right;
}

.about-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-depth);
    border-radius: var(--radius);
    color: var(--text-main);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.15s ease;
}

.about-link:hover {
    background: var(--primary-glow);
    color: var(--primary);
}

.about-link svg {
    opacity: 0.7;
}

/* Enhanced About Page Styles */
.about-hero-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--brand-orange);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.about-brand-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.about-brand-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
}

.about-brand-logo svg {
    width: 100%;
    height: 100%;
}

.about-brand-text h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 4px;
    line-height: 1.2;
}

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

.about-brand-sub strong {
    color: #ff832b;
    font-weight: 600;
}

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

.about-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-main);
}

.about-tag.accent {
    border-color: rgba(var(--brand-orange-rgb), 0.4);
    background: var(--primary-glow);
    color: var(--brand-orange);
    font-weight: 500;
}

.about-tag.success {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.08);
    color: #4ade80;
}

.about-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    display: inline-block;
}

.about-mission-box {
    padding: 14px 18px;
    background: var(--bg-depth);
    border-left: 3px solid var(--brand-orange);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.about-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.about-card-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.about-header-icon {
    color: var(--brand-orange);
    display: inline-flex;
}

.about-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.15s ease;
}

.about-copy-btn:hover {
    background: var(--bg-interactive);
    border-color: var(--border-strong);
    color: var(--primary);
}

.about-foundation-card {
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 12px;
    display: flex;
    gap: 14px;
    transition: border-color 0.15s ease;
}

.about-foundation-card:hover {
    border-color: var(--border-strong);
}

.about-foundation-icon {
    color: var(--brand-orange);
    flex-shrink: 0;
    margin-top: 2px;
}

.about-foundation-content h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 4px;
}

.about-foundation-content p {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}

.about-product-card {
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    transition: all 0.15s ease;
}

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

.about-product-card.active-instrument {
    border-color: rgba(var(--brand-orange-rgb), 0.4);
    background: color-mix(in srgb, var(--primary) 4%, var(--bg-depth));
}

.about-product-main {
    flex: 1;
}

.about-product-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.about-product-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.about-product-role {
    font-size: 12px;
    color: var(--brand-orange);
    font-weight: 500;
}

.about-product-desc {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}

.about-product-tag {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--font-mono);
}

.about-product-tag.current {
    background: var(--primary-glow);
    border-color: rgba(var(--brand-orange-rgb), 0.3);
    color: var(--brand-orange);
}

.about-arch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.about-arch-item {
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.about-arch-label {
    font-size: 11px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.about-arch-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 2px;
}

.about-arch-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.security-nav {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    border: 1px solid var(--border);
}

.security-nav-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.security-nav-tab:hover {
    color: var(--text-main);
    background: var(--glass-highlight);
}

.security-nav-tab.active {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 1px 3px var(--overlay-backdrop);
}

.security-nav-tab svg {
    opacity: 0.7;
}

.security-nav-tab.active svg {
    opacity: 1;
    stroke: var(--primary);
}

/* ========================================
   ADVANCED UI - SPLIT PANELS
======================================== */
.split-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.split-panel-third {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
}

/* ========================================
   ADVANCED UI - STAT RING
======================================== */
.stat-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(var(--primary) calc(var(--percent) * 3.6deg), var(--bg-depth) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.stat-ring::before {
    content: '';
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-card);
}

.stat-ring-value {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-main);
}

/* ========================================
   ADVANCED UI - PROGRESS BAR
======================================== */
.progress-bar {
    height: 6px;
    background: var(--bg-depth);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-fill.success {
    background: var(--success);
}

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

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

/* ========================================
   ADVANCED UI - ICON BUTTONS
======================================== */
.icon-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.icon-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-main);
}

.icon-btn svg {
    width: 16px;
    height: 16px;
}

/* ========================================
   ADVANCED UI - DROPDOWN
======================================== */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-normal);
}

.dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-main);
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* ========================================
   ADVANCED UI - TABS
======================================== */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

.tab {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all var(--transition-fast);
}

.tab:hover {
    color: var(--text-main);
}

.tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* WAF Core: app-aligned polish (tabs/buttons only) */
.section-core-shell {
    display: block;
}

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

.section-core-tabs {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-depth);
    overflow-x: auto;
}

.section-core-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid var(--border-subtle);
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.section-core-tab:last-child {
    border-right: 0;
}

.section-core-tab:hover {
    background: var(--bg-elevated);
    color: var(--text-main);
}

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

.section-core-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
}

.section-core-content {
    padding: 16px;
}

.section-core-shell .btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.1px;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}

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

.section-core-shell .btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.section-core-shell .btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* WAF analytics dashboard */
.security-analytics-shell {
    display: block;
}

.security-explorer-filter-shell {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.security-cloudflare-page {
    background: #ffffff;
    color: #111827;
    min-height: calc(100vh - 72px);
    padding: 0 12px 28px;
}

.security-cloudflare-page :where(.text-note, .text-muted, .security-refresh-state) {
    color: #4b5563 !important;
}

.security-cf-pager,
.security-cf-topbar {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d1d5db;
}

.security-cf-pager {
    gap: 6px;
    min-height: 40px;
    color: #374151;
    font-size: 14px;
}

.security-cf-topbar {
    justify-content: space-between;
    gap: 16px;
    min-height: 66px;
}

.security-cf-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.security-cf-add-filter,
.security-cf-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    border-radius: 4px;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
}

.security-cf-add-filter {
    padding: 0 10px;
    border: 1px solid var(--primary);
}

.security-cf-link {
    padding: 0;
    border: 0;
}

.security-cf-time-select {
    height: 34px;
    min-width: 178px;
    padding: 0 34px 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #ffffff;
    color: #111827;
    font: 14px var(--font-main);
}

.security-cf-request-activity {
    padding-top: 16px;
}

.security-cf-request-activity h2,
.security-cf-section-title {
    margin: 0 0 20px;
    color: #111827;
    font-size: 20px;
    font-weight: 700;
}

.security-cf-tabs {
    display: inline-flex;
    align-items: center;
    margin-bottom: 34px;
    border: 1px solid #b7bdc4;
    border-radius: 4px;
    overflow: hidden;
}

.security-cf-tabs button {
    min-height: 38px;
    padding: 0 11px;
    border: 0;
    border-right: 1px solid #b7bdc4;
    background: #ffffff;
    color: #111827;
    cursor: default;
    font: 14px var(--font-main);
}

.security-cf-tabs button:last-child {
    border-right: 0;
}

.security-cf-tabs button.is-active {
    color: var(--primary);
    font-weight: 700;
}

.security-cf-chart-copy h3 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
}

.security-cf-chart-copy p {
    margin: 0 0 18px;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.45;
}

.security-cf-group-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
}

.security-cf-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 34px;
}

.security-cf-metric-strip > div {
    min-height: 70px;
    padding: 4px 16px;
    border-left: 1px solid #d1d5db;
}

.security-cf-metric-strip > div:first-child {
    border-left: 0;
    padding-left: 0;
}

.security-cf-metric-strip span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111827;
    font-size: 14px;
}

.security-cf-metric-strip i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--control-accent);
}

.security-cf-metric-strip i.mitigated {
    background: var(--brand-orange);
}

.security-cf-metric-strip i.served {
    background: #155e75;
}

.security-cf-metric-strip i.origin {
    background: var(--control-accent);
}

.security-cf-metric-strip strong {
    display: block;
    margin-top: 5px;
    color: #000000;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.security-events-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.security-events-filter-summary-line {
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-events-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.security-events-filter-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 66px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.security-events-filter-toolbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
}

.security-create-rule-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.security-create-rule-link:hover,
.security-create-rule-link:focus-visible {
    text-decoration: underline;
    outline: 0;
}

.security-time-select-shell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 8px 0 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.security-toolbar-time-select {
    width: 136px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: 13px var(--font-main);
    font-weight: 600;
}

.security-time-zone {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.edge-period-select-shell {
    padding-left: 10px;
}

.edge-chart-head {
    min-height: 58px;
}

.edge-chart-head > div:first-child {
    min-width: 0;
}

.edge-chart-head .card-title-sm {
    margin: 2px 0 0;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.2;
    text-transform: none;
}

.edge-chart-head .security-events-tools {
    gap: 8px;
}

.edge-chart-head .security-stat-card-expand {
    position: static;
    flex: 0 0 auto;
    opacity: 1;
}

.edge-chart-head .security-stat-card-expand:disabled {
    cursor: default;
    opacity: 0.42;
}

.edge-graph-card {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0;
    overflow: hidden;
}

.edge-graph-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.edge-graph-card-head strong {
    font-size: 13px;
}

.edge-graph-body {
    position: relative;
    min-height: 0;
    padding: 14px 18px 18px;
}

.edge-chart-grid {
    grid-template-columns: minmax(0, 2.25fr) minmax(360px, 0.85fr);
    align-items: stretch;
}

.edge-timeline-card {
    min-height: 460px;
}

.edge-timeline-body {
    flex: 1 1 auto;
    min-height: 388px;
}

.edge-side-charts {
    display: flex !important;
    flex-direction: column;
    gap: 24px !important;
    min-width: 0;
}

.edge-side-charts > .dashboard-widget-card {
    flex: 1 1 0;
    min-height: 218px;
}

.edge-side-charts > .edge-graph-card {
    flex: 1 1 0;
    min-height: 218px;
}

.edge-side-chart-body {
    flex: 1 1 auto;
    min-height: 150px;
}

.edge-modal-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.edge-modal-row span {
    display: grid;
    gap: 4px;
}

.edge-modal-row span strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.edge-modal-row span small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.edge-analysis-card .security-stat-card-head {
    position: relative;
}

.edge-analysis-card .security-stat-card-head span {
    display: block;
    margin-top: 4px;
    padding-right: 50px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.edge-aggregate-list {
    gap: 2px;
}

.bot-period-select-shell {
    padding-left: 10px;
}

.security-stat-card.bot-graph-card {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0;
    overflow: hidden;
}

.bot-graph-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bot-graph-card-head strong {
    font-size: 13px;
}

.bot-graph-body {
    position: relative;
    min-height: 0;
    padding: 14px 18px 18px;
}

.bot-chart-grid {
    grid-template-columns: minmax(0, 2.25fr) minmax(360px, 0.85fr);
    align-items: stretch;
}

.security-stat-card.bot-timeline-card {
    height: 460px;
    min-height: 460px;
}

.bot-timeline-body {
    flex: 1 1 auto;
    height: 388px;
    min-height: 388px;
}

.bot-timeline-body canvas,
.bot-side-chart-body canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.bot-side-charts {
    display: flex !important;
    flex-direction: column;
    gap: 24px !important;
    min-width: 0;
}

.bot-side-charts > .bot-graph-card {
    flex: 1 1 0;
    height: auto;
    min-height: 218px;
}

.bot-side-chart-body {
    flex: 1 1 auto;
    min-height: 150px;
}

.bot-analysis-card .security-stat-card-head,
.bot-intelligence-card .security-stat-card-head,
.bot-watch-card .security-stat-card-head {
    position: relative;
}

.bot-aggregate-list {
    gap: 2px;
}

.bot-aggregate-empty {
    min-height: 174px;
}

.bot-modal-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.bot-modal-row span {
    display: grid;
    gap: 4px;
}

.bot-modal-row span strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.bot-modal-row span small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.bot-intelligence-card,
.bot-watch-card {
    height: auto;
    min-height: 260px;
}

.bot-score-meter-row {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
}

.bot-score-meter-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
}

.bot-score-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-depth);
}

.bot-score-meter > div {
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.security-flow-period-select-shell {
    padding-left: 10px;
}

.security-stat-card.security-flow-graph-card {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0;
    overflow: hidden;
}

.security-flow-graph-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.security-flow-graph-card-head strong {
    font-size: 13px;
}

.security-flow-graph-body {
    position: relative;
    min-height: 0;
    padding: 14px 18px 18px;
}

.security-flow-chart-grid {
    grid-template-columns: minmax(0, 2.25fr) minmax(360px, 0.85fr);
    align-items: stretch;
}

.security-stat-card.security-flow-timeline-card {
    height: 460px;
    min-height: 460px;
}

.security-flow-timeline-body {
    flex: 1 1 auto;
    height: 388px;
    min-height: 388px;
}

.security-flow-timeline-body canvas,
.security-flow-side-chart-body canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.security-flow-side-charts {
    display: flex !important;
    flex-direction: column;
    gap: 24px !important;
    min-width: 0;
}

.security-flow-side-charts > .security-flow-graph-card {
    flex: 1 1 0;
    height: auto;
    min-height: 218px;
}

.security-flow-side-chart-body {
    flex: 1 1 auto;
    min-height: 150px;
}

.security-flow-analysis-card .security-stat-card-head {
    position: relative;
}

.security-flow-aggregate-list {
    gap: 2px;
}

.security-flow-aggregate-empty {
    min-height: 174px;
}

.security-flow-modal-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.security-flow-modal-row span {
    display: grid;
    gap: 4px;
}

.security-flow-modal-row span strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.security-flow-modal-row span small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.apisec-period-select-shell {
    padding-left: 10px;
}

.security-stat-card.apisec-graph-card {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0;
    overflow: hidden;
}

.apisec-graph-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.apisec-graph-card-head strong {
    font-size: 13px;
}

.apisec-graph-body {
    position: relative;
    min-height: 0;
    padding: 14px 18px 18px;
}

.apisec-chart-grid {
    grid-template-columns: minmax(0, 2.25fr) minmax(360px, 0.85fr);
    align-items: stretch;
}

.security-stat-card.apisec-timeline-card {
    height: 460px;
    min-height: 460px;
}

.apisec-timeline-body {
    flex: 1 1 auto;
    height: 388px;
    min-height: 388px;
}

.apisec-timeline-body canvas,
.apisec-side-chart-body canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.apisec-side-charts {
    display: flex !important;
    flex-direction: column;
    gap: 24px !important;
    min-width: 0;
}

.apisec-side-charts > .apisec-graph-card {
    flex: 1 1 0;
    height: auto;
    min-height: 218px;
}

.apisec-side-chart-body {
    flex: 1 1 auto;
    min-height: 150px;
}

.apisec-analysis-card .security-stat-card-head {
    position: relative;
}

.apisec-aggregate-list {
    gap: 2px;
}

.apisec-aggregate-empty {
    min-height: 174px;
}

.apisec-modal-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.apisec-modal-row span {
    display: grid;
    gap: 4px;
}

.apisec-modal-row span strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.apisec-modal-row span small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.httpsec-period-select-shell {
    padding-left: 10px;
}

.security-stat-card.httpsec-graph-card {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0;
    overflow: hidden;
}

.httpsec-graph-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.httpsec-graph-card-head strong {
    font-size: 13px;
}

.httpsec-graph-body {
    position: relative;
    min-height: 0;
    padding: 14px 18px 18px;
}

.httpsec-chart-grid {
    grid-template-columns: minmax(0, 2.25fr) minmax(360px, 0.85fr);
    align-items: stretch;
}

.security-stat-card.httpsec-timeline-card {
    height: 460px;
    min-height: 460px;
}

.httpsec-timeline-body {
    flex: 1 1 auto;
    height: 388px;
    min-height: 388px;
}

.httpsec-timeline-body canvas,
.httpsec-side-chart-body canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.httpsec-side-charts {
    display: flex !important;
    flex-direction: column;
    gap: 24px !important;
    min-width: 0;
}

.httpsec-side-charts > .httpsec-graph-card {
    flex: 1 1 0;
    height: auto;
    min-height: 218px;
}

.httpsec-side-chart-body {
    flex: 1 1 auto;
    min-height: 150px;
}

.httpsec-analysis-card .security-stat-card-head {
    position: relative;
}

.httpsec-aggregate-list {
    gap: 2px;
}

.httpsec-aggregate-empty {
    min-height: 174px;
}

.httpsec-modal-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.httpsec-modal-row span {
    display: grid;
    gap: 4px;
}

.httpsec-modal-row span strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.httpsec-modal-row span small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.edge-aggregate-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    border: 0;
    background: transparent;
    cursor: default;
    font: inherit;
}

.edge-aggregate-row > span {
    display: grid;
    gap: 3px;
}

.edge-aggregate-row > span > span {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.edge-aggregate-row small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge-aggregate-row em {
    color: var(--text-muted);
    font-size: 11px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.edge-aggregate-empty {
    min-height: 174px;
}

.security-filter-builder-shell {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
}

.security-filter-builder-popover {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    width: min(600px, calc(100vw - 48px));
    padding: 16px;
    border: 1px solid #fff;
    border-radius: 2px;
    background: var(--bg-card);
    box-shadow: var(--shadow-menu);
}

.security-filter-builder-title {
    margin-bottom: 12px;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 700;
}

.security-filter-builder-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(170px, 0.9fr) minmax(220px, 1.7fr);
    gap: 8px;
    align-items: center;
}

.security-filter-field-select,
.security-filter-operator-select,
.security-filter-builder-value {
    width: 100%;
    height: 40px;
    min-width: 0;
    border: 1px solid #fff;
    border-radius: 2px;
    background: var(--bg-depth);
    color: var(--text-main);
    font: 13px var(--font-main);
}

.security-filter-field-select:focus,
.security-filter-field-select:focus-visible,
.security-filter-operator-select:focus,
.security-filter-operator-select:focus-visible,
.security-filter-builder-value:focus,
.security-filter-builder-value:focus-visible {
    border-color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, #fff 14%, transparent);
    outline: 0;
}

.security-filter-field-select,
.security-filter-operator-select {
    padding: 0 10px;
}

.security-filter-builder-value {
    padding: 0 12px;
}

.security-filter-operator-select:disabled {
    opacity: 0.82;
    cursor: default;
}

.security-filter-builder-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 28px;
}

.security-filter-builder-actions .btn,
.security-filter-builder-actions .btn-outline {
    border-color: #fff;
    border-radius: 2px;
    background: var(--bg-card);
    color: #fff;
}

.security-filter-builder-actions .btn:hover,
.security-filter-builder-actions .btn:focus-visible,
.security-filter-builder-actions .btn-outline:hover,
.security-filter-builder-actions .btn-outline:focus-visible {
    background: var(--primary-muted);
    border-color: #fff;
    color: #fff;
    outline: 0;
}

[data-theme="light"] .security-filter-builder-popover,
[data-theme="light"] .security-filter-field-select,
[data-theme="light"] .security-filter-operator-select,
[data-theme="light"] .security-filter-builder-value,
[data-theme="light"] .security-filter-builder-actions .btn,
[data-theme="light"] .security-filter-builder-actions .btn-outline {
    border-color: var(--primary);
    color: #0f172a;
}

[data-theme="light"] .security-filter-field-select:focus,
[data-theme="light"] .security-filter-field-select:focus-visible,
[data-theme="light"] .security-filter-operator-select:focus,
[data-theme="light"] .security-filter-operator-select:focus-visible,
[data-theme="light"] .security-filter-builder-value:focus,
[data-theme="light"] .security-filter-builder-value:focus-visible,
[data-theme="light"] .security-filter-builder-actions .btn:hover,
[data-theme="light"] .security-filter-builder-actions .btn:focus-visible,
[data-theme="light"] .security-filter-builder-actions .btn-outline:hover,
[data-theme="light"] .security-filter-builder-actions .btn-outline:focus-visible {
    border-color: var(--primary);
    color: #0f172a;
}

.security-filter-popover {
    box-shadow: var(--shadow-menu);
}

.security-cloudflare-page .security-filter-popover {
    border-color: #d1d5db;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
}

.security-cloudflare-page .security-analytics-shell,
.security-cloudflare-page .dashboard-widget-card,
.security-cloudflare-page .card,
.security-cloudflare-page .card-flush {
    background: #ffffff;
    border-color: #d1d5db;
    box-shadow: none;
}

.security-cloudflare-page .dashboard-widget-head,
.security-cloudflare-page .card-section {
    background: #ffffff;
    border-bottom-color: #d1d5db;
}

.security-cloudflare-page .table,
.security-cloudflare-page .table th,
.security-cloudflare-page .table td {
    color: #111827;
    border-color: #e5e7eb;
}

.security-cloudflare-page .security-events-table tr[data-security-event-id]:hover {
    background: #f8fafc;
}

.security-cloudflare-page .security-active-filters {
    padding: 0;
}

.security-cloudflare-page .security-filter-summary {
    color: #4b5563;
}

.security-cloudflare-page .security-filter-chip {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

.security-cloudflare-page .security-filter-chip strong {
    color: #6b7280;
}

.security-events-filter-command .security-command-main {
    display: grid;
    grid-template-columns: minmax(120px, 150px) minmax(140px, 180px) minmax(130px, 170px) minmax(130px, 1fr) minmax(150px, 1.2fr) minmax(150px, 1.2fr);
    gap: 10px;
}

.security-events-filter-command .security-command-main > *,
.security-events-filter-command .security-command-actions > * {
    min-width: 0;
}

.security-events-filter-command .security-command-main input,
.security-events-filter-command .security-command-main select,
.security-events-filter-command .security-command-actions select {
    width: 100%;
}

.security-advanced-filter-details {
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 68%, var(--bg-depth));
}

.security-advanced-filter-details summary {
    padding: 10px 14px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.security-explorer-filter-head,
.security-explorer-filter-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.security-explorer-filter-head {
    padding-bottom: 14px;
}

.security-explorer-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.security-explorer-filter-body {
    flex-direction: column;
    padding-top: 0;
}

.security-explorer-filter-primary,
.security-explorer-filter-advanced {
    width: 100%;
    display: grid;
    gap: 10px;
}

.security-explorer-filter-primary {
    grid-template-columns: minmax(130px, 150px) minmax(140px, 180px) minmax(140px, 170px) minmax(150px, 1fr) minmax(180px, 1.3fr) minmax(180px, 1.3fr);
}

.security-explorer-filter-advanced {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.security-global-filters {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(130px, 180px) minmax(180px, 1fr) minmax(220px, 1.4fr) auto;
    gap: 12px;
    align-items: center;
}

.security-events-page-head {
    align-items: flex-start;
}

.security-events-head-tools {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.security-event-filter-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(118px, 1fr));
    gap: 10px;
    align-items: center;
}

.security-events-explorer {
    display: block;
}

.security-events-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

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

.security-events-inline-warning {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
}

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

.security-events-inline-warning strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.security-events-result-title {
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
}

.security-events-summary-note {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 550;
}

.security-events-summary-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(126px, 1fr));
    align-items: center;
    align-self: center;
    gap: 8px;
}

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

.security-events-summary-metric strong {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.security-statistics-deck {
    display: grid;
    gap: 12px;
}

.security-explorer-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 12px;
    width: 100%;
}

.security-statistics-extra-card {
    display: none;
}

.security-statistics-deck.is-expanded .security-statistics-extra-card {
    display: block;
}

.security-statistics-show-more {
    width: 100%;
    min-height: 42px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--primary);
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 800;
}

.security-statistics-show-more:hover,
.security-statistics-show-more:focus-visible {
    border-color: var(--primary);
    background: var(--primary-muted);
    outline: 0;
}

.security-explorer-summary-card {
    position: relative;
    min-width: 0;
    min-height: 112px;
    height: 100%;
    padding: 16px 16px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 78%),
        var(--bg-card);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    overflow: hidden;
}

.security-explorer-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--primary);
    opacity: 0.9;
}

.security-explorer-summary-card.has-filter {
    padding-right: 80px;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.security-explorer-summary-card.has-filter:hover,
.security-explorer-summary-card.has-filter:focus-within {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.security-explorer-summary-card.primary {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
}

.security-explorer-summary-card.primary::before {
    background: var(--primary);
}

.security-explorer-summary-card.danger {
    border-color: var(--status-danger-border);
}

.security-explorer-summary-card.danger::before {
    background: var(--danger);
}

.security-explorer-summary-card.warning {
    border-color: var(--status-warning-border);
}

.security-explorer-summary-card.warning::before {
    background: var(--warning);
}

.security-explorer-summary-card.success {
    border-color: var(--status-success-border);
}

.security-explorer-summary-card.success::before {
    background: var(--success);
}

.security-explorer-summary-card.info::before {
    background: var(--secondary);
}

.security-explorer-summary-card.edge-kpi-card {
    min-height: 118px;
    padding: 17px 16px 15px;
    border-color: var(--border);
    background: var(--bg-card);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.security-explorer-summary-card.edge-kpi-card::before {
    display: none;
}

.security-explorer-summary-card.edge-kpi-card.has-filter {
    padding-right: 82px;
}

.security-explorer-summary-card.edge-kpi-card.has-filter:hover,
.security-explorer-summary-card.edge-kpi-card.has-filter:focus-within {
    border-color: var(--border-strong);
    background: var(--bg-elevated);
    transform: translateY(-1px);
}

.edge-kpi-card .security-explorer-summary-value {
    color: var(--text-main) !important;
    font-size: 23px;
    font-weight: 750;
    letter-spacing: 0;
}

.edge-kpi-card .security-explorer-summary-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.edge-kpi-card .security-explorer-summary-sub {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.security-explorer-summary-value {
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.security-explorer-summary-label {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.security-explorer-summary-sub {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.security-events-context-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.security-stat-card {
    height: 260px;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.security-stat-card-head {
    min-height: 48px;
    padding-right: 50px;
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 78%),
        color-mix(in srgb, var(--bg-card) 82%, var(--bg-depth));
}

.security-stat-card-head strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
    font-size: 13px;
}

.security-stat-card-expand {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-depth);
    color: var(--text-muted);
    cursor: pointer;
}

.security-stat-card-expand:hover,
.security-stat-card-expand:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    outline: 0;
}

.security-flow-card {
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.security-cloudflare-page .security-flow-card {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #d1d5db;
    border-radius: 0;
    padding-bottom: 12px;
}

.security-flow-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 8px;
}

.security-flow-head h3 {
    margin: 4px 0;
    color: var(--text-main);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.security-flow-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.security-flow-legend {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.security-flow-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.security-flow-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

.security-flow-chart {
    color: var(--primary);
    width: 100%;
    min-width: 0;
    height: clamp(420px, 46vh, 560px);
    padding: 0 20px 14px;
}

.security-cloudflare-page .security-flow-chart {
    height: 320px;
    padding: 0;
}

.security-flow-chart svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.security-flow-grid line {
    stroke: var(--border);
    stroke-width: 1;
}

.security-cloudflare-page .security-flow-grid line {
    stroke: #d1d5db;
    stroke-opacity: 0.7;
}

.security-flow-area {
    fill: url(#securityTrafficArea);
    color: var(--primary);
}

.security-flow-line {
    fill: none;
    stroke: var(--primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.security-cloudflare-page .security-flow-line {
    stroke-width: 2.4;
}

.security-cloudflare-page .security-flow-line.mitigated {
    stroke: var(--brand-orange);
}

.security-cloudflare-page .security-flow-line.served {
    stroke: #0f4c5c;
}

.security-cloudflare-page .security-flow-line.origin {
    stroke: #2f7cf6;
}

.security-flow-points circle {
    fill: var(--bg-card);
    stroke: var(--primary);
    stroke-width: 2;
}

.security-cloudflare-page .security-flow-points circle {
    fill: #ffffff;
    stroke: #0f4c5c;
}

.security-flow-point {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.security-flow-points g:hover circle,
.security-flow-points g:focus-within circle {
    fill: var(--primary);
}

.security-flow-axis text {
    fill: var(--text-muted);
    font-size: 11px;
    text-anchor: middle;
}

.security-cloudflare-page .security-flow-axis text {
    fill: #4b5563;
}

.security-flow-y-axis text {
    fill: var(--text-muted);
    font-size: 11px;
    text-anchor: end;
}

.security-cloudflare-page .security-flow-y-axis text {
    fill: #4b5563;
}

.security-command-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 66px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.security-analytics-shell > .card.card-flush.mb-16:first-child {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.security-command-main,
.security-filter-row,
.security-advanced-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.security-command-main {
    flex: 1;
}

.security-command-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    padding-left: 0;
    border-left: 0;
}

.security-refresh-state {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.security-time-menu {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
    box-shadow: inset 0 0 0 1px var(--glass-highlight);
}

.security-time-option {
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.security-time-option:hover {
    color: var(--text-main);
    background: var(--bg-card);
}

.security-time-option.active {
    color: var(--text-main);
    background: var(--primary-muted);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
}

.security-advanced-filters {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--border);
    background: transparent;
}

.security-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 2px 0;
}

.security-filter-summary {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.security-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    max-width: 260px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
}

.security-filter-chip strong {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
}

.security-filter-chip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-right: -4px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.security-filter-chip-remove:hover,
.security-filter-chip-remove:focus-visible {
    background: color-mix(in srgb, var(--danger, #ef4444) 10%, transparent);
    color: var(--danger, #ef4444);
    outline: 0;
}

.security-filter-input {
    width: 120px;
}

.security-filter-path {
    width: 170px;
}

.security-filter-country {
    width: 86px;
}

.security-filter-score {
    width: 96px;
}

.security-aggregate-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.security-aggregate-list.is-compact {
    height: 190px;
    overflow: hidden;
    padding-top: 12px;
    padding-bottom: 12px;
}

.security-aggregate-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: 12px;
    width: 100%;
    min-height: 28px;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    color: inherit;
    text-align: left;
}

.security-aggregate-row:hover,
.security-aggregate-row:focus-visible {
    border-bottom-color: var(--border);
}

.security-aggregate-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
}

.security-aggregate-row strong {
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.security-inline-filter {
    color: inherit;
}

.security-filterable-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
}

.security-filterable-value > span {
    min-width: 0;
}

.security-hover-filter-btn.mini {
    position: static;
    flex: 0 0 auto;
    min-height: 20px;
    padding: 0 6px;
    font-size: 10px;
}

.security-request-cell {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.security-request-cell .security-inline-filter:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
}

.security-pill-filter {
    display: inline-flex;
    text-decoration: none !important;
}

.security-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.dashboard-kpi-card {
    position: relative;
    min-width: 0;
    min-height: 112px;
    height: 100%;
    padding: 16px 16px 14px;
    border-color: var(--border);
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 78%),
        var(--bg-card);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    overflow: hidden;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.dashboard-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--primary);
    opacity: 0.9;
}

.dashboard-kpi-card.danger {
    border-color: var(--status-danger-border);
}

.dashboard-kpi-card.danger::before {
    background: var(--danger);
}

.dashboard-kpi-card.warning {
    border-color: var(--status-warning-border);
}

.dashboard-kpi-card.warning::before {
    background: var(--warning);
}

.dashboard-kpi-card.success {
    border-color: var(--status-success-border);
}

.dashboard-kpi-card.success::before {
    background: var(--success);
}

.dashboard-kpi-card.secondary::before {
    background: var(--secondary);
}

.dashboard-kpi-card.is-clickable:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.dashboard-kpi-copy {
    min-width: 0;
}

.dashboard-kpi-icon {
    display: none;
}

.dashboard-kpi-value {
    font-family: var(--font-main);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.dashboard-kpi-label {
    color: var(--text-muted);
    font-weight: 700;
}

.dashboard-kpi-sub {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.dashboard-widget-card {
    border-color: var(--border);
    background: var(--bg-card);
}

.dashboard-widget-head {
    min-height: 50px;
    background: color-mix(in srgb, var(--bg-depth) 62%, transparent);
    border-bottom-color: var(--border);
}

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

.dashboard-empty-state {
    display: flex;
    min-height: 92px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    text-align: center;
}

.dashboard-empty-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-depth);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.dashboard-empty-title {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.dashboard-empty-detail {
    max-width: 420px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.security-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.security-events-tools,
.security-pagination,
.security-page-size {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.security-events-tools {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.security-page-size {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 600;
}

.security-event-count {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
}

.security-events-table tbody td {
    vertical-align: top;
}

.security-side-charts {
    grid-template-rows: repeat(2, minmax(210px, 1fr));
    align-content: stretch;
}

.security-side-charts > .dashboard-widget-card {
    min-height: 210px;
}

.security-side-charts > .dashboard-widget-card + .dashboard-widget-card {
    margin-top: 0;
}

.security-analytics-shell > .grid-2-wide,
.security-analytics-shell > .grid-3-wide,
.security-analytics-shell > .grid-4 {
    align-items: stretch;
}

.security-analytics-shell > .grid-3-wide > .card,
.security-analytics-shell > .grid-4 > .card {
    min-width: 0;
}

.security-health-banner {
    display: block;
}

.security-health-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.security-health-status.success {
    border-color: var(--status-success-border);
}

.security-health-status.warning {
    border-color: var(--status-warning-border);
}

.security-health-status.danger {
    border-color: var(--status-danger-border);
}

.security-health-status.muted {
    border-color: var(--border);
}

.security-timeline-list {
    display: grid;
    gap: 10px;
}

.security-timeline-row {
    display: grid;
    grid-template-columns: minmax(92px, 130px) minmax(120px, 1fr) auto minmax(120px, auto);
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.security-timeline-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.security-timeline-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.security-diagnostics {
    padding: 8px 14px 14px;
    overflow-y: auto;
}

.security-events-table tr[data-waf-event-id]:hover,
.security-events-table tr[data-security-event-id]:hover {
    background: var(--bg-card-hover);
}

.security-category-pill {
    margin: 0 4px 4px 0;
}

.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) !important;
}

.security-event-drawer.hidden {
    display: none !important;
}

.apisec-workflow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr) minmax(320px, 1.2fr);
    gap: 12px;
    margin: 0 0 16px;
}

.apisec-workflow-card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    padding: 14px;
}

.apisec-workflow-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.apisec-workflow-head h3 {
    margin: 2px 0 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}

.apisec-workflow-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.apisec-workflow-controls select,
.apisec-workflow-controls input {
    width: 100%;
}

.apisec-workflow-actions,
.apisec-template-grid,
.apisec-investigation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.apisec-workflow-note {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.apisec-rule-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.apisec-rule-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle);
}

.apisec-rule-row.is-disabled {
    opacity: 0.68;
}

.apisec-rule-row strong {
    display: block;
    color: var(--text-main);
    font-size: 13px;
}

.apisec-rule-row span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}

.apisec-rule-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.apisec-related-events {
    display: grid;
    gap: 8px;
}

.apisec-related-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}

.apisec-related-event:hover,
.apisec-related-event:focus-visible {
    border-color: var(--primary);
}

.apisec-related-event span,
.apisec-related-event em {
    color: var(--text-muted);
    font-size: 12px;
    font-style: normal;
}

.apisec-related-event em {
    grid-column: 2;
}

@media (max-width: 1180px) {
    .apisec-workflow-grid {
        grid-template-columns: 1fr;
    }

    .apisec-rule-row {
        grid-template-columns: 1fr;
    }

    .apisec-rule-row-actions {
        justify-content: flex-start;
    }
}

.security-statistics-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--overlay-backdrop);
}

.security-statistics-modal.hidden {
    display: none;
}

.security-statistics-modal-panel {
    width: min(820px, 100%);
    max-height: min(720px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.security-statistics-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.security-statistics-modal-head h3 {
    margin: 4px 0 0;
    color: var(--text-main);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
}

.security-statistics-modal-body {
    padding: 18px 22px 22px;
    overflow-y: auto;
    background: var(--bg-depth);
}

.security-statistics-modal-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.security-statistics-modal-summary span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-panel);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.security-statistics-modal-list {
    display: grid;
    gap: 8px;
}

.security-statistics-modal-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(76px, auto) auto;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 10px 10px 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-card);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-main) 4%, transparent);
}

.security-statistics-modal-value {
    min-width: 0;
}

.security-statistics-modal-value span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.security-statistics-modal-bar {
    position: relative;
    height: 4px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 70%, transparent);
}

.security-statistics-modal-bar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--stat-width, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 68%, #ffffff 18%));
}

.security-statistics-modal-metrics {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.security-statistics-modal-metrics strong {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.security-statistics-modal-metrics small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.security-statistics-modal-filter {
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-panel);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.security-statistics-modal-filter:hover,
.security-statistics-modal-filter:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
    color: var(--accent);
    outline: none;
}

@media (max-width: 640px) {
    .security-statistics-modal {
        padding: 12px;
    }

    .security-statistics-modal-head,
    .security-statistics-modal-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .security-statistics-modal-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .security-statistics-modal-filter {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.security-event-drawer-panel,
.security-event-inspector-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;
    background: var(--bg-card) !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 100000 !important;
}

.security-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.security-drawer-title {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 600;
}

.security-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}


.security-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.security-detail-item {
    padding: 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 0;
}

.security-detail-section {
    margin-top: 20px;
}

.security-detail-section h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.security-rule-chain {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.security-rule-chain-item {
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 1280px) {
    .security-cf-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
    }

    .security-cf-metric-strip > div:nth-child(3) {
        border-left: 0;
        padding-left: 0;
    }

    .security-explorer-summary-grid {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }

    .security-explorer-filter-primary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .security-events-filter-command .security-command-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .security-explorer-filter-advanced {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .security-global-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .security-event-filter-bar,
    .security-events-context-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .security-command-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .security-command-main {
        width: 100%;
    }

    .security-command-actions {
        white-space: normal;
        width: 100%;
        justify-content: flex-end;
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 960px) {
    .bot-chart-grid {
        grid-template-columns: 1fr;
    }

    .bot-side-charts {
        min-width: 0;
    }

    .security-flow-chart-grid {
        grid-template-columns: 1fr;
    }

    .security-flow-side-charts {
        min-width: 0;
    }

    .apisec-chart-grid {
        grid-template-columns: 1fr;
    }

    .apisec-side-charts {
        min-width: 0;
    }

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

    .httpsec-side-charts {
        min-width: 0;
    }

    .security-events-filter-command .security-command-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .security-cloudflare-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .security-cf-topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 0;
    }

    .security-cf-topbar-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .security-cf-link {
        min-height: 30px;
    }

    .security-cf-tabs {
        display: flex;
        width: 100%;
        overflow-x: auto;
    }

    .security-cf-tabs button {
        flex: 0 0 auto;
    }

    .security-cf-metric-strip {
        grid-template-columns: 1fr;
        margin-bottom: 22px;
    }

    .security-cf-metric-strip > div,
    .security-cf-metric-strip > div:nth-child(3) {
        min-height: 58px;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #d1d5db;
    }

    .security-cf-metric-strip > div:first-child {
        border-top: 0;
    }

    .security-flow-chart,
    .security-cloudflare-page .security-flow-chart {
        height: 250px;
    }

    .security-filter-builder-popover {
        width: 100%;
    }

    .security-filter-builder-row {
        grid-template-columns: 1fr;
    }

    .security-events-filter-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .security-events-filter-toolbar-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .security-events-summary-row {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .security-events-summary-metrics {
        grid-template-columns: 1fr;
    }

    .security-events-inline-warning,
    .security-events-inline-warning strong {
        width: 100%;
        white-space: normal;
    }

    .security-time-select-shell {
        width: 100%;
    }

    .security-toolbar-time-select {
        flex: 1;
        width: auto;
    }

    .security-explorer-filter-head,
    .security-events-page-head,
    .security-events-toolbar,
    .security-events-summary-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .security-explorer-filter-actions,
    .security-events-head-tools,
    .security-events-toolbar-actions,
    .security-events-summary-metrics {
        justify-content: flex-start;
        width: 100%;
    }

    .security-flow-head {
        flex-direction: column;
    }

    .security-explorer-summary-grid,
    .security-events-filter-command .security-command-main,
    .security-explorer-filter-primary,
    .security-explorer-filter-advanced,
    .security-kpi-grid,
    .security-detail-grid,
    .security-event-filter-bar,
    .security-events-context-grid {
        grid-template-columns: 1fr;
    }

    .security-events-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .security-events-tools {
        justify-content: flex-start;
        width: 100%;
    }

    .security-time-menu {
        width: 100%;
        overflow-x: auto;
    }

    .security-command-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .security-filter-chip {
        max-width: 100%;
    }

    .security-global-filters,
    .security-timeline-row {
        grid-template-columns: 1fr;
    }

}

.section-core-shell .btn-outline,
.section-core-shell .btn-ghost {
    border-color: var(--border-strong);
}

.section-core-shell .btn-outline:hover,
.section-core-shell .btn-ghost:hover {
    background: var(--bg-elevated);
    color: var(--text-main);
}

.section-core-shell .card:hover {
    background: var(--bg-card) !important;
}

/* ========================================
   ADVANCED UI - SECTION DIVIDER
======================================== */
.section-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 32px 0 24px;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

.section-divider-text {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    white-space: nowrap;
}

/* ========================================
   ADVANCED UI - LIVE INDICATOR
======================================== */
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--success);
}

.live-indicator::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    animation: blink 1.5s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ========================================
   ADVANCED UI - ALERTS
======================================== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.5;
}

.alert-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.alert-info {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--text-main);
}

.alert-success {
    background: var(--status-success-bg);
    border: 1px solid var(--status-success-border);
    color: var(--text-main);
}

.alert-warning {
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.2);
    color: var(--text-main);
}

.alert-danger {
    background: var(--status-danger-bg);
    border: 1px solid var(--status-danger-border);
    color: var(--text-main);
}

/* ========================================
   ADVANCED UI - CODE BLOCKS
======================================== */
.code-block {
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    font-family: var(--font-main);
    font-size: 12px;
    line-height: 1.6;
    overflow-x: auto;
    color: var(--text-main);
}

.code-inline {
    display: inline;
    background: var(--bg-depth);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--font-main);
    font-size: 12px;
    color: var(--primary);
}

/* ========================================
   ADVANCED UI - AVATAR
======================================== */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: white;
    flex-shrink: 0;
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.avatar-group {
    display: flex;
}

.avatar-group .avatar {
    margin-left: -8px;
    border: 2px solid var(--bg-card);
}

.avatar-group .avatar:first-child {
    margin-left: 0;
}

/* ========================================
   ADVANCED UI - TOOLTIP
======================================== */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-main);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    margin-bottom: 6px;
    box-shadow: var(--shadow-md);
    z-index: 1000;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   ADVANCED UI - STAT CARDS ROW
======================================== */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.stat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-muted);
}

.stat-card-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--primary);
}

.stat-card-icon.success {
    background: var(--status-success-bg);
}

.stat-card-icon.success svg {
    stroke: var(--success);
}

.stat-card-icon.danger {
    background: var(--status-danger-bg);
}

.stat-card-icon.danger svg {
    stroke: var(--danger);
}

.stat-card-icon.warning {
    background: rgba(234, 179, 8, 0.12);
}

.stat-card-icon.warning svg {
    stroke: var(--warning);
}

.stat-card-value {
    font-size: 28px;
    font-weight: 600;
    font-family: var(--font-main);
    color: var(--text-main);
    line-height: 1;
}

.stat-card-label {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 4px;
}

.stat-card-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    margin-top: 12px;
    padding: 3px 8px;
    border-radius: var(--radius-lg);
    font-weight: 500;
}

.stat-card-change.up {
    background: var(--status-success-bg);
    color: var(--success);
}

.stat-card-change.down {
    background: var(--status-danger-bg);
    color: var(--danger);
}

/* ========================================
   ADVANCED UI - LIST ITEMS
======================================== */
.list-group {
    display: flex;
    flex-direction: column;
}

.list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

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

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

.list-item-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: var(--bg-depth);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.list-item-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-muted);
}

.list-item-content {
    flex: 1;
    min-width: 0;
}

.list-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
}

.list-item-subtitle {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
}

.list-item-meta {
    font-size: 11px;
    color: var(--text-dim);
    text-align: right;
}

/* ========================================
   ADVANCED UI - SEARCH INPUT
======================================== */
.search-input {
    position: relative;
}

.search-input input {
    padding-left: 40px;
}

.search-input::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center;
}

/* ========================================
   ADVANCED UI - FILTER CHIPS
======================================== */
.filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-chip:hover {
    border-color: var(--text-dim);
    color: var(--text-main);
}

.filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ========================================
   ADVANCED UI - TIME RANGE SELECTOR
======================================== */
.time-range {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.time-range-btn {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.time-range-btn:hover {
    color: var(--text-main);
    background: var(--bg-card-hover);
}

.time-range-btn.active {
    color: white;
    background: var(--primary);
}

/* ========================================
   ADVANCED UI - RESPONSIVE GRID
======================================== */
@media (max-width: 1400px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .split-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-row {
        grid-template-columns: 1fr;
    }

    .grid-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .sidebar {
        display: none;
    }
}

/* Badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Compact Table for High Density */
.compact-table th,
.compact-table td {
    padding: 6px 12px;
    font-size: 11px;
}

.compact-table th {
    font-size: 10px;
    padding-bottom: 4px;
}

/* =============================================================================
   ALERT NOTIFICATION STYLES
   ============================================================================= */

.alert-bell {
    position: relative;
    padding: 8px;
    border-radius: var(--radius);
    transition: background 0.2s;
}

.alert-bell svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 2;
}

.alert-bell:hover {
    background: var(--bg-depth);
}

.alert-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.alert-empty {
    padding: 32px;
    text-align: center;
    color: var(--text-dim);
}

.alert-empty.compact {
    padding: 18px 16px;
}

.alert-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 22px;
    margin-bottom: 8px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--success);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
}

.alert-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: min(440px, calc(100vw - 24px));
    max-height: min(620px, calc(100vh - 96px));
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px var(--overlay-backdrop);
    z-index: 1000;
    margin-top: 8px;
}

.alert-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-depth);
}

.alert-dropdown-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.alert-dropdown-subtitle {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
}

.alert-filter-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--glass-highlight-strong);
}

.alert-filter-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
}

.alert-filter-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-filter-pill strong {
    color: var(--text-main);
    font-size: 11px;
}

.alert-filter-pill.active {
    border-color: var(--primary);
    color: var(--text-main);
    background: var(--primary-glow);
}

.alert-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.alert-item:hover {
    background: var(--bg-depth);
}

.alert-item.unread {
    background: var(--primary-glow);
    border-left: 3px solid var(--primary);
}

.alert-item.unresolved {
    box-shadow: inset 0 0 0 1px var(--status-warning-bg);
}

.alert-view-all {
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid var(--border);
}

.alert-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}

.alert-title-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.alert-item-title {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}

.alert-item-time {
    font-size: 10px;
    color: var(--text-dim);
}

.alert-item-message {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.alert-source-pill,
.alert-group-count {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.alert-group-count {
    color: var(--text-main);
    background: var(--bg-depth);
}

.alert-item-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.alert-action-btn {
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.alert-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.alert-action-btn.subtle {
    color: var(--text-muted);
}

.alert-level-critical {
    color: var(--danger);
}

.alert-level-warning {
    color: var(--warning);
}

.alert-level-info {
    color: var(--primary);
}

.alert-level-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 3px;
    margin-right: 8px;
}

.alert-level-badge.critical {
    background: var(--status-danger-bg);
    color: var(--danger);
}

.alert-level-badge.warning {
    background: var(--status-warning-bg);
    color: var(--warning);
}

.alert-level-badge.info {
    background: var(--primary-dim);
    color: var(--primary);
}

.alert-detail-modal .modal-body {
    display: grid;
    gap: 14px;
}

.alert-detail-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.alert-detail-message {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.alert-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.alert-detail-meta div {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
}

.alert-detail-meta span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
}

.alert-detail-meta strong {
    display: block;
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .alert-dropdown {
        right: -52px;
    }

    .alert-filter-row,
    .alert-detail-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Export Modal */
.export-options {
    display: flex;
    gap: 16px;
    margin: 24px 0;
}

.export-option {
    flex: 1;
    padding: 20px;
    background: var(--bg-depth);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.export-option:hover {
    border-color: var(--primary);
    background: var(--primary-glow);
}

.export-option.selected {
    border-color: var(--primary);
    background: var(--primary-glow);
}

.export-option-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.icon-chip-success {
    width: 20px;
    height: 20px;
    background: var(--status-success-bg);
    color: var(--success);
}

.icon-chip-danger {
    width: 20px;
    height: 20px;
    background: var(--status-danger-bg);
    color: var(--danger);
}

.kpi-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-main);
}

.kpi-value-md {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
}

.kpi-sub {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 4px;
}

.kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-icon-primary {
    background: var(--primary-glow);
    color: var(--primary);
}

.kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kpi-icon-danger {
    background: var(--status-danger-bg);
    color: var(--danger);
}

.kpi-icon-warning {
    background: var(--status-warning-bg);
    color: var(--warning);
}

.kpi-icon-success {
    background: var(--status-success-bg);
    color: var(--success);
}

.kpi-icon-purple {
    background: var(--primary-glow);
    color: var(--text-main);
}

.kpi-icon-info {
    background: rgba(14,165,233,0.1);
    color: rgba(14,165,233,0.8);
}

.card-title-sm {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    border: none;
    padding: 0;
    text-transform: none;
}

.table-sticky thead tr {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-depth);
}

.table-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
}

.toast-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: var(--radius);
    z-index: 9999;
    box-shadow: 0 4px 12px var(--overlay-backdrop);
    animation: slideIn 0.3s ease;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border);
}

.toast-danger {
    background: var(--danger);
    color: var(--bg-card);
    border-color: transparent;
}

.toast-success {
    background: var(--success);
    color: var(--bg-card);
    border-color: transparent;
}

.icon-16 {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Hero / Module header */
.card-hero {
    margin-bottom: 24px;
    border-left: 4px solid var(--border);
}

.card-accent-primary {
    border-color: var(--primary);
}

.card-accent-muted {
    border-color: var(--border);
}

.hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-icon {
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-muted);
}

.hero-icon-primary {
    background: var(--primary-glow);
    color: var(--primary);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
}

.pill-muted {
    background: var(--bg-depth);
    color: var(--text-main);
    border: 1px solid var(--border);
}

.pill-success {
    background: var(--status-success-bg);
    color: var(--success);
    border: 1px solid var(--status-success-border);
}

.pill-danger {
    background: var(--status-danger-bg);
    color: var(--danger);
    border: 1px solid var(--status-danger-border);
}

.pill-warning {
    background: var(--status-warning-bg);
    color: var(--warning);
    border: 1px solid var(--status-warning-border);
}

.hero-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.hero-desc {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.hero-status {
    font-size: 12px;
    font-weight: 600;
}

.stat-card.accent-success { border-top: 3px solid var(--success); }
.stat-card.accent-danger { border-top: 3px solid var(--danger); }
.stat-card.accent-warning { border-top: 3px solid var(--warning); }
.stat-card.accent-primary { border-top: 3px solid var(--primary); }

.row-flash {
    animation: rowFlash 1s ease;
}

@keyframes rowFlash {
    from { background: var(--primary-muted); }
    to { background: transparent; }
}

.kpi-pulse {
    animation: kpiPulse 0.3s ease;
}

@keyframes kpiPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.export-option-label {
    font-size: 14px;
    font-weight: 600;
}

.export-option-helper {
    font-size: 11px;
    color: var(--text-dim);
}

/* =============================================================================
   CONSOLIDATED MODULES STYLES
   ============================================================================= */

/* Feature count badges */
.feature-counts {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.count-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.count-badge.free {
    background: var(--status-success-bg);
    color: var(--success);
}

.count-badge.pro {
    background: var(--status-warning-bg);
    color: var(--warning);
}

.count-badge.ent {
    background: var(--primary-glow);
    color: var(--secondary);
}

/* Module cards */
.consolidated-module-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s;
}

.consolidated-module-card:hover {
    border-color: var(--primary);
    box-shadow: none;
}

.consolidated-module-card.locked {
    opacity: 0.7;
}

/* Module header */
.module-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-depth);
}

.module-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.module-card-title .module-icon {
    font-size: 24px;
}

.module-card-title .module-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.module-card-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* Submodule tabs */
.submodule-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.submodule-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.submodule-tab:hover {
    background: var(--bg-depth);
    color: var(--text-main);
}

.submodule-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: var(--bg-card);
}

.submodule-tab .tab-icon {
    font-size: 14px;
}

/* Submodule content */
.submodule-content {
    padding: 20px;
}

.submodule-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.submodule-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.submodule-header .submodule-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    background: var(--bg-depth);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.submodule-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* Stats grid */
.submodule-stats {
    background: var(--bg-depth);
    padding: 16px;
    border-radius: var(--radius-lg);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.active {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

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

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

.stat-loading {
    text-align: center;
    padding: 20px;
    color: var(--text-dim);
    font-size: 12px;
}

/* Submodule actions */
.submodule-actions {
    display: flex;
    gap: 12px;
}

/* Locked overlay */
.module-locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.locked-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.lock-icon {
    font-size: 32px;
}

.lock-text {
    font-size: 14px;
    color: var(--text-muted);
}

/* =============================================================================
   CONFIG FIELDS AND TOGGLE SWITCHES
   ============================================================================= */

/* Config grid */
.submodule-config {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.config-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.config-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.config-field input[type="text"],
.config-field input[type="number"],
.config-field select {
    padding: 10px 12px;
    font-size: 13px;
    font-family: var(--font-main);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    transition: border-color 0.2s;
}

.config-field input:focus,
.config-field select:focus {
    outline: none;
    border-color: var(--primary);
}

.config-field.checkbox {
    flex-direction: row;
    align-items: center;
}

.config-field.checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    cursor: pointer;
}

.config-field.checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.toggle-switch input:checked+.toggle-switch input:checked+/* Toast notifications */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px var(--overlay-backdrop);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    z-index: 10000;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-success {
    border-left: 4px solid var(--success);
}

.toast-error {
    border-left: 4px solid var(--danger);
}

.toast-info {
    border-left: 4px solid var(--primary);
}

/* Light mode needs deliberate hierarchy, not flat white cards everywhere. */
[data-theme="light"] .security-nav,
[data-theme="light"] .section-tab-row {
    background: var(--bg-card);
    border: 1px solid var(--divider);
    box-shadow: var(--shadow-xs);
}

[data-theme="light"] .security-nav-tab.active,
[data-theme="light"] .section-tab-btn.active,
[data-theme="light"] .section-tab-btn.is-active {
    background: var(--control-accent-soft);
    border-color: var(--primary-dim);
    color: var(--control-accent-hover);
    box-shadow: none;
}

[data-theme="light"] .security-command-bar {
    background: transparent;
    border-top: 1px solid var(--divider);
    border-right: 0;
    border-bottom: 1px solid var(--divider);
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
}

[data-theme="light"] .command-kpi-card,
[data-theme="light"] .dashboard-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--divider);
    box-shadow: var(--shadow-xs);
}

[data-theme="light"] .command-kpi-card.primary,
[data-theme="light"] .dashboard-kpi-card.primary {
    border-color: var(--primary-dim);
}

[data-theme="light"] .command-panel,
[data-theme="light"] .card-flush {
    background: var(--bg-card);
    border: 1px solid var(--divider);
    box-shadow: var(--shadow-xs);
}

[data-theme="light"] .command-panel-head,
[data-theme="light"] .card-section {
    background: var(--bg-card);
    border-color: var(--divider);
}

[data-theme="light"] .command-coverage-grid,
[data-theme="light"] .command-config-grid,
[data-theme="light"] .command-action-list,
[data-theme="light"] .command-chart-list,
[data-theme="light"] .command-matrix,
[data-theme="light"] .command-launcher-grid {
    background: transparent;
    border-color: transparent;
    gap: 12px;
}

[data-theme="light"] .command-coverage-item,
[data-theme="light"] .command-config-card,
[data-theme="light"] .command-action-row,
[data-theme="light"] .command-chart-row,
[data-theme="light"] .command-matrix-row,
[data-theme="light"] .command-launcher-card {
    background: var(--bg-card);
    border: 1px solid #dfe6ef;
    border-radius: var(--radius-lg);
}

/* =============================================================================
   DUAL THEME COMPONENT NORMALIZATION
   Shared components should inherit semantic tokens instead of dark-only effects.
   ============================================================================= */

:where(
    .card,
    .panel,
    .content-card,
    .config-card,
    .settings-panel,
    .settings-card,
    .dashboard-card,
    .dashboard-panel,
    .stat-card,
    .metric-card,
    .chart-card,
    .kpi-card,
    .module-card,
    .rule-card,
    .route-card,
    .certificate-card,
    .upstream-card,
    .modal,
    .modal-content,
    .dropdown,
    .dropdown-menu,
    .menu,
    .popover,
    .drawer,
    .side-panel,
    .table-container,
    .empty-state,
    .loading-state
) {
    background: var(--surface-card);
    border-color: var(--divider);
    color: var(--text-main);
    box-shadow: var(--shadow-xs);
}

:where(
    .card:hover,
    .content-card:hover,
    .config-card:hover,
    .dashboard-card:hover,
    .module-card:hover,
    .rule-card:hover,
    .route-card:hover,
    .certificate-card:hover,
    .upstream-card:hover
) {
    background: var(--surface-card-hover);
    border-color: var(--divider);
    box-shadow: var(--shadow-card-hover);
}

:where(
    input,
    textarea,
    select,
    .input,
    .form-control,
    .config-input,
    .settings-input,
    .search-input,
    .filter-input,
    .filter-select,
    .select-sm,
    .input-sm,
    .textarea,
    .code-editor,
    pre,
    code
) {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-main);
}

:where(input, textarea, select, .input, .form-control, .search-input):hover {
    background: var(--input-bg-hover);
}

:where(input, textarea, select, .input, .form-control, .search-input):focus,
:where(input, textarea, select, .input, .form-control, .search-input):focus-visible {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

:where(input, textarea)::placeholder {
    color: var(--input-placeholder);
}

:where(table, .table, .data-table, .config-table, .security-table) {
    background: var(--surface-card);
    color: var(--text-main);
    border-color: var(--divider);
}

:where(th, .table-head, .table-header) {
    background: var(--table-header-bg);
    color: var(--text-secondary);
    border-color: var(--divider);
}

:where(td, tr, .table-row) {
    border-color: var(--divider-muted);
}

:where(tbody tr:hover, .table-row:hover, .data-row:hover) {
    background: var(--table-row-hover);
}

:where(
    .btn,
    .btn-outline,
    .btn-ghost,
    .toggle-btn,
    .segmented-btn,
    .tab-btn,
    .filter-chip,
    .badge,
    .pill,
    .tag
) {
    border-color: var(--divider);
}

:where(.btn-outline, .btn-ghost, .toggle-btn, .segmented-btn, .tab-btn, .filter-chip) {
    background: var(--surface-card);
    color: var(--text-secondary);
}

:where(.btn-outline:hover, .btn-ghost:hover, .toggle-btn:hover, .segmented-btn:hover, .tab-btn:hover, .filter-chip:hover) {
    background: var(--surface-interactive);
    color: var(--text-main);
}

:where(.btn-primary, .btn-success, .btn-danger, .btn-warning) {
    box-shadow: none;
}

:where(.btn-primary) {
    color: var(--on-accent);
}

:where(.btn-warning) {
    color: var(--on-warning);
}

:where(.toggle-slider, .toggle-switch, .checkbox-toggle-switch, .switch-slider) {
    background: var(--surface-interactive);
    border-color: var(--input-border);
}

:where(.modal-backdrop, .overlay, .drawer-backdrop, .dialog-backdrop) {
    background: var(--overlay-backdrop);
}

:where(.alert, .toast, .notice, .callout, .banner) {
    background: var(--surface-card);
    border-color: var(--divider);
    color: var(--text-main);
    box-shadow: var(--shadow-popover);
}

:where(.alert-success, .toast-success, .badge-success, .pill-success, .status-success) {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--success);
}

:where(.alert-error, .toast-error, .badge-danger, .pill-danger, .status-danger, .status-block) {
    background: var(--status-danger-bg);
    border-color: var(--status-danger-border);
    color: var(--danger);
}

:where(.alert-warning, .toast-warning, .badge-warning, .pill-warning, .status-warning, .status-challenge) {
    background: var(--status-warning-bg);
    border-color: var(--status-warning-border);
    color: var(--warning);
}

:where(.alert-info, .toast-info, .badge-info, .pill-info, .status-info) {
    background: var(--status-info-bg);
    border-color: var(--status-info-border);
    color: var(--info);
}

:where(.badge-primary, .pill-primary, .status-primary) {
    background: var(--status-primary-bg);
    border-color: var(--status-primary-border);
    color: var(--primary);
}

:where(.skeleton, .loading-shimmer, .placeholder-row) {
    background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-mid) 50%, var(--skeleton-to) 75%);
}

.global-loader {
    background: var(--overlay-backdrop-strong);
}

[data-theme="light"] :where(.preview-dark, .overlay-dark) {
    background: var(--surface-code);
    color: var(--surface-code-text);
}

/* =============================================================================
   PROFILE PAGE
   ============================================================================= */

.profile-shell {
    display: grid;
    gap: 16px;
}

.profile-summary-panel,
.profile-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
}

.profile-summary-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
}

.profile-avatar-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 18px;
    font-weight: 800;
}

.profile-summary-main {
    min-width: 0;
}

.profile-summary-kicker {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-summary-main h3 {
    margin: 3px 0 6px;
    color: var(--text-main);
    font-size: 20px;
    line-height: 1.2;
}

.profile-summary-main p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.profile-panel {
    min-width: 0;
    padding: 16px;
}

.profile-panel-wide {
    grid-column: 1 / -1;
}

.profile-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.profile-panel-head h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 800;
}

.profile-panel-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.profile-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.profile-readonly-field {
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
}

.profile-readonly-field span,
.profile-form-field span,
.profile-secret-row span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-readonly-field strong {
    display: block;
    overflow: hidden;
    color: var(--text-main);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-password-form {
    display: grid;
    gap: 12px;
}

.profile-form-field {
    display: block;
}

.profile-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-form-footer > span {
    color: var(--text-muted);
    font-size: 12px;
}

.profile-verification-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-verification-actions .btn[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
}

.profile-verification-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
}

.profile-verification-card.enabled {
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}

.profile-security-icon,
.profile-mfa-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-lg);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.profile-security-icon svg,
.profile-mfa-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-verification-main {
    min-width: 0;
    flex: 1;
}

.profile-verification-title {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
}

.profile-verification-sub {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.profile-verification-state {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.profile-mfa-modal .modal-body {
    padding-top: 0;
}

.profile-mfa-step {
    display: grid;
    justify-items: center;
    gap: 16px;
    text-align: center;
}

.profile-mfa-step h4 {
    margin: 0;
    color: var(--text-main);
    font-size: 16px;
}

.profile-mfa-step p {
    max-width: 360px;
    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.profile-mfa-pairing-body {
    display: grid;
    justify-items: stretch;
    gap: 18px;
    width: 100%;
    margin-top: 6px;
}

.profile-mfa-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border-radius: 50%;
}

.profile-mfa-icon.success {
    border-color: color-mix(in srgb, var(--success) 36%, var(--border));
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
}

.profile-qr-card {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: white;
}

.profile-qr-card img {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: contain;
}

.profile-secret-row {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
    text-align: left;
}

.profile-secret-row strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 12px;
}

.profile-mfa-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.profile-mfa-code-row input {
    text-align: center;
    font-size: 18px;
    letter-spacing: 4px;
}

.profile-mfa-loading {
    padding: 28px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

@media (max-width: 900px) {
    .profile-grid,
    .profile-field-grid {
        grid-template-columns: 1fr;
    }

    .profile-panel-head,
    .profile-form-footer,
    .profile-verification-card {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-verification-actions {
        width: 100%;
    }

    .profile-verification-actions .btn {
        flex: 1;
    }
}

/* Legacy admin page consistency layer */
.legacy-admin-page {
    display: grid;
    gap: 18px;
}

.legacy-admin-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.legacy-admin-stat {
    border: 1px solid var(--border);
    background: var(--bg-panel, var(--card));
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    box-shadow: var(--shadow-sm);
}

.legacy-admin-stat-label {
    font-size: 11px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.legacy-admin-stat-value {
    font-size: 22px;
    line-height: 1;
    font-weight: 650;
    color: var(--text-main);
}

.legacy-admin-stat-note {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}

.legacy-admin-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-panel, var(--card));
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.legacy-admin-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--glass-highlight);
}

.legacy-admin-panel-head h3,
.legacy-admin-panel-head h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.legacy-admin-panel-copy {
    display: grid;
    gap: 4px;
}

.legacy-admin-panel-subtitle {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

.legacy-admin-panel-body {
    padding: 18px;
}

.legacy-admin-panel-body.compact {
    padding: 14px 18px;
}

.legacy-admin-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    padding: 14px;
}

.legacy-admin-role-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth);
}

.legacy-admin-role-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.legacy-admin-role-name {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.legacy-admin-role-id {
    margin-top: 2px;
    color: var(--text-dim);
    font-family: var(--font-main);
    font-size: 11px;
}

.legacy-admin-role-count {
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}

.legacy-admin-role-desc {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.legacy-admin-grid {
    display: grid;
    gap: 16px;
}

.legacy-admin-grid.two {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.legacy-admin-grid.three {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.legacy-admin-table-wrap {
    overflow-x: auto;
}

.legacy-admin-table {
    width: 100%;
}

.legacy-admin-table thead th {
    background: var(--glass-highlight);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legacy-admin-table tbody td {
    vertical-align: top;
}

.legacy-admin-chip-row,
.legacy-admin-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.legacy-admin-stack {
    display: grid;
    gap: 12px;
}

.legacy-admin-inline-list {
    display: grid;
    gap: 10px;
}

.legacy-admin-inline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    background: var(--glass-highlight);
}

.legacy-admin-inline-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.legacy-admin-inline-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.legacy-admin-inline-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

.legacy-admin-form-grid {
    display: grid;
    gap: 16px;
}

.legacy-admin-form-grid.two {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.legacy-admin-form-section {
    display: grid;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.legacy-admin-form-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.legacy-admin-form-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.route-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.route-security-toggle {
    min-width: 0;
    min-height: 76px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.route-security-toggle:hover {
    border-color: var(--primary);
}

.route-security-toggle input {
    display: none;
}

.route-security-toggle-marker {
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.route-security-toggle-body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.route-security-toggle-title {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.route-security-toggle-desc {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.route-security-toggle-state {
    min-width: 34px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--glass-highlight);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.route-security-toggle input:checked ~ .route-security-toggle-marker {
    border-color: var(--primary);
    background: var(--primary-glow);
    color: var(--primary);
}

.route-security-toggle input:checked ~ .route-security-toggle-state {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--success);
}

.route-security-toggle input:not(:checked) ~ .route-security-toggle-state {
    color: var(--text-muted);
    font-size: 0;
}

.route-security-toggle input:not(:checked) ~ .route-security-toggle-state::before {
    content: 'Off';
    font-size: 10px;
}

.route-enabled-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--glass-highlight);
}

.route-enabled-toggle-title,
.route-enabled-toggle-desc {
    display: block;
}

.route-enabled-toggle-title {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
}

.route-enabled-toggle-desc {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.route-enabled-switch {
    flex-shrink: 0;
    padding: 0;
    background: transparent;
}

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

.section-policy-toggle {
    min-width: 0;
    min-height: 76px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.section-policy-toggle:hover {
    border-color: var(--primary);
}

.section-policy-toggle.is-active,
.section-policy-toggle:has(input:checked) {
    border-color: var(--primary);
}

.section-policy-toggle > input {
    display: none;
}

.section-policy-toggle-switch {
    justify-self: end;
    flex-shrink: 0;
}

.section-policy-toggle .section-switch input {
    display: block;
}

.section-policy-toggle-marker {
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    overflow: hidden;
}

.section-policy-toggle-marker svg {
    width: 16px;
    height: 16px;
}

.section-policy-toggle-body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.section-policy-toggle-title {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.section-policy-toggle-desc {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.section-policy-toggle-state {
    position: relative;
    width: 36px;
    height: 20px;
    min-width: 36px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-depth);
    font-size: 0;
    transition: background-color 0.2s, border-color 0.2s;
}

.section-policy-toggle-state::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 3px;
    bottom: 3px;
    border-radius: 2px;
    background: var(--text-muted);
    transition: transform 0.2s, background-color 0.2s;
}

.section-policy-toggle:has(input:checked) .section-policy-toggle-marker,
.section-policy-toggle.is-active .section-policy-toggle-marker {
    border-color: var(--primary);
    background: var(--primary-glow);
    color: var(--primary);
}

.section-policy-toggle input:checked ~ .section-policy-toggle-state,
.section-policy-toggle.is-active .section-policy-toggle-state {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 22%, transparent);
}

.section-policy-toggle input:checked ~ .section-policy-toggle-state::before,
.section-policy-toggle.is-active .section-policy-toggle-state::before {
    transform: translateX(16px);
    background: var(--success);
}

.section-policy-toggle-wide {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    min-height: 84px;
}

.section-policy-toggle-wide .section-policy-toggle-marker {
    width: 38px;
    height: 38px;
}

.httpsec-securitytxt-card {
    padding: 0;
    overflow: hidden;
}

.httpsec-securitytxt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-depth, var(--card)) 88%, transparent);
}

.httpsec-securitytxt-head-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.httpsec-endpoint-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-panel, var(--card));
    color: var(--text-main);
    font-size: 11px;
}

.httpsec-securitytxt-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 14px;
    padding: 16px;
}

.httpsec-securitytxt-form {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.httpsec-securitytxt-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.httpsec-securitytxt-preview {
    display: grid;
    gap: 8px;
    align-content: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth, var(--card));
    min-width: 0;
}

.httpsec-securitytxt-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.httpsec-securitytxt-preview-row strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legacy-admin-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.legacy-admin-form-note {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

.legacy-admin-settings-shell .settings-horizontal {
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
}

.legacy-admin-settings-shell .settings-tabs-bar {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-panel, var(--card));
    box-shadow: var(--shadow-sm);
    padding: 6px;
    position: sticky;
    top: 12px;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
}

.legacy-admin-settings-shell .settings-content {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-panel, var(--card));
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    width: 100%;
    min-width: 0;
}

.legacy-admin-settings-shell .settings-panel-content {
    padding: 14px;
    display: grid;
    gap: 12px;
}

.legacy-admin-settings-shell .settings-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-depth, var(--card)) 84%, transparent);
    padding: 14px;
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    margin-bottom: 0;
}

.legacy-admin-settings-shell .settings-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-main);
}

.license-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 2px);
    background: var(--bg-depth, var(--card));
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
}

.license-status {
    padding: 5px 8px;
}

.license-status.is-positive {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--success);
}

.license-status.is-warning {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--warning);
}

.license-warning,
.license-upgrade-notice {
    border-left: 3px solid var(--warning) !important;
}

.license-warning {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--status-warning-bg);
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.5;
}

.license-error-state {
    border-left: 3px solid var(--danger) !important;
}

.license-error-state p,
.license-upgrade-notice p {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.settings-panel-content[aria-busy='true'] {
    cursor: progress;
}

.settings-panel-content[aria-busy='true'] [data-license-action] {
    opacity: 0.6;
}

.legacy-admin-settings-shell .settings-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}

.legacy-admin-settings-shell .settings-input {
    min-height: 38px;
    border-radius: 7px;
    background: var(--bg-depth, var(--card));
}

.legacy-admin-settings-shell textarea.settings-input {
    min-height: auto;
}

.legacy-admin-settings-shell .error-pages-control .settings-toggle {
    margin-bottom: 8px;
}

.error-pages-state {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    background: var(--bg-depth, var(--card));
}

.error-pages-layout {
    display: grid;
    grid-template-columns: minmax(260px, 30%) minmax(0, 70%);
    gap: 12px;
    align-items: start;
}

.error-template-sidebar {
    display: grid;
    gap: 12px;
    align-content: start;
}

.error-template-sidebar .settings-section-title {
    align-items: center;
}

.error-template-creator {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-depth, var(--card)) 92%, var(--primary));
}

.error-template-list {
    display: grid;
    gap: 8px;
}

.error-template-row {
    display: grid;
    align-items: start;
    gap: 10px;
    min-height: 78px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth, var(--card));
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}

.error-template-row:hover,
.error-template-row.active {
    border-color: color-mix(in srgb, var(--primary) 54%, var(--border));
    background: color-mix(in srgb, var(--primary) 7%, var(--bg-depth, var(--card)));
}

.error-template-row-main {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.error-template-row-main strong {
    font-size: 13px;
    line-height: 1.25;
}

.error-template-row-main span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.error-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.error-status-tabs,
.error-preview-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.error-mode-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.legacy-admin-settings-shell .error-mode-control .settings-input {
    min-height: 34px;
    width: 112px;
}

.error-status-tab {
    min-width: 54px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-depth, var(--card));
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.error-status-tab.active,
.error-status-tab:hover {
    color: var(--text-main);
    border-color: color-mix(in srgb, var(--primary) 54%, var(--border));
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-depth, var(--card)));
}

.error-editor-panel {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.error-editor-field {
    display: grid;
    gap: 8px;
}

.error-editor-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.error-editor-status {
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 11px;
}

.legacy-admin-settings-shell .error-code-editor {
    min-height: 210px;
    resize: vertical;
    line-height: 1.55;
    tab-size: 2;
}

.error-preview-section {
    position: static;
    top: 16px;
}

.error-page-preview-frame {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth, var(--card));
    overflow: hidden;
    min-height: 520px;
}

.error-page-preview-frame iframe {
    display: block;
    width: 100%;
    height: 560px;
    border: 0;
    background: white;
}

.legacy-admin-settings-shell .settings-toggle {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-depth, var(--card));
}

.legacy-admin-settings-shell .settings-actions {
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

.legacy-admin-settings-shell .config-page-hero {
    margin-bottom: 0;
}

.settings-config-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-panel, var(--card));
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.settings-config-active {
    min-width: 0;
}

.settings-config-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.settings-config-title {
    margin-top: 3px;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.2;
    color: var(--text-main);
}

.settings-config-desc {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-config-pills {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.settings-config-pills span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-depth, var(--card));
    color: var(--text-muted);
    font-size: 11px;
}

.settings-config-pills strong {
    color: var(--text-main);
    font-weight: 650;
}

.legacy-admin-settings-shell .settings-tab {
    flex: 1 1 118px;
    justify-content: center;
    min-width: 0;
    padding: 9px 14px;
    border: 1px solid transparent;
}

.legacy-admin-settings-shell .settings-tab.active {
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
    box-shadow: inset 0 1px 0 var(--glass-highlight-strong);
}

.legacy-admin-settings-shell .settings-grid {
    gap: 14px;
}

.legacy-admin-settings-shell .data-cards {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.legacy-admin-settings-shell .data-card {
    gap: 12px;
    padding: 14px;
}

.legacy-admin-settings-shell .data-card-icon {
    width: 38px;
    height: 38px;
    font-size: 0;
    color: var(--primary);
}

.legacy-admin-settings-shell .data-card-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.legacy-admin-settings-shell .danger-zone {
    margin-top: 0;
    padding-top: 14px;
    border-top-width: 1px;
}

.legacy-admin-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--glass-highlight);
}

@media (max-width: 900px) {
    .legacy-admin-settings-shell .settings-tabs-bar {
        position: static;
    }

    .settings-config-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-config-pills {
        justify-content: flex-start;
        width: 100%;
    }

    .settings-config-desc {
        white-space: normal;
    }

    .error-pages-layout {
        grid-template-columns: 1fr;
    }

    .error-preview-section {
        position: static;
    }

    .httpsec-securitytxt-head,
    .httpsec-securitytxt-body {
        grid-template-columns: 1fr;
    }

    .httpsec-securitytxt-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .httpsec-securitytxt-head-meta {
        justify-content: flex-start;
    }

    .legacy-admin-panel-head,
    .legacy-admin-inline-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .legacy-admin-form-actions,
    .legacy-admin-action-row {
        width: 100%;
    }

    .route-security-grid {
        grid-template-columns: 1fr;
    }

    .route-enabled-toggle {
        align-items: flex-start;
    }

    .section-policy-toggle-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   ADMIN UI SIMPLIFICATION
   Shared components aligned to a flatter SaaS-grade system
   ============================================================================= */

.dashboard-tab,
.tab,
.filter-chip,
.time-range-btn,
.alert-bell,
.toggle-slider,
.settings-input {
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast) !important;
}



.card,
.chart-card,
.dashboard-widget-card,
.section-core-panel,
.security-rule-list-shell,
.security-rule-editor-drawer {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: none !important;
}

.card {
    padding: 16px;
    transition: background-color var(--transition-fast), border-color var(--transition-fast) !important;
}

.card:hover,
.card-interactive:hover {
    background: var(--bg-card);
    border-color: var(--border-strong);
    transform: none !important;
    box-shadow: none !important;
}

.dashboard-kpi-card.is-clickable:hover {
    border-color: var(--primary);
    transform: translateY(-1px) !important;
    box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
}

.card-section,
.card-header,
.dashboard-widget-head,
.security-rule-builder .card-footer {
    background: transparent;
}

.metric-card,
.dashboard-kpi-card,
.section-metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.metric-card {
    padding: 18px 20px;
}

.metric-card::before {
    display: none;
}

.dashboard-kpi-card {
    min-height: 112px;
    padding: 16px 16px 14px;
    background:
        linear-gradient(180deg, var(--glass-highlight), transparent 78%),
        var(--bg-card);
}

.dashboard-kpi-icon,
.feature-icon,
.section-control-card-icon,
.section-header-icon,
.toggle-card-icon {
    background: var(--primary-glow);
    color: var(--primary);
}

.dashboard-tab,
.tab {
    border-radius: var(--radius);
}

.dashboard-tab:hover,
.tab:hover,
.filter-chip:hover,
.time-range-btn:hover,
.alert-bell:hover {
    background: var(--bg-interactive);
    color: var(--text-main);
}

.dashboard-tab.active,
.dashboard-tab.active:hover,
.tab.active,
.filter-chip.active,
.time-range-btn.active {
    background: color-mix(in srgb, var(--primary) 16%, var(--bg-interactive));
    border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
    color: var(--text-main);
}

.filter-chip {
    background: var(--bg-card);
    border-radius: 999px;
}

.alert-bell {
    border: 1px solid transparent;
    border-radius: var(--radius);
}

.alert-badge {
    animation: none !important;
}

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

.toggle-card.active,
.card-feature.active,
.provider-card.enabled,
.security-rule-type-card.is-selected,
.security-rule-type-card:hover,
.security-rule-family-card:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
    border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
}

.tabs,
.dashboard-tabs,
.time-range,
.toggle-group,
.section-core-tabs,
.security-time-menu {
    background: var(--bg-panel);
    border-color: var(--border);
    box-shadow: none !important;
}

.security-time-option:hover {
    background: var(--bg-interactive);
}

.security-time-option.active,
.section-core-tab.is-active {
    background: color-mix(in srgb, var(--primary) 16%, var(--bg-interactive));
    color: var(--text-main);
    box-shadow: none;
}

.security-command-bar,
.security-advanced-filters,
.dashboard-widget-head,
.security-events-summary-row {
    background: var(--bg-card);
}

.security-command-bar {
    min-height: 66px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-right: 0;
    border-bottom: 1px solid var(--border);
    border-left: 0;
    border-radius: 0;
    background: transparent;
}

.security-advanced-filters {
    border-top: 1px solid var(--border);
}

.section-core-tab:hover {
    background: var(--bg-interactive);
}

.settings-input:focus,
.modal-input:focus,
.config-input:focus,
.config-textarea:focus {
    box-shadow: none;
    border-color: var(--primary);
}

.modal-overlay,
.global-loader {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.btn:hover,
.btn:focus-visible {
    filter: brightness(1.03);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: color-mix(in srgb, var(--primary) 92%, white 8%);
    border-color: color-mix(in srgb, var(--primary) 92%, white 8%);
}

.btn-outline:hover,
.btn-outline:focus-visible,
.btn-outline-success:hover,
.btn-outline-success:focus-visible,
.btn-outline-warning:hover,
.btn-outline-warning:focus-visible,
.btn-outline-danger:hover,
.btn-outline-danger:focus-visible,
.section-core-shell .btn-outline:hover,
.section-core-shell .btn-outline:focus-visible,
.section-core-shell .btn-ghost:hover,
.section-core-shell .btn-ghost:focus-visible {
    background: color-mix(in srgb, var(--bg-card) 88%, white 12%);
    border-color: var(--border-strong);
    color: var(--text-main);
    filter: none;
}

.btn-danger:hover,
.btn-danger:focus-visible {
    background: color-mix(in srgb, var(--danger) 94%, white 6%);
    border-color: color-mix(in srgb, var(--danger) 94%, white 6%);
    filter: none;
}

.btn-ghost:hover,
.btn-ghost:focus-visible,
.icon-btn:hover,
.icon-btn:focus-visible,
.modal-close:hover,
.modal-close:focus-visible,
.alert-bell:hover,
.alert-bell:focus-visible {
    background: var(--glass-highlight);
    border-color: var(--border-subtle);
    color: var(--text-main);
    filter: none;
}

.security-filter-builder-popover {
    border-color: #fff;
    border-radius: 2px;
}

.security-filter-builder-popover .security-filter-field-select,
.security-filter-builder-popover .security-filter-operator-select,
.security-filter-builder-popover .security-filter-builder-value {
    border-color: #fff;
    border-radius: 2px;
}

.security-filter-builder-popover .security-filter-field-select:focus,
.security-filter-builder-popover .security-filter-field-select:focus-visible,
.security-filter-builder-popover .security-filter-operator-select:focus,
.security-filter-builder-popover .security-filter-operator-select:focus-visible,
.security-filter-builder-popover .security-filter-builder-value:focus,
.security-filter-builder-popover .security-filter-builder-value:focus-visible {
    border-color: #fff;
    box-shadow: none;
    outline: 0;
}

.security-filter-builder-popover .security-filter-builder-actions .btn,
.security-filter-builder-popover .security-filter-builder-actions .btn-outline,
.security-filter-builder-popover .security-filter-builder-actions .btn:hover,
.security-filter-builder-popover .security-filter-builder-actions .btn:focus-visible,
.security-filter-builder-popover .security-filter-builder-actions .btn-outline:hover,
.security-filter-builder-popover .security-filter-builder-actions .btn-outline:focus-visible {
    border-color: #fff;
    border-radius: 2px;
    background: var(--bg-card);
    color: #fff;
    filter: none;
}

[data-theme="light"] .security-filter-builder-popover,
[data-theme="light"] .security-filter-builder-popover .security-filter-field-select,
[data-theme="light"] .security-filter-builder-popover .security-filter-operator-select,
[data-theme="light"] .security-filter-builder-popover .security-filter-builder-value,
[data-theme="light"] .security-filter-builder-popover .security-filter-builder-actions .btn,
[data-theme="light"] .security-filter-builder-popover .security-filter-builder-actions .btn-outline,
[data-theme="light"] .security-filter-builder-popover .security-filter-builder-actions .btn:hover,
[data-theme="light"] .security-filter-builder-popover .security-filter-builder-actions .btn:focus-visible,
[data-theme="light"] .security-filter-builder-popover .security-filter-builder-actions .btn-outline:hover,
[data-theme="light"] .security-filter-builder-popover .security-filter-builder-actions .btn-outline:focus-visible {
    border-color: var(--primary);
    color: #0f172a;
}

/* Security Command Center */
.security-command-center {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.command-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.command-kpi-card {
    min-height: 118px;
}

.command-section-filter {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0;
}

.command-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.command-filter-btn:hover,
.command-filter-btn.active {
    color: var(--text-main);
    background: var(--bg-card-hover);
    border-color: var(--border-strong);
}

.command-filter-count {
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 11px;
}

.command-ops-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 16px;
    align-items: stretch;
}

.command-ops-grid-even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.command-panel {
    min-width: 0;
    overflow: hidden;
}

.command-panel-head {
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.command-threat-queue {
    overflow-x: auto;
}

.command-threat-table {
    min-width: 680px;
}

.command-threat-table td,
.command-threat-table th {
    vertical-align: middle;
}

.command-matrix {
    display: grid;
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}

.command-matrix-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(96px, 0.5fr) minmax(72px, 0.35fr) minmax(180px, 1fr) minmax(230px, auto);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 12px 16px;
    background: var(--bg-card);
}

.command-section-cell,
.command-row-actions,
.command-action-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.command-section-cell {
    gap: 10px;
}

.command-row-actions {
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.command-matrix-signal {
    min-width: 0;
}

.command-mini-stats {
    display: flex;
    gap: 6px;
    margin-top: 5px;
    overflow: hidden;
}

.command-mini-stats span {
    max-width: 150px;
    overflow: hidden;
    padding: 2px 6px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.command-status-dot,
.command-action-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--text-muted);
}

.command-status-dot.success,
.command-action-dot.success {
    background: var(--success);
}

.command-status-dot.muted,
.command-action-dot.muted {
    background: var(--text-muted);
}

.command-action-dot.warning {
    background: var(--warning);
}

.command-action-dot.danger {
    background: var(--danger);
}

.command-action-list {
    display: grid;
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}

.command-action-row {
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-card);
}

.command-action-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.command-coverage-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}

.command-config-panel {
    border-color: var(--border);
}

.command-config-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--border);
}

.command-config-card {
    min-width: 0;
    padding: 14px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.command-config-card.is-muted {
    opacity: 0.76;
}

.command-config-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin-bottom: 12px;
}

.command-config-badges {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
}

.command-config-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.command-config-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 34px;
    padding: 7px 9px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.command-config-value {
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-chart-list {
    display: grid;
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}

.command-chart-row {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--bg-card);
}

.command-chart-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
}

.command-chart-track {
    height: 8px;
    overflow: hidden;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.command-chart-fill {
    height: 100%;
    min-width: 4px;
    background: var(--text-muted);
    border-radius: inherit;
}

.command-chart-fill.success {
    background: var(--success);
}

.command-chart-fill.warning {
    background: var(--warning);
}

.command-chart-fill.danger {
    background: var(--danger);
}

.command-chart-fill.secondary {
    background: var(--primary);
}

.command-launcher-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}

.command-launcher-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--bg-card);
}

.command-launcher-copy {
    min-width: 0;
}

.command-launcher-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.command-coverage-item {
    min-width: 0;
    padding: 14px 16px;
    background: var(--bg-card);
    border-top: 3px solid var(--border-strong);
}

.command-coverage-item.success {
    border-top-color: var(--success);
}

.command-coverage-item.warning {
    border-top-color: var(--warning);
}

.command-coverage-item.danger {
    border-top-color: var(--danger);
}

.command-coverage-value {
    margin: 8px 0 6px;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.command-empty-state {
    min-height: 160px;
    padding: 20px;
}

.command-truncate {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1440px) {
    .command-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

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

@media (max-width: 1180px) {
    .command-ops-grid {
        grid-template-columns: 1fr;
    }

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

    .command-matrix-row {
        grid-template-columns: minmax(180px, 1fr) minmax(88px, auto) minmax(64px, auto);
    }

    .command-matrix-row > :nth-child(4),
    .command-matrix-row > :nth-child(5) {
        grid-column: 1 / -1;
    }

    .command-row-actions {
        justify-content: flex-start;
    }

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

@media (max-width: 760px) {
    .command-kpi-grid,
    .command-config-grid,
    .command-launcher-grid,
    .command-coverage-grid {
        grid-template-columns: 1fr;
    }

    .command-matrix-row {
        grid-template-columns: 1fr;
    }

    .command-matrix-row > * {
        grid-column: auto;
    }

    .command-action-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .command-launcher-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .command-launcher-actions {
        justify-content: flex-start;
    }
}

/* SSL domain input tags */
.ssl-panel-body {
    display: grid;
    gap: 18px;
}

.ssl-auto-fields {
    display: grid;
    gap: 18px;
}

.ssl-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
}

.ssl-domain-field {
    gap: 10px;
}

.ssl-domain-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.tags-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-depth);
    min-height: 42px;
    align-items: center;
}

.ssl-domain-tags {
    min-width: 0;
    padding: 9px 12px;
    min-height: 42px;
}

.tags-input-container:focus-within {
    border-color: var(--primary);
    box-shadow: none;
}

.tags-input-container .tag {
    background: var(--primary-dim);
    color: var(--primary);
    border-color: transparent;
}

.tags-input-container .tag span {
    cursor: pointer;
    opacity: 0.75;
}

.tags-input-container .tag span:hover {
    opacity: 1;
}

.toast-warning {
    border-left: 4px solid var(--warning);
}

/* =============================================================================
   SECTION PAGES
   ============================================================================= */

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

.section-tabs {
    background: var(--bg-depth);
    padding: 0 16px;
}

.section-content {
    padding: 24px;
}

/* =============================================================================
   CONFIG PAGE FIELD STYLES
   ============================================================================= */

/* Key-Value Fields */
.config-keyvalue-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kv-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.kv-row .kv-key {
    flex: 1;
}

.kv-row .kv-value {
    flex: 2;
}

.kv-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--status-danger-bg);
    color: var(--danger);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.kv-remove:hover {
    background: var(--danger);
    color: white;
}

/* Slider Container */
.slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.config-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    background: var(--bg-depth);
    border-radius: 3px;
    outline: none;
}

.config-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: none;
}

.slider-value {
    min-width: 36px;
    padding: 4px 8px;
    background: var(--bg-depth);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--primary);
}

/* Textarea */
.config-textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    font-family: var(--font-main);
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s;
}

.config-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* Tags */
.config-tags-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.config-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.config-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-lg);
    font-size: 11px;
    font-weight: 500;
}

.config-tag button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    line-height: 1;
}

.config-tag button:hover {
    color: white;
}

.tag-input {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-main);
    min-width: 150px;
    max-width: 200px;
}

.ssl-domain-input {
    flex: 1 1 180px;
    min-width: 160px;
    max-width: none;
    padding: 0;
    line-height: 22px;
}

.ssl-domain-add {
    min-width: 64px;
    min-height: 42px;
    align-self: start;
}

.ssl-field-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.45;
}

.ssl-suggestion-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.ssl-suggestion-link:hover {
    color: var(--primary-hover, var(--primary));
    text-decoration: underline;
}

@media (max-width: 640px) {
    .ssl-domain-control {
        grid-template-columns: 1fr;
    }

    .ssl-domain-add {
        width: 100%;
        min-height: 36px;
    }
}

/* Config Hints */
.config-hint {
    display: block;
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
}

/* Improved Config Field Layout */
.config-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

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

.config-input,
.config-select,
.config-number {
    padding: 10px 12px;
    font-size: 13px;
    background: var(--bg-depth);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    transition: border-color 0.2s;
}

.config-input:focus,
.config-select:focus,
.config-number:focus {
    outline: none;
    border-color: var(--primary);
}

/* =============================================================================
   CONFIG PAGE TOGGLE SWITCH OVERRIDE
   ============================================================================= */

.global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.global-loader.active {
    opacity: 1;
    visibility: visible;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.loader-text {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Session Warning Toast Enhancements */
.toast-warning {
    border-left: 4px solid var(--warning);
}

.toast-error {
    border-left: 4px solid var(--danger);
}

.toast-success {
    border-left: 4px solid var(--success);
}

.toast-info {
    border-left: 4px solid var(--primary);
}

/* =============================================================================
   FINAL LIGHT-MODE COMPONENT HARDENING
   Ensures all shared components look professional in light mode.
   ============================================================================= */

/* Dashboard top tab bar — white pill style */
[data-theme="light"] .dashboard-tabs {
    background: #f1f3f5 !important;
    border: 1px solid #eaecf0 !important;
    box-shadow: inset 0 1px 2px rgba(16,24,40,0.04) !important;
}

[data-theme="light"] .dashboard-tab.active,
[data-theme="light"] .dashboard-tab.active:hover {
    background: #ffffff !important;
    color: var(--control-accent) !important;
    border: 1px solid #eaecf0 !important;
    box-shadow: 0 1px 3px rgba(16,24,40,0.10) !important;
}

[data-theme="light"] .dashboard-tab:hover:not(.active) {
    background: rgba(0,0,0,0.04) !important;
    color: #374151 !important;
}

/* Settings tabs */
[data-theme="light"] .settings-tabs-bar {
    background: #f1f3f5 !important;
    border: 1px solid #eaecf0 !important;
}

/* Cards — WHITE so they pop above the grey canvas */
[data-theme="light"] .card {
    background: #ffffff !important;
    border-color: #e2e5ea !important;
    box-shadow: 0 1px 3px rgba(16,24,40,0.06) !important;
}

[data-theme="light"] .card:hover,
[data-theme="light"] .card-interactive:hover {
    background: #ffffff !important;
    border-color: #c8cdd8 !important;
    box-shadow: 0 4px 8px rgba(16,24,40,0.10) !important;
}

/* KPI metric cards */
[data-theme="light"] .metric-card,
[data-theme="light"] .dashboard-kpi-card,
[data-theme="light"] .command-kpi-card {
    background: #ffffff !important;
    border-color: #e2e5ea !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78) !important;
}

[data-theme="light"] .dashboard-kpi-card.primary,
[data-theme="light"] .command-kpi-card.primary {
    border-color: var(--control-accent-ring) !important;
}

[data-theme="light"] .dashboard-kpi-card.danger,
[data-theme="light"] .command-kpi-card.danger {
    border-color: #fecaca !important;
}

[data-theme="light"] .dashboard-kpi-card.warning,
[data-theme="light"] .command-kpi-card.warning {
    border-color: rgba(var(--brand-orange-rgb), 0.34) !important;
}

[data-theme="light"] .dashboard-kpi-card.success,
[data-theme="light"] .command-kpi-card.success {
    border-color: #bbf7d0 !important;
}

/* Table headers — slightly darker bg for clear segmentation */
[data-theme="light"] table th,
[data-theme="light"] .table-head,
[data-theme="light"] thead th {
    background: #edf0f4 !important;
    color: #374151 !important;
    border-color: #e2e5ea !important;
    font-weight: 600 !important;
}

[data-theme="light"] table td,
[data-theme="light"] tbody td {
    border-color: #edf0f4 !important;
    background: #ffffff;
}

[data-theme="light"] tbody tr:hover td {
    background: #f4f6f8 !important;
}

/* Modals — clean white on light background */
[data-theme="light"] .modal-content,
[data-theme="light"] .modal-panel {
    background: #ffffff !important;
    border: 1px solid #eaecf0 !important;
    box-shadow: 0 8px 24px rgba(16,24,40,0.15), 0 2px 6px rgba(16,24,40,0.08) !important;
}

[data-theme="light"] .modal-overlay {
    background: rgba(16,24,40,0.4) !important;
}

[data-theme="light"] .modal-head,
[data-theme="light"] .modal-footer {
    background: #f8f9fa !important;
    border-color: #eaecf0 !important;
}

/* Select dropdowns */
[data-theme="light"] select,
[data-theme="light"] .settings-select,
[data-theme="light"] .config-select {
    background: #ffffff !important;
    border-color: #d0d5dd !important;
    color: #111827 !important;
}

/* Filter chips */
[data-theme="light"] .filter-chip {
    background: #ffffff !important;
    border-color: #d0d5dd !important;
    color: #374151 !important;
}

[data-theme="light"] .filter-chip.active {
    background: var(--control-accent-soft) !important;
    border-color: var(--control-accent) !important;
    color: var(--control-accent) !important;
}

/* Toggle group / time range picker */
[data-theme="light"] .tabs,
[data-theme="light"] .time-range,
[data-theme="light"] .toggle-group {
    background: #f1f3f5 !important;
    border-color: #eaecf0 !important;
}

[data-theme="light"] .tab.active,
[data-theme="light"] .time-range-btn.active {
    background: #ffffff !important;
    color: var(--control-accent) !important;
    box-shadow: 0 1px 3px rgba(16,24,40,0.10) !important;
}

/* Toasts / feedback */
[data-theme="light"] .toast,
[data-theme="light"] .feedback-toast {
    background: #ffffff !important;
    border: 1px solid #eaecf0 !important;
    color: #111827 !important;
    box-shadow: 0 4px 12px rgba(16,24,40,0.12) !important;
}

/* Alert dropdown */
[data-theme="light"] .alert-dropdown {
    background: #ffffff !important;
    border: 1px solid #eaecf0 !important;
    box-shadow: 0 8px 24px rgba(16,24,40,0.12) !important;
}

/* Nav group labels */
[data-theme="light"] .nav-group-label {
    color: #9ca3af !important;
}

/* Nav link icons — grey by default, blue on active */
[data-theme="light"] .nav-link {
    color: #374151 !important;
}

[data-theme="light"] .nav-link.active {
    color: var(--control-accent) !important;
}

[data-theme="light"] .nav-link.active .nav-icon {
    color: var(--control-accent) !important;
    stroke: var(--control-accent) !important;
}

/* =============================================================================
   SECURITY DASHBOARD CONSISTENCY
   Neutral KPI and chart surfaces across WAF, Bot, Traffic, API, and HTTP.
   ============================================================================= */

.security-analytics-shell .security-explorer-summary-card,
.security-analytics-shell .dashboard-kpi-card {
    min-height: 118px;
    padding: 17px 16px 15px;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
}

.security-analytics-shell .security-explorer-summary-card::before,
.security-analytics-shell .dashboard-kpi-card::before {
    display: none !important;
}

.security-analytics-shell .security-explorer-summary-card.has-filter,
.security-analytics-shell .dashboard-kpi-card.has-filter {
    padding-right: 82px;
}

.security-analytics-shell .security-explorer-summary-card.has-filter:hover,
.security-analytics-shell .security-explorer-summary-card.has-filter:focus-within,
.security-analytics-shell .dashboard-kpi-card.has-filter:hover,
.security-analytics-shell .dashboard-kpi-card.has-filter:focus-within {
    border-color: var(--border-strong) !important;
    background: var(--bg-elevated) !important;
    transform: translateY(-1px);
}

.security-analytics-shell .security-explorer-summary-value,
.security-analytics-shell .dashboard-kpi-value {
    color: var(--text-main) !important;
    font-size: 23px;
    font-weight: 750;
    letter-spacing: 0;
}

.security-analytics-shell .security-explorer-summary-label,
.security-analytics-shell .dashboard-kpi-label {
    color: var(--text-muted) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.security-analytics-shell .security-explorer-summary-sub,
.security-analytics-shell .dashboard-kpi-sub {
    color: var(--text-dim) !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.security-events-explorer .security-explorer-summary-grid {
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 10px;
}

.security-events-explorer .security-explorer-summary-card {
    display: grid;
    min-height: 104px;
    padding: 14px 16px 12px;
    align-content: start;
    gap: 9px;
    border-color: var(--border) !important;
    background: var(--bg-card) !important;
    box-shadow: none !important;
}

.security-events-explorer .security-explorer-summary-card::before {
    display: none !important;
}

.security-events-explorer .security-explorer-summary-card.has-filter {
    padding-right: 16px;
}

.security-events-explorer .security-explorer-summary-card.has-filter:hover,
.security-events-explorer .security-explorer-summary-card.has-filter:focus-within {
    border-color: var(--border-strong) !important;
    background: var(--bg-card) !important;
    transform: none;
}

.security-events-explorer .security-explorer-summary-label {
    order: 1;
    margin: 0;
    color: var(--text-secondary) !important;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
}

.security-events-explorer .security-explorer-summary-value {
    order: 2;
    color: var(--text-main) !important;
    font-family: var(--font-main);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
}

.security-events-explorer .security-explorer-summary-sub {
    order: 3;
    margin: 2px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    color: var(--text-dim) !important;
    font-size: 11px;
    font-weight: 650;
}

@media (max-width: 1180px) {
    .security-events-explorer .security-explorer-summary-grid {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }
}

@media (max-width: 760px) {
    .security-events-explorer .security-explorer-summary-grid {
        grid-template-columns: 1fr;
    }
}

.security-analytics-shell :is(
    .edge-graph-card,
    .bot-graph-card,
    .security-flow-graph-card,
    .apisec-graph-card,
    .httpsec-graph-card,
    .section-analytics-graph-card
) {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    background: var(--bg-card) !important;
    box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.security-analytics-shell :is(
    .edge-graph-card-head,
    .bot-graph-card-head,
    .security-flow-graph-card-head,
    .apisec-graph-card-head,
    .httpsec-graph-card-head,
    .section-analytics-graph-card-head
) {
    min-height: 56px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-depth);
}

.security-analytics-shell :is(
    .edge-graph-card-head,
    .bot-graph-card-head,
    .security-flow-graph-card-head,
    .apisec-graph-card-head,
    .httpsec-graph-card-head,
    .section-analytics-graph-card-head
) strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.security-analytics-shell :is(
    .edge-graph-body,
    .bot-graph-body,
    .security-flow-graph-body,
    .apisec-graph-body,
    .httpsec-graph-body,
    .section-analytics-graph-body
) {
    padding: 18px;
    background: var(--bg-card);
}

.security-analytics-shell .section-analytics-graph-card {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    overflow: hidden;
}

.security-analytics-shell .section-analytics-graph-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 220px;
}

.security-analytics-shell .section-analytics-graph-body canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

[data-theme="light"] .security-analytics-shell .security-explorer-summary-card,
[data-theme="light"] .security-analytics-shell .dashboard-kpi-card,
[data-theme="light"] .security-analytics-shell :is(
    .edge-graph-card,
    .bot-graph-card,
    .security-flow-graph-card,
    .apisec-graph-card,
    .httpsec-graph-card,
    .section-analytics-graph-card
) {
    background: #ffffff !important;
    border-color: #e2e5ea !important;
    box-shadow: 0 1px 3px rgba(16,24,40,0.06) !important;
}

[data-theme="light"] .security-analytics-shell :is(
    .edge-graph-card-head,
    .bot-graph-card-head,
    .security-flow-graph-card-head,
    .apisec-graph-card-head,
    .httpsec-graph-card-head,
    .section-analytics-graph-card-head
) {
    background: #f8f9fb !important;
    border-color: #edf0f4 !important;
}

/* Enterprise light component baseline shared by configuration sections. */
[data-theme="light"] .btn {
    min-height: 32px;
    padding: 7px 13px;
    border: 1px solid #d4d4d8;
    border-radius: 3px;
    background: #ffffff;
    color: #111111;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    box-shadow: none !important;
    filter: none !important;
}

[data-theme="light"] .btn:hover,
[data-theme="light"] .btn:focus-visible {
    background: #f5f5f5;
    border-color: #a1a1aa;
    color: #111111;
    filter: none !important;
}

[data-theme="light"] .btn-primary,
[data-theme="light"] .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);
    border-color: var(--primary);
    color: #ffffff;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-primary:focus-visible,
[data-theme="light"] .btn:not(.btn-outline):not(.btn-ghost):not(.btn-danger):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-success):hover,
[data-theme="light"] .btn:not(.btn-outline):not(.btn-ghost):not(.btn-danger):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-success):focus-visible {
    background: #2a2a2a;
    border-color: #2a2a2a;
    color: #ffffff;
}

[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-ghost {
    background: #ffffff;
    border-color: #d4d4d8;
    color: #2f2f2f;
}

[data-theme="light"] .btn-sm {
    min-height: 28px;
    padding: 6px 11px !important;
    font-size: 11px !important;
}

[data-theme="light"] .status-badge,
[data-theme="light"] .section-status-badge,
[data-theme="light"] .badge {
    min-height: 20px;
    padding: 0 7px;
    border-radius: 3px;
    background: var(--status-neutral-bg);
    border: 1px solid var(--status-neutral-border);
    color: #3f3f46;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

[data-theme="light"] .status-badge.enabled,
[data-theme="light"] .status-badge.status-success,
[data-theme="light"] .section-status-badge.status-success {
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
    color: var(--text-main);
}

[data-theme="light"] .status-badge.disabled,
[data-theme="light"] .status-badge.status-neutral,
[data-theme="light"] .section-status-badge.status-neutral {
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
    color: var(--text-dim);
}

[data-theme="light"] .section-status-badge.status-warning {
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
    color: var(--text-main);
}

[data-theme="light"] .section-status-badge.status-danger {
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
    color: var(--text-dim);
}

/* Pro SaaS light typography and controls. Keep this late in the cascade. */
[data-theme="light"] body,
[data-theme="light"] button,
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] table,
[data-theme="light"] td,
[data-theme="light"] th {
    font-family: var(--font-main) !important;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

[data-theme="light"] :is(code, pre, kbd, samp, .cell-mono, .text-mono, .config-table-code) {
    font-family: var(--font-main) !important;
}

[data-theme="light"] .btn {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 4px;
    font-family: var(--font-main) !important;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
}

[data-theme="light"] .btn-sm {
    min-height: 30px;
    padding: 0 12px !important;
    font-size: 11px !important;
}

[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-ghost {
    background: #ffffff;
    border-color: #d8dadd;
    color: #232323;
}

[data-theme="light"] .btn-outline:hover,
[data-theme="light"] .btn-ghost:hover {
    background: #f7f7f7;
    border-color: #9b9b9f;
}

[data-theme="light"] table td,
[data-theme="light"] tbody td {
    font-family: var(--font-main) !important;
}

/* WAF Core enterprise analytics layout. */
[data-theme="light"] .security-analytics-shell {
    color: #101214;
}

[data-theme="light"] .edge-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #d9dee5;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 18, 20, 0.04);
}

[data-theme="light"] .edge-dashboard-title {
    display: grid;
    gap: 2px;
    min-width: 220px;
}

[data-theme="light"] .edge-dashboard-title span {
    color: #69727d;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-theme="light"] .edge-dashboard-title strong {
    color: #101214;
    font-size: 18px;
    font-weight: 760;
    letter-spacing: 0;
}

[data-theme="light"] .edge-core-filter-toolbar {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

[data-theme="light"] .security-active-filters {
    border: 1px solid #d9dee5;
    border-radius: 8px;
    background: #ffffff;
}

[data-theme="light"] .security-filter-chip {
    border-color: rgba(var(--brand-orange-rgb), 0.30);
    background: rgba(var(--brand-orange-rgb), 0.08);
    color: #101214;
}

[data-theme="light"] .security-kpi-grid {
    gap: 12px;
}

[data-theme="light"] .security-explorer-summary-card.edge-kpi-card,
[data-theme="light"] .edge-investigation-card,
[data-theme="light"] .edge-breakdown-area {
    border: 1px solid #d9dee5 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(16, 18, 20, 0.04) !important;
}

[data-theme="light"] .security-explorer-summary-card.edge-kpi-card {
    min-height: 104px;
    padding: 14px;
}

[data-theme="light"] .edge-kpi-card .security-explorer-summary-value {
    color: #101214 !important;
}

[data-theme="light"] .edge-kpi-card .security-explorer-summary-label,
[data-theme="light"] .edge-kpi-card .security-explorer-summary-sub {
    color: #69727d !important;
}

[data-theme="light"] .edge-investigation-card .security-events-header {
    min-height: 58px;
    border-bottom: 1px solid #d9dee5;
    background: #ffffff;
}

[data-theme="light"] .edge-investigation-card .table-container {
    border-top: 0;
}

[data-theme="light"] .security-events-table th {
    height: 38px;
    background: #f6f7f9 !important;
    color: #47515d !important;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.04em;
}

[data-theme="light"] .security-events-table td {
    height: 54px;
    border-bottom: 1px solid #edf0f4 !important;
    color: #101214;
}

[data-theme="light"] .security-events-table tbody tr:hover td {
    background: rgba(var(--brand-orange-rgb), 0.08) !important;
}

[data-theme="light"] .edge-chart-grid {
    gap: 16px;
}

[data-theme="light"] .security-analytics-shell :is(.edge-graph-card, .edge-analysis-card) {
    border-color: #d9dee5 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(16, 18, 20, 0.04) !important;
}

[data-theme="light"] .security-analytics-shell :is(.edge-graph-card-head, .edge-analysis-card .security-stat-card-head) {
    min-height: 48px;
    border-color: #edf0f4 !important;
    background: #ffffff !important;
}

[data-theme="light"] .security-analytics-shell :is(.edge-graph-card-head, .edge-analysis-card .security-stat-card-head) strong {
    color: #101214;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: none;
}

[data-theme="light"] .edge-breakdown-area {
    padding: 12px;
}

[data-theme="light"] .edge-breakdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

[data-theme="light"] .edge-breakdown-head > strong {
    color: #101214;
    font-size: 13px;
    font-weight: 760;
}

[data-theme="light"] .edge-breakdown-segments {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid #d9dee5;
    border-radius: 8px;
    background: #f6f7f9;
}

[data-theme="light"] .edge-breakdown-tab {
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #69727d;
    font-size: 11px;
    font-weight: 700;
}

[data-theme="light"] .edge-breakdown-tab.is-active {
    background: #ffffff;
    color: #101214;
    box-shadow: inset 0 -2px 0 var(--brand-orange), 0 1px 1px rgba(16, 18, 20, 0.05);
}

[data-theme="light"] .edge-breakdown-panel.hidden {
    display: none !important;
}

[data-theme="light"] .edge-breakdown-panel .edge-analysis-card {
    margin: 0;
}

[data-theme="light"] .security-event-drawer {
    background: rgba(16, 18, 20, 0.32);
}

[data-theme="light"] .security-event-drawer-panel {
    border-left: 1px solid #d9dee5;
    background: #ffffff;
    color: #101214;
    box-shadow: -16px 0 48px rgba(16, 18, 20, 0.16);
}

[data-theme="light"] .security-drawer-header {
    border-bottom: 1px solid #d9dee5;
    background: #ffffff;
}

[data-theme="light"] .security-drawer-title,
[data-theme="light"] .security-detail-section h4 {
    color: #101214;
    letter-spacing: 0;
}

[data-theme="light"] .security-detail-item,
[data-theme="light"] .security-detail-section,
[data-theme="light"] .security-detail-callout {
    border-color: #d9dee5;
    background: #ffffff;
}

@media (max-width: 980px) {
    [data-theme="light"] .edge-dashboard-header,
    [data-theme="light"] .edge-breakdown-head {
        align-items: stretch;
        flex-direction: column;
    }

    [data-theme="light"] .edge-core-filter-toolbar {
        width: 100%;
    }

    [data-theme="light"] .edge-breakdown-segments {
        width: 100%;
        overflow-x: auto;
    }
}

/* =============================================================================
   SECURITY EVENTS PAGE — LIGHT MODE HARDENING
   Ensures all Security Events components remain legible in white mode.
   ============================================================================= */

/* Filter toolbar row */
[data-theme="light"] .security-events-filter-toolbar {
    background: transparent;
}

/* Toolbar select (period picker) */
[data-theme="light"] .security-toolbar-time-select,
[data-theme="light"] .security-time-select-shell select {
    background: #ffffff !important;
    border-color: #d4d4d8 !important;
    color: #111111 !important;
    box-shadow: 0 1px 2px rgba(16, 18, 20, 0.04) !important;
}

/* Refresh state + timezone label */
[data-theme="light"] .security-refresh-state {
    color: #69727d !important;
}

[data-theme="light"] .security-time-zone {
    color: #69727d !important;
}

/* Active filters bar */
[data-theme="light"] .security-active-filters {
    border: 1px solid #d9dee5 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    padding: 6px 10px !important;
}

[data-theme="light"] .security-filter-summary {
    color: #69727d !important;
}

[data-theme="light"] .security-filter-chip {
    border-color: rgba(var(--brand-orange-rgb), 0.30) !important;
    background: rgba(var(--brand-orange-rgb), 0.08) !important;
    color: #101214 !important;
}

[data-theme="light"] .security-filter-chip strong {
    color: var(--brand-orange) !important;
}

/* Summary row (matched traffic header) */
[data-theme="light"] .security-events-summary-row {
    border-color: #d9dee5 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(16, 18, 20, 0.05) !important;
}

[data-theme="light"] .security-events-summary-label,
[data-theme="light"] .security-events-summary-metric span {
    color: #69727d !important;
}

[data-theme="light"] .security-events-result-title {
    color: #101214 !important;
}

[data-theme="light"] .security-events-summary-note {
    color: #8a949e !important;
}

[data-theme="light"] .security-events-summary-metric {
    border-color: #e7ebf0 !important;
    background: #f6f7f9 !important;
}

[data-theme="light"] .security-events-summary-metric strong {
    color: #101214 !important;
}

[data-theme="light"] .security-events-inline-warning {
    border-color: rgba(var(--brand-orange-rgb), 0.36) !important;
    background: rgba(var(--brand-orange-rgb), 0.08) !important;
}

[data-theme="light"] .security-events-inline-warning span {
    color: var(--brand-orange) !important;
}

[data-theme="light"] .security-events-inline-warning strong {
    color: #101214 !important;
}

/* KPI summary cards inside security-events-explorer */
[data-theme="light"] .security-events-explorer .security-explorer-summary-card {
    border-color: #d9dee5 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(16, 18, 20, 0.04) !important;
}

[data-theme="light"] .security-events-explorer .security-explorer-summary-card.primary {
    border-color: var(--control-accent-ring) !important;
}

[data-theme="light"] .security-events-explorer .security-explorer-summary-card.danger {
    border-color: #fecaca !important;
}

[data-theme="light"] .security-events-explorer .security-explorer-summary-card.warning {
    border-color: rgba(var(--brand-orange-rgb), 0.34) !important;
}

[data-theme="light"] .security-events-explorer .security-explorer-summary-card.success {
    border-color: #bbf7d0 !important;
}

[data-theme="light"] .security-events-explorer .security-explorer-summary-label {
    color: #69727d !important;
}

[data-theme="light"] .security-events-explorer .security-explorer-summary-value {
    color: #101214 !important;
}

[data-theme="light"] .security-events-explorer .security-explorer-summary-sub {
    border-top-color: #e7ebf0 !important;
    color: #8a949e !important;
}

/* Events table — header tools bar */
/* Filter builder popover */
[data-theme="light"] .security-filter-builder-popover {
    border-color: #d9dee5 !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(16, 18, 20, 0.12) !important;
}

[data-theme="light"] .security-filter-builder-title {
    color: #101214 !important;
}

[data-theme="light"] .security-filter-builder-actions .btn:not(.btn-outline) {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

[data-theme="light"] .security-filter-builder-actions .btn-outline {
    background: #ffffff !important;
    border-color: #d4d4d8 !important;
    color: #232323 !important;
}

   AUDIT LOGS PAGE — LIGHT MODE HARDENING
   ============================================================================= */

/* Stat summary cards (Visible Events / Actors / Action Types / Source IPs) */
[data-theme="light"] .legacy-admin-stat {
    border-color: #d9dee5 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(16, 18, 20, 0.05) !important;
}

[data-theme="light"] .legacy-admin-stat-label {
    color: #69727d !important;
}

[data-theme="light"] .legacy-admin-stat-value {
    color: #101214 !important;
}

[data-theme="light"] .legacy-admin-stat-note {
    color: #8a949e !important;
}

/* Panel container (the table card) */
[data-theme="light"] .legacy-admin-panel {
    border-color: #d9dee5 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(16, 18, 20, 0.05) !important;
}

/* Panel header row ("Recent Activity") */
[data-theme="light"] .legacy-admin-panel-head {
    border-bottom-color: #e7ebf0 !important;
    background: #f8f9fb !important;
}

[data-theme="light"] .legacy-admin-panel-head h3,
[data-theme="light"] .legacy-admin-panel-head h4 {
    color: #101214 !important;
}

[data-theme="light"] .legacy-admin-panel-subtitle {
    color: #69727d !important;
}

/* Table inside the panel */
[data-theme="light"] .legacy-admin-table thead th {
    background: #f0f2f5 !important;
    border-bottom-color: #e2e5ea !important;
    color: #47515d !important;
}

[data-theme="light"] .legacy-admin-table tbody tr:hover td {
    background: rgba(var(--brand-orange-rgb), 0.08) !important;
}

[data-theme="light"] .legacy-admin-table tbody td {
    border-color: #edf0f4 !important;
    color: #101214 !important;
}

/* Role cards (used on Users / Roles pages, same layout as audit) */
[data-theme="light"] .legacy-admin-role-card {
    border-color: #d9dee5 !important;
    background: #f8f9fb !important;
}

[data-theme="light"] .legacy-admin-role-name {
    color: #101214 !important;
}

[data-theme="light"] .legacy-admin-role-id {
    color: #8a949e !important;
}

[data-theme="light"] .legacy-admin-role-count {
    border-color: #d9dee5 !important;
    color: #69727d !important;
}

[data-theme="light"] .legacy-admin-role-desc {
    color: #69727d !important;
}

/* Inline row list (key-value pairs) */
[data-theme="light"] .legacy-admin-inline-row {
    border-bottom-color: #e7ebf0 !important;
}

[data-theme="light"] .legacy-admin-inline-title {
    color: #101214 !important;
}

[data-theme="light"] .legacy-admin-inline-subtitle {
    color: #69727d !important;
}

/* Config page hero kicker text */
[data-theme="light"] .config-page-hero-kicker {
    color: #8a949e !important;
}

[data-theme="light"] .config-page-hero-title {
    color: #101214 !important;
}

[data-theme="light"] .config-page-hero-subtitle {
    color: #69727d !important;
}

/* Empty state (no audit records) */
[data-theme="light"] .legacy-admin-page .empty-state {
    border-color: #e7ebf0 !important;
    background: #ffffff !important;
}

[data-theme="light"] .legacy-admin-page .empty-state h3 {
    color: #101214 !important;
}

[data-theme="light"] .legacy-admin-page .empty-state p {
    color: #69727d !important;
}

[data-theme="light"] .legacy-admin-page .empty-state-icon {
    color: #aeb7c2 !important;
}

/* text-primary in table cells (username column) */
[data-theme="light"] .legacy-admin-table .text-primary {
    color: #101214 !important;
    font-weight: 600;
}

/* text-muted / text-mono in table cells */
[data-theme="light"] .legacy-admin-table .text-muted {
    color: #69727d !important;
}

[data-theme="light"] .legacy-admin-table .text-mono {
    color: #47515d !important;
}

/* =============================================================================
   USERS PAGE — LIGHT MODE HARDENING
   ============================================================================= */

/* ACTIVE / INACTIVE status badge pills */
[data-theme="light"] .status-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

[data-theme="light"] .status-badge.status-success {
    background: #f4f4f5 !important;
    color: #171717 !important;
    border: 1px solid #d4d4d8 !important;
}

[data-theme="light"] .status-badge.status-danger {
    background: #ffffff !important;
    color: #6b7280 !important;
    border: 1px solid #e4e4e7 !important;
}

/* thead row — bg-depth class goes dark by default */
[data-theme="light"] .bg-depth {
    background: #f0f2f5 !important;
}

[data-theme="light"] .border-bottom {
    border-bottom-color: #e2e5ea !important;
}

/* table "no rows" empty cell */
[data-theme="light"] .table-empty {
    color: #8a949e !important;
}

/* legacy-admin-empty (no roles fallback) */
[data-theme="light"] .legacy-admin-empty {
    color: #8a949e !important;
    padding: 16px;
}

/* Form section title inside modal ("Access", "Account State") */
[data-theme="light"] .legacy-admin-form-section {
    border-top-color: #e7ebf0 !important;
}

[data-theme="light"] .legacy-admin-form-title {
    color: #101214 !important;
}

/* Form actions row (Cancel + Save buttons) */
[data-theme="light"] .legacy-admin-form-actions {
    border-top-color: #e7ebf0 !important;
    background: #f8f9fb !important;
}

/* Add / Edit User modal */
[data-theme="light"] #user-modal .modal,
[data-theme="light"] #user-modal .modal-narrow {
    background: #ffffff !important;
    border-color: #d9dee5 !important;
    box-shadow: 0 16px 40px rgba(16, 18, 20, 0.14), 0 4px 12px rgba(16, 18, 20, 0.07) !important;
}

[data-theme="light"] #user-modal .modal-header {
    border-bottom: 1px solid #e7ebf0 !important;
    background: #f8f9fb !important;
}

[data-theme="light"] #user-modal .modal-header h3 {
    color: #101214 !important;
}

[data-theme="light"] #user-modal .modal-close {
    color: #69727d !important;
    background: transparent !important;
    border-color: transparent !important;
}

[data-theme="light"] #user-modal .modal-close:hover {
    color: #101214 !important;
    background: #f0f2f5 !important;
}

[data-theme="light"] #user-modal .modal-body {
    background: #ffffff !important;
}

/* Inputs, selects, labels inside the user modal */
[data-theme="light"] #user-modal .settings-field label {
    color: #47515d !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

[data-theme="light"] #user-modal .settings-input {
    background: #ffffff !important;
    border-color: #d4d4d8 !important;
    color: #111111 !important;
}

[data-theme="light"] #user-modal .settings-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-orange-rgb), 0.16) !important;
}

[data-theme="light"] #user-modal .settings-hint {
    color: #8a949e !important;
}

/* Checkbox label ("Active Account") */
[data-theme="light"] #user-modal .text-muted {
    color: #69727d !important;
}

/* Centralized UI Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    flex: 0 0 38px;
}

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

.switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--control-track-off);
    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;
}

.switch-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;
}

.switch input:checked + .switch-slider {
    border-color: var(--control-accent);
    background: var(--control-accent);
}

.switch input:checked + .switch-slider::before {
    transform: translateX(18px);
    background: #ffffff;
}

.switch input:focus-visible + .switch-slider {
    box-shadow: 0 0 0 3px var(--control-accent-ring);
}

/* Bot Protection create-rule polish: keep the shared builder, remove the legacy grey card stack. */
.botdefense-operator-frame .security-rule-builder-bot.card.security-rule-builder {
    padding: 0 !important;
    border: 1px solid var(--operator-line, var(--border)) !important;
    border-radius: 6px !important;
    background: var(--operator-surface, #11141a) !important;
    box-shadow: none !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-builder-head,
.botdefense-operator-frame .security-rule-builder-bot .security-rule-footer {
    background: var(--operator-surface, #11141a) !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-builder-head {
    min-height: 76px;
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--operator-line-soft, var(--border)) !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-cf-section,
.botdefense-operator-frame .security-rule-builder-bot .security-rule-preview-section {
    background: transparent !important;
    border-bottom: 1px solid var(--operator-line-soft, var(--border)) !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-cf-section {
    padding: 20px 22px !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-cf-step {
    border-color: var(--operator-line, var(--border)) !important;
    background: var(--operator-surface, #11141a) !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-condition-card,
.botdefense-operator-frame .security-rule-builder-bot .security-rule-targeting-panel,
.botdefense-operator-frame .security-rule-builder-bot .security-rule-action-panel,
.botdefense-operator-frame .security-rule-builder-bot .security-rule-expression-preview {
    border-color: var(--operator-line, var(--border)) !important;
    border-radius: 6px !important;
    background: var(--operator-surface, #11141a) !important;
    box-shadow: none !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-condition-head {
    border-bottom: 1px solid var(--operator-line-soft, var(--border)) !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-condition-row {
    border-color: var(--operator-line-soft, var(--border)) !important;
    border-radius: 5px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.botdefense-operator-frame .security-rule-builder-bot .form-group input,
.botdefense-operator-frame .security-rule-builder-bot .form-group select,
.botdefense-operator-frame .security-rule-builder-bot .form-group textarea,
.botdefense-operator-frame .security-rule-builder-bot .security-rule-field-search {
    border-color: var(--operator-line, var(--border, #d9dde3)) !important;
    border-radius: 4px !important;
    background: var(--operator-surface, var(--input-bg, #ffffff)) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}

.botdefense-operator-frame .security-rule-builder-bot .form-group input:focus,
.botdefense-operator-frame .security-rule-builder-bot .form-group select:focus,
.botdefense-operator-frame .security-rule-builder-bot .form-group textarea:focus,
.botdefense-operator-frame .security-rule-builder-bot .security-rule-field-search:focus {
    border-color: var(--operator-orange, var(--primary)) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--operator-orange, var(--primary)) 16%, transparent) !important;
    outline: none !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-toggle {
    min-height: 36px !important;
    border-color: var(--operator-line-soft, var(--border)) !important;
    border-radius: 4px !important;
    background: var(--operator-surface-muted, var(--bg-depth, #f9fafb)) !important;
    color: var(--text-muted) !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-condition-joiner .status-pill,
.botdefense-operator-frame .security-rule-builder-bot .security-rule-condition-remove {
    border-color: var(--operator-line-soft, var(--border)) !important;
    border-radius: 4px !important;
    background: var(--operator-surface-muted, var(--bg-depth)) !important;
    color: var(--text-muted) !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-condition-remove:hover,
.botdefense-operator-frame .security-rule-builder-bot .security-rule-condition-remove:focus-visible {
    border-color: color-mix(in srgb, var(--danger) 36%, var(--operator-line, var(--border))) !important;
    background: color-mix(in srgb, var(--danger) 8%, var(--operator-surface, #ffffff)) !important;
    color: var(--danger) !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-bot-scope-item {
    border-color: var(--operator-line-soft, var(--border)) !important;
    border-radius: 5px !important;
    background: transparent !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-bot-scope-item:hover,
.botdefense-operator-frame .security-rule-builder-bot .security-rule-bot-scope-item:has(input:checked) {
    border-color: color-mix(in srgb, var(--operator-orange, var(--primary)) 38%, var(--operator-line, var(--border))) !important;
    background: color-mix(in srgb, var(--operator-orange, var(--primary)) 5%, var(--operator-surface, #ffffff)) !important;
}

.botdefense-operator-frame .security-rule-builder-bot .security-rule-footer {
    border-top: 1px solid var(--operator-line-soft, var(--border)) !important;
}

[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot.card.security-rule-builder {
    background: var(--operator-surface, #11141a) !important;
}

[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-builder-head,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-footer,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-cf-step,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-condition-card,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-targeting-panel,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-action-panel,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-expression-preview {
    background: var(--operator-surface, #11141a) !important;
}

[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .form-group input,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .form-group select,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .form-group textarea,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-field-search {
    border-color: var(--operator-line-soft, var(--border)) !important;
    background: var(--operator-canvas, #0b0d12) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-toggle {
    background: var(--operator-canvas, #0b0d12) !important;
}

[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-condition-remove:hover,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-condition-remove:focus-visible {
    background: color-mix(in srgb, var(--danger) 8%, var(--operator-surface, #11141a)) !important;
}

[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-bot-scope-item:hover,
[data-theme="dark"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-bot-scope-item:has(input:checked) {
    background: color-mix(in srgb, var(--operator-orange, var(--primary)) 5%, var(--operator-surface, #11141a)) !important;
}

[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot.card.security-rule-builder,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot.card.security-rule-builder,
[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-builder-head,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-builder-head,
[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-footer,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-footer,
[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-condition-card,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-condition-card,
[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-targeting-panel,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-targeting-panel,
[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-action-panel,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-action-panel,
[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-expression-preview,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-expression-preview {
    background: #ffffff !important;
}

[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot .form-group input,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot .form-group input,
[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot .form-group select,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot .form-group select,
[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot .form-group textarea,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot .form-group textarea,
[data-theme="light"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-field-search,
[data-theme="light"], [data-theme="bright"] .botdefense-operator-frame .security-rule-builder-bot .security-rule-field-search {
    background: #ffffff !important;
    border-color: #d7dce3 !important;
    color: var(--text-main, #101214) !important;
}

/* ==========================================================================
   SYSTEM UPDATE BANNER & MODAL (MONOCHROME ENTERPRISE DESIGN)
   ========================================================================== */
.system-update-banner {
    background: var(--bg-elevated, #1a1e24);
    border-bottom: 1px solid var(--border-strong, rgba(248, 250, 252, 0.14));
    padding: 9px 24px;
    z-index: 90;
    transition: all 0.2s ease-in-out;
}

.system-update-banner.is-critical {
    border-bottom-color: var(--warning, #f97316);
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.08), var(--bg-elevated, #1a1e24));
}

.update-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

.update-banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-main, #f8fafc);
}

.update-banner-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted, #cbd5e1);
}

.system-update-banner.is-critical .update-banner-icon {
    color: var(--warning, #f97316);
}

.update-banner-title {
    font-weight: 600;
    color: var(--text-main, #f8fafc);
}

.update-banner-version {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    padding: 2px 7px;
    background: var(--bg-interactive, #1d2128);
    border: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    border-radius: 4px;
    color: var(--text-secondary, #dbe4f0);
}

.update-banner-pill {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    color: var(--text-dim, #64748b);
}

.update-pill-critical {
    border-color: rgba(249, 115, 22, 0.4);
    color: var(--warning, #f97316);
    background: rgba(249, 115, 22, 0.08);
}

.update-pill-recommended {
    border-color: var(--border-strong, rgba(248, 250, 252, 0.14));
    color: var(--text-muted, #cbd5e1);
}

.update-banner-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.update-action-btn {
    padding: 4px 12px;
    font-size: 12px;
    height: 28px;
}

.update-banner-dismiss {
    background: none;
    border: none;
    padding: 4px;
    color: var(--text-dim, #64748b);
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.update-banner-dismiss:hover {
    color: var(--text-main, #f8fafc);
    background: var(--bg-interactive, #1d2128);
}

/* Modal Styling */
.update-modal-panel {
    max-width: 580px;
    width: 100%;
    background: var(--bg-card, #171a1f);
    border: 1px solid var(--border-strong, rgba(248, 250, 252, 0.14));
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.update-modal-head {
    display: flex;
    align-items: flex-start;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    position: relative;
}

.update-modal-icon {
    margin-right: 14px;
    color: var(--primary, #f97316);
}

.update-modal-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.update-version-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-depth, #0f1115);
    border: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    border-radius: 6px;
    padding: 12px 18px;
}

.update-version-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.update-version-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim, #64748b);
}

.update-version-val {
    font-family: var(--font-mono, monospace);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main, #f8fafc);
}

.update-version-card.is-target .update-version-val {
    color: var(--primary, #f97316);
}

.update-version-tag {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted, #cbd5e1);
}

.update-version-arrow {
    color: var(--text-dim, #64748b);
}

.update-release-card {
    background: var(--bg-panel, #12161b);
    border: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    border-radius: 6px;
    padding: 14px 16px;
}

.update-release-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle, rgba(248, 250, 252, 0.05));
    padding-bottom: 6px;
}

.update-release-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main, #f8fafc);
}

.update-release-date {
    font-size: 11px;
    color: var(--text-dim, #64748b);
}

.update-modal-highlights {
    margin: 0 0 10px 18px;
    padding: 0;
    font-size: 12px;
    color: var(--text-secondary, #dbe4f0);
    line-height: 1.6;
}

.update-modal-link {
    font-size: 12px;
    color: var(--primary, #f97316);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.update-modal-link:hover {
    text-decoration: underline;
}

.update-safety-box {
    background: rgba(89, 171, 143, 0.06);
    border: 1px solid rgba(89, 171, 143, 0.2);
    border-radius: 6px;
    padding: 12px 14px;
}

.update-safety-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--success, #59ab8f);
    margin-bottom: 8px;
}

.update-safety-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary, #dbe4f0);
    margin-bottom: 4px;
}

.update-safety-item:last-child {
    margin-bottom: 0;
}

.update-safety-check {
    color: var(--success, #59ab8f);
    display: inline-flex;
}

.update-safety-item code {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 4px;
    border-radius: 3px;
}

.update-progress-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-interactive, #1d2128);
    border: 1px solid var(--border, rgba(248, 250, 252, 0.08));
    border-radius: 6px;
}

.update-progress-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-strong, rgba(248, 250, 252, 0.14));
    border-top-color: var(--primary, #f97316);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

.update-progress-status {
    font-size: 12px;
    color: var(--text-main, #f8fafc);
}

.update-modal-footer {
    padding: 14px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--border, rgba(248, 250, 252, 0.08));
}

/* Demo Mode Security Notice Banner & Locked Indicators */
.demo-mode-notice-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-interactive, #1d2128);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-left: 3px solid var(--primary, #f97316);
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-main, #f8fafc);
}

.demo-mode-notice-banner svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--primary, #f97316);
}

.demo-mode-notice-banner strong {
    color: var(--text-main, #f8fafc);
    font-weight: 600;
}

.demo-mode-notice-banner span {
    color: var(--text-muted, #94a3b8);
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 3px;
    background: rgba(249, 115, 22, 0.12);
    color: var(--primary, #f97316);
    border: 1px solid rgba(249, 115, 22, 0.25);
    letter-spacing: 0.02em;
}