/* ==========================================
   HOOKED - Global Design System
   Theme: Black / Purple (single-hue)
   ========================================== */

/* ---- CSS Custom Properties ---- */
:root {
    /* Primary Colors — single purple family. Token names stay --cyan/--pink
       for historical continuity (many CSS rules reference them); their VALUES
       are purple, so the whole site renders as one purple system. */
    --cyan: #7d000e;                 /* purple-500 — main brand highlight */
    --cyan-dim: #3d0006;             /* purple-700 — gradient endpoint / hover */
    --cyan-glow: rgba(125, 0, 14, 0.15);
    --cyan-glow-strong: rgba(125, 0, 14, 0.32);

    /* Retired secondary accent — points at the same purple family so any old
       cyan->pink gradient reads as a single calm purple. */
    --pink: var(--cyan-dim);
    --pink-dim: var(--cyan-dim);
    --pink-glow: rgba(125, 0, 14, 0.10);
    --pink-glow-strong: rgba(125, 0, 14, 0.24);

    /* Gradient — single-hue purple. Text gradient is flattened elsewhere. */
    --gradient-primary: linear-gradient(135deg, var(--cyan), var(--cyan-dim));
    --gradient-primary-reverse: linear-gradient(135deg, var(--cyan-dim), var(--cyan));
    --gradient-glow: linear-gradient(135deg, var(--cyan-glow), transparent);
    --gradient-text: var(--cyan);

    /* Background Colors */
    --bg-primary: #060608;
    --bg-secondary: #0a0a0f;
    --bg-tertiary: #0f0f18;
    /* Liquid Glass cards — directional sheen with a whisper of purple in the
       lit corner. The ambient glows + grid still leak through the faint fill. */
    --bg-card: linear-gradient(135deg, rgba(125, 0, 14, 0.05) 0%, rgba(255, 255, 255, 0.032) 42%, rgba(255, 255, 255, 0.008) 100%);
    --bg-card-hover: linear-gradient(135deg, rgba(125, 0, 14, 0.09) 0%, rgba(255, 255, 255, 0.055) 42%, rgba(255, 255, 255, 0.016) 100%);
    --bg-glass: linear-gradient(135deg, rgba(125, 0, 14, 0.05) 0%, rgba(255, 255, 255, 0.032) 42%, rgba(255, 255, 255, 0.008) 100%);
    --bg-glass-hover: linear-gradient(135deg, rgba(125, 0, 14, 0.09) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.018) 100%);

    /* Border Colors */
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.16);
    --border-cyan: rgba(125, 0, 14, 0.24);
    --border-pink: rgba(125, 0, 14, 0.20);

    /* Text Colors */
    --text-primary: #f0f0f5;
    --text-secondary: #8a8a9a;
    --text-tertiary: #5a5a6a;
    --text-accent: var(--cyan);

    /* Status Colors */
    --status-online: #2ecc71;
    --status-online-glow: rgba(46, 204, 113, 0.2);
    --status-updating: #f39c12;
    --status-updating-glow: rgba(243, 156, 18, 0.2);
    --status-offline: #e74c3c;
    --status-offline-glow: rgba(231, 76, 60, 0.2);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 2rem;
    --font-4xl: 2.5rem;
    --font-5xl: 3.5rem;
    --font-6xl: 4.5rem;

    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    /* Was 9999px (pill). Pills are forbidden on this site — see
       feedback memory feedback_no_pills.md. Token kept as a name for
       continuity but resolves to a rounded-rect radius. */
    --radius-full: 6px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow-cyan: 0 0 20px var(--cyan-glow), 0 0 60px var(--cyan-glow);
    --shadow-glow-pink: 0 0 20px var(--pink-glow), 0 0 60px var(--pink-glow);

    /* Layout — nav stays compact (64px) so the new tight navbar works,
       but container is back at 1300 so hero/sections breathe. */
    --nav-height: 64px;
    --container-max: 1300px;
    --container-padding: 1.5rem;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-family);
    /* Base dark gradient only. background-attachment: fixed was repainting the
       whole viewport every scroll frame — that was the scroll lag. The ambient
       blobs now live on body::before (fixed + layer-promoted, composited once). */
    background: linear-gradient(180deg, #07070b 0%, #050507 50%, #020203 100%);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Liquid Glass ambient haze — same look as before, but on its own fixed,
   GPU-promoted layer so it never repaints on scroll. (position:fixed keeps it
   out of the body's flex flow.) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 12% 18%, rgba(125, 0, 14, 0.10), transparent 70%),
        radial-gradient(ellipse 55% 50% at 88% 55%, rgba(125, 0, 14, 0.055), transparent 70%),
        radial-gradient(ellipse 70% 35% at 50% 110%, rgba(125, 0, 14, 0.05), transparent 70%);
    /* translateZ promotes it so it doesn't repaint on scroll; no will-change so
       Edge/low-end GPUs aren't forced to keep an extra permanent layer alive. */
    transform: translateZ(0);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

input, select, textarea {
    font-family: inherit;
    color: inherit;
}

/* ---- Animated Background ---- */
.bg-grid {
    position: fixed;
    inset: 0;
    z-index: -2;
    /* Bumped from 0.02 -> 0.035 so the grid is actually perceptible.
       Was so faint it read as noise rather than structure. */
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    pointer-events: none;
    contain: strict;
}

/* Noise overlay — fine grain texture on top of all the gradient/glow
   layers. Static (no animation), tiled SVG turbulence at 180px so the
   pattern doesn't repeat noticeably. Sits BEHIND content but ABOVE the
   bg-grid / bg-glow / body gradient so it tints everything together.
   Use a separate fixed layer rather than packing into body background
   stack so we can control opacity without messing with gradient stops. */
.bg-noise {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    /* Promote to compositor layer so it composites cheaply over the
       page. Pattern is static so the GPU caches it. */
    transform: translateZ(0);
    contain: strict;
}

.bg-glow {
    /* Folded into body::before — these corner blobs were two extra full-screen
       fixed compositor layers that Edge/low-end GPUs had to blend every scroll
       frame (Chrome handled it, weak GPUs stuttered). The body::before ambient
       covers the same vibe with one layer. */
    display: none;
    position: fixed;
    z-index: -1;
    pointer-events: none;
    transform: translateZ(0);
    contain: layout style paint;
}

.bg-glow-1 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--cyan-glow), transparent 70%);
    top: -300px;
    right: -300px;
}

