/* ============================================================
   ████  BoB REDESIGN (2026-06)  ████
   Override layer matching the new_ui/ mockups. Organized as:
   tokens → bottom nav → splash → onboarding → home → mood →
   memory → profile/settings → chat → desktop phone-canvas.
   Appended last so these rules win the cascade.
   ============================================================ */

/* ---------- Tokens (extend, warm the ink) ---------- */
:root{
  --surface-warm:#efe8d7;   /* warm-cream raised cards (vs pure-white --card) */
  --card-edge:#f7f1e3;      /* inset top highlight on warm cards */
  --taupe-screen:#a99c88;   /* darker mushroom screen — Home + chat scrim */
  --taupe-panel:#8e8070;    /* translucent taupe panels — whisper / plan card */
  --group-card:#ddd3bd;     /* settings grouped-list container */
  --mocha-deep:#6b5e4f;     /* workhorse: FAB, selected, icon badges */
  --espresso:#2b2520;       /* headline + primary ink (warm neutral) */
  --cta-1:#a88f6f;          /* primary button gradient top */
  --cta-2:#7e6a50;          /* primary button gradient bottom */
  --cta-grad:linear-gradient(180deg,var(--cta-1),var(--cta-2));
  --danger:#9d5b5b;         /* muted destructive (SOS / delete badges) */
  --online:#58af6e;         /* chat "online" presence dot */
  --toggle-off:#cdc4b1;     /* toggle OFF track */
  --accent-on-dark:#bb9c7e; /* italic accent + wordmark over dark photos */
  --glass-bubble:rgba(224,215,200,.55);      /* AI chat bubble glass */
  --glass-bubble-user:rgba(243,237,224,.82); /* user chat bubble glass */

  /* Warm the ink off its olive cast (was greenish #252b1b) */
  --ink:#2b2520;
  --ink-soft:#5c5448;
  --ink-mute:#8d8473;
}

