/* Copyright (c) 2026 Cosmorphic. All rights reserved. */

:root {
    --space-canvas: #030711;
    --space-deep: #070c16;
    --space-panel: #0a111f;
    --space-raised: #101a2b;
    --space-hover: #142137;
    --space-inset: #050a13;
    --line-soft: rgba(164, 190, 230, 0.11);
    --line-normal: rgba(164, 190, 230, 0.19);
    --line-strong: rgba(164, 190, 230, 0.32);
    --line-focus: rgba(121, 168, 255, 0.68);
    --ink-primary: #f2f6ff;
    --ink-secondary: #a9b5ca;
    --ink-muted: #718099;
    --stellar-blue: #79a8ff;
    --stellar-cyan: #72d7ff;
    --orbit-violet: #9187f7;
    --aurora-green: #61cbb7;
    --signal-success: #52c69c;
    --signal-warning: #e2b464;
    --signal-danger: #e67272;
    --observatory-shadow: 0 24px 72px rgba(0, 0, 0, 0.36);
    --panel-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
    --radius-compact: 6px;
    --radius-control: 9px;
    --radius-panel: 14px;
    --radius-feature: 18px;

    --bg-base: var(--space-canvas);
    --bg-surface: var(--space-deep);
    --bg-card: var(--space-panel);
    --bg-elevated: var(--space-raised);
    --border-subtle: var(--line-soft);
    --border-strong: var(--line-normal);
    --border-hover: var(--line-focus);
    --text-primary: var(--ink-primary);
    --text-secondary: var(--ink-secondary);
    --text-muted: var(--ink-muted);
    --accent: var(--stellar-blue);
    --accent-bright: var(--stellar-cyan);
    --accent-soft: rgba(121, 168, 255, 0.1);
    --accent-line: rgba(121, 168, 255, 0.32);
    --font-display: 'Space Grotesk', 'Noto Sans TC', 'Microsoft JhengHei UI', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
    --font-sans: 'Space Grotesk', 'Noto Sans TC', 'Microsoft JhengHei UI', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
    --radius-sm: var(--radius-compact);
    --radius-md: var(--radius-control);
    --radius-lg: var(--radius-panel);
    --radius-xl: var(--radius-feature);
    --shadow-card: var(--panel-shadow);
    --shadow-rise: var(--observatory-shadow);
}

html {
    color-scheme: dark;
    background: var(--space-canvas);
    scrollbar-color: rgba(121, 168, 255, 0.35) var(--space-canvas);
}

body {
    color: var(--ink-primary);
    font-family: var(--font-sans);
    line-height: 1.62;
    letter-spacing: 0;
    background-color: var(--space-canvas);
    background-image:
        radial-gradient(circle at 8% 18%, rgba(220, 235, 255, 0.46) 0 0.7px, transparent 0.9px),
        radial-gradient(circle at 23% 72%, rgba(160, 197, 255, 0.35) 0 0.6px, transparent 0.8px),
        radial-gradient(circle at 47% 9%, rgba(230, 240, 255, 0.4) 0 0.6px, transparent 0.9px),
        radial-gradient(circle at 69% 37%, rgba(164, 190, 230, 0.3) 0 0.7px, transparent 0.9px),
        radial-gradient(circle at 88% 78%, rgba(226, 236, 255, 0.4) 0 0.6px, transparent 0.8px),
        linear-gradient(rgba(115, 145, 190, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(115, 145, 190, 0.018) 1px, transparent 1px),
        radial-gradient(ellipse 70% 38% at 50% -8%, rgba(67, 101, 162, 0.16), transparent 70%),
        linear-gradient(180deg, #030711 0%, #050a13 48%, #030711 100%);
    background-size: auto, auto, auto, auto, auto, 72px 72px, 72px 72px, auto, auto;
    background-attachment: fixed;
}

body::before {
    opacity: 0.022;
    mix-blend-mode: soft-light;
}

::selection {
    color: #fff;
    background: rgba(121, 168, 255, 0.34);
}

:focus-visible {
    outline: 2px solid var(--stellar-cyan);
    outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink-primary);
    font-family: var(--font-display);
    letter-spacing: -0.026em;
}

p, li {
    text-wrap: pretty;
}

a, button, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea {
    font: inherit;
}

input, select, textarea {
    color: var(--ink-primary);
    border-color: var(--line-normal);
    background-color: var(--space-inset);
}

input::placeholder,
textarea::placeholder {
    color: #5f6d82;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--line-focus);
    box-shadow: 0 0 0 3px rgba(121, 168, 255, 0.09);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--space-canvas);
}

::-webkit-scrollbar-thumb {
    border: 3px solid var(--space-canvas);
    border-radius: 10px;
    background: #33435c;
}

::-webkit-scrollbar-thumb:hover {
    background: #455b7b;
}

.navbar,
.navbar[style] {
    min-height: 68px;
    padding: 12px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
    background: rgba(3, 7, 17, 0.93) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.navbar::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(114, 215, 255, 0.35) 32%, rgba(145, 135, 247, 0.24) 68%, transparent 95%);
}

.navbar .nav-container {
    max-width: 1240px;
    padding-inline: 30px;
}

.nav-brand {
    gap: 12px;
}

.logo-img,
.shop-logo-img {
    border: 1px solid rgba(164, 190, 230, 0.16);
    border-radius: 10px;
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.28);
}

.logo-text {
    color: var(--ink-primary);
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 650;
    letter-spacing: -0.015em;
}

.nav-links {
    gap: 24px;
}