.bg-glow-2 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, var(--pink-glow), transparent 70%);
    bottom: -300px;
    left: -300px;
}

@keyframes floatGlow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.05); }
    50% { transform: translate(-20px, 30px) scale(0.95); }
    75% { transform: translate(20px, 20px) scale(1.02); }
}

/* ---- Container ---- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ---- Navigation ---- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-bottom: 1px solid transparent;
}

/* Cap the 12px gap above the floating navbar so content doesn't show through.
   Stays transparent at the top of the page (preserves the floating look) and
   fades to the same blurred backdrop as .navbar.scrolled when scrolling. */
.navbar::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

/* Whisper-thin gradient accent at the very top edge - only visible on scroll */
.navbar::after {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(99, 102, 241, 0.35) 30%,
        rgba(34, 211, 238, 0.35) 50%,
        rgba(99, 102, 241, 0.35) 70%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.navbar.scrolled {
    /* Even lighter than before — sysinfo's nav is heavily translucent.
       Drop fill from 0.55 to 0.35 so the blurred page content reads
       through. Blur stays at 16px (the threshold where blur is perceived
       as glass rather than tint). */
    background: rgba(8, 8, 12, 0.35);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom-color: var(--border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 30px rgba(0, 0, 0, 0.35);
}

.navbar.scrolled::before {
    background: rgba(8, 8, 12, 0.35);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.navbar.scrolled::after {
    opacity: 1;
}

.nav-container {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Brand — sysinfo-style two-line: title + tiny subtitle.
   The "Premium Software" subtitle is injected via .brand-text::after so
   the HTML stays the same across all pages. */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1001;
    transition: opacity 0.2s ease;
}

.nav-brand:hover {
    opacity: 0.85;
}

.brand-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(125, 0, 14, 0.35));
}

.brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.brand-text::after {
    content: 'Premium Software';
    display: block;
    margin-top: 3px;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    text-transform: none;
}

/* Nav links — dead-centered in the bar (brand left, links center, actions
   right). Absolutely positioned so the centre stays put regardless of the
   side clusters' widths. Plain text links, no container. */
.nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
}

