:root {
    --security-ink: #14213d;
    --security-muted: #64748b;
    --security-line: #dce4ef;
    --security-soft: #f4f7fb;
    --security-canvas: #f1f5f9;
    --security-panel: #ffffff;
    --security-primary: #2563eb;
    --security-primary-dark: #1d4ed8;
    --security-accent-contrast: #ffffff;
    --security-violet: #7c3aed;
    --security-success: #059669;
    --security-warning: #d97706;
    --security-danger: #dc2626;
    --security-radius: 14px;
    --security-shadow: 0 8px 28px rgba(15, 23, 42, .07);
}

.security-module { background: var(--security-canvas); color: var(--security-ink); }
.security-module .main-area { min-width: 0; overflow: hidden; background: var(--security-canvas); }
.security-module .right-workspace { min-width: 0; background: var(--security-canvas); }

/* Module navigation */
.security-sidebar {
    width: 276px;
    min-width: 276px;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border-right: 1px solid var(--security-line);
    color: var(--security-ink);
    overflow: hidden;
}
.security-sidebar .security-sidebar-header {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    color: var(--security-ink);
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid var(--security-line);
}
.security-sidebar-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.security-sidebar-title > span:last-child { display: grid; min-width: 0; line-height: 1.1; }
.security-sidebar-title small { margin-bottom: 4px; color: var(--security-muted); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.security-sidebar-title strong { font-size: 17px; font-weight: 750; }
.security-sidebar-icon, .security-page-icon, .security-guide-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: var(--security-accent-contrast);
    background: linear-gradient(135deg, var(--security-primary), var(--security-violet));
    box-shadow: 0 7px 18px rgba(37, 99, 235, .2);
}
.security-module-count {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: #475569;
    background: #eef2f7;
    font-size: 11px;
    font-weight: 800;
}
.security-nav-tools { padding: 11px 12px 8px; background: #fff; border-bottom: 1px solid #e8edf4; }
.security-nav-search { position: relative; display: flex; align-items: center; }
.security-nav-search > i { position: absolute; left: 11px; z-index: 1; color: #94a3b8; font-size: 13px; pointer-events: none; }
.security-nav-search input {
    width: 100%;
    height: 36px;
    padding: 0 34px 0 32px;
    border: 1px solid var(--security-line);
    border-radius: 10px;
    outline: 0;
    color: var(--security-ink);
    background: #f8fafc;
    font-size: 12px;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.security-nav-search input:focus { border-color: #93b4fb; background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.security-nav-search button {
    position: absolute;
    right: 5px;
    display: none;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    color: #64748b;
    background: transparent;
    font-size: 11px;
}
.security-nav-search button.is-visible { display: inline-grid; place-items: center; }
.security-nav-search button:hover { color: #0f172a; background: #e9eef5; }
.security-nav-summary { display: flex; justify-content: space-between; gap: 8px; padding: 7px 2px 0; color: #94a3b8; font-size: 10px; font-weight: 700; }
.security-sidebar .accordion { flex: 1; min-height: 0; padding: 9px 8px 12px; overflow-y: auto; scrollbar-width: thin; }
.security-sidebar .accordion-item {
    --group-accent: var(--security-primary);
    --group-soft: color-mix(in srgb, var(--group-accent) 10%, var(--security-surface));
    --group-border: color-mix(in srgb, var(--group-accent) 25%, var(--security-line));
    margin: 5px 0;
    overflow: visible;
    border: 0;
    border-radius: 11px;
    background: transparent;
}
.security-sidebar .accordion-button {
    min-height: 42px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border: 1px solid var(--security-line);
    border-radius: 10px !important;
    color: var(--security-ink);
    background: var(--security-surface);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--pp-shadow-color) 35%, transparent) !important;
    font-size: 10.5px;
    font-weight: 820;
    letter-spacing: .035em;
}
.security-sidebar .accordion-button:hover {
    border-color: var(--group-border);
    color: var(--group-accent);
    background: color-mix(in srgb, var(--group-accent) 4%, var(--security-surface));
}
.security-category-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--group-border);
    border-radius: 9px;
    color: var(--group-accent);
    background: var(--group-soft);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--security-surface-raised) 72%, transparent);
    font-size: 13px;
    line-height: 1;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.security-category-icon i,
