/*
 * FlexYourArc - Bold Minimalist Design System
 * Aesthetic: Dark-first, High Contrast, Electric Accents (Gen-Z / Gen-Alpha)
 */

:root {
    /* --- Palette (Dark default) --- */
    --color-bg: #0A0A0F;
    --color-surface: #161622;
    --color-text-main: #F0F0F5;
    --color-text-muted: #8B8FA3;

    /* Accent system */
    --color-accent-primary: #FF3366;
    /* hot coral */
    --color-accent-secondary: #00FFD1;
    /* cyber mint */
    --color-accent-blue: #8B5CF6;
    /* electric violet */

    /* Borders */
    --color-border: #2A2A3C;
    --color-border-dark: #F0F0F5;
    --color-input-bg: #1E1E2E;

    /* Message bubbles */
    --color-msg-ai-bg: #1E1E2E;
    --color-msg-user-bg: var(--color-accent-primary);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #FF3366, #8B5CF6);
    --gradient-accent: linear-gradient(135deg, #8B5CF6, #00FFD1);

    /* --- Typography --- */
    --font-sans: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Sora', 'Space Grotesk', sans-serif;

    /* --- Spacing & Layout --- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-full: 999px;

    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 26px 68px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.3);
}

/* Light theme */
[data-theme="light"] {
    background-color: #FFFFFF;
    --color-bg: #F7F8F5;
    --color-surface: #FFFFFF;
    --color-text-main: #101418;
    --color-text-muted: #5E6874;
    --color-accent-primary: #FF3366;
    --color-accent-secondary: #00FFD1;
    --color-accent-blue: #8B5CF6;
    --color-border: #DCE1E8;
    --color-border-dark: #101418;
    --color-input-bg: #EEF2F8;
    --color-msg-ai-bg: #F2F2F2;
    --color-msg-user-bg: #101418;
    --gradient-primary: linear-gradient(135deg, #FF3366, #8B5CF6);
    --gradient-accent: linear-gradient(135deg, #8B5CF6, #00FFD1);
    --shadow-sm: 0 2px 6px rgba(16, 20, 24, 0.06);
    --shadow-md: 0 8px 20px rgba(16, 20, 24, 0.08);
    --shadow-lg: 0 18px 42px rgba(16, 20, 24, 0.12);
    --shadow-xl: 0 26px 68px rgba(16, 20, 24, 0.18);
    --shadow-hover: 0 14px 34px rgba(16, 20, 24, 0.14);
}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

html {
    /* Use surface color so the iOS safe area zones at the bottom match the bottom nav */
    background-color: var(--color-surface);
}

body {
    background:
        radial-gradient(1200px 500px at 8% -12%, rgba(139, 92, 246, 0.12), transparent 62%),
        radial-gradient(1000px 420px at 92% -18%, rgba(255, 51, 102, 0.10), transparent 64%),
        var(--color-bg);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    margin: 0;
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
}

/* iOS standalone PWA: override background-color so the home indicator region
   matches the bottom nav. On pages with fixed containers (feed, jam), the body
   background isn't visible in the main area — only in the safe area zones. */
@media (display-mode: standalone) {
    body {
        background-color: var(--color-surface);
    }
}

.is-standalone body {
    background-color: var(--color-surface);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 700;
    margin-top: 0;
    letter-spacing: -0.02em;
}

a {
    color: inherit;
    text-decoration: none;
}

/* --- Components --- */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-full);
    /* Pill shape */
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
    /* default border width */
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background-color: var(--color-text-main);
    color: var(--color-surface);
    border-color: var(--color-text-main);
}

.btn-primary:hover {
    background-color: var(--color-text-main);
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-text-main);
}

.btn-outline:hover {
    border-color: var(--color-text-main);
    background-color: var(--color-surface);
}

.btn-accent {
    background-color: var(--color-accent-primary);
    color: #FFF;
    border-color: var(--color-accent-primary);
}

.btn-accent:hover {
    box-shadow: 0 4px 12px rgba(255, 51, 102, 0.3);
}

.btn-gradient {
    background: #FF3366;
    color: #FFF;
    border: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255, 51, 102, 0.35);
}

.btn-gradient:active {
    transform: translateY(0);
}

/* Inputs */
.input-base {
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    background-color: var(--color-surface);
    font-family: var(--font-sans);
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    outline: none;
}

.input-base:focus {
    border-color: var(--color-text-main);
    box-shadow: var(--shadow-md);
}

/* Nav */
.navbar {
    border-bottom: 1px solid var(--color-border);
    background-color: rgba(from var(--color-surface) r g b / 0.95);
    background-color: var(--color-surface);
    /* Opaque for app feel */
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    /* Reduced vertical padding for more compact navbar */
    min-height: 64px;
    /* Reduced height to match smaller logo */
}

/* Visibility Utilities */
.desktop-only {
    display: flex;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block;
    }

    /* Hide top nav if logged in (per user request) */
    .navbar.navbar-auth {
        display: none;
    }

    /* Keep navbar visible for logged-out users */
    .navbar:not(.navbar-auth) {
        display: flex;
    }

    .navbar:not(.navbar-auth) .btn {
        font-size: 0.85rem;
        padding: 6px 16px;
    }
}

/* Mobile Bottom Nav (Hidden on Desktop) */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 6px 8px 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--color-text-muted);
    font-size: 0.65rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 0;
}

.nav-item.active {
    color: var(--color-text-main);
}

.nav-item svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.nav-item.active svg {
    stroke-width: 2.5;
}

/* Jam button — pink accent matching desktop FAB */
.nav-item-jam {
    color: #FF3366 !important;
}

.nav-jam-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FF3366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-jam-icon svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
    fill: none !important;
}

.jam-fab {
    position: fixed;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 950;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 12px;
    border-radius: var(--radius-full);
    background: #FF3366;
    color: #FFF;
    box-shadow: var(--shadow-lg);
    border: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.jam-fab:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.jam-fab:active {
    transform: translateY(0);
}

.jam-fab-plus {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.jam-fab-text {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Context Menu Styles */
.context-menu {
    position: fixed;
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 180px;
    z-index: 2000;
    padding: 8px 0;
    display: none;
}

.context-menu-top {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
}

.context-menu-bottom {
    position: fixed;
    bottom: 60px;
    /* left and transform will be set by JavaScript for proper alignment */
    margin-bottom: 8px;
}

.context-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    color: var(--color-text-main);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.context-menu-item:hover {
    background-color: var(--color-bg);
}

.context-menu-divider {
    margin: 8px 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

.nav-profile-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.nav-profile-trigger:hover {
    opacity: 0.8;
}

/* Mobile: Adjustments for App Shell */
@media (max-width: 768px) {
    .navbar {
        /* Hide top nav items on mobile if moved to bottom, but keep Logo */
    }

    .navbar .container {
        padding: 8px 16px;
        min-height: 56px;
        /* Reduced height and padding for mobile */
    }

    .navbar .btn {
        display: none;
        /* Hide desktop CTAs */
    }

    .jam-fab {
        display: none !important;
    }

    .bottom-nav {
        display: flex;
    }

    /* Add padding to body so content isn't hidden behind bottom nav - ONLY if logged in */
    body.logged-in {
        padding-bottom: 60px;
    }

    body.logged-in.is-jam-page {
        padding-bottom: 0;
    }
}

.brand-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
    line-height: 1;
}

[data-theme="light"] .brand-logo:hover {
    opacity: 0.8;
}

/* Hover: slight dim on the logo */
[data-theme="dark"] .brand-logo:hover img.logo-img {
    opacity: 0.8;
}

/* Logo icon */
.brand-logo .logo-img {
    height: 44px !important;
    width: 44px !important;
    display: block !important;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 10px;
}

/* New logo is color-native — no invert needed on dark mode */
[data-theme="dark"] .brand-logo img.logo-img {
    filter: none;
    mix-blend-mode: normal;
}

/* Light mode: logo has dark bg so it works as-is */
[data-theme="light"] .brand-logo img.logo-img {
    filter: none;
}

/* Wordmark text — visible on desktop, hidden on mobile */
.logo-wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    color: var(--color-text-main);
    margin-left: 10px;
    white-space: nowrap;
}

.logo-wordmark-accent {
    color: #FF3366;
}

/* Ensure logo displays in both logged-in and logged-out states */
.navbar .brand-logo .logo-img,
.navbar.navbar-auth .brand-logo .logo-img {
    display: block !important;
    visibility: visible !important;
}

/* Mobile: keep icon legible, hide wordmark */
@media (max-width: 768px) {
    .brand-logo .logo-img {
        height: 40px !important;
        width: 40px !important;
        border-radius: 9px;
    }

    .logo-wordmark {
        display: none;
    }
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.container.mobile-no-pad {
    padding: 0;
}

@media (max-width: 768px) {
    .container.mobile-no-pad {
        padding: 0 20px;
    }

    .container {
        padding: 0 20px;
    }
}

/* Bottom CTA */
.bottom-cta-section {
    padding: 80px 24px;
    text-align: center;
}

.bottom-cta-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 12px;
}

.bottom-cta-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin: 0 0 28px;
}

@media (max-width: 768px) {
    .bottom-cta-section {
        padding: 60px 20px;
    }

    .bottom-cta-title {
        font-size: 1.5rem;
    }
}

/* FYA Brand Story */
.fya-brand-section {
    padding: 60px 24px 40px;
}

.fya-story-card {
    max-width: 480px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fya-story-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.fya-story-emoji {
    font-size: 1.6rem;
    line-height: 1;
}

.fya-story-abbr {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #FF3366;
}

.fya-story-line {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-main);
}

.fya-story-highlight {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

.fya-story-highlight strong {
    color: var(--color-accent-primary);
}

.fya-story-muted {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.fya-story-closer {
    margin: 4px 0 0;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text-main);
}

@media (max-width: 768px) {
    .fya-brand-section {
        padding: 48px 16px 32px;
    }

    .fya-story-card {
        padding: 22px;
    }

    .fya-story-line {
        font-size: 0.9rem;
    }

    .fya-story-highlight {
        font-size: 1rem;
    }

    .fya-story-muted {
        font-size: 0.85rem;
    }
}

/* Vision Section (Homepage) */
.vision-section {
    padding: 80px 24px 60px;
    text-align: center;
}

.vision-content {
    max-width: 640px;
    margin: 0 auto;
}

.vision-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-main);
    margin: 0 0 16px;
}

.vision-title em {
    font-style: normal;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vision-subtitle {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 20px;
}

.vision-link {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: opacity 0.2s;
}

.vision-link:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .vision-section {
        padding: 60px 20px 40px;
    }

    .vision-title {
        font-size: 1.5rem;
    }
}

/* Featured Arcs (Homepage) */
.featured-arcs-section {
    padding: 0 24px 80px;
}

.featured-arcs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto 24px;
}

.featured-arcs-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
}

.featured-arcs-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-accent-primary);
    text-decoration: none;
}

.featured-arcs-link:hover {
    opacity: 0.8;
}

.featured-arcs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.featured-arc-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    text-decoration: none;
    color: var(--color-text-main);
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.featured-arc-card:hover {
    border-color: var(--color-accent-blue);
    box-shadow: var(--shadow-md);
}

.featured-arc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.featured-arc-theme {
    background: rgba(139, 92, 246, 0.15);
    color: var(--color-accent-blue);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
    text-transform: capitalize;
}

.featured-arc-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.featured-arc-excerpt {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-arc-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.featured-arc-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.featured-arc-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-blue);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
}

.featured-arc-author-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.featured-arc-author-handle {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .featured-arcs-section {
        padding: 0 16px 60px;
    }

    .featured-arcs-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Backstory Page */
.backstory-page {
    padding-bottom: 0;
}

.backstory-hero {
    padding: 80px 24px 60px;
    text-align: center;
}

.backstory-kicker {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-accent-primary);
    margin: 0 0 16px;
}

