:root {
  --obsidian: #090a0c;
  --graphite: #13161a;
  --gunmetal: #1d2228;
  --border: #272c32;
  --steel: #353a40;
  --white: #fff;
  --highlight: #d9dde1;
  --secondary: #9da4ad;
  --muted: #6f7782;
  --accent: #00c2b8;
  --accent-light: #18d6cc;
  --accent-dark: #008e87;
  --success: #28c76f;
  --warning: #ffb020;
  --error: #ff4d5e;
  --page-width: 720px;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --safe-top: max(18px, env(safe-area-inset-top), var(--tg-safe-area-inset-top, 0px));
  --safe-bottom: max(22px, env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--obsidian); scrollbar-gutter: stable; }
html.is-viewport-fit,
html.is-viewport-fit body {
  height: var(--novo-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  min-width: 320px;
  min-height: var(--tg-viewport-stable-height, 100dvh);
  margin: 0;
  overflow-x: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 76% 3%, rgba(24, 214, 204, .035), transparent 27rem),
    linear-gradient(155deg, #05070a 0%, var(--obsidian) 48%, #05070a 100%);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent-light); text-decoration: none; }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

.site-intro {
  position: fixed;
  z-index: 10000;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  contain: strict;
  background:
    radial-gradient(circle at 50% 48%, rgba(29,34,40,.52), transparent 32rem),
    linear-gradient(155deg, #07090b 0%, var(--obsidian) 52%, #06080a 100%);
  color: var(--white);
  user-select: none;
  animation: site-intro-lifecycle 1420ms cubic-bezier(.22,.7,.18,1) both;
  will-change: opacity;
}
.site-intro__geometry { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.site-intro__glow {
  position:absolute;
  top:50%;
  left:50%;
  width:clamp(290px,34vw,470px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,194,184,.11), rgba(29,34,40,.08) 36%, transparent 70%);
  opacity:.8;
  transform:translate3d(-50%,-50%,0) scale(1);
  animation:site-intro-glow 920ms 80ms cubic-bezier(.16,.72,.2,1) both;
  will-change:transform,opacity;
}
.site-intro__facet {
  position: absolute;
  display: block;
  width: clamp(420px, 58vw, 900px);
  height: auto;
  opacity: .22;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
}
.site-intro__facet--one {
  top: max(-18rem, -22vw);
  right: max(-10rem, -7vw);
  transform: rotate(8deg) scale(1.025);
  animation: site-intro-facet-one 900ms cubic-bezier(.16,.72,.2,1) both;
}
.site-intro__facet--two {
  bottom: max(-20rem, -25vw);
  left: max(-11rem, -8vw);
  transform: rotate(188deg) scale(1.025);
  opacity: .16;
  animation: site-intro-facet-two 940ms 60ms cubic-bezier(.16,.72,.2,1) both;
}
.site-intro__facet--center {
  top:50%;
  left:50%;
  width:clamp(520px,64vw,980px);
  opacity:.075;
  transform:translate3d(-50%,-50%,0) rotate(96deg) scale(1.02);
  animation:site-intro-facet-center 1040ms 110ms cubic-bezier(.16,.72,.2,1) both;
}
.site-intro__brand {
  position: relative;
  z-index: 1;
  width: min(78vw, 270px);
  display: grid;
  justify-items: center;
  gap: clamp(14px, 2.4vw, 20px);
  text-align: center;
  isolation:isolate;
}
.site-intro__accent {
  position:absolute;
  z-index:0;
  top:clamp(43px,6.5vw,59px);
  left:50%;
  width:clamp(150px,22vw,220px);
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(24,214,204,.72), transparent);
  opacity:0;
  transform:translate3d(-50%,0,0) scaleX(0);
  animation:site-intro-accent 820ms 260ms cubic-bezier(.16,.72,.2,1) both;
  will-change:transform,opacity;
}
.site-intro__mark {
  position:relative;
  z-index:1;
  display: block;
  width: clamp(88px, 13vw, 118px);
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.38));
  opacity: 1;
  transform: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: site-intro-mark 650ms 170ms cubic-bezier(.16,.78,.18,1) both;
  will-change: transform, opacity;
}
.site-intro__name {
  position:relative;
  z-index:1;
  font-size: clamp(30px, 5vw, 38px);
  line-height: 1;
  font-weight: 740;
  letter-spacing: -.035em;
  opacity: 1;
  transform: none;
  animation: site-intro-name 560ms 390ms cubic-bezier(.16,.72,.2,1) both;
  will-change: transform, opacity;
}
@keyframes site-intro-lifecycle {
  0%, 78% { opacity:1; }
  100% { opacity:0; visibility:hidden; }
}
@keyframes site-intro-glow {
  from { opacity:0; transform:translate3d(-50%,-50%,0) scale(.78); }
  to { opacity:.8; transform:translate3d(-50%,-50%,0) scale(1); }
}
@keyframes site-intro-facet-one {
  from { opacity:0; transform:translate3d(18px,-12px,0) rotate(8deg) scale(.965); }
  to { opacity:.22; transform:translate3d(0,0,0) rotate(8deg) scale(1.025); }
}
@keyframes site-intro-facet-two {
  from { opacity:0; transform:translate3d(-18px,13px,0) rotate(188deg) scale(.965); }
  to { opacity:.16; transform:translate3d(0,0,0) rotate(188deg) scale(1.025); }
}
@keyframes site-intro-facet-center {
  from { opacity:0; transform:translate3d(-50%,-47%,0) rotate(94deg) scale(.95); }
  to { opacity:.075; transform:translate3d(-50%,-50%,0) rotate(96deg) scale(1.02); }
}
@keyframes site-intro-accent {
  0% { opacity:0; transform:translate3d(-50%,0,0) scaleX(0); }
  38% { opacity:.72; transform:translate3d(-50%,0,0) scaleX(1); }
  74% { opacity:.32; transform:translate3d(-50%,0,0) scaleX(.58); }
  100% { opacity:0; transform:translate3d(-50%,0,0) scaleX(.18); }
}
@keyframes site-intro-mark {
  from { opacity:0; transform:translate3d(0,12px,0) scale(.93); }
  to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes site-intro-name {
  from { opacity:0; transform:translate3d(0,10px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes site-intro-reduced {
  0%, 56% { opacity:1; }
  100% { opacity:0; visibility:hidden; }
}

.site-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.is-website-runtime .site-background {
  opacity: 1;
  visibility: visible;
}
.site-background__geometry { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.site-background__scene {
  position:absolute;
  width:clamp(560px,42vw,850px);
  aspect-ratio:916/1287;
  pointer-events:none;
}
.site-background__scene--left {
  top:2%;
  left:calc(50% - clamp(780px,46vw,1200px));
  transform:rotate(194.5deg) scale(1.01);
}
.site-background__scene--right {
  right:calc(50% - clamp(780px,46vw,1200px));
  bottom:-12%;
  transform:rotate(13.5deg) scale(1.015);
}
.site-background__mesh {
  display:block;
  width:100%;
  height:auto;
  opacity:.15;
  user-select:none;
  -webkit-user-drag:none;
}
.site-background__scene--right .site-background__mesh { opacity:.12; }
.site-background__facet-svg,
.site-background__edge-svg {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.site-background__facet-svg { opacity:.12; }
.site-background__scene--right .site-background__facet-svg { opacity:.1; }
.site-background__facet-svg path { opacity:0; }
.site-background__facet-svg .ambient-facet {
  transform-box:fill-box;
  transform-origin:center;
}
.site-background__edge-svg { opacity:.8; }
.site-background__edge-svg path { fill:none !important; stroke:none; opacity:0; }
.site-background__edge-svg .ambient-edge {
  fill:none !important;
  stroke-width:1.2px;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:.09 1;
  vector-effect:non-scaling-stroke;
}
.site-background__edge-svg .ambient-edge--a { stroke:#18d6cc; }
.site-background__edge-svg .ambient-edge--b { stroke:#00c2b8; }
.site-background__edge-svg .ambient-edge--c { stroke:#18d6cc; }
.site-background__edge-svg .ambient-edge--d { stroke:#008e87; }
.is-website-runtime .site-background__scene--left {
  animation:website-mesh-left 26s ease-in-out -4s infinite alternate;
}
.is-website-runtime .site-background__scene--right {
  animation:website-mesh-right 31s ease-in-out -13s infinite alternate;
}
.is-website-runtime .ambient-facet--a { animation:ambient-facet-a 17s cubic-bezier(.42,0,.28,1) -5s infinite alternate; }
.is-website-runtime .ambient-facet--b { animation:ambient-facet-b 23s cubic-bezier(.45,.05,.28,1) -14s infinite alternate; }
.is-website-runtime .ambient-facet--c { animation:ambient-facet-c 29s cubic-bezier(.4,0,.25,1) -9s infinite alternate; }
.is-website-runtime .site-background__scene--right .ambient-facet--a { animation-delay:-12s; animation-duration:21s; }
.is-website-runtime .site-background__scene--right .ambient-facet--b { animation-delay:-4s; animation-duration:26s; }
.is-website-runtime .site-background__scene--right .ambient-facet--c { animation-delay:-19s; animation-duration:31s; }
.is-website-runtime .ambient-edge--a { animation:ambient-edge-travel 13.5s ease-in-out -6s infinite; }
.is-website-runtime .ambient-edge--b { animation:ambient-edge-travel 17s ease-in-out -1s infinite; }
.is-website-runtime .ambient-edge--c { animation:ambient-edge-travel 15.5s ease-in-out -11s infinite; }
.is-website-runtime .ambient-edge--d { animation:ambient-edge-travel 18.5s ease-in-out -4s infinite; }
.ambient {
  position: absolute;
  width: 340px;
  height: 340px;
  pointer-events: none;
  filter: blur(100px);
  opacity: .06;
}
.ambient--top { top: -240px; right: -130px; background: var(--accent); }
.ambient--bottom { bottom: -270px; left: -200px; background: #aeb6c0; }
.site-background__facet {
  position: absolute;
  display: block;
  width: clamp(260px, 34vw, 560px);
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 100% 84%, 8% 100%);
  border-radius: 34%;
  background: linear-gradient(145deg, rgba(104, 124, 139, .11), rgba(14, 20, 25, .015) 58%, rgba(0, 194, 184, .055));
  opacity: .15;
}
.site-background__facet--one {
  top: 7%;
  left: max(-180px, -12vw);
  transform:translate3d(-1%,-1%,0) rotate(-17deg) scale(.99);
}
.site-background__facet--two {
  right: max(-190px, -11vw);
  bottom: 5%;
  width: clamp(320px, 42vw, 680px);
  background: linear-gradient(215deg, rgba(0, 194, 184, .065), rgba(32, 40, 48, .035) 48%, rgba(139, 151, 162, .1));
  opacity: .12;
  transform:translate3d(1%,1%,0) rotate(22deg) scale(1.01);
}
.site-background__facet--three {
  top: 43%;
  left: 58%;
  width: clamp(190px, 23vw, 390px);
  background: linear-gradient(160deg, rgba(127, 143, 155, .08), rgba(0, 194, 184, .025));
  opacity: .08;
  transform:rotate(45deg);
}
@keyframes website-mesh-left {
  from { transform:translate3d(-8px,-6px,0) rotate(194.2deg) scale(.99); }
  to { transform:translate3d(9px,8px,0) rotate(194.8deg) scale(1.02); }
}
@keyframes website-mesh-right {
  from { transform:translate3d(8px,7px,0) rotate(13.8deg) scale(.995); }
  to { transform:translate3d(-9px,-8px,0) rotate(13.2deg) scale(1.02); }
}
@keyframes ambient-facet-a {
  0% { opacity:.58; transform:translate3d(-3px,2px,0) rotate(-.25deg) scale(.985); }
  43% { opacity:1; transform:translate3d(5px,-3px,0) rotate(.28deg) scale(1.012); }
  72% { opacity:.72; transform:translate3d(1px,4px,0) rotate(.08deg) scale(.993); }
  100% { opacity:.88; transform:translate3d(-2px,-1px,0) rotate(-.12deg) scale(1.005); }
}
@keyframes ambient-facet-b {
  0% { opacity:.52; transform:translate3d(3px,-2px,0) rotate(.18deg) scale(.99); }
  36% { opacity:.82; transform:translate3d(-4px,5px,0) rotate(-.3deg) scale(1.014); }
  68% { opacity:1; transform:translate3d(6px,2px,0) rotate(.22deg) scale(1.002); }
  100% { opacity:.64; transform:translate3d(-2px,-4px,0) rotate(-.1deg) scale(.985); }
}
@keyframes ambient-facet-c {
  0% { opacity:.48; transform:translate3d(-2px,-3px,0) rotate(-.16deg) scale(.982); }
  39% { opacity:.76; transform:translate3d(4px,4px,0) rotate(.25deg) scale(1.008); }
  75% { opacity:1; transform:translate3d(-5px,1px,0) rotate(-.28deg) scale(1.015); }
  100% { opacity:.62; transform:translate3d(3px,-2px,0) rotate(.12deg) scale(.992); }
}
@keyframes ambient-edge-travel {
  0%, 55% { opacity:0; stroke-dashoffset:1; }
  59% { opacity:0; stroke-dashoffset:.92; }
  64% { opacity:.52; stroke-dashoffset:.52; }
  69% { opacity:.17; stroke-dashoffset:.14; }
  72%, 100% { opacity:0; stroke-dashoffset:0; }
}
@keyframes website-mesh-left-compact {
  from { transform:translate3d(-4px,-3px,0) rotate(194.3deg) scale(.995); }
  to { transform:translate3d(4px,4px,0) rotate(194.7deg) scale(1.012); }
}
@keyframes website-mesh-right-compact {
  from { transform:translate3d(4px,3px,0) rotate(13.7deg) scale(.998); }
  to { transform:translate3d(-4px,-4px,0) rotate(13.3deg) scale(1.012); }
}
@keyframes ambient-facet-a-compact {
  from { opacity:.58; transform:translate3d(-2px,1px,0) scale(.992); }
  to { opacity:.9; transform:translate3d(3px,-2px,0) scale(1.008); }
}
@keyframes ambient-facet-b-compact {
  from { opacity:.54; transform:translate3d(2px,-1px,0) scale(.994); }
  to { opacity:.88; transform:translate3d(-3px,3px,0) scale(1.008); }
}
@keyframes ambient-facet-c-compact {
  from { opacity:.5; transform:translate3d(-1px,-2px,0) scale(.991); }
  to { opacity:.84; transform:translate3d(3px,2px,0) scale(1.007); }
}
@media (min-width:761px) and (max-width:1024px) {
  .is-website-runtime .site-background__scene--left { animation-name:website-mesh-left-compact; }
  .is-website-runtime .site-background__scene--right { animation-name:website-mesh-right-compact; }
  .is-website-runtime .ambient-facet--a { animation-name:ambient-facet-a-compact; }
  .is-website-runtime .ambient-facet--b { animation-name:ambient-facet-b-compact; }
  .is-website-runtime .ambient-facet--c { animation-name:ambient-facet-c-compact; }
  .site-background__facet-svg { opacity:.09; }
  .ambient-edge--secondary,.site-background__facet--three { display:none; }
}
@media (max-width:760px) {
  .is-website-runtime .site-background__geometry,
  .is-website-runtime .site-background__facet,
  .is-website-runtime .ambient { display:none; }
}
.app-shell {
  --app-pad-top: var(--safe-top);
  --app-pad-bottom: var(--safe-bottom);
  position: relative;
  isolation: isolate;
  z-index: 1;
  width: min(100%, var(--page-width));
  min-height: var(--tg-viewport-stable-height, 100dvh);
  margin: 0 auto;
  padding: var(--app-pad-top) 22px var(--app-pad-bottom);
  overflow-x: clip;
}
html.is-viewport-fit .app-shell {
  height: var(--novo-viewport-height, 100dvh);
  min-height: 0;
}
.app-shell > .screen { position: relative; z-index: 1; }
.is-telegram-runtime .app-shell {
  display: flex;
  flex-direction: column;
}
.is-telegram-runtime .app-shell > .screen {
  flex: 0 0 auto;
  margin-block: auto;
}
.is-website-runtime .app-shell {
  display: flex;
  flex-direction: column;
}
.is-website-runtime .app-shell > .screen {
  flex: 0 0 auto;
  margin-block: auto;
}
.is-website-runtime .app-shell > .website-page-shell {
  flex: 0 0 auto;
  margin-block: auto;
}
.website-page-shell {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 13%, rgba(71, 90, 105, .14), transparent 34%),
    linear-gradient(145deg, rgba(8, 12, 16, .98), rgba(3, 6, 9, .98));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 24px 80px rgba(0,0,0,.32);
}
.website-page-shell::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 1px solid rgba(119, 136, 151, .5);
  border-radius: inherit;
  pointer-events: none;
}
.website-page-shell__content {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-block: auto;
  padding: clamp(18px, 4.5vw, 30px);
}
.website-page-shell--auth {
  min-height: 0;
}
.website-page-shell__content--auth {
  display: block;
  flex: 0 0 auto;
  margin-block: 0;
  padding: clamp(16px, 3vw, 30px);
}
.website-page-shell .brand-polygon-pattern {
  top: -1px;
  right: -1px;
  width: clamp(205px, 60%, 330px);
  opacity: .72;
}
.website-page-shell--auth .brand-polygon-pattern--auth {
  top: -1px;
  right: -1px;
  width: clamp(230px, 64%, 370px);
  opacity: .74;
}
.website-page-shell--auth .screen--auth { padding-block: 8px 14px; }
.website-page-shell--auth .screen--center { min-height: 0; }
.website-page-shell--auth .screen--center > div { width: min(100%, 500px); margin-inline: auto; }
.website-page-shell .screen { position: relative; z-index: 1; }
.brand-polygon-pattern {
  position: absolute;
  z-index: 0;
  top: calc(var(--safe-top) - 24px);
  right: -18px;
  display: block;
  width: clamp(210px, 58%, 340px);
  max-width: none;
  height: auto;
  opacity: .58;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.brand-polygon-pattern--auth {
  top: calc(var(--safe-top) - 34px);
  right: -24px;
  width: clamp(220px, 64%, 360px);
  opacity: .54;
}
.screen { width: 100%; animation: screen-in .28s ease-out; }
.screen--compact { width:min(100%,560px); margin-inline:auto; }
@keyframes screen-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.screen--center { min-height: calc(100vh - var(--safe-top) - var(--safe-bottom)); display: grid; align-content: center; }
.screen--auth { max-width: 650px; margin-inline: auto; padding-block: 16px 28px; }

.home-screen {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--safe-top) - var(--safe-bottom));
  padding: clamp(22px, 5vw, 38px);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 17%, rgba(71, 90, 105, .14), transparent 34%),
    linear-gradient(145deg, rgba(8, 12, 16, .98), rgba(3, 6, 9, .98));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 24px 80px rgba(0,0,0,.32);
}
.is-telegram-runtime .home-screen {
  min-height: 0;
}
.is-website-runtime .home-screen,
.is-website-runtime .screen--center {
  min-height: 0;
}
.home-screen::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 1px solid rgba(119, 136, 151, .5);
  border-radius: inherit;
  pointer-events: none;
}
.home-brand-pattern {
  position: absolute;
  z-index: 0;
  top: -1px;
  right: -1px;
  display: block;
  width: clamp(205px, 60%, 330px);
  max-width: none;
  height: auto;
  opacity: .78;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.home-brand-pattern > img {
  display:block;
  width:100%;
  height:auto;
}
.home-brand-pattern__edge-svg {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.home-brand-pattern__edge-svg path { fill:none !important; stroke:none; opacity:0; }
.home-brand-pattern__edge-svg .home-polygon-edge {
  fill:none !important;
  stroke-width:1.2px;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:.09 1;
  vector-effect:non-scaling-stroke;
}
.home-brand-pattern__edge-svg .home-polygon-edge--a { stroke:#18d6cc; animation:home-polygon-glint 15.5s ease-in-out -7s infinite; }
.home-brand-pattern__edge-svg .home-polygon-edge--b { stroke:#00c2b8; animation:home-polygon-glint 19s ease-in-out -12s infinite; }
.home-brand-pattern__edge-svg .home-polygon-edge--c { stroke:#008e87; animation:home-polygon-glint 23s ease-in-out -4s infinite; }
@keyframes home-polygon-glint {
  0%, 59% { opacity:0; stroke-dashoffset:1; }
  63% { opacity:0; stroke-dashoffset:.92; }
  67% { opacity:.56; stroke-dashoffset:.54; }
  72% { opacity:.16; stroke-dashoffset:.14; }
  76%, 100% { opacity:0; stroke-dashoffset:0; }
}
.home-screen > :not(.home-brand-pattern) { position: relative; z-index: 1; }
.home-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; }
.home-brand .brand-mark { width: 88px; height: 88px; }
.home-brand__copy { min-width: 0; }
.home-brand .brand-name { font-size: clamp(29px, 7vw, 42px); }
.home-status { display: flex; align-items: center; gap: 11px; margin-top: 17px; color: var(--secondary); font-size: 16px; }
.home-status .dot { width: 11px; height: 11px; }
.home-screen .status-card { position: relative; z-index: 1; margin-top:clamp(24px,5vw,34px); }
.home-screen .days-ring-wrap {
  display: grid;
  grid-template-columns: minmax(84px, 118px) minmax(92px, 1fr);
  align-items: center;
  gap: 15px;
  padding-left: clamp(14px, 3vw, 26px);
  border-left: 1px solid rgba(53,58,64,.75);
}
.home-screen .menu { position: relative; z-index: 1; }
.subscription-state { min-width:0; }
.subscription-state .eyebrow { max-width:130px; line-height:1.35; }
.subscription-state__value {
  max-width:100%;
  margin:7px 0 0;
  font-size:clamp(25px,5.7vw,34px);
  line-height:1.1;
  overflow-wrap:anywhere;
}
.subscription-state--empty { align-self:stretch; display:grid; align-content:center; text-align:center; }
.subscription-state--empty .eyebrow { margin-inline:auto; }
.subscription-state--empty .subscription-state__value {
  font-size:clamp(18px,4.8vw,28px);
  letter-spacing:-.025em;
  overflow-wrap:normal;
}
.expiry-info { min-width:0; line-height:1.3; }
.expiry-info span { display:block; color:var(--muted); font-size:12px; }
.expiry-info strong { display:block; margin-top:5px; color:var(--highlight); font-size:14px; font-weight:620; white-space:nowrap; }

.topbar {
  min-height: 64px;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.topbar h1 { margin: 0; font-size: clamp(24px, 5vw, 34px); line-height: 1.12; text-align: center; letter-spacing: -.025em; }
.topbar__spacer { width:54px; height:1px; }
.icon-button {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(19,22,26,.72);
  color: var(--highlight);
  font-size: 30px;
  cursor: pointer;
}
.icon-button--bare { border-color: transparent; background: transparent; }
.icon-button[disabled] { visibility: hidden; }
.icon-button .ui-icon { width:24px; height:24px; }

.brand { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 18px 0 34px; }
.brand--compact { justify-content: flex-start; margin: 0 0 24px; gap: 14px; }
.brand-name { font-size: clamp(28px, 7vw, 42px); line-height: 1; font-weight: 740; letter-spacing: -.035em; }
.brand--compact .brand-name { font-size: 30px; }
.brand-mark {
  position: relative;
  width: 94px;
  height: 94px;
  isolation:isolate;
  filter: drop-shadow(0 8px 20px rgba(0,194,184,.08));
  flex: 0 0 auto;
}
.brand--compact .brand-mark { width: 62px; height: 62px; }
.brand-mark img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; }
.brand-mark::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(112deg,transparent 38%,rgba(215,255,252,.06) 44%,rgba(232,255,253,.98) 48%,rgba(62,241,232,.92) 51%,rgba(24,214,204,.13) 56%,transparent 63%);
  background-size:210% 100%;
  background-position:132% 0;
  -webkit-mask:url("/miniapp/static/images/novo-logo.png") center/contain no-repeat;
  mask:url("/miniapp/static/images/novo-logo.png") center/contain no-repeat;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 6px rgba(24,214,204,.68));
  animation:brand-mark-glint 10s linear -4s infinite;
}
@keyframes brand-mark-glint {
  0%, 47% { opacity:0; background-position:132% 0; }
  49% { opacity:.1; background-position:114% 0; }
  69% { opacity:.9; background-position:-28% 0; }
  71%, 100% { opacity:0; background-position:-52% 0; }
}
.ui-icon { display:block; width:24px; height:24px; flex:0 0 auto; }
.brand-icon { display:block; width:25px; height:25px; background:currentColor; -webkit-mask:var(--brand-icon) center/contain no-repeat; mask:var(--brand-icon) center/contain no-repeat; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.numeric-value { white-space:nowrap; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.state-icon .ui-icon { width:48px; height:48px; }
.setup-icon .ui-icon { width:40px; height:40px; }
.choice-card__check .ui-icon { width:20px; height:20px; }
.payment-method__icon .ui-icon { width:28px; height:28px; margin:auto; }
.payment-method__check .ui-icon { width:20px; height:20px; }
.platform__icon .ui-icon { width:28px; height:28px; }
.list-avatar .ui-icon { width:22px; height:22px; }
.empty-state__icon .ui-icon { width:44px; height:44px; margin:auto; }
.modal-close .ui-icon,.device-remove .ui-icon { width:21px; height:21px; }
.device-card__icon .ui-icon { width:25px; height:25px; }
.copy-field button .ui-icon { width:22px; height:22px; }
.input-action .ui-icon { width:21px; height:21px; margin:auto; }
.terms-row strong .ui-icon { width:24px; height:24px; }
.auth-link--icon { display:flex; align-items:center; gap:7px; }
.auth-link--icon .ui-icon { width:18px; height:18px; }

.eyebrow { margin: 0 0 8px; color: var(--secondary); font-size: 15px; text-transform: uppercase; letter-spacing: .05em; }
.hero-title { margin: 0; font-size: clamp(52px, 12vw, 76px); line-height: .94; font-weight: 480; letter-spacing: -.055em; }
.gradient-text { color: var(--accent); background: linear-gradient(135deg,var(--accent-light),var(--accent),var(--accent-dark)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.subtitle { margin: 12px 0 0; color: var(--secondary); font-size: clamp(17px,4vw,22px); line-height: 1.45; text-align: center; }
.section-title { margin: 34px 2px 16px; font-size: clamp(22px,5vw,28px); letter-spacing: -.025em; }

.card {
  position: relative;
  border: 1px solid var(--steel);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(19,22,26,.93), rgba(9,10,12,.88));
  box-shadow: inset 0 1px rgba(255,255,255,.02), 0 20px 55px rgba(0,0,0,.16);
}
.card--padded { padding: 28px; }
.card--glow { border-color: rgba(24,214,204,.46); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 28px rgba(0,194,184,.06); }
.card--muted { border-style: dashed; }
.status-card {
  display:grid;
  grid-template-columns:minmax(110px,.82fr) minmax(190px,1.18fr);
  align-items:center;
  gap:18px;
  padding:24px 28px;
  margin:28px 0 18px;
  isolation:isolate;
  overflow:hidden;
}
.subscription-orb {
  position:absolute;
  z-index:0;
  display:block;
  width:clamp(156px,30vw,288px);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  filter:blur(14px);
  mix-blend-mode:screen;
  opacity:0;
  will-change:left,top,transform,opacity;
}
.subscription-orb--one {
  background:radial-gradient(circle,rgba(24,214,204,.4) 0%,rgba(24,214,204,.19) 27%,rgba(0,194,184,.065) 54%,transparent 74%);
  animation:subscription-orb-one 27.5s linear -12s infinite;
}
.subscription-orb--two {
  background:radial-gradient(circle,rgba(154,180,198,.34) 0%,rgba(98,143,163,.15) 29%,rgba(24,214,204,.05) 55%,transparent 75%);
  animation:subscription-orb-two 34.5s linear -21s infinite;
}
.status-card > :not(.subscription-orb) { position:relative; z-index:1; }
@keyframes subscription-orb-one {
  0%, 7% { opacity:0; left:-38%; top:74%; transform:scale(.64); }
  13% { opacity:.12; left:-28%; top:65%; transform:scale(.78); }
  25% { opacity:.45; left:-8%; top:31%; transform:scale(1.03); }
  39% { opacity:.55; left:17%; top:-12%; transform:scale(.9); }
  53% { opacity:.49; left:42%; top:4%; transform:scale(1.12); }
  67% { opacity:.55; left:67%; top:38%; transform:scale(.94); }
  79% { opacity:.43; left:82%; top:68%; transform:scale(1.08); }
  89% { opacity:.14; left:98%; top:78%; transform:scale(.76); }
  94%, 100% { opacity:0; left:112%; top:82%; transform:scale(.64); }
}
@keyframes subscription-orb-two {
  0%, 8% { opacity:0; left:104%; top:-27%; transform:scale(.62); }
  14% { opacity:.11; left:96%; top:-17%; transform:scale(.76); }
  27% { opacity:.44; left:77%; top:12%; transform:scale(1.06); }
  40% { opacity:.55; left:56%; top:50%; transform:scale(.9); }
  55% { opacity:.5; left:35%; top:74%; transform:scale(1.1); }
  68% { opacity:.53; left:13%; top:47%; transform:scale(.95); }
  80% { opacity:.4; left:-4%; top:8%; transform:scale(1.08); }
  90% { opacity:.15; left:-20%; top:-14%; transform:scale(.76); }
  95%, 100% { opacity:0; left:-32%; top:-28%; transform:scale(.62); }
}
.tariff-name { margin: 6px 0 0; font-size: clamp(26px,6vw,36px); }
.days-ring {
  --progress: 75%;
  position: relative;
  width: 110px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--accent-light) 0 var(--progress), #273038 var(--progress) 100%);
  box-shadow: 0 0 18px rgba(0,194,184,.055);
}
.days-ring::before { content:""; position:absolute; z-index:1; width: 98px; aspect-ratio:1; border-radius:50%; background:#0c1014; border:1px solid rgba(39,44,50,.9); }
.days-ring::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:-1px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(ellipse 13px 3px at 50% 2px,rgba(232,255,253,.98) 0%,rgba(24,214,204,.82) 31%,rgba(24,214,204,.18) 56%,transparent 78%);
  filter:drop-shadow(0 0 6px rgba(24,214,204,.68));
  animation:subscription-ring-glint 10.5s linear -5s infinite;
}
.days-ring__text { position: relative; z-index:3; text-align:center; }
@keyframes subscription-ring-glint {
  0%, 38% { opacity:0; transform:rotate(-42deg); }
  42% { opacity:.08; transform:rotate(-12deg); }
  70% { opacity:.9; transform:rotate(254deg); }
  77%, 100% { opacity:0; transform:rotate(312deg); }
}
.days-ring strong { display:block; font-size:34px; line-height:1; }
.days-ring small { color:var(--secondary); }
.days-caption { margin-top: 8px; color: var(--secondary); font-size: 13px; text-align:center; }

.btn {
  width: 100%;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 15px 24px;
  border: 1px solid var(--steel);
  border-radius: var(--radius-md);
  background: rgba(19,22,26,.92);
  color: var(--white);
  font-size: clamp(18px,4.6vw,24px);
  font-weight: 620;
  cursor: pointer;
  transition: border-color .18s ease-out, background .18s ease-out, box-shadow .18s ease-out, color .18s ease-out, opacity .18s ease-out;
}
.btn:active { opacity:.92; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn__icon { width: 38px; display:grid; place-items:center; color: var(--accent-light); }
.btn__icon .ui-icon { width:25px; height:25px; }
.btn__arrow { width:28px; display:grid; place-items:center; margin-left:auto; color:var(--highlight); }
.btn__arrow .ui-icon { width:27px; height:27px; }
.btn__icon,.btn__arrow,.menu-item__icon,.menu-item__body strong,.menu-item__arrow { transition:color .18s ease-out,opacity .18s ease-out; }
/* Keep every main action aligned with the softer renewal-button treatment. */
.btn--primary,.btn--outline-accent { border-color: rgba(24,214,204,.68); background: linear-gradient(135deg,rgba(24,214,204,.14),rgba(0,142,135,.035)); box-shadow: inset 0 0 24px rgba(0,194,184,.04),0 0 22px rgba(0,194,184,.06); }
.btn--primary .btn__icon { color: var(--accent-light); }
.btn--danger { color: var(--error); border-color: rgba(255,77,94,.64); background: rgba(255,77,94,.03); }
.btn--small { min-height: 54px; font-size: 17px; }
.btn-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* A small light follows the rounded border path itself; it never spans the button face. */
.btn--primary,.btn--outline-accent,.promo-submit { --cta-glint-radius:var(--radius-md); position:relative; isolation:isolate; overflow:hidden; }
.promo-submit { --cta-glint-radius:14px; }
.setup-screen .btn,.referral-cta { --cta-glint-radius:18px; }
.payment-primary-action { --cta-glint-radius:28px; }
@keyframes accent-button-border-glint { to { offset-distance:100%; } }
@supports (offset-path:inset(1px round 2px)) {
  .btn--primary::after,.btn--outline-accent::after,.promo-submit::after {
    content:"";
    position:absolute;
    z-index:2;
    width:46px;
    height:2px;
    border-radius:999px;
    pointer-events:none;
    opacity:.58;
    background:linear-gradient(90deg,transparent,rgba(24,214,204,.18) 20%,rgba(24,214,204,.72) 40%,rgba(238,255,254,.98) 50%,rgba(24,214,204,.72) 60%,rgba(24,214,204,.18) 80%,transparent);
    box-shadow:0 0 5px rgba(24,214,204,.34);
    offset-path:inset(1px round var(--cta-glint-radius));
    offset-distance:0%;
    offset-rotate:auto;
    animation:accent-button-border-glint 12s linear infinite;
    transition:opacity .28s ease-out;
    will-change:offset-distance;
  }
  .btn--primary:focus-visible::after,.btn--outline-accent:focus-visible::after,.promo-submit:focus-visible::after { opacity:.86; }
  @media (hover:hover) and (pointer:fine) {
    .btn--primary:not(:disabled):hover::after,.btn--outline-accent:not(:disabled):hover::after,.promo-submit:not(:disabled):hover::after { opacity:1; }
  }
}

.menu { margin-top: 18px; overflow:hidden; }
.menu-item {
  width:100%; min-height:76px; display:flex; align-items:center; gap:18px; padding:14px 20px;
  border:0; border-bottom:1px solid rgba(53,58,64,.62); background:transparent; color:var(--white); text-align:left; cursor:pointer;
  transition:background .18s ease-out,box-shadow .18s ease-out,color .18s ease-out,opacity .18s ease-out;
}
.menu-item:last-child { border-bottom:0; }
.menu-item__icon { width:32px; height:32px; display:grid; place-items:center; flex:0 0 32px; color:var(--secondary); }
.menu-item__icon .ui-icon { width:24px; height:24px; }
.menu-item__body { flex:1; min-width:0; }
.menu-item__body strong { display:block; font-size:clamp(17px,4vw,22px); white-space:nowrap; }
.menu-item__body small { display:block; margin-top:4px; color:var(--secondary); font-size:15px; line-height:1.35; }
.menu-item__meta { color:var(--accent-light); font-size:16px; }
.platform-badge { flex:0 0 auto; padding:4px 10px; border:1px solid rgba(24,214,204,.38); border-radius:999px; background:rgba(0,194,184,.045); font-size:13px; line-height:1; letter-spacing:.01em; }
.menu-item__arrow { width:28px; height:28px; display:grid; place-items:center; flex:0 0 28px; color:var(--secondary); }
.menu-item__arrow .ui-icon { width:25px; height:25px; }

.home-screen .btn:focus-visible,.home-screen .menu-item:focus-visible { position:relative; z-index:2; outline:2px solid rgba(24,214,204,.82); outline-offset:2px; }
.menu-item:active { background:rgba(29,34,40,.48); opacity:.92; }

@media (hover:hover) and (pointer:fine) {
  .btn:not(:disabled):hover { box-shadow:inset 0 0 20px rgba(255,255,255,.025); }
  .btn--primary:not(:disabled):hover,.btn--outline-accent:not(:disabled):hover { border-color:rgba(24,214,204,.84); background:linear-gradient(135deg,rgba(24,214,204,.18),rgba(0,142,135,.055)); box-shadow:inset 0 0 24px rgba(0,194,184,.055),0 0 22px rgba(0,194,184,.085); }
  .home-screen .btn:not(:disabled):hover { border-color:rgba(24,214,204,.84); background:linear-gradient(135deg,rgba(24,214,204,.18),rgba(0,142,135,.055)); box-shadow:inset 0 0 24px rgba(0,194,184,.055),0 0 22px rgba(0,194,184,.085); }
  .home-screen .btn:not(:disabled):hover .btn__icon { color:var(--accent-light); }
  .home-screen .btn:not(:disabled):hover .btn__arrow { color:var(--white); }
  .home-screen .menu-item:not(:disabled):hover { background:linear-gradient(90deg,rgba(29,34,40,.52),rgba(19,22,26,.28)); box-shadow:inset 2px 0 rgba(24,214,204,.44); }
  .home-screen .menu-item:not(:disabled):hover .menu-item__icon { color:var(--accent-light); }
  .home-screen .menu-item:not(:disabled):hover .menu-item__body strong { color:var(--highlight); }
  .home-screen .menu-item:not(:disabled):hover .menu-item__arrow { color:var(--highlight); }
  .profile-nav-row:hover { background:linear-gradient(90deg,rgba(29,34,40,.5),rgba(19,22,26,.24)); box-shadow:inset 2px 0 rgba(24,214,204,.36); }
  .profile-nav-row:hover .profile-nav-row__icon { color:var(--highlight); }
  .profile-nav-row:hover .profile-nav-row__arrow { color:var(--highlight); }
  .profile-logout:hover { border-color:var(--border); background:rgba(29,34,40,.5); color:var(--secondary); }
  .passkey-delete:hover:not(:disabled) { border-color:rgba(255,77,94,.42); background:rgba(255,77,94,.035); color:#e1a5ab; }
  .passkey-add-action:hover:not(:disabled),.confirmation-modal__cancel:hover:not(:disabled),.confirmation-modal__logout:hover:not(:disabled) { border-color:var(--steel); background:#252b32; color:var(--white); }
  .confirmation-modal__danger:hover:not(:disabled) { border-color:rgba(255,77,94,.78); background:rgba(255,77,94,.055); }
  .promo-submit:hover:not(:disabled) { border-color:rgba(24,214,204,.84); background:linear-gradient(135deg,rgba(24,214,204,.18),rgba(0,142,135,.055)); box-shadow:inset 0 0 24px rgba(0,194,184,.055),0 0 22px rgba(0,194,184,.085); }
  .toast__close:hover { background:rgba(53,58,64,.45); color:var(--highlight); }
}

.screen--auth { max-width:500px; padding-block:10px 22px; }
.auth-brand .brand { justify-content:center; margin:0 0 14px; }
.auth-brand .brand-mark { width:48px; height:48px; }
.auth-brand .brand-name { font-size:25px; }
.auth-intro { text-align:center; }
.auth-heading { margin:0; text-align:center; font-size:clamp(29px,7vw,36px); letter-spacing:-.035em; }
.screen--auth .subtitle { margin-top:7px; font-size:14px; line-height:1.4; }
.auth-card { padding:19px; margin:17px auto 0; border-radius:22px; }
.website-page-shell--auth .auth-card {
  background: linear-gradient(145deg, rgba(19,22,26,.94), rgba(7,10,13,.91));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 20px 55px rgba(0,0,0,.2);
}
.field { display:block; margin-bottom:13px; }
.field > span { display:block; margin:0 0 7px; color:var(--highlight); font-size:14px; }
.input-wrap { position:relative; }
.input {
  width:100%; min-height:54px; padding:13px 15px; border:1px solid var(--steel); border-radius:14px;
  background:rgba(29,34,40,.52); color:var(--white); font-size:16px; appearance:none;
}
.input::placeholder { color:var(--muted); }
.input-wrap .input { padding-right:50px; }
.input-action { position:absolute; inset:0 2px 0 auto; width:48px; border:0; background:transparent; color:var(--secondary); cursor:pointer; font-size:22px; }
.field-help { display:block; margin-top:6px; color:var(--muted); font-size:12px; }
.auth-link { display:block; width:max-content; max-width:100%; margin:0 0 13px auto; border:0; background:transparent; color:var(--accent-light); cursor:pointer; font-size:14px; }
.auth-link--login-forgot { margin-bottom:0; }
.auth-login-message:empty { min-height:0; margin:3px 0 24px; }
.auth-login-message:not(:empty) { margin:5px 0 12px; }
.auth-link--center { margin:16px auto 0; }
.auth-switch { margin:15px 0 0; color:var(--secondary); text-align:center; font-size:14px; }
.auth-switch button { padding:0; border:0; background:transparent; color:var(--accent-light); cursor:pointer; }
.divider { display:flex; align-items:center; gap:13px; margin:15px 0; color:var(--secondary); font-size:12px; }
.divider::before,.divider::after { content:""; height:1px; flex:1; background:var(--steel); }
.message { min-height:18px; margin:8px 0; color:var(--secondary); font-size:13px; line-height:1.35; text-align:center; }
.message--error { color:var(--error); }
.message--success { color:var(--success); }
.screen--auth .btn { min-height:54px; padding:11px 16px; border-radius:16px; font-size:16px; }
.screen--auth .btn__icon { width:25px; }
.screen--auth .btn__arrow { width:22px; }
.auth-alt-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.auth-alt-btn { min-height:56px; display:flex; align-items:center; justify-content:center; gap:9px; padding:10px 12px; border:1px solid var(--steel); border-radius:16px; background:rgba(19,22,26,.75); color:var(--highlight); cursor:pointer; transition:border-color .18s ease-out,background .18s ease-out,color .18s ease-out,opacity .18s ease-out; }
.auth-alt-btn > span { width:23px; height:23px; display:grid; place-items:center; color:var(--accent-light); }
.auth-alt-btn .ui-icon { width:21px; height:21px; }
.auth-alt-btn strong { font-size:14px; font-weight:630; }
.auth-alt-btn.is-unavailable { opacity:.48; }
.auth-alt-btn:focus-visible,.auth-link:focus-visible { outline:2px solid rgba(24,214,204,.76); outline-offset:2px; }
.auth-alt-btn:active { opacity:.92; }

.auth-recovery-screen .topbar { margin-bottom:12px; }
.auth-state-card { padding:22px 20px; }
.auth-state-icon { width:58px; height:58px; margin-bottom:14px; border-width:1px; border-radius:18px; }
.auth-state-icon .ui-icon { width:28px; height:28px; }
.auth-state-card .state-title { font-size:clamp(25px,6.4vw,32px); }
.auth-state-card .state-text { margin:8px auto 17px; font-size:14px; line-height:1.42; }
.auth-state-card .field { margin-top:15px; }
.auth-state-card .gradient-text { margin:0 0 13px; overflow-wrap:anywhere; font-size:19px; }
.auth-state-card .email-code { gap:7px; margin:17px 0; }
.auth-state-card .email-code input { font-size:20px; border-radius:10px; }
.auth-secondary-action { margin-top:9px; }

.auth-modal-backdrop { padding:16px; }
.auth-modal { position:relative; width:min(100%,420px); padding:23px 20px 20px; border-radius:24px; text-align:center; }
.auth-modal .modal-close { position:absolute; top:12px; right:12px; width:38px; height:38px; }
.auth-modal__icon { width:54px; height:54px; display:grid; place-items:center; margin:0 auto 13px; border:1px solid rgba(24,214,204,.35); border-radius:17px; color:var(--accent-light); background:rgba(0,194,184,.035); }
.auth-modal__icon .ui-icon { width:27px; height:27px; }
.auth-modal h2 { margin:0; padding-inline:24px; font-size:23px; }
.auth-modal > p { margin:7px auto 16px; max-width:330px; color:var(--secondary); font-size:13px; line-height:1.45; }
.auth-modal .field { text-align:left; }
.auth-modal .btn { min-height:54px; border-radius:16px; font-size:15px; }
.modal.passkey-manager-modal { position:relative; width:min(100%,480px); padding:22px; border-color:var(--border); border-radius:24px; background:var(--graphite); overflow:visible; }
.passkey-manager-modal__close { position:absolute; top:12px; right:12px; width:38px; height:38px; }
.passkey-manager-modal__head { min-width:0; display:flex; align-items:center; gap:13px; padding-right:42px; }
.passkey-manager-modal__icon { width:48px; height:48px; display:grid; place-items:center; flex:0 0 48px; border:1px solid rgba(24,214,204,.32); border-radius:15px; color:var(--accent-light); background:rgba(0,194,184,.035); }
.passkey-manager-modal__icon .ui-icon { width:25px; height:25px; }
.passkey-manager-modal__head > div { min-width:0; }
.passkey-manager-modal h2 { margin:0; font-size:22px; letter-spacing:-.02em; }
.passkey-manager-modal__head p { margin:4px 0 0; color:var(--secondary); font-size:13px; line-height:1.4; }
.passkey-list { display:grid; gap:8px; max-height:min(42vh,330px); margin:17px 0 14px; overflow:auto; overscroll-behavior:contain; }
.passkey-item { min-width:0; min-height:64px; display:flex; align-items:center; gap:11px; padding:10px 10px 10px 12px; border:1px solid var(--border); border-radius:16px; background:var(--gunmetal); }
.passkey-item__icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; color:var(--highlight); }
.passkey-item__icon .ui-icon { width:22px; height:22px; }
.passkey-item__body { min-width:0; flex:1; }
.passkey-item__body strong { display:block; overflow:hidden; color:var(--white); font-size:15px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.passkey-item__body small { display:block; margin-top:3px; color:var(--secondary); font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
.passkey-delete { min-width:86px; min-height:40px; display:flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--secondary); cursor:pointer; font-size:12px; white-space:nowrap; transition:background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out,box-shadow .18s ease-out,opacity .18s ease-out; }
.passkey-delete .ui-icon { width:16px; height:16px; }
.passkey-empty { min-height:88px; display:flex; align-items:center; gap:13px; padding:15px; border:1px dashed var(--steel); border-radius:16px; background:rgba(29,34,40,.42); }
.passkey-empty > span { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; color:var(--muted); }
.passkey-empty .ui-icon { width:24px; height:24px; }
.passkey-empty p { margin:0; color:var(--secondary); font-size:13px; line-height:1.45; }
.passkey-manager-modal .btn { min-height:52px; border-radius:16px; font-size:15px; }
.passkey-add-action { border-color:var(--steel); background:var(--gunmetal); color:var(--highlight); }
.passkey-add-action .btn__icon { color:var(--accent-light); }
.modal-backdrop.confirmation-backdrop { z-index:80; background:rgba(2,4,7,.82); backdrop-filter:none; }
.modal.confirmation-modal { width:min(100%,400px); padding:24px; border-color:var(--border); border-radius:22px; background:var(--graphite); text-align:left; overflow:visible; }
.confirmation-modal h2 { margin:0; color:var(--white); font-size:22px; letter-spacing:-.02em; }
.confirmation-modal > p { margin:9px 0 20px; color:var(--secondary); font-size:14px; line-height:1.48; }
.confirmation-modal__actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.confirmation-modal__actions .btn { min-height:50px; padding:10px 14px; border-radius:15px; font-size:14px; white-space:nowrap; }
.confirmation-modal__cancel { border-color:var(--border); background:var(--gunmetal); color:var(--highlight); }
.confirmation-modal__logout { border-color:rgba(157,164,173,.48); background:rgba(29,34,40,.82); color:var(--white); }

.state-card { padding:40px 30px; text-align:center; }
.state-icon { width:104px; height:104px; display:grid; place-items:center; margin:0 auto 28px; border:2px solid var(--accent); border-radius:50%; color:var(--accent-light); font-size:54px; box-shadow:0 0 28px rgba(0,194,184,.08); }
.state-icon--success { border-color:var(--success); color:var(--success); }
.state-icon--error { border-color:var(--error); color:var(--error); }
.state-icon--warning { border-color:var(--warning); color:var(--warning); }
.state-title { margin:0; font-size:clamp(30px,7vw,45px); letter-spacing:-.035em; }
.state-text { margin:16px auto 28px; max-width:510px; color:var(--secondary); font-size:clamp(17px,4vw,21px); line-height:1.45; }
.email-code { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:30px 0; }
.email-code input { width:100%; min-width:0; aspect-ratio:.78; padding:0; text-align:center; font-size:28px; border:1px solid var(--steel); border-radius:12px; background:rgba(29,34,40,.52); color:var(--white); }
.email-code--single { display:block; }
.email-code--single input { aspect-ratio:auto; min-height:64px; padding:12px 18px; letter-spacing:.42em; font-variant-numeric:tabular-nums; }

.info-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.stat { padding:22px 12px; text-align:center; border-right:1px solid var(--border); }
.stat:last-child { border-right:0; }
.stat small { display:block; min-height:38px; color:var(--secondary); font-size:14px; line-height:1.3; }
.stat strong { display:block; margin-top:6px; font-size:32px; font-weight:520; }
.reward-grid { display:grid; grid-template-columns:repeat(3,1fr); padding:20px 0; }
.reward { padding:8px 22px; border-right:1px solid var(--border); }
.reward:last-child { border-right:0; }
.reward strong { display:block; color:var(--accent); font-size:30px; }
.reward span { display:block; margin-top:8px; color:var(--secondary); line-height:1.4; }

.profile-screen .topbar,.promo-screen .topbar { min-height:52px; margin-bottom:14px; }
.profile-screen .topbar h1,.promo-screen .topbar h1 { font-size:24px; }
.profile-identity { min-height:72px; display:flex; align-items:center; gap:14px; padding:15px 18px; }
.profile-identity__icon { width:24px; height:24px; color:var(--secondary); }
.profile-id { font-size:17px; font-weight:620; }
.profile-id span { color:var(--accent-light); font-weight:720; }
.profile-subscription { margin-top:12px; padding:17px 18px; }
.profile-card-head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.profile-card-head h2 { margin:0; font-size:20px; }
.status-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 11px; border:1px solid var(--steel); border-radius:999px; color:var(--secondary); font-size:13px; font-weight:650; }
.status-pill--active { color:var(--success); border-color:rgba(40,199,111,.42); background:rgba(40,199,111,.035); }
.status-pill--inactive { color:var(--secondary); border-color:rgba(157,164,173,.3); background:rgba(111,119,130,.035); }
.dot { width:12px; height:12px; border-radius:50%; background:var(--success); box-shadow:0 0 13px rgba(40,199,111,.7); }
.home-status .home-status__dot { background:#7b848e; box-shadow:0 0 10px rgba(217,221,225,.16); }
.home-status .home-status__dot.is-active { background:var(--success); box-shadow:0 0 12px rgba(40,199,111,.58); }
.status-pill--inactive .status-dot { background:var(--muted); box-shadow:0 0 8px rgba(157,164,173,.16); }
.status-pill--active .status-dot { background:var(--success); box-shadow:0 0 9px rgba(40,199,111,.38); }
.status-dot { width:9px; height:9px; animation:status-breathe 2.2s ease-in-out infinite; }
@keyframes status-breathe { 0%,100%{transform:scale(.94);opacity:.75} 50%{transform:scale(1.06);opacity:1} }
.profile-detail-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; margin-top:12px; border-top:1px solid var(--border); font-size:15px; }
.profile-detail-row span { color:var(--secondary); }
.profile-detail-row strong { text-align:right; font-weight:650; }
.profile-devices,.profile-promo { margin-top:12px; overflow:hidden; }
.profile-promo .profile-nav-row + .profile-nav-row { border-top:1px solid var(--border); }
.profile-nav-row { width:100%; min-height:66px; display:flex; align-items:center; gap:13px; padding:13px 17px; border:0; background:transparent; color:var(--white); text-align:left; cursor:pointer; transition:background .18s cubic-bezier(.22,1,.36,1),box-shadow .18s cubic-bezier(.22,1,.36,1),color .18s ease-out,opacity .18s ease-out; }
.profile-nav-row__icon { width:28px; height:28px; display:grid; place-items:center; flex:0 0 28px; color:var(--secondary); transition:color .18s ease-out; }
.profile-nav-row__icon .ui-icon { width:23px; height:23px; }
.profile-nav-row__body { flex:1; min-width:0; }
.profile-nav-row__body strong { display:block; font-size:17px; }
.profile-nav-row__body small { display:block; margin-top:3px; color:var(--secondary); font-size:13px; }
.profile-nav-row__meta { color:var(--secondary); font-size:14px; }
.profile-nav-row__arrow { width:24px; display:grid; place-items:center; color:var(--muted); transition:color .18s ease-out; }
.profile-nav-row__arrow .ui-icon { width:21px; height:21px; }
.profile-device-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); }
.profile-device-stats > div { padding:11px 8px 13px; text-align:center; border-right:1px solid var(--border); }
.profile-device-stats > div:last-child { border-right:0; }
.profile-device-stats small { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.profile-device-stats strong { display:block; margin-top:3px; font-size:19px; }
.profile-nav-row:focus-visible,.promo-submit:focus-visible { position:relative; z-index:2; outline:2px solid rgba(24,214,204,.75); outline-offset:-2px; }
.profile-nav-row:active { background:rgba(29,34,40,.38); opacity:.92; }
.profile-logout { min-height:44px; display:flex; align-items:center; gap:9px; margin:12px 5px 0 auto; padding:9px 12px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; font-weight:560; transition:background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out,box-shadow .18s ease-out,opacity .18s ease-out; }
.profile-logout__icon { width:22px; height:22px; display:grid; place-items:center; }
.profile-logout__icon .ui-icon { width:19px; height:19px; }
.profile-logout:focus-visible,.passkey-delete:focus-visible,.passkey-manager-modal .btn:focus-visible,.confirmation-modal .btn:focus-visible { outline:2px solid rgba(24,214,204,.78); outline-offset:2px; }
.profile-logout:active,.passkey-delete:active,.confirmation-modal .btn:active { opacity:.9; }

.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.choice-card { position:relative; min-width:0; min-height:128px; padding:17px; border:1px solid var(--border); border-radius:22px; background:linear-gradient(145deg,rgba(19,22,26,.9),rgba(9,12,15,.78)); color:var(--highlight); text-align:left; cursor:pointer; transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,opacity .16s ease; }
.choice-card.is-selected { border-color:var(--accent); background:linear-gradient(145deg,rgba(0,194,184,.075),rgba(9,12,15,.82)); box-shadow:inset 0 0 20px rgba(0,194,184,.025); }
.choice-card__check { position:absolute; top:14px; right:14px; width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--accent); border-radius:50%; color:var(--accent-light); opacity:0; transform:scale(.9); transition:opacity .16s ease,transform .16s ease; }
.choice-card.is-selected .choice-card__check { opacity:1; transform:none; }
.choice-card .choice-card__period { display:block; max-width:calc(100% - 30px); margin:0; color:var(--secondary); font-size:16px; }
.choice-card strong { display:block; margin-top:29px; font-size:clamp(25px,6vw,31px); line-height:1; letter-spacing:-.035em; }
.choice-card.is-selected strong { color:var(--accent-light); }
.summary-card { margin:16px 0; padding:18px 20px; }

.payment-method { width:100%; min-height:78px; display:grid; grid-template-columns:44px minmax(0,1fr) 26px 22px; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:22px; background:rgba(19,22,26,.82); color:var(--highlight); text-align:left; cursor:pointer; transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,opacity .16s ease; }
.payment-method.is-selected { border-color:var(--accent); background:linear-gradient(105deg,rgba(0,194,184,.07),rgba(19,22,26,.82) 48%); box-shadow:inset 2px 0 rgba(24,214,204,.36); }
.payment-method__icon { width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(157,164,173,.2); border-radius:14px; color:var(--highlight); background:rgba(9,12,15,.42); transition:color .16s ease,border-color .16s ease,background-color .16s ease; }
.payment-method__icon img { display:block; width:25px; height:31px; object-fit:contain; }
.payment-method__icon .ui-icon { width:23px; height:23px; }
.payment-method__body { min-width:0; }
.payment-method__body strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px; }
.payment-method__body small { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--secondary); font-size:13px; }
.payment-method__check { width:24px; height:24px; display:grid; place-items:center; border:1px solid rgba(24,214,204,.52); border-radius:50%; background:rgba(0,194,184,.1); color:var(--accent-light); opacity:0; transform:scale(.9); transition:opacity .16s ease,transform .16s ease; }
.payment-method__check .ui-icon { width:15px; height:15px; }
.payment-method.is-selected .payment-method__check { opacity:1; transform:none; }
.payment-method__arrow { width:22px; height:22px; display:grid; place-items:center; color:var(--muted); transition:color .16s ease; }
.payment-method__arrow .ui-icon { width:19px; height:19px; }

.platform-list { display:grid; gap:14px; }
.platform { width:100%; min-height:100px; display:flex; align-items:center; gap:22px; padding:18px 26px; border:1px solid rgba(24,214,204,.26); border-radius:20px; background:linear-gradient(120deg,rgba(24,214,204,.055),rgba(19,22,26,.65)); cursor:pointer; text-align:left; }
.platform__icon { width:66px; height:66px; display:grid; place-items:center; border:1px solid rgba(24,214,204,.3); border-radius:18px; color:var(--accent-light); font-size:30px; }
.platform strong { flex:1; font-size:24px; }
.stepper { display:flex; justify-content:center; gap:12px; margin:12px 0 8px; }
.stepper i { width:75px; height:7px; border-radius:99px; background:var(--gunmetal); }
.stepper i.is-active { background:var(--accent-light); box-shadow:0 0 12px rgba(24,214,204,.35); }
.step-label { margin:0 0 28px; color:var(--secondary); text-align:center; font-size:18px; }
.setup-card { padding:40px 30px; text-align:center; }
.setup-icon { width:92px; height:92px; display:grid; place-items:center; margin:0 auto 24px; border:1px solid var(--steel); border-radius:22px; color:var(--accent-light); font-size:45px; }
.setup-card h2 { margin:0; font-size:clamp(30px,7vw,42px); }
.setup-card p { margin:14px auto 28px; color:var(--secondary); font-size:19px; line-height:1.45; }
.number-list { text-align:left; }
.number-row { display:flex; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid var(--border); }
.number-row:last-child { border-bottom:0; }
.number { width:50px; height:50px; display:grid; place-items:center; border:1px solid var(--accent-dark); border-radius:50%; color:var(--accent-light); font-size:21px; }
.number-row strong { font-size:19px; }

.promo-activation { padding:18px; }
.promo-hero { display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.promo-icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; color:var(--accent-light); }
.promo-icon .ui-icon { width:25px; height:25px; }
.promo-hero h2 { margin:0; font-size:20px; }
.promo-hero p { margin:4px 0 0; color:var(--secondary); font-size:13px; line-height:1.35; }
.promo-form { display:grid; grid-template-columns:1fr 54px; gap:10px; }
.promo-form .input { min-height:54px; padding:12px 15px; font-size:16px; }
.promo-submit { width:54px; min-height:54px; display:grid; place-items:center; border:1px solid rgba(24,214,204,.68); border-radius:14px; background:linear-gradient(135deg,rgba(24,214,204,.14),rgba(0,142,135,.035)); color:var(--highlight); cursor:pointer; box-shadow:inset 0 0 24px rgba(0,194,184,.04),0 0 22px rgba(0,194,184,.06); transition:opacity .18s ease-out,border-color .18s ease-out,background .18s ease-out,box-shadow .18s ease-out; }
.promo-submit .ui-icon { width:23px; height:23px; }
.promo-submit__spinner { display:none; width:20px; height:20px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .75s linear infinite; }
.promo-submit.is-loading .promo-submit__arrow { display:none; }
.promo-submit.is-loading .promo-submit__spinner { display:block; }
.promo-submit:disabled,.promo-form .input:disabled { opacity:.65; cursor:wait; }
.promo-submit:active { opacity:.92; }
.promo-empty { min-height:92px; display:flex; align-items:center; gap:14px; margin-top:12px; padding:17px 18px; border-color:var(--border); }
.promo-empty__icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; border:1px solid var(--border); border-radius:12px; color:var(--muted); }
.promo-empty__icon .ui-icon { width:22px; height:22px; }
.promo-empty h2 { margin:0; font-size:18px; }
.promo-empty p { margin:4px 0 0; color:var(--secondary); font-size:13px; }
.empty-state { padding:48px 24px; text-align:center; }
.empty-state__icon { color:var(--accent); font-size:72px; opacity:.65; }
.empty-state h2 { margin:18px 0 6px; }
.empty-state p { margin:0; color:var(--secondary); line-height:1.45; }

.qr { width:min(290px,72vw); aspect-ratio:1; display:grid; place-items:center; margin:24px auto; padding:18px; border:2px solid var(--accent); border-radius:18px; background:#f7fafc; color:#090a0c; font-size:14px; text-align:center; overflow:hidden; }
.qr img { display:block; width:100%; height:100%; object-fit:contain; }
.qr--loading,.qr--error { background:linear-gradient(145deg,rgba(19,22,26,.96),rgba(9,12,15,.98)); color:var(--secondary); }
.qr--loading { border-color:var(--border); }
.qr--error { border-color:rgba(255,77,94,.45); }
.qr-state { display:grid; justify-items:center; gap:8px; padding:10px; font-size:12px; line-height:1.35; }
.qr-state .loader { width:34px; margin:0 0 3px; border-width:3px; }
.qr-state .ui-icon { width:26px; height:26px; color:var(--error); }
.qr-state strong { color:var(--highlight); font-size:13px; }
.qr-state button { min-height:32px; padding:5px 10px; border:1px solid var(--steel); border-radius:10px; background:rgba(29,34,40,.66); color:var(--highlight); cursor:pointer; }
.qr-grid { width:100%; height:100%; display:grid; grid-template-columns:repeat(17,1fr); grid-template-rows:repeat(17,1fr); gap:1px; }
.qr-grid i { background:transparent; }
.qr-grid i.on { background:#090a0c; }
.copy-field { display:flex; align-items:center; gap:12px; padding:16px 18px; border:1px solid var(--steel); border-radius:14px; margin-top:12px; }
.copy-field__body { flex:1; min-width:0; }
.copy-field small { display:block; color:var(--secondary); }
.copy-field strong { display:block; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.copy-field button { border:0; background:transparent; color:var(--accent-light); font-size:28px; cursor:pointer; }
.terms-card { padding:20px 24px; margin-top:14px; }
.terms-card h2 { margin:0 0 12px; font-size:21px; }
.terms-row { display:flex; gap:20px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--border); }
.terms-row:first-of-type { border-top:0; }
.terms-row strong { min-width:82px; color:var(--accent-light); font-size:24px; }
.terms-row span { color:var(--secondary); line-height:1.45; }

.list-item { display:flex; align-items:center; gap:16px; padding:18px; border-bottom:1px solid var(--border); }
.list-item:last-child { border-bottom:0; }
.list-avatar { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--steel); border-radius:50%; color:var(--accent-light); }
.list-item__body { flex:1; min-width:0; }
.list-item__body strong { display:block; }
.list-item__body small { display:block; margin-top:4px; color:var(--secondary); }
.badge { padding:5px 10px; border:1px solid var(--steel); border-radius:99px; color:var(--secondary); font-size:12px; }
.badge--success { color:var(--success); border-color:rgba(40,199,111,.4); }

.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:22px; background:rgba(2,4,7,.84); backdrop-filter:blur(8px); animation:fade-in .18s ease-out; }
@keyframes fade-in { from{opacity:0} to{opacity:1} }
.modal { width:min(100%,650px); max-height:min(88vh,900px); overflow:auto; padding:30px; border:1px solid var(--steel); border-radius:24px; background:linear-gradient(145deg,#13171c,#090b0e); box-shadow:0 26px 100px rgba(0,0,0,.55),0 0 24px rgba(0,194,184,.05); }
.modal-head { display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.modal-head h2 { flex:1; margin:0; font-size:28px; }
.modal-close { width:48px; height:48px; border:1px solid var(--steel); border-radius:50%; background:transparent; color:var(--secondary); font-size:28px; cursor:pointer; }
.device-ring-wrap { display:flex; align-items:center; gap:30px; padding:24px; border:1px solid var(--steel); border-radius:18px; }
.device-ring { --device:50%; position:relative; width:140px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--accent-light) 0 var(--device),#1c2a31 var(--device)); }
.device-ring::before { content:""; position:absolute; width:112px; aspect-ratio:1; border-radius:50%; background:#0c1014; }
.device-ring span { position:relative; z-index:1; text-align:center; font-size:30px; }
.device-ring small { display:block; color:var(--secondary); font-size:14px; }
.device-card { display:flex; align-items:center; gap:18px; margin-top:16px; padding:18px; border:1px solid var(--steel); border-radius:16px; }
.device-card__icon { width:58px; height:58px; display:grid; place-items:center; border:1px solid var(--border); border-radius:16px; font-size:26px; }
.device-card__body { flex:1; }
.device-card__body small { display:block; color:var(--secondary); margin-top:4px; }
.device-remove { width:48px; height:48px; border:1px solid rgba(0,194,184,.38); border-radius:50%; background:transparent; color:var(--accent-light); font-size:24px; cursor:pointer; }

.toast { position:fixed; left:50%; top:calc(var(--safe-top) + 10px); z-index:100; width:min(calc(100vw - 28px),430px); min-height:62px; display:grid; grid-template-columns:32px 1fr 32px; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--steel); border-radius:16px; background:rgba(19,22,26,.97); color:var(--highlight); box-shadow:0 18px 55px rgba(0,0,0,.48); opacity:0; pointer-events:none; transform:translate(-50%,-10px); transition:opacity .2s ease-out,transform .2s ease-out; }
.toast::before { content:""; position:absolute; inset:8px auto 8px 0; width:2px; border-radius:99px; background:var(--accent); }
.toast--success::before { background:var(--success); }
.toast--error::before { background:var(--error); }
.toast.is-visible { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.toast__icon { width:30px; height:30px; display:grid; place-items:center; color:var(--accent-light); }
.toast--success .toast__icon { color:var(--success); }
.toast--error .toast__icon { color:var(--error); }
.toast__icon .ui-icon { width:21px; height:21px; }
.toast__body { min-width:0; }
.toast__body strong { display:block; font-size:14px; }
.toast__body small { display:block; margin-top:3px; color:var(--secondary); font-size:12px; line-height:1.3; }
.toast__close { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; }
.toast__close .ui-icon { width:18px; height:18px; }
.loader { width:68px; aspect-ratio:1; margin:0 auto 24px; border:5px solid var(--gunmetal); border-top-color:var(--accent-light); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-title { text-align:center; color:var(--secondary); }
.hidden { display:none !important; }

@media (max-width:560px) {
  .app-shell { padding-inline:16px; }
  .website-page-shell { border-radius:22px; }
  .website-page-shell__content { padding:18px; }
  .topbar { grid-template-columns:46px 1fr 46px; min-height:54px; margin-bottom:18px; }
  .topbar__spacer { width:46px; }
  .icon-button { width:44px; height:44px; border-radius:14px; font-size:25px; }
  .brand { margin-bottom:26px; }
  .brand-mark { width:76px; height:76px; }
  .home-screen { padding: 24px 18px; border-radius: 22px; }
  .home-brand { gap: 15px; }
  .home-brand .brand-mark { width: 72px; height: 72px; }
  .home-status { margin-top: 11px; font-size: 13px; }
  .card--padded,.auth-card,.detail-card { padding:22px 18px; }
  .status-card { padding:20px 16px; gap:12px; }
  .home-screen .status-card { grid-template-columns:minmax(100px,.82fr) minmax(168px,1.18fr); }
  .home-screen .days-ring-wrap { grid-template-columns:82px 1fr; gap:9px; padding-left:12px; }
  .days-ring { width:86px; }
  .days-ring::before { width:76px; }
  .days-ring strong { font-size:28px; }
  .btn { min-height:62px; padding-inline:18px; }
  .menu-item { min-height:69px; padding-inline:15px; gap:11px; }
  .menu-item__icon { width:30px; height:30px; flex-basis:30px; }
  .reward { padding-inline:12px; }
  .reward strong { font-size:25px; }
  .reward span { font-size:13px; }
  .profile-identity { padding:15px 16px; gap:13px; }
  .avatar { width:82px; border-radius:22px; font-size:42px; }
  .platform { min-height:84px; padding:13px 16px; gap:15px; }
  .platform__icon { width:56px; height:56px; }
  .setup-card { padding:30px 20px; }
  .modal { padding:22px 18px; }
  .device-ring-wrap { gap:18px; padding:18px 12px; }
  .device-ring { width:116px; }
  .device-ring::before { width:92px; }
}

@media (max-width:390px) {
  .app-shell { padding-inline:12px; }
  .website-page-shell { border-radius:20px; }
  .website-page-shell__content { padding:15px; }
  .home-screen { padding-inline: 16px; }
  .home-screen .status-card { grid-template-columns:minmax(96px,.82fr) minmax(158px,1.18fr); }
  .home-screen .status-card .days-ring-wrap { display:grid; grid-template-columns:76px 1fr; gap:7px; }
  .home-screen .days-ring { width:76px; }
  .home-screen .days-ring::before { width:66px; }
  .home-screen .days-ring strong { font-size:24px; }
  .subscription-state__value { font-size:23px; }
  .expiry-info span { font-size:10px; }
  .expiry-info strong { font-size:12px; }
  .menu-item { padding-inline:13px; gap:9px; }
  .menu-item__body strong { font-size:17px; }
  .platform-badge { padding:4px 8px; font-size:12px; }
  .menu-item__arrow { width:24px; flex-basis:24px; }
  .menu-item__arrow .ui-icon { width:23px; height:23px; }
  .btn-row { grid-template-columns:1fr; }
  .reward-grid { grid-template-columns:1fr; padding:0; }
  .reward { display:flex; align-items:center; gap:14px; padding:14px 18px; border-right:0; border-bottom:1px solid var(--border); }
  .reward:last-child { border-bottom:0; }
  .reward span { margin:0; }
  .info-grid { grid-template-columns:1fr; }
  .stat { display:flex; justify-content:space-between; align-items:center; border-right:0; border-bottom:1px solid var(--border); text-align:left; }
  .stat:last-child { border-bottom:0; }
  .stat small { min-height:0; }
  .stat strong { margin:0; }
  .promo-form { grid-template-columns:1fr 64px; }
  .email-code { gap:6px; }
  .email-code input { font-size:23px; }
  .device-ring-wrap { flex-direction:column; }
  .passkey-manager-modal { border-radius:20px; }
  .passkey-item { gap:8px; padding-left:9px; }
  .passkey-item__icon { width:30px; flex-basis:30px; }
  .passkey-delete { min-width:40px; width:40px; padding:8px; }
  .passkey-delete span { display:none; }
  .confirmation-modal { border-radius:20px; }
}

@media (max-width:340px) {
  .home-screen .status-card { grid-template-columns:minmax(90px,.86fr) minmax(142px,1.14fr); gap:7px; padding-inline:11px; }
  .home-screen .status-card .days-ring-wrap { grid-template-columns:66px 1fr; gap:5px; padding-left:7px; }
  .home-screen .days-ring { width:66px; }
  .home-screen .days-ring::before { width:58px; }
  .subscription-state .eyebrow { font-size:12px; }
  .subscription-state__value { font-size:20px; }
  .home-screen .days-ring strong { font-size:22px; }
  .expiry-info strong { font-size:11px; }
  .btn--outline-accent { padding-inline:12px; gap:8px; font-size:16px; white-space:nowrap; }
  .btn--outline-accent .btn__icon { width:26px; }
  .btn--outline-accent .btn__arrow { width:24px; }
  .menu-item { padding-inline:10px; gap:5px; }
  .menu-item__icon { width:24px; height:26px; flex-basis:24px; }
  .menu-item__icon .ui-icon { width:22px; height:22px; }
  .menu-item__body strong { font-size:15px; letter-spacing:-.015em; }
  .platform-badge { padding:3px 6px; font-size:10px; }
  .menu-item__arrow { width:20px; flex-basis:20px; }
  .menu-item__arrow .ui-icon { width:20px; height:20px; }
}

@media (min-width:900px) {
  :root { --page-width:760px; }
  .app-shell { --app-pad-top:34px; padding-top:var(--app-pad-top); }
  .screen--auth { padding-block:30px 50px; }
}

/* Unified compact inner screens */
.viewport-balanced-screen {
  min-height: calc(var(--tg-viewport-stable-height, 100dvh) - var(--app-pad-top) - var(--app-pad-bottom));
  display: flex;
  flex-direction: column;
}
.viewport-balanced-screen__composition {
  width: 100%;
  min-width: 0;
  margin-block: auto;
}
.website-page-shell .viewport-balanced-screen { min-height: 0; }

.profile-screen,.promo-screen,.help-screen { min-height:calc(var(--tg-viewport-stable-height,100dvh) - var(--safe-top) - var(--safe-bottom)); display:flex; flex-direction:column; }
.is-telegram-runtime .profile-screen,
.is-telegram-runtime .promo-screen,
.is-telegram-runtime .help-screen {
  min-height: 0;
}
.is-telegram-runtime .profile-stack,
.is-telegram-runtime .promo-stack,
.is-telegram-runtime .help-stack {
  margin-block: 0;
}
.website-page-shell .profile-screen,.website-page-shell .promo-screen,.website-page-shell .help-screen { min-height:0; }
.profile-stack,.promo-stack,.help-stack { width:100%; margin-block:auto; }
.profile-screen .topbar,.promo-screen .topbar,.help-screen .topbar,.platform-screen .topbar,.setup-screen .topbar,.troubleshooting-screen .topbar { flex:0 0 auto; }
.profile-identity { border-radius:24px; }
.profile-subscription,.profile-devices,.profile-promo { border-radius:26px; }
.profile-nav-row { min-height:64px; }
.profile-nav-row__icon { color:var(--accent-light); }
.profile-device-stats > div { padding-block:10px 12px; }
.profile-device-stats strong { font-size:18px; }

.dash-frame { --dash-radius:20px; position:relative; border:0 !important; background:linear-gradient(145deg,rgba(19,22,26,.82),rgba(9,12,15,.74)); isolation:isolate; }
.dash-frame > :not(.dash-outline) { position:relative; z-index:1; }
.dash-outline { position:absolute; z-index:0; inset:0; display:block; overflow:visible; pointer-events:none; }
.dash-outline rect { x:1px; y:1px; width:calc(100% - 2px); height:calc(100% - 2px); rx:var(--dash-radius); ry:var(--dash-radius); fill:none; stroke:rgba(24,214,204,.42); stroke-width:1; stroke-dasharray:5 7; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.promo-activation { padding:22px; border-radius:28px; }
.promo-hero { gap:16px; margin-bottom:20px; }
.promo-icon { width:52px; height:52px; flex-basis:52px; border:1px solid rgba(24,214,204,.34); border-radius:16px; background:rgba(0,194,184,.035); }
.promo-icon .ui-icon { width:29px; height:29px; }
.promo-hero h2 { font-size:20px; }
.promo-hero p { max-width:290px; font-size:14px; }
.promo-form { grid-template-columns:minmax(0,1fr) 56px; }
.promo-form .input { min-height:56px; border-radius:18px; background:rgba(9,12,15,.58); }
.promo-submit { --cta-glint-radius:18px; width:56px; min-height:56px; border-radius:18px; }
.promo-submit__arrow { display:grid; transition:transform .18s ease-out; }
.promo-hint { margin:13px 2px 0; color:var(--muted); font-size:12px; }
.promo-empty { min-height:150px; display:flex; flex-direction:column; justify-content:center; gap:10px; margin-top:14px; padding:22px; border-radius:28px; text-align:center; }
.promo-empty__icon { width:48px; height:48px; flex-basis:48px; margin:0 auto; border-radius:50%; color:var(--accent-light); }
.promo-empty h2 { font-size:19px; }
.promo-empty p { font-size:13px; }

.platform-screen,.setup-screen,.troubleshooting-screen { width:min(100%,560px); margin-inline:auto; }
.platform-screen__lead,.help-lead { max-width:440px; margin:0 auto 20px; color:var(--secondary); font-size:14px; line-height:1.45; text-align:center; }
.platform-list { gap:9px; }
.platform { min-height:66px; gap:14px; padding:10px 15px; border-color:var(--border); border-radius:20px; background:linear-gradient(120deg,rgba(19,22,26,.9),rgba(9,12,15,.74)); color:var(--white); transition:border-color .18s ease-out,background .18s ease-out,box-shadow .18s ease-out,color .18s ease-out,opacity .18s ease-out; }
.platform__icon { width:44px; height:44px; flex:0 0 44px; border-color:rgba(24,214,204,.26); border-radius:14px; background:rgba(0,194,184,.025); }
.platform__icon .ui-icon { width:23px; height:23px; }
.platform__icon .brand-icon { width:24px; height:24px; }
.platform strong { font-size:17px; }
.platform__arrow { width:24px; height:24px; display:grid; place-items:center; color:var(--muted); transition:color .18s ease-out; }
.platform__arrow .ui-icon { width:20px; height:20px; }

.stepper { gap:9px; margin:2px 0 7px; }
.stepper i { width:58px; height:4px; }
.stepper i.is-complete { background:rgba(0,194,184,.52); }
.stepper i.is-active { background:var(--accent-light); box-shadow:0 0 9px rgba(24,214,204,.24); }
.step-label { margin:0 0 18px; font-size:14px; }
.setup-card { padding:24px 22px; border-radius:28px; }
.setup-icon { width:62px; height:62px; margin-bottom:17px; border-radius:18px; background:rgba(0,194,184,.025); }
.setup-icon .ui-icon { width:30px; height:30px; }
.setup-card h2 { font-size:27px; }
.setup-card p { margin:9px auto 20px; font-size:15px; }
.setup-screen .btn { min-height:56px; border-radius:18px; font-size:17px; }
.setup-action + .setup-action { margin-top:10px; }
.setup-action--secondary { background:rgba(9,12,15,.36); }
.setup-complete { margin:20px 0 18px; text-align:center; }
.setup-complete .state-icon { width:68px; height:68px; margin-bottom:14px; border-width:1px; }
.setup-complete .state-icon .ui-icon { width:34px; height:34px; }
.setup-complete .state-title { font-size:31px; }
.setup-complete .state-text { margin-top:5px; font-size:16px; }
.number-list { padding-block:8px; }
.number-row { gap:14px; padding:13px 4px; }
.number { width:38px; height:38px; flex:0 0 38px; font-size:16px; }
.number-row strong { font-size:16px; }
.setup-bottom-action { margin-top:14px; }
.setup-bottom-action + .setup-action--secondary { margin-top:10px; }
.other-device { min-height:48px; display:flex; align-items:center; justify-content:center; gap:10px; margin:14px auto 0; padding:9px 18px; border:1px solid var(--border); border-radius:16px; background:rgba(9,12,15,.35); color:var(--secondary); font-size:14px; cursor:pointer; transition:color .18s ease-out,border-color .18s ease-out,background .18s ease-out,box-shadow .18s ease-out,opacity .18s ease-out; }
.other-device span { width:22px; height:22px; display:grid; place-items:center; color:var(--accent-light); }
.other-device .ui-icon { width:18px; height:18px; }

.help-stack { display:grid; gap:10px; }
.help-item { width:100%; min-height:78px; display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:22px; color:var(--white); text-align:left; cursor:pointer; transition:border-color .18s ease-out,background .18s ease-out,box-shadow .18s ease-out,color .18s ease-out,opacity .18s ease-out; }
.help-item__icon { width:46px; height:46px; display:grid; place-items:center; flex:0 0 46px; border:1px solid rgba(24,214,204,.26); border-radius:15px; color:var(--accent-light); }
.help-item__icon .ui-icon { width:23px; height:23px; }
.help-item__body { flex:1; min-width:0; }
.help-item__body strong { display:block; font-size:17px; }
.help-item__body small { display:block; margin-top:4px; color:var(--secondary); font-size:13px; }
.help-item__arrow { width:24px; display:grid; place-items:center; color:var(--muted); transition:color .18s ease-out; }
.help-item__arrow .ui-icon { width:20px; height:20px; }
.troubleshooting-scenarios { display:grid; gap:10px; }
.troubleshooting-scenario { min-height:86px; }
.troubleshooting-detail__body { display:grid; gap:12px; }
.troubleshooting-notice { display:flex; align-items:flex-start; gap:12px; padding:15px 16px; border:1px solid rgba(255,176,32,.25); border-radius:18px; background:rgba(255,176,32,.045); }
.troubleshooting-notice > span { width:24px; height:24px; display:grid; place-items:center; flex:0 0 24px; color:var(--warning); }
.troubleshooting-notice .ui-icon { width:20px; height:20px; }
.troubleshooting-notice p { margin:0; color:var(--highlight); font-size:14px; line-height:1.5; }
.troubleshooting-steps { display:grid; border:1px solid var(--border); border-radius:22px; background:linear-gradient(145deg,rgba(19,22,26,.88),rgba(9,12,15,.76)); overflow:hidden; }
.troubleshooting-step { display:grid; grid-template-columns:40px minmax(0,1fr); align-items:start; gap:13px; padding:16px; }
.troubleshooting-step + .troubleshooting-step { border-top:1px solid var(--border); }
.troubleshooting-step__icon { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(24,214,204,.24); border-radius:13px; background:rgba(0,194,184,.025); color:var(--accent-light); }
.troubleshooting-step__icon .ui-icon { width:20px; height:20px; }
.troubleshooting-step h2 { margin:1px 0 5px; color:var(--white); font-size:15px; line-height:1.35; }
.troubleshooting-step p { margin:0; color:var(--secondary); font-size:14px; line-height:1.5; }
.troubleshooting-support { min-height:56px; margin-top:14px; border-radius:18px; font-size:16px; }
.troubleshooting-support .btn__icon { width:24px; height:24px; }

.modal-backdrop { padding:18px; background:rgba(2,4,7,.74); backdrop-filter:blur(10px); }
.modal { animation:modal-in .2s cubic-bezier(.22,1,.36,1); }
@keyframes modal-in { from{opacity:0;transform:scale(.975) translateY(5px)} to{opacity:1;transform:none} }
.devices-modal { width:min(100%,520px); max-height:min(92vh,760px); padding:22px; border-radius:30px; overflow:auto; }
.devices-modal__head { gap:13px; margin-bottom:18px; }
.modal-head__icon { width:52px; height:52px; display:grid; place-items:center; flex:0 0 52px; border:1px solid rgba(24,214,204,.28); border-radius:17px; color:var(--accent-light); background:rgba(0,194,184,.025); }
.modal-head__icon .ui-icon { width:26px; height:26px; }
.modal-head__copy { flex:1; min-width:0; }
.devices-modal .modal-head h2 { font-size:23px; }
.modal-head__copy p { margin:4px 0 0; color:var(--secondary); font-size:13px; }
.modal-close { width:42px; height:42px; display:grid; place-items:center; flex:0 0 42px; border-radius:50%; transition:border-color .18s ease-out,background .18s ease-out,color .18s ease-out,box-shadow .18s ease-out; }
.modal-close .ui-icon { width:20px; height:20px; }
.device-summary { display:grid; grid-template-columns:116px 1fr; align-items:center; gap:22px; padding:18px; border:1px solid var(--border); border-radius:24px; background:rgba(9,12,15,.4); }
.device-ring { width:112px; background:conic-gradient(var(--accent-light) 0 var(--device),#1c252c var(--device) 100%); box-shadow:0 0 18px rgba(0,194,184,.035); }
.device-ring::before { width:92px; background:#0b0f12; }
.device-ring span strong { display:block; font-size:28px; font-weight:700; }
.device-ring span small { margin-top:2px; }
.device-legend { display:grid; gap:14px; padding-left:20px; border-left:1px solid var(--border); }
.device-legend > div { display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:10px; font-size:14px; }
.device-legend strong { font-size:16px; }
.legend-dot { width:9px; height:9px; border-radius:50%; }
.legend-dot--used { background:var(--accent-light); box-shadow:0 0 9px rgba(24,214,204,.34); }
.legend-dot--free { background:#52606d; box-shadow:0 0 8px rgba(157,164,173,.14); }
.devices-title { margin:20px 0 10px; font-size:18px; }
.device-list { display:grid; gap:9px; }
.device-card { min-height:68px; gap:13px; margin:0; padding:10px 12px; border-radius:20px; background:rgba(9,12,15,.34); }
.device-card__icon { width:46px; height:46px; flex:0 0 46px; border-radius:14px; color:var(--highlight); }
.device-card__icon .brand-icon { width:25px; height:25px; }
.device-card__body strong { font-size:16px; }
.device-card__body small { font-size:13px; }
.device-remove { width:42px; height:42px; display:grid; place-items:center; flex:0 0 42px; }
.device-remove .ui-icon { width:21px; height:21px; }
.devices-empty { min-height:78px; display:flex; align-items:center; justify-content:center; gap:11px; padding:15px; border:1px solid var(--border); border-radius:20px; color:var(--secondary); text-align:center; }
.devices-empty span { width:30px; display:grid; place-items:center; color:var(--muted); }
.devices-empty span .ui-icon { width:23px; height:23px; }
.devices-empty p { margin:0; font-size:14px; }
.device-availability { min-height:58px; display:flex; align-items:center; justify-content:center; gap:11px; margin-top:12px; padding:12px 16px; border-radius:20px; color:var(--highlight); }
.device-availability > span { width:30px; height:30px; display:grid; place-items:center; border:1px solid rgba(24,214,204,.28); border-radius:50%; color:var(--accent-light); }
.device-availability .ui-icon { width:18px; height:18px; }
.device-availability strong { font-size:14px; font-weight:570; }

/* Referral program */
.referral-screen,.referral-balance-screen,.referral-terms-screen,.invite-screen,.referrals-list-screen { width:min(100%,560px); margin-inline:auto; }
.referral-screen .topbar,.referral-balance-screen .topbar,.referral-terms-screen .topbar,.invite-screen .topbar,.referrals-list-screen .topbar { margin-bottom:14px; }
.referral-rules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; }
.referral-rule { min-width:0; padding:17px 14px; border-right:1px solid var(--border); }
.referral-rule:last-child { border-right:0; }
.referral-rule strong { display:block; color:var(--accent-light); font-size:25px; line-height:1; letter-spacing:-.025em; }
.referral-rule span { display:block; margin-top:8px; color:var(--secondary); font-size:12px; line-height:1.35; }
.referral-section-title { margin:20px 2px 10px; font-size:18px; }
.referral-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; }
.referral-stat { min-width:0; padding:13px 10px; border-right:1px solid var(--border); text-align:center; }
.referral-stat:last-child { border-right:0; }
.referral-stat small { display:block; color:var(--secondary); font-size:11px; line-height:1.25; }
.referral-stat strong { display:block; margin-top:5px; overflow:hidden; text-overflow:ellipsis; color:var(--highlight); font-size:20px; }
.referral-stat--money strong { font-size:17px; }
.referral-cta { min-height:56px; margin-top:14px; border-radius:18px; font-size:16px; }
.referral-menu { margin-top:14px; overflow:hidden; }
.referral-menu .menu-item { min-height:62px; gap:11px; padding:10px 14px; }
.referral-menu .menu-item__icon { width:30px; height:30px; flex-basis:30px; color:var(--accent-light); }
.referral-menu .menu-item__icon .ui-icon { width:22px; height:22px; }
.referral-menu .menu-item__body strong { white-space:normal; font-size:16px; }
.referral-menu .menu-item__body small { margin-top:2px; font-size:12px; }
.referral-menu .menu-item__arrow { width:23px; flex-basis:23px; }

.balance-card { padding:20px; }
.balance-primary { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-bottom:15px; }
.balance-primary small { min-width:0; color:var(--secondary); font-size:13px; }
.balance-amount { min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:clamp(25px,6vw,30px); line-height:1.05; letter-spacing:-.035em; }
.balance-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--border); }
.balance-metrics > div { min-width:0; padding:14px 11px 0; border-right:1px solid var(--border); }
.balance-metrics > div:first-child { padding-left:0; }
.balance-metrics > div:last-child { padding-right:0; border-right:0; }
.balance-metrics span { display:block; min-height:31px; color:var(--muted); font-size:10px; line-height:1.25; }
.balance-metrics strong { display:block; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }
.balance-hold-note { display:flex; align-items:flex-start; gap:10px; margin:11px 2px 0; padding:11px 12px; border:1px solid var(--border); border-radius:16px; background:rgba(19,22,26,.42); color:var(--secondary); }
.balance-hold-note > span { width:22px; height:22px; display:grid; place-items:center; flex:0 0 22px; color:var(--accent-light); }
.balance-hold-note .ui-icon { width:18px; height:18px; }
.balance-hold-note p { margin:0; font-size:12px; line-height:1.4; }
.balance-hold-note strong { color:var(--highlight); }
.balance-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.balance-actions .btn { min-height:54px; padding:10px 12px; border-radius:17px; font-size:14px; line-height:1.2; }
.balance-actions .btn__icon { width:24px; }
.balance-action-note { margin:8px 2px 0; color:var(--muted); font-size:11px; line-height:1.35; }
.balance-usdt-card { display:flex; align-items:center; gap:12px; margin-top:12px; padding:14px; }
.balance-usdt-card__icon { width:42px; height:42px; display:grid; place-items:center; flex:0 0 42px; border:1px solid rgba(24,214,204,.28); border-radius:14px; color:var(--accent-light); }
.balance-usdt-card__icon .ui-icon { width:21px; height:21px; }
.balance-usdt-card > div:last-child { min-width:0; }
.balance-usdt-card strong { display:block; font-size:15px; }
.balance-usdt-card small { display:block; margin-top:3px; color:var(--secondary); font-size:11px; line-height:1.35; }
.compact-history { overflow:hidden; }
.compact-history-row { min-height:58px; gap:10px; padding:9px 12px; }
.compact-history-row .list-avatar { width:36px; height:36px; flex:0 0 36px; }
.compact-history-row .list-avatar .ui-icon { width:18px; height:18px; }
.compact-history-row .list-item__body strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.compact-history-row .list-item__body small { margin-top:2px; font-size:11px; }
.compact-history-row > strong { max-width:42%; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.compact-empty { min-height:68px; display:flex; align-items:center; justify-content:center; gap:9px; padding:14px; color:var(--muted); font-size:13px; }
.compact-empty .ui-icon { width:19px; height:19px; }

.invite-card { padding:17px; }
.invite-hero { display:flex; align-items:center; gap:12px; }
.invite-icon { width:44px; height:44px; display:grid; place-items:center; flex:0 0 44px; border:1px solid rgba(24,214,204,.3); border-radius:14px; color:var(--accent-light); }
.invite-icon .ui-icon { width:23px; height:23px; }
.invite-hero h1 { margin:0; font-size:21px; }
.invite-hero p { margin:3px 0 0; color:var(--secondary); font-size:12px; line-height:1.35; }
.invite-type-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:15px; }
.invite-type-option { display:flex; align-items:center; min-width:0; min-height:70px; gap:9px; padding:10px; border:1px solid var(--border); border-radius:14px; background:rgba(18,23,28,.58); color:var(--secondary); text-align:left; transition:border-color .18s ease,background .18s ease,color .18s ease; }
.invite-type-option.is-selected { border-color:rgba(24,214,204,.62); background:rgba(24,214,204,.1); color:var(--highlight); }
.invite-type-option__icon { width:31px; height:31px; display:grid; place-items:center; flex:0 0 31px; border:1px solid currentColor; border-radius:10px; color:var(--accent-light); }
.invite-type-option__icon .ui-icon { width:17px; height:17px; }
.invite-type-option > span:last-child { min-width:0; }
.invite-type-option strong,.invite-type-option small { display:block; }
.invite-type-option strong { font-size:13px; line-height:1.2; }
.invite-type-option small { margin-top:3px; color:var(--muted); font-size:10px; line-height:1.25; }
.invite-hint { min-height:34px; margin:11px 2px 0; color:var(--secondary); font-size:12px; line-height:1.4; }
.invite-screen .qr { width:min(52vw,210px); margin:14px auto; padding:10px; border-width:1px; border-radius:15px; }
.devices-screen { width:min(100%,560px); margin-inline:auto; }
.devices-screen .topbar { margin-bottom:14px; }
.devices-page-title { margin:18px 2px 10px; font-size:18px; }
.devices-page-list { padding:0 14px 14px; overflow:hidden; }
.devices-page-list .device-card { margin-top:14px; }
.inline-error-state { padding:28px 22px; text-align:center; }
.inline-error-state > div { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 14px; border:1px solid rgba(255,77,94,.45); border-radius:17px; color:var(--error); }
.inline-error-state > div .ui-icon { width:27px; height:27px; }
.inline-error-state h2 { margin:0; font-size:22px; }
.inline-error-state p { margin:8px auto 18px; max-width:360px; color:var(--secondary); font-size:14px; line-height:1.45; }
.inline-error-state .btn { min-height:50px; font-size:15px; }
.invite-screen .copy-field { min-height:58px; gap:9px; margin-top:8px; padding:9px 11px; border-radius:14px; }
.invite-screen .copy-field small { font-size:11px; }
.invite-screen .copy-field strong { margin-top:2px; font-size:13px; }
.invite-screen .copy-field button { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; border-radius:12px; }
.invite-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.invite-actions .btn { min-width:0; min-height:54px; gap:8px; padding:10px 9px; border-radius:16px; font-size:14px; }
.invite-actions .btn__icon { width:21px; }
.invite-actions .btn__icon .ui-icon { width:20px; height:20px; }

.referrals-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; }
.referrals-summary > div { min-width:0; padding:13px 8px; border-right:1px solid var(--border); text-align:center; }
.referrals-summary > div:last-child { border-right:0; }
.referrals-summary small { display:block; color:var(--secondary); font-size:10px; line-height:1.25; }
.referrals-summary strong { display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; font-size:18px; }
.referrals-summary > div:last-child strong { font-size:14px; }
.referrals-list-card { overflow:hidden; }
.referrals-list-card .list-item { min-height:62px; gap:10px; padding:9px 11px; }
.referrals-list-card .list-avatar { width:38px; height:38px; flex:0 0 38px; }
.referrals-list-card .list-avatar .ui-icon { width:19px; height:19px; }
.referrals-list-card .list-item__body strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.referrals-list-card .list-item__body small { margin-top:2px; font-size:11px; }
.referrals-list-card .badge { padding:4px 7px; font-size:10px; }
.referrals-empty { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:11px; padding:17px; }
.referrals-empty__icon { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--border); border-radius:14px; color:var(--accent-light); }
.referrals-empty__icon .ui-icon { width:23px; height:23px; }
.referrals-empty h2 { margin:0; font-size:18px; }
.referrals-empty p { margin:3px 0 0; color:var(--secondary); font-size:12px; line-height:1.4; }
.referrals-empty .btn { grid-column:1/-1; min-height:52px; margin-top:3px; font-size:14px; }

.terms-lead { margin:0 2px 12px; color:var(--secondary); font-size:13px; line-height:1.45; }
.referral-terms-screen .terms-card { padding:17px 18px; margin-top:11px; }
.referral-terms-screen .terms-card h2 { margin-bottom:8px; font-size:18px; line-height:1.25; }
.referral-terms-screen .terms-row { gap:14px; padding:11px 0; }
.referral-terms-screen .terms-row strong { min-width:66px; font-size:20px; }
.referral-terms-screen .terms-row span { font-size:13px; line-height:1.45; }
.referral-terms-screen .terms-card--rewards .terms-row--reward { display:grid; grid-template-columns:86px minmax(0,1fr); align-items:start; gap:10px; }
.referral-terms-screen .terms-card--rewards .terms-row--reward strong { min-width:0; }
.referral-terms-screen .terms-row--icon strong { min-width:28px; width:28px; }
.terms-steps { display:grid; gap:10px; margin:6px 0 0; padding-left:22px; color:var(--secondary); font-size:13px; line-height:1.45; }
.terms-steps li::marker { color:var(--accent-light); font-variant-numeric:tabular-nums; }
.terms-note { margin:14px 0 0; padding-top:13px; border-top:1px solid var(--border); color:var(--secondary); font-size:12px; line-height:1.5; }
.terms-links { display:flex; flex-wrap:wrap; gap:9px; margin-top:13px; }
.terms-links a { min-height:44px; display:inline-flex; align-items:center; gap:7px; padding:10px 13px; border:1px solid rgba(24,214,204,.3); border-radius:14px; background:rgba(0,194,184,.025); color:var(--highlight); font-size:13px; transition:border-color .18s ease-out,background .18s ease-out,color .18s ease-out,box-shadow .18s ease-out; }
.terms-links a .ui-icon { width:16px; height:16px; color:var(--accent-light); }

.feedback-backdrop { z-index:80; }
.feedback-modal { position:relative; width:min(100%,390px); padding:28px 24px 22px; border-radius:28px; text-align:center; overflow:visible; }
.feedback-modal__close { position:absolute; top:12px; right:12px; width:36px; height:36px; }
.feedback-modal__icon { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 15px; border:1px solid currentColor; border-radius:18px; color:var(--accent-light); background:rgba(0,194,184,.025); }
.feedback-modal__icon .ui-icon { width:29px; height:29px; }
.feedback-modal--success .feedback-modal__icon { color:var(--success); background:rgba(40,199,111,.025); }
.feedback-modal--error .feedback-modal__icon { color:var(--error); background:rgba(255,77,94,.025); }
.feedback-modal h2 { margin:0; font-size:22px; }
.feedback-modal p { margin:8px auto 18px; color:var(--secondary); font-size:14px; line-height:1.45; }
.feedback-modal__action { min-height:50px; border-color:var(--border); background:var(--gunmetal); font-size:15px; }

.platform:focus-visible,.help-item:focus-visible,.other-device:focus-visible,.modal-close:focus-visible,.device-remove:focus-visible,.referral-menu .menu-item:focus-visible,.terms-links a:focus-visible,.invite-screen .copy-field button:focus-visible { outline:2px solid rgba(24,214,204,.78); outline-offset:2px; }
.platform:active,.help-item:active,.other-device:active,.modal-close:active,.device-remove:active,.referral-menu .menu-item:active,.terms-links a:active { opacity:.92; }
@media (hover:hover) and (pointer:fine) {
  .auth-alt-btn:hover { border-color:rgba(24,214,204,.5); background:rgba(29,34,40,.7); }
  .platform:hover,.help-item:hover { border-color:var(--steel); background:linear-gradient(120deg,rgba(29,34,40,.66),rgba(12,16,20,.76)); }
  .platform:hover { box-shadow:inset 2px 0 rgba(24,214,204,.32),inset 0 0 20px rgba(255,255,255,.012); }
  .help-item:hover { box-shadow:inset 2px 0 rgba(24,214,204,.32),inset 0 0 20px rgba(255,255,255,.012),0 20px 55px rgba(0,0,0,.16); }
  .platform:hover .platform__arrow,.help-item:hover .help-item__arrow { color:var(--highlight); }
  .other-device:hover { color:var(--highlight); border-color:var(--steel); background:rgba(19,22,26,.62); }
  .modal-close:hover,.device-remove:hover { color:var(--highlight); border-color:rgba(24,214,204,.46); background:rgba(0,194,184,.045); }
  .referral-menu .menu-item:hover { background:linear-gradient(90deg,rgba(29,34,40,.48),rgba(19,22,26,.24)); box-shadow:inset 2px 0 rgba(24,214,204,.38); }
  .referral-menu .menu-item:hover .menu-item__arrow { color:var(--highlight); }
  .terms-links a:hover { border-color:rgba(24,214,204,.58); background:rgba(0,194,184,.06); }
}

@media (max-width:560px) {
  .profile-screen,.promo-screen,.help-screen { min-height:calc(var(--tg-viewport-stable-height,100dvh) - var(--safe-top) - var(--safe-bottom)); }
  .profile-screen .topbar,.promo-screen .topbar,.help-screen .topbar,.platform-screen .topbar,.setup-screen .topbar,.troubleshooting-screen .topbar { margin-bottom:13px; }
  .profile-stack,.promo-stack,.help-stack { margin-block:auto; }
  .promo-activation { padding:18px; }
  .promo-empty { min-height:136px; }
  .platform { min-height:62px; }
  .setup-card { padding:21px 18px; }
  .devices-modal { padding:18px; border-radius:26px; }
  .device-summary { grid-template-columns:102px 1fr; gap:16px; padding:15px; }
  .device-ring { width:98px; }
  .device-ring::before { width:80px; }
  .device-legend { gap:12px; padding-left:15px; }
}

@media (max-width:430px) {
  .referral-rule { padding-inline:10px; }
  .referral-rule strong { font-size:23px; }
  .referral-stat { padding-inline:7px; }
  .referral-stat--money strong { font-size:15px; }
  .balance-card { padding:18px 16px; }
  .balance-metrics > div { padding-inline:8px; }
  .balance-actions { grid-template-columns:1fr; gap:8px; }
  .balance-actions .btn { min-height:50px; }
}

@media (max-width:375px) {
  .referral-rule { padding:14px 8px; }
  .referral-rule strong { font-size:21px; }
  .referral-rule span { font-size:11px; }
  .referral-stat small { font-size:10px; }
  .referral-stat strong { font-size:18px; }
  .referral-stat--money strong { font-size:14px; }
  .referral-menu .menu-item { padding-inline:11px; }
  .referral-menu .menu-item__body strong { font-size:15px; }
  .referral-menu .menu-item__body small { font-size:11px; }
  .balance-metrics span { min-height:28px; font-size:9px; }
  .balance-metrics strong { font-size:14px; }
  .referral-terms-screen .terms-card { padding-inline:15px; }
  .referral-terms-screen .terms-row { gap:10px; }
  .referral-terms-screen .terms-row strong { min-width:58px; font-size:18px; }
}

@media (max-width:350px) {
  .promo-form { grid-template-columns:minmax(0,1fr) 52px; }
  .promo-submit { width:52px; }
  .device-summary { grid-template-columns:88px 1fr; gap:12px; padding:13px 10px; }
  .device-ring { width:84px; }
  .device-ring::before { width:68px; }
  .device-legend { padding-left:10px; }
  .device-legend > div { gap:7px; font-size:12px; }
  .referral-terms-screen .terms-card--rewards .terms-row--reward { grid-template-columns:1fr; gap:4px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .site-intro { animation-name:site-intro-reduced !important; animation-duration:180ms !important; }
  .site-intro__facet,.site-intro__glow,.site-intro__accent { display:none; animation:none !important; will-change:auto; }
  .site-intro__mark,.site-intro__name { opacity:1; transform:none; animation:none !important; will-change:auto; }
  .site-background__scene,.ambient-facet { animation:none !important; }
  .ambient-edge { opacity:0 !important; animation:none !important; }
  .site-background__facet { animation:none !important; }
  .site-background__facet--one { transform:translate3d(2%,2%,0) rotate(-15deg); opacity:.12; }
  .site-background__facet--two { transform:translate3d(-2%,-1%,0) rotate(21deg); opacity:.1; }
  .site-background__facet--three { transform:rotate(45deg); opacity:.065; }
  .status-dot { animation:none !important; }
  .brand-mark::after,.days-ring::after,.home-brand-pattern__edge-svg,.btn--primary::after,.btn--outline-accent::after,.promo-submit::after { display:none; animation:none !important; }
  .subscription-orb { display:none; animation:none !important; }
  .toast { transform:translate(-50%,0); }
}

/* Payment flow */
.renew-screen { width:min(100%,600px); margin-inline:auto; }
.payment-flow-screen { width:min(100%,540px); margin-inline:auto; }
.renew-screen .topbar,.payment-flow-screen .topbar { margin-bottom:16px; }
.renew-intro { margin:0 2px 16px; }
.renew-intro h2 { margin:0; font-size:24px; letter-spacing:-.025em; }
.renew-intro p { margin:6px 0 0; color:var(--secondary); font-size:14px; line-height:1.4; }
.renew-summary__row { min-width:0; display:flex; align-items:center; min-height:48px; padding:11px 0; font-size:14px; }
.renew-summary__row + .renew-summary__row { border-top:1px solid var(--border); }
.renew-summary__selection { justify-content:flex-start; gap:8px; padding-top:0; }
.renew-summary__label,.renew-summary__description { color:var(--secondary); }
.renew-summary__period { color:var(--white); font-size:16px; font-weight:650; }
.renew-summary__facts { justify-content:space-between; gap:16px; padding-bottom:0; }
.renew-summary__description { min-width:0; line-height:1.4; }
.renew-summary__price { flex:0 0 auto; white-space:nowrap; text-align:right; font-size:16px; font-weight:650; }

.payment-summary { padding:18px 20px; border-color:var(--border); border-radius:24px; }
.payment-summary__row { min-width:0; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.payment-summary__row > div { min-width:0; }
.payment-summary__row strong { font-size:17px; font-weight:650; }
.payment-summary__row > strong { flex:0 0 auto; white-space:nowrap; }
.payment-summary__row small { display:block; margin-top:5px; color:var(--secondary); font-size:13px; line-height:1.35; }
.payment-summary__divider { height:1px; margin:15px 0; background:var(--border); }
.payment-summary__total { align-items:center; }
.payment-summary__total > span { color:var(--secondary); font-size:15px; }
.payment-summary__total > strong { color:var(--white); font-size:27px; line-height:1; letter-spacing:-.035em; }
.payment-summary__change { min-height:34px; margin:9px 0 -7px -10px; padding:6px 10px; border:0; border-radius:10px; background:transparent; color:var(--accent-light); cursor:pointer; font-size:13px; transition:color .16s ease,background-color .16s ease; }
.payment-section-title { margin:23px 2px 11px; font-size:18px; }
.payment-methods { display:grid; gap:10px; }
.payment-primary-action { min-height:58px; margin-top:18px; border-radius:28px; padding:12px 18px; font-size:17px; }
.payment-methods-screen .payment-primary-action { margin-top:20px; }
.payment-footnote,.payment-open-hint { margin:10px auto 0; max-width:390px; color:var(--muted); font-size:12px; line-height:1.4; text-align:center; }
.button-spinner { width:19px; height:19px; flex:0 0 19px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:payment-spin .85s linear infinite; }
.payment-load-state { padding:24px 20px; border-color:var(--border); text-align:center; }
.payment-load-state__icon { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 14px; border:1px solid rgba(24,214,204,.38); border-radius:16px; color:var(--accent-light); background:rgba(0,194,184,.035); }
.payment-load-state__icon .ui-icon { width:25px; height:25px; }
.payment-load-state h2 { margin:0; font-size:21px; line-height:1.25; }
.payment-load-state p { margin:8px auto 18px; max-width:360px; color:var(--secondary); font-size:14px; line-height:1.45; }
.payment-load-state .btn { min-height:52px; font-size:15px; }

.payment-waiting { display:flex; align-items:center; gap:20px; margin:24px 4px; }
.payment-loader { width:64px; height:64px; flex:0 0 64px; border:4px solid var(--gunmetal); border-top-color:var(--accent-light); border-right-color:var(--accent); border-radius:50%; animation:payment-spin 1.05s linear infinite; box-shadow:0 0 20px rgba(0,194,184,.045); }
@keyframes payment-spin { to { transform:rotate(360deg); } }
.payment-waiting h1 { margin:0; font-size:30px; line-height:1.08; letter-spacing:-.035em; }
.payment-waiting p { margin:7px 0 0; color:var(--secondary); font-size:15px; }
.payment-details { overflow:hidden; border-color:var(--border); border-radius:24px; }
.payment-detail-row { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 18px; border-bottom:1px solid var(--border); }
.payment-detail-row:last-child { border-bottom:0; }
.payment-detail-row > span:first-child { color:var(--secondary); font-size:14px; }
.payment-detail-row > strong,.payment-detail-value { min-width:0; text-align:right; }
.payment-detail-row > strong,.payment-detail-value strong { font-size:16px; font-weight:650; }
.payment-detail-value small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.payment-open-action { margin-top:18px; }
.payment-cancel-action { min-height:54px; margin-top:16px; border-radius:20px; font-size:15px; }
.payment-cancel-action .btn__icon { color:var(--error); }

.payment-cancel-backdrop { padding:20px; background:rgba(0,0,0,.68); }
.payment-cancel-modal { position:relative; width:min(100%,420px); padding:25px 24px 22px; border-color:var(--border); border-radius:28px; text-align:center; overflow:visible; }
.payment-cancel-modal__close { position:absolute; top:12px; right:12px; width:38px; height:38px; }
.payment-cancel-modal__icon { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 14px; border:1px solid rgba(255,176,32,.55); border-radius:17px; background:rgba(255,176,32,.04); color:var(--warning); }
.payment-cancel-modal__icon .ui-icon { width:27px; height:27px; }
.payment-cancel-modal h2 { margin:0; padding-inline:32px; font-size:23px; letter-spacing:-.025em; }
.payment-cancel-modal > p { margin:9px auto 19px; max-width:340px; color:var(--secondary); font-size:14px; line-height:1.48; }
.payment-cancel-modal__actions { display:grid; gap:10px; }
.payment-cancel-modal__actions .btn { min-height:54px; border-radius:19px; padding:10px 14px; font-size:15px; }
.payment-cancel-modal__actions .btn__icon { width:25px; }
.payment-cancel-modal__actions .btn__icon .ui-icon { width:20px; height:20px; }

.payment-result-screen { width:min(100%,500px); }
.payment-result-card { margin-top:clamp(52px,12vh,108px); padding:28px 24px 24px; border-color:var(--border); border-radius:28px; text-align:center; }
.payment-result-icon { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 17px; border:1px solid currentColor; border-radius:50%; }
.payment-result-icon .ui-icon { width:31px; height:31px; }
.payment-result-card--success .payment-result-icon { color:var(--success); background:rgba(40,199,111,.035); animation:payment-success-in .22s ease-out both; }
.payment-result-card--cancelled .payment-result-icon { color:var(--error); background:rgba(255,77,94,.035); }
@keyframes payment-success-in { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:none; } }
.payment-result-card h1 { margin:0; font-size:clamp(27px,7vw,32px); line-height:1.12; letter-spacing:-.035em; }
.payment-result-card > p { margin:9px auto 20px; max-width:350px; color:var(--secondary); font-size:14px; line-height:1.45; }
.payment-result-card .payment-primary-action { margin-top:0; }
.payment-result__secondary { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.payment-result__secondary .btn { min-width:0; min-height:52px; padding:10px; border-color:var(--border); border-radius:18px; font-size:14px; }
.payment-result__secondary .btn__icon { width:22px; }
.payment-result__secondary .btn__icon .ui-icon { width:20px; height:20px; }

.choice-card:focus-visible,.payment-method:focus-visible,.payment-summary__change:focus-visible,.payment-cancel-modal .btn:focus-visible { outline:2px solid rgba(24,214,204,.82); outline-offset:3px; }
.choice-card:active,.payment-method:active { background-color:rgba(9,12,15,.9); opacity:.94; }
.payment-primary-action:active { opacity:.94; }

@media (hover:hover) and (pointer:fine) {
  .choice-card:hover { border-color:var(--steel); background:linear-gradient(145deg,rgba(29,34,40,.86),rgba(12,15,18,.82)); box-shadow:inset 0 0 18px rgba(255,255,255,.018); }
  .choice-card.is-selected:hover { border-color:var(--accent-light); background:linear-gradient(145deg,rgba(0,194,184,.09),rgba(12,15,18,.84)); }
  .payment-method:hover { border-color:var(--steel); background:rgba(29,34,40,.72); box-shadow:inset 0 0 18px rgba(255,255,255,.018); }
  .payment-method:hover .payment-method__icon { color:var(--accent-light); border-color:rgba(24,214,204,.34); background:rgba(0,194,184,.035); }
  .payment-method:hover .payment-method__arrow { color:var(--highlight); }
  .payment-summary__change:hover { color:var(--white); background:rgba(0,194,184,.065); }
  .payment-flow-screen .payment-primary-action:hover:not(:disabled),.renew-screen .payment-primary-action:hover:not(:disabled) { border-color:rgba(24,214,204,.84); background:linear-gradient(135deg,rgba(24,214,204,.18),rgba(0,142,135,.055)); box-shadow:inset 0 0 24px rgba(0,194,184,.055),0 0 22px rgba(0,194,184,.085); }
  .payment-cancel-action:hover:not(:disabled),.payment-cancel-modal .btn--danger:hover:not(:disabled) { border-color:rgba(255,77,94,.8); background:rgba(255,77,94,.055); }
}

@media (max-width:560px) {
  .renew-screen,.payment-flow-screen { width:100%; }
  .renew-screen .topbar,.payment-flow-screen .topbar { margin-bottom:13px; }
  .renew-intro h2 { font-size:22px; }
  .choice-grid { gap:10px; }
  .choice-card { min-height:118px; padding:15px; }
  .choice-card strong { margin-top:27px; font-size:26px; }
  .payment-summary { padding:16px 17px; }
  .payment-summary__total > strong { font-size:25px; }
  .payment-method { min-height:76px; grid-template-columns:42px minmax(0,1fr) 24px 20px; gap:10px; padding:11px 12px; }
  .payment-method__icon { width:42px; height:42px; }
  .payment-primary-action { min-height:56px; }
  .payment-waiting { gap:16px; margin:20px 3px; }
  .payment-loader { width:58px; height:58px; flex-basis:58px; }
  .payment-waiting h1 { font-size:27px; }
  .payment-detail-row { min-height:58px; padding:12px 16px; }
  .payment-result-card { margin-top:clamp(30px,8vh,68px); padding:25px 18px 20px; }
}

@media (max-width:375px) {
  .choice-card { min-height:111px; padding:14px; }
  .choice-card .choice-card__period { font-size:14px; }
  .choice-card strong { margin-top:25px; font-size:23px; }
  .choice-card__check { top:12px; right:12px; width:22px; height:22px; }
  .payment-summary__row { gap:10px; }
  .payment-summary__row strong { font-size:15px; }
  .payment-summary__row small { font-size:11px; }
  .payment-method { grid-template-columns:40px minmax(0,1fr) 22px 18px; gap:8px; padding-inline:10px; }
  .payment-method__icon { width:40px; height:40px; }
  .payment-method__body strong { font-size:16px; }
  .payment-method__body small { font-size:11px; }
  .payment-waiting { gap:13px; }
  .payment-loader { width:54px; height:54px; flex-basis:54px; }
  .payment-waiting h1 { font-size:24px; }
  .payment-waiting p { font-size:13px; }
  .payment-result__secondary { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .payment-loader,.button-spinner { animation:none !important; }
  .payment-result-card--success .payment-result-icon { animation:none !important; }
}