:root {
  --primary: #5868f5;
  --primary-deep: #4156ec;
  --ink: #202335;
  --muted: #a2a5af;
  --surface: #f6f6f7;
  --line: #eeeeF2;
  font-family: "Inter", "Noto Sans SC", system-ui, sans-serif;
  color: var(--ink);
  background: #f6f7fb;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: #f6f7fb; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.desktop-glow { position: fixed; z-index: 0; width: 460px; height: 460px; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.glow-one { top: -230px; left: -170px; background: radial-gradient(circle, rgba(92,112,255,.16), transparent 68%); }
.glow-two { right: -200px; bottom: -250px; background: radial-gradient(circle, rgba(33,216,255,.13), transparent 68%); }

.download-page { width: min(100%, 474px); min-height: 100vh; position: relative; z-index: 1; margin: 0 auto; padding: 58px 32px 34px; background: #fff; box-shadow: 0 0 70px rgba(40,47,81,.08); }
.app-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo-wrap { width: 148px; height: 148px; position: relative; display: grid; place-items: center; margin-bottom: 22px; }
.logo-halo { position: absolute; width: 168px; height: 168px; border-radius: 48px; background: linear-gradient(145deg, rgba(76,101,255,.17), rgba(14,207,255,.08)); filter: blur(10px); transform: rotate(8deg); }
.app-logo { width: 136px; height: 136px; position: relative; z-index: 1; display: block; object-fit: cover; border: 4px solid rgba(255,255,255,.84); border-radius: 34px; box-shadow: 0 18px 38px rgba(31,60,174,.26); }
.android-badge { width: 35px; height: 35px; position: absolute; z-index: 2; right: -1px; bottom: -1px; display: grid; place-items: center; color: white; border: 4px solid white; border-radius: 50%; background: #55c87a; box-shadow: 0 5px 14px rgba(55,136,82,.22); }
.android-badge svg { width: 17px; fill: currentColor; }
.overline { margin: 0 0 8px; color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: .19em; }
h1 { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -.04em; }
.tagline { margin: 9px 0 15px; color: #90949f; font-size: 13px; }
.status-pill { display: flex; align-items: center; gap: 8px; height: 27px; padding: 0 12px; color: #8e929e; border-radius: 999px; background: var(--surface); font-size: 9px; font-weight: 500; }
.status-pill i { width: 2px; height: 2px; border-radius: 50%; background: #c6c8ce; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4fca80; box-shadow: 0 0 0 3px rgba(79,202,128,.12); }

.action-card { margin-top: 34px; }
.segmented-control { height: 58px; display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden; padding: 0; border-radius: 999px; background: #f1f3f8; }
.segment { position: relative; z-index: 1; border: 0; outline: 0; color: #6c6f7b; background: transparent; cursor: pointer; font-size: 14px; font-weight: 600; transition: color .22s ease, background .22s ease, box-shadow .22s ease; }
.segment.is-active { z-index: 2; color: white; background: linear-gradient(135deg, #6471f8, #5063f2); box-shadow: 0 11px 24px rgba(77,96,238,.24); }
.segment:first-child.is-active { border-radius: 999px 20px 20px 999px; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); padding-right: 14px; }
.segment:last-child.is-active { border-radius: 20px 999px 999px 20px; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); padding-left: 14px; }
.tab-panel { padding-top: 25px; animation: panel-in .28s ease both; }
.tab-panel[hidden] { display: none; }
.info-pill { min-height: 63px; display: flex; align-items: center; gap: 12px; margin-bottom: 13px; padding: 10px 17px; border: 1px solid transparent; border-radius: 999px; background: var(--surface); transition: border-color .2s, transform .2s; }
.info-pill:hover { border-color: #e6e8f2; transform: translateY(-1px); }
.info-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: #7681f2; border-radius: 50%; background: #e9ebff; }
.info-icon svg { width: 17px; fill: currentColor; }
.info-pill small, .info-pill strong { display: block; }
.info-pill small { margin-bottom: 2px; color: #aaadb6; font-size: 9px; font-weight: 500; }
.info-pill strong { color: #4d505b; font-size: 12px; font-weight: 600; }
.verified, .info-side { margin-left: auto; padding: 5px 9px; border-radius: 99px; color: #6681df; background: #e8eeff; font-size: 8px; font-weight: 700; }
.info-side { color: #9a9da7; background: #ebecef; }
.download-button { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; border: 0; border-radius: 999px; color: white; background: linear-gradient(135deg, #6272fa 0%, #5061f1 58%, #4559ed 100%); box-shadow: 0 14px 30px rgba(76,95,239,.29); cursor: pointer; font-size: 14px; font-weight: 700; letter-spacing: .02em; transition: transform .2s, box-shadow .2s; }
.download-button:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(76,95,239,.35); }
.download-button:active { transform: translateY(0); }
.download-button svg { width: 20px; fill: currentColor; }
.qr-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 17px 0 0; padding: 4px; border: 0; color: #a4a7b0; background: transparent; cursor: pointer; font-size: 9px; }
.qr-button:hover { color: var(--primary); }
.qr-button svg { width: 14px; fill: currentColor; }
.qr-box { display: flex; align-items: center; gap: 15px; width: fit-content; margin: 18px auto 0; padding: 11px 18px 11px 11px; border: 1px solid #eceef4; border-radius: 22px; background: white; box-shadow: 0 14px 36px rgba(40,49,92,.1); }
.qr-box[hidden] { display: none; }
.qr-box img { width: 96px; height: 96px; border-radius: 8px; }
.qr-box strong, .qr-box small { display: block; white-space: nowrap; }
.qr-box strong { font-size: 11px; }.qr-box small { margin-top: 4px; color: #afb2ba; font-size: 8px; }

.install-steps { list-style: none; margin: 0; padding: 0; }
.install-steps li { min-height: 78px; display: flex; align-items: center; gap: 13px; margin-bottom: 13px; padding: 14px 17px; border-radius: 28px; background: var(--surface); }
.install-steps li > span { width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; color: white; border-radius: 50%; background: linear-gradient(135deg, #727df8, #5364f2); box-shadow: 0 7px 14px rgba(78,96,235,.2); font-size: 11px; font-weight: 700; }
.install-steps strong { display: block; margin-bottom: 4px; color: #4d505b; font-size: 11px; }
.install-steps p { margin: 0; color: #aaaeb7; font-size: 9px; line-height: 1.55; }
.back-to-download { margin-top: 25px; }
.guide-note { max-width: 320px; margin: 17px auto 0; color: #b0b3ba; text-align: center; font-size: 8px; line-height: 1.65; }

.release-note { display: flex; align-items: center; justify-content: space-between; margin-top: 31px; padding: 19px 6px 21px; border-top: 1px solid #f0f1f4; border-bottom: 1px solid #f0f1f4; }
.release-note > div { display: flex; align-items: center; gap: 11px; }
.sparkle { width: 31px; height: 31px; display: grid; place-items: center; color: #6172f4; border-radius: 10px; background: #edf0ff; }
.release-note strong, .release-note p { display: block; }
.release-note strong { font-size: 10px; }.release-note p { margin: 4px 0 0; color: #a7aab3; font-size: 8px; }
.release-note time { flex: 0 0 auto; margin-left: 10px; color: #b0b3bc; font-size: 8px; }
footer { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; color: #b5b7be; font-size: 8px; }
footer span { display: flex; align-items: center; gap: 5px; }
footer i { width: 5px; height: 5px; border-radius: 50%; background: #5bc986; }
footer p { margin: 0; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 25px; padding: 12px 18px; border-radius: 999px; color: white; background: rgba(31,35,52,.92); box-shadow: 0 10px 30px rgba(30,35,55,.2); opacity: 0; pointer-events: none; transform: translate(-50%, 18px); transition: opacity .25s, transform .25s; font-size: 11px; white-space: nowrap; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.device-gate { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: auto; padding: 30px 20px; background: radial-gradient(circle at 50% 10%, rgba(91,109,248,.12), transparent 32%), #fff; }
.device-gate[hidden] { display: none; }
.gate-card { width: min(100%, 390px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.gate-logo-wrap { width: 116px; height: 116px; position: relative; display: grid; place-items: center; margin-bottom: 23px; }
.gate-logo-glow { position: absolute; inset: -12px; border-radius: 38px; background: linear-gradient(145deg, rgba(78,101,255,.22), rgba(22,205,255,.09)); filter: blur(10px); transform: rotate(8deg); }
.gate-logo { width: 104px; height: 104px; position: relative; z-index: 1; object-fit: cover; border: 3px solid white; border-radius: 28px; box-shadow: 0 17px 34px rgba(35,61,167,.24); }
.gate-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; color: #4b62ef; border-radius: 999px; background: #eef0ff; font-size: 10px; font-weight: 700; }
.gate-badge svg { width: 15px; fill: currentColor; }
.gate-card h2 { margin: 18px 0 10px; color: var(--ink); font-size: 26px; letter-spacing: -.04em; }
.gate-card > p { max-width: 310px; margin: 0; color: #969aa5; font-size: 12px; line-height: 1.75; }
.gate-qr { width: 176px; height: 176px; display: grid; place-items: center; margin: 27px 0 13px; padding: 10px; border: 1px solid #eceef4; border-radius: 24px; background: white; box-shadow: 0 16px 40px rgba(41,50,94,.1); }
.gate-qr img { width: 156px; height: 156px; border-radius: 14px; }
.gate-scan-tip { color: #555966; font-size: 11px; }
.gate-card > small { margin-top: 8px; color: #b0b3bc; font-size: 8px; }
body.is-device-blocked { overflow: hidden; }
body.is-device-blocked .download-page { visibility: hidden; }

@keyframes panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

@media (max-width: 520px) {
  :root { background: white; }
  body { background: white; }
  .desktop-glow { display: none; }
  .download-page { width: 100%; padding: max(45px, env(safe-area-inset-top)) 26px max(26px, env(safe-area-inset-bottom)); box-shadow: none; }
  .logo-wrap { width: 130px; height: 130px; margin-bottom: 18px; }
  .logo-halo { width: 148px; height: 148px; }
  .app-logo { width: 120px; height: 120px; border-radius: 31px; }
  .android-badge { right: -2px; bottom: -2px; }
  .action-card { margin-top: 29px; }
  .segmented-control { height: 56px; }
  .device-gate { padding-top: max(32px, env(safe-area-inset-top)); padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .gate-qr { margin-top: 24px; }
}

@media (max-width: 360px) {
  .download-page { padding-left: 20px; padding-right: 20px; }
  .app-logo { width: 110px; height: 110px; }
  .logo-wrap { height: 118px; }
  .tagline { font-size: 12px; }
  .release-note time { display: none; }
}