.nav-link {
    padding: 6px 11px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    position: relative;
    transition: color 0.15s ease;
}

.nav-link:hover {
    color: var(--text-primary);
}

/* Active state: subtle pill-less background tint instead of underline. */
.nav-link.active {
    color: var(--text-primary);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2px;
    width: 18px;
    height: 1px;
    background: var(--cyan);
}

/* Nav Actions — sysinfo runs smaller pill-buttons in the nav, ~0.5rem
   vertical pad / 0.9rem horizontal. Same translucent treatment as
   .btn-glass. */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-actions .btn {
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}

/* Buttons in the nav: hover changes color/border only — no lift, no scale,
   no glow growth. User explicitly asked for no hover anims. */
.nav-actions .btn-ghost {
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.nav-actions .btn-ghost:hover {
    color: #5865F2;
    border-color: rgba(88, 101, 242, 0.35);
    background: rgba(88, 101, 242, 0.08);
}

/* Discord is now the nav's coloured action (the cyan "Get Started" was
   removed). Fill it in Discord blurple so the bar keeps a deliberate accent
   without a generic cyan CTA. Targeted by id so the injected "Sign in" ghost
   button stays subtle. */
.nav-actions #discordBtn {
    color: #fff;
    background: #5865F2;
    border-color: #5865F2;
    transition: filter 0.15s ease;
}
.nav-actions #discordBtn:hover {
    color: #fff;
    background: #5865F2;
    border-color: #5865F2;
    filter: brightness(1.08);
}

/* Nav "Dashboard" CTA: neutral glass, NOT the cyan->purple gradient (reads
   childish). Kept as .btn-primary so auth-nav.js still finds it via a.btn-primary. */
.nav-actions .btn-primary {
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-primary);
    border: 1px solid var(--border);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.nav-actions .btn-primary:hover {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.05);
}

/* ---- Cart button (nav) ---- */
.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.95rem;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.cart-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.05);
}

/* Count badge — a small cyan node, top-right. Circle (50% on a square) is
   allowed; this is not a forbidden pill. */
.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--cyan);
    color: #04141a;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 10px var(--cyan-glow-strong);
    font-variant-numeric: tabular-nums;
}

/* Mobile cart entry sits in the mobile menu as a full-width glass button. */
.cart-btn-mobile {
    width: 100%;
    height: auto;
    gap: 8px;
}
.cart-badge-inline {
    position: static;
    box-shadow: none;
}

/* ---- Cart drawer ---- */
.cart-root { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }

.cart-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}
.cart-root.is-open { pointer-events: auto; }

/* Compact floating panel anchored under the cart icon (top-right),
   not a full-height drawer. */
.cart-drawer {
    position: absolute;
    top: calc(var(--nav-height, 64px) + 10px);
    right: clamp(12px, 2vw, 28px);
    width: min(360px, calc(100vw - 24px));
    max-height: min(72vh, calc(100vh - var(--nav-height, 64px) - 28px));
    display: flex;
    flex-direction: column;
    background: rgba(12, 12, 18, 0.92);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.cart-root.is-open .cart-drawer {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.cart-head-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.cart-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    transition: color 0.2s ease, background 0.2s ease;
}
.cart-close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }

