/*
 * Wyvern glass layer
 *
 * Mirrors the Loader's transparent surfaces, neutral hairline outlines, and
 * compact control hierarchy without changing the website's layout or palette.
 */

:root {
    --glass-panel: rgba(15, 17, 29, .9);
    --glass-panel-quiet: rgba(11, 13, 22, .86);
    --glass-panel-strong: rgba(18, 21, 34, .94);
    --glass-shell: rgba(11, 13, 22, .94);
    --glass-chrome: rgba(9, 11, 19, .92);
    --glass-bar: rgba(10, 12, 21, .9);
    --glass-control: rgba(25, 28, 43, .92);
    --glass-control-hover: rgba(34, 38, 57, .96);
    --glass-edge: rgba(183, 187, 215, .22);
    --glass-edge-strong: rgba(184, 177, 255, .36);
    --glass-focus-edge: rgba(184, 177, 255, .64);
    --glass-focus-glow: rgba(150, 140, 255, .15);
    --glass-highlight: rgba(255, 255, 255, .04);
    --glass-shadow: 0 18px 55px rgba(1, 2, 8, .22), inset 0 1px 0 var(--glass-highlight);
    --glass-shadow-quiet: 0 10px 32px rgba(1, 2, 8, .13), inset 0 1px 0 rgba(255, 255, 255, .03);
    --glass-filter: none;
    --glass-control-filter: none;

    /* Keep every existing route on the same Loader-derived surface tokens. */
    --site-shell: var(--glass-panel-quiet);
    --site-surface: var(--glass-panel);
    --site-surface-quiet: var(--glass-panel-quiet);
    --site-surface-raised: var(--glass-control-hover);
    --site-field: var(--glass-control);
    --site-panel: var(--glass-panel);
    --site-line: var(--glass-edge);
    --site-line-strong: var(--glass-edge-strong);
    --site-radius-control: 6px;
    --site-radius-surface: 9px;
    --site-radius-shell: 14px;

    --plain-surface: var(--glass-panel);
    --plain-line: var(--glass-edge);
    --plain-line-strong: var(--glass-edge-strong);

    --wyvern-panel: var(--glass-panel);
    --wyvern-panel-solid: var(--glass-panel-strong);
    --wyvern-panel-raised: var(--glass-control-hover);
    --wyvern-line: var(--glass-edge);
    --wyvern-line-strong: var(--glass-edge-strong);
    --wyvern-surface: var(--glass-panel);
    --wyvern-surface-quiet: var(--glass-panel-quiet);
}

@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    :root {
        --glass-panel: rgba(13, 15, 25, .48);
        --glass-panel-quiet: rgba(9, 11, 19, .36);
        --glass-panel-strong: rgba(17, 19, 31, .68);
        --glass-shell: rgba(11, 13, 22, .54);
        --glass-chrome: rgba(8, 9, 18, .38);
        --glass-bar: rgba(10, 12, 21, .44);
        --glass-control: rgba(25, 28, 43, .64);
        --glass-control-hover: rgba(35, 39, 58, .76);
        --glass-filter: blur(26px) saturate(118%);
        --glass-control-filter: blur(15px) saturate(112%);
    }
}

/* Public shell */
body.view-public .site-header {
    background: var(--glass-chrome);
    -webkit-backdrop-filter: blur(26px) saturate(118%);
    backdrop-filter: blur(26px) saturate(118%);
}

body.view-public .site-header-inner {
    border-bottom-color: var(--glass-edge);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .018);
}

.view-login .site-shell,
.view-register .site-shell,
body.view-public .site-shell {
    background: var(--glass-shell);
    border-color: var(--glass-edge-strong);
    box-shadow: 0 30px 90px rgba(1, 2, 8, .34), inset 0 1px 0 var(--glass-highlight);
    -webkit-backdrop-filter: blur(30px) saturate(118%);
    backdrop-filter: blur(30px) saturate(118%);
}

.view-login .topbar,
.view-register .topbar {
    background: var(--glass-bar);
    border-bottom-color: var(--glass-edge);
    -webkit-backdrop-filter: var(--glass-control-filter);
    backdrop-filter: var(--glass-control-filter);
}

