body {
    background-color: #061018;
}

:root {
    --cursor-x: 50vw;
    --cursor-y: 50vh;
    --cursor-active: 0;
}

.portal-art-portal-command {
    --page-art: url("/images/page-art/portal-command.webp");
}

.portal-art-crm-pipeline {
    --page-art: url("/images/page-art/crm-pipeline.webp");
}

.portal-art-security-checkpoint {
    --page-art: url("/images/page-art/security-checkpoint.webp");
}

.portal-art-support-ops {
    --page-art: url("/images/page-art/support-ops.webp");
}

.portal-art-solutions-cloud {
    --page-art: url("/images/page-art/solutions-cloud.webp");
}

.portal-art-partners-network {
    --page-art: url("/images/page-art/partners-network.webp");
}

.portal-art-release-radar {
    --page-art: url("/images/page-art/release-radar.webp");
}

.portal-art-account-success {
    --page-art: url("/images/page-art/account-success.webp");
}

.portal-art-collaboration-chat {
    --page-art: url("/images/page-art/collaboration-chat.webp");
}

.portal-art-contact-signal {
    --page-art: url("/images/page-art/contact-signal.webp");
}

.portal-art-privacy-vault {
    --page-art: url("/images/page-art/privacy-vault.webp");
}

.portal-art-email-gateway {
    --page-art: url("/images/page-art/email-gateway.webp");
}

.portal-body {
    --header-art: url("/images/page-art/defense-masthead.jpg");
    --image-light-overlay: linear-gradient(rgba(5, 14, 24, 0.76), rgba(5, 14, 24, 0.76));
    --image-dark-overlay: linear-gradient(rgba(3, 8, 14, 0.72), rgba(3, 8, 14, 0.72));
    --left-rail-width: clamp(76px, 7vw, 104px);
    --right-rail-width: clamp(82px, 8vw, 118px);
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 8%, rgba(31, 202, 255, 0.18), transparent 28rem),
        radial-gradient(circle at 92% 4%, rgba(72, 255, 164, 0.14), transparent 24rem),
        var(--image-light-overlay),
        linear-gradient(90deg, rgba(2, 9, 17, 0.86), rgba(4, 17, 29, 0.78) 44%, rgba(5, 18, 27, 0.68)),
        var(--page-art) center top / cover fixed no-repeat,
        #061018;
    color: #eaf6ff;
}

.portal-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.portal-loading-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, #6ee7ff 18%, #5cff9b 48%, #6ee7ff 72%, transparent);
    box-shadow: 0 0 18px rgba(92, 255, 155, 0.8);
    transform: translateX(-100%);
}

.is-loading .portal-loading-bar {
    opacity: 1;
    transform: translateY(0);
}

.is-loading .portal-loading-bar::before {
    animation: portalLoadingSweep 980ms ease-in-out infinite;
}

.portal-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 70%);
}