/* ---------- Bottom tab bar (5 + center FAB) ---------- */
.tabbar{
  background:#ece4d0;   /* warm cream footer — matches the "5. Chat" reference */
  border-top:1px solid rgba(206,194,170,.65);
  backdrop-filter:blur(14px);
}
.tabbar .tab{color:#9a8d79;letter-spacing:.12em;font-weight:600}
.tabbar .tab span{font-size:9px;letter-spacing:.05em;white-space:nowrap}
.tabbar .tab.active{color:var(--espresso)}
.tabbar .tab svg{width:24px;height:24px;stroke-width:1.7}
.tabbar .tab.active svg{stroke-width:2}
.tabbar .tab.fab{
  /* Sits DOWN inside the footer band (was raised -22px), glass dark-taupe — ref "5. Chat". */
  background:rgba(72,62,50,.62) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:#fff !important;
  width:56px;height:56px;margin-top:-6px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 20px rgba(38,28,20,.30), inset 0 1px 0 rgba(255,255,255,.12);
}
.tabbar .tab.fab svg{width:26px;height:26px;stroke-width:1.7}
.tabbar .tab.fab.active{color:#fff}

/* ---------- Global components (muted-copper CTAs, mocha chips) ---------- */
.btn.primary{
  background:var(--cta-grad);
  box-shadow:0 12px 26px rgba(120,100,72,.30), inset 0 1px 0 rgba(255,255,255,.30);
}
.btn.primary:hover{filter:brightness(1.04);box-shadow:0 16px 30px rgba(120,100,72,.38), inset 0 1px 0 rgba(255,255,255,.4)}
.chip.active,.chip.on{background:var(--mocha-deep);border-color:var(--mocha-deep);color:#fff}

/* ---------- Splash (mockup 1) ---------- */
#view-splash.view{background:#14161a}
.v3-splash-bg::after{
  /* cool slate scrim (was warm-brown) to match the muted cool grade */
  background:linear-gradient(180deg,
    rgba(20,22,26,0) 0%, rgba(20,22,26,0) 38%,
    rgba(20,22,26,.52) 62%, rgba(20,22,26,.9) 100%) !important;
}
.v3-splash{justify-content:flex-end}
/* "my better half ai" stacked wordmark, white over the dark photo */
.v3-splash-brand{display:flex;flex-direction:column;gap:0;line-height:1;color:#fff}
.v3-splash-brand .bm-my{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:16px;letter-spacing:.005em;color:#fff;margin-bottom:2px;margin-left:5px;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.v3-splash-brand .bm-line{font-family:'Cal Sans',sans-serif;font-weight:400;font-size:31px;line-height:.95;letter-spacing:-.025em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55)}
/* "ai" = thin Inter Light, matching the login lockup. */
.v3-splash-brand .bm-ai{font-family:'Inter',sans-serif;font-weight:300;font-size:.62em;letter-spacing:.02em;color:rgba(255,255,255,.92)}
.v3-splash-hero{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;padding:0 24px max(26px,env(safe-area-inset-bottom)) !important;position:relative;z-index:3}
.v3-splash-headline{
  font-family:'Cal Sans',sans-serif !important;font-weight:400 !important;
  font-size:clamp(30px,8.1vw,40px) !important;line-height:1.08 !important;
  letter-spacing:-.03em !important;color:#fff !important;text-align:left !important;
  text-transform:none !important;text-shadow:0 2px 18px rgba(0,0,0,.45);margin:0
}
.v3-splash-headline i{
  font-family:'Playfair Display',serif !important;font-style:italic !important;font-weight:500 !important;
  color:var(--accent-on-dark) !important;-webkit-text-fill-color:initial !important;background:none !important
}
.v3-splash-sub{color:rgba(255,255,255,.86) !important;font-family:'Inter',sans-serif !important;font-weight:400 !important;font-size:15.5px !important;margin-top:12px !important;text-shadow:0 1px 10px rgba(0,0,0,.45);text-align:left}
.v3-splash-cta{
  width:100%;height:60px;border-radius:999px;
  /* muted greige-taupe pill to match target #5 (was warmer var(--cta-grad)) */
  background:linear-gradient(180deg,#877b6c 0%,#675e51 100%) !important;color:#fff !important;
  font:700 14px/1 'Inter',sans-serif !important;letter-spacing:.10em;text-transform:uppercase;
  margin-top:24px;border:0;display:flex;align-items:center;justify-content:center;gap:0;
  box-shadow:0 16px 30px rgba(24,24,26,.4), inset 0 1px 0 rgba(255,255,255,.26)
}
.v3-splash-trial{color:rgba(255,255,255,.8) !important;font-size:12.5px !important;text-align:center;margin-top:15px !important;letter-spacing:.02em}
.v3-splash-signin{display:flex;align-items:center;justify-content:center;gap:11px;color:rgba(255,255,255,.82) !important;font-size:13.5px !important;margin-top:16px !important}
/* Clean OUTLINE pill (ref #9): transparent interior — override the white fill
   from 50-v3-views.css:815. Pressed/hover use a matching translucent-white fill
   (not the old brown), and the iOS default gray tap box is removed. */
.v3-splash-signin a{color:#fff !important;font-weight:600;text-decoration:none !important;background:transparent !important;border:1.5px solid rgba(255,255,255,.55) !important;border-radius:999px;padding:8px 18px;line-height:1;-webkit-tap-highlight-color:transparent;transition:background .18s,border-color .18s,transform .12s}
.v3-splash-signin a:hover{background:rgba(255,255,255,.16) !important;border-color:#fff !important;color:#fff !important}
.v3-splash-signin a:active{background:rgba(255,255,255,.30) !important;border-color:#fff !important;color:#fff !important;transform:scale(.97)}

/* ---------- Home (mockup 5) — darker taupe screen ---------- */
#view-home.view{background:linear-gradient(180deg,#ab9e8a 0%,#9c8e79 60%,#cdc1a6 100%)}
#view-home .home-inner{padding:18px 18px 28px}
#view-home .greeting .hi{color:#f4efe2;font-family:'Cal Sans',sans-serif;font-weight:400;font-size:26px;line-height:1.12;letter-spacing:-.01em;text-shadow:0 1px 10px rgba(40,30,20,.25)}
#view-home .greeting .hi i{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:#fff}
#view-home .greeting .sub{color:rgba(244,239,226,.82);font-size:13.5px;margin-top:4px}
#view-home .greeting .icon-btn{background:var(--espresso);color:#fff;border:0;border-radius:14px;width:42px;height:42px}
#view-home .greeting .icon-btn svg{color:#fff}
#view-home .home-hero{border-radius:22px;overflow:hidden;box-shadow:0 16px 36px rgba(50,38,24,.28);min-height:330px}
#view-home .home-hero .ov{background:linear-gradient(180deg,rgba(30,24,18,0) 30%,rgba(40,32,22,.55) 70%,rgba(40,32,22,.82) 100%)}
#view-home .home-hero .txt .k{color:rgba(255,255,255,.78);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
#view-home .home-hero .txt h2{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;color:#f4eede;font-size:21px;line-height:1.34;margin-top:6px}
#view-home .home-hero .txt p{color:rgba(255,255,255,.72);font-size:13px;margin-top:8px;font-style:normal}
#view-home .home-grid{display:flex;flex-direction:column;gap:18px;margin-top:16px}
#view-home .home-section:has(.quick-grid){order:-1}
#view-home .row-hdr h3{color:#f1ece0;font-size:15px}
#view-home .row-hdr a{color:rgba(244,239,226,.8)}
#view-home .quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#view-home .quick{border-radius:18px;padding:16px;background:rgba(247,241,227,.5);border:1px solid rgba(255,255,255,.25);box-shadow:0 6px 18px rgba(50,38,24,.18);backdrop-filter:blur(6px)}
#view-home .quick.b1{background:var(--surface-warm);box-shadow:0 8px 20px rgba(50,38,24,.22), inset 0 1px 0 var(--card-edge)}
#view-home .quick .ico{width:38px;height:38px;border-radius:11px;background:transparent;color:var(--mocha-deep);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
#view-home .quick.b1 .ico svg,#view-home .quick .ico svg{color:var(--mocha-deep)}
#view-home .quick h4{color:var(--espresso);font-size:15px;font-weight:700}
#view-home .quick p{color:var(--ink-soft);font-size:12.5px;margin-top:3px}
#view-home .mood-card{background:rgba(247,241,227,.5);border:1px solid rgba(255,255,255,.25);border-radius:18px;backdrop-filter:blur(6px)}
#view-home .mood-card .mh span{color:var(--ink-soft)}
#view-home .mood-card .mh b{color:var(--espresso)}

/* ---------- Mood check-in (mockup 6) — light cream, segmented emojis ---------- */
#view-mood .page{padding:0;display:block}
#view-mood .card{background:transparent;border:0;box-shadow:none;max-width:none;width:100%;border-radius:0;padding:24px 22px 40px;min-height:100%}
#view-mood .topbar .title{font-weight:600;color:var(--espresso)}
#view-mood .mood-hero{text-align:left}
#view-mood .mood-hero .k{color:var(--ink-mute);letter-spacing:.24em;text-transform:uppercase;font-size:11px}
#view-mood .mood-hero h2{font-family:'Cal Sans',sans-serif;font-weight:400;font-size:30px;line-height:1.08;color:var(--espresso);margin-top:6px}
#view-mood .mood-hero h2 i{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:#efe5d3}
#view-mood .mood-emojis{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:22px 0}
#view-mood .mood-emoji{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:66px;border-radius:18px;background:var(--surface-warm);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--card-edge);cursor:pointer;transition:all .15s ease}
#view-mood .mood-emoji span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
#view-mood .mood-emoji .face{width:26px;height:26px;color:var(--ink-soft)}
#view-mood .mood-emoji.active{background:var(--mocha-deep);border-color:var(--mocha-deep);box-shadow:0 8px 18px rgba(60,50,38,.26)}
#view-mood .mood-emoji.active span,#view-mood .mood-emoji.active .face{color:#fff}
#view-mood .field label{color:var(--ink-soft);font-weight:600}
#view-mood .slider{-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:var(--bg-deep);outline:none}
#view-mood .slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#33281f;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:pointer}
#view-mood .slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#33281f;border:3px solid #fff;cursor:pointer}
#view-mood .slider-value{font-family:'Cal Sans',serif;font-size:19px;color:var(--espresso)}
#view-mood .textarea{background:var(--surface-warm);border:1px solid var(--line);border-radius:16px}

/* ---------- Memory (mockup 7) — taupe cards on cream ---------- */
#view-memory .page{padding:0;display:block}
#view-memory .card{background:transparent;border:0;box-shadow:none;max-width:none;width:100%;border-radius:0;padding:24px 22px 40px;min-height:100%}
#view-memory .topbar .title{font-weight:600;color:var(--espresso)}
#view-memory .q-kicker{color:var(--ink-mute);letter-spacing:.22em;text-transform:uppercase;font-size:11px}
#view-memory .q-title{font-family:'Cal Sans',sans-serif;font-weight:400;font-size:30px;color:var(--espresso)}
#view-memory .q-title i{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:#efe5d3}
#view-memory .memory-list{display:flex;flex-direction:column;gap:12px}
#view-memory .memory-card{background:var(--taupe-panel);border:0;border-radius:18px;box-shadow:0 6px 16px rgba(60,50,38,.18);padding:15px 16px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
#view-memory .memory-card .ic{width:52px;height:52px;border-radius:50%;background:var(--mocha-deep);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#view-memory .memory-card .ic svg{color:#fff;width:22px;height:22px}
#view-memory .memory-card .c{flex:1;min-width:0}
#view-memory .memory-card .c .k{color:rgba(255,255,255,.78);font-size:12.5px}
#view-memory .memory-card .c .v{font-family:'Cal Sans',serif;color:#fff;font-size:19px;line-height:1.22}
#view-memory .memory-card .c .d{color:rgba(255,255,255,.62);font-size:11.5px;margin-top:3px}
#view-memory .memory-card .x{color:rgba(255,255,255,.72);background:transparent;border:0}
#view-memory .memory-watermark{display:none}
#view-memory .btn.light{background:transparent;border:1.5px solid var(--line);color:var(--espresso)}
#view-memory .btn.danger{background:transparent;border:1.5px solid rgba(157,91,91,.45);color:var(--danger)}

/* ---------- Profile + Settings (mockups 8 + 9) ---------- */
#view-profile .page{padding:0;display:block}
#view-profile .card{background:transparent;border:0;box-shadow:none;max-width:none;width:100%;border-radius:0;padding:22px 22px 40px;min-height:100%}
#view-profile .topbar .title{font-weight:600;color:var(--espresso)}
#view-profile .profile-head{text-align:center}
#view-profile .profile-hero .pic-user{width:120px;height:120px;border-radius:50%;background:var(--taupe-screen);box-shadow:0 8px 22px rgba(60,50,38,.2)}
#view-profile .profile-hero .pic-user .initial{font-family:'Cal Sans',serif;color:var(--mocha-deep);font-size:54px;background:transparent}
#view-profile .profile-hero .hero-cam{background:var(--mocha-deep);color:#fff;border:2px solid var(--bg)}
#view-profile .profile-hero .hero-cam svg{color:#fff}
#view-profile .profile-head h2{font-family:'Cal Sans',serif;font-style:normal;font-weight:600;color:var(--espresso);font-size:28px}
#view-profile .profile-head h2 i{font-style:normal}
#view-profile .profile-head #profileSub{color:var(--ink-soft);font-size:14px}
#view-profile .edit-info-btn{border:1.5px solid var(--line);background:transparent;color:var(--espresso);border-radius:999px;height:48px;padding:0 26px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
#view-profile .edit-info-btn svg{color:var(--espresso)}
#view-profile .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
#view-profile .stat{background:var(--surface-warm);border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 18px rgba(60,52,40,.10), inset 0 1px 0 var(--card-edge);padding:16px 4px;display:flex;flex-direction:column;align-items:center;gap:2px}
#view-profile .stat b{font-family:'Cal Sans',serif;font-weight:500;font-size:38px;color:var(--espresso)}
#view-profile .stat span{font-size:13px;color:var(--ink-soft)}
#view-profile .tier-banner{background:var(--taupe-panel);border:0;border-radius:20px;box-shadow:0 8px 20px rgba(60,50,38,.2);padding:18px 20px}
#view-profile .tier-banner-kicker{color:rgba(255,255,255,.78)}
#view-profile .tier-banner-name{font-family:'Cal Sans',serif;color:#fff;font-size:26px;font-weight:500}
#view-profile .tier-banner-renew{color:rgba(255,255,255,.78)}
#view-profile .tier-banner-cta{background:var(--mocha-deep);color:#fff;border:0;border-radius:999px;padding:0 18px;height:40px;font-weight:600}
#view-profile .section-kicker{display:block;margin-top:22px;margin-bottom:8px;font-size:17px;font-weight:600;color:var(--ink-soft);letter-spacing:0;text-transform:capitalize}
#view-profile .section-kicker .i,#view-profile .section-kicker svg{display:none}
#view-profile .menu{background:var(--surface-warm);border:1px solid var(--line);border-radius:20px;box-shadow:0 6px 18px rgba(60,52,40,.10);overflow:hidden}
#view-profile .menu-item{padding:16px 16px;gap:15px;font-size:16px;font-weight:500;color:var(--espresso);border-bottom:1px solid var(--line)}
#view-profile .menu-item .ic{width:40px;height:40px;border-radius:50%;background:var(--mocha-deep);color:#fff}
#view-profile .menu-item .ic svg{color:#fff;width:20px;height:20px}
#view-profile .menu-item .ic.ic-alert,#view-profile .menu-item .ic.ic-danger{background:var(--danger);color:#fff}
#view-profile .menu-item .ic.ic-alert svg,#view-profile .menu-item .ic.ic-danger svg{color:#fff}
#view-profile .menu-item .arr{color:var(--ink-soft);margin-left:auto}
#view-profile .menu-item.danger-text{color:var(--danger)}
#view-profile .menu-item.danger-text .ic{background:var(--danger);color:#fff}
#view-profile .menu-item .toggle{margin-left:auto;width:52px;height:32px;border-radius:999px;background:var(--toggle-off)}
#view-profile .menu-item .toggle::after{width:26px;height:26px;top:3px;left:3px}
#view-profile .menu-item .toggle.on{background:var(--mocha-deep)}
#view-profile .menu-item .toggle.on::after{left:calc(100% - 29px)}

/* ---------- Chat (mockup 10) — full portrait + glass bubbles ---------- */
#view-chat .v3-chat{background:var(--taupe-screen)}
#view-chat .v3-chat-head{background:transparent;border-bottom:0;backdrop-filter:none}
#view-chat .v3-chat-back{background:var(--espresso);color:#fff;border-radius:14px;width:40px;height:40px}
#view-chat .v3-chat-back svg{color:#fff}
#view-chat .v3-chat-name{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
#view-chat .v3-chat-status{color:rgba(255,255,255,.82)}
#view-chat .v3-chat-status .dot{background:var(--online)}
#view-chat .v3-chat-dream{background:var(--glass-bubble);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px}
#view-chat .v3-chat-dream svg{color:#fff}
#view-chat .v3-chat-iconbtn{background:var(--glass-bubble);color:#fff;border:1px solid rgba(255,255,255,.22)}
#view-chat .v3-chat-iconbtn svg{color:#fff}
#view-chat .v3-chat-hero::after{background:linear-gradient(180deg,rgba(150,138,120,0) 0%,rgba(150,138,120,0) 44%,rgba(150,138,120,.42) 70%,rgba(140,128,112,.8) 100%) !important}
#view-chat .v3-chat-body .msg.her{background:var(--glass-bubble);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28);color:#fff;box-shadow:0 8px 20px rgba(110,95,70,.16)}
#view-chat .v3-chat-body .msg.her .md-body,#view-chat .v3-chat-body .msg.her .quote{color:#fff}
#view-chat .v3-chat-body .msg.me{background:var(--glass-bubble-user);color:var(--espresso);box-shadow:0 6px 16px rgba(60,52,40,.14)}
#view-chat .v3-chat-body .typing{background:var(--glass-bubble);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28)}
#view-chat .v3-chat-body .typing span{background:rgba(255,255,255,.78)}
#view-chat .v3-chat-body .day-divider{background:rgba(255,255,255,.18);color:rgba(255,255,255,.82)}
#view-chat .msg-row{display:flex;gap:8px;align-items:flex-end;max-width:88%}
#view-chat .msg-row.her{align-self:flex-start}
#view-chat .msg-row.me{align-self:flex-end;flex-direction:row-reverse}
#view-chat .msg-row .msg{max-width:100%}
#view-chat .msg-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.35);flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.18)}
#view-chat .v3-chat-input{background:transparent;border-top:0}
#view-chat .v3-chat-input .pill{background:#fff;border:1px solid rgba(26,22,18,.08);box-shadow:0 6px 16px rgba(0,0,0,.14);display:flex;align-items:center;padding-right:10px}
#view-chat .v3-chat-input input{color:var(--espresso)}
#view-chat .v3-chat-wave{color:var(--ink-mute);display:flex;align-items:center}
#view-chat .v3-chat-wave svg{width:20px;height:20px}
#view-chat .v3-chat-input-side{background:#fff;color:var(--espresso);box-shadow:0 4px 12px rgba(0,0,0,.12)}
#view-chat .v3-chat-input-side svg{color:var(--espresso)}
#view-chat .v3-chat-input-send{background:var(--cta-grad);color:#fff;width:42px;height:42px;box-shadow:0 8px 20px rgba(110,95,70,.3)}
#view-chat .v3-chat-input-send svg{color:#fff}

/* ---------- Desktop: centered phone canvas (no sidebar) ---------- */
@media (min-width:1024px){
  body, body.in-app, body:not(.in-app){
    background:radial-gradient(1100px 720px at 50% -8%, #efe7d2 0%, #e2d6ba 68%, #d8cbac 100%) !important;
  }
  .sidebar{display:none !important}
  .app-shell, body.in-app .app-shell, body:not(.in-app) .app-shell{
    display:flex !important;align-items:center;justify-content:center;
    min-height:100dvh;height:100dvh;padding:0 !important;
  }
  .content-area, body.in-app .content-area, body:not(.in-app) .content-area{
    flex:0 0 432px !important;width:432px !important;max-width:432px !important;min-width:0 !important;
    height:min(948px,calc(100dvh - 36px)) !important;
    margin:0 auto !important;border-radius:46px !important;overflow:hidden !important;
    background:var(--bg) !important;display:flex !important;flex-direction:column !important;
    position:relative !important;
    box-shadow:0 50px 110px rgba(60,42,22,.32), 0 0 0 11px #14110d, 0 0 0 12px rgba(255,255,255,.05) !important;
  }
  .content-area .view-host, body:not(.in-app) .view-host, body.in-app .view-host{
    flex:1 !important;height:auto !important;position:relative !important;overflow:hidden !important;
  }
  .content-area .view, body:not(.in-app) .view, body.in-app .view{min-height:0 !important}
  .tabbar{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;display:flex !important}
  body.in-app .view{padding-bottom:var(--tabbar-h) !important}
  .toast{bottom:36px}
}

/* ---------- BoB polish pass ---------- */
.v3-splash-sub{text-transform:none !important;letter-spacing:normal !important}
.v3-splash-headline i{text-shadow:0 2px 14px rgba(0,0,0,.6) !important}
#view-home .greeting .hi i{overflow-wrap:anywhere}
#view-mood .mood-hero{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important}
#view-mood .mood-hero h2{text-transform:none}
#view-profile .profile-head h2,#view-profile .profile-head h2 i,#view-profile #profileName{color:var(--espresso) !important}
#view-chat .v3-chat-body .msg.her{background:rgba(74,64,50,.46) !important}

/* ── Companions (multi) — web parity with the mobile Companions screen ── */
.companions-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.comp-row{display:flex;align-items:center;gap:13px;background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;padding:11px 12px;cursor:pointer;transition:border-color .15s ease}
.comp-row:hover{border-color:var(--copper-2)}
.comp-row.active{border-color:var(--copper-2);border-width:2px;padding:10px 11px}
.comp-av{width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none;background:var(--bg-deep,#e3dac0);display:flex;align-items:center;justify-content:center}
.comp-av img{width:100%;height:100%;object-fit:cover}
.comp-mono{font-family:'Cal Sans',serif;font-size:20px;color:var(--copper-3)}
.comp-meta{flex:1;min-width:0}
.comp-name{font-weight:600;color:var(--ink);font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comp-sub{font-size:12.5px;color:var(--ink-mute);margin-top:1px}
.comp-active-dot{width:26px;height:26px;border-radius:50%;background:var(--copper-3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.comp-del{width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--ink-mute);font-size:15px;line-height:1;cursor:pointer;flex:none}
.comp-del:hover{color:var(--danger,#9d5b5b);background:rgba(0,0,0,.05)}

/* Dream Life — "back to normal" exit (over the dark dream photo) */
.v3-dream-exit{display:block;margin:12px auto 0;background:transparent;border:0;color:#fff;opacity:.85;font:600 13px/1 'Inter',system-ui,sans-serif;letter-spacing:.3px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.v3-dream-exit:hover{opacity:1}

/* Mood — "already checked in today" note above the (disabled) save button */
.mood-today-note{display:flex;align-items:center;gap:8px;background:var(--bg-deep,#e3dac0);border:1px solid var(--copper-3);border-radius:14px;padding:11px 14px;font:500 13.5px/1.4 'Inter',system-ui,sans-serif;color:var(--ink);margin-bottom:12px}

/* Chat — per-message timestamps (parity with mobile). A small dark pill keeps
   the time legible over any portrait area (bright or dark). */
#view-chat .v3-chat-body .msg-time{margin:-2px 8px 9px;padding:0 2px}
#view-chat .v3-chat-body .msg-time.me{text-align:right}
#view-chat .v3-chat-body .msg-time.her{text-align:left}
#view-chat .v3-chat-body .msg-time span{display:inline-block;font:600 10.5px/1 'Inter',system-ui,sans-serif;color:rgba(255,255,255,.96);background:rgba(20,14,8,.34);padding:3px 8px;border-radius:9px;letter-spacing:.3px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* ════ Web chat = FULL-BLEED portrait, matching the mobile chat hero ════
   #chatHero was moved (index.html) to be the FIRST child of .v3-chat so it can
   sit behind the header + messages + input. The legacy "split stage" rules
   above (.v3-chat-hero{flex:0 0 50%!important;position:relative!important} and
   #view-chat > .v3-chat .v3-chat-hero{flex:0 0 46%!important}) made it a band
   filling the top half. We beat them with MATCHING specificity (1 id + 2 class)
   + !important, placed last. position:absolute pulls the hero OUT of the flex
   flow entirely, so the leftover flex:46% sizing no longer applies — inset:0
   then fills the whole .v3-chat (which is height:100dvh). */
#view-chat .v3-chat{background:#2a2520}
#view-chat > .v3-chat > .v3-chat-hero,
#view-chat .v3-chat .v3-chat-hero{
  position:absolute !important;
  inset:0 !important;
  flex:0 0 auto !important;
  width:auto !important;height:auto !important;min-height:0 !important;
  z-index:0 !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
}
/* Soft top + bottom darken for legibility only — NOT a fade to cream/taupe. */
#view-chat .v3-chat-hero::after{background:linear-gradient(180deg,
  rgba(18,12,6,.52) 0%,
  rgba(18,12,6,.14) 14%,
  rgba(18,12,6,0) 36%,
  rgba(18,12,6,0) 55%,
  rgba(18,12,6,.30) 78%,
  rgba(18,12,6,.58) 100%) !important}
#view-chat .v3-chat-stage{background:transparent !important;z-index:2}
#view-chat .v3-chat-body{background:transparent !important}
/* The chat view has padding:0 (so it skips the usual tab-bar padding); lift the
   floating input pill above the fixed bottom tab bar (var(--tabbar-h)). */
#view-chat .v3-chat-input{padding-bottom:calc(12px + var(--tabbar-h)) !important}
/* Header sits at the very top of the full-bleed view — push it clear of the
   notch (mobile, via safe-area) AND the desktop phone-frame's rounded corner
   (~46px radius) so the Dream Life pill + call/SOS icons aren't clipped. */
#view-chat .v3-chat-head{padding-top:max(30px, env(safe-area-inset-top, 30px)) !important}
/* The trial banner is a static flex child, so the absolute hero (z:0) painted
   OVER it (only the ✦ showed). Lift it above the portrait. */
#view-chat .trial-banner{position:relative;z-index:4}
/* AI bubble: darker frosted (matches the mobile app) so white text stays legible
   over both bright and dark areas of the portrait. */
#view-chat .v3-chat-body .msg.her{background:rgba(40,33,25,.55) !important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ════ Home "today's whisper" card = full-portrait (match the chat hero) ════
   The legacy card stacked a 4:3 photo OVER a cream text panel (and a 2-col
   photo|cream grid ≥768px). The BoB layer turned the whisper text WHITE — but
   left the cream panel + split layout, so the white text sat on cream and was
   invisible. Make the portrait fill the WHOLE card and overlay the whisper
   (white) on a darkened bottom, at every width. */
#view-home .home-hero{display:block !important;grid-template-columns:none !important;position:relative;min-height:420px;background:#2a2520}
#view-home .home-hero .portrait-bg{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;aspect-ratio:auto !important}
#view-home .home-hero .portrait-bg img,#view-home .home-hero .portrait-bg svg{width:100% !important;height:100% !important;object-fit:cover;object-position:center 22%}
#view-home .home-hero .portrait-bg::after{display:none !important}
#view-home .home-hero .ov{display:block !important;position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(24,18,12,0) 32%,rgba(28,22,15,.50) 66%,rgba(22,16,10,.85) 100%)}
#view-home .home-hero .action{z-index:3}
#view-home .home-hero .txt{position:absolute !important;left:0;right:0;bottom:0;z-index:2;background:transparent !important;padding:24px 22px 22px;gap:6px}
#view-home .home-hero .txt::before{display:none !important}
#view-home .home-hero .txt .k{color:rgba(255,255,255,.82) !important;padding-top:0 !important}
#view-home .home-hero .txt h2{color:#f6efe0 !important}
#view-home .home-hero .txt h2 i{color:#f3d9c4 !important}
#view-home .home-hero .txt p{color:rgba(255,255,255,.76) !important}

/* Kill the ~20px horizontal band on mobile web: inactive .view panels are
   transform:translateX(20px) (slide-in), so they stick 20px past the viewport
   and create a horizontal scroll / right-edge cream band on real mobile
   browsers. Clip it at the document level — vertical scroll is unaffected (it
   lives inside .view, overflow-y:auto). */
/* Clip horizontal overflow WITHOUT making the body a scroll container. Using
   `hidden` here forced overflow-y to compute to `auto` (CSS coercion), so the
   body became a second scroll layer competing with the per-view scroller →
   janky / "sticky" scrolling on mobile. `clip` keeps overflow-y visible, so the
   only scroll container is the .view. (Desktop keeps its own hidden rule.) */
html, body { overflow-x: clip; max-width: 100%; }
/* Momentum scrolling, but DON'T set overscroll-behavior:contain — on iOS that
   suppresses the rubber-band bounce at the top/bottom, so the scroll "hits" a
   hard stop near the ends instead of easing in. The body is no longer a scroll
   container (overflow-x:clip above), so there's nothing to chain to anyway. */
.view{ -webkit-overflow-scrolling: touch; }

/* onb step 3 (birth + account): remove the top-left back button (it covered the
   couple photo). JS sets visibility:visible inline, so override with display. */
body[data-v3-step='3'] #view-onb-v3 .v3-onb-back{display:none !important}

/* ════ Chat header tweaks ════ */
/* Remove the top-left back button on the chat page (the bottom tab bar's HOME
   handles leaving the chat). */
#view-chat .v3-chat-back{display:none !important}
/* Trial banner now sits at the VERY TOP (moved above the header in HTML), so it
   takes the safe-area top clearance + paints above the portrait. */
#view-chat .trial-banner{position:relative;z-index:6;padding-top:max(10px, env(safe-area-inset-top, 10px))}
/* When the banner is showing it already clears the top, so the header tucks up
   right beneath it instead of keeping its own big notch padding. */
#view-chat .v3-chat:has(.trial-banner:not([hidden])) .v3-chat-head{padding-top:12px !important}
/* Mobile web: drop the chat input bar lower (closer to the tab bar). The big
   tab-bar-height padding is only needed on the desktop phone-frame; on mobile
   the dynamic viewport already sits the input above the fixed tab bar. */
@media (max-width:899px){
  #view-chat .v3-chat-input{padding-bottom:max(14px, env(safe-area-inset-bottom, 14px)) !important}
}

/* Typing indicator (the "..." dots before the reply): the BoB `.typing`
   override re-added a glass bubble background that ALSO hit the INLINE dots, so
   they rendered as a second bubble nested inside the message bubble (looked
   doubled/overlapping). Keep the inline dots fully transparent (just dots on
   the one bubble), and hide the text caret while only dots show — it was the
   stray copper bar. */
#view-chat .v3-chat-body .typing.inline{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;padding:2px 0 !important;
}
#view-chat .v3-chat-body .msg.streaming:has(.typing) .stream-caret{display:none !important}

/* "You" / profile page footer: shows the platform (Web) + version so it's clear
   which build is running, distinct from the native app. */
.app-version-foot{text-align:center;font:500 11.5px/1.4 'Inter',system-ui,sans-serif;color:var(--ink-mute);letter-spacing:.04em;opacity:.72;padding:6px 16px 16px}


/* ============================================================
   ████ ONBOARDING STEP 1 — full-bleed couple (target #13) ████
   The couple photo is a FIXED full-screen backdrop; a compact glass
   form scrolls over it (contained momentum scroll set in
   onboarding_v3.js render() → no iOS dvh-reflow bounce). Uniform
   overlay so the photo shows behind the WHOLE form. Scoped to
   body[data-v3-step="1"] so steps 2/3 are untouched. Appended last.
   ============================================================ */
body[data-v3-step="1"] #view-onb-v3.view{
  background:#15110d !important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
body[data-v3-step="1"] #view-onb-v3 > .v3-onb,
body[data-v3-step="1"] #view-onb-v3 .v3-onb{
  position:relative !important;min-height:100% !important;background:transparent !important;justify-content:flex-start !important;
}
/* FIXED full-bleed couple backdrop, muted toward the example tone */
body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1{
  position:fixed !important;inset:0 !important;height:100dvh !important;width:100% !important;max-height:none !important;
  background:url('/static/images/v3/Screen2.jpg?v=5') center top / cover no-repeat !important;
  filter:saturate(.97) !important;image-rendering:auto !important;z-index:0 !important;opacity:1 !important;
}
body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1::before{display:none !important}
/* Uniform-ish dark overlay (a touch stronger top + bottom for legibility) */
body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1::after{
  content:"" !important;position:absolute !important;inset:0 !important;display:block !important;
  background:linear-gradient(180deg,
    rgba(15,17,21,.34) 0%, rgba(15,17,21,.07) 13%,
    rgba(15,17,21,0) 36%, rgba(15,17,21,0) 66%,
    rgba(15,17,21,.1) 87%, rgba(15,17,21,.26) 100%) !important;
}
/* Back button glass — rounded SQUARE to match steps 2 + 3 (base is a circle) */
body[data-v3-step="1"] #view-onb-v3 .v3-onb-back{
  background:rgba(20,16,12,.4) !important;border:1px solid rgba(255,255,255,.28) !important;color:#fff !important;
  border-radius:14px !important;
  -webkit-backdrop-filter:blur(8px) !important;backdrop-filter:blur(8px) !important;z-index:3 !important;
}
/* Stage over the photo */
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage{position:relative !important;z-index:2 !important;padding-top:0 !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage > div{background:transparent !important}
/* Hero — white over the photo, one-line headline, couple shows above */
body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero{
  position:relative !important;z-index:2 !important;text-align:left !important;
  padding:34vh 22px 0 !important;padding:34dvh 22px 0 !important;margin:0 !important;
}
body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1{
  color:#fff !important;font-family:'Cal Sans',sans-serif !important;font-weight:400 !important;
  font-size:27px !important;line-height:1.1 !important;letter-spacing:-.02em !important;
  text-transform:none !important;text-shadow:0 2px 18px rgba(0,0,0,.62) !important;white-space:nowrap !important;
}
body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1 i{
  font-family:'Playfair Display',serif !important;font-style:italic !important;font-weight:500 !important;
  color:#e8d5be !important;-webkit-text-fill-color:initial !important;background:none !important;
  text-shadow:0 2px 18px rgba(0,0,0,.72) !important;
}
body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero p{
  color:rgba(255,255,255,.92) !important;font-size:14.5px !important;margin-top:5px !important;
  text-shadow:0 1px 12px rgba(0,0,0,.7) !important;
}
/* Card transparent + compact */
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-card{
  position:relative !important;z-index:2 !important;background:transparent !important;
  box-shadow:none !important;border:0 !important;border-radius:0 !important;margin-top:10px !important;
  padding:0 22px calc(22px + env(safe-area-inset-bottom)) !important;
  /* the base .v3-onb-card has backdrop-filter:blur(20px) — that is what was
     blurring the whole lower photo once the form (this box) renders. Kill it. */
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-section{margin-bottom:12px !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-label{
  color:rgba(255,255,255,.92) !important;font-size:13px !important;font-weight:500 !important;
  margin-bottom:7px !important;text-shadow:0 1px 8px rgba(0,0,0,.6) !important;
}
/* Shared glass pill */
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-rel,
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-gender,
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-type{
  background:rgba(255,255,255,.1) !important;border:1.3px solid rgba(255,255,255,.5) !important;color:#fff !important;
  border-radius:999px !important;cursor:pointer !important;box-shadow:none !important;
  transition:background .16s,border-color .16s !important;
}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-rel.on,
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-gender.on,
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-type.on{
  /* SOLID light taupe — opaque, covers the photo (no see-through), white text readable */
  background:linear-gradient(180deg,#ab957a,#988369) !important;
  border-color:rgba(255,255,255,.65) !important;color:#fff !important;box-shadow:0 4px 12px rgba(0,0,0,.22) !important;
}
/* "My Rich Future Self" — CENTERED like the other pills: [icon + title] row
   centered, subtitle on its own centered full-width line (so it fits, no clip).
   Subtitle is Inter italic (not serif) to match the rest of the UI. */
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-rel.has-sub{
  flex-direction:column !important;align-items:center !important;justify-content:center !important;
  gap:3px !important;padding:10px 14px !important;
}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-rel .rel-main{
  display:flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;
}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-rel.has-sub .ico svg{width:20px !important;height:20px !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-rel .sub{
  display:block !important;text-align:center !important;width:100% !important;
  font-family:'Inter',sans-serif !important;font-style:italic !important;font-weight:400 !important;
  font-size:11px !important;line-height:1.3 !important;color:rgba(255,255,255,.86) !important;letter-spacing:.002em !important;
}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-rel.on::after,
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-gender.on::after,
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-type.on::after{display:none !important}
/* Relationship pills — full width, compact */
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-rels{display:flex !important;flex-direction:column !important;gap:8px !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-rel{
  display:flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;
  width:100% !important;padding:11px 16px !important;font-family:'Inter',sans-serif !important;font-size:14.5px !important;font-weight:500 !important;
}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-rel .ico{display:flex !important;align-items:center !important;width:auto !important;height:auto !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-rel .ico svg{width:18px !important;height:18px !important;stroke:currentColor !important;stroke-width:1.6 !important;fill:none !important}
/* Gender — 2 cols */
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-genders{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-gender{padding:11px !important;font-size:14.5px !important;font-weight:500 !important;gap:7px !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-gender svg{width:17px !important;height:17px !important;stroke:#fff !important;color:#fff !important}
/* Personality — 3 cols */
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-types{display:grid !important;grid-template-columns:1fr 1fr 1fr !important;gap:8px !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-type{flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:6px !important;padding:11px 5px !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-type .ico{width:auto !important;height:auto !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-type .ico svg{width:16px !important;height:16px !important;stroke:currentColor !important;stroke-width:1.6 !important;fill:none !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-type .lbl{font-size:13.5px !important;font-weight:500 !important}
/* Glass inputs — compact */
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-input{
  background:rgba(255,255,255,.12) !important;border:1.3px solid rgba(255,255,255,.5) !important;color:#fff !important;
  border-radius:999px !important;padding:11px 14px 11px 40px !important;font-size:14px !important;
}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-input::placeholder{color:rgba(255,255,255,.6) !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-input:focus{background:rgba(255,255,255,.18) !important;border-color:#fff !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-input-row .ico{color:rgba(255,255,255,.74) !important}
body[data-v3-step="1"] #view-onb-v3 #onbV3Stage .v3-onb-input-row .ico svg{stroke:currentColor !important}
/* NEXT — warm taupe, FULL WIDTH (a more-specific rule was constraining it to
   ~280px + tiny type; doubled-id specificity here wins) + bigger, like step 3 */
html body[data-v3-step="1"] #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-next{
  width:100% !important;max-width:none !important;box-sizing:border-box !important;
  margin:14px 0 0 !important;align-self:stretch !important;
  background:linear-gradient(180deg,#a8906f,#7d6a50) !important;color:#fff !important;
  border:0 !important;border-radius:999px !important;padding:16px !important;
  font-family:'Inter',sans-serif !important;font-weight:700 !important;font-size:13.5px !important;letter-spacing:.16em !important;
  box-shadow:0 12px 24px rgba(0,0,0,.4) !important;
}
html body[data-v3-step="1"] #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-next svg{display:none !important}

/* ████████████████████████████████████████████████████████████████████
   STEP 2 (presence_grid) — WARM TAUPE RESTYLE  (2026-06-26)
   Re-themes "Choose Your Presence" to the warm taupe/mocha mock:
   gradient bg, LEFT-aligned white headline (Cal Sans + Playfair-italic
   accent), borderless grid tiles, dark pager dots, white sentence-case
   page info, outlined REFINE pill, dark filled CONTINUE pill, dark
   rounded back. Scoped to step 2 + appended LAST so it wins the cascade.
   Layout (grid columns, paging, sizing) is left to the earlier rules —
   this restyles colour / type / borders only.
   ████████████████████████████████████████████████████████████████████ */
/* warm taupe gradient backdrop (replaces the flat cream) */
body[data-v3-step="2"] #view-onb-v3.view{ background:#5b4f41 !important; }
body[data-v3-step="2"] #view-onb-v3 .v3-onb{
  background:linear-gradient(180deg,#a99d8b 0%,#948776 40%,#756757 74%,#5d5142 100%) !important;
}
body[data-v3-step="2"] #view-onb-v3 .v3-onb-bg.is-step2{ display:none !important; }
body[data-v3-step="2"] .v3-onb-presence{ background:transparent !important; text-align:left !important; }

/* headline — left, white "Choose Your" / "Presence" + black italic "Companion"
   (matches the template: dark Playfair italic accent on the taupe photo). */
body[data-v3-step="2"] .v3-onb-presence h1{
  text-align:left !important;
  font-family:'Cal Sans',sans-serif !important;font-weight:400 !important;
  font-size:30px !important;line-height:1.06 !important;letter-spacing:-.02em !important;
  color:#fff !important;text-shadow:0 1px 14px rgba(0,0,0,.26) !important;
}
body[data-v3-step="2"] .v3-onb-presence h1 i{
  font-family:'Playfair Display',serif !important;font-style:italic !important;font-weight:700 !important;
  color:#1a1612 !important;background:none !important;
  -webkit-text-fill-color:#1a1612 !important;background-clip:border-box !important;
  text-shadow:0 1px 10px rgba(255,255,255,.18) !important;
}
/* subtitle — left, white */
body[data-v3-step="2"] .v3-onb-presence p{
  text-align:left !important;margin:10px 0 0 !important;max-width:360px !important;
  color:rgba(255,255,255,.9) !important;font-size:15px !important;line-height:1.4 !important;
  text-shadow:0 1px 10px rgba(0,0,0,.22) !important;
}

/* grid tiles — borderless, no cream frame */
body[data-v3-step="2"] .v3-onb-portrait{
  background:transparent !important;border:0 !important;border-radius:14px !important;
  box-shadow:0 2px 10px rgba(20,14,8,.22) !important;
}
body[data-v3-step="2"] .v3-onb-portrait img{ border-radius:14px !important; }
body[data-v3-step="2"] .v3-onb-portrait.on{
  outline:2.5px solid #fff !important;outline-offset:0 !important;
  box-shadow:0 0 0 2px rgba(0,0,0,.25), 0 10px 24px rgba(20,14,8,.3) !important;
}

/* pager dots — dark on the taupe bg */
body[data-v3-step="2"] .v3-page-dot{ background:rgba(35,28,20,.42) !important; }
body[data-v3-step="2"] .v3-page-dot.on{ background:#2a221a !important; }
body[data-v3-step="2"] .v3-presence-arrow{
  background:rgba(255,255,255,.10) !important;border:1px solid rgba(255,255,255,.32) !important;color:#fff !important;
}
body[data-v3-step="2"] .v3-presence-arrow:hover{ background:rgba(255,255,255,.18) !important;border-color:#fff !important; }
body[data-v3-step="2"] .v3-presence-arrow[disabled]{ opacity:.32 !important; }

/* page info — white, sentence case (kill the uppercase + copper) */
body[data-v3-step="2"] .v3-onb-presence-foot{
  text-transform:none !important;color:rgba(255,255,255,.82) !important;
  letter-spacing:.01em !important;font-weight:500 !important;
}

/* REFINE COMPANION — outlined transparent pill */
body[data-v3-step="2"] .v3-onb-refine{
  background:transparent !important;border:1.5px solid rgba(255,255,255,.45) !important;color:#fff !important;box-shadow:none !important;
}
body[data-v3-step="2"] .v3-onb-refine svg{ color:#fff !important;stroke:#fff !important; }
body[data-v3-step="2"] .v3-onb-refine:disabled{ opacity:.5 !important; }

/* NEXT — dark filled pill, FULL WIDTH (a more-specific rule was constraining it
   to ~200px; doubled-id specificity here wins) — matches the REFINE pill above */
html body[data-v3-step="2"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-next{
  width:100% !important;max-width:none !important;box-sizing:border-box !important;align-self:stretch !important;
  padding:12px 18px !important;margin:10px 0 0 !important;
  font-family:'Inter',sans-serif !important;font-size:13px !important;font-weight:700 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;border-radius:999px !important;
  background:rgba(30,24,17,.55) !important;border:1px solid rgba(255,255,255,.16) !important;color:#fff !important;
  box-shadow:0 8px 22px rgba(20,14,8,.3) !important;
}
html body[data-v3-step="2"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-next svg{ display:none !important; }

/* back button — dark rounded-square, white arrow */
body[data-v3-step="2"] #view-onb-v3 .v3-onb-back{
  background:rgba(30,24,17,.55) !important;border:0 !important;border-radius:14px !important;color:#fff !important;
  -webkit-backdrop-filter:blur(6px) !important;backdrop-filter:blur(6px) !important;
}
body[data-v3-step="2"] #view-onb-v3 .v3-onb-back svg{ stroke:#fff !important;color:#fff !important; }

/* ████████████████████████████████████████████████████████████████████
   REFINE sub-view ("Refine your presence") — WARM TAUPE RESTYLE (2026-06-26)
   The refine substep renders inside step 2 (data-v3-step="2"), so it sat on
   the new taupe bg but kept its old cream/copper chrome (black headline,
   copper italic + chips + GENERATE, cream photo frame). Recolour it all to
   the white/grey-on-taupe theme. Layout untouched; appended LAST so it wins.
   ████████████████████████████████████████████████████████████████████ */
/* back — dark rounded square (match step-2 back) */
body[data-v3-step="2"] .v3-onb-refine-back{
  background:rgba(30,24,17,.55) !important;border:0 !important;border-radius:14px !important;color:#fff !important;
  -webkit-backdrop-filter:blur(6px) !important;backdrop-filter:blur(6px) !important;
}
body[data-v3-step="2"] .v3-onb-refine-back svg{ stroke:#fff !important;color:#fff !important; }

/* headline — white "Refine your" + muted-grey italic "presence." */
body[data-v3-step="2"] .v3-onb-refine-head h1{
  color:#fff !important;text-shadow:0 1px 12px rgba(0,0,0,.24) !important;
}
body[data-v3-step="2"] .v3-onb-refine-head h1 i{
  color:#78705f !important;background:none !important;
  -webkit-text-fill-color:#78705f !important;background-clip:border-box !important;
  text-shadow:0 1px 3px rgba(255,255,255,.25) !important;
}
body[data-v3-step="2"] .v3-onb-refine-head p{
  color:rgba(255,255,255,.86) !important;text-shadow:0 1px 8px rgba(0,0,0,.2) !important;
}

/* photo frame — neutral dark fill instead of cream */
body[data-v3-step="2"] .v3-onb-refine-canvas{
  background:rgba(35,28,20,.32) !important;
  box-shadow:0 10px 28px rgba(20,14,8,.34) !important;
}

/* prompt label — light */
body[data-v3-step="2"] .v3-onb-refine-prompt label{ color:rgba(255,255,255,.72) !important; }
/* textarea — keep light & readable, drop the copper border/focus */
body[data-v3-step="2"] .v3-onb-refine-prompt textarea{
  border-color:rgba(0,0,0,.12) !important;
}
body[data-v3-step="2"] .v3-onb-refine-prompt textarea:focus{
  border-color:rgba(255,255,255,.7) !important;box-shadow:0 0 0 3px rgba(255,255,255,.16) !important;
}

/* suggestion chips — light glass instead of copper */
body[data-v3-step="2"] .v3-onb-refine-chips .chip{
  background:rgba(255,255,255,.10) !important;border:1px solid rgba(255,255,255,.3) !important;color:rgba(255,255,255,.92) !important;
}
body[data-v3-step="2"] .v3-onb-refine-chips .chip:hover{ background:rgba(255,255,255,.18) !important; }

/* Discard — outlined transparent (secondary) */
body[data-v3-step="2"] .v3-onb-refine-discard{
  background:transparent !important;border:1.5px solid rgba(255,255,255,.45) !important;color:#fff !important;
}
/* GENERATE — muted taupe gradient (in-theme warm accent, not bright copper) */
body[data-v3-step="2"] .v3-onb-refine-generate{
  background:linear-gradient(180deg,#a8906f,#7d6a50) !important;color:#fff !important;
  box-shadow:0 10px 22px rgba(20,14,8,.32),inset 0 1px 0 rgba(255,255,255,.18) !important;
}
/* SAVE & CONTINUE reuses .v3-onb-next -> already dark via the step-2 rules. */

/* ████████████████████████████████████████████████████████████████████
   STEP 3 (birth_and_account) — FULL-BLEED GLASS RESTYLE (2026-06-26)
   Mirrors step-1: the SAME couple photo (Screen2.jpg) as a FIXED
   full-bleed backdrop + dark scrim, transparent card, dark-glass inputs,
   white type, outlined OAuth pills (Apple/Google/Facebook), taupe NEXT,
   dark rounded back. Replaces the old cream-banner layout. Scoped to step 3
   + appended LAST so it wins; the form scrolls naturally over the fixed photo.
   ████████████████████████████████████████████████████████████████████ */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3.view,
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3{ background:#15110d !important; }
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 > .v3-onb,
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb{
  position:relative !important;min-height:100dvh !important;height:auto !important;max-height:none !important;
  background:transparent !important;justify-content:flex-start !important;overflow:visible !important;
}
/* fixed full-bleed couple backdrop (same image as step 1) */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-bg.is-step3{
  position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
  height:100dvh !important;width:100% !important;max-height:none !important;
  background:url('/static/images/v3/Screen2.jpg?v=5') center top / cover no-repeat !important;
  filter:saturate(.97) !important;z-index:0 !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-bg.is-step3::before{ display:none !important; }
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-bg.is-step3::after{
  content:"" !important;position:fixed !important;inset:0 !important;display:block !important;z-index:0 !important;
  background:linear-gradient(180deg,
    rgba(15,12,9,0) 0%, rgba(15,12,9,0) 44%,
    rgba(15,12,9,.14) 70%, rgba(15,12,9,.32) 100%) !important;
  pointer-events:none !important;
}
/* stage + card over the photo, transparent, no blur, no 50/40vh banner push */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage{
  position:relative !important;z-index:2 !important;padding-top:0 !important;background:transparent !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage > div{ background:transparent !important; }
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-card{
  position:relative !important;z-index:2 !important;background:transparent !important;
  box-shadow:none !important;border:0 !important;border-radius:0 !important;margin-top:6px !important;
  padding:0 22px calc(26px + env(safe-area-inset-bottom)) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
/* hero — white headline + cream italic, white serif quote */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-hero{
  position:relative !important;z-index:2 !important;text-align:left !important;
  padding:max(58px,calc(env(safe-area-inset-top) + 42px)) 22px 0 !important;margin:0 !important;background:none !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-hero h1{
  color:#fff !important;font-family:'Cal Sans',sans-serif !important;font-weight:400 !important;
  font-size:30px !important;line-height:1.05 !important;letter-spacing:-.02em !important;text-transform:none !important;
  text-shadow:0 2px 18px rgba(0,0,0,.6) !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-hero h1 i{
  font-family:'Playfair Display',serif !important;font-style:italic !important;font-weight:500 !important;
  color:#e8d5be !important;-webkit-text-fill-color:initial !important;background:none !important;
  text-shadow:0 2px 18px rgba(0,0,0,.7) !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-hero .v3-birth-quote{
  color:rgba(255,255,255,.9) !important;font-family:'Inter',sans-serif !important;font-style:normal !important;
  font-size:14px !important;line-height:1.5 !important;margin:10px 0 0 !important;max-width:none !important;
  text-shadow:0 1px 12px rgba(0,0,0,.62) !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-hero .v3-birth-quote b{ color:#f2e3a3 !important;font-weight:600 !important; }
/* block titles (uppercase, light) + sub */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-block-title{
  color:rgba(255,255,255,.92) !important;font-family:'Inter',sans-serif !important;
  text-transform:uppercase !important;letter-spacing:.14em !important;font-size:12px !important;font-weight:600 !important;
  margin:20px 0 10px !important;text-shadow:0 1px 8px rgba(0,0,0,.55) !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-block-sub{
  color:#f2e3a3 !important;font-size:13px !important;line-height:1.5 !important;margin-bottom:12px !important;
  text-shadow:0 1px 8px rgba(0,0,0,.5) !important;
}
/* dark-glass inputs (robust over a varying photo) */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-input{
  background:rgba(22,17,12,.42) !important;border:1.3px solid rgba(255,255,255,.34) !important;color:#fff !important;
  border-radius:14px !important;
  /* reduce the field blur per request */
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  /* every field IDENTICAL size: native date/time inputs were sizing themselves
     differently from the text inputs. Strip native chrome + force one box. */
  -webkit-appearance:none !important;appearance:none !important;
  box-sizing:border-box !important;width:100% !important;
  height:52px !important;min-height:52px !important;
  padding:0 14px 0 42px !important;font-size:15px !important;line-height:normal !important;
}
/* hide the native date/time picker indicator on the right (we use the left icon) */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-input::-webkit-calendar-picker-indicator{
  opacity:0 !important;width:0 !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-input::-webkit-date-and-time-value{ text-align:left !important; }
/* the iOS Date/Time placeholder OVERLAY was dark (old cream design) — match it
   to the native "Country of Birth" placeholder: same light colour, size, x-pos */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-date-placeholder{
  color:rgba(255,255,255,.6) !important;font-size:15px !important;left:42px !important;right:14px !important;
}
/* field icons: keep them the same light tone as the text (not copper) */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-input-row .ico,
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-input-row .ico svg{
  color:rgba(255,255,255,.7) !important;stroke:rgba(255,255,255,.7) !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-input::placeholder{ color:rgba(255,255,255,.6) !important; }
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-input:focus{ background:rgba(22,17,12,.55) !important;border-color:#fff !important; }
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-input-row .ico{ color:rgba(255,255,255,.72) !important; }
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-input-row .ico svg{ stroke:currentColor !important; }
/* country-code chip — glass */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-cc{
  background:rgba(22,17,12,.42) !important;border:1.3px solid rgba(255,255,255,.34) !important;color:#fff !important;border-radius:14px !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-cc .dial{ color:#fff !important; }
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-cc svg{ color:rgba(255,255,255,.7) !important;stroke:currentColor !important; }
/* OAuth — 3-up outlined glass pills (Apple / Google / Facebook) */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-oauth-row{
  display:grid !important;grid-template-columns:1fr 1fr 1fr !important;gap:8px !important;margin-top:16px !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-oauth{
  background:rgba(255,255,255,.08) !important;border:1.3px solid rgba(255,255,255,.4) !important;color:#fff !important;
  border-radius:999px !important;padding:11px 6px !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;
  font-family:'Inter',sans-serif !important;font-size:11.5px !important;font-weight:600 !important;letter-spacing:.04em !important;
  text-transform:uppercase !important;cursor:pointer !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-oauth svg{ width:15px !important;height:15px !important;color:#fff !important;fill:currentColor !important;stroke:none !important; }
/* NEXT — taupe pill, no arrow */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-next{
  width:100% !important;max-width:none !important;box-sizing:border-box !important;
  margin:18px 0 0 !important;align-self:stretch !important;
  background:linear-gradient(180deg,#a8906f,#7d6a50) !important;color:#fff !important;
  border:0 !important;border-radius:999px !important;padding:16px !important;
  font-family:'Inter',sans-serif !important;font-weight:700 !important;font-size:13.5px !important;letter-spacing:.16em !important;
  box-shadow:0 12px 24px rgba(0,0,0,.4) !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-next svg{ display:none !important; }
/* terms line */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-terms{
  text-align:center !important;color:rgba(255,255,255,.7) !important;font-size:11.5px !important;margin-top:14px !important;
  text-shadow:0 1px 8px rgba(0,0,0,.5) !important;
}
/* error row — readable on the dark photo */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-error{ color:#ffd9c2 !important;text-shadow:0 1px 8px rgba(0,0,0,.6) !important; }
/* back — dark glass rounded square */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-back{
  display:flex !important;visibility:visible !important;align-items:center !important;justify-content:center !important;
  position:absolute !important;top:max(14px,calc(env(safe-area-inset-top) + 4px)) !important;left:14px !important;width:38px !important;height:38px !important;
  background:rgba(20,16,12,.5) !important;border:1px solid rgba(255,255,255,.3) !important;color:#fff !important;border-radius:14px !important;
  -webkit-backdrop-filter:blur(8px) !important;backdrop-filter:blur(8px) !important;z-index:5 !important;
}
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-back svg{ stroke:#fff !important;color:#fff !important; }
/* the birth/account blocks were opaque white cards covering the photo — make
   them transparent so the glass form floats on the couple backdrop */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-birth-block,
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-account-block{
  background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;
  padding:0 !important;margin:0 0 14px !important;
}
/* the per-field rows shouldn't carry any leftover card fill either */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-field,
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 #onbV3Stage .v3-onb-phone-row{
  background:transparent !important;margin-bottom:8px !important;
}
/* kill the white strip below the form: paint every step-3 ancestor dark so any
   gap / iOS rubber-band over-scroll shows the dark backdrop, not the page bg */
html:has(body[data-v3-step="3"].v3-onb-active),
body[data-v3-step="3"].v3-onb-active,
body[data-v3-step="3"].v3-onb-active .app-shell,
body[data-v3-step="3"].v3-onb-active .content-area,
body[data-v3-step="3"].v3-onb-active .view-host{ background:#15110d !important; }

/* ──────────────────────────────────────────────────────────────────────
   STEP 3 — no scrim overlay (intentional). The cool, evenly-toned couple
   photo (Screen2.jpg) reads on its own; the earlier ::after/::before
   gradients added a visible dark "band" top + bottom, so they stay OFF.
   (Built up incrementally; the full form is now shown — nothing hidden.)
   ────────────────────────────────────────────────────────────────────── */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-bg.is-step3::after,
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-bg.is-step3::before{ display:none !important; }
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-bg.is-step3{ filter:none !important; }

/* ████████████████████████████████████████████████████████████████████
   EDGE-BLUR AMBIENT FILL — steps 1 + 3 (2026-06-26)
   The fixed 100dvh photo can leave a strip at the very bottom uncovered
   (iOS toolbar reveal) showing flat dark. #onbV3BlurFill is a full-viewport,
   heavily-blurred + scaled copy of the SAME image sitting BEHIND the sharp
   photo (z:0 vs photo z:1), so any uncovered area shows a soft blurred edge
   of the photo instead of black. Only shown on the full-bleed-photo steps.
   ████████████████████████████████████████████████████████████████████ */
.v3-onb-blurfill{ display:none; }
body[data-v3-step="1"] #view-onb-v3 .v3-onb-blurfill,
body[data-v3-step="3"] #view-onb-v3 .v3-onb-blurfill{
  display:block !important;position:absolute !important;inset:-50px !important;z-index:0 !important;
  background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;
  filter:blur(28px) brightness(1.08) !important;transform:none !important;pointer-events:none !important;
}
body[data-v3-step="1"] #view-onb-v3 .v3-onb-blurfill{ background-image:url('/static/images/v3/Screen2.jpg?v=5') !important; }
body[data-v3-step="3"] #view-onb-v3 .v3-onb-blurfill{ background-image:url('/static/images/v3/Screen2.jpg?v=5') !important; }
/* the SHARP photo sits above the blurred fill */
body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1{ z-index:1 !important; }
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-bg.is-step3{ z-index:1 !important; }

/* ████████████████████████████████████████████████████████████████████
   SIGN-IN (login) — FULL-BLEED GLASS REDESIGN (2026-06-26)
   Replaces the photo-banner + cream-form layout with a full-bleed couple
   photo + glass form overlay (matches the step-3 onboarding aesthetic).
   DESIGN ONLY — eye / remember / forgot / OAuth buttons are visual; the
   email+password submit (#loginForm) keeps its existing JS wiring.
   ████████████████████████████████████████████████████████████████████ */
#view-login.view{ padding:0 !important;background:#15110d !important;overflow-y:auto !important;overflow-x:hidden !important; }
#view-login .v3-login{
  position:relative !important;height:auto !important;min-height:100dvh !important;max-height:none !important;
  background:transparent !important;display:block !important;overflow:visible !important;
}
.v3-login-bg{
  position:absolute !important;inset:0 !important;z-index:0 !important;
  background:url('/static/images/v3/Screen1.jpg?v=5') center top / cover no-repeat !important;
}
.v3-login-bg::after{
  content:"" !important;position:absolute !important;inset:0 !important;
  background:linear-gradient(180deg,rgba(15,12,9,.30) 0%,rgba(15,12,9,.16) 24%,rgba(15,12,9,.46) 60%,rgba(15,12,9,.76) 100%) !important;
}
.v3-login-back{
  position:absolute !important;top:max(16px,env(safe-area-inset-top)) !important;left:16px !important;z-index:4 !important;
  width:38px !important;height:38px !important;border-radius:14px !important;
  background:rgba(20,16,12,.5) !important;border:1px solid rgba(255,255,255,.28) !important;color:#fff !important;
  display:flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;
  -webkit-backdrop-filter:blur(8px) !important;backdrop-filter:blur(8px) !important;
}
.v3-login-back svg{ width:18px !important;height:18px !important;stroke:#fff !important;fill:none !important; }
.v3-login-brand{
  position:absolute !important;top:max(64px,calc(env(safe-area-inset-top) + 50px)) !important;left:22px !important;z-index:4 !important;line-height:1.02 !important;
}
.v3-login-brand .bl-my{ display:block !important;margin-left:6px !important;font-family:'Playfair Display',serif !important;font-style:italic !important;font-weight:500 !important;font-size:18px !important;color:rgba(255,255,255,.9) !important; }
.v3-login-brand .bl-bh{ display:block !important;font-family:'Cal Sans',sans-serif !important;font-weight:400 !important;font-size:30px !important;line-height:1.0 !important;letter-spacing:-.01em !important;color:#fff !important;text-shadow:0 2px 14px rgba(0,0,0,.45) !important; }
/* "ai" = thin Inter Light (the defined system's only light-weight sans), so it
   reads as a refined sub-mark next to the heavy Cal Sans "better half". */
.v3-login-brand .bl-ai{ font-family:'Inter',sans-serif !important;font-weight:300 !important;font-size:17px !important;color:rgba(255,255,255,.82) !important;letter-spacing:.01em !important; }
.v3-login-content{
  position:relative !important;z-index:2 !important;box-sizing:border-box !important;display:block !important;
  padding:33dvh 22px calc(30px + env(safe-area-inset-bottom)) !important;
}
.v3-login-hero{ position:static !important;inset:auto !important;bottom:auto !important;left:auto !important;right:auto !important;padding:0 !important;margin:0 0 12px !important; }
.v3-login-headline{
  font-family:'Cal Sans',sans-serif !important;font-weight:400 !important;color:#fff !important;
  font-size:40px !important;line-height:1.0 !important;letter-spacing:-.02em !important;margin:0 !important;text-shadow:0 2px 18px rgba(0,0,0,.5) !important;
}
.v3-login-headline i{ font-family:'Playfair Display',serif !important;font-style:italic !important;font-weight:500 !important;color:#e8d5be !important; }
.v3-login-sub{ color:rgba(255,255,255,.9) !important;font-size:15.5px !important;margin:6px 0 0 !important;text-shadow:0 1px 10px rgba(0,0,0,.45) !important; }
.v3-login-field{ margin-top:16px !important; }
.v3-login-field label{ display:block !important;color:rgba(255,255,255,.92) !important;font-size:14px !important;font-weight:700 !important;text-transform:none !important;letter-spacing:0 !important;margin-bottom:8px !important;text-shadow:0 1px 8px rgba(0,0,0,.5) !important; }
.v3-login-inrow{
  display:flex !important;align-items:center !important;gap:10px !important;
  background:rgba(22,17,12,.42) !important;border:1.3px solid rgba(255,255,255,.34) !important;border-radius:14px !important;padding:0 14px !important;height:54px !important;
}
.v3-login-inrow .ico{ color:rgba(255,255,255,.7) !important;display:flex !important; }
.v3-login-inrow .ico svg{ width:18px !important;height:18px !important;stroke:currentColor !important;fill:none !important; }
.v3-login-inrow input{ flex:1 !important;background:transparent !important;border:0 !important;outline:none !important;color:#fff !important;font-size:15px !important;font-family:'Inter',sans-serif !important;height:100% !important; }
.v3-login-inrow input::placeholder{ color:rgba(255,255,255,.55) !important; }
.v3-login-eye{ background:none !important;border:0 !important;color:rgba(255,255,255,.62) !important;cursor:pointer !important;display:flex !important;padding:4px !important; }
.v3-login-eye svg{ width:20px !important;height:20px !important;stroke:currentColor !important;fill:none !important; }
.v3-login-meta{ display:flex !important;align-items:center !important;justify-content:space-between !important;margin-top:14px !important; }
.v3-login-remember{ display:flex !important;align-items:center !important;gap:8px !important;color:rgba(255,255,255,.9) !important;font-size:14px !important;cursor:pointer !important; }
.v3-login-remember input{ width:18px !important;height:18px !important;accent-color:#a8906f !important; }
.v3-login-forgot{ color:#fff !important;font-size:14px !important;font-weight:700 !important;text-decoration:none !important; }
.v3-login-cta{
  width:100% !important;margin-top:16px !important;padding:16px !important;border:0 !important;border-radius:999px !important;cursor:pointer !important;
  background:linear-gradient(180deg,#a8906f,#7d6a50) !important;color:#fff !important;
  display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;
  font-family:'Inter',sans-serif !important;font-weight:700 !important;font-size:15px !important;letter-spacing:.02em !important;box-shadow:0 12px 24px rgba(0,0,0,.4) !important;
}
.v3-login-cta svg{ width:18px !important;height:18px !important;stroke:#fff !important;fill:none !important; }
.v3-login-or{ display:flex !important;align-items:center !important;gap:14px !important;margin:18px 0 14px !important;color:rgba(255,255,255,.7) !important;font-size:13px !important;font-weight:600 !important; }
.v3-login-or::before,.v3-login-or::after{ content:"" !important;flex:1 !important;height:1px !important;background:rgba(255,255,255,.25) !important; }
.v3-login-oauth{ display:grid !important;grid-template-columns:1fr 1fr 1fr !important;gap:8px !important; }
.v3-login-oa{
  display:flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;
  background:rgba(255,255,255,.08) !important;border:1.3px solid rgba(255,255,255,.4) !important;color:#fff !important;
  border-radius:999px !important;padding:12px 6px !important;cursor:pointer !important;
  font-family:'Inter',sans-serif !important;font-size:11.5px !important;font-weight:600 !important;letter-spacing:.04em !important;text-transform:uppercase !important;
}
.v3-login-oa svg{ width:16px !important;height:16px !important; }
.v3-login-terms{ text-align:center !important;color:rgba(255,255,255,.72) !important;font-size:12px !important;margin:16px 0 0 !important;text-shadow:0 1px 8px rgba(0,0,0,.5) !important; }
.v3-login-create{ text-align:center !important;color:rgba(255,255,255,.85) !important;font-size:14.5px !important;margin:14px 0 0 !important; }
.v3-login-create a{ color:#fff !important;font-weight:700 !important;text-decoration:none !important; }

/* ████████████████████████████████████████████████████████████████████
   VERIFY (OTP) screen — shown after step-3 signup (2026-06-26)
   Warm-taupe full-screen overlay (#v3Verify), per the "Verify your
   Whatsapp" mock. Channel tabs / resend are visual; entering 0000 in the
   4 cells + VERIFY & NEXT proceeds to chat (not wired to a real OTP yet).
   All glyphs are currentColor — driven by `color`, sized via svg w/h.
   ████████████████████████████████████████████████████████████████████ */
/* while the verify overlay is up, hide the step-3 view beneath so it can
   never bleed through (the overlay is a <body> child, so this is safe). */
body.v3-verify-active #view-onb-v3{ visibility:hidden !important; }
.v3-verify{
  position:fixed !important;inset:0 !important;z-index:140 !important;
  background:linear-gradient(180deg,#9c8f7e 0%,#8d8070 58%,#82755f 100%) !important;
  overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;
  padding:calc(env(safe-area-inset-top) + 18px) 24px calc(env(safe-area-inset-bottom) + 26px) !important;
}
.v3-verify-back{
  position:absolute !important;top:max(16px,env(safe-area-inset-top)) !important;left:18px !important;z-index:2 !important;
  width:44px !important;height:44px !important;border-radius:14px !important;color:#fff !important;cursor:pointer !important;
  background:rgba(42,34,24,.55) !important;border:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;
}
.v3-verify-back svg{ width:20px !important;height:20px !important;stroke:#fff !important;fill:none !important;stroke-width:2 !important; }
.v3-verify-inner{
  width:100% !important;max-width:420px !important;margin:auto 0 !important;padding-top:54px !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;text-align:center !important;
}
.v3-verify-badge{
  width:104px !important;height:104px !important;border-radius:50% !important;color:#7d6a50 !important;
  background:radial-gradient(circle at 50% 42%,#dacfbc,#c8bca5) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  box-shadow:0 10px 30px rgba(60,46,30,.25) !important;margin-bottom:26px !important;
}
.v3-verify-badge svg{ width:46px !important;height:46px !important; }
.v3-verify-title{
  font-family:'Cal Sans',sans-serif !important;font-weight:400 !important;color:#fff !important;
  font-size:33px !important;line-height:1.06 !important;letter-spacing:-.01em !important;margin:0 0 22px !important;
}
.v3-verify-title i{ font-family:'Playfair Display',serif !important;font-style:italic !important;font-weight:500 !important;color:#f3ece0 !important; }
.v3-verify-tabs{
  display:flex !important;width:100% !important;gap:4px !important;margin-bottom:24px !important;
  background:rgba(58,46,32,.30) !important;border-radius:16px !important;padding:5px !important;
}
.v3-verify-tab{
  flex:1 !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:7px !important;cursor:pointer !important;
  background:transparent !important;border:0 !important;color:rgba(255,255,255,.82) !important;border-radius:12px !important;padding:11px 4px !important;
  font-family:'Inter',sans-serif !important;font-size:14px !important;font-weight:600 !important;
}
.v3-verify-tab svg{ width:17px !important;height:17px !important; }
.v3-verify-tab.on, .v3-verify-tab.active{ background:#fff !important;color:#3a2f23 !important;box-shadow:0 3px 8px rgba(40,30,18,.18) !important; }
.v3-fp-tabs{ margin-bottom:18px !important; }
.v3-verify-desc{ color:rgba(255,255,255,.92) !important;font-size:16.5px !important;line-height:1.45 !important;margin:0 0 26px !important; }
.v3-verify-desc b{ font-weight:700 !important;white-space:nowrap !important; }
.v3-verify-otp{ display:flex !important;gap:14px !important;justify-content:center !important;margin-bottom:18px !important; }
.v3-verify-cell{
  width:62px !important;height:74px !important;border-radius:16px !important;
  background:#d6cab6 !important;border:1px solid rgba(255,255,255,.45) !important;
  text-align:center !important;font-family:'Inter',sans-serif !important;font-size:32px !important;font-weight:700 !important;color:#2c2317 !important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4) !important;outline:none !important;-webkit-appearance:none !important;
}
.v3-verify-cell:focus{ border-color:#7d6a50 !important;box-shadow:0 0 0 3px rgba(125,106,80,.32) !important; }
.v3-verify-err{ color:#fff0e8 !important;background:rgba(150,60,40,.55) !important;border-radius:10px !important;padding:8px 12px !important;font-size:13px !important;margin:0 0 12px !important;max-width:100% !important; }
.v3-verify-resend{ color:rgba(255,255,255,.9) !important;font-size:15.5px !important;margin:0 0 26px !important; }
.v3-verify-resend u{ cursor:pointer !important; }
.v3-verify-cta{
  width:100% !important;padding:18px !important;border:0 !important;border-radius:999px !important;cursor:pointer !important;margin-bottom:18px !important;
  background:linear-gradient(180deg,#6f6353,#5d5244) !important;color:#fff !important;
  font-family:'Inter',sans-serif !important;font-weight:700 !important;font-size:15.5px !important;letter-spacing:.06em !important;box-shadow:0 14px 28px rgba(40,30,18,.3) !important;
}
.v3-verify-change{ background:none !important;border:0 !important;color:#3a2f23 !important;cursor:pointer !important;margin-bottom:22px !important;font-family:'Inter',sans-serif !important;font-size:15px !important;font-weight:600 !important; }
.v3-verify-change u{ font-weight:700 !important; }
.v3-verify-foot{ display:flex !important;align-items:center !important;gap:8px !important;color:rgba(255,255,255,.8) !important;font-size:13.5px !important;margin:0 !important; }
.v3-verify-foot svg{ width:15px !important;height:15px !important;stroke:currentColor !important;fill:none !important; }

/* ████████████████████████████████████████████████████████████████████
   FORGOT-PASSWORD flow — 2-screen overlay off the login "Forgot password?"
   link (2026-06-26). Warm taupe that darkens toward the bottom, per the
   mock. Screen 1: email + "Send reset code". Screen 2: 6-digit code +
   "Verify". Design-only (not wired). #v3Forgot is a <body> child + fixed
   so a scrolling ancestor can't confine it. All glyphs are currentColor.
   ████████████████████████████████████████████████████████████████████ */
body.v3-fp-active #view-login{ visibility:hidden !important; }
.v3-fp{
  position:fixed !important;inset:0 !important;z-index:150 !important;
  background:linear-gradient(180deg,#9d9080 0%,#8c7f6d 40%,#5a5044 72%,#3c342b 100%) !important;
  overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;
}
.v3-fp-back{
  position:absolute !important;top:max(16px,env(safe-area-inset-top)) !important;left:18px !important;z-index:3 !important;
  width:44px !important;height:44px !important;border-radius:14px !important;color:#fff !important;cursor:pointer !important;
  background:rgba(42,34,24,.55) !important;border:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;
}
.v3-fp-back svg{ width:20px !important;height:20px !important;stroke:#fff !important;fill:none !important;stroke-width:2 !important; }
.v3-fp-screen{
  min-height:100dvh !important;box-sizing:border-box !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;
  padding:calc(env(safe-area-inset-top) + 84px) 26px calc(env(safe-area-inset-bottom) + 26px) !important;
}
/* the inactive screen must truly hide — display:flex above would otherwise
   beat the [hidden] UA rule and stack both screens on top of each other. */
.v3-fp-screen[hidden]{ display:none !important; }
.v3-fp-inner{ width:100% !important;max-width:420px !important;display:flex !important;flex-direction:column !important;align-items:center !important;text-align:center !important; }
.v3-fp-badge{
  width:104px !important;height:104px !important;border-radius:50% !important;color:#7d6a50 !important;
  background:radial-gradient(circle at 50% 42%,#dacfbc,#c8bca5) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  box-shadow:0 10px 30px rgba(60,46,30,.25) !important;margin-bottom:24px !important;
}
.v3-fp-badge svg{ width:46px !important;height:46px !important; }
.v3-fp-title{
  font-family:'Cal Sans',sans-serif !important;font-weight:400 !important;color:#fff !important;
  font-size:33px !important;line-height:1.06 !important;letter-spacing:-.01em !important;margin:0 0 14px !important;
}
.v3-fp-title i{ font-family:'Playfair Display',serif !important;font-style:italic !important;font-weight:500 !important;color:#f3ece0 !important; }
.v3-fp-sub{ color:rgba(255,255,255,.9) !important;font-size:16.5px !important;line-height:1.45 !important;margin:0 0 30px !important; }
.v3-fp-sub b{ font-weight:700 !important;white-space:nowrap !important; }
.v3-fp-field{ width:100% !important;text-align:left !important; }
.v3-fp-field label{ display:block !important;color:rgba(255,255,255,.92) !important;font-size:14px !important;font-weight:700 !important;margin-bottom:8px !important; }
.v3-fp-inrow{
  display:flex !important;align-items:center !important;gap:10px !important;
  background:rgba(255,255,255,.10) !important;border:1.4px solid rgba(255,255,255,.5) !important;border-radius:14px !important;padding:0 14px !important;height:54px !important;
}
.v3-fp-inrow .ico{ color:rgba(255,255,255,.72) !important;display:flex !important; }
.v3-fp-inrow .ico svg{ width:18px !important;height:18px !important;stroke:currentColor !important;fill:none !important; }
.v3-fp-inrow input{ flex:1 !important;background:transparent !important;border:0 !important;outline:none !important;color:#fff !important;font-size:15px !important;font-family:'Inter',sans-serif !important;height:100% !important; }
.v3-fp-inrow input::placeholder{ color:rgba(255,255,255,.55) !important; }
.v3-fp-otp{ display:flex !important;gap:10px !important;justify-content:center !important;margin-bottom:16px !important; }
.v3-fp-cell{
  width:50px !important;height:64px !important;border-radius:14px !important;
  background:#d6cab6 !important;border:1px solid rgba(255,255,255,.45) !important;
  text-align:center !important;font-family:'Inter',sans-serif !important;font-size:27px !important;font-weight:700 !important;color:#2c2317 !important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4) !important;outline:none !important;-webkit-appearance:none !important;
}
.v3-fp-cell:focus{ border-color:#7d6a50 !important;box-shadow:0 0 0 3px rgba(125,106,80,.32) !important; }
.v3-fp-resend{ color:rgba(255,255,255,.9) !important;font-size:15px !important;margin:0 0 6px !important; }
.v3-fp-resend u{ cursor:pointer !important; }
.v3-fp-err{ color:#fff0e8 !important;background:rgba(150,60,40,.55) !important;border-radius:10px !important;padding:7px 12px !important;font-size:13px !important;margin:0 0 8px !important; }
.v3-fp-cta{
  width:100% !important;margin-top:34px !important;padding:18px !important;border:0 !important;border-radius:999px !important;cursor:pointer !important;
  background:linear-gradient(180deg,#8a7a64,#6f6151) !important;color:#fff !important;
  display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;
  font-family:'Inter',sans-serif !important;font-weight:700 !important;font-size:15.5px !important;letter-spacing:.02em !important;box-shadow:0 14px 28px rgba(40,30,18,.3) !important;
}
.v3-fp-cta svg{ width:18px !important;height:18px !important;stroke:#fff !important;fill:none !important;stroke-width:2 !important; }
.v3-fp-verify{ letter-spacing:.08em !important; }
.v3-fp-foot{
  margin-top:auto !important;padding-top:26px !important;background:none !important;border:0 !important;cursor:pointer !important;
  display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  color:rgba(255,255,255,.92) !important;font-family:'Inter',sans-serif !important;font-size:15px !important;font-weight:600 !important;
}
.v3-fp-foot svg{ width:17px !important;height:17px !important;stroke:currentColor !important;fill:none !important;stroke-width:2 !important; }

/* ── Forgot password: 4-digit code, bigger cells (ref #12) ───────────── */
/* `.v3-fp ` prefix so font-size beats the global `input:not([type])` iOS
   anti-zoom rule (60-v3-responsive-misc.css:1339, specificity 0,1,1). */
.v3-fp-otp{ gap:13px !important; }
.v3-fp .v3-fp-cell{ width:66px !important;height:76px !important;border-radius:18px !important;font-size:46px !important; }
@media (max-width:380px){ .v3-fp .v3-fp-cell{ width:58px !important;height:70px !important;font-size:40px !important; } }

/* ── Forgot password: Set New Password screen (ref #13) ─────────────── */
.v3-fp-reset{ align-items:stretch !important; justify-content:flex-start !important; position:relative !important; padding-top:calc(env(safe-area-inset-top) + 84px) !important; }
.v3-fp-photo{ position:absolute !important; inset:0 !important; z-index:0 !important;
  background:url('/static/images/v3/Screen1.jpg?v=5') center top / cover no-repeat !important; }
.v3-fp-photo::after{ content:"" !important; position:absolute !important; inset:0 !important;
  background:linear-gradient(180deg, rgba(20,15,11,.50) 0%, rgba(20,15,11,.42) 42%, rgba(16,12,9,.70) 100%) !important; }
.v3-fp-reset > *:not(.v3-fp-photo){ position:relative !important; z-index:1 !important; }
.v3-fp-reset-head{ width:100% !important; max-width:440px !important; margin:0 auto !important; text-align:left !important; }
.v3-fp-wordmark{ margin-bottom:16px !important; }
.v3-fp-wordmark .bm-my{ font-size:13px !important; }
.v3-fp-wordmark .bm-line{ font-size:24px !important; }
.v3-fp-reset-title{ text-align:left !important; font-size:34px !important; margin:0 0 8px !important; }
.v3-fp-reset-sub{ text-align:left !important; font-size:15px !important; margin:0 0 22px !important; }
.v3-fp-card{ width:100% !important; max-width:440px !important; margin:0 auto !important;
  background:rgba(30,24,18,.40) !important; -webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important;
  border:1px solid rgba(255,255,255,.22) !important; border-radius:22px !important; padding:20px 18px !important;
  box-shadow:0 16px 40px rgba(0,0,0,.34) !important; }
.v3-fp-card .v3-fp-field{ width:100% !important; }
.v3-fp-field-2{ margin-top:18px !important; }
.v3-fp-eye{ background:none !important; border:0 !important; cursor:pointer !important; padding:4px 2px !important;
  color:rgba(255,255,255,.78) !important; display:flex !important; align-items:center !important; position:relative !important; flex:0 0 auto !important; }
.v3-fp-eye svg{ width:21px !important; height:21px !important; stroke:currentColor !important; fill:none !important; stroke-width:1.8 !important; }
.v3-fp-eye.is-hidden{ opacity:.82 !important; }
.v3-fp-strength{ display:flex !important; gap:6px !important; margin:12px 0 7px !important; }
.v3-fp-strength span{ flex:1 !important; height:5px !important; border-radius:999px !important; background:rgba(255,255,255,.20) !important; transition:background .2s !important; }
.v3-fp-strength[data-score="1"] span:nth-child(-n+1){ background:#d9534f !important; }
.v3-fp-strength[data-score="2"] span:nth-child(-n+2){ background:#e0a458 !important; }
.v3-fp-strength[data-score="3"] span:nth-child(-n+3){ background:#cdb35e !important; }
.v3-fp-strength[data-score="4"] span:nth-child(-n+4){ background:#5fa463 !important; }
.v3-fp-strength-row{ display:flex !important; justify-content:space-between !important; align-items:center !important;
  color:rgba(255,255,255,.82) !important; font-size:13px !important; font-family:'Inter',sans-serif !important; }
.v3-fp-strength-row span:last-child{ font-weight:700 !important; }
.v3-fp-reset-cta{ width:100% !important; max-width:440px !important; margin:auto auto 0 !important; letter-spacing:.06em !important; }

/* ████████████████████████████████████████████████████████████████████
   GOAL FONT SYSTEM (2026-06-27)
   The webapp now uses ONLY four font roles:
     • Header        → Cal Sans          (display, single weight)
     • Header accent → Playfair Display  (bold italic — the italic words)
     • Body          → Inter             (regular)
     • Buttons       → Inter             (bold)
   Fraunces is fully removed. The bulk Fraunces→Cal Sans / →Playfair swap
   lives in the part files (italic rules → Playfair, the rest → Cal Sans).
   This last-loaded block enforces the roles that a name-swap can't reach:
   bare <i>/<em> accents that only INHERIT their header's font, and the
   body/button defaults.
   ████████████████████████████████████████████████████████████████████ */
body, input, textarea, select, .md-body { font-family:'Inter', sans-serif; }
button, .btn, [class*="-cta"], [class*="-btn"], [class*="-next"] { font-family:'Inter', sans-serif !important; }
/* every headline italic accent → Playfair Display, bold italic (incl. the
   bare <i>/<em> words that merely inherit a now-Cal-Sans header) */
.q-title i, .onb-pick-title i, .onb-portrait-title i, .onb-cust-title i,
.onb-cust-loader-title i, .greeting .hi i, .home-hero .txt h2 i,
.chat-head .name i, .profile-head h2 i, .mood-hero h2 i,
.v3-onb-headline i, .v3-login-headline i, .v3-verify-title i, .v3-fp-title i,
.v3-onb-presence h1 i,
[class*="headline"] i, [class*="-title"] i, [class*="-hero"] i,
h1 i, h2 i, h3 i {
  font-family:'Playfair Display', serif !important;
  font-style:italic !important;
  font-weight:700 !important;
}


/* ████████████████████████████████████████████████████████████████████
   KILL WHITE/CREAM FLARE OVERLAYS (2026-06-28)
   The bg on splash/login/step1/step3 must read as the PURE photo. Leftover
   LIGHT overlays caused a white haze behind the logo (.v3-splash-top::before
   white radial) + a cream band at the top (.v3-onb::before "soft top bar")
   + white text-shadow halos. Dark legibility scrims stay; only light dies.
   ████████████████████████████████████████████████████████████████████ */
.v3-splash-top::before{ display:none !important; content:none !important; }
.v3-onb::before{ display:none !important; content:none !important; }
.v3-onb-hero h1{ text-shadow:0 2px 16px rgba(0,0,0,.6) !important; }
.v3-splash-brand h1, .v3-splash-brand .bm-line, .v3-splash-brand .bm-my{ text-shadow:0 2px 14px rgba(0,0,0,.6) !important; }

/* ████████████████████████████████████████████████████████████████████
   FULL-PAGE PHOTO BG for step1 / step3 (2026-06-28)
   The form is taller than the viewport; the old fixed-100dvh photo + the
   absolute blur-fill split left the scrolled-down area dark ("รูปโดนตัด").
   Make the SHARP photo ONE absolute layer covering the FULL scrollable
   content (.v3-onb) so the photo fills the whole page top→bottom. Blur-fill
   off; heavy dark bottom gradient off; only a gentle uniform legibility
   scrim remains.
   ████████████████████████████████████████████████████████████████████ */
body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1,
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-bg.is-step3{
  position:absolute !important; inset:0 !important;
  height:auto !important; min-height:100% !important; max-height:none !important;
  background-position:center top !important; background-size:cover !important; background-repeat:no-repeat !important;
}
body[data-v3-step="1"] #view-onb-v3 .v3-onb-blurfill,
body[data-v3-step="3"] #view-onb-v3 .v3-onb-blurfill{ display:none !important; }
body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1::before,
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-bg.is-step3::before{ display:none !important; }
body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1::after,
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-bg.is-step3::after{
  content:"" !important; position:absolute !important; inset:0 !important; display:block !important;
  background:linear-gradient(180deg, rgba(12,12,14,.30) 0%, rgba(12,12,14,.26) 45%, rgba(12,12,14,.44) 100%) !important;
}
/* Step 3 only: stronger scrim — the birth/account form needs to read over the
   busy photo (step 1 keeps its lighter scrim). */
html body[data-v3-step="3"].v3-onb-active #view-onb-v3#view-onb-v3 .v3-onb-bg.is-step3::after{
  background:linear-gradient(180deg, rgba(12,11,9,.46) 0%, rgba(12,11,9,.42) 36%, rgba(12,11,9,.58) 70%, rgba(12,11,9,.72) 100%) !important;
}

/* ████████████████████████████████████████████████████████████████████
   FIX-FOLDER REDESIGN (2026-06-28) — match ./fix/ mockups page-by-page.
   Shared: photo-backdrop app pages (mood/memory/profile/companions/
   upgrade) paint the companion (or couple) photo behind translucent
   glass cards. --page-photo is set per-view by applyPhotoBg() in app.js.
   ████████████████████████████████████████████████████████████████████ */
/* Inactive views stay in the layout (visibility:hidden, not display:none) for
   the fade transition. But `body:not(.in-app) .view{overflow:visible}` un-clips
   them, so a tall INACTIVE view (e.g. the legacy onboarding customize page)
   overflows and bloats body scrollHeight → the active screen (e.g. Subscription)
   can be scrolled down into empty cream. Clip non-active views so only the
   active one contributes scroll height. */
.view:not(.active){ overflow:hidden !important; }
.view.photo-page{ background:#17110d !important; }
.view.photo-page .page{ padding:0 !important; min-height:100% !important; display:flex !important; flex-direction:column !important; background:transparent !important; }
.view.photo-page .card{ position:relative !important; flex:1 0 auto !important; background:transparent !important; border:0 !important; box-shadow:none !important; overflow:hidden !important; }
.view.photo-page .card::before{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important;
  background-image:var(--page-photo) !important; background-size:cover !important;
  background-position:center 16% !important; background-repeat:no-repeat !important;
}
.view.photo-page .card > *{ position:relative !important; z-index:1 !important; }
.view.photo-page .topbar{ min-height:34px; }
.view.photo-page .topbar .title{ font-size:15px !important; white-space:nowrap !important; }

/* ── MOOD (ref 8) ───────────────────────────────────────────────────── */
#view-mood.photo-page .card{ padding:18px 22px 40px !important; }
#view-mood.photo-page .card::after{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important;
  background:linear-gradient(180deg, rgba(26,20,16,.40) 0%, rgba(26,20,16,.52) 34%, rgba(20,15,12,.86) 100%) !important;
}
#view-mood .topbar{ justify-content:center; }
#view-mood .topbar .title{ color:#fff !important; font-weight:600 !important; }
#view-mood .mood-hero{ text-align:left; margin:10px 0 18px !important; }
#view-mood .mood-hero .k{ color:rgba(255,255,255,.72) !important; }
#view-mood .mood-hero h2{ color:#fff !important; font-size:34px !important; }
#view-mood .mood-hero h2 i{ color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important; }
#view-mood .mood-emoji{ background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.30) !important; box-shadow:none !important; backdrop-filter:blur(4px); }
#view-mood .mood-emoji span{ color:rgba(255,255,255,.85) !important; white-space:nowrap !important; font-size:9px !important; letter-spacing:.03em !important; }
#view-mood .mood-emoji .face{ color:#fff !important; }
#view-mood .mood-emoji::before{ display:none !important; }
#view-mood .mood-emoji.active{ background:rgba(38,28,22,.78) !important; border-color:rgba(255,255,255,.55) !important; box-shadow:0 8px 22px rgba(0,0,0,.34) !important; }
#view-mood .mood-emoji.active::before{ display:none !important; opacity:0 !important; background:none !important; }
#view-mood .mood-emoji.active span, #view-mood .mood-emoji.active .face{ color:#fff !important; }
#view-mood .field label{ color:#fff !important; text-transform:none !important; letter-spacing:0 !important; font:600 15px/1.3 'Inter',sans-serif !important; }
#view-mood .field .muted{ color:rgba(255,255,255,.6) !important; text-transform:none !important; }
#view-mood .mood-slider-row{ display:flex !important; align-items:center !important; gap:14px !important; }
#view-mood .slider-cap{ color:#fff; font:italic 700 18px/1 'Playfair Display',serif; opacity:.92; }
/* Filled track: dark to the left of the thumb (var set by app.js on input),
   light track to the right — matches the template. */
#view-mood .mood-slider-row .slider{ flex:1 !important; background:linear-gradient(to right, #33281f 0%, #33281f var(--mood-fill,70%), rgba(255,255,255,.32) var(--mood-fill,70%), rgba(255,255,255,.32) 100%) !important; }
#view-mood .slider-value{ display:none !important; }
/* Influence chips: light "white" outline by default, dark fill when selected
   (mirrors the template — unselected = airy outline, active = solid dark). */
#view-mood .mood-chip-row .chip{ background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.6) !important; color:#fff !important; text-transform:uppercase; letter-spacing:.07em; font-size:11px; font-weight:600; backdrop-filter:blur(3px); }
#view-mood .mood-chip-row .chip.active{ background:rgba(38,28,22,.85) !important; color:#fff !important; border-color:rgba(255,255,255,.6) !important; }
#view-mood .textarea{ background:rgba(255,255,255,.13) !important; border:1px solid rgba(255,255,255,.32) !important; color:#fff !important; }
#view-mood .textarea::placeholder{ color:rgba(255,255,255,.6) !important; }
#view-mood .mood-cta{ background:rgba(43,35,27,.86) !important; border:1px solid rgba(255,255,255,.14) !important; color:#fff !important; backdrop-filter:blur(6px); box-shadow:0 10px 26px rgba(20,14,9,.34); }
#view-mood .mood-cta .btn-label{ text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:#fff; }
#view-mood .mood-today-note{ color:rgba(255,255,255,.85) !important; }

/* ── MEMORY (ref 9.1) ───────────────────────────────────────────────── */
#view-memory.photo-page .card{ padding:18px 22px 40px !important; }
#view-memory.photo-page .card::after{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important;
  background:linear-gradient(180deg, rgba(26,20,16,.50) 0%, rgba(24,18,14,.62) 40%, rgba(20,15,12,.86) 100%) !important;
}
#view-memory .topbar{ justify-content:center; }
#view-memory .topbar .title{ color:#fff !important; font-weight:600 !important; }
#view-memory .q-kicker{ color:rgba(255,255,255,.72) !important; }
#view-memory .q-title{ color:#fff !important; font-size:32px !important; }
#view-memory .q-title i{ color:#ecd2b8 !important; }
#view-memory .signup-sub{ color:rgba(255,255,255,.82) !important; }
#view-memory .mem-filters .chip{ background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.34) !important; color:#fff !important; }
#view-memory .mem-filters .chip.active{ background:rgba(30,23,18,.82) !important; border-color:rgba(255,255,255,.5) !important; color:#fff !important; }
#view-memory .memory-card{ background:rgba(38,30,24,.46) !important; border:1px solid rgba(255,255,255,.20) !important; box-shadow:0 8px 22px rgba(0,0,0,.30) !important; backdrop-filter:blur(7px); padding:15px 16px !important; }
#view-memory .memory-card.selected{ background:rgba(38,30,24,.62) !important; border-color:rgba(255,255,255,.5) !important; }
#view-memory .memory-card .mem-check{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; border:2px solid rgba(255,255,255,.55); background:transparent; color:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .14s ease; }
#view-memory .memory-card .mem-check svg{ width:18px; height:18px; }
#view-memory .memory-card .mem-check.on{ background:#fff; border-color:#fff; color:var(--espresso); }
#view-memory .memory-card .ic{ background:rgba(58,46,38,.7) !important; }
#view-memory .memory-card .c .k{ color:rgba(255,255,255,.74) !important; text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:600; }
#view-memory .memory-card .c .v{ color:#fff !important; }
#view-memory .memory-card .c .d{ color:rgba(255,255,255,.6) !important; }
#view-memory .btn.light{ background:rgba(26,20,16,.42) !important; border:1.5px solid rgba(255,255,255,.4) !important; color:#fff !important; backdrop-filter:blur(6px); }
#view-memory .btn.light .btn-label{ color:#fff; }
#view-memory .btn.danger{ background:transparent !important; border:1.5px solid rgba(255,255,255,.4) !important; color:#fff !important; }
#view-memory .mem-delete-bar{ background:#f1ead7 !important; border:0 !important; color:var(--espresso) !important; box-shadow:0 8px 22px rgba(0,0,0,.34) !important; }
#view-memory .mem-delete-bar .btn-label{ color:var(--espresso) !important; font-weight:700; }

/* ── PROFILE / YOU (ref 11) ─────────────────────────────────────────── */
#view-profile.photo-page .card{ padding:18px 22px 40px !important; }
#view-profile.photo-page .card::after{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important;
  /* ref 11: flat warm-taupe surface, NO companion photo (opaque covers the hero) */
  background:linear-gradient(180deg, #9a8e7c 0%, #8c8070 52%, #837767 100%) !important;
}
#view-profile .topbar .title{ color:#fff !important; }
#view-profile .topbar .back{ background:rgba(28,22,18,.6) !important; color:#fff !important; border-radius:14px !important; }
#view-profile .topbar .back svg{ color:#fff !important; }
#view-profile .profile-head h2, #view-profile #profileName{ color:#fff !important; }
#view-profile .profile-hero .pic-user{ background:#ece2cd !important; }
#view-profile .profile-hero .pic-user .initial{ color:var(--mocha-deep) !important; }
#view-profile .edit-info-btn{ border-color:rgba(255,255,255,.55) !important; color:#fff !important; background:rgba(28,22,18,.18) !important; }
#view-profile .edit-info-btn svg{ color:#fff !important; }
#view-profile .stat{ background:#ece3d0 !important; border:1px solid rgba(255,255,255,.28) !important; box-shadow:0 8px 20px rgba(30,22,17,.3) !important; }
#view-profile .stat span{ text-transform:none !important; letter-spacing:.01em !important; color:var(--ink-soft) !important; }
#view-profile .stat .stat-face{ width:34px; height:34px; color:var(--espresso); }
#view-profile .tier-banner-cta{ background:#ece3d0 !important; color:var(--espresso) !important; font-weight:700; }
#view-profile .section-kicker{ color:rgba(255,255,255,.72) !important; text-transform:uppercase !important; letter-spacing:.18em !important; font-size:12px !important; font-weight:600 !important; margin-top:24px !important; }
#view-profile .settings-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
#view-profile .settings-card{ background:#ece3d0; border:1px solid rgba(255,255,255,.28); border-radius:18px; padding:16px 8px 14px; display:flex; flex-direction:column; align-items:center; gap:11px; cursor:pointer; box-shadow:0 8px 20px rgba(30,22,17,.26); text-align:center; }
#view-profile .settings-card .sc-ic{ width:46px; height:46px; border-radius:50%; background:var(--mocha-deep); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
#view-profile .settings-card .sc-ic svg{ color:#fff; width:22px; height:22px; }
#view-profile .settings-card span{ font-size:12.5px; font-weight:600; color:var(--espresso); line-height:1.22; }
#view-profile .menu{ background:rgba(236,227,208,.97) !important; border:1px solid rgba(255,255,255,.28) !important; box-shadow:0 8px 20px rgba(30,22,17,.24) !important; }
#view-profile .app-version-foot{ color:rgba(255,255,255,.6) !important; }

/* ── COMPANIONS (ref 13.1) ──────────────────────────────────────────── */
#view-companions.photo-page .card{ padding:18px 22px 40px !important; }
#view-companions.photo-page .card::after{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important;
  background:linear-gradient(180deg, rgba(26,20,16,.42) 0%, rgba(24,18,14,.56) 38%, rgba(20,15,12,.84) 100%) !important;
}
#view-companions .topbar{ justify-content:space-between !important; }
#view-companions .topbar .back{ background:rgba(28,22,18,.6) !important; color:#fff !important; border-radius:14px !important; }
#view-companions .topbar .back svg{ color:#fff !important; }
#view-companions .comp-add-btn{ width:46px; height:46px; border-radius:50%; background:#ece3d0; color:var(--espresso); border:0; font-size:26px; font-weight:400; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.3); }
#view-companions .comp-title{ color:#fff !important; font-size:34px !important; margin-top:4px !important; }
#view-companions .comp-title i{ color:#efe5d3 !important; }
#view-companions .signup-sub{ color:rgba(255,255,255,.82) !important; }
#view-companions .companions-list{ margin-top:16px; }
#view-companions .comp-row{ background:rgba(38,30,24,.46) !important; border:1px solid rgba(255,255,255,.2) !important; backdrop-filter:blur(7px); padding:13px 14px !important; box-shadow:0 8px 22px rgba(0,0,0,.3) !important; }
#view-companions .comp-row.active{ border-color:var(--copper-2) !important; border-width:2px !important; padding:12px 13px !important; background:rgba(46,36,28,.55) !important; }
#view-companions .comp-av{ width:52px !important; height:52px !important; }
#view-companions .comp-name{ color:#fff !important; font-size:20px !important; font-family:'Playfair Display',Georgia,serif !important; font-weight:500 !important; }
#view-companions .comp-live{ font-family:'Inter',sans-serif; font-size:12.5px; font-weight:500; color:rgba(255,255,255,.7); }
#view-companions .comp-sub{ color:rgba(255,255,255,.66) !important; }
#view-companions .comp-del{ color:rgba(255,255,255,.72) !important; background:rgba(255,255,255,.1) !important; width:36px !important; height:36px !important; }
#view-companions .comp-del svg{ width:18px; height:18px; }
#view-companions .comp-del:hover{ background:rgba(255,255,255,.2) !important; }
#view-companions .comp-active-dot{ width:34px !important; height:34px !important; background:var(--mocha-deep) !important; }
#view-companions .comp-count{ text-align:center; color:rgba(255,255,255,.7); margin-top:18px; font-size:13px; letter-spacing:.02em; }

/* ── PLANS / SUBSCRIPTION (ref 12.1 / 12.2 / 12.3) ──────────────────── */
/* SCROLL FIX: never clip the card (overflow:visible) so a tall card can't be
   clamped-to-viewport + clipped by WebKit's flex min-size rule — that boundary
   case is what left the CTA cut off & unscrollable on iOS. Full-bleed, so no
   rounded-corner clip is needed. Safe-area bottom padding clears the home bar.
   Momentum scroll on the view itself as a belt-and-suspenders. */
#view-upgrade.photo-page .card{ padding:12px 22px calc(20px + env(safe-area-inset-bottom)) !important; overflow:visible !important; border-radius:0 !important; }
/* The upgrade view scrolls ITS OWN content (clamped to the viewport), not the
   document. Monthly fits with no scroll; the taller Yearly card scrolls just
   enough to reach the CTA + "Then $X" footer, and the scroll is bounded to the
   content (no empty white past the card). overflow-y:auto must override the
   generic `body:not(.in-app) .view{overflow:visible}` rule, hence !important. */
#view-upgrade.view{ overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#view-upgrade.photo-page .card::before{ background-position:center top !important; }
/* Lighter scrim so the couple photo reads THROUGH the translucent glass card
   (ref 12.1) instead of going to near-black at the bottom. Top stays dark
   enough for the white hero text. */
#view-upgrade.photo-page .card::after{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important;
  background:linear-gradient(180deg, rgba(20,15,11,.46) 0%, rgba(20,15,11,.28) 24%, rgba(20,15,11,.26) 58%, rgba(18,13,10,.44) 100%) !important;
}
#view-upgrade .upgrade-hero{ text-align:center; margin:6px 0 14px !important; }
#view-upgrade .upgrade-eyebrow{ display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.82) !important; text-transform:uppercase; letter-spacing:.2em; font-size:11px; font-weight:600; padding:6px 16px !important; border:1px solid rgba(255,255,255,.42) !important; border-radius:999px !important; background:rgba(20,15,12,.30) !important; -webkit-backdrop-filter:blur(5px) !important; backdrop-filter:blur(5px) !important; }
#view-upgrade .upgrade-eyebrow svg{ width:13px; height:13px; color:#ecd2b8; }
#view-upgrade .upgrade-title{ color:#fff !important; font-size:32px !important; margin:4px 0 5px !important; text-shadow:0 2px 12px rgba(0,0,0,.4) !important; }
#view-upgrade .upgrade-sub{ color:rgba(255,255,255,.86) !important; font-size:13.5px !important; text-shadow:0 1px 6px rgba(0,0,0,.4) !important; }
/* Monthly / Yearly toggle → light track, cream selected pill */
#view-upgrade .billing-cycle{ display:flex !important; width:100% !important; box-sizing:border-box !important; background:rgba(20,15,12,.40) !important; border:1px solid rgba(255,255,255,.30) !important; backdrop-filter:blur(6px); margin:0 auto 14px !important; }
#view-upgrade .billing-cycle .bc-opt{ flex:1 1 0 !important; min-width:0 !important; justify-content:center !important; color:rgba(255,255,255,.85) !important; }
#view-upgrade .billing-cycle .bc-opt.active{ background:#f1ead7 !important; color:var(--espresso) !important; box-shadow:0 3px 10px rgba(0,0,0,.3) !important; }
#view-upgrade .billing-cycle .bc-save{ background:rgba(200,152,120,.92) !important; color:#fff !important; }
#view-upgrade .billing-cycle .bc-opt:not(.active) .bc-save{ background:rgba(200,152,120,.5) !important; color:#fff !important; }
/* Plan card → SEE-THROUGH glass (ref 12.1): you should read the couple photo
   through it. Low cream opacity (.48) + light blur (6px, not cloudy) + crisp
   white hairline so the dark text stays legible without going opaque. */
#view-upgrade .plan-grid{ grid-template-columns:1fr !important; margin-top:4px !important; }
#view-upgrade .plan-card{ background:rgba(245,239,227,.62) !important; border:1px solid rgba(255,255,255,.55) !important; box-shadow:0 16px 40px rgba(0,0,0,.32) !important; -webkit-backdrop-filter:blur(6px) saturate(1.04) !important; backdrop-filter:blur(6px) saturate(1.04) !important; border-radius:24px !important; padding:16px 20px 16px !important; }
#view-upgrade .plan-card.is-featured{ background:rgba(245,239,227,.64) !important; }
/* Badge → small pill tucked top-right inside the card (ref 12.1 "Promo") */
#view-upgrade .plan-badge{ top:14px !important; right:14px !important; left:auto !important; transform:none !important; background:var(--copper-grad, linear-gradient(180deg,#dcb195,#a87555)) !important; color:#fff !important; box-shadow:0 4px 12px rgba(0,0,0,.28) !important; }
#view-upgrade .plan-kicker{ color:var(--ink-mute) !important; }
#view-upgrade .plan-price{ margin-top:6px !important; }
#view-upgrade .plan-price .amt{ color:var(--espresso) !important; font-size:40px !important; }
#view-upgrade .plan-price .int{ color:var(--ink-mute) !important; font-size:15px !important; }
#view-upgrade .plan-price-sub{ display:flex; align-items:center; gap:9px; margin-top:7px; flex-wrap:wrap; }
#view-upgrade .plan-strike{ text-decoration:line-through; color:var(--ink-mute); font-size:14px; }
#view-upgrade .plan-save{ background:rgba(160,120,92,.20); color:var(--rose); font-weight:700; font-size:11px; letter-spacing:.04em; padding:3px 9px; border-radius:999px; }
#view-upgrade .plan-permonth{ background:rgba(60,48,38,.12); color:var(--ink-soft); font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; }
#view-upgrade .plan-features{ gap:9px !important; margin-top:12px !important; }
#view-upgrade .plan-features li{ color:var(--espresso) !important; font-size:13.5px !important; align-items:center !important; gap:11px !important; }
#view-upgrade .plan-tick-wrap{ flex:0 0 auto; width:21px; height:21px; border-radius:50%; background:#5fa463; display:flex; align-items:center; justify-content:center; }
#view-upgrade .plan-tick{ width:12px !important; height:12px !important; color:#fff !important; margin:0 !important; }
#view-upgrade .plan-action{ margin-top:16px; }
#view-upgrade .plan-cta{ background:linear-gradient(180deg,#a98a6b,#8a6a4c) !important; color:#fff !important; border-radius:999px !important; height:52px; font-weight:700 !important; letter-spacing:.08em; text-transform:uppercase; font-size:14px !important; box-shadow:0 10px 24px rgba(0,0,0,.34) !important; }
#view-upgrade .plan-cta.is-current{ background:rgba(60,48,38,.4) !important; color:#fff !important; }
#view-upgrade .plan-then{ text-align:center; color:var(--espresso); font-size:12.5px; margin-top:10px; text-shadow:0 1px 5px rgba(0,0,0,.18); }
#view-upgrade .upgrade-compare-head{ display:none !important; }
/* Member / active-subscription panel (ref 12.3) */
#view-upgrade .current-plan-panel{ background:rgba(40,31,25,.5) !important; border:1px solid rgba(255,255,255,.22) !important; backdrop-filter:blur(8px); box-shadow:0 14px 36px rgba(0,0,0,.4) !important; }
#view-upgrade .current-plan-left .q-kicker{ color:rgba(255,255,255,.7) !important; }
#view-upgrade .current-plan-name{ color:#fff !important; }
#view-upgrade .current-plan-tagline{ color:rgba(255,255,255,.78) !important; }
#view-upgrade .current-plan-price{ color:#ecd2b8 !important; }
#view-upgrade .current-plan-price span{ color:rgba(255,255,255,.7) !important; }
#view-upgrade .current-plan-renew{ color:rgba(255,255,255,.7) !important; }
#view-upgrade .current-plan-features li{ color:rgba(255,255,255,.9) !important; }
#view-upgrade .current-plan-actions{ border-top-color:rgba(255,255,255,.18) !important; }
#view-upgrade .current-plan-actions .btn.light{ background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.4) !important; color:#fff !important; }
#view-upgrade .trial-ended-notice{ color:#fff; }
#view-upgrade .trial-ended-title{ color:#fff !important; }
#view-upgrade .trial-ended-sub{ color:rgba(255,255,255,.82) !important; }
#view-upgrade .topbar .back{ background:rgba(28,22,18,.55) !important; color:#fff !important; }
#view-upgrade .topbar .back svg{ color:#fff !important; }

/* ── HOME (ref 7) ───────────────────────────────────────────────────── */
#view-home .home-topbar{ display:flex; margin-bottom:12px; }
#view-home .home-topbar .back{ width:44px; height:44px; border-radius:14px; background:var(--espresso); color:#fff; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
#view-home .home-topbar .back svg{ width:22px; height:22px; color:#fff; }
#view-home .greeting{ display:block !important; }
#view-home .greeting .hi{ font-size:30px !important; }
#view-home .home-hero .txt .k{ display:inline-flex; align-items:center; gap:7px; text-transform:none !important; letter-spacing:.01em !important; font-size:13px !important; font-weight:500; color:rgba(255,255,255,.9) !important; }
#view-home .home-hero .txt .k svg{ width:15px; height:15px; color:rgba(255,255,255,.9); }
#view-home .home-hero .txt h2{ font-size:22px !important; }
#view-home .row-hdr{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
#view-home .row-hdr h3{ text-transform:uppercase !important; letter-spacing:.16em !important; font-size:12px !important; font-weight:600 !important; color:rgba(244,239,226,.85) !important; }
#view-home .row-hdr a{ display:inline-flex; align-items:center; gap:5px; text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:600; color:rgba(244,239,226,.92) !important; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:7px 14px; }
#view-home .row-hdr a svg{ width:13px; height:13px; }
#view-home .quick h4{ line-height:1.18; }

/* ── REFINE COMPANION (ref 13.2) ────────────────────────────────────── */
#view-refine .refine-head{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:0 !important; margin-bottom:16px !important; }
#view-refine .refine-head .back, #view-refine #appRefineBack{ position:static !important; top:auto !important; left:auto !important; background:var(--espresso) !important; color:#fff !important; border:0 !important; border-radius:14px !important; width:44px !important; height:44px !important; margin-bottom:14px; box-shadow:none !important; }
#view-refine .refine-head .back svg{ color:#fff !important; }
#view-refine .onb-portrait-head-text{ text-align:left !important; }
#view-refine .onb-portrait-title{ font-size:34px !important; text-align:left; }
#view-refine .onb-portrait-sub{ margin:8px 0 0 !important; text-align:left !important; max-width:none !important; }
#view-refine .onb-portrait-sub i{ font-family:'Playfair Display',serif; font-style:italic; color:var(--ink-soft); }
#view-refine .refine-label{ font-weight:700; color:var(--ink); font-size:15px; margin-bottom:4px; }
#view-refine .refine-input-row{ position:relative; }
#view-refine .refine-input-row .refine-input{ width:100% !important; padding-right:58px !important; min-height:64px !important; }
#view-refine .refine-mic{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:var(--mocha-deep); color:#fff; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
#view-refine .refine-mic svg{ color:#fff; width:20px; height:20px; }
#view-refine .refine-chips{ gap:9px !important; }
#view-refine .refine-generate{ background:linear-gradient(180deg,#a98a6b,#8a6a4c) !important; color:#fff !important; height:54px; box-shadow:0 8px 20px rgba(80,60,42,.28) !important; }
#view-refine .refine-generate .btn-label{ text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:#fff; }
#view-refine .refine-foot{ display:flex; align-items:center; justify-content:center; gap:7px; color:var(--ink-mute); font-size:12.5px; margin-top:6px; }
#view-refine .refine-foot svg{ width:14px; height:14px; }
#view-refine .refine-done-row{ display:flex !important; gap:12px; margin-top:8px; border-top:1px solid rgba(60,40,30,.08); padding-top:14px; }
#view-refine .refine-done-row .btn{ flex:1; }

/* ████████████████████████████████████████████████████████████████████████
   FUTURE SELF / DREAM LIFE (2026-06) — landing + transmission chat
   Ref: dreamlife/*.jpg. Pick a dream-life scenario, then talk to your
   future self ten years from tonight ("TRANSMISSION · <year>").
   ████████████████████████████████████████████████████████████████████████ */

/* ── Landing: "Which life do you want to live?" ─────────────────────────── */
#view-dream-life.view{
  padding:0 !important;
  /* Warm LIGHT taupe (ref #36) — was a dark espresso gradient. */
  background:linear-gradient(168deg,#b0a596 0%,#8a8073 50%,#645b51 100%) !important;
}
#view-dream-life .fs-land{
  position:absolute; inset:0; box-sizing:border-box;
  padding-bottom:var(--tabbar-h);
  display:flex; flex-direction:column; overflow:hidden;
}
#view-dream-life .fs-land-head{ padding:14px 16px 0; flex:0 0 auto; }
#view-dream-life .fs-back{
  width:42px; height:42px; border-radius:50%;
  background:rgba(20,15,11,.40); border:1px solid rgba(255,255,255,.18);
  color:#f5f0ea; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#view-dream-life .fs-back svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none; }
#view-dream-life .fs-land-scroll{
  flex:1; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 22px 30px;
}
#view-dream-life .fs-eyebrow{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(245,240,234,.72); font-weight:600; margin:8px 0 10px;
}
#view-dream-life .fs-land-hero h1{
  font-family:'Cal Sans','Inter',sans-serif; font-weight:400;
  font-size:38px; line-height:1.04; color:#fff; margin:0 0 16px;
}
#view-dream-life .fs-land-hero h1 i{
  font-family:'Playfair Display',Georgia,serif; font-style:italic; color:#ecd7c1;
}
#view-dream-life .fs-lead{
  color:rgba(245,240,234,.82); font-size:15px; line-height:1.5; margin:0 0 12px; max-width:42ch;
}
#view-dream-life .fs-cards{ display:flex; flex-direction:column; gap:16px; margin-top:18px; }
#view-dream-life .fs-card{
  display:flex; flex-direction:row-reverse; align-items:stretch;
  min-height:150px; border-radius:20px; overflow:hidden; padding:0;
  /* Light frosted panel ~same tone as the new light bg (ref #36). */
  background:rgba(248,244,237,.12); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.20); cursor:pointer; text-align:left;
  transition:transform .18s ease, box-shadow .18s ease;
}
#view-dream-life .fs-card:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.34); }
#view-dream-life .fs-card.rev{ flex-direction:row; }
#view-dream-life .fs-card-photo{ flex:0 0 42%; display:block; background-size:cover; background-position:center; }
#view-dream-life .fs-card-body{ flex:1; display:flex; flex-direction:column; padding:18px; }
#view-dream-life .fs-card-title{
  font-family:'Playfair Display',Georgia,serif; font-style:normal; font-weight:600;
  font-size:23px; line-height:1.12; color:#fff; margin-bottom:8px;
}
#view-dream-life .fs-card-sub{ font-size:13px; line-height:1.45; color:rgba(245,240,234,.80); }
#view-dream-life .fs-card-go{
  margin-top:auto; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
}
#view-dream-life .fs-card-go svg{ width:16px; height:16px; color:#3a2f26; stroke:currentColor; stroke-width:2; fill:none; }
#view-dream-life .fs-land-foot{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:18px; color:rgba(245,240,234,.6); font-size:12.5px;
}
#view-dream-life .fs-land-foot svg{ width:13px; height:13px; stroke:currentColor; stroke-width:1.6; fill:none; }
#view-dream-life .fs-land-foot b{ color:rgba(245,240,234,.85); font-weight:600; }
.fs-cards-loading{ color:rgba(245,240,234,.7); padding:30px 6px; text-align:center; font-size:14px; background:transparent; border:0; width:100%; cursor:pointer; }
/* "View All Experiences" — outlined glass pill that reveals the rest of the
   scenarios (replaces the 3rd featured card on the landing). */
#view-dream-life .fs-viewall{
  width:100%; padding:18px 22px; border-radius:18px;
  background:rgba(28,22,17,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.34);
  color:#f5f0ea; font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
  letter-spacing:.01em; text-align:center; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
#view-dream-life .fs-viewall:hover{ background:rgba(28,22,17,.42); border-color:rgba(255,255,255,.5); transform:translateY(-1px); }

/* ── Transmission chat: talk to your future self ────────────────────────── */
#view-future-chat.view{ padding:0 !important; background:#191310 !important; }
#view-future-chat .fs-chat{
  position:absolute; inset:0; box-sizing:border-box;
  padding-bottom:var(--tabbar-h);
  display:flex; flex-direction:column; overflow:hidden;
}
#view-future-chat .fs-chat-hero{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center top; background-repeat:no-repeat;
}
#view-future-chat .fs-chat-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(20,15,11,.38) 0%, rgba(20,15,11,.16) 26%,
    rgba(20,15,11,.50) 66%, rgba(20,15,11,.90) 100%);
}
#view-future-chat .fs-chat-head{
  position:relative; z-index:2; flex:0 0 auto;
  display:flex; align-items:center; gap:10px; padding:16px 14px 10px;
}
#view-future-chat .fs-chat-back,
#view-future-chat .fs-chat-iconbtn{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  background:rgba(20,15,11,.42); border:1px solid rgba(255,255,255,.18);
  color:#f5f0ea; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#view-future-chat .fs-chat-back svg,
#view-future-chat .fs-chat-iconbtn svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none; }
#view-future-chat .fs-chat-id{ flex:1; text-align:center; min-width:0; }
#view-future-chat .fs-chat-name{
  display:inline-flex; align-items:center; gap:8px;
  font-size:17px; font-weight:600; color:#fff;
}
#view-future-chat .fs-chat-name .dot{ width:8px; height:8px; border-radius:50%; background:#4ad07d; flex:0 0 auto; }
#view-future-chat .fs-chat-sub{
  display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#e7b366; margin-top:3px;
}
#view-future-chat .fs-chat-stage{ position:relative; z-index:2; flex:1; min-height:0; display:flex; }
#view-future-chat .fs-chat-body{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 18px 8px;
}
#view-future-chat .fs-chat-body::-webkit-scrollbar{ width:5px; }
#view-future-chat .fs-chat-body::-webkit-scrollbar-thumb{ background:rgba(231,179,102,.35); border-radius:3px; }
.fs-chat-loading{ color:rgba(245,240,234,.72); padding:36px 6px; text-align:center; font-size:14px; }

#view-future-chat .fs-row{ display:flex; gap:12px; margin-bottom:22px; }
#view-future-chat .fs-row.ai{ justify-content:flex-start; }
#view-future-chat .fs-row.you{ justify-content:flex-end; }
#view-future-chat .fs-dot{
  flex:0 0 auto; width:11px; height:11px; border-radius:50%; margin-top:30px;
  background:#e7b366; box-shadow:0 0 0 4px rgba(231,179,102,.16);
}
/* The typing row has no .fs-label above the bubble, so the 30px dot offset
   (calibrated for labelled rows) floats it too low — pull it up to align. */
#view-future-chat .fs-row.fs-typing .fs-dot{ margin-top:8px; }
#view-future-chat .fs-msg{ max-width:82%; }
#view-future-chat .fs-row.you .fs-msg{ text-align:right; }
#view-future-chat .fs-label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:#e7b366; margin-bottom:7px;
}
#view-future-chat .fs-row.you .fs-label{ color:rgba(255,255,255,.82); }
/* AI (future-self) label is now an italic serif "I" instead of "TRANSMISSION · <year>". */
#view-future-chat .fs-row.ai .fs-label{
  font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:600;
  font-size:18px; letter-spacing:0; text-transform:none;
}
#view-future-chat .fs-bubble{
  background:rgba(26,20,15,.56); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  padding:14px 17px; color:#f6f1ea; font-size:15.5px; line-height:1.52;
}
#view-future-chat .fs-bubble.you{
  display:inline-block; text-align:left; font-style:italic;
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.20); color:#fff;
}
#view-future-chat .fs-typing-dots{ display:inline-flex; gap:5px; align-items:center; }
#view-future-chat .fs-typing-dots i{
  width:7px; height:7px; border-radius:50%; background:rgba(246,241,234,.7);
  animation:fsdot 1s infinite ease-in-out;
}
#view-future-chat .fs-typing-dots i:nth-child(2){ animation-delay:.15s; }
#view-future-chat .fs-typing-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes fsdot{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

#view-future-chat .fs-chat-input{
  position:relative; z-index:2; flex:0 0 auto;
  display:flex; align-items:center; gap:10px; padding:10px 14px 14px;
}
#view-future-chat .fs-chat-input .pill{
  flex:1; display:flex; align-items:center; gap:8px;
  background:rgba(20,15,11,.48); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:12px 16px;
}
#view-future-chat .fs-chat-input .pill input{
  flex:1; background:transparent; border:0; outline:0; color:#f6f1ea; font-size:15px;
}
#view-future-chat .fs-chat-input .pill input::placeholder{ color:rgba(246,241,234,.55); }
#view-future-chat .fs-chat-wave{ color:rgba(246,241,234,.6); display:flex; }
#view-future-chat .fs-chat-wave svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none; }
#view-future-chat .fs-chat-send{
  flex:0 0 auto; width:48px; height:48px; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,.94); border:0; display:flex; align-items:center; justify-content:center;
}
#view-future-chat .fs-chat-send svg{ width:22px; height:22px; color:#3a2f26; stroke:currentColor; stroke-width:1.8; fill:none; }

/* ════════════════════════════════════════════════════════════════
   ████  CHAT — full glass redesign (ref "5. Chat", 2026-06-28)  ████
   Glass bubbles + glass input + squircle send + per-message avatar.
   Markup already drops the Dream Life pill, SOS, and the bottom mic.
   ════════════════════════════════════════════════════════════════ */

/* Header call button → soft light circle with a dark glyph (ref). */
#view-chat .v3-chat-iconbtn{
  background:rgba(250,247,240,.86) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#3a322a !important; border:1px solid rgba(255,255,255,.5) !important;
  width:42px;height:42px;
  box-shadow:0 4px 12px rgba(30,22,14,.22) !important;
}
#view-chat .v3-chat-iconbtn svg{color:#3a322a !important}

/* AI bubble — CLEAREST glass: near-clear tint, ZERO blur so the portrait reads
   fully crisp through it. backdrop-filter:none (not 0px) is required to beat the
   un-!important blur(14px) rules above. At blur 0 the white hairline is the only
   thing separating the card from the sharp busy portrait, so it's firm; the
   text-shadow keeps white text legible over the bright sweater (judge-panel
   synthesis r2, 2026-06-29). */
#view-chat .v3-chat-body .msg.her{
  background:rgba(20,17,14,.35) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.5) !important;
  box-shadow:0 8px 22px rgba(20,14,8,.30) !important;
}
#view-chat .v3-chat-body .msg.her .md-body,
#view-chat .v3-chat-body .msg.her .quote{color:#fff !important;text-shadow:0 1px 3px rgba(0,0,0,.48) !important}

/* User bubble — CLEAREST light glass, dark text (near-clear tint, ZERO blur so
   the portrait shows through crisp; firm white edge holds the card at blur 0). */
#view-chat .v3-chat-body .msg.me{
  background:rgba(245,240,232,.10) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.42) !important;
  color:var(--espresso) !important;
  box-shadow:0 6px 18px rgba(20,14,8,.16) !important;
}

/* Per-message companion avatar — small circle left of each AI bubble (ref).
   Painted from --comp-av (set on #chatBody by views.renderChat) so the
   streaming append path needs no changes. */
#view-chat .v3-chat-body .msg.her{position:relative;margin-left:40px !important}
#view-chat .v3-chat-body .msg.her::before{
  content:"";position:absolute;left:-40px;bottom:0;
  width:30px;height:30px;border-radius:50%;
  background:var(--comp-av) center/cover no-repeat, #b9ac95;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
/* Grouped multi-bubble (legacy/rare): one avatar for the whole turn (the
   feedback <div> is the last child so :last-of-type by class can't be used). */
#view-chat .v3-chat-body .chat-bubble-group{margin-left:40px !important;position:relative}
/* The streaming bubble lives inside .chat-bubble-group (which already carries
   the 40px avatar gutter); without !important the per-bubble margin-left:40px
   above wins and the streaming bubble gets DOUBLE-indented (80px), then snaps
   back to 40px when renderChat repaints it as a standalone bubble — a visible
   left/right "bounce". !important keeps it at 0 so the position never moves. */
#view-chat .v3-chat-body .chat-bubble-group .msg.her{margin-left:0 !important}
#view-chat .v3-chat-body .chat-bubble-group .msg.her::before{display:none}
#view-chat .v3-chat-body .chat-bubble-group::before{
  content:"";position:absolute;left:-40px;bottom:0;
  width:30px;height:30px;border-radius:50%;
  background:var(--comp-av) center/cover no-repeat, #b9ac95;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
/* Empty-state opener is centered — no avatar gutter. */
#view-chat .v3-chat-body.empty .msg.her{margin-left:0}
#view-chat .v3-chat-body.empty .msg.her::before{display:none}
/* Keep the "her" timestamp clear of the avatar gutter. */
#view-chat .v3-chat-body .msg-time.her{margin-left:48px}

/* Input bar = CLEAREST glass pill, white text, squircle send (ref). Near-clear
   tint, ZERO blur so the portrait shows through the bar crisp; firm white edge
   holds the pill. The placeholder/text get a soft shadow to stay legible. */
#view-chat .v3-chat-input .pill{
  background:rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.42) !important;
  box-shadow:0 6px 18px rgba(20,14,8,.20) !important;
}
#view-chat .v3-chat-input input{color:#fff !important;text-shadow:0 1px 3px rgba(0,0,0,.48) !important}
#view-chat .v3-chat-input input::placeholder{color:rgba(255,255,255,.85) !important}
#view-chat .v3-chat-wave{color:rgba(255,255,255,.92) !important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
/* Send = light frosted squircle with a dark paper-plane. */
#view-chat .v3-chat-input-send{
  width:46px;height:46px;border-radius:15px;
  background:rgba(250,247,240,.9) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.6) !important;
  color:#3a322a !important;
  box-shadow:0 6px 16px rgba(20,14,8,.22) !important;
}
#view-chat .v3-chat-input-send svg{color:#3a322a !important;width:20px;height:20px}

/* ── On-screen keyboard fix (iOS): when the input is focused the chat shell is
      JS-shrunk to visualViewport.height (so the input row rises ABOVE the
      keyboard instead of behind it). The 50dvh hero would then overflow the
      shrunken shell and shove the input off-screen, so collapse it while the
      keyboard is open — maximizing the message area + keeping the input
      reachable. Toggled by the `.kb-open` class in app.js on focus/blur. */
#view-chat .v3-chat.kb-open .v3-chat-hero{ height:0 !important; min-height:0 !important; flex:0 0 0 !important; overflow:hidden !important; }

/* ── HOME redesign (2026-06-29): centered serif greeting, clean full
      companion photo, and Today's whisper moved OUT of the photo into a
      taupe band BELOW it. Matches the #25 reference. Appended last so it
      wins the cascade over the earlier #view-home blocks. ──────────────── */
#view-home .home-inner{ position:relative !important; }
#view-home .home-topbar{ position:absolute !important; top:14px; left:14px; margin:0 !important; z-index:6; }

/* Greeting: centered, Playfair serif. "Afternoon," dark, the name cream. */
#view-home .greeting{ display:block !important; text-align:center !important; padding:6px 50px 2px !important; }
#view-home .greeting > div{ display:block !important; }
#view-home .greeting .hi{
  font-family:'Playfair Display',serif !important;
  font-weight:500 !important; font-size:27px !important; line-height:1.14 !important;
  color:#2d2720 !important; text-shadow:none !important;
}
#view-home .greeting .hi i{
  font-family:'Playfair Display',serif !important;
  font-style:italic !important; font-weight:600 !important; color:#f6efe0 !important;
}
#view-home .greeting .sub{
  text-align:center !important; color:rgba(255,255,255,.94) !important;
  margin-top:6px !important; text-shadow:0 1px 6px rgba(40,30,20,.25);
}

/* Card = vertical stack: clean companion photo on top, whisper band below. */
#view-home .home-hero{
  display:flex !important; flex-direction:column !important; min-height:0 !important;
  border-radius:22px !important; overflow:hidden !important;
  background:#a89b86 !important; box-shadow:0 16px 36px rgba(50,38,24,.28) !important;
}
#view-home .home-hero .portrait-bg{
  position:relative !important; inset:auto !important;
  width:100% !important; height:auto !important; aspect-ratio:1/1 !important;
}
#view-home .home-hero .portrait-bg img,
#view-home .home-hero .portrait-bg svg{
  width:100% !important; height:100% !important; object-fit:cover; object-position:center 20%;
}
#view-home .home-hero .ov{ display:none !important; }
#view-home .home-hero .txt{
  position:relative !important; left:auto; right:auto; bottom:auto;
  background:rgba(42,35,26,.44) !important; padding:16px 20px 20px !important; gap:5px;
}
#view-home .home-hero .txt .k{ color:rgba(255,255,255,.92) !important; }
#view-home .home-hero .txt .k svg{ color:rgba(255,255,255,.92) !important; }
/* Whisper quote: WHITE, upright serif (NOT bold-italic), per the #28 ref. */
#view-home .home-hero .txt h2{
  color:#ffffff !important; font-size:21px !important;
  font-style:normal !important; font-weight:400 !important;
}
#view-home .home-hero .txt h2 i{ color:#ffffff !important; font-style:normal !important; }
/* Attribution: lighter white, italic. */
#view-home .home-hero .txt p{ color:rgba(255,255,255,.8) !important; font-style:italic !important; }

/* ── HOME · Quick Things + mood card + week chart (2026-06-29, ref #29):
      first quick card stays light cream; the other three + the mood card
      become darker translucent taupe with light text; week bars go dark
      taupe (not copper); day labels + chart text light. ────────────────── */
#view-home .quick.b2, #view-home .quick.b3, #view-home .quick.b4{
  background:rgba(44,37,28,.30) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 8px 20px rgba(40,30,20,.18) !important;
}
#view-home .quick.b2 h4, #view-home .quick.b3 h4, #view-home .quick.b4 h4{ color:#f3eee2 !important; }
#view-home .quick.b2 p,  #view-home .quick.b3 p,  #view-home .quick.b4 p{ color:rgba(243,238,226,.78) !important; }
#view-home .quick.b2 .ico svg, #view-home .quick.b3 .ico svg, #view-home .quick.b4 .ico svg{ color:rgba(243,238,226,.92) !important; }

/* Mood / "This Week" card → darker translucent taupe, light text. */
#view-home .mood-card{
  background:rgba(44,37,28,.30) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
#view-home .mood-card .mh span{ color:rgba(243,238,226,.85) !important; text-transform:capitalize !important; }
#view-home .mood-card .mh b{ color:#f3eee2 !important; }
#view-home .mood-chart-labels{ color:rgba(243,238,226,.72) !important; }

/* Week bars → solid dark taupe (template); empty days a faint light line. */
#view-home .mood-chart .bar,
#view-home .mood-chart .bar.today{
  background:linear-gradient(180deg,#6b6051,#4a4135) !important;
  box-shadow:0 4px 10px rgba(35,27,17,.22) !important;
}
#view-home .mood-chart .bar.empty{
  background:rgba(255,255,255,.26) !important; border:0 !important; box-shadow:none !important;
}

/* Quick-card icons: horizontally centered + larger, per the #32 ref. */
#view-home .quick .ico{
  width:100% !important; height:auto !important;
  justify-content:center !important;
  margin:4px 0 12px !important;
}
#view-home .quick .ico .i,
#view-home .quick .ico svg{ width:32px !important; height:32px !important; }