.backstory-headline {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-main);
    margin: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.backstory-narrow {
    max-width: 600px;
    margin: 0 auto;
}

.backstory-section {
    padding: 60px 24px;
}

.backstory-section-alt {
    background: var(--color-surface);
}

.backstory-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.backstory-section-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-blue);
    margin: 0 0 4px;
}

.backstory-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-main);
    margin: 0;
}

.backstory-text strong {
    color: var(--color-accent-primary);
}

.backstory-text em {
    font-style: italic;
}

.backstory-muted,
.backstory-text.backstory-muted {
    color: var(--color-text-muted);
    font-size: 1rem;
}

.backstory-pull-quote {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
}

.backstory-pull-quote em {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
}

.backstory-vision-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
}

.backstory-vision-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.backstory-vision-marker {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--gradient-primary);
}

.backstory-vision-item strong {
    display: block;
    font-size: 1rem;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

.backstory-vision-item .backstory-muted {
    font-size: 0.9rem;
    margin: 0;
}

.backstory-closer-section {
    padding: 80px 24px;
}

.backstory-closer-text {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin: 0;
}

@media (max-width: 768px) {
    .backstory-hero {
        padding: 60px 20px 40px;
    }

    .backstory-headline {
        font-size: 1.8rem;
    }

    .backstory-section {
        padding: 48px 20px;
    }

    .backstory-pull-quote {
        font-size: 1.25rem;
    }

    .backstory-closer-text {
        font-size: 1.4rem;
    }
}

/* Footer */
.footer {
    padding: 60px 24px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.footer .container {
    padding: 0 24px;
}

/* Filter Card (Standardized) */
.filter-card {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 24px;
    border-radius: var(--radius-md);
    margin-bottom: 32px;
    box-shadow: var(--shadow-sm);
}

.filter-card form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.filter-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Hide footer for logged-in users */
body.logged-in .footer {
    display: none !important;
}

@media (max-width: 768px) {
    /* Footer is hidden for logged-in users, so no margin needed */

    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .filter-row {
        grid-template-columns: 1fr;
    }
}

/* --- JAM INTERFACE (Mobile First Focus) --- */

.jam-layout {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: hidden;
}

/* PWA standalone: on mobile, rely on top:0; bottom:0; height:auto from the mobile rule.
   padding-bottom: env(safe-area-inset-bottom) is set in the base mobile rule for the home indicator. */

@media (min-width: 768px) {

    /* Desktop: Card style */
    .jam-layout {
        height: 85vh;
        margin-top: 2rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        overflow: hidden;
        /* contain children */
    }
}

.jam-header {
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    flex-shrink: 0;
}

.jam-header-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.jam-header-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.jam-header-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.jam-back-btn {
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 4px;
    margin-right: 4px;
    border-radius: 50%;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.jam-back-btn:hover {
    color: var(--color-text-main);
}

@media (max-width: 768px) {
    .jam-back-btn {
        display: inline-flex;
    }
}

.jam-header-spacer {
    flex: 1;
}

.jam-header-sep {
    color: var(--color-text-muted);
    opacity: 0.5;
}

.jam-turns-editor {
    display: none;
    margin-top: 6px;
    padding: 0;
    width: 100%;
}

.jam-turns-editor[style*="display: block"],
.jam-turns-editor[style*="display: flex"] {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
}

.jam-turns-editor #max-turns-error {
    text-align: right;
    margin-top: 0;
}

.jam-title {
    font-size: 1rem;
    font-weight: 700;
}

.jam-status-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.jam-status-badge.status-user_turn {
    background: var(--color-accent-primary);
    color: #FFF;
    border-color: var(--color-accent-primary);
}

.jam-status-badge.status-ai_turn {
    background: var(--color-accent-blue);
    color: #FFF;
    border-color: var(--color-accent-blue);
}

.jam-status-badge.status-completed {
    background: var(--color-accent-secondary);
    color: var(--color-text-main);
    border-color: var(--color-accent-secondary);
}

.jam-messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
    /* Optional: custom scrollbar styling if needed */
}

/* Bubbles */
.msg-bubble {
    max-width: 92%;
    padding: 12px 18px;
    border-radius: 18px;
    font-size: 1.05rem;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
}

/* Animation for message bubbles */
.animate-fade-up {
    animation: fadeUp 0.4s ease-out;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* AI */
.msg-ai {
    align-self: flex-start;
    background-color: var(--color-msg-ai-bg);
    color: var(--color-text-main);
    border-bottom-left-radius: 4px;
}

/* User */
.msg-user {
    align-self: flex-end;
    background: #FF3366;
    color: #FFF;
    border-bottom-right-radius: 4px;
}

.msg-meta-label {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 4px;
}

.context-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
}

.context-card-divider {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.context-card-eyebrow {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.context-card-heading {
    margin-bottom: 12px;
}

.context-card-description-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-main);
    margin: 0;
}

.context-chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.context-chip {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

.context-chip-theme {
    background: var(--color-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

.context-chip-personality {
    background: var(--color-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

.context-chip-language {
    background: var(--color-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

/* Jam Quick-Start Theme Picker */
.jam-quickstart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 24px 16px;
    text-align: center;
    gap: 12px;
}

.jam-quickstart-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
}

.jam-quickstart-sub {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 4px;
}

.jam-quickstart-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center;
}

.jam-quickstart-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 4px 0 0;
}

.jam-quickstart-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 360px;
}

.jam-chip {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.jam-chip:hover,
.jam-chip:active {
    background: rgba(255, 51, 102, 0.1);
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.jam-chip.is-selected {
    background: rgba(255, 51, 102, 0.12);
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
    box-shadow: 0 0 0 1px rgba(255, 51, 102, 0.12);
}

.jam-quickstart-meta {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0;
}

.jam-quickstart-start {
    margin-top: 4px;
    min-width: 220px;
}

.jam-quickstart-start:disabled,
.jam-quickstart-start[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.jam-quickstart-surprise {
    margin-top: 0;
    padding: 8px 20px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
}

.jam-quickstart-surprise:hover {
    color: var(--color-accent-primary);
}

.jam-input-area {
    padding: 6px 12px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

/* Final turn banner */
.final-turn-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--color-accent-primary-light, #fff0f3);
    border-radius: 8px;
    font-size: 0.82rem;
    gap: 8px;
}

[data-theme="dark"] .final-turn-banner {
    background: rgba(255, 51, 102, 0.12);
}

.final-turn-text {
    color: var(--color-accent-primary, #ff3366);
    font-weight: 500;
}

.final-turn-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.final-turn-extend-btn {
    background: none;
    border: 1px solid #22c55e;
    color: #4ade80;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.final-turn-extend-btn:hover {
    background: #22c55e;
    color: #fff;
}

.final-turn-dismiss-btn {
    background: none;
    border: 1px solid #ef4444;
    color: #f87171;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.final-turn-dismiss-btn:hover {
    background: #ef4444;
    color: #fff;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.jam-textarea {
    width: 100%;
    min-height: 48px;
    max-height: 150px;
    height: 48px;
    /* Start with single line height */
    padding: 12px 60px 12px 16px;
    /* Space for send button */
    border-radius: 20px;
    border: 2px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-main);
    caret-color: var(--color-accent-primary);
    font-size: 1rem;
    line-height: 1.5;
    resize: none;
    outline: none;
    transition: border-color 0.2s, height 0.1s ease-out;
    overflow-y: hidden;
    /* Hide scrollbar by default, JS will show it when content exceeds max-height */
    box-sizing: border-box;
}

/* Hide scrollbar when not needed or make it subtle */
.jam-textarea::-webkit-scrollbar {
    width: 6px;
}

.jam-textarea::-webkit-scrollbar-track {
    background: transparent;
}

.jam-textarea::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.jam-textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.jam-char-count {
    position: absolute;
    bottom: -18px;
    right: 12px;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    opacity: 0.7;
    transition: color 0.2s, opacity 0.2s;
    pointer-events: none;
}

.jam-char-count:empty {
    display: none;
}

.jam-char-warn {
    color: #FFA500;
    opacity: 1;
}

.jam-char-over {
    color: var(--color-accent-primary);
    opacity: 1;
}

.jam-textarea:focus {
    border-color: var(--color-accent-primary);
    background: var(--color-surface);
}

/* Placeholder styling - smaller font size to prevent scrollbar */
.jam-textarea::placeholder {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.7;
    transform: translateY(2px);
    /* Vertical adjustment to center placeholder with cursor and text */
}

/* Mobile: Even smaller placeholder for better fit */
@media (max-width: 768px) {
    .jam-textarea::placeholder {
        font-size: 0.85rem;
        line-height: 1.5;
    }
}

.btn-send-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--color-accent-primary);
    color: #FFF;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

.btn-send-icon:hover {
    background: var(--color-accent-primary);
    transform: translateY(-50%) scale(1.05);
}

.btn-send-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* --- HOME PAGE COMPONENTS --- */

/* Hero */
.hero-section {
    padding: 120px 24px 80px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .hero-section {
        grid-template-columns: 1.2fr 0.8fr;
        padding-top: 160px;
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 80px 20px 60px;
        /* More top padding to account for navbar */
        gap: 32px;
        text-align: center;
        /* Center align for mobile looks better usually */
    }

    .hero-content {
        text-align: center;
        /* Ensure content is centered */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-title {
        font-size: 2rem;
        /* Smaller for mobile */
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 24px;
    }

    .hero-emoji {
        font-size: 3rem;
        margin-bottom: 16px;
    }

    .teaser-card {
        height: auto;
        min-height: 360px;
        padding: 16px;
    }

    .teaser-card .teaser-turns-area {
        padding: 12px 4px;
    }

    .teaser-card .msg-bubble {
        max-width: 100%;
    }
}

.hero-content {
    text-align: left;
}

.hero-title {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 800;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    margin-bottom: 40px;
    max-width: 540px;
    font-weight: 400;
}

.hero-emoji {
    font-size: 4rem;
    margin-bottom: 20px;
    line-height: 1;
    letter-spacing: -0.1em;
}

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 60px;
    max-width: 100%;
}

@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: minmax(240px, auto);
    }
}

.bento-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-text-main);
}

.bento-main {
    grid-column: span 12;
}

.bento-side-1 {
    grid-column: span 12;
}

.bento-side-2 {
    grid-column: span 12;
}

.bento-wide {
    grid-column: span 12;
}

@media (min-width: 768px) {
    .bento-main {
        grid-column: span 8;
        background: var(--color-bg);
    }

    /* Highlight card */
    .bento-side-1 {
        grid-column: span 4;
    }

    .bento-side-2 {
        grid-column: span 4;
    }

    .bento-wide {
        grid-column: span 8;
    }
}

/* Teaser Demo Card in Hero */
.teaser-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    height: clamp(440px, 58vh, 620px);
    min-height: 440px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
}

.teaser-turns-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
    padding-bottom: 100px;
    /* Space for input area when visible */
}

/* Demo Input Area - Prominent and Inviting */
.demo-input-area {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, var(--color-surface) 90%, transparent);
    border-top: 1px solid var(--color-border);
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.demo-input-area.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.teaser-input {
    width: 100%;
    min-height: 56px;
    max-height: 150px;
    padding: 16px;
    padding-right: 60px;
    border-radius: 20px;
    border: 2px solid var(--color-text-main);
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-size: 1rem;
    font-family: var(--font-sans);
    resize: none;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.teaser-input:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 6px 20px rgba(255, 51, 102, 0.2);
    background: var(--color-surface);
}

.teaser-input::placeholder {
    color: var(--color-text-muted);
}

.teaser-send-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    background: var(--color-text-main);
    color: #FFF;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.teaser-send-btn:hover {
    background: var(--color-accent-primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 51, 102, 0.3);
}

.teaser-send-btn:active {
    transform: scale(0.95);
}

.teaser-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.teaser-send-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

