/* ========== APP SHELL ========== */
/* padding-top compensates for #app-header being position:fixed (out of
   normal flow) — applied here rather than on .app-layout so it works
   whichever element ends up first in flow: the banner+topnav bar on
   authenticated pages, or .app-layout directly on public pages where
   they're hidden (Aug 2026: banner/topnav replaced the old left sidebar,
   which handled this the same way via its own `top: var(--header-height)`). */
#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: var(--header-height);
    background: var(--bg-base);
    background-image: var(--gradient-glow);
    background-attachment: fixed;
}

.app-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.app-main {
    flex: 1;
    padding: var(--space-6);
    margin: 0 auto;
    max-width: var(--max-content-width);
    width: 100%;
    min-width: 0;
}

/* ========== HEADER ========== */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: rgba(18, 18, 26, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    z-index: var(--z-fixed);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
}

.app-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--gradient-header);
    opacity: 0.7;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.header-logo-img {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    object-fit: cover;
    box-shadow: var(--shadow-glow-primary), 0 0 0 2px var(--border-default);
    flex-shrink: 0;
}

.header-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.header-app-name {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    line-height: 1.1;
    white-space: nowrap;
}

.header-brand .logo-tea {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: 0.04em;
}

.header-brand .logo-ai {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--gradient-header);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nav-gradient-shift 6s ease infinite;
}

.header-brand .logo-sub {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

@keyframes nav-gradient-shift {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.header-actions #theme-toggle {
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.header-actions #theme-toggle:hover {
    color: var(--color-primary);
    background: var(--bg-hover);
    transform: rotate(20deg);
}

.header-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.header-user:hover {
    background: var(--bg-hover);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
    transform: translateY(-1px);
}

.header-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: white;
    box-shadow: 0 0 0 2px var(--bg-surface);
}

.header-user-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}

/* ========== BANNER BAR ==========
   The persistent "recently exported banners" carousel that now sits at
   the top of every authenticated page, above the top nav row — replaces
   the vertical space the left sidebar used to occupy. Reuses the
   .showcase-carousel* classes from showcase.css so it looks identical to
   the public "/" page's carousel. */
.app-banner-bar {
    padding: var(--space-4) var(--space-6) 0;
}

.app-banner-carousel {
    max-width: var(--max-content-width);
    margin: 0 auto;
}

/* ========== TOP NAV ==========
   Horizontal nav row below the banner, replacing the old left sidebar.
   Sticky under the fixed header so it stays reachable while the page
   content below it scrolls. Unpaid users (see js/router.js
   updateTopNavAccess()) only see the links without [data-paid-required]
   — Dashboard and Subscription. */
.app-topnav {
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    margin-top: var(--space-4);
    background: rgba(18, 18, 26, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.topnav-link {
    --nav-c: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.topnav-link[data-color="orange"] { --nav-c: var(--nav-orange); }
.topnav-link[data-color="purple"] { --nav-c: var(--nav-purple); }
.topnav-link[data-color="cyan"]   { --nav-c: var(--nav-cyan); }
.topnav-link[data-color="pink"]   { --nav-c: var(--nav-pink); }
.topnav-link[data-color="green"]  { --nav-c: var(--nav-green); }
.topnav-link[data-color="blue"]   { --nav-c: var(--nav-blue); }
.topnav-link[data-color="amber"]  { --nav-c: var(--nav-amber); }
.topnav-link[data-color="teal"]   { --nav-c: var(--nav-teal); }
.topnav-link[data-color="slate"]  { --nav-c: var(--nav-slate); }
.topnav-link[data-color="violet"] { --nav-c: var(--nav-violet); }
.topnav-link[data-color="red"]    { --nav-c: var(--nav-red); }

.topnav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--nav-c) 14%, transparent);
    color: var(--nav-c);
    transition: all var(--transition-fast);
}

.topnav-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.9;
}

.topnav-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.topnav-link:hover .topnav-icon {
    background: color-mix(in srgb, var(--nav-c) 24%, transparent);
    transform: scale(1.06);
}

.topnav-link.active {
    background: color-mix(in srgb, var(--nav-c) 16%, var(--bg-active));
    border-color: color-mix(in srgb, var(--nav-c) 35%, transparent);
    color: var(--text-primary);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--nav-c) 25%, transparent);
}

.topnav-link.active .topnav-icon {
    background: var(--nav-c);
    color: #fff;
    box-shadow: 0 0 12px color-mix(in srgb, var(--nav-c) 60%, transparent);
}

/* ========== FOOTER ========== */
.app-footer {
    padding: var(--space-6);
    text-align: center;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ========== LOADER ========== */
.loader-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-base);
    z-index: var(--z-loader);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
}

.loader-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.loader-content {
    text-align: center;
}

.loader-logo {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    margin-bottom: var(--space-6);
}

.loader-logo .logo-tea {
    color: var(--color-primary);
    text-shadow: 0 0 30px rgba(255, 107, 0, 0.4);
}

.loader-logo .logo-ai {
    color: var(--text-primary);
}

.loader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--bg-hover);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
    margin: 0 auto var(--space-4);
}

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

.loader-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* ========== PAGE TRANSITIONS ========== */
.page-enter {
    animation: pageEnter 0.3s ease forwards;
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== UTILITY CLASSES ========== */
.container {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glow-primary {
    box-shadow: var(--shadow-glow-primary);
}

.glow-secondary {
    box-shadow: var(--shadow-glow-secondary);
}