/* ZITNALTA™ BRAND PALETTE & TYPOGRAPHY */
    :root {
      --color-forest-green:     #2F4F4F;
      --color-honey-oak:        #DDA15E;
      --color-rich-black:       #1A1A1A;
      --color-vintage-cream:    #FDFBF7;
      --color-carpet-gray:      #847F7D;
      --color-quantum-purple:   #8A2BE2;
      --color-quantum-tint:     rgba(138, 43, 226, 0.06);
      --color-quantum-purple-light: rgba(138, 43, 226, 0.12);
      --color-canvas:           #F4F0E9;  /* Warm paper canvas · deeper than cream, still no pure white */

      /* Surfaces & lines · NO pure white / NO pure black anywhere */
      --card-surface:   #FDFBF7;              /* Vintage Cream replaces white */
      --card-border:    rgba(26, 26, 26, 0.08);
      --cream-overlay:  rgba(253, 251, 247, 0.15); /* replaces rgba white on dark rail */
      --shadow-soft:    0 2px 6px rgba(26, 26, 26, 0.05);
      --shadow-card:    0 4px 14px rgba(138, 43, 226, 0.05);

      --font-heading: 'ITC Avant Garde Gothic', 'itc-avant-garde-gothic-pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-body: 'Acumin Pro', 'acumin-pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

      /* Button-system tokens (ported from bwt-button-system-palette-v2) */
      --btn-primary-hover:     #7A24C9;
      --btn-destructive-hover: #D3934B;
      --btn-focus-ring:        rgba(138, 43, 226, 0.28);
      --btn-shadow-purple:     0 3px 9px rgba(138, 43, 226, 0.22);
      --btn-shadow-oak:        0 3px 9px rgba(221, 161, 94, 0.22);
      --ease-house:            cubic-bezier(0.4, 0, 0.2, 1);

      /* --- Density lever (Oct 1): compact is the app default --- */
      --density-scale: 0.875;   /* compact · default 1 · comfortable 1.125 */

      /* --- Button size scale in rem (from bwt-density-fields-modal-palette-v1; scales with density) --- */
      --btn-h-xs: 1.5rem;  --btn-pad-xs: 0.25rem 0.75rem;    --btn-fs-xs: 0.72rem;
      --btn-h-sm: 1.75rem; --btn-pad-sm: 0.3125rem 0.875rem; --btn-fs-sm: 0.76rem;
      --btn-h-md: 2rem;    --btn-pad-md: 0.375rem 1rem;       --btn-fs-md: 0.8rem;
      --btn-h-lg: 2.25rem; --btn-pad-lg: 0.4375rem 1.125rem;  --btn-fs-lg: 0.84rem;

      /* --- Space scale (rem, scales with density) --- */
      --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
      --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;

      /* --- Radius scale --- */
      --radius-pill: 9999px;    /* buttons, chips, single-line fields, toggles */
      --radius-area: 0.875rem;  /* textarea (cannot be a pill) = 14px */
      --radius-card: 1.25rem;   /* cards + modal = 20px (modal uses it next block) */
      --radius-box:  0.375rem;  /* checkbox = 6px */

      /* --- Field tokens (rem, scales with density) --- */
      --field-h:     2rem;
      --field-pad-x: 0.875rem;
      --field-fs:    0.85rem;
      --focus-ring:  0 0 0 3px rgba(138, 43, 226, 0.14);
      --shadow-overlay: 0 20px 60px rgba(26, 26, 26, 0.45);  /* modal float */
    }

    /* Density lever: one line drives the whole UI (root px = 16 * scale).
       Compact is the app default (--density-scale in :root); data-density overrides. */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: calc(16px * var(--density-scale)); }
    html[data-density="compact"]     { --density-scale: 0.875; }
    html[data-density="default"]     { --density-scale: 1; }
    html[data-density="comfortable"] { --density-scale: 1.125; }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: var(--color-canvas);
      color: var(--color-rich-black);
      font-family: var(--font-body);
      display: flex;
      height: 100vh;
      overflow: hidden;
    }

    /* 1. LEFT NAVIGATION RAIL */
    .left-rail {
      width: 240px;
      background-color: var(--color-forest-green);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24px 16px;
      gap: 12px;
      flex-shrink: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 20;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .brand-logo {
      width: 100px;
      height: 100px;
      margin-bottom: 12px;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .nav-btn {
      width: 100%;
      height: 48px;
      border-radius: 9999px;
      border: none;
      background-color: transparent;
      color: var(--color-vintage-cream);
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      padding-left: 18px;
      gap: 14px;
      cursor: pointer;
      white-space: nowrap;
      text-decoration: none;
    }
    .nav-btn:hover {
      background-color: var(--color-quantum-tint);
    }

    /* Active state (Option D): icon + label go Honey Oak, no fill. Acknowledgment, not a CTA. */
    .nav-btn.active,
    .nav-btn.secondary.active {
      color: var(--color-honey-oak);
      font-weight: 800;
    }
    .nav-btn.active .icon,
    .nav-btn.secondary.active .icon {
      stroke: var(--color-honey-oak);
    }

    /* Join Beta app-chip: the ONE documented exception to the 9999px pill rule.
       Rounded-rectangle (not pill) so it reads as an app-download chip, not a nav action. */
    .beta-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--color-quantum-purple);
      color: var(--color-vintage-cream);
      border-radius: 12px;
      padding: 10px 14px;
      font-weight: 700;
      font-size: 0.85rem;
      text-decoration: none;
      margin-bottom: 10px;
    }
    .beta-chip .icon {
      stroke: var(--color-vintage-cream);
      width: 18px;
      height: 18px;
    }
    .left-rail.collapsed .beta-chip .beta-label {
      display: none;
    }

    .nav-btn.secondary {
      background-color: transparent;
      color: var(--color-vintage-cream);
      font-weight: 600;
    }

    .icon {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      flex-shrink: 0;
    }

    .nav-divider {
      width: 80%;
      height: 1px;
      background-color: var(--cream-overlay);
      margin: 8px 0;
    }

    .collapse-toggle {
      background: transparent;
      border: none;
      color: var(--color-vintage-cream);
      cursor: pointer;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* COLLAPSED STATE */
    .left-rail.collapsed {
      width: 80px;
      padding: 24px 10px;
    }
    .left-rail.collapsed .btn-label,
    .left-rail.collapsed .nav-divider {
      display: none;
    }
    .left-rail.collapsed .brand-logo {
      width: 48px;
      height: 48px;
    }
    .left-rail.collapsed .nav-btn {
      padding-left: 0;
      justify-content: center;
    }

    /* STATE A / STATE B in-rail swap (desktop + tablet). The hamburger toggles
       .rail-menu-open: State A (condensed labeled) <-> State B (full menu in place).
       This replaces the old icon-only collapse as the hamburger's job. */
    .brand-logo-link { display: flex; justify-content: center; text-decoration: none; }
    .rail-state-a { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
    .left-rail .rail-state-b { display: none; width: 100%; }
    .left-rail.rail-menu-open .rail-state-a { display: none; }
    .left-rail.rail-menu-open .rail-state-b { display: block; }
    .left-rail.rail-menu-open .brand-logo { width: 52px; height: 52px; }
    .rail-pinned { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }

    /* 2. CENTER WORKSPACE */
    .center-workspace {
      flex: 1;
      background-color: var(--color-canvas);
      padding: 30px 32px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 46px;
    }

    .section-title {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--color-forest-green);
      margin-top: 40px;
      margin-bottom: 8px;
    }

    .creators-row {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .creator-pill {
      background-color: var(--card-surface);
      border: 1px solid var(--card-border);
      border-radius: 9999px;
      padding: 6px 16px 6px 6px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      font-size: 0.9rem;
      box-shadow: var(--shadow-soft);
      white-space: nowrap;
    }

    .creator-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }

    /* LANDSCAPE GRID (STANDING ON BUSINESS) */
    .landscape-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }

    .landscape-card {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .thumbnail-container {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 12px;
      overflow: hidden;
    }

    .thumbnail-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .duration-badge {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background-color: rgba(26, 26, 26, 0.85);
      color: var(--color-vintage-cream);
      font-size: 0.75rem;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
    }

    .card-title {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.9rem;
      line-height: 1.25;
      color: var(--color-rich-black);
      margin-bottom: 2px;
    }

    .card-author {
      font-size: 0.8rem;
      color: var(--color-carpet-gray);
      margin-bottom: -1px;
    }

    .card-stats {
      font-size: 0.75rem;
      color: var(--color-carpet-gray);
    }

    /* VERTICAL GRID (WE ON CODE) */
    .vertical-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }

    .vertical-card {
      position: relative;
      width: 100%;
      aspect-ratio: 9 / 16;
      border-radius: 16px;
      overflow: hidden;
    }
    .vertical-card .thumbnail-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .new-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      background-color: var(--color-quantum-purple);
      color: var(--color-vintage-cream);
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.75rem;
      padding: 4px 10px;
      border-radius: 9999px;
      z-index: 2;
    }

    .vertical-card-text {
      position: absolute;
      bottom: 26px;
      left: 12px;
      right: 12px;
      color: var(--color-vintage-cream);
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.9rem;
      line-height: 1.25;
      text-shadow: 0 2px 4px rgba(26, 26, 26, 0.95), 0 1px 2px rgba(26, 26, 26, 0.8);
      z-index: 2;
    }

    /* 3. RIGHT CONTEXT PANEL */
    .right-panel {
      width: 340px;
      background-color: var(--color-quantum-tint);
      border-left: 1px solid rgba(138, 43, 226, 0.12);
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      flex-shrink: 0;
      overflow-y: auto;
    }
    #browseContext {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #playerContext {
      display: none;
      flex-direction: column;
      gap: 12px;
    }

    .profile-menu-btn {
      margin-bottom: 8px;
      align-self: flex-end;
      background-color: var(--card-surface);
      border: 1px solid var(--card-border);
      padding: 8px 16px;
      border-radius: 9999px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: var(--shadow-soft);
    }

    .qr-card, .merchant-card {
      background-color: var(--card-surface);
      border-radius: 20px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(138, 43, 226, 0.08);
    }

    .qr-image {
      width: 200px;
      height: 200px;
      object-fit: contain;
      border-radius: 8px;
    }

    .cashtag-pill {
      margin-bottom: 10px;
      background-color: var(--card-surface);
      border: 1px solid var(--color-honey-oak);
      color: var(--color-rich-black);
      padding: 10px 16px;
      border-radius: 9999px;
      font-family: var(--font-heading);
      font-size: 0.9rem;
      font-weight: 700;
      text-align: center;
      line-height: 1.3;
    }

    .merchant-img {
      width: 100%;
      aspect-ratio: 9 / 16;
      max-height: 240px;
      border-radius: 12px;
      object-fit: cover;
    }

    .merchant-title {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1.1rem;
    }

    .merchant-sub {
      font-size: 0.85rem;
      color: var(--color-carpet-gray);
    }

    /* RESPONSIVE BREAKPOINTS */
    @media (max-width: 1199px) {
      /* Tablet (768-1199) mirrors laptop: full labeled State A rail + hamburger
         -> State B. (Former icon-only auto-collapse removed Oct 5, tablet=laptop.) */

      .landscape-grid, .vertical-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .right-panel {
        width: 260px;
        padding: 16px;
      }
    }

    @media (max-width: 767px) {
      body {
        flex-direction: column;
        overflow-y: auto;
      }

      .right-panel {
        display: none !important;
      }

      .left-rail {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: 60px;
        flex-direction: row;
        justify-content: space-around;
        padding: 0 12px;
        gap: 0;
        background-color: var(--color-forest-green);
        border-top: 1px solid rgba(221, 161, 94, 0.3);
        z-index: 100;
      }

      .brand-logo, .nav-divider, .collapse-toggle, .nav-btn.secondary {
        display: none;
      }

      .left-rail .nav-btn {
        width: auto;
        height: auto;
        background: transparent;
        color: var(--color-vintage-cream);
        padding: 8px;
      }

      .left-rail .nav-btn .btn-label {
        display: none;
      }

      .center-workspace {
        padding: 16px 16px 80px 16px;
      }

      .landscape-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .landscape-card .card-title {
        font-size: 1.05rem;
      }

      .vertical-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
    }

    /* ============ IMMERSIVE PLAYER VIEW (in-app, not a modal) ============ */
    /* When active, the center workspace becomes the player stage */
    body.player-mode .center-workspace {
      background-color: var(--color-forest-green);
      padding: 20px 28px;
    }

    .player-view {
      display: none;
      flex-direction: column;
      gap: 16px;
      height: 100%;
    }

    .back-btn {
      align-self: flex-start;
      display: flex;
      align-items: center;
      gap: 8px;
      background-color: var(--card-surface);
      border: 1px solid var(--card-border);
      border-radius: 9999px;
      padding: 8px 16px;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--color-rich-black);
      cursor: pointer;
      box-shadow: var(--shadow-soft);
    }

    .player-stage {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      min-height: 0;
    }

    .player-video-wrap {
      position: relative;
      height: min(78vh, 760px);
      aspect-ratio: 9 / 16;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 12px 44px rgba(26, 26, 26, 0.38);
      flex-shrink: 0;
    }

    .player-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .play-overlay {
      position: absolute;
      inset: 0;
      margin: auto;
      width: 76px;
      height: 76px;
      border-radius: 9999px;
      border: none;
      background-color: rgba(253, 251, 247, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .play-overlay svg { width: 30px; height: 30px; fill: var(--color-forest-green); }

    .player-title {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 28px;
      color: var(--color-vintage-cream);
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1.05rem;
      line-height: 1.3;
      text-shadow: 0 2px 6px rgba(26, 26, 26, 0.95), 0 1px 3px rgba(26, 26, 26, 0.85);
    }

    /* Vertical action rail · the YouTube-Shorts side stack */
    .action-rail {
      align-self: flex-end;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 12px;
    }

    .action-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 2px solid var(--color-honey-oak);
      object-fit: cover;
    }
    .action-handle {
      color: var(--color-vintage-cream);
      font-weight: 600;
      font-size: 0.78rem;
      margin-top: 6px;
    }
    .follow-pill {
      margin: 8px 0 18px;
      background-color: var(--card-surface);
      color: var(--color-quantum-purple);
      border: 1.5px solid var(--color-quantum-purple);
      border-radius: 9999px;
      padding: 8px 20px;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .follow-pill:hover {
      background-color: var(--color-quantum-purple-light);
    }

    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 16px;
    }
    .action-btn {
      width: 54px;
      height: 54px;
      border-radius: 9999px;
      background-color: var(--card-surface);
      border: 1px solid var(--card-border);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
    }
    .action-btn .icon { width: 24px; height: 24px; color: var(--color-forest-green); }
    .action-cap {
      color: var(--color-vintage-cream);
      font-size: 0.72rem;
      font-weight: 600;
      margin-top: 5px;
    }

    /* Right-panel player context: Merchant Info + Community Thread */
    .merchant-info {
      background-color: var(--card-surface);
      border: 1px solid rgba(138, 43, 226, 0.08);
      border-radius: 20px;
      padding: 18px;
      box-shadow: var(--shadow-card);
    }
    .merchant-info .merchant-title { font-size: 1.15rem; }
    .merchant-meta {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-top: 12px;
      font-size: 0.85rem;
      color: var(--color-rich-black);
    }
    .merchant-meta > div { display: flex; align-items: center; gap: 9px; }
    .merchant-meta .icon { width: 16px; height: 16px; color: var(--color-carpet-gray); }

    .map-route-btn {
      margin-top: 16px;
      width: 100%;
      background-color: var(--color-quantum-purple);
      color: var(--color-vintage-cream);
      border: none;
      border-radius: 9999px;
      padding: 12px;
      font-family: var(--font-heading);
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .map-route-btn .icon { width: 18px; height: 18px; color: var(--color-vintage-cream); }

    .comments-block {
      background-color: var(--card-surface);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      padding: 16px;
      box-shadow: var(--shadow-card);
    }
    .comments-title { font-family: var(--font-heading); font-weight: 700; margin-bottom: 14px; }
    .comment { display: flex; gap: 10px; margin-bottom: 14px; }
    .comment img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
    .comment-body { font-size: 0.85rem; line-height: 1.35; }
    .comment-user { font-weight: 700; }
    .comment-input-row { display: flex; gap: 8px; margin-top: 6px; }
    .comment-input-row input {
      flex: 1;
      border: 1px solid var(--card-border);
      border-radius: 9999px;
      padding: 9px 14px;
      font-family: var(--font-body);
      font-size: 0.85rem;
      background-color: var(--color-vintage-cream);
    }
    .comment-input-row button {
      background-color: var(--color-quantum-purple);
      color: var(--color-vintage-cream);
      border: none;
      border-radius: 9999px;
      padding: 9px 18px;
      font-family: var(--font-heading);
      font-weight: 700;
      cursor: pointer;
    }

    @media (max-width: 1199px) {
      .player-video-wrap { height: min(72vh, 620px); }
    }


    /* ============ PRE-LAUNCH GATE + PREVIEW CHROME ============ */
    body.bwt-ticker-on { padding-top: 34px; }

    .preview-ribbon {
      display: none;
      position: fixed; top: 0; left: 0; right: 0; height: 46px;
      z-index: 900;
      background-color: var(--color-quantum-purple);
      color: var(--color-vintage-cream);
      align-items: center; justify-content: center; gap: 10px;
      font-size: 0.78rem; font-weight: 600; line-height: 1.2;
      padding: 6px 18px; text-align: center;
    }
    body.preview-mode .preview-ribbon { display: flex; }
    .preview-ribbon svg { width: 16px; height: 16px; stroke: var(--color-honey-oak); stroke-width: 2.4; fill: none; flex-shrink: 0; }

    #gateView {
      position: fixed; inset: 0; z-index: 1000;
      background-color: var(--color-forest-green);
      color: var(--color-vintage-cream);
      overflow-y: auto;
      display: flex; align-items: center; justify-content: center;
      padding: 40px 24px;
    }
    .gate-inner { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
    .eyebrow { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-honey-oak); }
    .gate-logo { width: 130px; height: 130px; }
    .gate-wordmark { font-family: 'Origins Smooth', 'Great Vibes', cursive; font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1; }
    .gate-wordmark-sub { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.55em; text-transform: uppercase; color: var(--color-carpet-gray); padding-left: 0.55em; margin-top: -2px; }
    .gate-launch-date { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-honey-oak); }
    .gate-launch-occasion { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-carpet-gray); margin-top: 3px; }
    .gate-countdown { display: flex; gap: 10px; }
    .gate-cd-unit { display: flex; flex-direction: column; align-items: center; gap: 7px; }
    .gate-cd-num { width: 70px; height: 76px; background-color: var(--color-vintage-cream); color: var(--color-rich-black); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 2.1rem; box-shadow: 0 6px 18px rgba(26,26,26,0.28); }
    .gate-cd-label { font-family: var(--font-heading); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-carpet-gray); }
    .gate-desc { font-size: 0.98rem; line-height: 1.6; max-width: 480px; opacity: 0.92; }
    .gate-tag { font-family: var(--font-heading); font-weight: 700; color: var(--color-honey-oak); }
    .gate-capture { width: 100%; max-width: 460px; display: flex; gap: 10px; }
    .gate-capture input { flex: 1; border: 1.5px solid rgba(253,251,247,0.35); background-color: rgba(253,251,247,0.08); color: var(--color-vintage-cream); border-radius: 9999px; padding: 13px 20px; font-family: var(--font-body); font-size: 0.95rem; outline: none; }
    .gate-capture input::placeholder { color: rgba(253,251,247,0.55); }
    .gate-capture input:focus { border-color: var(--color-honey-oak); }
    .gate-capture button { background-color: var(--color-quantum-purple); color: var(--color-vintage-cream); border: none; border-radius: 9999px; padding: 13px 24px; font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; cursor: pointer; white-space: nowrap; }
    .gate-skip { background: none; border: none; color: var(--color-vintage-cream); opacity: 0.85; font-family: var(--font-body); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
    .gate-hint { font-size: 0.76rem; color: rgba(253,251,247,0.5); }
    .labs-lockup { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .labs-wordmark { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.14em; color: var(--color-honey-oak); }
    .labs-wordmark sup { font-size: 0.55rem; }
    .labs-experiment { font-family: var(--font-heading); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-carpet-gray); }

    /* Branded loading splash (replaces pre-launch gate) */
    #splashView {
      position: fixed; inset: 0; z-index: 1000;
      background-color: var(--color-forest-green);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 34px;
      transition: opacity .4s ease;
    }
    .splash-art { width: min(340px, 82vw); height: auto; display: block; }
    .splash-spinner {
      width: 34px; height: 34px; border-radius: 9999px;
      border: 3px solid rgba(253,251,247,0.18);
      border-top-color: var(--color-honey-oak);
      animation: bwtspin 0.9s linear infinite;
    }
    @keyframes bwtspin { to { transform: rotate(360deg); } }

    /* Founding Creator CTA (home) */
    .founding-cta {
      display: flex; align-items: center; gap: 18px;
      background: linear-gradient(90deg, rgba(138,43,226,0.10), rgba(221,161,94,0.10));
      border: 1px solid rgba(138,43,226,0.20);
      border-radius: 18px; padding: 15px 22px; cursor: pointer;
    }
    .founding-badge { display: inline-flex; align-items: center; gap: 7px; background-color: var(--color-honey-oak); color: var(--color-rich-black); font-family: var(--font-heading); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.12em; padding: 5px 12px 5px 6px; border-radius: 9999px; white-space: nowrap; }
    .founding-badge.big { font-size: 0.85rem; padding: 8px 16px; align-self: flex-start; }
    .founding-text { flex: 1; }
    .founding-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; }
    .founding-sub { font-size: 0.88rem; color: var(--color-carpet-gray); margin-top: 6px; }
    .founding-btn { background-color: var(--color-quantum-purple); color: var(--color-vintage-cream); border: none; border-radius: 9999px; padding: 12px 22px; font-family: var(--font-heading); font-weight: 700; cursor: pointer; white-space: nowrap; }

    /* Upload view */
    .upload-view { display: none; flex-direction: column; gap: 16px; }
    .upload-card { background-color: var(--card-surface); border: 1px solid var(--card-border); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-card); max-width: 720px; }
    .upload-card h2 { font-family: var(--font-heading); font-size: 1.5rem; margin: 12px 0 6px; }
    .upload-card p { color: var(--color-carpet-gray); line-height: 1.5; margin-bottom: 18px; }
    .upload-dropzone { border: 2px dashed rgba(138,43,226,0.35); border-radius: 16px; padding: 34px; text-align: center; cursor: pointer; color: var(--color-forest-green); font-weight: 600; transition: background 0.2s ease; }
    .upload-dropzone:hover { background-color: rgba(138,43,226,0.04); }
    .upload-dropzone svg { width: 40px; height: 40px; stroke: var(--color-quantum-purple); stroke-width: 1.8; fill: none; margin-bottom: 10px; }
    .upload-dropzone .dz-sub { display: block; font-weight: 500; font-size: 0.85rem; color: var(--color-carpet-gray); margin-top: 6px; }
    .script-block { background-color: var(--color-canvas); border-radius: 14px; padding: 18px 20px; margin-top: 20px; }
    .script-title { font-family: var(--font-heading); font-weight: 700; margin-bottom: 12px; }
    .script-block ol { margin: 0; padding-left: 20px; }
    .script-block li { margin-bottom: 8px; line-height: 1.45; font-size: 0.92rem; }
    .upload-submit { margin-top: 22px; width: 100%; background-color: var(--color-quantum-purple); color: var(--color-vintage-cream); border: none; border-radius: 9999px; padding: 15px; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; cursor: pointer; }
    .upload-confirm { display: none; align-items: center; gap: 10px; margin-top: 16px; background-color: rgba(221,161,94,0.15); border: 1.5px solid var(--color-honey-oak); border-radius: 14px; padding: 14px 18px; font-weight: 600; }
    .upload-confirm svg { width: 20px; height: 20px; stroke: var(--color-honey-oak); stroke-width: 2.5; fill: none; }

    @media (max-width: 767px) {
      .founding-cta { flex-direction: column; align-items: flex-start; }
      .gate-cd-num { width: 60px; height: 66px; font-size: 1.7rem; }
      .gate-capture { flex-direction: column; }
    }


    /* ============ HORIZONTAL (16:9) PLAYER · long-form ============ */
    .hplayer-view { display: none; flex-direction: column; gap: 16px; max-width: 960px; }
    .hplayer-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background-color: var(--color-forest-green); box-shadow: 0 10px 34px rgba(26,26,26,0.25); }
    .hplayer-video { width: 100%; height: 100%; object-fit: cover; }
    .hplayer-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
    .hplayer-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .hplayer-creator { display: flex; align-items: center; gap: 12px; }
    .action-avatar.small { width: 44px; height: 44px; }
    .hp-handle { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; }
    .hp-sub { font-size: 0.8rem; color: var(--color-carpet-gray); }
    .hplayer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .h-action-pill { display: flex; align-items: center; gap: 8px; background-color: var(--card-surface); border: 1px solid var(--card-border); border-radius: 9999px; padding: 10px 16px; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--color-rich-black); cursor: pointer; box-shadow: var(--shadow-soft); }
    .h-action-pill .icon { width: 20px; height: 20px; color: var(--color-forest-green); }
    .hplayer-desc { background-color: var(--card-surface); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px 18px; font-size: 0.92rem; line-height: 1.55; color: var(--color-rich-black); box-shadow: var(--shadow-soft); }
    .hplayer-desc .dtag { color: var(--color-carpet-gray); font-weight: 600; }

    /* ============ MINI MENUS (More / Share) ============ */
    .mini-backdrop { display: none; position: fixed; inset: 0; z-index: 1200; background-color: rgba(26,26,26,0.45); align-items: center; justify-content: center; padding: 20px; }
    .mini-menu { background-color: var(--card-surface); border-radius: 20px; padding: 12px; min-width: 300px; max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(26,26,26,0.45); }
    .mini-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 12px; }
    .mini-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
    .mini-close { background: none; border: none; cursor: pointer; color: var(--color-carpet-gray); }
    .mini-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }
    .mini-item { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 12px; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; }
    .mini-item:hover { background-color: var(--color-canvas); }
    .mini-item .icon { width: 20px; height: 20px; stroke: var(--color-forest-green); stroke-width: 2; fill: none; }
    .mini-item.danger .icon { stroke: var(--color-quantum-purple); }
    .share-link { display: flex; gap: 8px; padding: 6px 12px 12px; }
    .share-link input { flex: 1; border: 1px solid var(--card-border); border-radius: 9999px; padding: 11px 15px; background-color: var(--color-canvas); font-family: var(--font-body); font-size: 0.85rem; color: var(--color-rich-black); }
    .share-link button { background-color: var(--color-quantum-purple); color: var(--color-vintage-cream); border: none; border-radius: 9999px; padding: 11px 18px; font-family: var(--font-heading); font-weight: 700; cursor: pointer; }
    .share-socials { display: flex; gap: 10px; padding: 4px 12px 10px; }
    .share-s { width: 46px; height: 46px; border-radius: 9999px; background-color: var(--color-canvas); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; color: var(--color-forest-green); cursor: pointer; }
    .share-s svg { width: 22px; height: 22px; stroke: var(--color-forest-green); stroke-width: 2; fill: none; }


    /* ===== TODAY hook (7-day buying pattern) ===== */
    .today-hook { display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
      background: linear-gradient(90deg, rgba(221,161,94,0.16), rgba(253,251,247,0));
      border: 1px solid rgba(221,161,94,0.35); border-left: 5px solid var(--color-honey-oak);
      border-radius: 14px; padding: 14px 18px; }
    .today-pill { background-color: var(--color-quantum-purple); color: var(--color-vintage-cream);
      font-family: var(--font-heading); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.12em;
      padding: 5px 12px; border-radius: 9999px; white-space: nowrap; }
    .today-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; }
    .today-copy { font-size: 0.88rem; color: var(--color-carpet-gray); margin-top: 2px; }

    /* ===== Sponsored ad slot (IAB 300x250 Medium Rectangle) ===== */
    .ad-slot { display: flex; flex-direction: column; gap: 6px; }
    .ad-label { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--color-carpet-gray); font-weight: 700; }
    .ad-unit { width: 300px; max-width: 100%; height: 250px; border-radius: 14px;
      border: 1px dashed rgba(138,43,226,0.30); background-color: var(--color-vintage-cream);
      display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
    .ad-ph-title { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--color-forest-green); }
    .ad-ph-sub { font-size: 0.8rem; color: var(--color-carpet-gray); margin-top: 4px; }


    /* ===== MOBILE CHROME (hidden on desktop) ===== */
    .mobile-topbar { display: none; }
    .mobile-tabbar { display: none; }
    .mobile-topbar { align-items: center; gap: 12px; padding: 10px 16px; background-color: var(--color-canvas); position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--card-border); }
    .m-logo { width: 40px; height: 40px; }
    .m-title { flex: 1; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
    .m-search { width: 42px; height: 42px; border-radius: 9999px; border: 1px solid var(--card-border); background-color: var(--card-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .m-search .icon { width: 20px; height: 20px; color: var(--color-forest-green); }
    .m-menu { width: 42px; height: 42px; border-radius: 9999px; border: 1px solid var(--card-border); background-color: var(--card-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .m-menu .icon { width: 20px; height: 20px; color: var(--color-forest-green); }
    .mobile-tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: 74px; background-color: var(--color-forest-green); align-items: flex-start; justify-content: space-around; padding: 9px 6px 0; z-index: 100; border-top: 1px solid rgba(221,161,94,0.25); }
    .m-tab { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 3px; color: rgba(253,251,247,0.6); font-family: var(--font-heading); font-weight: 600; font-size: 0.62rem; cursor: pointer; }
    .m-tab.active { color: var(--color-vintage-cream); }
    .m-tab .icon { width: 24px; height: 24px; color: currentColor; }
    .m-fab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 56px; height: 56px; margin-top: -16px; border: none; border-radius: 9999px; background-color: var(--color-quantum-purple); color: var(--color-vintage-cream); font-family: var(--font-heading); font-weight: 700; font-size: 0.55rem; cursor: pointer; box-shadow: 0 6px 16px rgba(138,43,226,0.45); }
    .m-fab .icon { width: 26px; height: 26px; color: var(--color-vintage-cream); }
    .mobile-topbar a, .mobile-tabbar a { text-decoration: none; }

    /* ===== MOBILE LAYOUT (matches phone mockup) ===== */
    @media (max-width: 767px) {
      body { flex-direction: column; height: auto; overflow-y: auto; }
      .left-rail { display: none !important; }
      .right-panel { display: none !important; }
      .mobile-topbar { display: flex; }
      .mobile-tabbar { display: flex; }
      .center-workspace { flex: none; height: auto; overflow: visible; padding: 16px 14px 120px; }
      .today-hook { margin-bottom: 18px; }
      .founding-cta { flex-direction: column; align-items: flex-start; }
      .landscape-grid { grid-template-columns: 1fr; }
      .vertical-grid { display: flex; grid-template-columns: none; overflow-x: auto; gap: 12px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
      .vertical-card { flex: 0 0 44%; }
      .section-title { margin-top: 30px; }
      .hplayer-view, .player-view, .upload-view { max-width: 100%; }
      .hplayer-actions { width: 100%; }
    }


    /* ===== TOP TICKER (day theme + disclaimer, scrolling) ===== */
    .top-ticker { display: none; position: fixed; top: 0; left: 0; right: 0; height: 34px; overflow: hidden; align-items: center; z-index: 900; background-color: var(--color-quantum-purple); color: var(--color-vintage-cream); }
    body.bwt-ticker-on .top-ticker { display: flex; }
    .ticker-track { display: inline-flex; white-space: nowrap; animation: tickerScroll 40s linear infinite; }
    .top-ticker:hover .ticker-track { animation-play-state: paused; }
    .ticker-item { display: inline-block; font-size: 0.8rem; font-weight: 600; line-height: 34px; }
    .ticker-item strong { color: var(--color-honey-oak); letter-spacing: 0.04em; }
    @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* octagon-B badge mark */
    .fc-oct { width: 20px; height: 20px; flex-shrink: 0; }
    .founding-badge.big .fc-oct { width: 26px; height: 26px; }
    .founding-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }


    /* ===== PULL UP (signature turnout action) ===== */
    .pull-btn { width: 54px; height: 54px; border-radius: 9999px; background-color: var(--color-quantum-purple); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(138,43,226,0.45); }
    .pull-btn .icon { width: 26px; height: 26px; stroke: var(--color-vintage-cream); }
    .h-pull-pill { display: flex; align-items: center; gap: 8px; background-color: var(--color-quantum-purple); border: none; border-radius: 9999px; padding: 10px 18px; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--color-vintage-cream); cursor: pointer; box-shadow: 0 4px 14px rgba(138,43,226,0.35); }
    .h-pull-pill .icon { width: 20px; height: 20px; stroke: var(--color-vintage-cream); }
    .pull-map { position: relative; height: 150px; border-radius: 14px; overflow: hidden; border: 1px solid var(--card-border); margin-bottom: 12px; }
    .pull-map svg { display: block; width: 100%; height: 100%; }
    .pull-map-tag { position: absolute; bottom: 8px; left: 8px; background-color: rgba(26,26,26,0.82); color: var(--color-vintage-cream); font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 8px; }
    .pull-osm { position: absolute; top: 8px; right: 8px; background-color: rgba(253,251,247,0.85); color: var(--color-forest-green); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 6px; }
    .pull-count { text-align: center; font-family: var(--font-heading); font-weight: 700; color: var(--color-forest-green); margin: 4px 0 14px; }
    .pull-primary { width: 100%; background-color: var(--color-quantum-purple); color: var(--color-vintage-cream); border: none; border-radius: 9999px; padding: 14px; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; cursor: pointer; margin-bottom: 10px; }
    .pull-primary.joined { background-color: var(--color-forest-green); }
    .pull-secondary { width: 100%; background-color: var(--card-surface); border: 1px solid var(--card-border); color: var(--color-rich-black); border-radius: 9999px; padding: 12px; font-family: var(--font-heading); font-weight: 700; cursor: pointer; margin-bottom: 10px; }
    .host-form { display: none; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
    .host-form input { flex: 1; min-width: 130px; border: 1px solid var(--card-border); border-radius: 9999px; padding: 10px 14px; font-family: var(--font-body); background-color: var(--color-canvas); }
    .host-form button { width: 100%; background-color: var(--color-quantum-purple); color: var(--color-vintage-cream); border: none; border-radius: 9999px; padding: 12px; font-family: var(--font-heading); font-weight: 700; cursor: pointer; }
    .pull-divider { text-align: center; color: var(--color-carpet-gray); font-size: 0.85rem; margin: 10px 0; }
    .checkin-btn { width: 100%; background-color: var(--color-honey-oak); color: var(--color-rich-black); border: none; border-radius: 9999px; padding: 13px; font-family: var(--font-heading); font-weight: 700; cursor: pointer; }
    .pull-badge { display: none; margin-top: 12px; background-color: rgba(138,43,226,0.12); border: 1.5px solid var(--color-quantum-purple); border-radius: 14px; padding: 14px; text-align: center; font-family: var(--font-heading); font-weight: 700; color: var(--color-rich-black); }

    /* CHAMPION MODAL & BUTTONS */
    .amount-btn {
      transition: all 0.2s ease;
    }
    .amount-btn:hover {
      background-color: var(--color-quantum-purple-light) !important;
      border-color: var(--color-quantum-purple) !important;
      color: var(--color-quantum-purple) !important;
    }
    .amount-btn.selected {
      background-color: var(--color-quantum-purple-light) !important;
      border-color: var(--color-quantum-purple) !important;
      color: var(--color-quantum-purple) !important;
    }
    .champion-badge-profile {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--color-carpet-gray);
      font-size: 0.8rem;
      font-weight: 400;
      margin-top: 4px;
    }

    .profile-view { display: none; flex-direction: column; gap: 16px; }
    .profile-view .modal-card { margin-top: 10px; }

    .workspace-view {
      padding: 24px;
    }
    .workspace-wrap {
      width: 100%;
      max-width: 820px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .feature-preview-card {
      max-width: 400px;
      width: 90%;
      background-color: var(--card-surface);
      border-radius: 24px;
      padding: 24px;
      border: 1.5px solid var(--card-border);
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-shadow: 0 12px 40px rgba(26,26,26,0.15);
    }

  
    @keyframes authSpin {
      to { transform: rotate(360deg); }
    }
    .auth-loader {
      display: inline-block;
      width: 24px;
      height: 24px;
      border: 3px solid rgba(138, 43, 226, 0.2);
      border-top-color: var(--color-quantum-purple);
      border-radius: 50%;
      animation: authSpin 0.8s linear infinite;
    }

    /* ============ DEDICATED SEARCH WORKSPACE ============ */
    .search-view {
      display: none;
      flex-direction: column;
      gap: 24px;
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
    }

    .search-header-wrap {
      display: flex;
      flex-direction: column;
      gap: 16px;
      background-color: var(--card-surface);
      border: 1.5px solid var(--card-border);
      border-radius: 24px;
      padding: 20px 24px;
      box-shadow: var(--shadow-card);
    }

    .search-bar-row {
      display: flex;
      align-items: center;
      gap: 12px;
      background-color: var(--color-canvas);
      border: 1.5px solid var(--card-border);
      border-radius: 9999px;
      padding: 6px 16px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .search-bar-row:focus-within {
      border-color: var(--color-quantum-purple);
      box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.12);
    }

    .search-icon-left {
      width: 22px;
      height: 22px;
      stroke: var(--color-forest-green);
      stroke-width: 2.2;
      fill: none;
      flex-shrink: 0;
    }

    .search-main-input {
      flex: 1;
      border: none;
      background: transparent;
      outline: none;
      font-family: var(--font-body);
      font-size: 1.02rem;
      color: var(--color-rich-black);
      padding: 8px 4px;
    }
    .search-main-input::placeholder {
      color: var(--color-carpet-gray);
      opacity: 0.85;
    }

    .search-clear-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--color-carpet-gray);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border-radius: 50%;
    }
    .search-clear-btn:hover {
      color: var(--color-rich-black);
      background-color: rgba(26, 26, 26, 0.06);
    }
    .search-clear-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; }

    /* Filter Scope Pills */
    .search-scope-bar {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
    }
    .search-scope-bar::-webkit-scrollbar { display: none; }

    .scope-pill {
      background-color: var(--color-canvas);
      border: 1px solid var(--card-border);
      color: var(--color-rich-black);
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.85rem;
      padding: 8px 18px;
      border-radius: 9999px;
      cursor: pointer;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 44px;
      transition: all 0.2s ease;
    }
    .scope-pill:hover {
      background-color: rgba(138, 43, 226, 0.08);
      border-color: var(--color-quantum-purple);
    }
    .scope-pill.active {
      background-color: var(--color-quantum-purple);
      color: var(--color-vintage-cream);
      border-color: var(--color-quantum-purple);
      box-shadow: 0 4px 12px rgba(138, 43, 226, 0.25);
    }

    /* Day-theme pills (Details step): selected state is HONEY OAK, not
       purple, so purple stays reserved for the one forward CTA. ID-scoped
       so the search-bar scope-pills keep their purple active state. */
    #bwt-theme-pills .scope-pill.active {
      background-color: var(--color-honey-oak);
      color: var(--color-vintage-cream);
      border-color: var(--color-honey-oak);
      box-shadow: 0 4px 12px rgba(221, 161, 94, 0.25);
    }

    /* Empty Hero Lockup */
    .search-hero-lockup {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 48px 20px;
      background-color: var(--card-surface);
      border: 1.5px solid var(--card-border);
      border-radius: 28px;
      box-shadow: var(--shadow-card);
      gap: 16px;
    }

    .search-hero-emblem {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background-color: var(--color-quantum-tint);
      border: 2px solid rgba(138, 43, 226, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
    }
    .search-hero-emblem svg {
      width: 38px;
      height: 38px;
      stroke: var(--color-quantum-purple);
      stroke-width: 2.2;
      fill: none;
    }

    .search-hero-title {
      font-family: var(--font-heading);
      font-size: 2rem;
      font-weight: 700;
      color: var(--color-forest-green);
      letter-spacing: -0.01em;
      line-height: 1.15;
    }

    .search-hero-sub {
      font-size: 1rem;
      color: var(--color-carpet-gray);
      max-width: 520px;
      line-height: 1.45;
    }

    .search-suggestions-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
      width: 100%;
    }
    .suggestions-label {
      font-family: var(--font-heading);
      font-size: 0.76rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--color-honey-oak);
    }
    .suggestions-chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      max-width: 600px;
    }
    .chip-btn {
      background-color: var(--color-canvas);
      border: 1px solid var(--card-border);
      border-radius: 9999px;
      padding: 8px 16px;
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 0.82rem;
      color: var(--color-forest-green);
      cursor: pointer;
      transition: all 0.2s ease;
      min-height: 40px;
      display: inline-flex;
      align-items: center;
    }
    .chip-btn:hover {
      background-color: var(--color-honey-oak);
      color: var(--color-rich-black);
      border-color: var(--color-honey-oak);
    }

    /* Results Workspace */
    .search-results-area {
      display: none;
      flex-direction: column;
      gap: 28px;
    }

    .search-results-count {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--color-forest-green);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .search-results-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 18px;
    }

    .search-biz-card {
      background-color: var(--card-surface);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: var(--shadow-soft);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
    }
    .search-biz-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-card);
      border-color: rgba(138, 43, 226, 0.25);
    }

    .search-biz-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    .search-biz-name {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--color-rich-black);
      line-height: 1.25;
    }
    .search-verified-badge {
      background-color: rgba(47, 79, 79, 0.12);
      color: var(--color-forest-green);
      font-family: var(--font-heading);
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 4px 8px;
      border-radius: 9999px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .search-biz-meta {
      font-size: 0.85rem;
      color: var(--color-carpet-gray);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .search-biz-cat {
      display: inline-block;
      background-color: rgba(221, 161, 94, 0.18);
      color: var(--color-rich-black);
      font-family: var(--font-heading);
      font-size: 0.72rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 9999px;
      align-self: flex-start;
    }
    .search-biz-location {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      color: var(--color-carpet-gray);
    }
    .search-biz-location svg { width: 15px; height: 15px; stroke: var(--color-honey-oak); stroke-width: 2; fill: none; flex-shrink: 0; }

    .search-biz-action {
      margin-top: auto;
      width: 100%;
      background-color: var(--color-quantum-purple);
      color: var(--color-vintage-cream);
      border: none;
      border-radius: 9999px;
      padding: 10px;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.85rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .search-biz-action svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

    .search-no-results {
      padding: 48px 24px;
      text-align: center;
      background-color: var(--card-surface);
      border-radius: 24px;
      border: 1px dashed var(--card-border);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .search-no-results h3 {
      font-family: var(--font-heading);
      font-size: 1.2rem;
      color: var(--color-forest-green);
    }
    .search-no-results p {
      font-size: 0.9rem;
      color: var(--color-carpet-gray);
      max-width: 420px;
    }

/* ============================================================
   COVER-FLOW COMPONENTS (segmented control + step cards)
   Component #1 of the harvest-as-we-go UI library.
   36px pill family. All values tokenized. No #000/#FFF.
   ============================================================ */
.cover-flow { --pill-h: 36px; }

/* Segmented control — one connected track, single active segment */
.seg {
  display: inline-flex;
  background: var(--color-canvas);
  border: 1px solid var(--card-border);
  border-radius: 9999px;
  padding: 3px;
  gap: 2px;
  box-shadow: inset 0 1px 3px rgba(26,26,26,0.04);
}
.seg.full { display: flex; width: 100%; }
.seg-item {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--color-carpet-gray);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  min-height: var(--pill-h, 36px);
  padding: 7px 16px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  position: relative;
  transition: color .2s ease, background .25s cubic-bezier(0.4,0,0.2,1), box-shadow .2s ease;
}
/* 44px invisible tap zone — finger standard, doesn't change visible height */
.seg-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}
.seg-item:hover:not(.active) { color: var(--color-rich-black); }
.seg-item.active {
  background: var(--color-quantum-purple);
  color: var(--color-vintage-cream);
  box-shadow: 0 3px 10px rgba(138,43,226,0.30);
}

/* .outline variant — purple stays reinforced at rest without a solid fill */
.seg.outline { background: transparent; border: none; padding: 0; gap: 8px; }
.seg.outline .seg-item {
  background: var(--color-quantum-tint);
  border: 1.5px solid var(--color-quantum-purple);
  color: var(--color-quantum-purple);
}
.seg.outline .seg-item:hover:not(.active) {
  background: rgba(138,43,226,0.12);
  color: var(--color-quantum-purple);
}
.seg.outline .seg-item.active {
  background: var(--color-quantum-purple);
  color: var(--color-vintage-cream);
  border-color: var(--color-quantum-purple);
  box-shadow: 0 3px 10px rgba(138,43,226,0.30);
}

/* Add-headline focus: silence the other two pills so the user commits to the composer */
.seg.outline.headline-focus .seg-item:not(.active) {
  background: transparent;
  border-color: var(--card-border);
  color: var(--color-carpet-gray);
}
.seg.outline.headline-focus .seg-item:not(.active):hover {
  background: transparent;
  color: var(--color-rich-black);
}

/* Step cards — the two-card separation that kills competing-purples anxiety */
.step-card {
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.step-num {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9999px;
  background: var(--color-quantum-purple);
  color: var(--color-vintage-cream);
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.step-num.pending {
  background: var(--color-canvas);
  color: var(--color-carpet-gray);
  border: 1.5px solid var(--card-border);
}
.step-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-forest-green); }
.step-sub { font-size: 0.8rem; color: var(--color-carpet-gray); margin-top: 1px; }

/* Connector between the two cards */
.step-connector { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 2px; }
.step-connector .line { width: 2px; height: 12px; background: var(--card-border); }
/* Directional cue into the next step — bold, purple, gently bobbing */
.step-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 9999px;
  background: var(--color-quantum-tint);
  color: var(--color-quantum-purple);
  animation: step-arrow-bob 1.4s ease-in-out infinite;
}
.step-arrow svg { width: 22px; height: 22px; display: block; }
@keyframes step-arrow-bob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .step-arrow { animation: none; }
}
/* Quiet exit affordance in a step-card head (Start over) */
.card-exit {
  margin-left: auto;
  background: none; border: none;
  color: var(--color-carpet-gray);
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.78rem;
  cursor: pointer;
  padding: 4px 6px;
}
.card-exit:hover { color: var(--color-quantum-purple); }