.nav-links > a {
    position: relative;
    padding: 9px 0;
    color: #8f9cb0;
    font-size: 0.82rem;
    font-weight: 550;
    letter-spacing: 0.01em;
}

.nav-links > a::after {
    content: '';
    position: absolute;
    right: 50%;
    bottom: 2px;
    left: 50%;
    height: 1px;
    background: var(--stellar-cyan);
    transition: right 0.2s ease, left 0.2s ease;
}

.nav-links > a:hover,
.nav-links > a:focus-visible {
    color: var(--ink-primary);
}

.nav-links > a:hover::after,
.nav-links > a:focus-visible::after {
    right: 0;
    left: 0;
}

.nav-link-feedback {
    color: #a9c8ff !important;
}

.nav-link-feedback::before {
    background: var(--stellar-cyan);
    box-shadow: 0 0 10px rgba(114, 215, 255, 0.52);
}

.nav-login-btn,
.lang-current {
    min-height: 38px;
    padding: 7px 15px;
    border: 1px solid var(--line-normal);
    border-radius: var(--radius-control);
    color: var(--ink-secondary);
    background: rgba(10, 17, 31, 0.72);
    font-size: 0.78rem;
}

.nav-login-btn:hover,
.lang-current:hover {
    color: var(--ink-primary);
    border-color: var(--line-focus);
    background: var(--space-raised);
}

.lang-menu {
    top: calc(100% + 10px);
    min-width: 148px;
    padding: 6px;
    border-color: var(--line-normal);
    border-radius: 10px;
    background: #09111f;
    box-shadow: var(--observatory-shadow);
}

.lang-option {
    min-height: 36px;
    padding: 8px 11px;
    border-radius: 6px;
    color: var(--ink-secondary);
    font-size: 0.8rem;
}

.lang-option:hover,
.lang-option.active {
    color: var(--ink-primary);
    background: var(--space-hover);
}

.lang-option.active {
    box-shadow: inset 2px 0 0 var(--stellar-blue);
}

.nav-mobile-menu {
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-normal);
    border-radius: 9px;
    color: var(--ink-secondary);
    background: var(--space-panel);
}

.section-container {
    width: min(100%, 1236px);
    max-width: 1236px;
    padding-inline: 28px;
}

.section-header {
    margin-bottom: 42px;
}

.section-title {
    color: var(--ink-primary);
    font-size: clamp(1.72rem, 3vw, 2.42rem);
    font-weight: 650;
    letter-spacing: -0.035em;
}

.section-title::after {
    width: 44px;
    height: 1px;
    margin: 14px auto 0;
    background: var(--stellar-blue);
    box-shadow: 20px 0 0 rgba(145, 135, 247, 0.55);
}

.section-subtitle {
    max-width: 650px;
    color: var(--ink-muted);
    font-size: 0.98rem;
    line-height: 1.7;
}

