/* ============================================================
   VH MOBILE APP STYLES
   ============================================================ */

/* reset */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { height:100%; }
body {
  min-height:100%;
  background: #080818;
  font-family: var(--fb);
  color: var(--ivory);
  overflow: hidden;
}

/* ---- AMBIENT ---- */
#amb { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#amb-1 {
  position:absolute; width:500px; height:500px; left:-160px; top:-140px;
  border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,122,47,.14), transparent 70%);
  animation: ambDrift1 16s ease-in-out infinite alternate;
}
#amb-2 {
  position:absolute; width:480px; height:480px; right:-180px; bottom:-100px;
  border-radius:50%;
  background: radial-gradient(closest-side, rgba(108,92,231,.11), transparent 70%);
  animation: ambDrift2 20s ease-in-out infinite alternate;
}
@keyframes ambDrift1 { to { transform: translate(50px,40px) scale(1.15); } }
@keyframes ambDrift2 { to { transform: translate(-50px,-50px) scale(1.06); } }

#grain {
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.042;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* botanical */
#bot { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition: opacity .8s ease; }
#bot.show { opacity:1; }
#bot svg { position:absolute; inset:0; width:100%; height:100%; animation: botDrift 22s ease-in-out infinite alternate; }
@keyframes botDrift { from { transform: translateY(0) scale(1); } to { transform: translateY(-28px) scale(1.04); } }
.bl1 { animation: botPulse 9s ease-in-out infinite; }
.bl2 { animation: botPulse 9s ease-in-out 4.5s infinite; }
.blotus { animation: lotusBloom 8s ease-in-out infinite; }
@keyframes botPulse { 0%,100%{opacity:.04} 50%{opacity:.13} }
@keyframes lotusBloom { 0%,100%{opacity:.03;transform:scale(.85)} 50%{opacity:.15;transform:scale(1)} }

/* ---- APP WRAPPER ---- */
#app { position:fixed; inset:0; z-index:2; }

/* ---- SCREENS ---- */
.scr { position:absolute; inset:0; display:none; flex-direction:column; }
.scr.on { display:flex; }

