:root {
        --font-sans: "Manrope", "Segoe UI", sans-serif;
        --font-display: "Sora", "Segoe UI", sans-serif;
        --font-terminal: "Share Tech Mono", "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --bg-primary: #0b0d11;
        --bg-panel: rgba(255, 255, 255, 0.04);
        --bg-surface: rgba(255, 255, 255, 0.06);
        --bg-glass: rgba(12, 14, 20, 0.78);
        --border-soft: rgba(255, 255, 255, 0.08);
        --border-strong: rgba(255, 255, 255, 0.16);
        --glass-border: rgba(255, 255, 255, 0.12);
        --text-strong: #f7f4ef;
        --text-muted: rgba(247, 244, 239, 0.82);
        --text-subtle: rgba(247, 244, 239, 0.72);
        --accent-primary: #5fe3c5;
        --accent-warning: #f3c061;
        --accent-danger: #ff6b6b;
        --accent-secondary: #e2b67a;
        --button-primary-start: #dce3ec;
        --button-primary-end: #c2ccd9;
        --button-primary-ink: #0b1016;
        --button-primary-border: rgba(226, 238, 254, 0.58);
        --button-primary-shadow: 0 16px 34px rgba(10, 14, 24, 0.34);
        --button-primary-shadow-hover: 0 22px 42px rgba(10, 14, 24, 0.44);
        --button-focus-ring: rgba(210, 223, 246, 0.62);
        --button-secondary-bg-a: rgba(255, 255, 255, 0.16);
        --button-secondary-bg-b: rgba(255, 255, 255, 0.08);
        --button-secondary-border: rgba(255, 255, 255, 0.28);
        --button-secondary-shadow: 0 10px 24px rgba(18, 20, 32, 0.28);
        --brand-mark-url: url("/assets/brand/mark.svg");
        --hype-primary-rgb: 95, 227, 197;
        --hype-secondary-rgb: 226, 182, 122;
        --hype-ambient: #0a0c10;
        --nav-blur: rgba(8, 10, 16, 0.72);
        --bg-gradient: radial-gradient(120% 120% at 12% 8%, rgba(95, 227, 197, 0.18) 0%, rgba(11, 13, 17, 0) 55%), radial-gradient(140% 140% at 90% 8%, rgba(226, 182, 122, 0.16) 0%, rgba(11, 13, 17, 0) 60%), radial-gradient(160% 120% at 50% 120%, rgba(86, 120, 202, 0.18) 0%, rgba(11, 13, 17, 0) 60%), #0b0d11;
        --bg-pattern:
            radial-gradient(820px 520px at 82% -12%, rgba(255, 255, 255, 0.08), transparent 60%),
            radial-gradient(640px 520px at 12% 22%, rgba(95, 227, 197, 0.12), transparent 65%),
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 72px),
            repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 72px);
        --bg-pattern-size: 100% 100%, 100% 100%, 240px 240px, 240px 240px;
        --bg-pattern-size-mobile: 100% 100%, 100% 100%, 180px 180px, 180px 180px;
        --shadow-soft: 0 20px 60px rgba(4, 6, 12, 0.45);
        --shadow-strong: 0 40px 90px rgba(4, 6, 12, 0.6);
        --radius-xl: 28px;
        --radius-lg: 22px;
        --radius-md: 16px;
        --radius-sm: 12px;
        --button-radius-pill: 999px;
        --glass-blur: 24px;
        --nav-height: clamp(56px, 8vh, 64px);
        --nav-pill-radius: 16px;
        --nav-item-padding: clamp(8px, 1vw, 11px) clamp(13px, 1.7vw, 17px);
        --nav-item-font-size: clamp(0.86rem, 1.12vw, 0.96rem);
        --nav-item-padding-compact: 8px 11px;
        --nav-item-font-size-compact: 0.86rem;
        --nav-surface: rgba(12, 14, 20, 0.78);
        --nav-surface-soft: rgba(255, 255, 255, 0.04);
        --nav-border: rgba(255, 255, 255, 0.12);
        --immersive-nav-primary-rgb: 95, 227, 197;
        --immersive-nav-secondary-rgb: 126, 166, 255;
        --immersive-nav-ink-rgb: 247, 244, 239;
        --immersive-nav-shadow-rgb: 8, 10, 16;
        --layer-popover: 7600;
        --layer-modal: 8200;
        --motion-duration-short: 160ms;
        --motion-duration-medium: 280ms;
        --motion-duration-long: 520ms;
        --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
        --motion-ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
        --motion-ease-overshoot: cubic-bezier(0.33, 1, 0.68, 1);
        --text-size-xs: clamp(0.78rem, 0.74rem + 0.16vw, 0.88rem);
        --text-size-sm: clamp(0.88rem, 0.84rem + 0.18vw, 0.98rem);
        --text-size-base: clamp(0.97rem, 0.95rem + 0.16vw, 1.04rem);
        --surface-padding: clamp(24px, 2.2vw, 32px);
        --surface-gap: clamp(18px, 1.7vw, 24px);
        --glow-a: rgba(255, 255, 255, 0.16);
        --glow-b: rgba(212, 218, 230, 0.14);
        --workspace-top-glow: rgba(214, 224, 239, 0.24);
        --cursor-x: 50vw;
        --cursor-y: 28vh;
    }
    select.select-panel-native {
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .app-shell {
        position: relative;
        min-height: 100vh;
        isolation: isolate;
        z-index: 1;
        /* Keep fixed nav anchored to the viewport (filter creates a fixed containing block). */
        filter: none;
        --glow-a: rgba(255, 255, 255, 0.16);
        --glow-b: rgba(212, 218, 230, 0.14);
        --workspace-top-glow: rgba(214, 224, 239, 0.24);
    }
    .app-shell[data-category="marketplace"] {
        --glow-a: rgba(179, 245, 207, 0.24);
        --glow-b: rgba(114, 220, 163, 0.2);
        --workspace-top-glow: rgba(143, 236, 181, 0.28);
        --button-primary-start: #8be8b8;
        --button-primary-end: #59cb94;
        --button-primary-ink: #072013;
        --button-primary-border: rgba(170, 250, 209, 0.62);
        --button-primary-shadow: 0 18px 38px rgba(21, 86, 53, 0.42);
        --button-primary-shadow-hover: 0 24px 46px rgba(18, 95, 56, 0.5);
        --button-focus-ring: rgba(140, 236, 182, 0.65);
    }
    .app-shell[data-category="promotions"] {
        --glow-a: rgba(255, 232, 144, 0.28);
        --glow-b: rgba(245, 188, 72, 0.2);
        --workspace-top-glow: rgba(255, 223, 132, 0.3);
        --button-primary-start: #ffd978;
        --button-primary-end: #f3b549;
        --button-primary-ink: #2c1d05;
        --button-primary-border: rgba(255, 227, 150, 0.64);
        --button-primary-shadow: 0 18px 38px rgba(130, 89, 18, 0.42);
        --button-primary-shadow-hover: 0 24px 46px rgba(138, 93, 18, 0.5);
        --button-focus-ring: rgba(255, 220, 121, 0.68);
    }
    .app-shell[data-category="profile"] {
        --glow-a: rgba(167, 202, 255, 0.24);
        --glow-b: rgba(110, 158, 245, 0.2);
        --workspace-top-glow: rgba(170, 206, 255, 0.28);
        --button-primary-start: #a9c8ff;
        --button-primary-end: #7ea7ef;
        --button-primary-ink: #06172f;
        --button-primary-border: rgba(188, 215, 255, 0.62);
        --button-primary-shadow: 0 18px 38px rgba(36, 67, 125, 0.42);
        --button-primary-shadow-hover: 0 24px 46px rgba(36, 74, 143, 0.5);
        --button-focus-ring: rgba(162, 200, 255, 0.66);
    }
    .app-shell[data-category="reports"] {
        --glow-a: rgba(255, 142, 142, 0.24);
        --glow-b: rgba(224, 72, 72, 0.2);
        --workspace-top-glow: rgba(255, 145, 145, 0.28);
        --button-primary-start: #ff9b9b;
        --button-primary-end: #ef6464;
        --button-primary-ink: #3a0909;
        --button-primary-border: rgba(255, 179, 179, 0.64);
        --button-primary-shadow: 0 18px 38px rgba(124, 28, 28, 0.42);
        --button-primary-shadow-hover: 0 24px 46px rgba(138, 26, 26, 0.5);
        --button-focus-ring: rgba(255, 166, 166, 0.66);
    }
    .app-shell[data-category="neutral"] {
        --glow-a: rgba(255, 255, 255, 0.16);
        --glow-b: rgba(212, 218, 230, 0.14);
        --workspace-top-glow: rgba(214, 224, 239, 0.24);
    }
    .category-glow,
    .global-overlay {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1;
    }
    .category-glow {
        background:
            radial-gradient(
                56rem 56rem at 15% 12%,
                var(--glow-a) 0%,
                rgba(11, 13, 17, 0) 72%
            ),
            radial-gradient(
                64rem 64rem at 85% 86%,
                var(--glow-b) 0%,
                rgba(11, 13, 17, 0) 74%
            );
        opacity: 0.56;
        transform: translateZ(0);
    }
    .global-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.14) 0%,
                rgba(255, 255, 255, 0.07) 24%,
                rgba(255, 255, 255, 0.02) 56%,
                rgba(255, 255, 255, 0) 100%
            ),
            radial-gradient(
                130% 110% at 50% -18%,
                var(--workspace-top-glow) 0%,
                rgba(11, 13, 17, 0) 68%
            );
        opacity: 0.68;
    }
    @media (max-width: 640px) {
        .category-glow {
            opacity: 0.48;
        }
        .global-overlay {
            opacity: 0.48;
        }
    }
    .app-shell {
        opacity: 1;
        transform: translateY(0);
        transition:
            opacity var(--motion-duration-medium) var(--motion-ease-standard),
            transform var(--motion-duration-medium) var(--motion-ease-decelerate);
    }
    .app-shell[data-app-ready="false"] {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .app-shell[data-app-ready="true"] {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .app-loading {
        position: fixed;
        inset: 0;
        background: radial-gradient(120% 120% at 30% 20%, rgba(226, 182, 122, 0.18), transparent 60%), radial-gradient(120% 140% at 70% 10%, rgba(95, 227, 197, 0.18), transparent 60%), #0b0d11;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 200;
        pointer-events: none;
        opacity: 1;
        visibility: visible;
        transition:
            opacity var(--motion-duration-medium) var(--motion-ease-standard),
            visibility 0s linear 0s;
    }
    .app-loading[data-hidden="true"] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity var(--motion-duration-medium) var(--motion-ease-standard),
            visibility 0s linear var(--motion-duration-medium);
    }
    .onboarding-guide {
        position: fixed;
        right: clamp(16px, 3vw, 28px);
        bottom: clamp(16px, 3vw, 28px);
        max-width: 320px;
        padding: 18px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-soft);
        background: var(--bg-glass);
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(18px) saturate(150%);
        z-index: 8200;
        opacity: 0;
        transform: translateY(16px) scale(0.98);
        pointer-events: none;
        transition:
            opacity var(--motion-duration-medium) var(--motion-ease-decelerate),
            transform var(--motion-duration-medium) var(--motion-ease-decelerate);
    }
    .onboarding-guide[data-active="true"] {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    .onboarding-guide h3 {
        margin: 0 0 6px;
        font-size: 1.1rem;
    }
    .onboarding-guide p {
        margin: 0 0 12px;
        color: var(--text-muted);
        font-size: 0.95rem;
    }
    .onboarding-guide ol {
        margin: 0 0 12px;
        padding-left: 18px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        color: var(--text-muted);
        font-size: 0.92rem;
    }
    .onboarding-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    @media (max-width: 720px) {
        .onboarding-guide {
            left: 12px;
            right: 12px;
            max-width: none;
        }
    }
    .loading-core {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        padding: 14px 20px;
        border-radius: 16px;
        border: 1px solid var(--border-soft);
        background: rgba(255, 255, 255, 0.05);
        box-shadow: var(--shadow-soft);
        color: var(--text-strong);
        font-weight: 600;
        letter-spacing: 0.02em;
    }
    .loading-spinner {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.18);
        border-top-color: var(--accent-primary);
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
    * {
        box-sizing: border-box;
    }
    * {
        scrollbar-width: thin;
        scrollbar-color:
            rgba(var(--theme-accent-rgb, 95, 227, 197), 0.66)
            rgba(255, 255, 255, 0.08);
    }
    *::-webkit-scrollbar {
        width: 9px;
        height: 9px;
    }
    *::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.06);
        border-radius: 999px;
    }
    *::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background:
            linear-gradient(
                180deg,
                rgba(var(--theme-accent-rgb, 95, 227, 197), 0.82),
                rgba(126, 166, 255, 0.66)
            );
        border: 2px solid rgba(8, 10, 16, 0.58);
        background-clip: padding-box;
        min-height: 36px;
    }
    *::-webkit-scrollbar-thumb:hover {
        background:
            linear-gradient(
                180deg,
                rgba(var(--theme-accent-rgb, 95, 227, 197), 0.94),
                rgba(126, 166, 255, 0.8)
            );
    }
    *::-webkit-scrollbar-corner {
        background: transparent;
    }
    html, body {
        margin: 0;
        font-family: var(--font-sans);
        color: var(--text-strong);
        line-height: 1.65;
    }
    html {
        min-height: 100%;
        background: var(--bg-primary);
    }
    body {
        min-height: 100vh;
        position: relative;
        background: transparent;
        overflow-x: hidden;
        isolation: isolate;
    }
    body[data-modal-open="true"] {
        overflow: hidden;
    }
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: var(--bg-gradient);
        background-repeat: no-repeat;
        background-size: 160% 160%;
        background-position: 50% -18vh;
        pointer-events: none;
        z-index: -1;
        transform: translateZ(0);
    }
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background-image: var(--bg-pattern);
        background-size: var(--bg-pattern-size);
        opacity: 0.5;
        z-index: 0;
    }
    @media (max-width: 640px) {
        body {
            min-height: 100vh;
        }
        body::before {
            background-size: 220% 220%;
            background-position: 50% -22vh;
        }
        body::after {
            background-size: var(--bg-pattern-size-mobile);
            opacity: 0.55;
        }
    }
    a {
        color: inherit;
        text-decoration: none;
    }
    header[data-nav-mode] {
        border: none;
        background: transparent;
        backdrop-filter: none;
        position: sticky;
        top: 0;
        z-index: 20;
        pointer-events: none;
        transition:
            opacity var(--motion-duration-medium) var(--motion-ease-standard),
            transform var(--motion-duration-medium) var(--motion-ease-standard);
    }
    header[data-nav-mode][data-nav-hidden="true"] {
        opacity: 0;
    }
    header[data-nav-mode][data-nav-hidden="true"] .container {
        pointer-events: none;
    }
    .nav-reveal {
        position: fixed;
        z-index: 19;
        opacity: 0;
        background: transparent;
        pointer-events: none;
    }
    .nav-reveal[data-active="true"] {
        pointer-events: auto;
    }
    header .container {
        pointer-events: auto;
        background: linear-gradient(135deg, rgba(12, 14, 20, 0.94), rgba(12, 14, 20, 0.72));
        border: 1px solid var(--nav-border);
        border-radius: var(--radius-xl);
        backdrop-filter: blur(20px) saturate(140%);
        box-shadow: var(--shadow-strong);
        transition:
            box-shadow 240ms var(--motion-ease-standard),
            border-color 240ms var(--motion-ease-standard);
        padding: 10px 22px;
        margin-top: 12px;
        max-width: 1360px;
    }
    header[data-nav-dock-preview="left"] .container,
    header[data-nav-dock-preview="right"] .container {
        border-color: rgba(95, 227, 197, 0.55);
        box-shadow:
            0 18px 42px rgba(6, 16, 24, 0.55),
            0 0 0 1px rgba(95, 227, 197, 0.35);
    }
    .container {
        max-width: 1120px;
        margin: 0 auto;
        padding: 0 24px;
        width: 100%;
    }
    body[data-page="marketplace"] main > .container {
        max-width: 1400px;
    }
    #site-nav {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 0;
        min-height: var(--nav-height);
        position: relative;
    }
    .nav-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 6px 0;
    }
    .nav-brand a {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.06rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #f7f4ef;
    }
    .nav-brand a .brand-mark {
        order: -1;
    }
    .brand-mark {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background-image: var(--brand-mark-url);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        flex: 0 0 auto;
    }
    .nav-tagline {
        font-size: var(--text-size-xs);
        letter-spacing: 0.16em;
        color: var(--text-subtle);
        text-transform: uppercase;
    }
.nav-shell {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    row-gap: 12px;
    justify-content: space-between;
    min-width: 0;
}
.nav-track {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1 1 360px;
    min-width: 0;
}
.nav-links {
    list-style: none;
    display: flex;
    gap: 6px;
    padding: 6px;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
    border-radius: var(--nav-pill-radius);
    background: var(--nav-surface-soft);
    border: 1px solid var(--border-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    width: 100%;
}
    header[data-nav-mode="left"] .nav-links,
    header[data-nav-mode="right"] .nav-links {
        flex-basis: 100%;
    }
    .nav-links-primary {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    }
    .nav-links-secondary {
        background: rgba(255, 255, 255, 0.02);
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.1);
    }
    .nav-links li {
        display: inline-flex;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }
    .nav-links a {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 36px;
        justify-content: center;
        padding: var(--nav-item-padding);
        border-radius: 12px;
        font-size: var(--nav-item-font-size);
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: 0.01em;
        color: var(--text-muted);
        border: 1px solid transparent;
        background: transparent;
        white-space: nowrap;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        flex: 0 0 auto;
        transition:
            color var(--motion-duration-short) var(--motion-ease-standard),
            background var(--motion-duration-short) var(--motion-ease-standard),
            box-shadow var(--motion-duration-medium) var(--motion-ease-standard),
            border-color var(--motion-duration-short) var(--motion-ease-standard),
            opacity var(--motion-duration-short) var(--motion-ease-standard);
    }
    .nav-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        opacity: 0.78;
        transition: opacity var(--motion-duration-short) var(--motion-ease-standard);
    }
    .nav-icon svg {
        width: 18px;
        height: 18px;
        display: block;
    }
    .nav-links a span:last-child {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .nav-links a::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 6px;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(95, 227, 197, 0.9), rgba(226, 182, 122, 0.9));
        opacity: 0;
        transform: scaleX(0.35);
        transform-origin: center;
        transition:
            opacity var(--motion-duration-short) var(--motion-ease-standard),
            transform var(--motion-duration-short) var(--motion-ease-standard);
    }
    .nav-links a.active {
        background: rgba(255, 255, 255, 0.12);
        color: #f7f4ef;
        border-color: rgba(95, 227, 197, 0.4);
        box-shadow: 0 12px 26px rgba(9, 12, 26, 0.32);
    }
    .nav-links a:hover,
    .nav-links a:focus-visible {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        box-shadow: 0 10px 22px rgba(9, 12, 26, 0.25);
        border-color: rgba(255, 255, 255, 0.16);
    }
    .nav-links a:focus-visible {
        outline: none;
    }
    .nav-links a:active {
        filter: brightness(1.05);
        box-shadow: 0 8px 18px rgba(9, 12, 26, 0.22);
    }
    .nav-links a.active::after,
    .nav-links a:hover::after,
    .nav-links a:focus-visible::after {
        opacity: 1;
        transform: scaleX(1);
    }
    .nav-links a.active .nav-icon,
    .nav-links a:hover .nav-icon,
    .nav-links a:focus-visible .nav-icon {
        opacity: 1;
    }
