/* BLUP design direction — local only until reviewed in Telegram. */
:root {
  --bg: #f5fbff;
  --surface: #fff;
  --surface-solid: #fff;
  --text: #17202a;
  --muted: #6b7783;
  --line: #e3edf4;
  --blue: #00aeef;
  --blue-deep: #087ae8;
  --shadow: 0 14px 38px rgba(16, 100, 165, .08);
}

html, body { background: #f5fbff; }
body::before, body::after { display: none !important; }
.app-shell { background: linear-gradient(165deg, #fff 0%, #f5fbff 52%, #e8f7ff 100%); }
.sidebar { display: none !important; }
.workspace {
  max-width: 1120px;
  margin: 0 auto !important;
  padding: 28px 30px 125px;
}
.screen { max-width: 780px; }
.mobile-header {
  max-width: 780px;
  margin: 0 auto 28px;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
.mobile-header .brand-logo { width: 99px; height: 50px; transform: none; filter: none; }
.mobile-header .avatar { width: 40px; height: 40px; border-radius: 50%; box-shadow: none; }

/* One focal object and one clear action, as in the supplied reference. */
.dashboard-card {
  min-height: 350px;
  padding: 25px 27px 22px;
  border: 0;
  border-radius: 29px;
  color: #fff;
  background:
    radial-gradient(circle at 70% 4%, rgba(255,255,255,.43), transparent 37%),
    linear-gradient(127deg, #0578ed 0%, #00aeef 57%, #48d4ff 100%);
  box-shadow: 0 18px 34px rgba(0,140,225,.17);
}
.dashboard-card::before {
  z-index: 0;
  opacity: .16;
  background-image: radial-gradient(circle, #fff 1px, transparent 1.5px);
  background-size: 17px 17px;
  mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}
.dashboard-card::after { display: none; }
.dashboard-mascot {
  position: absolute;
  z-index: 1;
  width: 245px;
  right: 12px;
  top: 61px;
  filter: drop-shadow(0 18px 15px rgba(0,68,157,.2));
  pointer-events: none;
  animation: blup-float 4s ease-in-out infinite;
}
.dashboard-head, .dashboard-summary, .dashboard-end, .dashboard-connect { position: relative; z-index: 2; }
.dashboard-overline { margin-bottom: 8px; color: rgba(255,255,255,.81); font-size: 11px; letter-spacing: .045em; }
.dashboard-card .status-pill,
.dashboard-card .status-pill.inactive {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  font-size: 13px;
}
.dashboard-card .status-pill span { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.24); }
.dashboard-help { width: 36px; height: 36px; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.2); box-shadow: none; }
.dashboard-summary { width: 55%; margin: 82px 0 0; text-align: left; }
.dashboard-summary > span { color: rgba(255,255,255,.76); font-size: 12px; }
.dashboard-summary > strong { margin-top: 2px; color: #fff; font-size: clamp(37px, 5vw, 51px); letter-spacing: -.06em; }
.dashboard-meta, .dashboard-progress { display: none !important; }
.dashboard-end { margin-top: 7px; color: rgba(255,255,255,.8); text-align: left; font-size: 11px; }
.dashboard-end b { color: #fff; }
.dashboard-brand-title { display: none; }
.dashboard-start { display: none; }
.home-steps { display: none; }
.dashboard-card.is-inactive { min-height: 232px; }
.dashboard-card.is-inactive .dashboard-summary,
.dashboard-card.is-inactive .dashboard-end { display: none; }
.dashboard-card.is-inactive .dashboard-mascot { width: 220px; right: 8px; top: 13px; }
.dashboard-card.is-inactive .dashboard-brand-title {
  position: relative;
  z-index: 2;
  width: 53%;
  margin: 74px 0 0;
  display: block;
  color: #fff;
  font-size: clamp(34px,5vw,48px);
  line-height: 1;
  letter-spacing: -.06em;
}
.dashboard-card.is-inactive .dashboard-start {
  position: relative;
  z-index: 2;
  min-height: 42px;
  margin-top: 17px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 0;
  border-radius: 13px;
  color: #0878df;
  background: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.dashboard-start .ui-icon { width: 14px; height: 14px; }
.home-steps {
  min-height: 165px;
  padding: 20px 22px;
  border-radius: 0 0 24px 24px;
  background: #f3f3f3;
}
#screen-home.inactive-mode .home-steps { display: block; }
.home-steps h2 { margin: 0 0 7px; font-size: 20px; line-height: 1.15; letter-spacing: -.035em; }
.home-steps p { max-width: 270px; margin: 0; color: #64676a; font-size: 13px; line-height: 1.4; }
.home-steps-progress { margin-top: 18px; display: flex; align-items: center; }
.home-steps-progress span { width: 26px; height: 26px; flex: 0 0 auto; border: 2px solid #c8cccf; border-radius: 50%; background: #f7f7f7; }
.home-steps-progress span.current { border-color: #00a9ed; background: #00a9ed; box-shadow: inset 0 0 0 7px #fff; }
.home-steps-progress i { height: 2px; flex: 1; background: #c8cccf; }
#screen-home.inactive-mode .dashboard-actions { margin-top: 16px; }
.dashboard-connect {
  width: max-content;
  min-width: 220px;
  min-height: 48px;
  margin-top: 26px;
  padding: 0 16px;
  border: 0;
  border-radius: 15px;
  color: #0878df;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,75,157,.14);
}
.dashboard-connect > span { width: auto; height: auto; background: none; }
.dashboard-connect b { font-size: 13px; }
.dashboard-connect[hidden] { display: none !important; }

.dashboard-actions {
  margin: 15px 0 0;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 9px;
}
.dashboard-actions button {
  min-height: 78px;
  border: 0;
  border-radius: 20px;
  color: #24384a;
  background: #fff;
  box-shadow: 0 8px 22px rgba(11,81,141,.07);
  backdrop-filter: none;
}
.dashboard-actions button > span { background: #e8f7ff; color: #068deb; }
.dashboard-actions b { font-size: 11px; }
.dashboard-actions i { background: #078bea; }
.home-gift {
  width: 100%;
  min-height: 64px;
  margin-top: 14px;
  padding: 0 19px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 0;
  border-radius: 20px;
  color: #24384a;
  background: #fff;
  box-shadow: 0 8px 22px rgba(11,81,141,.07);
  text-align: left;
  cursor: pointer;
}
.home-gift span { width: 39px; height: 39px; border-radius: 13px; background: #e8f7ff; color: #078bea; display: grid; place-items: center; }
.home-gift b { flex: 1; font-size: 14px; }
.home-gift > .ui-icon { width: 16px; color: #9caebc; }
.meme-promo, .dashboard-promo, .device-card, .traffic-card,
.profile-list, .theme-card, .trust-card, .gift-card {
  border: 0 !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(11,81,141,.07) !important;
  backdrop-filter: none !important;
}
.meme-promo { margin-top: 10px; }
.meme-promo-icon { font-size: 25px; }
.dashboard-promo { margin-top: 10px; }
.promo-icon { border-radius: 13px; background: #e8f7ff; color: #078bea; box-shadow: none; }
.section-kicker { color: #1389d9; letter-spacing: .08em; }
.devices-heading { margin-top: 28px; }

/* The reference's sliding pill, without the old floating plus button. */
.bottom-nav,
:root[data-theme="dark"] .bottom-nav {
  position: fixed;
  z-index: 35;
  inset: auto 50% 14px auto;
  transform: translateX(50%);
  width: min(calc(100% - 24px), 540px);
  height: 70px;
  padding: 6px;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 36px rgba(12,65,106,.13);
  backdrop-filter: none;
}
.bottom-nav button,
:root[data-theme="dark"] .bottom-nav button {
  height: 58px;
  min-width: 0;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  color: #636d76;
  background: transparent;
}
.bottom-nav .ui-icon { width: 21px; height: 21px; }
.bottom-nav small { display: none; font-size: 12px; font-weight: 800; white-space: nowrap; }
.bottom-nav button.active:not(.bottom-action),
:root[data-theme="dark"] .bottom-nav button.active:not(.bottom-action) {
  color: #fff;
  background: linear-gradient(110deg, #00a9f0, #0579ec);
  box-shadow: 0 8px 19px rgba(0,140,226,.24);
}
.bottom-nav button.active small { display: block; }

.sheet { background: #f6fbff; }
.sheet-heading h2, .page-heading h1 { letter-spacing: -.055em; }
.plan-option { border: 0; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(11,81,141,.07); }
.plan-option.popular { border: 2px solid #05a9ec; }
.plan-option { min-height: 84px; padding: 9px 14px 9px 7px; justify-content: flex-start; gap: 10px; }
.plan-3d-icon { width: 67px; height: 67px; flex: 0 0 auto; object-fit: contain; }
.plan-option > span:not(.popular-label):not(:last-child) { min-width: 0; flex: 1; }
.plan-option > span:last-child { margin-left: auto; white-space: nowrap; }
.plan-option strong { font-size: 14px; }
.plan-option b { font-size: 17px; }
.plan-option small { font-size: 10px; }

.app-loader,
:root[data-theme="dark"] .app-loader {
  background: radial-gradient(circle at 50% 45%, #fff 0%, #f8fcff 52%, #e8f8ff 100%);
}
.loader-brand { width: clamp(195px, 57vw, 290px); animation: blup-float 3.8s ease-in-out infinite; }
.loader-brand img { filter: drop-shadow(0 18px 18px rgba(0,141,226,.16)); }
@keyframes blup-float { 50% { transform: translateY(-11px) rotate(2deg); } }

:root[data-theme="dark"] { --bg: #0b1622; --surface: #152535; --surface-solid: #152535; --text: #f3f8fc; --muted: #a0afbc; --line: #263d50; }
:root[data-theme="dark"] html,
:root[data-theme="dark"] body { background: #0b1622; }
:root[data-theme="dark"] .app-shell { background: linear-gradient(155deg, #0b1622, #102941); }
:root[data-theme="dark"] .dashboard-actions button,
:root[data-theme="dark"] .home-gift,
:root[data-theme="dark"] .meme-promo,
:root[data-theme="dark"] .dashboard-promo,
:root[data-theme="dark"] .device-card,
:root[data-theme="dark"] .traffic-card,
:root[data-theme="dark"] .profile-list,
:root[data-theme="dark"] .theme-card,
:root[data-theme="dark"] .trust-card,
:root[data-theme="dark"] .gift-card,
:root[data-theme="dark"] .plan-option { color: #f2f7fb; background: #172c3f !important; box-shadow: none !important; }
:root[data-theme="dark"] .bottom-nav { background: #172c3f; }
:root[data-theme="dark"] .home-steps { background: #1a2a39; }
:root[data-theme="dark"] .home-steps p { color: #aab8c5; }
:root[data-theme="dark"] .home-steps-progress span { border-color: #627587; background: #1a2a39; }
:root[data-theme="dark"] .home-steps-progress span.current { border-color: #00a9ed; background: #00a9ed; }
:root[data-theme="dark"] .home-steps-progress i { background: #627587; }

@media (max-width: 680px) {
  .workspace { padding: 15px 16px 112px; }
  .mobile-header { margin-bottom: 16px; }
  .dashboard-card { min-height: 318px; padding: 21px; border-radius: 25px; }
  .dashboard-mascot { width: min(49vw,195px); right: -6px; top: 69px; }
  .dashboard-summary { width: 55%; margin-top: 73px; }
  .dashboard-summary > strong { font-size: clamp(33px,9vw,42px); }
  .dashboard-connect { min-width: 0; margin-top: 25px; }
  .dashboard-card.is-inactive { min-height: 224px; border-radius: 24px 24px 0 0; }
  .dashboard-card.is-inactive .dashboard-mascot { width: 195px; right: -4px; top: 21px; }
  .dashboard-card.is-inactive .dashboard-brand-title { margin-top: 71px; font-size: 36px; }
  .home-steps { min-height: 158px; padding: 18px 20px; }
  .dashboard-actions { gap: 7px; }
  .dashboard-actions button { min-height: 71px; padding: 8px 2px; border-radius: 17px; }
  .dashboard-actions b { font-size: 10px; }
  .bottom-nav { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .bottom-nav button { padding: 0 5px; }
  .bottom-nav small { font-size: 11px; }
}
@media (max-width: 350px) {
  .dashboard-mascot { width: 158px; right: -13px; }
  .dashboard-summary > strong { font-size: 32px; }
  .dashboard-actions b { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-mascot, .loader-brand { animation: none; }
}

/* The active navigation surface follows the selected tab as it changes width. */
.bottom-nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--pill-left, 6px);
  top: 6px;
  width: var(--pill-width, 0px);
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(110deg, #00a9f0, #0579ec);
  box-shadow: 0 8px 19px rgba(0,140,226,.24);
  pointer-events: none;
}
.bottom-nav button { position: relative; z-index: 1; }
.bottom-nav button.active:not(.bottom-action),
:root[data-theme="dark"] .bottom-nav button.active:not(.bottom-action) {
  background: transparent !important;
  box-shadow: none;
}

/* Profile is a compact utility entry; the fourth tab is reserved for perks. */
.account-topbar { display: flex; justify-content: center; margin: 0 0 22px; }
.account-entry { display: inline-flex; align-items: center; gap: 10px; min-height: 43px; padding: 2px 4px 2px 12px; border: 0; border-radius: 24px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.account-entry strong { max-width: 185px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 800; }
.account-entry .avatar { width: 36px; height: 36px; flex: none; }
.account-entry:active { transform: scale(.97); }
.extras-heading { margin-bottom: 22px; }
.extras-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.extras-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; overflow: hidden; padding: 18px; border: 0; border-radius: 26px; text-align: left; color: #fff; font: inherit; cursor: pointer; isolation: isolate; transition: transform .2s ease, box-shadow .2s ease; }
.extras-card:active { transform: scale(.97); }
.extras-card-wheel { background: linear-gradient(145deg, #006ee9, #08c2f6); box-shadow: 0 14px 30px rgba(0,142,232,.18); }
.extras-card-game { background: linear-gradient(145deg, #2bbbf4, #0679e5); box-shadow: 0 14px 30px rgba(0,142,232,.14); }
.extras-card-friends { background: linear-gradient(145deg, #142c46, #0c6db3); }
.extras-card-soon { background: #eaf4fa; color: #617485; cursor: default; }
.extras-card-arrow { position: absolute; top: 17px; right: 17px; width: 18px; height: 18px; }
.extras-card-arrow .ui-icon { width: 18px; height: 18px; }
.extras-card img { position: absolute; top: 15px; left: 12px; width: 105px; height: 105px; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,37,102,.18)); }
.extras-card-glyph { position: absolute; top: 4px; left: 24px; font-size: 102px; line-height: 1; color: rgba(255,255,255,.8); text-shadow: 0 10px 24px rgba(0,68,157,.22); }
.extras-friends-icon { position: absolute; top: 32px; left: 20px; display: flex; align-items: center; }
.extras-friends-icon .ui-icon { width: 54px; height: 54px; padding: 12px; border-radius: 19px; background: rgba(255,255,255,.16); }
.extras-friends-icon .ui-icon + .ui-icon { margin-left: -15px; transform: translateY(12px); background: rgba(255,255,255,.25); }
.extras-case-icon { position: absolute; top: 36px; left: 23px; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 22px; background: rgba(42,140,205,.1); }
.extras-case-icon .ui-icon { width: 35px; height: 35px; color: #75a9c7; }
.extras-soon-tag { position: absolute; top: 19px; right: 17px; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.extras-card-copy { position: relative; z-index: 1; display: grid; gap: 3px; }
.extras-card-copy strong { font-size: 21px; line-height: 1.05; letter-spacing: -.04em; }
.extras-card-copy small { font-size: 12px; font-weight: 600; opacity: .82; }
:root[data-theme="dark"] .account-entry { color: #f6f9fc; }
:root[data-theme="dark"] .extras-card-soon { background: #171d22; color: #8e9da7; }
:root[data-theme="dark"] .extras-case-icon { background: #243441; }

/* Let surfaces and spacing define the hierarchy; keep functional control boundaries. */
.dashboard-card, .dashboard-card.is-inactive, .home-feature, .traffic-card,
.device-card, .profile-hero, .profile-list, .theme-card, .how-card,
.stats-grid, .gift-card, .plan-option, .bottom-nav { border: 0 !important; }
.dashboard-card.is-inactive + .dashboard-summary { border-top: 0 !important; }
.profile-list button { border-bottom: 0 !important; }
:root[data-theme="dark"] .dashboard-card,
:root[data-theme="dark"] .home-feature,
:root[data-theme="dark"] .bottom-nav { border: 0 !important; }

@media (min-width: 681px) { .account-topbar { justify-content: flex-end; } }
@media (max-width: 360px) { .extras-card { min-height: 170px; padding: 14px; } .extras-card-copy strong { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .extras-card { transition: none; } }

/* Plan comparison: total price first, exact per-day price second. */
.plan-option:has(.popular-label:not([hidden])) { margin-top: 10px; }
.popular-label[hidden] { display: none !important; }
.plan-option.best-value { border: 1px solid #0aa8ed; }
.plan-clarity { margin: 11px 5px 0; color: var(--muted); font-size: 11px; text-align: center; }
:root[data-theme="dark"] .plan-option.best-value { border-color: #0aa8ed; }

/* A device name is local; removal still calls the real account API. */
.device-card-actions { display: flex; flex: 0 0 auto; flex-direction: column; gap: 6px; }
.device-card-actions button { min-width: 54px; min-height: 28px; padding: 5px 8px; border: 0; border-radius: 9px; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.device-rename { color: #078bea; background: #e8f6ff; }
.device-copy .device-activity { color: var(--muted); font-weight: 500; }
.device-rename-input {
  width: 100%; min-height: 52px; padding: 0 15px; margin: 0 0 14px;
  border: 1px solid #a8cfe8; border-radius: 14px; outline: 0;
  color: var(--text); background: var(--surface-solid); font: inherit;
}
.device-rename-input:focus { border-color: #00a9ed; box-shadow: 0 0 0 3px rgba(0,169,237,.13); }
:root[data-theme="dark"] .device-rename { color: #7bd9ff; background: #153146; }
:root[data-theme="dark"] .device-remove { color: #ff8c93; background: #331c23; }
:root[data-theme="dark"] .device-rename-input { border-color: #344653; }

/* Installation stages have the same motion language as screen changes. */
.setup-step.active { animation: blup-enter .38s cubic-bezier(.2,.72,.2,1) both; }
.setup-progress span, .setup-progress-labels span { transition: background-color .3s ease, color .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .setup-step.active { animation: none; }
  .setup-progress span, .setup-progress-labels span { transition: none; }
}
[data-setup-access][hidden], [data-access-retry][hidden], [data-setup-return][hidden], [data-setup-fallback][hidden] { display: none !important; }
@media (max-width: 680px) { .bottom-nav::before { top: 6px; } }

/* Shared card rhythm across themes. */
.home-feature, .plan-option, .device-card, .profile-list, .theme-card,
.traffic-card, .home-gift, .meme-promo, .dashboard-promo { border-radius: 23px; }
.home-feature, .plan-option, .device-card, .traffic-card { min-width: 0; }
.home-steps-progress span, .home-steps-progress i {
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.dashboard-start[hidden] { display: none !important; }
.home-steps-progress span.done { background: #00a9ed; border-color: #00a9ed; }
.home-steps-progress i.done { background: #00a9ed; }
:root[data-theme="dark"] .home-steps-progress span:not(.done):not(.current) { background: #1a2934; border-color: #61788a; }
:root[data-theme="dark"] .home-steps-progress span.current { box-shadow: inset 0 0 0 7px #111316; }

/* One success moment, only after a confirmed payment. */
.success-celebration {
  position: fixed;
  z-index: 90;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(3, 13, 22, .76);
  backdrop-filter: blur(15px);
}
.success-celebration[hidden] { display: none !important; }
.success-celebration-card {
  position: relative;
  z-index: 1;
  width: min(100%, 390px);
  padding: 27px 24px 25px;
  border: 1px solid #bceaff;
  border-radius: 29px;
  color: #142331;
  background: #f5fbff;
  box-shadow: 0 28px 80px rgba(0, 151, 239, .22);
  text-align: center;
  animation: blup-enter .5s cubic-bezier(.2,.72,.2,1) both;
}
.success-celebration-card img { display: block; width: 190px; height: 190px; object-fit: contain; margin: -6px auto 5px; }
.success-celebration-card h2 { margin: 0 0 8px; font-size: 29px; letter-spacing: -.05em; }
.success-celebration-card p { margin: 0 auto 21px; max-width: 260px; color: #64727e; font-size: 13px; line-height: 1.45; }
.success-celebration-card button { width: 100%; }
:root[data-theme="dark"] .success-celebration-card {
  color: #f6f9fc;
  background: #111316;
  border-color: #31556b;
}
:root[data-theme="dark"] .success-celebration-card p { color: #a6b1ba; }
@media (prefers-reduced-motion: reduce) {
  .success-celebration-card { animation: none; }
  .device-shortcuts button, .home-steps-progress span, .home-steps-progress i { transition: none; }
}

/* Main menu: white canvas, blue light, one saturated hero. */
.app-shell {
  background:
    radial-gradient(ellipse 420px 350px at -8% 30%, rgba(97,207,255,.16), transparent 74%),
    radial-gradient(ellipse 370px 380px at 106% 73%, rgba(74,177,255,.14), transparent 76%),
    #fbfdff;
}
.mobile-header { margin-bottom: 22px; }
.brand-wordmark {
  color: #16232e;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: 1;
}
.brand-wordmark-dot { color: #00aaf0; }
.dashboard-card {
  background:
    radial-gradient(circle at 86% 8%, rgba(255,255,255,.27), transparent 36%),
    linear-gradient(128deg, #0878ec 0%, #00aefa 64%, #43d7ff 100%);
  box-shadow: 0 20px 45px rgba(0,128,217,.21);
}
.dashboard-card::before { display: none; }
.dashboard-card.is-inactive .dashboard-overline { display: none; }
.dashboard-card.is-inactive .status-pill { font-size: 12px; }
.dashboard-card.is-inactive .dashboard-brand-title {
  margin-top: 73px;
  font-weight: 800;
  font-size: clamp(38px, 5vw, 50px);
  letter-spacing: -.07em;
  word-spacing: .14em;
}
.dashboard-card.is-inactive .dashboard-mascot {
  width: 205px;
  top: 14px;
  right: 2px;
}
.dashboard-card.is-inactive .dashboard-start {
  min-height: 44px;
  margin-top: 14px;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,79,173,.14);
}
.home-steps {
  background: linear-gradient(135deg, #fff 0%, #f6fbff 100%);
  box-shadow: 0 17px 35px rgba(27,117,188,.07);
}
.home-steps h2 { font-weight: 800; }
.home-steps p { color: #65717c; }
.home-feature-heading { margin: 31px 3px 13px; }
.home-feature-heading h2 {
  margin: 0;
  color: #17232e;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.045em;
}
.home-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-feature {
  position: relative;
  min-width: 0;
  min-height: 174px;
  padding: 17px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border: 0;
  border-radius: 23px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-feature:active { transform: scale(.98); }
.home-feature-devices { background: linear-gradient(145deg, #137eef, #00b5f9); box-shadow: 0 14px 28px rgba(0,135,225,.17); }
.home-feature-bonus { background: linear-gradient(145deg, #7ad9ff, #2caefa); box-shadow: 0 14px 28px rgba(31,166,236,.15); }
.home-feature img {
  position: absolute;
  width: 116px;
  height: 116px;
  top: 9px;
  left: 14px;
  object-fit: contain;
  filter: drop-shadow(0 9px 9px rgba(0,80,160,.17));
  transform: rotate(-8deg);
}
.home-feature-bonus img { width: 107px; height: 107px; top: 13px; transform: rotate(8deg); }
.home-feature > span { position: relative; z-index: 1; max-width: 115px; font-size: 17px; font-weight: 800; line-height: 1.05; letter-spacing: -.04em; }
.home-feature > .ui-icon { position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; }
.home-gift { margin-top: 18px; }

/* Full-size destinations for the four bottom tabs. */
.tab-intro {
  position: relative;
  min-height: 174px;
  margin-bottom: 23px;
  padding: 27px 25px;
  overflow: hidden;
  border-radius: 27px;
  background: linear-gradient(125deg, #e8f8ff, #f7fcff 72%);
}
.tab-intro h1 {
  position: relative;
  z-index: 1;
  margin: 8px 0 7px;
  color: #142331;
  font-size: clamp(29px, 5vw, 39px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.055em;
}
.tab-intro p {
  position: relative;
  z-index: 1;
  max-width: 54%;
  margin: 0;
  color: #61788a;
  font-size: 13px;
  line-height: 1.45;
}
.tab-intro img { position: absolute; width: 167px; height: 167px; right: 15px; top: 7px; object-fit: contain; }
.tab-intro-devices img { width: 149px; height: 149px; top: 11px; }
.tab-intro-devices h1 { max-width: 53%; }
.tab-plan-list { gap: 12px; }
.tab-plan-list .plan-option { min-height: 86px; }
.tab-trial { width: 100%; margin-top: 19px; }
.tab-trial:disabled { opacity: .55; cursor: default; }
#screen-devices .devices-heading { margin-top: 0; }

.sheet:not(.open) { visibility: hidden; opacity: 0; pointer-events: none; box-shadow: none; }
.sheet.open { visibility: visible; opacity: 1; }

.bottom-nav { isolation: isolate; background: #fff !important; backdrop-filter: none !important; }
:root[data-theme="dark"] .bottom-nav { background: #172c3f !important; }
:root[data-theme="dark"] .tab-intro { background: linear-gradient(125deg, #193f5b, #142b3d); }
:root[data-theme="dark"] .tab-intro h1 { color: #f3f8fc; }
:root[data-theme="dark"] .tab-intro p { color: #b1c5d4; }

@media (max-width: 350px) {
  .tab-intro { padding: 22px 19px; }
  .tab-intro img { width: 119px; height: 119px; right: 4px; top: 22px; }
  .tab-intro p { max-width: 60%; font-size: 12px; }
  .tab-intro-devices h1 { max-width: 66%; font-size: 26px; }
  .tab-intro-devices img { width: 108px; height: 108px; right: 8px; top: 31px; }
}

@media (max-width: 680px) {
  .bottom-nav { display: flex !important; }
  .bottom-nav button { flex: 1 1 0; padding-inline: 4px; }
  .bottom-nav button.active:not(.bottom-action) { flex: 1.85 1 0; }
}
@media (max-width: 350px) {
  .bottom-nav button.active small { font-size: 10px; }
  .bottom-nav button.active { gap: 5px; }
}

:root[data-theme="dark"] .app-shell {
  background:
    radial-gradient(ellipse 400px 360px at -10% 30%, rgba(0,137,230,.16), transparent 74%),
    radial-gradient(ellipse 380px 360px at 105% 76%, rgba(34,117,231,.14), transparent 75%),
    #0c1724;
}
:root[data-theme="dark"] .brand-wordmark,
:root[data-theme="dark"] .home-feature-heading h2 { color: #f3f8fc; }
:root[data-theme="dark"] .home-steps { background: #1a2a39; box-shadow: none; }

@media (max-width: 680px) {
  .mobile-header { margin-bottom: 17px; }
  .dashboard-card.is-inactive { min-height: 225px; }
  .dashboard-card.is-inactive .dashboard-brand-title { margin-top: 72px; font-size: 37px; }
  .dashboard-card.is-inactive .dashboard-mascot { width: 185px; right: 1px; top: 18px; }
  .home-feature-heading { margin-top: 26px; }
  .home-feature { min-height: 163px; }
  .home-feature img { width: 108px; height: 108px; }
  .home-feature-bonus img { width: 101px; height: 101px; }
}
@media (max-width: 350px) {
  .dashboard-card.is-inactive .dashboard-mascot { width: 143px; right: 2px; top: 27px; }
  .dashboard-card.is-inactive .dashboard-brand-title { width: auto; font-size: 29px; letter-spacing: -.04em; white-space: nowrap; }
  .home-feature > span { font-size: 15px; }
}

/* Black BLUP theme: colour belongs to actions, not the page background. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050607;
  --surface: #111316;
  --surface-solid: #111316;
  --text: #f6f9fc;
  --muted: #9ba6b0;
  --line: #282d32;
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] .app-shell {
  background:
    radial-gradient(ellipse 300px 350px at -8% 55%, rgba(0, 158, 245, .10), transparent 78%),
    radial-gradient(ellipse 280px 350px at 108% 19%, rgba(0, 135, 230, .08), transparent 78%),
    #050607 !important;
}
:root[data-theme="dark"] .brand-wordmark,
:root[data-theme="dark"] .home-feature-heading h2 { color: #f6f9fc; }
:root[data-theme="dark"] .dashboard-card {
  background: #101317;
  border: 1px solid #263846;
  box-shadow: none;
}
:root[data-theme="dark"] .dashboard-card::after { opacity: .18; }
:root[data-theme="dark"] .dashboard-start,
:root[data-theme="dark"] .dashboard-connect,
:root[data-theme="dark"] .primary-button { box-shadow: none; }
:root[data-theme="dark"] .dashboard-start,
:root[data-theme="dark"] .dashboard-connect { color: #fff; background: #008fea; }
:root[data-theme="dark"] .home-steps,
:root[data-theme="dark"] .tab-intro,
:root[data-theme="dark"] .profile-hero,
:root[data-theme="dark"] .expired-state,
:root[data-theme="dark"] .setup-welcome {
  background: #111316 !important;
  border: 1px solid #282d32;
  box-shadow: none;
}
:root[data-theme="dark"] .tab-intro h1,
:root[data-theme="dark"] .profile-hero h1 { color: #f6f9fc; }
:root[data-theme="dark"] .profile-hero { margin-bottom: 16px; border-radius: 26px; }
:root[data-theme="dark"] .tab-intro p,
:root[data-theme="dark"] .home-steps p { color: #a6b1ba; }
:root[data-theme="dark"] .home-feature-devices,
:root[data-theme="dark"] .home-feature-bonus {
  background: #111820;
  border: 1px solid #176aa1;
  box-shadow: none;
}
:root[data-theme="dark"] .home-feature-bonus { background: #12171d; border-color: #31546c; }
:root[data-theme="dark"] .dashboard-actions button,
:root[data-theme="dark"] .home-gift,
:root[data-theme="dark"] .meme-promo,
:root[data-theme="dark"] .dashboard-promo,
:root[data-theme="dark"] .device-card,
:root[data-theme="dark"] .traffic-card,
:root[data-theme="dark"] .profile-list,
:root[data-theme="dark"] .theme-card,
:root[data-theme="dark"] .trust-card,
:root[data-theme="dark"] .gift-card,
:root[data-theme="dark"] .plan-option {
  color: #f6f9fc;
  background: #111316 !important;
  border-color: #282d32;
  box-shadow: none !important;
}
:root[data-theme="dark"] .plan-option.popular { border-color: #00aefa; }
:root[data-theme="dark"] .profile-list button {
  color: #f6f9fc;
  background: #111316 !important;
  border-bottom-color: #282d32;
  box-shadow: none;
}
:root[data-theme="dark"] .profile-list button:hover { background: #1a2025 !important; transform: none; }
:root[data-theme="dark"] .list-icon { background: #102330; border-color: #24465b; }
:root[data-theme="dark"] .profile-status { background: #10251d; color: #52d8a0; }
:root[data-theme="dark"] .tab-trial { color: #fff; background: #008fea; border-color: #008fea; }
:root[data-theme="dark"] .dashboard-card .status-pill,
:root[data-theme="dark"] .dashboard-card .status-pill.inactive,
:root[data-theme="dark"] .dashboard-help,
:root[data-theme="dark"] .dashboard-meta > span {
  color: #d5e8f4;
  background: #17222b;
  border-color: #355168;
  box-shadow: none;
}
:root[data-theme="dark"] .dashboard-card .status-pill.inactive { color: #fff; }
:root[data-theme="dark"] .dashboard-summary > span,
:root[data-theme="dark"] .dashboard-end { color: #a6b1ba; }
:root[data-theme="dark"] .dashboard-end b { color: #f6f9fc; }
:root[data-theme="dark"] .bottom-nav {
  background: #121416 !important;
  border: 1px solid #30353a;
  box-shadow: 0 10px 35px rgba(0,0,0,.42);
}
:root[data-theme="dark"] .bottom-nav button { color: #a4afb9; }
:root[data-theme="dark"] .bottom-nav button.active:not(.bottom-action) {
  background: #00aefa;
  color: #fff;
  box-shadow: 0 5px 16px rgba(0,174,250,.22);
}
:root[data-theme="dark"] .sheet {
  background: #0b0d0f !important;
  color: #f6f9fc;
  border-color: #282d32;
  box-shadow: 0 -14px 45px rgba(0,0,0,.55);
}
:root[data-theme="dark"] .sheet-close,
:root[data-theme="dark"] .theme-switch,
:root[data-theme="dark"] .payment-methods button,
:root[data-theme="dark"] .gift-user-field > div,
:root[data-theme="dark"] .gift-plan-option,
:root[data-theme="dark"] .setup-checklist li,
:root[data-theme="dark"] .meme-game-answers button {
  background: #181b1f;
  border-color: #30363b;
  color: #f6f9fc;
}
:root[data-theme="dark"] .gift-plan-option.selected,
:root[data-theme="dark"] .theme-switch button.active { background: #008fea; color: #fff; }
:root[data-theme="dark"] .app-loader { background: #050607 !important; }

/* Quiet motion: navigation, cards and sheets respond without perpetual noise. */
.workspace { padding-top: 20px; }
.screen.active > * { animation: blup-enter .42s cubic-bezier(.2,.72,.2,1) both; }
.screen.active > *:nth-child(2) { animation-delay: .035s; }
.screen.active > *:nth-child(3) { animation-delay: .07s; }
.screen.active > *:nth-child(4) { animation-delay: .105s; }
.screen.active > *:nth-child(n+5) { animation-delay: .13s; }
@keyframes blup-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.bottom-nav button {
  transition: flex .32s cubic-bezier(.2,.72,.2,1), background-color .25s ease,
    color .25s ease, box-shadow .25s ease, transform .18s ease;
}
.bottom-nav button.active small { animation: blup-label .28s ease both; }
@keyframes blup-label {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: translateX(0); }
}
.dashboard-start, .dashboard-connect, .home-feature, .plan-option,
.device-card, .profile-list button, .theme-switch button,
.home-gift, .dashboard-promo, .meme-promo, .tab-trial {
  transition: transform .22s cubic-bezier(.2,.72,.2,1),
    background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
@media (hover: hover) {
  .home-feature:hover, .plan-option:hover, .device-card:hover,
  .home-gift:hover, .dashboard-promo:hover, .meme-promo:hover {
    transform: translateY(-3px);
  }
}
.dashboard-start:active, .dashboard-connect:active, .home-feature:active,
.plan-option:active, .device-card:active, .profile-list button:active,
.home-gift:active, .dashboard-promo:active, .meme-promo:active,
.tab-trial:active, .bottom-nav button:active { transform: scale(.97); }
.sheet { transition: transform .36s cubic-bezier(.2,.72,.2,1), opacity .28s ease, visibility .28s; }
@media (max-width: 680px) {
  .workspace { padding-top: 17px; }
  .sheet { transform: translateY(24px); }
  .sheet.open { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .screen.active > *, .bottom-nav button.active small { animation: none !important; }
  .bottom-nav button, .dashboard-start, .dashboard-connect, .home-feature,
  .plan-option, .device-card, .profile-list button, .theme-switch button,
  .home-gift, .dashboard-promo, .meme-promo, .tab-trial, .sheet {
    transition-duration: .01ms !important;
  }
}
.bottom-nav button.active:not(.bottom-action),
:root[data-theme="dark"] .bottom-nav button.active:not(.bottom-action) {
  background: transparent !important;
  box-shadow: none;
}

/* Compact moving dock: the selected slot expands and its label unfolds. */
.bottom-nav,
:root[data-theme="dark"] .bottom-nav {
  display: flex !important;
  align-items: center;
  width: min(calc(100% - 40px), 420px);
  height: 68px;
  padding: 5px;
  border-radius: 36px;
}
.bottom-nav button,
:root[data-theme="dark"] .bottom-nav button {
  flex: 1 1 0;
  height: 58px;
  gap: 0;
  padding-inline: 4px;
  transition: flex .38s cubic-bezier(.22,.8,.2,1), color .25s ease, transform .18s ease;
}
.bottom-nav button.active:not(.bottom-action),
:root[data-theme="dark"] .bottom-nav button.active:not(.bottom-action) { flex: 0 0 144px; gap: 7px; }
.bottom-nav::before {
  top: 5px;
  height: 58px;
  border-radius: 30px;
  background: linear-gradient(125deg, #08b6f5, #0089ee);
  box-shadow: 0 9px 22px rgba(0,145,235,.28);
}
.bottom-nav .ui-icon { width: 23px; height: 23px; stroke-width: 2.6; flex: none; }
.bottom-nav .nav-icon-solid { display: none; fill: currentColor; stroke: none; }
.bottom-nav button.active .nav-icon-outline { display: none; }
.bottom-nav button.active .nav-icon-solid { display: block; }
.bottom-nav button .ui-icon { transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.bottom-nav button.active .ui-icon { transform: scale(1.04); }
.bottom-nav small,
.bottom-nav button.active small {
  display: block;
  width: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 850;
  animation: none;
  transition: max-width .36s cubic-bezier(.22,.8,.2,1), opacity .22s ease;
}
.bottom-nav button.active small { width: auto; max-width: 110px; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bottom-nav small { transition-duration: .01ms; }
}

/* Branded 3D destinations: one hero, two games, one honest upcoming teaser. */
.extras-heading h1 { font-size: clamp(30px, 6vw, 40px); }
.extras-grid { gap: 12px; }
.extras-card { min-height: 190px; border-radius: 26px; }
.extras-card { overflow: visible; }
.extras-grid { row-gap: 28px; margin-top: 30px; }
#screen-extras { padding-bottom: 100px; }
.extras-card-friends,
.extras-card-soon { grid-column: 1 / -1; min-height: 176px; }
.extras-card-friends { background: linear-gradient(125deg, #006de4 8%, #05bcf2 100%); }
.extras-card-wheel { background: linear-gradient(145deg, #6552ea, #058cf0); }
.extras-card-game { background: linear-gradient(145deg, #00a4e9, #2a71ed); }
.extras-card-soon { background: linear-gradient(125deg, #e9f3fa, #d8eaf6); }
.extras-card img { top: -14px; left: 7px; width: 132px; height: 132px; pointer-events: none; filter: drop-shadow(0 16px 16px rgba(0,42,126,.24)); }
.extras-card-friends img,
.extras-card-soon img { top: -28px; right: 15px; left: auto; width: 208px; height: 208px; }
.extras-card-friends .extras-card-copy,
.extras-card-soon .extras-card-copy { max-width: 54%; }
.extras-card-friends .extras-card-copy strong { font-size: 25px; }
.extras-card-arrow { z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22); }
.extras-card-soon img { opacity: .8; }
:root[data-theme="dark"] .extras-card-soon { background: linear-gradient(125deg, #17212c, #1d3645); color: #f2f8fc; }
:root[data-theme="dark"] .extras-heading h1 { color: #f6f9fc; }
.extras-soon-tag { z-index: 3; top: 18px; right: 20px; padding: 7px 9px; border-radius: 999px; background: rgba(255,255,255,.72); color: #37708d; }
:root[data-theme="dark"] .extras-soon-tag { background: rgba(255,255,255,.13); color: #d6e9f6; }
@media (max-width: 360px) {
  .extras-card { min-height: 170px; }
  .extras-card-friends, .extras-card-soon { min-height: 160px; }
  .extras-card-friends img, .extras-card-soon img { width: 170px; height: 170px; top: -7px; right: 4px; }
  .extras-card-wheel img, .extras-card-game img { width: 112px; height: 112px; }
}

/* Focused home, tactile 3D and honest setup progress. */
#screen-home .home-gift,
#screen-home .meme-promo,
#screen-home .dashboard-promo { display: none !important; }
#screen-home .home-steps { display: block; margin-top: 0; }
#screen-home .home-feature-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 2px 13px; }
#screen-home .home-feature-heading h2 { font-size: 26px; letter-spacing: -.05em; }
#screen-home .home-feature-heading > span { color: #81919d; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
#screen-home .home-feature-grid { display: grid; gap: 12px; margin-bottom: 32px; }
#screen-home .home-feature { min-height: 171px; padding: 15px; overflow: visible; isolation: isolate; border: 0 !important; border-radius: 26px; box-shadow: none; }
#screen-home .home-feature-devices { background: linear-gradient(145deg, #006be4, #02baf5); }
#screen-home .home-feature-bonus { background: linear-gradient(145deg, #43b8f6, #078be7); }
#screen-home .home-feature img { z-index: 0; width: 137px; height: 137px; top: -20px; left: 3px; pointer-events: none; filter: drop-shadow(0 13px 12px rgba(0,61,138,.26)); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
#screen-home .home-feature-bonus img { width: 133px; height: 133px; top: -17px; }
#screen-home .home-feature:active img { transform: translateY(4px) scale(.96) rotate(-4deg); }
#screen-home .home-feature > span { max-width: 150px; font-size: 18px; line-height: 1.02; text-shadow: 0 2px 9px rgba(0,48,113,.18); }
#screen-home .home-feature > .ui-icon { width: 20px; height: 20px; }
.home-steps-next { display: inline-flex; align-items: center; gap: 6px; margin-top: 17px; padding: 0; border: 0; background: none; color: #069fee; font-size: 13px; font-weight: 800; cursor: pointer; }
.home-steps-next .ui-icon { width: 15px; height: 15px; }
:root[data-theme="dark"] #screen-home .home-feature-heading h2 { color: #f5f9fc; }
:root[data-theme="dark"] #screen-home .home-feature-devices { background: linear-gradient(145deg, #0869d9, #05a5e4); }
:root[data-theme="dark"] #screen-home .home-feature-bonus { background: linear-gradient(145deg, #298ed8, #0972d0); }
#screen-home .dashboard-card { overflow: visible; isolation: isolate; }
#screen-home .dashboard-mascot { width: clamp(245px, 32vw, 325px); right: -24px; top: 24px; animation: none; pointer-events: auto; transform-origin: 65% 70%; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
#screen-home .dashboard-card.is-inactive .dashboard-mascot { width: clamp(238px, 31vw, 310px); right: -23px; top: 4px; }
#screen-home .dashboard-mascot:active { transform: scale(.97) rotate(-3deg); }
.home-steps-progress { transition: opacity .25s ease; }
.home-steps.is-complete .home-steps-progress span { background: #00a9ed; border-color: #00a9ed; }
.home-steps.is-complete .home-steps-progress i { background: #00a9ed; }
.device-card-recent { background: linear-gradient(120deg, rgba(0,169,237,.12), rgba(0,169,237,.03)) !important; }
.device-recent-label { display: inline-flex; align-self: flex-start; margin-top: 5px; padding: 4px 8px; border-radius: 999px; background: rgba(0,169,237,.16); color: #008ddd; font-size: 11px; font-style: normal; font-weight: 800; }
.referral-hero { position: relative; overflow: visible; isolation: isolate; border: 0 !important; }
.referral-mascot { position: absolute; z-index: -1; width: 210px; right: -18px; top: -35px; pointer-events: none; filter: drop-shadow(0 15px 16px rgba(0,58,150,.22)); }
.referral-milestones { display: flex; gap: 8px; margin: 7px 0 17px; }
.referral-milestones i { width: 38px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.36); transition: background .3s ease, transform .3s ease; }
.referral-milestones i.done { background: #fff; transform: scaleY(1.22); }
.home-steps, .device-card, .referral-hero, .how-card, .stats-grid > div, .tab-intro, .traffic-card, .profile-hero { border: 0 !important; }
.screen.active > .home-steps, .screen.active > .referral-hero, .screen.active > .device-card { animation: blup-card-lift .34s cubic-bezier(.2,.8,.2,1) both; }
@keyframes blup-card-lift { from { opacity: .6; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.extras-card img { transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.extras-card:active img { transform: translateY(3px) scale(.97) rotate(-2deg); }
@media (max-width: 600px) {
  #screen-home .dashboard-mascot { width: 230px; right: -18px; top: 28px; }
  #screen-home .dashboard-card.is-inactive .dashboard-mascot { width: 225px; right: -15px; top: 8px; }
  .referral-mascot { width: 165px; right: -10px; top: -15px; }
}
@media (max-width: 360px) {
  #screen-home .dashboard-card.is-inactive .dashboard-mascot { width: 165px; right: -11px; top: 18px; }
  #screen-home .home-feature { min-height: 172px; }
  #screen-home .home-feature img { width: 123px; height: 123px; top: -10px; }
  #screen-home .home-feature-bonus img { width: 119px; height: 119px; }
  #screen-home .home-feature > span { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen.active > .home-steps, .screen.active > .referral-hero, .screen.active > .device-card { animation: none; }
  .extras-card img, #screen-home .dashboard-mascot { transition: none; }
}

/* Active subscription: the remaining time is the hero, not a secondary stat. */
#screen-home:not(.inactive-mode) .dashboard-card {
  min-height: 340px;
  padding: 23px 24px 25px;
  background: radial-gradient(circle at 85% 15%, #117bb5 0, transparent 42%), linear-gradient(125deg, #063f69, #075b88 58%, #087dab);
  color: #fff;
}
#screen-home:not(.inactive-mode) .dashboard-card::before {
  display: block;
  z-index: 0;
  opacity: .18;
  background-image: radial-gradient(circle, #fff 1px, transparent 1.5px);
  background-size: 21px 21px;
  mask-image: none;
}
#screen-home:not(.inactive-mode) .dashboard-mascot { width: 147px; top: 18px; right: -15px; opacity: .85; }
#screen-home:not(.inactive-mode) .dashboard-overline { display: none; }
#screen-home:not(.inactive-mode) .dashboard-summary { width: 100%; margin: 29px 0 0; text-align: center; }
#screen-home:not(.inactive-mode) .dashboard-summary > span { display: block; font-size: 12px; font-weight: 700; }
#screen-home:not(.inactive-mode) .dashboard-summary > strong { display: block; margin: 0; font-size: clamp(48px, 12vw, 68px); line-height: 1.04; letter-spacing: -.065em; }
#screen-home:not(.inactive-mode) .dashboard-meta { display: flex !important; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
#screen-home:not(.inactive-mode) .dashboard-meta > span { display: inline-flex; align-items: center; min-height: 27px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 99px; background: rgba(255,255,255,.08); color: #fff; font-size: 10px; font-weight: 700; }
#screen-home:not(.inactive-mode) .dashboard-meta .subscription-badge { color: #97f6ca; border-color: rgba(125,242,191,.38); }
#screen-home:not(.inactive-mode) .dashboard-progress { display: block !important; height: 6px; margin: 19px 6px 0; border-radius: 99px; background: rgba(0,24,46,.44); }
#screen-home:not(.inactive-mode) .dashboard-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2ac5ff, #72dafa); }
#screen-home:not(.inactive-mode) .dashboard-end { margin-top: 8px; text-align: center; color: rgba(255,255,255,.75); }
#screen-home:not(.inactive-mode) .dashboard-end b { color: #fff; }
#screen-home:not(.inactive-mode) .dashboard-connect { margin: 19px auto 0; }
:root[data-theme="dark"] #screen-home:not(.inactive-mode) .dashboard-card { border: 0; background: radial-gradient(circle at 85% 15%, #096ca4 0, transparent 43%), linear-gradient(125deg, #073d63, #075680 60%, #087cac); }
@media (max-width: 360px) {
  #screen-home:not(.inactive-mode) .dashboard-mascot { width: 120px; }
  #screen-home:not(.inactive-mode) .dashboard-meta > span { font-size: 9px; padding-inline: 7px; }
}

/* Friends: graphite surfaces, with BLUP blue reserved for action and progress. */
#screen-earn .referral-hero {
  overflow: hidden;
  background: radial-gradient(circle at 96% 4%, rgba(0,169,239,.16), transparent 42%), #e9edf1;
  color: #17232e;
  box-shadow: none;
}
#screen-earn .referral-hero::before { display: none; }
#screen-earn .referral-mascot { width: 150px; right: -6px; top: -31px; }
#screen-earn .referral-hero > strong { color: #079dec; }
#screen-earn .referral-icon { color: #079dec; background: #fff; box-shadow: none; }
#screen-earn .referral-spark { color: #22aef0; opacity: .5; }
#screen-earn .referral-milestones i { background: #c2d0d9; }
#screen-earn .referral-milestones i.done { background: #079dec; }
#screen-earn .referral-hero .light-button { color: #fff; background: #009fea; border: 0; box-shadow: none; }
#screen-earn .stats-grid, #screen-earn .how-card { background: #edf1f4; border: 0; box-shadow: none; }
#screen-earn .stats-grid div + div { border-left-color: rgba(74,92,106,.12); }
#screen-earn .how-card li > span { color: #079dec; background: #fff; }
:root[data-theme="dark"] #screen-earn .referral-hero {
  background: radial-gradient(circle at 92% 6%, rgba(0,169,239,.11), transparent 41%), #15191d;
  color: #f5f8fb;
}
:root[data-theme="dark"] #screen-earn .referral-icon { color: #16aff0; background: #242b31; }
:root[data-theme="dark"] #screen-earn .referral-milestones i { background: #3c4850; }
:root[data-theme="dark"] #screen-earn .referral-milestones i.done { background: #10a8ee; }
:root[data-theme="dark"] #screen-earn .stats-grid,
:root[data-theme="dark"] #screen-earn .how-card { background: #15191d; border: 0; box-shadow: none; }
:root[data-theme="dark"] #screen-earn .stats-grid div + div { border-left-color: #293037; }
:root[data-theme="dark"] #screen-earn .how-card li > span { color: #20b6f7; background: #263038; }
@media (max-width: 600px) {
  #screen-earn .referral-mascot { width: 133px; right: -7px; top: -34px; }
}

/* One compact visual language for feedback states. */
.toast { padding: 10px 14px; border: 0; border-radius: 13px; background: #22282d; color: #fff; box-shadow: 0 8px 25px rgba(0,0,0,.18); }
.toast[data-state="success"] { background: #173a2e; color: #d7ffec; }
.toast[data-state="error"] { background: #48262a; color: #ffe3e5; }
.toast[data-state="loading"] { background: #242e35; color: #dcebf4; }
:root[data-theme="dark"] .toast { background: #252b30; }
:root[data-theme="dark"] .toast[data-state="success"] { background: #163a2d; }
:root[data-theme="dark"] .toast[data-state="error"] { background: #492529; }
.state-message[data-state="empty"] { grid-column: 1 / -1; margin: 0; padding: 15px 17px; border: 0; border-radius: 18px; background: #edf1f4; color: #61717d; font-size: 12px; line-height: 1.45; }
.state-message[hidden] { display: none !important; }
:root[data-theme="dark"] .state-message[data-state="empty"] { background: #15191d; color: #a5b0b8; }

/* Checkout takes the reference's strong hierarchy, in BLUP graphite and blue. */
#payment-sheet { height: auto; max-height: min(90dvh, 790px); padding: 24px 20px 28px; display: block !important; border: 0; background: #f4f7f9; box-shadow: 0 24px 80px rgba(0,0,0,.24); }
#payment-sheet .sheet-heading { margin: 12px 2px 20px; }
#payment-sheet .sheet-heading h2 { font-size: clamp(27px, 7vw, 34px); line-height: 1.05; letter-spacing: -.05em; }
#payment-sheet .sheet-heading p { max-width: 310px; font-size: 12px; line-height: 1.45; }
#payment-sheet .payment-offer { padding: 21px; border: 0; border-radius: 26px; background: #fff; color: #17232e; }
#payment-sheet .payment-offer-kicker { display: inline-flex; padding: 6px 9px; border-radius: 9px; background: #dff4ff; color: #048ed7; font-size: 10px; font-weight: 850; letter-spacing: .04em; }
#payment-sheet .payment-offer-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; }
#payment-sheet .payment-offer-main strong { font-size: 25px; line-height: 1.1; letter-spacing: -.05em; }
#payment-sheet .payment-offer-main b { flex: none; font-size: 23px; letter-spacing: -.05em; }
#payment-sheet .payment-offer-facts { display: grid; gap: 9px; margin-top: 18px; color: #6b7b87; font-size: 12px; font-weight: 650; }
#payment-sheet .payment-offer-facts span::before { content: "✓"; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 8px; border-radius: 50%; background: #e3f7ff; color: #049bea; font-size: 11px; }
#payment-sheet .payment-methods { gap: 9px; margin-top: 15px; }
#payment-sheet .payment-methods button { min-height: 70px; padding: 10px 10px 10px 17px; gap: 10px; border: 0; border-radius: 999px; background: #039fed; color: #fff; box-shadow: none; }
#payment-sheet .payment-methods button[data-pay-method="cryptobot"] { background: #242c32; }
#payment-sheet .payment-methods button > span:first-child { width: 31px; height: 31px; flex: none; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; box-shadow: none; font-size: 16px; }
#payment-sheet .payment-methods strong { color: #fff; font-size: 13px; line-height: 1.15; }
#payment-sheet .payment-methods small { color: rgba(255,255,255,.78); font-size: 10px; }
#payment-sheet .payment-methods b { min-width: 78px; min-height: 46px; padding: 0 10px; display: grid; place-items: center; border-radius: 999px; background: #fff; color: #087ec0; font-size: 13px; white-space: nowrap; }
#payment-sheet .payment-methods [data-pay-method="cryptobot"] b { color: #26333b; }
#payment-sheet .payment-methods button[hidden] { display: none !important; }
#payment-sheet .payment-wait { margin-top: 15px; border: 0; border-radius: 23px; background: #fff; }
:root[data-theme="dark"] #payment-sheet { background: #101214; color: #f5f8fb; }
:root[data-theme="dark"] #payment-sheet .payment-offer,
:root[data-theme="dark"] #payment-sheet .payment-wait { background: #1b1f23; color: #f5f8fb; box-shadow: none; }
:root[data-theme="dark"] #payment-sheet .payment-offer-kicker { color: #58caff; background: #183646; }
:root[data-theme="dark"] #payment-sheet .payment-offer-facts { color: #a5b0b8; }
:root[data-theme="dark"] #payment-sheet .payment-offer-facts span::before { background: #243b47; }
:root[data-theme="dark"] #payment-sheet .payment-methods button { background: #039fed; color: #fff; border: 0; box-shadow: none; }
:root[data-theme="dark"] #payment-sheet .payment-methods button[data-pay-method="cryptobot"] { background: #30373d; }
:root[data-theme="dark"] #payment-sheet .payment-methods button > span:first-child { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
:root[data-theme="dark"] #payment-sheet .payment-methods b { background: #fff; color: #087ec0; }
:root[data-theme="dark"] #payment-sheet .payment-wait { background: #1b1f23; }

/* Plan selection morphs the row into its checkout; no intermediate sheet. */
#screen-plans .tab-plan-list { gap: 12px; }
.plan-expand-card { min-width: 0; overflow: hidden; border-radius: 25px; background: #fff; box-shadow: 0 8px 24px rgba(11,81,141,.06); transition: background .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.plan-expand-card.expanded { background: #edf6fc; box-shadow: inset 0 0 0 1px rgba(0,159,234,.55); }
.plan-expand-card > .plan-option { width: 100%; margin: 0 !important; border: 0 !important; border-radius: 25px; background: transparent !important; box-shadow: none !important; }
.plan-expand-card .popular-label { z-index: 2; }
.plan-expand-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .42s cubic-bezier(.2,.8,.2,1), opacity .28s ease; }
.plan-expand-card.expanded .plan-expand-content { max-height: 440px; opacity: 1; }
.plan-inline-facts { display: grid; gap: 10px; padding: 9px 18px 19px; color: #5c6e7b; font-size: 12px; font-weight: 650; }
.plan-inline-facts span::before { content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 9px; border-radius: 50%; color: #049be7; background: #daf3ff; font-size: 11px; }
.plan-inline-methods { display: grid; gap: 9px; padding: 0 13px 16px; }
.plan-inline-methods[hidden], .plan-inline-wait[hidden] { display: none !important; }
.plan-inline-methods button { min-height: 62px; padding: 8px 8px 8px 15px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; background: #039fed; color: #fff; cursor: pointer; text-align: left; transition: transform .18s ease; }
.plan-inline-methods button:active { transform: scale(.98); }
.plan-inline-methods button[data-inline-pay-method="cryptobot"] { background: #30383f; }
.plan-inline-methods button > span { width: 29px; height: 29px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.2); }
.plan-inline-methods strong { flex: 1; font-size: 12px; }
.plan-inline-methods b { min-width: 74px; min-height: 42px; padding: 0 9px; display: grid; place-items: center; border-radius: 99px; background: #fff; color: #087ec0; font-size: 12px; white-space: nowrap; }
.plan-inline-methods button[data-inline-pay-method="cryptobot"] b { color: #27323a; }
.plan-inline-methods button[hidden] { display: none !important; }
.plan-inline-wait { padding: 4px 18px 20px; text-align: center; }
.plan-inline-wait strong, .plan-inline-wait small { display: block; }
.plan-inline-wait strong { margin-top: 9px; font-size: 13px; }
.plan-inline-wait small { margin-top: 4px; color: #72828f; font-size: 11px; }
.plan-inline-wait button { min-height: 38px; margin-top: 12px; padding: 0 15px; border: 0; border-radius: 99px; color: #fff; background: #039fed; font-weight: 750; }
:root[data-theme="dark"] .plan-expand-card { background: #141719; box-shadow: none; }
:root[data-theme="dark"] .plan-expand-card.expanded { background: #171b1f; box-shadow: inset 0 0 0 1px rgba(0,171,240,.6); }
:root[data-theme="dark"] .plan-expand-card > .plan-option { background: transparent !important; }
:root[data-theme="dark"] .plan-inline-facts { color: #b1bdc5; }
:root[data-theme="dark"] .plan-inline-facts span::before { background: #243b47; }
:root[data-theme="dark"] .plan-inline-wait small { color: #a3b0ba; }
.device-addon-status:not([hidden]) { margin: 12px 0 0; padding: 13px 15px; border: 0; border-radius: 16px; color: #895327; background: #fff4e9; font-size: 12px; line-height: 1.45; }
:root[data-theme="dark"] .device-addon-status:not([hidden]) { color: #f3c9a5; background: #2d241f; }
@media (prefers-reduced-motion: reduce) {
  .plan-expand-card, .plan-expand-content, .plan-inline-methods button { transition: none; }
}

/* Original beta: keep the profile centered and the mascot inside the hero. */
.account-topbar { width: min(780px, 100%); margin-inline: auto; justify-content: center; }
#screen-home .dashboard-mascot { height: auto; object-fit: contain; }
@media (min-width: 681px) {
  #screen-home .dashboard-card.is-inactive .dashboard-mascot { width: 238px; right: -8px; top: 8px; }
}
@media (max-width: 680px) {
  #screen-home .dashboard-card.is-inactive .dashboard-mascot { width: 180px; right: -6px; top: 20px; }
}
@media (max-width: 680px) {
  html.telegram-ios .workspace {
    padding-top: max(145px, calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 24px));
  }
}

@media (max-width: 680px) {
  .account-topbar { margin-bottom: 20px; }
  .account-entry { min-height: 60px; gap: 13px; padding: 2px 5px 2px 13px; }
  .account-entry strong { max-width: min(58vw, 220px); font-size: 18px; letter-spacing: -.015em; }
  .account-entry .avatar { width: 52px; height: 52px; }
  html.telegram-ios .account-topbar { margin-bottom: 18px; }
}

/* The active subscription and setup are one graphite surface. */
#screen-home:not(.inactive-mode) .dashboard-card,
:root[data-theme="dark"] #screen-home:not(.inactive-mode) .dashboard-card {
  border-radius: 26px 26px 0 0;
  background: #14181d;
  box-shadow: none;
}
#screen-home:not(.inactive-mode) .dashboard-card::before { display: none; }
#screen-home:not(.inactive-mode) .home-steps,
:root[data-theme="dark"] #screen-home:not(.inactive-mode) .home-steps {
  border-radius: 0 0 26px 26px;
  background: #14181d;
  box-shadow: none;
}
#screen-home:not(.inactive-mode) .home-steps p { color: #a5afb8; }
#screen-home:not(.inactive-mode) .home-steps h2 { color: #f5f7f9; }
#screen-home:not(.inactive-mode) .home-steps-progress span:not(.current):not(.done) { background: #26333d; border-color: #687d8a; }
#screen-home:not(.inactive-mode) .home-steps-progress i:not(.done) { background: #687d8a; }
#screen-home:not(.inactive-mode) .dashboard-mascot {
  width: 128px;
  top: 13px;
  right: -12px;
  opacity: 1;
}
#screen-home:not(.inactive-mode) .dashboard-summary { position: relative; z-index: 1; margin-top: 48px; }
#screen-home:not(.inactive-mode) .dashboard-progress { background: #2c3a46; }
#screen-home:not(.inactive-mode) .dashboard-progress span { background: #00aaf0; }
#screen-home:not(.inactive-mode) .dashboard-connect { background: #008fec; color: #fff; border: 0; }
#screen-home:not(.inactive-mode) .dashboard-meta > span { background: #202831; border-color: #35434e; }

/* 25 Oct: flat graphite controls, floating referral mascots and real platform marks. */
#referral-sheet .ghost-button,
.referral-sheet .ghost-button,
:root[data-theme="dark"] .referral-sheet .ghost-button {
  color: #dce4ea;
  background: #252c32;
  border: 1px solid #3b454d;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.referral-sheet .ghost-button::after { display: none; }
#screen-earn .referral-hero,
:root[data-theme="dark"] #screen-earn .referral-hero {
  overflow: visible;
  isolation: isolate;
  background: #151a1e;
  color: #f5f8fb;
}
#screen-earn .referral-hero > :not(.referral-mascot) { position: relative; z-index: 2; }
#screen-earn .referral-mascot {
  z-index: 1;
  width: 168px;
  height: auto;
  top: -46px;
  right: -32px;
  opacity: 1;
  animation: referral-dog-float 4.6s ease-in-out infinite;
}
#screen-earn .referral-mascot-left {
  left: -32px;
  right: auto;
  transform: scaleX(-1);
  animation: referral-dog-float-left 4.9s ease-in-out -1.2s infinite;
}
@keyframes referral-dog-float { 50% { transform: translateY(-9px) rotate(3deg); } }
@keyframes referral-dog-float-left { 50% { transform: scaleX(-1) translateY(-9px) rotate(-3deg); } }

#screen-devices .tab-intro-devices { overflow: visible; isolation: isolate; }
#screen-devices .tab-intro-devices img {
  width: 205px;
  height: 205px;
  top: -28px;
  right: -10px;
  object-fit: contain;
  filter: drop-shadow(0 15px 20px rgba(0,112,205,.2));
}
#screen-devices .tab-intro-devices h1,
#screen-devices .tab-intro-devices p { position: relative; z-index: 2; }
#screen-devices .device-visual,
:root[data-theme="dark"] #screen-devices .device-visual {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 19px;
  background: #222b32;
  box-shadow: none;
  border: 1px solid #34414a;
}
#screen-devices .device-visual img { width: 36px; height: 36px; object-fit: contain; }
#screen-devices .device-visual .ui-icon { width: 34px; height: 34px; color: #26b4f4; }
#screen-devices .device-plus,
#screen-devices .round-add,
#screen-devices .traffic-heading button,
:root[data-theme="dark"] #screen-devices .device-plus,
:root[data-theme="dark"] #screen-devices .round-add,
:root[data-theme="dark"] #screen-devices .traffic-heading button {
  color: #35bcf7;
  background: #222b32;
  border: 1px solid #34414a;
  box-shadow: none;
}
#screen-devices .traffic-progress span,
#screen-devices .traffic-progress span.unlimited { background: #16acee; animation: none; }
#screen-devices .round-add::after { display: none; }
#screen-devices .traffic-heading button .ui-icon { width: 19px; height: 19px; stroke-width: 1.8; }
@media (max-width: 600px) {
  #screen-earn .referral-mascot { width: 125px; top: -32px; right: 2px; }
  #screen-earn .referral-mascot-left { left: 2px; right: auto; }
  #screen-devices .tab-intro-devices img { width: 158px; height: 158px; top: -25px; right: 2px; }
  #screen-devices .tab-intro-devices h1 { max-width: 66%; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-earn .referral-mascot { animation: none; }
}
@media (max-width: 680px) {
  #screen-home:not(.inactive-mode) .dashboard-mascot { width: 112px; top: 21px; right: -9px; }
  #screen-home:not(.inactive-mode) .dashboard-summary { margin-top: 56px; }
  #screen-home:not(.inactive-mode) .dashboard-summary > strong { font-size: clamp(43px, 11vw, 60px); }
}

/* Center the active subscription progress under its desktop summary. */
@media (min-width: 681px) {
  #screen-home:not(.inactive-mode) .dashboard-progress {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Controls fix: no tiny glyph or glass gradient on disabled trial. */
#screen-devices .traffic-heading button[data-action="refresh-traffic"],
:root[data-theme="dark"] #screen-devices .traffic-heading button[data-action="refresh-traffic"] {
  width: auto;
  min-width: 92px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #39444c;
  border-radius: 12px;
  color: #dbe8ef;
  background: #252d33;
  box-shadow: none;
  font: 700 12px/1 system-ui, sans-serif;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#screen-devices .traffic-heading button[data-action="refresh-traffic"].loading {
  animation: none;
  opacity: .65;
  cursor: wait;
}
#screen-plans .tab-trial:disabled,
#plans-sheet [data-action="trial"]:disabled,
:root[data-theme="dark"] #screen-plans .tab-trial:disabled,
:root[data-theme="dark"] #plans-sheet [data-action="trial"]:disabled {
  color: #97a5af;
  background: #293138;
  border: 1px solid #39434b;
  box-shadow: none;
  opacity: 1;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: default;
}
#screen-plans .tab-trial:disabled::after,
#plans-sheet [data-action="trial"]:disabled::after { display: none; }

/* Perks and setup: flat graphite surfaces, one cyan action accent. */
#setup-sheet .final-connect-card,
:root[data-theme="dark"] #setup-sheet .final-connect-card {
  padding: 20px 16px;
  border: 1px solid #303940;
  border-radius: 24px;
  background: #171c20;
  box-shadow: none;
}
#setup-sheet .access-qr { width: min(180px, 60vw); margin-bottom: 14px; box-shadow: none; border-radius: 16px; }
#setup-sheet .subscription-copy,
:root[data-theme="dark"] #setup-sheet .subscription-copy {
  background: #22292e;
  border: 1px solid #38444b;
  border-radius: 15px;
}
#setup-sheet .subscription-copy button { background: #009fee; color: #fff; }
#setup-sheet [data-setup-access],
#setup-sheet [data-setup-complete],
#setup-sheet [data-access-retry] {
  background: #009fee;
  border: 0;
  color: #fff;
  box-shadow: none;
}
#setup-sheet .setup-return-check,
:root[data-theme="dark"] #setup-sheet .setup-return-check {
  background: #171c20;
  border: 1px solid #303940;
  box-shadow: none;
}
#setup-sheet [data-prev-step] {
  min-height: 46px;
  background: #22292e;
  border: 1px solid #38444b;
  color: #dce5ea;
  box-shadow: none;
}

#screen-extras .extras-card-friends,
#screen-extras .extras-card-wheel,
#screen-extras .extras-card-game,
#screen-extras .extras-card-soon,
:root[data-theme="dark"] #screen-extras .extras-card-soon {
  background: #171c20;
  border: 1px solid #303940;
  box-shadow: none;
  color: #f5f8fa;
}
#screen-extras .extras-card-friends { background: #0098e8; border-color: #0098e8; }
#screen-extras .extras-card-wheel,
#screen-extras .extras-card-game { background: #20272c; }
#screen-extras .extras-card-soon { color: #d2dbe0; }
#screen-extras .extras-soon-tag,
:root[data-theme="dark"] #screen-extras .extras-soon-tag {
  background: #303a40;
  color: #c9d5db;
}
#screen-extras .extras-card-arrow { background: rgba(255,255,255,.13); }

#wheel-sheet .wheel-heading { padding-bottom: 8px; }
#wheel-sheet .wheel-heading h2 { margin-bottom: 5px; }
#wheel-sheet .wheel-heading p { max-width: 350px; font-size: 12px; }
#wheel-sheet .wheel-stage { width: min(73vw, 320px); margin: 10px auto 12px; padding: 4px; }
#wheel-sheet .bonus-wheel {
  border: 6px solid #3a454c;
  background: repeating-conic-gradient(from -22.5deg, #009be9 0deg 43deg, #0a769f 43deg 45deg);
  box-shadow: 0 0 0 2px #13191d, inset 0 0 0 2px rgba(255,255,255,.24);
}
#wheel-sheet .bonus-wheel::before {
  inset: 11px;
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: none;
}
#wheel-sheet .bonus-wheel::after { display: none; }
#wheel-sheet .wheel-pointer {
  width: 28px;
  height: 37px;
  top: -5px;
  background: #f2f8fb;
  filter: none;
  animation: none;
}
#wheel-sheet .wheel-core {
  z-index: 8;
  width: 42%;
  height: 42%;
  left: 29%;
  top: 29%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 5px solid #d8eaf2;
  border-radius: 50%;
  background: #151c20;
  box-shadow: 0 5px 18px rgba(0,0,0,.24);
}
#wheel-sheet .wheel-core img { width: 56%; height: 56%; filter: none; }
#wheel-sheet .wheel-core b { color: #f6fbff; font-size: clamp(13px, 3.8vw, 17px); line-height: 1; white-space: nowrap; }
#wheel-sheet .wheel-caption { max-width: 350px; margin-bottom: 11px; color: #afbbc3; font-size: 11px; line-height: 1.4; }
#wheel-sheet .wheel-result,
:root[data-theme="dark"] #wheel-sheet .wheel-result {
  min-height: 69px;
  border: 1px solid #303940;
  border-radius: 18px;
  background: #171c20;
  box-shadow: none;
}
#wheel-sheet .wheel-result.won { background: #15251f; border-color: #2d684b; }
#wheel-sheet .wheel-result strong { color: #15b6f7; }
#wheel-sheet [data-wheel-spin],
#wheel-sheet [data-wheel-spin-all] { box-shadow: none; }
#wheel-sheet [data-wheel-spin]:not(:disabled) { background: #009fee; }
#wheel-sheet [data-wheel-spin-all]:not(:disabled) { background: #263139; color: #eef5f8; }
#wheel-sheet [data-wheel-spin]:disabled,
#wheel-sheet [data-wheel-spin-all]:disabled {
  background: #252d32;
  border: 1px solid #39434a;
  color: #97a8b2;
  opacity: 1;
}

#meme-sheet .meme-game-intro { gap: 11px; }
#meme-sheet .meme-game-hero { padding: 9px 0 1px; font-size: 58px; }
#meme-sheet .meme-game-intro strong { font-size: 23px; letter-spacing: -.035em; }
#meme-sheet .meme-game-intro p { max-width: 360px; margin-inline: auto; }
#meme-sheet .meme-game-card,
:root[data-theme="dark"] #meme-sheet .meme-game-card {
  border: 1px solid #303940;
  background: #171c20;
  box-shadow: none;
}
#meme-sheet .meme-game-answers button,
:root[data-theme="dark"] #meme-sheet .meme-game-answers button {
  min-height: 48px;
  border: 1px solid #39434a;
  background: #20272c;
  color: #f4f8fa;
}
#meme-sheet [data-meme-start],
#meme-sheet [data-meme-again],
:root[data-theme="dark"] #meme-sheet [data-meme-start],
:root[data-theme="dark"] #meme-sheet [data-meme-again] {
  background: #009fee;
  color: #fff;
  box-shadow: none;
}
@media (max-width: 380px) {
  #wheel-sheet .wheel-stage { width: min(70vw, 270px); }
  #wheel-sheet .wheel-core b { font-size: 12px; }
}

/* Two lightweight floating mascots; the second remains visible on phones. */
#screen-home:not(.inactive-mode) .dashboard-card { overflow: visible; }
#screen-home:not(.inactive-mode) .dashboard-mascot {
  z-index: 3;
  pointer-events: none;
  animation: home-dog-float 4.7s ease-in-out infinite;
}
#screen-home:not(.inactive-mode) .dashboard-mascot-left {
  width: 120px;
  left: -16px;
  right: auto;
  top: 40px;
  transform: scaleX(-1);
  animation: home-dog-float-left 5.2s ease-in-out -1.1s infinite;
}
#screen-home .dashboard-card.is-inactive .dashboard-mascot-left { display: none; }
@keyframes home-dog-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-9px) rotate(3deg); }
}
@keyframes home-dog-float-left {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(-2deg); }
  50% { transform: scaleX(-1) translateY(-8px) rotate(3deg); }
}
@media (max-width: 680px) {
  #screen-home:not(.inactive-mode) .dashboard-mascot { width: 96px; }
  #screen-home:not(.inactive-mode) .dashboard-mascot-left {
    width: 96px;
    left: -22px;
    top: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #screen-home:not(.inactive-mode) .dashboard-mascot { animation: none; }
  #screen-home:not(.inactive-mode) .dashboard-mascot-left { transform: scaleX(-1); }
}

/* Paid fourth device: plain surfaces consistent with the current Sharik UI. */
.device-slot-offer { margin-top: 14px; padding: 16px; border: 1px solid #29353d;
  border-radius: 20px; background: #12171b; color: #f5f8fa;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.device-slot-offer[hidden] { display: none; }
.device-slot-offer strong, .device-slot-offer small { display: block; }
.device-slot-offer strong { font-size: 15px; line-height: 1.25; }
.device-slot-offer small { margin-top: 5px; color: #9aa8b1; font-size: 12px; line-height: 1.35; }
.device-slot-offer button { flex: 0 0 auto; min-height: 42px; padding: 8px 14px;
  border: 0; border-radius: 13px; background: #00a7ed; color: #fff;
  font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
@media (max-width: 560px) { .device-slot-offer { align-items: stretch; flex-direction: column; }
  .device-slot-offer button { width: 100%; } }

/* 2026-11-01: keep modal actions flat like the current graphite/cyan palette. */
#setup-sheet .secondary-button,
#setup-sheet .ghost-button,
#wheel-sheet .secondary-button,
#meme-sheet .secondary-button,
#wheel-sheet [data-wheel-spin]:disabled,
#wheel-sheet [data-wheel-spin-all]:disabled,
#meme-sheet [data-meme-start]:disabled {
  background: #252d32 !important;
  background-image: none !important;
  border: 1px solid #39434a !important;
  color: #d8e3e8 !important;
  box-shadow: none !important;
}
#setup-sheet [data-setup-complete],
#setup-sheet [data-setup-access]:not([hidden]),
#meme-sheet [data-meme-start]:not(:disabled) {
  background: #009fee !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Opt-in renewal: inset, readable and aligned with the checkout buttons. */
.plan-expand-card [data-inline-auto-renew] {
  margin: 0 13px 14px; padding: 13px 14px; box-sizing: border-box;
  border-radius: 16px; background: #20272c; border: 1px solid #39454b;
  align-items: center; gap: 11px;
}
.plan-expand-card [data-inline-auto-renew] strong,
[data-auto-renew-option] strong { font-size: 13px; line-height: 1.3; }
.plan-expand-card [data-inline-auto-renew] small,
[data-auto-renew-option] small { font-size: 11px; line-height: 1.45; }
.plan-expand-card [data-inline-auto-renew] input,
[data-auto-renew-option] input { width: 20px; height: 20px; cursor: pointer; }
[data-auto-renew-option] { margin: 12px 0; border-radius: 16px; align-items: center; }
.profile-auto-renew { display: grid; gap: 10px; padding: 16px; border: 1px solid #39454b; border-radius: 20px; background: #171c20; color: #fff; margin: 12px 0; }
.profile-auto-renew[hidden] { display: none !important; }
.profile-auto-renew div { display: grid; gap: 5px; }
.profile-auto-renew small { color: #aebac0; font-size: 12px; line-height: 1.4; }
.profile-auto-renew button { border: 0; padding: 0; background: transparent; color: #59caff; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
/* Gift is a real destination; the existing purchase path handles the payment. */
#screen-extras .extras-card-gift { grid-column: 1 / -1; min-height: 176px; background: #20272c; border: 1px solid #303940; color: #f5f8fa; }
#screen-extras .extras-card-gift img { top: -35px; right: 10px; left: auto; width: 205px; height: 205px; object-fit: contain; }
#screen-extras .extras-card-gift .extras-card-copy { max-width: 55%; }
#screen-extras .extras-card-gift .extras-card-copy strong { font-size: 23px; }
@media (max-width: 360px) { #screen-extras .extras-card-gift img { top: -15px; right: 0; width: 170px; height: 170px; } }

/* Checkbox stays aligned with the renewal title, even when copy wraps. */
.plan-expand-card [data-inline-auto-renew], [data-auto-renew-option] { align-items: flex-start; }
.plan-expand-card [data-inline-auto-renew] input, [data-auto-renew-option] input { margin-top: 1px; }

/* Gift flow: flat Sharik surfaces, compact hierarchy, floating 3D present. */
#screen-gift .gift-heading { max-width: 720px; margin-bottom: 24px; }
#screen-gift .gift-heading p { max-width: 540px; margin-inline: auto; }
#screen-gift .gift-card {
  max-width: 720px; margin-top: 0; padding: 32px;
  overflow: visible; border: 1px solid #2b3339; border-radius: 28px;
  background: #15191c; box-shadow: none; backdrop-filter: none;
}
#screen-gift .gift-visual {
  width: 112px; height: 112px; margin: -64px 8px 0 auto;
  display: block; border: 0; background: none; box-shadow: none;
  pointer-events: none; position: relative; z-index: 1;
}
#screen-gift .gift-visual img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(0,162,246,.22)); }
#screen-gift .gift-user-field > span,
#screen-gift .gift-plan-block > span { color: #9aa5ad; font-size: 11px; letter-spacing: .07em; }
#screen-gift .gift-user-field > div,
#screen-gift .gift-plan-option { background: #20262a !important; border: 1px solid #39434a !important; box-shadow: none; }
#screen-gift .gift-user-field > div { min-height: 56px; border-radius: 16px; }
#screen-gift .gift-user-field > div:focus-within { border-color: #00aeef !important; box-shadow: 0 0 0 3px rgba(0,174,239,.14); transform: none; }
#screen-gift .gift-find,
#screen-gift [data-gift-continue] {
  min-height: 54px; border-radius: 16px; border: 0; box-shadow: none;
  background: #00aaf0 !important; color: #fff !important; font-weight: 800;
}
#screen-gift .gift-find:hover,
#screen-gift [data-gift-continue]:not(:disabled):hover { background: #20b9f7 !important; transform: translateY(-1px); }
#screen-gift [data-gift-continue]:disabled { background: #283137 !important; color: #8797a1 !important; opacity: 1; }
#screen-gift .gift-plan-block { margin-top: 28px; }
#screen-gift .gift-plan-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#screen-gift .gift-plan-option { min-height: 80px; border-radius: 17px; padding: 14px 16px; }
#screen-gift .gift-plan-option:hover { transform: none; border-color: #6a808c !important; }
#screen-gift .gift-plan-option.selected { background: #093d57 !important; border-color: #00aaf0 !important; color: #fff; }
#screen-gift .gift-plan-option.selected small { color: #9adfff; }
#screen-gift .gift-plan-option strong { font-size: 17px; }
#screen-gift .gift-plan-option small { font-size: 12px; }
#screen-gift .gift-note { max-width: 540px; margin: 15px auto 0; font-size: 12px; }
#screen-gift .gift-steps { max-width: 720px; margin-top: 14px; gap: 8px; }
#screen-gift .gift-steps > div { padding: 12px; border: 1px solid #2b3339; border-radius: 17px; background: #15191c; }
#screen-gift .gift-steps > div > b { background: #00aaf0; }
#screen-gift .gift-steps strong { font-size: 12px; }
#screen-gift .gift-steps small { font-size: 11px; }
@media (max-width: 680px) {
  #screen-gift .gift-heading { margin-bottom: 56px; }
  #screen-gift .gift-card { padding: 22px 18px 24px; border-radius: 24px; }
  #screen-gift .gift-visual { width: 96px; height: 96px; margin: -68px 0 -4px auto; }
  #screen-gift .gift-plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #screen-gift .gift-plan-option { min-height: 72px; }
  #screen-gift .gift-steps { grid-template-columns: 1fr; padding-bottom: 112px; }
  #screen-gift .gift-steps > div { align-items: center; }
  #screen-gift .gift-steps small { margin-top: 2px; }
}