.primary-btn,
.contact-btn,
.buy-btn,
.uo-btn-primary,
.uo-btn-secondary,
.auth-submit-btn,
.admin-btn,
.fb-save-btn,
.fb-save-all-btn,
.fb-ping-btn,
.fb-lang-btn,
.spectra-action,
.mini-action {
    border-radius: var(--radius-control);
    font-family: var(--font-sans);
    font-weight: 650;
    letter-spacing: 0;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.primary-btn,
.contact-btn,
.uo-btn-primary,
.auth-submit-btn,
.admin-btn.primary,
.fb-save-all-btn,
.spectra-action.primary {
    color: #06101b;
    border: 1px solid #8cb9ff;
    background: #8cb9ff;
    box-shadow: 0 10px 26px rgba(75, 124, 197, 0.18);
}

.primary-btn:not(:disabled):hover,
.contact-btn:not(:disabled):hover,
.uo-btn-primary:not(:disabled):hover,
.auth-submit-btn:not(:disabled):hover,
.admin-btn.primary:not(:disabled):hover,
.fb-save-all-btn:not(:disabled):hover,
.spectra-action.primary:not(:disabled):hover {
    color: #03101b;
    border-color: #a6c9ff;
    background: #a6c9ff;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(75, 124, 197, 0.25);
}

.uo-btn-secondary,
.buy-btn,
.admin-btn,
.fb-save-btn,
.fb-ping-btn,
.fb-lang-btn,
.spectra-action.secondary,
.mini-action {
    color: var(--ink-secondary);
    border: 1px solid var(--line-normal);
    background: var(--space-panel);
}

.uo-btn-secondary:not(:disabled):hover,
.buy-btn:not(:disabled):hover,
.admin-btn:not(:disabled):hover,
.fb-save-btn:not(:disabled):hover,
.fb-ping-btn:not(:disabled):hover,
.fb-lang-btn:not(:disabled):hover,
.spectra-action.secondary:not(:disabled):hover,
.mini-action:not(:disabled):hover {
    color: var(--ink-primary);
    border-color: var(--line-focus);
    background: var(--space-raised);
    transform: translateY(-1px);
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none !important;
    box-shadow: none !important;
}

.admin-btn.danger,
.fb-remove-btn,
.mini-action.danger {
    color: #f1a3a3;
    border-color: rgba(230, 114, 114, 0.34);
    background: rgba(230, 114, 114, 0.07);
}

.modal-overlay {
    background: rgba(1, 4, 10, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.modal-content {
    width: min(92vw, 520px);
    max-height: 88dvh;
    overflow-y: auto;
    border: 1px solid var(--line-normal);
    border-radius: var(--radius-feature);
    background: #09111f;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.58);
}

.modal-close {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    color: var(--ink-muted);
    background: var(--space-panel);
}

.modal-close:hover {
    color: var(--ink-primary);
    border-color: var(--line-normal);
    background: var(--space-raised);
}

.auth-modal h2,
.auth-modal h3 {
    font-weight: 650;
}

.auth-input,
.auth-modal input,
.auth-modal select,
.auth-modal textarea {
    min-height: 44px;
    border: 1px solid var(--line-normal);
    border-radius: 8px;
    color: var(--ink-primary);
    background: var(--space-inset);
}

.auth-tabs {
    padding: 4px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--space-inset);
}

.auth-tab {
    min-height: 38px;
    border-radius: 7px;
    color: var(--ink-muted);
}

.auth-tab.active {
    color: var(--ink-primary);
    background: var(--space-raised);
    box-shadow: inset 0 0 0 1px var(--line-normal);
}

.google-btn {
    min-height: 44px;
    border-radius: 8px !important;
}

.payment-info-box {
    border-color: var(--line-normal);
    border-radius: var(--radius-panel);
    background: var(--space-inset);
}

.footer {
    border-top: 1px solid var(--line-soft);
    background: #030710;
}

.footer-content {
    min-height: 132px;
}

.footer-copyright,
.footer-bug-link {
    color: var(--ink-muted) !important;
}

.hero-section {
    min-height: 94vh;
    padding: 160px 0 110px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 116px;
    right: max(28px, calc((100vw - 1180px) / 2));
    width: 38px;
    height: 1px;
    background: rgba(164, 190, 230, 0.34);
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 50%;
    right: max(-170px, calc((100vw - 1450px) / 2));
    width: 560px;
    aspect-ratio: 1;
    border: 1px solid rgba(121, 168, 255, 0.14);
    border-radius: 50%;
    box-shadow:
        0 0 0 74px rgba(121, 168, 255, 0.025),
        0 0 0 146px rgba(145, 135, 247, 0.018);
    transform: translateY(-42%);
}

.hero-background-glow {
    top: 4%;
    left: 62%;
    width: 680px;
    height: 680px;
    background: radial-gradient(circle, rgba(85, 128, 194, 0.13), transparent 65%);
    filter: blur(6px);
}

.hero-content {
    width: min(100%, 1236px);
    max-width: 1236px;
    margin: 0 auto;
    padding-inline: 28px;
    text-align: left;
}

.hero-logo-img {
    width: 82px;
    height: 82px;
    margin: 0 0 30px;
    border: 1px solid rgba(164, 190, 230, 0.22);
    border-radius: 18px;
    animation: none;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 36px rgba(91, 134, 205, 0.11);
}

.hero-eyebrow {
    justify-content: flex-start;
    margin-bottom: 18px;
    color: #8fa1b9;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
}

.hero-eyebrow .eyebrow-bar {
    width: 38px;
    background: var(--stellar-cyan);
}

.hero-title {
    max-width: 760px;
    margin-inline: 0;
    color: var(--ink-primary);
    font-size: clamp(3rem, 7.3vw, 6.5rem);
    font-weight: 620;
    line-height: 0.95;
    letter-spacing: -0.065em;
    text-align: left;
    background: linear-gradient(112deg, #f5f8ff 5%, #b7cbec 62%, #83a8df 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-subtitle {
    max-width: 700px;
    margin: 24px 0 0;
    color: #bcc7d8;
    font-size: clamp(1.14rem, 2vw, 1.42rem);
    font-weight: 450;
    text-align: left;
}

.hero-description {
    max-width: 630px;
    margin: 16px 0 0;
    color: var(--ink-muted);
    font-size: 0.98rem;
    line-height: 1.78;
    text-align: left;
}

.hero-meta-row {
    justify-content: flex-start;
    margin-top: 28px;
}

.status-badge,
.hero-status {
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    color: var(--ink-secondary);
    background: rgba(10, 17, 31, 0.64);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

.status-dot {
    background: var(--signal-success);
    box-shadow: 0 0 10px rgba(82, 198, 156, 0.45);
}

.news-section,
.products-section,
.team-section,
.payment-section,
.contact-section,
#reviews {
    padding-block: 94px;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
}

.news-section .section-header,
.products-section .section-header,
.team-section .section-header,
.payment-section .section-header,
#reviews .section-header {
    align-items: flex-start;
    text-align: left;
    margin-bottom: 22px;
}

.news-list,
.products-grid,
.team-grid,
.payment-grid,
.reviews-grid {
    gap: 16px;
}

#reviews-grid {
    align-items: start;
}

#reviews-grid > .product-card {
    min-height: 0;
    height: auto;
}

.news-card,
.product-card,
.team-card,
.payment-card,
.review-card {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-panel);
    background: rgba(10, 17, 31, 0.82);
    box-shadow: var(--panel-shadow);
}

.news-card:hover,
.product-card:hover,
.team-card:hover,
.payment-card:hover,
.review-card:hover {
    border-color: var(--line-normal);
    background: var(--space-panel);
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.product-card {
    min-height: 430px;
    padding: 28px;
}

#product-list .product-card:has(a[href*="name=spectra"]) {
    border-color: var(--line-normal) !important;
    background: #09111f !important;
}

#product-list .product-card:has(a[href*="name=spectra"]) > div:first-child {
    background: transparent !important;
}

#product-list .product-card:has(a[href*="name=spectra"]) > div:nth-child(2) > div:first-child {
    color: var(--ink-muted) !important;
}

#product-list .product-card:has(a[href*="name=spectra"]) > div:nth-child(2) > div:first-child span {
    background: var(--line-strong) !important;
}

#product-list .product-card:has(a[href*="name=spectra"]) img {
    border: 1px solid var(--line-normal);
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34) !important;
}

