:root {
    --bg: #05070b;
    --panel: rgba(10, 12, 19, 0.9);
    --panel-2: rgba(14, 18, 30, 0.9);
    --text: #f4f4fa;
    --muted: #8b8fa3;
    --pink: #ff4d9d;
    --green: #a855f7;
    --border: rgba(168, 85, 247, 0.28);
    --border-soft: rgba(168, 85, 247, 0.18);
    --border-strong: rgba(232, 121, 249, 0.5);
    --border-green: rgba(168, 85, 247, 0.36);
    --glow-pink: 0 0 24px rgba(255, 77, 157, 0.24);
    --glow-green: 0 0 24px rgba(168, 85, 247, 0.26);
    --ss-green: #a855f7;
    --ss-green-strong: #7a5cff;
    --ss-cyan: #c084fc;
    --ss-purple: #7a5cff;
    --ss-purple-strong: #5b3df5;
    --ss-magenta: #ff4d9d;
    --ss-border: rgba(168, 85, 247, 0.3);
    --ss-glow-green: 0 0 30px rgba(168, 85, 247, 0.28);
    --ss-glow-purple: 0 0 34px rgba(255, 77, 157, 0.25);
    --community-green: #a855f7;
    --recon-green: #a855f7;
    --pulse-green: #a855f7;
    --feed-green: #a855f7;
    --neon-green: #a855f7;
}

html,
body,
body.ss-shell-body {
    background:
        radial-gradient(circle at 14% 10%, rgba(168, 85, 247, 0.2), transparent 38%),
        radial-gradient(circle at 86% 18%, rgba(255, 77, 157, 0.17), transparent 36%),
        linear-gradient(180deg, #05070b 0%, #080b14 44%, #05070b 100%) !important;
    color: var(--text);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(to right, rgba(168, 85, 247, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(168, 85, 247, 0.05) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: 0.26;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.012) 4px),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.22), transparent 68%);
    opacity: 0.48;
}

a {
    color: #e8b7ff;
}

a:hover {
    color: #ffffff;
}

:focus-visible {
    outline: 2px solid rgba(168, 85, 247, 0.88) !important;
    outline-offset: 2px;
}