/* Mode panels — swap under the segmented control */
.seg-panel {
  display: none;
  margin-top: 14px;
  background: var(--color-canvas);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 14px 16px;
}
.seg-panel.active { display: block; }

/* CTA — 36px matched to the pill family; presence via CAPS + tracking, NOT height */
.cta-btn {
  width: 100%;
  background: var(--color-quantum-purple);
  color: var(--color-vintage-cream);
  border: none;
  border-radius: 9999px;
  min-height: var(--pill-h, 36px);
  padding: 8px 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.back-link {
  display: block;
  text-align: center;
  margin-top: 12px;
  background: none; border: none;
  color: var(--color-carpet-gray);
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.8rem;
  cursor: pointer;
}

/* ============================================================
   STEPPER · shared wizard progress primitive (js/bwt-stepper.js)
   Promoted verbatim from scout-studio/editor inline <style>.
   Orientation is owned HERE, never by callers:
   horizontal >= 768px, vertical (circle, line down, label right) <= 767px.
   States: .active, .done, .skipped. Upcoming = no state class.
   ============================================================ */
.bwt-stepper { display:flex; align-items:center; gap:6px; margin-bottom:22px; flex-wrap:wrap; }
.bwt-step { display:flex; align-items:center; gap:8px; }
.bwt-step-num { width:28px; height:28px; border-radius:9999px; background:var(--color-canvas); border:1.5px solid var(--card-border); color:var(--color-carpet-gray); font-family:var(--font-heading); font-weight:700; font-size:0.85rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bwt-step-label { font-family:var(--font-heading); font-weight:700; font-size:0.82rem; color:var(--color-carpet-gray); }
.bwt-step.active .bwt-step-num { background:var(--color-quantum-purple); border-color:var(--color-quantum-purple); color:var(--color-vintage-cream); }
.bwt-step.active .bwt-step-label { color:var(--color-forest-green); }
.bwt-step.done .bwt-step-num { background:var(--color-forest-green); border-color:var(--color-forest-green); color:var(--color-vintage-cream); }
.bwt-step-line { flex:1; min-width:14px; height:2px; background:var(--card-border); }
/* NEW: skipped = passed on purpose. Dashed ring, quiet label; still reversible. */
.bwt-step.skipped .bwt-step-num { background:var(--color-canvas); border-style:dashed; border-color:var(--color-carpet-gray); color:var(--color-carpet-gray); }
.bwt-step.skipped .bwt-step-label { color:var(--color-carpet-gray); }
/* NEW: phones stack vertically. Line is centered under the 28px circle. */
@media (max-width: 767px) {
  .bwt-stepper { flex-direction:column; align-items:flex-start; flex-wrap:nowrap; gap:4px; }
  .bwt-step-line { flex:none; width:2px; min-width:0; height:12px; margin-left:13px; }
}

/* Collapsed stepper (Option B) — crumb + dots, emitted by bwt-stepper.js
   render(). Replaces the labeled .bwt-step rail at every width (Option A
   "5-across" dropped). The .bwt-step* rules above are now unused by the
   editor; kept until other BwtStepper consumers are confirmed. */
.cstepper { display:flex; width:100%; align-items:center; gap:10px; padding:8px 12px; background:var(--color-canvas); border:1px solid var(--card-border); border-radius:9999px; }
.cstepper .cnum { width:26px; height:26px; flex-shrink:0; border-radius:9999px; background:var(--color-quantum-purple); color:var(--color-vintage-cream); font-family:var(--font-heading); font-weight:700; font-size:0.8rem; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(138,43,226,0.30); }
.cstepper .clabel { font-family:var(--font-heading); font-weight:700; font-size:0.92rem; color:var(--color-forest-green); }
.cstepper .cof { color:var(--color-carpet-gray); font-weight:600; font-size:0.8rem; }
.cstepper .cdots { margin-left:auto; display:flex; gap:5px; }
.cstepper .cdot { width:7px; height:7px; border-radius:9999px; background:var(--card-border); }
.cstepper .cdot.on { background:var(--color-quantum-purple); }
.cstepper .cdot.done { background:var(--color-forest-green); }

/* ============================================================
   WATCH — dedicated page. Mobile = one column, video edge-to-edge
   (mobile rules live in watch/index.html inline <style>). Desktop/
   tablet = center video + right sidebar (ads). No card, no forest-
   green surface, description free-flow, nothing folded under video.
   ============================================================ */
.watch-stack { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 430px; margin: 0 auto; }
.watch-stack.landscape { max-width: 860px; }

.watch-creator { display: flex; align-items: center; gap: 10px; }
.watch-creator .follow-pill { margin: 0 0 0 auto; background-color: var(--color-quantum-purple); color: var(--color-vintage-cream); border: none; }
.watch-av-wrap { position: relative; flex-shrink: 0; }
.watch-av-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 9999px; background-color: var(--color-quantum-purple); border: 2px solid var(--color-vintage-cream); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.watch-av-badge svg { width: 11px; height: 11px; stroke: var(--color-vintage-cream); stroke-width: 3; fill: none; }
.watch-av-badge.following { background-color: var(--color-honey-oak); }
.watch-av-badge.following svg { display: none; }
.watch-cr-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.watch-cr-name { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--color-rich-black); line-height: 1.2; }
.watch-cr-handle { font-size: 0.8rem; color: var(--color-carpet-gray); }

/* Media: NO card — no radius, no shadow, no border. Video + its controls, no gap. */
.watch-media { display: block; }
.watch-video-wrap { position: relative; width: 100%; aspect-ratio: 9 / 16; background-color: var(--color-rich-black); }
.watch-stack.landscape .watch-video-wrap { aspect-ratio: 16 / 9; }
.watch-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.watch-video-wrap .watch-video { transition: filter .3s ease, transform .3s ease; }
.watch-video-wrap.bwt-dim .watch-video { filter: brightness(0.42); }
.watch-video-wrap.bwt-shrink .watch-video { transform: scale(0.965); }

/* ===== Caption overlay (js/bwt-captions.js) =====
   Content colors: same values as the composer palette (sovereign-canvas-studio.js),
   so captions and headlines match. Cream reuses --color-vintage-cream. */
:root {
  --caption-gold:    #FFE600;
  --caption-red:     #EF4444;
  --caption-cyan:    #00E5FF;
  --caption-outline: #000000;
}
/* Canvas laid over the video; clicks pass through to the native controls. */
.bwt-cap-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; transition: opacity .2s ease, transform .3s ease; }
/* Action sheet (Pull Up) dims + pauses the video: hide captions with it. */
.watch-video-wrap.bwt-dim .bwt-cap-canvas { opacity: 0; }
/* Browse sheet shrinks the still-playing video: captions shrink with it. */
.watch-video-wrap.bwt-shrink .bwt-cap-canvas { transform: scale(0.965); }

