@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; }
@media (min-width: 760px) {
  body {
    background: radial-gradient(ellipse at 4% 5%, #9d7fff55, transparent 48%),
      radial-gradient(ellipse at 96% 52%, #84bbff66, transparent 48%),
      linear-gradient(145deg, #ece9ff, #f8f9ff 45%, #e9efff);
    background-attachment: fixed;
  }
  .shell { box-shadow: 0 18px 100px #29206a22; }
}
.plan-grid { display: grid; gap: 12px; margin-top: 20px; }
.plan-option { padding: 20px; border: 1px solid #dce3ff; border-radius: 22px; background: #f8f9ff; }
.plan-option.current-plan { border-color: #1247f7; background: #edf1ff; }
.plan-option .row { align-items: flex-start; gap: 12px; }
.plan-option h3 { font-size: 19px; margin: 0; }
.plan-option p { color: #63729b; font-size: 14px; margin: 12px 0 18px; }
.plan-option button { width: 100%; display: flex; gap: 10px; align-items: center; justify-content: center; }
.plan-price { display: flex; align-items: center; gap: 5px; color: #1247f7; white-space: nowrap; }
.plan-price svg { width: 17px; height: 17px; }
.plan-warning { display: block; color: #b13752; line-height: 1.5; margin-bottom: 16px; }
@media (min-width: 520px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-option { display: flex; flex-direction: column; } .plan-option button { margin-top: auto; } }
.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: 760px;
  pointer-events: none;
  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%);
  /* Fade the colour itself so there is no edge behind cards of any height. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, #000e 40%, #0008 62%, #0002 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 28%, #000e 40%, #0008 62%, #0002 82%, transparent 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-count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border: 2px solid #572cff;
  border-radius: 999px;
  background: var(--cyan);
  color: #102066;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
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; }

main.support-view { padding-bottom: 116px; }
.support-faq .help-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.support-faq .help-heading > svg { width: 40px; height: 40px; padding: 9px; border-radius: 13px; background: #edf0ff; color: var(--blue); flex-shrink: 0; }
.support-faq h3 { margin: 0; }
.support-faq .help-heading p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.support-faq details { border-top: 1px solid #e8ecf8; }
.support-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; list-style: none; cursor: pointer; font-size: 14px; font-weight: 700; }
.support-faq summary::-webkit-details-marker { display: none; }
.support-faq summary > svg { width: 17px; height: 17px; flex-shrink: 0; color: #8391b3; transition: transform .18s ease; }
.support-faq details[open] summary > svg { transform: rotate(90deg); color: var(--blue); }
.support-faq details[open] summary { color: var(--blue); }
.support-faq details p { margin: -3px 0 18px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.support-faq details:last-child:not([open]) summary { padding-bottom: 0; }
.support-faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.support-empty { display: flex; align-items: center; gap: 13px; padding: 18px; border: 0; text-align: left; border-radius: 16px; }
.support-empty > svg { width: 25px; height: 25px; flex-shrink: 0; color: #8190b5; }
.support-empty strong { display: block; color: var(--ink); font-size: 14px; }
.support-empty p { margin: 4px 0 0; font-size: 13px; }
.support-fab {
  position: fixed;
  z-index: 13;
  left: 50%;
  bottom: calc(var(--bottom-nav-height, calc(80px + env(safe-area-inset-bottom))) + 20px);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 40px);
  min-height: 56px;
  padding: 16px 28px;
  gap: 10px;
  border: 1px solid #ffffff65;
  border-radius: 999px;
  background: linear-gradient(120deg, #6634fb, #1247f7);
  color: #fff;
  box-shadow: 0 16px 36px #2443ce40, 0 5px 12px #253ddc26, 0 0 0 5px #ffffffb3;
  transition: transform .18s ease, box-shadow .18s ease;
}
.support-fab svg { width: 21px; height: 21px; }
.support-fab:focus-visible { outline: 3px solid #50e8ff; outline-offset: 7px; }
@media (hover: hover) {
  .support-fab:hover { transform: translate(-50%, -3px); box-shadow: 0 20px 42px #2443ce4d, 0 7px 14px #253ddc26, 0 0 0 5px #ffffffb3; }
}
.support-fab:active { transform: translateX(-50%) scale(.97); background: linear-gradient(120deg, #6634fb, #1247f7); }
body.menu-open { overflow: hidden; }
body.menu-open .support-fab { visibility: hidden; }
.menu-drawer {
  position: fixed; z-index: 11; top: 76px;
  bottom: var(--bottom-nav-height, 80px); left: 50%; transform: translateX(-50%);
  width: min(680px, 100%); padding: 22px 20px; overflow-y: auto;
  background: linear-gradient(160deg, #f9f7fff7, #f8fafffa);
  backdrop-filter: blur(22px); box-shadow: 0 12px 32px #10226620;
}
.menu-account { display: flex; align-items: center; gap: 13px; width: 100%; padding: 0 0 22px; margin-bottom: 15px; text-align: left; background: none; color: var(--ink); border: 0; border-bottom: 1px solid #dee5f8; }
.account-avatar { position: relative; overflow: hidden; display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 17px; background: linear-gradient(135deg, #792af8, #1247f7); color: #fff; font-size: 18px; font-weight: 800; }
.account-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.menu-account strong, .menu-account small { display: block; }
.menu-account small { margin-top: 4px; color: var(--muted); font-size: 13px; }
.menu-account > svg { margin-left: auto; width: 19px; color: #8391b3; }
.menu-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 17px 18px; margin: 4px 0; border: 0; border-radius: 16px; background: none; color: #52658f; font-size: 16px; text-align: left; }
.menu-item svg { width: 22px; height: 22px; flex-shrink: 0; }
.menu-item.active { background: #e6ecff; color: var(--blue); font-weight: 750; }
.menu-item:focus-visible, .menu-account:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.menu-exit { margin-top: 14px; border-top: 1px solid #dee5f8; border-radius: 0; color: #c93659; }
.document-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0; }
.document-tabs button { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border: 1px solid #ffffff60; border-radius: 13px; background: #ffffff25; color: #fff; font-size: 13px; font-weight: 700; }
.document-tabs button.active { color: var(--blue); background: #fff; border-color: #fff; box-shadow: 0 6px 18px #12256b20; }
.document-tabs svg { width: 18px; height: 18px; flex-shrink: 0; }
.legal-document h2 { font-size: 22px; line-height: 1.3; }
.legal-document p, .legal-document li { color: #52658b; font-size: 14px; line-height: 1.75; }
.legal-document p { margin: 20px 0; }
.legal-document strong { color: var(--ink); }
.legal-document ul { padding-left: 21px; }
.legal-document li { padding-left: 3px; margin: 8px 0; }
.legal-section { padding-top: 23px; margin-top: 23px; border-top: 1px solid #e7ecf8; }
.legal-section h3 { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; font-size: 17px; }
.legal-section h3 svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--blue); margin-top: 2px; }
.legal-updated { border-top: 1px solid #e7ecf8; padding-top: 20px; margin-top: 28px; color: #7b89aa; font-size: 12px; }
.profile-fields { margin: 20px 0 0; }
.profile-fields > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid #e8edf8; font-size: 14px; }
.profile-fields > div:last-child { padding-bottom: 0; border: 0; }
.profile-fields dt { color: var(--muted); }
.profile-fields dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.preference { padding: 23px 0; border-bottom: 1px solid #e8edf8; }
.preference-row { display: flex; position: relative; align-items: center; gap: 18px; cursor: pointer; }
.preference-row > span:first-child { flex: 1; }
.preference-row strong { display: block; font-size: 15px; }
.preference-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.preference-row input { position: absolute; right: 0; width: 44px; height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.switch-track { display: block; width: 44px; height: 26px; flex-shrink: 0; padding: 3px; background: #d7dff0; border-radius: 99px; transition: background .18s ease; }
.switch-track::before { content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px #15266a20; transition: transform .18s ease; }
.preference-row input:checked + .switch-track { background: var(--blue); }
.preference-row input:checked + .switch-track::before { transform: translateX(18px); }
.preference-row input:focus-visible + .switch-track { outline: 2px solid var(--blue); outline-offset: 4px; }
.preference-option { display: flex; align-items: center; gap: 12px; margin-top: 15px; color: var(--muted); font-size: 13px; }
.preference-option select { font: inherit; padding: 9px 12px; border: 1px solid #dce5f8; border-radius: 11px; background: #f7f9ff; color: var(--ink); }
.preference-option select:disabled { opacity: .45; }
.settings-status { color: #7c8baa; font-size: 12px; margin: 19px 0 0; }
.page-back { display: inline-flex; align-items: center; gap: 7px; background: #ffffff20; color: #fff; border: 1px solid #ffffff40; border-radius: 99px; padding: 9px 13px; margin-bottom: 9px; font-size: 12px; }
.page-back svg { width: 16px; height: 16px; }
.tour-overlay { backdrop-filter: none; background: #07115e80; padding-bottom: calc(var(--bottom-nav-height, 80px) + 22px); }
.tour-overlay .modal { max-height: min(60svh, 450px); padding: 24px; box-shadow: 0 20px 60px #07115e4d; }
.tour-overlay h2 { margin: 22px 0 12px; font-size: 24px; line-height: 1.2; }
.tour-overlay p { font-size: 14px; line-height: 1.65; margin: 0; }
.tour-step { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--blue); }
.tour-step > span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.tour-step svg { width: 19px; height: 19px; }
.tour-step small { font-size: 12px; color: #7b89aa; }
.tour-actions { align-items: center; gap: 4px; }
.tour-actions .ghost { font-size: 13px; padding: 10px 8px; }
.tour-actions .primary { padding: 13px 19px; }
.tour-actions .primary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.tour-actions .ghost:first-child { margin-right: auto; }
body.tour-active .bottom-nav { z-index: 22; }
body.tour-active .bottom-nav button:not(.tour-target) { opacity: .45; }
body.tour-active .bottom-nav .tour-target { box-shadow: 0 0 0 3px var(--cyan), 0 6px 22px #1646dc40; }
body.tour-active .support-fab { visibility: hidden; }
.ticket-thread .message { line-height: 1.6; overflow-wrap: anywhere; }
.ticket-thread .message > div { white-space: pre-wrap; font-size: 14px; }
#notification-settings { margin-top: 6px; }
#notification-settings + svg, .card > .row > svg { width: 20px; height: 20px; color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .support-fab, .support-faq summary > svg, .switch-track, .switch-track::before { transition: none; } }

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