.portal-operation-security-shell {
    --security-drawer-width: min(382px, calc(100vw - 54px));
    position: fixed;
    top: 76px;
    right: 0;
    z-index: 1180;
    display: grid;
    grid-template-columns: 48px var(--security-drawer-width);
    width: calc(48px + var(--security-drawer-width));
    align-items: start;
    transform: translate3d(0, 0, 0);
    transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility .38s linear;
    will-change: transform;
}

.portal-operation-security-shell[hidden] {
    display: none;
}

.portal-operation-security-shell.is-closed {
    transform: translate3d(var(--security-drawer-width), 0, 0);
}

.portal-operation-security-shell.is-docked {
    visibility: hidden;
    transform: translate3d(calc(48px + var(--security-drawer-width)), 0, 0);
}

.portal-operation-security-tab {
    position: relative;
    display: grid;
    width: 48px;
    min-height: 76px;
    place-items: center;
    align-self: start;
    border: 1px solid color-mix(in srgb, var(--infradac-green) 54%, var(--infradac-border));
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: color-mix(in srgb, var(--infradac-card) 96%, transparent);
    color: var(--infradac-ink);
    box-shadow: -10px 14px 32px rgba(4, 18, 29, .2);
    cursor: pointer;
    backdrop-filter: blur(18px);
}

.portal-operation-security-tab i {
    font-size: 1.15rem;
}

.portal-operation-security-tab-light,
.portal-operation-security-header-light {
    width: 9px;
    height: 9px;
    border: 2px solid color-mix(in srgb, var(--infradac-card) 78%, white);
    border-radius: 999px;
    background: #d64545;
    box-shadow: 0 0 0 3px color-mix(in srgb, #d64545 18%, transparent);
}

.portal-operation-security-tab-light {
    position: absolute;
    right: 7px;
    bottom: 10px;
}

.portal-operation-security {
    width: var(--security-drawer-width);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--infradac-green) 42%, var(--infradac-border));
    border-right: 0;
    border-radius: 0 0 0 18px;
    background: color-mix(in srgb, var(--infradac-card) 97%, transparent);
    color: var(--infradac-ink);
    box-shadow: -18px 22px 54px rgba(4, 18, 29, .24);
    backdrop-filter: blur(18px);
}

.portal-operation-security__header,
.portal-operation-security__status,
.portal-operation-security__actions {
    display: flex;
    align-items: center;
    gap: 11px;
}

.portal-operation-security__header {
    position: relative;
    padding: 16px 54px 13px 15px;
}

.portal-operation-security__icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--infradac-green) 17%, var(--infradac-surface));
    color: var(--infradac-green-dark);
}

.portal-operation-security__copy {
    min-width: 0;
}

.portal-operation-security__copy strong,
.portal-operation-security__copy span {
    display: block;
}

.portal-operation-security__copy strong {
    color: var(--infradac-heading);
    font-size: .96rem;
}

.portal-operation-security__copy span {
    margin-top: 3px;
    color: var(--infradac-muted);
    font-size: .76rem;
    line-height: 1.4;
}

.portal-operation-security__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--infradac-border);
    border-radius: 10px;
    background: var(--infradac-surface);
    color: var(--infradac-ink);
    cursor: pointer;
}

.portal-operation-security__status {
    justify-content: space-between;
    border-top: 1px solid var(--infradac-border);
    border-bottom: 1px solid var(--infradac-border);
    padding: 10px 15px;
}

.portal-operation-security__state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #e36b6b;
    font-size: .8rem;
    font-weight: 900;
}

.portal-operation-security__countdown,
.portal-operation-security-header-time {
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .8rem;
    font-weight: 900;
}

.portal-operation-security__session-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 13px 15px;
}

.portal-operation-security__session-grid > div {
    min-width: 0;
    border: 1px solid var(--infradac-border);
    border-radius: 11px;
    background: color-mix(in srgb, var(--infradac-surface) 78%, transparent);
    padding: 10px;
}

.portal-operation-security__session-grid span,
.portal-operation-security__session-grid strong {
    display: block;
}