.watch-actions { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background-color: var(--color-vintage-cream); border-top: 1px solid var(--card-border); }
.watch-act { position: relative; width: 40px; height: 40px; border-radius: 9999px; background-color: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-forest-green); }
.watch-act .icon { width: 22px; height: 22px; color: var(--color-forest-green); }
.watch-act::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
.watch-act.more { margin-left: auto; border-color: transparent; color: var(--color-rich-black); }
.watch-act.more .icon { color: var(--color-rich-black); }

/* Below the video: free-flowing text, NOT a card */
.watch-below { display: flex; flex-direction: column; gap: 6px; }
.watch-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--color-rich-black); }
.watch-meta { font-size: 0.85rem; color: var(--color-carpet-gray); }
.watch-desc { font-size: 0.92rem; line-height: 1.55; color: var(--color-rich-black); }
.watch-desc .dtag { color: var(--color-carpet-gray); font-weight: 600; }

/* Ad in the right sidebar on watch (desktop/tablet; sidebar is hidden <=767 by base rules) */
.watch-ad { padding: 4px; }

/* ============================================================
   bwt-sheet · bottom-drawer primitive (retires the centered
   .mini-menu for Pull Up). z-band matches the .mini-backdrop family.
   ============================================================ */
.bwt-scrim { position: fixed; inset: 0; z-index: 1200; background-color: var(--color-rich-black); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.bwt-scrim.open { opacity: 0.5; pointer-events: auto; }
.bwt-sheet.open { transform: translateY(0); }
.bwt-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1201; height: 90%; max-width: 520px; margin: 0 auto; background-color: var(--card-surface); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(26,26,26,0.28); transform: translateY(100%); transition: transform .34s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; will-change: transform; }
.bwt-sheet-head { padding: 8px 16px 6px; cursor: grab; touch-action: none; flex-shrink: 0; }
.bwt-sheet-head:active { cursor: grabbing; }
.bwt-grip { width: 44px; height: 5px; border-radius: 9999px; background-color: var(--card-border); margin: 4px auto 8px; }
.bwt-head-row { display: flex; align-items: center; justify-content: space-between; }
.bwt-sheet-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-rich-black); }
.bwt-sheet-x { background: none; border: none; cursor: pointer; color: var(--color-carpet-gray); }
.bwt-sheet-x svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }
.bwt-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 16px 24px; }
@media (prefers-reduced-motion: reduce) { .bwt-sheet, .bwt-scrim { transition: none; } }

