/* ModeUp — Night Glass shared foundation (design system §14).
 * Link this before page-specific <style>. 390x844 logical frame, RTL, dark-first. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600;800&display=swap');

@font-face{font-family:"Vazirmatn";src:url("vaz-400.woff2") format("woff2");font-weight:400;font-display:block;}
@font-face{font-family:"Vazirmatn";src:url("vaz-500.woff2") format("woff2");font-weight:500;font-display:block;}
@font-face{font-family:"Vazirmatn";src:url("vaz-700.woff2") format("woff2");font-weight:700;font-display:block;}

:root{
  --page-bg:#A499C0;
  --grad-night:linear-gradient(156.13deg,#2E335A 1.6%,#1C1B33 95.72%);
  --grad-glass:linear-gradient(164.13deg,rgba(46,51,90,.26) 4.68%,rgba(28,27,51,.26) 95.45%);
  --grad-violet:linear-gradient(135deg,#5936B4,#362A84);
  --hero-fade:linear-gradient(to bottom,rgba(58,63,84,0) 2%,#3A3F54 54%);
  --label-primary:#FFFFFF;
  --label-secondary:rgba(235,235,245,.60);
  --hairline:rgba(235,235,245,.25);
  --stroke-glass:rgba(255,255,255,.20);
  --stroke-accent:rgba(117,130,244,.50);
  --card-fill:rgba(72,49,157,.20);
  --frame-shadow:-40px 60px 150px rgba(59,38,123,.7);
  --radius-frame:44px; --radius-card:30px; --radius-island:20px;
  --blur-panel:30px; --blur-card:6px;
  --font:"Vazirmatn",-apple-system,system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html,body{height:100%;}
body{
  background:var(--page-bg);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font);
  min-height:100vh;padding:16px;overflow:hidden;
}

/* ---------- Phone frame ---------- */
.phone{
  position:relative;width:390px;height:844px;border-radius:var(--radius-frame);overflow:hidden;
  background:var(--grad-night);box-shadow:var(--frame-shadow);
  isolation:isolate;flex:none;transform-origin:center center;
}
.amb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;}
.amb-1{right:-60px;top:-40px;width:320px;height:320px;
  background:radial-gradient(closest-side,rgba(140,94,240,.45),rgba(140,94,240,0) 70%);filter:blur(18px);}
.amb-2{left:-90px;top:300px;width:300px;height:300px;
  background:radial-gradient(closest-side,rgba(78,64,165,.35),rgba(78,64,165,0) 70%);filter:blur(24px);}

/* ---------- Dynamic Island ---------- */
.island{position:absolute;left:50%;top:11px;transform:translateX(-50%);
  width:125px;height:37px;border-radius:var(--radius-island);background:#000;z-index:25;
  display:flex;align-items:center;justify-content:flex-end;padding-right:12px;}
.island .cam{width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#3a3a52 0%,#111 55%,#000 100%);
  box-shadow:inset 0 0 1px 1px rgba(255,255,255,.06);}