/* entrance animation */
.scr.on .rise {
  opacity:0; transform:translateY(18px);
  animation: riseIn .48s cubic-bezier(.2,.85,.25,1) forwards;
}
.scr.on .rise:nth-child(1) { animation-delay:.04s; }
.scr.on .rise:nth-child(2) { animation-delay:.09s; }
.scr.on .rise:nth-child(3) { animation-delay:.14s; }
.scr.on .rise:nth-child(4) { animation-delay:.19s; }
.scr.on .rise:nth-child(5) { animation-delay:.24s; }
@keyframes riseIn { to { opacity:1; transform:translateY(0); } }
.pop { animation: popIn .5s cubic-bezier(.2,.9,.3,1.4) .3s both; }
@keyframes popIn { 0%{transform:scale(0)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }

.scroll { flex:1; overflow-y:auto; scrollbar-width:none; }
.scroll::-webkit-scrollbar { display:none; }

/* ---- GLASS HEADER ---- */
.hdr {
  display:flex; align-items:center; gap:9px;
  padding: calc(var(--sat) + 8px) 16px 12px;
  background: rgba(8,8,24,.78);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hair);
  flex:none; position:sticky; top:0; z-index:6; min-height:56px;
}
.hdr-logo { width:26px; height:26px; flex:none; }
.hdr-title { font-family:var(--fd); font-weight:700; font-size:16px; letter-spacing:-.01em; }
.hdr-title b { background:var(--dawn); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp { flex:1; }
.icon-btn {
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center; cursor:pointer;
  background:rgba(22,22,50,.7); backdrop-filter:blur(12px); border:1px solid var(--hair2);
  font-size:15px; color:var(--stone); transition:transform .15s; flex:none;
}
.icon-btn:active { transform:scale(.88); }

/* ---- LANGUAGE PILL ---- */
#lang-pill {
  display:flex; background:rgba(12,12,30,.82); backdrop-filter:blur(14px);
  border:1px solid var(--hair2); border-radius:999px; padding:3px; gap:1px; flex:none;
}
.lang-btn {
  padding:4px 9px; border-radius:999px; font-size:10.5px; font-weight:700;
  color:var(--stone); cursor:pointer; transition:all .18s; letter-spacing:.04em; user-select:none;
}
.lang-btn.on { background:var(--dawn); color:#0A0A1E; }

/* ---- GLASS BUTTON ---- */
@property --ga { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.gbtn {
  position:relative; overflow:hidden; border:none; cursor:pointer;
  font-family:var(--fd); font-weight:700; border-radius:999px;
  padding:0; transition:transform .15s; display:block; width:100%; outline:none;
}
.gbtn::before {
  content:""; position:absolute; inset:-2px; border-radius:999px; z-index:0;
  background: conic-gradient(from var(--ga), #FF7A2F, #FFC24B, #6C5CE7, #FF7A2F);
  animation: btnSpin 5s linear infinite;
}
@keyframes btnSpin { to { --ga:360deg; } }
.gbtn::after {
  content:""; position:absolute; inset:1.5px; border-radius:999px; z-index:1;
  background: linear-gradient(135deg,#FF7A2F,#FFC24B);
}
.gbtn > span {
  position:relative; z-index:2; color:#0A0A1E; font-size:14px;
  padding:14px 24px; display:block; letter-spacing:.02em;
}
.gbtn:active { transform:scale(.97); }
.gbtn.ghost::before { display:none; }
.gbtn.ghost::after { background:rgba(18,18,42,.7); border:1px solid var(--hair2); }
.gbtn.ghost > span { color:var(--stone); }
.gbtn .shim { position:absolute; inset:0; z-index:3; border-radius:999px; overflow:hidden; pointer-events:none; }
.gbtn .shim::after {
  content:""; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  animation: shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer { 0%,55%{left:-100%} 100%{left:200%} }

/* ---- DISCLAIMER ---- */
#disclaimer {
  position:fixed;
  left:50%; transform:translateX(-50%);
  bottom: calc(72px + 16px + var(--sab));
  z-index:10;
  background:rgba(8,8,24,.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,247,232,.22); border-radius:999px;
  padding:5px 16px;
  font-size:10.5px; font-weight:500; color:rgba(255,247,232,.82);
  white-space:nowrap; pointer-events:none; letter-spacing:.02em;
  font-family:var(--fb); line-height:1.2;
  /* always visible once app is ready */
  display:none;
}
#disclaimer.show { display:block; }
/* on onboarding screens - lower position */
#disclaimer.low { bottom:28px; }

/* ---- TOAST ---- */
#toast {
  position:fixed; bottom:calc(130px + var(--sab)); left:50%; transform:translateX(-50%);
  z-index:99; background:rgba(22,22,50,.94); backdrop-filter:blur(16px);
  border:1px solid var(--hair2); border-radius:14px; padding:10px 18px;
  font-size:13px; color:var(--ivory); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
#toast.show { opacity:1; }

/* ---- OFFLINE BANNER ---- */
#offline-banner {
  position:fixed; top:calc(var(--sat) + 50px); left:14px; right:14px; z-index:98;
  background:rgba(255,90,90,.12); border:1px solid rgba(255,90,90,.3);
  border-radius:14px; padding:9px 14px; font-size:12px; color:#FF9A9A;
  text-align:center; display:none;
}
#offline-banner.show { display:block; }

/* ---- TABS ---- */
#tabs {
  position:fixed; left:12px; right:12px; bottom:calc(14px + var(--sab));
  height:72px; z-index:8;
  background:rgba(12,12,30,.72); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  border:1px solid var(--hair2); border-radius:28px;
  display:none; align-items:center;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,247,232,.08);
}
#tabs.show { display:flex; }
.tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:9.5px; color:var(--dim); cursor:pointer; letter-spacing:.04em;
  position:relative; transition:color .22s; user-select:none;
}
.tab .ti { font-size:20px; transition:transform .22s; }
.tab.on { color:var(--amber); }
.tab.on .ti { transform:translateY(-2px) scale(1.1); }
.tab.on::after {
  content:""; position:absolute; bottom:-7px; width:18px; height:3px;
  border-radius:2px; background:var(--dawn); animation:indSlide .22s ease-out;
}
@keyframes indSlide { from{width:0;opacity:0} to{width:18px;opacity:1} }
/* plus button (List tab) */
.tab-plus { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9.5px; color:var(--dim); cursor:pointer; flex:1; user-select:none; }
.plus-btn {
  width:52px; height:52px; margin-top:-28px; border-radius:18px;
  background:var(--dawn); display:grid; place-items:center; font-size:24px; color:#0A0A1E;
  box-shadow: 0 10px 28px rgba(255,122,47,.52), inset 0 1px 0 rgba(255,255,255,.45);
  border:3px solid rgba(12,12,30,.72); transition:transform .18s;
}
.tab-plus:active .plus-btn { transform:scale(.9) rotate(90deg); }

/* ---- SPLASH ---- */
#splash {
  position:fixed; inset:0; z-index:50;
  background:#080818;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.cine { position:fixed; left:0; width:100%; height:8%; background:#050510; z-index:51; }