/* Public cards. The inner highlight replaces the old heavy card shadow. */
body.view-public .wyvern-plan,
body.view-public .wyvern-comparison,
body.view-public .wyvern-note-panel,
body.view-public .wyvern-channel-panel,
body.view-public .wyvern-template-panel,
body.view-public .wyvern-catalog-section,
body.view-public .leaderboard-week,
body.view-public .leaderboard-card,
body.view-public .terms-sections > section,
.view-login .panel,
.view-register .panel {
    background: var(--glass-panel);
    border-color: var(--glass-edge);
    border-radius: var(--site-radius-surface);
    box-shadow: var(--glass-shadow-quiet);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
}

body.view-public .wyvern-plan.featured,
body.view-public .leaderboard-place-1 .leaderboard-card {
    border-color: var(--glass-edge-strong);
    box-shadow: var(--glass-shadow), 0 0 0 1px rgba(150, 140, 255, .045);
}

body.view-public .leaderboard-place.is-empty .leaderboard-card {
    background: var(--glass-panel-quiet);
    border-color: var(--glass-edge);
    box-shadow: var(--glass-shadow-quiet);
}

body.view-public .wyvern-comparison-brand.product,
body.view-public .wyvern-comparison-row .positive {
    background: rgba(150, 140, 255, .075);
}

body.view-public .wyvern-catalog-section > header,
body.view-public .wyvern-template-panel > header,
body.view-public .panel-foot {
    background: rgba(9, 11, 19, .3);
    border-color: var(--glass-edge);
}

