/* ────────────────────────────────────────────────
   CARDY — two design directions, both pill+mono
   A · TERMINAL    (dark, acid lime, raw)
   B · CREAM       (warm, coral, soft)
   ──────────────────────────────────────────────── */

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
button { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; padding: 0; }

/* Phone shells */
.phone {
  width: 390px; height: 844px;
  border-radius: 56px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* Status bar */
.statusbar {
  height: 54px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.statusbar .right { display: flex; gap: 6px; align-items: center; }

/* Home indicator */
.home-ind { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 999px; }

/* ════════════════════════════════════════════════
   A · TERMINAL — dark + acid lime + raw mono
   ════════════════════════════════════════════════ */
.dir-a {
  --bg-0: #0B0B0D;
  --bg-1: #15161A;
  --bg-2: #1E2026;
  --bg-3: #2A2D35;
  --line: rgba(239,237,230,0.08);
  --line-2: rgba(239,237,230,0.16);
  --t-1: #EFEDE6;
  --t-2: #B8B5AB;
  --t-3: #6E6B62;
  --acid: #5CFF73;
  --acid-deep: #2EB845;
  --signal: #F26B4C;
  --plum: #A78BFA;
  --font-mono: "Montserrat", system-ui, sans-serif;

  background: var(--bg-0);
  color: var(--t-1);
  font-family: var(--font-mono);
}
.dir-a .statusbar { color: var(--t-1); }

/* type — A */
.dir-a .eyebrow {
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--t-3); font-weight: 700;
}
.dir-a .display {
  font-family: var(--font-mono);
  font-size: 24px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 800;
}
.dir-a .display-xl {
  font-family: var(--font-mono);
  font-size: 38px; line-height: 1.0; letter-spacing: -0.035em; font-weight: 800;
}
.dir-a .num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* pills — A */
.dir-a .pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--bg-2);
  color: var(--t-2);
  white-space: nowrap;
}
.dir-a .pill.acid { background: var(--acid); color: #0B0B0D; }
.dir-a .pill.outline { background: transparent; border: 1px solid var(--line-2); }
.dir-a .pill.signal { background: rgba(242,107,76,0.15); color: var(--signal); }
.dir-a .pill.plum { background: rgba(167,139,250,0.15); color: var(--plum); }

.dir-a .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 0 24px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em;
  background: var(--bg-2); color: var(--t-1);
  border: 1px solid var(--line);
  transition: transform .06s;
}
.dir-a .btn:active { transform: scale(0.98); }
.dir-a .btn.primary { background: var(--acid); color: #0B0B0D; border-color: var(--acid); }
.dir-a .btn.full { width: 100%; }
.dir-a .btn.s { height: 36px; padding: 0 14px; font-size: 11px; }

/* card — A */
.dir-a .card {
  background: var(--bg-1);
  border-radius: 28px;
  border: 1px solid var(--line);
}

/* tab bar — A */
.dir-a .tabbar {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  height: 64px; border-radius: 999px;
  background: rgba(11,11,13,0.85);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  z-index: 5;
}
.dir-a .tabbar .tab {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px; border-radius: 999px;
  color: var(--t-3); font-size: 12px; font-weight: 700;
  letter-spacing: -0.005em;
  flex: 0 0 auto;
}
.dir-a .tabbar .tab.active { background: var(--acid); color: #0B0B0D; }

/* prominent QR FAB — pushes a new page, not a tab */
.dir-a .tabbar .tab-fab,
.dir-b .tabbar .tab-fab {
  position: relative;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.dir-a .tabbar .tab-fab-core,
.dir-b .tabbar .tab-fab-core {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 64px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 6px rgba(11,11,13,0.85);
}
.dir-a .tabbar .tab-fab-ring {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  width: 76px; height: 76px; border-radius: 999px;
  border: 1px dashed var(--acid); opacity: 0.4;
}
.dir-b .tabbar .tab-fab-ring {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  width: 76px; height: 76px; border-radius: 999px;
  border: 1px dashed var(--coral); opacity: 0.4;
}
.dir-a .tabbar .tab-fab-cap,
.dir-b .tabbar .tab-fab-cap {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
}

/* Gender access tokens */
:root {
  --gender-male: #5CFF73;
  --gender-female: #FF6BA3;
  --gender-mixed: #EFEDE6;
}

/* ASCII divider */
.dir-a .divider-ascii {
  font-family: var(--font-mono); font-size: 11px; color: var(--t-3);
  letter-spacing: 0.5em;
  white-space: nowrap; overflow: hidden;
}

/* image placeholder — A */
.dir-a .imgph {
  background: linear-gradient(135deg, #2A2D35 25%, #1E2026 25% 50%, #2A2D35 50% 75%, #1E2026 75%);
  background-size: 12px 12px;
}

/* ════════════════════════════════════════════════
   B · CREAM — warm cream + coral + soft mono
   ════════════════════════════════════════════════ */
.dir-b {
  --bg-0: #F1ECE0;
  --bg-1: #FBF7EE;
  --bg-2: #E8E0CD;
  --bg-3: #DBD1B7;
  --ink: #1A1410;
  --t-2: #534940;
  --t-3: #8C7F71;
  --line: rgba(26,20,16,0.1);
  --line-2: rgba(26,20,16,0.18);
  --coral: #FF4F2C;
  --blue: #2E48E0;
  --moss: #1F5C3F;
  --butter: #FFD036;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-mono);
}
.dir-b .statusbar { color: var(--ink); }

.dir-b .eyebrow {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t-3); font-weight: 600;
}
.dir-b .display {
  font-family: var(--font-mono);
  font-size: 36px; line-height: 0.96; letter-spacing: -0.05em; font-weight: 700;
}
.dir-b .display-xl {
  font-family: var(--font-mono);
  font-size: 60px; line-height: 0.92; letter-spacing: -0.06em; font-weight: 700;
}
.dir-b .num { font-feature-settings: "tnum" 1; letter-spacing: -0.04em; }

.dir-b .pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 14px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bg-2);
  color: var(--ink);
  white-space: nowrap;
}
.dir-b .pill.coral { background: var(--coral); color: #FFF6EC; }
.dir-b .pill.ink { background: var(--ink); color: var(--bg-0); }
.dir-b .pill.moss { background: var(--moss); color: var(--bg-0); }
.dir-b .pill.outline { background: transparent; border: 1.5px solid var(--ink); }
.dir-b .pill.butter { background: var(--butter); color: var(--ink); }

.dir-b .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 60px; padding: 0 28px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ink); color: var(--bg-0);
  transition: transform .06s;
}
.dir-b .btn:active { transform: scale(0.98); }
.dir-b .btn.primary { background: var(--coral); color: #FFF6EC; }
.dir-b .btn.outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.dir-b .btn.full { width: 100%; }
.dir-b .btn.s { height: 38px; padding: 0 16px; font-size: 11px; }

.dir-b .card {
  background: var(--bg-1);
  border-radius: 32px;
  border: 1px solid var(--line);
}

.dir-b .tabbar {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  height: 68px; border-radius: 999px;
  background: var(--ink);
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 10px;
  z-index: 5;
}
.dir-b .tabbar .tab {
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 18px; border-radius: 999px;
  color: rgba(241,236,224,0.5); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.dir-b .tabbar .tab.active { background: var(--coral); color: var(--bg-0); }
.dir-b .tabbar .tab.active span { display: inline; }
.dir-b .tabbar .tab span { display: none; }

.dir-b .imgph {
  background: linear-gradient(135deg, #DBD1B7 25%, #C9BFA6 25% 50%, #DBD1B7 50% 75%, #C9BFA6 75%);
  background-size: 12px 12px;
}

/* ── shared ── */
.scroll-y::-webkit-scrollbar { display: none; }
.scroll-y { scrollbar-width: none; }

/* sticker — rotated badge */
.sticker {
  display: inline-block;
  transform: rotate(-4deg);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Map placeholder mesh */
.map-mesh {
  background:
    linear-gradient(135deg, transparent 49.5%, currentColor 49.5%, currentColor 50.5%, transparent 50.5%) 0 0 / 60px 60px,
    linear-gradient(45deg, transparent 49.5%, currentColor 49.5%, currentColor 50.5%, transparent 50.5%) 0 0 / 60px 60px;
  opacity: 0.4;
}