/* --- UTILITIES --- */
@media (max-width: 768px) {

    /* Hide bottom nav on jam page — immersive creation mode */
    .is-jam-page .bottom-nav {
        display: none !important;
    }

    .jam-layout {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        max-height: none;
        margin: 0;
        border: none;
        border-radius: 0;
        padding-bottom: 0;
        z-index: 10;
    }

    .jam-input-area {
        position: relative;
        background: var(--color-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        z-index: 100;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    }

    .jam-messages-area {
        /* Reduce padding on mobile */
        padding: 16px;
        padding-bottom: 12px;
    }

    /* body overflow: hidden removed to fix Safari scrolling bug */

    /* Jam View Mobile Optimizations */
    .jam-header {
        padding: calc(4px + var(--safe-area-top)) 12px 6px 12px;
    }

    .jam-input-area {
        padding: 6px 10px;
    }

    .jam-textarea {
        min-height: 48px;
        height: 48px;
        padding: 12px 50px 12px 14px;
    }

    .jam-title {
        font-size: 1rem;
    }
}

/* --- DASHBOARD (Logged In Home) --- */
.dashboard-container {
    padding: 24px;
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 100px;
    /* Space for bottom nav */
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.dashboard-header h1 {
    font-size: 1.5rem;
    margin: 0;
}

.arc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.arc-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-surface);
    border-radius: 16px;
    /* Discord-ish rounded */
    box-shadow: var(--shadow-sm);
    transition: transform 0.1s;
    border: 1px solid var(--color-border);
}

.arc-item:active {
    transform: scale(0.98);
    background: var(--color-input-bg);
}

.arc-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.arc-avatar-jam {
    background: var(--color-accent-primary);
    color: #fff;
}

.arc-avatar-published {
    background: var(--color-text-main);
    color: var(--color-surface);
}

.arc-info {
    flex: 1;
}

.arc-name {
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

.arc-preview {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.arc-arrow {
    color: var(--color-border);
}

.empty-dashboard {
    text-align: center;
    padding: 80px 20px;
    max-width: 500px;
    margin: 0 auto;
}

.empty-icon {
    font-size: 3.5rem;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.empty-icon .sparkle {
    display: inline-block;
    animation: sparkleFloat 2s ease-in-out infinite;
    opacity: 0.9;
}

.empty-icon .sparkle:nth-child(1) {
    animation-delay: 0s;
}

.empty-icon .sparkle:nth-child(2) {
    animation-delay: 0.3s;
}

.empty-icon .sparkle:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes sparkleFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.9;
    }

    50% {
        transform: translateY(-8px) scale(1.1);
        opacity: 1;
    }
}

.empty-headline {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-text-main);
    letter-spacing: -0.02em;
}

.empty-subtext {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 32px;
    line-height: 1.6;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.btn-empty-cta {
    font-size: 1rem;
    padding: 14px 32px;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
}

.btn-empty-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

@media (max-width: 768px) {
    .empty-dashboard {
        padding: 60px 20px;
    }

    .empty-headline {
        font-size: 1.75rem;
    }

    .empty-subtext {
        font-size: 1rem;
    }
}

/* Arc Grid Layout (Netflix-style) */
.arcs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .arcs-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (min-width: 1400px) {
    .arcs-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Arc Card Component */
.arc-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.arc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.arc-card-cover {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8B5CF6;
    position: relative;
}

.arc-card-content {
    position: relative;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arc-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.arc-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.arc-card-badge {
    background: var(--color-bg);
    color: var(--color-text-main);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid var(--color-border);
}

.arc-card-badge-accent {
    background: var(--color-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

.arc-card-info {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.arc-card-preview {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.arc-card-author {
    display: flex;
    align-items: center;
    gap: 6px;
}

.arc-card-author-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-main);
    line-height: 1.2;
}

.arc-card-author-handle {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.2;
}

.arc-card-date {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    margin-top: auto;
}

.arc-card-delete-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: var(--color-surface-elevated, rgba(30, 30, 40, 0.9));
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s, background 0.2s;
    line-height: 1;
}

.arc-card:hover .arc-card-delete-btn {
    opacity: 1;
}

.arc-card-delete-btn:hover {
    color: var(--color-accent-primary);
    background: rgba(255, 59, 48, 0.15);
    border-color: var(--color-accent-primary);
}

/* Responsive Dashboard Grid */
@media (max-width: 768px) {
    .container[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .arc-card-cover {
        height: 160px !important;
    }

    .arc-card-content {
        padding: 12px !important;
    }

    .arc-card-title {
        font-size: 0.95rem !important;
    }

    .arc-card-delete-btn {
        opacity: 1;
    }
}

/* --- EXPLORE PAGE RAILS --- */

.explore-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
}

.explore-header {
    margin-bottom: 32px;
}

.explore-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 16px;
    font-family: var(--font-display);
}

.explore-header p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

/* Active Filter Badges */
.active-filter-badge {
    background: var(--color-accent-primary);
    color: #FFF;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.active-filter-badge a {
    opacity: 0.7;
    transition: opacity 0.2s;
}

.active-filter-badge a:hover {
    opacity: 1;
}

/* Hero Section */
.explore-hero {
    margin-bottom: 48px;
}

.hero-card {
    display: flex;
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.hero-card-cover {
    width: 400px;
    min-width: 400px;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8B5CF6;
}

.hero-card-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.hero-card-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-card-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.hero-card-author-avatar.author-avatar-initial {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
    border: 1px solid var(--color-border);
}

.hero-card-author-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.hero-card-author-handle {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.hero-card-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-badge {
    background: var(--color-bg);
    color: var(--color-text-main);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
}

.hero-badge-accent {
    background: var(--color-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

.hero-card-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    color: var(--color-text-main);
}

.hero-card-preview {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 8px 0;
}

.hero-card-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-top: auto;
}

.same-spark-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
    margin-bottom: 32px;
    align-items: stretch;
}

.same-spark-hero-copy,
.same-spark-prompt-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.same-spark-hero-copy {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.same-spark-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-primary);
}

.same-spark-title {
    font-size: 2.4rem;
    line-height: 1.1;
    margin: 0;
}

.same-spark-subtitle {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.same-spark-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.same-spark-prompt-card {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255, 51, 102, 0.06) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.same-spark-prompt-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-primary);
}

.same-spark-prompt-line {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 700;
}

.same-spark-prompt-context {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.same-spark-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
}

.same-spark-featured-card {
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    .explore-container {
        padding: 20px 16px;
    }

    .explore-header {
        margin-bottom: 16px;
    }

    .explore-header h1 {
        font-size: 1.5rem;
        margin-bottom: 4px;
    }

    .explore-header p {
        font-size: 0.9rem;
    }

    .hero-card {
        flex-direction: column;
    }

    .same-spark-hero {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hero-card-cover {
        width: 100%;
        min-width: 100%;
        height: 220px;
    }

    .hero-card-content {
        padding: 24px;
    }

    .hero-card-title {
        font-size: 1.5rem;
    }

    .hero-card-preview {
        font-size: 1rem;
    }
}

/* Rails Container */
.rails-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Rail Section */
.rail-section {
    margin-bottom: 48px;
}

.rail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.rail-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text-main);
}

.rail-view-all {
    color: var(--color-accent-primary);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: opacity 0.2s;
}

.rail-view-all:hover {
    opacity: 0.8;
}

.rail-container {
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
}

.rail-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    flex: 1;
}

.rail-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Rail Scroll Buttons — absolute positioned to avoid layout shift */
.rail-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-main);
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    z-index: 10;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    pointer-events: none;
}

.rail-scroll-btn.rail-scroll-left {
    left: -20px;
}

.rail-scroll-btn.rail-scroll-right {
    right: -20px;
}

.rail-container:hover .rail-scroll-btn {
    opacity: 1;
    pointer-events: auto;
}

.rail-scroll-btn:hover {
    background: var(--color-bg);
    box-shadow: var(--shadow-md);
    transform: translateY(-50%) scale(1.1);
}

.rail-scroll-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.rail-scroll-btn svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .rail-scroll-btn {
        width: 32px;
        height: 32px;
        opacity: 0.85;
        pointer-events: auto;
        background: rgba(0, 0, 0, 0.6);
        border-color: transparent;
        color: #fff;
    }

    .rail-scroll-btn.rail-scroll-left {
        left: 4px;
    }

    .rail-scroll-btn.rail-scroll-right {
        right: 4px;
    }

    .rail-scroll-btn:hover {
        opacity: 1;
        background: rgba(0, 0, 0, 0.8);
        transform: translateY(-50%);
    }

    .rail-scroll-btn svg {
        width: 16px;
        height: 16px;
    }
}

.rail-card {
    flex: 0 0 308px;
    /* Show 3.5 cards instead of 4.5 for better readability */
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.rail-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.rail-card-cover {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8B5CF6;
}

.rail-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rail-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rail-card-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 2px;
}

.rail-card-author-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-main);
    line-height: 1.2;
}

.rail-card-author-handle {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    line-height: 1.2;
}

.rail-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.rail-card-badge {
    background: var(--color-bg);
    color: var(--color-text-main);
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid var(--color-border);
}

.rail-card-badge-accent {
    background: var(--color-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

.rail-card-info {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .rail-card {
        flex: 0 0 231px;
        /* Show 3.5 cards instead of 4.5 for better readability */
    }

    .rail-card-cover {
        height: 140px;
        /* Slightly taller to match larger card width */
    }

    .rail-card-content {
        padding: 12px;
        /* Slightly more padding for better spacing */
    }

    .rail-card-title {
        font-size: 0.9rem;
        /* Slightly larger font for better readability */
    }

    .rail-card-author-name {
        font-size: 0.75rem;
    }

    .rail-card-author-handle {
        font-size: 0.65rem;
    }

    .rail-title {
        font-size: 1.25rem;
    }
}

/* Empty State */
.explore-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--color-text-muted);
}

.explore-empty-state h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 12px;
}

/* --- SEARCH PAGE --- */

.search-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
}

.search-header {
    margin-bottom: 32px;
}

.search-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 16px;
    font-family: var(--font-display);
}

.search-header p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.search-bar-container {
    margin-bottom: 24px;
}

.search-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-input-group {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.search-input {
    flex: 1;
    padding: 16px 20px;
    font-size: 1.1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--color-text-main);
    transition: border-color 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-accent-primary);
}

.filter-btn {
    padding: 16px 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    position: relative;
}

.search-btn {
    padding: 16px 32px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.filter-badge-count {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: var(--color-accent-primary);
    color: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Active Filters */
.active-filters-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    padding: 12px 0;
}

.active-filters-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.clear-all-btn {
    padding: 6px 16px;
    font-size: 0.85rem;
    margin-left: auto;
}

/* Filter Modal */
.filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.filter-modal.active {
    opacity: 1;
    visibility: visible;
}

.filter-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.filter-modal-content {
    position: relative;
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s ease;
    z-index: 1001;
    box-shadow: var(--shadow-xl);
}

.filter-modal.active .filter-modal-content {
    transform: scale(1) translateY(0);
}

@media (max-width: 768px) {
    .filter-modal {
        align-items: flex-end;
    }

    .filter-modal-content {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        width: 100%;
        max-width: 100%;
        transform: translateY(100%);
    }

    .filter-modal.active .filter-modal-content {
        transform: translateY(0);
    }
}

.filter-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    z-index: 10;
}

.filter-modal-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.filter-modal-close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: background 0.2s ease;
}

.filter-modal-close:hover {
    background: var(--color-bg);
}