.portal-operation-security__session-grid span {
    color: var(--infradac-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.portal-operation-security__session-grid strong {
    margin-top: 5px;
    color: var(--infradac-heading);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .88rem;
}

.portal-operation-security__actions {
    justify-content: flex-end;
    padding: 0 15px 15px;
}

.portal-operation-security__actions .button {
    min-height: 39px;
}

.portal-operation-security__message {
    margin: 0 15px 12px;
    border-radius: 9px;
    padding: 9px 11px;
    font-size: .76rem;
    font-weight: 750;
}

.portal-operation-security-header-button {
    position: relative;
    display: inline-flex;
    min-width: 78px;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: #55cf83;
    cursor: pointer;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .25s ease, transform .32s cubic-bezier(.22, 1, .36, 1), color .2s ease;
}

.portal-operation-security-header-button[hidden] {
    display: inline-flex;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-9px) scale(.88);
}

.portal-operation-security-header-button i {
    font-size: .95rem;
}

.portal-operation-security-shell.status-green,
.portal-operation-security-header-button.status-green { color: #55cf83; }
.portal-operation-security-shell.status-yellow,
.portal-operation-security-header-button.status-yellow { color: #f4d35e; }
.portal-operation-security-shell.status-orange,
.portal-operation-security-header-button.status-orange { color: #ff9f43; }
.portal-operation-security-shell.status-red,
.portal-operation-security-header-button.status-red,
.portal-operation-security-shell.status-expired,
.portal-operation-security-header-button.status-expired { color: #ef6464; }

.portal-operation-security-shell.status-green .portal-operation-security-tab-light,
.portal-operation-security-header-button.status-green .portal-operation-security-header-light { background: #42c879; box-shadow: 0 0 0 3px color-mix(in srgb, #42c879 20%, transparent); }
.portal-operation-security-shell.status-yellow .portal-operation-security-tab-light,
.portal-operation-security-header-button.status-yellow .portal-operation-security-header-light { background: #f4d35e; box-shadow: 0 0 0 3px color-mix(in srgb, #f4d35e 20%, transparent); }
.portal-operation-security-shell.status-orange .portal-operation-security-tab-light,
.portal-operation-security-header-button.status-orange .portal-operation-security-header-light { background: #ff9f43; box-shadow: 0 0 0 3px color-mix(in srgb, #ff9f43 20%, transparent); }
.portal-operation-security-shell.status-red .portal-operation-security-tab-light,
.portal-operation-security-header-button.status-red .portal-operation-security-header-light { background: #ef6464; box-shadow: 0 0 0 3px color-mix(in srgb, #ef6464 22%, transparent); animation: portal-security-alert 1s ease-in-out infinite; }
.portal-operation-security-shell.status-expired .portal-operation-security-tab-light,
.portal-operation-security-header-button.status-expired .portal-operation-security-header-light { background: #d64545; box-shadow: 0 0 0 3px color-mix(in srgb, #d64545 20%, transparent); animation: none; }

body.dark-mode .portal-operation-security,
body.dark-mode .portal-operation-security-tab {
    border-color: color-mix(in srgb, var(--infradac-green) 48%, var(--infradac-border));
    background: color-mix(in srgb, var(--infradac-card) 97%, transparent);
    color: var(--infradac-ink);
}

body.portal-security-centralized .portal-verification-card.licensing-security-card,
body.portal-security-centralized [data-centralized-security-card] {
    display: none !important;
}

body.portal-security-centralized .portal-modal-dialog {
    scroll-padding-top: 16px;
}

@keyframes portal-security-alert {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .32; transform: scale(.72); }
}

@media (max-width: 720px) {
    .portal-operation-security-shell {
        --security-drawer-width: calc(100vw - 48px);
        top: 64px;
    }

    .portal-operation-security {
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
    }

    .portal-operation-security-header-time {
        display: none;
    }

    .portal-operation-security-header-button {
        min-width: 40px;
        width: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-operation-security-shell,
    .portal-operation-security-header-button {
        transition: none;
    }

    .portal-operation-security-shell.status-red .portal-operation-security-tab-light,
    .portal-operation-security-header-button.status-red .portal-operation-security-header-light {
        animation: none;
    }
}