.portal-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: var(--cursor-active);
    background:
        radial-gradient(420px circle at var(--cursor-x) var(--cursor-y),
            color-mix(in srgb, var(--portal-highlight, #5cff9b) 26%, transparent),
            color-mix(in srgb, var(--portal-highlight, #5cff9b) 12%, transparent) 24%,
            color-mix(in srgb, var(--portal-highlight, #5cff9b) 4%, transparent) 42%,
            transparent 66%);
    mix-blend-mode: screen;
    transition: opacity 180ms ease;
}

.glow-ambient.portal-body::after {
    opacity: calc(0.16 + (var(--cursor-active) * 0.7));
}

.glow-click.portal-body::after {
    opacity: var(--cursor-active);
}

.glow-off.portal-body::after,
.glow-off.interaction-active::before {
    opacity: 0 !important;
}

.glow-off .magnetic-glow.is-glowing,
.glow-off .btn:focus,
.glow-off .btn:hover,
.glow-off .rail-link:hover,
.glow-off .top-action-chip:hover,
.glow-off .top-register-chip:hover {
    box-shadow: none !important;
}

.portal-page-visual {
    position: relative;
    isolation: isolate;
    height: clamp(104px, 15vw, 210px);
    margin: 0 0 18px;
    overflow: hidden;
    border-top: 1px solid rgba(154, 203, 255, 0.18);
    border-bottom: 1px solid rgba(154, 203, 255, 0.18);
    background:
        var(--image-dark-overlay),
        linear-gradient(90deg, rgba(3, 8, 14, 0.94), rgba(3, 12, 20, 0.58) 54%, rgba(2, 10, 18, 0.82)),
        var(--header-art) center 46% / cover no-repeat;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

.portal-page-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.46;
    z-index: 0;
    pointer-events: none;
}

.portal-hud-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hud-orbit {
    position: absolute;
    width: clamp(118px, 12vw, 190px);
    aspect-ratio: 1;
    border: 1px solid rgba(94, 255, 176, 0.28);
    border-radius: 50%;
    opacity: 0.62;
    filter: drop-shadow(0 0 18px rgba(42, 226, 255, 0.18));
}

.hud-orbit::before,
.hud-orbit::after {
    content: "";
    position: absolute;
    inset: 14%;
    border: 1px solid rgba(42, 226, 255, 0.2);
    border-radius: inherit;
}

.hud-orbit::after {
    inset: 47%;
    background: rgba(94, 255, 176, 0.82);
    border: 0;
    box-shadow: 0 0 18px rgba(94, 255, 176, 0.72);
}

.hud-orbit-a {
    left: 8vw;
    top: 50%;
    transform: translateY(-50%) rotateX(68deg) rotateZ(-12deg);
}

.hud-orbit-b {
    right: 9vw;
    top: 52%;
    transform: translateY(-50%) rotateX(66deg) rotateZ(18deg);
}

.hud-track {
    position: absolute;
    height: 1px;
    width: min(42vw, 620px);
    background: linear-gradient(90deg, transparent, rgba(42, 226, 255, 0.48), rgba(94, 255, 176, 0.24), transparent);
    opacity: 0.55;
}

.hud-track-a {
    left: 22vw;
    top: 34%;
    transform: perspective(700px) rotateY(-32deg) rotateZ(-1deg);
}

.hud-track-b {
    right: 20vw;
    bottom: 26%;
    transform: perspective(700px) rotateY(32deg) rotateZ(1deg);
}

.hud-scanline {
    position: absolute;
    inset: 0;
    opacity: 0.38;
    background: linear-gradient(104deg, transparent 0 42%, rgba(94, 255, 176, 0.11) 50%, transparent 58% 100%);
    transform: translateX(-58%);
}

.interaction-active .hud-orbit-a {
    animation: hudDriftA 760ms ease-out 1;
}

.interaction-active .hud-orbit-b {
    animation: hudDriftB 840ms ease-out 1;
}

.interaction-active .hud-scanline {
    animation: hudScan 680ms linear 1;
}

.portal-status-rail {
    position: absolute;
    right: max(18px, 6vw);
    bottom: 16px;
    z-index: 2;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.portal-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(94, 255, 176, 0.26);
    border-radius: 999px;
    color: #dfffee;
    background: rgba(3, 12, 20, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 22px rgba(94, 255, 176, 0.12);
    backdrop-filter: blur(12px);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.magnetic-glow {
    --local-x: 50%;
    --local-y: 50%;
    position: relative;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        filter 160ms ease,
        transform 160ms ease;
}

.magnetic-glow:focus-visible,
.magnetic-glow.is-glowing {
    border-color: rgba(86, 255, 154, 0.62) !important;
    box-shadow:
        0 0 0 1px rgba(86, 255, 154, 0.22),
        0 0 22px rgba(86, 255, 154, 0.28),
        0 0 64px rgba(86, 255, 154, 0.14) !important;
    filter: saturate(1.08);
}

.magnetic-glow.is-glowing {
    transform: translateY(-1px);
}

.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(96, 222, 255, 0.18);
    background: rgba(3, 10, 18, 0.86);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

.portal-topbar-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    max-width: 1480px;
    margin: 0 auto;
    padding: 10px max(16px, 2vw);
}

.portal-brand,
.portal-topnav a,
.top-action-chip,
.top-register-chip,
.portal-footer a,
.rail-link {
    color: #d9f5ff;
    text-decoration: none;
}

.portal-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.brand-mark {
    width: 28px;
    aspect-ratio: 1;
    border: 1px solid rgba(94, 255, 176, 0.56);
    border-radius: 7px;
    background:
        linear-gradient(135deg, transparent 0 38%, rgba(94, 255, 176, 0.9) 39% 48%, transparent 49%),
        linear-gradient(45deg, rgba(42, 226, 255, 0.18), rgba(94, 255, 176, 0.2));
    box-shadow: 0 0 24px rgba(94, 255, 176, 0.18);
    transform: none;
}

.brand-logo {
    width: 126px;
    max-height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(255, 22, 22, 0.28));
}

.portal-topnav,
.portal-top-actions,
.portal-footer nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.portal-topnav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #adc9dd;
    font-size: 13px;
    font-weight: 700;
}

.portal-topnav a:hover,
.portal-topnav a:focus-visible {
    border-color: rgba(96, 222, 255, 0.24);
    color: #f6fdff;
    background: rgba(42, 226, 255, 0.08);
}

.top-action-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 18px 7px 10px;
    border: 1px solid rgba(96, 222, 255, 0.24);
    border-radius: 999px;
    background: rgba(6, 19, 32, 0.72);
    font-size: 12px;
    font-weight: 800;
}

.top-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(92, 255, 155, 0.34);
    border-radius: 999px;
    color: #dfffee;
    background:
        linear-gradient(135deg, rgba(92, 255, 155, 0.15), rgba(42, 226, 255, 0.1)),
        rgba(6, 19, 32, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 22px rgba(92, 255, 155, 0.12);
    font-size: 12px;
    font-weight: 900;
}

.top-role-chip > span {
    color: #93adc2;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.top-role-chip strong {
    color: #80ffc4;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.top-register-chip,
.top-login-link {
    color: #031018 !important;
    border: 1px solid rgba(152, 255, 205, 0.9) !important;
    background:
        linear-gradient(135deg, #6dffab 0%, #6ee7ff 56%, #ffffff 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 0 28px rgba(92, 255, 155, 0.46),
        0 16px 34px rgba(42, 226, 255, 0.2) !important;
    text-shadow: none !important;
}

.top-register-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.top-login-link {
    padding: 9px 15px !important;
    border-radius: 999px !important;
    font-weight: 950 !important;
}

.top-register-chip:hover,
.top-register-chip:focus,
.top-login-link:hover,
.top-login-link:focus {
    color: #001018 !important;
    filter: brightness(1.12) saturate(1.12);
    transform: translateY(-1px);
}

.top-action-chip strong,
.menu-badge,
.rail-badge {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 21px;
    padding: 0 7px;
    border: 1px solid rgba(255, 229, 185, 0.76);
    border-radius: 9px;
    color: #1b0b00;
    background: linear-gradient(135deg, #ffb347 0%, #ff7b1a 58%, #ffe1a6 100%);
    box-shadow:
        0 0 0 1px rgba(90, 34, 0, 0.18),
        0 0 18px rgba(255, 129, 26, 0.58),
        0 8px 20px rgba(0, 0, 0, 0.26);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

.top-action-chip .js-notification-count {
    position: absolute;
    top: -11px;
    right: -8px;
    z-index: 3;
}

.menu-message-link .menu-badge {
    position: absolute;
    top: -11px;
    right: -9px;
    z-index: 3;
}

.rail-badge.js-notification-count,
.rail-badge.js-message-count {
    position: absolute;
    top: -7px;
    right: -5px;
    z-index: 3;
}

.verified-badge {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(180, 238, 255, 0.68);
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #147cff 0%, #39bdfd 60%, #aeefff 100%);
    box-shadow: 0 0 18px rgba(57, 189, 253, 0.48);
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
    vertical-align: middle;
}

.top-action-chip.has-unread,
.portal-topnav a.has-unread,
.rail-link.has-unread {
    border-color: rgba(255, 152, 42, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 24px rgba(255, 132, 32, 0.18);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5cffb2;
    box-shadow: 0 0 14px rgba(92, 255, 178, 0.8);
}

.language-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9ebbd1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.language-control select {
    min-height: 34px;
    border: 1px solid rgba(96, 222, 255, 0.24);
    border-radius: 8px;
    color: #eaf6ff;
    background: rgba(6, 19, 32, 0.9);
    padding: 0 28px 0 10px;
}

.portal-app-shell {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: var(--left-rail-width) minmax(0, 1fr) var(--right-rail-width);
    gap: clamp(12px, 1.4vw, 20px);
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 max(12px, 1.5vw) 24px;
    perspective: none;
}

.portal-content-area {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: clip;
    border-radius: 10px;
}

@supports not (overflow: clip) {
    .portal-content-area {
        overflow: hidden;
    }
}

.portal-side-rail {
    position: sticky;
    z-index: 6;
    top: 76px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: min(680px, calc(100vh - 120px));
    padding: 12px 8px;
    border: 1px solid rgba(96, 222, 255, 0.2);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(12, 31, 49, 0.92), rgba(4, 14, 25, 0.88)),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: auto, 24px 24px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 22px 52px rgba(0, 0, 0, 0.34);
    transform-style: flat;
    transition:
        padding 180ms ease,
        opacity 180ms ease,
        box-shadow 180ms ease;
}

.portal-left-rail {
    transform: none;
    transform-origin: center;
}

.portal-right-rail {
    transform: none;
    transform-origin: center;
}

.rail-link {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 5px;
    min-height: 68px;
    padding: 9px 5px;
    border: 1px solid rgba(96, 222, 255, 0.1);
    border-radius: 12px;
    color: #b9d7e9;
    background: rgba(3, 12, 20, 0.44);
    text-align: center;
}

.rail-collapse-toggle {
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 44px;
    width: 100%;
    border: 1px solid rgba(94, 255, 176, 0.24);
    border-radius: 12px;
    color: #d9f5ff;
    background:
        linear-gradient(135deg, rgba(92, 255, 155, 0.12), rgba(42, 226, 255, 0.1)),
        rgba(3, 12, 20, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rail-collapse-toggle svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
    filter: drop-shadow(0 0 10px rgba(92, 255, 155, 0.22));
}

.rail-collapse-toggle:hover,
.rail-collapse-toggle:focus-visible {
    color: #f8fbff;
    border-color: rgba(92, 255, 155, 0.52);
    background: rgba(13, 43, 62, 0.76);
}

@media (min-width: 1181px) {
    .rails-collapsed {
        --left-rail-width: 44px;
        --right-rail-width: 44px;
    }

    .rails-collapsed .portal-app-shell {
        gap: 8px;
        max-width: min(1840px, 100%);
        padding-inline: max(6px, 0.65vw);
    }

    .rails-collapsed .portal-side-rail {
        align-items: center;
        gap: 7px;
        min-height: 0;
        padding: 8px 5px;
        border-radius: 12px;
        opacity: 0.92;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 14px 34px rgba(0, 0, 0, 0.28);
    }

    .rails-collapsed .portal-left-rail,
    .rails-collapsed .portal-right-rail {
        transform: none;
    }

    .rails-collapsed .rail-collapse-toggle,
    .rails-collapsed .rail-link {
        width: 34px;
        min-width: 34px;
        min-height: 40px;
        padding: 7px 0;
        border-radius: 10px;
    }

    .rails-collapsed .rail-collapse-toggle span,
    .rails-collapsed .rail-link span,
    .rails-collapsed .rail-live-panel {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .rails-collapsed .rail-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 9px;
    }

    .rails-collapsed .rail-link svg {
        width: 22px;
        height: 22px;
    }

    .rails-collapsed .rail-collapse-toggle svg {
        transform: rotate(180deg);
    }
}

@media (max-width: 1180px) {
    .portal-app-shell {
        grid-template-columns: 1fr;
        max-width: 1060px;
    }

    .portal-side-rail {
        position: relative;
        top: auto;
        min-height: 0;
        flex-direction: row;
        overflow-x: auto;
        transform: none;
        padding: 8px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .portal-left-rail {
        order: 0;
    }

    .portal-content-area {
        order: 1;
    }

    .portal-right-rail {
        order: 2;
    }

    .rail-link {
        min-width: 84px;
        scroll-snap-align: start;
    }

    .rail-collapse-toggle {
        display: none;
    }
}

@media (max-width: 760px) {
    .portal-topbar-inner {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px 10px;
    }

    .portal-brand {
        justify-content: center;
    }

    .portal-topnav,
    .portal-top-actions {
        justify-content: center;
    }

    .portal-topnav a {
        min-height: 34px;
        padding: 7px 9px;
        font-size: 12px;
    }

    .portal-side-rail {
        gap: 6px;
        padding: 7px;
    }

    .rail-link {
        min-width: 48px;
        width: 48px;
        min-height: 48px;
        padding: 8px 0;
        border-radius: 11px;
    }

    .rail-link span,
    .rail-live-panel {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .rail-link svg {
        width: 23px;
        height: 23px;
    }

    .rail-badge {
        top: -6px;
        right: -6px;
        min-width: 19px;
        height: 18px;
        padding: 0 5px;
        font-size: 9px;
    }

    .portal-content-area {
        border-radius: 6px;
    }
}

.viewport-wide .portal-app-shell {
    max-width: min(1880px, 100%);
}

.viewport-ultrawide .portal-app-shell {
    max-width: min(2040px, 100%);
    gap: clamp(14px, 1.1vw, 24px);
}

.viewport-mobile .portal-page-visual {
    height: 92px;
}

.rail-link:hover,
.rail-link:focus-visible {
    color: #f7fdff;
    border-color: rgba(94, 255, 176, 0.34);
    background: rgba(13, 43, 62, 0.68);
}

.pending-limited .portal-side-rail .rail-link:not(.pending-access-link),
.pending-limited .portal-side-rail .rail-live-panel {
    display: none;
}

.pending-limited .pending-access-link {
    border-color: rgba(255, 209, 102, 0.36);
    color: #fff2c7;
    background: rgba(82, 61, 18, 0.42);
}

.rail-link svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    filter: drop-shadow(0 0 12px rgba(42, 226, 255, 0.28));
}

.rail-link span {
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rail-live-panel {
    margin-top: auto;
    padding: 10px 8px;
    border: 1px solid rgba(94, 255, 176, 0.16);
    border-radius: 12px;
    background: rgba(3, 12, 20, 0.54);
}

.mini-label {
    display: block;
    margin-bottom: 6px;
    color: #79f9c1;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mini-feed {
    color: #b9d7e9;
    font-size: 11px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.portal-footer {
    position: relative;
    z-index: 4;
    border-top: 1px solid rgba(96, 222, 255, 0.18);
    background: rgba(3, 10, 18, 0.9);
    backdrop-filter: blur(18px);
}

.portal-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: 1480px;
    margin: 0 auto;
    padding: 14px max(16px, 2vw);
    color: #9fb9ce;
}

.active-users-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: min(520px, 42vw);
    padding: 7px 10px;
    border: 1px solid rgba(94, 255, 176, 0.18);
    border-radius: 999px;
    color: #d9f5ff;
    background: rgba(5, 22, 34, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.active-users-count {
    flex: 0 0 auto;
    color: #80ffc4;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.active-users-list {
    min-width: 0;
    overflow: hidden;
    color: #bfeaff;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-footer a {
    color: #bfeaff;
    font-size: 13px;
    font-weight: 700;
}

@keyframes hudScan {
    from {
        transform: translateX(-58%);
    }

    to {
        transform: translateX(58%);
    }
}

@keyframes portalLoadingSweep {
    0% {
        transform: translateX(-100%);
    }

    55% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes hudDriftA {
    0%, 100% {
        transform: translateY(-50%) rotateX(68deg) rotateZ(-12deg) translateX(0);
        opacity: 0.54;
    }

    50% {
        transform: translateY(-52%) rotateX(68deg) rotateZ(-8deg) translateX(10px);
        opacity: 0.72;
    }
}

@keyframes hudDriftB {
    0%, 100% {
        transform: translateY(-50%) rotateX(66deg) rotateZ(18deg) translateX(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(-47%) rotateX(66deg) rotateZ(14deg) translateX(-12px);
        opacity: 0.68;
    }
}

.signup-page,
.crm-shell,
.crm-list-shell,
.security-shell,
.import-shell {
    position: relative;
    isolation: isolate;
}

.signup-page {
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        var(--image-dark-overlay),
        linear-gradient(90deg, rgba(4, 10, 18, 0.92) 0%, rgba(4, 10, 18, 0.74) 40%, rgba(4, 10, 18, 0.48) 100%),
        var(--page-art) center top / cover no-repeat !important;
}

.crm-shell,
.crm-list-shell {
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        var(--image-dark-overlay),
        linear-gradient(90deg, rgba(4, 10, 18, 0.95) 0%, rgba(4, 10, 18, 0.82) 46%, rgba(4, 10, 18, 0.52) 100%),
        var(--page-art) center top / cover no-repeat !important;
}

.security-shell,
.import-shell {
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        var(--image-dark-overlay),
        linear-gradient(90deg, rgba(4, 10, 18, 0.95) 0%, rgba(4, 10, 18, 0.84) 46%, rgba(4, 10, 18, 0.54) 100%),
        var(--page-art) center top / cover no-repeat !important;
}

.crm-top,
.crm-list-top,
.security-top,
.import-top {
    min-height: 168px;
    align-items: center !important;
    padding: 24px;
    border: 1px solid rgba(154, 203, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
    background:
        var(--image-dark-overlay),
        linear-gradient(90deg, rgba(6, 16, 24, 0.96) 0%, rgba(6, 16, 24, 0.8) 42%, rgba(6, 16, 24, 0.34) 100%),
        var(--page-art) center center / cover no-repeat;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
}

.security-top,
.import-top {
    background:
        var(--image-dark-overlay),
        linear-gradient(90deg, rgba(6, 16, 24, 0.96) 0%, rgba(6, 16, 24, 0.8) 42%, rgba(6, 16, 24, 0.34) 100%),
        var(--page-art) center center / cover no-repeat;
}

.crm-top h1,
.crm-list-top h1,
.security-top h1,
.import-top h1 {
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.primary-action,
.btn-info,
.refresh-button {
    border-color: rgba(110, 231, 255, 0.44) !important;
    color: #f8fbff !important;
    background:
        linear-gradient(90deg, rgba(92, 255, 178, 0.28), rgba(42, 226, 255, 0.2), rgba(57, 126, 255, 0.16)),
        url("/images/tech/tech-button.webp") center center / cover no-repeat !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -14px 28px rgba(0, 0, 0, 0.26),
        0 16px 38px rgba(92, 255, 155, 0.16) !important;
}

.primary-action:hover,
.btn-info:hover,
.refresh-button:hover {
    filter: saturate(1.16) brightness(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -14px 28px rgba(0, 0, 0, 0.2),
        0 20px 52px rgba(110, 231, 255, 0.24) !important;
}

.btn-outline-info {
    border-color: rgba(110, 231, 255, 0.46) !important;
    color: #c9f6ff !important;
    background-color: rgba(6, 16, 24, 0.62) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    color: #f8fbff !important;
    background:
        linear-gradient(90deg, rgba(92, 255, 178, 0.18), rgba(42, 226, 255, 0.16), rgba(57, 126, 255, 0.12)),
        url("/images/tech/tech-button.webp") center center / cover no-repeat !important;
}

.entity-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.entity-cell > div {
    min-width: 0;
}

.entity-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(154, 203, 255, 0.28);
    border-radius: 8px;
    object-fit: cover;
    background: #061018;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 10px 28px rgba(0, 0, 0, 0.28);
}

.tech-thumb-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 8px;
    margin-top: 18px;
    padding: 12px;
    border: 1px solid rgba(154, 203, 255, 0.18);
    border-radius: 8px;
    background: rgba(10, 20, 36, 0.74);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.tech-thumb-gallery img {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid rgba(154, 203, 255, 0.18);
    border-radius: 8px;
    object-fit: cover;
    background: #061018;
}

.notifications-page {
    margin: 0 0 28px;
    color: #eaf6ff;
}

.notifications-hero,
.notification-list,
.secure-chat-shell {
    border: 1px solid rgba(96, 222, 255, 0.2);
    border-radius: 12px;
    background: rgba(5, 16, 28, 0.88);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 24px 58px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(16px);
}

.notifications-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    margin-bottom: 14px;
}

.notifications-hero h1 {
    margin: 4px 0 6px;
    font-size: clamp(28px, 4vw, 48px);
}

.notifications-hero p {
    margin: 0;
    color: #a9bfd1;
}

.notification-actions,
.browser-notification-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.notification-actions span,
.browser-notification-controls span {
    color: #9ebbd1;
    font-size: 12px;
    font-weight: 700;
}

.browser-notification-controls {
    justify-content: flex-start;
    padding-top: 4px;
}

[data-browser-notifications].is-enabled {
    border-color: rgba(92, 255, 178, 0.62);
    color: #dffff1;
    background: rgba(33, 134, 86, 0.42);
    box-shadow: 0 0 22px rgba(92, 255, 178, 0.2);
}

.eyebrow {
    color: #79f9c1;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.notification-list {
    padding: 12px;
}

.notification-row {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(96, 222, 255, 0.12);
}

.notification-row:last-child {
    border-bottom: 0;
}

.notification-row strong {
    color: #f6fdff;
}

.notification-row span,
.notification-empty {
    color: #a9bfd1;
}

.secure-chat-shell {
    padding: clamp(16px, 2.4vw, 28px);
    color: #eaf6ff;
}

.secure-chat-top {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.secure-chat-top h1 {
    margin: 4px 0 6px;
    font-size: clamp(30px, 4vw, 52px);
}

.secure-chat-top p {
    max-width: 680px;
    margin: 0;
    color: #a9bfd1;
}

.secure-state,
.secure-compose-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.secure-chat-grid {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    gap: 16px;
}

.secure-thread-panel,
.secure-message-panel {
    border: 1px solid rgba(96, 222, 255, 0.16);
    border-radius: 12px;
    background: rgba(2, 10, 18, 0.46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.secure-thread-panel {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 12px;
    transform: none;
}

.secure-thread-panel a {
    padding: 10px;
    border: 1px solid rgba(96, 222, 255, 0.12);
    border-radius: 10px;
    color: #ccecff;
    text-decoration: none;
    background: rgba(8, 24, 39, 0.72);
    font-size: 13px;
    font-weight: 800;
}

.secure-key-vault {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(92, 255, 178, 0.18);
    border-radius: 10px;
    background: rgba(6, 28, 34, 0.62);
}

.secure-key-vault small {
    color: #9ebbd1;
    font-size: 11px;
    line-height: 1.35;
}

.secure-message-panel {
    min-width: 0;
    overflow: hidden;
}

.secure-call-panel,
.secure-admin-group {
    display: grid;
    gap: 12px;
    margin: 14px;
    padding: 14px;
    border: 1px solid rgba(96, 222, 255, 0.16);
    border-radius: 12px;
    background: rgba(5, 18, 30, 0.72);
}

.secure-call-panel {
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(92, 255, 155, 0.04), 0 18px 48px rgba(0, 0, 0, 0.24);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.secure-call-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, rgba(92, 255, 155, 0.16), rgba(96, 222, 255, 0.12), transparent);
    transition: opacity 160ms ease;
}

.secure-call-panel[data-call-state="waiting"],
.secure-call-panel[data-call-state="incoming"],
.secure-call-panel[data-call-state="joining"],
.secure-call-panel[data-call-state="preview"],
.secure-call-panel[data-call-state="connecting"] {
    border-color: rgba(92, 255, 155, 0.42);
    background: rgba(8, 31, 39, 0.84);
    box-shadow: 0 0 0 1px rgba(92, 255, 155, 0.08), 0 18px 54px rgba(36, 255, 151, 0.12);
}

.secure-call-panel[data-call-state="connected"] {
    border-color: rgba(96, 222, 255, 0.46);
    background: rgba(6, 27, 45, 0.86);
    box-shadow: 0 0 0 1px rgba(96, 222, 255, 0.12), 0 18px 54px rgba(39, 178, 255, 0.14);
}

.secure-call-panel[data-call-state="waiting"]::before,
.secure-call-panel[data-call-state="incoming"]::before,
.secure-call-panel[data-call-state="joining"]::before,
.secure-call-panel[data-call-state="preview"]::before,
.secure-call-panel[data-call-state="connecting"]::before,
.secure-call-panel[data-call-state="connected"]::before {
    opacity: 1;
}

.secure-call-head,
.secure-admin-group-head,
.secure-admin-group-form,
.secure-incoming-call {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.secure-call-head strong,
.secure-admin-group-head strong {
    display: block;
    color: #f6fdff;
}

.secure-call-head span,
.secure-admin-group-head span {
    color: #a9bfd1;
    font-size: 13px;
}

.secure-call-copy {
    display: grid;
    gap: 4px;
    min-width: min(100%, 320px);
}

.secure-call-peer {
    color: #6effbf !important;
    font-weight: 850;
}

.secure-call-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.secure-call-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(96, 222, 255, 0.22);
    border-radius: 999px;
    background: rgba(2, 8, 16, 0.62);
    color: #cfefff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.secure-call-option input {
    width: 15px;
    height: 15px;
    accent-color: #5cff9b;
}

.secure-call-option:has(input:checked) {
    border-color: rgba(92, 255, 155, 0.5);
    background: rgba(92, 255, 155, 0.12);
    color: #effff7;
}

.secure-call-option:has(input:disabled) {
    opacity: 0.62;
}

.secure-call-timer {
    min-width: 62px;
    padding: 8px 11px;
    border: 1px solid rgba(96, 222, 255, 0.24);
    border-radius: 999px;
    background: rgba(2, 8, 16, 0.72);
    color: #f6fdff;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.secure-call-timer[hidden] {
    display: none;
}

.secure-media-preview {
    display: grid;
    grid-template-columns: minmax(160px, 0.4fr) minmax(220px, 1fr);
    gap: 12px;
    align-items: stretch;
    padding: 12px;
    border: 1px solid rgba(96, 222, 255, 0.16);
    border-radius: 12px;
    background: rgba(1, 10, 18, 0.58);
}

.secure-media-preview[hidden] {
    display: none;
}

.secure-preview-video-wrap {
    position: relative;
    overflow: hidden;
    min-height: 130px;
    border: 1px solid rgba(110, 231, 255, 0.22);
    border-radius: 10px;
    background: radial-gradient(circle at 50% 40%, rgba(92, 255, 155, 0.12), rgba(2, 8, 16, 0.95) 62%);
}

.secure-preview-video-wrap video {
    width: 100%;
    height: 100%;
    min-height: 130px;
    object-fit: cover;
    display: block;
}

.secure-preview-video-wrap video[hidden] {
    display: none;
}

.secure-preview-video-wrap span {
    position: absolute;
    left: 10px;
    bottom: 9px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(2, 8, 16, 0.72);
    color: #eafcff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.secure-preview-meter {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
}

.secure-audio-meter {
    display: grid;
    grid-template-columns: repeat(14, minmax(5px, 1fr));
    gap: 5px;
    align-items: end;
    min-height: 78px;
    padding: 10px;
    border: 1px solid rgba(92, 255, 155, 0.18);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(7, 30, 44, 0.74), rgba(1, 8, 16, 0.82));
}

.secure-audio-meter span {
    display: block;
    height: 58px;
    border-radius: 999px;
    transform: scaleY(0.12);
    transform-origin: bottom;
    background: linear-gradient(180deg, #66e4ff, #5cff9b);
    opacity: 0.35;
    transition: transform 70ms linear, opacity 70ms linear;
}

.secure-preview-meter small {
    color: #a9bfd1;
    font-weight: 750;
}

.secure-video-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.34fr);
    gap: 10px;
    align-items: end;
}

.secure-video-grid[hidden],
.secure-incoming-call[hidden] {
    display: none;
}

.secure-video-tile {
    position: relative;
    overflow: hidden;
    min-height: 120px;
    border: 1px solid rgba(110, 231, 255, 0.22);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 38%, rgba(92, 255, 155, 0.12), transparent 42%),
        linear-gradient(145deg, rgba(5, 20, 34, 0.92), rgba(1, 8, 16, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.secure-video-tile video {
    width: 100%;
    height: 100%;
    min-height: 120px;
    max-height: 360px;
    object-fit: cover;
    display: block;
    opacity: 1;
    transition: opacity 160ms ease;
}

.secure-remote-video-tile video {
    min-height: clamp(220px, 34vw, 430px);
}

.secure-local-video-tile {
    min-height: 150px;
}

#secureLocalVideo {
    max-height: 180px;
}

.secure-video-label {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 5px 9px;
    border: 1px solid rgba(92, 255, 155, 0.24);
    border-radius: 999px;
    color: #eafff7;
    background: rgba(1, 8, 16, 0.78);
    box-shadow: 0 0 18px rgba(92, 255, 155, 0.14);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.secure-video-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    gap: 6px;
    align-content: center;
    padding: 18px;
    color: #cfe8f7;
    text-align: center;
    background:
        radial-gradient(circle at 50% 44%, rgba(92, 255, 155, 0.16), transparent 34%),
        repeating-linear-gradient(90deg, rgba(110, 231, 255, 0.07) 0 1px, transparent 1px 24px),
        rgba(1, 8, 16, 0.82);
    transition: opacity 160ms ease, visibility 160ms ease;
}

.secure-video-placeholder::before {
    content: "";
    width: 58px;
    height: 58px;
    border: 1px solid rgba(92, 255, 155, 0.44);
    border-radius: 999px;
    background:
        radial-gradient(circle, #5cff9b 0 5px, transparent 6px),
        conic-gradient(from 0deg, rgba(92, 255, 155, 0.68), transparent 32%, rgba(96, 222, 255, 0.54), transparent 72%, rgba(92, 255, 155, 0.68));
    box-shadow: 0 0 24px rgba(92, 255, 155, 0.22);
    animation: securePreviewPulse 1.7s linear infinite;
}

.secure-video-placeholder strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 950;
}

.secure-video-placeholder span {
    color: #a9bfd1;
    font-weight: 800;
}

.secure-video-grid[data-remote-state="live"] .secure-video-placeholder {
    opacity: 0;
    visibility: hidden;
}

.secure-video-grid[data-remote-state="waiting"] .secure-remote-video-tile video,
.secure-video-grid[data-remote-state="audio"] .secure-remote-video-tile video,
.secure-video-grid[data-remote-state="ended"] .secure-remote-video-tile video {
    opacity: 0.08;
}

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

.secure-incoming-call {
    border: 1px solid rgba(92, 255, 155, 0.28);
    border-radius: 10px;
    padding: 10px;
    background: rgba(92, 255, 155, 0.08);
    color: #e9fff4;
    font-weight: 850;
}

.secure-incoming-call-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(1, 7, 12, 0.62);
    backdrop-filter: blur(10px);
}

.secure-incoming-call-overlay[hidden] {
    display: none;
}

.secure-incoming-call-card {
    width: min(460px, 100%);
    display: grid;
    gap: 12px;
    padding: clamp(18px, 4vw, 28px);
    border: 1px solid rgba(92, 255, 155, 0.44);
    border-radius: 16px;
    color: #f3fdff;
    background:
        radial-gradient(circle at 18% 0%, rgba(92, 255, 155, 0.24), transparent 34%),
        linear-gradient(145deg, rgba(6, 28, 42, 0.96), rgba(1, 8, 16, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 28px 80px rgba(0, 0, 0, 0.54),
        0 0 42px rgba(92, 255, 155, 0.2);
}

.secure-incoming-call-card::before {
    content: "";
    width: 64px;
    height: 64px;
    border: 1px solid rgba(92, 255, 155, 0.42);
    border-radius: 20px;
    background:
        radial-gradient(circle, #5cff9b 0 6px, transparent 7px),
        conic-gradient(from 0deg, rgba(92, 255, 155, 0.72), transparent 32%, rgba(96, 222, 255, 0.5), transparent 70%, rgba(92, 255, 155, 0.72));
    box-shadow: 0 0 30px rgba(92, 255, 155, 0.24);
    animation: securePreviewPulse 1.4s linear infinite;
}

.secure-incoming-call-card strong {
    color: #ffffff;
    font-size: clamp(24px, 5vw, 34px);
    font-weight: 950;
    letter-spacing: 0;
}

.secure-incoming-call-card p {
    margin: 0;
    color: #b8ccdc;
    font-weight: 760;
}

.secure-incoming-call-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.secure-incoming-call-actions .btn {
    min-height: 44px;
    padding-inline: 18px;
}

.secure-signal-status.is-live,
.secure-vanish-badge {
    color: #041018;
    background: #5cff9b;
}

.secure-vanish-badge {
    justify-self: start;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.secure-message-feed {
    display: grid;
    gap: 10px;
    max-height: 520px;
    overflow: auto;
    padding: 14px;
}

.secure-message-row {
    display: grid;
    gap: 8px;
    max-width: min(720px, 92%);
    padding: 12px 14px;
    border: 1px solid rgba(96, 222, 255, 0.16);
    border-radius: 12px;
    background: rgba(7, 22, 35, 0.9);
}

.secure-message-row.outbound {
    justify-self: end;
    border-color: rgba(94, 255, 176, 0.24);
    background: rgba(7, 34, 29, 0.84);
}

.secure-message-row > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #79f9c1;
    font-size: 12px;
    font-weight: 800;
}

.secure-message-row > .secure-message-tools {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.secure-message-row small,
.secure-presence {
    color: #a9bfd1;
    font-weight: 800;
}

.secure-presence {
    border: 1px solid rgba(94, 255, 176, 0.22);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(94, 255, 176, 0.08);
}

.secure-message-tools button {
    border: 1px solid rgba(110, 231, 255, 0.24);
    border-radius: 999px;
    padding: 5px 9px;
    color: #e9fbff;
    background: rgba(110, 231, 255, 0.08);
    font-size: 12px;
    font-weight: 850;
}

.secure-message-tools [data-report-message],
.secure-message-tools [data-block-user] {
    border-color: rgba(255, 95, 135, 0.34);
    color: #ffd9e2;
    background: rgba(255, 95, 135, 0.1);
}

.danger-feedback::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    box-shadow: inset 0 0 90px rgba(255, 41, 89, 0.5);
    animation: dangerFeedback 680ms ease-out both;
}

@keyframes dangerFeedback {
    from { opacity: 1; }
    to { opacity: 0; }
}

.secure-message-row time {
    color: #87a7ba;
    font-weight: 700;
}

.secure-message-row p {
    margin: 0;
    color: #f2fbff;
    white-space: pre-wrap;
}

.secure-message-image {
    width: min(280px, 100%);
    border: 1px solid rgba(96, 222, 255, 0.18);
    border-radius: 10px;
}

.secure-image-slot {
    display: flex;
    align-items: center;
}

.secure-image-load {
    border: 1px solid rgba(94, 255, 176, 0.3);
    border-radius: 999px;
    padding: 8px 12px;
    color: #c9fff0;
    background: rgba(11, 43, 38, 0.78);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
}

.secure-image-load:hover,
.secure-image-load:focus-visible {
    border-color: rgba(94, 255, 176, 0.72);
    box-shadow: 0 0 18px rgba(94, 255, 176, 0.18);
}

.secure-image-load:disabled {
    cursor: wait;
    opacity: 0.7;
}

.secure-compose {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-top: 1px solid rgba(96, 222, 255, 0.14);
    background: rgba(2, 10, 18, 0.52);
}

.secure-compose label {
    display: grid;
    gap: 6px;
    color: #9ebbd1;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.secure-checkbox-control {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 10px !important;
    color: #ccecff;
    font-size: 14px;
}

.secure-checkbox-control input {
    width: 18px;
    height: 18px;
}

.secure-admin-group-feed {
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow: auto;
}

.secure-admin-message {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(96, 222, 255, 0.14);
    border-radius: 10px;
    background: rgba(7, 22, 35, 0.78);
}

.secure-admin-message.outbound {
    border-color: rgba(92, 255, 155, 0.24);
    background: rgba(7, 34, 29, 0.78);
}

.secure-admin-message strong {
    color: #79f9c1;
    font-size: 12px;
}

.secure-admin-message time {
    color: #a9bfd1;
    font-size: 12px;
}

.secure-admin-group-form input {
    flex: 1 1 220px;
    min-height: 38px;
    border: 1px solid rgba(154, 203, 255, 0.24);
    border-radius: 8px;
    color: #f7fbff;
    background: rgba(0, 8, 16, 0.74);
    padding: 8px 10px;
}

.secure-compose input,
.secure-compose textarea {
    width: 100%;
    border: 1px solid rgba(96, 222, 255, 0.22);
    border-radius: 10px;
    color: #f2fbff;
    background: rgba(0, 7, 14, 0.72);
    padding: 10px 12px;
    letter-spacing: 0;
}

.secure-file-control {
    min-width: min(260px, 100%);
}

.secure-compose-status,
.secure-alert {
    color: #b9d7e9;
}

.secure-alert {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(96, 222, 255, 0.18);
    border-radius: 10px;
    background: rgba(2, 10, 18, 0.58);
}

@media (max-width: 700px) {
    .portal-page-visual {
        height: 88px;
        margin-bottom: 12px;
    }

    .portal-status-rail {
        left: 12px;
        right: 12px;
        bottom: 10px;
        justify-content: center;
    }

    .portal-status-chip {
        min-height: 24px;
        padding: 4px 7px;
        font-size: 9px;
    }

    .portal-topbar-inner {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .portal-top-actions {
        justify-content: space-between;
    }

    .portal-app-shell {
        grid-template-columns: 1fr;
        padding: 0 10px 18px;
    }

    .portal-side-rail {
        position: static;
        min-height: 0;
        flex-direction: row;
        overflow-x: auto;
        transform: none;
    }

    .portal-right-rail {
        order: -1;
    }

    .rail-link {
        min-width: 74px;
        min-height: 58px;
    }

    .crm-top,
    .crm-list-top,
    .security-top,
    .import-top {
        min-height: 0;
        padding: 18px;
        background-position: 62% center;
    }

    .entity-thumb {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .portal-footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .active-users-panel {
        align-items: flex-start;
        flex-direction: column;
        max-width: 100%;
        border-radius: 10px;
    }

    .active-users-list {
        white-space: normal;
    }

    .secure-chat-top,
    .notifications-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .notification-actions {
        align-items: stretch;
        justify-content: flex-start;
    }

    .secure-chat-grid {
        grid-template-columns: 1fr;
    }

    .secure-thread-panel {
        transform: none;
    }

    .secure-video-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .magnetic-glow,
    .magnetic-glow:hover,
    .hud-orbit,
    .hud-scanline {
        transform: none;
        transition: none;
        animation: none;
    }
}

.motion-reduced .magnetic-glow,
.motion-reduced .magnetic-glow:hover,
.motion-reduced .hud-orbit,
.motion-reduced .hud-scanline {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.theme-light.portal-body {
    --header-art: url("/images/page-art/defense-masthead-light.jpg");
    --image-light-overlay: linear-gradient(rgba(246, 252, 255, 0.72), rgba(246, 252, 255, 0.72));
    --image-dark-overlay: linear-gradient(rgba(235, 248, 250, 0.68), rgba(235, 248, 250, 0.68));
    background:
        radial-gradient(circle at 18% 8%, rgba(31, 202, 255, 0.18), transparent 28rem),
        radial-gradient(circle at 92% 4%, rgba(43, 198, 125, 0.16), transparent 24rem),
        linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.74)),
        url("/images/theme/light-hud.svg") center top / cover fixed no-repeat,
        var(--page-art) center top / cover fixed no-repeat,
        #f4fbff;
    color: #102335;
}

.theme-light.portal-body::before {
    background:
        linear-gradient(rgba(11, 81, 104, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 81, 104, 0.06) 1px, transparent 1px);
}

.theme-light.portal-body::after {
    mix-blend-mode: multiply;
    background:
        radial-gradient(420px circle at var(--cursor-x) var(--cursor-y),
            rgba(22, 166, 114, 0.22),
            rgba(22, 166, 114, 0.1) 24%,
            rgba(22, 166, 114, 0.035) 42%,
            transparent 66%);
}

.theme-light .portal-topbar,
.theme-light .portal-footer {
    border-color: rgba(15, 100, 128, 0.18);
    background: rgba(247, 252, 255, 0.9);
    box-shadow: 0 18px 42px rgba(36, 83, 105, 0.16);
}

.theme-light .portal-page-visual {
    border-color: rgba(15, 100, 128, 0.16);
    background:
        var(--image-dark-overlay),
        linear-gradient(90deg, rgba(247, 252, 255, 0.92), rgba(231, 248, 250, 0.62) 54%, rgba(235, 250, 244, 0.82)),
        var(--header-art) center 46% / cover no-repeat;
    box-shadow: 0 24px 62px rgba(36, 83, 105, 0.18);
}

.theme-light .portal-brand,
.theme-light .portal-topnav a,
.theme-light .portal-footer a,
.theme-light .rail-link {
    color: #12384d;
}

.theme-light .language-control,
.theme-light .portal-footer-inner,
.theme-light .active-users-list,
.theme-light .mini-label {
    color: #426578;
}

.theme-light .language-control select,
.theme-light .top-action-chip,
.theme-light .top-role-chip,
.theme-light .portal-side-rail,
.theme-light .rail-live-panel {
    color: #102335;
    border-color: rgba(15, 100, 128, 0.18);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 18px 44px rgba(36, 83, 105, 0.14);
}

.theme-light .rail-link {
    background: rgba(255, 255, 255, 0.74);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        0 10px 24px rgba(36, 83, 105, 0.11);
}

.theme-light .portal-status-chip,
.theme-light .top-role-chip strong {
    color: #063124;
    background: linear-gradient(135deg, #c6ffe0, #d5f7ff);
    border-color: rgba(17, 151, 105, 0.26);
}

.theme-light .top-action-chip strong,
.theme-light .menu-badge,
.theme-light .rail-badge {
    color: #1b0b00;
    background: linear-gradient(135deg, #ffba57 0%, #ff841f 58%, #fff0c8 100%);
    border-color: rgba(174, 89, 12, 0.34);
}

.theme-light .top-role-chip > span {
    color: #426578;
}

.theme-light .crm-shell,
.theme-light .crm-list-shell,
.theme-light .notifications-hero,
.theme-light .notification-list,
.theme-light .secure-chat-shell,
.theme-light .settings-card,
.theme-light .moderation-toolbar,
.theme-light .moderation-grid,
.theme-light .moderation-section {
    color: #102335;
    border-color: rgba(15, 100, 128, 0.18);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 18px 44px rgba(36, 83, 105, 0.14);
}

.theme-light .crm-top p,
.theme-light .crm-list-top p,
.theme-light .notifications-hero p,
.theme-light .notification-row span,
.theme-light .notification-empty,
.theme-light .secure-chat-top p,
.theme-light .moderation-top p,
.theme-light .moderation-card span,
.theme-light .moderation-row span,
.theme-light .moderation-note,
.theme-light .moderation-empty {
    color: #426578;
}

.theme-light .secure-thread-panel,
.theme-light .secure-message-panel,
.theme-light .secure-message-row,
.theme-light .secure-compose,
.theme-light .moderation-row,
.theme-light .moderation-card {
    color: #102335;
    border-color: rgba(15, 100, 128, 0.16);
    background: rgba(247, 252, 255, 0.78);
}

.theme-light .secure-message-row.outbound {
    background: rgba(224, 250, 236, 0.86);
}

.theme-light .secure-message-row p,
.theme-light .moderation-row p,
.theme-light .secure-chat-shell h1,
.theme-light .settings-shell h1 {
    color: #102335;
}

.theme-light .secure-compose input,
.theme-light .secure-compose textarea,
.theme-light .moderation-toolbar input,
.theme-light .moderation-toolbar select,
.theme-light .moderation-actions input {
    color: #102335;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 100, 128, 0.2);
}

.secure-thread-search input {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(96, 222, 255, 0.18);
    border-radius: 8px;
    padding: 0 10px;
    color: #eaf6ff;
    background: rgba(2, 10, 18, 0.62);
}

.secure-decrypt-warning {
    color: #ffd8a8 !important;
    font-size: 0.98rem;
}

.secure-thread-list {
    display: grid;
    gap: 8px;
    max-height: 280px;
    overflow: auto;
}

.secure-thread-button {
    position: relative;
    display: grid;
    gap: 2px;
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(96, 222, 255, 0.14);
    border-radius: 8px;
    padding: 8px 26px 8px 10px;
    color: #d9f5ff;
    text-align: left;
    background: rgba(2, 10, 18, 0.42);
}

.secure-thread-button.has-unread {
    border-color: rgba(255, 146, 39, 0.38);
    background:
        linear-gradient(90deg, rgba(255, 132, 32, 0.12), transparent 42%),
        rgba(2, 10, 18, 0.54);
}

.secure-thread-button.has-unread::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 10px;
    width: 9px;
    height: 9px;
    border: 1px solid rgba(255, 240, 210, 0.72);
    border-radius: 50%;
    background: #ff8a1d;
    box-shadow: 0 0 14px rgba(255, 136, 26, 0.74);
}

.secure-thread-button strong,
.secure-thread-button span {
    overflow-wrap: anywhere;
}

.secure-thread-button span {
    color: #8daec2;
    font-size: 12px;
}

.secure-thread-button.active,
.secure-thread-button:hover,
.secure-thread-button:focus-visible {
    color: #061018;
    border-color: rgba(92, 255, 155, 0.58);
    background: linear-gradient(135deg, #5cff9b, #6ee7ff);
}

.secure-thread-button.active.has-unread::after,
.secure-thread-button:hover.has-unread::after,
.secure-thread-button:focus-visible.has-unread::after {
    border-color: rgba(65, 22, 0, 0.24);
    background: #ff7b1a;
    box-shadow: 0 0 12px rgba(255, 123, 26, 0.58);
}

.secure-thread-button.active span,
.secure-thread-button:hover span,
.secure-thread-button:focus-visible span {
    color: #063124;
}

.secure-private-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(92, 255, 155, 0.28);
    border-radius: 999px;
    color: #d8ffe7;
    background: rgba(92, 255, 155, 0.1);
    font-size: 12px;
    font-weight: 850;
}

.theme-light .secure-thread-search input,
.theme-light .secure-thread-button {
    color: #102335;
    border-color: rgba(15, 100, 128, 0.18);
    background: rgba(255, 255, 255, 0.8);
}

.theme-light .secure-thread-button span {
    color: #426578;
}

.theme-light .secure-private-badge {
    color: #063124;
    background: rgba(209, 255, 230, 0.82);
}

.settings-shell {
    display: grid;
    gap: 18px;
    max-width: 1120px;
    margin: 0 auto;
    color: #eaf6ff;
}

.settings-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(18px, 3vw, 34px);
    border: 1px solid rgba(96, 222, 255, 0.2);
    border-radius: 12px;
    background: rgba(5, 16, 28, 0.88);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.3);
}

.settings-hero h1 {
    margin: 4px 0 6px;
    font-size: clamp(30px, 4vw, 52px);
}

.settings-hero p,
.settings-card p,
.settings-option small {
    color: #a9bfd1;
}

.settings-preview {
    display: grid;
    place-items: center;
    width: clamp(96px, 14vw, 150px);
    aspect-ratio: 1;
    border: 1px solid rgba(92, 255, 155, 0.3);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 50%, rgba(92, 255, 155, 0.28), transparent 48%),
        rgba(2, 10, 18, 0.5);
    color: #d8ffe7;
}

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

.settings-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(96, 222, 255, 0.18);
    border-radius: 12px;
    background: rgba(5, 16, 28, 0.84);
}

.settings-wide {
    grid-column: 1 / -1;
}

.settings-card h2 {
    margin: 0;
    font-size: 20px;
}

.hidden-app-launch,
.settings-two-column {
    display: grid;
    gap: 10px;
}

.hidden-app-launch {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: center;
    margin-top: 6px;
}

.hidden-app-launch span {
    color: #a9bfd1;
    font-size: 13px;
}

.settings-two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-option {
    min-height: 0;
}

.settings-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid rgba(96, 222, 255, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
}

.settings-option input {
    margin-top: 4px;
}

.settings-option strong,
.settings-option small {
    display: block;
}

.theme-light .settings-shell,
.theme-light .settings-hero,
.theme-light .settings-card {
    color: #102335;
}

.theme-light .settings-hero,
.theme-light .settings-card {
    border-color: rgba(15, 100, 128, 0.18);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 44px rgba(36, 83, 105, 0.14);
}

.theme-light .settings-option {
    background: rgba(232, 247, 248, 0.74);
}

.theme-light .settings-preview {
    color: #063124;
    background:
        radial-gradient(circle at 50% 50%, rgba(22, 166, 114, 0.2), transparent 48%),
        rgba(255, 255, 255, 0.7);
}

.theme-white.portal-body,
.theme-soft-gray.portal-body,
.theme-dark-gray.portal-body {
    --image-light-overlay: linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82));
    --image-dark-overlay: linear-gradient(rgba(245, 247, 249, 0.78), rgba(245, 247, 249, 0.78));
    background:
        linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
        url("/images/theme/light-hud.svg") center top / cover fixed no-repeat,
        #ffffff;
    color: #101418;
}

.theme-soft-gray.portal-body {
    --image-light-overlay: linear-gradient(rgba(232, 236, 240, 0.82), rgba(232, 236, 240, 0.82));
    --image-dark-overlay: linear-gradient(rgba(223, 229, 234, 0.78), rgba(223, 229, 234, 0.78));
    background:
        linear-gradient(rgba(228, 232, 236, 0.88), rgba(228, 232, 236, 0.88)),
        url("/images/theme/light-hud.svg") center top / cover fixed no-repeat,
        #e6eaee;
    color: #111820;
}

.theme-dark-gray.portal-body {
    --image-light-overlay: linear-gradient(rgba(39, 44, 50, 0.82), rgba(39, 44, 50, 0.82));
    --image-dark-overlay: linear-gradient(rgba(24, 28, 33, 0.78), rgba(24, 28, 33, 0.78));
    background:
        radial-gradient(circle at 18% 8%, rgba(92, 255, 155, 0.08), transparent 28rem),
        linear-gradient(rgba(36, 40, 46, 0.92), rgba(36, 40, 46, 0.92)),
        var(--page-art) center top / cover fixed no-repeat,
        #24282e;
    color: #f2f5f7;
}

.theme-white .portal-topbar,
.theme-white .portal-footer,
.theme-white .portal-side-rail,
.theme-white .rail-live-panel,
.theme-white .crm-shell,
.theme-white .crm-list-shell,
.theme-white .notifications-hero,
.theme-white .notification-list,
.theme-white .secure-chat-shell,
.theme-white .settings-card,
.theme-white .settings-hero,
.theme-white .moderation-toolbar,
.theme-white .moderation-grid,
.theme-white .moderation-section,
.theme-white .content-card,
.theme-white .content-compose,
.theme-white .content-hero,
.theme-white .smf-frame {
    color: #101418;
    border-color: rgba(10, 18, 28, 0.14);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 38px rgba(14, 29, 42, 0.08);
}

.theme-soft-gray .portal-topbar,
.theme-soft-gray .portal-footer,
.theme-soft-gray .portal-side-rail,
.theme-soft-gray .rail-live-panel,
.theme-soft-gray .crm-shell,
.theme-soft-gray .crm-list-shell,
.theme-soft-gray .notifications-hero,
.theme-soft-gray .notification-list,
.theme-soft-gray .secure-chat-shell,
.theme-soft-gray .settings-card,
.theme-soft-gray .settings-hero,
.theme-soft-gray .moderation-toolbar,
.theme-soft-gray .moderation-grid,
.theme-soft-gray .moderation-section,
.theme-soft-gray .content-card,
.theme-soft-gray .content-compose,
.theme-soft-gray .content-hero,
.theme-soft-gray .smf-frame {
    color: #111820;
    border-color: rgba(10, 18, 28, 0.16);
    background: rgba(236, 240, 244, 0.94);
    box-shadow: 0 18px 36px rgba(14, 29, 42, 0.1);
}

.theme-dark-gray .portal-topbar,
.theme-dark-gray .portal-footer,
.theme-dark-gray .portal-side-rail,
.theme-dark-gray .rail-live-panel,
.theme-dark-gray .crm-shell,
.theme-dark-gray .crm-list-shell,
.theme-dark-gray .notifications-hero,
.theme-dark-gray .notification-list,
.theme-dark-gray .secure-chat-shell,
.theme-dark-gray .settings-card,
.theme-dark-gray .settings-hero,
.theme-dark-gray .moderation-toolbar,
.theme-dark-gray .moderation-grid,
.theme-dark-gray .moderation-section,
.theme-dark-gray .content-card,
.theme-dark-gray .content-compose,
.theme-dark-gray .content-hero,
.theme-dark-gray .smf-frame {
    color: #f2f5f7;
    border-color: rgba(190, 206, 220, 0.16);
    background: rgba(43, 48, 55, 0.94);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
}

.theme-white .portal-brand,
.theme-white .portal-topnav a,
.theme-white .portal-footer a,
.theme-white .rail-link,
.theme-soft-gray .portal-brand,
.theme-soft-gray .portal-topnav a,
.theme-soft-gray .portal-footer a,
.theme-soft-gray .rail-link {
    color: #101418;
}

.theme-dark-gray .portal-brand,
.theme-dark-gray .portal-topnav a,
.theme-dark-gray .portal-footer a,
.theme-dark-gray .rail-link {
    color: #f2f5f7;
}

.theme-white .portal-page-visual,
.theme-soft-gray .portal-page-visual {
    background:
        var(--image-dark-overlay),
        linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(235, 241, 246, 0.72)),
        var(--header-art) center 46% / cover no-repeat;
}

.theme-dark-gray .portal-page-visual {
    background:
        var(--image-dark-overlay),
        linear-gradient(90deg, rgba(28, 32, 38, 0.94), rgba(43, 48, 55, 0.74)),
        var(--header-art) center 46% / cover no-repeat;
}

.theme-white .secure-thread-panel,
.theme-white .secure-message-panel,
.theme-white .secure-message-row,
.theme-white .secure-compose,
.theme-white .moderation-row,
.theme-white .moderation-card,
.theme-white .settings-option,
.theme-soft-gray .secure-thread-panel,
.theme-soft-gray .secure-message-panel,
.theme-soft-gray .secure-message-row,
.theme-soft-gray .secure-compose,
.theme-soft-gray .moderation-row,
.theme-soft-gray .moderation-card,
.theme-soft-gray .settings-option {
    color: #101418;
    border-color: rgba(10, 18, 28, 0.14);
    background: rgba(255, 255, 255, 0.76);
}

.theme-soft-gray .secure-thread-panel,
.theme-soft-gray .secure-message-panel,
.theme-soft-gray .secure-message-row,
.theme-soft-gray .secure-compose,
.theme-soft-gray .moderation-row,
.theme-soft-gray .moderation-card,
.theme-soft-gray .settings-option {
    background: rgba(246, 248, 250, 0.72);
}

.theme-dark-gray .secure-thread-panel,
.theme-dark-gray .secure-message-panel,
.theme-dark-gray .secure-message-row,
.theme-dark-gray .secure-compose,
.theme-dark-gray .moderation-row,
.theme-dark-gray .moderation-card,
.theme-dark-gray .settings-option {
    color: #f2f5f7;
    border-color: rgba(190, 206, 220, 0.14);
    background: rgba(35, 40, 46, 0.78);
}

.theme-white input,
.theme-white textarea,
.theme-white select,
.theme-soft-gray input,
.theme-soft-gray textarea,
.theme-soft-gray select {
    color: #101418;
    background-color: #ffffff;
    border-color: rgba(10, 18, 28, 0.18);
}

.theme-dark-gray input,
.theme-dark-gray textarea,
.theme-dark-gray select {
    color: #f2f5f7;
    background-color: #1f242a;
    border-color: rgba(190, 206, 220, 0.18);
}

@media (max-width: 820px) {
    .settings-hero,
    .settings-grid {
        grid-template-columns: 1fr;
    }

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

    .settings-hero {
        align-items: stretch;
        flex-direction: column;
    }
}

.theme-very-dark {
    --portal-surface: rgba(0, 5, 10, 0.96);
    --portal-panel: rgba(1, 10, 18, 0.92);
    --portal-text: #f4fbff;
}

.theme-very-dark .portal-content-area,
.theme-very-dark .portal-side-rail,
.theme-very-dark .portal-topbar,
.theme-very-dark .settings-card,
.theme-very-dark .settings-hero,
.theme-very-dark .crm-panel,
.theme-very-dark .content-card,
.theme-very-dark .content-compose,
.theme-very-dark .content-hero,
.theme-very-dark .smf-frame {
    background-color: rgba(0, 6, 12, 0.92);
    border-color: color-mix(in srgb, var(--portal-highlight, #5cff9b) 30%, rgba(110, 231, 255, 0.18));
}

.magnetic-glow.is-glowing,
.btn:focus,
.btn:hover,
.rail-link:hover,
.top-action-chip:hover,
.top-register-chip:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--portal-highlight, #5cff9b) 38%, transparent),
        0 0 28px color-mix(in srgb, var(--portal-highlight, #5cff9b) 34%, transparent);
}

.interaction-active::before {
    background: radial-gradient(circle at var(--cursor-x) var(--cursor-y),
        color-mix(in srgb, var(--portal-highlight, #5cff9b) 28%, transparent),
        transparent 18rem);
}