.cart-items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cart-empty {
    margin: auto;
    text-align: center;
    color: var(--text-tertiary);
    padding: 40px 20px;
}
.cart-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    font-size: 1.3rem;
    margin-bottom: 14px;
}
.cart-empty-title { color: var(--text-secondary); font-weight: 600; font-size: 0.95rem; }
.cart-empty-sub { font-size: 0.82rem; margin-top: 4px; }

.cart-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
}
.cart-item-img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-tertiary);
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-item-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-item-variant { font-size: 0.74rem; color: var(--text-tertiary); }
.cart-item-price { font-size: 0.82rem; color: var(--cyan); font-weight: 600; font-variant-numeric: tabular-nums; }

.cart-item-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart-qty {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.cart-qty button {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    color: var(--text-secondary);
    transition: color 0.15s ease, background 0.15s ease;
}
.cart-qty button:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.cart-qty-val { min-width: 22px; text-align: center; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.cart-item-remove {
    color: var(--text-tertiary);
    font-size: 0.72rem;
    transition: color 0.15s ease;
}
.cart-item-remove:hover { color: var(--status-offline); }

.cart-foot {
    padding: 18px 18px 20px;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.015);
}
.cart-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}
.cart-total-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.cart-total-value { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.cart-checkout {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-primary);
    border: 1px solid var(--border);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-weight: 600;
    font-size: 0.92rem;
    transition: border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.cart-checkout:hover:not(:disabled) { border-color: var(--border-hover); background: rgba(255, 255, 255, 0.05); }
.cart-checkout:disabled { opacity: 0.4; cursor: not-allowed; }
.cart-foot-note { margin-top: 10px; text-align: center; font-size: 0.72rem; color: var(--text-tertiary); }

/* Cart is a dropdown now, so the page no longer locks scroll when open. */
body.cart-locked { overflow: auto; }

/* ---- Product card status badge (over the image, sysinfo-style) ---- */
.product-card-image { position: relative; }
.product-card-status {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #e6f7fb;
    background: rgba(8, 8, 12, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.product-card-status .pcs-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sc, #16d39a);
    box-shadow: 0 0 6px var(--sc, #16d39a);
}

/* ---- Cart animations ---- */
.cart-item {
    animation: cart-item-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cart-item-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

.cart-item.is-flash {
    animation: cart-item-flash 0.9s ease;
}
@keyframes cart-item-flash {
    0% { box-shadow: inset 0 0 0 1px rgba(125, 0, 14, 0.6); }
    100% { box-shadow: inset 0 0 0 1px rgba(125, 0, 14, 0); }
}

.cart-item.is-removing {
    animation: cart-item-out 0.2s ease forwards;
}
@keyframes cart-item-out {
    to { opacity: 0; transform: translateX(14px); }
}

.cart-badge.is-bump {
    animation: cart-badge-bump 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cart-badge-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .cart-item,
    .cart-item.is-flash,
    .cart-item.is-removing,
    .cart-badge.is-bump {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cart-drawer, .cart-backdrop { transition: none; }
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    z-index: 1001;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
    margin: 0 auto;
    transform-origin: center;
}

.nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 6, 8, 0.98);
    backdrop-filter: blur(20px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: var(--space-md);
}

.mobile-link {
    font-size: var(--font-2xl);
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    padding: var(--space-sm) var(--space-xl);
    position: relative;
}

.mobile-link:hover {
    color: var(--text-primary);
    transform: translateX(8px);
    text-shadow: 0 0 20px var(--cyan-glow);
}

.mobile-link.active {
    color: var(--cyan);
    text-shadow: 0 0 30px var(--cyan-glow);
}

.mobile-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    width: 200px;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn:disabled,
.btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.4);
    pointer-events: none;
}

.btn-primary {
    background: var(--gradient-primary);
    color: #000;
    border: none;
}

.btn-primary:hover {
    box-shadow: var(--shadow-glow-cyan);
    transform: translateY(-1px);
}

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

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
    background: var(--bg-glass-hover);
}

/* Buttons use a NEUTRAL glass (no cyan). The cyan-tinted --bg-glass gradient
   is for panels/cards only — on buttons the owner wants plain glass like the
   reseller pair. */
.btn-glass {
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-primary);
    border: 1px solid var(--border);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn-glass:hover {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.05);
}