.glass-panel,
.stream-card,
.pulse-activity-card,
.gift-card,
.hero-copy,
.hero-console,
.section-block,
.final-cta,
.home-results,
.recon-card,
.community-hero,
.community-panel,
.member-card,
.message-sidebar,
.message-thread,
.stats-list,
.stats-grid article,
.pulse-panel,
.pulse-hero,
.pulse-kpi-card,
.upload-step,
.upload-side-card,
.creator-header,
.creator-media,
.profile-settings-drawer,
.feed-topbar,
.feed-composer,
.feed-card,
.scan-box {
    border-radius: 20px !important;
    border: 1px solid rgba(168, 85, 247, 0.28) !important;
    background:
        linear-gradient(160deg, rgba(168, 85, 247, 0.11), rgba(255, 77, 157, 0.09) 44%, rgba(7, 10, 18, 0.94) 100%),
        rgba(6, 8, 14, 0.92) !important;
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(168, 85, 247, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(14px);
}

.neon-button-ss,
.btn-primary,
.landing-search-btn,
.neon-button,
.pulse-btn--primary,
.upload-next,
.upload-file-trigger,
.feed-composer__send,
.feed-empty__cta,
.feed-error button,
.su-btn-plus,
.su-btn-auth,
.stats-filter-submit,
.contact-submit,
.ads-submit,
.admin-btn--primary {
    border: 1px solid rgba(255, 182, 225, 0.4) !important;
    color: #fff6fe !important;
    background: linear-gradient(130deg, #7a5cff, #a855f7 48%, #ff4d9d) !important;
    box-shadow: 0 0 22px rgba(168, 85, 247, 0.34), 0 0 24px rgba(255, 77, 157, 0.3) !important;
}

.neon-button-ss:hover,
.btn-primary:hover,
.landing-search-btn:hover,
.neon-button:hover,
.pulse-btn--primary:hover,
.upload-next:hover,
.feed-composer__send:hover,
.su-btn-plus:hover,
.su-btn-auth:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 26px rgba(168, 85, 247, 0.44), 0 0 30px rgba(255, 77, 157, 0.36) !important;
}

.btn-secondary,
.ghost-button,
.pulse-btn--ghost,
.feed-switch__btn,
.quick-query,
.mailbox-tab,
.upload-back,
.admin-btn--secondary {
    border: 1px solid rgba(168, 85, 247, 0.34) !important;
    color: #eadcff !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.btn-secondary:hover,
.ghost-button:hover,
.pulse-btn--ghost:hover,
.feed-switch__btn:hover,
.quick-query:hover,
.mailbox-tab:hover,
.upload-back:hover {
    border-color: rgba(255, 77, 157, 0.6) !important;
    background: rgba(168, 85, 247, 0.2) !important;
    color: #fff !important;
}

.search-bar,
.su-search input,
.landing-search-input,
.engine-select,
.feed-composer__input,
.pulse-creator-input,
.member-filter-form input,
.member-filter-form select,
.message-compose input,
.message-compose textarea,
.profile-settings-form input,
.profile-settings-form select,
.profile-settings-form textarea,
.contact-form input,
.contact-form textarea,
.ads-form input,
.ads-form textarea {
    border-radius: 14px !important;
    border: 1px solid rgba(168, 85, 247, 0.34) !important;
    background: rgba(5, 8, 15, 0.84) !important;
    color: #f6f2ff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.search-bar:focus,
.su-search input:focus,
.landing-search-input:focus,
.engine-select:focus,
.pulse-creator-input:focus,
.member-filter-form input:focus,
.member-filter-form select:focus,
.message-compose textarea:focus {
    border-color: rgba(168, 85, 247, 0.62) !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;
}

.filter-chip,
.chip,
.pulse-chip,
.platform-pill,
.member-tag,
.pill,
.creator-tag {
    border-radius: 999px !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    background: rgba(168, 85, 247, 0.12) !important;
    color: #eddfff !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.filter-chip.is-active,
.chip.is-active,
.pulse-tab.is-active,
.tab-btn[aria-selected="true"],
.pulse-chip--pink,
.feed-switch__btn.is-active,
.quick-query.is-active {
    border-color: rgba(255, 77, 157, 0.74) !important;
    background: linear-gradient(130deg, rgba(168, 85, 247, 0.36), rgba(255, 77, 157, 0.3)) !important;
    color: #fff4fd !important;
    box-shadow: 0 0 18px rgba(255, 77, 157, 0.26), 0 0 16px rgba(168, 85, 247, 0.24) !important;
}

.su-logo__core {
    background: linear-gradient(90deg, #7a5cff, #a855f7 45%, #ff4d9d) !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: 0 0 16px rgba(168, 85, 247, 0.32);
}

.navbar-logo {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #050505 !important;
    text-shadow: none !important;
}

.su-link:hover,
.su-link:focus-visible {
    border-color: rgba(168, 85, 247, 0.42) !important;
    background: rgba(168, 85, 247, 0.14) !important;
}

.su-link.is-active {
    color: #fff6ff !important;
    background: linear-gradient(120deg, rgba(122, 92, 255, 0.92), rgba(255, 77, 157, 0.88)) !important;
    box-shadow: 0 0 28px rgba(168, 85, 247, 0.3), 0 0 24px rgba(255, 77, 157, 0.3) !important;
}

.su-live-list strong,
.su-userline__live,
.community-kpis strong,
.stats-grid strong,
.console-head p,
.result-stat-card strong {
    color: #d8b4fe !important;
}

.su-status-strip span {
    color: #f0d4ff !important;
    border: 1px solid rgba(168, 85, 247, 0.35) !important;
    background: rgba(168, 85, 247, 0.12) !important;
}

.su-bottom-nav {
    border: 1px solid rgba(168, 85, 247, 0.35) !important;
    background: rgba(7, 10, 18, 0.92) !important;
}

.su-bottom-nav__item.is-active {
    border-color: rgba(255, 77, 157, 0.72) !important;
    background: rgba(168, 85, 247, 0.22) !important;
    color: #fff3fe !important;
}

.su-bottom-nav__item--center {
    background: linear-gradient(130deg, #7a5cff, #ff4d9d) !important;
}

.feed-shell {
    background:
        radial-gradient(920px 420px at 14% 0%, rgba(168, 85, 247, 0.22), transparent 56%),
        radial-gradient(920px 420px at 86% 0%, rgba(255, 77, 157, 0.2), transparent 56%),
        #05070b !important;
}

.feed-action,
.feed-action--view,
.feed-action--share,
.feed-action--gift,
.feed-action--comment {
    border-color: rgba(168, 85, 247, 0.45) !important;
}

.feed-action:focus-visible,
.feed-action.is-active {
    outline: 2px solid rgba(168, 85, 247, 0.72) !important;
}

.search-shell .recon-logo,
.search-shell .results-title,
.search-shell .search-terminal-head__title,
.pulse-creator-headline,
.stats-segment-card h2,
.community-headline h1 {
    letter-spacing: 0.04em;
    text-shadow: 0 0 18px rgba(168, 85, 247, 0.3);
}

.search-terminal-dot--green,
.chip--green,
.pulse-chip--green,
.presence-dot--online,
.scan-platform-chip.done .scan-platform-dot,
.scan-platform-chip.active .scan-platform-dot {
    background: #a855f7 !important;
    color: #a855f7 !important;
    border-color: rgba(168, 85, 247, 0.58) !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.48) !important;
}

.scan-title,
.scan-platform-chip.done,
.scan-platform-chip.active {
    color: #eddfff !important;
}

.scan-platform-chip.done,
.scan-platform-chip.active,
.scan-deep-badge {
    background: linear-gradient(130deg, rgba(122, 92, 255, 0.92), rgba(255, 77, 157, 0.86)) !important;
    border-color: rgba(255, 77, 157, 0.52) !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.24), 0 0 18px rgba(255, 77, 157, 0.24) !important;
}

.pulse-hero,
.pulse-shell,
.pulse-panel,
.stats-shell,
.community-shell,
.upload-shell,
.creator-shell,
.saas-landing,
.search-shell,
.feed-shell {
    color: #f4f4fa;
}

.pulse-kpi-label,
.community-subtle,
.message-meta,
.feed-headline__kicker,
.results-subtitle,
.console-note,
.hero-tagline,
.kpi-card span,
.su-logo__sub {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.gift-card,
.gift-item,
#gift-side-list > *,
.gift-grid > *,
.gift-catalog > * {
    border: 1px solid rgba(168, 85, 247, 0.34) !important;
    background: linear-gradient(150deg, rgba(122, 92, 255, 0.18), rgba(255, 77, 157, 0.12), rgba(7, 10, 18, 0.92)) !important;
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.navbar {
    background: rgba(7, 10, 18, 0.9) !important;
    border-bottom: 1px solid rgba(168, 85, 247, 0.24) !important;
}

.navbar-left a,
.navbar-right a,
.navbar-right button {
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: #eddfff !important;
}

.navbar-left a:hover,
.navbar-right a:hover,
.navbar-right button:hover {
    border-color: rgba(255, 77, 157, 0.58) !important;
    background: rgba(168, 85, 247, 0.2) !important;
}

.navbar-stream-user__live,
.ss-wallet-chip__balance {
    color: #ffd166 !important;
}

body.ss-live-body {
    background:
        radial-gradient(circle at 14% 10%, rgba(168, 85, 247, 0.2), transparent 40%),
        radial-gradient(circle at 86% 16%, rgba(255, 77, 157, 0.16), transparent 38%),
        linear-gradient(180deg, #05070b 0%, #080b14 42%, #05070b 100%) !important;
}

.ss-live-app .ss-live-sidebar,
.ss-live-app .ss-live-topbar,
.ss-live-app .live-panel,
.ss-live-app .ss-live-video-card,
.ss-live-app .ss-live-chat-panel,
.ss-live-app .ss-live-gift-panel,
.ss-live-app .ss-gift-bar,
.ss-live-app .ss-cohost-panel,
.ss-live-app .ss-permissions-panel {
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    background:
        linear-gradient(160deg, rgba(122, 92, 255, 0.1), rgba(255, 77, 157, 0.08) 42%, rgba(7, 10, 18, 0.94) 100%),
        rgba(6, 8, 14, 0.92) !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.46), 0 0 24px rgba(168, 85, 247, 0.18) !important;
}

.ss-live-app .ss-side-link:hover,
.ss-live-app .ss-side-link:focus-visible {
    border-color: rgba(168, 85, 247, 0.5) !important;
    background: rgba(168, 85, 247, 0.16) !important;
}

.ss-live-app .ss-side-link.is-live-active,
.ss-live-app .ss-side-link[aria-current="page"] {
    color: #fff5ff !important;
    background: linear-gradient(125deg, rgba(122, 92, 255, 0.92), rgba(255, 77, 157, 0.88)) !important;
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.3), 0 0 20px rgba(255, 77, 157, 0.28) !important;
}

.ss-live-app .ss-top-live-list strong,
.ss-live-app .shadowcoin-balance-text,
.ss-live-app .viewer-count,
.ss-live-app .ss-chat-head h2,
.ss-live-app .ss-gift-side-head h2,
.ss-live-app .ss-gift-tabs .is-active,
.ss-live-app .ss-cohost-head h2,
.ss-live-app .ss-permissions-head h2 {
    color: #d8b4fe !important;
}

.ss-live-app .ss-btn--green,
.ss-live-app .ss-btn--magenta,
.ss-live-app .ss-btn.ss-btn--green,
.ss-live-app .ss-btn.ss-btn--magenta {
    border: 1px solid rgba(255, 182, 225, 0.4) !important;
    color: #fff6fe !important;
    background: linear-gradient(130deg, #7a5cff, #a855f7 48%, #ff4d9d) !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.28), 0 0 18px rgba(255, 77, 157, 0.26) !important;
}

.ss-live-app .ss-btn--ghost,
.ss-live-app .ss-control-btn,
.ss-live-app .ss-link-btn,
.ss-live-app .ss-icon-btn,
.ss-live-app .ss-gift-tab {
    border: 1px solid rgba(168, 85, 247, 0.34) !important;
    color: #eadcff !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.ss-live-app .ss-live-search input,
.ss-live-app .live-chat-input input,
.ss-live-app .live-form input,
.ss-live-app .live-form textarea,
.ss-live-app .live-form select {
    border: 1px solid rgba(168, 85, 247, 0.34) !important;
    background: rgba(5, 8, 15, 0.86) !important;
    color: #f6f2ff !important;
}

@media (max-width: 1024px) {
    .su-topbar {
        padding: 12px 12px;
    }
}

@media (max-width: 768px) {
    .su-content {
        padding-bottom: 96px;
    }

    .glass-panel,
    .stream-card,
    .pulse-activity-card,
    .gift-card,
    .hero-copy,
    .hero-console,
    .section-block,
    .final-cta,
    .home-results,
    .recon-card,
    .community-hero,
    .community-panel,
    .member-card,
    .message-sidebar,
    .message-thread,
    .stats-list,
    .stats-grid article,
    .pulse-panel,
    .pulse-hero,
    .pulse-kpi-card,
    .upload-step,
    .upload-side-card,
    .creator-header,
    .creator-media,
    .profile-settings-drawer,
    .feed-topbar,
    .feed-composer,
    .feed-card {
        border-radius: 16px !important;
    }
}

/* === Per-Page Fine Tune === */
/* /live */
.ss-live-body .ss-live-video-card {
    border-color: rgba(168, 85, 247, 0.36) !important;
    background:
        radial-gradient(circle at 50% 18%, rgba(115, 89, 255, 0.3), transparent 45%),
        radial-gradient(circle at 80% 75%, rgba(255, 132, 79, 0.14), transparent 35%),
        linear-gradient(180deg, rgba(5, 7, 17, 0.04) 0%, rgba(4, 6, 15, 0.34) 100%),
        url("../images/live/shadowseek-live-stage-bg.png") center/cover no-repeat,
        #04060f !important;
    box-shadow:
        0 26px 58px rgba(0, 0, 0, 0.54),
        0 0 28px rgba(168, 85, 247, 0.2),
        0 0 24px rgba(255, 77, 157, 0.18) !important;
}

.ss-live-body .ss-live-video-card::before {
    background:
        linear-gradient(118deg, rgba(8, 9, 16, 0.48), rgba(8, 9, 16, 0.58)),
        repeating-linear-gradient(to right, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0.016) 1px, transparent 1px, transparent 40px) !important;
}

.ss-live-body .ss-live-video-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(circle at 50% 55%, transparent 38%, rgba(3, 5, 10, 0.48) 100%),
        linear-gradient(180deg, rgba(3, 5, 10, 0.36) 0%, transparent 24%, transparent 72%, rgba(3, 5, 10, 0.58) 100%);
}

.ss-live-body .ss-live-chat-panel,
.ss-live-body .ss-live-gift-panel {
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.18) !important;
}

.ss-live-body .live-chat-message--gift {
    border-color: rgba(255, 77, 157, 0.52) !important;
    background: linear-gradient(136deg, rgba(122, 92, 255, 0.18), rgba(255, 77, 157, 0.16)) !important;
}

.ss-live-body .ss-gift-side-item,
.ss-live-body .ss-gift-item {
    border-color: rgba(168, 85, 247, 0.36) !important;
    background: linear-gradient(156deg, rgba(122, 92, 255, 0.14), rgba(255, 77, 157, 0.1), rgba(6, 8, 14, 0.94)) !important;
}

.ss-live-body .ss-gift-side-item__icon,
.ss-live-body .ss-gift-item__icon,
.ss-live-body .ss-gift-side-item__preview,
.ss-live-body .ss-gift-item__preview {
    border-color: rgba(168, 85, 247, 0.56) !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.28), 0 0 14px rgba(255, 77, 157, 0.22) !important;
}

.ss-live-body .ss-gift-item.is-flash,
.ss-live-body .ss-gift-side-item.is-flash {
    border-color: rgba(255, 77, 157, 0.72) !important;
    box-shadow: 0 0 20px rgba(255, 77, 157, 0.34), 0 0 14px rgba(168, 85, 247, 0.28) !important;
}

/* /search */
.search-shell .recon-card--branding,
.search-shell .search-form-card {
    border-color: rgba(168, 85, 247, 0.34) !important;
    background:
        linear-gradient(164deg, rgba(122, 92, 255, 0.14), rgba(255, 77, 157, 0.1) 46%, rgba(6, 8, 14, 0.95) 100%),
        rgba(7, 9, 15, 0.92) !important;
}

.search-shell .search-terminal-head {
    border-color: rgba(168, 85, 247, 0.42) !important;
    background: linear-gradient(120deg, rgba(122, 92, 255, 0.22), rgba(255, 77, 157, 0.14), rgba(4, 6, 12, 0.9)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 0 24px rgba(168, 85, 247, 0.2) !important;
}

.search-shell .scraper-monitor {
    border-color: rgba(168, 85, 247, 0.42) !important;
    background: linear-gradient(154deg, rgba(122, 92, 255, 0.18), rgba(255, 77, 157, 0.14), rgba(6, 8, 14, 0.92)) !important;
    box-shadow: 0 0 26px rgba(168, 85, 247, 0.24), 0 0 18px rgba(255, 77, 157, 0.18) !important;
}

.search-shell .scraper-monitor__stat {
    border-color: rgba(168, 85, 247, 0.34) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.search-shell .result-card {
    border-color: rgba(168, 85, 247, 0.34) !important;
    background:
        linear-gradient(150deg, rgba(122, 92, 255, 0.14), rgba(255, 77, 157, 0.08) 48%, rgba(5, 8, 16, 0.95) 100%),
        rgba(5, 8, 16, 0.95) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46), 0 0 20px rgba(168, 85, 247, 0.15) !important;
}

.search-shell .result-card:hover {
    border-color: rgba(255, 77, 157, 0.46) !important;
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.52), 0 0 22px rgba(255, 77, 157, 0.2) !important;
}

.search-shell .result-link:hover,
.search-shell .result-link:focus-visible {
    border-color: rgba(255, 77, 157, 0.56) !important;
    background: rgba(255, 77, 157, 0.2) !important;
    color: #fff1fa !important;
}

/* Search keeps the project neon-pink / neon-green identity across desktop and mobile. */
.search-shell {
    --ss-green: #00ff9f;
    --ss-green-strong: #00e676;
    --ss-cyan: #00ff9f;
    --ss-magenta: #ff00ff;
    --ss-purple: #ff00ff;
    --recon-green: #00ff9f;
    --recon-cyan: #00ff9f;
    --recon-pink: #ff00ff;
    --recon-border: rgba(255, 0, 255, 0.28);
    --recon-border-strong: rgba(0, 255, 159, 0.44);
}

.search-shell .recon-card--branding,
.search-shell .search-form-card,
.search-shell .recon-card--results,
.search-shell .neon-card {
    border-color: rgba(255, 0, 255, 0.34) !important;
    background:
        linear-gradient(160deg, rgba(255, 0, 255, 0.12), rgba(0, 255, 159, 0.08) 48%, rgba(5, 8, 14, 0.96) 100%),
        rgba(6, 8, 14, 0.94) !important;
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.52),
        0 0 24px rgba(255, 0, 255, 0.16),
        0 0 22px rgba(0, 255, 159, 0.1) !important;
}

.search-shell .search-form-card {
    border-color: rgba(0, 255, 159, 0.42) !important;
}

.search-shell .search-terminal-head,
.search-shell .scraper-monitor {
    border-color: rgba(0, 255, 159, 0.34) !important;
    background:
        linear-gradient(120deg, rgba(0, 255, 159, 0.14), rgba(255, 0, 255, 0.12), rgba(4, 6, 12, 0.92)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 0 24px rgba(0, 255, 159, 0.16) !important;
}

.search-shell .search-terminal-dot--green,
.search-shell .carousel-dot.active {
    background: #00ff9f !important;
    box-shadow: 0 0 10px rgba(0, 255, 159, 0.72) !important;
}

.search-shell .search-terminal-dot--cyan {
    background: #00ff9f !important;
    box-shadow: 0 0 10px rgba(0, 255, 159, 0.68) !important;
}

.search-shell .search-terminal-head__status span,
.search-shell .chip--green,
.search-shell .chip--cyan,
.search-shell .result-signal-grid .chip {
    border-color: rgba(0, 255, 159, 0.4) !important;
    background: rgba(0, 255, 159, 0.1) !important;
    color: #caffec !important;
}

.search-shell .modifier-bar-search .chip.active,
.search-shell .tab-btn.active,
.search-shell .btn-scan {
    border-color: rgba(255, 0, 255, 0.58) !important;
    background: linear-gradient(110deg, rgba(255, 0, 255, 0.92), rgba(0, 255, 159, 0.88)) !important;
    color: #020204 !important;
    box-shadow: 0 0 24px rgba(255, 0, 255, 0.24), 0 0 20px rgba(0, 255, 159, 0.16) !important;
}

.search-shell .result-card {
    border-color: rgba(0, 255, 159, 0.28) !important;
    background:
        linear-gradient(150deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 159, 0.06) 48%, rgba(5, 8, 16, 0.95) 100%),
        rgba(5, 8, 16, 0.95) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46), 0 0 18px rgba(0, 255, 159, 0.12) !important;
}

.search-shell .result-card:hover {
    border-color: rgba(255, 0, 255, 0.5) !important;
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.52), 0 0 22px rgba(255, 0, 255, 0.2) !important;
}