.security-setting-icon i { display: block; margin: 0 !important; line-height: 1; }
.security-category-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.security-sidebar .accordion-button:hover .security-category-icon { transform: translateY(-1px); }
.security-sidebar .accordion-button:not(.collapsed) {
    border-color: var(--group-border);
    color: var(--group-accent);
    background: var(--group-soft);
    box-shadow: inset 3px 0 0 var(--group-accent), 0 3px 10px color-mix(in srgb, var(--pp-shadow-color) 36%, transparent) !important;
}
.security-sidebar .accordion-button:not(.collapsed) .security-category-icon {
    border-color: color-mix(in srgb, var(--group-accent) 44%, var(--security-line));
    background: color-mix(in srgb, var(--group-accent) 16%, var(--security-surface-raised));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--group-accent) 14%, transparent);
}
.security-sidebar .accordion-button::after {
    grid-column: 3;
    width: 11px;
    height: 11px;
    margin: 0;
    background-size: 11px;
    opacity: .55;
}
.security-sidebar .accordion-collapse { position: relative; margin: 0 7px 0 18px; }
.security-sidebar .accordion-collapse::before { position: absolute; top: 0; bottom: 9px; left: 0; width: 1px; content: ''; background: color-mix(in srgb,var(--group-accent) 28%,var(--security-line)); }
.security-sidebar .accordion-body { padding: 5px 0 4px 13px !important; }
.security-sidebar .nav { gap: 2px; padding: 0; }
.security-sidebar .nav-item { position: relative; }
.security-sidebar .nav-item::before { position: absolute; top: 17px; left: -13px; width: 10px; border-top: 1px solid color-mix(in srgb,var(--group-accent) 35%,var(--security-line)); content: ''; }
.security-sidebar .nav-link {
    position: relative;
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 33px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--security-muted);
    font-size: 10.5px;
    font-weight: 680;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.security-setting-icon {
    display: inline-grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: color-mix(in srgb, var(--group-accent) 70%, var(--security-muted));
    background: color-mix(in srgb, var(--group-accent) 6%, transparent);
    font-size: 10.5px;
    line-height: 1;
}
.security-setting-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.security-sidebar .nav-link:hover {
    border-color: color-mix(in srgb,var(--group-accent) 16%,var(--security-line));
    color: var(--group-accent);
    background: color-mix(in srgb,var(--group-accent) 6%,var(--security-surface));
}
.security-sidebar .nav-link.active {
    border-color: var(--group-border);
    color: var(--group-accent);
    background: var(--group-soft);
    box-shadow: inset 3px 0 0 var(--group-accent), 0 3px 10px color-mix(in srgb, var(--pp-shadow-color) 32%, transparent);
    font-weight: 800;
}
.security-sidebar .nav-link:is(:hover, .active) .security-setting-icon {
    border-color: color-mix(in srgb, var(--group-accent) 22%, var(--security-line));
    color: var(--group-accent);
    background: color-mix(in srgb, var(--group-accent) 11%, var(--security-surface-raised));
}
.security-sidebar :is(.accordion-button, .nav-link):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--group-accent) 28%, transparent);
    outline-offset: 2px;
    border-color: var(--group-border);
    box-shadow: 0 0 0 1px var(--security-surface), 0 4px 14px color-mix(in srgb, var(--group-accent) 14%, transparent) !important;
}
.security-sidebar .nav-item:has(.nav-link.active)::before { border-color: var(--group-accent); }
.security-sidebar-footer { display: flex; gap: 8px; align-items: center; padding: 10px 13px; border-top: 1px solid var(--security-line); color: #7c8ba1; background: #fff; font-size: 10px; }
.security-sidebar-footer i { color: var(--security-primary); }

/* Context toolbar */
.security-toolbar {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 16px !important;
    border-bottom: 1px solid var(--security-line) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.025);
}
.security-page-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 17px; }
.security-page-context { display: grid; min-width: 0; line-height: 1.15; }
.security-page-kicker { color: var(--security-primary); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.security-page-context strong { margin: 2px 0; color: var(--security-ink); font-size: 14px; font-weight: 780; }
.security-page-context > span { max-width: 610px; overflow: hidden; color: var(--security-muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.security-toolbar-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.security-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #fed7aa; border-radius: 999px; color: #9a5b0a; background: #fff7ed; font-size: 10px; font-weight: 750; white-space: nowrap; }
.security-status-pill i { color: #f59e0b; font-size: 7px; }
.security-status-pill.is-enabled { border-color: #a7f3d0; color: #047857; background: #ecfdf5; }
.security-status-pill.is-enabled i { color: #10b981; }
.security-nav-toggle { display: none; width: 36px; height: 36px; border: 1px solid var(--security-line); border-radius: 10px; color: #475569; background: #fff; }
.security-toolbar .btn { min-height: 34px; border-radius: 9px; padding-inline: 11px; font-weight: 700; font-size: 11px; }
.security-toolbar .btn-success { border-color: var(--security-success); background: var(--security-success); box-shadow: 0 4px 10px rgba(5,150,105,.15); }

/* Workspace and universal dynamic content */
.security-module .workspace-content { min-width: 0; padding: 15px !important; overflow: auto; background: var(--security-canvas); }
#securityPageContainer { width: min(100%, 1460px); margin: 0 auto; }
#securityPageContainer > .card, #securityPageContainer > .row, #securityPageContainer > .nav, #securityPageContainer > [id$="Pane"] { animation: security-enter .2s ease both; }
@keyframes security-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#securityPageContainer .card {
    overflow: hidden;
    border: 1px solid var(--security-line) !important;
    border-radius: var(--security-radius) !important;
    background: var(--security-panel);
    box-shadow: var(--security-shadow) !important;
}
#securityPageContainer .card.bg-light { background: #f8fafc !important; box-shadow: none !important; }
#securityPageContainer .card-header,
#securityPageContainer .card-header.bg-primary,
#securityPageContainer .card-header.bg-gradient-primary {
    min-height: 48px;
    padding: 11px 15px !important;
    border-bottom: 1px solid var(--security-line) !important;
    color: var(--security-ink) !important;
    background: linear-gradient(180deg, #fff, #fbfdff) !important;
    font-size: 13px;
    font-weight: 780;
}
#securityPageContainer .card-header > i, #securityPageContainer .card-header > span > i { color: var(--security-primary); }
#securityPageContainer .card-header .btn-outline-light {
    border-color: var(--security-line);
    color: #475569;
    background: #fff;
}
#securityPageContainer .card-header .btn-outline-light:hover { border-color: #a8c2f7; color: var(--security-primary-dark); background: #edf4ff; }
#securityPageContainer .card-body { padding: 15px; }
#securityPageContainer label { color: #334155; }
#securityPageContainer .form-label { margin-bottom: 5px; font-size: 11px; font-weight: 730; }
#securityPageContainer .form-control, #securityPageContainer .form-select, #securityPageContainer .input-group-text {
    min-height: 36px;
    border-color: #d5deea;
    border-radius: 9px;
    color: var(--security-ink);
    background-color: #fff;
    font-size: 12px;
}
#securityPageContainer .form-control-sm, #securityPageContainer .form-select-sm { min-height: 32px; font-size: 11px; }
#securityPageContainer .form-control:focus, #securityPageContainer .form-select:focus { border-color: #8fb3ff; box-shadow: 0 0 0 3px rgba(37,99,235,.11); }
#securityPageContainer .form-text, #securityPageContainer .text-muted { color: var(--security-muted) !important; font-size: 10.5px; }
#securityPageContainer .form-check-input { border-color: #bdc9d9; box-shadow: none; }
#securityPageContainer .form-check-input:checked { border-color: var(--security-primary); background-color: var(--security-primary); }
#securityPageContainer .form-switch .form-check-input { cursor: pointer; }
#securityPageContainer .btn { border-radius: 8px; font-weight: 680; font-size: 11px; }
#securityPageContainer .btn-primary { border-color: var(--security-primary); background: var(--security-primary); box-shadow: 0 4px 10px rgba(37,99,235,.12); }
#securityPageContainer .btn-primary:hover { border-color: var(--security-primary-dark); background: var(--security-primary-dark); }
#securityPageContainer .alert { border: 1px solid transparent; border-radius: 11px; font-size: 11.5px; }
#securityPageContainer .alert-info { border-color: #bae6fd; color: #075985; background: #f0f9ff; }
#securityPageContainer .alert-warning { border-color: #fde68a; color: #92400e; background: #fffbeb; }
#securityPageContainer .alert-secondary { border-color: #dce4ef; color: #475569; background: #f8fafc; }
#securityPageContainer .alert-danger { border-color: #fecaca; color: #991b1b; background: #fef2f2; }
#securityPageContainer .nav-tabs { gap: 5px; padding: 5px; border: 1px solid var(--security-line); border-radius: 11px; background: #fff; box-shadow: 0 3px 14px rgba(15,23,42,.04); }
#securityPageContainer .nav-tabs .nav-link { padding: 7px 12px; border: 0; border-radius: 8px; color: #64748b; font-weight: 730; }
#securityPageContainer .nav-tabs .nav-link.active { color: #fff; background: var(--security-primary); }
#securityPageContainer .table-responsive { border: 1px solid var(--security-line); border-radius: 11px; background: #fff; scrollbar-width: thin; }
#securityPageContainer .table { margin: 0; color: #334155; font-size: 11px; }
#securityPageContainer .table th { padding: 9px 10px; border-color: #e7edf5; color: #52627a; background: #f6f9fc; font-size: 9.5px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
#securityPageContainer .table td { padding: 8px 10px; border-color: #e9eef5; vertical-align: middle; }
#securityPageContainer .table tbody tr:hover > * { background: #f8fbff; }
#securityPageContainer .table thead { position: sticky; top: 0; z-index: 2; }
#permissionsTable td.small label { display: inline-flex; align-items: center; gap: 5px; min-width: 70px; padding: 2px 0; font-size: 10px; }
#permissionsTable td.small input { accent-color: var(--security-primary); }
#securityPageContainer code { padding: 2px 5px; border-radius: 5px; color: #6d28d9; background: #f3e8ff; }
#securityPageContainer .spinner-border { color: var(--security-primary); }

/* Modal polish */
.security-module .modal-content { overflow: hidden; border: 0; border-radius: 16px; box-shadow: 0 24px 70px rgba(15,23,42,.24); }
.security-module .modal-header { padding: 14px 17px; border-bottom-color: var(--security-line); color: var(--security-ink) !important; background: #fff !important; }
.security-module .modal-title { margin: 2px 0 0; color: var(--security-ink); font-size: 15px; font-weight: 780; }
.security-module .modal-body { color: #475569; font-size: 12px; }
.security-module .modal-footer { padding: 10px 16px; border-top-color: var(--security-line); background: #f8fafc; }
.security-guide-icon { width: 40px; height: 40px; }
.security-guide-intro { margin-bottom: 15px; color: #52627a; line-height: 1.6; }
.security-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.security-guide-grid article { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; padding: 12px; border: 1px solid var(--security-line); border-radius: 11px; background: #fbfdff; }
.security-guide-grid article > i { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--security-primary); background: #eaf2ff; font-size: 16px; }
.security-guide-grid strong { color: var(--security-ink); font-size: 12px; }
.security-guide-grid span { margin-top: 3px; color: var(--security-muted); font-size: 10.5px; line-height: 1.45; }
.security-guide-note { display: flex; gap: 10px; margin-top: 12px; padding: 11px 12px; border: 1px solid #ddd6fe; border-radius: 11px; color: #5b21b6; background: #f5f3ff; }
.security-guide-note > div { display: grid; }
.security-guide-note span { color: #6d5c84; font-size: 10.5px; }
.security-guide-modal { height: min(860px,calc(100vh - 34px)); }
.security-guide-modal .modal-body { padding: 0; background: #f4f7fb; }
.security-guide-modal .modal-footer > span { font-size: 10px; }
.security-guide-layout { display: grid; grid-template-columns: 190px minmax(0,1fr); min-height: 0; }
.security-guide-nav { position: sticky; top: 0; align-self: start; display: grid; gap: 3px; padding: 17px 12px; border-right: 1px solid var(--security-line); background: #fff; }
.security-guide-nav-label { padding: 0 9px 7px; color: #94a3b8; font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.security-guide-nav a { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; color: #53637a; font-size: 10px; font-weight: 700; text-decoration: none; }
.security-guide-nav a i { width: 14px; color: #7c8ca4; text-align: center; }
.security-guide-nav a:hover, .security-guide-nav a:focus { color: #1d4ed8; background: #eff6ff; }
.security-guide-nav a:hover i, .security-guide-nav a:focus i { color: #2563eb; }
.security-guide-content { display: grid; gap: 12px; min-width: 0; padding: 15px; }
.security-guide-hero, .security-guide-section { scroll-margin-top: 12px; border: 1px solid var(--security-line); border-radius: 13px; background: #fff; box-shadow: 0 4px 16px rgba(15,23,42,.035); }
.security-guide-hero { padding: 16px; background: radial-gradient(circle at 100% 0,rgba(109,40,217,.12),transparent 35%),linear-gradient(135deg,#fff,#f4f7ff); }
.security-guide-level { display: inline-flex; padding: 3px 7px; border-radius: 999px; color: #1d4ed8; background: #dbeafe; font-size: 8px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.security-guide-hero > h6 { margin: 7px 0 4px; color: var(--security-ink); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.security-guide-hero > p { max-width: 820px; margin: 0; color: #607089; font-size: 10.5px; line-height: 1.55; }
.security-guide-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.security-guide-steps li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; border: 1px solid #dbe5f2; border-radius: 10px; background: rgba(255,255,255,.84); }
.security-guide-steps li > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #fff; background: linear-gradient(135deg,#2563eb,#7c3aed); font-size: 9px; font-weight: 850; flex: 0 0 auto; }
.security-guide-steps li > div { display: grid; min-width: 0; }
.security-guide-steps strong { color: var(--security-ink); font-size: 9.5px; }
.security-guide-steps small { overflow: hidden; color: #728198; font-size: 8.5px; line-height: 1.35; }
.security-guide-section { overflow: hidden; }
.security-guide-section-title { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid #e9eef5; background: linear-gradient(180deg,#fff,#fbfcfe); }
.security-guide-section-title > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #2563eb; background: #eaf2ff; font-size: 14px; }
.security-guide-section-title > div { display: grid; }
.security-guide-section-title span { color: #7c3aed; font-size: 7.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.security-guide-section-title h6 { margin: 1px 0 0; color: var(--security-ink); font-size: 12px; font-weight: 800; }
.security-guide-doc-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; }
.security-guide-doc-grid > article { min-width: 0; padding: 13px; border-right: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6; }
.security-guide-doc-grid > article:nth-child(2n) { border-right: 0; }
.security-guide-doc-grid > article:nth-last-child(-n+2) { border-bottom: 0; }
.security-guide-doc-grid h6 { margin: 0 0 5px; color: #26354b; font-size: 10.5px; font-weight: 800; }
.security-guide-doc-grid p { margin: 0; color: #66768c; font-size: 9.5px; line-height: 1.52; }
.security-guide-doc-grid ul { margin: 7px 0 0; padding-left: 17px; color: #66768c; font-size: 9px; line-height: 1.55; }
.security-guide-doc-grid dl { display: grid; grid-template-columns: max-content 1fr; gap: 5px 9px; margin: 0; font-size: 9px; }
.security-guide-doc-grid dt { color: #334155; font-weight: 800; }
.security-guide-doc-grid dd { margin: 0; color: #6b7a90; }
.security-guide-doc-grid code { font-size: 8.5px; }
.security-guide-callout { display: flex; gap: 7px; margin-top: 9px; padding: 8px 9px; border: 1px solid #dbeafe; border-radius: 9px; color: #1e40af; background: #eff6ff; font-size: 8.8px; line-height: 1.45; }
.security-guide-callout.is-warning { border-color: #fde68a; color: #92400e; background: #fffbeb; }
.security-guide-callout.is-success { border-color: #a7f3d0; color: #065f46; background: #ecfdf5; }
.security-guide-section > .security-guide-callout { margin: 0 13px 13px; }
.security-guide-flow { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 13px; border-bottom: 1px solid #edf1f6; color: #64748b; background: #f8fafc; font-size: 8.5px; }
.security-guide-flow span { padding: 4px 7px; border: 1px solid #dce5ef; border-radius: 7px; color: #42526a; background: #fff; font-weight: 720; }
.security-guide-flow i { color: #94a3b8; }
.security-guide-provider { display: flex; gap: 10px; }
.security-guide-provider > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 16px; flex: 0 0 auto; }
.security-guide-provider > span.is-google { color: #4285f4; background: #eff6ff; }
.security-guide-provider > span.is-facebook { color: #1877f2; background: #eff6ff; }
.security-guide-provider > span.is-apple { color: #111827; background: #f1f5f9; }
.security-guide-provider > div { min-width: 0; }
.security-guide-provider a { display: inline-flex; gap: 4px; margin-top: 6px; color: #2563eb; font-size: 8.5px; font-weight: 750; text-decoration: none; }
.security-guide-provider a:hover { text-decoration: underline; }
.security-guide-checklist { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 13px; }
.security-guide-checklist label { display: flex; align-items: flex-start; gap: 7px; padding: 7px 8px; border: 1px solid #e4eaf2; border-radius: 8px; color: #53637a; background: #fbfdff; font-size: 9px; line-height: 1.4; }
.security-guide-checklist input { margin-top: 1px; accent-color: #2563eb; }
.security-guide-troubleshooting { display: grid; gap: 6px; padding: 12px; }
.security-guide-troubleshooting details { border: 1px solid #e3e9f1; border-radius: 9px; background: #fbfdff; }
.security-guide-troubleshooting summary { padding: 8px 10px; color: #334155; cursor: pointer; font-size: 9.5px; font-weight: 750; }
.security-guide-troubleshooting p { margin: 0; padding: 0 10px 10px; color: #68788e; font-size: 9px; line-height: 1.5; }

/* Responsive behavior */
@media (max-width: 1199px) {
    .security-sidebar { width: 244px; min-width: 244px; }
    .security-page-context > span { max-width: 380px; }
    .security-status-pill { display: none; }
}
@media (max-width: 991.98px) {
    .security-module .main-area { position: relative; flex-direction: column !important; overflow: visible; }
    .security-sidebar {
        position: absolute;
        inset: 68px auto auto 8px;
        z-index: 1040;
        width: min(300px, calc(100vw - 16px));
        min-width: 0;
        max-height: calc(100vh - 92px);
        border: 1px solid var(--security-line);
        border-radius: 14px;
        box-shadow: 0 20px 55px rgba(15,23,42,.2);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-7px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }
    .security-sidebar.is-mobile-open { opacity: 1; visibility: visible; transform: none; }
    .security-nav-toggle { display: inline-grid; place-items: center; }
    .security-module .right-workspace { width: 100% !important; }
}
@media (max-width: 767.98px) {
    .security-toolbar { min-height: 62px; padding: 8px 10px !important; }
    .security-page-icon { display: none; }
    .security-page-context > span { display: none; }
    .security-page-context strong { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .security-toolbar-actions .btn-outline-secondary span { display: none; }
    .security-toolbar-actions .btn { padding-inline: 9px; }
    .security-module .workspace-content { padding: 9px !important; }
    .security-sidebar .accordion-button {
        min-height: 44px;
        grid-template-columns: 28px minmax(0, 1fr) 12px;
    }
    .security-category-icon { width: 28px; height: 28px; }
    .security-sidebar .nav-link { min-height: 36px; }
    #securityPageContainer .card-body { padding: 12px; }
    #securityPageContainer .row.g-3 { --bs-gutter-y: .65rem; }
    .security-guide-grid { grid-template-columns: 1fr; }
    .security-guide-layout { grid-template-columns: 1fr; }
    .security-guide-nav { position: static; grid-template-columns: repeat(4,minmax(0,1fr)); border-right: 0; border-bottom: 1px solid var(--security-line); }
    .security-guide-nav-label { grid-column: 1 / -1; }
    .security-guide-nav a { justify-content: center; padding: 6px; font-size: 0; }
    .security-guide-nav a i { font-size: 13px; }
    .security-guide-content { padding: 9px; }
    .security-guide-steps, .security-guide-doc-grid, .security-guide-checklist { grid-template-columns: 1fr; }
    .security-guide-doc-grid > article { border-right: 0; border-bottom: 1px solid #edf1f6 !important; }
    .security-guide-doc-grid > article:last-child { border-bottom: 0 !important; }
    .security-guide-flow { align-items: stretch; flex-direction: column; }
    .security-guide-flow i { transform: rotate(90deg); text-align: center; }
}
@media (max-width: 479.98px) {
    .security-page-context strong { max-width: 150px; font-size: 12px; }
    .security-page-kicker { font-size: 8px; }
    #securityPageContainer .card-header { padding: 10px 12px !important; }
    #securityPageContainer .card-body { padding: 10px; }
    #securityPageContainer .d-flex.justify-content-between { align-items: stretch !important; flex-direction: column; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    #securityPageContainer > *,
    .security-sidebar,
    .security-sidebar .nav-link,
    .security-category-icon { animation: none !important; transition: none !important; }
}
.security-module :focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 2px; }

/* Social authentication provider configuration */
.social-auth-settings { display: grid; gap: 12px; }
.social-auth-overview { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 15px 17px; border: 1px solid var(--security-line); border-radius: var(--security-radius); background: radial-gradient(circle at 92% -40%,rgba(96,165,250,.22),transparent 42%),linear-gradient(135deg,#fff 42%,#f1f5ff); box-shadow: var(--security-shadow); }
.social-auth-overview h3 { margin: 2px 0 3px; color: var(--security-ink); font-size: 18px; font-weight: 800; letter-spacing: -.025em; }
.social-auth-overview p { margin: 0; color: var(--security-muted); font-size: 10.5px; }
.social-master-switch { display: flex; align-items: center; gap: 10px; min-width: 245px; padding: 9px 11px; border: 1px solid #bfdbfe; border-radius: 13px; background: rgba(255,255,255,.9); box-shadow: 0 5px 16px rgba(37,99,235,.06); cursor: pointer; }
.social-master-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #2563eb; background: #eaf2ff; font-size: 15px; }
.social-master-switch > span:nth-child(2) { display: grid; gap: 1px; margin-right: auto; }
.social-master-switch strong { color: var(--security-ink); font-size: 11px; }
.social-master-switch small { color: var(--security-muted); font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; }
.social-policy-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.social-policy-grid > label { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 8px 10px; border: 1px solid var(--security-line); border-radius: 11px; background: #fff; box-shadow: 0 3px 12px rgba(15,23,42,.035); cursor: pointer; transition: border-color .16s ease, transform .16s ease; }
.social-policy-grid > label:hover { border-color: #bfdbfe; transform: translateY(-1px); }
.social-policy-grid input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--security-primary); flex: 0 0 auto; }
.social-policy-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #2563eb; background: #eff6ff; flex: 0 0 auto; }
.social-policy-grid strong { min-width: 0; overflow: hidden; color: var(--security-ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.social-policy-grid > label > .social-help { margin-left: auto; }
.social-policy-grid .social-role { cursor: default; }
.social-policy-grid .social-role select { min-width: 84px; max-width: 112px; margin-left: 2px; }
.social-provider-grid { display: grid; grid-template-columns: repeat(3,minmax(290px,1fr)); gap: 11px; align-items: stretch; }
.social-provider-card { display: flex; overflow: hidden; flex-direction: column; height: 100%; min-width: 0; border: 1px solid var(--security-line); border-radius: 14px; background: #fff; box-shadow: 0 7px 24px rgba(15,23,42,.055); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.social-provider-card.is-enabled { border-color: color-mix(in srgb,var(--provider-color) 42%,#dce4ef); box-shadow: 0 9px 25px color-mix(in srgb,var(--provider-color) 12%,transparent); transform: translateY(-1px); }
.social-provider-card header { display: flex; align-items: center; gap: 9px; min-height: 55px; padding: 10px 12px; border-bottom: 1px solid var(--security-line); background: linear-gradient(180deg,#fff,#fafcff); }
.social-provider-logo { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb,var(--provider-color) 24%,#e2e8f0); border-radius: 10px; color: var(--provider-color); background: color-mix(in srgb,var(--provider-color) 7%,#fff); font-size: 16px; }
.social-provider-heading { display: grid; min-width: 0; margin-right: auto; }
.social-provider-card header strong { color: var(--security-ink); font-size: 11.5px; }
.social-provider-card header small { overflow: hidden; color: var(--security-muted); font-size: 8.8px; text-overflow: ellipsis; white-space: nowrap; }
.social-provider-state { padding: 2px 6px; border-radius: 999px; color: #64748b; background: #eef2f7; font-size: 7.5px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.social-provider-card.is-enabled .social-provider-state { color: color-mix(in srgb,var(--provider-color) 80%,#0f172a); background: color-mix(in srgb,var(--provider-color) 10%,#fff); }
.social-provider-switch { margin: 0; padding-left: 2.2em; }
.social-provider-card .form-check-input:checked { border-color: var(--provider-color) !important; background-color: var(--provider-color) !important; }
.social-provider-body { display: grid; flex: 1; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 9px; padding: 11px 12px; opacity: .6; transition: opacity .18s ease; }
.social-provider-card.is-enabled .social-provider-body { opacity: 1; }
.social-field { min-width: 0; }
.social-field.is-wide { grid-column: 1 / -1; }
.social-field .form-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 15px; margin-bottom: 4px; }
.social-field .form-label > span:first-child { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.social-field .form-control { width: 100%; min-width: 0; height: 32px; padding: 5px 8px; font-size: 9.5px; text-overflow: ellipsis; }
.social-help { display: inline-grid; place-items: center; width: 17px; height: 17px; border: 1px solid #cbd5e1; border-radius: 50%; color: #64748b; background: #fff; box-shadow: 0 2px 5px rgba(15,23,42,.07); cursor: help; font-size: 11px; line-height: 1; flex: 0 0 auto; transition: color .15s ease,border-color .15s ease,background .15s ease,transform .15s ease; }
.social-help:hover, .social-help:focus { border-color: #60a5fa; color: #1d4ed8; background: #eff6ff; outline: 0; transform: scale(1.08); }
.social-secret-saved { display: inline-flex; gap: 4px; align-items: center; color: var(--security-success); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.social-private-key { min-height: 52px !important; resize: vertical; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px !important; }
.social-provider-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 37px; padding: 8px 12px; border-top: 1px solid #edf1f6; color: #64748b; background: #fafcff; font-size: 8.5px; }
.social-provider-card footer span, .social-provider-card footer a { display: inline-flex; align-items: center; gap: 5px; }
.social-provider-card footer a { color: var(--provider-color); font-weight: 750; text-decoration: none; }
.social-provider-card footer a:hover { text-decoration: underline; }
.social-auth-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 14px; border: 1px solid var(--security-line); border-radius: 12px; background: #fff; }
.social-auth-footer > div { display: flex; align-items: center; gap: 10px; }
.social-auth-footer > div > i { color: var(--security-success); font-size: 18px; }
.social-auth-footer span { display: grid; }
.social-auth-footer strong { font-size: 10.5px; }
.social-auth-footer small { color: var(--security-muted); font-size: 9.5px; }
.security-tooltip .tooltip-inner { max-width: 280px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #f8fafc; background: #111827; box-shadow: 0 8px 24px rgba(15,23,42,.22); font-size: 10px; line-height: 1.45; text-align: left; }
@media (max-width:1399px) { .social-policy-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .social-provider-grid { grid-template-columns: repeat(2,minmax(280px,1fr)); } }
@media (max-width:991px) { .social-provider-grid { grid-template-columns: 1fr; } }
@media (max-width:767px) { .social-auth-overview { grid-template-columns: 1fr; } .social-master-switch { min-width: 0; } .social-policy-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .social-auth-footer { align-items: stretch; flex-direction: column; } }
@media (max-width:479px) { .social-policy-grid { grid-template-columns: 1fr; } .social-provider-body { grid-template-columns: 1fr; } .social-field.is-wide { grid-column:auto; } .social-provider-card footer { align-items: flex-start; flex-direction: column; } }

/* Authentication database administrator provisioning */
.security-admin-provision { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 13px; border: 1px solid #dbe4ef; border-radius: 12px; background: linear-gradient(135deg,#fff,#f8fafc); }
.security-admin-provision.is-ready { border-color: #bfdbfe; background: linear-gradient(135deg,#fff,#eff6ff); box-shadow: 0 5px 18px rgba(37,99,235,.06); }
.security-admin-provision-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; color: #2563eb; background: #dbeafe; font-size: 17px; }
.security-admin-provision-copy { display: grid; gap: 3px; min-width: 0; }
.security-admin-provision-copy h6 { margin: 1px 0 0; color: var(--security-ink); font-size: 12px; font-weight: 800; }
.security-admin-provision-copy p { margin: 0; color: #64748b; font-size: 9.5px; }
.security-admin-provision-copy small { display: inline-flex; align-items: center; gap: 5px; color: #52627a; font-size: 8.8px; }
.security-admin-provision-copy code { white-space: nowrap; }
.security-admin-provision .btn { white-space: nowrap; }
.security-admin-dialog { text-align: left; }
.security-admin-dialog > p { margin: 0 0 10px; color: #64748b; font-size: 11px; line-height: 1.45; }
.security-admin-dialog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.security-admin-dialog-grid label { color: #334155; font-size: 10px; font-weight: 750; }
.security-admin-dialog-grid label.is-wide { grid-column: 1 / -1; }
.security-admin-dialog-grid .swal2-input { width: 100%; height: 38px; margin: 4px 0 0; padding: 7px 9px; border-radius: 8px; font-size: 11px; }
.security-admin-dialog-note { display: flex; gap: 7px; margin-top: 10px; padding: 8px 9px; border: 1px solid #a7f3d0; border-radius: 8px; color: #065f46; background: #ecfdf5; font-size: 9px; }
.security-admin-success { text-align: left; }
.security-admin-success > p { color: #64748b; font-size: 11px; }
.security-admin-success dl { display: grid; grid-template-columns: max-content 1fr; gap: 5px 10px; padding: 10px; border: 1px solid #dbe4ef; border-radius: 9px; background: #f8fafc; font-size: 10px; }
.security-admin-success dt { color: #64748b; }
.security-admin-success dd { margin: 0; color: #1e293b; font-weight: 750; }
.security-admin-success small { color: #64748b; font-size: 9px; }
@media (max-width:767px) { .security-admin-provision { grid-template-columns: auto minmax(0,1fr); } .security-admin-provision .btn { grid-column: 1 / -1; } }
@media (max-width:479px) { .security-admin-dialog-grid { grid-template-columns: 1fr; } .security-admin-dialog-grid label.is-wide { grid-column: auto; } }

/* Security colour-mode bridge
   Keep the 12 dynamically rendered configuration pages on one set of semantic
   surfaces. This layer is intentionally presentation-only: page IDs, Bootstrap
   data attributes, form names and save handlers remain untouched. */
.security-module {
    --security-header-height: 68px;
    --security-surface: #ffffff;
    --security-surface-raised: #ffffff;
    --security-surface-soft: #f8fafc;
    --security-input: #ffffff;
    --security-hover: #f5f8fc;
    --security-subtle-line: #e8edf4;
    --security-code: #f3e8ff;
    --security-code-ink: #6d28d9;
    --security-overlay: rgba(15, 23, 42, .5);
    --security-accent-contrast: var(--pp-accent-contrast, #ffffff);
    color-scheme: light;
}

html[data-pp-theme="dark"] .security-module {
    --security-primary: var(--pp-accent, #60a5fa);
    --security-primary-dark: color-mix(in srgb, var(--pp-accent, #60a5fa) 78%, black);
    --security-violet: color-mix(in srgb, var(--pp-accent, #60a5fa) 78%, var(--pp-text, #e7edf7));
    --security-ink: var(--pp-text, #e7edf7);
    --security-muted: var(--pp-text-muted, #9aabc1);
    --security-line: var(--pp-border, #2b3b52);
    --security-soft: var(--pp-surface-soft, #111a2b);
    --security-canvas: var(--pp-app-bg, #0b1120);
    --security-panel: var(--pp-surface, #111a2b);
    --security-surface: var(--pp-surface, #111a2b);
    --security-surface-raised: var(--pp-surface-raised, #18243a);
    --security-surface-soft: var(--pp-surface-soft, #151f33);
    --security-input: var(--pp-input-bg, #101827);
    --security-hover: var(--pp-surface-muted, #17243a);
    --security-subtle-line: var(--pp-border, #25344a);
    --security-code: var(--pp-accent-soft, #2d2146);
    --security-code-ink: var(--pp-accent, #d8b4fe);
    --security-overlay: rgba(0, 0, 0, .7);
    --security-accent-contrast: var(--pp-accent-contrast, #ffffff);
    --security-shadow: 0 10px 30px var(--pp-shadow-color, rgba(0, 0, 0, .22));
    color-scheme: dark;
}

/* Keep the left navigation and context canvas on the same baseline. */
.security-sidebar .security-sidebar-header,
.security-toolbar {
    box-sizing: border-box;
    flex: 0 0 var(--security-header-height);
    width: 100%;
    height: var(--security-header-height);
    min-height: var(--security-header-height);
    max-height: var(--security-header-height);
}

html[data-pp-theme="dark"] .security-module,
html[data-pp-theme="dark"] .security-module .main-area,
html[data-pp-theme="dark"] .security-module .right-workspace,
html[data-pp-theme="dark"] .security-module .workspace-content {
    color: var(--security-ink);
    background: var(--security-canvas) !important;
}

html[data-pp-theme="dark"] .security-sidebar {
    color: var(--security-ink);
    background: var(--security-surface-soft);
    border-color: var(--security-line);
}
html[data-pp-theme="dark"] .security-sidebar .security-sidebar-header,
html[data-pp-theme="dark"] .security-nav-tools,
html[data-pp-theme="dark"] .security-sidebar-footer,
html[data-pp-theme="dark"] .security-toolbar {
    color: var(--security-ink);
    background: var(--security-surface) !important;
    border-color: var(--security-line) !important;
    box-shadow: none;
}
html[data-pp-theme="dark"] .security-module-count,
html[data-pp-theme="dark"] .social-provider-state {
    color: var(--security-muted);
    background: var(--pp-surface-muted);
}
html[data-pp-theme="dark"] .security-nav-search input,
html[data-pp-theme="dark"] .security-nav-toggle {
    color: var(--security-ink);
    background: var(--security-input);
    border-color: var(--security-line);
}
html[data-pp-theme="dark"] .security-nav-search input:focus {
    color: var(--security-ink);
    background: var(--security-surface-raised);
}
html[data-pp-theme="dark"] .security-nav-search button { color: var(--security-muted); }
html[data-pp-theme="dark"] .security-nav-search button:hover { color: var(--security-ink); background: var(--security-hover); }
html[data-pp-theme="dark"] .security-sidebar .accordion-item { --group-soft: color-mix(in srgb, var(--group-accent) 12%, var(--security-surface)); }
html[data-pp-theme="dark"] .security-sidebar .accordion-button {
    color: var(--security-ink);
    background: var(--security-surface);
    border-color: var(--security-line);
    box-shadow: none !important;
}
html[data-pp-theme="dark"] .security-sidebar .accordion-button:hover { color: color-mix(in srgb,var(--group-accent) 75%,var(--security-ink)); background: var(--security-hover); }
html[data-pp-theme="dark"] .security-sidebar .accordion-button:not(.collapsed),
html[data-pp-theme="dark"] .security-sidebar .nav-link.active { background: var(--group-soft); }
html[data-pp-theme="dark"] .security-sidebar .accordion-button::after { filter: invert(1) grayscale(1); }
html[data-pp-theme="dark"] .security-sidebar .nav-link { color: var(--security-muted); }
html[data-pp-theme="dark"] .security-sidebar .nav-link:hover { background: color-mix(in srgb,var(--group-accent) 10%,var(--security-surface)); }

/* Bootstrap content emitted by each Security page. */
html[data-pp-theme="dark"] #securityPageContainer .card,
html[data-pp-theme="dark"] #securityPageContainer .card.bg-light,
html[data-pp-theme="dark"] #securityPageContainer .bg-white,
html[data-pp-theme="dark"] #securityPageContainer .bg-light,
html[data-pp-theme="dark"] #securityPageContainer .border.rounded,
html[data-pp-theme="dark"] #securityPageContainer .accordion-item,
html[data-pp-theme="dark"] #securityPageContainer .accordion-body {
    color: var(--security-ink) !important;
    background: var(--security-surface) !important;
    border-color: var(--security-line) !important;
}
html[data-pp-theme="dark"] #securityPageContainer .card-header,
html[data-pp-theme="dark"] #securityPageContainer .card-header.bg-primary,
html[data-pp-theme="dark"] #securityPageContainer .card-header.bg-info,
html[data-pp-theme="dark"] #securityPageContainer .card-header.bg-gradient-primary,
html[data-pp-theme="dark"] #securityPageContainer .accordion-button {
    color: var(--security-ink) !important;
    background: linear-gradient(180deg,var(--security-surface-raised),var(--security-surface-soft)) !important;
    border-color: var(--security-line) !important;
}
html[data-pp-theme="dark"] #securityPageContainer .accordion-button::after { filter: invert(1) grayscale(1); }
html[data-pp-theme="dark"] #securityPageContainer label,
html[data-pp-theme="dark"] #securityPageContainer .form-label,
html[data-pp-theme="dark"] #securityPageContainer .form-check-label,
html[data-pp-theme="dark"] #securityPageContainer .card-title,
html[data-pp-theme="dark"] #securityPageContainer h1,
html[data-pp-theme="dark"] #securityPageContainer h2,
html[data-pp-theme="dark"] #securityPageContainer h3,
html[data-pp-theme="dark"] #securityPageContainer h4,
html[data-pp-theme="dark"] #securityPageContainer h5,
html[data-pp-theme="dark"] #securityPageContainer h6 { color: var(--security-ink); }
html[data-pp-theme="dark"] #securityPageContainer .form-control,
html[data-pp-theme="dark"] #securityPageContainer .form-select,
html[data-pp-theme="dark"] #securityPageContainer .input-group-text,
html[data-pp-theme="dark"] #securityPageContainer .swal2-input,
html[data-pp-theme="dark"] #securityPageContainer .swal2-select {
    color: var(--security-ink);
    background-color: var(--security-input);
    border-color: var(--security-line);
}
html[data-pp-theme="dark"] #securityPageContainer .form-control::placeholder { color: var(--security-muted); opacity: 1; }
html[data-pp-theme="dark"] #securityPageContainer .form-control:disabled,
html[data-pp-theme="dark"] #securityPageContainer .form-select:disabled { color: var(--security-muted); background: var(--pp-surface-muted); opacity: 1; }
html[data-pp-theme="dark"] #securityPageContainer option { color: var(--security-ink); background: var(--security-input); }
html[data-pp-theme="dark"] #securityPageContainer .form-check-input { background-color: var(--security-input); border-color: var(--pp-border-strong); }
html[data-pp-theme="dark"] #securityPageContainer .form-check-input:checked { background-color: var(--security-primary); border-color: var(--security-primary); }
html[data-pp-theme="dark"] #securityPageContainer .btn-outline-secondary { color: var(--security-muted); border-color: var(--pp-border-strong); }
html[data-pp-theme="dark"] #securityPageContainer .btn-outline-secondary:hover { color: var(--security-ink); background: var(--security-hover); }
html[data-pp-theme="dark"] #securityPageContainer .btn-secondary { color: var(--security-ink); background: var(--pp-surface-muted); border-color: var(--pp-border-strong); }
html[data-pp-theme="dark"] #securityPageContainer .nav-tabs { background: var(--security-surface); border-color: var(--security-line); box-shadow: none; }
html[data-pp-theme="dark"] #securityPageContainer .nav-tabs .nav-link { color: var(--security-muted); }
html[data-pp-theme="dark"] #securityPageContainer .nav-tabs .nav-link:hover { color: var(--security-ink); background: var(--security-hover); }
html[data-pp-theme="dark"] #securityPageContainer .nav-tabs .nav-link.active { color: #fff; background: var(--security-primary); }

/* Users, groups, permissions, sessions, audit and row-security grids. */
html[data-pp-theme="dark"] #securityPageContainer .table-responsive { background: var(--security-surface); border-color: var(--security-line); }
html[data-pp-theme="dark"] #securityPageContainer .table { --bs-table-bg: transparent; --bs-table-color: var(--security-ink); --bs-table-border-color: var(--security-subtle-line); color: var(--security-ink); }
html[data-pp-theme="dark"] #securityPageContainer .table th,
html[data-pp-theme="dark"] #securityPageContainer .table-light > * > * {
    color: var(--security-muted) !important;
    background: var(--security-surface-raised) !important;
    border-color: var(--security-subtle-line) !important;
}
html[data-pp-theme="dark"] #securityPageContainer .table td { color: var(--security-ink); border-color: var(--security-subtle-line); }
html[data-pp-theme="dark"] #securityPageContainer .table tbody tr:hover > * { background: var(--security-hover) !important; }
html[data-pp-theme="dark"] #securityPageContainer .border,
html[data-pp-theme="dark"] #securityPageContainer .border-top,
html[data-pp-theme="dark"] #securityPageContainer .border-bottom { border-color: var(--security-line) !important; }
html[data-pp-theme="dark"] #securityPageContainer code { color: var(--security-code-ink); background: var(--security-code); }

html[data-pp-theme="dark"] #securityPageContainer .alert-info { color: #9bdcff; background: #102c3d; border-color: #24526a; }
html[data-pp-theme="dark"] #securityPageContainer .alert-warning { color: #f9d78c; background: #392b14; border-color: #655126; }
html[data-pp-theme="dark"] #securityPageContainer .alert-secondary { color: var(--security-muted); background: var(--security-surface-raised); border-color: var(--security-line); }
html[data-pp-theme="dark"] #securityPageContainer .alert-danger { color: #fbb3b3; background: #3c1c25; border-color: #70303e; }

/* Future-theme contract. These presentation overrides intentionally consume
   only semantic application tokens; Security behavior and saved settings are
   untouched. */
.security-module :where(
    .security-page, .security-content, .security-sidebar, .security-header,
    .security-nav-tools, .security-card, .security-section, .security-subsection,
    .social-policy-grid > label, .social-provider-card, .social-provider-card header,
    .social-provider-card footer, .social-auth-footer, .security-admin-provision,
    .security-admin-success dl, .security-guide-modal, .security-guide-nav,
    .security-guide-hero, .security-guide-section, .security-guide-grid article
) {
    background: var(--security-surface) !important;
    color: var(--security-ink) !important;
    border-color: var(--security-line) !important;
}
.security-module :where(
    .security-sidebar-header, .security-page-header, .social-provider-card header,
    .social-provider-card footer, .security-guide-modal .modal-header,
    .security-guide-modal .modal-footer
) { background: var(--security-surface-soft) !important; }
.security-module :where(.social-provider-icon, .social-policy-icon, .security-admin-provision-icon) {
    background: color-mix(in srgb, var(--security-primary) 14%, var(--security-surface-raised)) !important;
    color: var(--security-primary) !important;
    border-color: color-mix(in srgb, var(--security-primary) 32%, var(--security-line)) !important;
}
.security-module :where(.social-help, .security-help, .security-icon-button) {
    background: var(--security-surface-raised) !important;
    color: var(--security-muted) !important;
    border-color: var(--security-line) !important;
}
.security-module :where(.social-help, .security-help, .security-icon-button):hover {
    background: var(--security-primary-soft) !important;
    color: var(--security-primary) !important;
    border-color: var(--security-primary) !important;
}
.security-module :where(.security-admin-dialog > p, .security-admin-provision-copy p, .security-admin-provision-copy small, .security-admin-success > p, .security-admin-success dt, .security-admin-success small) {
    color: var(--security-muted) !important;
}
.security-module :where(.security-admin-dialog-grid label, .security-admin-success dd) { color: var(--security-ink) !important; }
.security-module .security-tooltip .tooltip-inner {
    background: var(--security-surface-raised) !important;
    color: var(--security-ink) !important;
    border-color: var(--security-line) !important;
    box-shadow: 0 8px 24px var(--pp-shadow-color) !important;
}

/* Social identity cards and administrator provisioning. */
html[data-pp-theme="dark"] .social-auth-overview {
    background: radial-gradient(circle at 92% -40%,color-mix(in srgb,var(--pp-accent) 18%,transparent),transparent 42%),linear-gradient(135deg,var(--security-surface) 42%,var(--security-surface-soft));
}
html[data-pp-theme="dark"] .social-master-switch,
html[data-pp-theme="dark"] .social-policy-grid > label,
html[data-pp-theme="dark"] .social-provider-card,
html[data-pp-theme="dark"] .social-auth-footer {
    color: var(--security-ink);
    background: var(--security-surface);
    border-color: var(--security-line);
    box-shadow: none;
}
html[data-pp-theme="dark"] .social-provider-card header { background: linear-gradient(180deg,var(--security-surface-raised),var(--security-surface-soft)); }
html[data-pp-theme="dark"] .social-provider-card footer { color: var(--security-muted); background: var(--security-surface-soft); border-color: var(--security-line); }
html[data-pp-theme="dark"] .social-provider-logo { background: color-mix(in srgb,var(--provider-color) 10%,var(--security-surface-raised)); border-color: color-mix(in srgb,var(--provider-color) 35%,var(--security-line)); }
html[data-pp-theme="dark"] .social-help { color: var(--security-muted); background: var(--security-surface-raised); border-color: var(--pp-border-strong); box-shadow: none; }
html[data-pp-theme="dark"] .social-help:hover { color: var(--pp-accent); background: var(--pp-accent-soft); border-color: var(--pp-accent); }
html[data-pp-theme="dark"] .security-admin-provision,
html[data-pp-theme="dark"] .security-admin-provision.is-ready { background: linear-gradient(135deg,var(--security-surface),var(--security-surface-soft)); border-color: var(--security-line); box-shadow: none; }
html[data-pp-theme="dark"] .security-admin-provision-copy p,
html[data-pp-theme="dark"] .security-admin-provision-copy small { color: var(--security-muted); }

/* Native Security dialogs, the guide and dynamically injected 2FA modals. */
.security-module .modal-header .btn-close {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 9px;
    background-size: 11px;
    opacity: .66;
}
.security-module .modal-header .btn-close:hover { opacity: 1; background-color: var(--security-hover); }
html[data-pp-theme="dark"] .security-module .modal-content,
html[data-pp-theme="dark"] .security-module .modal-header,
html[data-pp-theme="dark"] .security-module .modal-body,
html[data-pp-theme="dark"] .security-module .modal-footer {
    color: var(--security-ink) !important;
    background: var(--security-surface-raised) !important;
    border-color: var(--security-line) !important;
}
html[data-pp-theme="dark"] .security-module .modal-header .btn-close { filter: invert(1) grayscale(1); }
html[data-pp-theme="dark"] .security-guide-modal .modal-body { background: var(--security-canvas) !important; }
html[data-pp-theme="dark"] .security-guide-nav,
html[data-pp-theme="dark"] .security-guide-hero,
html[data-pp-theme="dark"] .security-guide-section,
html[data-pp-theme="dark"] .security-guide-steps li,
html[data-pp-theme="dark"] .security-guide-flow span,
html[data-pp-theme="dark"] .security-guide-checklist label,
html[data-pp-theme="dark"] .security-guide-troubleshooting details {
    color: var(--security-ink);
    background: var(--security-surface);
    border-color: var(--security-line);
}
html[data-pp-theme="dark"] .security-guide-hero { background: radial-gradient(circle at 100% 0,color-mix(in srgb,var(--pp-accent) 16%,transparent),transparent 35%),linear-gradient(135deg,var(--security-surface),var(--security-surface-soft)); }
html[data-pp-theme="dark"] .security-guide-section-title,
html[data-pp-theme="dark"] .security-guide-flow { background: var(--security-surface-soft); border-color: var(--security-line); }
html[data-pp-theme="dark"] .security-guide-doc-grid > article { border-color: var(--security-subtle-line); }
html[data-pp-theme="dark"] .security-guide-hero > p,
html[data-pp-theme="dark"] .security-guide-steps small,
html[data-pp-theme="dark"] .security-guide-doc-grid p,
html[data-pp-theme="dark"] .security-guide-doc-grid ul,
html[data-pp-theme="dark"] .security-guide-doc-grid dd,
html[data-pp-theme="dark"] .security-guide-troubleshooting p { color: var(--security-muted); }
html[data-pp-theme="dark"] .security-guide-doc-grid h6,
html[data-pp-theme="dark"] .security-guide-doc-grid dt,
html[data-pp-theme="dark"] .security-guide-troubleshooting summary { color: var(--security-ink); }

/* SweetAlert is appended directly under the themed body, not the workspace. */
html[data-pp-theme="dark"] .security-module .swal2-popup {
    color: var(--security-ink);
    background: var(--security-surface-raised);
    border: 1px solid var(--security-line);
}
html[data-pp-theme="dark"] .security-module .swal2-title,
html[data-pp-theme="dark"] .security-module .swal2-html-container,
html[data-pp-theme="dark"] .security-module .security-admin-dialog-grid label { color: var(--security-ink); }
html[data-pp-theme="dark"] .security-module .swal2-input,
html[data-pp-theme="dark"] .security-module .swal2-select,
html[data-pp-theme="dark"] .security-module .swal2-textarea {
    color: var(--security-ink);
    background: var(--security-input);
    border-color: var(--pp-border-strong);
}
html[data-pp-theme="dark"] .security-admin-dialog > p,
html[data-pp-theme="dark"] .security-admin-success > p,
html[data-pp-theme="dark"] .security-admin-success small { color: var(--security-muted); }
html[data-pp-theme="dark"] .security-admin-success dl { background: var(--security-surface); border-color: var(--security-line); }
html[data-pp-theme="dark"] .security-admin-success dt { color: var(--security-muted); }
html[data-pp-theme="dark"] .security-admin-success dd { color: var(--security-ink); }

/* Theme-aware help bubbles generated by Bootstrap. */
html[data-pp-theme="dark"] .security-module .security-tooltip .tooltip-inner {
    color: var(--security-ink);
    background: var(--security-surface-raised);
    border-color: var(--security-line);
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
html[data-pp-theme="dark"] .security-module .security-tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--security-surface-raised); }
html[data-pp-theme="dark"] .security-module .security-tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--security-surface-raised); }

@media (max-width: 767.98px) {
    .security-module { --security-header-height: 62px; }
}

/* Semantic module contract.  This intentionally has no theme-name selector:
   current and future palettes flow through the central --pp-* token bridge. */
.security-module :is(.security-content, .security-card, .security-provider-card, .security-admin-provision, .security-guide-section, .security-guide-steps li, .security-guide-troubleshooting details) {
    background-color: var(--security-surface);
    color: var(--security-ink);
    border-color: var(--security-line);
}
.security-module :is(.security-card-header, .security-provider-card-header, .security-guide-section-title, .security-guide-flow) {
    background-color: var(--security-surface-soft);
    color: var(--security-ink);
    border-color: var(--security-line);
}
.security-module :is(.modal-content, .modal-header, .modal-body, .modal-footer, .swal2-popup) {
    background-color: var(--security-surface-raised) !important;
    color: var(--security-ink) !important;
    border-color: var(--security-line) !important;
}
.security-module :is(.security-guide-modal .modal-body, .security-guide-nav) {
    background-color: var(--security-canvas) !important;
}
.security-module :is(.security-guide-hero, .security-admin-provision) {
    background: linear-gradient(135deg, var(--security-surface), var(--security-surface-soft));
    border-color: var(--security-line);
}
.security-module :is(.security-guide-hero p, .security-guide-doc-grid p, .security-guide-doc-grid ul, .security-guide-doc-grid dd, .security-admin-provision-copy p, .security-admin-provision-copy small) {
    color: var(--security-muted);
}
.security-module .security-tooltip .tooltip-inner {
    background: var(--security-surface-raised);
    color: var(--security-ink);
    border-color: var(--security-line);
    box-shadow: 0 10px 28px var(--pp-shadow-color);
}

/* ══════════════════════════════════════════════════════════════════════════
   Authentication database (Settings → Database)
   Built entirely on the --security-* variables, so the dark theme block above
   re-skins this page with no extra rules. Sizing follows the module scale:
   9–10px uppercase kickers, 11–12px body, 11–14px radii.
   ═════════════════════════════════════════════════════════════════════════ */
.secdb { display: grid; gap: 12px; }

/* ── Master switch ─────────────────────────────────────────────────────── */
.secdb-master {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px; align-items: center;
    padding: 13px 15px; border: 1px solid var(--security-line); border-radius: var(--security-radius);
    background: var(--security-panel); box-shadow: var(--security-shadow);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.secdb-master.is-on { border-color: color-mix(in srgb, var(--security-primary) 42%, var(--security-line)); }
.secdb-master-icon {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 19px;
    color: var(--security-muted); background: var(--security-soft);
    transition: color .16s ease, background .16s ease;
}
.secdb-master.is-on .secdb-master-icon {
    color: var(--security-primary); background: color-mix(in srgb, var(--security-primary) 14%, transparent);
}
.secdb-master-copy { display: grid; gap: 2px; min-width: 0; }
.secdb-master-copy strong { color: var(--security-ink); font-size: 13.5px; font-weight: 800; }
.secdb-master-copy p { margin: 0; color: var(--security-muted); font-size: 10.5px; }
.secdb-switch { display: inline-flex; align-items: center; gap: 9px; }
.secdb-switch-state { color: var(--security-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.secdb-master.is-on .secdb-switch-state { color: var(--security-primary); }
.secdb-switch input { width: 42px !important; height: 23px !important; margin: 0 !important; cursor: pointer; }

/* ── Panels ────────────────────────────────────────────────────────────── */
.secdb-panel {
    border: 1px solid var(--security-line); border-radius: var(--security-radius);
    background: var(--security-panel); box-shadow: var(--security-shadow); overflow: hidden;
}
.secdb-panel-head {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid var(--security-line);
    background: color-mix(in srgb, var(--security-soft) 60%, var(--security-panel));
}
.secdb-panel-head > i { color: var(--security-primary); font-size: 14px; }
.secdb-panel-head h6 { margin: 0; color: var(--security-ink); font-size: 12px; font-weight: 800; }
.secdb-panel-head small { color: var(--security-muted); font-size: 9.5px; }
.secdb-panel-head-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.secdb-panel-body { padding: 13px 14px; }

/* ── Source choice: two selectable cards, not loose radios ─────────────── */
.secdb-source { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 9px; }
.secdb-source label {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center;
    margin: 0; padding: 10px 12px; border: 1px solid var(--security-line); border-radius: 12px;
    background: var(--security-panel); cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.secdb-source label:hover { border-color: color-mix(in srgb, var(--security-primary) 35%, var(--security-line)); }
.secdb-source input { position: absolute; opacity: 0; pointer-events: none; }
.secdb-source label:has(input:checked) {
    border-color: var(--security-primary);
    background: color-mix(in srgb, var(--security-primary) 8%, var(--security-panel));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--security-primary) 12%, transparent);
}
.secdb-source label:has(input:focus-visible) { outline: 2px solid var(--security-primary); outline-offset: 2px; }
.secdb-source-icon {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 15px;
    color: var(--security-muted); background: var(--security-soft);
}
.secdb-source label:has(input:checked) .secdb-source-icon { color: var(--security-primary); background: color-mix(in srgb, var(--security-primary) 15%, transparent); }
.secdb-source-copy { display: grid; gap: 1px; min-width: 0; }
.secdb-source-copy strong { color: var(--security-ink); font-size: 11.5px; font-weight: 780; }
.secdb-source-copy span { color: var(--security-muted); font-size: 9.5px; }

/* ── Compact field rows ────────────────────────────────────────────────── */
.secdb-field { display: grid; gap: 5px; }
.secdb-field > label,
.secdb-label { color: var(--security-muted); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.secdb-panel-body .form-select, .secdb-panel-body .form-control { font-size: 12px; }
.secdb-panel-body .form-select-sm, .secdb-panel-body .form-control-sm { min-height: 32px; font-size: 11.5px; }

/* ── Field mapping grid — the core of the page ─────────────────────────── */
.secdb-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 9px; }
.secdb-map-item {
    display: grid; gap: 5px; padding: 9px 10px 10px;
    border: 1px solid var(--security-line); border-radius: 11px; background: var(--security-panel);
    transition: border-color .15s ease, background .15s ease;
}
.secdb-map-item.is-set { border-color: color-mix(in srgb, var(--security-success) 38%, var(--security-line)); }
.secdb-map-item.is-missing { border-color: color-mix(in srgb, var(--security-warning) 55%, var(--security-line)); background: color-mix(in srgb, var(--security-warning) 6%, var(--security-panel)); }
.secdb-map-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.secdb-map-head > i { color: var(--security-primary); font-size: 12px; }
.secdb-map-head strong { color: var(--security-ink); font-size: 11px; font-weight: 780; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secdb-tag {
    margin-left: auto; padding: 2px 6px; border-radius: 999px; font-size: 8.5px; font-weight: 850;
    letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.secdb-tag.is-req { color: var(--security-danger); background: color-mix(in srgb, var(--security-danger) 12%, transparent); }
.secdb-tag.is-opt { color: var(--security-muted); background: var(--security-soft); }
.secdb-map-item .form-select { min-height: 32px; font-size: 11.5px; }

/* custom (user-added) mappings */
.secdb-map-item.is-custom { border-style: dashed; }
.secdb-map-item.is-custom .secdb-map-head > i { color: var(--security-violet); }
.secdb-map-key {
    flex: 1; min-width: 0; padding: 2px 6px; border: 1px solid transparent; border-radius: 6px;
    color: var(--security-ink); background: transparent; font-size: 11px; font-weight: 780;
}
.secdb-map-key:hover { border-color: var(--security-line); }
.secdb-map-key:focus { border-color: var(--security-primary); background: var(--security-input, var(--security-panel)); outline: none; }
.secdb-map-key::placeholder { color: var(--security-muted); font-weight: 600; }
.secdb-map-x {
    display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
    color: var(--security-muted); background: transparent; font-size: 11px; cursor: pointer;
    transition: color .14s ease, background .14s ease;
}
.secdb-map-x:hover { color: var(--security-danger); background: color-mix(in srgb, var(--security-danger) 12%, transparent); }
.secdb-map-add {
    display: grid; place-content: center; gap: 3px; min-height: 74px; padding: 9px;
    border: 1px dashed color-mix(in srgb, var(--security-primary) 40%, var(--security-line));
    border-radius: 11px; color: var(--security-primary); background: transparent;
    font-size: 11px; font-weight: 750; cursor: pointer; text-align: center;
    transition: background .15s ease, border-color .15s ease;
}
.secdb-map-add:hover { border-color: var(--security-primary); background: color-mix(in srgb, var(--security-primary) 8%, transparent); }
.secdb-map-add i { font-size: 15px; }

/* ── New-table column builder ──────────────────────────────────────────── */
.secdb-cols { display: grid; gap: 7px; }
.secdb-col-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.secdb-col-row .form-control { min-height: 32px; font-size: 11.5px; }
.secdb-defaults { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.secdb-chip {
    padding: 3px 8px; border: 1px solid var(--security-line); border-radius: 999px;
    color: var(--security-muted); background: var(--security-soft); font-size: 9.5px; font-weight: 700;
}

/* ── Summary + footer ──────────────────────────────────────────────────── */
.secdb-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.secdb-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
    border: 1px solid var(--security-line); color: var(--security-muted); background: var(--security-soft);
    font-size: 9.5px; font-weight: 750;
}
.secdb-pill.is-ok { border-color: color-mix(in srgb, var(--security-success) 35%, transparent); color: var(--security-success); background: color-mix(in srgb, var(--security-success) 10%, transparent); }
.secdb-pill.is-warn { border-color: color-mix(in srgb, var(--security-warning) 40%, transparent); color: var(--security-warning); background: color-mix(in srgb, var(--security-warning) 10%, transparent); }
.secdb-foot { display: flex; align-items: center; gap: 9px; padding-top: 2px; }
.secdb-foot .secdb-summary { margin-right: auto; }
.secdb-empty {
    display: grid; gap: 4px; justify-items: center; padding: 22px 14px; border: 1px dashed var(--security-line);
    border-radius: 12px; color: var(--security-muted); text-align: center; font-size: 10.5px;
}
.secdb-empty i { color: var(--security-muted); font-size: 20px; }

@media (max-width: 640px) {
    .secdb-master { grid-template-columns: auto minmax(0, 1fr); }
    .secdb-switch { grid-column: 1 / -1; justify-content: space-between; }
    .secdb-col-row { grid-template-columns: minmax(0, 1fr) auto; }
    .secdb-col-row .form-control:nth-child(2) { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Login security (Settings → Login)
   Two-column studio: controls on the left, a live preview on the right that
   mirrors what the build emits. Same --security-* variables as the rest.
   ═════════════════════════════════════════════════════════════════════════ */
.seclg { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 12px; align-items: start; }
.seclg-controls { display: grid; gap: 12px; min-width: 0; }
.seclg-preview-wrap { position: sticky; top: 8px; display: grid; gap: 8px; min-width: 0; }

/* option chips — layout / background pickers */
.seclg-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 7px; }
.seclg-opt {
    display: grid; gap: 5px; justify-items: center; margin: 0; padding: 9px 7px; cursor: pointer;
    border: 1px solid var(--security-line); border-radius: 11px; background: var(--security-panel);
    color: var(--security-muted); font-size: 10px; font-weight: 750; text-align: center;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.seclg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seclg-opt:hover { border-color: color-mix(in srgb, var(--security-primary) 35%, var(--security-line)); }
.seclg-opt:has(input:checked) {
    border-color: var(--security-primary); color: var(--security-primary);
    background: color-mix(in srgb, var(--security-primary) 8%, var(--security-panel));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--security-primary) 12%, transparent);
}
/* miniature diagram of each layout, drawn in CSS */
.seclg-thumb { width: 100%; height: 34px; border-radius: 6px; border: 1px solid var(--security-line); background: var(--security-soft); display: flex; overflow: hidden; }
.seclg-thumb i { display: block; }
.seclg-thumb.is-centered { align-items: center; justify-content: center; }
.seclg-thumb.is-centered i { width: 46%; height: 62%; border-radius: 3px; background: var(--security-primary); opacity: .75; }
.seclg-thumb.is-split i:first-child { width: 45%; height: 100%; background: var(--security-primary); opacity: .7; }
.seclg-thumb.is-split i:last-child { width: 55%; height: 100%; background: transparent; }
.seclg-thumb.is-cover { position: relative; background: linear-gradient(135deg, var(--security-primary), var(--security-violet)); align-items: center; justify-content: center; }
.seclg-thumb.is-cover i { width: 42%; height: 62%; border-radius: 3px; background: var(--security-panel); }

/* compact control rows */
.seclg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 0; border-top: 1px solid var(--security-line); }
.seclg-row:first-child { border-top: 0; }
.seclg-row-copy { display: grid; gap: 1px; min-width: 0; }
.seclg-row-copy strong { color: var(--security-ink); font-size: 11.5px; font-weight: 700; }
.seclg-row-copy span { color: var(--security-muted); font-size: 9.5px; }
.seclg-row .form-control, .seclg-row .form-select { min-height: 30px; font-size: 11.5px; }
.seclg-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
.seclg-color { display: flex; align-items: center; gap: 6px; }
.seclg-color input[type=color] { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--security-line); border-radius: 7px; background: var(--security-panel); cursor: pointer; }
.seclg-color input[type=text] { flex: 1; min-width: 0; }
.seclg-range { display: flex; align-items: center; gap: 8px; }
.seclg-range input[type=range] { flex: 1; min-width: 90px; accent-color: var(--security-primary); }
.seclg-range output { min-width: 38px; color: var(--security-muted); font-size: 10px; font-weight: 750; text-align: right; }

/* preview frame */
.seclg-preview-head { display: flex; align-items: center; gap: 8px; }
.seclg-preview-head .secdb-label { margin-right: auto; }
.seclg-device { display: inline-flex; padding: 2px; border: 1px solid var(--security-line); border-radius: 999px; background: var(--security-soft); }
.seclg-device button {
    padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
    color: var(--security-muted); font-size: 10px; font-weight: 750;
}
.seclg-device button.is-on { background: var(--security-panel); color: var(--security-primary); box-shadow: 0 1px 3px rgba(2,6,23,.12); }
.seclg-frame {
    border: 1px solid var(--security-line); border-radius: var(--security-radius); overflow: hidden;
    background: var(--security-panel); box-shadow: var(--security-shadow);
}
.seclg-frame-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-bottom: 1px solid var(--security-line); background: var(--security-soft); }
.seclg-frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--security-line); }
.seclg-frame-bar span { margin-left: 6px; color: var(--security-muted); font-size: 9.5px; font-family: ui-monospace, monospace; }
.seclg-stage { height: 520px; overflow: auto; background: #0b1120; }
.seclg-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.seclg-stage.is-mobile { display: grid; place-items: center; padding: 14px; }
.seclg-stage.is-mobile iframe { width: 375px; height: 100%; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }

@media (max-width: 1100px) {
    .seclg { grid-template-columns: minmax(0, 1fr); }
    .seclg-preview-wrap { position: static; }
    .seclg-stage { height: 420px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Auth email templates (Settings → Email Templates)
   Master/detail: the template list on the left, editor + live preview right.
   ═════════════════════════════════════════════════════════════════════════ */
.secmail { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: 12px; align-items: start; }
.secmail-list { display: grid; gap: 7px; min-width: 0; }
.secmail-item {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center;
    padding: 9px 11px; border: 1px solid var(--security-line); border-radius: 11px;
    background: var(--security-panel); cursor: pointer; text-align: left;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.secmail-item:hover { border-color: color-mix(in srgb, var(--security-primary) 35%, var(--security-line)); }
.secmail-item.is-active {
    border-color: var(--security-primary);
    background: color-mix(in srgb, var(--security-primary) 8%, var(--security-panel));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--security-primary) 12%, transparent);
}
.secmail-item.is-off { opacity: .58; }
.secmail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--security-success); }
.secmail-item.is-off .secmail-dot { background: var(--security-muted); }
.secmail-item-copy { display: grid; gap: 1px; min-width: 0; }
.secmail-item-copy strong { color: var(--security-ink); font-size: 11.5px; font-weight: 750;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secmail-item-copy span { color: var(--security-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.secmail-edited { padding: 2px 6px; border-radius: 999px; font-size: 8.5px; font-weight: 850; letter-spacing: .05em;
    text-transform: uppercase; color: var(--security-warning);
    background: color-mix(in srgb, var(--security-warning) 14%, transparent); }

.secmail-editor { display: grid; gap: 10px; min-width: 0; }
.secmail-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.secmail-toolbar .secdb-label { margin-right: auto; }
.secmail-code {
    width: 100%; min-height: 190px; padding: 10px 12px; resize: vertical;
    border: 1px solid var(--security-line); border-radius: 10px;
    background: var(--security-input, var(--security-panel)); color: var(--security-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.6;
}
.secmail-code:focus { outline: none; border-color: var(--security-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--security-primary) 15%, transparent); }
.secmail-vars { display: flex; flex-wrap: wrap; gap: 5px; }
.secmail-var {
    padding: 3px 8px; border: 1px solid var(--security-line); border-radius: 999px; cursor: pointer;
    color: var(--security-primary); background: var(--security-soft);
    font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700;
}
.secmail-var:hover { border-color: var(--security-primary);
    background: color-mix(in srgb, var(--security-primary) 10%, transparent); }
.secmail-preview { border: 1px solid var(--security-line); border-radius: 12px; overflow: hidden; background: #eef2f7; }
.secmail-preview iframe { display: block; width: 100%; height: 460px; border: 0; background: #eef2f7; }

@media (max-width: 1000px) { .secmail { grid-template-columns: minmax(0, 1fr); } }

/* ── Social provider: readiness, linked count, callback URL ─────────────── */
.social-ready { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.social-ready.is-ready { color: var(--security-success); background: color-mix(in srgb, var(--security-success) 13%, transparent); }
.social-ready.is-incomplete { color: var(--security-warning); background: color-mix(in srgb, var(--security-warning) 15%, transparent); }
.social-linked { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
    color: var(--security-primary); background: color-mix(in srgb, var(--security-primary) 12%, transparent);
    font-size: 9.5px; font-weight: 800; }
.social-callback { margin-top: 4px; }
.social-callback-row { display: flex; align-items: center; gap: 7px; }
.social-callback-url { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--security-line);
    border-radius: 8px; background: var(--security-soft); color: var(--security-ink);
    font-family: ui-monospace, monospace; font-size: 10.5px; overflow-x: auto; white-space: nowrap; }
.social-callback-row .btn { flex: 0 0 auto; }
.social-callback-warn { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
    color: var(--security-warning); font-size: 9.5px; font-weight: 650; }

/* ── Social: build-readiness banner ─────────────────────────────────────── */
.social-build-status-host { display: grid; gap: 8px; }
.social-build-status {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
    padding: 11px 13px; border: 1px solid var(--security-line); border-radius: 12px;
    background: var(--security-panel); color: var(--security-ink); font-size: 11.5px; line-height: 1.55;
}
.social-build-status > i { font-size: 15px; line-height: 1.3; }
.social-build-status ul { margin: 5px 0 0; padding-left: 16px; }
.social-build-status li { margin: 2px 0; }
.social-build-status.is-ok { border-color: color-mix(in srgb, var(--security-success) 40%, var(--security-line));
    background: color-mix(in srgb, var(--security-success) 8%, var(--security-panel)); }
.social-build-status.is-ok > i { color: var(--security-success); }
.social-build-status.is-warn { border-color: color-mix(in srgb, var(--security-warning) 45%, var(--security-line));
    background: color-mix(in srgb, var(--security-warning) 9%, var(--security-panel)); }
.social-build-status.is-warn > i { color: var(--security-warning); }
.social-build-status.is-idle { color: var(--security-muted); }
.social-build-status.is-idle > i { color: var(--security-muted); }

/* ── Add/Edit User & Group modals (SweetAlert popup) ────────────────────── */
.secusr-modal { border-radius: 16px !important; padding-bottom: 8px; }
.secusr-modal .swal2-html-container { margin: 8px 0 0 !important; overflow: visible !important; }
.secusr-form { text-align: left; }
.secusr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.secusr-field { display: grid; gap: 5px; margin: 0; }
.secusr-field.secusr-wide { grid-column: 1 / -1; }
.secusr-field > span { color: var(--security-muted); font-size: 10px; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase; }
.secusr-field > span em { color: var(--security-danger); font-style: normal; }
.secusr-field input, .secusr-field select {
    width: 100%; padding: 9px 11px; border: 1px solid var(--security-line); border-radius: 9px;
    background: var(--security-input, var(--security-panel)); color: var(--security-ink);
    font-size: 13px; box-sizing: border-box; height: auto; margin: 0;
}
.secusr-field input:focus, .secusr-field select:focus {
    outline: none; border-color: var(--security-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--security-primary) 15%, transparent);
}
.secusr-status-hint { min-height: 18px; margin: 11px 0 0; display: flex; align-items: center; gap: 6px;
    color: var(--security-muted); font-size: 11.5px; }
.secusr-status-hint i { color: var(--security-primary); }
.secusr-check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 2px; padding: 11px 13px;
    border: 1px solid var(--security-line); border-radius: 11px; background: var(--security-soft); cursor: pointer; }
.secusr-check input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; }
.secusr-check span { display: grid; gap: 1px; }
.secusr-check strong { color: var(--security-ink); font-size: 12.5px; }
.secusr-check small { color: var(--security-muted); font-size: 10.5px; }
@media (max-width: 520px) { .secusr-grid { grid-template-columns: 1fr; } }

/* ── User list: role chip + status pill ─────────────────────────────────── */
.secusr-role { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
    color: var(--security-muted); background: var(--security-soft); border: 1px solid var(--security-line); }
.secusr-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 750; text-transform: capitalize; }
.secusr-status.is-active   { color: var(--security-success); background: color-mix(in srgb, var(--security-success) 12%, transparent); }
.secusr-status.is-pending  { color: var(--security-warning); background: color-mix(in srgb, var(--security-warning) 14%, transparent); }
.secusr-status.is-inactive { color: var(--security-muted);   background: var(--security-soft); }
.secusr-status.is-banned   { color: var(--security-danger);  background: color-mix(in srgb, var(--security-danger) 12%, transparent); }

/* ── Permissions editor (Security → Permissions, Static mode) ────────────── */
.secperm { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 12px; align-items: start; }
.secperm-groups { display: grid; gap: 6px; min-width: 0; }
.secperm-group { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--security-line);
    border-radius: 10px; background: var(--security-panel); cursor: pointer; text-align: left; }
.secperm-group:hover { border-color: color-mix(in srgb, var(--security-primary) 35%, var(--security-line)); }
.secperm-group.is-active { border-color: var(--security-primary);
    background: color-mix(in srgb, var(--security-primary) 8%, var(--security-panel));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--security-primary) 12%, transparent); }
.secperm-group-name { flex: 1; min-width: 0; color: var(--security-ink); font-size: 12px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secperm-badge { padding: 1px 6px; border-radius: 999px; font-size: 8.5px; font-weight: 850; letter-spacing: .04em;
    text-transform: uppercase; color: var(--security-primary); background: color-mix(in srgb, var(--security-primary) 14%, transparent); }
.secperm-panel { border: 1px solid var(--security-line); border-radius: var(--security-radius);
    background: var(--security-panel); box-shadow: var(--security-shadow); overflow: hidden; min-width: 0; }
.secperm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px;
    border-bottom: 1px solid var(--security-line); background: color-mix(in srgb, var(--security-soft) 60%, var(--security-panel)); }
.secperm-toolbar-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; align-items: center; }
.secperm-copy .form-select { min-height: 30px; font-size: 11px; }
.secperm-matrix-wrap { overflow-x: auto; }
.secperm-matrix { width: 100%; border-collapse: collapse; font-size: 12px; }
.secperm-matrix th, .secperm-matrix td { border-bottom: 1px solid var(--security-line); padding: 7px 10px; }
.secperm-matrix thead th { position: sticky; top: 0; background: var(--security-soft); color: var(--security-muted);
    font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.secperm-th-act { text-align: center; white-space: nowrap; }
.secperm-th-act span { display: block; margin-bottom: 3px; }
.secperm-td-table { color: var(--security-ink); font-weight: 650; white-space: nowrap; }
.secperm-td-act { text-align: center; }
.secperm-cb, .secperm-colall { width: 16px; height: 16px; cursor: pointer; accent-color: var(--security-primary); }
.secperm-rowall { margin-left: 6px; border: 0; background: transparent; color: var(--security-muted); cursor: pointer; padding: 0; font-size: 12px; }
.secperm-rowall:hover { color: var(--security-primary); }
.secperm-empty { text-align: center; color: var(--security-muted); padding: 18px; }
.secperm-admin-note { padding: 16px; color: var(--security-muted); font-size: 12px; line-height: 1.6; }
.secperm-admin-note i { color: var(--security-success); }
@media (max-width: 900px) { .secperm { grid-template-columns: minmax(0, 1fr); } }

/* ── 2FA configuration page (admin project config) ── */
.tfa-wrap { max-width: 1080px; }
.tfa-intro { margin: 0 0 18px; color: var(--security-muted); font-size: 13px; line-height: 1.6; max-width: 70ch; }
.tfa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.tfa-card { border: 1px solid var(--security-line); border-radius: 14px; background: var(--security-surface); padding: 18px 18px 16px; transition: border-color .15s, box-shadow .15s; }
.tfa-card.is-on { border-color: color-mix(in srgb, var(--security-primary) 45%, var(--security-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--security-primary) 12%, transparent); }
.tfa-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tfa-card-title { font-size: 14.5px; font-weight: 800; color: var(--security-ink); display: flex; align-items: center; gap: 9px; }
.tfa-card-title i { color: var(--security-primary); font-size: 17px; }
.tfa-card-desc { margin: 8px 0 0; color: var(--security-muted); font-size: 12.5px; line-height: 1.55; }
.tfa-card-extra { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--security-line); }
.tfa-note { margin: 0; color: var(--security-muted); font-size: 12px; display: flex; align-items: center; gap: 7px; }
.tfa-note i { color: var(--security-primary); }
.tfa-lbl { display: block; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--security-muted); margin-bottom: 5px; }
.tfa-lbl.tfa-mt { margin-top: 12px; }
.tfa-lbl code { text-transform: none; letter-spacing: 0; color: var(--security-primary); }
.tfa-field, .tfa-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--security-line); border-radius: 9px; background: var(--security-canvas); color: var(--security-ink); font-size: 13px; }
.tfa-field:focus, .tfa-input:focus { outline: none; border-color: var(--security-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--security-primary) 18%, transparent); }
.tfa-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; cursor: pointer; }
.tfa-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tfa-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--security-line); transition: background .18s; }
.tfa-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.tfa-switch input:checked + span { background: var(--security-primary); }
.tfa-switch input:checked + span::after { transform: translateX(18px); }
.tfa-remember { display: flex; align-items: center; gap: 9px; margin-top: 20px; color: var(--security-ink); font-size: 13px; cursor: pointer; }
.tfa-remember input { width: 16px; height: 16px; accent-color: var(--security-primary); }
.tfa-status { display: inline-block; margin-left: 14px; font-size: 12px; font-weight: 700; }
.tfa-status.is-ok { color: var(--security-success); }
.tfa-status.is-err { color: var(--security-danger, #dc2626); }