#product-list .product-card:has(a[href*="name=spectra"]) h3 {
    color: var(--ink-primary) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

#product-list .product-card:has(a[href*="name=spectra"]) .price {
    color: var(--ink-muted) !important;
}

#product-list .product-card:has(a[href*="name=spectra"]) .buy-btn {
    color: #06101b !important;
    border-color: #8cb9ff !important;
    background: #8cb9ff !important;
    box-shadow: none !important;
}

.product-card h3,
.team-card h3,
.payment-card h3 {
    font-weight: 620;
}

.product-card .price {
    color: #a8c7f4;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.product-card .description,
.product-detail-description {
    color: var(--ink-muted);
}

.product-card .description li::before,
.product-detail-description li::before {
    color: var(--stellar-blue);
}

.team-photo-frame {
    border-color: var(--line-normal);
    border-radius: 12px;
    background: var(--space-inset);
}

.team-role {
    color: var(--stellar-blue);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.payment-icon {
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--space-inset);
}

.contact-card {
    border: 1px solid var(--line-normal);
    border-radius: var(--radius-feature);
    background: #0a111f;
    box-shadow: var(--observatory-shadow);
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 24px;
    width: 38px;
    height: 1px;
    background: rgba(164, 190, 230, 0.38);
}

.product-detail-section {
    padding: 124px 0 96px !important;
}

.back-link {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    color: var(--ink-muted) !important;
    background: rgba(10, 17, 31, 0.52);
    font-size: 0.67rem !important;
}

.back-link:hover {
    color: var(--ink-primary) !important;
    border-color: var(--line-normal);
}

.product-detail-grid {
    gap: 64px;
}

.product-detail-image-wrapper,
.product-detail-info {
    border-color: var(--line-soft);
}

.product-detail-image {
    border: 1px solid var(--line-normal);
    border-radius: var(--radius-feature);
    background: var(--space-panel);
    box-shadow: var(--observatory-shadow);
}

.product-detail-title {
    font-weight: 630;
}

.product-detail-price {
    color: #b8cef0;
    font-family: var(--font-mono);
}

.uo-hero {
    max-width: 900px;
    padding: 48px 0 86px;
}

.uo-hero::after {
    content: '';
    position: absolute;
    top: 52px;
    right: 0;
    width: 38px;
    height: 1px;
    background: rgba(164, 190, 230, 0.33);
}

.navbar::after,
.hero-section::before,
.hero-section::after,
.contact-card::before,
.uo-hero::after {
    pointer-events: none;
}

.uo-hero-logo {
    width: 80px;
    height: 80px;
    border: 1px solid var(--line-normal);
    border-radius: 17px;
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.34);
}

.uo-hero-badge {
    padding: 5px 10px;
    border: 0;
    border-left: 2px solid var(--stellar-cyan);
    border-radius: 0;
    color: #9cb2cf;
    background: transparent;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
}

.uo-hero-title {
    max-width: 780px;
    color: var(--ink-primary);
    font-size: clamp(2.65rem, 5.7vw, 5.2rem);
    font-weight: 620;
    line-height: 1;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.uo-hero-desc {
    max-width: 690px;
    color: var(--ink-muted);
}

.uo-hero-buttons {
    gap: 9px;
}

.uo-btn-primary,
.uo-btn-secondary {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 0.88rem;
}

.uo-discord-callout {
    max-width: 900px;
    margin-bottom: 78px;
    border-color: rgba(121, 137, 239, 0.28);
    border-radius: var(--radius-panel);
    background: #0a1120;
    box-shadow: var(--panel-shadow);
}

.uo-discord-callout-icon {
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 11px;
    box-shadow: none;
}

.uo-discord-btn {
    border-radius: 8px;
    box-shadow: none;
}

#modal-body a[href*="discord.gg"] {
    background: #5865f2 !important;
    box-shadow: none !important;
}

.uo-section {
    padding: 82px 0;
    border-top-color: var(--line-soft);
}

.uo-section-header {
    max-width: 720px;
    margin-bottom: 40px;
}

.uo-section-header::before {
    width: 34px;
    height: 1px;
    background: var(--stellar-blue);
}

.uo-section-title {
    color: var(--ink-primary);
    font-weight: 630;
}

.uo-section-subtitle {
    color: var(--ink-muted);
}

.uo-features-grid {
    gap: 12px;
}

.uo-feature-card {
    min-height: 206px;
    padding: 24px;
    border-color: var(--line-soft);
    border-radius: 12px;
    background: #09111f;
    box-shadow: none;
}

.uo-feature-card:hover {
    border-color: var(--line-normal);
    background: #0b1424;
    box-shadow: var(--panel-shadow);
}

.uo-feature-icon {
    border-color: var(--line-normal);
    border-radius: 9px;
    color: var(--stellar-cyan);
    background: var(--space-inset);
}

.uo-feature-card h3 {
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 650;
}

.uo-feature-card p {
    color: var(--ink-muted);
}

.uo-data-card,
.uo-trial-card,
.uo-account-card {
    border-color: var(--line-soft);
    border-radius: var(--radius-panel);
    background: #09111f;
    box-shadow: var(--panel-shadow);
}

.uo-data-row {
    border-bottom-color: var(--line-soft);
}

.uo-data-status,
.uo-data-stat-label {
    color: var(--ink-muted);
}

.uo-data-stat-value {
    color: var(--ink-primary);
}

.bot-range-btn {
    min-width: 44px;
    min-height: 34px;
    padding: 0 12px !important;
    border: 1px solid var(--line-soft) !important;
    border-radius: 7px !important;
    color: var(--ink-muted) !important;
    background: var(--space-inset) !important;
    letter-spacing: 0.03em !important;
}