.btn-lg {
    padding: 0.85rem 1.75rem;
    font-size: var(--font-md);
    border-radius: var(--radius-md);
}

.btn-full {
    width: 100%;
}

.btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: var(--font-xs);
}

/* ---- Section Styles ---- */
.section {
    padding: var(--space-4xl) 0;
}

.section-alt {
    background: var(--bg-secondary);
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

/* Section eyebrow — sysinfo style: tiny uppercase, solid cyan, no
   decoration, no border, no chip. Plain text label.
   Per ui-ux-pro-max anti-pattern: don't decorate where restraint reads
   as premium. Sysinfo uses one label style everywhere (CATEGORIES,
   SYSINFO, OUR REVIEWS) and it's what makes the page feel disciplined. */
.section-badge {
    display: inline-block;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: var(--space-md);
    backdrop-filter: none;
}

.section-badge i {
    display: none;
}

.section-title {
    font-size: var(--font-4xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.section-subtitle {
    font-size: var(--font-lg);
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

.section-footer {
    text-align: center;
    /* Down to --space-sm (0.5rem) so the pill hugs the grid. */
    margin-top: var(--space-sm);
}

/* ---- Page Header ---- */
.page-header {
    padding-top: calc(var(--nav-height) + var(--space-4xl));
    padding-bottom: var(--space-2xl);
    text-align: center;
}

.page-header-content {
    max-width: 600px;
    margin: 0 auto;
}

.page-title {
    font-size: var(--font-4xl);
    font-weight: 800;
    letter-spacing: -0.028em;
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.page-subtitle {
    font-size: var(--font-md);
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ---- Gradient Text ---- */
.gradient-text {
    color: var(--cyan);
}

/* ---- Card Styles ---- Liquid Glass
   The base card is almost transparent — the fill is ~2.5% white, the
   blur is dialled down to 14px (heavy blur on a transparent surface
   reads as frosted, not glass). The inset highlight on top + faint
   shadow underneath give the "lifted pane" cue.
   Per ui-ux-pro-max Liquid Glass: dynamic blur, subtle iridescence,
   transitions 400–600ms (sysinfo-like flow). */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1px 0 rgba(0, 0, 0, 0.3);
    transition: background 400ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.card:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1px 0 rgba(0, 0, 0, 0.3),
        0 8px 40px rgba(125, 0, 14, 0.05);
}

/* Faint cyan iridescence on hover — soft glow only, no lift. */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 0%, rgba(125, 0, 14, 0.04), transparent 60%);
    opacity: 0;
    transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.card:hover::before {
    opacity: 1;
}

/* ---- Loading Skeleton ---- */
.loading-skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-xl);
    width: 100%;
}

.skeleton-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    height: 320px;
    position: relative;
    overflow: hidden;
}

.skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 100%
    );
    animation: shimmer 1.5s infinite;
}

.skeleton-status {
    height: 120px;
}

.skeleton-review {
    height: 200px;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---- Empty State ---- */
.empty-state {
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
    color: var(--text-tertiary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
    color: var(--text-tertiary);
}

.empty-state h3 {
    font-size: var(--font-xl);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.empty-state p {
    font-size: var(--font-md);
}

/* ---- Footer ---- Hooked unique: CTA banner + brand row with inline link
   clusters + bottom bar. Deliberately not a 4-col link grid (that's the
   sysinfo pattern). */
.footer {
    border-top: 1px solid var(--border);
    padding: var(--space-3xl) 0 var(--space-lg);
    background: transparent;
    margin-top: auto;
}

/* CTA banner — full-width glass card sitting at the top of the footer. */
.footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding: 22px 28px;
    margin-bottom: var(--space-2xl);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}
.footer-cta-text { display: flex; flex-direction: column; gap: 4px; }
.footer-cta-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cyan);
}
.footer-cta-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin: 0;
    color: var(--text-primary);
}
.footer-cta-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* Main row — brand left, link clusters right. Stacked on small screens. */
.footer-main {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr;
    gap: var(--space-2xl);
    align-items: start;
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-md);
}

