@font-face{
  font-family:"NotoSC";
  src:url("NotoSansSC-VF.ttf") format("truetype");
  font-weight:100 900;font-style:normal;font-display:swap;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"NotoSC","PingFang SC","Microsoft YaHei",sans-serif;
  background:#dfe7f0;color:#080b10;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;padding:0;margin:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.phone{
  position:relative;width:375px;height:812px;margin:0 auto;overflow:hidden;
  background:#f5f9fc;isolation:isolate;
}
.scroller{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroller::-webkit-scrollbar{display:none}

/* ---------- status bar ---------- */
.statusbar{
  position:absolute;top:0;left:0;right:0;height:44px;z-index:40;pointer-events:none;
  color:#080a0d;
}
.statusbar.light{color:#fff}
.sb-time{
  position:absolute;left:45.5px;top:12.8px;
  font-family:"SF Pro Text","Segoe UI",Arial,sans-serif;
  font-size:17.2px;line-height:18px;font-weight:600;letter-spacing:.75px;
}
.sb-right{position:absolute;right:18px;top:16px;height:14px;display:flex;align-items:center;gap:6px}
.sb-signal{display:flex;align-items:flex-end;gap:1.2px;height:10.4px}
.sb-signal i{display:block;width:1.55px;border-radius:.8px;background:currentColor}
.sb-signal i:nth-child(1){height:4.2px}.sb-signal i:nth-child(2){height:6.1px}
.sb-signal i:nth-child(3){height:8px;opacity:.48}.sb-signal i:nth-child(4){height:10px;opacity:.32}
.sb-wifi{width:16px;height:12px;display:block}
.sb-wifi path{stroke:currentColor;stroke-width:3.8;fill:none;stroke-linecap:round}
.sb-batt{width:22px;height:10.5px;border:1.1px solid rgba(0,0,0,.45);border-radius:3.1px;position:relative;background:rgba(16,46,94,.82)}
.statusbar.light .sb-batt{border-color:rgba(255,255,255,.55)}
.sb-batt::before{content:"";position:absolute;left:1.4px;top:1.4px;bottom:1.4px;width:8px;border-radius:1px;background:#73c76c}
.sb-batt::after{content:"";position:absolute;right:-2.6px;top:2.6px;width:1.7px;height:4px;background:currentColor;border-radius:0 2px 2px 0;opacity:.55}
.sb-batt b{position:absolute;right:1.2px;top:0;bottom:0;display:flex;align-items:center;font-family:"SF Pro Text","Segoe UI",Arial;font-size:8.2px;font-weight:600;color:#fff;letter-spacing:-.2px}

/* ---------- blue app bar ---------- */
.appbar{
  position:absolute;top:0;left:0;right:0;height:132px;z-index:25;
  background:linear-gradient(180deg,#2c6ee8 0%,#2f78ec 73%,#4e82e8 100%);
  color:#fff;
}
.appbar .navline{
  position:absolute;top:44px;left:0;right:0;height:44px;
  display:flex;align-items:center;justify-content:center;
}
.appbar .navtitle{font-size:17px;font-weight:500;letter-spacing:.4px}
.iconbtn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:inherit}
.appbar .navleft{position:absolute;left:8px;top:4px}
.appbar .navright{position:absolute;right:9px;top:4px;display:flex;gap:6px}
.back-ic{width:9px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(135deg);margin-left:3px;margin-top:-1px}
.navico{width:22px;height:22px;display:block}
.navico.envelope{width:22px;height:17px;border:1.7px solid currentColor;border-radius:2px;position:relative}
.navico.envelope::before,.navico.envelope::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:1.7px;background:currentColor;transform-origin:left center}
.navico.envelope::before{transform:rotate(30deg)}
.navico.envelope::after{transform:rotate(-30deg);left:8px;width:13px}
.navico.plus{position:relative}
.navico.plus::before,.navico.plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%);border-radius:1px}
.navico.plus::before{width:22px;height:1.5px}.navico.plus::after{width:1.5px;height:22px}
.appbar.darkblue{background:linear-gradient(180deg,#1a58c8 0%,#1c59c8 100%);height:86px}
.roundmenu{
  display:flex;align-items:center;gap:0;height:31px;border:1.3px solid rgba(255,255,255,.72);
  border-radius:17px;padding:0 10px;position:absolute;right:10px;top:6px;
}
.roundmenu .menu-ic{width:18px;height:14px;border-top:1.6px solid currentColor;border-bottom:1.6px solid currentColor;position:relative}
.roundmenu .menu-ic::after{content:"";position:absolute;left:0;right:0;top:5px;border-top:1.6px solid currentColor}
.roundmenu .menu-sep{width:1px;height:16px;background:rgba(255,255,255,.55);margin:0 10px}
.roundmenu .close-ic{width:15px;height:15px;border:1.5px solid currentColor;border-radius:50%;position:relative}
.roundmenu .close-ic::before,.roundmenu .close-ic::after{content:"";position:absolute;left:3px;top:6px;width:7px;height:1.4px;background:currentColor}
.roundmenu .close-ic::before{transform:rotate(45deg)}.roundmenu .close-ic::after{transform:rotate(-45deg)}

/* ---------- fixed tab bar ---------- */
.tabbar{
  position:absolute;left:22px;top:729px;width:331px;height:72px;border-radius:36px;z-index:30;
  background:linear-gradient(180deg,rgba(253,254,255,.94),rgba(246,250,253,.92));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 6px 18px rgba(91,125,165,.13),inset 0 1px 0 rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);backdrop-filter:blur(20px) saturate(1.15);
}
.tabbar .active-pill{
  position:absolute;left:4px;top:4.8px;width:74.5px;height:62.5px;border-radius:32px;
  background:radial-gradient(100% 100% at 50% 40%,rgba(177,187,198,.18),rgba(177,187,198,.28));
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);z-index:0;
  transition:transform .28s cubic-bezier(.22,.9,.25,1);
}
.tabbar .tabs{position:absolute;left:13px;right:13px;top:0;height:72px;display:flex;z-index:1}
.tabbar .tab{position:relative;flex:1 1 61px;width:61px;text-align:center;color:#050608;text-decoration:none}
.tabbar .tab-ico{position:absolute;left:50%;top:10.5px;transform:translateX(-50%);width:28px;height:26px;display:flex;align-items:center;justify-content:center}
.tabbar .tab-ico svg{display:block}
.tabbar .tab-label{position:absolute;left:-7px;right:-7px;top:36px;font-size:12px;line-height:16px;letter-spacing:0;white-space:nowrap}
.tabbar .tab.active{color:#2b55d8}
.tabbar .tab.active .tab-label{color:#2c54cf}
.tabbar .tab.active .tab-ico svg{filter:drop-shadow(0 .5px 0 rgba(41,77,200,.15))}

/* ---------- privacy pill ---------- */
.privacy-float{
  position:absolute;left:69px;bottom:82px;width:244px;height:38px;border-radius:19px;z-index:32;
  display:flex;align-items:center;justify-content:center;
  background:#b8bec3;color:#171b1e;font-size:13.5px;line-height:18px;letter-spacing:0;white-space:nowrap;
  box-shadow:0 2px 8px rgba(73,91,109,.08);
}

/* ---------- common helpers ---------- */
.card{background:#fff;border-radius:10px;box-shadow:0 4px 14px rgba(76,110,157,.07)}
.fadein{animation:fadein .28s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}