.bot-range-btn:hover,
.bot-range-btn.active {
    color: var(--ink-primary) !important;
    border-color: var(--line-focus) !important;
    background: var(--space-raised) !important;
}

.uo-lb-header {
    color: var(--ink-muted);
    border-bottom-color: var(--line-soft);
}

.uo-lb-row {
    border-bottom-color: var(--line-soft);
}

.uo-lb-row:hover {
    background: rgba(121, 168, 255, 0.04);
}

.uo-trial-step {
    border-color: var(--line-soft);
    border-radius: 10px;
    background: var(--space-inset);
}

.uo-trial-num {
    color: var(--stellar-blue);
    font-family: var(--font-mono);
}

.uo-pricing-grid {
    gap: 12px;
}

.uo-plan-card {
    padding: 26px 24px;
    border-color: var(--line-soft);
    border-radius: 12px;
    background: #09111f;
}

.uo-plan-card:hover,
.uo-plan-card.active {
    border-color: rgba(121, 168, 255, 0.5);
    background: #0c1729;
    box-shadow: inset 0 2px 0 rgba(121, 168, 255, 0.38), var(--panel-shadow);
}

.uo-plan-card.active::after {
    top: 16px;
    right: 16px;
    width: 7px;
    height: 7px;
    background: var(--stellar-cyan);
    box-shadow: 0 0 0 4px rgba(114, 215, 255, 0.1);
}

.uo-plan-card h3 {
    color: var(--ink-muted);
    letter-spacing: 0.13em;
}

.uo-plan-card .uo-plan-price {
    color: var(--ink-primary);
    font-size: 2rem;
}

.uo-purchase-discord-notice {
    border-color: rgba(145, 135, 247, 0.3);
    border-left-color: var(--orbit-violet);
    border-radius: 10px;
    background: #0b1324;
}

body[data-product="spectra"] .uo-hero {
    border-color: rgba(145, 135, 247, 0.3) !important;
    background: #080f1d !important;
    box-shadow: inset 0 1px 0 rgba(145, 135, 247, 0.12), var(--panel-shadow);
}

body[data-product="spectra"] .uo-hero::after {
    background: rgba(145, 135, 247, 0.58);
}

body[data-product="spectra"] .uo-hero > img {
    border: 1px solid rgba(145, 135, 247, 0.34);
    border-radius: 18px !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38) !important;
}

body[data-product="spectra"] .uo-hero-badge {
    color: #b9b4ff !important;
    border-color: var(--orbit-violet) !important;
    background: transparent !important;
}

#spectra-product-dashboard > .uo-section-header + div {
    gap: 12px !important;
}

#spectra-product-dashboard > .uo-section-header + div > section {
    border-color: var(--line-soft) !important;
    border-radius: 12px !important;
    background: #09111f !important;
    box-shadow: var(--panel-shadow);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#spectra-product-dashboard > .uo-section-header + div > section > div:first-child {
    background: transparent !important;
}

#spectra-product-label {
    border-color: var(--line-normal) !important;
    background: var(--space-inset) !important;
}

#spectra-product-generate-btn {
    color: #06101b !important;
    background: #8cb9ff !important;
    box-shadow: none !important;
}

#spectra-product-new-code,
[data-spectra-code-id],
[data-spectra-result-id] {
    border-color: var(--line-soft) !important;
    border-radius: 9px !important;
    background: var(--space-inset) !important;
    box-shadow: none !important;
}

[data-spectra-code-id]:hover,
[data-spectra-result-id]:hover {
    border-color: var(--line-normal) !important;
    background: #0d1829 !important;
}

#spectra-product-dashboard .buy-btn {
    min-height: 34px;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.guide-layout {
    max-width: 1260px;
    padding-top: 112px;
    gap: 42px;
}

.guide-sidebar {
    top: 92px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: rgba(7, 12, 22, 0.94);
    box-shadow: var(--panel-shadow);
}

.guide-sidebar-title {
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.13em;
}

.guide-nav a {
    min-height: 38px;
    border-radius: 6px;
    color: var(--ink-muted);
    font-size: 0.82rem;
}

.guide-nav a:hover {
    color: var(--ink-primary);
    background: var(--space-raised);
}

.guide-nav a.active {
    color: var(--ink-primary);
    background: rgba(121, 168, 255, 0.09);
    box-shadow: inset 2px 0 0 var(--stellar-blue);
}

.guide-content {
    max-width: 820px;
}

.guide-hero {
    margin-bottom: 68px;
    padding: 0 0 34px;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
}

.guide-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 620;
}

.guide-hero p {
    max-width: 670px;
    color: var(--ink-muted);
}

.guide-section {
    margin-bottom: 78px;
    scroll-margin-top: 100px;
}

.guide-section > h2 {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
    font-weight: 630;
}

.guide-section-subtitle {
    color: var(--ink-muted);
}

.steps-grid,
.profile-cards,
.ping-cards,
.guide-subsection-grid {
    gap: 12px;
}

.step-card,
.profile-card,
.ping-card,
.guide-subsection,
.guide-callout,
.slider-demo {
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background: #09111f;
    box-shadow: none;
}

.step-card:hover,
.profile-card:hover,
.ping-card:hover,
.guide-subsection:hover {
    border-color: var(--line-normal);
    background: #0b1424;
}

.step-number {
    border: 1px solid var(--line-normal);
    border-radius: 7px;
    color: var(--stellar-cyan);
    background: var(--space-inset);
    font-family: var(--font-mono);
}

