/**
 * ShadowUI Premium – globale High-End-Schicht für Desktop + Mobile.
 * Lädt als letztes Stylesheet und hebt Buttons, Icons, Cards und Shell-Chrome an.
 */

:root {
    --ss-premium-font:
        "Inter",
        "SF Pro Text",
        "Segoe UI Variable",
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    --ss-premium-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ss-premium-shadow-soft:
        0 10px 30px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    --ss-premium-shadow-lift:
        0 18px 42px rgba(0, 0, 0, 0.48),
        0 0 28px color-mix(in srgb, var(--ss-theme-accent, #00ff9f) 18%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    --ss-premium-border: 1px solid color-mix(in srgb, var(--ss-theme-accent-2, #00f5ff) 28%, rgba(255, 255, 255, 0.12));
    --ss-premium-glass:
        linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 38%, transparent 100%),
        color-mix(in srgb, var(--ss-theme-surface-strong, rgba(5, 8, 16, 0.96)) 92%, transparent);
    --ss-premium-btn-shine: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.16) 48%,
        rgba(255, 255, 255, 0) 100%
    );
}

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
body.ss-shell-body {
    font-family: var(--ss-premium-font);
    letter-spacing: 0.01em;
}

/* === Typografie === */
body :where(h1, h2, h3, .ss-text-display) {
    letter-spacing: -0.02em;
    text-wrap: balance;
}

body :where(h1, h2, h3) {
    font-weight: 800;
}