.filter-modal-form {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filter-modal-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-modal-field .filter-label {
    color: var(--color-text-main, #F0F0F5);
    font-weight: 600;
}

.filter-modal-field select,
.filter-modal-field .filter-select {
    background: var(--color-bg, #0D0D14);
    color: var(--color-text-main, #F0F0F5);
    border: 1px solid var(--color-border-strong, rgba(255, 255, 255, 0.15));
    border-radius: var(--radius-md, 10px);
    padding: 12px 14px;
    font-size: 0.9rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

.filter-modal-field select option {
    background: var(--color-surface, #1A1A2E);
    color: var(--color-text-main, #F0F0F5);
}

.filter-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.search-results-header {
    margin-bottom: 24px;
    color: var(--color-text-muted);
}

.search-results-header p {
    margin: 0;
    font-size: 0.95rem;
}

.search-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--color-text-muted);
}

.search-empty-state h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 12px;
}

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}

.pagination-info {
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .search-container {
        padding: 20px 16px;
    }

    .search-input-group {
        flex-wrap: nowrap;
    }

    .search-input {
        flex: 1;
        min-width: 0;
        padding: 10px 14px;
        font-size: 0.95rem;
    }

    .filter-btn {
        flex: 0 0 auto;
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .search-btn {
        display: none;
    }

    .search-header {
        margin-bottom: 16px;
    }

    .search-header h1 {
        font-size: 1.5rem;
        margin-bottom: 4px;
    }

    .search-header p {
        font-size: 0.9rem;
    }

    .my-arcs-header {
        margin-bottom: 16px;
    }

    .my-arcs-header h1 {
        font-size: 1.5rem;
        margin-bottom: 4px;
    }

    .my-arcs-header p {
        font-size: 0.9rem;
    }

    .active-filters-container {
        padding: 12px 0;
    }

    .clear-all-btn {
        margin-left: 0;
        width: 100%;
    }
}

/* --- ARC PAGE (PUBLIC VIEW) --- */

.arc-page-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 24px;
}

.post-flex-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    margin-bottom: 24px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 51, 102, 0.08) 0%, rgba(139, 92, 246, 0.06) 100%);
    border: 1px solid rgba(255, 51, 102, 0.16);
}

.post-flex-banner-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.post-flex-banner-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-primary);
}

.post-flex-banner-title {
    margin: 0;
    font-size: 1.5rem;
}

.post-flex-banner-text {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 640px;
}

.post-flex-banner-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Arc Meta Section */
.arc-meta-section {
    margin-bottom: 32px;
    padding: 32px 40px;
    background: linear-gradient(135deg, rgba(255, 51, 102, 0.05) 0%, rgba(139, 92, 246, 0.03) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.arc-meta-header {
    margin-bottom: 0;
    padding-bottom: 0;
}

.arc-title {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.2;
    font-family: var(--font-display);
    color: var(--color-text-main);
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

/* Metadata */
.arc-metadata {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.arc-badge {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.arc-badge:hover {
    transform: translateY(-1px);
}

.arc-badge-theme {
    background: var(--color-bg);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

.arc-badge-personality {
    background: var(--color-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

.arc-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.arc-meta-item svg {
    opacity: 0.6;
}

.arc-meta-item-love {
    font-weight: 600;
}

/* Author Info within Meta Section */
.arc-meta-author {
    margin-top: 0;
    margin-bottom: 16px;
}

.arc-author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.arc-author-info-link {
    color: inherit;
    text-decoration: none;
}

.arc-author-info-link:hover .arc-author-name {
    color: var(--color-accent);
}

.arc-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border);
    flex-shrink: 0;
}

.arc-author-avatar.author-avatar-initial {
    width: 36px;
    height: 36px;
    border: 2px solid var(--color-border);
}

.arc-author-details {
    flex: 1;
}

.arc-author-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-main);
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.arc-author-handle {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.arc-meta-date {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Context Box */
.arc-context-box {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 24px 28px;
    border-radius: var(--radius-md);
    margin-bottom: 32px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.arc-context-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.arc-context-header svg {
    opacity: 0.7;
    width: 18px;
    height: 18px;
}

.arc-context-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-main);
    margin: 0;
}

.arc-context-divider {
    height: 1px;
    background: var(--color-border);
    margin: 20px 0;
}

/* Narrative Content */
.arc-narrative {
    margin-bottom: 40px;
}

.arc-narrative-content {
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--color-text-main);
    font-family: var(--font-sans);
}

.arc-paragraph {
    margin-bottom: 1.0em;
    margin-top: 0;
}

.arc-paragraph:first-child {
    margin-top: 0;
}

.arc-paragraph:last-child {
    margin-bottom: 0;
}

.arc-empty {
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
    padding: 48px 20px;
}

.arc-share-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 0;
    margin-bottom: 24px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.arc-share-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    padding: 8px 16px;
}

@media (max-width: 480px) {
    .arc-share-row {
        gap: 8px;
    }

    .arc-share-row-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

.arc-share-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 24px;
    margin-bottom: 36px;
    padding: 28px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 51, 102, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.arc-share-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.arc-share-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-primary);
}

.arc-share-title {
    margin: 0;
    font-size: 1.75rem;
}

.arc-share-text {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.7;
    max-width: 560px;
}

.arc-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.arc-share-helper-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
}

.arc-helper-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.arc-helper-link:hover {
    color: var(--color-text-main);
}

.arc-share-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
    padding: 24px;
    border-radius: 28px;
    background:
        radial-gradient(140% 100% at 0% 0%, rgba(255, 51, 102, 0.18), transparent 44%),
        radial-gradient(120% 100% at 100% 0%, rgba(139, 92, 246, 0.18), transparent 46%),
        rgba(10, 10, 15, 0.92);
    border: 1px solid rgba(240, 240, 245, 0.14);
    overflow: hidden;
}

.arc-share-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 40%);
    pointer-events: none;
}

.arc-share-card-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(240, 240, 245, 0.08);
    color: var(--color-text-main);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.arc-share-card-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

.arc-share-card-prompt {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text-main);
    font-weight: 600;
}

.arc-share-card-excerpt {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: rgba(240, 240, 245, 0.82);
}

.arc-share-card-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.arc-share-card-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(240, 240, 245, 0.08);
    color: var(--color-text-main);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: capitalize;
}

.arc-share-card-pill-accent {
    background: rgba(255, 51, 102, 0.18);
    color: #fff;
}

.arc-share-card-credit {
    color: rgba(240, 240, 245, 0.68);
    font-size: 0.82rem;
    font-weight: 600;
}

/* Call-to-Action Section */
.arc-cta-section {
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.arc-cta-primary {
    flex: 0 0 auto;
}

.arc-cta-button {
    padding: 16px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arc-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.arc-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
}

.arc-action-btn {
    padding: 12px 24px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease;
}

.arc-action-btn:hover {
    transform: translateY(-1px);
}

.arc-reaction-bar {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.arc-love-btn.is-loved {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
    background: rgba(255, 51, 102, 0.08);
}

.arc-love-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-main);
    font-size: 0.78rem;
    font-weight: 700;
}

.arc-utility-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.arc-utility-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.arc-utility-link:hover {
    color: var(--color-text-main);
}

.arc-report-link {
    opacity: 0.7;
}

.arc-report-link:hover {
    opacity: 1;
}

/* Next Story CTA */
.arc-next-story {
    display: flex;
    justify-content: flex-end;
    padding: 24px 0 48px;
}

.arc-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: none;
    border-radius: 999px;
    background: var(--color-input-bg);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.arc-next-btn:hover {
    background: var(--color-border);
    color: var(--color-text-main);
}

.arc-next-btn svg {
    transition: transform 0.2s ease;
}

.arc-next-btn:hover svg {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .arc-next-story {
        justify-content: center;
    }
}

/* Toast Notification */
.arc-toast {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--color-text-main);
    color: var(--color-surface);
    padding: 16px 24px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.arc-toast.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
    .arc-page-container {
        padding: 12px 16px;
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
    }

    .post-flex-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .post-flex-banner-actions {
        width: 100%;
        justify-content: stretch;
    }

    .post-flex-banner-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .arc-meta-section {
        padding: 0;
        margin-bottom: 16px;
        background: none;
        border: none;
        border-radius: 0;
    }

    .arc-meta-header {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .arc-cta-section {
        flex-direction: column;
        align-items: stretch;
    }

    .arc-cta-primary {
        margin-bottom: 24px;
        text-align: center;
    }

    .arc-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .arc-action-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .arc-title {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }

    .arc-metadata {
        gap: 8px;
    }

    .arc-badge {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    .arc-meta-item {
        font-size: 0.8rem;
    }

    .arc-author-card {
        padding: 16px 20px;
    }

    .arc-author-avatar {
        width: 48px;
        height: 48px;
    }

    .arc-author-name {
        font-size: 1rem;
    }

    .arc-context-box {
        padding: 20px 16px;
        margin-bottom: 24px;
    }

    .arc-context-text {
        font-size: 1rem;
        line-height: 1.7;
    }

    .arc-share-panel {
        grid-template-columns: 1fr;
        padding: 20px 16px;
        margin-bottom: 28px;
    }

    .arc-share-title {
        font-size: 1.35rem;
    }

    .arc-share-actions {
        width: 100%;
    }

    .arc-share-actions .arc-action-btn {
        flex: 1 1 100%;
    }

    .arc-share-helper-links {
        gap: 12px;
    }

    .arc-helper-link {
        font-size: 0.85rem;
    }

    .arc-share-card {
        padding: 20px;
        border-radius: 24px;
    }

    .arc-narrative {
        margin-bottom: 48px;
    }

    .arc-narrative-content {
        font-size: 1.05rem;
        line-height: 1.85;
    }

    .arc-cta-section {
        padding-top: 24px;
        margin-top: 24px;
    }

    .arc-cta-button {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .arc-actions {
        width: 100%;
    }

    .arc-action-btn {
        flex: 1;
        justify-content: center;
        min-width: 120px;
    }

    .arc-utility-actions {
        gap: 12px;
        justify-content: flex-start;
    }

    .arc-utility-link {
        font-size: 0.85rem;
    }

    .arc-toast {
        bottom: 16px;
        right: 16px;
        left: 16px;
        width: calc(100% - 32px);
    }
}

/* --- MY ARCS PAGE --- */

.my-arcs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
}

.my-arcs-header {
    margin-bottom: 32px;
}

.my-arcs-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 16px;
    font-family: var(--font-display);
}

.my-arcs-header p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.my-arcs-empty-state {
    text-align: center;
    padding: 100px 20px 80px;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.my-arcs-empty-illustration {
    margin-bottom: 8px;
    opacity: 0.9;
}

.my-arcs-empty-state h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
}

.my-arcs-empty-copy {
    max-width: 360px;
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0;
}

.my-arcs-empty-cta {
    margin-top: 8px;
}

/* Status Pill on Cards */
.arc-card-cover {
    position: relative;
}

.arc-card-status-pill {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.arc-status-user-turn {
    background: var(--color-accent-primary);
    color: #FFF;
}

.arc-status-ai-turn {
    background: var(--color-accent-blue);
    color: #FFF;
}

.arc-status-completed,
.arc-status-published {
    background: var(--color-text-muted);
    color: #FFF;
}

.arc-status-active,
.arc-status-init {
    background: var(--color-accent-secondary);
    color: var(--color-text-main);
}

@media (max-width: 768px) {
    .my-arcs-container {
        padding: 20px 16px;
    }

    .my-arcs-header {
        margin-bottom: 12px;
    }

    .my-arcs-header h1 {
        font-size: 1.5rem;
        margin-bottom: 4px;
    }

    .my-arcs-header p {
        font-size: 0.9rem;
    }
}

/* Feed Styles */
.feed-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-bg);
    z-index: 1;
}

.feed-shell {
    width: min(720px, 100%);
    margin: 0 auto;
    padding: 76px 16px 40px;
}

.feed-discovery-intro {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 18px;
    padding: 24px;
    border-radius: 24px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(255, 51, 102, 0.14), transparent 48%),
        radial-gradient(120% 120% at 100% 0%, rgba(139, 92, 246, 0.14), transparent 50%),
        var(--color-surface);
    border: 1px solid var(--color-border);
}

.feed-discovery-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feed-discovery-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-primary);
}

.feed-discovery-title {
    margin: 0;
    font-size: 2rem;
    line-height: 1.1;
}