.profile-tag {
    border-radius: 5px;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.guide-callout.callout-warning {
    border-left: 3px solid var(--signal-warning);
    background: rgba(226, 180, 100, 0.055);
}

.guide-callout.callout-info {
    border-left: 3px solid var(--stellar-blue);
    background: rgba(121, 168, 255, 0.055);
}

.faq-list {
    gap: 8px;
}

.faq-item {
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background: #09111f;
}

.faq-item:hover,
.faq-item.open {
    border-color: var(--line-normal);
    background: #0b1424;
}

.faq-question {
    min-height: 54px;
    color: var(--ink-secondary);
}

.faq-item.open .faq-question {
    color: var(--ink-primary);
}

.faq-answer-inner {
    color: var(--ink-muted);
    border-top-color: var(--line-soft);
}

.fb-container {
    max-width: 1160px;
    margin: 0 auto 60px;
    padding-top: 116px;
    padding-bottom: 96px;
}

.fb-hero {
    margin-bottom: 28px;
    padding: 34px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-feature);
    background: #08101d;
    box-shadow: var(--panel-shadow);
}

.fb-hero h1 {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 620;
}

.fb-hero p,
.fb-section-copy {
    color: var(--ink-muted);
}

.fb-lang-bar,
.fb-required-controls,
.fb-save-all-wrap,
.fb-extra-panel {
    border: 1px solid var(--line-soft);
    border-color: var(--line-soft);
    border-radius: 12px;
    background: #09111f;
    box-shadow: none;
}

.fb-lang-bar {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 6px;
    flex-wrap: wrap;
}

.fb-required-controls {
    padding: 18px;
}

.fb-save-all-wrap {
    padding: 24px;
}

.fb-lang-btn,
.fb-ping-btn {
    min-height: 40px;
    border-radius: 7px;
}

.fb-lang-btn.active,
.fb-ping-btn.active {
    color: var(--ink-primary);
    border-color: var(--line-focus);
    background: var(--space-raised);
    box-shadow: inset 0 -2px 0 var(--stellar-blue);
}

.fb-login-prompt {
    border-color: rgba(226, 180, 100, 0.28);
    border-radius: 10px;
    background: rgba(226, 180, 100, 0.055);
}

.fb-server-input,
.fb-comment-input,
.fb-form-row input,
.fb-form-row select,
.fb-form-row textarea {
    min-height: 44px;
    border: 1px solid var(--line-normal);
    border-radius: 8px;
    color: var(--ink-primary);
    background: var(--space-inset);
}

.fb-section-title {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-primary);
    font-size: 1.35rem;
    font-weight: 630;
}

.fb-section-divider {
    border-color: var(--line-soft);
}

.fb-variants-grid {
    gap: 10px;
}

.fb-variant-card,
.fb-mini-item {
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: #09111f;
    box-shadow: none;
}

.fb-variant-card:hover,
.fb-mini-item:hover {
    border-color: var(--line-normal);
    background: #0b1424;
}

.fb-variant-card.rated {
    border-color: rgba(82, 198, 156, 0.42);
    box-shadow: inset 0 2px 0 rgba(82, 198, 156, 0.3);
}

.fb-variant-letter {
    border: 1px solid var(--line-normal);
    border-radius: 7px;
    color: var(--stellar-cyan);
    background: var(--space-inset);
    font-family: var(--font-mono);
}

.fb-slider {
    accent-color: var(--stellar-blue);
}

.fb-score-display {
    color: var(--stellar-cyan);
    font-family: var(--font-mono);
}

.fb-save-btn.saved {
    color: #061912;
    border-color: var(--signal-success);
    background: var(--signal-success);
}

.admin-container {
    max-width: 1480px;
    margin: 0 auto 40px;
    padding: 112px 28px 96px;
}

.admin-header {
    margin-bottom: 24px;
    padding: 28px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-panel);
    background: #08101d;
    box-shadow: var(--panel-shadow);
}

.admin-header h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 620;
}

.admin-stats {
    gap: 10px;
}

.stat-card {
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background: #09111f;
    box-shadow: none;
}

.stat-card:hover {
    border-color: var(--line-normal);
    background: #0b1424;
}

.stat-card.online {
    border-color: rgba(82, 198, 156, 0.27);
    background: rgba(82, 198, 156, 0.045);
}

.online-dot {
    background: var(--signal-success);
    box-shadow: 0 0 11px rgba(82, 198, 156, 0.44);
}

.stat-value {
    color: var(--ink-primary);
    font-family: var(--font-mono);
}

.search-box,
.ai-debug-search,
.ai-debug-select,
.plan-select {
    min-height: 42px;
    border: 1px solid var(--line-normal);
    border-radius: 8px;
    color: var(--ink-primary);
    background: var(--space-inset);
}

.users-table,
.ai-debug-panel,
.online-detail,
#maintenance-section,
#test-mode-section,
#optimizer-shares-section,
#bugs-section,
#reviews-section,
#variant-feedback-section,
#slider-feedback-section,
#custom-feedback-section {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: #08101d;
    box-shadow: var(--panel-shadow);
}

.users-table {
    overflow-x: auto;
}

.users-table table,
.admin-container table {
    border-collapse: separate;
    border-spacing: 0;
}

.users-table th,
.admin-container th {
    height: 44px;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--line-normal);
    background: #0b1424;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.users-table td,
.admin-container td {
    color: var(--ink-secondary);
    border-bottom-color: var(--line-soft);
    background: transparent;
}

.users-table tr:hover td,
.admin-container tbody tr:hover td {
    color: var(--ink-primary);
    background: rgba(121, 168, 255, 0.035);
}