/* /pulse */
.pulse-shell .pulse-table tbody tr {
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.pulse-shell .pulse-table tbody tr:hover {
    transform: translateX(2px);
    background: rgba(168, 85, 247, 0.12);
    box-shadow: inset 3px 0 0 rgba(255, 77, 157, 0.7);
}

.pulse-shell .pulse-table tbody tr:nth-child(-n+3) {
    background: linear-gradient(92deg, rgba(122, 92, 255, 0.18), rgba(255, 77, 157, 0.12) 56%, rgba(255, 255, 255, 0.02));
}

.pulse-shell .pulse-kpi-card {
    position: relative;
    overflow: hidden;
}

.pulse-shell .pulse-kpi-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.03) 45%, transparent 100%);
    animation: pulseRadarSweep 5.2s linear infinite;
}

.pulse-event {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.42);
    background: rgba(168, 85, 247, 0.16);
    color: #f6e8ff;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pulse-event--live {
    border-color: rgba(255, 77, 157, 0.58);
    background: rgba(255, 77, 157, 0.2);
}

.pulse-event--gift {
    border-color: rgba(232, 121, 249, 0.6);
    background: rgba(232, 121, 249, 0.2);
}

.pulse-event--comment {
    border-color: rgba(168, 85, 247, 0.56);
    background: rgba(122, 92, 255, 0.22);
}