.cine-t { top:0; animation:cineT 3.4s linear both; }
.cine-b { bottom:0; animation:cineB 3.4s linear both; }
@keyframes cineT { 0%,85%{transform:translateY(0)} 100%{transform:translateY(-105%)} }
@keyframes cineB { 0%,85%{transform:translateY(0)} 100%{transform:translateY(105%)} }
.sflash { position:fixed; inset:0; background:#FFF7E8; opacity:0; pointer-events:none; z-index:55; animation:sFlash .34s ease-out .95s; }
@keyframes sFlash { 0%{opacity:0} 25%{opacity:.16} 100%{opacity:0} }
.sshoot {
  position:fixed; left:8%; top:16%; width:130px; height:2px;
  background:linear-gradient(90deg,transparent,var(--ivory)); transform:rotate(-32deg);
  opacity:0; animation:sShoot 1s ease-out 3.5s; z-index:52;
}
@keyframes sShoot { 0%{opacity:0;transform:rotate(-32deg) translateX(-60px)} 15%{opacity:.9} 100%{opacity:0;transform:rotate(-32deg) translateX(340px)} }
#splash .stage { position:relative; display:flex; flex-direction:column; align-items:center; animation:pushIn 3.8s cubic-bezier(.22,.61,.36,1) both; }
@keyframes pushIn { from{transform:scale(1.06)} to{transform:scale(1)} }
/* logo animations */
.roofL,.roofR { stroke-dasharray:185; animation:drawRoof .55s cubic-bezier(.3,.6,.3,1) 1.1s backwards; }
@keyframes drawRoof { from{stroke-dashoffset:185} to{stroke-dashoffset:0} }
.svee { stroke-dasharray:365; animation:drawV .6s cubic-bezier(.3,.6,.3,1) 1.6s backwards; }
@keyframes drawV { from{stroke-dashoffset:365} to{stroke-dashoffset:0} }
.sspine { stroke-dasharray:175; animation:drawH .34s cubic-bezier(.3,.6,.3,1) 2.08s backwards; }
.sleg   { stroke-dasharray:175; animation:drawH .34s cubic-bezier(.3,.6,.3,1) 2.26s backwards; }
.sbar2  { stroke-dasharray:125; animation:drawBar .3s cubic-bezier(.3,.6,.3,1) 2.44s backwards; }
@keyframes drawH   { from{stroke-dashoffset:175} to{stroke-dashoffset:0} }
@keyframes drawBar { from{stroke-dashoffset:125} to{stroke-dashoffset:0} }
.srun { stroke-dasharray:70 1000; animation:runLight 1s cubic-bezier(.4,.2,.3,1) 3.06s; }
@keyframes runLight { from{stroke-dashoffset:430} to{stroke-dashoffset:-360} }
.shalo { opacity:.5; transform-origin:50% 50%; animation:showHalo 1.2s ease-out 3.05s backwards; }
@keyframes showHalo { from{opacity:0;transform:scale(.7)} to{opacity:.5;transform:scale(1)} }
.sspark { transform-origin:256px 57px; animation:sparkPop .4s cubic-bezier(.2,.9,.3,1.5) .95s backwards, sparkBreath 2.2s ease-in-out 2.4s infinite; }
@keyframes sparkPop { from{transform:scale(1.9)} to{transform:scale(1)} }
@keyframes sparkBreath { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
.sring { transform-origin:256px 57px; opacity:0; animation:ringBurst .65s cubic-bezier(.2,.7,.3,1) .96s; }
@keyframes ringBurst { 0%{opacity:.95;transform:scale(.1)} 100%{opacity:0;transform:scale(2.8)} }
.sray  { transform-origin:256px 57px; opacity:0; animation:rayBurst .7s ease-out .96s; }
@keyframes rayBurst { 0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)} 100%{opacity:0;transform:rotate(var(--a)) translateY(-80px) scale(.15)} }
.sdust { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--amber); left:var(--x); top:var(--y); opacity:0; animation:dustFloat 2.8s ease-in-out var(--d) infinite; }
@keyframes dustFloat { 0%{opacity:0;transform:translateY(10px) scale(.5)} 28%{opacity:.85} 100%{opacity:0;transform:translateY(-52px) scale(.15)} }
.sorb { position:absolute; left:50%; top:44%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--amber); opacity:.65; animation:orbIn .6s ease-out var(--in) backwards, orbCircle var(--o) linear var(--in) infinite; }
@keyframes orbIn { from{opacity:0} to{opacity:.65} }
@keyframes orbCircle { from{transform:rotate(var(--st)) translateX(140px)} to{transform:rotate(calc(var(--st) + 360deg)) translateX(140px)} }
/* splash text */
#splash .sword { margin-top:22px; display:flex; font-family:var(--fd); font-weight:700; font-size:clamp(32px,8vw,46px); letter-spacing:-.02em; }
.wv { color:var(--ivory); animation:wordRise .55s cubic-bezier(.2,.75,.3,1) 2.95s backwards; }
.wh { background:var(--dawn); -webkit-background-clip:text; background-clip:text; color:transparent; animation:wordRise .55s cubic-bezier(.2,.75,.3,1) 3.1s backwards; position:relative; }
@keyframes wordRise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
.whi { font-style:normal; position:absolute; inset:0; background:linear-gradient(115deg,transparent 38%,rgba(255,247,232,.95) 50%,transparent 62%); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:280% 100%; background-position:120% 0; animation:wordShimmer .75s ease-in-out 3.5s forwards; }
@keyframes wordShimmer { to{background-position:-60% 0} }
#splash .stagline { margin-top:14px; font-size:clamp(10px,2.4vw,13px); font-weight:500; color:var(--stone); text-transform:uppercase; letter-spacing:.34em; animation:tagIn .9s cubic-bezier(.2,.7,.3,1) 3.7s backwards; }
@keyframes tagIn { from{opacity:0;letter-spacing:.9em;filter:blur(4px)} to{opacity:1;letter-spacing:.34em;filter:blur(0)} }
#splash .sloadbar { margin-top:28px; width:140px; height:3px; border-radius:3px; background:#1A1A3A; overflow:hidden; }
#splash .sloadfill { height:100%; border-radius:3px; background:var(--dawn); transform-origin:left; animation:loadFill 3.5s cubic-bezier(.3,.4,.2,1) 1s backwards; }
@keyframes loadFill { from{transform:scaleX(0)} to{transform:scaleX(1)} }
#splash .sreflect { width:min(52vw,200px); height:55px; overflow:hidden; opacity:.08; transform:scaleY(-1); margin-top:-4px; pointer-events:none; -webkit-mask-image:linear-gradient(to bottom,transparent 30%,#000 100%); mask-image:linear-gradient(to bottom,transparent 30%,#000 100%); }