/* ============================================================
   ACCORDION · shared collapsible-section primitive
   Extracted verbatim from feed/index.html (was inline <style>).
   Pages COMPOSE it (feed dashboard, hamburger drawer); never redefine.
   Wiring + persistence live in js/bwt-accordion.js.
   ============================================================ */
.feed-section { background-color: var(--card-surface); border: 1.5px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow-soft); overflow: hidden; }
.feed-section-header { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; user-select: none; }
.feed-section-check { width: 28px; height: 28px; border-radius: 9999px; background-color: var(--color-honey-oak); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feed-section-check svg { width: 16px; height: 16px; stroke: var(--color-vintage-cream); stroke-width: 2.4; fill: none; }
.feed-section-titles { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.feed-section-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.12rem; color: var(--color-forest-green); margin: 0; line-height: 1.2; }
.feed-section-sub { font-size: 0.88rem; color: var(--color-carpet-gray); margin: 0; line-height: 1.4; }
.feed-toggle { width: 34px; height: 34px; border-radius: 9999px; border: 1px solid var(--card-border); background-color: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.feed-toggle svg { width: 18px; height: 18px; stroke: var(--color-honey-oak); stroke-width: 2.4; fill: none; }
.feed-section-body { padding: 0 20px 20px; }
.feed-section.collapsed .feed-section-body { display: none; }

/* ============================================================
   bwt-drawer · mobile left slide-out navigation drawer
   Mirrors the bwt-sheet house pattern (scrim + off-canvas panel).
   Mobile-only (<=767); desktop/tablet keep the rail collapse.
   Surface = forest green (blends into the mobile bars, per lock).
   Wiring lives in js/bwt-drawer.js.
   ============================================================ */
.bwt-drawer-scrim { position: fixed; inset: 0; z-index: 1200; background-color: var(--color-rich-black); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.bwt-drawer-scrim.open { opacity: 0.5; pointer-events: auto; }
.bwt-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1201; width: min(84vw, 320px); background-color: var(--color-forest-green); transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; overflow-y: auto; padding-top: 68px; will-change: transform; }
.bwt-drawer.open { transform: translateX(0); }
body.bwt-drawer-open .mobile-topbar { z-index: 1202; }
body.bwt-drawer-open .top-ticker { z-index: 1202; }
body.bwt-ticker-on .bwt-drawer { padding-top: 102px; }
.bwt-drawer-row { display: block; padding: 14px 20px; color: var(--color-vintage-cream); font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
@media (min-width: 768px) { .bwt-drawer, .bwt-drawer-scrim { display: none; } }
@media (prefers-reduced-motion: reduce) { .bwt-drawer, .bwt-drawer-scrim { transition: none; } }

/* ============================================================
   bwt-drawer · B2b contents on the forest-green field.
   COMPOSES existing feed-section + card/ad primitives; overrides
   COLOR only for the green surface. 1px honey-oak BETWEEN sections
   (not under each header). Cream default text, honey-oak = active only.
   ============================================================ */
.bwt-drawer-feature { padding: 12px 16px 6px; }
.bwt-drawer-feature .ad-label { color: var(--color-honey-oak); }
.bwt-drawer-feature a { text-decoration: none; color: inherit; }
.bwt-drawer-help { padding: 8px 20px 12px; color: var(--color-vintage-cream); opacity: 0.72; font-size: 0.8rem; line-height: 1.45; }
.bwt-nav-surface .feed-section { background-color: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; }
.bwt-nav-surface .feed-section + .feed-section { border-top: 1px solid var(--color-honey-oak); }
.bwt-nav-surface .feed-section-header { padding: 14px 20px; }
.bwt-nav-surface .feed-section-title { color: var(--color-vintage-cream); text-transform: uppercase; letter-spacing: 0.04em; }
.bwt-nav-surface .feed-section.active-section .feed-section-title { color: var(--color-honey-oak); }
.bwt-nav-surface .feed-section-body { padding: 0 20px 12px; }
.bwt-nav-surface .feed-toggle { border-color: var(--color-carpet-gray); width: 28px; height: 28px; }
.bwt-drawer-link { display: block; padding: 9px 0; color: var(--color-vintage-cream); font-family: var(--font-body); font-weight: 400; font-size: 0.9rem; text-decoration: none; }
.bwt-drawer-link:hover { color: var(--color-honey-oak); }
.bwt-drawer-link.active { color: var(--color-honey-oak); }

/* ============================================================
   TOP TICKER · home-only space reservation + mobile pull-up lever
   rail.js adds body.bwt-ticker-on ONLY when it builds the ticker (home).
   No ticker -> no class -> no reserved space on any page.
   Lever (mobile top bar, home only) toggles body.bwt-ticker-collapsed.
   Collapse applies on mobile only; desktop home always shows the ticker.
   ============================================================ */
body.bwt-ticker-on .mobile-topbar { top: 34px; }
.m-ticker-lever { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 64px; height: 16px; padding: 0; border: none; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.m-ticker-lever .bwt-grip { display: block; margin: 0; }
@media (max-width: 767px) {
  body.bwt-ticker-on.bwt-ticker-collapsed { padding-top: 0; }
  body.bwt-ticker-on.bwt-ticker-collapsed .top-ticker { display: none; }
  body.bwt-ticker-on.bwt-ticker-collapsed .mobile-topbar { top: 0; }
  body.bwt-ticker-on.bwt-ticker-collapsed .bwt-drawer { padding-top: 68px; }
}

/* ============================================================
   bwt-notify · sovereign toast + confirm (Component #2)
   Driven by shared/components/bwt-notify.js. Success toast /
   error toast / yes-no confirm. All tokenized; no #000/#FFF.
   Toast top-anchored + safe-area aware -> clears the fixed bottom
   nav by construction. z above every app modal (authModal 1800).
   Shadow/scrim rgba mirrors the .mini-menu / .bwt-sheet family.
   ============================================================ */
#bwt-toast-region {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 0; right: 0;
  z-index: 2000;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 0 16px;
  pointer-events: none;
}
.bwt-toast {
  display: flex; align-items: center; gap: 10px;
  max-width: 420px; width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(26,26,26,0.28);
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.9rem; line-height: 1.35;
  pointer-events: auto;
  animation: bwt-toast-in .28s cubic-bezier(0.4,0,0.2,1);
}
.bwt-toast.leaving { animation: bwt-toast-out .24s ease forwards; }
.bwt-toast .bwt-toast-ic { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 2.4; fill: none; }
.bwt-toast-msg { flex: 1; }
.bwt-toast.success { background: var(--color-forest-green); color: var(--color-vintage-cream); }
.bwt-toast.success .bwt-toast-ic { stroke: var(--color-honey-oak); }
.bwt-toast.error { background: var(--color-forest-green); color: var(--color-vintage-cream); }
.bwt-toast.error .bwt-toast-ic { stroke: var(--color-honey-oak); }
.bwt-toast.cream { background: var(--card-surface); color: var(--color-rich-black); border: 1px solid var(--card-border); }
.bwt-toast.success.cream .bwt-toast-ic { stroke: var(--color-forest-green); }
.bwt-toast.error.cream .bwt-toast-ic { stroke: var(--color-honey-oak); }
@keyframes bwt-toast-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bwt-toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-14px); } }
.bwt-confirm-scrim {
  position: fixed; inset: 0; z-index: 1900;
  background-color: rgba(26,26,26,0.55);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.bwt-confirm-scrim.open { display: flex; }
.bwt-confirm-card {
  background: var(--card-surface);
  border: 1.5px solid var(--card-border);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(26,26,26,0.45);
  padding: 24px; max-width: 400px; width: 100%;
  display: flex; flex-direction: column; gap: 8px;
}
.bwt-confirm-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--color-forest-green); display: flex; align-items: center; gap: 8px; }
.bwt-confirm-ic { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--color-honey-oak); stroke-width: 2.4; fill: none; }
.bwt-confirm-msg { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5; color: var(--color-rich-black); }
.bwt-confirm-actions { display: flex; gap: 8px; margin-top: 14px; }
.bwt-confirm-btn {
  flex: 1; border-radius: 9999px; padding: 12px;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.bwt-confirm-btn.confirm { background: var(--color-quantum-purple); color: var(--color-vintage-cream); border: none; }
.bwt-confirm-btn.confirm.destructive { background: var(--color-honey-oak); color: var(--color-forest-green); }
.bwt-confirm-btn.cancel { background: transparent; color: var(--color-carpet-gray); border: 1px solid var(--card-border); }
@media (prefers-reduced-motion: reduce) { .bwt-toast, .bwt-toast.leaving { animation: none; } }

/* ============================================================
   BUTTON SYSTEM v2 (.btn) — ported verbatim from
   bwt-button-system-palette-v2.html (signed off). Namespaced;
   does not touch .cta-btn / .seg. Sizes 4px-stepped, .btn-sm default.
   ============================================================ */
.btn {
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: 9999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  line-height: 1;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  transition: background .2s var(--ease-house), color .2s var(--ease-house),
              border-color .2s var(--ease-house), box-shadow .2s var(--ease-house),
              transform .06s var(--ease-house);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--btn-focus-ring); }