.pulse-event--follow {
    border-color: rgba(216, 180, 254, 0.62);
    background: rgba(216, 180, 254, 0.2);
}

/* /feed */
.feed-shell .feed-topbar,
.feed-shell .feed-composer {
    border-color: rgba(168, 85, 247, 0.34) !important;
    background: linear-gradient(160deg, rgba(122, 92, 255, 0.16), rgba(255, 77, 157, 0.12), rgba(7, 10, 18, 0.94)) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.48), 0 0 20px rgba(168, 85, 247, 0.18) !important;
}

.feed-shell .feed-card {
    border-color: rgba(168, 85, 247, 0.34) !important;
    box-shadow: 0 28px 58px rgba(0, 0, 0, 0.56), 0 0 24px rgba(168, 85, 247, 0.2) !important;
}

.feed-shell .feed-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 7, 11, 0.1) 0%, rgba(5, 7, 11, 0.42) 62%, rgba(5, 7, 11, 0.8) 100%),
        radial-gradient(circle at 50% 48%, transparent 46%, rgba(6, 8, 14, 0.46) 100%);
}

.feed-shell .feed-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(transparent 46%, rgba(255, 255, 255, 0.012) 50%, transparent 54%);
    background-size: 100% 7px;
    opacity: 0.42;
}

.feed-shell .feed-overlay {
    z-index: 3;
    border-color: rgba(168, 85, 247, 0.3) !important;
    background: linear-gradient(160deg, rgba(122, 92, 255, 0.16), rgba(255, 77, 157, 0.12), rgba(6, 8, 14, 0.95)) !important;
}