/* ---- PERM SCREEN ---- */
#perm { background:#080818; z-index:22; align-items:center; justify-content:center; }
.perm-card {
  width:100%; max-width:380px;
  background:rgba(14,14,38,.9); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,247,232,.14); border-radius:30px; padding:28px 22px;
  box-shadow:0 26px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,247,232,.08);
  text-align:center;
}
.perm-ico { font-size:52px; display:block; margin-bottom:18px; animation:popIn .6s cubic-bezier(.2,.9,.3,1.4); }
.perm-card h2 { font-family:var(--fd); font-weight:800; font-size:22px; margin-bottom:10px; color:var(--ivory); }
.perm-card p { font-size:13.5px; color:rgba(165,165,195,.85); line-height:1.65; margin-bottom:18px; }
.benes { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; text-align:left; }
.bene { display:flex; gap:10px; align-items:flex-start; background:rgba(255,194,75,.08); border:1px solid rgba(255,194,75,.22); border-radius:14px; padding:10px 12px; }
.bene .bi { font-size:17px; flex:none; margin-top:1px; }
.bene p { font-size:12.5px; color:rgba(255,247,232,.78); line-height:1.5; }
.perm-btns { display:flex; flex-direction:column; gap:10px; }
.perm-steps { display:flex; gap:7px; justify-content:center; margin-top:16px; }
.pstep { width:7px; height:7px; border-radius:50%; background:var(--hair2); }
.pstep.on { background:var(--amber); width:20px; border-radius:4px; }