.btn .icon { width: 0.95rem; height: 0.95rem; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; flex-shrink: 0; }
.btn-xs { min-height: var(--btn-h-xs); padding: var(--btn-pad-xs); font-size: var(--btn-fs-xs); gap: 0.3125rem; }
.btn-sm { min-height: var(--btn-h-sm); padding: var(--btn-pad-sm); font-size: var(--btn-fs-sm); }
.btn-md { min-height: var(--btn-h-md); padding: var(--btn-pad-md); font-size: var(--btn-fs-md); }
.btn-lg { min-height: var(--btn-h-lg); padding: var(--btn-pad-lg); font-size: var(--btn-fs-lg); }
.btn-xs .icon { width: 0.8125rem; height: 0.8125rem; }
.btn-sm .icon { width: 0.875rem; height: 0.875rem; }
.btn-block { display: flex; width: 100%; }
.btn-caps { text-transform: uppercase; letter-spacing: 0.08em; }
.btn-primary { background: var(--color-quantum-purple); color: var(--color-vintage-cream); box-shadow: var(--btn-shadow-purple); }
.btn-primary:hover { background: var(--btn-primary-hover); }
.btn-secondary { background: var(--card-surface); color: var(--color-forest-green); border-color: var(--card-border); box-shadow: var(--shadow-soft); }
.btn-secondary:hover { background: var(--color-canvas); }
.btn-tertiary { background: var(--color-quantum-tint); color: var(--color-quantum-purple); border-color: var(--color-quantum-purple); }
.btn-tertiary:hover { background: rgba(138,43,226,0.12); }
.btn-ghost { background: transparent; color: var(--color-quantum-purple); }
.btn-ghost:hover { background: var(--color-quantum-tint); }
.btn-destructive { background: var(--color-honey-oak); color: var(--color-forest-green); box-shadow: var(--btn-shadow-oak); }
.btn-destructive:hover { background: var(--btn-destructive-hover); }
.btn-ondark.btn-secondary { background: transparent; color: var(--color-vintage-cream); border-color: rgba(253,251,247,0.28); box-shadow: none; }
.btn-ondark.btn-secondary:hover { background: rgba(253,251,247,0.08); }
.btn-ondark.btn-ghost { color: var(--color-vintage-cream); }
.btn-ondark.btn-ghost:hover { background: rgba(253,251,247,0.1); }
.btn:disabled, .btn.is-disabled { background: var(--color-canvas); color: var(--color-carpet-gray); border-color: var(--card-border); box-shadow: none; cursor: not-allowed; }
.btn-ghost:disabled, .btn-ghost.is-disabled { background: transparent; border-color: transparent; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn-label, .btn.is-loading .icon { visibility: hidden; }
.btn.is-loading::after { content: ""; position: absolute; width: 1.05em; height: 1.05em; border-radius: 9999px; border: 2.5px solid currentColor; border-top-color: transparent; animation: bwtspin 0.7s linear infinite; }
@keyframes bwtspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation-duration: 1.6s; } }