.feed-discovery-text {
    margin: 0;
    max-width: 560px;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.feed-discovery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.desktop-mobile-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #FF3366;
    color: #FFF;
    padding: 12px 20px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-height: 48px;
    /* Ensure consistent height */
    display: flex;
    align-items: center;
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0.9rem;
}

.banner-icon {
    font-size: 1.2rem;
}

.banner-text {
    flex: 1;
}

.banner-link {
    color: #FFF;
    text-decoration: underline;
    font-weight: 600;
    margin-left: auto;
}

.banner-close {
    background: none;
    border: none;
    color: #FFF;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Daily Story Card — Daily Challenge */
.daily-story-card {
    margin: 0 0 18px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 51, 102, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px solid rgba(255, 51, 102, 0.2);
    border-radius: 16px;
}

@media (max-width: 768px) {
    .daily-story-card {
        padding: 14px;
        border-radius: 12px;
    }
}

.daily-story-eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.daily-story-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-primary);
}

.daily-story-dismiss {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.daily-story-body {
    margin-bottom: 12px;
}

.daily-story-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.daily-story-theme,
.daily-story-personality,
.daily-story-language {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-main);
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
}

.daily-story-opening {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-text-main);
    margin: 0 0 8px;
    font-style: italic;
}

.daily-story-context {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

.daily-story-cta {
    text-align: center;
    padding: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
}

.daily-story-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.daily-story-bend-count {
    font-size: 0.82rem;
    color: var(--color-accent-primary, #8B5CF6);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.daily-story-bend-count:hover {
    text-decoration: underline;
}

/* Popular Sparks Section (Feed + Explore) */
.popular-sparks-section {
    margin-bottom: 24px;
}

.popular-sparks-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 600px) {
    .popular-sparks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .popular-sparks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.spark-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--color-surface-secondary, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.15s;
}

.spark-card:hover {
    border-color: var(--color-accent-primary, #8B5CF6);
    transform: translateY(-2px);
}

.spark-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.spark-card-theme,
.spark-card-pill {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-main);
    padding: 3px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
}

.spark-card-bend-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent-primary, #8B5CF6);
    background: var(--color-accent-muted, rgba(139, 92, 246, 0.12));
    padding: 2px 8px;
    border-radius: 8px;
}

.spark-card-opening {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-text-primary, #fff);
    font-style: italic;
    margin: 0;
}

.spark-card-cta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-accent-primary, #8B5CF6);
}

/* Explore: Today's Spark */
.explore-daily-spark {
    background: var(--color-surface-secondary, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.explore-daily-spark-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.explore-daily-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent-primary, #8B5CF6);
}

.explore-daily-bend-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent-primary, #8B5CF6);
    background: var(--color-accent-muted, rgba(139, 92, 246, 0.12));
    padding: 3px 10px;
    border-radius: 8px;
}

.explore-daily-spark-body {
    margin-bottom: 16px;
}

.explore-daily-meta {
    margin-bottom: 8px;
}

.explore-daily-theme {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted, #999);
}

.explore-daily-opening {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-primary, #fff);
    font-style: italic;
    margin: 0 0 8px 0;
}

.explore-daily-context {
    font-size: 0.85rem;
    color: var(--color-text-muted, #999);
    line-height: 1.4;
    margin: 0;
}

.explore-daily-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Explore: Popular Sparks */
.explore-popular-sparks {
    margin-bottom: 28px;
}

.explore-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.explore-section-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-muted, #999);
    margin: 0 0 16px 0;
}

/* Home: Daily Spark (Guest) */
.home-daily-spark-section {
    padding: 0 0 20px 0;
}

.home-daily-spark-card {
    background: var(--color-surface-secondary, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    padding: 20px;
}

.home-daily-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent-primary, #8B5CF6);
}

.home-daily-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.home-daily-theme {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted, #999);
}

.home-daily-bends {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent-primary, #8B5CF6);
    background: var(--color-accent-muted, rgba(139, 92, 246, 0.12));
    padding: 2px 8px;
    border-radius: 8px;
}

.home-daily-opening {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-primary, #fff);
    font-style: italic;
    margin: 0 0 16px 0;
}

.home-daily-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.feed-sections {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.feed-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feed-section.is-hidden {
    display: none;
}

.feed-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    padding: 0 4px;
    margin-bottom: 16px;
}

.feed-section-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-primary);
}

.feed-section-title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

.feed-section-text {
    margin: 6px 0 0;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.feed-section-link {
    flex-shrink: 0;
    color: var(--color-text-main);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
}

.feed-section-link:hover {
    border-color: var(--color-text-main);
    background: var(--color-surface);
}

.feed-section-cards,
.feed-cards {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feed-card {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

/* Subtle fade-in when card enters viewport */
.feed-card.in-view {
    animation: feedCardFadeIn 0.3s ease-out both;
}

@keyframes feedCardFadeIn {
    from {
        opacity: 0.6;
    }

    to {
        opacity: 1;
    }
}

.feed-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.feed-card-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.author-avatar,
.author-avatar-placeholder,
.author-avatar-initial {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.author-avatar-initial {
    background: var(--gradient-primary);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.author-info {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.author-profile-link {
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.author-profile-link:hover .author-name {
    color: var(--color-accent);
}

.author-name {
    font-weight: 600;
    color: var(--color-text-main);
    font-size: 0.85rem;
    line-height: 1.2;
}

.author-handle {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 400;
    line-height: 1.2;
}

.author-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.theme-badge,
.personality-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    text-transform: capitalize;
    font-weight: 500;
    display: inline-block;
    border: 1px solid var(--color-border);
    line-height: 1.3;
}

/* Feed Card Context Styles */
.feed-card-context {
    margin: 0 0 6px 0;
    padding: 0;
    border-left: 2px solid var(--color-border);
    padding-left: 10px;
}

.feed-context-section {
    margin-bottom: 0;
}

.feed-context-label {
    display: none;
}

.feed-context-text {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    margin: 0;
    font-style: italic;
}

.feed-context-divider {
    height: 1px;
    background: var(--color-border);
    margin: 12px 0;
}

.feed-card-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.feed-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.feed-card-kicker {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 2px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 51, 102, 0.08);
    color: var(--color-accent-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.feed-card-preview,
.feed-card-story {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-main);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    margin: 4px 0 0 0;
    transition: max-height 0.3s ease;
}

.feed-card-story.collapsed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--color-surface));
    pointer-events: none;
}

.feed-card-story.collapsed {
    position: relative;
}

.feed-more-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 2px;
}

.feed-more-btn:hover {
    color: var(--color-accent-primary);
}

.feed-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid var(--color-border);
}

.feed-card-actions .reaction-bar {
    flex: 1 1 100%;
}

.feed-card-actions-row {
    display: flex;
    gap: 8px;
    margin-left: auto;
    align-items: center;
}

/* Reaction Bar */
.reaction-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.reaction-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    transition: all 0.2s ease;
}

@media (max-width: 768px) {
    .feed-card-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .reaction-bar {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .reaction-bar::-webkit-scrollbar {
        display: none;
    }

    .reaction-btn {
        flex: 0 0 auto;
        padding: 5px 9px;
        gap: 3px;
    }

    .feed-card-actions-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
        gap: 8px;
        width: 100%;
        margin-left: 0;
    }
}

.reaction-btn:hover {
    background: var(--color-input-bg);
}

.reaction-btn.reacted {
    background: rgba(255, 51, 102, 0.08);
}

.reaction-emoji {
    font-size: 0.85rem;
    line-height: 1;
}

.reaction-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.reaction-btn.reacted .reaction-label {
    color: var(--color-accent-primary);
}

.reaction-count {
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 0;
    color: var(--color-text-muted);
}

.reaction-bounce {
    animation: reactionBounce 0.4s ease;
}

@keyframes reactionBounce {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.25);
    }

    60% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.feed-action-btn {
    min-height: 36px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-text-muted);
    text-decoration: none;
    touch-action: manipulation;
    min-width: 0;
    white-space: nowrap;
    /* Prevent double-tap zoom on mobile */
}

.feed-action-label {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-muted);
}

.feed-action-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    min-width: 14px;
    text-align: left;
}

.feed-action-btn:hover,
.feed-action-btn:active {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text-main);
    transform: scale(0.98);
    /* Subtle press effect */
}

.feed-action-btn.liked {
    /* Keep button background transparent, only heart changes */
    background: transparent !important;
    color: var(--color-accent-primary);
}

.feed-action-btn.liked:hover,
.feed-action-btn.liked:active {
    /* Override hover state for liked button */
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--color-accent-primary) !important;
}

.feed-action-btn.liked svg path {
    fill: var(--color-accent-primary);
    stroke: var(--color-accent-primary);
}

.feed-action-btn.liked .feed-action-count {
    color: var(--color-accent-primary);
}

.feed-action-btn.shared {
    /* Keep button background transparent, only share icon changes to green */
    background: transparent !important;
    color: #22c55e;
    /* Green color for share icon */
}

.feed-action-btn.shared:hover,
.feed-action-btn.shared:active,
.feed-action-btn.shared:focus {
    /* Override all states for shared button - keep transparent background */
    background: rgba(0, 0, 0, 0.05) !important;
    color: #22c55e !important;
    transform: scale(0.98);
}

.feed-action-btn.shared svg {
    color: #22c55e !important;
}

/* Fill circles with green, stroke lines */
.feed-action-btn.shared svg circle {
    fill: #22c55e !important;
    stroke: #22c55e !important;
    stroke-width: 2;
}

.feed-action-btn.shared svg line {
    fill: none !important;
    stroke: #22c55e !important;
    stroke-width: 2;
}

.feed-action-btn.shared svg path {
    fill: #22c55e !important;
    stroke: #22c55e !important;
    stroke-width: 2;
}

.feed-action-btn.shared .feed-action-count {
    color: #22c55e !important;
}

/* Share button: transparent background */
.feed-action-btn.share-btn {
    background: transparent;
}

.feed-action-btn.share-btn.shared {
    color: #22c55e;
}

.feed-action-btn svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* Mobile: Action buttons */
@media (max-width: 768px) {
    .feed-action-btn {
        min-height: 42px;
        width: 100%;
        padding: 8px 6px;
        gap: 6px;
    }

    .feed-action-btn svg {
        width: 18px;
        height: 18px;
    }

    .feed-action-label {
        font-size: 0.78rem;
    }

    .feed-action-count {
        font-size: 0.78rem;
        min-width: auto;
    }
}

.swipe-indicator {
    /* Positioned below action buttons */
    position: relative;
    text-align: center;
    padding: 4px 0;
    margin-top: 2px;
    margin-bottom: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0.6;
    animation: pulse 2s infinite;
    pointer-events: none;
    /* Don't interfere with interactions */
    flex-shrink: 0;
    /* Don't shrink */
}

/* Hide swipe indicator after first interaction or on desktop */
@media (min-width: 769px) {
    .swipe-indicator {
        display: none;
        /* Not needed on desktop with mouse */
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.feed-loading,
.feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 40px 20px;
    text-align: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 16px;
}

.feed-empty h2 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: var(--color-text-main);
}

.feed-empty p {
    color: var(--color-text-muted);
}

.feed-empty-cta {
    margin-top: 16px;
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.95rem;
}

/* Feed Creation Prompt Interstitials */
.feed-prompt-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255, 51, 102, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
    border: 1px solid var(--color-border);
    border-radius: 16px;
}

.feed-prompt-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.feed-prompt-text {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-main);
}