.sort-active,
.sort-arrow {
    color: var(--stellar-cyan);
}

.plan-badge {
    border: 1px solid var(--line-normal);
    border-radius: 5px;
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
}

.ai-debug-toolbar {
    border-bottom-color: var(--line-soft);
}

.ai-debug-message,
.online-user-row {
    border-color: var(--line-soft);
    border-radius: 8px;
    background: var(--space-inset);
}

.ai-debug-json {
    border-color: var(--line-soft);
    background: #030811;
    color: #abc1df;
}

.admin-login {
    width: min(92vw, 520px);
    margin: 144px auto 64px;
    padding: 36px 32px;
    border: 1px solid var(--line-normal);
    border-radius: var(--radius-feature);
    background: #09111f;
    box-shadow: var(--observatory-shadow);
}

.r-hero {
    min-height: 62vh;
    padding-top: 148px;
    border-bottom: 1px solid var(--line-soft);
}

.r-hero-glow {
    background: radial-gradient(circle, rgba(74, 115, 175, 0.14), transparent 68%);
}

.r-hero-title {
    max-width: 900px;
    color: var(--ink-primary);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 620;
    line-height: 0.98;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.r-hero-desc {
    color: var(--ink-muted);
}

.r-team-card,
.r-card {
    border-color: var(--line-soft);
    border-radius: 12px;
    background: #09111f;
    box-shadow: none;
}

.r-team-card:hover,
.r-card:hover {
    border-color: var(--line-normal);
    background: #0b1424;
    box-shadow: var(--panel-shadow);
}

.r-team-card::before {
    height: 1px;
}

.r-pill,
.r-filter-pill {
    border-radius: 6px;
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
}

.r-filter-pill {
    min-height: 38px;
    border-color: var(--line-normal);
    color: var(--ink-muted);
    background: var(--space-inset);
}

.r-filter-pill:hover,
.r-filter-pill.active {
    color: var(--ink-primary);
    border-color: var(--line-focus);
    background: var(--space-raised);
}

.r-paper-overlay {
    background: rgba(1, 4, 10, 0.84);
    backdrop-filter: blur(12px);
}

.r-paper-modal {
    border: 1px solid var(--line-normal);
    border-radius: var(--radius-feature);
    background: #09111f;
    box-shadow: var(--observatory-shadow);
}

.spectra-starfield {
    opacity: 0.16;
}

.spectra-shell {
    width: min(100%, 1500px);
    margin: 0 auto 64px;
    padding: 104px 24px 80px;
}

.spectra-topbar,
.spectra-panel,
.echo-result-masthead,
.echo-banner,
.echo-overview-grid,
.echo-status {
    border-color: var(--line-soft);
    border-radius: 12px;
    background: #08101d;
    box-shadow: var(--panel-shadow);
}

.spectra-topbar {
    padding: 20px 22px;
}

.spectra-logo-lockup {
    gap: 13px;
}

.spectra-title,
.echo-result-masthead h1,
.echo-status h2,
.echo-banner-title {
    color: var(--text-primary);
    font-weight: 640;
}

.spectra-subtitle,
.echo-result-masthead p,
.echo-banner-sub,
.echo-status p {
    color: var(--text-muted);
}

.spectra-actions {
    gap: 7px;
}

.spectra-action,
.mini-action {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 7px;
}

.spectra-theme-picker,
.theme-picker-row,
.finding-filter-group,
.finding-toolbar,
.finding-filter-row,
.finding-search-row,
.panel-actions,
.tab-actions {
    gap: 8px;
}

.spectra-metric,
.health-card,
.matrix-card,
.principle-card,
.reverse-item,
.scanner-badge,
.echo-status-chip,
.echo-sev-card,
.finding-item {
    border-color: var(--line-soft);
    border-radius: 9px;
    background: #09111f;
    box-shadow: none;
}

.spectra-metric:hover,
.health-card:hover,
.matrix-card:hover,
.principle-card:hover,
.reverse-item:hover,
.finding-item:hover {
    border-color: var(--line-normal);
    background: #0b1424;
}

.finding-filter,
.result-tab,
.theme-picker-row button {
    min-height: 38px;
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    color: var(--text-muted);
    background: var(--space-inset);
}

.finding-filter:hover,
.finding-filter.active,
.result-tab:hover,
.result-tab.active,
.theme-picker-row button:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
    background: var(--space-raised);
}

.result-tabs-wrap {
    padding: 5px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: #060c16;
}

.result-tabs {
    gap: 5px;
}

.result-tab {
    border-radius: 7px;
}

.result-tab.active {
    box-shadow: inset 0 -2px 0 var(--accent);
}

