@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/onest-cyrillic-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/onest-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/onest-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/onest-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  font-family: Onest, system-ui, sans-serif;
  color: #101955;
  background: #f8f9ff;
  color-scheme: light;
  --violet: #7628fa;
  --blue: #1247f7;
  --cyan: #50e8ff;
  --navy: #101b68;
  --ink: #101955;
  --muted: #63729b;
}

body { background: #f8f9ff; }
.shell {
  position: relative;
  isolation: isolate;
  background: #f8f9ff;
  box-shadow: 0 0 56px #1a1f6a0d;
}
.shell::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 610px;
  background:
    radial-gradient(circle at 85% 18%, #57b7ff4a, transparent 31%),
    radial-gradient(circle at 8% 72%, #b538ff77, transparent 37%),
    linear-gradient(155deg, #8627f9 0%, #6129fc 44%, #1247f7 100%);
}
.topbar {
  height: 76px;
  border-bottom: 1px solid #ffffff2d;
  background: linear-gradient(105deg, #7926f8ed, #4734f5ed);
  box-shadow: 0 8px 25px #2417a31a;
}
.brand { color: #fff; font-size: 21px; letter-spacing: -.045em; }
.brand strong { font-weight: 850; }
.icon-button {
  border: 1px solid #ffffff51;
  background: #ffffff1b;
  color: #fff;
  border-radius: 12px;
}
.icon-button:active { background: #ffffff37; }
#notice-dot { background: var(--cyan); box-shadow: 0 0 0 2px #572cff; }
main { position: relative; padding-top: 25px; }
h1 { color: #fff; font-size: clamp(30px, 7vw, 42px); font-weight: 850; }
h2, h3 { color: var(--ink); font-weight: 800; }
p { line-height: 1.5; }
.intro { color: #ebe6ff; }
.role {
  color: #fff;
  border: 1px solid #ffffff6b;
  background: #ffffff22;
  box-shadow: inset 0 1px #ffffff20;
}
.muted { color: var(--muted); }
.eyebrow { color: var(--blue); }
.tag {
  border-color: #5376ff44;
  background: #e9efff;
  color: #1b43d4;
  border-radius: 999px;
}

.card {
  border: 1px solid #e1e8fa;
  background: #fff;
  color: var(--ink);
  border-radius: 24px;
  box-shadow: 0 15px 38px #16277814;
}
.card-accent {
  border-color: #8398ff50;
  background:
    radial-gradient(circle at 87% 7%, #284ce973, transparent 35%),
    linear-gradient(145deg, #142477, #0b155a 62%, #0a1150);
  color: #fff;
  box-shadow: 0 18px 42px #07126646;
}
.card-accent h2, .card-accent h3 { color: #fff; }
.card-accent .row > h3 { margin: 0; }
.card-accent .muted { color: #bdc9f8; }
.card-accent .eyebrow { color: var(--cyan); }
.card-accent .tag {
  border-color: #56c6ff72;
  background: #6fcaff1b;
  color: #82eaff;
}
.big-number { color: var(--blue); font-weight: 850; }
.card-accent .big-number { color: #fff; }
.progress { background: #253675; }
.progress > div { background: linear-gradient(90deg, #39e2ff, #3d77ff); }
.progress-label { color: #b2c0f1; }

.device-button {
  border: 1px solid #cedaff;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 24px #1538b310;
}
.device-button .device-icon {
  background: #e9efff;
  color: var(--blue);
}
.device-button small { color: var(--muted); }
.device-button .arrow { color: var(--blue); }
.card-accent .device-button {
  border-color: #519aff99;
  background: #111f70;
  color: #fff;
  box-shadow: inset 0 1px #ffffff12;
}
.card-accent .device-button .device-icon { background: #3158e454; color: var(--cyan); }
.card-accent .device-button small { color: #aebdf2; }
.card-accent .device-button .arrow { color: var(--cyan); }

.stat {
  border: 1px solid #cbd8ff;
  background: #f2f6ff;
}
.stat small { color: #6f7eac; }
.stat strong { color: var(--ink); }
.stat strong.orange { color: var(--blue); }
.card-accent .stat { border-color: #6680ed4a; background: #ffffff12; }
.card-accent .stat small { color: #adbbeb; }
.card-accent .stat strong { color: #fff; }
.card-accent .stat strong.orange { color: var(--cyan); }
.text-link { color: var(--blue); }
.card-accent .text-link { color: #82eaff; }
.primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 9px 22px #1646dc39;
  font-weight: 800;
}
.primary:active { background: #0b38d5; }
.card-accent .primary { background: #fff; color: var(--blue); box-shadow: 0 8px 25px #0002; }
.secondary {
  border-color: #cdd9f9;
  background: #f5f7ff;
  color: var(--blue);
}
.ghost { color: #53658f; }
.small-card {
  border-color: #dbe5fb;
  background: #fff;
  box-shadow: 0 13px 28px #2134a31c;
}
.small-card small { color: var(--muted); }
.small-card strong { color: var(--blue); }
.info-box {
  border-color: #d9e3fb;
  background: #f2f6ff;
}
.info-box strong { color: var(--blue); }
.info-box p { color: var(--muted); }
.card-accent .info-box { border-color: #6483e454; background: #ffffff13; }
.card-accent .info-box strong { color: var(--cyan); }
.card-accent .info-box p { color: #c0c9f2; }
.field span { color: #495b86; }
input, textarea {
  border-color: #dbe4f8;
  background: #f8faff;
  color: var(--ink);
}
input:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #2456f51c; }
input::placeholder, textarea::placeholder { color: #8794b5; }
.card-accent .linkbox input { border-color: #7589d371; background: #0a1558; color: #dbe5ff; }
.ticket, .notice, .payment-row {
  border-color: #dfe6f7;
  background: #f8faff;
  color: var(--ink);
}
.ticket small, .notice small, .payment-row small { color: var(--muted); }
.empty { border-color: #cbd8f4; color: #7280a4; background: #f8faff; }
.card-accent .empty { background: #ffffff0d; border-color: #7b90e178; color: #c7d2ff; }
.platforms button { border-color: #d6e0f5; background: #f5f7ff; color: var(--ink); }
.platforms button.active { border-color: var(--blue); background: #e7edff; color: var(--blue); }
.message { background: #edf2ff; }
.message.support { background: #e6efff; border: 1px solid #c9d8fc; }
.message small { color: #6476a0; }
.countdown { color: var(--blue); }
.card-accent .countdown { color: var(--cyan); }

.bottom-nav {
  border-color: #dbe4fb;
  background: #fffffff5;
  box-shadow: 0 -10px 35px #0c1e8430;
}
.bottom-nav button { color: #65749d; font-weight: 650; }
.bottom-nav button.selected {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px #1646dc48;
}
.overlay { background: #07115ebd; backdrop-filter: blur(5px); }
.modal { border-color: #d8e2fb; background: #fff; color: var(--ink); box-shadow: 0 25px 60px #07115e55; }
.modal h2 { color: var(--ink); }
.toast { border-color: #708ef8; background: #12237b; color: #fff; box-shadow: 0 12px 32px #06105366; }
.loading { color: #fff; }

@media (max-width: 390px) {
  .card { border-radius: 21px; }
  .small-card { padding: 16px; }
  .small-card strong { font-size: 19px; }
  .role { margin-top: 5px; }
}