.feed-prompt-cta {
    flex-shrink: 0;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--color-accent-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.feed-prompt-cta:hover {
    opacity: 0.9;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .feed-shell {
        padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(88px + var(--safe-area-bottom));
    }

    .feed-discovery-intro {
        padding: 18px 16px;
        border-radius: 18px;
    }

    .feed-discovery-title {
        font-size: 1.6rem;
    }

    .feed-discovery-actions .btn {
        width: 100%;
    }

    .feed-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .feed-section-link {
        width: 100%;
        text-align: center;
    }

    .feed-card {
        padding: 14px 12px;
    }

    .feed-card-title {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    .desktop-mobile-banner {
        display: none;
    }
}

/* Desktop: Center feed with max-width */
@media (min-width: 769px) {
    .feed-container {
        top: 70px;
        height: calc(100vh - 70px);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .feed-shell {
        width: min(720px, 100%);
        padding-top: 24px;
        padding-bottom: 40px;
    }

    .feed-card {
        margin-bottom: 0;
    }
}

/* Feed modal removed — stories expand in-place */

/* ==========================================
   PWA Styles
   ========================================== */

/* Safe Area Variables */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Standalone Mode Detection — use .is-standalone (set by JS) for iOS compatibility */
@media (display-mode: standalone) {
    .navbar {
        padding-top: var(--safe-area-top);
    }
}

.is-standalone .navbar {
    padding-top: var(--safe-area-top);
}

/* When navbar is hidden (logged-in mobile PWA), push main content down for status bar.
   NOTE: Pages with their own safe-area handling (feed-shell, jam-header, arc-page-container)
   must NOT get double safe-area padding. Only pages without their own handling get it here. */
@media (max-width: 768px) {

    .is-standalone .logged-in .dashboard-shell,
    .is-standalone .logged-in .explore-container,
    .is-standalone .logged-in .search-container,
    .is-standalone .logged-in .my-arcs-container {
        padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
    }
}

/* PWA Install Prompt */
.pwa-install-prompt {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 3000;
    padding: 20px;
    padding-bottom: calc(20px + var(--safe-area-bottom));
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.pwa-install-prompt[style*="display: block"] {
    transform: translateY(0);
}

.pwa-install-content {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.pwa-install-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--color-bg);
    color: var(--color-text-main);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
}

.pwa-install-close:hover {
    background: var(--color-border);
    transform: scale(1.1);
}

.pwa-install-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.pwa-install-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-text-main);
}

.pwa-install-content p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

.pwa-ios-instructions {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
    text-align: left;
}

.pwa-ios-instructions ol {
    margin: 0;
    padding-left: 20px;
}

.pwa-ios-instructions li {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--color-text-main);
    line-height: 1.5;
}

.pwa-install-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.pwa-install-actions .btn {
    flex: 1;
    max-width: 200px;
}

/* Offline Indicator */
.offline-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-accent-primary);
    color: #FFFFFF;
    padding: 12px 20px;
    padding-top: calc(12px + var(--safe-area-top));
    text-align: center;
    z-index: 4000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.offline-indicator.show {
    transform: translateY(0);
}

.offline-indicator-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.offline-indicator-content svg {
    width: 16px;
    height: 16px;
}

/* Offline Queued Notification */
.offline-queued-notification {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--color-text-main);
    padding: 12px 20px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    font-size: 0.9rem;
    z-index: 3500;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.offline-queued-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Update bottom nav for safe area */
.bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Body classes for online/offline state */
body.offline {
    /* Could add visual indicator if needed */
}

body.online {
    /* Default state */
}

/* Pull to Refresh Indicator (for feed) */
.pull-to-refresh {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.pull-to-refresh.active {
    opacity: 1;
}

.pull-to-refresh svg {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

/* Haptic Feedback (visual feedback when haptics not available) */
.haptic-feedback {
    animation: haptic-pulse 0.1s ease;
}

@keyframes haptic-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.98);
    }
}

/* Standalone mode adjustments — duplicated with .is-standalone for iOS Safari */

/* Desktop standalone: navbar visible, offset feed below it */
@media (display-mode: standalone) and (min-width: 769px) {
    .feed-container {
        top: calc(70px + var(--safe-area-top));
        height: calc(100dvh - 70px - var(--safe-area-top) - var(--safe-area-bottom));
    }
}

/* Mobile standalone: navbar hidden for logged-in, extend behind status bar for seamless look */
@media (display-mode: standalone) and (max-width: 768px) {
    .feed-container {
        top: 0;
        height: 100dvh;
    }
}

@media (display-mode: standalone) {
    .jam-header {
        padding-top: calc(8px + var(--safe-area-top));
    }
}

/* iOS standalone via JS class — extend behind status bar */
@media (max-width: 768px) {
    .is-standalone .feed-container {
        top: 0;
        height: 100dvh;
    }
}

@media (min-width: 769px) {
    .is-standalone .feed-container {
        top: calc(70px + env(safe-area-inset-top, 0px));
        height: calc(100dvh - 70px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
}

/* On mobile, jam-layout uses top:0; bottom:0; height:auto which is more reliable than 100vh on iOS */

.is-standalone .jam-header {
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
}

/* ==========================================
   SPLASH SCREEN
   ========================================== */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

/* Only show splash in PWA standalone mode */
@media all and (display-mode: standalone) {
    .splash-screen {
        display: flex;
    }
}

[data-theme="dark"] .splash-screen {
    background: var(--color-bg);
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    padding: 40px;
}

.splash-logo {
    width: 128px;
    height: 128px;
    object-fit: contain;
    animation: splash-fade-in 0.5s ease-out;
}

/* Dark mode: invert + screen blend to remove white background */
[data-theme="dark"] .splash-logo {
    filter: invert(1);
    mix-blend-mode: screen;
    isolation: isolate;
}

.splash-tagline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0;
    white-space: nowrap;
    line-height: 1.5;
    animation: splash-fade-in 0.7s ease-out;
}

@keyframes splash-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .splash-logo {
        width: 96px;
        height: 96px;
    }

    .splash-tagline {
        font-size: 0.85rem;
    }
}



@keyframes coachmark-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5),
            0 0 0 4px rgba(59, 130, 246, 0.8);
    }

    50% {
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5),
            0 0 0 6px rgba(59, 130, 246, 1);
    }
}



/* ==========================================
   JAM HELP MODAL
   ========================================== */
.jam-help-btn {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.2s;
    padding: 0;
}

.jam-help-btn:hover {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--color-text-main);
    border-color: var(--color-text-main);
}

.jam-help-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.2s;
    padding: 6px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    background: transparent;
}

.jam-help-icon:hover {
    color: var(--color-text-main);
    background: rgba(0, 0, 0, 0.05);
}

.jam-help-icon:focus {
    outline: 2px solid var(--color-text-main);
    outline-offset: 2px;
}

.jam-help-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.jam-help-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.jam-help-content {
    position: relative;
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 32px;
    z-index: 2001;
}

.jam-help-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.jam-help-close:hover {
    background: var(--color-bg);
    color: var(--color-text-main);
}

.jam-help-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0 0 24px 0;
}

.jam-help-section {
    margin-bottom: 24px;
}

.jam-help-section:last-child {
    margin-bottom: 0;
}

.jam-help-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0 0 12px 0;
}

.jam-help-section p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.jam-help-section ol,
.jam-help-section ul {
    margin: 0;
    padding-left: 24px;
    color: var(--color-text-muted);
    line-height: 1.8;
}

.jam-help-section li {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.jam-help-section li:last-child {
    margin-bottom: 0;
}

.jam-help-section strong {
    color: var(--color-text-main);
    font-weight: 600;
}

/* ==========================================
   GLOBAL HELP MODAL
   ========================================== */
.global-help-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.global-help-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.global-help-content {
    position: relative;
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 2001;
}

.global-help-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 2002;
}

.global-help-close:hover {
    background: var(--color-bg);
    color: var(--color-text-main);
}

.global-help-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0;
    padding: 32px 32px 20px 32px;
}

.help-tabs {
    display: flex;
    gap: 8px;
    padding: 0 32px 20px 32px;
    border-bottom: 1px solid var(--color-border);
}

.help-tab {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    margin-bottom: -1px;
}

.help-tab:hover {
    color: var(--color-text-main);
}

.help-tab.active {
    color: var(--color-text-main);
    border-bottom-color: var(--color-text-main);
}

.help-tab-content {
    display: none;
    overflow-y: auto;
    padding: 24px 32px 32px 32px;
    flex: 1;
}

.help-tab-content.active {
    display: block;
}

.help-section {
    margin-bottom: 24px;
}

.help-section:last-child {
    margin-bottom: 0;
}

.help-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0 0 12px 0;
}

.help-section p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.help-section ol,
.help-section ul {
    margin: 0;
    padding-left: 24px;
    color: var(--color-text-muted);
    line-height: 1.8;
}

.help-section li {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.help-section li:last-child {
    margin-bottom: 0;
}

.help-section strong {
    color: var(--color-text-main);
    font-weight: 600;
}

/* FAQ Accordion */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.2s;
}

.faq-item:hover {
    border-color: var(--color-text-main);
}

.faq-question {
    width: 100%;
    background: var(--color-bg);
    border: none;
    padding: 16px;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-main);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.faq-question:hover {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.faq-toggle {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    font-weight: 300;
    transition: transform 0.2s;
}

.faq-item.open .faq-toggle {
    transform: rotate(0deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.faq-answer p {
    padding: 0 16px 16px 16px;
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .global-help-content {
        max-width: 100%;
        max-height: 90vh;
        margin: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .global-help-content h2 {
        padding: 24px 20px 16px 20px;
        font-size: 1.3rem;
    }

    .help-tabs {
        padding: 0 20px 16px 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .help-tab {
        font-size: 0.85rem;
        padding: 6px 12px;
        white-space: nowrap;
    }

    .help-tab-content {
        padding: 20px;
    }
}

/* --- JAM ONBOARDING (Coachmarks) --- */
.coachmark-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9997;
    display: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.coachmark-highlight {
    position: fixed;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    z-index: 9998;
    transition: all 0.3s ease;
}

.coachmark-tooltip {
    background: var(--color-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: var(--radius-lg);
    padding: 20px;
    width: 300px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border);
    display: none;
    position: fixed;
    z-index: 9999;
    animation: fade-in-up 0.3s ease;
}

.coachmark-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.coachmark-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
}

.coachmark-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coachmark-message {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-main);
    margin-bottom: 20px;
}

.coachmark-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.coachmark-skip {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 12px;
}

.coachmark-next {
    background: var(--color-accent-primary);
    color: #FFF;
    border: none;
    border-radius: var(--radius-md);
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.coachmark-next:hover {
    transform: translateY(-2px);
}

.coachmark-progress {
    border-top: 1px solid var(--color-border);
    padding-top: 12px;
    display: flex;
    justify-content: center;
}

.coachmark-step-indicator {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- PHASE 1 VISUAL REFRESH --- */

.is-hidden {
    display: none;
}

.nav-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Theme Toggle */
.theme-toggle-btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s;
}

.theme-toggle-btn:hover {
    color: var(--color-text-main);
    border-color: var(--color-text-main);
}

/* Default: hide moon (dark is default theme) */
.theme-icon-moon {
    display: none;
}

/* Dark mode: show sun (to switch to light), hide moon */
[data-theme="dark"] .theme-icon-sun {
    display: block;
}

[data-theme="dark"] .theme-icon-moon {
    display: none;
}

/* Light mode: show moon (to switch to dark), hide sun */
[data-theme="light"] .theme-icon-sun {
    display: none;
}

[data-theme="light"] .theme-icon-moon {
    display: block;
}

.nav-profile-wrap {
    position: relative;
}

.nav-profile-trigger-inline {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.nav-profile-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.nav-profile-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
}

.nav-link-strong {
    color: var(--color-text-main);
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.nav-icon-link {
    color: var(--color-text-main);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.nav-notifications-link {
    position: relative;
}

.nav-notifications-link.is-active {
    color: var(--color-accent);
}

.nav-notification-badge,
.context-menu-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.nav-notification-badge {
    position: absolute;
    top: -4px;
    right: -6px;
}

.nav-login-link {
    color: var(--color-text-main);
    margin-right: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.nav-signup-btn {
    padding: 8px 20px;
    font-size: 0.9rem;
}

.footer-help-row {
    margin-top: 12px;
}

.footer-help-link {
    color: var(--color-text-muted);
    text-decoration: underline;
    font-size: 0.85rem;
}

.footer-sep {
    color: var(--color-text-muted);
    margin: 0 6px;
    opacity: 0.5;
}

.help-muted-note {
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.help-remember-text {
    font-style: italic;
    color: var(--color-text-muted);
}

.bottom-nav-menu-wrap {
    position: relative;
}

.bottom-nav-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
}

.ios-share-icon {
    font-size: 1.2em;
}

.dashboard-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.dashboard-intro {
    margin-bottom: 40px;
}

.dashboard-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 16px;
    font-family: var(--font-display);
}

.dashboard-subtitle {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    margin-bottom: 32px;
}

.dashboard-action-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.dashboard-primary-btn {
    padding: 12px 24px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dashboard-action-btn {
    padding: 12px 24px;
    font-weight: 600;
}

.creator-profile-shell {
    max-width: 1240px;
}

.creator-profile-hero {
    padding: 32px;
    border: 1px solid var(--color-border);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 59, 122, 0.14), transparent 34%),
        radial-gradient(circle at left bottom, rgba(124, 92, 255, 0.14), transparent 28%),
        var(--color-surface);
    margin-bottom: 28px;
}

.creator-profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
}

.creator-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
}

.creator-profile-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff3b7a 0%, #7c5cff 100%);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
}

.creator-profile-copy {
    min-width: 0;
}

.creator-profile-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    color: var(--color-accent);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.creator-profile-title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1;
}

.creator-profile-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.creator-profile-subtitle {
    margin: 0;
    max-width: 720px;
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.creator-profile-subtle-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}

.creator-subtle-link {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s;
}

.creator-subtle-link:hover {
    color: rgba(255, 255, 255, 0.65);
}

.creator-highlight-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.creator-trait-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-secondary, var(--color-text-muted));
    font-size: 0.92rem;
    font-weight: 600;
}