/* ---------- Status bar ---------- */
.statusbar{position:absolute;left:0;top:0;width:390px;height:47px;z-index:20;color:#fff;}
.sb-time{position:absolute;left:27px;top:15px;font-family:-apple-system,"SF Pro Text",system-ui;
  font-weight:600;font-size:17px;letter-spacing:-.4px;}
.sb-right{position:absolute;right:16.5px;top:19px;display:flex;align-items:center;gap:7px;height:13px;direction:ltr;}
.sb-right svg{display:block;}

/* ---------- Header ---------- */
.header{position:absolute;left:0;top:58px;width:100%;height:44px;z-index:15;color:#fff;}
.nav-btn{position:absolute;top:4px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.10);border:1px solid var(--stroke-glass);
  display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.nav-back{right:20px;}
.nav-btn{z-index:3;}
.nav-btn svg{width:18px;height:18px;color:#fff;}
.page-title{position:absolute;top:0;left:0;width:100%;text-align:center;pointer-events:none;
  font-weight:700;font-size:20px;line-height:44px;text-shadow:0 2px 12px rgba(0,0,0,.25);}

/* ---------- Glass surfaces ---------- */
.glass{background:var(--grad-glass);backdrop-filter:blur(var(--blur-panel));-webkit-backdrop-filter:blur(var(--blur-panel));}
.glass-card{background:var(--card-fill);border:1px solid var(--stroke-glass);
  box-shadow:5px 4px 10px rgba(0,0,0,.22), inset 1px 1px 0 rgba(255,255,255,.20);
  backdrop-filter:blur(var(--blur-card));-webkit-backdrop-filter:blur(var(--blur-card));}

/* ---------- Buttons ---------- */
.btn{width:100%;height:48px;border:none;border-radius:16px;cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:15px;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--grad-violet);box-shadow:0 8px 20px rgba(89,54,180,.5);}
.btn-wa{background:linear-gradient(135deg,#25D366,#128C7E);box-shadow:0 8px 20px rgba(18,140,126,.45);}
.btn-ig{background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF);box-shadow:0 8px 20px rgba(221,42,123,.4);}
.btn-map{background:rgba(255,255,255,.10);border:1px solid var(--stroke-glass);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}

/* ---------- Chips ---------- */
.chip{flex:none;height:32px;padding:0 16px;border-radius:16px;font-size:13px;font-weight:500;
  display:flex;align-items:center;color:var(--label-secondary);
  background:rgba(255,255,255,.06);border:1px solid var(--stroke-glass);white-space:nowrap;cursor:pointer;}
.chip.active{color:#fff;font-weight:700;background:var(--grad-violet);border-color:transparent;
  box-shadow:0 6px 16px rgba(89,54,180,.45);}

/* ---------- Avatar ---------- */
.avatar{width:56px;height:56px;border-radius:20px;flex:none;object-fit:cover;
  border:1px solid var(--stroke-glass);
  background:radial-gradient(120% 120% at 30% 20%,#F7CBFD,#7758D1);}
.verified{width:16px;height:16px;color:#5AC8FA;flex:none;}

/* ---------- Brand wordmark (ModeUp — "Up" in brand violet) ---------- */
.logo-wm{font-family:"Poppins",-apple-system,system-ui,sans-serif;font-weight:800;
  letter-spacing:-.5px;color:#fff;line-height:1;white-space:nowrap;}
.logo-wm .mode{font-weight:300;}
.logo-wm .up{font-weight:800;background:linear-gradient(135deg,#7B4BD8,#C159EC);
  -webkit-background-clip:text;background-clip:text;color:transparent;}

/* hide scrollbars on inner scrollers */
.noscroll{scrollbar-width:none;}
.noscroll::-webkit-scrollbar{display:none;}

/* ---------- Tab bar ---------- */
.tabbar{position:absolute;left:0;bottom:0;width:390px;height:76px;z-index:30;}
.tabbar .back{position:absolute;left:-2px;top:9px;width:394px;height:67px;}
.tabbar .front{position:absolute;left:50%;transform:translateX(-50%);top:-3px;width:203px;height:82px;}
.tabbar .back svg,.tabbar .front svg{display:block;width:100%;height:100%;overflow:visible;}
.tabbar .icon{position:absolute;top:31px;width:26px;height:26px;color:#fff;z-index:2;cursor:pointer;}
.tabbar .icon-loc{left:44px;}
.tabbar .icon-list{right:44px;}
.tabbar .fab{position:absolute;left:50%;top:13px;transform:translateX(-50%);width:51px;height:51px;
  border-radius:50%;background:radial-gradient(120% 120% at 50% 25%,#ffffff 0%,#efeef4 78%,#e2e0ec 100%);
  box-shadow:0 10px 22px rgba(30,20,70,.45), 0 2px 4px rgba(0,0,0,.2);
  display:flex;align-items:center;justify-content:center;z-index:3;cursor:pointer;border:none;}
.tabbar .fab svg{width:24px;height:24px;}