.result-tab-count,
.finding-chip,
.finding-tag,
.matrix-pill,
.principle-pill,
.bypass-chip,
.echo-status-badge {
    border-radius: 5px;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

.finding-input,
.finding-select,
.spectra-theme-picker input,
.spectra-theme-picker select {
    min-height: 40px;
    border: 1px solid var(--line-normal);
    border-radius: 7px;
    color: var(--text-primary);
    background: var(--space-inset);
}

.finding-detail,
.raw-json,
.conclusion-packet,
.reverse-item pre {
    border-color: var(--line-soft);
    border-radius: 8px;
    color: var(--text-secondary);
    background: #030811;
}

.echo-table-wrap {
    border-color: var(--line-soft);
    border-radius: 9px;
}

.echo-table th {
    color: var(--text-muted);
    border-bottom-color: var(--line-normal);
    background: #0b1424;
}

.echo-table td {
    color: var(--text-secondary);
    border-bottom-color: var(--line-soft);
}

.echo-table tr:hover td {
    background: rgba(121, 168, 255, 0.035);
}

.rbw-verdict,
.error-box {
    border-radius: 10px;
}

.empty-state {
    border-color: var(--line-normal);
    border-radius: 9px;
    color: var(--text-muted);
    background: var(--space-inset);
}

@media (max-width: 1180px) {
    .navbar .nav-container,
    .section-container,
    .hero-content {
        padding-inline: 24px;
    }

    .hero-section::after {
        right: -280px;
        opacity: 0.55;
    }

    .uo-hero::after {
        position: static;
        margin-bottom: 18px;
        float: right;
    }

    .admin-container {
        padding-inline: 20px;
    }
}

@media (max-width: 1100px) {
    .nav-links {
        gap: 9px;
    }

    .nav-links > a {
        font-size: 0.72rem;
    }

    .nav-login-btn {
        min-height: 36px;
        padding-inline: 10px;
    }

    #nav-auth-btn {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 960px) {
    .navbar {
        min-height: 62px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .navbar .nav-container {
        flex-wrap: wrap;
        row-gap: 8px;
        padding-bottom: 8px;
    }

    .nav-links {
        order: 3;
        display: flex;
        width: 100%;
        gap: 6px;
        padding-top: 8px;
        overflow-x: auto;
        border-top: 1px solid var(--line-soft);
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .nav-links::-webkit-scrollbar {
        height: 0;
    }

    .nav-links > a,
    .nav-links > button,
    .nav-links > .lang-dropdown {
        flex: 0 0 auto;
    }

    .lang-menu {
        position: fixed;
        top: 112px;
        right: 18px;
        left: auto;
        z-index: 2200;
    }

    .hero-section {
        min-height: auto;
        padding: 142px 0 96px;
    }

    .hero-section::after {
        opacity: 0.3;
    }

    .hero-title {
        max-width: 680px;
    }

    .guide-layout {
        gap: 26px;
    }

    .guide-sidebar {
        width: 210px;
    }

    .uo-features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spectra-shell {
        padding-inline: 16px;
    }

    .guide-layout,
    .fb-container,
    .admin-container,
    .spectra-shell {
        padding-top: 132px;
    }

    .product-detail-section {
        padding-top: 132px !important;
    }
}

@media (max-width: 768px) {
    .section-container,
    .hero-content,
    .navbar .nav-container {
        padding-inline: 18px;
    }

    .modal-overlay {
        align-items: flex-end;
        padding-bottom: 0;
    }

    #spectra-product-dashboard > .uo-section-header + div {
        grid-template-columns: 1fr !important;
    }

    .hero-section {
        padding: 146px 0 82px;
    }

    .hero-section::before {
        top: 94px;
        right: 18px;
    }

    .hero-section::after {
        right: -390px;
    }

    .hero-logo-img {
        width: 70px;
        height: 70px;
        border-radius: 15px;
    }

    .hero-title {
        font-size: clamp(2.8rem, 14vw, 4.7rem);
    }

    .hero-subtitle {
        font-size: 1.08rem;
    }

    .news-section,
    .products-section,
    .team-section,
    .payment-section,
    .contact-section,
    #reviews {
        padding-block: 72px;
    }

    .product-card {
        min-height: 0;
    }

    .contact-card::before,
    .uo-hero::after {
        position: static;
        float: none;
    }

    .contact-card::before {
        margin-bottom: 18px;
    }

    .modal-content {
        width: 100%;
        max-width: none;
        max-height: 92dvh;
        margin-top: auto;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 18px 18px 0 0;
    }

    .uo-hero {
        padding-top: 34px;
    }

    .uo-discord-callout {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .uo-discord-callout .uo-discord-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .uo-pricing-grid,
    .uo-features-grid {
        grid-template-columns: 1fr;
    }

    .guide-layout {
        padding-top: 138px;
    }

    .guide-sidebar {
        width: 100%;
        border-radius: 10px;
    }

    .guide-nav {
        gap: 4px;
    }

    .guide-nav a {
        min-height: 42px;
    }

    .fb-container,
    .admin-container {
        padding-top: 138px;
    }

    .product-detail-section,
    .spectra-shell {
        padding-top: 138px !important;
    }

    .fb-hero,
    .admin-header {
        padding: 22px;
    }

    .spectra-topbar,
    .tab-header,
    .echo-result-masthead {
        align-items: flex-start;
        flex-direction: column;
    }

    .spectra-actions,
    .tab-actions {
        justify-content: flex-start;
    }

    .spectra-action {
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    body {
        background-size: auto, auto, auto, auto, auto, 54px 54px, 54px 54px, auto, auto;
    }

    .hero-title {
        font-size: clamp(2.55rem, 15vw, 3.7rem);
    }

    .hero-meta-row,
    .uo-hero-buttons,
    .fb-required-controls,
    .spectra-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .uo-btn-primary,
    .uo-btn-secondary,
    .spectra-action,
    .primary-btn,
    .contact-btn {
        width: 100%;
        justify-content: center;
    }

    .uo-discord-callout {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .uo-discord-callout .uo-discord-btn {
        grid-column: auto;
    }

    .uo-data-card,
    .uo-trial-card,
    .uo-account-card,
    .fb-required-controls,
    .fb-extra-panel {
        padding: 18px;
    }

    .step-card,
    .profile-card,
    .ping-card,
    .guide-subsection {
        padding: 18px;
    }

    .spectra-shell {
        padding-inline: 10px;
    }

    .spectra-panel,
    .spectra-topbar {
        padding: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}