.feed-shell .feed-action {
    border-color: rgba(168, 85, 247, 0.46) !important;
    background:
        linear-gradient(150deg, rgba(7, 10, 18, 0.94), rgba(7, 10, 18, 0.78)),
        radial-gradient(80px 80px at 50% 0%, rgba(255, 77, 157, 0.2), transparent 70%) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 0 16px rgba(168, 85, 247, 0.14) !important;
}

@keyframes pulseRadarSweep {
    0% {
        transform: translateX(-85%);
    }
    100% {
        transform: translateX(120%);
    }
}

/* === Responsive final layer === */
.navbar,
.navbar-menu,
.navbar-left,
.navbar-right,
.navbar-right-main,
.navbar-admin-actions,
.su-shell,
.su-main,
.su-content,
.su-content-main,
.search-shell,
.pulse-shell,
.creator-shell,
.upload-shell,
.feed-shell,
.community-shell,
.coins-shell,
.stats-shell,
.admin-shell,
.live-shell,
.ss-live-app,
.recon-card,
.neon-card,
.pulse-panel,
.feed-card {
    min-width: 0;
    max-width: 100%;
}

.navbar-logo {
    min-width: 0;
    flex-shrink: 1;
    font-size: clamp(1.05rem, 0.88rem + 0.8vw, 1.45rem);
}