.footer-brand .nav-brand {
    margin-bottom: var(--space-md);
}

.footer-desc {
    color: var(--text-tertiary);
    font-size: 0.82rem;
    line-height: 1.6;
    max-width: 320px;
}

/* Link clusters: 2 horizontal groups, each is label + inline dot-separated links. */
.footer-clusters {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    justify-self: end;
    text-align: right;
}

.footer-cluster {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.footer-cluster-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-tertiary);
}

.footer-cluster-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer-cluster-links a {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.footer-cluster-links a:hover {
    color: var(--cyan);
}

.footer-cluster-links span {
    color: var(--text-tertiary);
    opacity: 0.5;
    font-size: 0.8rem;
}

.footer-bottom {
    padding-top: var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.footer-bottom p {
    color: var(--text-tertiary);
    font-size: 0.72rem;
    margin: 0;
}

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-tertiary);
    transition: color 0.2s ease;
}
.footer-status:hover { color: var(--text-secondary); }
.footer-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-online);
    box-shadow: 0 0 8px var(--status-online-glow);
}
.footer-status-text {
    color: var(--status-online);
    font-weight: 500;
}

/* Hide the build version hash — user doesn't want it shown publicly. */
.footer-build { display: none !important; }

@media (max-width: 860px) {
    .footer-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 22px;
    }
    .footer-cta-actions { width: 100%; }
    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    .footer-clusters { justify-self: stretch; text-align: left; }
    .footer-cluster { align-items: flex-start; }
    .footer-cluster-links { justify-content: flex-start; }
}

/* ---- Scroll-down indicator (shared across pages) ---- */
.scroll-mouse {
    width: 22px;
    height: 36px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    position: relative;
    display: flex;
    justify-content: center;
}

.scroll-wheel {
    width: 4px;
    height: 6px;
    background-color: var(--cyan, #7d000e);
    border-radius: 2px;
    margin-top: 6px;
    animation: scrollWheel 2s infinite ease-in-out;
}

@keyframes scrollWheel {
    0%   { transform: translateY(0);  opacity: 1; }
    50%  { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0);  opacity: 0; }
}

.footer-build {
    margin-top: 6px;
    font-family: var(--font-family);
    font-variant-numeric: tabular-nums;
    font-size: 0.65rem;
    color: var(--text-tertiary);
    opacity: 0.45;
    letter-spacing: 0.04em;
    transition: opacity 0.2s ease;
}

.footer-build:hover { opacity: 0.9; }

.footer-build a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.footer-build a:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}

/* ---- Stat Divider ---- */
.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
}

/* ---- Animations ---- */

/* Scroll-reveal: elements start hidden, reveal on intersect.
   Tuned toward sassy.wtf's slow/floaty feel - 0.78s, 32px Y travel,
   triggers ~14% into view (set in global.js). Easing stays as
   easeOutQuint, which lands softer than Tailwind's stock ease-out. */
.reveal {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition:
        opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
    /* No will-change: it was pinning every reveal element as a permanent GPU
       layer (the file warns about this for [data-reveal] — same applies here). */
}

.reveal.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Stagger delays for child elements - bumped to match the longer
   transition so cascades read as a deliberate wave, not a flicker. */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.28s; }
.reveal-delay-4 { transition-delay: 0.38s; }
.reveal-delay-5 { transition-delay: 0.48s; }
.reveal-delay-6 { transition-delay: 0.58s; }

