/* ── APP SHELL (hidden until boot completes) ──── */
    #app-shell {
      opacity: 0;
      pointer-events: none;
    }
    #app-shell.app-ready {
      opacity: 1;
      pointer-events: all;
      transition: opacity 0.3s ease;
    }

    /* ── BOOT SCREEN ─────────────────────────────── */
    #boot-screen {
      position: fixed;
      inset: 0;
      background: #141414;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      gap: 20px;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }
    #boot-screen.boot-gone {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    #boot-logo-wrap {
      position: relative;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #boot-logo {
      width: 80px;
      height: 80px;
      background: none;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Poppins', sans-serif;
      font-size: 42px;
      font-weight: 700;
      color: #141414;
      letter-spacing: -2px;
      position: relative;
      z-index: 2;
      overflow: visible;
      animation: boot-logo-pulse 1.1s ease-in-out infinite;
    }
    @keyframes boot-logo-pulse {
      0%, 100% {
        box-shadow: 0 0 0px rgba(232,138,26,0), 0 0 0px rgba(207,48,48,0);
        transform: scale(1);
      }
      50% {
        box-shadow: 0 0 28px rgba(232,138,26,0.9), 0 0 60px rgba(207,48,48,0.4);
        transform: scale(1.05);
      }
    }
    #boot-ring {
      position: absolute;
      inset: -10px;
      border-radius: 8px;
      border: 1.5px solid rgba(232,138,26,0.4);
      animation: boot-ring-expand 1.1s ease-out infinite;
    }
    #boot-ring2 {
      position: absolute;
      inset: -10px;
      border-radius: 8px;
      border: 1.5px solid rgba(232,138,26,0.2);
      animation: boot-ring-expand 1.1s ease-out 0.55s infinite;
    }
    @keyframes boot-ring-expand {
      0%   { transform: scale(1); opacity: 0.8; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    #boot-wordmark {
      font-family: 'Poppins', sans-serif;
      font-size: 28px;
      font-weight: 700;
      letter-spacing: 0.28em;
      color: #FFFFFF;
      text-transform: uppercase;
      opacity: 0;
      animation: boot-text-in 0.5s ease 0.4s forwards;
    }
    #boot-tagline {
      font-family: 'Poppins', sans-serif;
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.3em;
      color: #E88A1A;
      text-transform: uppercase;
      opacity: 0;
      animation: boot-text-in 0.5s ease 0.75s forwards;
    }
    @keyframes boot-text-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    #boot-bar-wrap {
      width: 180px;
      height: 2px;
      background: rgba(232,138,26,0.15);
      border-radius: 8px;
      overflow: hidden;
      opacity: 0;
      animation: boot-text-in 0.3s ease 1s forwards;
    }
    #boot-bar {
      height: 100%;
      width: 0%;
      background: #E88A1A;
      border-radius: 8px;
      box-shadow: 0 0 8px rgba(232,138,26,0.8);
      transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    body {
      font-family: 'Poppins', sans-serif;
      background: #141414;
      color: #D9D9D9;
      min-height: 100vh;
      display: flex;
      flex-direction: row;
      margin: 0;
      letter-spacing: 0.01em;
    }

    /* ── MOBILE TOP BAR (hidden on desktop) ──────── */
    .mobile-topbar {
      display: none;
    }

    /* ── MOBILE BOTTOM BAR (hidden on desktop) ───── */
    .mobile-bottom {
      display: none;
    }

    /* ── SIDEBAR ─────────────────────────────────── */
    .sidebar {
      position: fixed; left: 0; top: 0; bottom: 0;
      width: 48px; z-index: 50;
      display: flex; flex-direction: column; align-items: center;
      padding: 12px 0;
      background: #141414;
      border-right: 1px solid rgba(232,138,26,0.12);
      overflow: visible;
      transition: width 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
    }
    .sidebar.expanded {
      width: 220px;
      background: #141414;
      box-shadow: 4px 0 20px rgba(20,20,20,0.4);
    }

    .sb-logo-row {
      display: flex; align-items: center; flex-shrink: 0; height: 44px;
    }

    .sb-row {
      position: relative; display: flex; align-items: center;
      width: 100%; min-height: 36px; padding: 0;
      border: none; background: none; cursor: pointer;
      color: #4A4A4A; text-align: left; flex-shrink: 0;
    }
    .sb-row:hover { background: rgba(232,138,26,0.10); color: #E88A1A; }

    .sb-icon-slot {
      width: 40px; min-width: 40px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .sb-icon-slot svg { width: 18px; height: 18px; display: block; }

    /* Toggle icon state swap — higher specificity than .sb-icon-slot svg { display:block } */
    .sb-icon-slot .sb-toggle-close { display: none; }
    .sidebar.expanded .sb-icon-slot .sb-toggle-open  { display: none; }
    .sidebar.expanded .sb-icon-slot .sb-toggle-close { display: block; }

    .sb-label {
      font-family: 'Poppins', sans-serif; font-size: 13px;
      font-weight: 400; color: #D9D9D9; white-space: nowrap;
      overflow: hidden; max-width: 0; opacity: 0;
      transition: max-width 0.22s ease, opacity 0.12s ease;
    }
    .sidebar.expanded .sb-label { max-width: 180px; opacity: 1; }

    /* Brand swap: "I" logo ↔ "Ifatron" wordmark */
    .sb-logo-row .logo-mark {
      transition: opacity 0.15s ease, transform 0.15s ease;
    }
    .sidebar.expanded .sb-logo-row .logo-mark {
      opacity: 0; transform: scale(0.75); pointer-events: none;
    }
    .brand-wordmark {
      font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600;
      color: #D9D9D9; white-space: nowrap; overflow: hidden;
      max-width: 0; opacity: 0; letter-spacing: -0.3px;
      transition: max-width 0.22s ease, opacity 0.15s ease;
    }
    .sidebar.expanded .brand-wordmark { max-width: 160px; opacity: 1; }

    .sidebar:not(.expanded) .sb-row[data-tip]:hover::after {
      content: attr(data-tip);
      position: absolute;
      left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
      background: #E88A1A; color: #141414; font-size: 12px;
      padding: 6px 10px; border-radius: 8px; white-space: nowrap;
      pointer-events: none; z-index: 9999; font-family: 'Poppins', sans-serif;
    }

    .sb-recents {
      display: none; flex-direction: column;
      padding: 0 8px; flex: 1; min-height: 0;
      overflow-y: auto; overflow-x: hidden; margin-top: 8px;
    }
    .sidebar.expanded .sb-recents { display: flex; }

    .sb-section-title {
      font-family: 'Poppins', sans-serif; font-size: 10.5px;
      font-weight: 500; color: #8C8C8C; text-transform: uppercase;
      letter-spacing: 0.06em; padding: 0 10px; margin-bottom: 4px;
    }

    .sb-recent-btn {
      display: block; width: 100%; padding: 7px 10px;
      border: none; background: none; border-radius: 8px; cursor: pointer;
      font-family: 'Poppins', sans-serif; font-size: 12.5px;
      font-weight: 400; color: #D9D9D9; text-align: left;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sb-recent-btn:hover { background: rgba(232,138,26,0.10); }

    .sb-show-more {
      display: block; padding: 5px 10px;
      font-family: 'Poppins', sans-serif; font-size: 12px;
      color: #E88A1A; cursor: pointer; text-decoration: none;
    }
    .sb-show-more:hover { text-decoration: underline; }

    .sb-user-row { margin-top: auto; }

    .u-avatar {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: #E88A1A;
      color: #141414;
      font-size: 10px;
      font-weight: 600;
      font-family: 'Poppins', sans-serif;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      letter-spacing: 0.2px;
      user-select: none;
    }

    /* ── TOP-RIGHT ───────────────────────────────── */
    .top-right {
      position: fixed;
      top: 10px; right: 14px;
      z-index: 50;
      display: flex; align-items: center; gap: 8px;
    }

    /* Online counter (shown in .top-right on desktop, .mobile-topbar on mobile) */
    .online-pill {
      display: inline-flex; align-items: center; gap: 6px;
      height: 28px; padding: 0 10px;
      border: 1px solid rgba(232,138,26,0.18);
      border-radius: 8px;
      font-size: 12px; line-height: 1; color: #D9D9D9;
      white-space: nowrap;
    }
    .online-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #3DDC84;
    }
    .mobile-topbar .online-pill { margin-left: auto; }

    .tr-btn {
      width: 34px; height: 34px;
      background: none; border: none;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: #4A4A4A;
    }

    .tr-btn:hover { background: rgba(232,138,26,0.12); }
    .tr-btn svg { width: 22px; height: 22px; }

    /* Mobile topbar hamburger/toggle button */
    .sb-btn {
      width: 36px; height: 36px;
      background: none; border: none;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: #4A4A4A;
      flex-shrink: 0;
    }
    .sb-btn:hover { background: rgba(232,138,26,0.08); color: #E88A1A; }
    .sb-btn svg { width: 20px; height: 20px; display: block; }
    /* Mobile drawer toggle icon swap — driven by body.drawer-open */
    .sb-btn .sb-toggle-close { display: none; }
    body.drawer-open .sb-btn .sb-toggle-open  { display: none; }
    body.drawer-open .sb-btn .sb-toggle-close { display: block; }

    /* ── MAIN ────────────────────────────────────── */
    .main {
      position: fixed;
      left: 44px;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow-y: auto;
      padding: 0 20px 60px;
    }

    /* Greeting */
    .greeting {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }

    /* "I" logomark */
    .logo-mark {
      width: 42px;
      height: 42px;
      background: none;
      border-radius: 0;
      display: block;
      flex-shrink: 0;
      object-fit: contain;
      mix-blend-mode: screen;
    }

    .sb-logo {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
    }

    .sb-logo-img {
      width: 28px;
      height: 28px;
      object-fit: contain;
      mix-blend-mode: screen;
      display: block;
    }

    .greeting h1 {
      font-family: 'Poppins', sans-serif;
      font-size: 2.6rem;
      font-weight: 700;
      color: #D9D9D9;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    /* Tortoise brand mark — black on gold background */
    .brand-tortoise {
      width: 65%;
      height: 65%;
      display: block;
      flex-shrink: 0;
      color: #141414;
    }

    /* ── HOME SCREEN ─────────────────────────────── */
    #home-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 700px;
      max-width: calc(100vw - 40px);
      margin: 0 auto;
    }

    .home-chip-row {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 18px;
      min-height: 1px;
    }

    .home-constituency-chip {
      padding: 6px 14px;
      background: rgba(232,138,26,0.08);
      border: 1px solid rgba(232,138,26,0.25);
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      color: #8C8C8C;
      letter-spacing: 0.02em;
    }
    .home-constituency-chip:empty { display: none; }

    /* ── SEARCH BAR ──────────────────────────────── */
    .search-bar {
      width: 100%;
      background: #1A1A1A;
      border: 1px solid rgba(232,138,26,0.3);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(20,20,20,0.4);
      margin-bottom: 24px;
      display: flex;
      align-items: flex-end;
      padding: 10px 10px 10px 18px;
      gap: 8px;
    }

    .search-input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      color: #D9D9D9;
      resize: none;
      line-height: 1.5;
      max-height: 100px;
      padding: 8px 0;
    }
    .search-input::placeholder { color: #4A4A4A; }

    .search-bar-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      padding-bottom: 2px;
    }

    .search-send-btn {
      width: 34px; height: 34px;
      background: #E88A1A;
      border: none;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: #141414;
      flex-shrink: 0;
      transition: background 0.14s, transform 0.1s;
    }
    .search-send-btn:hover { background: #c97814; transform: translateY(-1px); }
    .search-send-btn svg { width: 18px; height: 18px; display: block; }

    /* ── ICON GRID ───────────────────────────────── */
    .icon-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
    }
    /* Row 1: two large tiles (Election, Report Corruption) span 3 of 6
       columns each; row 2: three smaller tiles span 2 each. */
    .icon-tile { grid-column: span 2; }
    .icon-tile-lg {
      grid-column: span 3;
      padding: 24px 12px;
      gap: 10px;
    }
    .icon-tile-lg .icon-tile-glyph { width: 40px; height: 40px; }
    .icon-tile-lg .icon-tile-glyph svg { width: 28px; height: 28px; }
    .icon-tile-lg .icon-tile-label { font-size: 13px; font-weight: 600; }

    .icon-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 16px 8px;
      background: #1A1A1A;
      border: 1px solid rgba(232,138,26,0.18);
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.14s, box-shadow 0.14s;
    }
    .icon-tile:hover {
      background: rgba(232,138,26,0.08);
      box-shadow: 0 0 20px rgba(232,138,26,0.25);
    }
    .icon-tile-glyph {
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      color: #E88A1A;
    }
    .icon-tile-glyph svg { width: 20px; height: 20px; }
    .icon-tile-label {
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      font-weight: 500;
      color: #D9D9D9;
      text-align: center;
      letter-spacing: 0.01em;
    }

    @media (max-width: 767px) {
      /* Two rows on mobile (large + small), taller than the desktop cap. */
      body.home-active .icon-grid { max-height: 260px; }
    }

    /* ── HOME-ACTIVE VISIBILITY ──────────────────── */
    body.home-active .sidebar { display: none; }
    body.home-active .main { left: 0; }
    body.home-active .mobile-bottom { display: none; }

    /* Desktop: once chatting, keep .search-bar as the ongoing input (no
       separate desktop chat input exists otherwise) but drop the
       greeting/chip/icon-grid, and push the search-bar after
       #chat-messages via flex order so it doesn't sit above the thread.
       .main switches from centering (idle) to bottom-anchored (chatting)
       so the search-bar settles at the foot of the screen, matching the
       mobile composer position; the collapsing siblings below transition
       shut instead of snapping via display:none, so the search-bar visibly
       glides down as they shrink. */
    body:not(.home-active) .main { justify-content: flex-end; }
    body:not(.home-active) #home-screen { order: 2; }

    .home-chip-row,
    .greeting,
    .icon-grid {
      overflow: hidden;
      transition: max-height 0.35s ease, opacity 0.3s ease,
        transform 0.35s ease, margin 0.35s ease;
    }
    .home-chip-row { max-height: 60px; }
    .greeting { max-height: 90px; }
    .icon-grid { max-height: 260px; }

    body:not(.home-active) .home-chip-row,
    body:not(.home-active) .greeting,
    body:not(.home-active) .icon-grid {
      max-height: 0;
      opacity: 0;
      margin: 0;
      transform: translateY(16px);
      pointer-events: none;
    }


    /* ── MOBILE DRAWER ──────────────────────────────── */
    #mobile-drawer-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(20,20,20,0.35);
      z-index: 499;
    }

    #mobile-drawer {
      position: fixed;
      left: 0; top: 0; bottom: 0;
      width: 80vw;
      max-width: 300px;
      background: #141414;
      z-index: 500;
      padding: 56px 20px 0;
      display: flex;
      flex-direction: column;
      /* Scroll inside the drawer when the menu is taller than the screen */
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      border-radius: 0 8px 8px 0;
      transform: translateX(-100%);
      transition: transform 0.25s ease;
    }

    @media (min-width: 768px) {
      #mobile-drawer, #mobile-drawer-overlay { display: none !important; }
    }

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

    .md-title {
      font-family: 'Poppins', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: #FFFFFF;
    }

    .md-close-btn {
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      background: none;
      border: none;
      border-radius: 8px;
      color: #D9D9D9;
      cursor: pointer;
      flex-shrink: 0;
    }
    .md-close-btn:hover { background: rgba(232,138,26,0.1); color: #E88A1A; }
    .md-close-btn svg { width: 18px; height: 18px; }

    .md-nav {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .md-nav-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 8px;
      height: 48px;
      border: none;
      background: none;
      border-radius: 8px;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      font-weight: 400;
      color: #D9D9D9;
      text-align: left;
      width: 100%;
    }
    .md-nav-row:active { background: rgba(232,138,26,0.08); }
    .md-nav-row svg { width: 20px; height: 20px; flex-shrink: 0; color: #D9D9D9; }

    .md-recents {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
    }

    .md-recents-label {
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      font-weight: 500;
      color: #8C8C8C;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 6px;
    }

    .md-recent-item {
      display: block;
      width: 100%;
      padding: 10px 0;
      border: none;
      background: none;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: #D9D9D9;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-bottom: 1px solid rgba(232,138,26,0.1);
    }

    .md-all-chats {
      display: block;
      padding: 10px 0;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: #8C8C8C;
      cursor: pointer;
      text-decoration: none;
    }

    /* Drawer footer avatar — mirrors desktop sidebar user row */
    .md-user-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      margin-top: auto;
      /* Always visible at the bottom of the drawer, even while the menu scrolls */
      position: sticky;
      bottom: 0;
      flex-shrink: 0;
      padding: 14px 0 calc(20px + env(safe-area-inset-bottom));
      border: none;
      border-top: 1px solid rgba(232,138,26,0.15);
      background: #141414;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: #D9D9D9;
      text-align: left;
    }
    .md-user-row:active { opacity: 0.7; }
    .md-user-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ════════════════════════════════════════════════
       RESPONSIVE — MOBILE  (max 767px)
       Desktop layout (768px+) is completely unchanged.
    ════════════════════════════════════════════════ */
    @media (max-width: 767px) {

      /* Lock full-screen layout, prevent iOS rubber-band */
      body {
        position: fixed;
        width: 100%;
        height: 100dvh;
        overflow: hidden;
        overflow-x: hidden;
        flex-direction: column;
      }

      html {
        overflow-x: hidden;
        width: 100%;
        overscroll-behavior: none;
      }
      body { overscroll-behavior: none; }

      /* Hide desktop chrome; show nothing behind the new mobile bar */
      .sidebar   { display: none; }
      .top-right { display: none; }

      #home-screen {
        width: 100%;
        max-width: 100%;
        padding: 20px 16px 0;
        box-sizing: border-box;
      }

      /* ── Fixed top bar ── */
      .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 54px;
        padding: 0 14px;
        background: #141414;
        border-bottom: 1px solid rgba(232,138,26,0.18);
        z-index: 100;
        flex-shrink: 0;
      }

      /* ── Main: full-screen flex column, padded below topbar ── */
      .main {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--app-offset-top, 0px);
        margin-left: 0;
        width: 100%;
        height: var(--app-height, 100dvh);
        display: flex;
        flex-direction: column;
        padding-top: 54px;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;
        align-items: stretch;
        justify-content: flex-start;
      }

      /* ── Greeting: fills empty area, vertically centered ── */
      .greeting {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0;
        padding: 24px;
        text-align: center;
      }

      .logo-mark {
        width: 36px;
        height: 36px;
        background: none;
        border-radius: 0;
        object-fit: contain;
        mix-blend-mode: screen;
      }

      .greeting h1 {
        font-size: 1.7rem;
        letter-spacing: -0.3px;
      }

      /* ── Chat messages: full-width column, bubbles pin to edges ── */
      #chat-messages {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
        flex: 1;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        align-self: stretch;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding: 16px;
        margin: 0;
        gap: 10px;
      }

      .chat-bubble { max-width: 88%; }

      /* Pin user bubble hard-right, assistant hard-left */
      .chat-bubble-user {
        align-self: flex-end;
        margin-left: auto;
        margin-right: 0;
      }
      .chat-bubble-assistant {
        align-self: flex-start;
        margin-right: auto;
        margin-left: 0;
      }

      /* ── Mobile bottom bar: pills + input, anchored at foot of column ── */
      .mobile-bottom {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        background: #141414;
        border-top: 1px solid rgba(232,138,26,0.18);
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }

      /* Mobile: .mobile-input-row is the real chat input once chatting,
         so unlike desktop, the whole home screen (search-bar included)
         hides -- no need to keep the search-bar around here. */
      body:not(.home-active) #home-screen { display: none; order: 0; }

      /* Input row */
      .mobile-input-row {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        padding: 8px 12px;
      }


      /* Pill-shaped input container */
      .mob-pill {
        flex: 1;
        display: flex;
        align-items: flex-end;
        background: #141414;
        border: 1.5px solid rgba(232,138,26,0.5);
        border-radius: 8px;
        padding: 5px 5px 5px 14px;
        min-height: 40px;
      }

      /* Textarea inside the pill */
      .mob-textarea {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        font-family: 'Poppins', sans-serif;
        font-size: 15px;
        color: #D9D9D9;
        resize: none;
        line-height: 1.5;
        height: 28px;
        max-height: 100px;
        overflow-y: auto;
        padding: 0;
        align-self: center;
      }
      .mob-textarea::placeholder { color: #8C8C8C; }

      /* Gold send button (outside pill, right of input) */
      .mob-send {
        flex-shrink: 0;
        width: 38px; height: 38px;
        border: none;
        border-radius: 50%;
        background: #E88A1A;
        color: #141414;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        transition: background 0.14s, transform 0.1s;
      }
      .mob-send:hover { background: #c97814; transform: translateY(-1px); }
      .mob-send svg { width: 18px; height: 18px; display: block; }

    }

    /* ── CHAT MESSAGES ───────────────────────────── */
    #chat-messages {
      display: none;
      flex-direction: column;
      overflow-y: auto;
      scroll-behavior: smooth;
    }
    #chat-messages.visible { display: flex; }

    /* Desktop-only sizing — mobile sizing lives in the max-width:767px block above */
    @media (min-width: 768px) {
      #chat-messages {
        gap: 12px;
        width: 756px;
        max-width: calc(100vw - 80px);
        max-height: 55vh;
        margin-bottom: 16px;
      }
    }

    /* ── SUGGESTION CHIPS (mid-conversation) ────────── */
    .suggestion-chip-row {
      display: none;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      gap: 6px;
      padding: 8px 12px 0;
    }
    .suggestion-chip-row::-webkit-scrollbar { display: none; }
    .suggestion-chip-row.visible { display: flex; }

    .suggestion-chip {
      flex-shrink: 0;
      padding: 6px 12px;
      background: transparent;
      border: 1px solid rgba(232,138,26,0.3);
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      color: #D9D9D9;
      white-space: nowrap;
      cursor: pointer;
      transition: background 0.14s;
    }
    .suggestion-chip:hover { background: rgba(232,138,26,0.08); }

    .chat-bubble {
      max-width: 82%;
      padding: 12px 16px;
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .chat-bubble-user {
      align-self: flex-end;
      background: #E88A1A;
      color: #141414;
      border: none;
      border-bottom-right-radius: 8px;
    }
    .chat-bubble a { color: #E88A1A; text-decoration: underline; word-break: break-all; }

    .chat-bubble-assistant {
      align-self: flex-start;
      background: #1A1A1A;
      color: #D9D9D9;
      border: 1px solid rgba(232,138,26,0.2);
      border-radius: 8px;
      border-bottom-left-radius: 8px;
    }
    .chat-loading {
      align-self: flex-start;
      background: none;
      border: none;
      box-shadow: none;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ── OVERLAY PAGES (Chats) ──────────────────── */
    /* z-index 800: matches .cf-overlay/.pres-overlay's full-bleed sub-page
       convention, above .mobile-topbar (100) so the overlay fully covers it */
    #chats-page {
      display: none;
      position: fixed;
      inset: 0;
      background: #141414;
      z-index: 800;
      flex-direction: column;
      padding-top: max(76px, calc(env(safe-area-inset-top) + 56px));
      padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    .overlay-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 20px 14px;
      flex-shrink: 0;
    }

    .overlay-title {
      font-family: 'Poppins', sans-serif;
      font-size: 18px;
      font-weight: 600;
      color: #FFFFFF;
    }

    /* ── CHATS PAGE ──────────────────────────────── */
    #chats-search {
      display: block;
      margin: 12px 20px 0;
      padding: 10px 14px;
      border: 1.5px solid rgba(232,138,26,0.35);
      border-radius: 8px;
      background: #141414;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      color: #D9D9D9;
      outline: none;
      width: calc(100% - 40px);
      flex-shrink: 0;
    }
    #chats-search::placeholder { color: #8C8C8C; }
    #chats-search:focus { border-color: #E88A1A; box-shadow: 0 0 0 3px rgba(232,138,26,0.12); }

    #chats-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px 20px 20px;
    }

    .chats-list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 13px 10px;
      border-bottom: 1px solid rgba(232,138,26,0.10);
      cursor: pointer;
      border-radius: 8px;
      transition: background 0.12s;
      gap: 12px;
    }
    .chats-list-item:hover { background: rgba(232,138,26,0.08); }

    .chats-list-item-title {
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      color: #D9D9D9;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .chats-list-item-time {
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      color: #8C8C8C;
      flex-shrink: 0;
    }

    .chats-empty {
      text-align: center;
      padding: 48px 20px;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      color: #8C8C8C;
    }

    /* ── AUTH SCREEN ─────────────────────────────── */
    #auth-screen {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      flex-direction: column;
      background: #141414;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      z-index: 200;
    }

    #app-root { display: none; }
    #app-root.visible { display: block; }

    .auth-logo-topbar {
      position: absolute;
      top: 18px; left: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .auth-wordmark {
      font-family: 'Poppins', sans-serif;
      font-size: 17px;
      font-weight: 600;
      color: #FFFFFF;
      letter-spacing: -0.3px;
    }

    .auth-center {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 90px 16px 48px;
    }

    .auth-center h2 {
      font-family: 'Poppins', sans-serif;
      font-size: 1.7rem;
      font-weight: 600;
      color: #FFFFFF;
      letter-spacing: -0.4px;
      margin-bottom: 6px;
      text-align: center;
    }

    .auth-subtitle {
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      color: #8C8C8C;
      margin-bottom: 28px;
      text-align: center;
    }

    #auth-form {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .auth-field.signup-only { display: none; }

    .auth-label {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: #D9D9D9;
    }

    .auth-label-hidden {
      position: absolute;
      width: 1px; height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .auth-input {
      width: 100%;
      height: 46px;
      background: #141414;
      border: 1px solid rgba(232,138,26,0.3);
      border-radius: 8px;
      padding: 0 14px;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      color: #D9D9D9;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
    }

    .auth-input:focus {
      border-color: #E88A1A;
      box-shadow: 0 0 0 3px rgba(232,138,26,0.12);
    }

    .auth-select {
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A5650' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-color: #141414;
      padding-right: 38px;
    }

    .auth-error {
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      color: #CF3030;
      display: none;
    }

    .auth-error.visible { display: block; }

    .auth-submit-btn {
      width: 100%;
      height: 48px;
      background: #E88A1A;
      color: #141414;
      border: none;
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 6px;
      transition: opacity 0.15s;
    }

    .auth-submit-btn:hover { opacity: 0.9; }
    .auth-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

    .auth-loader {
      display: none;
      align-items: center;
      gap: 4px;
    }

    .auth-loader.visible { display: flex; }

    .auth-toggle {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: #8C8C8C;
      margin-top: 18px;
      text-align: center;
      width: 100%;
      max-width: 420px;
    }

    .auth-toggle-link {
      background: none;
      border: none;
      color: #E88A1A;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      padding: 0;
      text-decoration: underline;
    }

    .auth-forgot-link {
      align-self: flex-start;
      margin-top: 12px;
      font-size: 13px;
    }

    @media (min-width: 768px) {
      .auth-logo-topbar { left: 50%; transform: translateX(-50%); }
      .auth-forgot-link { align-self: center; }
    }

    .auth-toggle {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .auth-toggle #auth-toggle-btn {
      width: 100%;
      height: 48px;
      border: 1px solid #E88A1A;
      border-radius: 8px;
      text-decoration: none;
      font-size: 15px;
    }

    .auth-toggle #auth-toggle-btn:hover { background: rgba(232, 138, 26, 0.1); }

    .auth-footer {
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      color: #8C8C8C;
      padding: 0 16px 20px;
      line-height: 1.6;
    }

    .auth-link {
      color: #8C8C8C;
      text-decoration: underline;
      cursor: pointer;
    }

    @media (max-width: 767px) {
      #auth-form { max-width: calc(100vw - 32px); }
      .auth-toggle { max-width: calc(100vw - 32px); }
      .auth-center { align-items: center; }
      .auth-center h2,
      .auth-subtitle,
      .auth-toggle,
      .auth-footer { text-align: center; }
      .auth-center h2, .auth-subtitle { width: 100%; }
      .auth-logo-topbar { left: 50%; transform: translateX(-50%); }
      .auth-forgot-link { align-self: center; }
    }

    /* ── AVATAR POPUP MENU ───────────────────────── */
    #avatar-menu {
      display: none;
      position: fixed;
      width: 224px;
      max-height: calc(100vh - 80px);
      background: #141414;
      border: 1px solid rgba(232,138,26,0.35);
      border-radius: 8px;
      box-shadow: 0 6px 24px rgba(20,20,20,0.5), 0 1px 6px rgba(20,20,20,0.3);
      z-index: 600;
      overflow-y: auto;
      overflow-x: hidden;
      animation: dd-in 0.18s ease;
    }
    #avatar-menu.visible { display: block; }

    /* ── Language submenu panel ── */
    .av-lang-panel { display: none; }
    .av-lang-panel.visible { display: block; animation: dd-in 0.13s ease; }
    .av-sub-header {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px 10px 8px;
      border-bottom: 1px solid rgba(232,138,26,0.15);
      font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #D9D9D9;
      position: sticky; top: 0; background: #141414; z-index: 1;
    }
    .av-sub-back {
      border: none; background: none; cursor: pointer;
      padding: 5px 6px; display: flex; align-items: center;
      color: #B0B0B0; border-radius: 8px; flex-shrink: 0;
      transition: color 0.12s, background 0.12s;
    }
    .av-sub-back:hover { color: #c97814; background: rgba(232,138,26,0.08); }
    .av-lang-row {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; padding: 10px 16px; min-height: 44px;
      border: none; background: none;
      font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 400; color: #D9D9D9;
      cursor: pointer; text-align: left;
      border-bottom: 1px solid rgba(232,138,26,0.08); transition: background 0.12s;
    }
    .av-lang-row:last-child { border-bottom: none; }
    .av-lang-row:hover { background: rgba(232,138,26,0.08); }
    .av-lang-row.active { background: rgba(232,138,26,0.06); }
    .av-lang-label { flex: 1; }
    .av-lang-check {
      color: #E88A1A; font-size: 14px; font-weight: 700;
      visibility: hidden; flex-shrink: 0; margin-left: 8px;
    }
    .av-lang-row.active .av-lang-check { visibility: visible; }
    .av-chevron-right { margin-left: auto; flex-shrink: 0; color: #8C8C8C; }

    .av-menu-item {
      display: flex; align-items: center; gap: 12px;
      width: 100%; padding: 11px 16px;
      border: none; background: none;
      font-family: 'Poppins', sans-serif; font-size: 13px;
      font-weight: 400; color: #D9D9D9;
      cursor: pointer; text-align: left;
      border-bottom: 1px solid rgba(232,138,26,0.08);
      transition: background 0.12s;
    }
    .av-menu-item:last-child { border-bottom: none; }
    .av-menu-item:hover { background: rgba(232,138,26,0.08); }
    .av-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; color: #8C8C8C; }
    .av-menu-item.danger { color: #CF3030; }
    .av-menu-item.danger svg { color: #CF3030; }

    /* ── MOBILE APP POPUP ───────────────────────── */
    #mobile-app-popup {
      display: none;
      position: fixed;
      width: 256px;
      background: #141414;
      border: 1px solid rgba(232,138,26,0.35);
      border-radius: 8px;
      box-shadow: 0 6px 24px rgba(20,20,20,0.5);
      z-index: 610;
      padding: 18px;
      animation: dd-in 0.18s ease;
    }
    #mobile-app-popup.visible { display: block; }
    .map-title {
      font-family: 'Poppins', sans-serif; font-size: 14px;
      font-weight: 600; color: #FFFFFF; margin-bottom: 8px;
      display: flex; align-items: center; gap: 10px;
    }
    .map-title svg { color: #E88A1A; }
    .map-body {
      font-family: 'Poppins', sans-serif; font-size: 13px;
      color: #8C8C8C; line-height: 1.55; margin-bottom: 14px;
    }
    .map-close {
      width: 100%; height: 36px; background: #E88A1A; color: #000;
      border: none; border-radius: 8px; font-family: 'Poppins', sans-serif;
      font-size: 13px; font-weight: 500; cursor: pointer;
    }

    /* ── SETTINGS MODAL ─────────────────────────── */
    #settings-backdrop {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(20,20,20,0.7);
      z-index: 700;
      align-items: center;
      justify-content: center;
    }
    #settings-backdrop.visible { display: flex; }

    #settings-modal {
      position: relative;
      width: 760px;
      max-width: calc(100vw - 32px);
      height: 70vh; max-height: 600px;
      background: #141414;
      border-radius: 8px;
      overflow: hidden;
      display: flex; flex-direction: column;
      box-shadow: 0 20px 60px rgba(20,20,20,0.6);
    }

    .settings-header {
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 18px 24px 0 64px; flex-shrink: 0;
    }
    .settings-header h3 {
      font-family: 'Poppins', sans-serif; font-size: 16px;
      font-weight: 600; color: #FFFFFF;
    }
    .settings-close {
      position: absolute;
      top: 16px; left: 16px;
      width: 36px; height: 36px; background: none; border: none;
      border-radius: 8px; display: flex; align-items: center;
      justify-content: center; cursor: pointer; color: #4A4A4A;
      z-index: 5;
    }
    .settings-close:hover { background: rgba(232,138,26,0.10); color: #E88A1A; }
    .settings-close svg { width: 18px; height: 18px; }

    .settings-body {
      display: flex; flex: 1; min-height: 0; margin-top: 12px;
    }

    .settings-nav {
      width: 192px; flex-shrink: 0;
      border-right: 1px solid rgba(232,138,26,0.15);
      padding: 8px 10px;
      display: flex; flex-direction: column; gap: 2px;
    }
    .settings-nav-item {
      display: flex; align-items: center;
      width: 100%; padding: 9px 12px;
      border: none; background: none; border-radius: 8px;
      font-family: 'Poppins', sans-serif; font-size: 13px;
      font-weight: 400; color: #D9D9D9;
      cursor: pointer; text-align: left; transition: background 0.12s;
    }
    .settings-nav-item:hover { background: rgba(232,138,26,0.08); }
    .settings-nav-item.active {
      background: rgba(232,138,26,0.15); color: #FFFFFF; font-weight: 500;
    }

    .settings-content {
      flex: 1; overflow-y: auto; padding: 20px 26px 28px;
    }

    .settings-panel { display: none; }
    .settings-panel.active { display: block; }

    .settings-section { margin-bottom: 26px; }
    .settings-section-label {
      font-family: 'Poppins', sans-serif; font-size: 10.5px;
      font-weight: 600; color: #8C8C8C;
      text-transform: uppercase; letter-spacing: 0.07em;
      margin-bottom: 12px;
    }

    .settings-row {
      display: flex; align-items: center;
      justify-content: space-between; gap: 12px; margin-bottom: 12px;
    }
    .settings-row-label {
      font-family: 'Poppins', sans-serif; font-size: 13px;
      color: #D9D9D9; flex-shrink: 0; min-width: 90px;
    }

    .settings-input, .settings-select {
      flex: 1; height: 42px; background: #141414;
      border: 1px solid rgba(232,138,26,0.3); border-radius: 8px;
      padding: 0 12px; font-family: 'Poppins', sans-serif;
      font-size: 13px; color: #D9D9D9; outline: none;
      -webkit-appearance: none; appearance: none;
    }
    .settings-input:focus, .settings-select:focus {
      border-color: #E88A1A; box-shadow: 0 0 0 3px rgba(232,138,26,0.12);
    }
    .settings-select {
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A5650' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-color: #141414;
      padding-right: 32px;
    }

    .settings-btn {
      height: 36px; padding: 0 16px; border: none; border-radius: 8px;
      font-family: 'Poppins', sans-serif; font-size: 13px;
      font-weight: 500; cursor: pointer; transition: opacity 0.14s; flex-shrink: 0;
    }
    .settings-btn:hover { opacity: 0.85; }
    .settings-btn-primary { background: #E88A1A; color: #000; }
    .settings-btn-danger { background: none; border: 1.5px solid #CF3030; color: #CF3030; }
    .settings-btn-neutral { background: #1A1A1A; color: #D9D9D9; border: none; }

    .settings-avatar-row {
      display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
    }
    .settings-avatar {
      width: 52px; height: 52px; border-radius: 50%;
      background: #E88A1A; color: #141414;
      font-size: 18px; font-weight: 600; font-family: 'Poppins', sans-serif;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; flex-shrink: 0;
    }
    .settings-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .settings-inline-msg {
      font-family: 'Poppins', sans-serif; font-size: 12px;
      margin-top: 4px; display: none;
    }
    .settings-inline-msg.ok   { color: #16A34A; display: block; }
    .settings-inline-msg.err  { color: #CF3030; display: block; }
    .settings-inline-msg.note { color: #8C8C8C; display: block; font-style: italic; }

    /* Toggle switch */
    .toggle-switch {
      position: relative; display: inline-block;
      width: 40px; height: 22px; flex-shrink: 0;
    }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: absolute; inset: 0;
      background: #D1D5DB; border-radius: 8px; cursor: pointer;
      transition: background 0.2s;
    }
    .toggle-slider::before {
      content: '';
      position: absolute; width: 16px; height: 16px;
      left: 3px; top: 3px; background: #FFF;
      border-radius: 50%; transition: transform 0.2s;
      box-shadow: 0 1px 3px rgba(20,20,20,0.2);
    }
    .toggle-switch input:checked + .toggle-slider { background: #E88A1A; }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

    /* Usage bars */
    .usage-bar-wrap { margin-bottom: 20px; }
    .usage-bar-header {
      display: flex; justify-content: space-between;
      align-items: baseline; margin-bottom: 6px;
    }
    .usage-bar-label {
      font-family: 'Poppins', sans-serif; font-size: 13px;
      font-weight: 500; color: #D9D9D9;
    }
    .usage-bar-value {
      font-family: 'Poppins', sans-serif; font-size: 12px; color: #8C8C8C;
    }
    .usage-bar-track {
      height: 8px; background: rgba(232,138,26,0.15);
      border-radius: 8px; overflow: hidden;
    }
    .usage-bar-fill {
      height: 100%; background: #E88A1A; border-radius: 8px;
    }
    .usage-note {
      font-family: 'Poppins', sans-serif; font-size: 11px;
      color: #8C8C8C; margin-top: 16px; font-style: italic;
    }

    /* Device list */
    .device-item {
      padding: 10px 0;
      border-bottom: 1px solid rgba(232,138,26,0.10);
      font-family: 'Poppins', sans-serif; font-size: 13px; color: #D9D9D9;
    }
    .device-item-label { font-weight: 500; color: #FFFFFF; }
    .device-item-sub { font-size: 11px; color: #8C8C8C; margin-top: 2px; }

    /* Privacy text */
    .privacy-text {
      font-family: 'Poppins', sans-serif; font-size: 13px;
      color: #D9D9D9; line-height: 1.7;
    }
    .privacy-text p { margin-bottom: 14px; }

    /* Delete confirm */
    #delete-confirm-block {
      display: none; margin-top: 12px; padding: 14px;
      background: rgba(207,48,48,0.05);
      border: 1px solid rgba(207,48,48,0.2); border-radius: 8px;
    }
    .delete-confirm-text {
      font-family: 'Poppins', sans-serif; font-size: 13px;
      color: #CF3030; margin-bottom: 12px;
    }
    .delete-confirm-btns { display: flex; gap: 10px; }

    @media (max-width: 767px) {
      /* Avatar popup: taller tap targets, font bump */
      .av-menu-item {
        min-height: 44px;
        font-size: 14px;
        padding: 12px 16px;
      }
      #avatar-menu { width: 220px; }

      /* Mobile-app popup: same width adjustment */
      #mobile-app-popup { width: 220px; }

      /* Settings backdrop: no centering — modal fills viewport */
      #settings-backdrop {
        align-items: flex-start;
        justify-content: flex-start;
      }
      #settings-modal {
        width: 100%; max-width: 100%;
        height: 100dvh; max-height: 100dvh;
        border-radius: 0;
        flex: 1;
      }
      .settings-body { flex-direction: column; }
      .settings-nav {
        width: 100%; flex-direction: row; align-items: center;
        border-right: none; border-bottom: 1px solid rgba(232,138,26,0.15);
        overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        padding: 6px 8px; gap: 4px; flex-shrink: 0;
      }
      .settings-nav::-webkit-scrollbar { display: none; }
      .settings-nav-item {
        /* width: 100% from desktop must be reset — each tab sizes to its text */
        width: auto; flex-shrink: 0;
        white-space: nowrap; padding: 8px 16px;
        font-size: 13px; min-height: 40px;
      }
      .settings-content { padding: 14px 16px 32px; }
      .settings-row {
        flex-direction: column; align-items: stretch; gap: 6px;
      }
      .settings-row-label { min-width: unset; }
      .settings-input, .settings-select {
        width: 100%; flex: none;
      }
      .settings-btn { height: 42px; }
      .settings-btn-danger[id="settings-logout-btn"] { width: 100%; }
      .settings-avatar-row { flex-wrap: wrap; }
      .delete-confirm-btns { flex-direction: column; }
      .usage-bar-wrap { margin-bottom: 24px; }
    }

    /* ── COLONIAL FILES ─────────────────────────── */

    .cf-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: #141414;
      z-index: 800;
      flex-direction: column;
      font-family: 'Poppins', sans-serif;
      padding-top: max(76px, calc(env(safe-area-inset-top) + 56px));
      padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
    .cf-overlay.visible { display: flex; }

    .cf-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 24px 16px;
      flex-shrink: 0;
    }
    .cf-title {
      font-family: 'Poppins', sans-serif;
      font-size: 19px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #FFFFFF;
    }

    .cf-screen { display: none; flex: 1; min-height: 0; flex-direction: column; }
    .cf-screen.cf-screen-active { display: flex; }

    /* Landing screen — segment bands (stacked, tonal orange→black ramp) */
    .cf-segments {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      padding: 40px 24px;
      max-width: 640px;
      margin: 0 auto;
      width: 100%;
      overflow-y: auto;
    }
    .cf-segment-band {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 22px 28px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      text-align: left;
      transition: filter 0.15s ease, transform 0.15s ease;
    }
    .cf-segment-band:hover { transform: translateX(4px); }
    .cf-segment-band svg { width: 26px; height: 26px; flex-shrink: 0; }

    .cf-segment-band-artifacts {
      background: #E88A1A; color: #141414;
      position: relative; z-index: 3;
      margin-bottom: -10px;
    }
    .cf-segment-band-natural-resources {
      background: #A85D1A; color: #141414;
      position: relative; z-index: 2;
      margin-bottom: -10px;
      padding-top: 30px;
    }
    .cf-segment-band-corporate-actors {
      background: #2B1B0E; color: #F0E9DD;
      position: relative; z-index: 1;
      padding-top: 30px;
    }
    .cf-segment-band-artifacts:hover { filter: brightness(1.08); }
    .cf-segment-band-natural-resources:hover { filter: brightness(1.12); }
    .cf-segment-band-corporate-actors:hover { filter: brightness(1.3); }

    /* Artifacts grid screen */
    .cf-breadcrumb {
      display: flex; align-items: center; gap: 10px;
      padding: 0 24px 16px;
      flex-shrink: 0;
    }
    .cf-breadcrumb-text {
      font-family: 'Poppins', sans-serif;
      font-size: 14px; font-weight: 500;
      color: #D9D9D9;
    }

    .cf-grid-wrap {
      flex: 1; min-height: 0; overflow-y: auto; padding: 24px;
      display: flex; align-items: center; justify-content: center;
    }
    .cf-grid {
      display: flex; flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      gap: 16px;
      max-width: 900px;
      margin: 0 auto;
    }
    .cf-box {
      width: 90px; height: 90px;
      background: #1A1A1A;
      border: 1.5px solid #E88A1A;
      border-radius: 8px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px;
      padding: 6px;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease;
    }
    .cf-box:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(232,138,26,0.15); }
    .cf-box img { width: 56px; height: 56px; object-fit: contain; display: block; flex-shrink: 0; }
    .cf-box-label {
      font-family: 'Poppins', sans-serif;
      font-size: 9.5px; font-weight: 500;
      color: #D9D9D9;
      text-align: center;
      line-height: 1.2;
      max-width: 100%;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    /* ── DOSSIER KIT (shared: artifact / corporate actor / natural
       resources detail screens) ── */
    .dossier-card {
      position: relative;
      background: #F0E9DD;
      color: #2B1B0E;
      border-radius: 8px;
      box-shadow: 0 10px 26px rgba(20,20,20,0.35);
      clip-path: polygon(
        0% 3%, 4% 0%, 9% 4%, 14% 0%, 19% 4%, 24% 0%, 29% 4%, 34% 0%,
        39% 4%, 44% 0%, 49% 4%, 54% 0%, 59% 4%, 64% 0%, 69% 4%, 74% 0%,
        79% 4%, 84% 0%, 89% 4%, 94% 0%, 100% 3%,
        100% 97%, 96% 100%, 91% 96%, 86% 100%, 81% 96%, 76% 100%, 71% 96%, 66% 100%,
        61% 96%, 56% 100%, 51% 96%, 46% 100%, 41% 96%, 36% 100%, 31% 96%, 26% 100%,
        21% 96%, 16% 100%, 11% 96%, 6% 100%, 0% 97%
      );
    }
    .dossier-photo {
      position: relative;
      display: inline-block;
      max-width: 100%;
      background: #FFFFFF;
      padding: 10px 10px 26px;
      border-radius: 8px;
      box-shadow: 0 12px 28px rgba(20,20,20,0.45);
      transform: rotate(-2deg);
    }
    .dossier-paperclip {
      position: absolute;
      top: -14px; right: 18px;
      width: 26px; height: 26px;
      color: #2B1B0E;
      transform: rotate(18deg);
      filter: drop-shadow(0 2px 3px rgba(20,20,20,0.4));
    }
    .dossier-paperclip svg { width: 100%; height: 100%; display: block; }

    /* Artifact detail takeover */
    .cf-detail {
      --cf-top-pad: max(76px, calc(env(safe-area-inset-top) + 56px));
      --cf-img-pct: 61; /* % of screen height for the photo; text gets the rest */
      position: fixed;
      inset: 0;
      z-index: 810;
      display: flex;
      flex-direction: column;
      background: #E88A1A;
      opacity: 0;
      transform: scale(0.92);
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .cf-detail.cf-detail-open { opacity: 1; transform: scale(1); pointer-events: auto; }
    @media (min-height: 740px) { .cf-detail { --cf-img-pct: 67; } }

    /* Top 80% — image zone */
    .cf-detail-image-zone {
      position: relative;
      flex: 0 0 calc(var(--cf-img-pct) * 1%);
      height: calc(var(--cf-img-pct) * 1%);
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--cf-top-pad) 24px 24px;
      box-sizing: border-box;
    }
    .cf-detail-icon { width: 100%; }
    /* Cap by height too so the photo never outgrows the zone (width alone made a
       square photo taller than the space left under the back button). */
    .cf-detail-icon img { width: 100%; height: auto; max-height: calc(var(--cf-img-pct) * 1vh - var(--cf-top-pad) - 24px - 36px); object-fit: contain; display: block; }

    /* Bottom 42% — text zone (scrolls internally if content overflows) */
    .cf-detail-text-zone {
      flex: 0 0 calc((100 - var(--cf-img-pct)) * 1%);
      height: calc((100 - var(--cf-img-pct)) * 1%);
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding: 12px 24px 16px;
      border-top: 1px solid rgba(20,20,20,0.15);
    }

    .cf-detail-inner {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      max-width: 600px;
      width: 100%;
      margin: 0 auto;
      text-align: center;
    }
    .cf-detail-namecard {
      padding: 24px 20px 18px;
      margin-bottom: 0;
      transform: rotate(1.5deg);
      position: relative;
    }
    .cf-detail-desccard {
      padding: 26px 20px 20px;
      transform: rotate(-1deg);
      position: relative;
    }

    /* Two papers stacked: one in front, one tucked behind with a strip of
       it showing along the bottom. Tap the paper behind to swap. Each
       .cf-detail-sheet carries the drop-shadow because the torn-edge
       clip-path on the card inside would cut off its own box-shadow. */
    .cf-detail-stack {
      position: relative;
      overflow: hidden;
      padding: 6px 8px 24px;
    }
    .cf-detail-swap {
      position: absolute;
      top: 12px; right: 14px;
      z-index: 3;
      width: 34px; height: 34px;
      border-radius: 50%;
      border: none;
      background: #141414;
      color: #F0E9DD;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(20,20,20,0.45);
    }
    .cf-detail-swap:hover { background: #2B1B0E; }
    .cf-detail-swap svg { width: 18px; height: 18px; }
    .cf-detail-sheet {
      filter: drop-shadow(0 6px 10px rgba(20,20,20,0.5));
    }
    .cf-detail-sheet.is-front {
      position: relative;
      z-index: 2;
      animation: cf-sheet-front 0.28s ease-out;
    }
    .cf-detail-sheet:not(.is-front) {
      position: absolute;
      left: 8px; right: 8px; bottom: 0;
      z-index: 1;
      cursor: pointer;
      filter: brightness(0.86) drop-shadow(0 4px 8px rgba(20,20,20,0.45));
    }
    .cf-detail-sheet:not(.is-front) > .dossier-card { pointer-events: none; }
    @keyframes cf-sheet-front {
      from { transform: translateY(18px) scale(0.96); opacity: 0.7; }
      to   { transform: translateY(0) scale(1); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cf-detail-sheet.is-front { animation: none; }
    }
    .cf-detail-name {
      font-family: 'Poppins', sans-serif;
      font-size: 1.4rem; font-weight: 700;
      color: #2B1B0E;
      margin-bottom: 10px;
    }
    .cf-detail-field {
      font-family: 'Poppins', sans-serif;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #8A5A2B;
      margin-bottom: 6px;
    }
    .cf-detail-field span {
      color: #2B1B0E;
      font-weight: 400;
      text-transform: none;
      letter-spacing: normal;
      margin-left: 6px;
    }
    /* Taken from + Year taken sit side by side to keep the card short */
    .cf-detail-fieldrow {
      display: flex;
      justify-content: center;
      gap: 24px;
    }
    .cf-detail-fieldrow .cf-detail-field { margin-bottom: 6px; }
    .cf-detail-desc {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      line-height: 1.65;
      color: #2B1B0E;
    }

    .cf-detail-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px; height: 40px;
      border-radius: 50%;
      background: rgba(20,20,20,0.55);
      border: none;
      color: #F0E9DD;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
    }
    .cf-detail-arrow:hover { background: rgba(20,20,20,0.75); }
    .cf-detail-arrow svg { width: 18px; height: 18px; }
    .cf-detail-arrow-left { left: 16px; }
    .cf-detail-arrow-right { right: 16px; }

    .cf-dots {
      display: flex; justify-content: center; gap: 8px;
      flex-shrink: 0;
      padding: 8px 0 6px;
    }
    .cf-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: transparent;
      border: 1px solid rgba(20,20,20,0.35);
      flex-shrink: 0;
    }
    .cf-dot.active { background: #2B1B0E; border-color: #2B1B0E; }

    /* Natural Resources — map screen */
    .cf-nr-wrap {
      flex: 1; min-height: 0; overflow-y: auto; padding: 24px;
      display: flex; align-items: center; justify-content: center;
    }
    .cf-nr-map-wrap {
      position: relative;
      width: 100%;
      max-width: 728px;
      aspect-ratio: 1000 / 812;
      margin: 0 auto;
      overflow: hidden;
    }
    /* Wraps the svg + both pin layers so a single transform (scale from
       a dynamic transform-origin) can "zoom the camera" into a clicked
       state (Tier 2) or a clicked resource pin (Tier 3), reusing the
       same technique the old grow-from-dot panel used. */
    .cf-nr-zoom-target {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s ease, transform-origin 0.6s ease;
    }
    /* Only promote to its own layer while the camera moves; left on, the
       map would be scaled as a blurry picture instead of re-drawn sharp. */
    .cf-nr-zooming .cf-nr-zoom-target { will-change: transform; }

    /* Full-screen zoom: once zoomed (and while zooming back out) the map
       box stops clipping, so the scaled map spreads over the whole screen
       and the screen edge is the only edge. Header stays above it. */
    .cf-nr-tier-2 .cf-nr-wrap, .cf-nr-tier-3 .cf-nr-wrap,
    .cf-nr-zooming .cf-nr-wrap,
    .cf-nr-tier-2 .cf-nr-map-wrap, .cf-nr-tier-3 .cf-nr-map-wrap,
    .cf-nr-zooming .cf-nr-map-wrap { overflow: visible; }
    #cf-natural-resources.cf-nr-tier-2::before,
    #cf-natural-resources.cf-nr-tier-3::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 130px;
      background: linear-gradient(to bottom, rgba(20,20,20,0.9) 0%, rgba(20,20,20,0) 100%);
      z-index: 4;
      pointer-events: none;
    }
    .cf-nr-tier-2 #cf-nr-header, .cf-nr-tier-3 #cf-nr-header { z-index: 5; }
    .cf-nr-svg { width: 100%; height: 100%; display: block; }
    /* non-scaling-stroke on every line in this map (state, city, LGA)
       keeps their relative weights — 1.5 / 0.6 / 0.3 — identical at every
       zoom level, instead of the state border ballooning as the map
       scales up under CSS transform while thinner lines stay put. */
    .cf-nr-svg path {
      fill: #1A1A1A;
      stroke: rgba(232,138,26,0.35);
      stroke-width: 1.5;
      vector-effect: non-scaling-stroke;
    }

    /* Real LGA subdivision lines (see nigeria-lga-boundaries.js) — always
       rendered (all 37 states) so zooming in feels like an actual map
       zoom revealing detail that was already faintly there, rather than
       lines snapping into existence.
       Three-tier weight, all relative to the state border (1.5px):
       - plain LGA (background texture, ~750 of them): 0.3px
       - "city" LGA (actually holds a resource pin): 0.6px, dimmer than
         the state border but a clear step up from the background LGAs
       Selectors are scoped as ".cf-nr-svg path.cf-nr-lga-line" (not just
       ".cf-nr-lga-line") because the plain class alone loses the cascade
       to ".cf-nr-svg path" above — same specificity tier (class+element
       vs class), and the more specific rule always wins regardless of
       source order, which was silently forcing every LGA line to the
       state's own width no matter what was set here. */
    .cf-nr-svg path.cf-nr-lga-line {
      fill: none;
      stroke: rgba(232,138,26,0.08);
      stroke-width: 0.3;
      vector-effect: non-scaling-stroke;
    }
    /* While the camera is zooming, skip redrawing the ~900 faint plain LGA
       lines; they come back the moment the zoom lands. */
    .cf-nr-zooming .cf-nr-svg path.cf-nr-lga-line:not(.cf-nr-lga-line-city) {
      visibility: hidden;
    }
    .cf-nr-svg path.cf-nr-lga-line-city {
      stroke-width: 0.6;
      stroke: rgba(232,138,26,0.16);
    }
    .cf-nr-tier-2 .cf-nr-svg path.cf-nr-lga-line, .cf-nr-tier-3 .cf-nr-svg path.cf-nr-lga-line {
      stroke: rgba(232,138,26,0.24);
    }
    .cf-nr-tier-2 .cf-nr-svg path.cf-nr-lga-line-city, .cf-nr-tier-3 .cf-nr-svg path.cf-nr-lga-line-city {
      stroke: rgba(232,138,26,0.55);
    }

    .cf-nr-dots { position: absolute; inset: 0; }

    .cf-nr-dot-btn {
      position: absolute;
      width: 31.2px; height: 31.2px;
      transform: translate(-50%, -50%);
      background: none; border: none; padding: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
      cursor: pointer;
    }
    .cf-nr-dot {
      width: 15.6px; height: 15.6px;
      border-radius: 50%;
      background: #E88A1A;
      box-shadow: 0 0 6px rgba(232,138,26,0.6);
      animation: cf-nr-pulse 1.8s ease-in-out infinite;
    }
    .cf-nr-dot-btn:hover .cf-nr-dot { box-shadow: 0 0 10px rgba(232,138,26,0.9); }
    .cf-nr-state-label {
      font-family: 'Poppins', sans-serif;
      font-size: 8px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      color: #D9D9D9;
      background: rgba(20,20,20,0.72);
      padding: 1px 4px;
      border-radius: 8px;
      white-space: nowrap;
      pointer-events: none;
    }
    @keyframes cf-nr-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.55; transform: scale(1.3); }
    }

    /* Tier 2/3 — city/resource pins, hidden until a state is zoomed into */
    .cf-nr-city-pins { position: absolute; inset: 0; display: none; }
    .cf-nr-tier-2 .cf-nr-city-pins, .cf-nr-tier-3 .cf-nr-city-pins { display: block; }
    .cf-nr-tier-2 .cf-nr-dots, .cf-nr-tier-3 .cf-nr-dots { display: none; }

    .cf-nr-pin-btn {
      position: absolute;
      transform: translate(-50%, -50%);
      background: none; border: none; padding: 0;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      cursor: pointer;
    }
    /* When a city has more than one resource, alternate pins put their
       label above instead of below so two nearby labels stack vertically
       rather than colliding side by side. */
    .cf-nr-pin-btn.cf-nr-pin-label-above { flex-direction: column-reverse; }
    .cf-nr-pin-dot {
      width: 9px; height: 9px;
      border-radius: 50%;
      background: #E88A1A;
      box-shadow: 0 0 6px rgba(232,138,26,0.7);
    }
    .cf-nr-pin-label {
      font-family: 'Poppins', sans-serif;
      font-size: 3.4px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #D9D9D9;
      background: rgba(20,20,20,0.75);
      padding: 1.5px 4px;
      border-radius: 8px;
      white-space: nowrap;
    }
    .cf-nr-tier-3 .cf-nr-pin-label { display: none; }
    .cf-nr-pin-btn:hover .cf-nr-pin-dot { box-shadow: 0 0 9px rgba(232,138,26,0.9); }

    /* LGA name — swaps in for the resource label once zoomed to Tier 3
       (which hides .cf-nr-pin-label above), same slot, no extra layout. */
    .cf-nr-pin-lga-label {
      display: none;
      font-family: 'Poppins', sans-serif;
      font-size: 2.4px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #E88A1A;
      background: rgba(20,20,20,0.75);
      padding: 1.5px 4px;
      border-radius: 8px;
      white-space: nowrap;
    }
    .cf-nr-tier-3 .cf-nr-pin-lga-label { display: block; }

    /* City name — one per city (not per resource pin), sitting above that
       city's own pins as a header. */
    .cf-nr-city-labels { position: absolute; inset: 0; display: none; pointer-events: none; }
    .cf-nr-tier-2 .cf-nr-city-labels, .cf-nr-tier-3 .cf-nr-city-labels { display: block; }
    .cf-nr-tier-3 .cf-nr-city-labels { display: none; }
    .cf-nr-city-label {
      position: absolute;
      transform: translate(-50%, calc(-100% - 8px));
      font-family: 'Poppins', sans-serif;
      font-size: 5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #E88A1A;
      white-space: nowrap;
    }

    /* Dims every state (fill/outline + its own LGA lines) except the one
       currently zoomed into (see updateStateDimming), so attention stays
       on the active state instead of competing with the rest of the
       country still visible in frame. */
    .cf-nr-svg path,
    #cf-nr-lga-lines > g {
      transition: filter 0.4s ease, opacity 0.4s ease;
    }
    /* Opacity only — a blur filter over dozens of detailed shapes was the
       slowest part of the zoom, especially on phones. */
    .cf-nr-state-dimmed {
      opacity: 0.35;
    }

    /* Tier 3 — the zoomed map itself is the background; the write-up
       sits over it in a bottom-anchored card, contained inside its own
       bordered box rather than floating as bare text over a gradient. */
    .cf-nr-tier3-panel {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease-out 0.3s;
    }
    .cf-nr-tier3-panel.visible { opacity: 1; pointer-events: auto; }
    .cf-nr-tier3-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(20,20,20,0.7) 0%, rgba(20,20,20,0) 60%);
    }
    .cf-nr-tier3-content {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 640px;
      padding: 34px 26px 28px;
      transform: rotate(-1deg);
    }
    /* The tab used to hang 16px above the card, which the torn-edge
       clip-path sliced off. It now sits inside the card's padding. */
    .cf-nr-tier3-tab {
      position: relative;
      display: inline-block;
      max-width: 100%;
      margin-bottom: 14px;
      background: #A85D1A;
      border-radius: 8px;
      padding: 6px 16px;
      transform: rotate(-2deg);
    }
    .cf-nr-tier3-title {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1rem, 4vw, 1.3rem); font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #F0E9DD;
      margin-bottom: 0;
    }
    .cf-nr-tier3-blurb {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(12px, 3vw, 14px);
      line-height: 1.7;
      color: #2B1B0E;
    }

    /* Companies That Colonized Nigeria — Wanted Wall */
    .cf-wanted-wrap {
      flex: 1; min-height: 0; overflow-y: auto; padding: 24px;
    }
    .cf-wanted-counter {
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-size: 13px; font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #E88A1A;
      margin-bottom: 24px;
    }
    .cf-wanted-counter span { font-size: 1.3em; }

    /* The company list is a stack of horizontal folders (same arrangement as
       the Colonial Files hero icon): each folder has a tab carrying the
       status, a body carrying name + years, and the next folder overlaps
       the bottom of the one behind it. Later folders sit in front and are
       brighter (--t runs 0 → 1 down the stack). */
    .cf-wanted-grid {
      max-width: 520px;
      margin: 0 auto;
      padding: 0 4px 24px;
    }
    .cf-folder {
      --t: 0;
      display: block;
      position: relative;
      width: calc(100% - 16px);
      margin: 0;
      padding: 24px 0 0;
      border: 0;
      background: none;
      text-align: left;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      filter: drop-shadow(0 -3px 8px rgba(0,0,0,0.55));
      transition: transform 0.15s ease;
      animation: cf-folder-in 0.4s ease-out both;
      animation-delay: calc(var(--i, 0) * 60ms);
    }
    .cf-folder + .cf-folder { margin-top: -26px; }
    .cf-folder:nth-child(4n+1) { margin-left: 2px; }
    .cf-folder:nth-child(4n+2) { margin-left: 14px; }
    .cf-folder:nth-child(4n+3) { margin-left: 0; }
    .cf-folder:nth-child(4n)   { margin-left: 9px; }
    .cf-folder:hover { transform: translateY(-3px); }
    .cf-folder:focus-visible { outline: 2px solid #E88A1A; outline-offset: 2px; }
    .cf-folder-tab {
      position: absolute;
      top: 0; left: 0;
      padding: 4px 14px 0;
      height: 24px;
      box-sizing: border-box;
      border: 1.5px solid rgba(232,138,26, calc(0.35 + var(--t) * 0.65));
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      background: color-mix(in srgb, #E88A1A calc(4% + var(--t) * 12%), #141414);
    }
    .cf-folder-tab .wanted-stamp { margin: 0; font-size: 9px; line-height: 20px; }
    .cf-folder-body {
      display: flex; flex-direction: column; gap: 3px;
      padding: 12px 16px 38px;
      border: 1.5px solid rgba(232,138,26, calc(0.35 + var(--t) * 0.65));
      border-radius: 0 8px 8px 8px;
      background: color-mix(in srgb, #E88A1A calc(4% + var(--t) * 12%), #141414);
    }
    .cf-folder:last-child .cf-folder-body { padding-bottom: 16px; }
    .cf-folder-name {
      font-size: 14px; font-weight: 700; color: #FFFFFF;
      line-height: 1.35; overflow-wrap: anywhere; min-width: 0;
    }
    .cf-folder-years {
      font-size: 11px; color: #D9D9D9; opacity: 0.75; line-height: 1.4;
    }
    @keyframes cf-folder-in {
      from { transform: translateY(18px); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) { .cf-folder { animation: none; } }

    /* Status eyebrow: small letter-spaced label above the company name
       (grid cards and detail page), coloured by status, no badge. */
    .wanted-stamp {
      display: block;
      margin-bottom: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.14em;
      line-height: 1.3;
      text-transform: uppercase;
      pointer-events: none;
    }
    .wanted-stamp-danger { color: #FF6B6B; }
    .wanted-stamp-gold   { color: #E88A1A; }
    .wanted-stamp-muted  { color: #A8A8A8; }

    /* Corporate Actor detail takeover (the "rap sheet") — same blurred
       full-screen takeover mechanics as .cf-detail. */
    .cf-wanted-detail {
      position: fixed;
      inset: 0;
      z-index: 810;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #2B1B0E;
      padding: 70px 24px 40px;
      overflow-y: auto;
      opacity: 0;
      transform: scale(0.92);
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .cf-wanted-detail.cf-wanted-detail-open { opacity: 1; transform: scale(1); pointer-events: auto; }

    .cf-wanted-detail-inner { max-width: 560px; width: 100%; margin: 0 auto; }
    .cf-wanted-detail-namecard {
      position: relative;
      padding: 30px 24px 22px;
      margin-bottom: 0;
      text-align: center;
      transform: rotate(1deg);
      z-index: 3;
    }
    .cf-wanted-detail-aliastag {
      position: relative;
      width: 72%;
      margin: 22px auto;
      padding: 16px 18px 18px;
      transform: rotate(2.5deg) scale(0.94);
      filter: brightness(0.82);
      z-index: 0;
    }
    .cf-wanted-detail-casefile {
      position: relative;
      padding: 30px 24px 24px;
      margin: 0;
      transform: rotate(-1deg);
      z-index: 1;
      text-align: left;
    }
    .cf-wanted-detail-stamp {
      display: block;
      margin-bottom: 10px;
      font-family: 'Poppins', sans-serif;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.14em;
      line-height: 1.3;
      text-transform: uppercase;
    }
    /* darker tones for legibility on the cream paper card */
    .cf-wanted-detail-stamp.wanted-stamp-danger { color: #B02525; }
    .cf-wanted-detail-stamp.wanted-stamp-gold   { color: #A85D1A; }
    .cf-wanted-detail-stamp.wanted-stamp-muted  { color: #6B4A2A; }
    .cf-wanted-detail-name {
      font-family: 'Poppins', sans-serif;
      font-size: 1.4rem; font-weight: 700;
      color: #2B1B0E;
      margin-bottom: 6px;
    }
    .cf-wanted-detail-years {
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      color: #6B4A2A;
      margin-bottom: 0;
    }
    .cf-wanted-detail-fields { text-align: left; }
    .cf-wanted-detail-charge,
    .cf-wanted-detail-current {
      font-family: 'Poppins', sans-serif;
      font-size: 13.5px;
      line-height: 1.65;
      color: #2B1B0E;
      margin: 0 0 22px;
    }
    .cf-wanted-detail-aliases {
      list-style: none;
      padding: 0;
      margin: 0 0 22px;
    }
    .cf-wanted-detail-aliases li {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      line-height: 1.7;
      color: #2B1B0E;
      padding-left: 14px;
      position: relative;
    }
    .cf-wanted-detail-aliases li::before {
      content: '—';
      position: absolute;
      left: 0;
      color: #8A5A2B;
    }

    /* ── PRESIDENCY ────────────────────────────────
       Standalone top-level section, sibling to Colonial Files. Visual
       language deliberately mirrors .cf-overlay / .wanted-card /
       .cf-wanted-detail (dark card, gold border, same type scale) but
       uses its own class names throughout so neither section can ever
       accidentally affect the other's styling. */
    .pres-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: #141414;
      z-index: 800;
      flex-direction: column;
      font-family: 'Poppins', sans-serif;
      padding-top: max(76px, calc(env(safe-area-inset-top) + 56px));
      padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
    .pres-overlay.visible { display: flex; }

    .pres-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 24px 16px;
      flex-shrink: 0;
    }
    .pres-title {
      font-family: 'Poppins', sans-serif;
      font-size: 19px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #FFFFFF;
    }

    .pres-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }
    .pres-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 980px;
      margin: 0 auto;
    }
    .pres-card {
      background: #1A1A1A;
      border: 1.5px solid #E88A1A;
      border-radius: 8px;
      overflow: hidden;
      text-align: left;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease;
    }
    .pres-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(232,138,26,0.15); }
    .pres-card-photo {
      width: 100%; aspect-ratio: 3 / 4;
      background: #141414;
      overflow: hidden;
    }
    .pres-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pres-initials {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Poppins', sans-serif;
      font-size: 28px; font-weight: 700;
      color: #E88A1A;
    }
    .pres-card-body { padding: 12px 14px 14px; }
    .pres-card-name {
      font-family: 'Poppins', sans-serif;
      font-size: 14px; font-weight: 700;
      color: #FFFFFF;
      margin-bottom: 4px;
    }
    .pres-card-title {
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      color: #D9D9D9;
      opacity: 0.75;
      margin-bottom: 2px;
    }
    .pres-card-term {
      font-family: 'Poppins', sans-serif;
      font-size: 10.5px; font-weight: 600;
      color: #E88A1A;
      letter-spacing: 0.02em;
    }
    .pres-note-tag {
      display: inline-block;
      margin-top: 8px;
      padding: 2px 7px;
      border-radius: 8px;
      background: rgba(232,138,26,0.12);
      color: #E88A1A;
      font-family: 'Poppins', sans-serif;
      font-size: 9px; font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Leader detail takeover — same blurred full-screen mechanics as
       .cf-wanted-detail. */
    .pres-detail {
      position: fixed;
      inset: 0;
      z-index: 810;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      background: rgba(20,20,20,0.88);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      padding: 70px 24px 40px;
      overflow-y: auto;
      opacity: 0;
      transform: scale(0.92);
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .pres-detail.pres-detail-open { opacity: 1; transform: scale(1); pointer-events: auto; }

    .pres-detail-inner { max-width: 560px; width: 100%; margin: 0 auto; text-align: center; }
    .pres-detail-photo {
      width: 140px; height: 140px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto 20px;
      border: 2px solid #E88A1A;
    }
    .pres-detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pres-detail-photo .pres-initials { font-size: 40px; }
    .pres-detail-name {
      font-family: 'Poppins', sans-serif;
      font-size: 1.4rem; font-weight: 700;
      color: #FFFFFF;
      margin-bottom: 4px;
    }
    .pres-detail-title {
      font-family: 'Poppins', sans-serif;
      font-size: 13px; font-weight: 500;
      color: #E88A1A;
      margin-bottom: 4px;
    }
    .pres-detail-term {
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      color: #D9D9D9;
      opacity: 0.7;
      margin-bottom: 10px;
    }
    .pres-detail-note {
      display: none;
      margin-bottom: 20px;
      padding: 3px 10px;
      border-radius: 8px;
      background: rgba(232,138,26,0.12);
      color: #E88A1A;
      font-family: 'Poppins', sans-serif;
      font-size: 10px; font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .pres-detail-fields {
      text-align: left;
      border: 1px solid rgba(232,138,26,0.3);
      border-radius: 8px;
      padding: 18px 20px;
      margin-bottom: 20px;
    }
    .pres-detail-field {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      line-height: 1.6;
      color: #D9D9D9;
      margin-bottom: 12px;
    }
    .pres-detail-field:last-child { margin-bottom: 0; }
    .pres-detail-field-label {
      display: block;
      color: #E88A1A;
      font-weight: 600;
      text-transform: uppercase;
      font-size: 10px;
      letter-spacing: 0.05em;
      margin-bottom: 2px;
    }
    .pres-detail-blurb {
      font-family: 'Poppins', sans-serif;
      font-size: 13.5px;
      line-height: 1.65;
      color: #D9D9D9;
      text-align: left;
    }

    .cf-toast {
      position: fixed;
      bottom: 40px; left: 50%;
      transform: translateX(-50%) translateY(10px);
      background: #1A1A1A;
      border: 1px solid #E88A1A;
      color: #D9D9D9;
      padding: 10px 20px;
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      z-index: 900;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      white-space: nowrap;
    }
    .cf-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

    @media (max-width: 767px) {
      .cf-header { padding: 0 16px 14px; }
      .cf-title { font-size: 15px; letter-spacing: 0.10em; }

      .cf-segments { padding: 24px 16px; gap: 2px; max-width: 100%; }
      .cf-segment-band { padding: 18px 20px; font-size: 13px; }

      .cf-breadcrumb { padding: 0 16px 14px; }
      .cf-breadcrumb-text { font-size: 13px; }
      .cf-grid-wrap { padding: 16px; }
      .cf-grid { gap: 12px; justify-content: center; }

      .cf-detail-image-zone { padding: var(--cf-top-pad) 16px 16px; }
      .cf-detail-text-zone { padding: 10px 16px 14px; }
      .cf-detail-name { font-size: 1.15rem; margin-bottom: 8px; }
      .cf-detail-desc { font-size: 12.5px; }
      .cf-detail-arrow { width: 34px; height: 34px; }
      .cf-detail-arrow-left { left: 8px; }
      .cf-detail-arrow-right { right: 8px; }

      .cf-nr-wrap { padding: 16px; }
      .cf-nr-map-wrap { max-width: 95vw; }
      .cf-nr-tier3-content { padding: 28px 18px 20px; }

      /* Torn-paper cards (.dossier-card): the zigzag clip-path eats up to
         ~4% of the card height at top/bottom and the corners, so on
         mobile the padding acts as an invisible safe zone — text stays
         centred and clear of the torn edges. Mobile only. */
      .cf-detail-namecard,
      .cf-detail-desccard,
      .cf-nr-tier3-content,
      .cf-wanted-detail-namecard,
      .cf-wanted-detail-aliastag,
      .cf-wanted-detail-casefile {
        padding: 40px 30px;
        text-align: center;
        box-sizing: border-box;
      }
      .cf-nr-tier3-content { padding-top: 40px; }
      .cf-nr-tier3-title { overflow-wrap: anywhere; }
      /* Company detail: an intentional stack instead of a scattered pile.
         Name card, alias strip and case file share one centred column,
         with small opposing tilts (+0.8° / -0.6° / +0.5°); the alias
         card is set back (smaller, dimmer, gaps above and below). Top-aligned so tall content scrolls instead of being
         pushed off the top of the screen, and nothing may exceed the
         screen's side padding. */
      .cf-wanted-detail {
        align-items: flex-start;
        overflow-x: hidden;
        padding: 76px 20px 40px;
      }
      .cf-wanted-detail-inner {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
      }
      .cf-wanted-detail-namecard,
      .cf-wanted-detail-aliastag,
      .cf-wanted-detail-casefile {
        width: 100%;
        max-width: 100%;
        margin: 0;
      }
      .cf-wanted-detail-namecard { transform: rotate(0.8deg); }
      .cf-wanted-detail-aliastag { width: 86%; margin: 22px 0; transform: rotate(-0.6deg) scale(0.94); }
      .cf-wanted-detail-casefile { margin-top: 0; transform: rotate(0.5deg); }
      .cf-detail-field span { display: block; margin-left: 0; }
      .cf-wanted-detail-fields { text-align: center; }
      .cf-wanted-detail-aliases li { padding-left: 0; }
      .cf-wanted-detail-aliases li::before { content: none; }
      .cf-detail-name,
      .cf-detail-desc,
      .cf-wanted-detail-name,
      .cf-wanted-detail-charge,
      .cf-wanted-detail-current,
      .cf-nr-tier3-blurb {
        overflow-wrap: anywhere;
        text-align: center;
      }
      /* The map itself renders narrower on mobile (95vw vs 728px max on
         desktop), so a fixed label size reads much more crowded relative
         to the map — shrink state labels so the dense southern cluster
         (Imo/Abia/Cross River/Rivers/Akwa Ibom) stays legible instead of
         overlapping. City/LGA pin labels already scale with the ancestor
         zoom transform so they don't need the same adjustment. */
      .cf-nr-state-label { font-size: 6px; padding: 0.5px 3px; }

      .cf-wanted-wrap { padding: 16px; }
      .cf-wanted-detail-name { font-size: 1.15rem; }

      .pres-header { padding: 0 16px 14px; }
      .pres-title { font-size: 15px; letter-spacing: 0.10em; }
      .pres-wrap { padding: 16px; }
      .pres-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
      .pres-detail { padding: 60px 16px 30px; }
      .pres-detail-name { font-size: 1.15rem; }
    }

    /* Matches the 1-column breakpoint used in wantedColumns() (data.js) */
    @media (max-width: 400px) {
      .pres-grid { grid-template-columns: repeat(1, 1fr); }
    }

    /* ═══════════════════════════════════════════════
       SHARED SUB-PAGE CHROME (Chats / Colonial Files /
       Presidency) — mirrors loot-radar.html's pattern.
       ═══════════════════════════════════════════════ */

    #subpage-back-btn {
      display: none;
      position: fixed;
      top: max(20px, env(safe-area-inset-top));
      left: 20px;
      width: 36px; height: 36px;
      border-radius: 8px;
      border: 1px solid rgba(232,138,26,0.3);
      background: rgba(232,138,26,0.08);
      color: #E88A1A;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 900;
    }
    #subpage-back-btn.visible { display: flex; }
    #subpage-back-btn:hover { background: rgba(232,138,26,0.16); }
    #subpage-back-btn svg { width: 18px; height: 18px; }
    /* Artifact detail has an orange background, so the default gold-on-
       orange back button vanishes — flip it to a dark button there. */
    body:has(#cf-detail.cf-detail-open) #subpage-back-btn {
      background: #141414;
      border-color: #141414;
      color: #F0E9DD;
      box-shadow: 0 2px 8px rgba(20,20,20,0.4);
    }
    body:has(#cf-detail.cf-detail-open) #subpage-back-btn:hover { background: #2B1B0E; }

    .subpage-glow-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: radial-gradient(ellipse 420px 420px at 50% 34%, rgba(232,138,26,0.30) 0%, rgba(232,138,26,0.10) 45%, transparent 72%);
      filter: blur(4px);
    }

    .subpage-header {
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background 0.25s ease, border-color 0.25s ease;
      position: relative;
      z-index: 1;
    }
    .subpage-header.scrolled {
      background: rgba(20,20,20,0.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom-color: rgba(232,138,26,0.18);
    }


    /* ── ELECTION ───────────────────────────────── */
    .el-soon {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center; text-align: center;
      padding: 24px;
    }
    .el-soon-title { font-size: 20px; font-weight: 600; color: #FFFFFF; margin: 0 0 6px; }
    .el-soon-sub { font-size: 13px; color: #9A9A9A; margin: 0; }


    /* ═══════════════════════════════════════════════
       LANDING SCREENS (Loot Radar look) — title block, round hero
       picture, tall cards. Used by Election, Colonial Files; Loot Radar
       has its own copy of the same rules in loot-radar.html.
       ═══════════════════════════════════════════════ */
    .lp-header { display: block; text-align: center; padding: 0 20px; margin-bottom: clamp(8px, 2vh, 24px); }
    .lp-title { text-align: center; }
    .lp-eyebrow {
      font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
      color: rgba(232,138,26,0.5); font-family: monospace; margin: 0 0 4px;
    }
    .lp-title h1 {
      font-size: 1.6rem; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: #E88A1A; margin: 0;
    }
    .lp-sub {
      font-size: 11px; letter-spacing: 2px; color: #E88A1A; margin: 6px 0 0;
      text-transform: uppercase; font-family: monospace;
    }
    .lp-body {
      flex: 1; min-height: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: clamp(12px, 3vh, 30px);
      padding: 0 20px;
      overflow-y: auto;
      /* hero shrinks so title + hero + cards fit one screen */
      --cards-w: min(420px, calc(100vw - 40px));
      --hero: min(78vw, 320px, max(96px, calc(100dvh - 300px - var(--cards-h))));
    }
    .lp-body-3 { --cards-h: calc((var(--cards-w) - 24px) * 0.4444); }
    .lp-body-2 { --cards-h: calc((var(--cards-w) - 12px) * 1.1667 + 12px); }

    .lp-hero { position: relative; width: var(--hero); height: var(--hero); flex-shrink: 0; }
    .lp-ring {
      position: absolute; top: 50%; left: 50%; border-radius: 50%;
      border: 1px solid rgba(232,138,26,0.25); transform: translate(-50%, -50%);
    }
    .lp-ring.r1 { width: 100%; height: 100%; border-color: rgba(232,138,26,0.10); }
    .lp-ring.r2 { width: 75%;  height: 75%;  border-color: rgba(232,138,26,0.17); }
    .lp-ring.r3 { width: 50%;  height: 50%;  border-color: rgba(232,138,26,0.28); }
    .lp-ring.r4 { width: 25%;  height: 25%;  border-color: rgba(232,138,26,0.45); }
    .lp-cross { position: absolute; background: rgba(232,138,26,0.2); }
    .lp-cross.h { width: 100%; height: 1px; top: 50%; left: 0; }
    .lp-cross.v { height: 100%; width: 1px; left: 50%; top: 0; }
    .lp-art { position: absolute; top: 50%; left: 50%; width: 62%; height: 62%; transform: translate(-50%, -50%); overflow: visible; }

    /* Election + Colonial Files: the icon is the whole hero (no rings) */
    #el-hero .lp-art, #cf-hero .lp-art { width: 100%; height: 100%; }

    /* Ballot box: a vote slip drops into the slot (class added every 5s) */
    .lp-slip { transform: translateY(-46px); opacity: 0; }
    .lp-hero.casting .lp-slip { animation: lp-slip-drop 1.1s ease-in forwards; }
    @keyframes lp-slip-drop {
      0%   { transform: translateY(-46px); opacity: 0; }
      15%  { transform: translateY(-34px); opacity: 1; }
      55%  { transform: translateY(0);     opacity: 1; }
      100% { transform: translateY(34px);  opacity: 1; }
    }
    .lp-hero.casting .lp-box { animation: lp-box-pulse 1.1s ease-out; }
    @keyframes lp-box-pulse {
      0%, 55% { filter: drop-shadow(0 0 0 rgba(232,138,26,0)); }
      75%     { filter: drop-shadow(0 0 10px rgba(232,138,26,0.8)); }
      100%    { filter: drop-shadow(0 0 0 rgba(232,138,26,0)); }
    }
    @media (prefers-reduced-motion: reduce) {
      .lp-hero.casting .lp-slip, .lp-hero.casting .lp-box { animation: none; }
    }

    .lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 420px; }
    .lp-cards-2 { grid-template-columns: repeat(2, 1fr); }
    .lp-card {
      min-width: 0;
      aspect-ratio: 3 / 4;
      border-radius: 8px;
      background: rgba(232,138,26,0.08);
      border: 1px solid rgba(232,138,26,0.28);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 10px; padding: 8px;
      cursor: pointer;
      color: #D9D9D9;
      font-family: 'Poppins', sans-serif;
      transition: background 0.15s, border-color 0.15s, transform 0.15s;
    }
    .lp-cards-2 .lp-card { aspect-ratio: 6 / 7; }
    .lp-card:hover { background: rgba(232,138,26,0.14); border-color: #E88A1A; transform: translateY(-2px); }
    .lp-card svg { width: 26px; height: 26px; color: #E88A1A; flex-shrink: 0; }
    .lp-cards-2 .lp-card svg { width: 30px; height: 30px; }
    .lp-card span {
      font-size: 10px; font-weight: 600; letter-spacing: 0.1px; text-transform: uppercase;
      text-align: center; line-height: 1.3; padding: 0 4px; overflow-wrap: break-word; hyphens: auto;
    }
    @media (min-width: 400px) { .lp-card span { font-size: 11px; } }

    /* ── HOME: tall rectangle tiles (same look as the Loot Radar cards) ──
       Row 1: two wider tall tiles; row 2: three narrower tall tiles. */
    .icon-grid { max-width: 420px; margin-left: auto; margin-right: auto; }
    body.home-active .icon-grid { max-height: 560px; }
    .icon-tile {
      justify-content: center;
      aspect-ratio: 3 / 4;
      min-width: 0;
      padding: 8px;
      gap: 10px;
      border-radius: 8px;
      background: rgba(232,138,26,0.08);
      border: 1px solid rgba(232,138,26,0.28);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: background 0.15s, border-color 0.15s, transform 0.15s;
    }
    .icon-tile-lg { aspect-ratio: 6 / 7; padding: 8px; gap: 10px; }
    .icon-tile:hover {
      background: rgba(232,138,26,0.14);
      border-color: #E88A1A;
      box-shadow: none;
      transform: translateY(-2px);
    }
    .icon-tile-glyph { width: 32px; height: 32px; }
    .icon-tile-glyph svg { width: 26px; height: 26px; }
    .icon-tile-lg .icon-tile-glyph { width: 40px; height: 40px; }
    .icon-tile-lg .icon-tile-glyph svg { width: 30px; height: 30px; }
    .icon-tile-label {
      font-size: 10px; font-weight: 600; text-transform: uppercase;
      line-height: 1.3; padding: 0 4px; overflow-wrap: break-word; hyphens: auto;
    }
    .icon-tile-lg .icon-tile-label { font-size: 11px; font-weight: 600; }

    .auth-error.ok { color: #16A34A; }

    /* iPhone zooms the whole page when a text box under 16px is tapped, and
       doesn't zoom back. Keep every text box at 16px on phones. */
    @media (max-width: 767px) {
      input, textarea, select,
      .search-input, .mob-textarea, .auth-input, .settings-input, .settings-select {
        font-size: 16px !important;
      }
    }

/* ── Home: top row is three tiles, the Quiz first ── */
#home-tile-quiz, #home-tile-election, #home-tile-report-corruption { grid-column: span 2; }