.navbar-logo-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-left a,
.navbar-right a,
.navbar-right button,
.su-link,
.su-bottom-nav__item {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-admin-actions {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), auto));
}

.su-shell {
    grid-template-columns: var(--su-sidebar-width, clamp(13.5rem, 16vw, 16.25rem)) minmax(0, 1fr);
}

.su-actions,
.su-wallet,
.su-userline,
.su-search,
.su-guest-hint {
    min-width: 0;
    max-width: 100%;
}

.search-shell .recon-card,
.pulse-shell .pulse-panel,
.pulse-shell .pulse-hero,
.pulse-shell .pulse-kpi-card,
.creator-shell .neon-card,
.upload-shell {
    overflow: hidden;
}

.search-shell .search-hero-headline,
.pulse-creator-headline,
.creator-main h1,
.upload-head h1 {
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.search-shell .search-hero-headline {
    font-size: clamp(1.35rem, 0.95rem + 2.2vw, 2.45rem);
}

.pulse-creator-headline {
    font-size: clamp(1.55rem, 1.1rem + 2vw, 2.45rem);
}

.pulse-event,
.pulse-chip,
.pulse-tab,
.pulse-radar-tab,
.pulse-hot-badge,
.pulse-platform-pill,
.pulse-ranking-window {
    font-size: clamp(0.64rem, 0.58rem + 0.18vw, 0.85rem);
}

@media (max-width: 980px) {
    .su-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .su-topbar-row,
    .navbar {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .navbar,
    .su-topbar,
    .su-content,
    .search-shell,
    .pulse-shell,
    .creator-shell,
    .upload-shell {
        width: 100%;
        max-width: 100%;
    }

    .navbar-admin-actions,
    .su-actions,
    .search-shell .form-actions,
    .pulse-query-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mobile cyber nav fallback for already-running app instances that still render
   the legacy shell sidebar instead of the new ss-mobile-top-nav markup. */
@media (max-width: 768px) {
    body.ss-shell-body .su-shell {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.ss-shell-body .su-sidebar {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: grid !important;
        gap: 12px !important;
        padding: 12px 12px 14px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(0, 255, 159, 0.24) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(255, 0, 255, 0.24), transparent 34%),
            radial-gradient(circle at 88% 18%, rgba(0, 255, 159, 0.16), transparent 34%),
            linear-gradient(180deg, rgba(2, 4, 10, 0.98), rgba(2, 6, 14, 0.94)) !important;
        box-shadow:
            0 14px 34px rgba(0, 0, 0, 0.62),
            0 0 28px rgba(255, 0, 255, 0.18),
            inset 0 -1px 0 rgba(0, 255, 159, 0.16) !important;
        backdrop-filter: blur(18px) saturate(1.35);
        -webkit-backdrop-filter: blur(18px) saturate(1.35);
        z-index: 240 !important;
    }

    body.ss-shell-body .su-logo {
        min-height: 64px !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(0, 255, 159, 0.3) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(255, 0, 255, 0.18), transparent 36%),
            linear-gradient(135deg, rgba(8, 12, 22, 0.96), rgba(3, 7, 14, 0.94)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.05),
            0 0 22px rgba(0, 255, 159, 0.12),
            0 0 26px rgba(255, 0, 255, 0.12) !important;
    }

    body.ss-shell-body .su-logo__core {
        color: #fff !important;
        font-size: 1.05rem !important;
        letter-spacing: 0 !important;
        text-shadow:
            0 0 12px rgba(255, 255, 255, 0.6),
            0 0 22px rgba(255, 0, 255, 0.34),
            0 0 28px rgba(0, 255, 159, 0.22) !important;
    }

    body.ss-shell-body .su-logo__sub {
        color: rgba(228, 242, 255, 0.8) !important;
        font-size: 0.62rem !important;
    }

    body.ss-shell-body .su-sidebar > .su-nav {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 6px !important;
        min-height: 58px !important;
        padding: 6px !important;
        border-radius: 22px !important;
        border: 1px solid rgba(0, 255, 159, 0.26) !important;
        background:
            linear-gradient(135deg, rgba(255, 0, 255, 0.14), rgba(0, 255, 159, 0.09)),
            rgba(0, 0, 0, 0.7) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.04),
            0 0 24px rgba(255, 0, 255, 0.2),
            0 0 24px rgba(0, 255, 159, 0.12) !important;
    }

    body.ss-shell-body .su-sidebar > .su-nav .su-link {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 0 4px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.11) !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 46%),
            linear-gradient(180deg, rgba(13, 17, 29, 0.95), rgba(4, 7, 13, 0.94)) !important;
        color: rgba(230, 241, 255, 0.76) !important;
        text-align: center !important;
        font-size: 0.66rem !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.025),
            0 0 12px rgba(0, 0, 0, 0.42) !important;
    }

    body.ss-shell-body .su-sidebar > .su-nav .su-link__icon {
        display: none !important;
    }

    body.ss-shell-body .su-sidebar > .su-nav .su-link span:last-child {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.ss-shell-body .su-sidebar > .su-nav .su-link:hover,
    body.ss-shell-body .su-sidebar > .su-nav .su-link:focus-visible {
        color: #fff !important;
        border-color: rgba(0, 255, 159, 0.5) !important;
        box-shadow:
            inset 0 0 0 1px rgba(0, 255, 159, 0.1),
            0 0 18px rgba(0, 255, 159, 0.18),
            0 0 24px rgba(255, 0, 255, 0.12) !important;
    }

    body.ss-shell-body .su-sidebar > .su-nav .su-link.is-active {
        border-color: rgba(255, 255, 255, 0.42) !important;
        background:
            radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.58), transparent 28%),
            linear-gradient(135deg, #ff00ff 0%, #ff39ff 34%, #00ff9f 100%) !important;
        color: #02060a !important;
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.42) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.28),
            inset 0 0 24px rgba(255, 255, 255, 0.16),
            0 0 18px rgba(255, 0, 255, 0.5),
            0 0 32px rgba(0, 255, 159, 0.38) !important;
    }

    body.ss-shell-body .su-side-group,
    body.ss-shell-body .su-live-list {
        display: none !important;
    }

    body.ss-shell-body .su-main {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.ss-shell-body .su-content {
        padding: 10px 10px calc(116px + env(safe-area-inset-bottom)) !important;
    }

    body.ss-shell-body .su-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-flow: initial !important;
        grid-auto-columns: initial !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 6px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        width: min(100vw - 14px, 560px) !important;
        min-height: 76px !important;
        padding: 8px !important;
        border-radius: 26px !important;
        border: 1px solid rgba(0, 255, 159, 0.32) !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(255, 0, 255, 0.2), transparent 34%),
            radial-gradient(circle at 86% 20%, rgba(0, 255, 159, 0.18), transparent 34%),
            linear-gradient(180deg, rgba(7, 9, 17, 0.97), rgba(0, 0, 0, 0.95)) !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        scrollbar-width: none !important;
        z-index: 300 !important;
        box-shadow:
            0 18px 42px rgba(0, 0, 0, 0.72),
            0 0 30px rgba(255, 0, 255, 0.28),
            0 0 36px rgba(0, 255, 159, 0.2),
            inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(20px) saturate(1.4);
        -webkit-backdrop-filter: blur(20px) saturate(1.4);
    }

    body.ss-shell-body .su-bottom-nav__item {
        min-width: 0 !important;
        min-height: 52px !important;
        height: 52px !important;
        padding: 0 4px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.075), transparent 45%),
            linear-gradient(180deg, rgba(13, 17, 29, 0.86), rgba(3, 6, 12, 0.94)) !important;
        color: rgba(229, 241, 255, 0.78) !important;
        font-size: 0.62rem !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
    }

    body.ss-shell-body .su-bottom-nav__item:nth-child(n+6) {
        display: none !important;
    }

    body.ss-shell-body .su-bottom-nav__item--center {
        order: 3 !important;
        height: 66px !important;
        min-height: 66px !important;
        margin-top: -18px !important;
        border-radius: 24px !important;
        border-color: rgba(255, 255, 255, 0.48) !important;
        background:
            radial-gradient(circle at 50% 13%, rgba(255, 255, 255, 0.7), transparent 28%),
            linear-gradient(135deg, #ff00ff 0%, #ff36ff 34%, #00ff9f 100%) !important;
        color: #02060a !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.36),
            0 0 22px rgba(255, 0, 255, 0.62),
            0 0 38px rgba(0, 255, 159, 0.46),
            0 16px 28px rgba(0, 0, 0, 0.58) !important;
    }

    body.ss-shell-body .su-bottom-nav__item.is-active:not(.su-bottom-nav__item--center) {
        border-color: rgba(255, 255, 255, 0.42) !important;
        background:
            radial-gradient(circle at 50% 9%, rgba(255, 255, 255, 0.52), transparent 30%),
            linear-gradient(135deg, #ff00ff 0%, #ff39ff 35%, #00ff9f 100%) !important;
        color: #02060a !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.26),
            0 0 18px rgba(255, 0, 255, 0.46),
            0 0 30px rgba(0, 255, 159, 0.34) !important;
    }
}