/* ---- WALKTHROUGH ---- */
#walk { background:#080818; z-index:20; }
.skip-btn {
  position:absolute; top:calc(var(--sat) + 8px); right:18px; z-index:25;
  color:var(--dim); font-size:12.5px; cursor:pointer;
  background:rgba(22,22,50,.65); backdrop-filter:blur(10px);
  padding:6px 12px; border-radius:999px; border:1px solid var(--hair); user-select:none;
}
.slides-wrap { flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.slides-wrap::-webkit-scrollbar { display:none; }
.slide { flex:none; width:100%; scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 32px 20px; text-align:center; }
/* animated icons */
.wkico { width:110px; height:110px; margin-bottom:26px; flex:none; border-radius:36px; background:rgba(22,22,50,.58); backdrop-filter:blur(14px); border:1px solid var(--hair2); box-shadow:0 16px 40px rgba(0,0,0,.52); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
/* voice icon */
.ico-mouth { position:absolute; width:36px; height:20px; border-radius:0 0 18px 18px; border:3px solid var(--ivory); border-top:none; bottom:35px; }
.ico-wave { position:absolute; border-radius:50%; border:2px solid rgba(255,122,47,.6); animation:waveRing 1.6s ease-out infinite; }
.ico-wave:nth-child(2){width:50px;height:50px;animation-delay:0s}
.ico-wave:nth-child(3){width:70px;height:70px;animation-delay:.35s}
.ico-wave:nth-child(4){width:90px;height:90px;animation-delay:.7s}
@keyframes waveRing { 0%{transform:scale(.6);opacity:.8} 100%{transform:scale(1.1);opacity:0} }
/* house icon */
.ico-roof { width:0;height:0;border-left:28px solid transparent;border-right:28px solid transparent;border-bottom:24px solid var(--kesar);position:absolute;top:22px;animation:roofBob .8s ease-in-out infinite alternate; }
@keyframes roofBob { from{transform:translateY(0)} to{transform:translateY(-3px)} }
.ico-walls { width:44px;height:32px;background:linear-gradient(180deg,var(--kesar),var(--amber));position:absolute;bottom:26px;border-radius:2px 2px 4px 4px; }
.ico-door { width:12px;height:18px;background:rgba(8,8,24,.6);border-radius:3px 3px 0 0;position:absolute;bottom:0; }
.ico-shine { position:absolute;top:22px;left:20px;width:4px;height:4px;background:#FFF7E8;border-radius:50%;animation:shineAnim 1.4s ease-in-out infinite;filter:blur(1px); }
@keyframes shineAnim { 0%,100%{opacity:0;transform:scale(.5)} 50%{opacity:1;transform:scale(1.5)} }
/* check icon */
.ico-ck { width:52px;height:52px; }
.ck-path { stroke-dasharray:80;stroke-dashoffset:80;animation:ckDraw 1s cubic-bezier(.3,.6,.3,1) infinite; }
@keyframes ckDraw { 0%{stroke-dashoffset:80} 50%{stroke-dashoffset:0} 80%{stroke-dashoffset:0} 100%{stroke-dashoffset:-80} }
.sparkle { position:absolute;width:6px;height:6px;border-radius:50%;animation:sparklePop 1.4s ease-out infinite; }
.sparkle:nth-child(1){background:var(--amber);top:18px;right:22px;animation-delay:.2s}
.sparkle:nth-child(2){background:var(--kesar);bottom:22px;right:18px;animation-delay:.5s}
.sparkle:nth-child(3){background:var(--live);top:24px;left:18px;animation-delay:.8s}
@keyframes sparklePop { 0%{transform:scale(0);opacity:1} 100%{transform:scale(2.5);opacity:0} }
/* bell icon */
.ico-bell-e { font-size:42px; animation:bellRing 2s ease-in-out infinite; }
@keyframes bellRing { 0%,100%{transform:rotate(0)} 5%{transform:rotate(-15deg)} 10%{transform:rotate(15deg)} 15%{transform:rotate(-10deg)} 20%{transform:rotate(10deg)} 25%{transform:rotate(0)} }
.bell-badge { position:absolute;top:18px;right:20px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;animation:badgePop 2s ease-in-out infinite; }
@keyframes badgePop { 0%,100%{transform:scale(1)} 10%{transform:scale(1.4)} 20%{transform:scale(1)} }
/* cmd icon */
.ico-lines { display:flex;flex-direction:column;gap:7px; }
.ico-line { height:4px;border-radius:2px;background:var(--dawn);transform-origin:left; }
.ico-line:nth-child(1){width:48px;animation:cmdType 2.4s ease-in-out infinite}
.ico-line:nth-child(2){width:36px;animation:cmdType 2.4s ease-in-out .4s infinite}
.ico-line:nth-child(3){width:42px;animation:cmdType 2.4s ease-in-out .8s infinite}
@keyframes cmdType { 0%{width:0;opacity:0} 30%{opacity:1} 60%{width:48px} 100%{width:48px} }
.ico-cursor { width:2px;height:14px;background:var(--amber);border-radius:1px;margin-top:4px;animation:cursorBlink .8s step-end infinite; }
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
/* cmd guide slide */
.cmd-slide { align-items:flex-start; padding:60px 18px 20px; overflow-y:auto; text-align:left; scrollbar-width:none; }
.cmd-slide::-webkit-scrollbar { display:none; }
.cmd-head { font-family:var(--fd); font-weight:800; font-size:19px; margin-bottom:14px; }
.cmd-cat { margin-bottom:14px; }
.cat-lbl { font-size:10px; letter-spacing:.2em; color:var(--amber); margin-bottom:7px; font-weight:700; display:block; }
.cmds { display:flex; flex-direction:column; gap:5px; }
.cmd { background:rgba(22,22,50,.65); backdrop-filter:blur(10px); border:1px solid var(--hair); border-radius:13px; padding:10px 12px; }
.cmd .ce { color:rgba(255,247,232,.9); display:block; font-size:12.5px; margin-bottom:3px; }
.cmd .cg { color:var(--amber); font-family:var(--fg); display:block; font-size:12px; }
.cmd .ch { color:rgba(165,165,195,.85); font-family:var(--fh); display:block; font-size:12px; margin-top:2px; }
.slide h2 { font-family:var(--fd); font-weight:800; font-size:24px; line-height:1.2; margin-bottom:12px; letter-spacing:-.02em; }
.slide h2 .hl { background:var(--dawn); -webkit-background-clip:text; background-clip:text; color:transparent; }
.slide p { color:rgba(165,165,195,.9); font-size:13.5px; line-height:1.65; max-width:290px; }
.wk-foot { padding:14px 22px calc(22px + var(--sab)); flex:none; }
.wk-dots { display:flex; gap:7px; justify-content:center; margin-bottom:16px; }
.wkdot { width:7px; height:7px; border-radius:50%; background:var(--hair2); }
.wkdot.on { background:var(--amber); width:20px; border-radius:4px; }

/* ---- CONSENT ---- */
#consent { background:#080818; z-index:18; align-items:center; justify-content:center; padding:28px 22px; }
.con-card { width:100%; max-width:380px; background:rgba(14,14,38,.9); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border:1px solid rgba(255,247,232,.14); border-radius:28px; padding:24px 20px; box-shadow:0 26px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,247,232,.08); }
.con-law { font-size:13px; color:rgba(165,165,195,.85); line-height:1.7; margin:14px 0 6px; }
.con-law a { color:var(--amber); text-decoration:none; }
.tick-row { display:flex; gap:12px; align-items:center; background:rgba(255,122,47,.07); border:1px solid rgba(255,122,47,.22); border-radius:16px; padding:14px 13px; margin-top:16px; cursor:pointer; transition:background .2s; }
.tick-row.on { background:rgba(255,122,47,.12); border-color:rgba(255,122,47,.4); }
.tick { width:26px; height:26px; flex:none; border-radius:9px; border:2px solid rgba(165,165,195,.5); display:grid; place-items:center; font-size:13px; color:#0A0A1E; transition:all .2s; background:transparent; }
.tick-row.on .tick { background:var(--dawn); border-color:transparent; }
.tick-row p { font-size:12.5px; color:rgba(255,247,232,.75); line-height:1.55; margin:0; flex:1; }
.con-btns { margin-top:18px; display:flex; flex-direction:column; gap:10px; }

/* ---- LOGIN ---- */
#login { background:#080818; z-index:16; align-items:center; justify-content:center; padding:28px 22px; }
.login-card { width:100%; max-width:380px; background:rgba(14,14,38,.9); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border:1px solid rgba(255,247,232,.14); border-radius:28px; padding:28px 22px; box-shadow:0 26px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,247,232,.08); text-align:center; }
.login-card h2 { font-family:var(--fd); font-weight:800; font-size:22px; margin-bottom:6px; color:var(--ivory); }
.login-card p { font-size:13px; color:rgba(165,165,195,.85); margin-bottom:22px; line-height:1.6; }
.divider { display:flex; align-items:center; gap:10px; margin:16px 0; }
.divider hr { flex:1; border:none; border-top:1px solid var(--hair); }
.divider span { font-size:11px; color:var(--dim); }
.lfield { background:rgba(12,12,32,.8); border:1px solid var(--hair2); border-radius:14px; padding:13px 16px; color:var(--ivory); font-size:14px; font-family:var(--fb); outline:none; width:100%; margin-bottom:10px; transition:border-color .2s; }
.lfield:focus { border-color:rgba(255,122,47,.5); }
.lfield::placeholder { color:var(--dim); }
.sso-badge { display:flex; align-items:center; gap:8px; background:rgba(62,207,142,.08); border:1px solid rgba(62,207,142,.25); border-radius:12px; padding:9px 12px; margin-bottom:16px; font-size:12px; color:var(--stone); }
.sso-dot { width:8px; height:8px; border-radius:50%; background:var(--live); flex:none; animation:ssoPulse 2s ease-in-out infinite; }
@keyframes ssoPulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.role-note { font-size:11px; color:var(--dim); margin-top:14px; }
.role-note a { color:var(--amber); cursor:pointer; }

/* ---- HOME ---- */
.greet { font-size:13px; color:var(--stone); margin-top:8px; font-family:var(--fg); }
.greet-name { font-family:var(--fd); font-weight:800; font-size:22px; letter-spacing:-.02em; }

/* voice orb */
@property --oa { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.orb-wrap { margin:16px 0 4px; }
.orb { position:relative; border-radius:28px; padding:1.5px; overflow:hidden; cursor:pointer; box-shadow:0 20px 50px rgba(255,122,47,.24); transition:transform .18s; }
.orb:active { transform:scale(.982); }
.orb::before { content:""; position:absolute; inset:-50%; z-index:0; background:conic-gradient(from var(--oa),#FF7A2F 0%,#FFC24B 25%,#6C5CE7 55%,#FF7A2F 100%); animation:orbSpin 6s linear infinite; filter:blur(14px); opacity:.9; }
@keyframes orbSpin { to{--oa:360deg} }
.orb-in { position:relative; border-radius:26.5px; background:rgba(12,12,30,.9); backdrop-filter:blur(22px); padding:18px 15px; display:flex; align-items:center; gap:12px; z-index:1; }
.orb-spark { width:22px; height:22px; flex:none; animation:sparkBreath 2.4s ease-in-out infinite; }
@keyframes sparkBreath { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }
.orb-text { flex:1; min-width:0; }
.orb-ph { font-size:14px; color:var(--ivory); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--fg); transition:opacity .3s; }
.orb-hint { display:block; font-size:9.5px; color:var(--dim); margin-top:3px; letter-spacing:.16em; }
.wavebar { display:flex; gap:3px; align-items:center; height:18px; flex:none; }
.wb { width:3px; border-radius:2px; background:var(--amber); }
.wb:nth-child(1){animation:waveBar .9s ease-in-out infinite;height:5px}
.wb:nth-child(2){animation:waveBar .9s ease-in-out .14s infinite;height:13px}
.wb:nth-child(3){animation:waveBar .9s ease-in-out .28s infinite;height:8px}
.wb:nth-child(4){animation:waveBar .9s ease-in-out .42s infinite;height:14px}
.wb:nth-child(5){animation:waveBar .9s ease-in-out .56s infinite;height:6px}
.wb:nth-child(6){animation:waveBar .9s ease-in-out .7s infinite;height:10px}
@keyframes waveBar { 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1.2)} }
.mic-btn { width:48px; height:48px; flex:none; border-radius:50%; background:var(--dawn); display:grid; place-items:center; font-size:18px; color:#0A0A1E; position:relative; cursor:pointer; animation:micPulse 2.4s ease-in-out infinite; }
@keyframes micPulse { 0%,100%{box-shadow:0 6px 20px rgba(255,122,47,.55)} 50%{box-shadow:0 6px 30px rgba(255,122,47,.85),0 0 0 8px rgba(255,122,47,.12)} }
.mic-btn::before,.mic-btn::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid rgba(255,122,47,.35); animation:micRing 2.4s ease-out infinite; }
.mic-btn::after { inset:-10px; border-color:rgba(255,122,47,.18); animation-delay:.8s; }
@keyframes micRing { 0%{transform:scale(.85);opacity:1} 100%{transform:scale(1.5);opacity:0} }

/* chips */
.chip-row { display:flex; gap:8px; overflow-x:auto; margin:14px -18px 0; padding:2px 18px 8px; scrollbar-width:none; }
.chip-row::-webkit-scrollbar { display:none; }
.chip { flex:none; padding:9px 14px; border-radius:999px; background:rgba(22,22,50,.65); backdrop-filter:blur(10px); border:1px solid var(--hair2); font-size:12px; color:var(--stone); cursor:pointer; transition:transform .15s; user-select:none; }
.chip:active { transform:scale(.93); }
.chip.hot { background:linear-gradient(135deg,rgba(255,122,47,.22),rgba(255,194,75,.1)); border-color:rgba(255,122,47,.5); color:var(--amber); }

/* section header */
.sech { display:flex; align-items:center; margin:22px 0 12px; }
.sech h2 { font-family:var(--fd); font-weight:700; font-size:17px; letter-spacing:-.01em; }
.sech a { font-size:12px; color:var(--amber); text-decoration:none; cursor:pointer; }

/* property card */
.pcard { border-radius:24px; background:var(--glass); border:1px solid var(--hair); overflow:hidden; margin-bottom:16px; cursor:pointer; box-shadow:0 16px 40px rgba(0,0,0,.52); transition:transform .18s; }
.pcard:active { transform:scale(.977); }
.pimg { height:190px; position:relative; overflow:hidden; }
.pimg svg { position:absolute; inset:0; width:100%; height:100%; }
.pscrim { position:absolute; inset:0; background:linear-gradient(180deg,transparent 25%,rgba(5,5,20,.92) 97%); }
.ptags { position:absolute; top:12px; left:12px; right:12px; display:flex; gap:7px; }
.ptag { background:rgba(8,8,24,.65); backdrop-filter:blur(8px); border:1px solid var(--hair2); padding:5px 10px; border-radius:9px; font-size:9.5px; font-weight:700; letter-spacing:.1em; }
.ptag.live { color:var(--live); }
.ptag.ai { color:var(--amber); }
.ptag.r { margin-left:auto; }
.hrt-btn { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; background:rgba(8,8,24,.62); backdrop-filter:blur(8px); border:1px solid var(--hair); display:grid; place-items:center; font-size:14px; color:var(--stone); transition:color .2s, transform .2s; cursor:pointer; z-index:2; }
.hrt-btn.loved { color:#FF5A7E; transform:scale(1.2); }
.pinfo { position:absolute; left:14px; right:14px; bottom:12px; }
.pprice { font-family:var(--fd); font-weight:800; font-size:22px; letter-spacing:-.02em; }
.pprice small { font-size:11px; color:var(--stone); font-weight:400; }
.ptitle { font-size:13px; color:rgba(255,247,232,.9); margin-top:3px; font-weight:500; }
.pstats { display:flex; border-top:1px solid var(--hair); background:rgba(10,10,28,.42); }
.pst { flex:1; text-align:center; padding:10px 4px; border-right:1px solid var(--hair); }
.pst:last-child { border:none; }
.pst b { display:block; font-family:var(--fd); font-size:13px; font-weight:700; }
.pst span { font-size:9.5px; color:var(--dim); letter-spacing:.07em; text-transform:uppercase; }

/* ---- CHAT SCREENS ---- */
.chatbox { flex:1; overflow-y:auto; padding:8px 18px calc(160px + var(--sab)); scrollbar-width:none; }
.chatbox::-webkit-scrollbar { display:none; }
.msg { max-width:86%; padding:12px 15px; border-radius:20px; font-size:14px; line-height:1.58; margin-bottom:10px; }
.ai-msg { background:var(--glass); border:1px solid var(--hair); backdrop-filter:blur(14px); border-bottom-left-radius:7px; font-family:var(--fg); }
.u-msg { background:var(--dawn); color:#0A0A1E; font-weight:600; margin-left:auto; border-bottom-right-radius:7px; box-shadow:0 8px 24px rgba(255,122,47,.3); font-family:var(--fg); }
.typing { display:flex; gap:5px; align-items:center; padding:14px 18px; }
.tdot { width:7px; height:7px; border-radius:50%; background:var(--stone); animation:typeDot .8s ease-in-out infinite; }
.tdot:nth-child(2){animation-delay:.18s}
.tdot:nth-child(3){animation-delay:.36s}
@keyframes typeDot { 0%,100%{transform:translateY(0);opacity:.4} 50%{transform:translateY(-5px);opacity:1} }
.chat-ibar { position:fixed; left:12px; right:12px; bottom:calc(86px + var(--sab)); z-index:7; display:flex; gap:9px; align-items:center; }
.chat-inp { flex:1; background:rgba(16,16,38,.82); backdrop-filter:blur(18px); border:1px solid var(--hair2); border-radius:999px; padding:14px 18px; color:var(--ivory); font-size:14px; font-family:var(--fg); outline:none; transition:border-color .2s; }
.chat-inp:focus { border-color:rgba(255,122,47,.5); }
.chat-inp::placeholder { color:var(--dim); }
.send-btn { width:48px; height:48px; border-radius:50%; background:var(--dawn); border:none; display:grid; place-items:center; color:#0A0A1E; font-size:17px; cursor:pointer; box-shadow:0 6px 20px rgba(255,122,47,.45); transition:transform .15s; flex:none; }
.send-btn:active { transform:scale(.88); }

/* ---- LIST (AI Interviewer) ---- */
.rev-card { background:var(--glass); backdrop-filter:blur(16px); border:1px solid rgba(255,122,47,.38); border-radius:22px; padding:16px; margin:4px 0 12px; }
.rev-card h3 { font-family:var(--fd); font-size:14.5px; margin-bottom:9px; color:var(--amber); }
.rev-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed rgba(255,247,232,.08); font-size:12.5px; }
.rev-row:last-of-type { border:none; }
.rev-row b { color:var(--ivory); font-weight:500; }
.rev-row span { color:var(--stone); }

/* ---- SAVED ---- */
.prow { display:flex; align-items:center; gap:12px; background:var(--glass); border:1px solid var(--hair); backdrop-filter:blur(12px); border-radius:17px; padding:14px; margin-bottom:10px; cursor:pointer; transition:transform .15s; }
.prow:active { transform:scale(.978); }
.prow .pi { width:40px; height:40px; border-radius:13px; background:rgba(255,122,47,.1); border:1px solid rgba(255,122,47,.22); display:grid; place-items:center; font-size:17px; flex:none; }
.prow b { font-size:13.5px; font-weight:600; display:block; }
.prow small { font-size:11.5px; color:var(--dim); }
.prow .ar { color:var(--dim); }
.pill { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:7px; font-size:10.5px; font-weight:600; }
.pill-g { color:var(--live); border:1px solid rgba(62,207,142,.35); background:rgba(62,207,142,.08); }
.pill-d { color:var(--dim); border:1px solid var(--hair); }

/* ---- PROFILE ---- */
.avatar { width:64px; height:64px; border-radius:22px; background:var(--dawn); display:grid; place-items:center; font-family:var(--fd); font-weight:800; font-size:24px; color:#0A0A1E; box-shadow:0 10px 28px rgba(255,122,47,.42); }

/* ---- SHEET (detail) ---- */
#sheet { position:fixed; inset:0; background:rgba(3,3,16,.6); backdrop-filter:blur(8px); display:none; z-index:14; }
#sheet.on { display:block; }
.sheet-in { position:absolute; inset:0; overflow-y:auto; scrollbar-width:none; animation:sheetUp .42s cubic-bezier(.22,.9,.3,1.02); }
.sheet-in::-webkit-scrollbar { display:none; }
@keyframes sheetUp { from{transform:translateY(80px);opacity:.3} to{transform:translateY(0);opacity:1} }
.sheet-hero { height:380px; position:relative; }
.sheet-hero svg { position:absolute; inset:0; width:100%; height:100%; }
.sheet-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,3,16,.35) 0%,transparent 25%,transparent 50%,#080818 100%); }
.sheet-back { position:absolute; top:calc(var(--sat) + 6px); left:14px; width:40px; height:40px; border-radius:14px; background:rgba(8,8,24,.58); backdrop-filter:blur(10px); border:1px solid var(--hair); display:grid; place-items:center; font-size:17px; cursor:pointer; z-index:2; }
.sheet-dots { position:absolute; bottom:80px; left:0; right:0; display:flex; gap:6px; justify-content:center; }
.sdot { width:6px; height:6px; border-radius:50%; background:rgba(255,247,232,.3); }
.sdot.on { background:var(--amber); width:17px; border-radius:3px; }
.sheet-info { position:absolute; left:18px; right:18px; bottom:14px; }
.sheet-price { font-family:var(--fd); font-weight:800; font-size:26px; letter-spacing:-.02em; }
.sheet-price small { font-size:12px; color:var(--stone); font-weight:400; }
.sheet-title { font-size:14px; color:rgba(255,247,232,.9); margin-top:3px; }
.sheet-body { padding:8px 18px calc(110px + var(--sab)); background:var(--deep); }
.amens { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.amen { padding:8px 12px; border-radius:12px; background:var(--glass); border:1px solid var(--hair); font-size:12px; color:var(--stone); }
.sheet-desc { font-size:13px; color:var(--stone); line-height:1.72; margin-top:6px; }
.sheet-map { height:100px; border-radius:16px; background:var(--glass); border:1px solid var(--hair); display:grid; place-items:center; color:var(--dim); font-size:13px; margin-top:13px; }
.sheet-stick { position:fixed; left:12px; right:12px; bottom:calc(14px + var(--sab)); display:flex; gap:9px; z-index:15; }
.sheet-stick .gbtn { flex:1; }
.wa-btn { width:52px; height:52px; flex:none; border-radius:18px; background:var(--glass); backdrop-filter:blur(14px); border:1px solid var(--hair2); display:grid; place-items:center; font-size:19px; cursor:pointer; }

/* ---- MISC ---- */
.skel { background:linear-gradient(90deg,var(--ink2) 25%,rgba(30,30,60,.6) 50%,var(--ink2) 75%); background-size:200% 100%; animation:skelAnim 1.4s ease-in-out infinite; border-radius:8px; }
@keyframes skelAnim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }


/* voicewave — alias used by walkthrough voice icon */
@keyframes voicewave {
  0%   { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.1); opacity: 0; }
}
@media(prefers-reduced-motion:reduce) { *{animation:none!important;transition:none!important} }

/* ============================================================
   PLATFORM FIXES — iOS, Android, All resolutions
   ============================================================ */

/* GPU acceleration for animated elements */
.orb::before, #splash, .scr, #tabs,
.pcard, .h-card, .wkico {
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* iOS momentum scrolling */
.scroll, .chatbox, .slides-wrap, .cmd-slide {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Android back gesture - prevent pull-to-refresh conflict */
body, #app {
  overscroll-behavior-y: none;
  touch-action: pan-y;
}

/* iOS text resize fix */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Font smoothing - crisp on all platforms */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* iOS input zoom fix - must be 16px minimum */
.lfield, .chat-inp {
  font-size: 16px !important;
}
.lfield::placeholder, .chat-inp::placeholder {
  font-size: 16px;
}

/* touch-action for swipe areas */
.slides-wrap { touch-action: pan-x; }
.scroll, .chatbox { touch-action: pan-y; }

/* user-select fix */
.tab, .tab-plus, .lang-btn, .chip, .gbtn, .icon-btn {
  -webkit-user-select: none;
  user-select: none;
}

/* Fix iOS button appearance */
button, input, .gbtn {
  -webkit-appearance: none;
  appearance: none;
}

/* Active state feedback on mobile (no hover) */
@media (hover: none) {
  .pcard:active    { transform: scale(.977); }
  .gbtn:active     { transform: scale(.97); }
  .tab:active .ti  { transform: translateY(-2px) scale(1.1); }
  .icon-btn:active { transform: scale(.88); }
}