/* ==================================================
   home.css — Section switch, sound cards, home view, search results
   Split from index.html lines 2086–3306 on 2026-04-23
   ================================================== */

  /* ============================================================
   * VISION LOOKY TYPOGRAPHY SYSTEM
   * ----------------------------------------------------------
   *   --font-display : Bangers — comic titles, logos, hero names,
   *                    button CTAs, badge text. Impact fallback.
   *   --font-body    : Inter — body text, posts, descriptions,
   *                    small labels. System fallback.
   *
   * Letter-spacing nudge on Bangers because it's a tight all-caps
   * face; loosening 0.02em improves readability at every size.
   * ============================================================ */
  :root {
    --font-display: 'Bangers', 'Impact', 'Oswald', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    /* Comic letter-spacing token — minimum 2px between Bangers letters
     * because the face is tight all-caps. Tunable via the Style Lab at
     * docs/design-system/comic-style-lab.html. */
    --comic-letter-spacing: 2px;
  }
  body {
    font-family: var(--font-body);
  }
  /* Anywhere we want comic-title energy */
  .mc-name,
  .sb-title,
  .sb-mega,
  .hero-title,
  .home-headline,
  .home-headline-accent,
  .games-title,
  .members-title,
  .sitcom-hero-title,
  .header-logo,
  .brand-mark,
  .topbar .brand-mark {
    font-family: var(--font-display) !important;
    letter-spacing: var(--comic-letter-spacing);
    font-weight: 400;            /* Bangers is one weight */
  }

  /* ============================================================
   * TEXT SHADOWS — paired to text color
   * ----------------------------------------------------------
   *   White text → soft gray-black drop shadow (legibility on the
   *                blurred comic page background, no harsh outline)
   *   Black text → light yellow glow (warm pop, comic-pop accent
   *                on cream/white card surfaces)
   * Banner content stays z:3 so nothing covers it.
   * ============================================================ */

  /* Tier A — WHITE text — HARD BLACK comic-book shadow (4-corner outline
   * + offset drop). This is the canonical comic-pop look the brand wants.
   * .home-headline + .home-headline-accent intentionally NOT here — they
   * use plain black text on the home hero (per user request). */
  .sb-title,
  .sb-mega,
  .hero-title,
  .games-title,
  .members-title,
  .sitcom-hero-title,
  .header-logo,
  .brand-mark,
  .topbar .brand-mark {
    position: relative;
    z-index: 3;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow:
      -2px -2px 0 #000,
       2px -2px 0 #000,
      -2px  2px 0 #000,
       2px  2px 0 #000,
       3px  3px 0 #000,
       4px  4px 0 #000,
       0 0 1px #000;
  }
  /* Section-banner subtitle — white textbox chip with black border + black
   * text. Sits below the yellow title chip to form a stacked comic header.
   * Higher-specificity selector + !important so it beats legacy rules:
   *   - .section-banner .sb-sub { color: var(--banner-text, ...) }
   *   - .section-banner .sb-sub { color: #475569 }
   *   - opacity: 0.78 */
  .section-banner .sb-sub,
  .sb-sub {
    display: inline-block;
    position: relative;
    z-index: 3;
    background: #FFFFFF !important;
    color: #111111 !important;
    border: 3px solid #111111;
    border-radius: 10px;
    padding: 4px 12px 5px !important;
    box-shadow: 3px 3px 0 #111111;
    opacity: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-shadow: none !important;
  }
  .sb-tagline,
  .sb-eyebrow,
  .hero-eyebrow,
  .hero-sub,
  .home-headline-sub {
    position: relative;
    z-index: 3;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow:
      -1.5px -1.5px 0 #000,
       1.5px -1.5px 0 #000,
      -1.5px  1.5px 0 #000,
       1.5px  1.5px 0 #000,
       2px  2px 0 #000;
  }
  .sb-icon {
    position: relative;
    z-index: 3;
    box-shadow:
      0 0 0 2px #000,
      4px 4px 0 #000;
  }
  /* Top-dock buttons — flat icons + flat text. The dock is brand chrome,
   * not a comic surface. NO text-shadow / NO box-shadow on these buttons. */
  nav.top-dock .header-account,
  nav.top-dock .header-cart,
  nav.top-dock .geo-pill,
  nav.top-dock .header-music,
  nav.top-dock .header-phone,
  nav.top-dock .header-phone-preview,
  nav.top-dock .wallet-btn {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  nav.top-dock .header-account *,
  nav.top-dock .header-cart *,
  nav.top-dock .geo-pill *,
  nav.top-dock .header-music *,
  nav.top-dock .header-phone *,
  nav.top-dock .header-phone-preview *,
  nav.top-dock .wallet-btn * {
    text-shadow: none !important;
  }

  /* Tier B — BLACK text on cream/white card surfaces — light yellow glow */
  .mc-name,
  .mc-frame .mc-strip,
  .mc-flavor,
  .mc-handle,
  .mc-cardnum {
    text-shadow:
      0 1px 2px rgba(255, 232, 102, 0.55),
      0 0 8px rgba(255, 232, 102, 0.35);
  }
  /* Hero / collectible-style titles when they sit on cream cards */
  .mc-name {
    text-shadow:
      0 1px 2px rgba(255, 226, 90, 0.7),
      0 2px 6px rgba(255, 226, 90, 0.45),
      0 0 12px rgba(255, 235, 120, 0.35);
  }
  /* ============================================================
   * .comic-textbox — reusable yellow caption-box for black text.
   * Apply to any label/heading that needs to pop with a comic
   * caption-box look. Works inline (inline-block) so it sits
   * snug around its text. Pair with Bangers font for max comic.
   * ============================================================ */
  .comic-textbox {
    display: inline-block;
    background: #FFD21E;
    color: #111111 !important;
    border: 3px solid #111111;
    border-radius: 10px;
    padding: 6px 14px 7px;
    box-shadow: 4px 4px 0 #111111;
    font-weight: 700 !important;
    letter-spacing: 1.5px;
    text-shadow: none !important;
    line-height: 1.1;
  }
  .comic-textbox--lg {
    font-size: 1.4em;
    padding: 10px 18px 12px;
    border-radius: 14px;
    box-shadow: 5px 5px 0 #111111;
    letter-spacing: 2px;
  }
  .comic-textbox--block {
    display: block;
    width: max-content;
    max-width: 100%;
  }
  /* Buttons / CTAs — comic call-out energy */
  .btn,
  .header-search-btn,
  .ms-reset-btn,
  .reading-btn,
  .reading-share,
  .fp-follow,
  .mfc-chip {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
  }

  /* ---------- Category bar (row 2 — section dock, scrolls with page) ---------- */
  .category-bar {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 10px 28px;
  }
  @media (min-width: 1440px) {
    .category-bar { padding: 10px max(28px, calc((100vw - 1400px) / 2)); }
  }
  .category-bar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .cat-all {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f5f6f8;
    border: none;
    border-radius: 999px;
    padding: 10px 22px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: #111;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
  }
  .cat-all:hover { background: #e9eaee; }
  .cat-all-icon { font-size: 15px; line-height: 1; }

  /* ---------- Section switch: fixed 7-column grid = clean 2-row formation ----------
     13 tabs laid out in 7 cols × 2 rows (last cell of row 2 is empty). No more
     ragged 3-row wraps. Cell widths are uniform so labels align by column. */
  .section-switch {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px 8px;
    padding: 0;
    background: transparent;
    border: none;
    align-items: stretch;
    justify-items: center;
    max-width: 900px;
    margin: 0 auto;
  }
  @media (max-width: 900px) {
    /* Tablet: 4 cols × 4 rows (last 3 cells empty) */
    .section-switch { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 520px; }
  }
  @media (max-width: 560px) {
    /* Phone: 3 cols */
    .section-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  }
  .sect-btn {
    position: relative;
    padding: 6px 4px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #1a1a1a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.01em;
    transition: color 0.15s, border-color 0.15s;
    box-shadow: none;
    width: 100%;
    height: auto;
  }
  .sect-btn .sect-icon {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    filter: none;
  }
  .sect-btn .sect-label {
    position: static;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    letter-spacing: inherit;
    padding: 0;
    border-radius: 0;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    transform: none;
    white-space: nowrap;
  }
  /* Per-section accent — each tab gets its own color for hover + active states */
  .sect-btn[data-app="home"]       { --accent: #ff7b3a; }  /* warm orange */
  .sect-btn[data-app="news"]       { --accent: #ef4444; }  /* red */
  .sect-btn[data-app="art"]        { --accent: #b83ff2; }  /* magenta */
  .sect-btn[data-app="sounds"]     { --accent: #8a2be2; }  /* violet */
  .sect-btn[data-app="radio"]      { --accent: #f59e0b; }  /* amber */
  .sect-btn[data-app="threed"]     { --accent: #16a34a; }  /* green */
  .sect-btn[data-app="apps"]       { --accent: #0ea5e9; }  /* sky blue */
  .sect-btn[data-app="agents"]     { --accent: #7c3aed; }  /* purple */
  .sect-btn[data-app="games"]      { --accent: #2563eb; }  /* blue */
  .sect-btn[data-app="maps"]       { --accent: #0f8a4a; }  /* emerald */
  .sect-btn[data-app="recipes"]    { --accent: #e11d48; }  /* rose */
  .sect-btn[data-app="search"]     { --accent: #334155; }  /* slate */
  .sect-btn[data-app="classified"] { --accent: #ca8a04; }  /* ochre */

  .sect-btn:hover {
    color: var(--accent, #111);
    border-bottom-color: color-mix(in srgb, var(--accent, #ef4444) 40%, transparent);
    background: color-mix(in srgb, var(--accent, #000) 6%, transparent);
    transform: none;
    filter: none;
    box-shadow: none;
  }
  .sect-btn:hover .sect-icon { transform: none; }
  .sect-btn:hover .sect-label { opacity: 1; transform: none; }
  .sect-btn.active {
    color: var(--accent, #000);
    font-weight: 600;
    border-bottom-color: var(--accent, #ef4444);
    background: transparent;
    box-shadow: none;
  }
  .sect-btn.active .sect-icon { transform: scale(1.08); }

  /* ---------- Sound card (audio listings) ---------- */
  .sound-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: var(--neon-halo);
  }
  .sound-card:hover {
    border-color: var(--border-glow);
    transform: translateY(-2px);
    box-shadow: var(--neon-halo-strong), 0 16px 32px -20px rgba(83, 58, 254, 0.35);
  }
  .sound-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .sound-title {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
  }
  .sound-price {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .sound-meta {
    display: flex;
    gap: 12px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .sound-meta b {
    color: var(--text-dim);
    font-weight: 400;
  }

  .sound-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
  }
  .sound-play {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    border: none;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .sound-play:hover { background: var(--blue-hover); box-shadow: 0 0 16px var(--blue-glow); }
  .sound-play.playing { background: var(--cyan); color: #0a0b0f; }

  .waveform {
    flex: 1;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
  }
  .wf-bar {
    flex: 1;
    min-width: 2px;
    background: var(--border-glow);
    transition: background 0.05s;
    border-radius: 1px;
  }
  .wf-bar.played { background: var(--cyan); }

  .sound-time {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.03em;
    flex-shrink: 0;
    min-width: 38px;
    text-align: right;
  }

  .sound-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-family: var(--mono);
  }
  .sound-tag {
    font-size: 10px;
    color: var(--cyan);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .sound-price-value {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 500;
    color: var(--cyan);
  }
  .sound-preview-note {
    font-size: 9px;
    color: var(--text-faint);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  @media (max-width: 900px) {
    .section-switch { gap: 8px; }
    .section-switch .sect-btn { width: 38px; height: 38px; border-radius: 10px; }
    .section-switch .sect-btn .sect-icon { font-size: 20px; }
  }

  /* ---------- Home view (landing + search) ---------- */
  .home-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 32px 120px;
  }
  .home-hero {
    text-align: center;
    padding: 48px 0 64px;
  }
  .home-sub {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--text-dim);
    max-width: 520px;
    margin: 0 auto 36px;
    line-height: 1.6;
  }
  .home-search {
    max-width: 620px;
    margin: 0 auto 24px;
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    border-radius: 999px;
    overflow: hidden;
    transition: all 0.2s;
  }
  .home-search:focus-within {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(255, 252, 3, 0.12);
  }
  .home-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--mono);
    font-size: 15px;
    padding: 18px 26px;
    letter-spacing: 0.01em;
  }
  .home-search-input:focus { outline: none; }
  .home-search-input::placeholder { color: var(--text-faint); }
  .home-search-btn {
    background: var(--blue);
    color: #fff;
    border: none;
    padding: 0 30px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
  }
  .home-search-btn:hover { background: var(--blue-hover); }

  .home-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 64px 0;
  }
  .home-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .home-tile:hover {
    border-color: var(--cyan-dim);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -16px rgba(255, 252, 3, 0.25);
  }
  .home-tile-icon {
    font-size: 28px;
    margin-bottom: 6px;
  }
  .home-tile-name {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--text);
  }
  .home-tile-count {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    text-transform: uppercase;
  }

  .home-row { margin: 48px 0; }
  .home-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
  }
  .home-row-head h3 {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .home-row-head a {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cyan);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .home-row-head a:hover { color: var(--text); }

  .home-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }
  .home-strip-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .home-strip-item:hover { border-color: var(--cyan-dim); transform: translateY(-2px); }
  .home-strip-section {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    color: var(--text-faint);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .home-strip-title {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 6px;
  }
  .home-strip-price {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--cyan);
    font-weight: 500;
  }

  .home-news-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
  }
  .home-news-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .home-news-item:hover { border-color: var(--cyan-dim); transform: translateY(-2px); }
  .home-news-tag {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--cyan);
    text-transform: uppercase;
  }
  .home-news-title {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.3;
    color: var(--text);
  }
  .home-news-excerpt {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .home-news-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.05em;
    margin-top: auto;
  }

  /* LookyChat home-embed styles archived 2026-04-28 → _archived/lookychat-home/ */

  .home-facts {
    margin: 64px 0 24px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 2px solid var(--cyan);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .home-fact {
    display: flex;
    gap: 12px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
  }
  .home-fact-dot { color: var(--cyan); flex-shrink: 0; }

  /* ---------- Search Results (Kosmix-style aggregator) ---------- */
  /* Outer "page" backdrop — a softer translucent panel behind the
   * header + result blocks so they all sit on a unified surface
   * instead of floating directly over the plaza. The inner cards
   * (.sr-header / .sr-block) stay more opaque so they pop on top. */
  .sr-wrap {
    max-width: 1300px;
    margin: 24px auto;
    padding: 32px 28px 120px;
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 24px;
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.25);
  }

  .sr-header {
    /* Match the .sr-block frosted-glass container so the breadcrumb,
     * "BELOVED"-style query heading, and search form sit on a unified
     * panel rather than floating over the plaza. */
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.18);
  }
  .sr-breadcrumb {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-faint);
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    text-transform: uppercase;
  }
  .sr-breadcrumb a { color: var(--cyan); text-decoration: none; }
  .sr-breadcrumb a:hover { text-decoration: underline; }
  .sr-query-heading {
    font-family: var(--serif);
    font-size: clamp(32px, 4.2vw, 52px);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    line-height: 1.1;
  }
  .sr-search { display: flex; max-width: 600px; gap: 8px; }
  .sr-search-input {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    color: var(--text);
    padding: 10px 16px;
    font-family: var(--mono);
    font-size: 13px;
    border-radius: 999px;
  }
  .sr-search-input:focus { outline: none; border-color: var(--cyan); }
  .sr-search-btn {
    background: var(--blue);
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 999px;
    cursor: pointer;
  }
  .sr-search-btn:hover { background: var(--blue-hover); }

  .sr-grid {
    display: grid;
    grid-template-columns: 180px 1fr 300px;
    gap: 24px;
    align-items: start;
  }

  .sr-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 100px;
    /* Frosted container so the section nav (AI, Main, Lookymart, News &
     * Blogs, Video, X / Twitter, Discussions) reads as a panel rather
     * than loose text floating over the plaza. */
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 14px 10px;
    box-shadow: 0 14px 36px -18px rgba(0, 0, 0, 0.25);
  }
  .sr-sidebar .sr-nav { border-radius: 8px; }
  .sr-nav {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
    padding: 10px 14px;
    border-left: 2px solid transparent;
    text-decoration: none;
    transition: all 0.15s;
    letter-spacing: 0.02em;
  }
  .sr-nav:hover { color: var(--text); background: var(--bg-card); }
  .sr-nav.active {
    color: var(--cyan);
    border-left-color: var(--cyan);
    background: rgba(255, 252, 3, 0.05);
  }

  .sr-main { display: flex; flex-direction: column; gap: 28px; }

  .sr-block {
    /* Moderately translucent container so the plaza shows through but
     * search results stay legible and organized. Frosted glass + soft
     * white wash + subtle border. */
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    padding: 20px;
    scroll-margin-top: 90px;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.18);
  }
  .sr-block-title {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cyan);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
  }
  .sr-empty {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-faint);
    text-align: center;
    padding: 16px;
  }

  /* Wikipedia pane */
  .sr-wiki-slot .sr-wiki {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    align-items: start;
  }
  .sr-wiki-img {
    width: 180px;
    max-height: 220px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
  }
  .sr-wiki-body h4 {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 8px;
    color: var(--text);
  }
  .sr-wiki-body p {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
    margin: 0 0 12px;
  }
  .sr-wiki-body a {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cyan);
    letter-spacing: 0.05em;
    text-decoration: none;
    border-bottom: 1px solid var(--cyan-dim);
  }
  .sr-wiki-body a:hover { color: var(--text); border-color: var(--text); }
  @media (max-width: 600px) { .sr-wiki-slot .sr-wiki { grid-template-columns: 1fr; } .sr-wiki-img { width: 100%; } }

  /* Knowledge panel — definitions, related words, types, alternates */
  .sr-know-section { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
  .sr-know-heading {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 10px;
  }
  .sr-def-list { display: flex; flex-direction: column; gap: 10px; }
  .sr-def {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
  }
  .sr-def-pos {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(20,73,252,0.08);
    padding: 3px 7px;
    border-radius: 3px;
    white-space: nowrap;
    align-self: start;
  }
  .sr-def-body {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
  }
  .sr-def-ex {
    display: block;
    font-style: italic;
    color: var(--text-dim);
    margin-top: 3px;
    font-size: 11px;
  }
  .sr-def-from {
    font-size: 9px;
    color: var(--text-faint, var(--text-dim));
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-left: 6px;
    opacity: 0.7;
  }
  .sr-def-audio {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 10px;
    padding: 2px 6px;
    margin-left: 6px;
    cursor: pointer;
    border-radius: 3px;
  }
  .sr-def-audio:hover { color: var(--text); border-color: var(--cyan); }

  .sr-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .sr-chip {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 4px 9px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .sr-chip:hover { border-color: #ff4a8a; color: #ff4a8a; }
  .sr-chip.is-type {
    color: var(--cyan);
    border-color: var(--cyan-dim, rgba(56,232,255,0.35));
    cursor: default;
  }
  .sr-chip.is-type:hover { color: var(--cyan); border-color: var(--cyan-dim, rgba(56,232,255,0.35)); }

  .sr-alt-list { display: flex; flex-direction: column; gap: 8px; }
  .sr-alt {
    display: block;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
  }
  .sr-alt:hover { border-color: #ff4a8a; }
  .sr-alt-title {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--text);
    margin: 0 0 3px;
  }
  .sr-alt-extract {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.4;
    margin: 0;
  }
  .sr-alt-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    margin-left: 6px;
    opacity: 0.7;
  }

  /* Lookymart marketplace matches */
  .sr-market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
  .sr-market-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-glow);
    padding: 10px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .sr-market-item:hover { border-color: var(--cyan-dim); transform: translateY(-2px); }
  .sr-market-thumb {
    aspect-ratio: 1;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
    font-size: 28px;
  }
  .sr-market-thumb img, .sr-market-thumb svg { width: 80%; height: 80%; object-fit: contain; }
  .sr-market-title {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sr-market-price {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--cyan);
    margin-top: 4px;
  }

  /* News list */
  .sr-news-list { display: flex; flex-direction: column; gap: 12px; }
  .sr-news-entry {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
    cursor: pointer;
    transition: background 0.15s;
  }
  .sr-news-entry:last-child { border-bottom: none; }
  .sr-news-entry:hover { background: rgba(255, 252, 3, 0.03); }
  .sr-news-entry .sr-news-tag {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--cyan);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    min-width: 90px;
    padding-top: 2px;
  }
  .sr-news-entry h4 {
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 4px;
    color: var(--text);
  }
  .sr-news-entry p {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    margin: 0;
    line-height: 1.45;
  }

  /* Safety panel — crisis / block / filter states from content-filter.js */
  .sr-safety-slot {
    padding: 18px 20px;
    border-radius: 8px;
    border: 1px solid var(--border-glow);
  }
  .sr-safety--block {
    background: rgba(200, 50, 50, 0.08);
    border-color: rgba(200, 50, 50, 0.35);
  }
  .sr-safety--crisis {
    background: linear-gradient(135deg, rgba(56,232,255,0.08), rgba(20,73,252,0.08));
    border-color: rgba(56,232,255,0.45);
  }
  .sr-safety--filter {
    background: rgba(255, 252, 3, 0.05);
    border-color: rgba(255, 252, 3, 0.25);
    padding: 10px 14px;
  }
  .sr-safety-title {
    font-family: var(--serif);
    font-size: 18px;
    margin: 0 0 8px;
    color: var(--text);
  }
  .sr-safety-msg {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
    margin: 0 0 12px;
  }
  .sr-safety--filter .sr-safety-msg {
    font-size: 11px;
    margin: 0;
    color: var(--text-dim);
  }
  .sr-safety-resources {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
  }
  .sr-safety-res {
    display: block;
    padding: 10px 12px;
    background: rgba(0,0,0,0.15);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
  }
  .sr-safety-res:hover { border-color: #38e8ff; }
  .sr-safety-res-name {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    display: block;
    margin-bottom: 3px;
    letter-spacing: 0.02em;
  }
  .sr-safety-res-contact {
    font-family: var(--mono);
    font-size: 11px;
    color: #38e8ff;
  }
  .sr-safety-code {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 10px;
    opacity: 0.7;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* Parsed query hint (from query-parser.js) */
  .sr-parsed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.05em;
  }
  .sr-parsed-label { opacity: 0.7; text-transform: uppercase; letter-spacing: 0.2em; }
  .sr-parsed-intent {
    background: rgba(255,74,138,0.12);
    color: #ff4a8a;
    border: 1px solid rgba(255,74,138,0.35);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
  }
  .sr-parsed-term {
    background: var(--bg-elevated);
    color: var(--text);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
  }
  .sr-parsed-sources { opacity: 0.6; }

  /* Media panel — music / books / tv from router-gated sources */
  .sr-media-slot { display: flex; flex-direction: column; gap: 18px; }
  .sr-media-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sr-media-group-title {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0;
  }
  .sr-media-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
  }
  .sr-media-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
  }
  .sr-media-card:hover { border-color: #ff4a8a; }
  .sr-media-thumb {
    width: 52px;
    height: 72px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ff4a8a, #1449FC);
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
  }
  .sr-media-body { min-width: 0; flex: 1; }
  .sr-media-title {
    font-family: var(--serif);
    font-size: 13px;
    color: var(--text);
    margin: 0 0 3px;
    line-height: 1.3;
  }
  .sr-media-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.4;
    margin: 0;
  }

  /* AI Overview (Ollama) */
  .sr-ai-slot {
    background: linear-gradient(135deg, rgba(255,74,138,0.06), rgba(20,73,252,0.06));
    border: 1px solid var(--border-glow);
    padding: 16px 18px;
    border-radius: 8px;
    position: relative;
  }
  .sr-ai-slot p {
    margin: 0;
    color: var(--text);
    line-height: 1.55;
    font-size: 14px;
  }
  .sr-ai-slot::before {
    content: '🤖';
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 18px;
    opacity: 0.7;
  }
  .sr-ai-badge {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;
    color: var(--text-dim);
    margin-left: 8px;
    letter-spacing: 0.5px;
  }
  .sr-ai-disclaimer {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.4px;
  }

  /* YouTube tiles — click to play inline, one at a time */
  .sr-yt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
  }
  .sr-yt-tile {
    background: var(--bg-elevated);
    border: 1px solid var(--border-glow);
    padding: 12px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
  }
  .sr-yt-tile:hover { border-color: #ff4a8a; }
  .sr-yt-tile.is-playing { border-color: #ff4a8a; box-shadow: 0 0 0 1px #ff4a8a inset; }
  .sr-yt-thumb {
    aspect-ratio: 16/9;
    position: relative;
    background: linear-gradient(135deg, #ff4a8a, #1449FC);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .sr-yt-thumb::after {
    content: '▶';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.65);
    background: linear-gradient(135deg, rgba(255,74,138,0.25), rgba(20,73,252,0.25));
    transition: background 0.15s;
  }
  .sr-yt-tile:hover .sr-yt-thumb::after {
    background: linear-gradient(135deg, rgba(255,74,138,0.45), rgba(20,73,252,0.45));
  }
  .sr-yt-frame {
    width: 100%;
    aspect-ratio: 16/9;
    border: 0;
    display: block;
    background: #000;
  }
  .sr-yt-title {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
  }
  .sr-yt-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
  }

  /* Reddit / X tweets / Related */
  .sr-tweets, .sr-reddit-list { display: flex; flex-direction: column; gap: 10px; }
  .sr-tweet {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: 6px;
  }
  .sr-tweet-handle {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cyan);
    margin-bottom: 4px;
  }
  .sr-tweet-text {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.45;
  }
  .sr-tweet-time {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-faint);
    margin-top: 4px;
  }
  .sr-related {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .sr-related-tag {
    font-family: var(--mono);
    font-size: 10px;
    padding: 4px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-glow);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
  }
  .sr-related-tag:hover { color: var(--cyan); border-color: var(--cyan-dim); }

  .sr-placeholder-note {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-faint);
    text-align: center;
    padding: 12px;
    background: var(--bg);
    border: 1px dashed var(--border);
  }

  @media (max-width: 1000px) {
    .sr-grid { grid-template-columns: 1fr; }
    .sr-sidebar { flex-direction: row; overflow-x: auto; position: static; }
    .sr-nav { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
    .sr-nav.active { border-bottom-color: var(--cyan); border-left: none; }
  }

  /* ----------------------------------------------------------------
   * Home view — Tesla-style: white headline directly on the Shipping
   * Plaza hero, no container behind it. A soft text-shadow keeps the
   * lettering legible against the brighter parts of the plaza image.
   * Scoped to #homeView so other views keep their normal text colors.
   * ---------------------------------------------------------------- */
  /* Lift the hero (eyebrow + lookymart title + sub + search) ~20vh
   * higher so it sits up near the top of the plaza like Tesla's headline. */
  #homeView .home-wrap { padding-top: 0; }
  #homeView .home-hero { padding-top: 0; padding-bottom: 32px; margin-top: -2vh; }
  /* Push the category tile row (Images / Music / Radio / Webapps /
   * Models / Agents) down ~10vh so it sits below the plaza fountain
   * line, leaving the hero floating at top. Bumped breathing room above
   * (5vh → 9vh) and between cards (11px → 18px) so the row reads as a
   * deliberate 6-card composition instead of a stuck-on strip. */
  #homeView .home-tiles {
    margin-top: var(--banner-b-mt, 9vh);
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 18px;
  }
  /* All six tiles share one geometry: a 16:10 photo-frame card with
   * centered glyph stack (icon, name, count). Storefront tiles fill the
   * frame with a photo and overlay a label; icon tiles stay clean and
   * centered. Equal height and equal width so the row stops looking like
   * two design languages glued together. */
  #homeView .home-tile {
    padding: 18px 16px;
    border-radius: 14px;
    text-align: center;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  #homeView .home-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -16px rgba(15, 23, 42, 0.35);
  }
  #homeView .home-tile-icon { font-size: 28px; margin-bottom: 6px; }
  #homeView .home-tile-name { font-size: 16px; font-weight: 700; }
  #homeView .home-tile-count {
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-top: 4px;
  }

  /* Storefront tile — replaces the Images tile with a button that
   * opens logoman.pro. Image fills the card, label sits over the
   * bottom-left so the storefront photo reads cleanly. */
  #homeView .home-tile--storefront {
    padding: 0;
    overflow: hidden;
    position: relative;
    align-items: stretch;
    justify-content: stretch;
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: #fff;
    aspect-ratio: 16 / 10;
    /* The shared blurred-glass surface is hidden behind the storefront
     * photo, but kill the inner padding inheritance so the image fills
     * edge to edge without a white halo. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.55);
  }
  #homeView .home-tile-storefront-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
  }
  #homeView .home-tile--storefront:hover .home-tile-storefront-img {
    transform: scale(1.30);
  }
  #homeView .home-tile-storefront-label {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(17, 17, 17, 0.85);
    color: #fff;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
  }

  /* Push the "Newest Listings" row (first .home-row after the tiles) down
   * so it doesn't crowd the tile cards. Only this row is shifted; the rows
   * below (Latest News, facts) follow it naturally. */
  #homeView .home-tiles + .home-row { margin-top: var(--banner-c-mt, 22vh); }
  #homeView .home-sub {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  }
  /* Apple/Bing-style search pill — solid white, hairline border,
   * three-layer drop shadow.  No more 20vh margin-top: the redesigned
   * hero now has a headline + sub sitting above the search, so the
   * search sits naturally below them with normal flow spacing. */
  #homeView .home-search {
    margin: 0 auto;
    max-width: 720px;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.06),
      0 8px 20px -6px rgba(15, 23, 42, 0.12),
      0 24px 48px -20px rgba(15, 23, 42, 0.18);
  }
  #homeView .home-search:hover {
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.08),
      0 12px 28px -8px rgba(15, 23, 42, 0.18),
      0 32px 60px -24px rgba(15, 23, 42, 0.24);
  }
  #homeView .home-search:focus-within {
    border-color: rgba(0, 122, 255, 0.55);
    box-shadow:
      0 0 0 4px rgba(0, 122, 255, 0.14),
      0 1px 2px rgba(15, 23, 42, 0.08),
      0 16px 32px -10px rgba(15, 23, 42, 0.22);
  }
  #homeView .home-search-input { background: transparent; color: #111; }
  #homeView .home-search-input::placeholder { color: rgba(60, 60, 67, 0.55); }

  /* ====================================================================
   * Container labels (a, b, c, …) — top-left corner of each panel so
   * Willis can reference them by letter when giving feedback. Easy to
   * remove once layout decisions settle: just delete this block.
   * ==================================================================== */
  .sr-wrap, .sr-header, .sr-sidebar, .sr-block, .radio-shell { position: relative; }

  .sr-wrap::before,
  .sr-header::before,
  .sr-sidebar::before,
  .sr-block::before {
    position: absolute;
    top: 6px;
    left: 8px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0;
    background: transparent;
    color: #111;
    opacity: 0.5;
    z-index: 50;
    pointer-events: none;
  }

  .sr-wrap::before    { content: 'a)'; }
  .sr-header::before  { content: 'b)'; }
  .sr-sidebar::before { content: 'c)'; }
  /* Each .sr-block gets a sequential letter starting at 'd'.
   * counter-reset on the wrap establishes the counter; the +3 offset
   * means the 1st block becomes 'd', 2nd 'e', and so on. */
  .sr-wrap { counter-reset: container 3; }
  .sr-block { counter-increment: container; }
  .sr-block::before { content: counter(container, lower-alpha) ')'; }

  /* Radio view 'r)' marker removed — was a dev annotation that clashed
   * with the redesigned radio header. */

  /* ----- Home view banners ----- */
  #homeView .home-hero,
  #homeView .home-tiles,
  #homeView .home-row,
  #homeView .home-facts,
  .hero-band {
    position: relative;
  }
  /* Dev letter-markers (a/b/c/d/e/f/r) removed 2026-04-29 — they were
   * leaking onto the production layout (e.g. 'f)' visible on the
   * Images storefront hero, 'r)' on the radio shell).  The named
   * sections are documented in commit history + section-banner
   * eyebrows now, so the floating dev tags are no longer needed. */

  /* ====================================================================
   * /wix layout editor — visible only when body has class 'wix-mode'.
   * Controls float on the right side of each banner, lets you nudge
   * margin-top in 1vh steps. Saves to localStorage; survives reloads.
   * ==================================================================== */
  .wix-banner-controls {
    position: absolute;
    top: 6px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 60;
    font-family: var(--mono);
    font-size: 11px;
    background: rgba(17, 17, 17, 0.92);
    color: #fff;
    padding: 4px 6px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  .wix-banner-controls button {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.12s;
  }
  .wix-banner-controls button:hover { background: rgba(255, 255, 255, 0.30); }
  .wix-banner-controls .wix-mt-value {
    min-width: 38px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .wix-banner-controls .wix-reset {
    background: transparent;
    color: #ff8a8a;
    font-size: 10px;
    width: auto;
    padding: 0 6px;
    border-radius: 6px;
  }
  .wix-banner-controls .wix-reset:hover { background: rgba(255, 138, 138, 0.18); }

  .wix-mode-badge {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    background: #ef4444;
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .wix-mode-badge button {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 0;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
  }
  .wix-mode-badge button:hover { background: rgba(255, 255, 255, 0.35); }

  /* ====================================================================
   * Wix-style "Edit Site" pair — pinned top-right of the viewport,
   * shown only when admin is signed in. Style mirrors the Wix editor
   * entry: a circular ⋯ button + a blue rounded "Edit Site" pill.
   * ==================================================================== */
  .edit-site-host {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
  }
  .edit-site-host > * { pointer-events: auto; }
  .edit-site-dots,
  .edit-site-pill {
    background: #fff;
    border: 1.5px solid #d6e4ff;
    color: #2563eb;
    font-family: var(--mono);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .edit-site-dots {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    padding: 0;
  }
  .edit-site-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
  }
  .edit-site-dots:hover,
  .edit-site-pill:hover {
    background: #eef4ff;
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22), 0 1px 3px rgba(15, 23, 42, 0.06);
  }
  .edit-site-pill svg { stroke: #2563eb; }
  /* Hide the floating button while wix-mode is active so it doesn't
   * collide with the WIX MODE badge in the top-left + the row of dots. */
  body.wix-mode .edit-site-host { display: none; }

/* ====================================================================
 * 2026-04-29 — Marketplace home redesign (mockup-driven)
 *
 * Layout:  Facebook-style 2-column shell — sticky left nav rail +
 *          mockup-driven main column (hero, chips, featured stores,
 *          pastel marketplace grid, product strip, news, facts).
 *          Each main-column section sits on a soft white card surface
 *          with rounded 24px corners + low-elevation shadow, floating
 *          over the plaza bg.
 * ==================================================================== */

  /* ---------- PERSISTENT APP RAILS (visible on all views) ---------- */
  /* Two persistent rails — left nav (.app-rail) and right Sponsored
   * (.home-ads).  Both are position: fixed at the viewport edges so
   * they survive page changes.  Each view shifts inward via margin to
   * clear the rails. */
  :root {
    /* Facebook-style 3-column proportions: rail / fluid center / ads */
    --app-rail-width:  280px;
    --app-rail-gap:    24px;
    --app-rail-offset: calc(var(--app-rail-width) + var(--app-rail-gap) + 16px);

    --app-ads-width:   320px;
    --app-ads-gap:     24px;
    --app-ads-offset:  calc(var(--app-ads-width) + var(--app-ads-gap) + 16px);

    /* Outer page max-width (kept narrow so layout feels centered, not sprawled) */
    --page-max-width:  1280px;
    /* Center column content cap — Facebook uses 580px, Twitter ~600px.
       Wider views (recipes grid, classified) ignore this and use the full column. */
    --center-max-width: 680px;

    /* Real measured height of nav.top-dock (sticky header).  Used to
     * push the persistent left + right rails BELOW the header so they
     * don't visually touch its bottom edge.  Updated by JS on resize. */
    --top-dock-height: 72px;
  }

  /* Base rail styling — positioning handled by the Grid rules above on
   * desktop (becomes sticky inside grid column 1) and by mobile rules
   * below. Removed fixed positioning to let CSS Grid take over. */
  .app-rail {
    width: var(--app-rail-width);
    max-height: calc(100vh - var(--top-dock-height, 72px) - 32px);
    overflow-y: auto;
    padding: 14px 12px;
    background: #1a2540;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.18),
      0 16px 36px -16px rgba(15, 23, 42, 0.55);
    z-index: 20;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }
  .app-rail::-webkit-scrollbar { width: 6px; }
  .app-rail::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 3px; }

  /* Logo block sits above the nav, separated by a hairline.  The image
   * preserves the original aspect ratio of lookymart-logo.png. */
  .app-rail .rail-logo {
    display: block;
    padding: 6px 12px 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    text-decoration: none;
    text-align: left;
  }
  .app-rail .rail-logo img {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
  }

  .app-rail .rail-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .app-rail .rail-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-radius: 14px;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .app-rail .rail-item:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  .app-rail .rail-item.active {
    background: linear-gradient(90deg, #3b4ef0 0%, #6e6df3 100%);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 6px 16px -8px rgba(99, 102, 241, 0.55);
  }
  .app-rail .rail-icon {
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex: 0 0 auto;
  }
  .app-rail .rail-logo {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  .app-rail::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
  }
  .app-rail .rail-icon svg { width: 22px; height: 22px; }
  /* Custom-link icons are emoji glyphs, not SVG — render them larger
   * so they balance against the stroke-icon built-ins. */
  .app-rail .rail-icon--emoji { font-size: 18px; line-height: 1; }
  .app-rail .rail-arrow {
    margin-left: auto;
    font-size: 11px;
    color: #94a3b8;
    flex: 0 0 auto;
  }
  .app-rail .rail-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    letter-spacing: var(--comic-letter-spacing, 2px) !important;
    font-size: 17px;
  }

  /* === TRUE 3-COLUMN CSS GRID LAYOUT (replaces the old fixed-sidebar + margin-pusher hack)
   * .container is the parent grid wrapper. Three real grid columns:
   *   1: .app-rail (left)   — fixed width, sticky-positioned in column
   *   2: .view (center)     — minmax(0, 1fr) so it can NEVER overflow
   *   3: .home-ads (right)  — fixed width, sticky-positioned in column
   * All views are children of .container and span column 2. Their content
   * is bounded by the column AND clipped by overflow-x: clip — meaning no
   * .view's internal max-width or padding can break out anymore.
   * Fixed-positioned chrome (top-dock, footer-dock, modals, chat-window)
   * is taken out of grid flow and floats over the page as before. === */
  @media (min-width: 961px) {
    .container {
      display: grid;
      grid-template-columns: var(--app-rail-width) minmax(0, 1fr) var(--app-ads-width);
      grid-template-rows: auto auto 1fr;
      column-gap: var(--app-rail-gap);
      row-gap: 16px;
      max-width: var(--page-max-width);
      margin: 0 auto;
      padding: 0 16px 100px;
      align-items: start;
    }
    /* ROW 1 — Header (top-dock) spans all three columns, with rounded
     * corners visible on the sides (no negative margins). */
    .container > nav.top-dock {
      grid-column: 1 / -1;
      grid-row: 1;
    }
    /* ROW 2 — Section banner sits ABOVE the LEFT RAIL (column 1, row 2).
     * Updated 2026-05-07: banner used to occupy center column row 2 which
     * ate vertical space in the feed. Now it sits in the rail's column at
     * the rail's exact width — small, persistent wayfinding chip without
     * stealing center scroll real estate. */
    .container > .section-banner {
      grid-column: 1;
      grid-row: 2;
      /* Smaller padding + font when in the narrow rail column */
      padding: 10px 14px;
      border-radius: 16px;
      min-height: 0;
    }
    .container > .section-banner .sb-icon {
      font-size: 22px;
    }
    .container > .section-banner .sb-title {
      font-size: 15px;
      line-height: 1.2;
    }
    .container > .section-banner .sb-sub {
      font-size: 11px;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    /* Rail moves down to row 3 (banner sits above it). Sticky position
     * keeps the rail visible while center content scrolls. */
    .container > .app-rail {
      position: sticky;
      top: calc(var(--top-dock-height, 72px) + 16px);
      grid-column: 1;
      grid-row: 3 / 4;
      left: auto;
      right: auto;
    }
    /* Right ads span rows 2-3 to line up with the rail+banner stack. */
    .container > .home-ads {
      position: sticky;
      top: calc(var(--top-dock-height, 72px) + 16px);
      grid-column: 3;
      grid-row: 2 / 4;
    }

    /* ROWS 2-3 — Active view in the center column. Spans both rows so it
     * starts at the same y-position as the section banner (col 1, row 2)
     * and the right ads (col 3, rows 2-3). Updated 2026-05-07 to align
     * the center content with the left/right columns. */
    .container > .view {
      grid-column: 2;
      grid-row: 2 / 4;
      align-self: start;
      min-width: 0;
      overflow-x: clip;
      box-sizing: border-box;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    /* Inner shells used to add 24px top padding which left a visible gap
     * above content. Reset to 0 on desktop now that the view starts at row 2. */
    #homeView .home-shell { padding-top: 0 !important; }
    #homeView .home-hero  { padding-top: 0 !important; margin-top: 0 !important; }
    /* FB/Twitter-style narrow center — opt-in via .is-narrow-center on a view. */
    .container > .view.is-narrow-center > * {
      max-width: var(--center-max-width);
      margin-inline: auto;
    }
    /* Footer dock stays fixed at viewport bottom — out of grid flow */
    .container > .footer-dock {
      grid-column: 1 / -1;
    }
  }
  /* Medium viewports: hide right rail, collapse to 2 columns. */
  @media (min-width: 769px) and (max-width: 1100px) {
    .container {
      grid-template-columns: var(--app-rail-width) minmax(0, 1fr);
    }
    .home-ads { display: none !important; }
  }
  /* Phone: rail goes off-canvas, single column. */
  @media (max-width: 960px) {
    .container {
      display: block;  /* rail handles its own mobile-drawer behavior below */
      max-width: 100%;
    }
    .container > .view {
      min-width: 0;
      overflow-x: clip;
      box-sizing: border-box;
    }
  }
  @media (max-width: 768px) {
    .home-ads,
    .ad-eyebrow,
    .ad-card { display: none !important; }
  }

  /* Hide both rails on Admin and Login — those have their own chrome.
   * Section-banner also hidden on these views (they don't need wayfinding). */
  body:has(#adminView.active) .app-rail,
  body:has(#loginView.active) .app-rail,
  body:has(#adminView.active) .home-ads,
  body:has(#loginView.active) .home-ads,
  body:has(#adminView.active) .section-banner,
  body:has(#loginView.active) .section-banner { display: none; }

  /* Admin + Login break out of the 3-column grid and use the FULL viewport.
   * Without this, .container's grid-template-columns still reserves space
   * for app-rail and home-ads (even when display:none) — which made admin
   * render as a narrow center column instead of full-width. Fixed 2026-05-07. */
  body:has(#adminView.active) .container,
  body:has(#loginView.active) .container {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body:has(#adminView.active) .container > .view,
  body:has(#loginView.active) .container > .view {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }

  /* All text in admin/login is bold for stronger ops affordance.
   * Headings already have their own font-weight, but the cascade below
   * forces every descendant to bold (including inputs, labels, buttons,
   * tables, etc). Inputs use ! to beat user-agent defaults. */
  #adminView, #adminView *,
  #loginView, #loginView * {
    font-weight: 700 !important;
  }

  /* ---------- HOME-SHELL — single column (right rail is now external) ---------- */
  #homeView .home-shell {
    display: block;
    max-width: 700px;
    margin: 0 auto;
    padding: 24px 0 96px;
  }
  #homeView .home-main {
    min-width: 0;
    max-width: 700px;
    overflow: hidden;
    container-type: inline-size;
    container-name: homemain;
  }

  /* Feed-first home: hide every other section under main so the
     center column is just the unified feed.  Markup is preserved
     in case we need to revive a section later. */
  #homeView .home-main > .home-hero,
  #homeView .home-main > .home-card:not(.home-feed-card) {
    display: none !important;
  }
  #homeView .home-feed-card .feed-list {
    max-height: none; /* feed-only column scrolls with the page */
  }

  /* ---------- RIGHT RAIL — ad slots ---------- */
  /* Persistent right rail — fixed to viewport, half the previous width
   * so the center has more room.  Cards reflow tighter to fit. */
  /* Right sponsor column — Grid rules above handle desktop positioning
   * (sticky in column 3). On mobile this column hides via @media. */
  .home-ads {
    width: var(--app-ads-width);
    max-height: calc(100vh - var(--top-dock-height, 72px) - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* 2026-05-07: rail uses tight gap so SPONSORED chip sits close to
     * the first ad. Wider spacing between consecutive ads is added via
     * `.ad-card + .ad-card` margin-top below — that way only ad-to-ad
     * pairs get the big breathing room, not chip-to-first-ad. */
    gap: 8px;
    /* Add a touch of left/right inner padding so cards don't kiss the
     * rail edge; rail width itself stays unchanged. */
    padding: 0 4px;
    z-index: 20;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
  }
  .home-ads::-webkit-scrollbar { width: 6px; }
  .home-ads::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 3px; }
  /* ============ COMING UP — daily content schedule widget ============ */
  /* Default = LIGHT (white card, dark text) since most users are on light
   * mode. Dark mode override below flips palette to mystic purple/gold. */
  .schedule-widget {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    padding: 12px 14px 10px;
    color: #1a1a1a;
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.06),
      0 6px 16px -10px rgba(15, 23, 42, 0.18);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  }
  .schedule-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  }
  .schedule-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 16px;
    font-weight: 600;
    color: #5b3fa0;
    letter-spacing: 0.01em;
  }
  .schedule-zone {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: rgba(15, 23, 42, 0.5);
  }
  .schedule-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .schedule-item {
    display: grid;
    /* First column needs to fit the yellow time chip ("6:00 AM" in Bangers
     * + 8px padding + 2px border each side ≈ 90px). */
    grid-template-columns: 92px auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.25;
    transition: background 180ms ease;
    border: 1px solid transparent;
  }
  .schedule-item:hover { background: rgba(15, 23, 42, 0.03); }
  .schedule-time {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    text-align: center;
    white-space: nowrap;
  }
  .schedule-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: rgba(15, 23, 42, 0.05);
    flex-shrink: 0;
  }
  .schedule-name {
    color: #1a1a1a;
    font-weight: 600;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .schedule-name small {
    display: block;
    font-size: 10px;
    color: rgba(15, 23, 42, 0.55);
    font-weight: 400;
    letter-spacing: 0.02em;
  }
  /* Coming Up widget — Bangers font on every text element. Overrides
   * the previous Cormorant serif title + mono time + Inter name. */
  .schedule-title,
  .schedule-zone,
  .schedule-time,
  .schedule-name,
  .schedule-name small {
    font-family: var(--font-display) !important;
    font-style: normal !important;
    letter-spacing: var(--comic-letter-spacing, 2px) !important;
    font-weight: 400 !important;
  }
  /* Bump title size a touch — Bangers reads smaller than the Cormorant
   * it replaced, so a small pump keeps the visual weight. */
  .schedule-title { font-size: 22px !important; }
  .schedule-time  { font-size: 14px !important; }
  .schedule-name  { font-size: 16px !important; }
  .schedule-name small { font-size: 12px !important; letter-spacing: 1.5px !important; }

  /* Comic textbox treatment — yellow chip + black border + black text.
   * Applied to ALL major section headers so they pop as comic captions:
   *   - .schedule-title (Coming Up)
   *   - .members-title (Members)
   *   - .sitcom-hero-title (LookyMart Sitcom)
   *   - .games-title (Games)
   *   - .home-card-title (Featured Stores / Browse Marketplace / Newest
   *     Listings / Community feed / Latest News)
   * Times that are "done" stay strikethrough but keep the chip look. */
  .schedule-title,
  .members-title,
  .sitcom-hero-title,
  .games-title,
  .home-card-title,
  .sb-title,
  .home-news-title,
  .sitcom-episode-title,
  .sitcom-archive-card-title,
  .nw-card-title {
    display: inline-block;
    background: #FFD21E !important;
    color: #111111 !important;
    border: 3px solid #111111;
    border-radius: 12px;
    padding: 6px 14px 7px !important;
    box-shadow: 4px 4px 0 #111111;
    text-shadow: none !important;
    margin-bottom: 6px !important;
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    letter-spacing: var(--comic-letter-spacing, 2px) !important;
  }
  /* Force every descendant of a chip to black + no shadow.
   * Catches inner spans, icons, links, badges that may have inherited
   * white text from earlier comic-shadow rules. */
  .schedule-title *,
  .members-title *,
  .sitcom-hero-title *,
  .games-title *,
  .home-card-title *,
  .sb-title *,
  .sb-sub *,
  .home-news-title *,
  .sitcom-episode-title *,
  .sitcom-archive-card-title *,
  .nw-card-title *,
  .comic-textbox * {
    color: #111111 !important;
    text-shadow: none !important;
  }
  /* Community feed card title was previously styled with white + comic
   * shadow at #homeView .home-feed-card .home-card-title — override
   * here too so the chip wins. */
  #homeView .home-feed-card .home-card-title {
    background: #FFD21E !important;
    color: #111111 !important;
    border: 3px solid #111111;
    text-shadow: none !important;
    padding: 6px 14px 7px !important;
    /* Drop the yellow vertical bar ::before that was added before — the
     * chip itself is now the visual anchor. */
    padding-left: 14px !important;
  }
  #homeView .home-feed-card .home-card-title::before {
    display: none !important;
  }
  .schedule-time {
    display: inline-block;
    width: max-content;
    max-width: 100%;
    background: #FFD21E !important;
    color: #111111 !important;
    border: 2px solid #111111;
    border-radius: 8px;
    padding: 3px 8px 4px !important;
    box-shadow: 2px 2px 0 #111111;
    text-shadow: none !important;
    text-align: center;
    white-space: nowrap;
  }
  /* Done state — keep strikethrough but darken the chip slightly. */
  .schedule-item[data-state="done"] .schedule-time {
    background: #f0d77c !important;
    text-decoration: line-through;
  }
  /* Dark-mode override — override the dark-mode color rules so the chip
   * stays yellow + black instead of inheriting the dark-mode palette. */
  body.dark-mode .schedule-title,
  body.dark-mode .schedule-time,
  body.dark-mode .members-title,
  body.dark-mode .sitcom-hero-title,
  body.dark-mode .games-title,
  body.dark-mode .home-card-title {
    color: #111111 !important;
  }

  /* ============================================================
   * MOBILE — tighten every comic chip so it fits narrow screens.
   * Default chip is 3px border + 4px shadow + 14px padding — too
   * heavy on phones. Trim border/shadow/padding/letter-spacing.
   * ============================================================ */
  @media (max-width: 520px) {
    .schedule-title,
    .members-title,
    .sitcom-hero-title,
    .games-title,
    .home-card-title,
    .sb-title,
    .comic-textbox {
      border-width: 2px !important;
      border-radius: 10px;
      padding: 4px 10px 5px !important;
      box-shadow: 3px 3px 0 #111111 !important;
      letter-spacing: 1.5px !important;
      margin-bottom: 4px !important;
    }
    .section-banner .sb-sub,
    .sb-sub {
      border-width: 2px !important;
      border-radius: 8px;
      padding: 3px 8px 4px !important;
      box-shadow: 2px 2px 0 #111111 !important;
      letter-spacing: 1.2px !important;
    }
    /* Time chip in schedule (only shown if rail is visible) — smaller */
    .schedule-time {
      padding: 2px 6px 3px !important;
      box-shadow: 1.5px 1.5px 0 #111111 !important;
    }
    /* Community feed + other home-card-title chips — clamp font on phones
     * so longer labels ("Community feed", "Browse Marketplace") fit. */
    .home-card-title {
      font-size: clamp(16px, 4.5vw, 22px) !important;
      max-width: 100%;
      white-space: normal;
    }
    /* Sitcom hero title gets the same clamp on phones */
    .sitcom-hero-title {
      font-size: clamp(18px, 5vw, 26px) !important;
    }
    /* Editorial home banner — let cast stack hide on small screens */
    .section-banner--editorial {
      grid-template-columns: 4px 1fr !important;
      padding: 8px 14px !important;
    }
    .section-banner--editorial .sb-cast-stack {
      display: none !important;
    }
    .sb-mega {
      font-size: clamp(20px, 6vw, 28px) !important;
    }
    .sb-tagline {
      font-size: 12px !important;
    }
    /* Section banner is narrower on phones — let chips wrap if too wide */
    .section-banner {
      flex-wrap: wrap;
      padding: 8px 14px !important;
    }
    /* Coming Up widget — narrower first column on phones if shown */
    .schedule-item {
      grid-template-columns: 78px auto 1fr !important;
      gap: 6px !important;
    }
    /* Header rounded corners — slightly less radius on phones */
    nav.top-dock {
      border-radius: 18px !important;
      margin-top: 8px !important;
    }
    /* Section banner — slightly less radius on phones */
    .section-banner {
      border-radius: 18px !important;
    }
  }
  /* States: done (already aired today), next (countdown target), later */
  .schedule-item[data-state="done"]   { opacity: 0.42; }
  .schedule-item[data-state="done"] .schedule-time { text-decoration: line-through; }
  .schedule-item[data-state="next"] {
    background: rgba(91, 63, 160, 0.06);
    border: 1px solid rgba(91, 63, 160, 0.22);
    padding: 5px 4px;
  }
  .schedule-item[data-state="next"] .schedule-name { color: #1a1a1a; font-weight: 700; }
  .schedule-item[data-state="next"] .schedule-name small { color: #5b3fa0; font-weight: 500; }

  /* Dark-mode override — mystic purple/gold for users with dark mode on */
  body.dark-mode .schedule-widget {
    background: linear-gradient(180deg, #1a0b3a 0%, #0c0420 100%);
    border-color: rgba(212, 168, 94, 0.22);
    color: #f5e6c8;
  }
  body.dark-mode .schedule-head { border-bottom-color: rgba(212, 168, 94, 0.16); }
  body.dark-mode .schedule-title { color: #f0c674; }
  body.dark-mode .schedule-zone  { color: rgba(245, 230, 200, 0.5); }
  body.dark-mode .schedule-time  { color: rgba(245, 230, 200, 0.92); }
  body.dark-mode .schedule-name  { color: #f5e6c8; }
  body.dark-mode .schedule-name small { color: rgba(245, 230, 200, 0.6); }
  body.dark-mode .schedule-icon  { background: rgba(255, 255, 255, 0.06); }
  body.dark-mode .schedule-item:hover { background: rgba(212, 168, 94, 0.06); }
  body.dark-mode .schedule-item[data-state="next"] {
    background: rgba(212, 168, 94, 0.12);
    border-color: rgba(212, 168, 94, 0.32);
  }
  body.dark-mode .schedule-item[data-state="next"] .schedule-name { color: #fff9e6; }
  body.dark-mode .schedule-item[data-state="next"] .schedule-name small { color: #f0c674; }

  .ad-eyebrow {
    /* 2026-05-07: changed from green-text-on-transparent to a green text
     * box with white font — high-contrast brand chip that anchors the top
     * of the sponsored rail. */
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff !important;
    background: #60BD49;
    padding: 5px 12px;
    border-radius: 6px;
    border: 2px solid #111;
    box-shadow: 2px 2px 0 #111;
    text-shadow: none !important;
    margin: 4px 4px 4px 0;
  }
  .ad-card {
    display: block;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.05),
      0 8px 18px -12px rgba(15, 23, 42, 0.2);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    /* 2026-05-07: shrink cards to 70% of rail width and center them.
     * The rail itself stays the same — only the ads inside get smaller,
     * giving the feed visual priority and the rail a calmer feel. */
    width: 70%;
    align-self: center;
  }
  /* Big spacing only between consecutive ads — chip-to-first-ad uses
   * the small `gap: 8px` from .home-ads. */
  .ad-card + .ad-card { margin-top: 56px; }
  .ad-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.08),
      0 14px 28px -14px rgba(15, 23, 42, 0.28);
  }
  .ad-card-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  }
  .ad-card-media img {
    width: 100%; height: 100%; object-fit: cover;
  }

  /* "Contain" variant — for portrait or square ad images (e.g. book covers).
     Uses a 1:1 box and object-fit: contain so the full image fits without
     cropping. Background stays dark to letterbox the edges cleanly. The
     ad-card width doesn't change — only the media area aspect ratio. */
  .ad-card--contain .ad-card-media {
    aspect-ratio: 1 / 1;
    background: #0e1626;
  }
  .ad-card--contain .ad-card-media img {
    object-fit: contain;
    padding: 4px;
  }
  .ad-card-body {
    padding: 8px 10px 10px;
  }
  .ad-card-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 3px;
  }
  .ad-card-title {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin: 0 0 3px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ad-card-sub {
    font-family: var(--mono);
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ad-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 8px;
    padding: 6px 12px;
    background: #111;
    color: #fff;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
  }

  /* ---------- SECTION BANNER (per-page header strip) ---------- */
  /* Sits above the middle column on every view.  Updates content +
   * gradient tint via updateSectionBanner() in app.js when the user
   * switches sections — gives the "entered a new store in the mall"
   * wayfinding moment. */
  .section-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 28px;
    width: 100%;
    max-width: 600px;
    height: 100px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 28px;
    overflow: hidden;
    border: 2px solid #111111;
    /* Banner is transparent — page comic-bg shows through. The VLBG
     * comic-pop SVG is rendered via ::before at 50% opacity so the banner
     * has half-transparency without fading the child text/icons. See
     * feedback_lookymart_background_tiers.md. */
    background: transparent;
    color: #ffffff;
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.18),
      0 16px 36px -22px rgba(15, 23, 42, 0.45);
    position: relative;
    z-index: 4;
  }
  /* VLBG comic-pop SVG rendered at 50% opacity behind banner content.
   * --vlbg-image is set inline by bg-maker.js per section. */
  .section-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--vlbg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
  }
  /* Children sit above the bg pseudo-element so they stay fully opaque. */
  .section-banner > * {
    position: relative;
    z-index: 1;
  }
  .section-banner .sb-title { color: var(--banner-text, #ffffff); }
  .section-banner .sb-sub   { color: var(--banner-text, rgba(255, 255, 255, 0.78)); opacity: 0.78; }
  /* Home banner stays full-width like every other section — the cast
     portrait stack sits on the right, the feed below is narrower
     (intentional: feed is Twitter-width, banner is wide editorial). */

  /* ---------- EDITORIAL BANNER (Home) — bolder, magazine-cover energy ----
     Layout: vertical teal marker | mega title block | cast portraits.
     No gradient backdrop — flat white card so the title carries it. */
  .section-banner--editorial {
    display: grid !important;
    /* Match the standard section-banner dimensions so the home page lines
     * up with every other section: max-width 600px, ~100-130px tall.
     * Grid: small marker | text body | optional cast portraits. */
    grid-template-columns: 4px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 28px !important;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    height: auto;
    min-height: 100px;
    /* Transparent — the ::before VLBG renders at 50% behind the chips */
    background: transparent !important;
    color: #111111;
    border: 2px solid #111111;
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.18),
      0 16px 36px -22px rgba(15, 23, 42, 0.45);
    position: relative;
    border-radius: 28px;
  }
  /* Vertical teal marker on the left — anchored to the title block */
  .sb-marker {
    width: 4px;
    height: 64%;
    border-radius: 4px;
    background: linear-gradient(180deg, #14b8a6, #2563eb);
    align-self: center;
  }
  .sb-edit-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }
  .sb-eyebrow {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #5eead4;
    text-transform: uppercase;
  }
  .sb-mega {
    /* Home page title — yellow chip styling applied via the chip selector
     * list above. Sized to match section-banner standard. */
    display: inline-block;
    font-family: var(--font-display) !important;
    font-size: clamp(24px, 5cqi, 36px) !important;
    font-weight: 400 !important;
    color: #111111 !important;
    line-height: 1.05;
    margin: 0;
    letter-spacing: var(--comic-letter-spacing, 2px) !important;
    background: #FFD21E !important;
    border: 3px solid #111111;
    border-radius: 12px;
    padding: 6px 14px 7px !important;
    box-shadow: 4px 4px 0 #111111;
    text-shadow: none !important;
    margin-bottom: 6px !important;
  }
  .sb-tagline {
    display: inline-block;
    font-family: var(--font-display) !important;
    font-size: 13px;
    color: #111111 !important;
    font-weight: 700 !important;
    margin: 0;
    line-height: 1.2;
    max-width: 460px;
    background: #FFFFFF !important;
    border: 3px solid #111111;
    border-radius: 10px;
    padding: 4px 12px 5px !important;
    box-shadow: 3px 3px 0 #111111;
    text-shadow: none !important;
    letter-spacing: 1.5px !important;
  }
  .sb-tag-blue  { color: #fbbf24; font-weight: 700; }
  .sb-tag-green { color: #fbbf24; font-weight: 700; }

  /* Cast portrait stack — three overlapping circular portraits */
  .sb-cast-stack {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding-left: 12px;
  }
  .sb-cast-portrait {
    /* Reduced from 150px to fit the new 100px-tall standard banner. */
    --size: 64px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #111;
    box-shadow:
      2px 2px 0 #111,
      0 4px 10px -4px rgba(0, 0, 0, 0.55);
    background: #1a2230;
    margin-left: calc(var(--size) * -0.18);
    transform: translateZ(0);
    transition: transform 0.18s ease;
    position: relative;
    z-index: calc(10 - var(--i));
  }
  .sb-cast-portrait:first-child { margin-left: 0; }
  .sb-cast-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .sb-cast-portrait:hover { transform: translateY(-2px) scale(1.04); z-index: 20; }
  .sb-cast-stack--empty {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    background: linear-gradient(135deg, #14b8a6, #6366f1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sb-cast-stack--empty .sb-decor-icon { font-size: 40px; color: #fff; }

  body.dark-mode .section-banner--editorial {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.08);
  }

  /* === Editorial home banner ARRANGEMENT.
     Updated 2026-05-07: banner moved from center column (~600px wide) to
     above the left rail (~240px wide). The old editorial layout (eyebrow
     + mega title + tagline + 3 portrait stack) doesn't fit at rail width
     — portraits overlap the title, fallback letter avatars show as random
     "C" and "D" circles, etc. Solution: at rail width, hide the heavyweight
     editorial elements and render a clean compact stack. === */
  @media (min-width: 961px) {
    .container > .section-banner--editorial {
      padding: 10px 14px;
      gap: 10px;
      flex-direction: column;
      align-items: stretch;
    }
    /* The vertical teal/blue marker bar — keep but rotate to horizontal
     * to act as a top divider line in the narrow rail layout. */
    .container > .section-banner--editorial .sb-marker {
      width: 100%;
      height: 3px;
      align-self: stretch;
    }
    .container > .section-banner--editorial .sb-edit-body { gap: 4px; }
    .container > .section-banner--editorial .sb-eyebrow {
      font-size: 9px;
      letter-spacing: 0.18em;
      margin-bottom: 0;
      opacity: 0.85;
    }
    .container > .section-banner--editorial .sb-mega {
      font-size: 18px;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    /* Hide the long tagline + cast portrait stack in the narrow rail
     * column — they don't fit and create the overlapping "C"/"D" fallback
     * letter circles the user reported. The banner above the rail is for
     * compact wayfinding, not full hero treatment. */
    .container > .section-banner--editorial .sb-tagline,
    .container > .section-banner--editorial .sb-cast-stack {
      display: none;
    }
  }
  body.dark-mode .sb-mega    { color: #f8fafc; }
  body.dark-mode .sb-tagline { color: #cbd5e1; }
  body.dark-mode .sb-eyebrow { color: #5eead4; }
  body.dark-mode .sb-cast-portrait { border-color: #0f172a; }

  /* Phone: drop the cast stack to a single portrait, tighten padding */
  @media (max-width: 720px) {
    .section-banner--editorial {
      grid-template-columns: 4px 1fr;
      padding: 14px 20px;
      gap: 16px;
    }
    .sb-cast-stack { display: none; }
    .sb-mega { font-size: clamp(40px, 14cqi, 64px); }
    .sb-tagline { font-size: 14px; }
  }
  /* Section-banner icons hidden — they ate space the title/subtitle chips
   * needed. The yellow + white chips are the wayfinding signal now. */
  .section-banner .sb-icon,
  .sb-icon,
  .sb-icon-img {
    display: none !important;
  }
  .section-banner .sb-icon-legacy {
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.06),
      0 8px 18px -10px rgba(15, 23, 42, 0.14);
  }
  .section-banner .sb-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .section-banner .sb-text { min-width: 0; }
  .section-banner .sb-title {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #111;
    margin: 0 0 2px;
    line-height: 1.1;
  }
  .section-banner .sb-sub {
    font-family: var(--mono);
    font-size: 12px;
    color: #475569;
    margin: 0;
    line-height: 1.45;
  }

  /* Per-section tints — match the rail icon / marketplace palette. */
  /* Per-section tint variants — all use the cosmic banner image as
     the default backdrop.  Admin can still override with a flat
     color via the "Banner color" picker in Admin → Backgrounds
     (the inline color overrides the var, image stays). */
  .section-banner--home,
  .section-banner--news,
  .section-banner--images,
  .section-banner--music,
  .section-banner--radio,
  .section-banner--apps,
  .section-banner--agents,
  .section-banner--models,
  .section-banner--games,
  .section-banner--maps,
  .section-banner--rooms,
  .section-banner--learn {
    background-color: rgba(10, 10, 12, 0.55) !important;
    background-image: none !important;
    color: #ffffff;
  }
  /* Per-variant banner text color is BLACK on all sections — matches the
   * comic-pop chip standard (yellow + black for title, white + black for
   * subtitle). Overrides the previous white-on-tinted-bg approach. */
  .section-banner--home .sb-title,
  .section-banner--news .sb-title,
  .section-banner--images .sb-title,
  .section-banner--music .sb-title,
  .section-banner--radio .sb-title,
  .section-banner--apps .sb-title,
  .section-banner--agents .sb-title,
  .section-banner--models .sb-title,
  .section-banner--games .sb-title,
  .section-banner--maps .sb-title,
  .section-banner--rooms .sb-title,
  .section-banner--learn .sb-title { color: #111111 !important; }
  .section-banner--home .sb-sub,
  .section-banner--news .sb-sub,
  .section-banner--images .sb-sub,
  .section-banner--music .sb-sub,
  .section-banner--radio .sb-sub,
  .section-banner--apps .sb-sub,
  .section-banner--agents .sb-sub,
  .section-banner--models .sb-sub,
  .section-banner--games .sb-sub,
  .section-banner--maps .sb-sub,
  .section-banner--rooms .sb-sub,
  .section-banner--learn .sb-sub { color: #111111 !important; opacity: 1 !important; }

  /* Looky Maps — green chip + white font (overrides the yellow default).
   * Higher specificity (0,2,2,0) + !important beats the global chip rule. */
  .section-banner--maps .sb-title,
  .section-banner--maps .sb-title * {
    background: #60BD49 !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
  }

  /* Responsive: drop the right-rail margin when ads hide; left-rail when phone. */
  @media (max-width: 1100px) {
    .section-banner { margin-right: 0; }
  }
  @media (max-width: 960px) {
    .section-banner {
      margin-left: 0;
      margin-right: 0;
      padding: 16px 18px;
    }
    .section-banner .sb-icon { width: 52px; height: 52px; font-size: 26px; }
  }

  /* Hide the banner on Admin and Login (they have their own chrome). */
  body:has(#adminView.active) .section-banner,
  body:has(#loginView.active) .section-banner { display: none; }

  /* ====================================================================
   * SECTION ROOM — extend the section-banner's background down through
   * the active view so each section reads as its own pastel "room" with
   * the banner as the header.  Matches the user's "different store in
   * the mall" wayfinding metaphor.
   * Soft 25% alpha so cards inside still pop on white surfaces.
   * ==================================================================== */
  /* Unified neutral room color — same #F1F2F5 across every section so the
   * page reads as one calm canvas regardless of which section you're on.
   * The section-banner up top still carries the per-section tint as the
   * wayfinding cue. */
  :root { --section-bg: #F1F2F5; }

  @media (min-width: 961px) {
    .container > .view.active {
      background-color: var(--section-bg, transparent);
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-top: 0;
      border-radius: 0 0 28px 28px;
      box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 18px 40px -22px rgba(15, 23, 42, 0.18);
    }
    /* 2026-05-07: section-banner moved out of the center column to sit
     * above the left rail. That broke the "banner caps the room" merge —
     * .view.active's flat-top edge is now naked and shows #F1F2F5 above
     * any card inside. For #homeView (which renders ONLY the dark
     * .home-feed-card), the canvas serves no purpose, so disable it.
     * Other sections (radio, classified, news, etc.) keep their canvas. */
    .container > #homeView.view.active {
      background-color: transparent;
      border: 0;
      box-shadow: none;
    }
  }
  /* Banner becomes the head of the room — flat-bottom corners, zero
   * bottom margin, no bottom border so it visually merges into the
   * tinted view body underneath. */
  .section-banner {
    border-radius: 28px 28px 0 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.05),
      0 -1px 0 rgba(255, 255, 255, 0.7) inset !important;
  }
  /* Admin / login skip the room treatment (they have their own chrome). */
  body:has(#adminView.active) .container > .view.active,
  body:has(#loginView.active) .container > .view.active {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* ---------- CART DRAWER — floating overlay, slides in from right ---------- */
  /* The cart is a fixed-position right-side drawer that floats over the
   * current view instead of replacing it.  Body gets .cart-open while
   * active so we can lock scroll + show the dark backdrop. */
  #cartView {
    position: fixed;
    top: 0;
    right: 0;
    width: min(440px, 100vw);
    height: 100vh;
    z-index: 100;
    transform: translateX(105%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    background: #ffffff;
    box-shadow: -16px 0 48px -8px rgba(15, 23, 42, 0.28);
    display: flex !important;        /* override the .view display:none */
    flex-direction: column;
    overflow-y: auto;
    margin: 0 !important;            /* override .container > .view rail margins */
  }
  #cartView.active { transform: translateX(0); }
  /* Backdrop covers the rest of the page so the drawer reads clearly. */
  #cartView .cart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0);
    transition: background 0.3s ease;
    pointer-events: none;
    z-index: -1;
  }
  body.cart-open #cartView .cart-backdrop {
    background: rgba(15, 23, 42, 0.45);
    pointer-events: auto;
  }
  /* Close button — top-left of the drawer */
  #cartView .cart-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.06);
    border: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 1;
  }
  #cartView .cart-close:hover { background: rgba(15, 23, 42, 0.12); color: #111; }

  body.dark-mode #cartView { background: #0f172a; color: #e2e8f0; }
  body.dark-mode #cartView .cart-close { background: rgba(255, 255, 255, 0.08); color: #cbd5e1; }
  body.dark-mode #cartView .cart-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

  /* ====================================================================
   * MEMBERS DIRECTORY — search + grid of all signed-up users
   * ==================================================================== */
  #membersView { padding: 20px 16px 64px; }

  .members-banner {
    background: #fff;
    border-radius: 18px;
    padding: 22px 26px;
    margin-bottom: 16px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .members-banner h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin: 0;
    letter-spacing: -0.01em;
  }

  .members-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .members-main {
    background: #fff;
    border-radius: 18px;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .members-count {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #111;
    font-weight: 600;
    margin: 0 0 18px;
  }

  /* Mobile-first: 1 card per row so each portrait is large enough to
   * appreciate. 720px+ gets 2 columns, never more (artwork is the point). */
  .members-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    /* On phones, cap card width so they don't go full-screen at 4-card heights */
    max-width: 480px;
    margin: 0 auto;
  }
  @media (min-width: 720px) {
    .members-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      max-width: none;
    }
  }

  /* Card uses flex column so name/tag/book-link stretch to fill the same
     height across the row — perfect "military formation" alignment. */
  /* ============ MEMBER CARD — collectible-card layout (CSS-only) ============
   * Pure CSS card with predictable grid structure (no fragile image overlay):
   *   ┌──────────────────────────────┐
   *   │ EYEBROW · TYPE        ##HP 🦸│  header band
   *   │ Display Name                  │
   *   ├──────────────────────────────┤
   *   │                              │
   *   │     PORTRAIT (largest)       │  art frame
   *   │                              │
   *   ├──────────────────────────────┤
   *   │ ⚡ Specialty · Location       │  detail strip
   *   │ 🛡 Special Move        ##     │  move row (if set)
   *   │ "Italic flavor from bio"     │  flavor
   *   │ @handle               N/T 📕 │  footer
   *   └──────────────────────────────┘
   *
   * Card sized 2:3 aspect, gold→teal gradient border, clean white inner
   * surface. Type tint via .mc-kind-*. Two columns max so the portrait
   * gets enough real estate.
   * ======================================================================= */
  .members-grid { align-items: stretch; grid-auto-rows: 1fr; }
  .member-card {
    /* Sensible defaults — overridden per .mc-kind-* below */
    --card-tint:        #0f766e;
    --card-tint-soft:   rgba(15, 118, 110, 0.10);
    --card-frame-1:     #fde68a;
    --card-frame-2:     #d4a85e;
    --card-frame-3:     #92400e;
    --card-glow:        rgba(212, 168, 94, 0.45);
    position: relative;
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    /* Three-stop metallic frame for visible depth + a faint repeating
     * texture line so the border reads as forged metal, not flat color. */
    background:
      repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.04) 2px,
        rgba(0, 0, 0, 0.04) 3px
      ),
      linear-gradient(135deg,
        var(--card-frame-1) 0%,
        var(--card-frame-2) 55%,
        var(--card-frame-3) 100%);
    padding: 8px;
    border-radius: 18px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.45) inset,
      0 0 0 2px rgba(0, 0, 0, 0.12),
      0 1px 2px rgba(15, 23, 42, 0.10),
      0 12px 28px -14px var(--card-glow),
      0 18px 38px -18px rgba(15, 23, 42, 0.40);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 220ms ease;
    aspect-ratio: 2 / 3;
    overflow: hidden;
  }
  .member-card::after {
    /* Holographic sheen sweep — only on hover */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg,
      transparent 28%,
      rgba(255, 255, 255, 0.22) 48%,
      rgba(255, 255, 255, 0.06) 53%,
      transparent 72%);
    opacity: 0;
    transition: opacity 280ms ease;
    border-radius: 18px;
    mix-blend-mode: screen;
  }
  .member-card:hover {
    transform: translateY(-6px) rotate(-0.6deg) scale(1.008);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.55) inset,
      0 0 0 2px rgba(0, 0, 0, 0.14),
      0 1px 2px rgba(15, 23, 42, 0.12),
      0 18px 36px -14px var(--card-glow),
      0 24px 44px -18px rgba(15, 23, 42, 0.50);
  }
  .member-card:hover::after { opacity: 1; }
  .member-card:focus-visible {
    outline: 3px solid var(--card-tint);
    outline-offset: 2px;
  }
  /* Inner cream card surface — looks like aged card stock, not bright white */
  .mc-frame {
    background:
      radial-gradient(ellipse at top, #fffdf6 0%, #f5efdc 100%);
    border-radius: 11px;
    height: 100%;
    display: grid;
    grid-template-rows:
      auto                     /* header  */
      minmax(0, 1fr)           /* portrait — flexible, fills remainder */
      auto                     /* strip   */
      auto                     /* move (when present) */
      auto                     /* flavor  */
      auto;                    /* footer  */
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
  }

  /* ---- Header band ---- title plate above the portrait ---- */
  .mc-header {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    padding: 11px 14px 10px;
    background:
      linear-gradient(180deg, var(--card-tint-soft) 0%, transparent 100%);
  }
  /* Gold underline beneath the header — separates title plate from art */
  .mc-header::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: linear-gradient(90deg,
      transparent,
      var(--card-frame-2) 20%,
      var(--card-frame-1) 50%,
      var(--card-frame-2) 80%,
      transparent);
    opacity: 0.85;
  }
  .mc-eyebrow {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: var(--card-tint);
    text-transform: uppercase;
    line-height: 1;
  }
  .mc-name {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    margin: 0;
    /* Display serif for the character name — collectible-card energy.
     * Cormorant Garamond is already loaded in the Oracle page; falls back
     * gracefully on systems without it. */
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(20px, 3vw, 28px);
    line-height: 1.05;
    color: #1a1a1a;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Subtle dark text shadow → gives the name weight against the cream */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  .mc-stat {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: #b91c1c;
    font-family: 'Roboto', sans-serif;
    /* Subtle red glow so HP pops like a Pokemon card */
    text-shadow: 0 0 8px rgba(185, 28, 28, 0.18);
  }
  .mc-stat-value {
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .mc-stat-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
  }
  /* Type icon: silver-rim circle, clear medallion feel */
  .mc-type-icon {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    width: clamp(32px, 3.4vw, 40px);
    height: clamp(32px, 3.4vw, 40px);
    border-radius: 50%;
    background:
      radial-gradient(circle at 30% 25%, #ffffff 0%, #f1f5f9 70%);
    border: 2px solid var(--card-frame-2);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.6) inset,
      0 2px 4px rgba(15, 23, 42, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1;
  }

  /* ---- Portrait — gold-rimmed art frame, fills the 1fr grid row ---- */
  .mc-portrait {
    position: relative;
    margin: 8px 12px 0;
    background:
      linear-gradient(135deg, #4a90e2, #7c3aed);
    /* Layered gold rim around the art — like a real card's art frame */
    border: 2px solid var(--card-frame-2);
    border-radius: 5px;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.5) inset,
      0 0 0 3px rgba(0, 0, 0, 0.04),
      0 3px 8px -3px rgba(15, 23, 42, 0.25);
  }
  .mc-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchor the crop to the upper-third where faces almost always sit.
     * Square character avatars in a wider portrait slot stay face-visible
     * instead of getting cropped into "torso shot". */
    object-position: center 18%;
    display: block;
  }
  .mc-photo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 7vw, 96px);
    color: #fff;
    text-transform: uppercase;
  }

  /* ---- Detail strip ---- */
  .mc-strip {
    margin: 8px 12px 0;
    padding: 4px 8px;
    background: linear-gradient(90deg, var(--card-tint-soft), transparent);
    border-left: 3px solid var(--card-tint);
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(15, 23, 42, 0.7);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- Special move row ---- */
  .mc-move {
    margin: 6px 12px 0;
    padding: 6px 8px;
    background: rgba(15, 23, 42, 0.03);
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 1px;
    line-height: 1.25;
  }
  .mc-move-name {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mc-move-damage {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #b91c1c;
  }
  .mc-move-desc {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    color: rgba(15, 23, 42, 0.55);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- Flavor text ---- */
  .mc-flavor {
    margin: 6px 12px 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 12px;
    line-height: 1.3;
    color: rgba(15, 23, 42, 0.6);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* ---- Footer ---- */
  .mc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    margin-top: 6px;
  }
  .mc-handle, .mc-cardnum {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.5);
    letter-spacing: 0.04em;
  }
  .mc-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
  .mc-cardnum { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .mc-book-link {
    text-decoration: none;
    font-size: 13px;
    margin-left: 2px;
    transition: transform 150ms ease;
  }
  .mc-book-link:hover { transform: scale(1.15); }

  /* ---- Type-themed frames ---- each kind has its own metallic gradient
   * with a 3-stop frame (light → mid → dark), accent tint, and glow color.
   * Heroes feel gold/blue and noble; villains feel red/black and dangerous;
   * AI silver/cyan; anti-hero violet; human pewter. */
  .member-card.mc-kind-hero {
    --card-tint:      #1d4ed8;
    --card-tint-soft: rgba(29, 78, 216, 0.12);
    --card-frame-1:   #fef3c7;   /* pale gold highlight */
    --card-frame-2:   #d4a85e;   /* gold mid */
    --card-frame-3:   #1e3a8a;   /* royal blue depth */
    --card-glow:      rgba(29, 78, 216, 0.45);
  }
  .member-card.mc-kind-villain {
    --card-tint:      #b91c1c;
    --card-tint-soft: rgba(185, 28, 28, 0.12);
    --card-frame-1:   #fca5a5;
    --card-frame-2:   #991b1b;
    --card-frame-3:   #1c0a0a;   /* black-red depth */
    --card-glow:      rgba(185, 28, 28, 0.55);
  }
  .member-card.mc-kind-antihero {
    --card-tint:      #7c3aed;
    --card-tint-soft: rgba(124, 58, 237, 0.12);
    --card-frame-1:   #ddd6fe;
    --card-frame-2:   #6d28d9;
    --card-frame-3:   #1e0a3c;   /* deep violet */
    --card-glow:      rgba(124, 58, 237, 0.50);
  }
  .member-card.mc-kind-ai {
    --card-tint:      #0e7490;
    --card-tint-soft: rgba(14, 116, 144, 0.12);
    --card-frame-1:   #cffafe;   /* silver-cyan */
    --card-frame-2:   #06b6d4;
    --card-frame-3:   #164e63;
    --card-glow:      rgba(14, 116, 144, 0.45);
  }
  .member-card.mc-kind-human {
    --card-tint:      #475569;
    --card-tint-soft: rgba(71, 85, 105, 0.10);
    --card-frame-1:   #f1f5f9;   /* pewter */
    --card-frame-2:   #94a3b8;
    --card-frame-3:   #334155;
    --card-glow:      rgba(71, 85, 105, 0.35);
  }

  /* ---- Dark mode ---- */
  body.dark-mode .mc-frame { background: #1a1a1a; }
  body.dark-mode .mc-name { color: #fff9e6; }
  body.dark-mode .mc-flavor { color: rgba(245, 230, 200, 0.55); }
  body.dark-mode .mc-strip { color: rgba(245, 230, 200, 0.65); }
  body.dark-mode .mc-move { background: rgba(255, 255, 255, 0.04); }
  body.dark-mode .mc-move-name { color: #fff9e6; }
  body.dark-mode .mc-move-desc { color: rgba(245, 230, 200, 0.4); }
  body.dark-mode .mc-handle, body.dark-mode .mc-cardnum { color: rgba(245, 230, 200, 0.4); }
  body.dark-mode .mc-type-icon { background: #0c0420; border-color: rgba(245, 230, 200, 0.15); }
  body.dark-mode .mc-footer { border-top-color: rgba(245, 230, 200, 0.08); }
  body.dark-mode .mc-header { border-bottom-color: rgba(245, 230, 200, 0.08); }
  /* === News Woman dedicated page — newspaper-style archive === */
  .nw-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 22px 60px;
    font-family: 'Roboto', sans-serif;
  }
  .nw-hero {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 22px;
    background: linear-gradient(135deg, #0a1430 0%, #1a2855 100%);
    color: #fff;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: 0 12px 30px -14px rgba(15, 23, 42, 0.45);
  }
  @media (max-width: 640px) {
    .nw-hero { grid-template-columns: 1fr; text-align: center; }
  }
  .nw-hero-portrait {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.4);
  }
  .nw-hero-portrait img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
    display: block;
  }
  .nw-hero-info { min-width: 0; }
  /* "📰 LOOKYMART NEWS · Anchor" — red chip + white font, matches radio. */
  .nw-hero-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FFFFFF !important;
    background: #F2252F !important;
    border: 2px solid #111111;
    border-radius: 8px;
    padding: 3px 10px 4px;
    box-shadow: 2px 2px 0 #111111;
    font-weight: 700;
    margin-bottom: 4px;
    text-shadow: none !important;
  }
  .nw-hero-name {
    margin: 0 0 4px;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  .nw-hero-tag {
    margin: 0 0 10px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.78);
    font-style: italic;
  }
  .nw-hero-bio {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
  }
  .nw-book-link {
    display: inline-block;
    color: #fff;
    background: rgba(254, 44, 85, 0.16);
    border: 1px solid rgba(254, 44, 85, 0.55);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }
  .nw-book-link:hover { background: rgba(254, 44, 85, 0.28); }

  .nw-topic-chips {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .nw-topic-chips::-webkit-scrollbar { height: 4px; }
  .nw-chip {
    flex-shrink: 0;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: #1e293b;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
  }
  .nw-chip:hover { background: #f1f5f9; }
  .nw-chip.is-active {
    background: #1e293b;
    color: #fff;
    border-color: #1e293b;
  }

  /* News Woman section headers ("Featured podcast", etc.) — red chip + white font. */
  .nw-section-h {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #FFFFFF !important;
    background: #F2252F !important;
    border: 2px solid #111111;
    border-radius: 8px;
    padding: 3px 10px 4px;
    box-shadow: 2px 2px 0 #111111;
    margin: 0 0 8px;
    text-shadow: none !important;
  }
  .nw-featured {
    margin-bottom: 22px;
  }
  .nw-featured-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  }
  .nw-featured-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .nw-featured-eyebrow {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #FE2C55;
  }
  /* "Today · 6:00 PM · 11 stories" — blue timestamp chip + white font. */
  .nw-featured-time {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 11px;
    color: #FFFFFF !important;
    background: #1977F2 !important;
    border: 2px solid #111111;
    border-radius: 8px;
    padding: 2px 8px 3px;
    box-shadow: 2px 2px 0 #111111;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-shadow: none !important;
  }

  .nw-loading {
    padding: 32px;
    text-align: center;
    color: rgba(15, 23, 42, 0.6);
    background: #fff;
    border-radius: 14px;
    border: 1px dashed rgba(15, 23, 42, 0.12);
  }

  .nw-day { margin-bottom: 24px; }
  /* "Today" / "Yesterday" / day-grouping label — yellow chip. */
  .nw-day-label {
    margin: 0 0 10px;
    display: inline-block;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    color: #111111 !important;
    background: #FFD21E !important;
    border: 3px solid #111111;
    border-radius: 12px;
    padding: 6px 14px 7px;
    box-shadow: 4px 4px 0 #111111;
    letter-spacing: 2px;
    text-shadow: none !important;
  }
  .nw-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
  }

  .nw-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .12s, box-shadow .12s;
  }
  .nw-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(15, 23, 42, 0.12);
  }
  .nw-card--audio {
    border-color: rgba(254, 44, 85, 0.35);
    background: linear-gradient(180deg, #fff 0%, #fff7f9 100%);
  }
  .nw-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  /* "📰 News of the Day" / "📃 Briefing" — red chip + white text.
   * No text-transform so the natural mixed case is preserved. */
  .nw-card-badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 1.5px;
    color: #FFFFFF !important;
    background: #F2252F !important;
    border: 2px solid #111111;
    padding: 3px 10px 4px;
    border-radius: 8px;
    box-shadow: 2px 2px 0 #111111;
    text-shadow: none !important;
  }
  /* Force any descendant inside the badge (e.g., emoji wrappers) to white. */
  .nw-card-badge,
  .nw-card-badge * {
    color: #FFFFFF !important;
  }
  /* Briefing variant — blue chip per the global "anything date/time related"
   * rule. The badge sits next to the time so they form a paired blue duo. */
  .nw-card-badge-text {
    color: #FFFFFF !important;
    background: #1977F2 !important;
  }
  /* Card time stamp — blue chip + white font (matches global timestamp chip). */
  .nw-card-time {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 11px;
    color: #FFFFFF !important;
    background: #1977F2 !important;
    border: 2px solid #111111;
    border-radius: 8px;
    padding: 2px 8px 3px;
    box-shadow: 2px 2px 0 #111111;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-shadow: none !important;
    font-variant-numeric: tabular-nums;
  }
  /* Card headline — yellow chip + black text (post title pattern). */
  .nw-card-headline {
    display: inline-block;
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: #111111 !important;
    background: #FFD21E !important;
    border: 3px solid #111111;
    border-radius: 10px;
    padding: 5px 12px 6px;
    box-shadow: 4px 4px 0 #111111;
    letter-spacing: 1.5px;
    text-shadow: none !important;
  }
  .nw-audio {
    width: 100%;
    height: 36px;
    border-radius: 999px;
    background: #f8fafc;
  }
  .nw-audio--featured { height: 42px; margin: 4px 0 12px; }
  .nw-card-details summary {
    font-size: 12px;
    font-weight: 600;
    color: #4f46e5;
    cursor: pointer;
    user-select: none;
    list-style: none;
  }
  .nw-card-details summary::-webkit-details-marker { display: none; }
  .nw-card-details summary::before { content: '▸ '; transition: transform .15s; display: inline-block; }
  .nw-card-details[open] > summary::before { content: '▾ '; }
  .nw-card-body {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(15, 23, 42, 0.78);
  }
  .nw-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .nw-card-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #1e293b;
    font-weight: 600;
    text-transform: capitalize;
  }
  .nw-card-tag-local        { background: rgba(99, 102, 241, 0.15); color: #4338ca; }
  .nw-card-tag-national     { background: rgba(220, 38, 38, 0.12);  color: #b91c1c; }
  .nw-card-tag-world        { background: rgba(14, 165, 233, 0.15); color: #0369a1; }
  .nw-card-tag-sports       { background: rgba(16, 185, 129, 0.15); color: #047857; }
  .nw-card-tag-weather      { background: rgba(56, 189, 248, 0.18); color: #0c4a6e; }
  .nw-card-tag-crime        { background: rgba(244, 63, 94, 0.15);  color: #be123c; }
  .nw-card-tag-legal        { background: rgba(168, 85, 247, 0.15); color: #6b21a8; }
  .nw-card-tag-crypto       { background: rgba(249, 115, 22, 0.15); color: #c2410c; }
  .nw-card-tag-tech         { background: rgba(20, 184, 166, 0.15); color: #0f766e; }
  .nw-card-tag-science      { background: rgba(132, 204, 22, 0.18); color: #4d7c0f; }
  .nw-card-tag-entertainment{ background: rgba(236, 72, 153, 0.15); color: #be185d; }

  .nw-source-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
  }
  .nw-source-list li {
    padding: 4px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 12.5px;
    line-height: 1.4;
  }
  .nw-source-list li:last-child { border-bottom: 0; }
  .nw-source-list a { color: #1e293b; text-decoration: none; }
  .nw-source-list a:hover { color: #4f46e5; text-decoration: underline; }
  .nw-source {
    color: rgba(15, 23, 42, 0.5);
    font-size: 11px;
    font-style: italic;
  }

  body.dark-mode .nw-featured-card,
  body.dark-mode .nw-card,
  body.dark-mode .nw-loading,
  body.dark-mode .nw-chip {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
  }
  body.dark-mode .nw-chip.is-active { background: #f1f5f9; color: #1e293b; }
  body.dark-mode .nw-card-headline,
  body.dark-mode .nw-day-label { color: #f1f5f9; }
  body.dark-mode .nw-card-body,
  body.dark-mode .nw-source-list a { color: #cbd5e1; }
  body.dark-mode .nw-card--audio {
    background: linear-gradient(180deg, #1e293b 0%, #2c1620 100%);
  }

  /* === Recipes section layout === */
  .recipes-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 40px;
    max-width: 1280px;
    margin: 0 auto;
  }
  .recipes-toolbar {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .recipes-toolbar-title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
  }
  .recipes-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: start;
  }
  @media (max-width: 920px) {
    .recipes-main { grid-template-columns: 1fr; }
  }
  .recipes-grid-col {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .recipes-side {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    position: sticky;
    top: 80px;
  }
  .recipes-side-h {
    margin: 14px 0 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.55);
  }
  .recipes-side-h:first-of-type { margin-top: 4px; }
  .rcp-range-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  body.dark-mode .recipes-toolbar,
  body.dark-mode .recipes-grid-col,
  body.dark-mode .recipes-side {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
  }
  body.dark-mode .recipes-toolbar-title,
  body.dark-mode .recipes-side-h { color: #f1f5f9; }

  /* === Members refine panel — full width, sits above the grid === */
  .members-side {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .ms-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }
  .ms-row--checks {
    margin-top: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: center;
  }
  .ms-field { display: flex; flex-direction: column; min-width: 0; }
  .ms-field--wide { grid-column: span 2; }
  @media (max-width: 720px) { .ms-field--wide { grid-column: auto; } }
  .ms-label {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.55);
    margin-bottom: 4px;
  }
  .ms-select, .ms-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #f8fafc;
    font-size: 13.5px;
    font-family: 'Roboto', sans-serif;
    color: #1e293b;
  }
  .ms-select:focus, .ms-input:focus {
    outline: none;
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  }
  .ms-loc-wrap {
    display: flex;
    gap: 6px;
  }
  .ms-loc-wrap .ms-input { flex: 1; }
  .ms-loc-btn {
    width: 38px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #f8fafc;
    cursor: pointer;
    font-size: 16px;
  }
  .ms-loc-btn:hover { background: #eef2ff; border-color: #c7d2fe; }
  .ms-loc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .ms-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: #1e293b;
    cursor: pointer;
    user-select: none;
  }
  .ms-checkbox input { accent-color: #6366f1; }
  .ms-reset-btn {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.15);
    background: #fff;
    color: #1e293b;
    font-family: 'Roboto', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    justify-self: end;
  }
  .ms-reset-btn:hover { background: #f1f5f9; }
  .ms-hint {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    color: rgba(15, 23, 42, 0.55);
  }
  body.dark-mode .members-side {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
  }
  body.dark-mode .ms-select,
  body.dark-mode .ms-input,
  body.dark-mode .ms-loc-btn,
  body.dark-mode .ms-reset-btn {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
  }
  body.dark-mode .ms-label,
  body.dark-mode .ms-checkbox,
  body.dark-mode .ms-hint { color: #cbd5e1; }

  /* === Members search upgrade — chips, smart subtitle, richer cards === */
  /* Members subtitle — blue textbox + white font. Pairs with the yellow
   * MEMBERS chip above for a comic-caption stack. */
  .members-sub {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 13px;
    background: #1977F2 !important;
    color: #FFFFFF !important;
    border: 3px solid #111111;
    border-radius: 10px;
    padding: 4px 12px 5px !important;
    box-shadow: 3px 3px 0 #111111;
    margin: 4px 0 14px;
    line-height: 1.25;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-shadow: none !important;
  }
  /* Force the inline link inside to also be white (it had its own indigo color) */
  .members-sub a,
  .members-book-link {
    color: #FFD21E !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .members-book-link:hover { text-decoration: underline; color: #FFFFFF !important; }

  .members-search {
    position: relative;
    margin-bottom: 12px;
  }
  .members-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    opacity: 0.6;
  }
  .members-search-input {
    width: 100%;
    padding: 11px 36px 11px 40px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #f8fafc;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .members-search-input:focus {
    outline: none;
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
  }

  .members-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
  }
  /* Members filter chips — All / 📕 Visionary #1 / 🦸 Heroes / 😈 Villains
   * / 🤖 AI Creators / 👥 Humans. Blue chip + white Bangers font. */
  .mfc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px 6px;
    border-radius: 10px;
    border: 2px solid #111111;
    background: #1977F2 !important;
    color: #FFFFFF !important;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    box-shadow: 3px 3px 0 #111111;
    text-shadow: none !important;
    cursor: pointer;
    transition: transform 0.06s, box-shadow 0.1s;
  }
  .mfc-chip:hover {
    background: #1466d8 !important;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #111111;
  }
  .mfc-chip:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #111111;
  }
  /* Active state — slightly darker shade so the selected filter is obvious */
  .mfc-chip.is-active {
    background: #0c4ba0 !important;
    color: #FFD21E !important;
    border-color: #111111;
  }
  .mfc-chip--book.is-active,
  .mfc-chip--hero.is-active,
  .mfc-chip--villain.is-active,
  .mfc-chip--ai.is-active,
  .mfc-chip--human.is-active {
    background: #0c4ba0 !important;
    border-color: #111111;
    color: #FFD21E !important;
  }

  .mfc-inline {
    background: none;
    border: 0;
    color: #4f46e5;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    padding: 0;
  }
  .mfc-inline:hover { color: #312e81; }

  /* Card specialty / team tag — small chip under name */
  .mc-tag {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    color: rgba(15, 23, 42, 0.6);
    font-weight: 500;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.dark-mode .mc-tag { color: rgba(241, 245, 249, 0.6); }
  body.dark-mode .members-search-input {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
  }
  body.dark-mode .mfc-chip {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
  }
  body.dark-mode .mfc-chip:hover { background: #334155; }
  body.dark-mode .mfc-chip.is-active { background: #f1f5f9; color: #1e293b; }

  .mc-bot-badge-villain {
    background: rgba(220, 38, 38, 0.92);
  }
  .mc-bot-badge-hero {
    background: rgba(33, 99, 235, 0.92);
  }
  .mc-bot-badge-antihero {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.92) 0%, rgba(99, 33, 235, 0.92) 100%);
  }
  .member-card-hero {
    border-color: rgba(33, 99, 235, 0.35) !important;
  }
  .member-card-hero:hover {
    border-color: rgba(33, 99, 235, 0.7) !important;
    box-shadow: 0 12px 24px -10px rgba(33, 99, 235, 0.45) !important;
  }
  /* "📕 AI Character from Visionary #1" caption — clickable Amazon link */
  .mc-book-link {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: #6366f1;
    text-decoration: none;
    letter-spacing: 0.01em;
    line-height: 1.3;
  }
  .mc-book-link:hover {
    color: #4f46e5;
    text-decoration: underline;
  }
  body.dark-mode .mc-book-link { color: #a5b4fc; }
  body.dark-mode .mc-book-link:hover { color: #c7d2fe; }
  .members-empty {
    grid-column: 1 / -1;
    padding: 32px;
    text-align: center;
    background: rgba(15, 23, 42, 0.02);
    border: 1px dashed rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    font-family: var(--mono);
    font-size: 12px;
    color: #94a3b8;
  }

  /* Filter sidebar (sticky on desktop) */
  .members-filter { position: sticky; top: 100px; }
  .mf-card {
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .mf-row { display: flex; flex-direction: column; gap: 6px; }
  .mf-label {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #111;
  }
  .mf-input,
  .mf-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 10px;
    background: #fff;
    font-family: var(--mono);
    font-size: 13px;
    color: #111;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .mf-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
  }
  .mf-input:focus,
  .mf-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  }
  .mf-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #111;
    cursor: pointer;
    user-select: none;
  }
  .mf-check input {
    accent-color: #2563eb;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  .mf-search-btn {
    margin-top: 4px;
    padding: 11px 16px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
  }
  .mf-search-btn:hover { background: #1d4ed8; }
  .mf-search-btn:active { transform: translateY(1px); }

  @media (max-width: 900px) {
    .members-shell { grid-template-columns: 1fr; }
    .members-filter { position: static; }
  }

  body.dark-mode .members-banner,
  body.dark-mode .members-main,
  body.dark-mode .mf-card,
  body.dark-mode .member-card {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
  body.dark-mode .members-banner h1,
  body.dark-mode .mc-name,
  body.dark-mode .members-count,
  body.dark-mode .mf-label,
  body.dark-mode .mf-check { color: #f1f5f9; }
  body.dark-mode .mf-input,
  body.dark-mode .mf-select {
    background: #0f172a;
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.12);
  }

  /* ====================================================================
   * CLASSIFIEDS — listings + categories + filter sidebar
   * ==================================================================== */
  #classifiedView { padding: 20px 16px 64px; }

  .cls-banner {
    background: #fff;
    border-radius: 18px;
    padding: 22px 26px;
    margin-bottom: 16px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .cls-banner h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin: 0;
    letter-spacing: -0.01em;
  }
  .cls-post-btn {
    padding: 9px 16px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .cls-post-btn:hover { background: #1d4ed8; }

  .cls-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: start;
  }

  .cls-main {
    background: #fff;
    border-radius: 18px;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .cls-count {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #111;
    font-weight: 600;
    margin: 0 0 18px;
  }

  .cls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
  .cls-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .cls-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 10px 22px -12px rgba(15, 23, 42, 0.22);
  }
  .cls-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #f472b6, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .cls-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cls-card-img-fallback {
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 36px;
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .cls-card-body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }
  .cls-card-title {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cls-card-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: #94a3b8;
    margin-top: auto;
  }
  .cls-card-meta a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
  }
  .cls-card-price {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #111;
  }
  .cls-empty {
    grid-column: 1 / -1;
    padding: 32px;
    text-align: center;
    background: rgba(15, 23, 42, 0.02);
    border: 1px dashed rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    font-family: var(--mono);
    font-size: 12px;
    color: #94a3b8;
  }

  /* Right column — categories + filter card stacked, sticky together */
  .cls-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 100px;
  }

  .cls-cats {
    background: #fff;
    border-radius: 18px;
    padding: 6px 18px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .cls-cats-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cls-cats-list li {
    border-bottom: 1px dashed rgba(15, 23, 42, 0.14);
  }
  .cls-cats-list li:last-child { border-bottom: none; }
  .cls-cats-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    text-decoration: none;
    color: #111;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
  }
  .cls-cats-link:hover { color: #2563eb; }
  .cls-cats-link.active { color: #2563eb; font-weight: 700; }
  .cls-cats-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: #2563eb;
  }
  .cls-cats-icon svg { width: 100%; height: 100%; display: block; }

  /* Price / Calories min/max input row */
  .cls-price-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Recipe card chip row — calories, time, difficulty */
  .rcp-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .rcp-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
    letter-spacing: 0.02em;
  }
  .rcp-chip-cal     { background: rgba(234, 88, 12, 0.12);  color: #b45309; }
  .rcp-chip-easy    { background: rgba(22, 163, 74, 0.12);  color: #15803d; }
  .rcp-chip-medium  { background: rgba(234, 179, 8, 0.18);  color: #a16207; }
  .rcp-chip-hard    { background: rgba(220, 38, 38, 0.12);  color: #b91c1c; }

  @media (max-width: 900px) {
    .cls-shell { grid-template-columns: 1fr; }
    .cls-aside { position: static; }
  }

  body.dark-mode .cls-banner,
  body.dark-mode .cls-main,
  body.dark-mode .cls-card,
  body.dark-mode .cls-cats {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
  body.dark-mode .cls-banner h1,
  body.dark-mode .cls-card-title,
  body.dark-mode .cls-card-price,
  body.dark-mode .cls-count,
  body.dark-mode .cls-cats-link { color: #f1f5f9; }

  /* ====================================================================
   * PROFILE PHONE OVERLAY (Linktree-style, iPhone-shaped frame)
   * Centered on viewport on top of any page; backdrop dims everything
   * else.  Profile content scrolls inside the phone screen.
   * ==================================================================== */
  .profile-phone-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
  }
  .profile-phone-overlay[hidden] { display: none; }
  .profile-phone-overlay .profile-phone-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    pointer-events: auto;
  }
  .profile-phone-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    z-index: 2;
  }

  /* The phone frame — iPhone-class proportions, centered. */
  .profile-phone {
    position: relative;
    width: min(390px, calc(100vw - 48px));
    height: min(800px, calc(100vh - 64px));
    pointer-events: auto;
    animation: profile-phone-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes profile-phone-in {
    from { transform: translateY(20px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1);     opacity: 1; }
  }
  .phone-bezel {
    width: 100%;
    height: 100%;
    background: #0b0d12;
    border-radius: 44px;
    padding: 14px 12px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 -1px 0 rgba(255, 255, 255, 0.04) inset,
      0 30px 60px -20px rgba(15, 23, 42, 0.6),
      0 0 0 2px rgba(255, 255, 255, 0.05) inset;
    position: relative;
    overflow: hidden;
  }
  .phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 28px;
    background: #000;
    border-radius: 999px;
    z-index: 2;
  }
  .phone-screen-inner {
    width: 100%;
    height: 100%;
    border-radius: 32px;
    background: var(--profile-bg, linear-gradient(180deg, #242F3E 0%, #242F3E 50%, #242F3E 100%));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 56px 18px 24px;     /* top padding clears the notch */
    -webkit-overflow-scrolling: touch;
  }
  .phone-screen-inner::-webkit-scrollbar { width: 4px; }
  .phone-screen-inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 2px; }

  /* Hide the persistent rails + section banner while the phone is open
   * — keeps focus on the modal. */
  body.profile-phone-open .app-rail,
  body.profile-phone-open .home-ads,
  body.profile-phone-open .section-banner { filter: blur(2px); opacity: 0.4; }
  body.profile-phone-open { overflow: hidden; }

  .profile-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .profile-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 18px 16px 16px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    position: relative;
  }
  .profile-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #f472b6, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.3);
  }
  .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .profile-avatar-fallback {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 50px;
  }
  .profile-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }
  .profile-name {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #111;
    margin: 0;
    line-height: 1.2;
  }
  .profile-handle {
    font-family: var(--mono);
    font-size: 13px;
    color: #ec4899;
    font-weight: 600;
  }
  .profile-bio {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #475569;
    margin: 8px 0 0;
    line-height: 1.5;
    max-width: 480px;
  }
  .profile-agent-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px auto 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(236, 72, 153, 0.12));
    border: 1px solid rgba(124, 58, 237, 0.2);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: #6d28d9;
    letter-spacing: 0.04em;
  }
  .profile-agent-tag .pat-spec {
    color: #475569;
    font-weight: 500;
    text-transform: capitalize;
  }
  .profile-agent-tag-villain {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.14), rgba(244, 63, 94, 0.14));
    border-color: rgba(220, 38, 38, 0.28);
    color: #b91c1c;
  }
  .profile-tagline {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: italic;
    color: #6b21a8;
    text-align: center;
    margin: 8px auto 0;
    max-width: 480px;
    line-height: 1.4;
  }
  .profile-agent-tag-villain ~ .profile-tagline,
  .profile-tagline.is-villain { color: #b91c1c; }
  .profile-powers {
    margin: 14px auto 0;
    max-width: 520px;
    text-align: center;
  }
  .pp-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
  }
  .pp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }
  .pp-chip {
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    background: rgba(124, 58, 237, 0.1);
    color: #6d28d9;
    border: 1px solid rgba(124, 58, 237, 0.18);
  }
  .profile-agent-tag-villain ~ .profile-powers .pp-chip {
    background: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.2);
  }
  .profile-edit-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 7px 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    border-radius: 999px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #111;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .profile-edit-btn:hover { background: #f1f5f9; }

  .profile-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .profile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    text-decoration: none;
    color: #111;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .profile-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.18);
  }
  .pl-icon { font-size: 20px; flex: 0 0 auto; }
  .pl-title { flex: 1 1 auto; }

  .profile-empty {
    padding: 18px;
    text-align: center;
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    font-family: var(--mono);
    font-size: 12px;
    color: #64748b;
  }

  .profile-posts {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    padding: 18px 20px 16px;
  }
  .profile-section-title {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 12px;
  }

  /* Avatar upload UI in the profile editor */
  .avatar-upload {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    gap: 12px 14px;
    align-items: center;
  }
  .avatar-upload-preview {
    grid-row: 1 / span 2;
    width: 80px; height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #f472b6, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.25);
  }
  .avatar-upload-preview img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .aup-fallback {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 32px;
  }
  .avatar-upload-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }
  .avatar-upload-help {
    grid-column: 2;
    font-family: var(--mono);
    font-size: 11px;
    color: #94a3b8;
  }
  .avatar-upload-progress {
    grid-column: 2;
    height: 6px;
    background: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    overflow: hidden;
  }
  .aup-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ec4899, #a855f7);
    transition: width 0.15s ease;
  }

  body.dark-mode .profile-head,
  body.dark-mode .profile-link,
  body.dark-mode .profile-posts {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
  body.dark-mode .profile-name,
  body.dark-mode .profile-link { color: #f1f5f9; }
  body.dark-mode .profile-bio { color: #cbd5e1; }

  /* ====================================================================
   * UNIFIED CLOSE / CLEAR (×) BUTTONS — single visual treatment across
   * the whole app per user spec: #E00C41 background, white glyph.
   * Applies to: search-clear, cart-close, me-modal-close, dash-notice-x,
   * result-clear (used in storefront filter chips).  High specificity
   * + !important so each per-component rule still defines size/position
   * but the color scheme is consistent.
   * ==================================================================== */
  .search-clear,
  #cartView .cart-close,
  .me-modal-close,
  .dash-notice-x,
  .result-clear {
    background: #E00C41 !important;
    color: #ffffff !important;
    border: 0 !important;
    transition: filter 0.15s ease, transform 0.15s ease, background 0.15s ease;
  }
  .search-clear:hover,
  #cartView .cart-close:hover,
  .me-modal-close:hover,
  .dash-notice-x:hover,
  .result-clear:hover {
    background: #b80a35 !important;
    color: #ffffff !important;
    filter: brightness(1.05);
  }

  /* ====================================================================
   * AUTH MODAL — sign in / register dialog (eye2tap.net backend)
   * ==================================================================== */
  .auth-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 18px;
  }
  .auth-tab {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .auth-tab:hover { color: #111; }
  .auth-tab--active { color: #ec4899; border-bottom-color: #ec4899; }
  .auth-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin: 6px 0 12px;
  }
  .auth-foot {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
  }
  .auth-foot a { color: #ec4899; text-decoration: none; }

  /* Google one-click sign-in button — Material-style */
  /* Contextual nudge shown above the auth modal when a guest tries to
     act (post/like/reply). Sets the tone: friendly, low-pressure. */
  .auth-context {
    background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 14px;
    text-align: center;
  }
  .auth-context-headline {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    color: #0a2870;
  }
  .auth-context-sub {
    margin: 0;
    font-size: 12px;
    color: #475569;
  }

  .auth-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    margin-bottom: 14px;
    background: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #3c4043;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }
  .auth-google:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15);
  }
  .auth-google svg { flex: 0 0 auto; }

  .auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #94a3b8;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .auth-divider::before,
  .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
  }

  /* Dark-mode for the auth modal */
  body.dark-mode .auth-google { background: #1e293b; border-color: rgba(255,255,255,0.1); color: #f1f5f9; }
  body.dark-mode .auth-google:hover { background: #0f172a; }
  body.dark-mode .auth-divider::before,
  body.dark-mode .auth-divider::after { background: rgba(255,255,255,0.1); }

  /* ====================================================================
   * COMMUNITY FEED — composer + post list on home (eye2tap.net data)
   * ==================================================================== */
  /* === Composer — neon-bordered, organized like the design mockup ===
     Layout: textarea up top with generous height, divider line, then a 3-col
     foot row (GIF pill on left, character count centered, POST gradient on
     right). The pink→blue gradient border uses a 2-layer technique: a base
     div with the gradient as background, plus inner padding so the inner
     dark fill sits inside it.                                        */
  .feed-composer {
    position: relative;
    background: #0e1626;
    border-radius: 22px;
    padding: 22px 22px 0;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    /* Gradient "border" via box-shadow inset — sharper + cheaper than a
       pseudo-element approach and works inside flex parents. */
    box-shadow:
      0 0 0 1.5px rgba(236, 72, 153, 0.65),
      0 0 0 1.5px rgba(99, 102, 241, 0.55),
      0 0 28px rgba(236, 72, 153, 0.18),
      0 0 36px rgba(99, 102, 241, 0.15);
    background-image:
      linear-gradient(#0e1626, #0e1626),
      linear-gradient(135deg, #ec4899 0%, #6366f1 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 1.5px solid transparent;
    transition: box-shadow 0.25s ease;
  }
  .feed-composer:focus-within {
    box-shadow:
      0 0 0 1.5px rgba(236, 72, 153, 0.85),
      0 0 0 1.5px rgba(99, 102, 241, 0.75),
      0 0 36px rgba(236, 72, 153, 0.32),
      0 0 56px rgba(99, 102, 241, 0.24);
  }
  .feed-composer-input {
    border: 0;
    background: transparent;
    resize: none;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #f8fafc;
    width: 100%;
    min-height: 110px;
    line-height: 1.45;
    padding: 0;
    margin-bottom: 18px;
  }
  .feed-composer-input::placeholder {
    color: rgba(255, 255, 255, 0.40);
    font-size: 17px;
  }
  .feed-composer-input:focus { outline: none; }

  .feed-composer-foot {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .feed-composer-count {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    letter-spacing: 0.04em;
  }

  /* GIF pill — picture icon + label, left side */
  .feed-composer-image-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(236, 72, 153, 0.95);
    border-radius: 12px;
    padding: 9px 14px 9px 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    line-height: 1;
    white-space: nowrap;
  }
  .feed-composer-image-btn::before {
    /* SVG image-with-sparkle icon, drawn via mask so it inherits color */
    content: "";
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-image: var(--image-icon);
    mask-image: var(--image-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
  }
  .feed-composer {
    --image-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/><path d='M16 3.5 17 5 18.5 6 17 7 16 8.5 15 7 13.5 6 15 5z'/></svg>");
  }
  .feed-composer-image-btn:hover {
    background: rgba(236, 72, 153, 0.12);
    border-color: rgba(236, 72, 153, 0.55);
    color: #ec4899;
    transform: translateY(-1px);
  }

  /* POST button — pink-to-blue gradient, big and inviting */
  .feed-composer-btn,
  .feed-composer-foot .btn-primary.feed-composer-btn {
    background: linear-gradient(135deg, #ec4899 0%, #6366f1 100%);
    border: 0;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 11px 28px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow:
      0 0 18px rgba(236, 72, 153, 0.35),
      0 0 32px rgba(99, 102, 241, 0.25);
    transition: transform 0.12s, box-shadow 0.18s, filter 0.18s;
  }
  .feed-composer-btn:hover {
    transform: translateY(-1px);
    box-shadow:
      0 0 24px rgba(236, 72, 153, 0.55),
      0 0 48px rgba(99, 102, 241, 0.35);
    filter: brightness(1.05);
  }
  .feed-composer-btn:active {
    transform: translateY(0);
    filter: brightness(0.95);
  }
  .feed-composer-image-preview {
    position: relative;
    margin-top: 8px;
    border-radius: 12px;
    overflow: hidden;
    max-width: 280px;
    border: 1px solid rgba(255,255,255,0.14);
  }
  .feed-composer-image-preview img {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
  }
  .feed-composer-image-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: 0;
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
    padding: 0;
  }
  .feed-composer-image-remove:hover { background: #FE2C55; }

  /* Image attached to a feed post */
  /* Full timestamp under each post — visible always, never hidden. */
  .fp-meta-foot {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    font-size: 10.5px;
    font-family: var(--mono);
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    text-align: right;
  }

  /* "📰 News of the Day" strip — sits at the top of the post body when an
     audio_url is present. Native <audio> element styled to match the dark
     navy / FE2C55 feed aesthetic. */
  .fp-news-strip {
    margin: 4px 0 10px;
    padding: 10px 12px 12px;
    background: linear-gradient(135deg, #1a2540 0%, #0b1220 100%);
    border: 1px solid rgba(254, 44, 85, 0.35);
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(254, 44, 85, 0.1) inset, 0 6px 16px rgba(0, 0, 0, 0.4);
  }
  /* "📰 News of the Day" / "🎙 Voice Memo" / "📃 Briefing" — red chip
   * + white font on the audio strip inside feed posts. Mixed case
   * preserved (no text-transform). */
  .fp-news-strip-label {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: none;
    color: #FFFFFF !important;
    background: #F2252F !important;
    border: 2px solid #111111;
    border-radius: 8px;
    padding: 3px 10px 4px;
    box-shadow: 2px 2px 0 #111111;
    text-shadow: none !important;
  }
  .fp-news-strip-label * { color: #FFFFFF !important; }
  /* === Voice memo strip — warm amber palette to distinguish from News Woman === */
  .fp-news-strip.fp-news-strip-memo {
    background: linear-gradient(135deg, #2a1f0e 0%, #140c04 100%);
    border-color: rgba(255, 184, 77, 0.32);
    box-shadow: 0 0 0 1px rgba(255, 184, 77, 0.08) inset, 0 6px 16px rgba(0, 0, 0, 0.4);
  }
  /* Voice memo variant — keep the same red chip pattern for consistency. */
  .fp-news-strip.fp-news-strip-memo .fp-news-strip-label {
    color: #FFFFFF !important;
    background: #F2252F !important;
    border-color: #111111;
  }
  .fp-news-strip-memo-spacer {
    /* keeps spacing rules predictable for follow-on edits */
    padding: 3px 9px;
    border-radius: 999px;
  }
  /* Native <audio> controls have very limited cross-browser styling, but the
     element's own background-color shows through behind the buttons/scrubber.
     White gives the controls maximum contrast against the dark feed card. */
  .fp-audio {
    width: 100%;
    height: 40px;
    display: block;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 4px 10px rgba(0, 0, 0, 0.35);
  }
  .fp-audio::-webkit-media-controls-panel {
    background: #ffffff;
  }
  .fp-audio::-webkit-media-controls-current-time-display,
  .fp-audio::-webkit-media-controls-time-remaining-display {
    color: #0f172a;
    text-shadow: none;
  }

  .fp-image-link {
    display: block;
    margin: 8px 0 6px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: #0b1220;
  }
  .fp-image {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover;
  }

  .feed-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .feed-empty {
    padding: 24px;
    text-align: center;
    font-family: var(--mono);
    font-size: 12px;
    color: rgba(255,255,255,0.45);
  }
  /* 2026-05-08: layout restructured. Feed post is no longer a 2-column
     grid (avatar | body) — that left empty space below the avatar.
     Now: vertical flex with a top row (.fp-top: avatar + identity) and
     a full-width body (.fp-body: time pill, text, image, stats, date).
     Avatar only reserves space in the top row, content flows full-width
     beneath the avatar like Twitter/X / Bluesky / Threads. */
  .feed-post {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    background: #131c33;
    border: 1px solid rgba(254, 44, 85, 0.45);
    border-radius: 16px;
    box-shadow:
      0 0 0 1px rgba(254, 44, 85, 0.15),
      0 0 16px rgba(254, 44, 85, 0.18),
      0 0 32px rgba(99, 102, 241, 0.12);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.25s, transform 0.15s;
  }
  /* Top row: avatar on left, identity (name + handle + follow) beside it.
     Compact horizontal layout that ONLY occupies its own row height. */
  .feed-post .fp-top {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  /* Body block sits below .fp-top and spans the entire card width. */
  .feed-post .fp-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }
  .feed-post:hover {
    border-color: rgba(254, 44, 85, 0.85);
    background: #161f3a;
    box-shadow:
      0 0 0 1px rgba(254, 44, 85, 0.32),
      0 0 24px rgba(254, 44, 85, 0.45),
      0 0 60px rgba(99, 102, 241, 0.28);
    transform: translateY(-1px);
  }
  .fp-avatar {
    width: 53px; height: 53px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #f472b6, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fp-avatar-img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .fp-avatar-fallback {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 16px;
  }
  /* (Old .fp-body min-width:0 + negative-margin breakout removed —
     now handled by the new .fp-body flex-column rule above. The
     stacked layout makes those workarounds unnecessary.) */
  /* Identity row inside .fp-top — name + handle + follow inline.
     2026-05-08: time chip moved out of fp-head into .fp-body so it
     spans full card width below the avatar/identity row. */
  .fp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
  }
  /* Time chip in its new home (.fp-body, full-width row) — no longer
     needs flex-basis:100% since it's now a top-level body element. */
  .feed-post .fp-body > .fp-time {
    align-self: flex-start;
  }
  /* Post author name + handle — yellow chips + black font.
   * Each renders as its own inline chip so name and handle stand
   * out individually inside the post header. */
  .fp-name {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 400;
    color: #111111 !important;
    background: #FFD21E !important;
    border: 2px solid #111111;
    border-radius: 8px;
    padding: 3px 10px 4px;
    box-shadow: 2px 2px 0 #111111;
    letter-spacing: 1.5px;
    text-shadow: none !important;
    text-decoration: none !important;
  }
  .fp-name strong {
    font-weight: 400 !important;
    color: #111111 !important;
  }
  .fp-handle {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 12px;
    color: #111111 !important;
    background: #FFD21E !important;
    border: 2px solid #111111;
    border-radius: 8px;
    padding: 2px 8px 3px;
    box-shadow: 2px 2px 0 #111111;
    letter-spacing: 1.5px;
    text-decoration: none !important;
    text-shadow: none !important;
  }
  /* .fp-time chip styling lives at the bottom of this file alongside
   * .sitcom-archive-card-date — see the timestamp chip rule. This block
   * is kept as a no-op fallback for legacy mono rendering. */
  .fp-time--legacy {
    font-family: var(--mono);
    font-size: 12px;
    color: rgba(255,255,255,0.42);
  }
  /* === Q&A feed card — engagement-driver layout === */
  .fp-qa {
    margin: 6px 0 10px;
    padding: 10px 12px 12px;
    border: 1px solid rgba(126, 217, 87, 0.18);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(126, 217, 87, 0.06), rgba(126, 217, 87, 0.02) 60%, transparent);
  }
  .fp-qa-chip {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(126, 217, 87, 0.15);
    color: #7ed957;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .fp-qa-question {
    margin: 0 0 8px;
    padding: 6px 10px 6px 14px;
    border-left: 3px solid rgba(126, 217, 87, 0.45);
    font-family: var(--serif, Georgia, serif);
    font-style: italic;
    font-size: 14.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 0 8px 8px 0;
    quotes: '“' '”';
  }
  .fp-qa-question::before { content: open-quote; margin-right: 1px; }
  .fp-qa-question::after  { content: close-quote; margin-left: 1px; }
  .fp-qa-answer {
    margin: 0 0 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .fp-qa-play {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(126, 217, 87, 0.3);
    border-radius: 999px;
    background: rgba(126, 217, 87, 0.1);
    color: #7ed957;
    font-family: var(--serif, system-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, transform 120ms ease;
  }
  .fp-qa-play:hover {
    background: rgba(126, 217, 87, 0.2);
    transform: translateY(-1px);
  }
  .fp-qa-play.is-loading { opacity: 0.65; cursor: wait; }
  .fp-qa-play.is-playing {
    background: rgba(126, 217, 87, 0.25);
    border-color: rgba(126, 217, 87, 0.5);
    box-shadow: 0 0 0 3px rgba(126, 217, 87, 0.12);
  }
  .fp-qa-play-icon { font-size: 13px; }

  /* === Embedded audio player inside Q&A card (auto-baked memo) === */
  .fp-qa-audio {
    margin-top: 4px;
    padding: 8px 10px 10px;
    border: 1px solid rgba(255, 184, 77, 0.22);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 184, 77, 0.05) 0%, rgba(126, 217, 87, 0.04) 100%);
  }
  .fp-qa-audio-label {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 184, 77, 0.12);
    border: 1px solid rgba(255, 184, 77, 0.28);
    color: #ffb84d;
    font-family: 'Roboto', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .fp-qa-audio .fp-audio {
    margin-top: 2px;
  }

  /* === Profile: "What people are asking" history block === */
  .profile-qa-history {
    margin: 18px 0 24px;
  }
  .profile-section-title {
    margin: 0 0 12px;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--serif, Georgia, serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
  }
  .profile-qa-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .fp-text {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.92);
    line-height: 1.45;
    margin: 4px 0 8px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  /* Apple-style dock containing the 4 action buttons.  The dock is a
     soft glass tile; each button is its own rounded card that lifts
     on hover (kid-dock vibe). */
  .fp-foot {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 520px;
    /* Auto margins so the dock is centered horizontally even when the
     * parent card is wider than max-width. */
    margin: 12px auto 0;
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 8px 22px -14px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--mono);
    font-size: 19px;
    color: #FE2C55;
  }
  /* Phones — tighter padding/gap so the 4-button dock fits without
   * overflow and stays visually centered under the post. */
  @media (max-width: 520px) {
    .fp-foot {
      gap: 4px;
      padding: 6px 6px;
      font-size: 16px;
      border-radius: 14px;
    }
    .fp-stat {
      padding: 6px 4px;
      gap: 4px;
      border-radius: 10px;
      min-width: 0;
    }
    .fp-stat .fp-stat-icon {
      font-size: 18px;
    }
  }
  .fp-foot .fp-stat {
    justify-self: stretch;
  }
  .fp-stat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: #FE2C55;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 10px;
    border-radius: 14px;
    font: inherit;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition: background 0.15s, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s;
  }
  .fp-stat:hover {
    background: rgba(254, 44, 85, 0.16);
    transform: translateY(-3px) scale(1.06);
    box-shadow:
      0 6px 14px -6px rgba(254, 44, 85, 0.55),
      0 1px 0 rgba(255, 255, 255, 0.1) inset;
  }
  .fp-stat:active { transform: translateY(-1px) scale(0.97); }
  .fp-stat.is-liked .fp-stat-icon { animation: fpLikePop 0.32s ease; }
  /* Delete — only renders on the user's own posts. Subtle by default,
   * red on hover so the danger affordance is unambiguous. */
  .fp-stat-delete { opacity: 0.5; }
  .fp-stat-delete:hover {
    opacity: 1;
    background: rgba(220, 38, 38, 0.14);
    box-shadow: 0 4px 10px -4px rgba(220, 38, 38, 0.45);
  }
  @keyframes fpLikePop {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    100% { transform: scale(1); }
  }

  /* Inline reply composer beneath a post */
  .fp-reply-composer {
    margin: 8px 0 4px;
    padding: 10px 12px;
    background: #0c1430;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .fp-reply-composer textarea {
    width: 100%;
    background: transparent;
    border: 0;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    resize: vertical;
    min-height: 56px;
  }
  .fp-reply-composer textarea:focus { outline: none; }
  .fp-reply-composer textarea::placeholder { color: rgba(255,255,255,0.4); }
  .fp-reply-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  .btn.btn-tiny { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
  /* High-contrast button overrides ONLY inside the reply composer
     (it sits on a dark navy surface where the default button chrome
     fades into the background). */
  .fp-reply-composer .btn,
  .fp-reply-actions .btn {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
  }
  .fp-reply-actions .btn.btn-ghost {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
  }
  .fp-reply-actions .btn.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #ffffff !important;
  }
  .fp-reply-actions .btn.btn-primary {
    background: #FE2C55 !important;
    border: 1px solid #FE2C55 !important;
    color: #ffffff !important;
  }
  .fp-reply-actions .btn.btn-primary:hover {
    background: #ff4569 !important;
    border-color: #ff4569 !important;
  }

  /* Reply list under a post */
  .fp-replies {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.12);
  }
  .fp-reply {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
  }
  .fp-reply-by { color: #ffffff; margin-right: 6px; }

  /* Quote block when a post is a repost */
  .fp-quote {
    margin: 8px 0 0;
    padding: 12px 14px;
    border-left: 3px solid rgba(254, 44, 85, 0.55);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
  }
  .fp-quote header {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-size: 13px;
    color: #ffffff;
    margin-bottom: 4px;
  }
  .fp-quote-handle {
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--mono);
    font-size: 11px;
  }
  .fp-quote p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.4;
  }

  /* Recipe submit modal — phone-frame variant.  Force explicit dimensions
     so the iPhone bezel is always visible regardless of cascade. */
  #recipeSubmitModal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
  }
  #recipeSubmitModal[hidden] { display: none; }
  #recipeSubmitModal .profile-phone-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    pointer-events: auto;
  }
  #recipeSubmitModal .profile-phone-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: #E00C41;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    z-index: 2;
  }
  #recipeSubmitModal .profile-phone {
    position: relative;
    width: min(390px, calc(100vw - 48px));
    height: min(800px, calc(100vh - 64px));
    pointer-events: auto;
    animation: profile-phone-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #recipeSubmitModal .phone-bezel {
    width: 100%;
    height: 100%;
    background: #0b0d12;
    border-radius: 44px;
    padding: 14px 12px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 -1px 0 rgba(255, 255, 255, 0.04) inset,
      0 30px 60px -20px rgba(15, 23, 42, 0.6),
      0 0 0 2px rgba(255, 255, 255, 0.05) inset;
    position: relative;
    overflow: hidden;
  }
  #recipeSubmitModal .phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 28px;
    background: #000;
    border-radius: 999px;
    z-index: 2;
  }
  #recipeSubmitModal .phone-screen-inner {
    width: 100%;
    height: 100%;
    border-radius: 32px;
    background: #242F3E;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 56px 18px 28px;
    -webkit-overflow-scrolling: touch;
  }
  #recipeSubmitModal .phone-screen-inner::-webkit-scrollbar { width: 4px; }
  #recipeSubmitModal .phone-screen-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; }

  /* ==== Recipe Detail Modal — phone-shaped read view ==== */
  #recipeDetailModal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
  }
  #recipeDetailModal[hidden] { display: none; }
  #recipeDetailModal .profile-phone-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
  }
  #recipeDetailModal .profile-phone-close {
    position: absolute; top: 24px; right: 24px;
    z-index: 2;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  }
  #recipeDetailModal .profile-phone {
    position: relative; z-index: 1;
    width: min(390px, 92vw);
    height: min(820px, 92vh);
  }
  #recipeDetailModal .phone-bezel {
    width: 100%; height: 100%;
    background: #381F09 !important;
    border-radius: 44px;
    border: 6px solid #000;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
  }
  #recipeDetailModal .phone-screen-inner { background: #381F09 !important; }
  #recipeDetailModal .phone-notch {
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 110px; height: 28px;
    background: #000;
    border-radius: 0 0 18px 18px;
    z-index: 2;
  }
  #recipeDetailModal .phone-screen-inner {
    width: 100%; height: 100%;
    overflow-y: auto;
    padding: 56px 18px 28px;
    color: #fff;
    -webkit-overflow-scrolling: touch;
  }
  #recipeDetailModal .phone-screen-inner::-webkit-scrollbar { width: 4px; }
  #recipeDetailModal .phone-screen-inner::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18); border-radius: 2px;
  }

  .rcp-detail-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    display: block;
    margin-bottom: 14px;
  }
  .rcp-detail-head {
    text-align: left;
    margin-bottom: 12px;
  }
  .rcp-detail-title {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #fff;
    line-height: 1.2;
  }
  .rcp-detail-cuisine {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .rcp-detail-chips {
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 14px;
  }
  .rcp-detail-intro {
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
    padding: 12px 14px;
    border-radius: 12px;
    border-left: 3px solid #FE2C55;
    margin: 0 0 18px;
    font-style: italic;
  }
  .rcp-detail-h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #FE2C55;
    margin: 18px 0 8px;
  }
  .rcp-detail-ing,
  .rcp-detail-steps {
    margin: 0;
    padding-left: 22px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.55;
  }
  .rcp-detail-ing li,
  .rcp-detail-steps li { margin-bottom: 6px; }
  .rcp-detail-foot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.65);
  }
  .rcp-detail-author strong { color: #fff; font-weight: 600; }
  .rcp-detail-source {
    color: #FE2C55;
    text-decoration: none;
    font-weight: 600;
  }
  .rcp-detail-source:hover { text-decoration: underline; }

  .rcp-phone-screen { padding: 56px 18px 28px; }
  .rcp-phone-head {
    text-align: center;
    margin-bottom: 16px;
  }
  .rcp-phone-head h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
  }
  .rcp-phone-head p {
    font-family: var(--mono);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: 1.4;
  }
  .rcp-phone-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .rcp-phone-foot {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    position: sticky;
    bottom: -28px;
    background: linear-gradient(180deg, rgba(36, 47, 62, 0) 0%, #242F3E 30%);
    padding: 14px 0 4px;
  }
  .rcp-phone-foot .btn { flex: 1; }
  .rcp-phone-foot .btn.btn-ghost {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
  }
  .rcp-phone-foot .btn.btn-primary {
    background: #FE2C55 !important;
    border: 1px solid #FE2C55 !important;
    color: #ffffff !important;
  }

  .rcp-sub-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
  }
  .rcp-sub-row > span {
    font-weight: 700;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .rcp-sub-row > span em {
    color: rgba(255, 255, 255, 0.5);
    font-style: normal;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
  }
  .rcp-sub-row input,
  .rcp-sub-row textarea,
  .rcp-sub-row select {
    width: 100%;
    background: #131c33;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    padding: 10px 12px;
    resize: vertical;
  }
  .rcp-sub-row input:focus,
  .rcp-sub-row textarea:focus,
  .rcp-sub-row select:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.6);
  }
  .rcp-sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }

  /* Repost modal */
  .repost-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .repost-modal[hidden] { display: none; }
  .repost-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
  }
  .repost-modal-card {
    position: relative;
    width: min(560px, 100%);
    background: #0c1430;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
  .repost-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .repost-modal-head h3 {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 800;
  }
  .repost-modal-close {
    width: 32px; height: 32px;
    border: none;
    border-radius: 50%;
    background: #E00C41;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
  }
  .repost-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
  .repost-modal-body textarea {
    width: 100%;
    background: #131c33;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    padding: 12px 14px;
    resize: vertical;
    min-height: 70px;
  }
  .repost-modal-body textarea:focus { outline: none; border-color: rgba(99, 102, 241, 0.6); }
  .repost-modal-body textarea::placeholder { color: rgba(255,255,255,0.42); }
  .repost-quote {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 14px;
  }
  .repost-quote-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
  }
  .repost-quote-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #f472b6, #a855f7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .repost-quote-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .repost-quote-handle { color: rgba(255,255,255,0.5); font-family: var(--mono); font-size: 11px; }
  .repost-quote p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.45;
  }
  .repost-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .fp-stat-icon {
    font-size: 22px;
    line-height: 1;
  }

  /* Follow button at the top-right of each post header */
  .fp-head { position: relative; padding-right: 96px; }
  .fp-follow {
    position: absolute;
    top: -4px;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 6px;
    border: 2px solid #111111;
    border-radius: 10px;
    background: #E11B5E;
    color: #FFFFFF !important;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    box-shadow: 3px 3px 0 #111111;
    text-shadow: none !important;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
  }
  .fp-follow:hover {
    background: #E11B5E;
    color: #FFFFFF !important;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #111111;
  }
  .fp-follow:active {
    transform: translate(2px, 2px) scale(0.98);
    box-shadow: 1px 1px 0 #111111;
  }
  .fp-follow.is-following {
    background: #E11B5E;
    border-color: #111111;
    color: #FFFFFF !important;
  }
  .fp-follow.is-following:hover {
    background: #c01651;
    border-color: #111111;
    color: #FFFFFF !important;
  }
  .fp-follow-icon { font-weight: 800; line-height: 1; }

  /* Bot badge inside the feed-post header (next to display name) */
  .fp-bot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    font-size: 11px;
    line-height: 1;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.28);
    color: #6d28d9;
  }
  .fp-bot-badge-villain {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.32);
    color: #b91c1c;
  }

  /* Inline feed promo cards — native-ad style.  Tinted left border
     pulled from the promo's `--promo-tint` custom prop. */
  .feed-promo {
    --promo-tint: #6366f1;
    display: block;
    margin: 6px 0;
    padding: 14px 14px 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-left: 4px solid var(--promo-tint);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.7), rgba(255, 255, 255, 0.92));
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
  }
  /* When a promo has a banner image, drop the wrapper padding and
     let the image sit flush at the top; padding moves into .fpr-body. */
  .feed-promo-with-image { padding: 0; }
  .feed-promo-with-image .fpr-body { padding: 14px 14px 12px; }
  .fpr-body { display: block; }
  .fpr-banner {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* Use the image itself as a blurred backdrop so portrait/square
       art doesn't show empty side-bars when we contain (vs cover) the
       foreground image. */
    background-color: #f1f5f9;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    position: relative;
  }
  .fpr-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(28px) saturate(1.1);
    transform: scale(1.1);
    z-index: 0;
  }
  .fpr-banner img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* Show the WHOLE image — letterboxing falls back to the blurred
       backdrop above so portrait artwork still looks polished. */
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
  }
  .feed-promo-with-image:hover .fpr-banner img { transform: scale(1.02); }
  .feed-promo:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -14px rgba(15, 23, 42, 0.25);
    border-color: rgba(15, 23, 42, 0.14);
  }
  .feed-promo:focus-visible {
    outline: 2px solid var(--promo-tint);
    outline-offset: 2px;
  }
  .feed-promo-sponsored {
    background: linear-gradient(180deg, rgba(254, 252, 232, 0.5), rgba(255, 255, 255, 0.92));
  }
  .fpr-head {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: center;
  }
  .fpr-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--promo-tint);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .fpr-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .fpr-label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
  }
  .fpr-title {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
  }
  .fpr-sub {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #475569;
    line-height: 1.45;
    margin: 8px 0 10px;
  }
  .fpr-foot {
    display: flex;
    justify-content: flex-end;
  }
  /* "Listen ↗" CTA — green chip + white font on sponsored music promos. */
  .fpr-cta {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF !important;
    background: #60BD49 !important;
    border: 2px solid #111111;
    border-radius: 10px;
    padding: 4px 12px 5px;
    box-shadow: 3px 3px 0 #111111;
    letter-spacing: 1.5px;
    text-shadow: none !important;
    text-decoration: none !important;
    transition: transform 0.1s, box-shadow 0.1s;
  }
  .fpr-cta:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #111111;
  }
  .fpr-cta:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #111111;
  }

  body.dark-mode .feed-promo {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.85));
    border-color: rgba(255, 255, 255, 0.06);
  }
  body.dark-mode .feed-promo-sponsored {
    background: linear-gradient(180deg, rgba(63, 51, 18, 0.4), rgba(15, 23, 42, 0.85));
  }
  body.dark-mode .fpr-title { color: #f1f5f9; }
  body.dark-mode .fpr-sub   { color: #cbd5e1; }
  body.dark-mode .fpr-label { color: #94a3b8; }

  /* Top-of-page community feed card — Twitter-style.
     Make it feel primary: bigger header, no banner image. */
  .home-feed-card {
    margin-top: 0;
    background: #0c1430 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 18px 40px -18px rgba(0,0,0,0.5) !important;
  }
  /* Community feed chip — yellow textbox + black text. Replaces the
   * earlier white-on-comic-shadow treatment that was beating the chip
   * rule due to source-order cascade. */
  #homeView .home-feed-card .home-card-title {
    color: #111111 !important;
    position: relative;
    padding-left: 14px !important;
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    letter-spacing: var(--comic-letter-spacing, 2px) !important;
    text-shadow: none !important;
  }
  #homeView .home-feed-card .home-card-title::before {
    display: none !important;
  }
  #homeView .home-feed-card .home-card-link#feedAuthLink {
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  #homeView .home-feed-card .home-card-link#feedAuthLink::before { content: '✏️'; font-size: 12px; }
  #homeView .home-feed-card .home-card-link#feedAuthLink:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.6);
  }
  /* Belt-and-suspenders: any plain text inside the feed card → white */
  #homeView .home-feed-card,
  #homeView .home-feed-card .home-card-head,
  #homeView .home-feed-card .home-feed-sub,
  #homeView .home-feed-card .feed-composer-count,
  #homeView .home-feed-card .feed-composer-input {
    color: #ffffff;
  }
  .home-feed-sub {
    /* White textbox + black text — sits below the Looky Feed chip. */
    display: inline-block;
    font-family: var(--font-display);
    font-size: 13px;
    background: #FFFFFF !important;
    color: #111111 !important;
    border: 3px solid #111111;
    border-radius: 10px;
    padding: 4px 12px 5px !important;
    box-shadow: 3px 3px 0 #111111;
    margin: 0 0 12px;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-shadow: none !important;
  }
  /* Override the white-text rule in the same card scope */
  #homeView .home-feed-card .home-feed-sub {
    color: #111111 !important;
  }

  /* === Welcome banner — explains what lookymart.com is. Dismissible. === */
  .welcome-card {
    position: relative;
    margin: 0 0 22px;
    padding: 28px 28px 24px;
    border-radius: 22px;
    background: #0e1626;
    color: #f1f5f9;
    box-shadow:
      0 0 0 1.5px rgba(236, 72, 153, 0.55),
      0 0 0 1.5px rgba(99, 102, 241, 0.45),
      0 0 36px rgba(236, 72, 153, 0.18),
      0 0 56px rgba(99, 102, 241, 0.12);
    background-image:
      linear-gradient(#0e1626, #0e1626),
      linear-gradient(135deg, #ec4899 0%, #6366f1 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 1.5px solid transparent;
  }
  .welcome-dismiss {
    position: absolute; top: 12px; right: 14px;
    width: 30px; height: 30px;
    background: rgba(255,255,255,0.06);
    border: 0; border-radius: 50%;
    color: #fff; font-size: 18px; cursor: pointer;
    transition: background 120ms;
  }
  .welcome-dismiss:hover { background: rgba(255,255,255,0.16); }
  .welcome-title {
    margin: 0 0 4px;
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .welcome-brand {
    background: linear-gradient(135deg, #ec4899, #6366f1);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .welcome-tag {
    margin: 0 0 18px;
    color: rgba(255,255,255,0.65);
    font-size: 14px;
    font-style: italic;
  }
  .welcome-grid {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
  }
  .welcome-grid li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
  }
  .welcome-grid li strong { font-size: 13px; color: #fff; letter-spacing: 0.02em; }
  .welcome-grid li span:not(.welcome-icon) {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.45;
    display: block;
    margin-top: 2px;
  }
  .welcome-icon { font-size: 22px; line-height: 1.1; }
  .welcome-note {
    margin: 0;
    padding: 14px 16px;
    background: rgba(126, 217, 87, 0.06);
    border: 1px solid rgba(126, 217, 87, 0.22);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.55;
  }
  .welcome-note strong { color: #7ed957; }

  /* LookyMart AGI hero reel — hero video at the top of the community feed.
     Smaller footprint than before — 16:9 aspect to match the actual video,
     max 380px wide, centered. Gradient border for visual continuity. */
  .feed-hero-video {
    position: relative;
    margin: 0 auto 16px;
    padding: 0;
    width: 100%;
    max-width: 456px;
    border-radius: 16px;
    overflow: hidden;
    background: #0e1626;
    box-shadow:
      0 0 0 1.5px rgba(236, 72, 153, 0.55),
      0 0 0 1.5px rgba(99, 102, 241, 0.45),
      0 0 18px rgba(236, 72, 153, 0.18),
      0 0 24px rgba(99, 102, 241, 0.15);
    background-image:
      linear-gradient(#0e1626, #0e1626),
      linear-gradient(135deg, #ec4899 0%, #6366f1 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 1.5px solid transparent;
  }
  .feed-hero-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;       /* matches actual AGI video resolution */
    height: auto;
    background: #000;
    border-radius: 14px 14px 0 0;
    object-fit: cover;
  }
  .feed-hero-video-cap {
    margin: 0;
    padding: 10px 14px 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 72, 153, 0.95);
    background: linear-gradient(180deg, transparent, rgba(236, 72, 153, 0.06));
    text-align: center;
  }

  /* === SITCOM PAGE === */
  /* Force dark background so the white-text styling below is readable
     regardless of body/inherited theme on this view. */
  #sitcomView {
    background: #0b1220;
    color: #f1f5f9;
    min-height: 100%;
  }
  #sitcomView .sitcom-shell { max-width: 800px; margin: 0 auto; padding: 28px 18px 80px; }
  .sitcom-hero { text-align: center; margin-bottom: 28px; }
  .sitcom-hero-title {
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(28px, 5vw, 44px);
    margin: 0;
    background: linear-gradient(135deg, #ec4899, #6366f1);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  /* Sitcom subtitle — blue chip + white text, matches the Members chip pattern. */
  .sitcom-hero-sub {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 13px;
    background: #1977F2 !important;
    color: #FFFFFF !important;
    border: 3px solid #111111;
    border-radius: 10px;
    padding: 4px 12px 5px !important;
    box-shadow: 3px 3px 0 #111111;
    margin-top: 6px;
    line-height: 1.25;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-shadow: none !important;
  }
  .sitcom-empty {
    padding: 24px; text-align: center; color: rgba(255,255,255,0.5);
    font-family: var(--mono, ui-monospace, monospace); font-size: 13px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
  }
  .sitcom-empty-small { padding: 10px; font-size: 11px; }
  .sitcom-today { margin-bottom: 36px; }
  .sitcom-episode {
    background: #0e1626; border-radius: 22px; padding: 22px 22px 26px;
    box-shadow:
      0 0 0 1.5px rgba(236, 72, 153, 0.55),
      0 0 0 1.5px rgba(99, 102, 241, 0.45),
      0 0 28px rgba(236, 72, 153, 0.18),
      0 0 36px rgba(99, 102, 241, 0.15);
    background-image: linear-gradient(#0e1626, #0e1626), linear-gradient(135deg, #ec4899 0%, #6366f1 100%);
    background-origin: border-box; background-clip: padding-box, border-box;
    border: 1.5px solid transparent;
  }
  .sitcom-episode-date {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: rgba(236,72,153,0.12); color: #ec4899;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .sitcom-episode-title {
    font-family: var(--serif, Georgia, serif); font-size: 22px; line-height: 1.3;
    margin: 8px 0 6px; color: #f8fafc;
  }
  .sitcom-episode-premise {
    color: rgba(255,255,255,0.65); font-size: 14px; margin: 0 0 16px; font-style: italic;
  }
  .sitcom-audio { margin: 0 0 22px; padding: 12px 14px;
    background: rgba(236,72,153,0.06); border: 1px solid rgba(236,72,153,0.18); border-radius: 14px;
  }
  .sitcom-audio-hint { display: block; margin-top: 6px; font-family: var(--mono);
    font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; }
  .sitcom-script { display: flex; flex-direction: column; gap: 14px; }
  .sitcom-line { display: grid; grid-template-columns: 53px 1fr; gap: 12px; align-items: start; }
  .sitcom-line-avatar {
    width: 53px; height: 53px; border-radius: 50%; overflow: hidden;
    background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.12);
  }
  .sitcom-line-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sitcom-line-initial { font-family: var(--serif); font-size: 18px; color: rgba(255,255,255,0.7); }
  .sitcom-line-name {
    font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px;
    letter-spacing: 0.05em; text-transform: uppercase; color: rgba(236,72,153,0.95); margin-bottom: 3px;
  }
  .sitcom-line-text { font-family: var(--serif, Georgia, serif); font-size: 16px; line-height: 1.5; color: #f1f5f9; }
  .sitcom-cue {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    background: rgba(99,102,241,0.18); color: #a5b4fc; font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle;
  }
  .sitcom-archive-title {
    font-family: var(--serif); font-size: 18px; color: #f8fafc;
    margin: 0 0 14px; padding: 0 0 8px; border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .sitcom-archive-list { display: flex; flex-direction: column; gap: 12px; }
  .sitcom-archive-card {
    padding: 14px 16px;
    background: #131c33;                          /* solid dark fill (not transparent) */
    border: 1px solid rgba(99, 102, 241, 0.20);
    border-radius: 14px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.25);
  }
  .sitcom-archive-card-head {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 6px; flex-wrap: wrap;
  }
  /* GLOBAL TIMESTAMP CHIP RULE — anywhere a date or time appears, render
   * it as a #1977F2 blue chip with white Bangers text and 2px black border.
   *   - .sitcom-archive-card-date  ("2026-05-05 · 17:00:01 UTC")
   *   - .sitcom-episode-date       ("Tuesday, May 5")
   *   - .fp-time                   ("· 2h ago")
   *   - .fp-meta-foot              ("May 5, 2026, 8:00 PM" absolute)
   *   - .nw-card-time              ("6:00 PM" on news cards)
   *   - .nw-featured-time          ("Today · 6:00 PM · 11 stories")
   *   - .sr-tweet-time             ("2m ago" in welcome banner)
   *   - .dt-time                   ("just now" in dashboard timeline) */
  .sitcom-archive-card-date,
  .sitcom-episode-date,
  .fp-time,
  .fp-meta-foot,
  .sr-tweet-time,
  .dt-time {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 11px;
    background: #1977F2 !important;
    color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    border-radius: 8px !important;
    padding: 2px 8px 3px !important;
    box-shadow: 2px 2px 0 #111111;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-shadow: none !important;
    /* Cancel the dashed border-top + right-align that .fp-meta-foot had. */
    margin-top: 8px;
    padding-top: 2px !important;
    border-top: 2px solid #111111 !important;
    text-align: center;
  }
  .sitcom-archive-card-title {
    margin: 0; font-family: var(--serif, Georgia, serif);
    font-size: 16px; line-height: 1.3;
    color: #ffffff;                                /* explicit white for max contrast */
  }
  .sitcom-archive-card-premise {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.78);              /* up from 0.6 — clearer */
    font-size: 13px; line-height: 1.45;
  }
  .sitcom-archive-card-audio { width: 100%; }
  .sitcom-archive-card { position: relative; }
  .sitcom-archive-admin {
    position: absolute; top: 8px; right: 8px;
    display: flex; gap: 6px; z-index: 2;
  }
  .sitcom-archive-post,
  .sitcom-archive-delete {
    width: 26px; height: 26px; padding: 0;
    border-radius: 50%;
    font-size: 13px; font-weight: 700; line-height: 1;
    cursor: pointer; transition: background 120ms, transform 120ms;
  }
  .sitcom-archive-post {
    border: 1px solid rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.12); color: #a5b4fc;
  }
  .sitcom-archive-post:hover {
    background: rgba(99, 102, 241, 0.28); transform: scale(1.08);
  }
  .sitcom-archive-delete {
    border: 1px solid rgba(254, 44, 85, 0.45);
    background: rgba(254, 44, 85, 0.10); color: #fe2c55;
  }
  .sitcom-archive-delete:hover {
    background: rgba(254, 44, 85, 0.22); transform: scale(1.08);
  }
  /* === Admin bar on the today's-episode card === */
  .sitcom-admin-bar {
    display: flex; gap: 10px; margin: 10px 0 18px;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(99, 102, 241, 0.3);
  }
  .sitcom-admin-btn {
    padding: 8px 14px; border-radius: 10px; cursor: pointer;
    font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.14); color: #a5b4fc;
    transition: background 120ms, transform 120ms;
  }
  .sitcom-admin-btn:hover {
    background: rgba(99, 102, 241, 0.28); transform: translateY(-1px);
  }
  /* Share button — gradient pill so it visually pops next to the episode */
  .sitcom-admin-btn-share {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #ec4899 0%, #6366f1 100%);
    padding: 9px 18px;
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.30), 0 0 28px rgba(99, 102, 241, 0.20);
  }
  .sitcom-admin-btn-share:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 0 22px rgba(236, 72, 153, 0.50), 0 0 40px rgba(99, 102, 241, 0.32);
  }
  .sitcom-admin-btn-share:disabled {
    cursor: wait; opacity: 0.7; transform: none; filter: none;
  }
  .sitcom-admin-btn-share.is-posted {
    background: rgba(126, 217, 87, 0.85);
    box-shadow: none; filter: none;
  }
  .sitcom-admin-btn-danger {
    border-color: rgba(254, 44, 85, 0.45);
    background: rgba(254, 44, 85, 0.10); color: #fe2c55;
  }
  .sitcom-admin-btn-danger:hover {
    background: rgba(254, 44, 85, 0.22);
  }
  /* Send-to-a-friend button — teal pill, distinct from the pink/purple Post-to-feed */
  .sitcom-admin-btn-send {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%);
    padding: 9px 18px;
    box-shadow: 0 0 14px rgba(20, 184, 166, 0.28), 0 0 24px rgba(14, 165, 233, 0.18);
  }
  .sitcom-admin-btn-send:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.45), 0 0 36px rgba(14, 165, 233, 0.28);
  }
  /* Archive-card share icon — teal to match the full-card Send-to-friend */
  .sitcom-archive-send {
    width: 26px; height: 26px; padding: 0;
    border-radius: 50%;
    font-size: 13px; font-weight: 700; line-height: 1;
    cursor: pointer; transition: background 120ms, transform 120ms;
    border: 1px solid rgba(20, 184, 166, 0.5);
    background: rgba(20, 184, 166, 0.12); color: #5eead4;
  }
  .sitcom-archive-send:hover {
    background: rgba(20, 184, 166, 0.28); transform: scale(1.08);
  }
  /* When the feed card is the first thing in main, give the post
     stream a max-height so the page stays usable on small screens
     and visitors can scroll the feed itself. */
  .home-feed-card .feed-list {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 4px;
  }
  /* Subtle scrollbar styling so it doesn't look industrial */
  .home-feed-card .feed-list::-webkit-scrollbar { width: 8px; }
  .home-feed-card .feed-list::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 4px;
  }
  .home-feed-card .feed-list::-webkit-scrollbar-track { background: transparent; }

  /* Dark-mode overrides */
  body.dark-mode .feed-composer { background: #1e293b; border-color: rgba(255,255,255,0.08); }
  body.dark-mode .feed-composer:focus-within { background: #0f172a; }
  body.dark-mode .feed-composer-input { color: #f1f5f9; }
  body.dark-mode .feed-post { border-bottom-color: rgba(255,255,255,0.05); }
  body.dark-mode .fp-name,
  body.dark-mode .fp-handle { color: #111111 !important; }
  body.dark-mode .fp-text { color: #e2e8f0; }
  body.dark-mode .auth-error { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); color: #fecaca; }

  /* ---------- SEARCH CLEAR BUTTON (×) ---------- */
  /* Sits inside .home-search and .sr-search; visible only when the input
   * has text.  Uses :has(input:not(:placeholder-shown)) so no JS state. */
  .home-search,
  .sr-search { position: relative; }

  .search-clear {
    /* Default: hidden.  Shown when the sibling input has text. */
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 132px;          /* clears the Search/Explore submit button */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.08);
    border: 0;
    font-size: 16px;
    line-height: 1;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 2;
  }
  .search-clear:hover { background: rgba(15, 23, 42, 0.15); color: #111; }

  /* Show only when the input next to it has text (placeholder hidden). */
  .home-search:has(.home-search-input:not(:placeholder-shown)) .search-clear,
  .sr-search:has(.sr-search-input:not(:placeholder-shown)) .search-clear,
  .header-search:has(.header-search-input:not(:placeholder-shown)) .search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* On the search-results page the submit button is narrower ('Explore →') */
  .sr-search .search-clear { right: 110px; }

  body.dark-mode .search-clear { background: rgba(255, 255, 255, 0.08); color: #cbd5e1; }
  body.dark-mode .search-clear:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

  /* Override the original 2-column cart-page layout — inside the 440px
   * drawer it needs a single stacked column (cart-main top, summary
   * below) so nothing wraps to 1-character lines or escapes the frame. */
  #cartView .cart-page {
    display: flex !important;
    flex-direction: column;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 56px 18px 32px !important;   /* room for the close button on top */
    gap: 14px;
  }
  #cartView .cart-main {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 20px !important;
    min-height: auto !important;
  }
  #cartView .cart-title {
    font-size: 24px !important;
    margin: 0 0 14px !important;
  }
  #cartView .cart-promo {
    padding: 12px 16px !important;
    margin-bottom: 22px !important;
    font-size: 12px;
    border-radius: 10px;
    gap: 10px;
  }
  #cartView .cart-promo > span:first-child {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #cartView .cart-empty { padding: 40px 12px 24px !important; }
  #cartView .cart-empty-art { font-size: 56px !important; }
  #cartView .cart-empty-text { font-size: 17px !important; }
  #cartView .cart-btn {
    min-width: 0 !important;
    width: 100%;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
  #cartView .cart-summary {
    position: static !important;
    top: auto !important;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px !important;
  }
  #cartView .cart-summary-title { font-size: 18px !important; margin: 0 0 14px !important; }
  #cartView .cart-checkout {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
  }
  /* Stack the chat dock button (the floating purple bubble) lower so
   * it doesn't overlap the drawer's close button when cart is open. */
  body.cart-open #lookyChatDock { right: calc(min(440px, 100vw) + 14px); }

  /* ---------- RESPONSIVE ---------- */
  /* (Right rail responsive hide is in the persistent rails block above.) */
  /* Below 960px: hide the persistent app rail entirely (phone layout). */
  @media (max-width: 960px) {
    .app-rail { display: none; }
    .container > .view { margin-left: 0; }
    #homeView .home-shell {
      padding: 16px 16px 80px;
    }
    /* Mobile drawer: when toggled open, the rail slides in from the
       right (matching the hamburger position).  Backdrop dims the
       rest of the page. */
    .app-rail.mobile-open {
      display: flex !important;
      position: fixed;
      top: 0;
      right: 0;
      left: auto;
      bottom: 0;
      width: min(86vw, 340px);
      height: 100vh;
      max-height: 100vh;
      z-index: 1001;
      background: #1A2540;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
      overflow-y: auto;
      animation: railSlideIn 0.18s ease-out;
      padding-top: 18px;
    }
    .app-rail-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(2px);
      z-index: 1000;
      animation: bdFadeIn 0.18s ease-out;
    }
    .app-rail-backdrop[hidden] { display: none; }
    /* Larger tap targets in the mobile drawer */
    .app-rail.mobile-open .rail-item {
      padding: 14px 18px;
      font-size: 16px;
    }
    .app-rail.mobile-open .rail-icon {
      width: 22px;
      height: 22px;
    }
    /* Lock body scroll when the drawer is open so the page beneath
       doesn't drift while the user picks a section. */
    body.mobile-rail-open { overflow: hidden; }
  }
  /* Backdrop is desktop-hidden by default — only the @media block
     above makes it visible on phones when toggled. */
  @media (min-width: 961px) {
    .app-rail-backdrop { display: none !important; }
  }
  @keyframes railSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }
  @keyframes bdFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }


  /* ---------- HERO HEADLINE ---------- */
  #homeView .home-hero {
    text-align: center;
    padding: 24px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #homeView .home-headline {
    font-family: var(--font-display);
    /* Sizes from container width, not viewport width — keeps the headline
     * inside the center column instead of bleeding into the rails. */
    font-size: clamp(22px, 4.6cqi, 38px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 2px;
    color: #111111 !important;
    margin: 0 auto 10px;
    text-align: center;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    text-shadow: none !important;
  }
  #homeView .home-headline-accent {
    color: #111111 !important;
    font-style: italic;
    font-weight: 400;
    font-family: var(--font-display);
    text-shadow: none !important;
  }
  #homeView .home-headline-sub {
    font-family: var(--font-display);
    font-size: clamp(12px, 1vw, 15px);
    color: #111111 !important;
    max-width: 580px;
    margin: 0 auto 22px;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-shadow: none !important;
  }

  /* ---------- CHIP ROW (under search) ---------- */
  #homeView .home-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
  }
  #homeView .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.04),
      0 6px 14px -8px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  #homeView .chip:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow:
      0 2px 4px rgba(15, 23, 42, 0.06),
      0 10px 20px -8px rgba(15, 23, 42, 0.20);
  }
  #homeView .chip-glyph { font-size: 14px; }
  #homeView .chip--accent {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-color: rgba(239, 68, 68, 0.25);
    color: #b91c1c;
  }

  /* ---------- HOME CARD (white surface for each section) ---------- */
  #homeView .home-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
      0 1px 3px rgba(15, 23, 42, 0.04),
      0 18px 40px -16px rgba(15, 23, 42, 0.18);
    padding: 28px 28px 32px;
    margin-top: 28px;
  }
  #homeView .home-card--facts { padding: 28px; }
  #homeView .home-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
  }
  #homeView .home-card-title {
    font-family: 'Roboto', -apple-system, sans-serif;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #111;
    margin: 0;
  }
  #homeView .home-card-link {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: #ef4444;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
  }
  #homeView .home-card-link:hover { color: #b91c1c; }

  /* ---------- §2  FEATURED STORES ---------- */
  #homeView .featured-stores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  #homeView .store-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #0f172a;
    box-shadow: 0 12px 30px -16px rgba(15, 23, 42, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  #homeView .store-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.55);
  }
  #homeView .store-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  #homeView .store-card:hover .store-card-img { transform: scale(1.04); }
  #homeView .store-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
  }
  #homeView .store-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  }
  #homeView .store-card-initial {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 800;
    border-radius: 8px;
    flex: 0 0 auto;
  }
  #homeView .store-card-meta {
    display: flex; flex-direction: column;
    line-height: 1.15;
  }
  #homeView .store-card-name {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: #111;
  }
  #homeView .store-card-sub {
    font-family: var(--mono);
    font-size: 10px;
    color: #6b7280;
    max-width: 180px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #homeView .store-card-cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  }

  /* ---------- §3  BROWSE MARKETPLACE — pastel category grid ---------- */
  #homeView .market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
  }
  #homeView .market-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 16px;
    border-radius: 18px;
    text-decoration: none;
    color: #1f2937;
    aspect-ratio: 1 / 1;
    justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 6px 14px -10px rgba(15, 23, 42, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  #homeView .market-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -12px rgba(15, 23, 42, 0.28);
  }
  #homeView .market-tile-icon {
    font-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  }
  #homeView .market-tile-name {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #111;
  }
  #homeView .market-tile-count {
    font-family: var(--mono);
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
  }
  #homeView .market-tile--soon .market-tile-count { color: #b45309; }

  /* Pastel tints — category surface colors */
  #homeView .market-tile--lavender { background: linear-gradient(160deg, #ede9fe, #f5f3ff); }
  #homeView .market-tile--sky      { background: linear-gradient(160deg, #dbeafe, #eff6ff); }
  #homeView .market-tile--rose     { background: linear-gradient(160deg, #fce7f3, #fdf2f8); }
  #homeView .market-tile--sage     { background: linear-gradient(160deg, #dcfce7, #f0fdf4); }
  #homeView .market-tile--cream    { background: linear-gradient(160deg, #fef3c7, #fffbeb); }
  #homeView .market-tile--pink     { background: linear-gradient(160deg, #fbcfe8, #fdf2f8); }
  #homeView .market-tile--mint     { background: linear-gradient(160deg, #ccfbf1, #f0fdfa); }
  #homeView .market-tile--peach    { background: linear-gradient(160deg, #fed7aa, #fff7ed); }
  #homeView .market-tile--butter   { background: linear-gradient(160deg, #fef08a, #fefce8); }
  #homeView .market-tile--lilac    { background: linear-gradient(160deg, #e9d5ff, #faf5ff); }

  /* ---------- §4  PRODUCT CARDS (Newest Listings) ---------- */
  #homeView #homeRecentStrip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
  #homeView .product-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
  }
  #homeView .product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.22);
  }
  #homeView .product-card-media {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  #homeView .product-card-media img {
    width: 100%; height: 100%; object-fit: cover;
  }
  #homeView .product-card-fallback {
    font-size: 48px;
    opacity: 0.7;
  }
  #homeView .product-card-body { padding: 12px 14px 14px; }
  #homeView .product-card-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #homeView .product-card-glyph {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9;
    border-radius: 10px;
    font-size: 16px;
    flex: 0 0 auto;
  }
  #homeView .product-card-meta {
    display: flex; flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
  }
  #homeView .product-card-title {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #homeView .product-card-section {
    font-family: var(--mono);
    font-size: 10px;
    color: #64748b;
  }
  #homeView .product-card-price {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #111;
    flex: 0 0 auto;
  }

  /* ---------- §6  FACTS — keep it light ---------- */
  #homeView .home-card--facts .home-fact {
    color: #1f2937;
  }
  #homeView .home-card--facts .home-fact-dot { color: #ef4444; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px) {
    #homeView .featured-stores { grid-template-columns: 1fr; }
    #homeView .home-card { padding: 22px 18px 24px; border-radius: 18px; }
    #homeView .home-headline { font-size: clamp(32px, 8vw, 48px); }
  }


  /* ====================================================================
   * Code-Man — daily AI maintenance persona page.
   * Inspired by Steve Wozniak (created as a tribute, not endorsed by him).
   * Created 2026-05-07.
   * ==================================================================== */
  #codeManView.active {
    display: block;
    background: linear-gradient(180deg, #0b1220 0%, #07090f 60%, #07090f 100%);
    min-height: 100vh;
    padding: 0 0 80px;
    color: #e5e7eb;
  }
  .cm-shell { max-width: 900px; margin: 0 auto; padding: 32px 24px; }
  .cm-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-bottom: 32px;
    padding: 28px 24px;
    background: rgba(20, 73, 252, 0.08);
    border: 1px solid rgba(20, 73, 252, 0.3);
    border-radius: 16px;
  }
  .cm-hero-img {
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(20, 73, 252, 0.4);
  }
  .cm-hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    width: 100%;
  }
  .cm-hero-title {
    font-family: 'Bangers', 'Impact', system-ui, sans-serif;
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 400;
    color: #1449FC;
    margin: 0 0 4px;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(20, 73, 252, 0.5);
    line-height: 1;
  }
  .cm-hero-tagline {
    font-size: 18px;
    color: #93c5fd;
    margin: 0 0 16px;
    font-weight: 600;
  }
  .cm-hero-bio {
    font-size: 15px;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
  }
  @media (max-width: 600px) {
    .cm-shell { padding: 20px 16px; }
    .cm-hero { padding: 20px 16px; }
    .cm-hero-img { max-width: 260px; }
  }

  .cm-content { padding: 0; }
  .cm-loading, .cm-empty, .cm-error {
    text-align: center;
    padding: 48px 24px;
    color: #94a3b8;
    font-size: 16px;
  }
  .cm-error { color: #fca5a5; }

  .cm-grade-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    border: 3px solid #3b82f6;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 24px;
  }
  .cm-grade-letter {
    font-family: 'Bangers', 'Impact', system-ui, sans-serif;
    font-size: clamp(96px, 16vw, 144px);
    font-weight: 400;
    line-height: 1;
    margin: 0;
    text-shadow: 0 0 30px currentColor;
  }
  .cm-grade-score { font-size: 22px; font-weight: 700; color: #f1f5f9; margin-top: 8px; }
  .cm-grade-date { font-size: 14px; color: #94a3b8; margin-top: 4px; }

  .cm-intro {
    font-size: 18px;
    line-height: 1.6;
    color: #f1f5f9;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 4px solid #1449FC;
    border-radius: 8px;
    margin-bottom: 24px;
    font-style: italic;
  }

  .cm-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 28px 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .cm-no-issues {
    padding: 16px;
    background: rgba(16, 185, 129, 0.1);
    border-left: 4px solid #10b981;
    border-radius: 8px;
    color: #6ee7b7;
    font-weight: 600;
  }

  .cm-issues {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .cm-issues li {
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    margin-bottom: 8px;
    color: #fde68a;
    font-size: 15px;
    line-height: 1.5;
  }

  .cm-checks {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 16px;
  }
  .cm-check-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
  }
  .cm-check-row + .cm-check-row { border-top: 1px solid rgba(255, 255, 255, 0.05); }
  .cm-check-icon { font-size: 20px; font-weight: 700; }
  .cm-check-label { color: #e5e7eb; font-weight: 600; }
  .cm-check-detail { color: #94a3b8; font-size: 13px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

  .cm-history {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 24px;
  }
  .cm-history-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .cm-history-letter {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #6b7280;
    border-radius: 8px;
    font-family: 'Bangers', 'Impact', system-ui, sans-serif;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 400;
  }
  .cm-history-date {
    font-size: 11px;
    color: #94a3b8;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  }

  /* Code-Man activity log — public-safe timestamped record of his runs.
     Sanitized: no infra details (URLs, IPs, file paths, process names). */
  .cm-section-title-activity { margin-top: 28px; }
  .cm-act-intro {
    color: rgba(245, 230, 200, 0.7);
    font-size: 13px;
    margin: 0 0 14px;
  }
  .cm-act-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }
  @media (max-width: 600px) {
    .cm-act-stats { grid-template-columns: repeat(2, 1fr); }
  }
  .cm-act-stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
  }
  .cm-act-stat-num {
    display: block;
    font-family: 'Bangers', 'Impact', system-ui, sans-serif;
    font-size: 20px;
    color: #FFD21E;
    line-height: 1.1;
    letter-spacing: 0.02em;
  }
  .cm-act-stat-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(245, 230, 200, 0.55);
    margin-top: 2px;
    font-weight: 700;
  }
  .cm-act-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cm-act-run {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
  }
  .cm-act-run-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: rgba(245, 230, 200, 0.7);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  }
  .cm-act-grade {
    color: #0f172a;
    font-family: 'Bangers', 'Impact', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 8px;
    line-height: 1;
  }
  .cm-act-when {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    color: #fff9e6;
    font-weight: 700;
  }
  .cm-act-rel { color: rgba(245, 230, 200, 0.5); }
  .cm-act-count {
    margin-left: auto;
    font-size: 11px;
    color: rgba(245, 230, 200, 0.6);
    font-weight: 600;
  }
  .cm-act-issues {
    margin: 0;
    padding-left: 20px;
    color: rgba(245, 230, 200, 0.85);
    font-size: 13px;
    line-height: 1.45;
  }
  .cm-act-issues li { margin-bottom: 3px; }
  .cm-act-clear {
    margin: 0;
    color: #10b981;
    font-size: 13px;
    font-weight: 600;
  }

  .cm-outro {
    font-style: italic;
    text-align: right;
    color: #94a3b8;
    margin-top: 24px;
  }
  .cm-generated {
    font-size: 12px;
    color: #6b7280;
    text-align: right;
    margin-top: 4px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  }

  .cm-tribute {
    margin-top: 48px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
  }
  .cm-tribute p {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
    font-style: italic;
  }

  /* ====================================================================
   * Hashtag-Man — discovery / community persona page.
   * Inspired by Chris Messina (created as a tribute, not endorsed).
   * Created 2026-05-07.
   * ==================================================================== */
  #hashtagManView.active {
    display: block;
    background: linear-gradient(180deg, #0f0a1f 0%, #07070f 60%, #07070f 100%);
    min-height: 100vh;
    padding: 0 0 80px;
    color: #e5e7eb;
  }
  .hm-shell { max-width: 900px; margin: 0 auto; padding: 32px 24px; }

  .hm-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-bottom: 32px;
    padding: 28px 24px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.10) 0%, rgba(139, 92, 246, 0.10) 100%);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 16px;
  }
  .hm-hero-img {
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.45);
  }
  .hm-hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    width: 100%;
  }
  .hm-hero-title {
    font-family: 'Bangers', 'Impact', system-ui, sans-serif;
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 400;
    color: #06b6d4;
    margin: 0 0 4px;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
    line-height: 1;
  }
  .hm-hero-tagline {
    font-size: 18px;
    color: #c4b5fd;
    margin: 0 0 16px;
    font-weight: 600;
  }
  .hm-hero-bio {
    font-size: 15px;
    line-height: 1.65;
    color: #cbd5e1;
    margin: 0;
  }

  .hm-section {
    margin: 32px 0;
    padding: 24px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
  .hm-section-title {
    font-family: 'Bangers', 'Impact', system-ui, sans-serif;
    font-size: clamp(24px, 3.5vw, 32px);
    font-weight: 400;
    color: #06b6d4;
    margin: 0 0 16px;
    letter-spacing: 1.5px;
  }
  .hm-prose {
    font-size: 16px;
    line-height: 1.7;
    color: #e5e7eb;
    margin: 0 0 14px;
  }
  .hm-prose strong { color: #fde68a; font-weight: 700; }
  .hm-prose em { color: #c4b5fd; font-style: italic; }

  .hm-quote {
    margin: 16px 0;
    padding: 16px 20px;
    border-left: 4px solid #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
    border-radius: 0 8px 8px 0;
    font-size: 18px;
    color: #f1f5f9;
    font-style: italic;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  }

  .hm-powers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .hm-power {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 10px;
    align-items: flex-start;
  }
  .hm-power-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
  }
  .hm-power strong {
    display: block;
    color: #06b6d4;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .hm-power p {
    margin: 0;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
  }
  @media (max-width: 600px) {
    .hm-shell { padding: 20px 16px; }
    .hm-hero { padding: 20px 16px; }
    .hm-hero-img { max-width: 260px; }
    .hm-powers { grid-template-columns: 1fr; }
    .hm-section { padding: 18px 16px; }
  }

  /* Hashtag-Man activity log — timestamped record of his tagging runs */
  .hm-activity-section { background: #f8fafc; }
  .hm-activity-intro { color: #475569; font-size: 13px; margin-bottom: 14px; }
  .hm-activity-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }
  .hm-stat {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
  }
  .hm-stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
  }
  .hm-stat-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-top: 4px;
    font-weight: 700;
  }
  .hm-activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hm-activity-empty {
    text-align: center;
    color: #64748b;
    padding: 20px;
    font-size: 13px;
    font-style: italic;
  }
  .hm-activity-error { color: #991b1b; font-style: normal; }
  .hm-activity-run {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
  }
  .hm-activity-run-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: #475569;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e2e8f0;
  }
  .hm-activity-when {
    font-family: var(--code, ui-monospace, monospace);
    font-weight: 700;
    color: #0f172a;
    font-size: 12px;
  }
  .hm-activity-rel { color: #94a3b8; }
  .hm-activity-kind {
    background: #1263D5;
    color: #fff;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .hm-activity-count {
    margin-left: auto;
    font-weight: 700;
    color: #059669;
    font-size: 12px;
  }
  .hm-activity-toptags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
    align-items: center;
  }
  .hm-activity-toptags-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #64748b;
    margin-right: 4px;
  }
  .hm-activity-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .hm-activity-item {
    padding: 8px 10px;
    background: #f1f5f9;
    border-left: 3px solid #1263D5;
    border-radius: 6px;
  }
  .hm-activity-item-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 13px;
    margin-bottom: 4px;
  }
  .hm-activity-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
  }
  .hm-tag-chip {
    background: #eef2ff;
    color: #1263D5;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
  }
  .hm-activity-item-empty {
    list-style: none;
    color: #94a3b8;
    font-style: italic;
    padding: 6px 0;
  }
  .hm-activity-failures {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #fecaca;
    font-size: 12px;
  }
  .hm-activity-failures summary {
    cursor: pointer;
    color: #991b1b;
    font-weight: 700;
  }
  .hm-activity-failures ul {
    margin: 6px 0 0;
    padding-left: 20px;
    color: #475569;
  }

  .hm-tribute {
    margin-top: 48px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
  }
  .hm-tribute p {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
    font-style: italic;
  }

  /* ====================================================================
   * Mobile bottom-bar nav — visible only on smartphones (≤ 768px).
   * Pattern matches eye2tap.net's bottom-bar for cross-property consistency.
   * Hides the desktop apple-style footer-dock + chat bubble at this width.
   * Other sections (Recipes, Sitcom, Code-Man, etc.) reachable via Menu →
   * hamburger drawer. Created 2026-05-07.
   * ==================================================================== */
  .lm-bottom-bar {
    display: none;
  }
  @media (max-width: 768px) {
    .lm-bottom-bar {
      display: flex;
      justify-content: stretch;
      align-items: center;
      padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
      background: rgba(8, 10, 18, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(14px) saturate(140%);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      position: fixed;
      bottom: 12px;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      width: 50%;
      min-width: 280px;
      max-width: 360px;
      border-radius: 18px;
      /* z-index ABOVE the mobile drawer (1001) so the bar stays visible
       * when the hamburger menu is open. The drawer should appear behind
       * the bar (not cover it). Tapping the bar's Menu button toggles the
       * drawer closed — that's the close interaction. */
      z-index: 1100;
    }
    /* Drawer must leave room for the bar — pad its bottom so the last
     * rail items are scrollable into view ABOVE the bar (not hidden
     * behind it). */
    .app-rail.mobile-open {
      padding-bottom: calc(env(safe-area-inset-bottom) + 96px) !important;
    }
    .lm-bb-btn {
      flex: 1;
      background: none;
      border: none;
      color: #C0FF03;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      padding: 8px 0;
      margin: 0 2px;
      font-family: inherit;
      transition: all 0.18s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      border-radius: 14px;
      min-height: 56px;
      -webkit-tap-highlight-color: transparent;
    }
    .lm-bb-icon {
      font-size: 22px;
      line-height: 1;
      filter: saturate(120%);
    }
    .lm-bb-label {
      font-size: 10px;
      line-height: 1;
    }
    .lm-bb-btn:active,
    .lm-bb-btn:hover {
      background: rgba(192, 255, 3, 0.12);
    }
    /* Active state: highlight Home when current section is home */
    body[data-section="home"] .lm-bb-btn[data-section="home"] {
      background: rgba(255, 255, 255, 0.08);
    }

    /* HIDE the desktop apple-style dock + floating chat bubble on mobile.
     * Same items live in: Home (in bar), Chat (in bar), Cart (in bar),
     * Profile (Me in bar), other rail sections (Menu → hamburger drawer). */
    .footer-dock,
    .dock-chat {
      display: none !important;
    }

    /* Hide the bottom-left UI sounds toggle — it overlaps the Home button.
     * Sounds are still toggleable via the function `toggleLookySounds()`
     * if/when we add it back into the top header or settings. */
    .looky-sounds-toggle {
      display: none !important;
    }

    /* Hide the top-right hamburger button — the Menu button in the
     * bottom bar now opens the same drawer via toggleMobileMenu(). */
    .mobile-menu-toggle {
      display: none !important;
    }

    /* Remove the apple-style dock (geo, account, music) from the TOP
     * header on mobile — those actions are reachable via the bottom bar
     * (Cart, Me) or the hamburger drawer (everything else). Keeping them
     * here just makes the header tall and crowded. */
    nav.top-dock > .nav-actions {
      display: none !important;
    }

    /* Make the top header SHORTER on mobile. The original .header-logo
     * was 65px on phones — drop to 44px. Tighter vertical padding too. */
    nav.top-dock {
      padding: 6px 12px !important;
      gap: 4px !important;
    }
    nav.top-dock > .header-logo img {
      height: 44px !important;
    }

    /* Hide the per-section big banner on mobile — it eats vertical space
     * and the section name is already obvious from the rail/menu/bottom-bar.
     * Page content starts immediately under the header instead. */
    .section-banner,
    #sectionBanner {
      display: none !important;
    }

    /* Pad the page so content isn't hidden behind the fixed bottom-bar */
    body { padding-bottom: 76px; }
    .container { padding-bottom: 76px; }
  }

  /* ═══════════════════════════════════════════════════════════════
   * MEMBERS ADMIN PANEL — list of Firebase Auth users with edit/ban/
   * post-management actions. See src/scripts/admin-members.js.
   * ═══════════════════════════════════════════════════════════════ */
  .am-status {
    padding: 12px 16px;
    margin: 12px 0;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    font-size: 14px;
  }
  .am-status[data-kind="error"] { background: #fee2e2; color: #991b1b; }
  .am-status[data-kind="info"]  { background: #dbeafe; color: #1e40af; }

  .am-table-wrap { overflow-x: auto; margin-top: 16px; }
  .am-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .am-table th {
    text-align: left;
    padding: 10px 12px;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
  }
  .am-table td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
  }
  .am-table tr:hover { background: #fafbfc; }
  .am-row-banned { opacity: 0.65; background: #fef2f2; }

  .am-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #e2e8f0;
  }
  .am-avatar-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #14b8a6);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
  }
  .am-name   { font-weight: 600; color: #0f172a; }
  .am-handle { font-size: 12px; color: #64748b; }
  .am-email  { color: #475569; font-size: 13px; }
  .am-count  { font-weight: 600; text-align: center; color: #334155; }
  .am-date   { color: #64748b; font-size: 13px; }

  .am-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .am-badge-active { background: #dcfce7; color: #166534; }
  .am-badge-banned { background: #fee2e2; color: #991b1b; }

  .am-actions { text-align: right; white-space: nowrap; }
  .am-actions .btn-sm { padding: 4px 10px; font-size: 12px; margin-left: 4px; }

  .am-empty, .am-error {
    padding: 32px;
    text-align: center;
    color: #64748b;
  }
  .am-error { color: #991b1b; }

  .am-posts-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px 0;
  }
  .am-post {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fff;
  }
  .am-post-meta { font-size: 11px; color: #64748b; margin-bottom: 4px; }
  .am-post-body { color: #1e293b; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
  .am-post-actions { margin-top: 8px; text-align: right; }

  /* ═══════════════════════════════════════════════════════════════
   * SCRIBE-ROBOT — record, transcribe, summarize page
   * ═══════════════════════════════════════════════════════════════ */
  #scribeRobotView .sr-shell {
    max-width: 760px;
    margin: 0 auto;
    padding: 22px 18px 60px;
  }

  /* Floating mic button — top-right, always-visible, sits above nav
     (top-dock z:50) AND the dock-chat (z:141). Only renders when the
     Scribe view is active because it lives inside #scribeRobotView. */
  .sr-floating-mic {
    position: fixed;
    top: calc(18px + env(safe-area-inset-top, 0px));
    right: 18px;
    z-index: 200; /* above top-dock(50) AND dock-chat(141) */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #0a062a;
    background: #FFD21E; /* same yellow as Scribe hero accent */
    cursor: pointer;
    box-shadow: 3px 3px 0 #0a062a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    /* iOS click delay buster */
    -webkit-tap-highlight-color: transparent;
  }
  .sr-floating-mic-icon {
    font-size: 24px;
    line-height: 1;
    pointer-events: none;
  }
  .sr-floating-mic:hover,
  .sr-floating-mic:focus-visible {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #0a062a;
    outline: none;
  }
  .sr-floating-mic.is-recording {
    background: #ef4444;
    color: #fff;
    animation: srFloatingMicPulse 1.1s infinite;
  }
  @keyframes srFloatingMicPulse {
    0%   { box-shadow: 3px 3px 0 #0a062a, 0 0 0 0   rgba(239, 68, 68, 0.55); }
    70%  { box-shadow: 3px 3px 0 #0a062a, 0 0 0 14px rgba(239, 68, 68, 0); }
    100% { box-shadow: 3px 3px 0 #0a062a, 0 0 0 0   rgba(239, 68, 68, 0); }
  }
  .sr-hero {
    /* Vertical stack — top row holds image+title, callouts span full width below */
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
    padding: 18px;
    background: linear-gradient(135deg, #1a1040 0%, #2d1b69 100%);
    border-radius: 18px;
    color: #fff;
    border: 2px solid #0a062a;
    box-shadow: 4px 4px 0 #0a062a;
  }
  /* Top row: robot avatar beside the title block */
  .sr-hero-top {
    display: flex;
    gap: 18px;
    align-items: center;
  }
  .sr-hero-titles {
    flex: 1;
    min-width: 0;
  }
  .sr-hero-img {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid #FFD21E;
  }
  .sr-hero-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 900;
    color: #FFD21E;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    text-shadow: 2px 2px 0 #000;
  }
  .sr-hero-tagline {
    font-size: 14px;
    color: #fff;
    margin: 0 0 8px;
    font-weight: 700;
  }
  .sr-hero-bio {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin: 0;
  }
  .sr-hero-privacy {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: rgba(34, 197, 94, 0.14);
    border-left: 3px solid #22c55e;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
  }
  .sr-hero-privacy strong { color: #86efac; }

  .sr-hero-disclaimer {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: rgba(255, 210, 30, 0.12);
    border-left: 3px solid #FFD21E;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
  }
  .sr-hero-disclaimer strong { color: #FFD21E; }

  .sr-card {
    background: #fff;
    border: 2px solid #222;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 3px 3px 0 #222;
  }
  .sr-tpl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }
  .sr-tpl-label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #475569;
    flex-shrink: 0;
  }
  .sr-tpl-select {
    flex: 1;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
  }

  /* Voice interview CTA + active interview panel */
  .sr-voice-intake-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .sr-voice-btn {
    background: #FFD21E;
    color: #0f172a;
    border: 2px solid #000;
    border-radius: 12px;
    padding: 12px 22px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 3px 3px 0 #000;
    transition: transform 0.15s ease;
    flex-shrink: 0;
  }
  .sr-voice-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
  .sr-voice-btn:disabled { background: #e2e8f0; cursor: wait; }
  .sr-voice-hint {
    color: #475569;
    font-size: 12px;
    flex: 1;
    min-width: 200px;
  }

  .sr-interview {
    background: linear-gradient(135deg, #1a1040 0%, #2d1b69 100%);
    color: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    border: 2px solid #0a062a;
    box-shadow: 3px 3px 0 #0a062a;
  }
  .sr-interview-progress {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    font-weight: 700;
  }
  .sr-interview-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    margin-top: 4px;
    overflow: hidden;
  }
  .sr-interview-fill {
    height: 100%;
    background: #FFD21E;
    width: 0%;
    transition: width 0.3s ease;
  }
  .sr-interview-q {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    color: #FFD21E;
    margin: 14px 0 8px;
    line-height: 1.3;
  }
  .sr-interview-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 14px;
  }
  .sr-interview-hint kbd {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: var(--code, ui-monospace, monospace);
    font-size: 11px;
    color: #fff;
  }
  .sr-interview-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .sr-int-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 9px 16px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    cursor: pointer;
  }
  .sr-int-btn:hover { background: rgba(255, 255, 255, 0.2); }
  .sr-int-btn-record {
    background: #1263D5;
    border-color: #0a2870;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;       /* prevent scroll/zoom on long-press mobile */
    cursor: pointer;
  }
  .sr-int-btn-record:hover { background: #1e7ce5; }
  .sr-int-btn-record.is-recording {
    background: #dc2626;
    border-color: #7f1d1d;
    animation: srPulse 1s ease-in-out infinite;
  }
  .sr-int-btn-end {
    background: rgba(220, 38, 38, 0.85);
    border-color: rgba(127, 29, 29, 0.9);
  }
  .sr-int-btn-end:hover { background: #dc2626; }
  .sr-interview-answer {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border-left: 3px solid #FFD21E;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
  }
  .sr-interview-answer-label {
    font-weight: 800;
    color: #FFD21E;
    margin-right: 6px;
  }

  /* Intake form — collapsible accordion of OPQRST/OLD CARTS questions */
  .sr-intake {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 0;
    margin-bottom: 18px;
    overflow: hidden;
  }
  .sr-intake summary {
    cursor: pointer;
    padding: 12px 16px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0f172a;
    background: #fff;
    user-select: none;
  }
  .sr-intake summary:hover { background: #f1f5f9; }
  .sr-intake[open] summary { border-bottom: 2px solid #e2e8f0; }
  .sr-intake-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    padding: 14px 16px;
  }
  @media (max-width: 600px) {
    .sr-intake-grid { grid-template-columns: 1fr; }
  }
  .sr-intake-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .sr-intake-row > span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
  }
  .sr-intake-row input[type="text"] {
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    background: #fff;
    color: #0f172a;
  }
  .sr-intake-row input[type="text"]:focus {
    outline: 2px solid #14b8a6;
    outline-offset: -1px;
    border-color: #14b8a6;
  }
  .sr-intake-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 0;
  }
  .sr-intake-radios label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
  }
  .sr-intake-radios input[type="radio"] { accent-color: #14b8a6; }

  /* Chip-picker (used for medications + medical history) */
  .sr-intake-row-full { grid-column: 1 / -1; }
  .sr-meds {
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: text;
  }
  .sr-meds:focus-within {
    outline: 2px solid #14b8a6;
    outline-offset: -1px;
    border-color: #14b8a6;
  }
  .sr-meds-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .sr-meds-chips:empty { display: none; }
  .sr-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1263D5;
    color: #fff;
    border-radius: 999px;
    padding: 3px 8px 3px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 1px 1px 0 #0a2870;
  }
  .sr-chip-text { white-space: nowrap; }
  .sr-chip-x {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 1;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
  }
  .sr-chip-x:hover { background: rgba(255, 255, 255, 0.5); }
  .sr-meds-input {
    border: 0;
    outline: none;
    width: 100%;
    padding: 4px 6px;
    font-size: 13px;
    background: transparent;
    color: #0f172a;
  }
  .sr-intake-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px 14px;
    flex-wrap: wrap;
  }
  .sr-intake-clear {
    background: transparent;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .sr-intake-clear:hover { border-color: #475569; color: #0f172a; }
  .sr-intake-hint {
    font-size: 11px;
    color: #64748b;
    flex: 1;
    text-align: right;
  }

  .sr-record-row {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-bottom: 12px;
  }
  .sr-record-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1263D5;
    color: #fff;
    border: 3px solid #0a2870;
    border-radius: 14px;
    padding: 14px 24px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 3px 3px 0 #0a2870;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .sr-record-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #0a2870;
  }
  .sr-record-btn.is-recording {
    background: #dc2626;
    border-color: #7f1d1d;
    box-shadow: 3px 3px 0 #7f1d1d;
    animation: srPulse 1.2s ease-in-out infinite;
  }
  @keyframes srPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
  }
  .sr-record-icon { font-size: 22px; line-height: 1; }
  .sr-timer {
    font-family: var(--code, monospace);
    font-size: 22px;
    font-weight: 700;
    color: #475569;
    min-width: 70px;
  }
  .sr-status {
    text-align: center;
    margin: 0;
    font-size: 13px;
    color: #475569;
    font-weight: 600;
  }
  .sr-status[data-kind="error"] { color: #dc2626; }
  .sr-status[data-kind="ok"]    { color: #059669; }
  .sr-status[data-kind="info"]  { color: #1263D5; }

  .sr-output {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
  }
  .sr-pane {
    background: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
  }
  .sr-pane summary {
    cursor: pointer;
    padding: 12px 18px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f172a;
    background: #f1f5f9;
    user-select: none;
  }
  .sr-pane summary:hover { background: #e2e8f0; }
  .sr-pane[open] summary { border-bottom: 1px solid #e2e8f0; }
  .sr-pane-body {
    margin: 0;
    padding: 16px 18px;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 13px;
    line-height: 1.5;
    color: #1e293b;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
  }
  .sr-pane-actions {
    display: flex;
    gap: 8px;
    padding: 0 18px 14px;
    flex-wrap: wrap;
  }
  .sr-copy-btn {
    background: #0f172a;
    color: #fff;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 7px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
  }
  .sr-copy-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
  .sr-doc-btn { background: #1263D5; border-color: #0a2870; box-shadow: 2px 2px 0 #0a2870; }
  .sr-doc-btn:hover { box-shadow: 3px 3px 0 #0a2870; }

  /* Rating block — measurement loop. Three big buttons under the
     structured note. Captures every rating to /api/scribe/rate so the
     team can see what's working without depending on the public
     feedback widget. */
  .sr-rate-block {
    margin: 0 18px 14px;
    padding: 12px 14px;
    background: #f1f5f9;
    border: 2px dashed #94a3b8;
    border-radius: 10px;
  }
  .sr-rate-prompt {
    margin: 0 0 10px;
    font-size: 13px;
    color: #1f2937;
    line-height: 1.5;
  }
  .sr-rate-prompt strong { color: #0a2870; }
  .sr-rate-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .sr-rate-btn {
    flex: 1 1 calc(33.333% - 6px);
    min-height: 44px;
    padding: 10px 14px;
    border: 2px solid #000;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s;
  }
  .sr-rate-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 #000;
  }
  .sr-rate-good:hover  { background: #dcfce7; border-color: #16a34a; box-shadow: 3px 3px 0 #16a34a; }
  .sr-rate-bad:hover   { background: #fee2e2; border-color: #dc2626; box-shadow: 3px 3px 0 #dc2626; }
  .sr-rate-star:hover  { background: #fef9c3; border-color: #ca8a04; box-shadow: 3px 3px 0 #ca8a04; }

  .sr-rate-why {
    margin-top: 10px;
    display: grid;
    gap: 8px;
  }
  .sr-rate-why-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .sr-rate-why textarea {
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    color: #0f172a;
    background: #fff;
  }
  .sr-rate-why textarea:focus { outline: none; border-color: #1263D5; }
  .sr-rate-why-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .sr-rate-why-skip,
  .sr-rate-why-submit {
    border: 2px solid #000;
    border-radius: 8px;
    padding: 7px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
  }
  .sr-rate-why-skip   { background: #fff; color: #0f172a; }
  .sr-rate-why-submit { background: #1263D5; color: #fff; border-color: #0a2870; box-shadow: 2px 2px 0 #0a2870; }
  .sr-rate-why-skip:hover,
  .sr-rate-why-submit:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
  .sr-rate-why-submit:hover { box-shadow: 3px 3px 0 #0a2870; }

  .sr-rate-thanks {
    margin-top: 8px;
    padding: 10px;
    background: #dcfce7;
    border: 1px solid #16a34a;
    border-radius: 8px;
    color: #14532d;
    text-align: center;
    font-size: 13px;
  }
  .sr-rate-thanks strong { color: #14532d; }

  @media (max-width: 768px) {
    .sr-rate-block { margin: 0 14px 12px; padding: 10px 12px; }
    .sr-rate-btn { flex: 1 1 100%; font-size: 14px; min-height: 48px; }
    .sr-rate-why-actions { flex-direction: column; align-items: stretch; }
    .sr-rate-why-skip, .sr-rate-why-submit { width: 100%; min-height: 44px; }
  }

  /* Helper hint shown under the Structured-Note action buttons explaining
     that copy-paste is the current path into the user's EMR (no direct
     EHR integration yet). */
  .sr-paste-hint {
    margin: 4px 18px 14px;
    padding: 10px 12px;
    background: #fef9c3;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.55;
    color: #713f12;
  }
  .sr-paste-hint strong { color: #92400e; }
  .sr-paste-hint em { font-style: italic; font-weight: 700; color: #92400e; }

  /* Gap-fill panel — shown after summarize when "Not documented" fields exist. */
  .sr-gap-panel {
    background: #fff7d6;
    border: 3px solid #000;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 16px 0;
    box-shadow: 5px 5px 0 #000;
  }
  .sr-gap-panel.is-disabled { opacity: 0.55; pointer-events: none; }
  .sr-gap-head h3 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 18px;
    color: #0a2870;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .sr-gap-head p {
    margin: 0 0 12px;
    color: #475569;
    font-size: 13px;
  }
  .sr-gap-list {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
  }
  .sr-gap-row {
    background: #fff;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 2px 2px 0 #000;
  }
  .sr-gap-label {
    display: block;
    font-weight: 700;
    font-size: 12px;
    color: #0a2870;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  .sr-gap-input-row { display: flex; gap: 6px; align-items: stretch; }
  .sr-gap-input {
    flex: 1;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 14px;
    font-family: inherit;
    min-width: 0;
  }
  .sr-gap-input:focus { outline: none; border-color: #1263D5; }
  .sr-gap-mic {
    background: #fde047;
    border: 2px solid #000;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
    user-select: none;
    touch-action: none;
  }
  .sr-gap-mic:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
  .sr-gap-mic.is-recording {
    background: #ef4444;
    color: #fff;
    animation: srGapPulse 1s infinite;
  }
  @keyframes srGapPulse {
    0%, 100% { box-shadow: 2px 2px 0 #000; }
    50%      { box-shadow: 2px 2px 0 #000, 0 0 0 4px rgba(239, 68, 68, 0.35); }
  }
  .sr-gap-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .sr-gap-skip-all,
  .sr-gap-submit {
    border: 2px solid #000;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
  }
  .sr-gap-skip-all { background: #fff; color: #0a2870; }
  .sr-gap-submit   { background: #1263D5; color: #fff; border-color: #0a2870; box-shadow: 2px 2px 0 #0a2870; }
  .sr-gap-skip-all:hover,
  .sr-gap-submit:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
  .sr-gap-submit:hover { box-shadow: 3px 3px 0 #0a2870; }

  /* ICD-10 suggestion pane — appears below the structured note */
  .sr-icd-pane summary { gap: 8px; }
  .sr-icd-badge {
    display: inline-block;
    background: #1263D5;
    color: #fff;
    border: 2px solid #0a2870;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 12px;
    min-width: 22px;
    text-align: center;
    padding: 1px 7px;
    box-shadow: 1px 1px 0 #0a2870;
  }
  .sr-icd-body { padding: 0 18px 14px; }
  .sr-icd-note {
    margin: 0 0 12px;
    font-size: 12px;
    color: #475569;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    padding: 8px 10px;
    border-radius: 4px;
  }
  .sr-icd-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
  }
  .sr-icd-item {
    background: #fff;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 2px 2px 0 #000;
  }
  .sr-icd-high { border-color: #16a34a; box-shadow: 2px 2px 0 #16a34a; }
  .sr-icd-mid  { border-color: #f59e0b; box-shadow: 2px 2px 0 #f59e0b; }
  .sr-icd-low  { border-color: #94a3b8; box-shadow: 2px 2px 0 #94a3b8; }
  .sr-icd-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .sr-icd-code {
    font-family: 'JetBrains Mono', 'Menlo', ui-monospace, monospace;
    font-size: 15px;
    font-weight: 700;
    color: #0a2870;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.3px;
  }
  .sr-icd-conf {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #0a2870;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: auto;
  }
  .sr-icd-high .sr-icd-conf { background: #16a34a; }
  .sr-icd-mid  .sr-icd-conf { background: #f59e0b; color: #1f2937; }
  .sr-icd-low  .sr-icd-conf { background: #94a3b8; }
  .sr-icd-copy {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 13px;
  }
  .sr-icd-copy:hover { background: #e2e8f0; }
  .sr-icd-desc {
    margin-top: 4px;
    font-size: 13px;
    color: #1f2937;
  }
  .sr-icd-kws {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .sr-icd-kw {
    background: #fef9c3;
    border: 1px solid #facc15;
    color: #713f12;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 4px;
  }
  .sr-icd-loading,
  .sr-icd-empty,
  .sr-icd-error {
    color: #64748b;
    font-style: italic;
    font-size: 13px;
    padding: 8px 0;
    list-style: none;
  }
  .sr-icd-error { color: #dc2626; }

  /* ─── Public feedback widget — non-member, no-login suggestion box ─── */
  .sr-feedback {
    margin: 24px 0 16px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 14px 16px;
    transition: background 0.15s, border-color 0.15s;
  }
  .sr-feedback:hover { background: #f1f5f9; border-color: #94a3b8; }
  .sr-feedback-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 6px 4px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    text-align: left;
    letter-spacing: 0.01em;
  }
  .sr-feedback-toggle:hover { color: #0f172a; }
  .sr-feedback-form { display: grid; gap: 10px; padding-top: 4px; }
  .sr-fb-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .sr-fb-label em {
    color: #94a3b8;
    font-style: normal;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
  }
  .sr-fb-label input,
  .sr-fb-label textarea {
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    background: #fff;
    resize: vertical;
  }
  .sr-fb-label input:focus,
  .sr-fb-label textarea:focus {
    outline: none;
    border-color: #1263D5;
  }
  .sr-fb-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  .sr-fb-cancel,
  .sr-fb-send {
    border: 2px solid #000;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
  }
  .sr-fb-cancel { background: #fff; color: #0f172a; }
  .sr-fb-send   { background: #1263D5; color: #fff; border-color: #0a2870; box-shadow: 2px 2px 0 #0a2870; }
  .sr-fb-cancel:hover,
  .sr-fb-send:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
  .sr-fb-send:hover { box-shadow: 3px 3px 0 #0a2870; }
  .sr-fb-send:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: 2px 2px 0 #475569;
  }
  .sr-fb-hint {
    margin: 0;
    font-size: 11px;
    color: #94a3b8;
    text-align: right;
  }
  .sr-feedback-thanks {
    color: #16a34a;
    font-weight: 700;
    text-align: center;
    padding: 8px;
    font-size: 14px;
  }

  /* Public feed of all submitted feedback — visible to everyone. */
  .sr-feedback-feed {
    margin: 16px 0 24px;
    background: #fff;
    border: 2px solid #0a2870;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 3px 3px 0 #0a2870;
  }
  .sr-ff-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    border-bottom: 2px dashed #cbd5e1;
    padding-bottom: 10px;
  }
  .sr-ff-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: #0a2870;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sr-ff-count {
    background: #1263D5;
    color: #fff;
    border: 2px solid #0a2870;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    min-width: 24px;
    text-align: center;
    padding: 1px 7px;
    box-shadow: 1px 1px 0 #0a2870;
  }
  .sr-ff-refresh {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    color: #475569;
    line-height: 1;
  }
  .sr-ff-refresh:hover { background: #e2e8f0; color: #0f172a; }
  .sr-ff-refresh.is-loading { animation: srFFSpin 0.6s linear infinite; }
  @keyframes srFFSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .sr-ff-list {
    display: grid;
    gap: 10px;
  }
  .sr-ff-card {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.15s, background 0.15s;
  }
  .sr-ff-card:hover { background: #fff; border-color: #1263D5; }
  .sr-ff-card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .sr-ff-name {
    font-family: var(--font-display);
    font-weight: 800;
    color: #0a2870;
    font-size: 13px;
  }
  .sr-ff-name.sr-ff-anon { color: #94a3b8; font-style: italic; font-weight: 600; }
  .sr-ff-time {
    font-size: 11px;
    color: #94a3b8;
    margin-left: auto;
    white-space: nowrap;
  }
  .sr-ff-msg {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #1f2937;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .sr-ff-empty {
    margin: 0;
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    font-size: 13px;
    padding: 8px 0;
  }
  /* Pulse animation for the just-added comment so the user sees their own */
  .sr-ff-card.is-new {
    animation: srFFNewPulse 1.2s ease-out;
  }
  @keyframes srFFNewPulse {
    0%   { background: #dbeafe; border-color: #1263D5; transform: scale(1); }
    50%  { background: #dbeafe; border-color: #1263D5; transform: scale(1.005); }
    100% { background: #f8fafc; border-color: #cbd5e1; transform: scale(1); }
  }

  @media (max-width: 768px) {
    .sr-feedback-feed { padding: 12px 14px; }
    .sr-ff-title { font-size: 14px; }
    .sr-ff-card { padding: 9px 11px; }
    .sr-ff-msg { font-size: 12px; }
    .sr-ff-time { font-size: 10px; }
  }

  .sr-tribute {
    border-top: 1px dashed #cbd5e1;
    padding: 18px 4px 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
  }
  .sr-tribute em { color: #0f172a; font-style: italic; font-weight: 600; }

  /* ═══════════════════════════════════════════════════════════════
   * SCRIBE-ROBOT — SMARTPHONE LAYOUT (≤ 768px)
   * Mobile-first: hero collapses, intake stacks, sticky bottom record
   * bar always reachable by thumb, transcript panes scroll horizontally
   * inside the card instead of pushing the viewport, ICD list goes to
   * a single column, and tap targets meet 44px minimum throughout.
   * ═══════════════════════════════════════════════════════════════ */
  @media (max-width: 768px) {
    #scribeRobotView .sr-shell {
      padding: 14px 12px 60px;
      max-width: 100%;
    }

    /* Hero — compact stack on phones: small avatar+title row at top,
       full-width callouts below. */
    .sr-hero {
      gap: 10px;
      padding: 12px;
      margin-bottom: 14px;
      box-shadow: 3px 3px 0 #0a062a;
    }
    .sr-hero-top {
      gap: 10px;
      align-items: center;
    }
    .sr-hero-img {
      width: 56px;
      height: 56px;
      border-width: 2px;
      border-radius: 12px;
    }
    .sr-hero-title {
      font-size: 22px;
      margin-bottom: 2px;
    }
    .sr-hero-tagline { font-size: 13px; margin-bottom: 4px; }
    .sr-hero-bio {
      font-size: 12px;
      line-height: 1.4;
      /* Keep bio short on mobile — clamp to 3 lines with ellipsis */
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Card — full-width, lighter padding */
    .sr-card { padding: 14px; border-radius: 12px; box-shadow: 2px 2px 0 #222; }

    /* Template selector — stack label above, full-width 48px tap target */
    .sr-tpl-row {
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      margin-bottom: 14px;
    }
    .sr-tpl-select {
      padding: 12px 14px;
      font-size: 15px;
      min-height: 48px;
    }

    /* Voice interview CTA — full-width chunky button */
    .sr-voice-intake-row {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }
    .sr-voice-btn {
      width: 100%;
      padding: 14px 16px;
      font-size: 15px;
      min-height: 52px;
      justify-content: center;
    }
    .sr-voice-hint { font-size: 12px; text-align: center; }

    /* Voice interview panel during a session */
    .sr-interview { padding: 12px; }
    .sr-interview-q { font-size: 16px; line-height: 1.4; }
    .sr-interview-controls { flex-wrap: wrap; gap: 8px; }
    .sr-int-btn {
      flex: 1 1 100%;
      min-height: 48px;
      font-size: 14px;
      justify-content: center;
    }
    .sr-int-btn-record { flex: 1 1 100%; }

    /* Intake form — single column, stacked labels */
    .sr-intake summary { padding: 12px; font-size: 14px; }
    .sr-intake-grid {
      grid-template-columns: 1fr !important;
      gap: 10px;
    }
    .sr-intake-row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
    }
    .sr-intake-row > span {
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .sr-intake-row input[type="text"] {
      padding: 11px 12px;
      font-size: 15px;
      min-height: 44px;
      border-radius: 8px;
    }
    .sr-intake-row-radios {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    .sr-intake-radios {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .sr-intake-radios label {
      flex: 1 1 calc(50% - 4px);
      padding: 10px 8px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 14px;
      text-align: center;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #f8fafc;
    }
    .sr-intake-radios input[type="radio"] { margin: 0; }
    .sr-intake-row-full { width: 100%; }

    /* Chip-style med/allergy/history inputs */
    .sr-meds { padding: 8px; }
    .sr-meds-input {
      padding: 11px 12px;
      font-size: 15px;
      min-height: 44px;
    }
    .sr-meds-chips { gap: 6px; }

    .sr-intake-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }
    .sr-intake-clear {
      width: 100%;
      min-height: 44px;
    }
    .sr-intake-hint { font-size: 12px; text-align: center; }

    /* Floating mic — on phones, anchor it to the MIDDLE of the right edge
       (vertically centered) so the user's thumb can reach it naturally
       without stretching to the top of the screen while scrolling. */
    .sr-floating-mic {
      top: 50%;
      right: 14px;
      transform: translateY(-50%);
      width: 56px;
      height: 56px;
    }
    .sr-floating-mic-icon { font-size: 26px; }
    .sr-floating-mic:hover,
    .sr-floating-mic:focus-visible {
      transform: translateY(-50%) translate(-1px, -1px);
    }

    /* Inline record bar — flows in the card. The always-on action is now
       the small floating mic at middle-right (.sr-floating-mic, see above)
       which clears the dock-chat at z:141. */
    .sr-record-row {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }
    .sr-record-btn {
      width: 100%;
      justify-content: center;
      min-height: 52px;
      padding: 12px 16px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 12px;
    }
    .sr-record-btn .sr-record-icon { font-size: 18px; }
    .sr-timer {
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      color: #475569;
    }

    /* Status line — hide it from sticky bottom area, show it inline above */
    .sr-status {
      font-size: 13px;
      padding: 8px 10px;
      margin: 8px 0 0;
      border-radius: 8px;
      background: #f1f5f9;
      text-align: center;
    }

    /* Output panes — compact, scrollable transcripts */
    .sr-output { gap: 10px; }
    .sr-pane summary {
      padding: 12px 14px;
      font-size: 14px;
      min-height: 48px;
    }
    .sr-pane-body {
      padding: 12px 14px;
      font-size: 13px;
      line-height: 1.55;
      max-height: 280px;
      /* Allow horizontal scroll for long lines (e.g. refraction grids)
         instead of forcing wrap that loses alignment */
      overflow: auto;
    }
    .sr-pane-actions {
      flex-direction: column;
      gap: 8px;
      padding: 0 14px 12px;
    }
    .sr-copy-btn {
      width: 100%;
      min-height: 44px;
      justify-content: center;
      font-size: 13px;
    }

    /* Gap-fill panel */
    .sr-gap-panel {
      padding: 12px;
      margin: 12px 0;
      box-shadow: 3px 3px 0 #000;
    }
    .sr-gap-head h3 { font-size: 16px; }
    .sr-gap-head p  { font-size: 12px; }
    .sr-gap-input-row { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .sr-gap-input {
      flex: 1 1 100%;
      min-height: 44px;
      padding: 10px 12px;
      font-size: 15px;
    }
    .sr-gap-mic {
      flex: 0 0 auto;
      min-width: 56px;
      min-height: 44px;
      font-size: 18px;
    }
    .sr-gap-actions { flex-direction: column; align-items: stretch; }
    .sr-gap-skip-all,
    .sr-gap-submit {
      width: 100%;
      min-height: 44px;
      justify-content: center;
    }

    /* ICD-10 pane */
    .sr-icd-body { padding: 0 12px 12px; }
    .sr-icd-note { font-size: 12px; padding: 8px 10px; }
    .sr-icd-item { padding: 10px; }
    .sr-icd-row { flex-wrap: wrap; gap: 6px; }
    .sr-icd-code { font-size: 13px; }
    .sr-icd-conf { margin-left: auto; font-size: 11px; }
    .sr-icd-desc { font-size: 12px; }
    .sr-icd-kw   { font-size: 10px; padding: 1px 6px; }
    .sr-icd-copy { min-width: 40px; min-height: 36px; }

    /* Tribute footer */
    .sr-tribute { padding: 16px 4px 0; }
    .sr-tribute p { font-size: 11px; line-height: 1.5; }
  }

  /* Tiny phones (≤ 380px — iPhone SE 1st gen, mini Androids) */
  @media (max-width: 380px) {
    .sr-hero-top {
      flex-direction: column;
      text-align: center;
      align-items: center;
    }
    .sr-hero-img { width: 48px; height: 48px; }
    .sr-hero-title { font-size: 20px; }
    .sr-record-btn { font-size: 15px; padding: 12px 14px; min-height: 56px; }
    .sr-intake-radios label { flex: 1 1 100%; }
  }

  /* ═══════════════════════════════════════════════════════════════
   * CAPTAIN-MAN — AWMS dashboard (workforce routing table)
   * Royal-blue full-page background (#012262) when this section is
   * active. Yellow titles + cream body text for high contrast.
   * Uses body:has() to flip the page bg only on this view.
   * ═══════════════════════════════════════════════════════════════ */
  body:has(#captainManView.active) {
    background-color: #012262 !important;
    background-image: none !important;
  }
  body:has(#captainManView.active)::before { display: none !important; }

  #captainManView {
    background: #012262;
    min-height: 100vh;
  }
  #captainManView .cap-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 18px 80px;
    color: #f5e6c8;
  }

  /* ─── PIN gate / disclosure card ───────────────────────────── */
  .cap-lock {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
  }
  .cap-lock-card {
    max-width: 520px;
    width: 100%;
    background: linear-gradient(180deg, #022a78 0%, #012262 100%);
    border: 3px solid #FFD21E;
    border-radius: 18px;
    padding: 42px 36px;
    text-align: center;
    box-shadow:
      0 0 0 6px rgba(255, 210, 30, 0.1),
      0 24px 60px rgba(0, 0, 0, 0.6);
    position: relative;
  }
  .cap-lock-seal {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 12px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  }
  .cap-lock-banner {
    display: inline-block;
    background: #FFD21E;
    color: #0f172a;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.2em;
    padding: 4px 14px;
    border-radius: 4px;
    border: 2px solid #000;
    box-shadow: 2px 2px 0 #000;
    margin-bottom: 16px;
  }
  .cap-lock-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 900;
    color: #FFD21E;
    margin: 0 0 18px;
    line-height: 1.2;
    text-shadow: 2px 2px 0 #000;
  }
  .cap-lock-disclosure {
    color: #f5e6c8;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 18px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.25);
    border-left: 4px solid #FFD21E;
    border-radius: 6px;
    text-align: left;
  }
  .cap-lock-disclosure strong { color: #FFD21E; }
  .cap-lock-subtext {
    color: rgba(245, 230, 200, 0.7);
    font-size: 13px;
    margin: 0 0 16px;
    font-style: italic;
  }

  .cap-lock-form {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
  }
  .cap-lock-pin {
    font-family: var(--code, ui-monospace, monospace);
    font-size: 28px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.4em;
    width: 160px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    border: 3px solid #000;
    border-radius: 10px;
    box-shadow: 2px 2px 0 #000;
    outline: none;
  }
  .cap-lock-pin:focus {
    border-color: #FFD21E;
    box-shadow: 2px 2px 0 #000, 0 0 0 3px rgba(255, 210, 30, 0.4);
  }
  .cap-lock-shake {
    animation: capLockShake 0.4s ease;
  }
  @keyframes capLockShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
  }
  .cap-lock-btn {
    background: #FFD21E;
    color: #0f172a;
    border: 3px solid #000;
    border-radius: 10px;
    padding: 12px 24px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 3px 3px 0 #000;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .cap-lock-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #000;
  }
  .cap-lock-btn.cap-lock-out {
    margin-left: auto;
    align-self: flex-start;
    padding: 6px 14px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.4);
    color: #FFD21E;
    border-color: #FFD21E;
    box-shadow: 2px 2px 0 #FFD21E;
  }

  .cap-lock-error {
    color: #fecaca;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 8px;
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(220, 38, 38, 0.5);
    padding: 8px 12px;
    border-radius: 6px;
  }
  .cap-lock-footnote {
    color: rgba(245, 230, 200, 0.45);
    font-size: 11px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 210, 30, 0.2);
    font-style: italic;
  }
  .cap-hero {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 18px;
    border: 2px solid #FFD21E;
    box-shadow: 4px 4px 0 #0a0f1f;
  }
  .cap-hero-img {
    width: 96px; height: 96px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid #FFD21E;
    background: #1263D5;
  }
  .cap-hero-title {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 900;
    color: #FFD21E;
    margin: 0 0 6px;
    text-shadow: 2px 2px 0 #000;
  }
  .cap-hero-tagline {
    font-size: 14px;
    color: #fff;
    margin: 0 0 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .cap-hero-bio {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin: 0;
  }

  .cap-content {
    margin-bottom: 24px;
  }
  .cap-loading, .cap-empty, .cap-error {
    padding: 30px;
    text-align: center;
    color: rgba(245, 230, 200, 0.7);
    font-size: 14px;
  }
  .cap-error { color: #fecaca; }

  .cap-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 22px;
  }
  @media (max-width: 600px) {
    .cap-stats { grid-template-columns: repeat(2, 1fr); }
  }
  .cap-stat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 210, 30, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  .cap-stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: #FFD21E;
    line-height: 1.1;
  }
  .cap-stat-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(245, 230, 200, 0.55);
    margin-top: 3px;
    font-weight: 700;
  }

  .cap-section-title {
    font-family: var(--font-display);
    font-size: 18px;
    color: #FFD21E;
    margin: 22px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .cap-section-intro {
    color: rgba(245, 230, 200, 0.7);
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.5;
  }

  .cap-table-wrap {
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 210, 30, 0.25);
    border-radius: 12px;
    margin-bottom: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  .cap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .cap-table th {
    text-align: left;
    padding: 10px 12px;
    background: rgba(255, 210, 30, 0.08);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FFD21E;
    border-bottom: 1px solid rgba(255, 210, 30, 0.25);
  }
  .cap-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #f5e6c8;
    vertical-align: middle;
  }
  .cap-table tr:hover { background: rgba(255, 255, 255, 0.03); }
  .cap-table code {
    background: rgba(255, 210, 30, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #FFD21E;
  }
  .cap-row-error { color: #fecaca; font-style: italic; }
  .cap-tier-label { color: rgba(245, 230, 200, 0.65); font-size: 11px; }

  .cap-privacy-chip, .cap-aud-chip, .cap-tier-chip {
    display: inline-block;
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .cap-tier-chip { font-family: var(--code, monospace); }
  .cap-tier-error { background: #64748b; }

  .cap-meter {
    position: relative;
    width: 120px;
    height: 18px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    overflow: hidden;
  }
  .cap-meter-bar {
    height: 100%;
    background: #FFD21E;
    transition: width 0.3s ease;
  }
  .cap-meter-label {
    position: absolute;
    inset: 0;
    text-align: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  }

  .cap-tier-match-ok { color: #10b981; font-size: 10px; font-weight: 700; }
  .cap-tier-match-override { color: #fb923c; font-size: 10px; font-weight: 700; }
  .cap-allocation { color: rgba(245, 230, 200, 0.55); font-size: 10px; }

  .cap-tribute {
    border-top: 1px dashed rgba(255, 210, 30, 0.2);
    padding: 18px 4px 0;
    color: rgba(245, 230, 200, 0.55);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
  }
  .cap-tribute code {
    background: rgba(255, 210, 30, 0.1);
    padding: 1px 5px;
    border-radius: 3px;
    color: #FFD21E;
  }

  /* Hashtag-Man tags on News Woman cards (her dedicated page) */
  .nw-card-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
    padding: 8px 0 0;
    border-top: 1px dashed rgba(15, 23, 42, 0.08);
  }
  .nw-card-hashtag {
    display: inline-block;
    background: #eef2ff;
    color: #1263D5;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
  }

  /* Hashtag-Man tags on home feed posts (any post with hashtags field) */
  .fp-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
  }
  .fp-hashtag {
    display: inline-block;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
  }
  .fp-hashtag::before { content: '#'; opacity: 0.7; margin-right: 1px; }

  /* Hashtag row that lives below the .fp-meta-foot date pill on every
     feed post. Always visible; edit pencil only renders for admins. */
  .fp-hashtag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(99, 102, 241, 0.18);
  }
  .fp-hashtag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }
  .fp-hashtag-empty {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-style: italic;
  }
  .fp-hashtag-edit {
    flex: 0 0 auto;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #6366f1;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .fp-hashtag-edit:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.6);
  }
  .fp-hashtag-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
  }
  .fp-hashtag-input {
    flex: 1 1 220px;
    min-width: 0;
    background: #0f172a;
    color: #fff;
    border: 1px solid rgba(99, 102, 241, 0.45);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
  }
  .fp-hashtag-input:focus {
    outline: none;
    border-color: #6366f1;
  }
  .fp-hashtag-save,
  .fp-hashtag-cancel {
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid rgba(99, 102, 241, 0.45);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .fp-hashtag-save { background: #6366f1; border-color: #6366f1; }
  .fp-hashtag-save:hover { background: #4f46e5; }
  .fp-hashtag-save:disabled { background: #475569; cursor: not-allowed; }
  .fp-hashtag-cancel:hover { background: #334155; }

  /* Hashtag-Man tags — shown on recipe cards and detail */
  .rcp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
  }
  .rcp-tag {
    display: inline-block;
    background: #eef2ff;
    color: #1263D5;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.4;
  }
  .rcp-detail-tags {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
  }
  .rcp-detail-tags-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
    margin-bottom: 8px;
  }

  /* Admin links editor — same shape as user-facing edit drawer */
  .am-edit-section-title {
    font-family: var(--font-display);
    font-size: 16px;
    margin: 18px 0 4px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
    color: #0f172a;
  }
  .am-edit-section-hint {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 10px;
  }
  .am-edit-section-hint code {
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
  }
  .am-edit-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
  }
  .am-link-row {
    display: grid;
    grid-template-columns: 44px 1fr 1.4fr 28px;
    gap: 6px;
    align-items: center;
  }
  .am-link-row input {
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
    min-width: 0;
  }
  .am-link-row .am-link-icon { text-align: center; font-size: 18px; padding: 4px; }
  .am-link-remove {
    background: #fee2e2;
    color: #991b1b;
    border: 0;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
  }
  .am-link-remove:hover { background: #fecaca; }
  .am-add-link-btn {
    background: transparent;
    border: 2px dashed #cbd5e1;
    color: #475569;
    border-radius: 10px;
    padding: 9px;
    width: 100%;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 12px;
  }
  .am-add-link-btn:hover {
    border-color: #14b8a6;
    color: #14b8a6;
  }
  /* Tiny inline "View profile →" link in the admin edit modal title */
  .am-modal-view-link {
    font-size: 13px;
    font-weight: 600;
    color: #14b8a6;
    text-decoration: none;
    margin-left: 12px;
    white-space: nowrap;
  }
  .am-modal-view-link:hover { text-decoration: underline; }

  /* ═══════════════════════════════════════════════════════════════
   * MEMBER PROFILE PAGE — Linktree-style ID card.
   * URL: /@username (or /u/username, /m/username).
   * Mobile-first: card fills the screen on phones, centers on desktop.
   * Inspired by eye2tap.net's minipage layout (avatar + QR side-by-side).
   * ═══════════════════════════════════════════════════════════════ */
  /* When the profile view is active, hide page chrome (rails, banner, dock)
   * so the card is the entire focused experience — like a Linktree page. */
  body.on-profile .top-dock,
  body.on-profile .footer-dock,
  body.on-profile .app-rail,
  body.on-profile .home-ads,
  body.on-profile .section-banner,
  body.on-profile .lm-bottom-bar,
  body.on-profile .dock-chat,
  body.on-profile .looky-sounds-toggle,
  body.on-profile .mobile-menu-toggle,
  body.on-profile .site-footer,
  body.on-profile .footer,
  body.on-profile .footer-tagline,
  body.on-profile #onlinePill,
  body.on-profile .header-account,
  body.on-profile .header-cart,
  body.on-profile .header-music,
  body.on-profile .header-phone-preview,
  body.on-profile .chat-window,
  body.on-profile .music-player {
    display: none !important;
  }
  body.on-profile .container {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  body.on-profile {
    /* Subtle off-white page bg — the phone-shaped card sits centered on top */
    background: #f0f4f8 !important;
    background-image: none !important;
  }
  body.on-profile::before { display: none !important; }

  /* Card sits at top of viewport; page scrolls naturally as content grows. */
  #memberProfileView .mp-shell {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
  }
  @media (min-width: 480px) {
    #memberProfileView .mp-shell { padding: 16px; }
  }

  .mp-loading,
  .mp-empty {
    color: #fff;
    text-align: center;
    padding: 60px 20px;
  }
  .mp-empty-title {
    font-family: var(--font-display);
    font-size: 24px;
    margin-bottom: 12px;
  }

  /* Card grows naturally with content. Bg image paints the blue hero +
   * curved wave at top; below the image extent the card stays white.
   * Page scrolls normally — no overflow trap. */
  .mp-card {
    width: 100%;
    max-width: 390px;
    background: #ffffff url('/assets/profile-bg.jpg?v=3') no-repeat top center;
    background-size: 100% auto;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    padding: 0;
    position: relative;
    color: #0f172a;
    display: flex;
    flex-direction: column;
  }

  /* ─── HERO (top portion of bg image) ───────────────────────
   * Layout (top to bottom):
   *   1) Chip centered at very top
   *   2) Row: avatar (left) + SCAN-ME QR (right)
   * Everything sits over the bg image's blue hero painted on .mp-card. */
  .mp-hero {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    padding: 14px 18px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* Black chip — CENTERED at top */
  .mp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0f172a;
    color: #fff;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 6px 14px;
    box-shadow: 2px 2px 0 #000;
    z-index: 3;
  }
  .mp-chip-star { color: #FFD21E; font-size: 16px; line-height: 1; }
  .mp-chip-text {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Avatar (left) + SCAN-ME (right) row */
  .mp-hero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    z-index: 2;
  }

  .mp-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    background: #1a1040;
    flex-shrink: 0;
  }

  /* SCAN ME card with QR */
  .mp-scan {
    background: #ffffff;
    border-radius: 12px;
    padding: 7px 10px 9px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-align: center;
    flex-shrink: 0;
  }
  .mp-scan-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #0f172a;
    margin-bottom: 5px;
  }
  .mp-qr {
    width: 96px !important;
    height: 96px !important;
    background: #fff;
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;  /* keep QR squares crisp at any zoom */
  }

  /* ─── BODY (white area below the wave) ─────────────────── */
  .mp-body {
    flex: 1;
    padding: 18px 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #0f172a;
  }

  /* Name in solid blue box with white font (per user spec) */
  .mp-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .mp-name-box {
    background: #1263D5;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 8px 18px 10px;
    border-radius: 10px;
    border: 2px solid #0a2870;
    box-shadow: 3px 3px 0 #0a2870;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .mp-verified {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FFD21E;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 16px;
    border: 2px solid #0f172a;
    box-shadow: 2px 2px 0 #0f172a;
  }
  .mp-handle {
    font-size: 14px;
    color: #475569;
    margin: 0 0 14px;
    font-weight: 600;
  }

  /* Speech-bubble bio — pill with downward tail */
  .mp-bio-bubble {
    position: relative;
    background: #ffffff;
    color: #0f172a;
    border-radius: 999px;
    padding: 12px 22px;
    margin: 4px 0 22px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    max-width: 100%;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  }
  .mp-bio-bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffffff;
    filter: drop-shadow(0 3px 4px rgba(15, 23, 42, 0.06));
  }

  /* Contact rows — Phone / Email tappable rows on profile */
  .mp-contact {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    padding: 0 4px;
  }
  .mp-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    text-decoration: none;
    color: inherit;
    text-align: left;
    transition: transform 0.15s ease;
  }
  .mp-contact-row:hover { transform: translateY(-1px); }
  .mp-contact-icon {
    font-size: 22px;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
  }
  .mp-contact-body { flex: 1; min-width: 0; }
  .mp-contact-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
  }
  .mp-contact-value {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    word-break: break-all;
  }
  .mp-contact-link { color: #1263D5; }

  /* Hint text in edit-form labels */
  .mp-edit-hint {
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
    margin-left: 4px;
  }

  /* Preset avatar grid — pick from 12 illustrated avatars */
  .mp-preset-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin: 14px 0 8px;
  }
  .mp-preset-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
  }
  @media (max-width: 480px) {
    .mp-preset-grid { grid-template-columns: repeat(4, 1fr); }
  }
  .mp-preset-tile {
    aspect-ratio: 1;
    width: 100%;
    background: #f1f5f9;
    border: 2px solid transparent;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, border-color 0.15s ease;
  }
  .mp-preset-tile:hover {
    transform: translateY(-1px);
    border-color: #cbd5e1;
  }
  .mp-preset-tile.is-selected {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
  }
  .mp-preset-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* File-upload row for avatar + cover (in user-facing edit drawer) */
  .mp-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .mp-upload-preview {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: #e2e8f0;
    border: 2px solid #cbd5e1;
    flex-shrink: 0;
  }
  .mp-upload-preview-wide {
    width: 96px;
    height: 56px;
    border-radius: 8px;
  }
  .mp-upload-btn {
    background: #14b8a6;
    color: #fff;
    border: 2px solid #0a2870;
    border-radius: 8px;
    padding: 7px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 2px 2px 0 #0a2870;
  }
  .mp-upload-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 #0a2870;
  }
  .mp-upload-status {
    font-size: 12px;
    color: #475569;
    flex: 1;
    min-width: 100px;
  }
  .mp-upload-status[data-kind="error"] { color: #dc2626; font-weight: 700; }
  .mp-upload-status[data-kind="ok"]    { color: #059669; font-weight: 700; }
  .mp-upload-status[data-kind="info"]  { color: #1263D5; }

  /* Bio picker dropdown — sits above the bio textarea in both edit forms */
  .mp-bio-picker {
    width: 100%;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    background: #fff;
    color: #0f172a;
    margin-bottom: 8px;
    cursor: pointer;
    font-family: inherit;
  }
  .mp-bio-picker:focus {
    outline: 2px solid #14b8a6;
    outline-offset: -1px;
  }

  /* Section title with sparkle dividers */
  .mp-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 14px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #0f172a;
    width: 100%;
  }
  .mp-section-title::before,
  .mp-section-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, transparent, #cbd5e1 40%, #cbd5e1 60%, transparent);
  }
  .mp-section-title span { white-space: nowrap; }

  /* App icon grid — 3 columns of square tiles. Now sits on the WHITE body
   * (not dark hero), so labels are dark. */
  .mp-apps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 8px;
    width: 100%;
    padding: 8px 4px 4px;
    margin-bottom: 22px;
  }
  .mp-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #0f172a;
    transition: transform 0.15s ease;
  }
  .mp-app:hover { transform: translateY(-2px); }
  .mp-app-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
    background: #fff;
    display: block;
  }
  .mp-app-icon img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .mp-app-label {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #475569;
  }
  /* Old single-link buttons (kept for legacy / "primary" home link in
   * empty-state cards). Used by .mp-link-primary still. */
  .mp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1040;
    border: 2px solid #222;
    border-radius: 14px;
    padding: 10px 18px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 2px 2px 0 #222;
  }
  .mp-link:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #222; }
  .mp-link-primary { background: #fff; justify-content: center; }
  .mp-no-links {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 16px 0;
    font-size: 13px;
  }

  .mp-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid #e2e8f0;
    width: 100%;
  }
  .mp-share-btn,
  .mp-shot-btn {
    background: #1263D5;
    color: #fff;
    border: 2px solid #0a2870;
    border-radius: 10px;
    padding: 9px 14px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 2px 2px 0 #0a2870;
    transition: transform 0.15s ease;
    white-space: nowrap;
  }
  .mp-share-btn:hover,
  .mp-shot-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 #0a2870;
  }
  .mp-shot-btn {
    background: #FFD21E;
    color: #0f172a;
    border-color: #000;
    box-shadow: 2px 2px 0 #000;
  }
  .mp-shot-btn:hover { box-shadow: 3px 3px 0 #000; }
  .mp-shot-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .mp-copyright {
    text-align: center;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    margin: 14px 0 6px;
    letter-spacing: 0.04em;
  }
  .mp-disclaimer {
    text-align: center;
    color: #94a3b8;
    font-size: 9.5px;
    line-height: 1.4;
    margin: 0;
    padding: 0 4px;
    font-weight: 500;
  }

  /* Phone tweaks for narrow screens */
  @media (max-width: 380px) {
    .mp-avatar { width: 108px; height: 108px; bottom: -22px; }
    .mp-qr     { width: 72px !important; height: 72px !important; }
    .mp-name-box { font-size: 24px; padding: 6px 14px 8px; }
    .mp-body { padding: 42px 18px 20px; }
  }

  /* ─── Edit button + drawer (owner self-service) ─── */
  .mp-edit-btn {
    background: #14b8a6;
    color: #fff;
    border: 2px solid #222;
    border-radius: 10px;
    padding: 8px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #222;
    transition: transform 0.15s ease;
  }
  .mp-edit-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 #222;
  }

  .mp-edit-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mp-edit-card {
    width: 100%;
    max-width: 390px;
    aspect-ratio: 9 / 16;
    background: #ffffff;
    border-radius: 28px;
    padding: 22px 18px 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    color: #111;
    font-family: var(--font-body);
    /* Long forms scroll inside the phone silhouette */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }
  .mp-edit-card::-webkit-scrollbar { width: 4px; }
  .mp-edit-card::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.15); border-radius: 2px; }
  .mp-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .mp-edit-head h2 {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0;
    color: #0f172a;
  }
  .mp-edit-close {
    background: transparent;
    border: 0;
    font-size: 24px;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
    padding: 4px 8px;
  }
  .mp-edit-close:hover { color: #0f172a; }

  .mp-edit-row {
    margin-bottom: 14px;
  }
  .mp-edit-row label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    margin-bottom: 6px;
  }
  .mp-edit-row input,
  .mp-edit-row textarea {
    width: 100%;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    background: #fff;
    color: #0f172a;
    font-family: inherit;
    box-sizing: border-box;
  }
  .mp-edit-row input:focus,
  .mp-edit-row textarea:focus {
    outline: 2px solid #14b8a6;
    outline-offset: -1px;
    border-color: #14b8a6;
  }
  .mp-edit-row textarea { resize: vertical; min-height: 70px; }

  .mp-edit-section-title {
    font-family: var(--font-display);
    font-size: 16px;
    margin: 18px 0 6px;
    color: #0f172a;
  }
  .mp-edit-section-hint {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 12px;
  }

  .mp-edit-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
  }
  /* Edit drawer link row — [icon preview] [app picker] [URL] [remove].
   * On narrow widths, app + URL stack below the icon. */
  .mp-link-row {
    display: grid;
    grid-template-columns: 44px 1fr 28px;
    grid-template-areas:
      'icon app  remove'
      'icon url  remove';
    gap: 6px 8px;
    align-items: center;
  }
  .mp-link-row .mp-link-icon-preview {
    grid-area: icon;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
    background: #fff;
    align-self: center;
  }
  .mp-link-row .mp-link-icon-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .mp-link-row .mp-link-app-select {
    grid-area: app;
    width: 100%;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 7px 8px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: #0f172a;
    box-sizing: border-box;
    cursor: pointer;
  }
  .mp-link-row .mp-link-url-input {
    grid-area: url;
    width: 100%;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 12px;
    background: #fff;
    box-sizing: border-box;
  }
  .mp-link-row .mp-link-remove { grid-area: remove; align-self: center; }
  .mp-link-remove {
    background: #fee2e2;
    color: #991b1b;
    border: 0;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
  }
  .mp-link-remove:hover { background: #fecaca; }

  .mp-edit-add-link {
    background: transparent;
    border: 2px dashed #cbd5e1;
    color: #475569;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 16px;
  }
  .mp-edit-add-link:hover {
    border-color: #14b8a6;
    color: #14b8a6;
  }

  .mp-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
  }
  .mp-edit-cancel,
  .mp-edit-save {
    border: 2px solid #222;
    border-radius: 10px;
    padding: 10px 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #222;
    transition: transform 0.15s ease;
  }
  .mp-edit-cancel { background: #fff; color: #222; }
  .mp-edit-save   { background: #14b8a6; color: #fff; }
  .mp-edit-cancel:hover,
  .mp-edit-save:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #222; }
  .mp-edit-save:disabled { background: #94a3b8; cursor: not-allowed; }