:root{
  --primary:#0758d8;
  --primary2:#0b6ff2;
  --dark:#062864;
  --accent:#ffad00;
  --bg:#eef4ff;
  --text:#122033;
  --muted:#667085;
  --ok:#16a34a;
}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(160deg,#eef5ff,#ffffff);color:var(--text)}
body{min-height:100dvh}
.hidden{display:none!important}
.launcher{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:22px}
.heroCard{
  width:min(520px,100%);
  background:#fff;
  border:1px solid #dbe7fb;
  border-radius:28px;
  padding:28px;
  text-align:center;
  box-shadow:0 26px 70px rgba(27,72,145,.16)
}
.appLogo{width:118px;height:118px;border-radius:26px;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.statusPill{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:18px;padding:7px 12px;border-radius:999px;
  background:#ecfdf3;color:#16743c;font-size:12px;font-weight:800
}
.statusPill .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(22,163,74,.12)}
h1{font-size:34px;margin:14px 0 4px;color:#0d2c66}
.subtitle{margin:0;color:var(--muted);font-size:15px}
.modeBox{
  margin-top:22px;padding:20px;border-radius:20px;
  background:#f8fbff;border:1px solid #dce8fa
}
.modeBox h2{margin:4px 0 8px;font-size:21px}
.modeBox p{color:var(--muted);line-height:1.55;margin:0 0 15px}
.btn{
  width:100%;border:0;border-radius:14px;padding:14px 16px;
  font-size:15px;font-weight:900;cursor:pointer;margin-top:10px
}
.btnPrimary{background:linear-gradient(135deg,var(--primary2),var(--primary));color:#fff;box-shadow:0 10px 24px rgba(7,88,216,.24)}
.btnSecondary{background:#fff;color:#174a98;border:1px solid #bfd2ef}
.hintBox,.securityNote{
  margin-top:15px;padding:13px 14px;border-radius:14px;text-align:left;
  font-size:12px;line-height:1.5
}
.hintBox{background:#fff7df;border:1px solid #f4d889;color:#705610}
.securityNote{background:#eef8ff;border:1px solid #c8e5fb;color:#315a78}
.spinner{
  width:44px;height:44px;margin:2px auto 14px;
  border:4px solid #d9e7fb;border-top-color:var(--primary);
  border-radius:50%;animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.bigIcon{font-size:48px}
#updateBar{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:90;background:#102a56;color:#fff;padding:12px 14px;
  border-radius:15px;display:flex;gap:12px;align-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.25);width:min(430px,calc(100% - 28px))
}
#updateBar .btn{width:auto;margin:0;padding:8px 12px;background:#fff;color:#102a56}
@media(max-width:600px){
  .launcher{padding:14px}
  .heroCard{padding:22px 16px;border-radius:22px}
  .appLogo{width:100px;height:100px;border-radius:22px}
  h1{font-size:29px}
}