/* === Premium Cards & Panels === */
:where(
    .neon-card,
    .card,
    .panel,
    .glass-panel,
    .stream-card,
    .feed-card,
    .subscription-card,
    .shadow-feedback-modal,
    .modal.modal--auth
) {
    border: var(--ss-premium-border);
    box-shadow: var(--ss-premium-shadow-soft);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

:where(.neon-card, .card, .panel):hover {
    border-color: color-mix(in srgb, var(--ss-theme-accent, #00ff9f) 34%, rgba(255, 255, 255, 0.14));
}

/* === Primary / CTA Buttons === */
:where(
    .neon-button,
    .btn-scan,
    .btn-reset,
    .modal-submit,
    .neon-button-ss,
    .btn-primary,
    .subscribe-btn,
    .contact-submit,
    .upload-submit,
    .upload-next,
    .legal-button--primary,
    .creator-dashboard__button--primary,
    .feed-error button,
    .landing-search-btn,
    .su-guest-hint__cta
) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ss-theme-accent-2, #00f5ff) 42%, rgba(255, 255, 255, 0.18));
    background:
        var(--ss-premium-btn-shine),
        var(--ss-theme-button-bg, linear-gradient(130deg, #a855f7, #00ff9f 52%, #ff00ff));
    color: #050508;
    font-weight: 900;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.34),
        0 0 22px color-mix(in srgb, var(--ss-theme-accent, #00ff9f) 22%, transparent);
    transition:
        transform 0.22s var(--ss-premium-ease),
        box-shadow 0.22s var(--ss-premium-ease),
        border-color 0.22s var(--ss-premium-ease),
        filter 0.22s var(--ss-premium-ease);
}

:where(
    .neon-button,
    .btn-scan,
    .btn-reset,
    .modal-submit,
    .neon-button-ss,
    .btn-primary,
    .subscribe-btn,
    .contact-submit,
    .upload-submit,
    .upload-next,
    .legal-button--primary,
    .creator-dashboard__button--primary,
    .feed-error button,
    .landing-search-btn,
    .su-guest-hint__cta
)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ss-premium-btn-shine);
    transform: translateX(-120%);
    transition: transform 0.55s var(--ss-premium-ease);
    pointer-events: none;
}

:where(
    .neon-button,
    .btn-scan,
    .btn-reset,
    .modal-submit,
    .neon-button-ss,
    .btn-primary,
    .subscribe-btn,
    .contact-submit,
    .upload-submit,
    .upload-next,
    .legal-button--primary,
    .creator-dashboard__button--primary,
    .feed-error button,
    .landing-search-btn,
    .su-guest-hint__cta
):hover,
:where(
    .neon-button,
    .btn-scan,
    .btn-reset,
    .modal-submit,
    .neon-button-ss,
    .btn-primary,
    .subscribe-btn,
    .contact-submit,
    .upload-submit,
    .upload-next,
    .legal-button--primary,
    .creator-dashboard__button--primary,
    .feed-error button,
    .landing-search-btn,
    .su-guest-hint__cta
):focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.04) saturate(1.06);
    box-shadow: var(--ss-premium-shadow-lift);
    outline: none;
}

:where(
    .neon-button,
    .btn-scan,
    .btn-reset,
    .modal-submit,
    .neon-button-ss,
    .btn-primary,
    .subscribe-btn,
    .contact-submit,
    .upload-submit,
    .upload-next,
    .legal-button--primary,
    .creator-dashboard__button--primary,
    .feed-error button,
    .landing-search-btn,
    .su-guest-hint__cta
):hover::after,
:where(
    .neon-button,
    .btn-scan,
    .btn-reset,
    .modal-submit,
    .neon-button-ss,
    .btn-primary,
    .subscribe-btn,
    .contact-submit,
    .upload-submit,
    .upload-next,
    .legal-button--primary,
    .creator-dashboard__button--primary,
    .feed-error button,
    .landing-search-btn,
    .su-guest-hint__cta
):focus-visible::after {
    transform: translateX(120%);
}

:where(
    .neon-button,
    .btn-scan,
    .btn-reset,
    .modal-submit,
    .neon-button-ss,
    .btn-primary,
    .subscribe-btn,
    .contact-submit,
    .upload-submit,
    .upload-next,
    .legal-button--primary,
    .creator-dashboard__button--primary,
    .feed-error button,
    .landing-search-btn,
    .su-guest-hint__cta
):active {
    transform: translateY(0);
    filter: brightness(0.98);
}

/* === Ghost / Secondary Buttons === */
:where(
    .ghost-button,
    .btn-secondary,
    .upload-back,
    .legal-button--ghost,
    .feed-filter-btn,
    .profile-tab-btn
) {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(8, 12, 22, 0.82);
    color: #eef4ff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    transition:
        transform 0.2s var(--ss-premium-ease),
        border-color 0.2s var(--ss-premium-ease),
        box-shadow 0.2s var(--ss-premium-ease),
        background 0.2s var(--ss-premium-ease);
}

:where(
    .ghost-button,
    .btn-secondary,
    .upload-back,
    .legal-button--ghost,
    .feed-filter-btn,
    .profile-tab-btn
):hover,
:where(
    .ghost-button,
    .btn-secondary,
    .upload-back,
    .legal-button--ghost,
    .feed-filter-btn,
    .profile-tab-btn
):focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ss-theme-pink, #ff00ff) 42%, rgba(255, 255, 255, 0.18));
    background:
        linear-gradient(160deg, rgba(255, 0, 255, 0.1), rgba(0, 245, 255, 0.06)),
        rgba(10, 14, 26, 0.9);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.34),
        0 0 18px color-mix(in srgb, var(--ss-theme-pink, #ff00ff) 16%, transparent);
    outline: none;
}

/* === Shell Auth / Icon Buttons === */
:where(.su-btn-auth, .su-btn-plus) {
    border: 1px solid color-mix(in srgb, var(--ss-theme-purple, #a855f7) 58%, rgba(255, 255, 255, 0.14));
    background:
        linear-gradient(155deg, rgba(168, 85, 247, 0.22), rgba(0, 245, 255, 0.08)),
        rgba(10, 14, 26, 0.88);
    color: #f8f2ff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 8px 22px rgba(0, 0, 0, 0.28);
    transition:
        transform 0.2s var(--ss-premium-ease),
        border-color 0.2s var(--ss-premium-ease),
        box-shadow 0.2s var(--ss-premium-ease),
        background 0.2s var(--ss-premium-ease);
}

:where(.su-btn-auth, .su-btn-plus):hover,
:where(.su-btn-auth, .su-btn-plus):focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ss-theme-accent, #00ff9f) 52%, rgba(255, 255, 255, 0.18));
    background:
        linear-gradient(155deg, rgba(0, 255, 159, 0.16), rgba(255, 0, 255, 0.1)),
        rgba(12, 18, 32, 0.94);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 20px color-mix(in srgb, var(--ss-theme-accent, #00ff9f) 22%, transparent),
        0 10px 26px rgba(0, 0, 0, 0.32);
    outline: none;
}

.ss-shell-notify__trigger.su-btn-plus {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 0, 255, 0.18), transparent 52%),
        linear-gradient(155deg, rgba(168, 85, 247, 0.24), rgba(0, 245, 255, 0.1)),
        rgba(10, 14, 26, 0.9);
}

.ss-shell-notify__icon svg {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ss-theme-accent-2, #00f5ff) 34%, transparent));
    transition: transform 0.2s var(--ss-premium-ease), filter 0.2s var(--ss-premium-ease);
}

.ss-shell-notify__trigger:hover .ss-shell-notify__icon svg,
.ss-shell-notify__trigger:focus-visible .ss-shell-notify__icon svg {
    transform: scale(1.06);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ss-theme-accent, #00ff9f) 42%, transparent));
}

/* === Top Actions / Wallet === */
:where(.su-top-action, .ss-wallet-chip, .su-wallet) {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(8, 12, 22, 0.86);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition:
        transform 0.2s var(--ss-premium-ease),
        border-color 0.2s var(--ss-premium-ease),
        box-shadow 0.2s var(--ss-premium-ease);
}

:where(.su-top-action, .ss-wallet-chip, .su-wallet):hover,
:where(.su-top-action, .ss-wallet-chip, .su-wallet):focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ss-theme-accent-2, #00f5ff) 36%, rgba(255, 255, 255, 0.14));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 16px color-mix(in srgb, var(--ss-theme-accent-2, #00f5ff) 14%, transparent);
    outline: none;
}

/* === Navigation Links === */
:where(.su-link, .ss-side-link, .navbar-left a, .navbar-right a) {
    transition:
        color 0.18s var(--ss-premium-ease),
        transform 0.18s var(--ss-premium-ease),
        text-shadow 0.18s var(--ss-premium-ease);
}

:where(.su-link:hover, .ss-side-link:hover, .navbar-left a:hover, .navbar-right a:hover),
:where(.su-link:focus-visible, .ss-side-link:focus-visible, .navbar-left a:focus-visible, .navbar-right a:focus-visible) {
    color: var(--ss-theme-accent, #00ff9f);
    text-shadow: 0 0 14px color-mix(in srgb, var(--ss-theme-accent, #00ff9f) 28%, transparent);
}

.ss-side-link__icon {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    filter: drop-shadow(0 0 4px rgba(0, 245, 255, 0.18));
}

/* === Form Controls === */
:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .modal input
) {
    border: 1px solid rgba(160, 227, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
        rgba(0, 0, 0, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition:
        border-color 0.18s var(--ss-premium-ease),
        box-shadow 0.18s var(--ss-premium-ease),
        background 0.18s var(--ss-premium-ease);
}

:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .modal input
):focus-visible {
    border-color: color-mix(in srgb, var(--ss-theme-pink, #ff00ff) 46%, rgba(160, 227, 255, 0.24));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ss-theme-pink, #ff00ff) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    outline: none;
}

/* === Floating Action Buttons === */
:where(.shadow-feedback-fab, .ss-quick-dm-fab) {
    transition:
        transform 0.22s var(--ss-premium-ease),
        box-shadow 0.22s var(--ss-premium-ease),
        border-color 0.22s var(--ss-premium-ease),
        filter 0.22s var(--ss-premium-ease);
}

:where(.shadow-feedback-fab, .ss-quick-dm-fab):hover,
:where(.shadow-feedback-fab, .ss-quick-dm-fab):focus-visible {
    transform: translateY(-2px) scale(1.02);
    filter: saturate(1.08);
    outline: none;
}

:where(.shadow-feedback-fab, .ss-quick-dm-fab):active {
    transform: translateY(0) scale(0.98);
}

/* === Floating Dock + DM Dropdown === */
.ss-floating-dock {
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.38));
}

.ss-quick-dm-dropdown {
    border-color: color-mix(in srgb, var(--ss-theme-accent-2, #00f5ff) 22%, rgba(255, 255, 255, 0.1));
    box-shadow:
        var(--ss-premium-shadow-soft, 0 18px 48px rgba(0, 0, 0, 0.42)),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ss-quick-dm-dropdown__contact:hover,
.ss-quick-dm-dropdown__contact:focus-visible {
    border-color: color-mix(in srgb, var(--ss-theme-accent, #00ff9f) 42%, rgba(255, 255, 255, 0.12));
}

.ss-quick-dm-dropdown__contact.is-active {
    border-color: color-mix(in srgb, var(--ss-theme-accent-2, #00f5ff) 52%, rgba(255, 255, 255, 0.14));
    box-shadow: 0 0 18px color-mix(in srgb, var(--ss-theme-accent-2, #00f5ff) 18%, transparent);
}

/* === Mobile Bottom Nav === */
body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__dock-item {
    transition:
        color 0.18s var(--ss-premium-ease),
        background 0.18s var(--ss-premium-ease),
        border-color 0.18s var(--ss-premium-ease),
        box-shadow 0.18s var(--ss-premium-ease),
        transform 0.18s var(--ss-premium-ease);
}

body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__dock-item:active {
    transform: scale(0.96);
}

body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__item--create .su-bottom-nav__plus {
    transition:
        transform 0.22s var(--ss-premium-ease),
        box-shadow 0.22s var(--ss-premium-ease);
}

body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__item--create:active .su-bottom-nav__plus {
    transform: scale(0.94);
}

/* === Badges & Chips === */
:where(
    .ss-shell-notify__badge,
    .navbar-stream-notify__badge,
    .ss-dot-badge,
    .auth-puzzle__badge,
    .navbar-link-badge
) {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* === Flash / Status === */
.flash-pill {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* === User Menu === */
.su-userline {
    transition:
        transform 0.2s var(--ss-premium-ease),
        border-color 0.2s var(--ss-premium-ease),
        box-shadow 0.2s var(--ss-premium-ease);
}

.su-userline:hover,
.su-userline:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ss-theme-purple, #a855f7) 48%, rgba(255, 255, 255, 0.14));
    box-shadow:
        0 0 18px color-mix(in srgb, var(--ss-theme-purple, #a855f7) 16%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    outline: none;
}

.su-userline__avatar {
    box-shadow:
        0 0 12px color-mix(in srgb, var(--ss-theme-purple, #a855f7) 24%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* === Scrollbars (Desktop) === */
@media (hover: hover) and (pointer: fine) {
    * {
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--ss-theme-accent-2, #00f5ff) 34%, rgba(255, 255, 255, 0.08)) transparent;
    }

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

    *::-webkit-scrollbar-thumb {
        border-radius: 999px;
        border: 2px solid transparent;
        background:
            linear-gradient(180deg, rgba(0, 255, 159, 0.42), rgba(0, 245, 255, 0.34));
        background-clip: padding-box;
    }

    *::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    :where(
        .neon-button,
        .ghost-button,
        .su-btn-auth,
        .su-btn-plus,
        .shadow-feedback-fab,
        .ss-quick-dm-fab
    )::after {
        display: none;
    }

    :where(
        .neon-button,
        .ghost-button,
        .su-btn-auth,
        .su-btn-plus,
        .shadow-feedback-fab,
        .ss-quick-dm-fab,
        .su-userline,
        .su-top-action
    ):hover,
    :where(
        .neon-button,
        .ghost-button,
        .su-btn-auth,
        .su-btn-plus,
        .shadow-feedback-fab,
        .ss-quick-dm-fab,
        .su-userline,
        .su-top-action
    ):focus-visible {
        transform: none;
    }
}

/* === Shell Topbar === */
body.ss-shell-body .su-topbar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
        rgba(3, 9, 18, 0.82);
    border-bottom: 1px solid color-mix(in srgb, var(--ss-theme-accent-2, #00f5ff) 14%, rgba(255, 255, 255, 0.08));
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.34),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

body.ss-shell-body .su-search input {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        rgba(0, 0, 0, 0.28);
    transition:
        border-color 0.18s var(--ss-premium-ease),
        box-shadow 0.18s var(--ss-premium-ease);
}

body.ss-shell-body .su-search input:focus-visible {
    border-color: color-mix(in srgb, var(--ss-theme-accent, #00ff9f) 42%, rgba(255, 255, 255, 0.14));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-theme-accent, #00ff9f) 12%, transparent);
    outline: none;
}

/* === Modal / Overlay === */
.modal-overlay {
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.modal-close {
    transition:
        transform 0.18s var(--ss-premium-ease),
        color 0.18s var(--ss-premium-ease),
        background 0.18s var(--ss-premium-ease);
}

.modal-close:hover,
.modal-close:focus-visible {
    transform: scale(1.06);
    color: #00ff9f;
    outline: none;
}

/* === Feed / Live Cards === */
:where(
    .feed-card,
    .home-live-card,
    .lm-card,
    .lm-tile,
    .ss-live-feed__card,
    .recon-card,
    .community-panel
) {
    transition:
        transform 0.22s var(--ss-premium-ease),
        border-color 0.22s var(--ss-premium-ease),
        box-shadow 0.22s var(--ss-premium-ease);
}

@media (hover: hover) and (pointer: fine) {
    :where(
        .feed-card,
        .home-live-card,
        .lm-card,
        .lm-tile,
        .ss-live-feed__card,
        .recon-card
    ):hover {
        transform: translateY(-2px);
        box-shadow: var(--ss-premium-shadow-lift);
    }
}

/* === Icon Buttons === */
:where(.ss-icon-btn, .modal-password-toggle, .auth-puzzle__refresh) {
    transition:
        transform 0.18s var(--ss-premium-ease),
        border-color 0.18s var(--ss-premium-ease),
        background 0.18s var(--ss-premium-ease),
        box-shadow 0.18s var(--ss-premium-ease),
        color 0.18s var(--ss-premium-ease);
}

:where(.ss-icon-btn, .modal-password-toggle, .auth-puzzle__refresh):hover,
:where(.ss-icon-btn, .modal-password-toggle, .auth-puzzle__refresh):focus-visible {
    outline: none;
}

/* === Live status / badges === */
:where(.live-status-badge, .ss-quality-badge, .member-reel-badge) {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}