.creator-profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.creator-stat-card {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.creator-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.creator-stat-label {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.creator-highlight {
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(420px, 1.12fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 28px;
}

.creator-highlight-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.creator-highlight-title,
.creator-arc-section-title {
    margin: 0 0 8px;
    font-size: 1.6rem;
    font-weight: 800;
}

.creator-highlight-subtitle,
.creator-arc-section-subtitle {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.creator-highlight-actions {
    margin-top: 18px;
}

.creator-highlight-points {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.creator-highlight-point {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.creator-highlight-point-label {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.creator-highlight-point-value {
    color: var(--color-text-main);
    line-height: 1.5;
    font-size: 0.98rem;
}

.creator-highlight-card-wrap .arc-card {
    height: 100%;
}

.creator-arc-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.notifications-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.notifications-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.notifications-summary-item {
    min-width: 88px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notifications-summary-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.notifications-summary-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notification-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.notification-card.is-unread {
    border-color: rgba(255, 59, 122, 0.32);
    box-shadow: 0 0 0 1px rgba(255, 59, 122, 0.12) inset;
}

.notification-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.notification-avatar-fallback {
    background: linear-gradient(135deg, #ff3b7a 0%, #7c5cff 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
}

.notification-main {
    min-width: 0;
}

.notification-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.notification-kind {
    color: var(--color-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.notification-title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
}

.notification-message {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.notification-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.notification-action-btn {
    white-space: nowrap;
}

.notification-secondary-link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
}

.notification-secondary-link:hover {
    color: var(--color-text-main);
}

.notifications-empty {
    border: 1px dashed var(--color-border);
    border-radius: 24px;
    background: var(--color-surface);
    padding: 48px 24px;
    text-align: center;
}

.notifications-empty-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.notifications-empty h2 {
    margin-bottom: 8px;
}

.notifications-empty p {
    color: var(--color-text-muted);
    max-width: 520px;
    margin: 0 auto 20px;
}

@media (max-width: 768px) {
    .creator-profile-hero {
        padding: 24px 18px;
    }

    .creator-profile-header {
        align-items: flex-start;
    }

    .creator-profile-avatar {
        width: 72px;
        height: 72px;
    }

    .creator-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .creator-arc-section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .notifications-intro {
        flex-direction: column;
    }

    .notifications-summary {
        width: 100%;
    }

    .notifications-summary-item {
        flex: 1 1 0;
        min-width: 0;
    }

    .notification-card {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .notification-actions {
        grid-column: 1 / -1;
        align-items: stretch;
        margin-top: 8px;
    }

    .notification-action-btn {
        width: 100%;
        justify-content: center;
    }

    .notification-secondary-link {
        text-align: center;
    }
}

@media (max-width: 1024px) {
    .creator-profile-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .creator-highlight {
        grid-template-columns: 1fr;
    }
}

.dashboard-grid-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 40px;
}

.dashboard-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text-main);
}

.dashboard-status-chip {
    font-size: 0.75rem;
    background: var(--color-bg);
    padding: 2px 8px;
    border-radius: 12px;
    margin-right: 8px;
}

.dashboard-link-row {
    margin-top: 16px;
}

.dashboard-link {
    color: var(--color-accent-primary);
    font-weight: 600;
    text-decoration: none;
}

.dashboard-empty-note {
    color: var(--color-text-muted);
    font-style: italic;
}

.dashboard-arc-info-grow {
    flex: 1;
}

.dashboard-arc-preview-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dashboard-theme-chip {
    font-size: 0.7rem;
    background: var(--color-bg);
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: capitalize;
}

.dashboard-date-meta {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.bento-feature-title {
    font-size: 2rem;
    margin-bottom: 16px;
}

.bento-feature-copy {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    max-width: 500px;
}

.bento-quote {
    margin-top: 20px;
    font-family: monospace;
    background: var(--color-bg);
    padding: 12px;
    border-radius: 8px;
}

.bento-feature-icon {
    font-size: 2rem;
    margin-bottom: 16px;
}

.bento-muted-copy {
    color: var(--color-text-muted);
}

.filter-clear-x {
    margin-left: 6px;
    color: inherit;
}

.filter-select {
    width: 100%;
    padding: 12px 14px;
}

.filter-action-btn {
    flex: 1;
}

.search-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.search-empty-copy {
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

.search-empty-tags {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.search-empty-tag {
    background: var(--color-bg);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    text-decoration: none;
    color: var(--color-text-main);
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
}

.search-empty-footnote {
    margin-top: 24px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.search-accent-link {
    color: var(--color-accent-primary);
    font-weight: 600;
}

.admin-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.admin-shell-narrow {
    max-width: 1000px;
}

.admin-header {
    margin-bottom: 32px;
}

.admin-header-subtitle {
    color: var(--color-text-muted);
    margin-top: 8px;
}

.admin-page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-nav {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.admin-stat-card {
    background: var(--color-surface);
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.admin-stat-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.admin-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.admin-stat-sub {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.admin-panel {
    background: var(--color-surface);
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.admin-panel-gap {
    margin-bottom: 32px;
}

.admin-panel-top {
    margin-top: 32px;
}

.admin-panel-title {
    margin-bottom: 16px;
    font-size: 1.25rem;
}

.admin-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.admin-mini-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.admin-mini-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.admin-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.admin-chip-card {
    padding: 12px 20px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.admin-chip-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-transform: capitalize;
}

.admin-chip-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.admin-actions-row,
.admin-action-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-filter-wrap {
    margin-bottom: 24px;
}

.admin-filter-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.admin-filter-search,
.admin-filter-select {
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    padding: 8px 16px;
}

.admin-filter-search {
    flex: 1;
    min-width: 200px;
}

.admin-filter-select {
    width: auto;
}

.admin-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table-head-row {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.admin-th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
}

.admin-tr {
    border-bottom: 1px solid var(--color-border);
}

.admin-td {
    padding: 16px;
}

.admin-center {
    text-align: center;
}

.admin-cell-max {
    max-width: 400px;
}

.admin-link {
    color: var(--color-accent-primary);
    text-decoration: none;
}

.admin-link:hover {
    text-decoration: underline;
}

.admin-btn-sm {
    padding: 4px 12px;
    font-size: 0.85rem;
}

.admin-btn-xs {
    padding: 6px 12px;
    font-size: 0.9rem;
}

.admin-btn-page {
    min-width: 40px;
}

.admin-muted {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.admin-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.admin-pagination-meta {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.admin-pagination-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.admin-pagination-page {
    padding: 6px 12px;
    color: var(--color-text-muted);
}

.admin-pagination-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 16px;
}

.admin-pagination-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-per-page-select {
    width: auto;
    padding: 6px 12px;
    font-size: 0.9rem;
}

.admin-page-numbers {
    display: flex;
    gap: 4px;
}

.admin-ellipsis {
    padding: 6px 4px;
    color: var(--color-text-muted);
}

.admin-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.admin-modal-card {
    background: var(--color-surface);
    padding: 32px;
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 90%;
}

.admin-modal-scroll {
    max-height: 90vh;
    overflow-y: auto;
}

.admin-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.admin-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.admin-form-panel {
    padding: 32px;
}

.admin-shell .input-base,
.admin-modal .input-base {
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    background-color: var(--color-surface);
}

.admin-shell .input-base option,
.admin-modal .input-base option {
    background-color: var(--color-surface);
    color: var(--color-text-main);
}

.admin-shell .input-base::placeholder {
    color: var(--color-text-muted);
}

.admin-form-group {
    margin-bottom: 24px;
}

.admin-form-group-tight {
    margin-bottom: 16px;
}

.admin-form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.admin-form-label-inline {
    margin-bottom: 0;
}

.admin-help-text {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.admin-help-indent {
    margin-left: 24px;
}

.admin-two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.admin-chip-input-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-choice-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    cursor: pointer;
}

.admin-choice-input {
    margin: 0;
}

.admin-choice-text {
    text-transform: capitalize;
}

.admin-multi-select {
    min-height: 100px;
}

.admin-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.admin-progress-card {
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: 16px;
    border: 1px solid var(--color-border);
}

.admin-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.admin-progress-message {
    font-weight: 600;
}

.admin-progress-percent {
    color: var(--color-text-muted);
}

.admin-progress-track {
    background: #E0E0E0;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.admin-progress-bar {
    background: var(--color-accent-primary);
    height: 100%;
    width: 0;
    transition: width 0.3s;
}

.admin-results-title {
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.admin-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.admin-generate-status {
    margin-bottom: 16px;
}

.admin-status-pill {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
}

.admin-status-active {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.admin-status-inactive {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.admin-js-message {
    text-align: center;
    padding: 40px;
    color: var(--color-text-muted);
}

.admin-js-error {
    color: var(--color-accent-primary);
}

.admin-seed-success {
    color: #1B8E5F;
    font-weight: 600;
    margin-bottom: 12px;
}

.admin-seed-error-title {
    color: var(--color-accent-primary);
    margin-bottom: 12px;
}

.admin-seed-error-list {
    margin-left: 20px;
    color: var(--color-text-muted);
}

.admin-seed-stats-wrap {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.admin-seed-stats-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.admin-seed-stats-row {
    margin-top: 8px;
}

.admin-seed-stats-row-tight {
    margin-top: 4px;
}

.admin-seed-error-inline {
    color: var(--color-accent-primary);
}

.hero-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.teaser-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.teaser-header-title {
    margin: 0;
    font-size: 1.12rem;
    letter-spacing: -0.01em;
}

.teaser-header-pill {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    background: rgba(37, 99, 235, 0.08);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    align-self: flex-start;
    border: 1px solid rgba(37, 99, 235, 0.24);
}

.how-it-works-section {
    padding: 100px 0;
}

.how-it-works-title {
    font-size: 2rem;
    margin-bottom: 40px;
}

.signup-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(13, 18, 24, 0.34);
    backdrop-filter: blur(12px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.signup-modal-card {
    background: var(--color-surface);
    padding: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    max-width: 420px;
    width: 90%;
    text-align: center;
    position: relative;
}

.signup-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.45rem;
    cursor: pointer;
    color: var(--color-text-muted);
}

.signup-modal-title {
    margin-bottom: 12px;
}

.signup-modal-subtitle {
    color: var(--color-text-muted);
    margin-bottom: 28px;
}

.signup-modal-cta {
    width: 100%;
    margin-bottom: 12px;
    display: inline-flex;
    text-decoration: none;
}

.jam-turn-progress {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    display: none;
}

.jam-max-turns-badge {
    display: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.jam-max-turns-badge:hover {
    color: var(--color-accent-primary);
}

.jam-max-turns-icon {
    margin-right: 4px;
}

.jam-turns-editor-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jam-turns-editor .jam-turns-editor-row-stepper {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.jam-turns-label {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.jam-turns-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.jam-turns-stepper-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-input-bg);
    color: var(--color-text-main);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.jam-turns-stepper-btn:hover:not(:disabled) {
    border-color: var(--color-accent-primary);
    background: var(--color-surface);
}

.jam-turns-stepper-btn:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

.jam-turns-stepper-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.jam-turns-stepper-value {
    min-width: 32px;
    text-align: center;
    padding: 3px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-input-bg);
    color: var(--color-text-main);
    font-weight: 700;
    font-size: 0.85rem;
}

.jam-turns-autosave-note {
    margin: 0;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.jam-turns-autosave-note.is-saving {
    color: var(--color-text-muted);
}

.jam-turns-autosave-note.is-saved {
    color: #0f9d73;
}

.jam-turns-autosave-note.is-error {
    color: var(--color-accent-primary);
}

.jam-turns-error {
    font-size: 0.7rem;
    color: var(--color-accent-primary);
    margin: 2px 0 0 0;
    display: none;
}

.jam-loading-state {
    text-align: center;
    color: var(--color-text-muted);
    margin-top: 40px;
}

.jam-flex-section {
    display: none;
    margin-top: 12px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.jam-flex-note-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.jam-flex-note {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-weight: 500;
    line-height: 1.4;
}

.jam-flex-button {
    width: 100%;
}

.cover-icon {
    display: none;
}

.cover-icon-xl {
    display: none;
}

/* Theme-specific cover gradients */
.cover-theme-mystery {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.cover-theme-sci-fi {
    background: linear-gradient(135deg, #0d0221 0%, #0a7e8c 50%, #16c79a 100%);
}

.cover-theme-fantasy {
    background: linear-gradient(135deg, #2d1b69 0%, #6b21a8 50%, #c084fc 100%);
}

.cover-theme-realistic {
    background: linear-gradient(135deg, #1c1917 0%, #78716c 50%, #d6d3d1 100%);
}

.cover-theme-absurd {
    background: linear-gradient(135deg, #be123c 0%, #f97316 50%, #facc15 100%);
}

.cover-theme-poetic {
    background: linear-gradient(135deg, #831843 0%, #c026d3 50%, #e879f9 100%);
}

/* Fallback for unknown themes */
.cover-theme-default {
    background: linear-gradient(135deg, #1e293b 0%, #475569 50%, #94a3b8 100%);
}

/* Active jam cover */
.cover-art-jam {
    background: linear-gradient(135deg, #ff6b4a 0%, #ff8f71 46%, #fec36d 100%);
}

.arc-card-cover,
.hero-card-cover,
.rail-card-cover {
    position: relative;
    overflow: hidden;
}

/* Abstract decorative shapes */
.arc-card-cover::before,
.hero-card-cover::before,
.rail-card-cover::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -15%;
    width: 65%;
    height: 90%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.arc-card-cover::after,
.hero-card-cover::after,
.rail-card-cover::after {
    content: "";
    position: absolute;
    bottom: -35%;
    left: -10%;
    width: 55%;
    height: 75%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

/* Vary blob positions per theme for visual diversity */
.cover-theme-mystery::before {
    top: -20%;
    right: -25%;
    width: 50%;
}

.cover-theme-sci-fi::before {
    top: -40%;
    right: -10%;
    width: 80%;
    height: 70%;
}

.cover-theme-fantasy::before {
    top: -15%;
    right: -30%;
    width: 70%;
    border-radius: 40%;
}

.cover-theme-absurd::before {
    top: -35%;
    right: -5%;
    width: 60%;
    height: 100%;
}

.cover-theme-poetic::before {
    top: -25%;
    right: -20%;
    width: 55%;
    height: 85%;
}

.cover-theme-realistic::before {
    top: -10%;
    right: -30%;
    width: 75%;
    height: 60%;
}

.feed-container {
    background:
        radial-gradient(680px 200px at 20% 0%, rgba(139, 92, 246, 0.09), transparent 64%),
        radial-gradient(700px 220px at 86% 0%, rgba(255, 51, 102, 0.09), transparent 66%),
        var(--color-bg);
}

.feed-card-title {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.theme-badge,
.personality-badge {
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.teaser-card,
.jam-layout,
.hero-card,
.arc-card {
    border-color: var(--color-border);
}

@media (max-width: 768px) {
    .dashboard-grid-main {
        grid-template-columns: 1fr;
    }

    .dashboard-title {
        font-size: 1.5rem;
        margin-bottom: 4px;
    }

    .dashboard-subtitle {
        font-size: 0.9rem;
        margin-bottom: 16px;
    }

    .admin-two-col-grid {
        grid-template-columns: 1fr;
    }

    .admin-page-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-cta-row {
        width: 100%;
        justify-content: center;
    }

    .hero-cta-row .btn {
        width: 100%;
    }

    .signup-modal-card {
        padding: 32px 24px;
    }

    .how-it-works-section {
        padding: 72px 0;
    }
}

/* --- PWA ENHANCEMENTS --- */

/* 1. Overscroll Behavior (Prevent "bounce" on mobile) */
body {
    overscroll-behavior-y: none;
    /* Prevent pull-to-refresh on body */
}

/* Allow native scroll in specific areas but prevent chaining */
.jam-messages,
.feed-container,
.arc-content {
    overscroll-behavior-y: contain;
}

/* 2. Skeleton Loading Animation */
@keyframes skeleton-pulse {
    0% {
        background-color: rgba(0, 0, 0, 0.05);
    }

    50% {
        background-color: rgba(0, 0, 0, 0.11);
    }

    100% {
        background-color: rgba(0, 0, 0, 0.05);
    }
}

.skeleton {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    background-color: rgba(0, 0, 0, 0.05);
    color: transparent !important;
    border-color: transparent !important;
    pointer-events: none;
    user-select: none;
    border-radius: var(--radius-sm);
}

/* Specific Skeleton Shapes */
.skeleton-text {
    height: 1em;
    width: 100%;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-card {
    height: 200px;
    width: 100%;
    border-radius: var(--radius-md);
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.feed-skeleton-author-info {
    width: 60%;
}

.feed-skeleton-title {
    height: 1.5em;
    width: 80%;
}

.feed-skeleton-preview {
    height: 120px;
    margin-top: 16px;
}

/* Apply skeleton state to existing components */
.loading-skeleton .card-title,
.loading-skeleton p,
.loading-skeleton h1,
.loading-skeleton h2,
.loading-skeleton h3 {
    @extend .skeleton;
    /* NOTE: CSS doesn't support @extend, doing manually below */
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    background-color: rgba(0, 0, 0, 0.05);
    color: transparent !important;
    border-radius: 4px;
}

/* ===== Flex Celebration Overlay ===== */
.flex-celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: celebrationFadeIn 0.3s ease-out;
}

@keyframes celebrationFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.flex-celebration-content {
    text-align: center;
    z-index: 1;
    animation: celebrationPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes celebrationPop {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.flex-celebration-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: 800;
    color: #FF3366;
    margin-bottom: 12px;
}

.flex-celebration-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    max-width: 300px;
    margin: 0 auto;
}

.confetti-particle {
    position: absolute;
    top: -10px;
    border-radius: 2px;
    animation: confettiFall 2.5s ease-in forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

/* ===== Typing Cursor (Streaming AI) ===== */
.typing-cursor::after {
    content: "▋";
    animation: cursorBlink 0.8s step-end infinite;
    color: var(--color-accent-secondary);
    margin-left: 2px;
}

@keyframes cursorBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* ===== Story Preview Overlay ===== */
.story-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: var(--color-bg, #0a0a0f);
    display: flex;
    flex-direction: column;
    animation: celebrationFadeIn 0.3s ease-out;
}

.story-preview-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.story-preview-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.preview-eyebrow {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-primary, #FF3366);
    margin-bottom: 0.75rem;
}

/* Preview Actions */
.preview-actions {
    display: flex;
    gap: 0.75rem;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    padding: 1rem 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--color-bg, #0a0a0f);
    flex-shrink: 0;

    /* Safe area for mobile */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.preview-flex-btn {
    flex: 1;
}

.preview-discard-btn {
    flex-shrink: 0;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
    border-color: rgba(255, 255, 255, 0.1);
}

.preview-discard-btn:hover {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.08);
}

/* ===== First-Arc Profile Setup (inside Preview) ===== */
.preview-profile-setup {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.preview-profile-header {
    margin-bottom: 1.25rem;
}

.preview-profile-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary, #fff);
    margin-bottom: 0.25rem;
}

.preview-profile-subtitle {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.4));
}

.preview-profile-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.preview-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.preview-field-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.preview-field-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    color: var(--color-text-primary, #fff);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.preview-field-input:focus {
    border-color: var(--color-accent-primary, #FF3366);
}

.preview-field-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.preview-handle-row {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.preview-handle-row:focus-within {
    border-color: var(--color-accent-primary, #FF3366);
}

.preview-handle-prefix {
    padding: 0.6rem 0 0.6rem 0.8rem;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.4));
    font-size: 0.95rem;
    user-select: none;
}

.preview-handle-input {
    border: none;
    background: transparent;
    padding: 0.6rem 0.8rem 0.6rem 0.2rem;
    border-radius: 0;
}

.preview-field-hint {
    font-size: 0.72rem;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.3));
}

/* Toggle switch */
.preview-field-toggle {
    gap: 0.2rem;
}

.preview-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.4rem 0;
}

.preview-toggle-text {
    font-size: 0.9rem;
    color: var(--color-text-primary, #fff);
    font-weight: 500;
}

.preview-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.preview-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.preview-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    transition: background 0.2s;
    cursor: pointer;
}

.preview-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.preview-toggle-switch input:checked+.preview-toggle-slider {
    background: var(--color-accent-primary, #FF3366);
}

.preview-toggle-switch input:checked+.preview-toggle-slider::before {
    transform: translateX(20px);
}

@media (max-width: 768px) {
    .preview-actions {
        padding: 0.75rem 16px;
    }
}

/* ===== Custom Modal Dialogs ===== */
.custom-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: customModalFadeIn 0.2s ease-out;
}

.custom-modal-overlay.custom-modal-closing {
    animation: customModalFadeOut 0.2s ease-in forwards;
}

@keyframes customModalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes customModalFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.custom-modal {
    background: var(--color-surface, #1a1a2e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 360px;
    width: 100%;
    animation: customModalPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes customModalPop {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.custom-modal-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary, #fff);
    margin-bottom: 0.5rem;
}

.custom-modal-message {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    margin-bottom: 1.25rem;
}

.custom-modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

.custom-modal-btn {
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background 0.15s, transform 0.1s;
}

.custom-modal-btn:active {
    transform: scale(0.97);
}

.custom-modal-btn-primary {
    background: var(--color-accent-primary, #FF3366);
    color: #fff;
}

.custom-modal-btn-primary:hover {
    background: #e62e5c;
}

.custom-modal-btn-danger {
    background: #ef4444;
    color: #fff;
}

.custom-modal-btn-danger:hover {
    background: #dc2626;
}

.custom-modal-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text-primary, #fff);
}