body.view-public .mod-media,
body.view-public .mod-logo-frame,
body.view-public .leaderboard-logo {
    background: var(--glass-panel-strong);
    border-color: var(--glass-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

body.view-public .wyvern-story-media {
    border-color: var(--glass-edge);
    box-shadow: 0 22px 64px rgba(1, 2, 8, .3), inset 0 1px 0 var(--glass-highlight);
}

body.view-public .wyvern-story-media > span,
body.view-public .leaderboard-tags span,
body.view-public .tag,
body.view-public .wyvern-release i {
    background: rgba(13, 15, 25, .5);
    border-color: var(--glass-edge);
    -webkit-backdrop-filter: var(--glass-control-filter);
    backdrop-filter: var(--glass-control-filter);
}

/* Public controls */
body.view-public .button:not(.primary),
body.view-public .wyvern-actions .secondary,
body.view-public .wyvern-plan:not(.featured) .wyvern-plan-action,
body.view-public .wyvern-plan-copy,
body.view-public .plain-preview-dialog-arrow,
.view-login .button:not(.primary),
.view-login .text-button,
.view-register .button:not(.primary),
.view-register .text-button {
    color: var(--site-copy);
    background: var(--glass-control);
    border-color: var(--glass-edge);
    border-radius: var(--site-radius-control);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    -webkit-backdrop-filter: var(--glass-control-filter);
    backdrop-filter: var(--glass-control-filter);
}

body.view-public .button:not(.primary):hover,
body.view-public .button:not(.primary):focus-visible,
body.view-public .wyvern-actions .secondary:hover,
body.view-public .wyvern-actions .secondary:focus-visible,
body.view-public .wyvern-plan:not(.featured) .wyvern-plan-action:hover,
body.view-public .wyvern-plan:not(.featured) .wyvern-plan-action:focus-visible,
body.view-public .wyvern-plan-copy:hover,
body.view-public .wyvern-plan-copy:focus-visible,
.view-login .button:not(.primary):hover,
.view-login .button:not(.primary):focus-visible,
.view-login .text-button:hover,
.view-login .text-button:focus-visible,
.view-register .button:not(.primary):hover,
.view-register .button:not(.primary):focus-visible,
.view-register .text-button:hover,
.view-register .text-button:focus-visible {
    color: var(--site-ink);
    background: var(--glass-control-hover);
    border-color: var(--glass-edge-strong);
}

body.view-public input,
body.view-public select,
body.view-public textarea,
.view-login input,
.view-login select,
.view-login textarea,
.view-register input,
.view-register select,
.view-register textarea {
    background: var(--glass-control);
    border-color: var(--glass-edge);
    border-radius: var(--site-radius-control);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    -webkit-backdrop-filter: var(--glass-control-filter);
    backdrop-filter: var(--glass-control-filter);
}

body.view-public input:hover,
body.view-public select:hover,
body.view-public textarea:hover,
body.view-public input:focus,
body.view-public select:focus,
body.view-public textarea:focus,
.view-login input:hover,
.view-login input:focus,
.view-register input:hover,
.view-register input:focus {
    background: var(--glass-control-hover);
    border-color: var(--glass-edge-strong);
}

body.view-public input:focus-visible,
body.view-public select:focus-visible,
body.view-public textarea:focus-visible,
.view-login input:focus-visible,
.view-register input:focus-visible {
    border-color: var(--glass-focus-edge);
    outline: 0;
    box-shadow: 0 0 16px var(--glass-focus-glow), inset 0 1px 0 var(--glass-highlight);
}

body.view-public .wyvern-download-dialog-shell {
    background: var(--glass-panel-strong);
    border-color: var(--glass-edge-strong);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .46), inset 0 1px 0 var(--glass-highlight);
    -webkit-backdrop-filter: blur(28px) saturate(118%);
    backdrop-filter: blur(28px) saturate(118%);
}

body.view-public .wyvern-download-dialog-controls > button,
body.view-public .wyvern-captcha-track {
    background: var(--glass-control);
    border-color: var(--glass-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    -webkit-backdrop-filter: var(--glass-control-filter);
    backdrop-filter: var(--glass-control-filter);
}

body.view-public .wyvern-toast,
.view-login .wyvern-toast,
.view-register .wyvern-toast {
    background: var(--glass-panel-strong);
    border-color: var(--glass-edge-strong);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
}

@media (hover: hover) and (pointer: fine) {
    body.view-public .wyvern-plan:hover,
    body.view-public .wyvern-comparison:hover,
    body.view-public .wyvern-story-media:hover,
    body.view-public .wyvern-story-media:focus-visible,
    body.view-public .leaderboard-place:not(.is-empty) .leaderboard-card:hover {
        border-color: var(--glass-edge-strong);
        box-shadow: var(--glass-shadow);
        transform: translateY(-1px);
    }
}

/* Owner and operator portals */
.dashboard-body {
    --site-shell: var(--glass-shell);
}

.dashboard-body .portal-shell {
    background: var(--site-shell);
    border-color: var(--glass-edge-strong);
    box-shadow: 0 30px 90px rgba(1, 2, 8, .34), inset 0 1px 0 var(--glass-highlight);
    -webkit-backdrop-filter: blur(30px) saturate(118%);
    backdrop-filter: blur(30px) saturate(118%);
}

.dashboard-body .portal-sidebar {
    background: var(--glass-chrome);
    border-right-color: var(--glass-edge);
    -webkit-backdrop-filter: blur(24px) saturate(116%);
    backdrop-filter: blur(24px) saturate(116%);
}

.dashboard-body .portal-utility {
    background: var(--glass-bar);
    border-bottom-color: var(--glass-edge);
    -webkit-backdrop-filter: blur(22px) saturate(114%);
    backdrop-filter: blur(22px) saturate(114%);
}

.dashboard-body .portal-sidebar-meta,
.dashboard-body .panel,
.dashboard-body .metric-card,
.dashboard-body .registry-panel,
.dashboard-body .static-card,
.dashboard-body .status-panel,
.dashboard-body .authentication-panel,
.dashboard-body .artwork-panel,
.dashboard-body .security-policy-panel,
.dashboard-body .security-feed-panel,
.dashboard-body .hardware-ban-panel,
.dashboard-body .bulk-output-panel,
.dashboard-body .admin-hwid-risk-policy,
.dashboard-body .admin-lookup-command,
.dashboard-body .admin-lookup-results,
.dashboard-body .admin-lookup-details,
.dashboard-body .deployment-card,
.dashboard-body .dialog-surface {
    background: var(--glass-panel);
    border-color: var(--glass-edge);
    border-radius: var(--site-radius-surface);
    box-shadow: var(--glass-shadow-quiet);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
}

.dashboard-body .metric-card {
    background: linear-gradient(145deg, rgba(25, 28, 43, .42), rgba(9, 11, 19, .34));
}

.dashboard-body .metric-card:hover,
.dashboard-body .metric-card:focus-visible {
    background: linear-gradient(145deg, rgba(35, 39, 58, .58), rgba(13, 15, 25, .46));
    border-color: var(--glass-edge-strong);
    box-shadow: var(--glass-shadow);
    transform: translateY(-1px);
}

.dashboard-body .portal-navigation .tab-btn:hover,
.dashboard-body .portal-navigation .tab-btn:focus-visible {
    background: rgba(150, 140, 255, .065);
    border-color: var(--glass-edge);
}

.dashboard-body .portal-navigation .tab-btn.active {
    background: rgba(150, 140, 255, .12);
    border-color: rgba(184, 177, 255, .27);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.dashboard-body .button:not(.primary):not(.danger),
.dashboard-body .mini-button:not(.primary):not(.danger),
.dashboard-body .icon-button,
.dashboard-body .text-button {
    background: var(--glass-control);
    border-color: var(--glass-edge);
    border-radius: var(--site-radius-control);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    -webkit-backdrop-filter: var(--glass-control-filter);
    backdrop-filter: var(--glass-control-filter);
}

.dashboard-body .button:not(.primary):not(.danger):hover,
.dashboard-body .button:not(.primary):not(.danger):focus-visible,
.dashboard-body .mini-button:not(.primary):not(.danger):hover,
.dashboard-body .mini-button:not(.primary):not(.danger):focus-visible,
.dashboard-body .icon-button:hover,
.dashboard-body .icon-button:focus-visible,
.dashboard-body .text-button:hover,
.dashboard-body .text-button:focus-visible {
    color: var(--site-ink);
    background: var(--glass-control-hover);
    border-color: var(--glass-edge-strong);
}

.dashboard-body input,
.dashboard-body select,
.dashboard-body textarea {
    background: var(--glass-control);
    border-color: var(--glass-edge);
    border-radius: var(--site-radius-control);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    -webkit-backdrop-filter: var(--glass-control-filter);
    backdrop-filter: var(--glass-control-filter);
}

.dashboard-body input:hover,
.dashboard-body select:hover,
.dashboard-body textarea:hover,
.dashboard-body input:focus,
.dashboard-body select:focus,
.dashboard-body textarea:focus {
    background: var(--glass-control-hover);
    border-color: var(--glass-edge-strong);
}

.dashboard-body input:focus-visible,
.dashboard-body select:focus-visible,
.dashboard-body textarea:focus-visible {
    border-color: var(--glass-focus-edge);
    outline: 0;
    box-shadow: 0 0 16px var(--glass-focus-glow), inset 0 1px 0 var(--glass-highlight);
}

.dashboard-body select option {
    color: var(--site-copy);
    background: #121522;
}

.dashboard-body .switch-row,
.dashboard-body .admin-hwid-risk-toggle,
.dashboard-body .admin-hwid-risk-outcome,
.dashboard-body .file-drop-control,
.dashboard-body .generated-key,
.dashboard-body .registry-empty,
.dashboard-body .usage-callout,
.dashboard-body .ip-history-list,
.dashboard-body .device-history-list,
.dashboard-body .menu-availability-copy,
.dashboard-body .private-download-card,
.dashboard-body .publishing-contract > div,
.dashboard-body .changelog-entry,
.dashboard-body .detail-grid > div,
.dashboard-body .detail-code,
.dashboard-body .code-block {
    background: var(--glass-panel-quiet);
    border-color: var(--glass-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    -webkit-backdrop-filter: var(--glass-control-filter);
    backdrop-filter: var(--glass-control-filter);
}

.dashboard-body .table-wrap,
.dashboard-body .responsive-table,
.dashboard-body .security-table-wrap,
.dashboard-body .hardware-ban-table-wrap,
.dashboard-body .admin-hwid-table,
.dashboard-body .operator-log-table,
.dashboard-body .operator-channel-table {
    background: rgba(9, 11, 19, .24);
    border-color: var(--glass-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}

.dashboard-body thead,
.dashboard-body .registry-heading,
.dashboard-body .panel-heading {
    border-color: var(--glass-edge);
}

.dashboard-body dialog::backdrop {
    background: rgba(4, 5, 10, .68);
    -webkit-backdrop-filter: blur(16px) saturate(105%);
    backdrop-filter: blur(16px) saturate(105%);
}

.dashboard-body .toast {
    background: var(--glass-panel-strong);
    border-color: var(--glass-edge-strong);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-panel: rgba(15, 17, 29, .96);
        --glass-panel-quiet: rgba(11, 13, 22, .94);
        --glass-panel-strong: rgba(18, 21, 34, .98);
        --glass-shell: rgba(11, 13, 22, .98);
        --glass-chrome: rgba(9, 11, 19, .98);
        --glass-bar: rgba(10, 12, 21, .98);
        --glass-control: rgba(25, 28, 43, .98);
        --glass-control-hover: rgba(35, 39, 58, 1);
        --glass-filter: none;
        --glass-control-filter: none;
    }
}

@media (max-width: 720px) {
    body.view-public .site-header,
    .dashboard-body .portal-shell,
    .dashboard-body .portal-sidebar,
    .dashboard-body .portal-utility {
        -webkit-backdrop-filter: blur(20px) saturate(112%);
        backdrop-filter: blur(20px) saturate(112%);
    }
}