.animate-fade-up {
    opacity: 0;
    /* Smoother out-quint easing (no overshoot); ~0.9s feels closer to
       sysinfo's settled, deliberate reveal than the previous 0.6s spring. */
    animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* -------------------------------------------------------------------------
   Scroll-reveal system (paired with js/motion.js):
   Add [data-reveal] to anything that should fade up as it enters view.
   Add [data-reveal-stagger] to a parent — direct children get sequenced.
   No `will-change` on the base rule — that was pinning every reveal
   element as a permanent GPU layer and contributing to scroll jank.
   ------------------------------------------------------------------------- */
[data-reveal],
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-revealed,
[data-reveal-stagger].is-revealed > .is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-stagger] > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

html {
    scroll-behavior: smooth;
    /* Always reserve the scrollbar gutter. The loader sets body{overflow:hidden}
       (no scrollbar) then releases it on load — without a reserved gutter the
       scrollbar pops in, the viewport narrows, and the whole page (footer, nav,
       the edge-anchored bg-glow) reflows. That was the sitewide CLS spike. */
    scrollbar-gutter: stable;
}

body.loading .animate-fade-up {
    animation-play-state: paused !important;
}

.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.1s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.2s; }

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

/* ---- Spinner ---- */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

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

/* ---- Page Loading Screen ---- */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    animation: loaderPulse 1.5s ease-in-out infinite;
}

.loader-text {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
}

.loader-bar-track {
    width: 180px;
    height: 2px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.loader-bar-fill {
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    background: var(--gradient-primary);
    border-radius: 2px;
}

@keyframes loaderPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Prevent body scroll while loading */
body.loading {
    overflow: hidden;
}

/* ---- Toast Notification ---- */
.toast-container {
    position: fixed;
    top: calc(var(--nav-height) + var(--space-md));
    right: var(--space-md);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.toast {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--font-sm);
    min-width: 300px;
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease;
}

.toast.toast-error {
    border-color: var(--status-offline);
}

.toast.toast-success {
    border-color: var(--status-online);
}

.toast-icon {
    font-size: var(--font-lg);
}

.toast-error .toast-icon { color: var(--status-offline); }
.toast-success .toast-icon { color: var(--status-online); }

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* ---- Responsive ---- */
@media (max-width: 968px) {
    :root {
        --font-5xl: 2.75rem;
        --font-4xl: 2rem;
        --font-3xl: 1.75rem;
    }

    .nav-links,
    .nav-actions {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    :root {
        --font-5xl: 2.25rem;
        --font-4xl: 1.75rem;
        --font-3xl: 1.5rem;
        --container-padding: 1rem;
        --space-4xl: 4rem;
    }

    .loading-skeleton {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Account pill (nav-actions) - used by auth-nav.js on every page
   ========================================== */
.acct {
    position: relative;
    display: inline-block;
}

.acct-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem 0.35rem 0.4rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.acct-trigger:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-hover);
}

/* Neutral squircle avatar — no gradient, no round bubble (reads as a
   company account chip, not a childish badge). */
.acct-avatar {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    flex-shrink: 0;
}

.acct-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct-caret {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    transition: transform 0.18s ease;
}

.acct.is-open .acct-caret { transform: rotate(180deg); }

.acct-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 248px;
    background: #0c0c14;
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    padding: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 50;
}

.acct.is-open .acct-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.acct-dropdown-head {
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.acct-dropdown-eyebrow {
    font-size: 0.6rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

.acct-dropdown-email {
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 9px 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-sm);
    font-weight: 500;
    text-align: left;
    width: 100%;
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.acct-dropdown-item i {
    width: 16px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    transition: color 0.12s ease;
}

/* Neutral hover — no cyan text flash. */
.acct-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.acct-dropdown-item:hover i { color: var(--text-secondary); }

.acct-dropdown-danger { color: var(--text-tertiary); }
.acct-dropdown-danger:hover { background: rgba(239, 68, 68, 0.08); color: #fca5a5; }
.acct-dropdown-danger:hover i { color: #fca5a5; }

@media (max-width: 720px) {
    .acct-label { display: none; }
    .acct-dropdown { right: var(--container-padding); min-width: 220px; }
}