.nav-account {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.nav-quick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav-quick-link {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        transform var(--motion-duration-short) var(--motion-ease-standard),
        border-color var(--motion-duration-short) var(--motion-ease-standard),
        background var(--motion-duration-short) var(--motion-ease-standard);
}
.nav-quick-link:hover,
.nav-quick-link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
}
.nav-quick-link svg {
    width: 16px;
    height: 16px;
}
.nav-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: box-shadow var(--motion-duration-medium) var(--motion-ease-standard);
}
.nav-balance.purchase-flash {
    animation: balanceFlash 680ms var(--motion-ease-overshoot);
}
.balance-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: rgba(12, 14, 20, 0.75);
    min-width: 78px;
    color: var(--text-strong);
}
.balance-pill-link {
    text-decoration: none;
    cursor: pointer;
    transition:
        transform var(--motion-duration-short) var(--motion-ease-standard),
        border-color var(--motion-duration-short) var(--motion-ease-standard),
        background var(--motion-duration-short) var(--motion-ease-standard);
}
.balance-pill-link:hover,
.balance-pill-link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(95, 227, 197, 0.72);
    background: rgba(95, 227, 197, 0.2);
}
.balance-pill-link:focus-visible {
    outline: 2px solid rgba(159, 242, 220, 0.68);
    outline-offset: 2px;
}
.balance-pill--vinyls {
    min-width: 68px;
    border-color: rgba(243, 192, 97, 0.45);
    background: rgba(243, 192, 97, 0.12);
}
.balance-pill--vintokens {
    border-color: rgba(95, 227, 197, 0.5);
    background: rgba(95, 227, 197, 0.12);
}
.balance-label {
    font-size: var(--text-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.balance-pill--vinyls .balance-label {
    color: #f6d191;
}
.balance-pill--vintokens .balance-label {
    color: #9ff2dc;
}
.balance-pill strong {
    font-size: 0.95rem;
    line-height: 1.1;
}
.balance-pill--vinyls strong {
    font-size: 0.82rem;
}
.balance-pill.balance-pulse {
    animation: balancePulse 620ms var(--motion-ease-overshoot);
}
.nav-profile {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    min-width: 0;
    max-width: 360px;
    flex: 0 1 auto;
}
    .nav-profile:hover {
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.08);
    }
    .nav-profile strong {
        font-size: 0.94rem;
        letter-spacing: -0.01em;
        color: #fff;
    }
    .nav-profile small {
        display: block;
        color: var(--text-muted);
        font-size: 0.8rem;
        letter-spacing: 0.02em;
        text-transform: none;
    }
    .nav-profile .staff-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(95, 227, 197, 0.45);
        color: #5fe3c5;
        font-size: 0.76rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: rgba(95, 227, 197, 0.12);
    }
    .nav-avatar {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.08);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.9rem;
        color: #0b0d11;
    }
    .nav-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    body[data-immersive-nav="true"] header .container {
        background: linear-gradient(
            140deg,
            rgba(var(--immersive-nav-shadow-rgb), 0.94),
            rgba(var(--immersive-nav-primary-rgb), 0.24)
        );
        border-color: rgba(var(--immersive-nav-primary-rgb), 0.48);
        box-shadow:
            0 28px 62px rgba(4, 6, 12, 0.56),
            0 0 0 1px rgba(var(--immersive-nav-secondary-rgb), 0.24);
    }
    body[data-immersive-nav="true"] .nav-tagline {
        color: rgba(var(--immersive-nav-secondary-rgb), 0.9);
    }
    body[data-immersive-nav="true"] .nav-links-primary {
        background: linear-gradient(
            130deg,
            rgba(var(--immersive-nav-primary-rgb), 0.24),
            rgba(var(--immersive-nav-secondary-rgb), 0.14)
        );
        border-color: rgba(var(--immersive-nav-primary-rgb), 0.36);
    }
    body[data-immersive-nav="true"] .nav-links-secondary {
        background: rgba(var(--immersive-nav-shadow-rgb), 0.42);
        border-color: rgba(var(--immersive-nav-secondary-rgb), 0.24);
    }
    body[data-immersive-nav="true"] .nav-links a {
        color: rgba(var(--immersive-nav-ink-rgb), 0.86);
    }
    body[data-immersive-nav="true"] .nav-links a::after {
        background: linear-gradient(
            90deg,
            rgba(var(--immersive-nav-primary-rgb), 0.94),
            rgba(var(--immersive-nav-secondary-rgb), 0.94)
        );
    }
    body[data-immersive-nav="true"] .nav-links a.active {
        background: linear-gradient(
            130deg,
            rgba(var(--immersive-nav-primary-rgb), 0.34),
            rgba(var(--immersive-nav-secondary-rgb), 0.22)
        );
        color: rgb(var(--immersive-nav-ink-rgb));
        border-color: rgba(var(--immersive-nav-primary-rgb), 0.58);
    }
    body[data-immersive-nav="true"] .nav-links a:hover,
    body[data-immersive-nav="true"] .nav-links a:focus-visible {
        background: linear-gradient(
            130deg,
            rgba(var(--immersive-nav-primary-rgb), 0.26),
            rgba(var(--immersive-nav-secondary-rgb), 0.16)
        );
        color: rgb(var(--immersive-nav-ink-rgb));
        border-color: rgba(var(--immersive-nav-secondary-rgb), 0.42);
    }
    body[data-immersive-nav="true"] .nav-quick-link {
        border-color: rgba(var(--immersive-nav-primary-rgb), 0.44);
        background: rgba(var(--immersive-nav-shadow-rgb), 0.62);
        color: rgb(var(--immersive-nav-ink-rgb));
    }
    body[data-immersive-nav="true"] .nav-quick-link:hover,
    body[data-immersive-nav="true"] .nav-quick-link:focus-visible {
        border-color: rgba(var(--immersive-nav-secondary-rgb), 0.56);
        background: rgba(var(--immersive-nav-primary-rgb), 0.24);
    }
    body[data-immersive-nav="true"] .nav-balance {
        border-color: rgba(var(--immersive-nav-primary-rgb), 0.34);
        background: rgba(var(--immersive-nav-shadow-rgb), 0.48);
    }
    body[data-immersive-nav="true"] .nav-profile {
        border-color: rgba(var(--immersive-nav-primary-rgb), 0.38);
        background: rgba(var(--immersive-nav-shadow-rgb), 0.64);
    }
    body[data-immersive-nav="true"] .nav-profile:hover {
        border-color: rgba(var(--immersive-nav-secondary-rgb), 0.48);
        background: rgba(var(--immersive-nav-primary-rgb), 0.2);
    }
    body[data-immersive-nav="true"] .nav-profile .staff-pill {
        border-color: rgba(var(--immersive-nav-primary-rgb), 0.54);
        color: rgb(var(--immersive-nav-primary-rgb));
        background: rgba(var(--immersive-nav-primary-rgb), 0.16);
    }
    .nav-actions {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .nav-toggle {
        display: none;
        width: 46px;
        height: 46px;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-soft);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
        color: var(--text-strong);
        font-size: 0.95rem;
        font-weight: 700;
        justify-self: end;
        box-shadow: 0 12px 26px rgba(4, 6, 12, 0.4);
    }
    .nav-toggle-label {
        display: none;
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }
    header[data-nav-mode="float"],
    header[data-nav-mode="left"],
    header[data-nav-mode="right"] {
        position: fixed;
        inset: auto;
        top: var(--nav-float-y, 12px);
        left: var(--nav-float-x, 12px);
        z-index: 28;
        width: min(var(--nav-float-width, 960px), calc(100% - 26px));
        pointer-events: none;
        transition:
            top 240ms var(--motion-ease-decelerate),
            left 240ms var(--motion-ease-decelerate),
            width 240ms var(--motion-ease-decelerate);
    }
    header[data-nav-dragging="true"],
    header[data-nav-resizing="true"] {
        transition: none;
    }
    header[data-nav-mode="left"] {
        top: var(--nav-float-y, 0px);
        bottom: auto;
        left: 0;
        right: auto;
        width: min(var(--nav-float-width, 340px), 420px);
        height: calc(100vh - var(--nav-float-y, 0px));
        height: calc(100dvh - var(--nav-float-y, 0px));
        min-height: min(220px, 100vh);
        min-height: min(220px, 100dvh);
        max-height: calc(100vh - var(--nav-float-y, 0px));
        max-height: calc(100dvh - var(--nav-float-y, 0px));
    }
    header[data-nav-mode="right"] {
        top: var(--nav-float-y, 0px);
        bottom: auto;
        right: 0;
        left: auto;
        width: min(var(--nav-float-width, 340px), 420px);
        height: calc(100vh - var(--nav-float-y, 0px));
        height: calc(100dvh - var(--nav-float-y, 0px));
        min-height: min(220px, 100vh);
        min-height: min(220px, 100dvh);
        max-height: calc(100vh - var(--nav-float-y, 0px));
        max-height: calc(100dvh - var(--nav-float-y, 0px));
    }
    header[data-nav-mode="float"] .container,
    header[data-nav-mode="left"] .container,
    header[data-nav-mode="right"] .container {
        height: 100%;
        width: 100%;
        margin: 0;
        max-width: none;
        background: linear-gradient(135deg, rgba(12, 14, 20, 0.96), rgba(12, 14, 20, 0.78));
        border-color: var(--nav-border);
        box-shadow: var(--shadow-strong);
        backdrop-filter: blur(20px) saturate(140%);
    }
    header[data-nav-mode="left"] .container,
    header[data-nav-mode="right"] .container {
        display: flex;
        align-items: stretch;
        overflow: hidden;
    }
    header[data-nav-mode="left"] .container {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    header[data-nav-mode="right"] .container {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    header[data-nav-mode="left"] #site-nav,
    header[data-nav-mode="right"] #site-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px;
        height: 100%;
        min-height: 0;
    }
    header[data-nav-mode="float"] #site-nav {
        padding: 16px 12px 22px;
    }
    header[data-nav-mode="left"] .nav-shell,
    header[data-nav-mode="right"] .nav-shell {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        flex: 1;
        overflow: auto;
        min-height: 0;
        overscroll-behavior: contain;
    }
    header[data-nav-mode="left"] .nav-track,
    header[data-nav-mode="right"] .nav-track {
        gap: 8px;
    }
    header[data-nav-mode="left"] .nav-brand,
    header[data-nav-mode="right"] .nav-brand {
        justify-content: center;
    }
    header[data-nav-mode="left"] .nav-brand a,
    header[data-nav-mode="right"] .nav-brand a {
        justify-content: center;
        width: 100%;
        text-align: center;
    }
    header[data-nav-mode="left"] .nav-links,
    header[data-nav-mode="right"] .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        flex-wrap: nowrap;
    }
    header[data-nav-mode="left"] .nav-links li,
    header[data-nav-mode="right"] .nav-links li {
        width: 100%;
    }
    header[data-nav-mode="left"] .nav-links a,
    header[data-nav-mode="right"] .nav-links a {
        width: 100%;
        justify-content: flex-start;
        white-space: normal;
    }
    header[data-nav-mode="left"] .nav-links a span:last-child,
    header[data-nav-mode="right"] .nav-links a span:last-child {
        white-space: normal;
    }
    header[data-nav-mode="left"] .nav-account,
    header[data-nav-mode="right"] .nav-account {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    header[data-nav-mode="left"] .nav-quick,
    header[data-nav-mode="right"] .nav-quick {
        width: 100%;
        justify-content: flex-start;
    }
    header[data-nav-mode="left"] .nav-balance,
    header[data-nav-mode="right"] .nav-balance {
        width: 100%;
        justify-content: space-between;
    }
    header[data-nav-mode="left"] .balance-pill,
    header[data-nav-mode="right"] .balance-pill {
        flex: 1 1 0;
        min-width: 0;
    }
    header[data-nav-mode="left"] .nav-profile,
    header[data-nav-mode="right"] .nav-profile {
        width: 100%;
        max-width: 100%;
    }
    header[data-nav-mode="float"] .nav-shell {
        width: 100%;
    }
    .nav-dock-indicator {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 20;
    }
    .nav-dock-panel {
        position: absolute;
        top: 0;
        bottom: 0;
        width: clamp(220px, 22vw, 360px);
        border-radius: 22px;
        border: 1px dashed rgba(95, 227, 197, 0.55);
        background: rgba(95, 227, 197, 0.08);
        box-shadow: 0 18px 40px rgba(6, 16, 24, 0.45);
        opacity: 0;
        transform: scale(0.98);
        transition:
            opacity var(--motion-duration-short) var(--motion-ease-standard),
            transform var(--motion-duration-medium) var(--motion-ease-standard);
    }
    .nav-dock-left {
        left: 0;
    }
    .nav-dock-right {
        right: 0;
    }
    .nav-dock-top {
        top: 0;
        left: 50%;
        transform: translate(-50%, -8px) scale(0.98);
        width: min(clamp(300px, 44vw, 760px), calc(100% - 28px));
        height: clamp(76px, 12vh, 120px);
        bottom: auto;
        border-radius: 0 0 24px 24px;
    }
    .nav-dock-top::after {
        content: "Top Dock Range";
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(242, 242, 242, 0.72);
        white-space: nowrap;
    }
    .nav-dock-indicator[data-nav-dock="left"] .nav-dock-left,
    .nav-dock-indicator[data-nav-dock="right"] .nav-dock-right,
    .nav-dock-indicator[data-nav-dock="top"] .nav-dock-top {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    .nav-dock-indicator[data-nav-dock="left"] .nav-dock-left,
    .nav-dock-indicator[data-nav-dock="right"] .nav-dock-right {
        transform: scale(1);
    }
.nav-handle-group {
    position: absolute;
    top: 8px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 14;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-100%) scale(0.96);
    transition:
        opacity var(--motion-duration-short) var(--motion-ease-standard),
        transform var(--motion-duration-medium) var(--motion-ease-standard);
}
header[data-nav-mode="left"] .nav-handle-group {
    left: 12px;
    transform: scale(0.96);
}
header[data-nav-mode="right"] .nav-handle-group,
header[data-nav-mode="float"] .nav-handle-group {
    top: 10px;
    left: 12px;
}
.nav-handle-btn {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(242, 242, 242, 0.78);
    padding: 0;
}
.nav-move-handle {
    cursor: grab;
}
.nav-resize-handle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    cursor: se-resize;
    pointer-events: none;
    opacity: 0;
    transform: translateX(100%) scale(0.96);
    transition:
        opacity var(--motion-duration-short) var(--motion-ease-standard),
        transform var(--motion-duration-medium) var(--motion-ease-standard);
}
.nav-handle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-handle-btn svg {
    width: 12px;
    height: 12px;
}
#site-nav:hover .nav-handle-group,
#site-nav.nav-unlocked .nav-handle-group,
#site-nav[data-dragging="true"] .nav-handle-group,
#site-nav[data-resizing="true"] .nav-handle-group,
header.nav-unlocked .nav-handle-group,
header[data-nav-handle-visible="true"] .nav-handle-group,
#site-nav:hover .nav-resize-handle,
#site-nav.nav-unlocked .nav-resize-handle,
#site-nav[data-dragging="true"] .nav-resize-handle,
#site-nav[data-resizing="true"] .nav-resize-handle,
header.nav-unlocked .nav-resize-handle,
header[data-nav-handle-visible="true"] .nav-resize-handle {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(100%) scale(1);
}
#site-nav:hover .nav-handle-group,
#site-nav.nav-unlocked .nav-handle-group,
#site-nav[data-dragging="true"] .nav-handle-group,
#site-nav[data-resizing="true"] .nav-handle-group,
header.nav-unlocked .nav-handle-group,
header[data-nav-handle-visible="true"] .nav-handle-group {
    transform: translateX(-100%) scale(1);
}
header[data-nav-mode="left"] #site-nav:hover .nav-handle-group,
header[data-nav-mode="left"] #site-nav.nav-unlocked .nav-handle-group,
header[data-nav-mode="left"] #site-nav[data-dragging="true"] .nav-handle-group,
header[data-nav-mode="left"] #site-nav[data-resizing="true"] .nav-handle-group,
header[data-nav-mode="left"].nav-unlocked .nav-handle-group,
header[data-nav-mode="left"][data-nav-handle-visible="true"] .nav-handle-group {
    transform: scale(1);
}
header[data-nav-mode="right"] .nav-resize-handle {
    right: auto;
    left: 12px;
    transform: translateX(-100%) scale(0.96);
}
header[data-nav-mode="right"] #site-nav:hover .nav-resize-handle,
header[data-nav-mode="right"] #site-nav.nav-unlocked .nav-resize-handle,
header[data-nav-mode="right"] #site-nav[data-dragging="true"] .nav-resize-handle,
header[data-nav-mode="right"] #site-nav[data-resizing="true"] .nav-resize-handle,
header[data-nav-mode="right"].nav-unlocked .nav-resize-handle,
header[data-nav-mode="right"][data-nav-handle-visible="true"] .nav-resize-handle {
    transform: translateX(-100%) scale(1);
}
.nav-handle-btn:hover,
.nav-handle-btn:focus-visible {
    border-color: rgba(255, 255, 255, 0.45);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08));
    color: #ffffff;
}
header[data-nav-move-resize="off"] .nav-handle-group {
    display: none;
}
    header[data-nav-move-resize="off"] #site-nav {
        cursor: default;
    }
    header[data-nav-autohide="off"] + .nav-reveal {
        display: none;
    }
    header[data-nav-mode="float"] #site-nav,
    header[data-nav-mode="left"] #site-nav,
    header[data-nav-mode="right"] #site-nav {
        cursor: grab;
    }
    #site-nav[data-dragging="true"] {
        cursor: grabbing;
    }
    #site-nav[data-dragging="true"] .nav-move-handle {
        cursor: grabbing;
    }
    :is(body,:root)[data-nav-undocked="left"] main {
        padding-left: var(--nav-undocked-width, clamp(180px, 12vw, 260px));
    }
    :is(body,:root)[data-nav-undocked="right"] main {
        padding-right: var(--nav-undocked-width, clamp(180px, 12vw, 260px));
    }
    :is(body,:root)[data-nav-undocked="float"] main {
        padding-top: 92px;
    }
    @media (max-width: 1240px) {
        .nav-links {
            flex-wrap: wrap;
        }
        .nav-links li {
            flex: 1 1 140px;
        }
        .nav-links a {
            width: 100%;
            justify-content: flex-start;
        }
    }
    @media (max-width: 1100px) {
        header .container {
            padding: 8px 16px;
        }
        .nav-tagline {
            display: none;
        }
        #site-nav {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-areas:
                "brand toggle"
                "panel panel";
            align-items: center;
            gap: 12px;
            padding: 12px 0 16px;
        }
        .nav-brand {
            grid-area: brand;
            width: 100%;
            justify-content: center;
        }
        .nav-brand a {
            width: 100%;
            justify-content: center;
            text-align: center;
        }
        .nav-brand a .brand-mark {
            order: 2;
        }
        .nav-shell {
            grid-area: panel;
            display: flex;
            width: 100%;
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
            background: var(--nav-surface);
            border: 1px solid var(--nav-border);
            border-radius: var(--radius-lg);
            padding: 0 14px;
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(16px) saturate(140%);
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            overflow-x: hidden;
            visibility: hidden;
            transform: translateY(-8px);
            pointer-events: none;
            transition:
                max-height var(--motion-duration-medium) var(--motion-ease-standard),
                opacity var(--motion-duration-medium) var(--motion-ease-standard),
                transform var(--motion-duration-medium) var(--motion-ease-standard),
                padding var(--motion-duration-medium) var(--motion-ease-standard);
        }
        .nav-shell[data-open="true"] {
            max-height: calc(100vh - 140px);
            max-height: calc(100dvh - 140px);
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
            padding: 14px;
            padding-bottom: calc(14px + env(safe-area-inset-bottom));
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            visibility: visible;
        }
        .nav-track {
            width: 100%;
            flex-direction: column;
            align-items: stretch;
            flex: 0 0 auto;
        }
        .nav-links {
            width: 100%;
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            justify-content: flex-start;
        }
        .nav-links li {
            width: 100%;
        }
        .nav-links a {
            justify-content: flex-start;
            width: 100%;
            white-space: normal;
            overflow: visible;
            min-height: 36px;
            font-size: var(--nav-item-font-size-compact);
            padding: var(--nav-item-padding-compact);
        }
        .nav-links a span:last-child {
            white-space: normal;
            text-overflow: clip;
        }
        .nav-actions {
            width: 100%;
            justify-content: flex-start;
        }
        .nav-account {
            width: 100%;
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }
        .nav-balance {
            width: 100%;
            justify-content: space-between;
        }
        .balance-pill {
            flex: 1 1 0;
            min-width: 0;
        }
        .nav-profile {
            width: 100%;
            max-width: 100%;
        }
        .nav-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            grid-area: toggle;
            justify-self: end;
            margin-left: 0;
        }
        .nav-toggle-label {
            display: inline-flex;
        }
        .nav-resize-handle {
            display: none !important;
        }
        .nav-move-handle {
            display: none !important;
        }
    }
    main {
        padding: 64px 0 110px;
        position: relative;
        isolation: isolate;
        z-index: 1;
    }
    main::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(80% 60% at 18% 18%, rgba(95, 227, 197, 0.14) 0%, rgba(11, 13, 17, 0) 65%);
        opacity: 0.45;
    }
    main > .container {
        position: relative;
        z-index: 1;
    }
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
        gap: 44px;
        margin-bottom: 72px;
        align-items: start;
    }
    h1, h2, h3, h4 {
        font-family: var(--font-display);
        font-weight: 600;
        letter-spacing: -0.015em;
        margin-top: 0;
        color: #ffffff;
    }
    h1 {
        font-size: clamp(2.6rem, 3.2vw, 3.4rem);
        line-height: 1.1;
    }
    h2 {
        font-size: clamp(1.8rem, 2.2vw, 2.2rem);
        line-height: 1.25;
    }
    h3 {
        font-size: clamp(1.35rem, 1.6vw, 1.6rem);
    }
    h4 {
        font-size: clamp(1.1rem, 1.2vw, 1.3rem);
    }
    strong {
        font-weight: 650;
        color: #ffffff;
    }
    em {
        font-style: italic;
        color: rgba(242, 242, 242, 0.78);
    }
    code {
        font-family: var(--font-mono);
        background: rgba(255, 255, 255, 0.08);
        padding: 2px 6px;
        border-radius: 6px;
        font-size: 0.9em;
        color: var(--accent-secondary);
    }
    .hero h1 {
        font-size: 3rem;
        margin-bottom: 16px;
        letter-spacing: -0.03em;
    }
    .hero p {
        color: var(--text-muted);
        font-size: var(--text-size-base);
        line-height: 1.6;
    }
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        align-items: start;
        position: relative;
    }
    .hero.decorated {
        border-radius: var(--radius-xl);
        padding: 32px;
        background: var(--bg-panel);
        border: 1px solid var(--border-soft);
        --decoration-opacity: 0.7;
    }
    .hero-surface {
        background: var(--bg-panel);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-xl);
        padding: 36px;
        box-shadow: var(--shadow-soft);
    }
    .hero.hero-with-aside {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    }
    .hero-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    .hero-align-center {
        text-align: center;
        align-items: center;
    }
    .hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 999px;
        letter-spacing: 0.24em;
        font-size: var(--text-size-xs);
        text-transform: uppercase;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(242, 242, 242, 0.72);
    }
    .hero-description {
        margin: 0;
        color: rgba(242, 242, 242, 0.78);
        max-width: 58ch;
    }
    .hero-supporting {
        width: 100%;
        margin-top: 10px;
    }
    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 4px;
    }
    .hero-aside {
        background: var(--bg-panel);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-lg);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        box-shadow: 0 18px 42px rgba(6, 10, 22, 0.24);
    }
    .panel-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 28px;
    }
    .panel,
    .card,
    .section-block {
        background: var(--bg-panel);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-xl);
        padding: var(--surface-padding);
        display: flex;
        flex-direction: column;
        gap: var(--surface-gap);
        box-shadow: var(--shadow-soft);
        position: relative;
        z-index: 0;
        transition:
            border var(--motion-duration-short) var(--motion-ease-standard),
            box-shadow var(--motion-duration-medium) var(--motion-ease-standard);
    }
    .panel,
    .card {
        transition:
            transform var(--motion-duration-medium) var(--motion-ease-decelerate),
            border var(--motion-duration-short) var(--motion-ease-standard),
            box-shadow var(--motion-duration-medium) var(--motion-ease-standard);
    }
    .panel:focus-within,
    .card:focus-within,
    .section-block:focus-within {
        z-index: 2;
    }
    .panel:hover,
    .card:hover,
    .section-block:hover {
        transform: translateY(-1px);
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow: 0 24px 60px rgba(6, 10, 22, 0.32);
    }
    .panel h2,
    .section-block h2 {
        margin: 0;
        font-size: 1.35rem;
    }
    .panel p,
    .section-block p {
        margin: 0;
        color: var(--text-muted);
        line-height: 1.6;
        font-size: var(--text-size-base);
    }
    .section-group {
        display: flex;
        flex-direction: column;
        gap: 40px;
        margin-bottom: 80px;
    }
    .section-header {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 18px;
        position: relative;
        transform: none !important;
        translate: none;
        transition: none !important;
        will-change: auto;
        contain: layout paint;
    }
    .section-header * {
        transform: none;
        transition: none;
    }
    .section-header h2 {
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .section-title {
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .section-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.08);
        color: var(--text-strong);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
        transition:
            transform var(--motion-duration-short) var(--motion-ease-overshoot),
            box-shadow var(--motion-duration-short) var(--motion-ease-standard);
    }
    .section-icon svg {
        width: 16px;
        height: 16px;
    }
    .section-lede {
        margin: 0;
        color: rgba(242, 242, 242, 0.72);
        font-size: var(--text-size-sm);
        max-width: 60ch;
    }
    .section-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 12px;
    }
    .section-body {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .section-surface {
        background: var(--bg-surface);
        border: 1px solid var(--border-soft);
    }
    .page-menu {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border-soft);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        margin-top: 20px;
    }
    .page-menu a {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        border-radius: 999px;
        font-size: var(--text-size-sm);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-subtle);
        border: 1px solid transparent;
    }
    .page-menu a::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 6px;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(95, 227, 197, 0.8), rgba(226, 182, 122, 0.8));
        opacity: 0;
        transform: scaleX(0.35);
        transform-origin: center;
        transition:
            opacity var(--motion-duration-short) var(--motion-ease-standard),
            transform var(--motion-duration-short) var(--motion-ease-standard);
    }
    .page-menu a:hover,
    .page-menu a:focus {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.08);
        color: #f2f2f2;
    }
    .page-menu a:hover::after,
    .page-menu a:focus::after {
        opacity: 1;
        transform: scaleX(1);
    }
    .section-group > * + * {
        margin-top: 0;
    }
    .panel + .panel,
    .section-block + .section-block,
    .hero + .panel,
    .hero + .section-block {
        margin-top: 32px;
    }
    .section-title {
        margin: 0;
        font-size: 1.65rem;
        letter-spacing: -0.02em;
    }
    .section-subtitle {
        margin: 6px 0 0;
        color: var(--text-muted);
        font-size: var(--text-size-sm);
    }
    .subtle {
        color: var(--text-muted);
        font-size: var(--text-size-sm);
        text-transform: none;
        letter-spacing: 0.02em;
        margin-bottom: 12px;
    }
    .stat-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 36px;
    }
    .stat-card {
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-lg);
        padding: 18px;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
        display: flex;
        flex-direction: column;
        gap: 6px;
        box-shadow: 0 14px 32px rgba(6, 10, 22, 0.22);
        min-width: 0;
    }
    .stat-card-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(95, 227, 197, 0.12);
        border: 1px solid rgba(95, 227, 197, 0.28);
        color: var(--accent-primary);
    }
    .stat-card-icon svg {
        width: 18px;
        height: 18px;
    }
    .stat-card strong {
        font-size: 2rem;
        overflow-wrap: anywhere;
    }
    .stat-card span {
        color: var(--text-subtle);
        overflow-wrap: anywhere;
    }
    .table-wrapper {
        margin-top: 16px;
        border-radius: 16px;
        overflow: auto;
        border: 1px solid var(--border-soft);
        background: transparent;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        background: transparent;
    }
    table thead {
        background: rgba(255, 255, 255, 0.06);
    }
    th, td {
        padding: 14px 18px;
        text-align: left;
        font-size: 0.95rem;
        white-space: nowrap;
    }
    .table-cell-wrap {
        white-space: normal;
    }
    tbody tr:nth-child(odd) {
        background: rgba(255, 255, 255, 0.015);
    }
    tbody tr:hover {
        background: rgba(255, 255, 255, 0.08);
    }
    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 22px;
        align-items: stretch;
        grid-auto-rows: 1fr;
    }
    .card-grid.tight-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 20px;
    }
    .card-grid.home-relaxed-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 30px;
    }
    .card-grid.home-relaxed-grid .card {
        padding: 26px;
        gap: 16px;
    }
    .card-grid.home-relaxed-grid .card-body {
        line-height: 1.8;
        font-size: 1.03rem;
    }
    .card-grid.home-relaxed-grid .card-body p {
        margin: 0 0 12px;
    }
    .card-grid.home-relaxed-grid .card-body p:last-child {
        margin-bottom: 0;
    }
    .card-grid.home-relaxed-grid .card-actions {
        padding-top: 8px;
        gap: 12px;
    }
    .card {
        gap: 12px;
        display: flex;
        flex-direction: column;
        background: var(--bg-surface);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-lg);
        padding: 20px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 60px rgba(5, 8, 20, 0.32);
        overflow: visible;
        word-break: break-word;
    }
    .promo-card {
        --promo-accent: rgba(255, 255, 255, 0.18);
        border-left: 4px solid var(--promo-accent);
        background: linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.02)
        );
        position: relative;
        overflow: hidden;
    }
    .promo-card-giveaway {
        --promo-accent: rgba(255, 215, 0, 0.6);
    }
    .promo-card-event {
        --promo-accent: rgba(0, 127, 255, 0.6);
    }
    .promo-card-empty {
        --promo-accent: rgba(255, 255, 255, 0.12);
    }
    .promo-card-body {
        display: grid;
        gap: 16px;
    }
    .promo-card-media {
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
        border: 1px solid rgba(255, 255, 255, 0.12);
        min-height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .promo-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .promo-card-media--placeholder {
        color: rgba(242, 242, 242, 0.6);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.3em;
    }
    .promo-card-details p {
        margin: 0 0 8px;
    }
    .promo-card-details p:last-child {
        margin-bottom: 0;
    }
    .marketplace-recognition-card {
        --promo-accent: rgba(95, 227, 197, 0.5);
    }
    .marketplace-recognition-card .card-header {
        gap: 6px;
    }
    .marketplace-recognition-card .card-subtitle {
        color: rgba(247, 244, 239, 0.76);
    }
    .recognition-shell {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .recognition-topline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
    }
    .recognition-tier {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.06);
        color: var(--accent-primary);
    }
    .recognition-winner {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .recognition-avatar {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        overflow: hidden;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.24);
        background: rgba(8, 10, 18, 0.55);
    }
    .recognition-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .recognition-avatar-fallback {
        font-size: 1rem;
        font-weight: 700;
        color: #ffffff;
    }
    .recognition-winner-meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .recognition-winner-meta strong,
    .recognition-winner-meta span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .recognition-winner-meta span {
        font-size: 0.82rem;
        color: var(--text-subtle);
    }
    .recognition-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .recognition-stat {
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.05);
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .recognition-stat span {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(247, 244, 239, 0.66);
    }
    .recognition-stat strong {
        font-size: 0.92rem;
        line-height: 1.2;
    }
    .marketplace-recognition-card--top_seller {
        --promo-accent: rgba(255, 201, 77, 0.8);
    }
    .marketplace-recognition-card--fastest_growth {
        --promo-accent: rgba(255, 120, 80, 0.78);
    }
    .marketplace-recognition-card--elite_vendor {
        --promo-accent: rgba(120, 185, 255, 0.78);
    }
    .marketplace-recognition-card--power_buyer {
        --promo-accent: rgba(147, 224, 179, 0.78);
    }
    .marketplace-recognition-card--paycheck {
        --promo-accent: rgba(95, 227, 197, 0.78);
    }
    .marketplace-recognition-card--paycheck .recognition-tier {
        color: var(--accent-secondary);
    }
    .recognition-shell--paycheck .form-status {
        margin: 0;
    }
    @media (max-width: 540px) {
        .recognition-stats {
            grid-template-columns: 1fr;
        }
    }
    @media (min-width: 720px) {
        .promo-card-body {
            grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
            align-items: stretch;
        }
    }
    .shop-hud-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    .shop-sections {
        display: flex;
        flex-direction: column;
        gap: 26px;
        margin-top: 16px;
    }
    .shop-section {
        position: relative;
        padding: 22px;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(8, 10, 18, 0.72);
        box-shadow: 0 30px 80px rgba(5, 8, 20, 0.3);
        overflow: hidden;
        isolation: isolate;
    }
    .shop-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(120% 120% at 20% 0%, rgba(95, 227, 197, 0.16), transparent 60%),
            radial-gradient(120% 120% at 80% 10%, rgba(226, 182, 122, 0.12), transparent 60%),
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 18px);
        opacity: 0.35;
        pointer-events: none;
    }
    .shop-section-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        position: relative;
        z-index: 1;
    }
    .shop-section-header h3 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }
    .shop-section-subtle {
        margin: 6px 0 0;
        color: var(--text-muted);
        font-size: 0.9rem;
        max-width: 60ch;
    }
    .shop-section-tag {
        font-size: 0.72rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: rgba(242, 242, 242, 0.7);
    }
    .shop-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 18px;
        margin-top: 18px;
        position: relative;
        z-index: 1;
    }
    .shop-card {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(10, 12, 18, 0.82);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(5, 8, 20, 0.4);
        min-height: 260px;
        transition:
            transform var(--motion-duration-short) var(--motion-ease-standard),
            box-shadow var(--motion-duration-medium) var(--motion-ease-standard),
            border var(--motion-duration-short) var(--motion-ease-standard);
    }
    .shop-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.22);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 32px 72px rgba(5, 8, 20, 0.5);
    }
    .shop-card-top {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .shop-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .shop-card h4 {
        margin: 0;
        font-size: 1.05rem;
        font-family: var(--font-display);
        letter-spacing: 0.04em;
    }
    .shop-card p {
        margin: 0;
        color: var(--text-muted);
        font-size: 0.9rem;
        line-height: 1.5;
    }
    .shop-card-scopes {
        font-size: 0.72rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(242, 242, 242, 0.55);
    }
    .shop-card-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: auto;
    }
    .shop-card-rarity {
        font-size: 0.68rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(242, 242, 242, 0.75);
    }
    .shop-card-price {
        font-size: 0.78rem;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: rgba(242, 242, 242, 0.78);
    }
    .shop-card-status {
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(242, 242, 242, 0.78);
        align-self: flex-start;
    }
    .shop-card-status.owned {
        border-color: rgba(95, 227, 197, 0.5);
        color: #5fe3c5;
    }
    .shop-card-status.locked {
        border-color: rgba(243, 192, 97, 0.5);
        color: #f3c061;
    }
    .shop-card-status.premium {
        border-color: rgba(154, 185, 255, 0.45);
        color: #9ab9ff;
    }
    .shop-card[data-rarity="legendary"] {
        border-color: rgba(255, 214, 106, 0.5);
        box-shadow: 0 0 0 1px rgba(255, 214, 106, 0.25), 0 28px 70px rgba(5, 8, 20, 0.5);
    }
    .shop-card[data-rarity="legendary"] .shop-card-rarity {
        border-color: rgba(255, 214, 106, 0.5);
        color: #ffd66a;
    }
    .shop-card[data-rarity="epic"] {
        border-color: rgba(181, 149, 255, 0.4);
    }
    .shop-card[data-rarity="epic"] .shop-card-rarity {
        border-color: rgba(181, 149, 255, 0.4);
        color: #b595ff;
    }
    .shop-card[data-rarity="rare"] .shop-card-rarity {
        border-color: rgba(154, 185, 255, 0.4);
        color: #9ab9ff;
    }
    .shop-card[data-rarity="common"] .shop-card-rarity {
        border-color: rgba(226, 182, 122, 0.3);
        color: #e2b67a;
    }
    .shop-section[data-collection="partner"] {
        border-color: rgba(157, 123, 255, 0.28);
    }
    .shop-section[data-collection="premium"] {
        border-color: rgba(143, 246, 255, 0.28);
    }
    .card-header {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .card-header--with-icon {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }
    .card-header--with-icon .card-header-text {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }
    .card-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(95, 227, 197, 0.12);
        border: 1px solid rgba(95, 227, 197, 0.25);
        color: var(--accent-primary);
        flex: 0 0 auto;
        transition:
            transform var(--motion-duration-short) var(--motion-ease-overshoot),
            box-shadow var(--motion-duration-short) var(--motion-ease-standard);
    }
    .card-icon svg {
        width: 20px;
        height: 20px;
    }
    .card:hover .card-icon,
    .section-block:hover .section-icon,
    .center-tab:hover .center-tab__icon,
    .center-tab.is-active .center-tab__icon {
        transform: translateY(-1px) scale(1.04);
        box-shadow: 0 8px 16px rgba(6, 10, 22, 0.22);
    }
    .card-subtitle {
        margin: 0;
        color: rgba(242, 242, 242, 0.68);
        font-size: var(--text-size-sm);
    }
    .card-badges {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .card-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
        color: var(--text-muted);
        font-size: var(--text-size-base);
    }
    .card code,
    .marketplace-card code,
    .meta-card code {
        word-break: break-all;
    }
    .card-footer {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        color: rgba(242, 242, 242, 0.72);
        font-size: var(--text-size-sm);
    }
    .card-actions {
        margin-top: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }
    .guild-card {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }
    .guild-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }
    .guild-card-header h3 {
        margin: 0;
    }
    .guild-card-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }
    .guild-card-stat {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .guild-card-stat span {
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }
    .guild-card-stat strong {
        font-size: 1.05rem;
        color: var(--text-strong);
    }
    .guild-card-stat code {
        font-size: 0.78rem;
        color: rgba(242, 242, 242, 0.68);
    }
    .guild-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .guild-search {
        margin-bottom: 18px;
    }
    .guild-search input {
        width: 100%;
    }
    .guild-overview-grid {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    .guild-overview-card {
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 16px;
        background: rgba(255, 255, 255, 0.02);
    }
    .guild-overview-card h3 {
        margin-top: 0;
    }
    .guild-highlights {
        padding-left: 18px;
        margin: 0;
        color: rgba(242, 242, 242, 0.7);
    }
    .guild-media-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .guild-media-card {
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.02);
    }
    .guild-media-card img {
        width: 100%;
        height: 140px;
        object-fit: cover;
        display: block;
    }
    .guild-links {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .guild-links a {
        color: var(--accent-primary);
        font-weight: 600;
    }
    .guild-card-arrow {
        font-size: 1.1rem;
        opacity: 0.7;
        transition: transform var(--motion-duration-short) var(--motion-ease-standard);
    }
    .guild-card:hover .guild-card-arrow {
        transform: translateX(4px);
        opacity: 1;
    }
    .support-hero {
        align-items: center;
        gap: 24px;
    }
    .support-search {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 16px;
        padding: 12px 14px;
        flex-wrap: wrap;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.04);
    }
    .support-search input {
        flex: 1;
        min-width: 220px;
        border: none;
        background: transparent;
        color: inherit;
        font-size: 1rem;
    }
    .support-search input::placeholder {
        color: var(--text-subtle);
    }
    .support-search input:focus {
        outline: none;
    }
    .support-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }
    .support-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 22px;
    }
    .support-panel__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
    }
    .support-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .support-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .support-span-2 {
        grid-column: span 2;
    }
    .support-form-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }
    .support-ticket-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .support-ticket-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .support-ticket-card__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }
    .support-ticket-title {
        color: var(--text-strong);
        font-weight: 600;
        text-decoration: none;
    }
    .support-ticket-title:hover {
        text-decoration: underline;
    }
    .support-ticket-subtitle {
        color: var(--text-subtle);
        font-size: 0.85rem;
    }
    .support-ticket-summary {
        margin: 0;
        color: var(--text-muted);
        font-size: 0.95rem;
    }
    .support-ticket-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 0.8rem;
        color: var(--text-subtle);
    }
    .support-empty {
        padding: 18px;
        border-radius: 14px;
        border: 1px dashed rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.04);
    }
    .support-help {
        margin-top: 24px;
    }
    .support-topic-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }
    .support-topic {
        padding: 16px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }
    .support-topic-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: var(--accent-secondary);
        flex: 0 0 auto;
    }
    .support-topic-icon svg {
        width: 18px;
        height: 18px;
    }
    .ticket-detail {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .ticket-detail__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }
    .ticket-detail__subtitle {
        margin: 6px 0 0;
        color: var(--text-subtle);
    }
    .ticket-detail-grid {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 20px;
    }
    .ticket-detail-thread,
    .ticket-detail-sidebar {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .ticket-detail-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .ticket-detail-meta div {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .ticket-detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }
    .ticket-turn-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }
    .ticket-comment-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .ticket-comment {
        padding: 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
    }
    .ticket-comment__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 6px;
    }
    .ticket-comment__author {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
    .ticket-comment__avatar {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.08);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.82rem;
        color: #0b0d11;
        flex: 0 0 auto;
    }
    .ticket-comment__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .ticket-comment__author-meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .ticket-comment__author-id {
        font-size: 0.75rem;
        color: var(--text-subtle);
    }
    .ticket-comment__timestamp {
        font-size: 0.75rem;
        color: var(--text-subtle);
        white-space: nowrap;
    }
    .ticket-attachment-list {
        margin: 8px 0 0;
        padding-left: 18px;
        color: var(--text-subtle);
    }
    .ticket-reply-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .ticket-reply-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }
    .ticket-control-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 12px;
    }
    .ticket-filter-form {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 12px;
    }
    .ticket-filter-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }
    .ticket-management-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
        margin-bottom: 16px;
    }
    .capability-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }
    .capability-card.inactive {
        opacity: 0.55;
    }
    .guild-setup-tabs {
        display: grid;
        grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
        gap: 24px;
    }
    .guild-tabs {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .guild-tab {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
        color: rgba(242, 242, 242, 0.82);
        border-radius: 12px;
        padding: 10px 14px;
        text-align: left;
        font-weight: 600;
        transform: translateY(0);
        transition:
            background var(--motion-duration-short) var(--motion-ease-standard),
            border var(--motion-duration-short) var(--motion-ease-standard),
            color var(--motion-duration-short) var(--motion-ease-standard),
            box-shadow var(--motion-duration-medium) var(--motion-ease-standard),
            transform var(--motion-duration-medium) var(--motion-ease-overshoot);
        will-change: transform;
    }
    .guild-tab.is-active {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.25);
        color: #ffffff;
        transform: translateY(-6px);
        box-shadow: 0 18px 32px rgba(6, 10, 20, 0.35);
    }
    .guild-tab:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: 0 18px 32px rgba(6, 10, 20, 0.28);
        color: #fff;
    }
    .guild-tab:active {
        transform: translateY(-2px);
    }
    .guild-setup-panel {
        display: none;
    }
    .guild-setup-panel.is-active {
        display: block;
        animation: motion-panel var(--motion-duration-medium) var(--motion-ease-decelerate) both;
        will-change: transform, opacity;
    }
    button {
        cursor: pointer;
        font-family: inherit;
    }
    .button,
    .apply-button,
    .search-button,
    .ghost-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: var(--button-radius-pill);
        padding: 10px 22px;
        font-weight: 600;
        font-size: 0.95rem;
        line-height: 1;
        text-decoration: none;
        transition:
            transform var(--motion-duration-short) var(--motion-ease-overshoot),
            background var(--motion-duration-short) var(--motion-ease-standard),
            border var(--motion-duration-short) var(--motion-ease-standard),
            color var(--motion-duration-short) var(--motion-ease-standard),
            box-shadow var(--motion-duration-short) var(--motion-ease-standard);
    }
    .button-sm {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    .button-md {
        padding: 10px 22px;
    }
    .button-lg {
        padding: 12px 26px;
        font-size: 1.02rem;
    }
    .button-primary,
    .apply-button {
        background: linear-gradient(
            135deg,
            var(--button-primary-start),
            var(--button-primary-end)
        );
        color: var(--button-primary-ink);
        border: 1px solid var(--button-primary-border);
        box-shadow: var(--button-primary-shadow);
    }
    .button-secondary,
    .search-button {
        background: linear-gradient(
            135deg,
            var(--button-secondary-bg-a),
            var(--button-secondary-bg-b)
        );
        border: 1px solid var(--button-secondary-border);
        color: var(--text-strong);
        box-shadow: var(--button-secondary-shadow);
    }
    .button-ghost,
    .ghost-button {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
        border: 1px solid rgba(255, 255, 255, 0.24);
        color: var(--text-strong);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 16px 30px rgba(6, 9, 16, 0.32);
    }
    .button-danger,
    .ghost-button.danger {
        background: rgba(255, 107, 107, 0.12);
        border: 1px solid rgba(255, 107, 107, 0.38);
        color: var(--accent-danger);
    }
    .button:hover,
    .apply-button:hover,
    .search-button:hover,
    .ghost-button:hover,
    .button-ghost:hover {
        transform: translateY(-2px);
    }
    .button-primary:hover,
    .apply-button:hover {
        box-shadow: var(--button-primary-shadow-hover);
    }
    .button-ghost:hover,
    .ghost-button:hover {
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 22px 36px rgba(5, 8, 15, 0.4);
    }
    .button-secondary:hover,
    .search-button:hover {
        border-color: rgba(255, 255, 255, 0.38);
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.12)
        );
        box-shadow: 0 14px 30px rgba(18, 20, 32, 0.34);
    }
    .button:active,
    .apply-button:active,
    .search-button:active,
    .ghost-button:active,
    .button-ghost:active {
        transform: translateY(0);
        box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.25);
    }
    .button:focus-visible,
    .apply-button:focus-visible,
    .search-button:focus-visible,
    .ghost-button:focus-visible,
    .button-ghost:focus-visible {
        outline: 2px solid var(--button-focus-ring);
        outline-offset: 2px;
    }
    .button-danger:hover,
    .ghost-button.danger:hover {
        border-color: rgba(255, 107, 107, 0.55);
        color: #ffd1d1;
    }
    .button:disabled,
    .apply-button:disabled,
    .search-button:disabled,
    .ghost-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    .button-full {
        width: 100%;
        justify-content: center;
    }
    .button-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .ghost-button.copied,
    .button-copied {
        background: rgba(95, 227, 197, 0.18);
        border-color: rgba(95, 227, 197, 0.46);
        color: var(--accent-primary);
    }
    .bookmark-button.is-bookmarked {
        background: rgba(95, 227, 197, 0.18);
        border-color: rgba(95, 227, 197, 0.46);
        color: var(--accent-primary);
    }
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn {
        font-family: inherit;
        border-radius: var(--button-radius-pill);
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
        color: #f8fafc;
        padding: 10px 18px;
        font-weight: 650;
        letter-spacing: 0.01em;
        box-shadow: 0 12px 28px rgba(5, 8, 16, 0.3);
        transition:
            transform var(--motion-duration-short) var(--motion-ease-overshoot),
            box-shadow var(--motion-duration-short) var(--motion-ease-standard),
            border var(--motion-duration-short) var(--motion-ease-standard),
            background var(--motion-duration-short) var(--motion-ease-standard);
    }
    button:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    .btn:hover {
        transform: translateY(-1px);
        border-color: rgba(255, 255, 255, 0.3);
        box-shadow: 0 18px 34px rgba(5, 8, 16, 0.36);
    }
    button:active,
    input[type="button"]:active,
    input[type="submit"]:active,
    input[type="reset"]:active,
    .btn:active {
        transform: translateY(0);
        box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
    }
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        appearance: none;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        padding: 12px 14px;
        color: #f2f2f2;
        font-family: inherit;
        font-size: var(--text-size-base);
        transition:
            border var(--motion-duration-short) var(--motion-ease-standard),
            box-shadow var(--motion-duration-short) var(--motion-ease-standard),
            background var(--motion-duration-short) var(--motion-ease-standard),
            transform var(--motion-duration-short) var(--motion-ease-decelerate);
    }
    textarea {
        resize: vertical;
        max-width: 100%;
        width: 100%;
    }
    input:not([type="checkbox"]):not([type="radio"]):focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: rgba(95, 227, 197, 0.6);
        box-shadow: 0 0 0 1px rgba(95, 227, 197, 0.35), 0 12px 30px rgba(8, 11, 22, 0.35);
        transform: translateY(-1px);
    }
    input::placeholder,
    textarea::placeholder {
        color: rgba(242, 242, 242, 0.5);
    }
    input[type="color"] {
        padding: 6px;
        min-height: 44px;
        width: 100%;
        background: rgba(12, 14, 20, 0.6);
    }
    input[type="color"]::-webkit-color-swatch {
        border: none;
        border-radius: 10px;
    }
    input[type="color"]::-moz-color-swatch {
        border: none;
        border-radius: 10px;
    }
    .status-pill {
        display: inline-flex;
        align-items: center;
        padding: 6px 14px;
        min-height: 28px;
        border-radius: 999px;
        font-size: 0.82rem;
        line-height: 1.2;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: rgba(242, 242, 242, 0.8);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .status-pill[data-status="Approved"] {
        border-color: rgba(95, 227, 197, 0.4);
        color: var(--accent-primary);
    }
    .status-pill[data-status="PendingReview"] {
        border-color: rgba(243, 192, 97, 0.4);
        color: var(--accent-warning);
    }
    .status-pill[data-status="Pending"],
    .status-pill[data-status="Processing"],
    .status-pill[data-status="Held"] {
        border-color: rgba(243, 192, 97, 0.4);
        color: var(--accent-warning);
    }
    .status-pill[data-status="RevisionsRequired"],
    .status-pill[data-status="Rejected"],
    .status-pill[data-status="Suspended"],
    .status-pill[data-status="Failed"],
    .status-pill[data-status="Disputed"] {
        border-color: rgba(255, 107, 107, 0.4);
        color: var(--accent-danger);
    }
    .status-pill[data-status="Open"] {
        border-color: rgba(95, 227, 197, 0.4);
        color: var(--accent-primary);
    }
    .status-pill[data-status="Completed"],
    .status-pill[data-status="Released"] {
        border-color: rgba(95, 227, 197, 0.4);
        color: var(--accent-primary);
    }
    .status-pill[data-status="In Review"] {
        border-color: rgba(243, 192, 97, 0.4);
        color: var(--accent-warning);
    }
    .status-pill[data-status="Closed"] {
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--text-subtle);
    }
    .status-pill[data-status="Refunded"],
    .status-pill[data-status="Cancelled"] {
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--text-subtle);
    }
    .status-description {
        margin: 12px 0;
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.98rem;
    }
    .status-feedback {
        margin: 0;
        color: var(--accent-danger);
        font-size: 0.9rem;
    }
    .share-group {
        margin-top: 18px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .share-hint {
        color: var(--text-subtle);
        font-size: 0.85rem;
    }
    .quick-steps {
        margin: 16px 0 0;
        padding-left: 20px;
        display: grid;
        gap: 6px;
        color: var(--text-muted);
        font-size: 0.92rem;
    }
    .quick-steps li {
        margin: 0;
    }
    .viewer-banner {
        margin: 12px 0 0;
        padding: 12px 16px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-muted);
        font-size: 0.9rem;
    }
    .viewer-banner.warning {
        background: rgba(243, 192, 97, 0.12);
        color: var(--accent-warning);
    }
    .viewer-banner.info {
        background: rgba(95, 227, 197, 0.12);
        color: var(--accent-primary);
    }
    .owner-note {
        margin: 12px 0 0;
        font-size: 0.9rem;
        color: var(--text-muted);
    }
    .owner-note.success {
        color: var(--accent-primary);
    }
    .builder-hero {
        margin-bottom: 48px;
    }
    .builder-grid {
        display: grid;
        grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
        gap: 36px;
        align-items: flex-start;
    }
    .builder-form {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }
    .builder-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 22px;
        padding: 28px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .template-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .template-toolbar .ghost-button {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    .markdown-preview-card {
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 16px;
        background: rgba(255, 255, 255, 0.04);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .markdown-preview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9rem;
        color: var(--text-muted);
    }
    .markdown-preview {
        min-height: 120px;
    }
    .draft-banner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 16px 18px;
        border-radius: 18px;
        border: 1px dashed rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
    }
    .draft-banner .draft-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .host-preview {
        display: none;
        flex-direction: column;
        gap: 6px;
        margin-top: 8px;
    }
    .host-preview img {
        max-width: 180px;
        max-height: 140px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        object-fit: cover;
    }
    .host-preview a {
        color: var(--accent-primary);
        font-size: 0.9rem;
    }
    .builder-card-header h2 {
        margin: 0 0 6px;
        font-size: 1.3rem;
    }
    .builder-card-header .section-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        height: 24px;
        margin-right: 6px;
        padding: 0 6px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(242, 242, 242, 0.88);
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        vertical-align: middle;
    }
    .builder-card-header p {
        margin: 0;
        color: var(--text-subtle);
        font-size: 1rem;
        line-height: 1.55;
    }
    .admissions-bulletin-card {
        gap: 16px;
    }
    .admissions-bulletin-controls {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .admissions-bulletin-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .admissions-bulletin-toolbar .ghost-button {
        padding: 6px 12px;
        font-size: 0.78rem;
    }
    .admissions-bulletin-preview {
        border: 1px solid var(--border-soft);
        border-radius: 14px;
        padding: 16px;
        background: rgba(255, 255, 255, 0.04);
        min-height: 120px;
    }
    .admissions-bulletin-meta {
        color: var(--text-subtle);
        font-size: 0.85rem;
    }
    .admissions-bulletin-card textarea {
        min-height: 160px;
    }
    .admissions-image-preview {
        margin-top: 10px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(8, 10, 18, 0.6);
    }
    .admissions-image-preview img {
        width: 100%;
        display: block;
        max-height: 220px;
        object-fit: cover;
    }
    .builder-details {
        border: 1px solid var(--border-soft);
        border-radius: 16px;
        padding: 14px 16px;
        background: rgba(255, 255, 255, 0.03);
    }
    .builder-details summary {
        cursor: pointer;
        font-weight: 600;
        color: var(--text-strong);
    }
    .builder-details summary::marker {
        color: var(--text-muted);
    }
    .builder-details > * + * {
        margin-top: 12px;
    }
    .form-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .form-field.checkbox-field {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    .form-field.checkbox-field input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
    }
    .form-field label {
        font-weight: 600;
        font-size: 1rem;
        color: rgba(242, 242, 242, 0.82);
    }
    .form-field label .field-required {
        color: var(--accent-danger);
        margin-left: 4px;
        font-size: 0.78rem;
        font-weight: 600;
    }
    .form-field input,
    .form-field textarea,
    .form-field select {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        padding: 12px 14px;
        color: #f2f2f2;
        font-family: inherit;
        font-size: 1rem;
    }
    .form-field small {
        color: rgba(242, 242, 242, 0.55);
        font-size: 0.9rem;
    }
    .form-hint {
        color: rgba(242, 242, 242, 0.55);
        font-size: 0.82rem;
    }
    .field-row {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .field-row input,
    .field-row select {
        flex: 1;
    }
    .guild-config {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }
    .guild-config-cards .card {
        gap: 14px;
    }
    .form-status {
        font-size: 0.9rem;
        color: rgba(242, 242, 242, 0.75);
    }
    .promotions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 24px;
        align-items: start;
    }
    .promotion-form {
        gap: 16px;
    }
    .promotion-form h3 {
        margin: 0;
        font-size: 1.2rem;
    }
    .activities-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 26px;
        align-items: start;
    }
    .activity-callout {
        gap: 18px;
    }
    .activity-form {
        gap: 18px;
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
        border: 1px solid rgba(255, 255, 255, 0.14);
    }
    .activity-form-header {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .activity-form-header h3 {
        margin: 6px 0 6px;
        font-size: 1.25rem;
    }
    .activity-eyebrow {
        display: inline-block;
        text-transform: uppercase;
        letter-spacing: 0.32em;
        font-size: 0.7rem;
        color: rgba(95, 227, 197, 0.9);
    }
    .activity-pill {
        align-self: flex-start;
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid rgba(95, 227, 197, 0.35);
        background: rgba(95, 227, 197, 0.12);
        font-size: 0.75rem;
        color: rgba(242, 242, 242, 0.9);
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }
    .activity-form-grid {
        display: grid;
        gap: 12px;
    }
    .activity-preview {
        display: flex;
        gap: 14px;
        align-items: center;
        padding: 12px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
    }
    .activity-thumbnail {
        width: 140px;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
        overflow: hidden;
        background: linear-gradient(130deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2));
        border: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .activity-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }
    .activity-thumbnail-placeholder {
        text-transform: uppercase;
        letter-spacing: 0.22em;
        font-size: 0.68rem;
        color: rgba(242, 242, 242, 0.62);
        text-align: center;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    .activity-preview-meta {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .activity-preview-meta strong {
        font-size: 1rem;
    }
    .activity-preview-meta span {
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.9rem;
    }
    @media (max-width: 720px) {
        .activity-preview {
            flex-direction: column;
            align-items: stretch;
        }
        .activity-thumbnail {
            width: 100%;
        }
    }
    .studiolink-shell {
        --stl-black: #0a0a0b;
        --stl-dark: #121319;
        --stl-red: #b01522;
        --stl-red-bright: #e11d48;
        --stl-white: #fdf7f2;
        --stl-line: rgba(255, 255, 255, 0.12);
        --stl-body: "Neue Haas Grotesk", "Manrope", "Segoe UI", sans-serif;
        --stl-display: "Publico", "Sora", "Manrope", serif;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        padding: 64px 0 84px;
        background:
            radial-gradient(900px 360px at 8% 0%, rgba(225, 29, 72, 0.2), transparent 65%),
            radial-gradient(800px 440px at 92% 0%, rgba(15, 76, 129, 0.22), transparent 68%),
            linear-gradient(160deg, #0a0a0b 0%, #141822 55%, #0a0a0b 100%);
        color: var(--stl-white);
        position: relative;
        overflow: hidden;
    }
    .studiolink-shell::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            repeating-linear-gradient(
                120deg,
                rgba(255, 255, 255, 0.04),
                rgba(255, 255, 255, 0.04) 1px,
                transparent 1px,
                transparent 120px
            ),
            linear-gradient(0deg, rgba(0, 0, 0, 0.4), transparent 40%);
        opacity: 0.6;
        pointer-events: none;
    }
    .studiolink-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 22px;
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 48px;
    }
    .studiolink-shell * {
        font-family: var(--stl-body);
    }
    .studiolink-shell h1,
    .studiolink-shell h2,
    .studiolink-shell h3 {
        font-family: var(--stl-display);
        letter-spacing: -0.02em;
    }
    .stl-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 36px;
        align-items: stretch;
    }
    .stl-hero-content p {
        color: rgba(253, 247, 242, 0.76);
        line-height: 1.7;
        max-width: 520px;
    }
    .stl-hero-content h1 {
        font-size: clamp(2.6rem, 3.8vw, 3.6rem);
        margin: 12px 0 12px;
    }
    .stl-hero-media {
        min-height: 320px;
        border-radius: 26px;
        background: linear-gradient(135deg, rgba(225, 29, 72, 0.32), rgba(10, 14, 20, 0.95));
        border: 1px solid rgba(255, 255, 255, 0.14);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }
    .stl-hero-media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: relative;
        z-index: 1;
    }
    .stl-hero-media span {
        position: relative;
        z-index: 1;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.1rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.9);
        background: rgba(10, 12, 18, 0.7);
    }
    .stl-hero-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(110deg, rgba(255, 255, 255, 0.12), transparent 55%),
            radial-gradient(60% 80% at 20% 20%, rgba(255, 255, 255, 0.2), transparent 60%);
        opacity: 0.6;
        z-index: 0;
    }
    .stl-eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.32em;
        font-size: 0.72rem;
        color: rgba(225, 29, 72, 0.9);
    }
    .stl-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin: 18px 0 8px;
    }
    .stl-hero-metrics {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
        margin-top: 18px;
    }
    .stl-metric {
        padding: 12px 14px;
        border-radius: 16px;
        border: 1px solid var(--stl-line);
        background: rgba(10, 12, 18, 0.6);
    }
    .stl-metric span {
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.22em;
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 4px;
    }
    .stl-metric strong {
        font-size: 1.05rem;
    }
    .stl-section {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .stl-split {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        gap: 32px;
        align-items: start;
    }
    .stl-lead {
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.78);
        line-height: 1.7;
    }
    .stl-module-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }
    .stl-module {
        padding: 16px;
        border-radius: 18px;
        border: 1px solid var(--stl-line);
        background: rgba(14, 16, 22, 0.75);
    }
    .stl-detail-card {
        padding: 22px;
        border-radius: 22px;
        border: 1px solid var(--stl-line);
        background: rgba(8, 10, 14, 0.82);
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
    }
    .stl-detail-list {
        display: grid;
        gap: 12px;
        margin: 18px 0 0;
    }
    .stl-detail-list div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: 8px;
    }
    .stl-detail-list div:last-child {
        border-bottom: none;
    }
    .stl-detail-list dt {
        text-transform: uppercase;
        letter-spacing: 0.22em;
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.55);
    }
    .stl-detail-list dd {
        margin: 0;
        font-size: 0.95rem;
    }
    .stl-detail-actions {
        margin-top: 18px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .stl-role-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }
    .stl-role-card {
        padding: 18px;
        border-radius: 18px;
        border: 1px solid rgba(225, 29, 72, 0.25);
        background: rgba(12, 14, 20, 0.7);
    }
    .stl-chip-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .stl-chip {
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid rgba(225, 29, 72, 0.3);
        background: rgba(225, 29, 72, 0.12);
        font-size: 0.85rem;
    }
    .stl-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 24px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: linear-gradient(120deg, rgba(225, 29, 72, 0.2), rgba(8, 10, 14, 0.8));
    }
    .stl-cta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .stl-subtle {
        color: rgba(255, 255, 255, 0.72);
    }
    .studiolink-shell .button {
        border-radius: 999px;
        background: var(--stl-red);
        border: 1px solid rgba(225, 29, 72, 0.6);
        color: #fff;
    }
    .studiolink-shell .button-ghost {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: var(--stl-white);
    }
    .studiolink-shell .button:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(225, 29, 72, 0.25);
    }
    .smarty-shell {
        --smarty-blue: #93deff;
        --smarty-white: #f7f7f7;
        --smarty-ink: #323643;
        --smarty-text: #93deff;
        --smarty-text-soft: rgba(147, 222, 255, 0.72);
        --smarty-border: rgba(247, 247, 247, 0.18);
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        padding: 70px 0 84px;
        background:
            radial-gradient(900px 420px at 85% -10%, rgba(147, 222, 255, 0.18), transparent 62%),
            linear-gradient(160deg, #323643 0%, rgba(50, 54, 67, 0.92) 55%, #323643 100%);
        color: var(--smarty-text);
        position: relative;
        overflow: hidden;
    }
    .smarty-shell::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            repeating-linear-gradient(
                90deg,
                rgba(247, 247, 247, 0.08),
                rgba(247, 247, 247, 0.08) 1px,
                transparent 1px,
                transparent 120px
            ),
            repeating-linear-gradient(
                0deg,
                rgba(147, 222, 255, 0.08),
                rgba(147, 222, 255, 0.08) 1px,
                transparent 1px,
                transparent 120px
            );
        opacity: 0.4;
        pointer-events: none;
    }
    .smarty-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 46px;
    }
    .smarty-shell * {
        font-family: var(--font-sans);
    }
    .smarty-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        gap: 28px;
        align-items: start;
        padding: 26px;
        border-radius: 28px;
        border: 1px solid var(--smarty-border);
        background: rgba(50, 54, 67, 0.86);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    }
    .smarty-hero-brand {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
    }
    .smarty-logo {
        width: 120px;
        height: 120px;
        border-radius: 24px;
        border: 2px solid rgba(147, 222, 255, 0.4);
        background: rgba(50, 54, 67, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .smarty-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .smarty-logo span {
        font-size: 2rem;
        font-weight: 700;
        color: var(--smarty-text);
    }
    .smarty-eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.28em;
        font-size: 0.7rem;
        color: var(--smarty-text-soft);
    }
    .smarty-hero h1 {
        margin: 10px 0 12px;
        font-size: clamp(2.4rem, 3.6vw, 3.2rem);
        color: var(--smarty-text);
    }
    .smarty-hero p {
        color: var(--smarty-text-soft);
        line-height: 1.7;
    }
    .smarty-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 16px;
    }
    .smarty-hero-stats {
        display: grid;
        gap: 12px;
    }
    .smarty-stat {
        padding: 16px;
        border-radius: 18px;
        border: 1px solid var(--smarty-border);
        background: rgba(50, 54, 67, 0.88);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
    }
    .smarty-stat span {
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: 0.68rem;
        color: var(--smarty-text-soft);
    }
    .smarty-section {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .smarty-board {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }
    .smarty-panel {
        padding: 18px;
        border-radius: 18px;
        border: 2px solid rgba(147, 222, 255, 0.25);
        background: rgba(50, 54, 67, 0.78);
    }
    .smarty-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
        gap: 24px;
        align-items: stretch;
    }
    .smarty-stack {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .smarty-detail {
        display: grid;
        gap: 10px;
    }
    .smarty-detail div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(147, 222, 255, 0.22);
    }
    .smarty-detail span {
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: 0.7rem;
        color: var(--smarty-text-soft);
    }
    .smarty-cta {
        padding: 22px;
        border-radius: 22px;
        border: 2px solid rgba(147, 222, 255, 0.35);
        background: linear-gradient(140deg, rgba(50, 54, 67, 0.94), rgba(50, 54, 67, 0.7));
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .smarty-chip-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .smarty-chip {
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid rgba(147, 222, 255, 0.35);
        background: rgba(147, 222, 255, 0.12);
        font-size: 0.85rem;
        color: var(--smarty-text);
    }
    .smarty-subtle {
        color: var(--smarty-text-soft);
    }
    .smarty-shell .button {
        background: transparent;
        color: var(--smarty-text);
        border: 2px solid var(--smarty-text);
        border-radius: 999px;
    }
    .smarty-shell .button-ghost {
        background: transparent;
        color: var(--smarty-text);
        border: 1px solid rgba(247, 247, 247, 0.5);
    }
    .smarty-shell .button:hover {
        background: rgba(147, 222, 255, 0.12);
        box-shadow: 0 12px 26px rgba(147, 222, 255, 0.18);
        transform: translateY(-1px);
    }
    .vuuk-shell {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        padding: 70px 0 90px;
        background: #000;
        color: #fff;
        position: relative;
    }
    .vuuk-inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 24px;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .vuuk-shell * {
        font-family: var(--font-terminal);
    }
    .vuuk-hero {
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        justify-content: space-between;
        align-items: flex-start;
    }
    .vuuk-title {
        max-width: 520px;
    }
    .vuuk-eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.35em;
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.6);
    }
    .vuuk-title h1 {
        margin: 12px 0 12px;
        font-size: clamp(2.6rem, 4vw, 3.4rem);
        letter-spacing: 0.04em;
    }
    .vuuk-title p {
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.7;
    }
    .vuuk-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 18px;
    }
    .vuuk-logo {
        width: 160px;
        height: 160px;
        border-radius: 12px;
        border: 2px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .vuuk-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .vuuk-logo span {
        font-size: 2rem;
    }
    .vuuk-line {
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
    }
    .vuuk-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }
    .vuuk-stat {
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .vuuk-stat span {
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: 0.68rem;
        color: rgba(255, 255, 255, 0.6);
    }
    .vuuk-section {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .vuuk-principles {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }
    .vuuk-principles div {
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 16px;
    }
    .vuuk-roster {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .vuuk-chip {
        padding: 6px 12px;
        border: 1px solid #fff;
        font-size: 0.85rem;
    }
    .vuuk-cta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px;
        border: 1px solid #fff;
    }
    .vuuk-subtle {
        color: rgba(255, 255, 255, 0.65);
    }
    .vuuk-shell .button {
        border-radius: 0;
        background: #fff;
        color: #000;
        border: 1px solid #fff;
    }
    .vuuk-shell .button-ghost {
        background: transparent;
        color: #fff;
        border: 1px solid #fff;
    }
    .vuuk-shell .button:hover {
        transform: translateY(-1px);
    }
    @media (max-width: 900px) {
        .stl-hero,
        .stl-split {
            grid-template-columns: 1fr;
        }
        .stl-cta {
            flex-direction: column;
            align-items: flex-start;
        }
        .smarty-hero,
        .smarty-split {
            grid-template-columns: 1fr;
        }
        .smarty-hero-brand {
            grid-template-columns: 1fr;
        }
        .vuuk-hero {
            flex-direction: column;
            align-items: flex-start;
        }
        .vuuk-logo {
            width: 140px;
            height: 140px;
        }
    }
    .tag-editor {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px dashed rgba(255, 255, 255, 0.12);
    }
    .tag-chip-container {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .tag-chip,
    .preview-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        font-size: 0.85rem;
    }
    .preview-chip.muted {
        background: rgba(255, 255, 255, 0.04);
        color: rgba(242, 242, 242, 0.7);
    }
    .tag-chip-remove {
        background: transparent;
        border: none;
        color: rgba(242, 242, 242, 0.6);
        cursor: pointer;
        font-size: 0.85rem;
    }
    .empty-chip {
        font-size: 0.85rem;
        color: rgba(242, 242, 242, 0.55);
    }
    .family-panel {
        gap: 18px;
    }
    .family-summary {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .family-summary-row {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        flex-wrap: wrap;
    }
    .family-summary-label {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: rgba(242, 242, 242, 0.6);
        min-width: 90px;
    }
    .family-chip-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .family-chip {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(95, 227, 197, 0.08);
        border: 1px solid rgba(95, 227, 197, 0.2);
        color: rgba(242, 242, 242, 0.9);
        font-size: 0.85rem;
    }
    .family-chip.neutral {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
    }
    .family-chip-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        line-height: 1.1;
    }
    .family-chip-name {
        font-weight: 600;
    }
    .family-chip-meta {
        font-size: 0.72rem;
        color: rgba(242, 242, 242, 0.6);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .family-avatar {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .family-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    .family-tree-image-wrap {
        width: 100%;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: radial-gradient(circle at top, rgba(95, 227, 197, 0.08), rgba(12, 16, 32, 0.6));
        padding: 12px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }
    .family-tree-image {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 14px;
    }
    .media-builder,
    .link-builder {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .media-inputs,
    .link-inputs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }
    .media-upload {
        border: 1px dashed rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        padding: 16px;
        background: rgba(255, 255, 255, 0.03);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .media-upload-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .media-upload-row small {
        color: rgba(242, 242, 242, 0.6);
        line-height: 1.4;
    }
    .media-upload-status {
        font-size: 0.85rem;
        margin: 0;
        color: rgba(242, 242, 242, 0.7);
    }
    .select-panel {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 6px;
        z-index: var(--layer-popover);
    }
    .select-panel[data-open="true"] {
        z-index: calc(var(--layer-popover) + 1);
    }
    .select-panel[data-disabled="true"] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .select-panel-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(13, 14, 20, 0.7);
        color: rgba(242, 242, 242, 0.92);
        font-size: 0.95rem;
        font-weight: 500;
        transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .select-panel-trigger:hover {
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 16px rgba(8, 12, 18, 0.4);
    }
    .select-panel[data-open="true"] .select-panel-trigger {
        border-color: rgba(255, 255, 255, 0.38);
        background: rgba(14, 16, 24, 0.92);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 14px 28px rgba(8, 10, 20, 0.55);
    }
    .select-panel-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
    }
    .select-panel-value.select-panel-placeholder {
        color: rgba(242, 242, 242, 0.5);
    }
    .select-panel-caret {
        font-size: 0.8rem;
        color: rgba(242, 242, 242, 0.6);
        transition: transform 0.18s ease;
    }
    .select-panel[data-open="true"] .select-panel-caret {
        transform: rotate(180deg);
    }
    .select-panel-options {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        background: rgba(10, 12, 20, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        padding: 10px;
        box-shadow: 0 20px 44px rgba(6, 10, 22, 0.55);
        display: none;
        flex-direction: column;
        gap: 4px;
        max-height: 260px;
        overflow-y: auto;
        z-index: calc(var(--layer-popover) + 2);
        backdrop-filter: blur(10px);
    }
    .select-panel-trigger:focus-visible {
        outline: 2px solid rgba(95, 227, 197, 0.55);
        outline-offset: 2px;
    }
    .select-panel[data-open="true"] .select-panel-options {
        display: flex;
        animation: select-panel-fade-in 0.18s ease-out;
    }
    .select-panel-option {
        border: none;
        border-radius: 12px;
        background: transparent;
        color: rgba(242, 242, 242, 0.86);
        font-size: 0.92rem;
        padding: 10px 12px;
        text-align: left;
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }
    .select-panel-option:hover,
    .select-panel-option.is-active {
        background: rgba(255, 255, 255, 0.12);
        color: rgba(242, 242, 242, 0.95);
    }
    .select-panel-option[aria-selected="true"]::after {
        content: "✔";
        font-size: 0.75rem;
        color: rgba(242, 242, 242, 0.9);
    }
    .select-panel-option:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }
    @keyframes select-panel-fade-in {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .media-list,
    .link-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .media-card {
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.02);
        display: flex;
        flex-direction: column;
        box-shadow: 0 16px 34px rgba(6, 10, 22, 0.26);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .media-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 40px rgba(6, 10, 22, 0.34);
    }
    .media-card-model {
        padding: 0;
    }
    .media-card-model .model-three-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10;
        background: radial-gradient(circle at 20% -10%, rgba(255,255,255,0.14) 0%, rgba(13,15,23,0.9) 55%), radial-gradient(circle at 80% 120%, rgba(255,255,255,0.08) 0%, rgba(13,15,23,0.92) 50%), rgba(13, 15, 23, 0.94);
        overflow: hidden;
    }
    .media-card-model figcaption {
        padding: 16px 20px 0;
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.85rem;
    }
    .media-card-video .media-video-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        background: radial-gradient(circle at 18% 12%, rgba(255,255,255,0.12) 0%, rgba(13,15,23,0.88) 60%), rgba(13, 15, 23, 0.92);
        overflow: hidden;
    }
    .media-card-video video,
    .media-card-video iframe {
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
    }
    .media-card-video figcaption {
        padding: 16px 20px 20px;
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.85rem;
    }
    .model-control-row {
        display: flex;
        justify-content: flex-end;
        padding: 16px 20px 20px;
    }
    .model-three-toolbar {
        pointer-events: none;
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
    }
    .model-three-toolbar .model-three-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        pointer-events: all;
    }
    .model-three-button {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: #f2f2f2;
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 0.82rem;
        font-weight: 500;
        transition: background 0.2s ease, border 0.2s ease, transform 0.2s ease;
        cursor: pointer;
    }
    .model-three-button:hover,
    .model-three-button:focus-visible {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.28);
        transform: translateY(-1px);
    }
    .model-three-button:active {
        transform: translateY(0);
    }
    .model-three-button[aria-pressed="false"] {
        background: rgba(255, 255, 255, 0.04);
        color: rgba(242, 242, 242, 0.72);
    }
    .model-three-frame.is-light .model-three-button {
        background: rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.12);
        color: #0d0f17;
    }
    .model-three-frame.is-light .model-three-button[aria-pressed="false"] {
        background: rgba(0, 0, 0, 0.04);
        color: rgba(13, 15, 23, 0.8);
    }
    .model-three-hint {
        pointer-events: none;
        margin-left: auto;
        font-size: 0.78rem;
        color: rgba(242, 242, 242, 0.6);
        text-align: right;
    }
    .model-three-frame.is-light .model-three-hint {
        color: rgba(13, 15, 23, 0.7);
    }
    .model-three-frame.has-fallback canvas {
        opacity: 0;
        pointer-events: none;
    }
    .model-three-frame.has-fallback .model-three-toolbar,
    .model-three-frame.has-fallback .model-three-status {
        opacity: 0;
        pointer-events: none;
    }
    .model-three-frame.has-fallback .model-three-fallback {
        display: flex;
    }
    .model-three-fallback {
        position: absolute;
        inset: 0;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        text-align: center;
        color: rgba(242, 242, 242, 0.8);
        padding: 20px;
        background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.12), rgba(13,15,23,0.92));
    }
    .model-three-fallback-media {
        width: min(240px, 80%);
        aspect-ratio: 4 / 3;
        border-radius: 18px;
        border: 1px dashed rgba(255, 255, 255, 0.2);
        background:
            radial-gradient(circle at 20% 20%, rgba(127, 184, 255, 0.45), rgba(13, 15, 23, 0.92)),
            radial-gradient(circle at 80% 80%, rgba(255, 197, 126, 0.2), rgba(13, 15, 23, 0.9));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 30px rgba(3, 6, 14, 0.45);
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
    }
    .model-three-fallback-media::after {
        content: "3D";
        position: absolute;
        inset: auto 14px 12px auto;
        font-size: 0.72rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(12, 14, 20, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .model-three-fallback-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: 320px;
    }
    .model-three-fallback-body strong {
        font-size: 1rem;
        letter-spacing: 0.02em;
    }
    .model-three-fallback a {
        color: #7fb8ff;
        text-decoration: underline;
    }
    @media (max-width: 640px) {
        .model-three-toolbar {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }
        .model-three-toolbar .model-three-buttons {
            justify-content: flex-start;
        }
        .model-three-hint {
            text-align: left;
        }
    }
    .model-viewer-overlay .model-viewer-modal {
        max-width: 880px;
        width: calc(100% - 40px);
        padding: 0;
        background: rgba(18, 18, 18, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 24px;
        overflow: hidden;
    }
    .model-viewer-overlay .model-backdrop,
    .model-viewer-overlay .modal-backdrop {
        backdrop-filter: blur(6px);
    }
    .model-viewer-modal .modal-close {
        position: absolute;
        top: 14px;
        right: 18px;
        z-index: 2;
        background: rgba(0,0,0,0.45);
        border-radius: 999px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,0.2);
    }
    .model-viewer-modal .model-three-frame {
        width: 100%;
        height: min(70vh, 640px);
        aspect-ratio: auto;
        border-radius: 0;
    }
    .model-three-frame canvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }
    .model-three-status {
        position: absolute;
        left: 16px;
        bottom: calc(16px + 52px);
        padding: 10px 16px;
        border-radius: 12px;
        background: rgba(10, 12, 20, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 0.82rem;
        color: rgba(242, 242, 242, 0.86);
        display: none;
        align-items: center;
        gap: 8px;
        pointer-events: none;
    }
    .model-three-status[data-tone="error"] {
        border-color: rgba(255, 107, 107, 0.4);
        color: var(--accent-danger);
    }
    .model-three-status[data-tone="info"] {
        border-color: rgba(226, 182, 122, 0.4);
        color: var(--accent-secondary);
    }
    .model-modal-caption {
        padding: 18px 24px 24px;
        margin: 0;
        color: rgba(242, 242, 242, 0.78);
        font-size: 0.92rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(12, 14, 20, 0.85);
    }
    .media-thumb {
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 180px;
    }
    .media-thumb img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
    }
    .media-thumb video {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
        background: rgba(11, 14, 22, 0.9);
    }
    .media-thumb audio {
        width: calc(100% - 28px);
        margin: 14px;
        display: block;
    }
    .case-status {
        display: inline-flex;
        align-items: center;
        padding: 6px 16px;
        border-radius: 999px;
        font-size: 0.82rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .case-status-success {
        border-color: rgba(95, 227, 197, 0.4);
        color: var(--accent-primary);
    }
    .case-status-warning {
        border-color: rgba(243, 192, 97, 0.4);
        color: var(--accent-warning);
    }
    .case-status-danger {
        border-color: rgba(255, 107, 107, 0.4);
        color: var(--accent-danger);
    }
    .case-status-info {
        border-color: rgba(226, 182, 122, 0.4);
        color: var(--accent-secondary);
    }
    .case-summary-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 18px;
    }
    .case-summary-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .case-summary-meta {
        color: rgba(242, 242, 242, 0.65);
        font-size: 0.85rem;
    }
    .case-summary-pair {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }
    .case-summary-pair div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 0.9rem;
    }
    .case-callout {
        margin: 0 0 16px;
        padding: 14px 16px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        color: rgba(242, 242, 242, 0.74);
        font-size: 0.9rem;
    }
    .case-message-feed {
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-height: 480px;
        overflow-y: auto;
        padding-right: 4px;
    }
    .case-message {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 14px 16px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }
    .case-message-self {
        border-color: rgba(22, 245, 155, 0.4);
        background: rgba(22, 245, 155, 0.08);
    }
    .case-message-avatar {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        overflow: hidden;
        flex: 0 0 42px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.06);
    }
    .case-message-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .case-message-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .case-message-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.85rem;
        color: rgba(242, 242, 242, 0.6);
        gap: 12px;
    }
    .case-message-meta-main {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        font-weight: 600;
        color: rgba(242, 242, 242, 0.84);
    }
    .case-message-meta-main code {
        font-size: 0.8rem;
        opacity: 0.8;
    }
    .case-message-role-badge {
        display: inline-flex;
        align-items: center;
        height: 20px;
        padding: 0 8px;
        border-radius: 999px;
        border: 1px solid rgba(96, 237, 205, 0.35);
        background: rgba(42, 133, 115, 0.2);
        color: #7af5d5;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .case-message p {
        margin: 0;
        white-space: pre-wrap;
        color: rgba(242, 242, 242, 0.86);
        line-height: 1.55;
        font-size: 0.98rem;
    }
    .case-message-form {
        margin-top: 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .case-message-form textarea {
        width: 100%;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.05);
        color: #f2f2f2;
        padding: 12px 14px;
        font-family: inherit;
        resize: vertical;
    }
    .case-form-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    .case-form-note {
        color: rgba(242, 242, 242, 0.65);
        font-size: 0.85rem;
    }
    .case-rating-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 14px;
    }
    .case-rating-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .case-rating-head {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .case-rating-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        overflow: hidden;
        flex: 0 0 40px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.08);
    }
    .case-rating-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .case-rating-meta {
        color: rgba(242, 242, 242, 0.68);
        font-size: 0.84rem;
        margin-top: 2px;
    }
    .case-rating-form {
        display: flex;
        align-items: flex-end;
        gap: 10px;
        flex-wrap: wrap;
    }
    .case-rating-form label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 120px;
    }
    .case-rating-target {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
    }
    .case-rating-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: rgba(242, 242, 242, 0.86);
    }
    .case-moon-options {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
    }
    .case-moon-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 10px 8px;
        border-radius: 12px;
        min-height: 72px;
    }
    .case-moon-option.is-selected {
        border-color: rgba(95, 227, 197, 0.58);
        background: rgba(95, 227, 197, 0.14);
        color: #c9fff0;
        box-shadow: 0 0 0 1px rgba(95, 227, 197, 0.24) inset;
    }
    .case-moon-icon {
        font-size: 1.2rem;
        line-height: 1;
    }
    .case-moon-label {
        font-size: 0.72rem;
        line-height: 1.25;
        text-align: center;
        color: rgba(242, 242, 242, 0.78);
    }
    .case-rating-modal-card {
        width: min(640px, 100%);
    }
    @media (max-width: 760px) {
        .case-moon-options {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    @media (max-width: 520px) {
        .case-moon-options {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    .case-attachments {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .case-attachment {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 16px;
    }
    .case-attachment div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        color: rgba(242, 242, 242, 0.75);
        font-size: 0.9rem;
    }
    .case-validation-entry {
        margin-top: 16px;
        border-radius: 16px;
        border: 1px solid rgba(96, 237, 205, 0.28);
        background: rgba(28, 190, 170, 0.11);
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .case-validation-entry div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        color: rgba(242, 242, 242, 0.86);
    }
    .case-validation-entry span {
        color: rgba(242, 242, 242, 0.74);
        font-size: 0.88rem;
    }
    .case-modal {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: grid;
        place-items: center;
        padding: 20px;
    }
    .case-modal[hidden] {
        display: none;
    }
    .case-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(4, 7, 12, 0.72);
        backdrop-filter: blur(3px);
    }
    .case-modal-card {
        position: relative;
        width: min(680px, 100%);
        max-height: min(88vh, 760px);
        overflow-y: auto;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: linear-gradient(
                145deg,
                rgba(21, 28, 40, 0.96),
                rgba(7, 12, 21, 0.96)
            ),
            var(--card-bg, rgba(8, 11, 17, 0.95));
        padding: 18px;
        box-shadow: 0 26px 50px rgba(0, 0, 0, 0.52);
    }
    .case-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
    }
    .case-modal-header h3 {
        margin: 0;
    }
    .case-modal-note {
        margin: 0 0 12px;
        color: rgba(242, 242, 242, 0.72);
        font-size: 0.92rem;
        line-height: 1.5;
    }
    body.modal-open {
        overflow: hidden;
    }
    .middleman-card .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .middleman-card .card-header h3 {
        margin: 0;
    }
    .middleman-card-meta {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
        margin: 0;
    }
    .middleman-card-meta div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 0.88rem;
        color: rgba(242, 242, 242, 0.75);
    }
    .middleman-card-meta dt {
        font-weight: 600;
        color: rgba(242, 242, 242, 0.7);
    }
    .middleman-card-meta dd {
        margin: 0;
    }
    .middleman-card .card-actions {
        justify-content: flex-end;
        margin-top: 4px;
    }
    .media-meta-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        margin-right: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(242, 242, 242, 0.75);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .scamlog-grid {
        margin-top: 18px;
    }
    .scamlog-preview {
        margin: 0;
        color: rgba(242, 242, 242, 0.78);
        font-size: 0.95rem;
        line-height: 1.6;
    }
    .scamlog-meta {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(242, 242, 242, 0.55);
    }
    .media-type {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 10px;
        margin: 16px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .media-body {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .media-body strong {
        font-size: 1rem;
    }
    .media-meta {
        color: rgba(242, 242, 242, 0.55);
        font-size: 0.85rem;
        word-break: break-all;
    }
    .media-controls {
        display: flex;
        gap: 8px;
        padding: 12px 16px 16px;
        flex-wrap: wrap;
    }
    .circle-button {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.04);
        color: #f2f2f2;
    }
    .circle-button.handle,
    .circle-button.pin {
        width: auto;
        padding: 0 10px;
        font-size: 0.75rem;
    }
    .circle-button.handle {
        cursor: grab;
    }
    .circle-button.handle:active {
        cursor: grabbing;
    }
    .circle-button.pin.is-active {
        border-color: rgba(95, 227, 197, 0.45);
        color: var(--accent-primary);
    }
    .circle-button.danger {
        border-color: rgba(255, 107, 107, 0.4);
        color: var(--accent-danger);
    }
    .media-card.is-dragging {
        opacity: 0.6;
        border-style: dashed;
    }
    .media-card.is-drop-target {
        border-color: rgba(95, 227, 197, 0.6);
        box-shadow: 0 0 0 2px rgba(95, 227, 197, 0.2);
    }
    .media-featured-pill {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(95, 227, 197, 0.2);
        color: var(--accent-primary);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .link-card {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.02);
    }
    .host-input-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .host-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        min-width: 72px;
    }
    .host-badge[data-tone="ok"] {
        border-color: rgba(95, 227, 197, 0.5);
        background: rgba(95, 227, 197, 0.15);
        color: var(--accent-primary);
    }
    .host-badge[data-tone="error"] {
        border-color: rgba(255, 107, 107, 0.5);
        background: rgba(255, 107, 107, 0.15);
        color: var(--accent-danger);
    }
    .host-badge[data-tone="warn"] {
        border-color: rgba(245, 210, 22, 0.5);
        background: rgba(245, 210, 22, 0.12);
        color: #f5d216;
    }
    .importer-panel .status-pill {
        margin-left: 8px;
        vertical-align: middle;
    }
    .builder-hero-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin: 14px 0 0;
    }
    .importer-panel-priority {
        border-color: rgba(95, 227, 197, 0.36);
        background:
            linear-gradient(145deg, rgba(95, 227, 197, 0.14), rgba(255, 255, 255, 0.03)),
            rgba(12, 14, 20, 0.84);
    }
    .importer-priority-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }
    .importer-priority-notes {
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(6, 10, 18, 0.72);
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .importer-priority-notes strong {
        font-size: 0.92rem;
        letter-spacing: 0.02em;
    }
    .importer-priority-notes ul {
        margin: 0;
        padding-left: 18px;
        display: grid;
        gap: 7px;
        color: rgba(242, 242, 242, 0.72);
        font-size: 0.86rem;
        line-height: 1.4;
    }
    @media (max-width: 980px) {
        .importer-priority-grid {
            grid-template-columns: 1fr;
        }
    }
    .importer-preview {
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        padding: 14px;
        background: rgba(255, 255, 255, 0.03);
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .importer-preview a {
        color: var(--accent-primary);
        font-size: 0.92rem;
        font-weight: 600;
        word-break: break-all;
    }
    .importer-preview-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }
    .link-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .link-info a {
        color: rgba(242, 242, 242, 0.75);
        font-size: 0.9rem;
        word-break: break-all;
    }
    .toggle-field {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.9rem;
        color: rgba(242, 242, 242, 0.7);
    }
    .toggle-field input {
        width: 18px;
        height: 18px;
    }
    .builder-preview {
        position: sticky;
        top: 96px;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .preview-header {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .preview-hero h2 {
        margin: 0 0 8px;
        font-size: 1.7rem;
    }
    .preview-hero p {
        margin: 0 0 12px;
        color: rgba(242, 242, 242, 0.7);
        font-size: 1rem;
        line-height: 1.55;
    }
    .preview-meta {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        color: rgba(242, 242, 242, 0.65);
        font-size: 0.9rem;
    }
    .preview-hero-media {
        margin-top: 14px;
        display: flex;
    }
    .preview-featured-card {
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 18px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.02);
        width: 100%;
    }
    .preview-featured-card img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        display: block;
    }
    .preview-media-frame {
        width: 100%;
        min-height: 150px;
        background: rgba(8, 10, 18, 0.72);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
    .preview-media-frame video {
        width: 100%;
        height: 160px;
        object-fit: cover;
    }
    .preview-media-frame.audio {
        min-height: 92px;
        padding: 16px;
    }
    .preview-media-frame audio {
        width: 100%;
    }
    .preview-media-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 80px;
        min-height: 36px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: rgba(242, 242, 242, 0.88);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 0.72rem;
    }
    .preview-featured-tag {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(95, 227, 197, 0.2);
        color: var(--accent-primary);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .preview-featured-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 18px 16px 8px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .preview-featured-card p {
        margin: 0;
        padding: 0 16px 14px;
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.92rem;
    }
    .preview-featured-caption {
        margin: 0 16px 16px;
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.92rem;
    }
    .preview-body {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .preview-markdown.markdown-body p,
    .preview-markdown.markdown-body ul {
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.97rem;
    }
    .preview-links {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .preview-links a {
        color: var(--accent-primary);
        font-weight: 600;
    }
    .preview-chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .preview-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 16px;
    }
    .preview-gallery-card {
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.02);
        display: flex;
        flex-direction: column;
        gap: 0;
        position: relative;
    }
    .preview-gallery-card img {
        width: 100%;
        height: 140px;
        object-fit: cover;
        display: block;
    }
    .preview-gallery-card p {
        margin: 0;
        padding: 12px;
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.9rem;
    }
    .preview-gallery-badge {
        margin: 12px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        font-size: 0.75rem;
        text-transform: uppercase;
    }
    .preview-gallery-caption {
        margin: 0 12px 12px;
        color: rgba(242, 242, 242, 0.65);
        font-size: 0.9rem;
    }
    .builder-empty {
        padding: 16px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
        color: rgba(242, 242, 242, 0.65);
        font-size: 0.9rem;
    }
    .portfolio-search {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 32px;
    }
    .portfolio-search input[type="search"] {
        width: 100%;
        padding: 12px 16px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: #f2f2f2;
        font-size: 1rem;
    }
    .focus-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .chip-scroll {
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .chip-scroll::-webkit-scrollbar {
        height: 6px;
    }
    .filter-chip {
        padding: 6px 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(242, 242, 242, 0.75);
        font-size: 0.85rem;
    }
    .filter-chip.active {
        background: rgba(95, 227, 197, 0.16);
        border-color: rgba(95, 227, 197, 0.4);
        color: var(--accent-primary);
    }
    .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 28px;
    }
    .marketplace-hero {
        grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
    }
    .marketplace-hero-actions {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    .marketplace-shell {
        display: grid;
        grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
        gap: 44px;
        align-items: start;
        margin-top: 40px;
    }
    .marketplace-panel {
        padding: 32px;
    }
    .marketplace-panel:hover {
        transform: none;
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: var(--shadow-soft);
    }
    .marketplace-panel-filters {
        position: sticky;
        top: 110px;
    }
    .marketplace-panel-spotlight .section-body {
        padding-top: 0;
    }
    .marketplace-panel-filters .section-header {
        margin-bottom: 12px;
    }
    .marketplace-controls {
        gap: 36px;
    }
    .marketplace-filter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 28px;
    }
    .marketplace-filter-grid .apply-button {
        grid-column: 1 / -1;
        justify-self: flex-start;
        max-width: 220px;
    }
    .marketplace-panel-filters .marketplace-filter-grid {
        grid-template-columns: 1fr;
    }
    .marketplace-filter {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 0.9rem;
        color: var(--text-muted);
    }
    .marketplace-filter .filter-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--text-strong);
    }
    .marketplace-filter .filter-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        color: var(--text-muted);
    }
    .marketplace-filter .filter-icon svg {
        width: 16px;
        height: 16px;
    }
    .marketplace-filter select,
    .marketplace-filter input[type="search"] {
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-strong);
        font-family: inherit;
    }
    .marketplace-filter-search {
        grid-column: 1 / -1;
    }
    .marketplace-panel-filters .marketplace-filter-search {
        grid-column: auto;
    }
    .marketplace-filter-actions {
        margin-top: 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    .marketplace-filter-status {
        color: var(--text-subtle);
        font-size: 0.85rem;
    }
    .marketplace-results-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 24px;
        color: var(--text-subtle);
        font-size: 0.9rem;
    }
    .marketplace-view-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--text-subtle);
        font-size: 0.8rem;
        flex-wrap: wrap;
    }
    .marketplace-view-toggle .ghost-button {
        padding: 6px 12px;
        font-size: 0.78rem;
        line-height: 1;
        border-radius: 999px;
    }
    .marketplace-view-toggle .ghost-button.is-active {
        background: rgba(95, 227, 197, 0.18);
        border-color: rgba(95, 227, 197, 0.42);
        color: var(--text-strong);
    }
    .marketplace-view-toggle[data-premium="false"] .ghost-button {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }
    .marketplace-view-lock {
        font-size: 0.7rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--accent-secondary);
    }
    .marketplace-spotlight {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .marketplace-spotlight-meta {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: center;
    }
    .marketplace-spotlight-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .marketplace-apply-fallback {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
    }
    .marketplace-apply-fallback label {
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: var(--text-muted);
        font-size: 0.9rem;
    }
    .marketplace-grid {
        grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
        gap: 32px;
        align-items: start;
        align-content: start;
        grid-auto-rows: auto;
    }
    .marketplace-grid[data-view="list"] {
        grid-template-columns: minmax(0, 1fr);
    }
    .marketplace-grid[data-view="list"] .marketplace-card {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        gap: 16px;
    }
    .marketplace-grid[data-view="list"] .marketplace-card-top,
    .marketplace-grid[data-view="list"] .marketplace-card-body {
        grid-column: 1;
    }
    .marketplace-grid[data-view="list"] .marketplace-card-footer {
        grid-column: 2;
        align-self: stretch;
    }
    .marketplace-grid[data-view="list"] .marketplace-card-actions {
        grid-template-columns: minmax(0, 1fr);
    }
    .marketplace-grid[data-view="gallery"] {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    }
    .marketplace-grid[data-view="gallery"] .marketplace-card-summary {
        -webkit-line-clamp: 3;
    }
    .marketplace-grid[data-view="gallery"] .marketplace-card-detail,
    .marketplace-grid[data-view="gallery"] .marketplace-card-footer-meta {
        display: none;
    }
    .marketplace-grid.loading {
        position: relative;
    }
    .marketplace-grid.loading::after {
        content: "Loading listings…";
        position: absolute;
        inset: 0;
        background: rgba(13, 13, 13, 0.8);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        font-size: 0.95rem;
    }
    .marketplace-builder {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.85fr);
        gap: 28px;
        align-items: start;
    }
    .marketplace-preview {
        position: sticky;
        top: 110px;
        align-self: start;
    }
    #listing-confirm-preview .marketplace-card {
        margin-top: 12px;
    }
    .marketplace-card {
        gap: 20px;
        overflow: hidden;
        word-break: break-word;
        position: relative;
        padding: 24px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background:
            radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 45%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
        box-shadow:
            inset 4px 0 0 var(--marketplace-accent, var(--accent-primary)),
            0 24px 60px rgba(6, 10, 22, 0.35);
    }
    .marketplace-card.premium {
        --premium-accent: var(--accent-secondary);
        --marketplace-accent: var(--premium-accent);
        border: 1px solid rgba(226, 182, 122, 0.35);
        box-shadow:
            inset 4px 0 0 var(--marketplace-accent),
            0 22px 52px rgba(226, 182, 122, 0.18),
            0 18px 48px rgba(6, 10, 22, 0.25);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.02), rgba(226, 182, 122, 0.08));
    }
    .marketplace-card-top {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: flex-start;
    }
    .marketplace-card-title {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
    }
    .marketplace-card-eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }
    .marketplace-card-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
    }
    .marketplace-card-badges .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
    .marketplace-card.premium .marketplace-card-top h3 {
        color: var(--premium-accent);
    }
    .marketplace-card-top h3 {
        margin: 0;
        font-size: 1.3rem;
    }
    .marketplace-card-tagline {
        margin: 0;
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.95rem;
    }
    .marketplace-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
        color: var(--text-subtle);
        font-size: 0.82rem;
        word-break: break-word;
    }
    .marketplace-card-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .marketplace-card-body .decoration-pill {
        align-self: flex-start;
    }
    .marketplace-card-summary {
        color: var(--text-muted);
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .marketplace-card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .marketplace-intent-chip {
        background: rgba(95, 227, 197, 0.16);
        border: 1px solid rgba(95, 227, 197, 0.32);
        color: var(--accent-primary);
        font-weight: 600;
    }
    .preview-chip.verification-chip {
        font-weight: 600;
        border: 1px solid rgba(255, 255, 255, 0.18);
    }
    .preview-chip.verification-chip.verified {
        background: rgba(78, 203, 145, 0.16);
        border-color: rgba(78, 203, 145, 0.4);
        color: #4ecb91;
    }
    .preview-chip.verification-chip.unverified {
        background: rgba(255, 94, 94, 0.14);
        border-color: rgba(255, 94, 94, 0.35);
        color: #ff8c8c;
    }
    .badge.neutral {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--text-muted);
    }
    .badge.premium {
        background: rgba(226, 182, 122, 0.14);
        border: 1px solid rgba(226, 182, 122, 0.4);
        color: var(--accent-secondary);
        box-shadow: 0 8px 18px rgba(226, 182, 122, 0.22);
        padding: 6px 16px;
        min-width: 112px;
        text-transform: uppercase;
        letter-spacing: 0.18em;
    }
    .marketplace-card-footer {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .marketplace-card-detail {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
        padding: 14px 16px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
    }
    .marketplace-card-footer-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 0.88rem;
        color: var(--text-muted);
    }
    .marketplace-card-footer-meta strong {
        color: var(--text-strong);
        font-weight: 600;
    }
    .marketplace-card-detail-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .marketplace-card-detail-item span {
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }
    .marketplace-card-detail-item strong {
        font-size: 0.95rem;
        color: var(--text-strong);
    }
    .marketplace-card-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
        align-items: center;
        margin-top: 4px;
    }
    .marketplace-card-actions .apply-button {
        grid-column: span 1;
    }
    .marketplace-card-actions :is(button,a) {
        width: 100%;
        justify-content: center;
        white-space: nowrap;
    }
    .asset-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
        gap: 28px;
        align-items: stretch;
    }
    .asset-hero-card {
        padding: 24px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: linear-gradient(150deg, rgba(95, 227, 197, 0.12), rgba(255, 255, 255, 0.03));
        box-shadow: var(--shadow-soft);
    }
    .asset-hero-card h3 {
        margin-top: 0;
    }
    .asset-hero-card ul {
        margin: 12px 0 0;
        padding-left: 18px;
        color: var(--text-muted);
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .asset-market-shell {
        display: grid;
        grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
        gap: 42px;
        align-items: start;
        margin-top: 40px;
    }
    .asset-panel {
        position: sticky;
        top: 110px;
        padding: 32px;
    }
    .asset-filter {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
        font-size: 0.9rem;
        color: var(--text-muted);
    }
    .asset-filter .filter-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--text-strong);
    }
    .asset-filter .filter-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        color: var(--text-muted);
    }
    .asset-filter .filter-icon svg {
        width: 16px;
        height: 16px;
    }
    .asset-filter input,
    .asset-filter select {
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-strong);
        font-family: inherit;
    }
    .asset-filter-status {
        color: var(--text-subtle);
        font-size: 0.85rem;
        margin-top: 8px;
    }
    .asset-results-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 24px;
        color: var(--text-subtle);
        font-size: 0.9rem;
    }
    .asset-cart-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: var(--text-strong);
        font-size: 0.75rem;
    }
    .asset-cart-pill--total {
        background: rgba(95, 227, 197, 0.18);
        color: var(--accent-primary);
    }
    .asset-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 30px;
    }
    .asset-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        box-shadow: var(--shadow-soft);
    }
    .asset-card-thumb {
        position: relative;
        height: 180px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.02);
    }
    .asset-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .asset-thumb-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--text-subtle);
        font-size: 0.9rem;
    }
    .asset-card-watermark {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.2);
        opacity: 0.8;
        pointer-events: none;
        mix-blend-mode: screen;
    }
    .asset-watermark-image img {
        max-width: 70%;
        max-height: 70%;
        opacity: 0.35;
    }
    .asset-card-body {
        padding: 18px 18px 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .asset-card-eyebrow {
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }
    .asset-card-body h3 {
        margin: 0;
        font-size: 1.1rem;
    }
    .asset-card-price {
        margin: 0;
        font-weight: 600;
        color: var(--accent-primary);
    }
    .asset-card-summary {
        margin: 0;
        color: var(--text-muted);
        font-size: 0.92rem;
        line-height: 1.5;
    }
    .asset-card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .asset-card-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: auto;
    }
    .asset-like-button.is-liked {
        border-color: rgba(255, 110, 146, 0.62);
        background: rgba(255, 110, 146, 0.22);
        color: #ffd8e4;
    }
    .asset-remove-button {
        border-color: rgba(255, 92, 92, 0.52);
        color: #ffd2d2;
    }
    .asset-remove-button:hover,
    .asset-remove-button:focus-visible {
        background: rgba(255, 92, 92, 0.22);
        border-color: rgba(255, 92, 92, 0.72);
    }
    .asset-empty {
        padding: 28px;
        border-radius: 18px;
        border: 1px dashed rgba(255, 255, 255, 0.2);
        text-align: center;
        color: var(--text-muted);
    }
    .asset-cart {
        position: fixed;
        right: 32px;
        top: 110px;
        width: min(420px, 92vw);
        background: #0f1118;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 20px;
        box-shadow: 0 24px 60px rgba(6, 10, 22, 0.45);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: all 0.25s ease;
        z-index: 30;
    }
    .asset-cart.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    .asset-cart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .asset-cart-summary {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .asset-cart-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: 360px;
        overflow-y: auto;
    }
    .asset-cart-item {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        align-items: center;
    }
    .asset-cart-thumb {
        width: 64px;
        height: 64px;
        border-radius: 12px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .asset-cart-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .asset-cart-thumb-fallback {
        font-size: 0.7rem;
        color: var(--text-subtle);
    }
    .asset-cart-meta {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }
    .asset-cart-title {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .asset-cart-subtle {
        color: var(--text-subtle);
        font-size: 0.8rem;
    }
    .asset-cart-price {
        color: var(--accent-primary);
        font-weight: 600;
        font-size: 0.9rem;
    }
    .asset-cart-footer {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .asset-builder {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
        gap: 28px;
        align-items: start;
        margin-top: 32px;
    }
    .asset-form {
        padding: 28px;
    }
    .asset-form-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 18px;
    }
    .asset-form h2 {
        margin-top: 0;
    }
    .asset-upload-block {
        margin-top: 24px;
        padding: 16px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
    }
    .file-picker {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
    }
    .file-picker input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }
    .file-picker-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 16px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-primary);
        font-weight: 600;
        transition: transform 0.2s ease, border-color 0.2s ease;
    }
    .file-picker:hover .file-picker-button {
        border-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-1px);
    }
    .asset-upload-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 12px;
    }
    .asset-upload-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        color: var(--text-muted);
        font-size: 0.9rem;
    }
    .asset-upload-item strong {
        color: var(--text-primary);
        font-weight: 600;
    }
    .asset-upload-meta {
        display: block;
        margin-top: 4px;
        font-size: 0.78rem;
        color: var(--text-subtle);
    }
    .asset-upload-status {
        color: var(--text-subtle);
        font-size: 0.85rem;
        margin-top: 8px;
    }
    .asset-side {
        position: sticky;
        top: 110px;
    }
    .asset-license-card {
        padding: 16px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .asset-guidelines {
        list-style: none;
        padding: 0;
        margin: 0 0 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: var(--text-muted);
        font-size: 0.92rem;
    }
    .asset-guidelines li::before {
        content: "-";
        margin-right: 8px;
        color: var(--accent-secondary);
    }
    .asset-preview-card {
        margin-top: 12px;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .asset-preview-thumb {
        height: 160px;
        background: rgba(255, 255, 255, 0.04);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-subtle);
        position: relative;
        overflow: hidden;
    }
    .asset-preview-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .asset-preview-body {
        padding: 16px;
    }
    .asset-detail-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 28px;
        align-items: center;
        margin-top: 12px;
    }
    .asset-detail-media {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .asset-detail-media img {
        width: 100%;
        display: block;
        object-fit: cover;
    }
    .asset-detail-summary {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .asset-detail-description {
        color: var(--text-muted);
        line-height: 1.6;
    }
    .asset-detail-blocks {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .asset-detail-grid {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }
    .asset-detail-block {
        padding: 0;
    }
    .asset-detail-block h3 {
        margin: 0 0 10px;
        font-size: 1rem;
        letter-spacing: 0.03em;
        color: var(--text-muted);
    }
    .asset-detail-block p {
        margin: 0;
        color: var(--text-default);
        line-height: 1.7;
        font-size: 1.02rem;
    }
    .asset-detail-price {
        font-size: 1.2rem;
        color: var(--accent-primary);
        font-weight: 600;
    }
    .asset-price-compare {
        margin-left: 8px;
        color: var(--text-subtle);
        text-decoration: line-through;
        font-weight: 500;
        font-size: 0.95rem;
    }
    .asset-detail-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
    }
    .asset-gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }
    .asset-gallery-grid img {
        width: 100%;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .asset-license-badge {
        font-size: 0.85rem;
        color: var(--accent-secondary);
    }
    .asset-review-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }
    .asset-review-shell {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .asset-review-header {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .asset-review-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .asset-review-tabs .ghost-button.active {
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
    .asset-review-section h3 {
        margin-top: 0;
    }
    .asset-review-card {
        display: grid;
        grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
        min-width: 0;
    }
    .asset-review-card--license {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .asset-review-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }
    .asset-review-id {
        display: block;
        font-size: 0.8rem;
        color: var(--text-subtle);
        word-break: break-word;
    }
    .asset-review-meta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 12px;
    }
    .asset-review-meta {
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }
    .asset-review-label {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }
    .asset-review-value {
        color: var(--text-strong);
        font-size: 0.92rem;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .asset-review-answers {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .asset-review-block {
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.02);
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .asset-review-text {
        margin: 0;
        color: var(--text-muted);
        font-size: 0.9rem;
        line-height: 1.55;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .asset-review-docs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .asset-review-docs a {
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.05);
        font-size: 0.8rem;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .asset-review-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
    }
    .asset-review-thumb {
        position: relative;
        overflow: hidden;
    }
    .asset-review-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
    }
    .asset-review-body p {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .asset-review-details {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 0.85rem;
        color: var(--text-muted);
    }
    .asset-review-detail strong {
        color: var(--text-subtle);
        margin-right: 6px;
    }
    .asset-review-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }
    .asset-license-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .asset-review-card--license .asset-license-actions {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 12px;
    }
    .asset-review-notes {
        width: 100%;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        padding: 10px 12px;
        color: var(--text-strong);
    }
    @media (max-width: 920px) {
        .asset-hero,
        .asset-detail-hero,
        .asset-builder,
        .asset-market-shell {
            grid-template-columns: 1fr;
        }
        .asset-panel,
        .asset-side {
            position: static;
        }
        .asset-cart {
            right: 16px;
            left: 16px;
            width: auto;
        }
        .asset-review-card {
            grid-template-columns: 1fr;
        }
    }
    .marketplace-card-portfolio {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 16px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 0.9rem;
        color: var(--text-muted);
    }
    .marketplace-card-portfolio-header {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .marketplace-card-portfolio-label {
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }
    .marketplace-card-portfolio p {
        margin: 0;
        color: var(--text-muted);
        font-size: 0.88rem;
    }
    .marketplace-card-portfolio-meta {
        gap: 6px;
    }
    .marketplace-card-portfolio a {
        color: var(--accent-primary);
        font-weight: 600;
    }
    .marketplace-detail-modal {
        max-width: 980px;
        width: min(980px, 100%);
        resize: none;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .marketplace-apply-modal {
        max-width: 720px;
        width: min(720px, 100%);
    }
    .marketplace-detail-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }
    .marketplace-detail-eyebrow {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .marketplace-detail-date {
        color: var(--text-subtle);
        font-size: 0.85rem;
    }
    .marketplace-detail-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .marketplace-detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-top: 12px;
    }
    .marketplace-detail-label {
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }
    .marketplace-detail-subtext {
        font-size: 0.85rem;
        color: var(--text-muted);
    }
    .marketplace-detail-payment {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .marketplace-detail-portfolio {
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px dashed rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: var(--text-muted);
    }
    .marketplace-detail-portfolio a {
        color: var(--accent-primary);
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .marketplace-detail-profile {
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .marketplace-detail-recent {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .profile-recent-row {
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .profile-recent-row strong {
        display: block;
    }
    .profile-recent-row .subtle {
        margin: 6px 0 0;
        font-size: 0.78rem;
    }
    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3,
    .markdown-body h4 {
        margin: 0 0 12px;
        color: var(--text-strong);
        letter-spacing: -0.01em;
    }
    .markdown-body h1 {
        font-size: 1.65rem;
    }
    .markdown-body h2 {
        font-size: 1.4rem;
    }
    .markdown-body h3 {
        font-size: 1.2rem;
    }
    .markdown-body h4 {
        font-size: 1.05rem;
    }
    .markdown-body p {
        margin: 0 0 12px;
        color: var(--text-muted);
        line-height: 1.65;
    }
    .markdown-body ul {
        padding-left: 20px;
        margin: 0 0 16px;
        color: var(--text-muted);
    }
    .markdown-body ol {
        padding-left: 22px;
        margin: 0 0 16px;
        color: var(--text-muted);
    }
    .markdown-body blockquote {
        margin: 0 0 16px;
        padding: 12px 16px;
        border-left: 3px solid rgba(95, 227, 197, 0.6);
        background: rgba(95, 227, 197, 0.08);
        color: var(--text-muted);
        border-radius: 12px;
    }
    .markdown-body code {
        background: rgba(255, 255, 255, 0.08);
        padding: 2px 6px;
        border-radius: 6px;
        font-size: 0.85rem;
    }
    .markdown-body a {
        color: var(--accent-primary);
        text-decoration: underline;
    }
    .markdown-body pre {
        margin: 0 0 16px;
        padding: 14px 16px;
        border-radius: 12px;
        background: rgba(10, 12, 20, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.08);
        overflow-x: auto;
        color: var(--text-strong);
    }
    .markdown-body pre code {
        display: block;
        background: transparent;
        padding: 0;
        font-size: 0.85rem;
        line-height: 1.6;
    }
    .markdown-body .subtext {
        margin: 0 0 10px;
        color: var(--text-subtle);
        font-size: 0.85rem;
    }
    .marketplace-detail-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
    }
    .marketplace-detail-meta ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
        color: var(--text-muted);
    }
    .marketplace-detail-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 12px;
    }
    .marketplace-apply-copy {
        margin: 0;
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.9rem;
    }
    .marketplace-form-note {
        color: var(--text-subtle);
        font-size: 0.82rem;
    }
    .marketplace-create-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }
    @media (min-width: 1200px) {
        .marketplace-card-actions {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .marketplace-card-actions .apply-button {
            grid-column: span 1;
        }
    }
    .portfolio-card {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow: hidden;
        word-break: break-word;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 46px rgba(7, 10, 22, 0.28);
    }
    .portfolio-card h2 {
        margin: 0;
    }
    .portfolio-tagline {
        margin: 0;
        color: var(--portfolio-text-color);
        opacity: 0.92;
        font-size: 1.08rem;
        line-height: 1.55;
    }
    .portfolio-snippet {
        color: rgba(242, 242, 242, 0.65);
        font-size: 0.92rem;
    }
    .portfolio-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        color: rgba(242, 242, 242, 0.65);
        font-size: 0.85rem;
    }
    .portfolio-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        font-size: 0.85rem;
        color: rgba(242, 242, 242, 0.55);
    }
    .portfolio-hero {
        gap: 40px;
        align-items: flex-start;
    }
    .portfolio-page {
        --portfolio-font-body: var(--font-sans);
        --portfolio-font-display: var(--font-display);
        --portfolio-text-color: rgba(242, 242, 242, 0.9);
        --portfolio-heading-color: #f5f6ff;
        --immersive-nav-primary-rgb: 95, 227, 197;
        --immersive-nav-secondary-rgb: 126, 166, 255;
        --immersive-nav-ink-rgb: 247, 244, 239;
        --immersive-nav-shadow-rgb: 8, 10, 16;
        --immersive-nav-surface-rgb: 16, 24, 32;
        --immersive-nav-canvas-rgb: 8, 10, 16;
        --immersive-nav-border-rgb: 115, 160, 176;
        --portfolio-scene-background:
            radial-gradient(120% 90% at 22% 8%, rgba(226, 182, 122, 0.22), transparent 62%),
            radial-gradient(100% 78% at 84% 16%, rgba(95, 227, 197, 0.18), transparent 64%),
            linear-gradient(150deg, rgba(12, 14, 22, 0.95), rgba(8, 10, 16, 0.98));
        --portfolio-scene-accent: rgba(126, 166, 255, 0.45);
        --portfolio-motion-preset: default;
        position: relative;
        isolation: isolate;
    }
    .portfolio-page .portfolio-shell {
        position: relative;
        z-index: 2;
    }
    .portfolio-scene {
        position: fixed;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 0;
    }
    .portfolio-page:not(.portfolio-page-decorated) .portfolio-scene {
        display: none;
    }
    .portfolio-scene::before,
    .portfolio-scene::after {
        content: "";
        position: absolute;
        inset: -6%;
        pointer-events: none;
    }
    .portfolio-scene::before {
        background: var(--portfolio-scene-background);
        background-size: 132% 132%;
        background-repeat: no-repeat;
        opacity: 0.42;
        filter: saturate(1.04);
        transform: translate3d(0, 0, 0);
    }
    .portfolio-scene::after {
        background:
            radial-gradient(58% 42% at 14% 16%, var(--portfolio-scene-accent), transparent 72%),
            radial-gradient(64% 52% at 86% 18%, var(--portfolio-scene-accent), transparent 78%);
        opacity: 0.08;
        transform: translate3d(0, 0, 0);
    }
    .portfolio-page.portfolio-page-decorated .portfolio-scene::before {
        opacity: 0.56;
    }
    .portfolio-page.portfolio-page-decorated .portfolio-hero h1,
    .portfolio-page.portfolio-page-decorated .portfolio-tagline {
        transform: translate3d(0, 0, 0);
        will-change: transform, opacity;
    }
    .portfolio-page.portfolio-page-decorated.portfolio-motion-terminal .portfolio-shell h1,
    .portfolio-page.portfolio-page-decorated.portfolio-motion-terminal .portfolio-shell h2 {
        text-shadow: 0 0 18px rgba(125, 255, 182, 0.24);
    }
    .portfolio-page.portfolio-page-decorated.portfolio-motion-cosmic .portfolio-shell h1,
    .portfolio-page.portfolio-page-decorated.portfolio-motion-cosmic .portfolio-shell h2 {
        text-shadow:
            0 0 12px rgba(181, 149, 255, 0.26),
            0 0 24px rgba(126, 203, 255, 0.2);
    }
    .portfolio-page.portfolio-page-decorated.portfolio-motion-blueprint .portfolio-shell h1,
    .portfolio-page.portfolio-page-decorated.portfolio-motion-blueprint .portfolio-shell h2 {
        text-shadow: 0 0 14px rgba(126, 203, 255, 0.28);
    }
    .portfolio-shell .section-block,
    .portfolio-shell .hero,
    .portfolio-shell .meta-card,
    .portfolio-shell .media-card,
    .portfolio-shell .portfolio-tagline,
    .portfolio-shell .portfolio-about,
    .portfolio-shell .status-description,
    .portfolio-shell .portfolio-engagement p {
        font-family: var(--portfolio-font-body);
        color: var(--portfolio-text-color);
    }
    .portfolio-shell h1,
    .portfolio-shell h2,
    .portfolio-shell h3 {
        font-family: var(--portfolio-font-display);
        color: var(--portfolio-heading-color);
        letter-spacing: -0.01em;
    }
    .portfolio-page.portfolio-page-decorated .portfolio-shell.portfolio-shell-decorated {
        padding: 0;
        border-radius: 0;
    }
    .portfolio-page.portfolio-page-decorated .portfolio-shell > .hero,
    .portfolio-page.portfolio-page-decorated .portfolio-shell > .section-block,
    .portfolio-page.portfolio-page-decorated .portfolio-shell .meta-card,
    .portfolio-page.portfolio-page-decorated .portfolio-shell .media-card {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }
    .portfolio-page.portfolio-page-decorated .portfolio-shell > .hero,
    .portfolio-page.portfolio-page-decorated .portfolio-shell > .section-block {
        border-radius: 0;
    }
    .portfolio-page.portfolio-page-decorated .portfolio-shell > .hero {
        padding: 0 0 26px;
        margin-bottom: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .portfolio-page.portfolio-page-decorated .portfolio-shell > .section-block {
        padding: 24px 0;
        margin-top: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .portfolio-page.portfolio-page-decorated .portfolio-shell > .section-block.portfolio-engagement {
        margin-top: 14px;
        padding: 16px 18px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
            radial-gradient(120% 100% at 18% 15%, rgba(255, 255, 255, 0.06), transparent 65%);
    }
    .portfolio-page.portfolio-page-decorated .portfolio-shell > .section-block.portfolio-engagement h2 {
        margin-bottom: 8px;
    }
    .portfolio-page.portfolio-page-decorated .portfolio-shell > .section-block.portfolio-engagement p {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.04);
        color: rgba(242, 242, 242, 0.9);
        font-weight: 600;
    }
    .portfolio-page.portfolio-page-decorated .portfolio-shell > .section-block:hover,
    .portfolio-page.portfolio-page-decorated .portfolio-shell > .hero:hover,
    .portfolio-page.portfolio-page-decorated .portfolio-shell .meta-card:hover,
    .portfolio-page.portfolio-page-decorated .portfolio-shell .media-card:hover {
        transform: none;
        border-color: transparent;
        box-shadow: none;
    }
    .portfolio-hero .hero-col {
        flex: 1 1 60%;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .portfolio-hero .hero-meta {
        flex: 1 1 40%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .portfolio-eyebrow-grid {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.74rem;
    }
    .portfolio-hero-emblem {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: inline-grid;
        place-items: center;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }
    .portfolio-hero-emblem-core {
        width: 26px;
        height: 26px;
        border-radius: 999px;
        background:
            radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.22) 34%, transparent 54%),
            radial-gradient(circle at 65% 68%, var(--decoration-accent, #7ea6ff), rgba(12, 16, 26, 0.4) 70%);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.26),
            0 10px 18px rgba(0, 0, 0, 0.34);
    }
    .status-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .share-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
    .portfolio-rate-hint {
        margin: -2px 0 0;
        color: rgba(242, 242, 242, 0.68);
        font-size: 0.86rem;
        line-height: 1.5;
    }
    #portfolio-rate[disabled] {
        opacity: 0.58;
        cursor: not-allowed;
    }
    .portfolio-page.portfolio-import-mode .portfolio-scene {
        display: none;
    }
    .portfolio-page.portfolio-import-mode {
        width: calc(100vw - clamp(20px, 3.6vw, 48px));
        max-width: 1800px;
        margin-left: 50%;
        transform: translateX(-50%);
    }
    body[data-immersive-portfolio="true"] main > .container {
        max-width: none;
        padding-left: clamp(10px, 1.8vw, 24px);
        padding-right: clamp(10px, 1.8vw, 24px);
    }
    body[data-immersive-portfolio="true"] main {
        padding: 16px 0 24px;
    }
    body[data-immersive-portfolio="true"] main::before {
        opacity: 0.14;
    }
    .portfolio-import-mode .portfolio-shell {
        gap: 0;
    }
    .portfolio-import-mode .portfolio-hero,
    .portfolio-import-mode .portfolio-contact,
    .portfolio-import-mode .portfolio-engagement {
        display: none;
    }
    .portfolio-import-mode .portfolio-hero + .portfolio-immersive-section {
        margin-top: 0;
    }
    .portfolio-immersive-section {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
    .portfolio-immersive-overlay {
        position: sticky;
        top: clamp(10px, 1.6vw, 20px);
        z-index: 6;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin: 0;
        padding: clamp(14px, 1.9vw, 22px);
        border-radius: 22px 22px 0 0;
        border: 1px solid rgba(var(--immersive-nav-border-rgb), 0.58);
        border-bottom: 0;
        background:
            linear-gradient(
                148deg,
                rgba(var(--immersive-nav-surface-rgb), 0.92),
                rgba(var(--immersive-nav-primary-rgb), 0.24)
            ),
            linear-gradient(
                180deg,
                rgba(var(--immersive-nav-canvas-rgb), 0.9),
                rgba(var(--immersive-nav-shadow-rgb), 0.88)
            );
        backdrop-filter: blur(16px) saturate(135%);
        box-shadow: 0 16px 36px rgba(3, 7, 16, 0.52);
    }
    .portfolio-immersive-head {
        max-width: min(980px, 100%);
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .portfolio-immersive-head h2 {
        margin: 0;
        font-size: clamp(1.12rem, 1.85vw, 1.46rem);
        color: rgb(var(--immersive-nav-ink-rgb));
    }
    .portfolio-immersive-head p {
        margin: 8px 0 0;
        color: rgba(var(--immersive-nav-ink-rgb), 0.86);
        max-width: 72ch;
        font-size: 0.94rem;
        line-height: 1.5;
    }
    .portfolio-immersive-options {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
    .portfolio-immersive-options .apply-button,
    .portfolio-immersive-options .ghost-button {
        justify-content: center;
        text-align: center;
        min-height: 44px;
        border-radius: 999px;
        border-color: rgba(var(--immersive-nav-border-rgb), 0.62);
        color: rgb(var(--immersive-nav-ink-rgb));
        background: linear-gradient(
            135deg,
            rgba(var(--immersive-nav-shadow-rgb), 0.82),
            rgba(var(--immersive-nav-primary-rgb), 0.24)
        );
        backdrop-filter: blur(10px) saturate(125%);
        box-shadow: 0 10px 20px rgba(4, 8, 18, 0.3);
    }
    .portfolio-immersive-options .apply-button {
        background: linear-gradient(
            120deg,
            rgba(var(--immersive-nav-secondary-rgb), 0.5),
            rgba(var(--immersive-nav-primary-rgb), 0.4)
        );
    }
    .portfolio-immersive-options .ghost-button:hover,
    .portfolio-immersive-options .ghost-button:focus-visible,
    .portfolio-immersive-options .apply-button:hover,
    .portfolio-immersive-options .apply-button:focus-visible {
        border-color: rgba(var(--immersive-nav-border-rgb), 0.82);
        box-shadow: 0 14px 30px rgba(4, 8, 18, 0.44);
        filter: brightness(1.07);
    }
    .portfolio-immersive-options [data-immersive-shrink][aria-pressed="true"] {
        border-color: rgba(var(--immersive-nav-secondary-rgb), 0.82);
        background: linear-gradient(
            120deg,
            rgba(var(--immersive-nav-secondary-rgb), 0.38),
            rgba(var(--immersive-nav-shadow-rgb), 0.74)
        );
    }
    .portfolio-immersive-note {
        margin: 0;
        padding: 9px 12px;
        border-radius: 11px;
        border: 1px solid rgba(var(--immersive-nav-secondary-rgb), 0.34);
        background: rgba(var(--immersive-nav-shadow-rgb), 0.54);
        color: rgba(var(--immersive-nav-ink-rgb), 0.86);
        font-size: 0.82rem;
        line-height: 1.45;
    }
    .portfolio-immersive-frame-shell {
        position: relative;
        border-radius: 0 0 22px 22px;
        overflow: hidden;
        min-height: calc(100vh - 228px);
        min-height: calc(100dvh - 228px);
        border: 1px solid rgba(var(--immersive-nav-border-rgb), 0.58);
        border-top: 0;
        background:
            linear-gradient(
                180deg,
                rgba(var(--immersive-nav-canvas-rgb), 0.98),
                rgba(var(--immersive-nav-shadow-rgb), 0.95)
            );
        box-shadow: 0 30px 70px rgba(3, 6, 14, 0.58);
    }
    .portfolio-immersive-frame {
        width: 100%;
        height: 100%;
        min-height: calc(100vh - 228px);
        min-height: calc(100dvh - 228px);
        border: 0;
        display: block;
        background: rgb(var(--immersive-nav-shadow-rgb));
    }
    .portfolio-immersive-frame-shell,
    .portfolio-immersive-frame {
        transition: min-height 0.24s ease, height 0.24s ease;
    }
    .portfolio-immersive-section.is-compact .portfolio-immersive-frame-shell,
    .portfolio-immersive-section.is-compact .portfolio-immersive-frame {
        min-height: clamp(320px, 54vh, 640px);
    }
    .portfolio-assets-section {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .portfolio-assets-header {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .portfolio-assets-header h2 {
        margin: 0;
    }
    .portfolio-assets-header p {
        margin: 0;
        color: rgba(242, 242, 242, 0.74);
        line-height: 1.5;
        font-size: 0.92rem;
    }
    .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section {
        margin-top: 0;
        padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) clamp(22px, 2.2vw, 32px);
        border-radius: 0;
        border: 1px solid rgba(var(--immersive-nav-border-rgb), 0.52);
        border-top: 0;
        background:
            linear-gradient(
                180deg,
                rgba(var(--immersive-nav-canvas-rgb), 0.92),
                rgba(var(--immersive-nav-shadow-rgb), 0.9)
            ),
            radial-gradient(
                120% 72% at 14% 8%,
                rgba(var(--immersive-nav-primary-rgb), 0.18),
                transparent 64%
            );
        box-shadow: none;
    }
    .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section + .portfolio-assets-section {
        border-top: 1px solid rgba(var(--immersive-nav-border-rgb), 0.24);
    }
    .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section:last-of-type {
        border-radius: 0 0 22px 22px;
    }
    .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section .asset-grid {
        gap: 20px;
    }
    .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section .asset-card {
        background:
            linear-gradient(
                145deg,
                rgba(var(--immersive-nav-surface-rgb), 0.72),
                rgba(var(--immersive-nav-shadow-rgb), 0.68)
            );
        border-color: rgba(var(--immersive-nav-border-rgb), 0.42);
        box-shadow: 0 18px 34px rgba(4, 8, 18, 0.32);
    }
    .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section .asset-card-thumb {
        background: rgba(var(--immersive-nav-canvas-rgb), 0.65);
    }
    .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section .asset-card-actions .ghost-button {
        border-color: rgba(var(--immersive-nav-border-rgb), 0.58);
        color: rgba(var(--immersive-nav-ink-rgb), 0.92);
        background: rgba(var(--immersive-nav-shadow-rgb), 0.6);
    }
    .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section .asset-like-button.is-liked {
        border-color: rgba(var(--immersive-nav-secondary-rgb), 0.72);
        background: rgba(var(--immersive-nav-secondary-rgb), 0.28);
        color: rgb(var(--immersive-nav-ink-rgb));
    }
    .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section .asset-remove-button {
        border-color: rgba(255, 107, 107, 0.58);
    }
    .portfolio-about-section {
        margin-bottom: 40px;
    }
    .portfolio-about {
        color: var(--portfolio-text-color);
        font-size: 1.08rem;
        white-space: normal;
        line-height: 1.7;
    }
    .portfolio-about.markdown-body p,
    .portfolio-about.markdown-body ul {
        color: var(--portfolio-text-color);
    }
    .portfolio-focus-tools {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 32px;
        margin-bottom: 40px;
    }
    .portfolio-focus-tools h2 {
        margin: 0 0 12px;
    }
    .portfolio-gallery {
        margin-bottom: 40px;
    }
    .portfolio-media-hint {
        margin: 8px 0 14px;
        font-size: 0.96rem;
        color: rgba(242, 242, 242, 0.72);
        line-height: 1.5;
    }
    .portfolio-media-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
        align-items: stretch;
    }
    .media-card figcaption {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    .media-card-audio .media-audio-frame {
        padding: 18px;
        border-radius: 14px;
        margin: 14px;
        background: rgba(7, 10, 18, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .media-card-audio audio {
        width: 100%;
    }
    .media-card-document .media-card-doc-frame {
        margin: 14px;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        min-height: 280px;
        background: rgba(255, 255, 255, 0.03);
    }
    .media-card-document .media-card-doc-frame iframe {
        width: 100%;
        height: 320px;
        border: 0;
        display: block;
        background: #fff;
    }
    .media-card-document figcaption {
        padding: 0 18px 18px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: rgba(242, 242, 242, 0.78);
    }
    .media-card-alt .media-card-body {
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        background: rgba(255, 255, 255, 0.02);
        height: 100%;
    }
    .media-card-body a {
        color: var(--accent-primary);
        font-weight: 600;
        font-size: 0.92rem;
    }
    .portfolio-links ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .portfolio-links a {
        color: var(--accent-primary);
        font-weight: 600;
        font-size: 1rem;
    }
    .portfolio-marketplace-section {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 36px;
    }
    .portfolio-marketplace-header {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .portfolio-marketplace-header h2 {
        margin: 0;
    }
    .portfolio-marketplace-header p {
        margin: 0;
        color: rgba(242, 242, 242, 0.72);
        font-size: 0.92rem;
        line-height: 1.5;
    }
    .portfolio-marketplace-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 18px;
    }
    .portfolio-marketplace-card {
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.03);
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .portfolio-marketplace-card h3 {
        margin: 8px 0 0;
        font-size: 1.06rem;
    }
    .portfolio-marketplace-card p {
        margin: 0;
        color: rgba(242, 242, 242, 0.74);
        font-size: 0.9rem;
        line-height: 1.5;
    }
    .portfolio-marketplace-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }
    .portfolio-marketplace-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        color: rgba(242, 242, 242, 0.68);
        font-size: 0.82rem;
    }
    .portfolio-marketplace-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .portfolio-marketplace-actions .apply-button,
    .portfolio-marketplace-actions .ghost-button {
        min-height: 38px;
        font-size: 0.82rem;
    }
    .portfolio-contact {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 32px;
    }
    .meta-card {
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 16px;
        background: rgba(255, 255, 255, 0.02);
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .meta-card strong {
        font-size: 1.05rem;
        line-height: 1.45;
        word-break: break-word;
    }
    .meta-card a {
        color: var(--accent-primary);
        font-weight: 600;
        word-break: break-all;
    }
    .portfolio-engagement {
        margin-bottom: 32px;
    }
    .portfolio-engagement p {
        margin: 0;
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.98rem;
    }
    .preview-highlight-card {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 18px;
        border-radius: 12px;
        background: rgba(95, 227, 197, 0.12);
        border: 1px solid rgba(95, 227, 197, 0.3);
        color: var(--accent-primary);
        font-weight: 600;
    }
    .portfolio-review-card {
        display: flex;
        flex-direction: column;
        gap: 16px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 20px;
    }
    .portfolio-review-header {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .portfolio-review-header p {
        margin: 6px 0;
        color: rgba(242, 242, 242, 0.68);
        font-size: 0.9rem;
    }
    .portfolio-review-links {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
        font-size: 0.85rem;
        color: rgba(242, 242, 242, 0.6);
    }
    .portfolio-review-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .portfolio-review-form textarea {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        padding: 12px;
        color: #f2f2f2;
        font-family: inherit;
    }
    .portfolio-review-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .portfolio-review-status {
        font-size: 0.9rem;
    }
    .portfolio-review-tagline {
        color: rgba(242, 242, 242, 0.68);
        font-size: 0.95rem;
    }
    .portfolio-review-summary {
        color: rgba(242, 242, 242, 0.65);
        font-size: 0.9rem;
    }
    .highlight-panel ul {
        margin: 12px 0 0;
        padding-left: 20px;
        color: rgba(242, 242, 242, 0.65);
        font-size: 0.92rem;
        line-height: 1.6;
    }
    .highlight-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 16px;
    }
    .staff-skill-card {
        gap: 16px;
    }
    .skill-card-header {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .skill-card-header h3 {
        margin: 0;
    }
    .skill-card-applicant {
        color: var(--text-subtle);
        font-size: 0.88rem;
    }
    .skill-card-meta {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
        margin: 0;
    }
    .skill-card-meta dt {
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-subtle);
        margin: 0 0 4px;
    }
    .staff-department-section {
        margin-top: 24px;
    }
    .staff-department-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    .staff-department-card h3 {
        margin: 0;
    }
    .staff-panel {
        position: relative;
        padding: 28px;
        border-radius: var(--radius-xl);
        border: 1px solid var(--border-soft);
        background: linear-gradient(
                135deg,
                rgba(95, 227, 197, 0.12),
                rgba(12, 14, 20, 0.85) 45%,
                rgba(226, 182, 122, 0.18)
            ),
            rgba(12, 14, 20, 0.75);
        box-shadow: var(--shadow-soft);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--nav-height) - 32px);
    }
    .staff-panel .section-block {
        max-width: 100%;
    }
    .staff-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
                520px 320px at 12% 10%,
                rgba(95, 227, 197, 0.18),
                transparent 60%
            ),
            radial-gradient(
                480px 360px at 92% 0%,
                rgba(226, 182, 122, 0.18),
                transparent 62%
            );
        opacity: 0.8;
        pointer-events: none;
    }
    .staff-panel__header {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
        padding-top: 18px;
    }
    .staff-panel__controls {
        position: absolute;
        top: 16px;
        left: 16px;
        display: flex;
        gap: 8px;
        z-index: 2;
    }
    .staff-panel__controls [data-panel-return] {
        display: none;
    }
    .panel-control {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(12, 14, 20, 0.72);
        color: var(--text-subtle);
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
    }
    .panel-control__icon {
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .panel-control__icon svg {
        width: 16px;
        height: 16px;
    }
    .panel-control:hover {
        color: #f7f4ef;
        border-color: rgba(95, 227, 197, 0.4);
    }
    .staff-panel__intro h2 {
        margin: 10px 0 6px;
        font-size: clamp(1.6rem, 2vw, 2rem);
    }
    .staff-panel__badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(15, 18, 26, 0.65);
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }
    .staff-panel__badge .badge-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.12);
    }
    .staff-panel__badge svg {
        width: 14px;
        height: 14px;
    }
    .staff-panel__stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
        min-width: min(420px, 100%);
    }
    .panel-stat {
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(12, 14, 20, 0.6);
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .panel-stat span {
        color: var(--text-subtle);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .panel-stat strong {
        font-size: 1.2rem;
    }
    .center-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }
    .center-chip {
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(12, 14, 20, 0.55);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-subtle);
    }
    .staff-centers {
        position: relative;
        z-index: 1;
        margin-top: 24px;
        display: grid;
        grid-template-columns: minmax(200px, 260px) 1fr;
        gap: 24px;
        align-items: start;
        flex: 1;
        min-height: 0;
    }
    .staff-centers__nav {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: sticky;
        top: calc(var(--nav-height) + 20px);
    }
    .center-tab {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(12, 14, 20, 0.6);
        color: var(--text-muted);
        font-weight: 600;
        font-size: 0.9rem;
        text-align: left;
        cursor: pointer;
        transition:
            background var(--motion-duration-short) var(--motion-ease-standard),
            color var(--motion-duration-short) var(--motion-ease-standard),
            border-color var(--motion-duration-short) var(--motion-ease-standard);
    }
    .center-tab__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .center-tab__icon svg {
        width: 16px;
        height: 16px;
    }
    .center-tab.is-active,
    .center-tab:hover {
        border-color: rgba(95, 227, 197, 0.4);
        color: #f7f4ef;
        background: linear-gradient(
            135deg,
            rgba(95, 227, 197, 0.22),
            rgba(12, 14, 20, 0.85)
        );
    }
    .staff-center {
        display: none;
        animation: motion-fade-up 320ms var(--motion-ease-decelerate);
    }
    .staff-center.is-active {
        display: block;
    }
    .staff-centers__content {
        min-height: 0;
        overflow: auto;
        padding-right: 4px;
        max-height: calc(100vh - var(--nav-height) - 260px);
    }
    .staff-panel--fullscreen {
        position: fixed;
        inset: 0;
        margin: 0;
        border-radius: 0;
        max-height: none;
        width: 100%;
        height: 100%;
        z-index: 9000;
        animation: staffDock 360ms var(--motion-ease-overshoot);
        background: #0b0d11;
        border: 0;
        box-shadow: none;
    }
    .staff-panel--fullscreen::before {
        opacity: 0;
    }
    .staff-panel--fullscreen .staff-panel__controls [data-panel-return] {
        display: inline-flex;
    }
    body.staff-panel-fullscreen {
        overflow: hidden;
        background: #0b0d11;
    }
    body.staff-panel-fullscreen #site-nav,
    body.staff-panel-fullscreen header[data-nav-mode],
    body.staff-panel-fullscreen .nav-reveal,
    body.staff-panel-fullscreen .nav-dock-indicator {
        display: none;
    }
    body.staff-panel-fullscreen main {
        padding: 0 !important;
    }
    body.staff-panel-fullscreen .staff-centers__content {
        max-height: calc(100vh - 220px);
    }
    .center-stack {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }
    .mini-tab-group {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .mini-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 8px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(12, 14, 20, 0.6);
    }
    .mini-tab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--text-subtle);
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
    }
    .mini-tab__icon {
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .mini-tab__icon svg {
        width: 16px;
        height: 16px;
    }
    .mini-tab.is-active,
    .mini-tab:hover {
        color: #f7f4ef;
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(95, 227, 197, 0.18);
    }
    .mini-panel {
        display: none;
    }
    .mini-panel.is-active {
        display: block;
    }
    .footprint-member {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .avatar-chip {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.08);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
    }
    .avatar-chip img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .avatar-chip--fallback {
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.85rem;
    }
    .userbase-hero {
        display: flex;
        gap: 14px;
        align-items: center;
        margin-bottom: 10px;
    }
    .userbase-avatar {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.08);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
    }
    .userbase-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .userbase-avatar--fallback {
        color: rgba(255, 255, 255, 0.8);
    }
    .detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }
    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(12, 14, 20, 0.4);
    }
    .detail-item span {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-subtle);
    }
    .detail-item strong {
        font-size: 0.92rem;
        color: var(--text-strong);
        word-break: break-word;
    }
    .detail-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
        color: var(--text-subtle);
        font-size: 0.9rem;
    }
    @keyframes staffDock {
        0% {
            opacity: 0;
            transform: translateY(16px) scale(0.98);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    @media (max-width: 900px) {
        .staff-centers {
            grid-template-columns: 1fr;
        }
        .staff-centers__nav {
            flex-direction: row;
            overflow-x: auto;
            position: static;
        }
        .center-tab {
            flex: 1 0 auto;
            justify-content: center;
            text-align: center;
        }
        .staff-panel__controls {
            position: static;
            margin-bottom: 12px;
        }
        .staff-panel__header {
            padding-top: 0;
        }
        .staff-centers__content {
            max-height: none;
        }
    }
    .skill-card-meta dd {
        margin: 0;
        font-size: 0.92rem;
        color: var(--text-muted);
    }
    .skill-portfolio {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .skill-portfolio strong {
        font-size: 0.92rem;
    }
    .skill-portfolio-meta {
        margin: 0;
        color: var(--text-subtle);
        font-size: 0.85rem;
    }
    .skill-portfolio-empty {
        color: var(--text-subtle);
        font-size: 0.9rem;
    }
    .skill-role-status {
        font-size: 0.9rem;
    }
    .skill-motivation {
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.02);
        padding: 12px 14px;
    }
    .skill-motivation summary {
        cursor: pointer;
        font-weight: 600;
        color: var(--text-muted);
        outline: none;
    }
    .skill-motivation[open] summary {
        margin-bottom: 8px;
    }
    .skill-motivation p {
        margin: 0;
        color: var(--text-muted);
        font-size: 0.92rem;
        line-height: 1.5;
        white-space: pre-line;
    }
    .skill-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 8px;
    }
    .search-bar {
        display: flex;
        gap: 12px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }
    .search-bar input {
        flex: 1 1 220px;
        padding: 10px 14px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.06);
        color: #f2f2f2;
    }
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: var(--text-size-xs);
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    .badge.warning {
        background: rgba(255, 107, 107, 0.16);
        color: var(--accent-danger);
        border: 1px solid rgba(255, 107, 107, 0.4);
    }
    .modal {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        box-sizing: border-box;
        z-index: var(--layer-modal);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity var(--motion-duration-medium) var(--motion-ease-standard),
            visibility 0s linear var(--motion-duration-medium);
    }
    .modal.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity var(--motion-duration-medium) var(--motion-ease-standard),
            visibility 0s linear 0s;
    }
    .modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(4, 8, 16, 0.82);
        backdrop-filter: none;
        opacity: 0;
        z-index: 0;
        transition: opacity var(--motion-duration-medium) var(--motion-ease-standard);
    }
    .modal.active .modal-backdrop {
        opacity: 1;
    }
    .modal-content {
        position: relative;
        background: linear-gradient(160deg, rgba(18, 20, 28, 0.995), rgba(12, 14, 20, 0.985));
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-xl);
        padding: 32px 32px 28px;
        padding-top: 52px;
        max-width: 880px;
        width: min(880px, 100%);
        min-width: min(560px, 100%);
        max-height: min(92vh, 920px);
        min-height: 260px;
        overflow-x: hidden;
        overflow-y: auto;
        resize: none;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
        gap: 18px;
        z-index: 2;
        box-sizing: border-box;
        box-shadow: var(--shadow-strong);
        transform: translateY(32px) scale(0.98);
        opacity: 0;
        transition:
            transform var(--motion-duration-long) var(--motion-ease-decelerate),
            opacity var(--motion-duration-medium) var(--motion-ease-standard);
        will-change: transform, opacity;
        backdrop-filter: none;
    }
    .modal.active .modal-content {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    .modal-content h3 {
        margin: 0;
    }
    .figma-modal .modal-backdrop {
        background:
            radial-gradient(120% 110% at 15% 10%, rgba(95, 227, 197, 0.12), transparent 58%),
            radial-gradient(90% 90% at 88% 10%, rgba(126, 166, 255, 0.14), transparent 62%),
            rgba(6, 9, 16, 0.86);
        backdrop-filter: blur(6px);
    }
    .figma-modal-card {
        border: 1px solid rgba(255, 255, 255, 0.16);
        background:
            linear-gradient(146deg, rgba(18, 22, 32, 0.96), rgba(11, 14, 22, 0.98)),
            radial-gradient(88% 90% at 8% 6%, rgba(95, 227, 197, 0.14), transparent 60%);
        box-shadow:
            0 26px 70px rgba(2, 6, 14, 0.62),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .figma-modal-header {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .figma-modal-kicker {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: fit-content;
        padding: 5px 10px;
        border-radius: 999px;
        border: 1px solid rgba(95, 227, 197, 0.36);
        background: rgba(95, 227, 197, 0.1);
        color: rgba(197, 255, 240, 0.92);
        font-size: 0.74rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    .figma-modal-header p {
        margin: 0;
        color: rgba(242, 242, 242, 0.7);
        font-size: 0.94rem;
        line-height: 1.48;
    }
    .figma-modal-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
    }
    .update-log-list {
        display: grid;
        gap: 12px;
    }
    .update-log-entry {
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.03);
        padding: 14px;
        display: grid;
        gap: 8px;
    }
    .update-log-meta {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    .update-log-meta span {
        color: rgba(242, 242, 242, 0.6);
        font-size: 0.8rem;
    }
    .update-log-entry p {
        margin: 0;
        color: rgba(242, 242, 242, 0.76);
        font-size: 0.9rem;
        line-height: 1.5;
    }
    .modal-content label {
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: var(--text-muted);
        font-size: 0.9rem;
    }
    .modal-content input,
    .modal-content textarea {
        padding: 10px 14px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.05);
        color: #f2f2f2;
        font-family: inherit;
    }
    .modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(242, 242, 242, 0.75);
        font-size: 1.1rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition:
            background var(--motion-duration-short) var(--motion-ease-standard),
            border var(--motion-duration-short) var(--motion-ease-standard);
    }
    .modal-close:hover {
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.16);
    }
    footer {
        border-top: 1px solid var(--border-soft);
        padding: 24px 0;
        margin-top: 48px;
        color: var(--text-subtle);
        font-size: 0.85rem;
    }
    .footer-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    .footer-link {
        color: var(--text-subtle);
        text-decoration: none;
    }
    .footer-link:hover,
    .footer-link:focus-visible {
        color: var(--text-strong);
    }
    .motion-element {
        opacity: 1;
        transform: none;
    }
    :is(body,:root)[data-hype-theme="cmd-terminal"] {
        --hype-primary-rgb: var(--theme-accent-rgb, 125, 255, 182);
        --hype-secondary-rgb: 94, 214, 156;
        --hype-ambient: #050907;
        --bg-primary: #070b08;
        --bg-gradient: radial-gradient(140% 140% at 10% -10%, rgba(var(--hype-primary-rgb), 0.22), transparent 60%), radial-gradient(120% 120% at 90% 8%, rgba(94, 214, 156, 0.16), transparent 60%), #070b08;
        --bg-pattern:
            repeating-linear-gradient(0deg, rgba(var(--hype-primary-rgb), 0.14) 0, rgba(var(--hype-primary-rgb), 0.14) 1px, transparent 1px, transparent 6px),
            repeating-linear-gradient(90deg, rgba(var(--hype-primary-rgb), 0.08) 0, rgba(var(--hype-primary-rgb), 0.08) 1px, transparent 1px, transparent 48px);
        --bg-pattern-size: 100% 100%, 100% 100%;
        --bg-pattern-size-mobile: 100% 100%, 100% 100%;
        --accent-primary: var(--theme-accent, #7dffb6);
        --accent-secondary: #b8ffd9;
        --font-sans: var(--font-terminal);
        --font-display: var(--font-terminal);
        --text-strong: #e8ffe9;
        --text-muted: rgba(232, 255, 233, 0.78);
        --text-subtle: rgba(232, 255, 233, 0.62);
        --nav-border: rgba(125, 255, 182, 0.18);
        --nav-surface: rgba(6, 10, 8, 0.82);
    }
    :is(body,:root)[data-hype-theme="simplistic"] {
        --hype-primary-rgb: var(--theme-accent-rgb, 226, 182, 122);
        --hype-secondary-rgb: 255, 255, 255;
        --hype-ambient: #0e1013;
        --bg-primary: #0e1013;
        --bg-gradient: radial-gradient(120% 120% at 50% -18%, rgba(255, 255, 255, 0.08), transparent 60%), #0e1013;
        --bg-pattern:
            linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
            radial-gradient(360px 240px at 80% 20%, rgba(226, 182, 122, 0.1), transparent 70%);
        --bg-pattern-size: 100% 100%, 100% 100%;
        --bg-pattern-size-mobile: 100% 100%, 100% 100%;
        --accent-primary: var(--theme-accent, #e2b67a);
        --accent-secondary: #f1e5d4;
    }
    :is(body,:root)[data-hype-theme="micro-grid"] {
        --hype-primary-rgb: var(--theme-accent-rgb, 154, 185, 255);
        --hype-secondary-rgb: 126, 203, 255;
        --hype-ambient: #0a0e16;
        --bg-primary: #0b0f17;
        --bg-gradient: radial-gradient(120% 120% at 20% 0%, rgba(154, 185, 255, 0.22), transparent 60%), radial-gradient(120% 120% at 90% 10%, rgba(126, 203, 255, 0.18), transparent 65%), #0b0f17;
        --bg-pattern:
            repeating-linear-gradient(0deg, rgba(var(--hype-primary-rgb), 0.18) 0, rgba(var(--hype-primary-rgb), 0.18) 1px, transparent 1px, transparent 18px),
            repeating-linear-gradient(90deg, rgba(var(--hype-primary-rgb), 0.14) 0, rgba(var(--hype-primary-rgb), 0.14) 1px, transparent 1px, transparent 18px);
        --bg-pattern-size: 100% 100%, 100% 100%;
        --bg-pattern-size-mobile: 100% 100%, 100% 100%;
        --accent-primary: var(--theme-accent, #9ab9ff);
        --accent-secondary: #c5d6ff;
    }
    :is(body,:root)[data-hype-theme="galaxy"] {
        --hype-primary-rgb: var(--theme-accent-rgb, 181, 149, 255);
        --hype-secondary-rgb: 120, 210, 255;
        --hype-ambient: #05070f;
        --bg-primary: #05070f;
        --bg-gradient: radial-gradient(130% 120% at 18% 8%, rgba(181, 149, 255, 0.26), transparent 60%), radial-gradient(120% 120% at 88% 14%, rgba(120, 210, 255, 0.2), transparent 65%), #05070f;
        --bg-pattern:
            radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.6), transparent 60%),
            radial-gradient(2px 2px at 70% 60%, rgba(255, 255, 255, 0.5), transparent 60%),
            radial-gradient(2px 2px at 40% 80%, rgba(255, 255, 255, 0.5), transparent 60%),
            radial-gradient(380px 280px at 70% 20%, rgba(181, 149, 255, 0.14), transparent 70%);
        --bg-pattern-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
        --bg-pattern-size-mobile: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
        --accent-primary: var(--theme-accent, #b595ff);
        --accent-secondary: #8fd2ff;
    }
    :is(body,:root)[data-hype-theme="blueprint"] {
        --hype-primary-rgb: var(--theme-accent-rgb, 126, 203, 255);
        --hype-secondary-rgb: 92, 168, 255;
        --hype-ambient: #071528;
        --bg-primary: #071528;
        --bg-gradient: radial-gradient(120% 140% at 20% 10%, rgba(126, 203, 255, 0.2), transparent 60%), radial-gradient(120% 120% at 88% 8%, rgba(92, 168, 255, 0.18), transparent 65%), #071528;
        --bg-pattern:
            repeating-linear-gradient(0deg, rgba(126, 203, 255, 0.22) 0, rgba(126, 203, 255, 0.22) 1px, transparent 1px, transparent 26px),
            repeating-linear-gradient(90deg, rgba(126, 203, 255, 0.18) 0, rgba(126, 203, 255, 0.18) 1px, transparent 1px, transparent 26px),
            repeating-linear-gradient(0deg, rgba(126, 203, 255, 0.12) 0, rgba(126, 203, 255, 0.12) 1px, transparent 1px, transparent 130px),
            repeating-linear-gradient(90deg, rgba(126, 203, 255, 0.12) 0, rgba(126, 203, 255, 0.12) 1px, transparent 1px, transparent 130px);
        --bg-pattern-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
        --bg-pattern-size-mobile: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
        --accent-primary: var(--theme-accent, #7ecbff);
        --accent-secondary: #b7e4ff;
    }
    :is(body,:root)[data-hype-theme="holographic"] {
        --hype-primary-rgb: var(--theme-accent-rgb, 143, 246, 255);
        --hype-secondary-rgb: 186, 148, 255;
        --hype-ambient: #0b0c12;
        --bg-primary: #0b0c12;
        --bg-gradient: conic-gradient(from 140deg at 40% 20%, rgba(143, 246, 255, 0.2), rgba(186, 148, 255, 0.18), rgba(255, 195, 232, 0.2), rgba(143, 246, 255, 0.2));
        --bg-pattern:
            linear-gradient(120deg, rgba(255, 255, 255, 0.06), rgba(143, 246, 255, 0.12), rgba(255, 195, 232, 0.12)),
            radial-gradient(320px 220px at 80% 10%, rgba(186, 148, 255, 0.18), transparent 70%);
        --bg-pattern-size: 100% 100%, 100% 100%;
        --bg-pattern-size-mobile: 100% 100%, 100% 100%;
        --accent-primary: var(--theme-accent, #8ff6ff);
        --accent-secondary: #f1b7ff;
    }
    :is(body,:root)[data-hype-theme="arcade"] {
        --hype-primary-rgb: var(--theme-accent-rgb, 255, 141, 232);
        --hype-secondary-rgb: 255, 214, 106;
        --hype-ambient: #0d0a12;
        --bg-primary: #0d0a12;
        --bg-gradient: radial-gradient(120% 120% at 16% 10%, rgba(255, 141, 232, 0.24), transparent 60%), radial-gradient(120% 120% at 86% 18%, rgba(255, 214, 106, 0.2), transparent 65%), #0d0a12;
        --bg-pattern:
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 12px),
            repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 12px);
        --bg-pattern-size: 100% 100%, 100% 100%;
        --bg-pattern-size-mobile: 100% 100%, 100% 100%;
        --accent-primary: var(--theme-accent, #ff8de8);
        --accent-secondary: #ffd66a;
    }
    :is(body,:root)[data-hype-mode="true"] {
        --hype-bg-a: var(--hype-bg-a, radial-gradient(130% 150% at 12% 4%, rgba(var(--hype-primary-rgb), 0.24), transparent 58%));
        --hype-bg-b: var(--hype-bg-b, radial-gradient(130% 130% at 88% 14%, rgba(var(--hype-secondary-rgb), 0.3), transparent 62%));
        --hype-bg-c: var(--hype-bg-c, linear-gradient(140deg, rgba(255, 255, 255, 0.04), rgba(var(--hype-primary-rgb), 0.05)));
        background: var(--hype-bg-a), var(--hype-bg-b), var(--hype-bg-c), var(--hype-ambient, #0a0c10);
        transition: background var(--motion-duration-long) var(--motion-ease-decelerate);
    }
    :is(body,:root)[data-hype-mode="true"]::before {
        animation: none;
        opacity: 0.88;
        mix-blend-mode: screen;
    }
    :is(body,:root)[data-hype-mode="true"]::after {
        opacity: 0.6;
        mix-blend-mode: screen;
        filter: none;
    }
    :is(body,:root)[data-hype-transition="enter"] {
        animation: none;
    }
    :is(body,:root)[data-hype-transition="enter"]::before {
        opacity: 1;
    }
    :is(body,:root)[data-hype-mode="true"] header {
        box-shadow: none;
        backdrop-filter: none;
    }
    :is(body,:root)[data-hype-mode="true"] header .container {
        border-color: rgba(var(--hype-secondary-rgb), 0.26);
        background: linear-gradient(140deg, rgba(var(--hype-primary-rgb), 0.12), rgba(var(--hype-secondary-rgb), 0.08));
        box-shadow: var(--shadow-strong);
        backdrop-filter: blur(20px) saturate(140%);
    }
    :is(body,:root)[data-hype-mode="true"] .hero,
    :is(body,:root)[data-hype-mode="true"] .panel,
    :is(body,:root)[data-hype-mode="true"] .card,
    :is(body,:root)[data-hype-mode="true"] .section-block,
    :is(body,:root)[data-hype-mode="true"] .stat-card,
    :is(body,:root)[data-hype-mode="true"] .portfolio-card,
    :is(body,:root)[data-hype-mode="true"] .marketplace-card {
        animation: none;
        box-shadow: 0 28px 70px rgba(8, 10, 20, 0.55);
        border-color: rgba(var(--hype-secondary-rgb), 0.24);
    }
    :is(body,:root)[data-hype-mode="true"] .apply-button {
        box-shadow:
            0 16px 32px rgba(var(--hype-primary-rgb), 0.25),
            0 0 0 1px rgba(var(--hype-primary-rgb), 0.35);
        animation: none;
    }
    :is(body,:root)[data-hype-mode="true"] .ghost-button {
        animation: none;
    }
    :is(body,:root)[data-hype-mode="true"] .nav-brand a {
        text-shadow: 0 0 18px rgba(var(--hype-secondary-rgb), 0.55);
    }
    :is(body,:root)[data-hype-mode="true"] .page-menu a::after {
        transform: scaleX(1);
        opacity: 1;
    }
    .hype-cutscene {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        z-index: 80;
        pointer-events: none;
    }
    .hype-cutscene[data-active="true"] {
        display: flex;
        pointer-events: auto;
    }
    .hype-cutscene::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 120% at 50% 40%, rgba(16, 25, 52, 0.7), rgba(5, 6, 12, 0.9));
        backdrop-filter: blur(18px);
        opacity: 0;
        transition: opacity var(--motion-duration-long) var(--motion-ease-standard);
    }
    .hype-cutscene[data-active="true"]::before {
        opacity: 1;
    }
    .hype-core {
        position: relative;
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08),
            rgba(var(--hype-primary-rgb), 0.16)
        );
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 20px 60px rgba(6, 10, 22, 0.6);
        border-radius: 20px;
        padding: 28px;
        max-width: 520px;
        width: min(520px, 100%);
        z-index: 2;
        opacity: 0;
        transform: translateY(28px) scale(0.98);
        transition:
            opacity var(--motion-duration-medium) var(--motion-ease-standard),
            transform var(--motion-duration-long) var(--motion-ease-decelerate);
        overflow: hidden;
    }
    .hype-cutscene[data-active="true"] .hype-core {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    .hype-core::before,
    .hype-core::after {
        content: "";
        position: absolute;
        inset: -40%;
        background: conic-gradient(
            from 90deg,
            rgba(var(--hype-primary-rgb), 0.16),
            rgba(var(--hype-secondary-rgb), 0.16),
            rgba(var(--hype-primary-rgb), 0.12)
        );
        filter: blur(30px);
        opacity: 0.7;
        animation: hype-ribbon 18s linear infinite;
        z-index: -1;
    }
    .hype-core::after {
        animation-direction: reverse;
        opacity: 0.5;
    }
    .hype-core h3 {
        margin: 6px 0 8px 0;
        letter-spacing: -0.02em;
    }
    .hype-core p {
        margin: 0 0 8px 0;
        color: rgba(242, 242, 242, 0.78);
    }
    .hype-core .hype-note {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px dashed rgba(255, 255, 255, 0.18);
        font-size: 0.9rem;
        margin-bottom: 10px;
    }
    .hype-core .hype-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 12px;
    }
    .hype-core .hype-actions button {
        pointer-events: auto;
    }
    .hype-burst {
        position: absolute;
        inset: -40%;
        background: radial-gradient(60% 60% at 50% 50%, rgba(var(--hype-primary-rgb), 0.2), transparent 70%);
        opacity: 0;
        transition: opacity var(--motion-duration-medium) var(--motion-ease-standard);
    }
    .hype-cutscene[data-active="true"] .hype-burst {
        opacity: 1;
    }
    .hype-cutscene .hype-laser {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--motion-duration-medium) var(--motion-ease-standard);
        mix-blend-mode: screen;
    }
    .hype-cutscene[data-active="true"] .hype-laser {
        opacity: 0.85;
    }
    .hype-cutscene .laser-flow-container {
        width: 100%;
        height: 100%;
    }
    .hype-react-layer {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 420ms var(--motion-ease-standard);
    }
    .hype-react-layer[data-active="true"] {
        opacity: 1;
    }
    .hype-react-layer::before,
    .hype-react-layer::after {
        content: "";
        position: absolute;
        inset: -10%;
        background: radial-gradient(140% 140% at 10% 12%, rgba(var(--hype-primary-rgb), 0.18), transparent 58%),
            radial-gradient(140% 140% at 90% 12%, rgba(var(--hype-secondary-rgb), 0.18), transparent 62%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(var(--hype-primary-rgb), 0.08));
        opacity: 0.7;
        animation: hype-drift 18s ease-in-out infinite;
    }
    .hype-react-layer::after {
        inset: -20%;
        opacity: 0.45;
        filter: blur(18px);
        animation: hype-float 22s ease-in-out infinite;
    }
    :is(body,:root)[data-hype-react="true"] .hype-spark-layer {
        display: none !important;
    }
    .decoration-ribbon {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
        border: 1px solid rgba(255, 255, 255, 0.16);
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }
    .decoration-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        flex-shrink: 0;
        background: linear-gradient(
            135deg,
            var(--decoration-accent, rgba(95, 227, 197, 0.95)),
            rgba(255, 255, 255, 0.85)
        );
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.08),
            0 8px 16px rgba(4, 8, 20, 0.35);
    }
    .decorated {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        --decoration-opacity: 0.65;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
        border-color: rgba(255, 255, 255, 0.16);
    }
    .decorated::before {
        content: "";
        position: absolute;
        inset: -6%;
        border-radius: inherit;
        background: var(--decoration-bg, transparent);
        background-size: 140% 140%;
        background-repeat: no-repeat;
        opacity: var(--decoration-opacity);
        z-index: -2;
        transform: translate3d(0, 0, 0);
        filter: saturate(1.1) contrast(1.05);
        pointer-events: none;
        transition:
            transform var(--motion-duration-long) var(--motion-ease-decelerate),
            opacity var(--motion-duration-medium) var(--motion-ease-standard);
    }
    .decorated::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        border: 1px solid var(--decoration-accent, rgba(255, 255, 255, 0.18));
        opacity: 0.85;
        z-index: -1;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
        filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.35));
        pointer-events: none;
        transition: opacity var(--motion-duration-medium) var(--motion-ease-standard);
    }
    .decorated:hover::before {
        transform: translate3d(2px, -1px, 0) scale(1.005);
    }
    .decorated:hover::after {
        opacity: 0.92;
    }
    :is(body,:root)[data-hype-mode="true"] .decorated::before {
        animation: none;
        opacity: calc(var(--decoration-opacity) + 0.08);
    }
    :is(body,:root)[data-hype-mode="true"] .decorated::after {
        animation: none;
    }
    .shop-card.decorated {
        --decoration-opacity: 0.9;
        background-color: rgba(8, 10, 16, 0.75);
    }
    .marketplace-card.decorated,
    .portfolio-card.decorated {
        --decoration-opacity: 0.82;
        --marketplace-accent: var(--decoration-accent, var(--accent-primary));
        border-color: rgba(255, 255, 255, 0.2);
    }
    .marketplace-card.decorated {
        box-shadow:
            inset 4px 0 0 var(--marketplace-accent),
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 28px 72px rgba(6, 10, 22, 0.45);
    }
    .marketplace-detail-modal.decorated {
        border-color: rgba(255, 255, 255, 0.2);
        overflow-x: hidden;
        overflow-y: auto;
        background:
            linear-gradient(
                150deg,
                rgba(14, 18, 26, 0.9),
                rgba(10, 12, 20, 0.88)
            ),
            var(
                --decoration-bg,
                linear-gradient(
                    160deg,
                    rgba(255, 255, 255, 0.06),
                    rgba(255, 255, 255, 0.02)
                )
            );
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size:
            100% 100%,
            130% 130%;
        background-attachment: local;
    }
    .marketplace-detail-modal.decorated::before,
    .marketplace-detail-modal.decorated::after {
        content: none;
    }
    .marketplace-detail-modal.decorated > * {
        position: relative;
        z-index: 1;
    }
    .hype-spark-layer {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 6;
        opacity: 0;
        visibility: hidden;
        mix-blend-mode: screen;
        background: none;
        filter: drop-shadow(0 0 30px rgba(var(--hype-primary-rgb), 0.35));
        transition:
            opacity var(--motion-duration-long) var(--motion-ease-standard),
            visibility var(--motion-duration-medium) var(--motion-ease-standard);
    }
    .hype-spark-layer::before,
    .hype-spark-layer::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        background-repeat: no-repeat;
        background-size: 180% 180%, 160% 160%;
        transition: opacity var(--motion-duration-medium) var(--motion-ease-standard);
    }
    :is(body,:root)[data-hype-mode="true"] .hype-spark-layer {
        opacity: 1;
        visibility: visible;
        background:
            radial-gradient(420px 360px at 18% 32%, rgba(var(--hype-primary-rgb), 0.2), transparent 70%),
            radial-gradient(400px 300px at 78% 18%, rgba(var(--hype-secondary-rgb), 0.18), transparent 70%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(var(--hype-primary-rgb), 0.08));
        animation: none;
    }
    :is(body,:root)[data-hype-mode="true"] .hype-spark-layer::before {
        opacity: 0.9;
        background:
            radial-gradient(320px 320px at 14% 22%, rgba(255, 255, 255, 0.16), transparent 68%),
            conic-gradient(
                from 45deg at 60% 40%,
                rgba(var(--hype-secondary-rgb), 0.16),
                rgba(var(--hype-primary-rgb), 0.14),
                rgba(var(--hype-secondary-rgb), 0.2),
                rgba(var(--hype-primary-rgb), 0.12)
            );
        animation: none;
    }
    :is(body,:root)[data-hype-mode="true"] .hype-spark-layer::after {
        opacity: 0.8;
        background:
            radial-gradient(220px 180px at 82% 68%, rgba(var(--hype-primary-rgb), 0.22), transparent 70%),
            linear-gradient(115deg, rgba(255, 255, 255, 0.05), rgba(var(--hype-secondary-rgb), 0.06));
        animation: none;
    }
    :is(body,:root)[data-hype-transition="enter"] .hype-spark-layer {
        animation: none;
    }
    :is(body,:root)[data-hype-transition="enter"] .hype-spark-layer::before,
    :is(body,:root)[data-hype-transition="enter"] .hype-spark-layer::after {
        opacity: 1;
    }
    .decoration-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.16);
        font-size: 0.82rem;
        letter-spacing: 0.02em;
    }
    @keyframes hype-drift {
        0% {
            transform: translate3d(0, 0, 0);
        }
        50% {
            transform: translate3d(-12px, 10px, 0);
        }
        100% {
            transform: translate3d(14px, -12px, 0);
        }
    }
    @keyframes hype-float {
        0% {
            transform: translateY(0px) scale(1);
        }
        50% {
            transform: translateY(-8px) scale(1.01);
        }
        100% {
            transform: translateY(6px) scale(0.995);
        }
    }
    @keyframes hype-pulse {
        0% {
            box-shadow:
                0 0 0 0 rgba(var(--hype-primary-rgb), 0.24),
                0 14px 32px rgba(var(--hype-primary-rgb), 0.3);
        }
        50% {
            box-shadow:
                0 0 0 10px rgba(var(--hype-primary-rgb), 0.05),
                0 14px 32px rgba(var(--hype-primary-rgb), 0.55);
        }
        100% {
            box-shadow:
                0 0 0 0 rgba(var(--hype-primary-rgb), 0.18),
                0 14px 32px rgba(var(--hype-primary-rgb), 0.26);
        }
    }
    @keyframes hype-ghost {
        0% {
            box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.08);
        }
        50% {
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
        }
        100% {
            box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.12);
        }
    }
    @keyframes hype-ribbon {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes hype-sparks {
        0% {
            background-position: 0 0, 100% 0, 0 0;
            transform: translate3d(0, 0, 0);
        }
        50% {
            background-position: 10% 4%, 90% 8%, 0 0;
            transform: translate3d(-4px, 6px, 0);
        }
        100% {
            background-position: -8% -6%, 110% -10%, 0 0;
            transform: translate3d(6px, -4px, 0);
        }
    }
    @keyframes hype-veil {
        0% {
            background-size: 100% 100%, 100% 100%, 100% 100%;
            opacity: 1;
        }
        50% {
            background-size: 104% 104%, 98% 98%, 100% 100%;
            opacity: 0.92;
        }
        100% {
            background-size: 102% 102%, 102% 102%, 100% 100%;
            opacity: 1;
        }
    }
    @keyframes hype-stream {
        0% {
            background-position: 0 0, 0 0;
            transform: translate3d(0, 0, 0) scale(1);
        }
        50% {
            background-position: 12% 6%, -6% 10%;
            transform: translate3d(-6px, 4px, 0) scale(1.02);
        }
        100% {
            background-position: -10% -8%, 8% -12%;
            transform: translate3d(6px, -4px, 0) scale(1);
        }
    }
    @keyframes hype-prism {
        0% {
            background-position: 0 0, 0 0;
            transform: rotate(0deg) scale(1);
        }
        50% {
            background-position: 6% 8%, -8% 12%;
            transform: rotate(2deg) scale(1.01);
        }
        100% {
            background-position: -6% -8%, 10% -10%;
            transform: rotate(-2deg) scale(1);
        }
    }
    @keyframes hype-layer-intro {
        0% {
            transform: scale(0.98);
            opacity: 0;
        }
        60% {
            transform: scale(1.02);
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
    @keyframes sakura-fall {
        0% {
            background-position: 0 -140px, 60% -240px, 30% -180px, 0 0;
        }
        50% {
            background-position: -30px 120px, 40% 80px, 20% 60px, 0 0;
        }
        100% {
            background-position: -80px 320px, 30% 260px, 10% 240px, 0 0;
        }
    }
    @keyframes ember-arc {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes amethyst-flow {
        0% {
            background-position: 0 0, 0 0;
        }
        50% {
            background-position: 20px 18px, 0 0;
        }
        100% {
            background-position: -12px -14px, 0 0;
        }
    }
    @keyframes void-warp {
        0% {
            background-position: 0 0, 0 0;
        }
        50% {
            background-position: 10% 8%, -6% -10%;
        }
        100% {
            background-position: -12% -6%, 8% 12%;
        }
    }
    @keyframes decorationFlow {
        0% {
            transform: translate3d(-6px, 0, 0) scale(1);
        }
        50% {
            transform: translate3d(6px, -6px, 0) scale(1.02);
        }
        100% {
            transform: translate3d(-4px, 4px, 0) scale(1);
        }
    }
    @keyframes decorationPulse {
        0% {
            opacity: 0.6;
        }
        50% {
            opacity: 0.92;
        }
        100% {
            opacity: 0.6;
        }
    }
    @keyframes portfolioSceneDrift {
        0% {
            transform: translate3d(-1.5%, -1%, 0) scale(1.01);
        }
        50% {
            transform: translate3d(1.8%, 1.1%, 0) scale(1.04);
        }
        100% {
            transform: translate3d(-1%, 1.6%, 0) scale(1.02);
        }
    }
    @keyframes portfolioTextDrift {
        0% {
            transform: translate3d(0, 0, 0);
            opacity: 0.98;
        }
        50% {
            transform: translate3d(0, -1px, 0);
            opacity: 1;
        }
        100% {
            transform: translate3d(0, 0, 0);
            opacity: 0.98;
        }
    }
    @keyframes portfolioTerminalFlicker {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0.97;
        }
    }
    @keyframes portfolioCosmicFloat {
        0% {
            transform: translate3d(0, 0, 0);
        }
        50% {
            transform: translate3d(0, -2px, 0);
        }
        100% {
            transform: translate3d(0, 0, 0);
        }
    }
    @keyframes portfolioBlueprintSweep {
        0% {
            transform: translate3d(0, 0, 0);
            opacity: 0.96;
        }
        50% {
            transform: translate3d(0.6px, 0, 0);
            opacity: 1;
        }
        100% {
            transform: translate3d(0, 0, 0);
            opacity: 0.96;
        }
    }
    .ui-progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 3px;
        border-radius: 0 999px 999px 0;
        background: linear-gradient(90deg, #89ffe4, #ffd894);
        opacity: 0;
        pointer-events: none;
        z-index: 7400;
        transition:
            opacity var(--motion-duration-short) var(--motion-ease-standard),
            width 120ms linear,
            box-shadow var(--motion-duration-short) var(--motion-ease-standard);
    }
    .ui-progress-bar::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.78) 50%, transparent 100%);
        transform: translateX(-120%);
        opacity: 0;
    }
    .ui-spotlight {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 2;
        mix-blend-mode: screen;
        opacity: 0;
        transition: opacity var(--motion-duration-medium) var(--motion-ease-standard);
    }
    .ui-variant-toggle {
        position: fixed;
        left: clamp(12px, 2vw, 22px);
        bottom: clamp(12px, 2vw, 22px);
        min-height: 44px;
        padding: 10px 16px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        background: linear-gradient(135deg, rgba(12, 16, 24, 0.92), rgba(8, 11, 18, 0.92));
        color: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 36px rgba(3, 6, 12, 0.58);
        z-index: 7600;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        font-size: var(--text-size-xs);
    }
    .ui-variant-toggle__dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.45);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transition:
            background var(--motion-duration-short) var(--motion-ease-standard),
            box-shadow var(--motion-duration-short) var(--motion-ease-standard);
    }
    .ui-variant-toggle:hover,
    .ui-variant-toggle:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.42);
        box-shadow: 0 22px 40px rgba(3, 6, 12, 0.65);
    }
    .ui-variant-toggle:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.68);
        outline-offset: 3px;
    }
    .ui-variant-toggle[aria-pressed="true"] {
        border-color: rgba(111, 255, 224, 0.78);
        background: linear-gradient(135deg, rgba(14, 26, 32, 0.94), rgba(8, 20, 18, 0.94));
        color: #ffffff;
        box-shadow:
            0 24px 44px rgba(2, 6, 10, 0.65),
            0 0 0 1px rgba(111, 255, 224, 0.32);
    }
    .ui-variant-toggle[aria-pressed="true"] .ui-variant-toggle__dot {
        background: #6fffe0;
        box-shadow: 0 0 0 8px rgba(111, 255, 224, 0.14);
        animation: ui-toggle-dot 1.8s ease-in-out infinite;
    }
    body[data-modal-open="true"] .ui-variant-toggle {
        opacity: 0;
        pointer-events: none;
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] {
        --bg-primary: #05070d;
        --bg-panel: rgba(8, 11, 18, 0.88);
        --bg-surface: rgba(12, 17, 24, 0.84);
        --bg-glass: rgba(5, 8, 15, 0.9);
        --border-soft: rgba(255, 255, 255, 0.22);
        --border-strong: rgba(255, 255, 255, 0.32);
        --glass-border: rgba(255, 255, 255, 0.26);
        --text-strong: #ffffff;
        --text-muted: rgba(255, 255, 255, 0.9);
        --text-subtle: rgba(255, 255, 255, 0.78);
        --accent-primary: #6fffe0;
        --accent-secondary: #ffd894;
        --button-primary-start: #6fffe0;
        --button-primary-end: #9effcb;
        --button-primary-ink: #031712;
        --button-primary-border: rgba(172, 255, 230, 0.82);
        --button-primary-shadow: 0 18px 34px rgba(46, 129, 112, 0.42);
        --button-primary-shadow-hover: 0 24px 44px rgba(54, 154, 134, 0.58);
        --button-secondary-bg-a: rgba(255, 255, 255, 0.18);
        --button-secondary-bg-b: rgba(255, 255, 255, 0.1);
        --button-secondary-border: rgba(255, 255, 255, 0.34);
        --nav-border: rgba(255, 255, 255, 0.22);
        --shadow-soft: 0 22px 62px rgba(0, 0, 0, 0.64);
        --shadow-strong: 0 36px 86px rgba(0, 0, 0, 0.78);
        --bg-gradient:
            radial-gradient(130% 120% at 8% 2%, rgba(111, 255, 224, 0.2) 0%, rgba(5, 7, 13, 0) 54%),
            radial-gradient(125% 115% at 95% 6%, rgba(255, 216, 148, 0.18) 0%, rgba(5, 7, 13, 0) 56%),
            radial-gradient(140% 130% at 50% 114%, rgba(112, 151, 255, 0.2) 0%, rgba(5, 7, 13, 0) 62%),
            #05070d;
        --bg-pattern:
            radial-gradient(960px 560px at 80% -8%, rgba(255, 255, 255, 0.12), transparent 62%),
            radial-gradient(760px 520px at 10% 18%, rgba(111, 255, 224, 0.16), transparent 62%),
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 64px),
            repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 64px);
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .global-overlay {
        opacity: 0.66;
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .category-glow {
        opacity: 0.58;
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .ui-progress-bar {
        opacity: 1;
        box-shadow: 0 8px 20px rgba(111, 255, 224, 0.38);
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .ui-progress-bar::after {
        opacity: 0.62;
        animation: none;
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .ui-spotlight {
        opacity: 0.36;
        background:
            radial-gradient(
                320px 320px at var(--cursor-x, 50vw) var(--cursor-y, 28vh),
                rgba(111, 255, 224, 0.2) 0%,
                rgba(111, 255, 224, 0) 70%
            ),
            radial-gradient(
                540px 540px at var(--cursor-x, 50vw) var(--cursor-y, 28vh),
                rgba(255, 216, 148, 0.08) 0%,
                rgba(255, 216, 148, 0) 78%
            );
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .panel,
    :is(body,:root)[data-ui-variant="contrast-interactive"] .card,
    :is(body,:root)[data-ui-variant="contrast-interactive"] .section-block {
        border-color: rgba(255, 255, 255, 0.24);
        overflow: hidden;
        background:
            linear-gradient(
                155deg,
                rgba(255, 255, 255, 0.12) 0%,
                rgba(255, 255, 255, 0.04) 42%,
                rgba(0, 0, 0, 0.2) 100%
            ),
            rgba(8, 11, 18, 0.9);
        box-shadow:
            0 28px 62px rgba(0, 0, 0, 0.62),
            inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .panel::before,
    :is(body,:root)[data-ui-variant="contrast-interactive"] .card::before,
    :is(body,:root)[data-ui-variant="contrast-interactive"] .section-block::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0) 38%
        );
        opacity: 0.46;
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .interactive-tilt {
        transform-style: preserve-3d;
        will-change: transform;
        transition:
            transform var(--motion-duration-short) var(--motion-ease-decelerate),
            box-shadow var(--motion-duration-medium) var(--motion-ease-standard),
            border-color var(--motion-duration-short) var(--motion-ease-standard);
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .interactive-tilt:hover {
        transform:
            translateY(-2px)
            rotateX(var(--tilt-x, 0deg))
            rotateY(var(--tilt-y, 0deg));
        border-color: rgba(111, 255, 224, 0.52);
        box-shadow:
            0 24px 52px rgba(0, 0, 0, 0.62),
            0 0 0 1px rgba(111, 255, 224, 0.34);
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .nav-links a {
        color: rgba(255, 255, 255, 0.94);
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.04);
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .nav-links a:hover,
    :is(body,:root)[data-ui-variant="contrast-interactive"] .nav-links a:focus-visible {
        color: #ffffff;
        border-color: rgba(111, 255, 224, 0.5);
        background: rgba(111, 255, 224, 0.16);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .nav-links a.active {
        color: #ffffff;
        border-color: rgba(111, 255, 224, 0.7);
        background: rgba(111, 255, 224, 0.24);
        box-shadow:
            0 14px 30px rgba(0, 0, 0, 0.52),
            0 0 0 1px rgba(111, 255, 224, 0.34);
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .apply-button {
        border-color: rgba(172, 255, 230, 0.82);
        color: #00150f;
        box-shadow:
            0 20px 38px rgba(41, 128, 111, 0.52),
            inset 0 1px 0 rgba(255, 255, 255, 0.54);
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .ghost-button,
    :is(body,:root)[data-ui-variant="contrast-interactive"] .button-ghost {
        border-color: rgba(255, 255, 255, 0.4);
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.08)
        );
        color: #ffffff;
    }
    :is(body,:root)[data-ui-variant="contrast-interactive"] .hero-eyebrow,
    :is(body,:root)[data-ui-variant="contrast-interactive"] .card-subtitle,
    :is(body,:root)[data-ui-variant="contrast-interactive"] .section-subtitle {
        color: rgba(255, 255, 255, 0.9);
    }
    @keyframes ui-progress-scan {
        0% {
            transform: translateX(-120%);
        }
        100% {
            transform: translateX(160%);
        }
    }
    @keyframes ui-toggle-dot {
        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(111, 255, 224, 0.2);
        }
        50% {
            box-shadow: 0 0 0 10px rgba(111, 255, 224, 0.08);
        }
    }
    @media (max-width: 640px) {
        .ui-variant-toggle {
            left: 10px;
            bottom: 10px;
            min-height: 40px;
            padding: 9px 12px;
            font-size: var(--text-size-xs);
            letter-spacing: 0.02em;
        }
        :is(body,:root)[data-ui-variant="contrast-interactive"] .ui-spotlight {
            opacity: 0.26;
        }
    }
    @keyframes balancePulse {
        0% {
            transform: translate3d(0, 0, 0) scale(1);
            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        }
        40% {
            transform: translate3d(0, -1px, 0) scale(1.03);
            box-shadow: 0 10px 24px rgba(95, 227, 197, 0.25);
        }
        100% {
            transform: translate3d(0, 0, 0) scale(1);
            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        }
    }
    @keyframes balanceFlash {
        0% {
            box-shadow: 0 0 0 rgba(95, 227, 197, 0);
        }
        35% {
            box-shadow: 0 18px 36px rgba(95, 227, 197, 0.35);
        }
        100% {
            box-shadow: 0 0 0 rgba(95, 227, 197, 0);
        }
    }
    @keyframes motion-fade-up {
        0% {
            opacity: 0;
            transform: translateY(32px) scale(0.98);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    @keyframes motion-panel {
        0% {
            opacity: 0;
            transform: translateY(28px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @media (prefers-reduced-motion: no-preference) {
        .motion-element {
            animation: motion-fade-up var(--motion-duration-medium) var(--motion-ease-decelerate) both;
            animation-delay: var(--motion-delay, 0ms);
        }
        .hero.motion-element {
            animation-duration: calc(var(--motion-duration-long) + 80ms);
        }
        .portfolio-page.portfolio-import-mode .portfolio-hero h1,
        .portfolio-page.portfolio-import-mode .portfolio-tagline {
            animation: none !important;
        }
        .portfolio-page.portfolio-page-decorated .portfolio-scene::before {
            animation: portfolioSceneDrift 68s linear infinite alternate;
        }
        .portfolio-page.portfolio-page-decorated .portfolio-scene::after {
            animation: none;
        }
        .portfolio-page.portfolio-page-decorated .portfolio-hero h1 {
            animation: portfolioTextDrift 14s ease-in-out infinite;
        }
        .portfolio-page.portfolio-page-decorated .portfolio-tagline {
            animation: portfolioCosmicFloat 18s ease-in-out infinite;
        }
        .portfolio-page.portfolio-page-decorated.portfolio-motion-terminal .portfolio-hero h1 {
            animation: portfolioTerminalFlicker 14s ease-in-out infinite;
        }
        .portfolio-page.portfolio-page-decorated.portfolio-motion-blueprint .portfolio-tagline {
            animation: portfolioBlueprintSweep 16s linear infinite;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        *,
        ::before,
        ::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
    @media (min-width: 720px) {
        .media-upload-row {
            flex-direction: row;
            align-items: center;
            gap: 18px;
        }
        .media-upload-row small {
            flex: 1;
        }
    }
    @media (max-width: 1024px) {
        .hero {
            grid-template-columns: 1fr;
            gap: 24px;
        }
        .hero.hero-with-aside {
            grid-template-columns: 1fr;
        }
        .marketplace-shell {
            grid-template-columns: 1fr;
        }
        .marketplace-grid {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }
        .marketplace-grid[data-view="list"] .marketplace-card {
            grid-template-columns: minmax(0, 1fr);
        }
        .marketplace-grid[data-view="list"] .marketplace-card-footer {
            grid-column: 1;
        }
        .marketplace-panel-filters {
            position: static;
        }
        .card-grid,
        .panel-grid,
        .stat-cards {
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        }
        .builder-grid {
            grid-template-columns: 1fr;
        }
        .builder-preview {
            position: static;
        }
        .marketplace-builder {
            grid-template-columns: 1fr;
        }
        .marketplace-preview {
            position: static;
        }
        .portfolio-hero {
            flex-direction: column;
            gap: 28px;
        }
        .portfolio-hero .hero-meta {
            width: 100%;
        }
        .portfolio-page.portfolio-import-mode {
            width: calc(100vw - 24px);
        }
        .portfolio-immersive-options {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .portfolio-immersive-overlay {
            top: 10px;
            border-radius: 18px 18px 0 0;
            padding: 12px;
        }
        .portfolio-immersive-frame-shell,
        .portfolio-immersive-frame {
            min-height: calc(100vh - 236px);
            min-height: calc(100dvh - 236px);
        }
        .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section {
            padding: 16px 14px 20px;
        }
        .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section:last-of-type {
            border-radius: 0 0 18px 18px;
        }
        .portfolio-page.portfolio-page-decorated .portfolio-scene {
            display: none;
        }
        .portfolio-page.portfolio-page-decorated .portfolio-hero h1,
        .portfolio-page.portfolio-page-decorated .portfolio-tagline {
            animation: none !important;
        }
        .support-grid,
        .ticket-detail-grid {
            grid-template-columns: 1fr;
        }
    }
    @media (max-width: 768px) {
        .container {
            padding: 0 20px;
        }
        main {
            padding: 44px 0 88px;
        }
        .nav-toggle {
            width: auto;
            height: auto;
            min-height: 44px;
            padding: 0 14px;
        }
        .nav-brand a {
            font-size: 0.95rem;
            letter-spacing: 0.12em;
        }
        .nav-links {
            gap: 8px;
        }
        .nav-links a {
            justify-content: flex-start;
            width: 100%;
            padding: 12px 14px;
            font-size: 0.95rem;
        }
        .nav-shell[data-open="true"] {
            max-height: calc(100vh - 120px);
            max-height: calc(100dvh - 120px);
        }
        .hero.decorated {
            padding: 24px;
        }
        body[data-immersive-portfolio="true"] main > .container {
            padding-left: 10px;
            padding-right: 10px;
        }
        body[data-immersive-portfolio="true"] main {
            padding: 10px 0 14px;
        }
        .portfolio-page.portfolio-import-mode {
            width: 100%;
            max-width: none;
            margin-left: 0;
            transform: none;
        }
        .portfolio-immersive-overlay {
            top: 8px;
            gap: 8px;
            padding: 10px 10px 12px;
            border-radius: 16px 16px 0 0;
        }
        .portfolio-immersive-head {
            max-width: 100%;
            padding: 0;
        }
        .portfolio-immersive-options {
            width: 100%;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .portfolio-immersive-options .apply-button,
        .portfolio-immersive-options .ghost-button {
            min-height: 40px;
            font-size: 0.82rem;
            padding: 0 10px;
        }
        .portfolio-immersive-note {
            font-size: 0.76rem;
            padding: 8px 10px;
        }
        .portfolio-immersive-frame-shell,
        .portfolio-immersive-frame {
            min-height: calc(100vh - 230px);
            min-height: calc(100dvh - 230px);
        }
        .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section {
            padding: 14px 12px 18px;
        }
        .portfolio-import-mode.portfolio-import-has-assets .portfolio-assets-section .asset-grid {
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 14px;
        }
        .guild-card-meta {
            grid-template-columns: 1fr;
        }
        .support-form-grid {
            grid-template-columns: 1fr;
        }
        .support-span-2 {
            grid-column: span 1;
        }
        .ticket-filter-form {
            grid-template-columns: 1fr;
        }
        .modal {
            padding: 12px;
        }
        .modal-content {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            padding: 26px 22px 22px;
            padding-top: 44px;
            resize: none;
        }
        .focus-filter {
            flex-wrap: nowrap;
        }
        .marketplace-hero-actions {
            align-items: stretch;
        }
        .marketplace-filter-actions,
        .marketplace-results-meta {
            flex-direction: column;
            align-items: flex-start;
        }
        .marketplace-view-toggle {
            width: 100%;
            justify-content: flex-start;
        }
        .marketplace-card-top {
            flex-direction: column;
            align-items: flex-start;
        }
        .marketplace-card-badges {
            justify-content: flex-start;
        }
        .marketplace-card-detail {
            grid-template-columns: 1fr;
        }
        .marketplace-card-actions {
            width: 100%;
        }
        .marketplace-grid {
            grid-template-columns: minmax(0, 1fr);
        }
        .marketplace-card-actions {
            grid-template-columns: minmax(0, 1fr);
        }
        .marketplace-card-actions .apply-button {
            grid-column: span 1;
        }
        .marketplace-detail-grid {
            grid-template-columns: 1fr;
        }
        .account-area {
            width: 100%;
            justify-content: space-between;
        }
        .hero h1 {
            font-size: 2.4rem;
        }
        .stat-cards {
            margin-top: 16px;
        }
        .card,
        .panel,
        .section-block {
            padding: 22px;
        }
        .shop-section {
            padding: 18px;
        }
        .shop-grid {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
    }
    @media (max-width: 540px) {
        .container {
            padding: 0 16px;
        }
        .share-buttons {
            width: 100%;
        }
        .ticket-detail-meta {
            grid-template-columns: 1fr;
        }
        .status-line {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }
        .portfolio-card-footer {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
        .marketplace-card-footer-meta {
            flex-direction: column;
            align-items: flex-start;
        }
        .marketplace-detail-actions {
            width: 100%;
            flex-direction: column;
        }
    }
    @media (max-width: 600px) {
        body::after {
            background-size: var(--bg-pattern-size-mobile);
            opacity: 0.4;
        }
        main {
            padding: 48px 0 90px;
        }
        .page-menu {
            width: 100%;
            flex-wrap: wrap;
            justify-content: center;
        }
        .page-menu a {
            flex: 1 1 auto;
            justify-content: center;
        }
        .hero-actions,
        .section-actions,
        .card-actions,
        .ticket-detail-actions,
        .support-form-actions,
        .ticket-reply-actions {
            flex-direction: column;
            align-items: stretch;
        }
        .button,
        .apply-button,
        .search-button,
        .ghost-button {
            min-height: 44px;
        }
        .hero-actions .button,
        .section-actions .button,
        .card-actions .button,
        .ticket-detail-actions .button,
        .support-form-actions .button,
        .ticket-reply-actions .button,
        .hero-actions .ghost-button,
        .section-actions .ghost-button,
        .card-actions .ghost-button,
        .ticket-detail-actions .ghost-button,
        .support-form-actions .ghost-button,
        .ticket-reply-actions .ghost-button,
        .hero-actions .apply-button,
        .section-actions .apply-button,
        .card-actions .apply-button,
        .ticket-detail-actions .apply-button,
        .support-form-actions .apply-button,
        .ticket-reply-actions .apply-button {
            width: 100%;
            justify-content: center;
        }
        .support-search {
            flex-direction: column;
            align-items: stretch;
        }
        .support-search input {
            min-width: 0;
            width: 100%;
        }
        #site-nav {
            gap: 16px;
        }
        .guild-setup-tabs {
            grid-template-columns: 1fr;
        }
        .guild-tabs {
            flex-direction: row;
            flex-wrap: wrap;
        }
        .guild-tab {
            flex: 1 1 45%;
            text-align: center;
        }
        .card-grid,
        .panel-grid,
        .stat-cards,
        .support-topic-grid {
            grid-template-columns: 1fr !important;
        }
        .card,
        .panel,
        .section-block {
            padding: 18px;
        }
        th,
        td {
            white-space: normal;
        }
    }