/* ============================================================
   StickyActionBar · flow commit bar (Primitive #1).
   Slots: [secondary/back] + [primary, grows]. Replaces the
   rail.js mobile tabbar during a focused flow (body.bwt-flow).
   Desktop: static at panel end. Top bar + hamburger stay (escape hatch).
   ============================================================ */
.bwt-actionbar { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 16px; padding: 12px 0 2px; }
.bwt-actionbar .btn { min-height: 44px; }
.bwt-actionbar .bwt-actionbar-primary { flex: 1; }

/* Replace-nav: hide the injected bottom tabbar only inside the flow.
   Higher specificity than .mobile-tabbar{display:flex} at 925, so it
   wins in and out of the media query. */
body.bwt-flow .mobile-tabbar { display: none; }

@media (max-width: 767px) {
  body.bwt-flow .bwt-actionbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 100; margin-top: 0;
    padding: 10px 14px;
    background-color: var(--card-surface);
    border-top: 1px solid var(--card-border);
  }
}

/* ============================================================
   FIELD SYSTEM — ported from bwt-density-fields-modal-palette-v1
   (signed off). All rem, scales with density. Single-line fields
   are pills; textarea is the one documented non-pill field.
   Error state: NO red, NO honey-oak stroke — honey-oak warn glyph
   + firm rich-black message + firmer neutral border only.
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); max-width: 26rem; }
.field-label { font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; color: var(--color-rich-black); display: flex; align-items: center; gap: var(--space-2); }
.field-req { color: var(--color-quantum-purple); font-size: 0.9em; }
.field-help { font-size: 0.76rem; color: var(--color-carpet-gray); }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--field-fs); color: var(--color-rich-black);
  background: var(--color-canvas); border: 1.5px solid var(--card-border);
  padding: 0 var(--field-pad-x); transition: border-color .18s var(--ease-house), box-shadow .18s var(--ease-house);
}
.input, .select { height: var(--field-h); border-radius: var(--radius-pill); }
.textarea { min-height: 5rem; padding: 0.625rem var(--field-pad-x); border-radius: var(--radius-area); resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--color-carpet-gray); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-quantum-purple); box-shadow: var(--focus-ring); }
.input:disabled, .textarea:disabled, .select:disabled { color: var(--color-carpet-gray); cursor: not-allowed; opacity: 1; background: rgba(132,127,125,0.08); }
.select-wrap { position: relative; }
.select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer; }
.select-wrap .chev { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; stroke: var(--color-forest-green); stroke-width: 2; fill: none; pointer-events: none; }
.field.is-error .input, .field.is-error .select, .field.is-error .textarea { border-color: rgba(26,26,26,0.28); }
.field.is-error .input:focus, .field.is-error .textarea:focus { box-shadow: 0 0 0 3px rgba(26,26,26,0.08); }
.field-error { display: flex; align-items: center; gap: var(--space-2); font-size: 0.76rem; color: var(--color-rich-black); font-weight: 600; }
.field-error .icon { width: 0.95rem; height: 0.95rem; stroke: var(--color-honey-oak); stroke-width: 2.2; fill: none; flex-shrink: 0; }
.check-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); cursor: pointer; font-size: 0.86rem; }
.check-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box { width: 1.15rem; height: 1.15rem; border-radius: var(--radius-box); border: 1.5px solid var(--card-border); background: var(--color-canvas); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, border-color .15s; }
.check-box .icon { width: 0.8rem; height: 0.8rem; stroke: var(--color-vintage-cream); stroke-width: 3; fill: none; opacity: 0; }
.check-row input:checked + .check-box { background: var(--color-quantum-purple); border-color: var(--color-quantum-purple); }
.check-row input:checked + .check-box .icon { opacity: 1; }
.check-row input:focus-visible + .check-box { box-shadow: var(--focus-ring); }
.radio-box { border-radius: 9999px; }
.radio-box .dot { width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: var(--color-vintage-cream); opacity: 0; transition: opacity .15s; }
.check-row input:checked + .radio-box { background: var(--color-quantum-purple); border-color: var(--color-quantum-purple); }
.check-row input:checked + .radio-box .dot { opacity: 1; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: 26rem; margin-bottom: var(--space-3); font-size: 0.86rem; }
.toggle { position: relative; width: 2.75rem; height: 1.5rem; border-radius: 9999px; background: var(--color-canvas); border: 1.5px solid var(--card-border); cursor: pointer; flex-shrink: 0; transition: background .18s var(--ease-house), border-color .18s; }
.toggle .knob { position: absolute; top: 50%; left: 0.1875rem; transform: translateY(-50%); width: 1.05rem; height: 1.05rem; border-radius: 9999px; background: var(--card-surface); box-shadow: var(--shadow-soft); transition: left .18s var(--ease-house); }
.toggle[aria-checked="true"] { background: var(--color-quantum-purple); border-color: var(--color-quantum-purple); }
.toggle[aria-checked="true"] .knob { left: calc(100% - 1.05rem - 0.1875rem); }
/* ============================================================
   MODAL / DIALOG — canonical, from bwt-density-fields-modal-palette-v1 (signed off).
   Retires the ad-hoc inline modal styles. Cream card on a dimmed scrim.
   ============================================================ */
.scrim { position: fixed; inset: 0; background: rgba(26,26,26,0.45); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 1500; }
.scrim.open { display: flex; }
.modal { background: var(--card-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); width: 100%; max-width: 26rem; padding: var(--space-6); }
.modal.confirm { max-width: 22rem; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.modal-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--color-forest-green); display: flex; align-items: center; gap: var(--space-2); }
.modal-title .warn { width: 1.15rem; height: 1.15rem; stroke: var(--color-honey-oak); stroke-width: 2.2; fill: none; }
.modal-x { background: transparent; border: none; cursor: pointer; padding: 4px; color: var(--color-carpet-gray); display: inline-flex; }
.modal-x .icon { width: 1.1rem; height: 1.1rem; stroke: currentColor; stroke-width: 2; fill: none; }
.modal-body { font-size: 0.9rem; color: var(--color-rich-black); margin-bottom: var(--space-5); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--space-3); }