:root {
      --bg: #030806;
      --bg-2: #06120d;
      --panel: rgba(5, 18, 12, 0.72);
      --line: rgba(87, 255, 164, 0.18);
      --text: #d7ffe8;
      --muted: #83c9a4;
      --green: #45ff9d;
      --green-2: #13c86c;
      --green-soft: rgba(69, 255, 157, 0.12);
      --shadow: 0 0 24px rgba(69, 255, 157, 0.22);
      --danger: #9dffd0;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    html.page-loading,
    html.page-loading body {
      overflow: hidden;
    }

    body {
      min-height: 100vh;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 20%, rgba(69,255,157,0.14), transparent 28%),
        radial-gradient(circle at 80% 25%, rgba(69,255,157,0.08), transparent 24%),
        radial-gradient(circle at 50% 90%, rgba(19,200,108,0.08), transparent 32%),
        linear-gradient(180deg, #020403 0%, #05100b 45%, #020403 100%);
      overflow-x: hidden;
      position: relative;
    }

    body.modal-open {
      overflow: hidden;
    }

    .toast-stack {
      position: fixed;
      top: calc(18px + env(safe-area-inset-top));
      right: calc(18px + env(safe-area-inset-right));
      z-index: 140;
      width: min(420px, calc(100vw - 32px));
      display: grid;
      gap: 12px;
      pointer-events: none;
    }

    .toast {
      --toast-border: rgba(255, 122, 122, 0.28);
      --toast-bg-aura: rgba(255, 122, 122, 0.12);
      --toast-bg-start: rgba(23, 12, 13, 0.96);
      --toast-bg-end: rgba(9, 14, 12, 0.96);
      --toast-text: #ffe2e2;
      --toast-shadow: rgba(255, 96, 96, 0.1);
      --toast-accent: #ff8ea2;
      --toast-accent-soft: rgba(255, 112, 136, 0.22);
      --toast-progress-start: rgba(255, 112, 136, 0.95);
      --toast-progress-end: rgba(255, 198, 206, 0.9);
      --toast-close-border: rgba(255, 112, 136, 0.28);
      --toast-close-bg: rgba(38, 10, 14, 0.64);
      --toast-close-text: #ffd6dd;
      --toast-close-border-hover: rgba(255, 112, 136, 0.58);
      --toast-close-shadow: rgba(255, 112, 136, 0.2);
      pointer-events: auto;
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 15px 16px;
      border-radius: 18px;
      border: 1px solid var(--toast-border);
      background:
        radial-gradient(circle at 12% 0%, var(--toast-bg-aura), transparent 38%),
        linear-gradient(180deg, var(--toast-bg-start), var(--toast-bg-end));
      color: var(--toast-text);
      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34), 0 0 26px var(--toast-shadow);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      animation: toast-enter 220ms ease both;
      transition: opacity 180ms ease, transform 180ms ease;
      overflow: hidden;
    }

    .toast.is-success {
      --toast-border: rgba(87, 255, 164, 0.28);
      --toast-bg-aura: rgba(87, 255, 164, 0.12);
      --toast-bg-start: rgba(8, 24, 16, 0.96);
      --toast-bg-end: rgba(3, 14, 9, 0.96);
      --toast-text: #dfffe9;
      --toast-shadow: rgba(69, 255, 157, 0.12);
      --toast-accent: #86ffc0;
      --toast-accent-soft: rgba(87, 255, 164, 0.22);
      --toast-progress-start: rgba(87, 255, 164, 0.95);
      --toast-progress-end: rgba(202, 255, 222, 0.9);
      --toast-close-border: rgba(87, 255, 164, 0.28);
      --toast-close-bg: rgba(4, 24, 14, 0.64);
      --toast-close-text: #dfffe9;
      --toast-close-border-hover: rgba(87, 255, 164, 0.58);
      --toast-close-shadow: rgba(69, 255, 157, 0.2);
    }

    .toast::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--toast-progress-start), var(--toast-progress-end));
      transform-origin: left center;
      animation: toast-timeout var(--toast-duration, 9600ms) linear forwards;
    }

    .toast.is-leaving {
      pointer-events: none;
      animation: toast-leave 220ms ease forwards;
    }

    .toast-message {
      flex: 1;
      min-width: 0;
      font-weight: 800;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .toast-icon,
    .toast-close-icon {
      display: inline-block;
      flex-shrink: 0;
      background-color: currentColor;
      -webkit-mask: var(--icon-url) center / contain no-repeat;
      mask: var(--icon-url) center / contain no-repeat;
    }

    .toast-icon {
      width: 22px;
      height: 22px;
      margin-top: 1px;
      color: var(--toast-accent);
      filter: drop-shadow(0 0 8px var(--toast-accent-soft));
    }

    .toast-close {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid var(--toast-close-border);
      appearance: none;
      background: var(--toast-close-bg);
      color: var(--toast-close-text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .toast-close-icon {
      width: 18px;
      height: 18px;
      opacity: 1;
      pointer-events: none;
    }

    .toast-close:hover {
      border-color: var(--toast-close-border-hover);
      box-shadow: 0 0 16px var(--toast-close-shadow);
      transform: translateY(-1px);
    }

    @keyframes toast-enter {
      from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes toast-leave {
      from {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      to {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
      }
    }

    @keyframes toast-timeout {
      from {
        transform: scaleX(1);
      }
      to {
        transform: scaleX(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .toast::after {
        animation: none;
      }
    }

    @media (max-width: 520px) {
      .toast-stack {
        top: calc(12px + env(safe-area-inset-top));
        right: calc(12px + env(safe-area-inset-right));
        left: calc(12px + env(safe-area-inset-left));
        width: auto;
      }

      .toast {
        padding: 14px;
        border-radius: 16px;
      }
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(69,255,157,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69,255,157,0.03) 1px, transparent 1px);
      background-size: 36px 36px;
      mask-image: radial-gradient(circle at center, black 40%, transparent 95%);
      pointer-events: none;
      opacity: 0.6;
    }

    .page-loader {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(2, 9, 6, 0.74);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 320ms;
    }

    .page-loading .page-loader {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
    }

    .page-loader-card {
      width: min(360px, 100%);
      display: grid;
      gap: 14px;
      padding: 22px 20px 20px;
      border-radius: 22px;
      border: 1px solid rgba(87, 255, 164, 0.2);
      background:
        radial-gradient(circle at 82% 12%, rgba(64, 95, 255, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(8, 23, 16, 0.96), rgba(4, 12, 10, 0.94));
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 22px 48px rgba(0, 0, 0, 0.34);
    }

    .page-loader-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .page-loader-logo {
      width: 34px;
      height: 34px;
      object-fit: contain;
      filter: drop-shadow(0 0 10px rgba(69, 255, 157, 0.34));
      flex-shrink: 0;
    }

    .page-loader-copy {
      color: var(--muted);
      line-height: 1.55;
    }

    .page-loader-track {
      position: relative;
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.04);
    }

    .page-loader-bar {
      position: absolute;
      inset: 0 auto 0 0;
      width: 42%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(69, 255, 157, 0.12), rgba(69, 255, 157, 0.92), rgba(150, 255, 208, 0.46));
      box-shadow: 0 0 18px rgba(69, 255, 157, 0.28);
      animation: pageLoaderBar 1.15s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    }

    .rain {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      opacity: 0.2;
      z-index: 0;
    }

    .rain span {
      position: absolute;
      top: -120px;
      color: rgba(69,255,157,0.65);
      font-size: 13px;
      letter-spacing: 2px;
      font-family: "Courier New", monospace;
      animation: fall linear infinite;
      text-shadow: 0 0 10px rgba(69,255,157,0.45);
      user-select: none;
      white-space: pre;
    }

    @keyframes fall {
      from {
        transform: translateY(-10vh);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      to {
        transform: translateY(120vh);
        opacity: 0;
      }
    }

    @keyframes pageLoaderBar {
      0% {
        transform: translateX(-108%);
      }
      100% {
        transform: translateX(260%);
      }
    }

    @keyframes landingEntrance {
      from {
        opacity: 0;
        transform: translate3d(0, var(--entrance-offset, 20px), 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    [data-entrance="load"] {
      animation: landingEntrance 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-delay: var(--entrance-delay, 0ms);
    }

    .page-loading [data-entrance="load"] {
      animation: none;
      opacity: 0;
      transform: translate3d(0, var(--entrance-offset, 20px), 0);
    }

    [data-entrance="view"] {
      --entrance-offset: 24px;
    }

    body.entrance-managed [data-entrance].is-pending {
      opacity: 0;
      transform: translate3d(0, var(--entrance-offset, 20px), 0);
      will-change: opacity, transform;
    }

    body.entrance-managed [data-entrance].is-visible {
      animation: landingEntrance 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-delay: var(--entrance-delay, 0ms);
      will-change: opacity, transform;
    }

    body.entrance-managed [data-entrance="view"].is-visible {
      animation-duration: 640ms;
    }

    .wrap {
      position: relative;
      z-index: 1;
      width: min(1240px, calc(100% - 48px));
      margin: 0 auto;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28px 0 18px;
    }

	    .brand {
	      display: inline-flex;
	      align-items: center;
	      gap: 10px;
	      font-size: 1.2rem;
	      font-weight: 800;
	      letter-spacing: 0.22em;
	      text-transform: uppercase;
	      color: var(--text);
	      text-shadow: 0 0 14px rgba(69,255,157,0.28);
	    }

	    .brand-logo {
	      width: 30px;
	      height: 30px;
	      object-fit: contain;
	      filter: drop-shadow(0 0 10px rgba(69,255,157,0.28));
	      flex-shrink: 0;
	    }

    .nav-actions {
      display: flex;
      gap: 12px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 22px;
      border-radius: 14px;
      border: 1px solid var(--line);
      text-decoration: none;
      color: var(--text);
      background: rgba(4, 14, 9, 0.65);
      backdrop-filter: blur(14px);
      font-family: inherit;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1;
      transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease;
      box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    }

    .btn:hover {
      transform: translateY(-2px);
      border-color: rgba(69,255,157,0.48);
      box-shadow: 0 0 22px rgba(69,255,157,0.18);
    }

    .btn > span:not([class*="icon"]) {
      font: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
    }

    .btn-with-icon {
      gap: 10px;
    }

    .btn-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      background: currentColor;
      -webkit-mask: var(--icon-url) center / contain no-repeat;
      mask: var(--icon-url) center / contain no-repeat;
      pointer-events: none;
    }

    .btn-icon,
    .btn-label {
      position: relative;
      z-index: 1;
    }

    .btn-primary {
      position: relative;
      overflow: hidden;
      color: #042010;
      border-color: rgba(69,255,157,0.55);
      background: linear-gradient(180deg, rgba(69,255,157,0.96), rgba(69,255,157,0.76));
      box-shadow: 0 0 22px rgba(69,255,157,0.22), inset 0 0 0 1px rgba(201,255,224,0.2);
      transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.28s ease,
        filter 0.28s ease;
    }

    .btn-primary::before {
      content: "";
      position: absolute;
      top: -140%;
      left: -45%;
      width: 44%;
      height: 380%;
      pointer-events: none;
      transform: translateX(-180%) rotate(22deg);
      background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(238,255,245,0.68) 50%,
        rgba(255,255,255,0) 100%
      );
      transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .btn-primary:hover {
      transform: translateY(-3px) scale(1.012);
      border-color: rgba(201,255,224,0.72);
      box-shadow:
        0 12px 30px rgba(10, 45, 24, 0.42),
        0 0 30px rgba(69,255,157,0.34),
        inset 0 0 0 1px rgba(235,255,244,0.28);
      filter: saturate(1.06) brightness(1.02);
    }

    .btn-primary:hover::before {
      transform: translateX(340%) rotate(22deg);
    }

    .btn-primary:active {
      transform: translateY(-1px) scale(0.996);
      box-shadow:
        0 8px 20px rgba(10, 45, 24, 0.35),
        0 0 20px rgba(69,255,157,0.24),
        inset 0 0 0 1px rgba(235,255,244,0.22);
    }

    .btn-primary:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 3px rgba(4, 12, 9, 0.9),
        0 0 0 5px rgba(69,255,157,0.48),
        0 12px 28px rgba(10, 45, 24, 0.4),
        0 0 30px rgba(69,255,157,0.28);
    }

    .hero {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 42px;
      min-height: calc(100vh - 108px);
      align-items: center;
      padding: 18px 0 72px;
    }

    .hero-copy {
      max-width: 620px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--green-soft);
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.92rem;
      margin-bottom: 22px;
      backdrop-filter: blur(12px);
    }

    .hero h1 {
      font-size: clamp(2.8rem, 6vw, 5.3rem);
      line-height: 0.95;
      letter-spacing: -0.04em;
      margin-bottom: 20px;
      text-transform: uppercase;
    }

    .hero h1 span {
      color: var(--green);
      text-shadow: 0 0 24px rgba(69,255,157,0.25);
    }

    .hero p {
      font-size: 1.08rem;
      line-height: 1.75;
      color: var(--muted);
      max-width: 560px;
      margin-bottom: 32px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 34px;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(120px, 1fr));
      gap: 16px;
      max-width: 640px;
    }

    .stat {
      padding: 18px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: var(--panel);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
    }

    .stat strong {
      display: block;
      font-size: 1.4rem;
      margin-bottom: 6px;
      color: var(--green);
    }

    .stat span {
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.4;
    }

    .hero-visual {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      min-height: 620px;
      overflow: hidden;
    }

    .sphere-shell {
      position: relative;
      width: min(540px, 90vw);
      aspect-ratio: 1 / 1;
      display: grid;
      place-items: center;
      filter: drop-shadow(0 0 36px rgba(69,255,157,0.2));
    }

    .orbit,
    .orbit-2,
    .orbit-3 {
      position: absolute;
      inset: 10%;
      border-radius: 50%;
      border: 1px solid rgba(69,255,157,0.12);
      transform-style: preserve-3d;
      animation: spin 18s linear infinite;
    }

    .orbit-2 {
      inset: 18%;
      animation-duration: 14s;
      transform: rotateX(72deg) rotateY(20deg);
    }

    .orbit-3 {
      inset: 4%;
      animation-duration: 22s;
      transform: rotateY(68deg) rotateX(24deg);
    }

    @keyframes spin {
      from { transform: rotateX(70deg) rotateY(0deg); }
      to { transform: rotateX(70deg) rotateY(360deg); }
    }

    .sphere {
      position: relative;
      width: 74%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      background:
        radial-gradient(circle at 30% 28%, rgba(157,255,208,0.18), transparent 16%),
        radial-gradient(circle at 50% 50%, rgba(19,200,108,0.18), rgba(2,8,5,0.86) 60%, rgba(1,4,3,0.98) 100%);
      border: 1px solid rgba(69,255,157,0.2);
      overflow: hidden;
      transform-style: preserve-3d;
      animation: float 6s ease-in-out infinite;
      box-shadow:
        inset 0 0 40px rgba(69,255,157,0.14),
        0 0 60px rgba(69,255,157,0.14);
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px) rotateZ(0deg); }
      50% { transform: translateY(-10px) rotateZ(1deg); }
    }

    .sphere::before,
    .sphere::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle at center, transparent 52%, rgba(69,255,157,0.08) 72%, transparent 76%);
      animation: pulse 5s ease-in-out infinite;
      mix-blend-mode: screen;
    }

    .sphere::after {
      inset: 8%;
      animation-delay: -1.8s;
    }

    @keyframes pulse {
      0%, 100% { opacity: 0.45; transform: scale(1); }
      50% { opacity: 0.9; transform: scale(1.06); }
    }

    .glyph-layer {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-family: "Courier New", monospace;
      font-size: clamp(0.58rem, 0.8vw, 0.84rem);
      color: rgba(88, 255, 165, 0.72);
      line-height: 1.18;
      text-align: center;
      white-space: pre;
      mix-blend-mode: screen;
      animation: drift 13s linear infinite;
      text-shadow: 0 0 8px rgba(69,255,157,0.45);
      opacity: 0.8;
      padding: 10%;
      transform: rotate(-8deg);
      mask-image: radial-gradient(circle at center, black 0%, black 58%, transparent 82%);
      -webkit-mask-image: radial-gradient(circle at center, black 0%, black 58%, transparent 82%);
    }

    .glyph-layer.back {
      opacity: 0.42;
      filter: blur(1.2px);
      animation-duration: 18s;
      transform: rotate(12deg) scale(1.08);
    }

    @keyframes drift {
      from { transform: translateY(-2%) rotate(-8deg); }
      50% { transform: translateY(2%) rotate(-4deg); }
      to { transform: translateY(-2%) rotate(-8deg); }
    }

    .core-highlight {
      position: absolute;
      inset: 17%;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, rgba(210,255,230,0.16), transparent 24%);
      pointer-events: none;
    }

    .panel-note {
      position: absolute;
      right: 0;
      bottom: 30px;
      width: min(280px, 55%);
      padding: 18px 18px 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(4, 16, 10, 0.66);
      backdrop-filter: blur(16px);
      box-shadow: var(--shadow);
    }

    .panel-note .label {
      color: var(--green);
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .panel-note p {
      color: var(--muted);
      line-height: 1.55;
      font-size: 0.94rem;
    }

    .section-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: -20px;
      padding-bottom: 84px;
    }

    .card {
      padding: 24px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(5,18,12,0.84), rgba(3,10,7,0.72));
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }

    .card h3 {
      font-size: 1.04rem;
      letter-spacing: -0.02em;
      margin-bottom: 12px;
    }

    .card p {
      color: var(--muted);
      line-height: 1.65;
      font-size: 0.96rem;
    }

    .stack-section {
      padding: 36px 0 84px;
    }

    .section-head {
      max-width: 760px;
      margin-bottom: 28px;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(4, 14, 9, 0.68);
      color: var(--green);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.74rem;
      font-weight: 700;
    }

    .section-head h2 {
      font-size: clamp(2rem, 4vw, 2.9rem);
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin-bottom: 14px;
      text-transform: uppercase;
    }

    .section-head p {
      color: var(--muted);
      line-height: 1.7;
      font-size: 1.02rem;
    }

    .content-section {
      padding: 82px 0 0;
    }

    .content-section .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 28px;
      max-width: none;
    }

    .content-section .section-copy {
      max-width: 720px;
    }

    .section-eyebrow,
    .support-badge,
    .price-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--green-soft);
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.82rem;
      margin-bottom: 16px;
      backdrop-filter: blur(12px);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .section-title {
      font-size: clamp(2rem, 4.6vw, 3.4rem);
      line-height: 0.98;
      letter-spacing: -0.04em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .section-title span {
      color: var(--green);
      text-shadow: 0 0 20px rgba(69,255,157,0.18);
    }

    #pricing-title span {
      display: block;
    }

    .content-section .section-copy p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: var(--muted);
    }

    .price-layout {
      display: grid;
      gap: 30px;
    }

    .bonus-section {
      padding-top: 56px;
    }

    .launch-bonus-card {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
      gap: 28px;
      align-items: stretch;
      padding: 30px;
      border-radius: 26px;
      border: 1px solid rgba(87,255,164,0.3);
      background:
        radial-gradient(circle at 14% 18%, rgba(69,255,157,0.2), transparent 28%),
        radial-gradient(circle at 86% 24%, rgba(93,201,255,0.11), transparent 28%),
        linear-gradient(135deg, rgba(8,24,16,0.94), rgba(3,10,7,0.82));
      box-shadow: 0 0 30px rgba(69,255,157,0.2), 0 22px 48px rgba(0, 0, 0, 0.28);
      -webkit-backdrop-filter: blur(16px) saturate(130%);
      backdrop-filter: blur(16px) saturate(130%);
    }

    .launch-bonus-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image:
        linear-gradient(120deg, rgba(87,255,164,0.08) 0 1px, transparent 1px),
        radial-gradient(circle, rgba(214,255,236,0.36) 0.8px, transparent 1.7px);
      background-size: 42px 42px, 86px 86px;
      opacity: 0.52;
      mask-image: linear-gradient(90deg, black, transparent 82%);
    }

    .launch-bonus-copy {
      max-width: 720px;
    }

    .launch-bonus-copy .section-title {
      margin-bottom: 16px;
    }

    .launch-bonus-copy p {
      max-width: 680px;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.72;
    }

    .launch-bonus-list {
      display: grid;
      gap: 10px;
      margin-top: 22px;
      color: #c8ffde;
      list-style: none;
    }

    .launch-bonus-list li {
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr);
      gap: 14px;
      align-items: baseline;
      line-height: 1.5;
    }

    .launch-bonus-list li::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--green);
      box-shadow: 0 0 14px rgba(69,255,157,0.58);
      transform: translateY(-0.06em);
    }

    .launch-bonus-action-card {
      position: relative;
      overflow: hidden;
      display: grid;
      align-content: center;
      gap: 14px;
      min-height: 360px;
      padding: 24px;
      border-radius: 22px;
      border: 1px solid rgba(87,255,164,0.24);
      background:
        radial-gradient(circle at 50% 0%, rgba(69,255,157,0.16), transparent 38%),
        rgba(3, 12, 8, 0.62);
      box-shadow: inset 0 0 0 1px rgba(87,255,164,0.08);
    }

    .launch-bonus-action-card > :not(.launch-bonus-gift-art) {
      position: relative;
      z-index: 1;
    }

    .launch-bonus-gift-art {
      position: absolute;
      z-index: 0;
      top: 18px;
      right: -18px;
      width: min(58%, 260px);
      aspect-ratio: 1 / 1;
      background:
        radial-gradient(circle at 42% 32%, rgba(230,255,241,0.78), rgba(69,255,157,0.66) 42%, rgba(19,200,108,0.28) 72%, rgba(19,200,108,0.05) 100%);
      -webkit-mask: var(--icon-url) center / contain no-repeat;
      mask: var(--icon-url) center / contain no-repeat;
      opacity: 0.34;
      filter:
        drop-shadow(0 0 14px rgba(199,255,226,0.38))
        drop-shadow(0 0 34px rgba(69,255,157,0.3))
        drop-shadow(0 0 64px rgba(19,200,108,0.22));
      mix-blend-mode: screen;
      pointer-events: none;
      user-select: none;
    }

    .launch-bonus-gift-art::before {
      content: "";
      position: absolute;
      inset: -24%;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(69,255,157,0.34), rgba(69,255,157,0.08) 42%, transparent 72%);
      filter: blur(18px);
    }

    .launch-bonus-value {
      display: grid;
      gap: 2px;
    }

    .launch-bonus-value strong {
      color: #e8fff2;
      font-size: clamp(4.4rem, 9vw, 7rem);
      line-height: 0.82;
      letter-spacing: -0.08em;
      text-shadow: 0 0 28px rgba(69,255,157,0.26);
    }

    .launch-bonus-value span {
      color: var(--green);
      font-size: 1rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 800;
    }

    .launch-bonus-action-card p {
      color: var(--muted);
      line-height: 1.55;
      font-size: 0.95rem;
    }

    .launch-bonus-trigger {
      width: 100%;
      justify-content: center;
      font-size: 1.03rem;
    }

    .launch-bonus-trigger {
      gap: 10px;
    }

    .launch-bonus-trigger-icon {
      width: 20px;
      height: 20px;
      background: currentColor;
      -webkit-mask: var(--icon-url) center / contain no-repeat;
      mask: var(--icon-url) center / contain no-repeat;
      pointer-events: none;
    }

    .launch-bonus-trigger.is-waiting,
    .launch-bonus-trigger[disabled] {
      cursor: wait;
      opacity: 0.78;
      transform: none;
    }

	    .day-pass {
	      position: relative;
	      isolation: isolate;
	      overflow: hidden;
	      padding: 24px 30px;
	      min-height: 520px;
	      display: grid;
	      grid-template-columns: 1fr 1fr;
	      gap: 28px;
	      align-items: stretch;
	      border-radius: 22px;
	      border: 1px solid rgba(87,255,164,0.26);
	      background:
	        radial-gradient(circle at right top, rgba(69,255,157,0.14), transparent 30%),
	        linear-gradient(180deg, rgba(7,20,13,0.94), rgba(3,10,7,0.78));
	      box-shadow: 0 0 24px rgba(69,255,157,0.22), 0 18px 44px rgba(0, 0, 0, 0.22);
	      -webkit-backdrop-filter: blur(14px) saturate(125%);
	      backdrop-filter: blur(14px) saturate(125%);
	    }

	    .day-pass-visual {
	      position: relative;
	      height: 100%;
	      min-height: 0;
	      border-radius: 18px;
	      border: 1px solid rgba(87,255,164,0.22);
	      background:
	        linear-gradient(168deg, rgba(4,14,10,0.38), rgba(2,8,6,0.24));
	      overflow: hidden;
	      -webkit-backdrop-filter: blur(16px) saturate(142%);
	      backdrop-filter: blur(16px) saturate(142%);
	      box-shadow: inset 0 0 0 1px rgba(87,255,164,0.1), 0 14px 32px rgba(0, 0, 0, 0.24);
	    }

	    .day-pass-visual::before {
	      content: "";
	      position: absolute;
	      inset: 0;
	      border-radius: 50%;
	      background:
	        radial-gradient(circle at 30% 36%, rgba(116,255,195,0.2), transparent 40%),
	        radial-gradient(circle at 66% 58%, rgba(93,201,255,0.11), transparent 46%),
	        radial-gradient(circle at 52% 66%, rgba(72,255,173,0.14), transparent 54%);
	      filter: blur(26px);
	      opacity: 0.48;
	      z-index: 0;
	      animation: dayNebulaFloat 22s ease-in-out infinite;
	    }

	    .day-pass-visual::after {
	      content: "";
	      position: absolute;
	      inset: -10%;
	      z-index: 0;
	      background-image:
	        radial-gradient(circle, rgba(241,255,248,0.96) 0.95px, transparent 1.85px),
	        radial-gradient(circle, rgba(196,255,230,0.78) 0.86px, transparent 1.76px),
	        radial-gradient(circle, rgba(214,255,236,0.5) 0.72px, transparent 1.58px);
	      background-size: 78px 78px, 124px 124px, 168px 168px;
	      background-position: 0 0, 34px 52px, 14px 24px;
	      mix-blend-mode: screen;
	      opacity: 0.82;
	      filter: saturate(1.12) brightness(1.06) drop-shadow(0 0 4px rgba(197,255,230,0.42));
	      will-change: transform, background-position, opacity;
	      animation:
	        dayStarsDrift 24s linear infinite,
	        dayStarsDriftLayer 41s linear infinite,
	        dayStarsTwinkle 5.8s ease-in-out infinite,
	        dayStarsTwinkleAlt 8.8s ease-in-out infinite;
	      animation-delay: -2.1s, -11.7s, 0s, -3.4s;
	    }

	    .day-pass-background {
	      position: absolute;
	      inset: 0;
	      z-index: 0;
	      overflow: hidden;
	      pointer-events: none;
	    }

	    .day-pass-background::before {
	      content: "";
	      position: absolute;
	      inset: -12%;
	      background-image:
	        radial-gradient(circle, rgba(206,255,234,0.66) 0.74px, transparent 1.44px),
	        radial-gradient(circle, rgba(226,255,243,0.42) 0.62px, transparent 1.3px);
	      background-size: 56px 56px, 102px 102px;
	      background-position: 4px 10px, 26px 44px;
	      opacity: 0.62;
	      transform: translate3d(0, 0, 0);
	      filter: brightness(1.08) drop-shadow(0 0 3px rgba(180,255,223,0.24));
	      will-change: transform, background-position, opacity;
	      animation:
	        dayStarsParallax 32s linear infinite,
	        dayStarsParallaxLayer 56s linear infinite,
	        dayStarsTwinkleFar 7.8s ease-in-out infinite;
	      animation-delay: -6.3s, -13.4s, -1.8s;
	    }

	    .day-pass-background::after {
	      content: "";
	      position: absolute;
	      left: 50%;
	      top: 50%;
	      width: 72%;
	      aspect-ratio: 1 / 1;
	      border-radius: 50%;
	      background: radial-gradient(
	        circle,
	        rgba(206,255,232,0.28) 0%,
	        rgba(143,255,202,0.17) 24%,
	        rgba(98,255,176,0.08) 44%,
	        rgba(69,255,157,0.04) 62%,
	        rgba(69,255,157,0) 100%
	      );
	      transform: translate(-50%, -50%) scale(0.96);
	      filter: blur(20px);
	      opacity: 0.36;
	      animation: dayNebulaPulse 10.8s ease-in-out infinite;
	    }

	    .day-pass-network {
	      position: relative;
	      width: 100%;
	      height: 100%;
	      min-height: 0;
	      z-index: 1;
	    }

	    .day-pass-network::before,
	    .day-pass-network::after {
	      content: none;
	    }

	    .day-links-layer {
	      position: absolute;
	      inset: 0;
	      z-index: 2;
	      pointer-events: none;
	      overflow: visible;
	    }

	    .day-link {
	      --pulse-duration: 4s;
	      --scan-duration: 5.6s;
	      --scan-delay: 0s;
	      --packet-duration: 3.1s;
	      isolation: isolate;
	    }

	    .day-link path {
	      fill: none;
	      stroke-linecap: round;
	      stroke-linejoin: round;
	      vector-effect: non-scaling-stroke;
	    }

	    .day-link-core {
	      stroke: rgba(223,255,242,0.92);
	      stroke-width: 4.2px;
	      opacity: 0.96;
	      animation: dayLinkBreath var(--pulse-duration, 4s) ease-in-out infinite;
	      filter: drop-shadow(0 0 8px rgba(144,255,201,0.46)) drop-shadow(0 0 16px rgba(123,255,192,0.24));
	    }

	    .day-link-aura {
	      stroke: rgba(154,255,204,0.48);
	      stroke-width: 14px;
	      opacity: 0.64;
	      animation: dayLinkAura var(--pulse-duration, 4s) ease-in-out infinite;
	      filter: blur(1.5px);
	    }

	    .day-link-scan {
	      stroke: rgba(241,255,248,0.9);
	      stroke-width: 6.1px;
	      opacity: 0;
	      stroke-dasharray: 20 80;
	      stroke-dashoffset: 100;
	      mix-blend-mode: screen;
	      animation: dayLinkScan var(--scan-duration, 5.6s) cubic-bezier(0.24, 0.08, 0.2, 0.98) infinite;
	      animation-delay: var(--scan-delay, 0s);
	      filter: drop-shadow(0 0 10px rgba(212,255,237,0.58));
	    }

	    .day-link .day-packet {
	      fill: rgba(231,255,245,0.96);
	      opacity: 0;
	      filter: drop-shadow(0 0 10px rgba(203,255,229,0.86)) drop-shadow(0 0 18px rgba(94,255,173,0.54));
	    }

	    .day-link .day-packet.day-packet-alt {
	      fill: rgba(185,255,220,0.88);
	      filter: drop-shadow(0 0 9px rgba(167,255,212,0.7)) drop-shadow(0 0 14px rgba(94,255,173,0.4));
	    }

	    .day-link-tg-chat {
	      --pulse-duration: 4.2s;
	      --scan-duration: 5.8s;
	      --scan-delay: 0.2s;
	      --packet-duration: 2.65s;
	    }

	    .day-link-chat-yt {
	      --pulse-duration: 3.8s;
	      --scan-duration: 5.1s;
	      --scan-delay: 1.1s;
	      --packet-duration: 2.35s;
	    }

	    .day-link-tg-yt {
	      --pulse-duration: 4.6s;
	      --scan-duration: 6.2s;
	      --scan-delay: 0.6s;
	      --packet-duration: 3s;
	    }

	    .day-eye {
	      position: absolute;
	      left: 50%;
	      top: 50%;
	      width: 142px;
	      aspect-ratio: 1 / 1;
	      transform: translate(-50%, -50%);
	      z-index: 3;
	      pointer-events: none;
	      isolation: isolate;
	      overflow: visible;
	    }

	    .day-eye-canvas {
	      position: absolute;
	      inset: -14%;
	      display: grid;
	      place-items: center;
	    }

	    .day-eye-canvas canvas {
	      width: 100% !important;
	      height: 100% !important;
	      display: block;
	      filter: drop-shadow(0 0 20px rgba(69,255,157,0.32)) drop-shadow(0 0 44px rgba(69,255,157,0.2));
	    }

	    .day-node {
	      position: absolute;
	      left: var(--x);
	      top: var(--y);
	      width: 130px;
	      aspect-ratio: 1 / 1;
	      transform: translate(-50%, -50%);
	      z-index: 4;
	      display: grid;
	      place-items: center;
	      border: 0;
	      background: transparent;
	      box-shadow: none;
	      isolation: isolate;
	      animation: dayNodeFloat 6.8s cubic-bezier(0.24, 0.08, 0.2, 0.96) infinite;
	    }

	    .day-node::before {
	      content: "";
	      position: absolute;
	      inset: -6%;
	      border-radius: 50%;
	      background: radial-gradient(
	        circle at 50% 50%,
	        rgba(205,255,229,0.56) 0%,
	        rgba(146,255,204,0.34) 34%,
	        rgba(69,255,157,0.16) 58%,
	        rgba(69,255,157,0.03) 74%,
	        rgba(69,255,157,0) 100%
	      );
	      filter: blur(10px);
	      transform: scale(1);
	      z-index: -2;
	      animation: dayNodeGlow 4.8s ease-in-out infinite;
	    }

	    .day-node::after {
	      content: "";
	      position: absolute;
	      inset: 8%;
	      border-radius: 50%;
	      border: 1.5px solid rgba(186,255,224,0.76);
	      background:
	        radial-gradient(circle at 28% 18%, rgba(118,255,190,0.24), rgba(118,255,190,0) 60%),
	        repeating-linear-gradient(
	          180deg,
	          rgba(134,255,200,0.2) 0 2px,
	          rgba(134,255,200,0) 2px 12px
	        ),
	        linear-gradient(165deg, rgba(2,14,9,0.96), rgba(1,7,5,0.94));
	      box-shadow:
	        inset 0 0 0 1px rgba(102,255,182,0.2),
	        inset 0 0 26px rgba(69,255,157,0.24),
	        0 0 24px rgba(69,255,157,0.3);
	      background-size: auto, 4px 24px, auto;
	      animation: dayNodeTextureShift 9.8s linear infinite;
	      z-index: -1;
	    }

	    .day-node img {
	      position: relative;
	      z-index: 1;
	      width: 62%;
	      height: 62%;
	      object-fit: contain;
	      filter: drop-shadow(0 0 10px rgba(204,255,228,0.42)) drop-shadow(0 0 18px rgba(69,255,157,0.3));
	    }

	    .day-node-telegram {
	      --x: 20%;
	      --y: 74%;
	      animation-delay: 0s;
	    }

	    .day-node-youtube {
	      --x: 80%;
	      --y: 74%;
	      animation-delay: 1.1s;
	    }

	    .day-node-chatgpt {
	      --x: 50%;
	      --y: 20%;
	      animation-delay: 0.55s;
	    }

	    .day-pass-content {
	      position: relative;
	      z-index: 1;
	      display: grid;
	      gap: 14px;
	      min-width: 0;
	      align-content: center;
	    }

	    .day-pass-content .price-copy {
	      max-width: none;
	    }

    .day-pass::after,
    .support-card::after {
      content: "";
      position: absolute;
      inset: auto -12% -45% auto;
      width: 240px;
      height: 240px;
      background: radial-gradient(circle, rgba(69,255,157,0.14), transparent 70%);
      pointer-events: none;
    }

    .price-lead {
      font-size: 2.6rem;
      font-weight: 800;
      letter-spacing: -0.05em;
      margin-bottom: 8px;
    }

    .price-lead span,
    .price-value {
      color: var(--green);
      text-shadow: 0 0 20px rgba(69,255,157,0.2);
    }

    .price-copy {
      max-width: 520px;
      color: var(--muted);
      line-height: 1.65;
      font-size: 0.96rem;
    }

	    .day-pass-actions {
	      display: flex;
	      align-items: center;
	      gap: 12px;
	      flex-wrap: wrap;
	      justify-content: flex-start;
	      margin-top: 4px;
	      width: 100%;
	    }

	    .day-pass-actions .btn {
	      width: 100%;
	    }

	    @keyframes dayNodeFloat {
	      0%, 100% {
	        transform: translate(-50%, -50%) translateY(0) scale(0.985);
	      }
	      32% {
	        transform: translate(-50%, -50%) translateY(-7px) scale(1.02);
	      }
	      68% {
	        transform: translate(-50%, -50%) translateY(5px) scale(0.995);
	      }
	    }

	    @keyframes dayNodeGlow {
	      0%, 100% {
	        opacity: 0.42;
	        transform: scale(0.88);
	      }
	      50% {
	        opacity: 0.8;
	        transform: scale(1.12);
	      }
	    }

	    @keyframes dayLinkBreath {
	      0%, 100% {
	        opacity: 0.66;
	      }
	      50% {
	        opacity: 1;
	      }
	    }

	    @keyframes dayLinkAura {
	      0%, 100% {
	        opacity: 0.36;
	        filter: blur(3px);
	      }
	      50% {
	        opacity: 0.68;
	        filter: blur(4px);
	      }
	    }

	    @keyframes dayLinkScan {
	      0% {
	        stroke-dashoffset: 100;
	        opacity: 0;
	      }
	      12% {
	        opacity: 0.82;
	      }
	      84% {
	        opacity: 0.82;
	      }
	      100% {
	        stroke-dashoffset: -32;
	        opacity: 0;
	      }
	    }

	    @keyframes dayPacketRun {
	      0% {
	        left: 0;
	        opacity: 0;
	        transform: translate(-50%, -50%) scale(0.55);
	      }
	      10% {
	        opacity: 1;
	      }
	      45% {
	        transform: translate(-50%, -50%) scale(1);
	      }
	      80% {
	        opacity: 0.95;
	      }
	      100% {
	        left: 100%;
	        opacity: 0;
	        transform: translate(-50%, -50%) scale(0.62);
	      }
	    }

	    @keyframes dayVisualPulse {
	      0%, 100% {
	        transform: scale(0.95);
	        opacity: 0.28;
	      }
	      50% {
	        transform: scale(1.1);
	        opacity: 0.46;
	      }
	    }

	    @keyframes dayAuroraDrift {
	      0%, 100% {
	        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
	        opacity: 0.42;
	      }
	      50% {
	        transform: translate3d(4%, -3%, 0) rotate(4deg) scale(1.08);
	        opacity: 0.62;
	      }
	    }

	    @keyframes dayVisualScan {
	      0% {
	        transform: translate3d(-18%, 0, 0);
	        opacity: 0;
	      }
	      12% {
	        opacity: 0.5;
	      }
	      52% {
	        opacity: 0.5;
	      }
	      68%,
	      100% {
	        transform: translate3d(22%, 0, 0);
	        opacity: 0;
	      }
	    }

	    @keyframes dayGridShift {
	      0% {
	        transform: translate3d(0, 0, 0);
	        opacity: 0.09;
	      }
	      50% {
	        transform: translate3d(8px, -10px, 0);
	        opacity: 0.14;
	      }
	      100% {
	        transform: translate3d(0, 0, 0);
	        opacity: 0.09;
	      }
	    }

	    @keyframes dayCorePulse {
	      0%, 100% {
	        transform: translate(-50%, -50%) scale(0.9);
	        opacity: 0.24;
	      }
	      50% {
	        transform: translate(-50%, -50%) scale(1.08);
	        opacity: 0.42;
	      }
	    }

	    @keyframes dayNebulaFloat {
	      0%, 100% {
	        transform: translate3d(0, 0, 0) scale(1);
	        opacity: 0.42;
	      }
	      50% {
	        transform: translate3d(3.2%, -2.4%, 0) scale(1.08);
	        opacity: 0.58;
	      }
	    }

	    @keyframes dayNebulaPulse {
	      0%, 100% {
	        transform: translate(-50%, -50%) scale(0.92);
	        opacity: 0.22;
	      }
	      50% {
	        transform: translate(-50%, -50%) scale(1.1);
	        opacity: 0.38;
	      }
	    }

	    @keyframes dayStarsDrift {
	      0% {
	        transform: translate3d(0, 0, 0) scale(1);
	        background-position: 0 0, 34px 52px, 14px 24px;
	      }
	      100% {
	        transform: translate3d(-34px, 26px, 0) scale(1.028);
	        background-position: -32px 26px, 2px 78px, -18px 50px;
	      }
	    }

	    @keyframes dayStarsDriftLayer {
	      0% {
	        transform: translate3d(0, 0, 0) scale(1);
	        background-position: 0 0, 34px 52px, 14px 24px;
	      }
	      100% {
	        transform: translate3d(24px, -30px, 0) scale(1.012);
	        background-position: 30px -24px, 56px 20px, 36px -8px;
	      }
	    }

	    @keyframes dayStarsTwinkle {
	      0%, 100% {
	        opacity: 0.54;
	      }
	      22% {
	        opacity: 0.8;
	      }
	      50% {
	        opacity: 1;
	      }
	      72% {
	        opacity: 0.74;
	      }
	    }

	    @keyframes dayStarsTwinkleAlt {
	      0%, 100% {
	        opacity: 0.64;
	        filter: saturate(1.08) brightness(1.02);
	      }
	      30% {
	        opacity: 0.96;
	        filter: saturate(1.18) brightness(1.1);
	      }
	      64% {
	        opacity: 0.58;
	        filter: saturate(1.06) brightness(1.03);
	      }
	    }

	    @keyframes dayStarsTwinkleFar {
	      0%, 100% {
	        opacity: 0.44;
	        filter: brightness(1.02);
	      }
	      38% {
	        opacity: 0.74;
	        filter: brightness(1.15);
	      }
	      70% {
	        opacity: 0.52;
	        filter: brightness(1.07);
	      }
	    }

	    @keyframes dayStarsParallax {
	      0% {
	        transform: translate3d(0, 0, 0);
	        background-position: 4px 10px, 26px 44px;
	      }
	      100% {
	        transform: translate3d(20px, -16px, 0);
	        background-position: 26px -14px, 44px 18px;
	      }
	    }

	    @keyframes dayStarsParallaxLayer {
	      0% {
	        transform: translate3d(0, 0, 0);
	        background-position: 4px 10px, 26px 44px;
	      }
	      100% {
	        transform: translate3d(-16px, 22px, 0);
	        background-position: -12px 30px, 8px 68px;
	      }
	    }

	    @keyframes dayNodeTextureShift {
	      0% {
	        background-position: 0 0, 0 0, 0 0;
	      }
	      100% {
	        background-position: 0 0, 0 22px, 0 0;
	      }
	    }

	    @media (prefers-reduced-motion: reduce) {
	      .page-loader {
	        transition: none !important;
	      }

	      .page-loader-bar {
	        animation: none !important;
	        transform: translateX(0) !important;
	        width: 60%;
	      }

	      [data-entrance="load"],
	      [data-entrance="view"],
	      [data-entrance="section"] {
	        animation: none !important;
	        opacity: 1 !important;
	        transform: none !important;
	        will-change: auto !important;
	      }

	      .day-pass-visual::before,
	      .day-pass-visual::after,
	      .day-pass-background::before,
	      .day-pass-background::after,
	      .day-pass-network::before,
	      .day-pass-network::after,
	      .day-link-core,
	      .day-link-aura,
	      .day-link-scan,
	      .day-node,
	      .day-node::before,
	      .day-node::after {
	        animation: none !important;
	      }
	    }

    .price-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .price-card-reveal {
      display: flex;
      min-width: 0;
    }

    .price-card-reveal .price-card {
      height: 100%;
      width: 100%;
    }

    .price-card {
      position: relative;
      overflow: hidden;
      padding: 24px;
      display: flex;
      flex-direction: column;
      min-height: 300px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(5,18,12,0.84), rgba(3,10,7,0.72));
      box-shadow: 0 0 24px rgba(69,255,157,0.22), 0 18px 44px rgba(0, 0, 0, 0.22);
      backdrop-filter: blur(14px);
      transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
    }

    .price-card:hover {
      transform: translateY(-4px);
      border-color: rgba(87,255,164,0.34);
    }

    .price-card.popular {
      border-color: rgba(87,255,164,0.42);
      transform: translateY(-8px) scale(1.015);
      box-shadow: 0 0 34px rgba(69,255,157,0.24), 0 24px 50px rgba(0,0,0,0.3);
      background:
        radial-gradient(circle at top, rgba(69,255,157,0.14), transparent 34%),
        linear-gradient(180deg, rgba(9,27,18,0.98), rgba(3,10,7,0.82));
    }

    .price-card.popular:hover {
      transform: translateY(-12px) scale(1.02);
      border-color: rgba(87,255,164,0.56);
      box-shadow:
        0 0 42px rgba(69,255,157,0.34),
        0 30px 56px rgba(0,0,0,0.36);
    }

    .price-card.popular::before {
      content: "Популярный";
      position: absolute;
      top: 18px;
      right: 18px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(87,255,164,0.32);
      background: rgba(69,255,157,0.12);
      color: var(--text);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      box-shadow: 0 0 18px rgba(69,255,157,0.16);
    }

    .price-card.popular::after {
      content: "";
      position: absolute;
      inset: -45% -85%;
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(
        115deg,
        rgba(255,255,255,0) 44%,
        rgba(232,255,242,0.24) 50%,
        rgba(255,255,255,0) 56%
      );
      transform: translateX(-26%) rotate(8deg);
      transition: transform 0.68s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 0.38s ease;
    }

    .price-card.popular:hover::after {
      opacity: 1;
      transform: translateX(26%) rotate(8deg);
    }

    .price-card.popular:hover .price-value {
      text-shadow: 0 0 26px rgba(69,255,157,0.34);
    }

    .price-top {
      margin-bottom: 18px;
      padding-right: 94px;
    }

    .price-title {
      font-size: 1.18rem;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .price-value {
      font-size: 2.3rem;
      font-weight: 800;
      letter-spacing: -0.05em;
      margin-bottom: 8px;
    }

    .price-note {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.88rem;
      color: var(--muted);
      padding: 8px 11px;
      border-radius: 999px;
      border: 1px solid rgba(87,255,164,0.12);
      background: rgba(69,255,157,0.06);
      margin-bottom: 18px;
    }

    .price-list {
      list-style: none;
      display: grid;
      gap: 10px;
      margin-bottom: 24px;
      flex: 1;
    }

    .price-list li {
      position: relative;
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.5;
      font-size: 0.95rem;
    }

    .price-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.62em;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 12px rgba(69,255,157,0.35);
    }

    .price-card .btn {
      width: 100%;
    }

    .support-card {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: center;
      padding: 24px 30px;
      margin-top: 18px;
      border-radius: 22px;
      border: 1px solid rgba(87,255,164,0.26);
      background:
        radial-gradient(circle at left top, rgba(69,255,157,0.14), transparent 30%),
        linear-gradient(180deg, rgba(7,20,13,0.94), rgba(3,10,7,0.78));
      box-shadow: 0 0 24px rgba(69,255,157,0.22), 0 18px 44px rgba(0, 0, 0, 0.22);
      backdrop-filter: blur(14px);
    }

    .support-card p {
      color: var(--muted);
      line-height: 1.65;
      font-size: 0.96rem;
    }

    .support-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
      align-items: stretch;
      justify-content: center;
    }

    .support-image {
      width: 100%;
      height: auto;
      border-radius: 16px;
      border: 1px solid rgba(87,255,164,0.28);
      box-shadow: 0 0 20px rgba(69,255,157,0.2), 0 14px 30px rgba(0, 0, 0, 0.28);
      object-fit: cover;
    }

    .support-actions .btn {
      width: 100%;
    }

    .support-side-note {
      font-size: 0.9rem;
      color: var(--muted);
      text-align: center;
    }

	    .site-footer {
	      display: grid;
	      grid-template-columns: 1.2fr auto;
	      gap: 22px;
	      align-items: end;
	      padding: 24px 0 46px;
	      border-top: 1px solid rgba(87,255,164,0.2);
	      margin-top: 58px;
	    }

	    .payment-modal-overlay {
	      position: fixed;
	      inset: 0;
	      z-index: 80;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	      padding: 22px;
	      background: rgba(2, 10, 7, 0.74);
	      backdrop-filter: blur(8px);
	      opacity: 0;
	      visibility: hidden;
	      pointer-events: none;
	      transition: opacity 0.24s ease, visibility 0.24s ease;
    }

    .payment-modal-overlay.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

	    .payment-modal {
	      position: relative;
	      width: min(580px, 100%);
	      border-radius: 24px;
	      border: 1px solid rgba(87,255,164,0.32);
	      background:
	        radial-gradient(circle at 18% 8%, rgba(69,255,157,0.14), transparent 36%),
	        linear-gradient(180deg, rgba(8,24,16,0.96), rgba(3,10,7,0.86));
	      box-shadow: 0 0 30px rgba(69,255,157,0.24), 0 28px 60px rgba(0, 0, 0, 0.38);
	      backdrop-filter: blur(14px);
	      padding: 30px;
	    }

    .payment-modal-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid rgba(87,255,164,0.22);
      background: rgba(4, 14, 9, 0.64);
      color: #c8ffde;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .payment-modal-close-icon {
      width: 18px;
      height: 18px;
      background-color: currentColor;
      -webkit-mask: var(--icon-url) center / contain no-repeat;
      mask: var(--icon-url) center / contain no-repeat;
      pointer-events: none;
    }

    .payment-modal-close:hover {
      border-color: rgba(87,255,164,0.45);
      box-shadow: 0 0 16px rgba(69,255,157,0.18);
      transform: translateY(-1px);
    }

    .payment-modal h3 {
      font-size: clamp(1.35rem, 2.4vw, 1.8rem);
      letter-spacing: -0.02em;
      margin-bottom: 10px;
      text-transform: uppercase;
    }

    .payment-plan {
      display: inline-flex;
      margin-bottom: 14px;
      padding: 6px 11px;
      border-radius: 999px;
      border: 1px solid rgba(87,255,164,0.3);
      background: rgba(69,255,157,0.1);
      color: #d9ffea;
      font-size: 0.82rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .payment-modal p {
      color: var(--muted);
      line-height: 1.58;
      font-size: 0.95rem;
      margin-bottom: 16px;
    }

	    .payment-form {
	      display: grid;
	      gap: 14px;
	    }

	    .payment-step {
	      display: none;
	    }

	    .payment-step.is-active {
	      display: grid;
	    }

    .payment-field {
      display: grid;
      gap: 8px;
      font-size: 0.86rem;
      color: #b8f5d3;
      letter-spacing: 0.02em;
    }

    .payment-input {
      width: 100%;
      border-radius: 12px;
      border: 1px solid rgba(87,255,164,0.24);
      background: rgba(3, 12, 8, 0.72);
      color: var(--text);
      font-size: 0.98rem;
      padding: 12px 13px;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

	    .payment-input:focus {
	      border-color: rgba(87,255,164,0.48);
	      box-shadow: 0 0 0 3px rgba(69,255,157,0.18);
	    }

	    .payment-field.is-invalid {
	      color: rgba(255, 112, 136, 0.64);
	    }

	    .payment-field.is-invalid .payment-input {
	      border-color: rgba(255, 112, 136, 0.64);
	      background: rgba(18, 8, 10, 0.78);
	      box-shadow: 0 0 0 3px rgba(255, 84, 118, 0.2), 0 0 18px rgba(255, 84, 118, 0.14);
	    }

	    .payment-agree.is-invalid {
	      color: #ffbcc8;
	    }

	    .payment-agree.is-invalid input {
	      accent-color: #ff6d8c;
	      filter: drop-shadow(0 0 4px rgba(255, 102, 134, 0.42));
	    }

	    .payment-otp-hint {
	      color: var(--muted);
	      line-height: 1.5;
	      margin-bottom: 2px;
	    }

	    .payment-otp-grid {
	      display: grid;
	      grid-template-columns: repeat(6, minmax(0, 1fr));
	      gap: 9px;
	    }

	    .payment-otp-input {
	      width: 100%;
	      height: 50px;
	      border-radius: 12px;
	      border: 1px solid rgba(87,255,164,0.25);
	      background: rgba(5, 16, 11, 0.78);
	      color: #e2fff0;
	      text-align: center;
	      font-size: 1.2rem;
	      font-weight: 700;
	      outline: none;
	      transition: border-color 0.2s ease, box-shadow 0.2s ease;
	    }

	    .bonus-otp-input {
	      width: 100%;
	      height: 50px;
	      border-radius: 12px;
	      border: 1px solid rgba(87,255,164,0.25);
	      background: rgba(5, 16, 11, 0.78);
	      color: #e2fff0;
	      text-align: center;
	      font-size: 1.2rem;
	      font-weight: 700;
	      outline: none;
	      transition: border-color 0.2s ease, box-shadow 0.2s ease;
	    }

	    .payment-otp-input:focus {
	      border-color: rgba(87,255,164,0.54);
	      box-shadow: 0 0 0 3px rgba(69,255,157,0.15);
	    }

	    .bonus-otp-input:focus {
	      border-color: rgba(87,255,164,0.54);
	      box-shadow: 0 0 0 3px rgba(69,255,157,0.15);
	    }

	    .payment-otp-grid.is-invalid .payment-otp-input {
	      border-color: rgba(255, 112, 136, 0.62);
	      box-shadow: 0 0 0 2px rgba(255, 84, 118, 0.16), 0 0 18px rgba(255, 84, 118, 0.12);
	    }

	    .payment-otp-grid.is-invalid .bonus-otp-input {
	      border-color: rgba(255, 112, 136, 0.62);
	      box-shadow: 0 0 0 2px rgba(255, 84, 118, 0.16), 0 0 18px rgba(255, 84, 118, 0.12);
	    }

	    .payment-back-btn {
	      width: 100%;
	    }

    .payment-agree {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .payment-agree input {
      width: 16px;
      height: 16px;
      margin-top: 1px;
      accent-color: var(--green);
      flex-shrink: 0;
    }

	    .payment-submit {
	      width: 100%;
	      margin-top: 8px;
	      min-height: 56px;
	      padding: 16px 24px;
	      font-size: 1.03rem;
	      border-radius: 15px;
	    }

	    .payment-submit.is-waiting {
	      cursor: wait;
	      filter: saturate(0.94);
	    }

	    .payment-submit[disabled],
	    .payment-back-btn[disabled] {
	      cursor: wait;
	      opacity: 0.78;
	      transform: none;
	    }

	    .payment-status-message {
	      min-height: 20px;
	      color: var(--muted);
	      font-size: 0.9rem;
	      line-height: 1.45;
	      margin: 0;
	    }

	    .payment-status-message.is-success {
	      color: #bbffd8;
	    }

	    .payment-status-step {
	      text-align: center;
	    }

    .bonus-modal-copy {
      color: var(--muted);
      line-height: 1.58;
      font-size: 0.95rem;
      margin-bottom: 16px;
    }

    .bonus-status-actions {
      display: grid;
      gap: 10px;
    }

    .footer-brand {
      font-size: 1rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 800;
      margin-bottom: 10px;
      color: #ddffe9;
    }

    .footer-note {
      max-width: 680px;
      color: var(--muted);
      line-height: 1.62;
      font-size: 0.92rem;
      margin-bottom: 10px;
    }

    .footer-copy {
      color: rgba(140, 207, 169, 0.76);
      font-size: 0.84rem;
      letter-spacing: 0.03em;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      justify-content: flex-end;
    }

    .footer-links a {
      color: #b4efcb;
      text-decoration: none;
      font-size: 0.88rem;
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid transparent;
      transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    }

    .footer-links a:hover {
      border-color: rgba(87,255,164,0.3);
      color: #e3fff0;
      background: rgba(69,255,157,0.08);
    }

    @media (max-width: 1180px) {
      .price-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 1040px) {
      .hero {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 6px;
      }

      .hero-copy {
        max-width: none;
      }

      .hero-visual {
        min-height: 500px;
        order: -1;
      }

      .section-grid {
        grid-template-columns: 1fr;
      }

      .content-section .section-head {
        align-items: stretch;
        flex-direction: column;
      }

      .launch-bonus-card {
        grid-template-columns: 1fr;
      }

      .launch-bonus-action-card {
        min-height: 320px;
      }

      .launch-bonus-gift-art {
        right: 10px;
        width: min(46%, 220px);
        opacity: 0.42;
      }

	      .day-pass,
	      .support-card {
	        grid-template-columns: 1fr;
	      }

	      .day-pass {
	        min-height: auto;
	        background:
	          radial-gradient(circle at right top, rgba(69,255,157,0.14), transparent 30%),
	          linear-gradient(180deg, rgba(7,20,13,0.94), rgba(3,10,7,0.78));
	      }

	      .day-pass-content {
	        order: -1;
	      }

	      .day-pass-visual,
	      .day-pass-network {
	        min-height: 280px;
	      }

	      .day-pass-visual::before {
	        opacity: 0.4;
	      }

	      .day-pass-visual::after {
	        opacity: 0.68;
	        background-size: 90px 90px, 140px 140px, 186px 186px;
	        filter: saturate(1.08) brightness(1.03) drop-shadow(0 0 3px rgba(197,255,230,0.32));
	        animation-duration: 30s, 48s, 6.6s, 10.4s;
	      }

	      .day-pass-background::before {
	        opacity: 0.48;
	        background-size: 62px 62px, 114px 114px;
	        filter: brightness(1.04) drop-shadow(0 0 2px rgba(180,255,223,0.16));
	        animation-duration: 40s, 64s, 8.8s;
	      }

	      .day-eye {
	        width: 116px;
	      }

	      .day-node {
	        width: 100px;
	      }

	      .day-node img {
	        width: 58%;
	        height: 58%;
	      }

      .day-pass-actions,
      .support-actions {
        justify-content: flex-start;
        min-width: 0;
      }

      .site-footer {
        grid-template-columns: 1fr;
      }

      .footer-links {
        justify-content: flex-start;
      }
    }

    @media (max-width: 720px) {
      .wrap {
        width: min(100% - 28px, 1240px);
      }

      header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
      }

      .nav-actions,
      .hero-actions {
        flex-direction: column;
      }

      .stats {
        grid-template-columns: 1fr;
      }

      .hero h1 {
        font-size: clamp(2.3rem, 13vw, 4rem);
      }

      .hero-visual {
        min-height: 400px;
      }

      .panel-note {
        position: static;
        margin-top: 20px;
        width: 100%;
      }

      .stack-section {
        padding: 26px 0 64px;
      }

      .section-title {
        font-size: clamp(2rem, 4.6vw, 3.4rem);
        line-height: 0.98;
        letter-spacing: -0.04em;
        text-transform: uppercase;
        margin-bottom: 14px;
      }

      .section-title span {
        color: var(--green);
        text-shadow: 0 0 20px rgba(69,255,157,0.18);
      }

      .section-head p {
        font-size: 0.96rem;
      }

      .price-grid {
        grid-template-columns: 1fr;
      }

      .price-layout {
        gap: 24px;
      }

      .price-card.popular {
        transform: none;
      }

      .price-card.popular {
        order: -1;
      }

      .price-top {
        padding-right: 0;
      }

      .support-actions {
        width: 100%;
      }

	      .support-card,
	      .launch-bonus-card,
	      .day-pass,
	      .price-card {
	        padding-left: 20px;
	        padding-right: 20px;
	      }

	      .launch-bonus-action-card {
	        min-height: 300px;
	      }

	      .launch-bonus-gift-art {
	        top: 16px;
	        right: -34px;
	        width: 190px;
	        opacity: 0.3;
	      }

	      .day-pass-visual,
	      .day-pass-network {
	        min-height: 270px;
	      }

	      .day-pass-visual::before {
	        opacity: 0.34;
	      }

	      .day-pass-visual::after {
	        opacity: 0.58;
	        background-size: 98px 98px, 152px 152px, 202px 202px;
	        filter: saturate(1.06) brightness(1.02) drop-shadow(0 0 2px rgba(197,255,230,0.24));
	        animation-duration: 34s, 54s, 7.2s, 11.8s;
	      }

	      .day-pass-background::before {
	        opacity: 0.4;
	        background-size: 70px 70px, 126px 126px;
	        filter: brightness(1.03) drop-shadow(0 0 1px rgba(180,255,223,0.12));
	        animation-duration: 46s, 72s, 9.8s;
	      }

	      .day-eye {
	        width: 100px;
	      }

	      .day-node {
	        width: 92px;
	      }

	      .day-node img {
	        width: 58%;
	        height: 58%;
	      }

	      .support-image {
	        height: auto;
	        max-height: 320px;
	      }

	      .site-footer {
	        padding: 20px 0 34px;
	        margin-top: 44px;
	      }

	      .payment-modal-overlay {
	        padding: 14px;
	      }

	      .payment-modal {
	        padding: 22px;
	      }

		    .payment-submit {
		      min-height: 52px;
		      padding: 14px 20px;
		      font-size: 1rem;
		    }

		    .payment-otp-grid {
		      gap: 7px;
		    }

		    .payment-otp-input {
		      height: 44px;
		      font-size: 1.02rem;
		    }

		    .bonus-otp-input {
		      height: 44px;
		      font-size: 1.02rem;
		    }
		  }

		  body.cabinet-page {
		    background:
		      radial-gradient(circle at 16% 26%, rgba(69,255,157,0.2), transparent 32%),
		      radial-gradient(circle at 84% 78%, rgba(69,255,157,0.18), transparent 30%),
		      linear-gradient(180deg, #030806 0%, #06120d 48%, #020403 100%);
		    min-height: 100vh;
		  }

		  body.cabinet-page .wrap {
		    min-height: 100vh;
		    display: flex;
		    flex-direction: column;
		  }

		  .cabinet-wrap {
		    position: relative;
		    z-index: 1;
		    width: min(100%, 620px);
		    margin: 0 auto;
		  }

		  body.cabinet-page .cabinet-wrap {
		    flex: 1;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    padding: 0 0 108px;
		  }

		  .cabinet-auth {
		    display: grid;
		    gap: 18px;
		  }

		  .cabinet-card {
		    position: relative;
		    border-radius: 24px;
		    border: 1px solid rgba(87,255,164,0.2);
		    background: linear-gradient(180deg, rgba(9,20,14,0.9), rgba(4,10,7,0.84));
		    box-shadow: 0 0 32px rgba(69,255,157,0.14), 0 20px 44px rgba(0, 0, 0, 0.3);
		    padding: 34px 34px 30px;
		    backdrop-filter: blur(14px);
		  }

		  .cabinet-logo {
		    width: 92px;
		    height: 92px;
		    margin: 0 auto 10px;
		    display: grid;
		    place-items: center;
		  }

		  .cabinet-logo-img {
		    width: 78px;
		    height: 78px;
		    object-fit: contain;
		    filter: drop-shadow(0 0 12px rgba(69,255,157,0.34));
		  }

		  .cabinet-title {
		    text-align: center;
		    text-transform: uppercase;
		    letter-spacing: 0.08em;
		    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
		    margin-bottom: 8px;
		  }

		  .cabinet-subtitle {
		    text-align: center;
		    color: var(--muted);
		    margin-bottom: 24px;
		    line-height: 1.45;
		  }

		  .cabinet-form {
		    display: none;
		    gap: 14px;
		  }

		  .cabinet-form.is-active {
		    display: grid;
		  }

		  .cabinet-field {
		    display: grid;
		    gap: 8px;
		    color: #b7f3d0;
		    font-size: 0.9rem;
		  }

		  .cabinet-input {
		    width: 100%;
		    border-radius: 13px;
		    border: 1px solid rgba(87,255,164,0.24);
		    background: rgba(4, 14, 9, 0.74);
		    color: var(--text);
		    padding: 14px 14px;
		    font-size: 1rem;
		    transition: border-color 0.2s ease, box-shadow 0.2s ease;
		    outline: none;
		  }

		  .cabinet-input:focus {
		    border-color: rgba(87,255,164,0.48);
		    box-shadow: 0 0 0 3px rgba(69,255,157,0.14);
		  }

		  .cabinet-field.is-invalid {
		    color: rgba(255, 112, 136, 0.64);
		  }

		  .cabinet-field.is-invalid .cabinet-input {
		    border-color: rgba(255, 112, 136, 0.64);
		    background: rgba(18, 8, 10, 0.8);
		    box-shadow: 0 0 0 3px rgba(255, 84, 118, 0.2), 0 0 20px rgba(255, 84, 118, 0.14);
		  }

		  .cabinet-submit {
		    width: 100%;
		    min-height: 54px;
		    font-size: 1rem;
		    border-radius: 14px;
		  }

		  .cabinet-submit[disabled] {
		    opacity: 0.78;
		    cursor: wait;
		  }

		  .cabinet-otp-hint {
		    color: var(--muted);
		    line-height: 1.5;
		  }

		  .cabinet-otp-grid {
		    display: grid;
		    grid-template-columns: repeat(6, minmax(0, 1fr));
		    gap: 10px;
		  }

		  .cabinet-otp-input {
		    width: 100%;
		    height: 52px;
		    border-radius: 12px;
		    border: 1px solid rgba(87,255,164,0.25);
		    background: rgba(5, 16, 11, 0.78);
		    color: #e2fff0;
		    text-align: center;
		    font-size: 1.28rem;
		    font-weight: 700;
		    outline: none;
		    transition: border-color 0.2s ease, box-shadow 0.2s ease;
		  }

		  .cabinet-otp-input:focus {
		    border-color: rgba(87,255,164,0.54);
		    box-shadow: 0 0 0 3px rgba(69,255,157,0.15);
		  }

		  .cabinet-otp-grid.is-invalid .cabinet-otp-input {
		    border-color: rgba(255, 112, 136, 0.62);
		    box-shadow: 0 0 0 2px rgba(255, 84, 118, 0.16), 0 0 18px rgba(255, 84, 118, 0.12);
		  }

		  .cabinet-back-btn {
		    width: 100%;
		  }

		  .cabinet-legal {
		    text-align: center;
		    color: rgba(131, 201, 164, 0.88);
		    line-height: 1.52;
		    font-size: 0.9rem;
		    max-width: 560px;
		    margin: 0 auto;
		  }

		  .cabinet-legal a {
		    color: #79f5bf;
		  }

		  @media (max-width: 640px) {
		    .cabinet-wrap {
		      width: min(100%, 620px);
		    }

		    body.cabinet-page .cabinet-wrap {
		      padding: 0 0 56px;
		    }

		    .cabinet-card {
		      padding: 26px 18px 22px;
		      border-radius: 18px;
		    }

		    .cabinet-otp-grid {
		      gap: 8px;
		    }

		    .cabinet-otp-input {
		      height: 46px;
		      font-size: 1.1rem;
		    }
		  }

		  body.cabinet-dashboard {
		    min-height: 100vh;
		  }

		  body.cabinet-dashboard::before {
		    mask-image: none;
		    opacity: 0.42;
		  }

		  body.cabinet-dashboard .rain {
		    opacity: 0.14;
		  }

		  .dashboard-nav-toggle {
		    position: fixed;
		    width: 1px;
		    height: 1px;
		    opacity: 0;
		    pointer-events: none;
		  }

		  .dashboard-overlay {
		    position: fixed;
		    inset: 0;
		    background: rgba(1, 7, 5, 0.72);
		    backdrop-filter: blur(3px);
		    opacity: 0;
		    pointer-events: none;
		    transition: opacity 0.26s ease;
		    z-index: 40;
		  }

		  .dashboard-shell {
		    position: relative;
		    z-index: 1;
		    display: grid;
		    grid-template-columns: 282px minmax(0, 1fr);
		    grid-template-areas:
		      "header header"
		      "sidebar main";
		    align-items: start;
		    gap: 18px;
		    width: min(1440px, calc(100% - 36px));
		    margin: 16px auto 28px;
		  }

		  .dashboard-header {
		    grid-area: header;
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    gap: 18px;
		    padding: 18px 20px;
		    border: 1px solid var(--line);
		    border-radius: 22px;
		    background:
		      radial-gradient(circle at 15% 90%, rgba(90, 109, 255, 0.22), transparent 45%),
		      radial-gradient(circle at 88% 16%, rgba(35, 255, 176, 0.14), transparent 44%),
		      rgba(4, 12, 10, 0.86);
		    box-shadow:
		      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
		      0 18px 44px rgba(0, 0, 0, 0.33);
		    backdrop-filter: blur(14px);
		  }

		  .dashboard-header-main {
		    display: flex;
		    align-items: center;
		    gap: 16px;
		    min-width: 0;
		    flex: 1;
		  }

		  .dashboard-sidebar {
		    grid-area: sidebar;
		    position: sticky;
		    top: 16px;
		    align-self: start;
		    display: flex;
		    flex-direction: column;
		    gap: 18px;
		    min-height: calc(100vh - 144px);
		    padding: 18px 14px;
		    border: 1px solid var(--line);
		    border-radius: 22px;
		    background:
		      radial-gradient(circle at 15% 90%, rgba(90, 109, 255, 0.22), transparent 45%),
		      radial-gradient(circle at 88% 16%, rgba(35, 255, 176, 0.14), transparent 44%),
		      rgba(4, 12, 10, 0.86);
		    box-shadow:
		      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
		      0 18px 44px rgba(0, 0, 0, 0.33);
		  }

		  .dashboard-sidebar-mobile-bar {
		    display: none;
		    justify-content: flex-end;
		  }

		  .dashboard-brand {
		    display: inline-flex;
		    align-items: center;
		    gap: 10px;
		    text-decoration: none;
		    color: var(--text);
		    font-weight: 800;
		    letter-spacing: 0.08em;
		    text-transform: uppercase;
		    min-width: 0;
		    flex-shrink: 0;
		  }

		  .dashboard-brand-logo {
		    width: 34px;
		    height: 34px;
		    object-fit: contain;
		    filter: drop-shadow(0 0 10px rgba(69, 255, 157, 0.35));
		    flex-shrink: 0;
		  }

		  .dashboard-sidebar-close {
		    width: 42px;
		    height: 42px;
		    border-radius: 12px;
		    border: 1px solid rgba(87, 255, 164, 0.28);
		    color: var(--text);
		    display: none;
		    align-items: center;
		    justify-content: center;
		    cursor: pointer;
		    background: rgba(6, 19, 13, 0.8);
		    font-size: 1.2rem;
		    line-height: 1;
		  }

		  .dashboard-nav {
		    display: grid;
		    gap: 8px;
		    align-content: start;
		    flex: 1;
		  }

		  .dashboard-nav-link {
		    display: flex;
		    align-items: center;
		    gap: 12px;
		    width: 100%;
		    min-height: 48px;
		    padding: 10px 12px;
		    border-radius: 14px;
		    border: 1px solid transparent;
		    appearance: none;
		    font: inherit;
		    text-align: left;
		    text-decoration: none;
		    color: rgba(219, 244, 232, 0.85);
		    background: transparent;
		    cursor: pointer;
		    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
		  }

		  .dashboard-nav-link:hover {
		    color: #dffff0;
		    border-color: rgba(87, 255, 164, 0.3);
		    background: rgba(13, 34, 24, 0.58);
		  }

		  .dashboard-nav-link.is-active {
		    color: #6effd1;
		    border-color: rgba(87, 255, 164, 0.36);
		    background: linear-gradient(90deg, rgba(38, 138, 110, 0.42), rgba(26, 58, 52, 0.58));
		    box-shadow: inset 3px 0 0 rgba(90, 255, 218, 0.9);
		  }

		  .dashboard-nav-link.is-soon {
		    border-color: rgba(87, 255, 164, 0.12);
		    background: rgba(9, 24, 18, 0.34);
		    color: rgba(219, 244, 232, 0.54);
		    cursor: default;
		    transform: none;
		  }

		  .dashboard-nav-link.is-soon:hover {
		    border-color: rgba(87, 255, 164, 0.12);
		    background: rgba(9, 24, 18, 0.34);
		    color: rgba(219, 244, 232, 0.54);
		  }

		  .dashboard-nav-link.is-soon .dashboard-nav-icon,
		  .dashboard-nav-link.is-soon .dashboard-nav-text {
		    filter: blur(1.4px);
		  }

		  .dashboard-nav-icon {
		    width: 28px;
		    height: 28px;
		    border-radius: 9px;
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    border: 1px solid rgba(87, 255, 164, 0.2);
		    background: rgba(10, 26, 20, 0.7);
		    font-size: 0.9rem;
		    flex-shrink: 0;
		  }

		  .dashboard-nav-text {
		    min-width: 0;
		    flex: 1;
		  }

		  .dashboard-nav-badge {
		    margin-left: auto;
		    padding: 5px 9px;
		    border-radius: 999px;
		    border: 1px solid rgba(255, 255, 255, 0.08);
		    background: rgba(255, 255, 255, 0.06);
		    color: #d5e6dd;
		    font-size: 0.68rem;
		    font-weight: 800;
		    letter-spacing: 0.08em;
		    text-transform: uppercase;
		    flex-shrink: 0;
		  }

		  .dashboard-sidebar-foot {
		    margin-top: auto;
		    display: grid;
		    gap: 10px;
		    padding: 12px;
		    border-radius: 16px;
		    border: 1px solid rgba(87, 255, 164, 0.18);
		    background:
		      radial-gradient(circle at 88% 10%, rgba(62, 104, 255, 0.18), transparent 52%),
		      rgba(6, 17, 13, 0.78);
		  }

		  .dashboard-foot-title {
		    font-size: 0.72rem;
		    font-weight: 800;
		    letter-spacing: 0.12em;
		    text-transform: uppercase;
		    color: #8fffd1;
		  }

		  .dashboard-foot-copy {
		    color: var(--muted);
		    font-size: 0.84rem;
		    line-height: 1.4;
		  }

		  .dashboard-foot-btn {
		    width: 100%;
		    min-height: 42px;
		  }

		  .dashboard-main {
		    grid-area: main;
		    min-width: 0;
		    display: grid;
		    align-content: start;
		    gap: 18px;
		  }

		  .dashboard-view-section {
		    display: none;
		    align-content: start;
		    gap: 18px;
		  }

		  .dashboard-view-section.is-active {
		    display: grid;
		  }

		  .dashboard-burger {
		    width: 42px;
		    height: 42px;
		    border-radius: 12px;
		    border: 1px solid rgba(87, 255, 164, 0.36);
		    background: rgba(8, 23, 16, 0.9);
		    display: none;
		    align-items: center;
		    justify-content: center;
		    gap: 4px;
		    flex-direction: column;
		    cursor: pointer;
		  }

		  .dashboard-burger span {
		    width: 17px;
		    height: 2px;
		    border-radius: 99px;
		    background: #7dffd2;
		  }

		  .dashboard-header-right {
		    display: flex;
		    align-items: center;
		    gap: 10px;
		    flex-shrink: 0;
		  }

		  .dashboard-support-link {
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    min-height: 38px;
		    padding: 8px 14px;
		    border-radius: 999px;
		    border: 1px solid rgba(87, 255, 164, 0.32);
		    text-decoration: none;
		    color: #7dffd2;
		    background: rgba(8, 24, 17, 0.68);
		    font-weight: 700;
		    font-size: 0.88rem;
		  }

		  .dashboard-plan-chip {
		    padding: 8px 13px;
		    border-radius: 999px;
		    background: linear-gradient(180deg, rgba(17, 139, 89, 0.84), rgba(11, 84, 54, 0.9));
		    border: 1px solid rgba(108, 245, 176, 0.5);
		    color: #ddffe6;
		    font-weight: 800;
		    letter-spacing: 0.06em;
		    font-size: 0.75rem;
		  }

		  .dashboard-avatar {
		    width: 38px;
		    height: 38px;
		    border-radius: 50%;
		    border: 1px solid rgba(87, 255, 164, 0.36);
		    background: rgba(9, 27, 20, 0.92);
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    font-weight: 700;
		    color: #8afecf;
		    text-transform: uppercase;
		  }

		  .dashboard-promo {
		    border-radius: 22px;
		    border: 1px solid rgba(87, 255, 164, 0.2);
		    padding: 24px 24px 26px;
		    background:
		      linear-gradient(120deg, rgba(58, 50, 188, 0.92), rgba(24, 102, 180, 0.92)),
		      rgba(7, 14, 34, 0.94);
		    box-shadow:
		      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
		      0 16px 36px rgba(0, 0, 0, 0.35);
		    display: grid;
		    gap: 13px;
		  }

		  .dashboard-promo-badge {
		    justify-self: start;
		    padding: 6px 12px;
		    border-radius: 999px;
		    background: rgba(224, 255, 242, 0.9);
		    color: #13262d;
		    font-weight: 800;
		    font-size: 0.76rem;
		    letter-spacing: 0.05em;
		    text-transform: uppercase;
		  }

		  .dashboard-promo h2 {
		    font-size: clamp(1.6rem, 2.4vw, 2.3rem);
		    line-height: 1.1;
		    letter-spacing: -0.01em;
		  }

		  .dashboard-promo p {
		    color: rgba(230, 244, 255, 0.88);
		    max-width: 860px;
		    line-height: 1.6;
		  }

		  .dashboard-promo-actions {
		    display: flex;
		    align-items: center;
		    gap: 16px;
		    flex-wrap: wrap;
		  }

		  .dashboard-promo-btn {
		    border-color: rgba(229, 245, 255, 0.8);
		    background: #f1f7ff;
		    color: #13232f;
		    min-width: 238px;
		  }

		  .dashboard-price {
		    font-size: clamp(1.25rem, 2vw, 1.8rem);
		    font-weight: 800;
		    color: #ebf5ff;
		    letter-spacing: 0.01em;
		  }

		  .dashboard-panel {
		    border-radius: 20px;
		    border: 1px solid rgba(87, 255, 164, 0.16);
		    padding: 18px 18px 20px;
		    background:
		      radial-gradient(circle at 75% 14%, rgba(69, 255, 157, 0.08), transparent 35%),
		      rgba(4, 13, 10, 0.8);
		  }

		  .dashboard-panel-head {
		    display: grid;
		    gap: 5px;
		    margin-bottom: 14px;
		  }

		  .dashboard-panel-head h3 {
		    font-size: 1.6rem;
		    line-height: 1.15;
		  }

		  .dashboard-panel-head p {
		    color: var(--muted);
		    line-height: 1.5;
		  }

		  .dashboard-metrics {
		    display: grid;
		    grid-template-columns: repeat(3, minmax(0, 1fr));
		    gap: 12px;
		  }

		  .dashboard-metric {
		    border-radius: 14px;
		    border: 1px solid rgba(87, 255, 164, 0.18);
		    background: rgba(6, 17, 13, 0.8);
		    padding: 16px;
		    display: grid;
		    gap: 6px;
		  }

		  .dashboard-metric-label {
		    text-transform: uppercase;
		    letter-spacing: 0.08em;
		    font-size: 0.72rem;
		    color: rgba(131, 201, 164, 0.84);
		  }

		  .dashboard-metric strong {
		    font-size: clamp(1.14rem, 1.8vw, 1.48rem);
		    line-height: 1.2;
		    overflow-wrap: anywhere;
		  }

		  .dashboard-metric-note {
		    color: var(--muted);
		  }

		  .dashboard-actions {
		    display: grid;
		    grid-template-columns: repeat(4, minmax(0, 1fr));
		    gap: 10px;
		  }

		  .dashboard-action {
		    min-height: 52px;
		    border-radius: 12px;
		    border: 1px solid rgba(87, 255, 164, 0.2);
		    background: linear-gradient(90deg, rgba(26, 85, 58, 0.66), rgba(18, 64, 46, 0.66));
		    color: #84ffd0;
		    text-decoration: none;
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    font-weight: 700;
		    text-align: center;
		    padding: 10px;
		    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
		  }

		  .dashboard-action:hover {
		    transform: translateY(-1px);
		    border-color: rgba(87, 255, 164, 0.42);
		    box-shadow: 0 0 18px rgba(69, 255, 157, 0.14);
		  }

		  .dashboard-action.is-accent {
		    background: linear-gradient(90deg, rgba(63, 51, 128, 0.74), rgba(34, 35, 91, 0.74));
		    color: #d1ccff;
		    border-color: rgba(138, 120, 255, 0.28);
		  }

		  .dashboard-panel-compact {
		    padding-bottom: 14px;
		  }

		  .dashboard-placeholder-grid {
		    display: grid;
		    grid-template-columns: repeat(3, minmax(0, 1fr));
		    gap: 12px;
		  }

		  .dashboard-placeholder-card {
		    border-radius: 16px;
		    border: 1px solid rgba(87, 255, 164, 0.16);
		    background: rgba(6, 17, 13, 0.78);
		    padding: 16px;
		    display: grid;
		    gap: 10px;
		    min-width: 0;
		  }

		  .dashboard-placeholder-label {
		    font-size: 0.72rem;
		    letter-spacing: 0.1em;
		    text-transform: uppercase;
		    color: rgba(131, 201, 164, 0.84);
		  }

		  .dashboard-placeholder-title {
		    font-size: 1.05rem;
		    line-height: 1.35;
		    color: #e6fff1;
		  }

		  .dashboard-placeholder-copy {
		    color: var(--muted);
		    line-height: 1.58;
		    font-size: 0.94rem;
		  }

		  .dashboard-section-actions {
		    display: flex;
		    align-items: center;
		    gap: 12px;
		    flex-wrap: wrap;
		    margin-top: 16px;
		  }

		  .dashboard-subscription-stack {
		    display: grid;
		    gap: 14px;
		  }

		  .dashboard-day-pass {
		    display: grid;
		    gap: 12px;
		    padding: 18px;
		    border-radius: 18px;
		    border: 1px solid rgba(87, 255, 164, 0.18);
		    background:
		      radial-gradient(circle at 88% 12%, rgba(67, 101, 255, 0.14), transparent 44%),
		      linear-gradient(180deg, rgba(10, 25, 18, 0.94), rgba(6, 16, 12, 0.92));
		  }

		  .dashboard-day-pass-badge {
		    justify-self: start;
		    padding: 6px 10px;
		    border-radius: 999px;
		    background: rgba(87, 255, 164, 0.14);
		    border: 1px solid rgba(87, 255, 164, 0.2);
		    color: #98ffda;
		    font-size: 0.72rem;
		    font-weight: 800;
		    letter-spacing: 0.08em;
		    text-transform: uppercase;
		  }

		  .dashboard-day-pass-lead {
		    font-size: clamp(1.35rem, 2vw, 1.9rem);
		    font-weight: 800;
		    line-height: 1.15;
		    color: #ecfff7;
		  }

		  .dashboard-day-pass-lead span {
		    color: #51ffab;
		  }

		  .dashboard-day-pass-copy {
		    max-width: 760px;
		    color: var(--muted);
		    line-height: 1.58;
		  }

		  .dashboard-day-pass-btn {
		    justify-self: start;
		  }

		  .dashboard-subscription-grid {
		    display: grid;
		    grid-template-columns: repeat(2, minmax(0, 1fr));
		    gap: 12px;
		  }

		  .dashboard-price-card {
		    position: relative;
		    display: grid;
		    gap: 14px;
		    min-height: 280px;
		    padding: 18px;
		    border-radius: 18px;
		    border: 1px solid rgba(87, 255, 164, 0.16);
		    background:
		      radial-gradient(circle at 100% 0%, rgba(64, 95, 255, 0.12), transparent 36%),
		      linear-gradient(180deg, rgba(9, 24, 18, 0.96), rgba(5, 14, 11, 0.92));
		    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
		    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
		  }

		  .dashboard-price-card:hover {
		    transform: translateY(-3px);
		    border-color: rgba(87, 255, 164, 0.34);
		    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
		  }

		  .dashboard-price-card.is-popular {
		    transform: translateY(-6px);
		    border-color: rgba(87, 255, 164, 0.3);
		    background:
		      radial-gradient(circle at top, rgba(69, 255, 157, 0.14), transparent 34%),
		      radial-gradient(circle at 100% 0%, rgba(64, 95, 255, 0.16), transparent 38%),
		      linear-gradient(180deg, rgba(12, 30, 21, 0.98), rgba(6, 16, 12, 0.94));
		    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
		  }

		  .dashboard-price-card.is-popular:hover {
		    transform: translateY(-9px);
		  }

		  .dashboard-price-card.is-popular::before {
		    content: "Популярный";
		    position: absolute;
		    top: 16px;
		    right: 16px;
		    padding: 7px 10px;
		    border-radius: 999px;
		    border: 1px solid rgba(87, 255, 164, 0.26);
		    background: rgba(69, 255, 157, 0.12);
		    color: #effff7;
		    font-size: 0.68rem;
		    font-weight: 800;
		    letter-spacing: 0.08em;
		    text-transform: uppercase;
		  }

		  .dashboard-price-top {
		    display: grid;
		    gap: 4px;
		    padding-right: 112px;
		  }

		  .dashboard-price-title {
		    font-size: 1rem;
		    font-weight: 700;
		    color: rgba(222, 245, 233, 0.9);
		  }

		  .dashboard-price-value {
		    font-size: clamp(1.55rem, 2vw, 2rem);
		    font-weight: 800;
		    color: #f5fffb;
		    line-height: 1.05;
		  }

		  .dashboard-price-note {
		    color: #9bffd7;
		    font-weight: 600;
		  }

		  .dashboard-price-list {
		    margin: 0;
		    padding-left: 18px;
		    display: grid;
		    gap: 8px;
		    color: var(--muted);
		    line-height: 1.5;
		  }

		  .dashboard-price-btn {
		    width: 100%;
		    margin-top: auto;
		  }

		  .transactions-history {
		    border-radius: 24px;
		    border: 1px solid rgba(87, 255, 164, 0.14);
		    background:
		      radial-gradient(circle at 12% 12%, rgba(87, 255, 164, 0.06), transparent 28%),
		      linear-gradient(180deg, rgba(22, 30, 40, 0.94), rgba(14, 23, 29, 0.94));
		    box-shadow:
		      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
		      0 18px 40px rgba(0, 0, 0, 0.24);
		    padding: 22px 22px 28px;
		  }

		  .transactions-history-title-wrap {
		    display: flex;
		    align-items: center;
		    gap: 16px;
		    margin-bottom: 22px;
		  }

		  .transactions-history-icon,
		  .transactions-empty-icon {
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    color: #71f2da;
		    background: rgba(50, 121, 114, 0.2);
		    box-shadow: inset 0 0 0 1px rgba(113, 242, 218, 0.06);
		  }

		  .transactions-history-icon {
		    width: 46px;
		    height: 46px;
		    border-radius: 16px;
		  }

		  .transactions-history-icon svg,
		  .transactions-empty-icon svg {
		    width: 24px;
		    height: 24px;
		  }

		  .transactions-history-title {
		    font-size: 1.1rem;
		    line-height: 1.2;
		    color: rgba(232, 239, 241, 0.9);
		  }

		  .transactions-table {
		    min-width: 0;
		  }

		  .transactions-table-head {
		    border-bottom: 1px solid rgba(87, 255, 164, 0.12);
		  }

		  .transactions-table-row {
		    display: grid;
		    grid-template-columns: minmax(220px, 1.6fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 0.95fr);
		    gap: 18px;
		    align-items: center;
		  }

		  .transactions-table-row-head {
		    padding: 0 14px 14px;
		  }

		  .transactions-table-row:not(.transactions-table-row-head) {
		    padding: 16px 14px;
		    border-bottom: 1px solid rgba(87, 255, 164, 0.08);
		  }

		  .transactions-table-row:not(.transactions-table-row-head):last-child {
		    border-bottom: 0;
		  }

		  .transactions-table-cell {
		    min-width: 0;
		    font-size: 0.96rem;
		    font-weight: 700;
		    color: rgba(230, 236, 238, 0.84);
		  }

		  .transactions-table-row:not(.transactions-table-row-head) .transactions-table-cell {
		    font-weight: 600;
		    color: rgba(221, 233, 237, 0.88);
		  }

		  .transactions-table-row:not(.transactions-table-row-head) .transactions-table-cell::before {
		    content: none;
		  }

		  .transactions-table-body {
		    padding-top: 2px;
		  }

		  .transactions-empty {
		    margin-top: 2px;
		    min-height: 360px;
		    border-radius: 24px;
		    border: 1px solid rgba(87, 255, 164, 0.12);
		    background:
		      radial-gradient(circle at 20% 20%, rgba(106, 173, 215, 0.08), transparent 34%),
		      linear-gradient(180deg, rgba(28, 38, 47, 0.94), rgba(18, 26, 31, 0.96));
		    display: grid;
		    place-items: center;
		    text-align: center;
		    padding: 34px 20px;
		  }

		  .transactions-empty-icon {
		    width: 92px;
		    height: 92px;
		    border-radius: 32px;
		    margin: 0 auto 24px;
		  }

		  .transactions-empty-title {
		    font-size: clamp(1.4rem, 2vw, 2rem);
		    line-height: 1.2;
		    color: rgba(233, 238, 240, 0.9);
		    margin-bottom: 14px;
		  }

		  .transactions-empty-copy {
		    max-width: 560px;
		    color: rgba(156, 170, 176, 0.86);
		    font-size: 1rem;
		    line-height: 1.7;
		  }

		  .dashboard-profile {
		    display: grid;
		    gap: 8px;
		  }

		  .dashboard-profile-row {
		    border-radius: 12px;
		    border: 1px solid rgba(87, 255, 164, 0.18);
		    background: rgba(5, 16, 12, 0.72);
		    padding: 12px 14px;
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    gap: 14px;
		  }

		  .dashboard-profile-row span {
		    color: var(--muted);
		  }

		  .dashboard-profile-row strong {
		    overflow-wrap: anywhere;
		    text-align: right;
		  }

		  @media (max-width: 1240px) {
		    .dashboard-shell {
		      width: min(100%, calc(100% - 24px));
		      grid-template-columns: 262px minmax(0, 1fr);
		    }

		    .dashboard-panel-head h3 {
		      font-size: 1.4rem;
		    }
		  }

		  @media (max-width: 1040px) {
		    .dashboard-metrics {
		      grid-template-columns: repeat(2, minmax(0, 1fr));
		    }

		    .dashboard-actions,
		    .dashboard-placeholder-grid {
		      grid-template-columns: repeat(2, minmax(0, 1fr));
		    }

		    .dashboard-subscription-grid {
		      grid-template-columns: repeat(2, minmax(0, 1fr));
		    }

		    .transactions-table-row {
		      grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(110px, 1fr));
		      gap: 14px;
		    }
		  }

		  @media (max-width: 920px) {
		    .dashboard-shell {
		      grid-template-columns: minmax(0, 1fr);
		      grid-template-areas:
		        "header"
		        "main";
		      width: min(100%, calc(100% - 16px));
		      margin: 10px auto 22px;
		      z-index: auto;
		    }

		    .dashboard-overlay {
		      background: rgba(1, 7, 5, 0.42);
		      -webkit-backdrop-filter: blur(5px);
		      backdrop-filter: blur(5px);
		    }

		    .dashboard-header {
		      padding: 14px;
		      gap: 14px;
		    }

		    .dashboard-header-main {
		      gap: 12px;
		    }

		    .dashboard-sidebar {
		      position: fixed;
		      top: 0;
		      left: 0;
		      display: flex;
		      flex-direction: column;
		      width: min(90vw, 340px);
		      height: 100vh;
		      min-height: 100vh;
		      max-height: none;
		      border-radius: 0 22px 22px 0;
		      transform: translateX(-104%);
		      transition: transform 0.28s ease;
		      z-index: 52;
		      gap: 16px;
		      padding: 14px 12px calc(16px + env(safe-area-inset-bottom));
		      overflow: auto;
		      overscroll-behavior: contain;
		      -webkit-overflow-scrolling: touch;
		    }

		    .dashboard-sidebar-mobile-bar {
		      display: flex;
		    }

		    .dashboard-sidebar-close {
		      display: inline-flex;
		    }

		    .dashboard-burger {
		      display: inline-flex;
		    }

		    .dashboard-nav {
		      gap: 7px;
		    }

		    .dashboard-nav-link {
		      min-height: 46px;
		      padding: 10px 11px;
		    }

		    .dashboard-sidebar-foot {
		      padding: 11px;
		      gap: 8px;
		    }

		    .dashboard-main,
		    .dashboard-view-section {
		      gap: 16px;
		    }

		    .dashboard-nav-toggle:checked ~ .dashboard-overlay {
		      opacity: 1;
		      pointer-events: auto;
		    }

		    .dashboard-nav-toggle:checked ~ .dashboard-shell .dashboard-sidebar {
		      transform: translateX(0);
		    }

		    .dashboard-support-link {
		      display: none;
		    }
		  }

		  @media (max-width: 640px) {
		    .dashboard-shell {
		      gap: 12px;
		      width: min(100%, calc(100% - 12px));
		      margin: 8px auto 18px;
		    }

		    .dashboard-header {
		      flex-wrap: wrap;
		      align-items: flex-start;
		      gap: 10px;
		      padding: 11px 12px;
		      border-radius: 18px;
		    }

		    .dashboard-header-main {
		      width: 100%;
		      justify-content: space-between;
		      gap: 10px;
		    }

		    .dashboard-brand {
		      gap: 8px;
		      font-size: 0.86rem;
		      letter-spacing: 0.06em;
		    }

		    .dashboard-brand-logo {
		      width: 30px;
		      height: 30px;
		    }

		    .dashboard-burger {
		      width: 38px;
		      height: 38px;
		      border-radius: 11px;
		    }

		    .dashboard-burger span {
		      width: 16px;
		    }

		    .dashboard-header-right {
		      width: 100%;
		      justify-content: flex-end;
		      gap: 8px;
		    }

		    .dashboard-plan-chip {
		      padding: 7px 10px;
		      font-size: 0.68rem;
		      letter-spacing: 0.04em;
		    }

		    .dashboard-avatar {
		      width: 32px;
		      height: 32px;
		      font-size: 0.84rem;
		    }

		    .dashboard-sidebar {
		      width: min(92vw, 320px);
		      gap: 14px;
		      padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
		      border-radius: 0 18px 18px 0;
		    }

		    .dashboard-sidebar-mobile-bar {
		      padding-bottom: 2px;
		    }

		    .dashboard-sidebar-close {
		      width: 38px;
		      height: 38px;
		      border-radius: 11px;
		    }

		    .dashboard-nav {
		      gap: 6px;
		    }

		    .dashboard-nav-link {
		      gap: 10px;
		      min-height: 44px;
		      padding: 9px 10px;
		      border-radius: 13px;
		      font-size: 0.95rem;
		    }

		    .dashboard-nav-text {
		      line-height: 1.35;
		    }

		    .dashboard-nav-icon {
		      width: 26px;
		      height: 26px;
		      border-radius: 8px;
		    }

		    .dashboard-nav-badge {
		      padding: 4px 8px;
		      font-size: 0.64rem;
		    }

		    .dashboard-nav-link.is-soon {
		      flex-wrap: wrap;
		      align-items: flex-start;
		    }

		    .dashboard-nav-link.is-soon .dashboard-nav-text {
		      flex-basis: calc(100% - 36px);
		      padding-top: 2px;
		    }

		    .dashboard-nav-link.is-soon .dashboard-nav-badge {
		      margin-left: 36px;
		      margin-top: 4px;
		    }

		    .dashboard-sidebar-foot {
		      padding: 11px;
		      border-radius: 14px;
		    }

		    .dashboard-foot-title {
		      font-size: 0.68rem;
		    }

		    .dashboard-foot-copy {
		      font-size: 0.79rem;
		    }

		    .dashboard-main,
		    .dashboard-view-section {
		      gap: 12px;
		    }

		    .dashboard-promo {
		      padding: 16px 14px 18px;
		      border-radius: 20px;
		      gap: 11px;
		    }

		    .dashboard-promo-badge {
		      padding: 5px 10px;
		      font-size: 0.68rem;
		    }

		    .dashboard-promo h2 {
		      font-size: clamp(1.4rem, 7.5vw, 1.8rem);
		    }

		    .dashboard-promo p {
		      font-size: 0.94rem;
		      line-height: 1.58;
		    }

		    .dashboard-promo-actions {
		      width: 100%;
		      display: grid;
		      grid-template-columns: minmax(0, 1fr);
		      align-items: start;
		      gap: 10px;
		    }

		    .dashboard-promo-btn {
		      width: 100%;
		      min-width: 0;
		      min-height: 46px;
		    }

		    .dashboard-price {
		      width: 100%;
		      font-size: 1.08rem;
		    }

		    .dashboard-panel {
		      padding: 16px 14px 18px;
		      border-radius: 18px;
		    }

		    .dashboard-panel-head {
		      margin-bottom: 12px;
		    }

		    .dashboard-panel-head h3 {
		      font-size: 1.22rem;
		    }

		    .dashboard-panel-head p {
		      font-size: 0.92rem;
		    }

		    .dashboard-metrics,
		    .dashboard-actions,
		    .dashboard-placeholder-grid {
		      grid-template-columns: minmax(0, 1fr);
		    }

		    .dashboard-subscription-grid {
		      grid-template-columns: minmax(0, 1fr);
		    }

		    .dashboard-day-pass,
		    .dashboard-price-card {
		      padding: 14px;
		    }

		    .dashboard-day-pass-copy {
		      font-size: 0.9rem;
		    }

		    .dashboard-day-pass-btn {
		      width: 100%;
		      justify-self: stretch;
		    }

		    .dashboard-price-card {
		      min-height: auto;
		      gap: 12px;
		    }

		    .dashboard-price-card.is-popular,
		    .dashboard-price-card.is-popular:hover,
		    .dashboard-price-card:hover {
		      transform: none;
		    }

		    .dashboard-price-card.is-popular::before {
		      top: 14px;
		      right: 14px;
		    }

		    .dashboard-price-top {
		      padding-right: 96px;
		    }

		    .dashboard-price-value {
		      font-size: 1.42rem;
		    }

		    .dashboard-price-list {
		      gap: 7px;
		      font-size: 0.9rem;
		    }

		    .dashboard-metric,
		    .dashboard-placeholder-card {
		      padding: 14px;
		    }

		    .dashboard-metric strong {
		      font-size: 1.08rem;
		    }

		    .dashboard-placeholder-title {
		      font-size: 1rem;
		    }

		    .dashboard-placeholder-copy {
		      font-size: 0.9rem;
		      line-height: 1.52;
		    }

		    .dashboard-section-actions {
		      display: grid;
		      grid-template-columns: minmax(0, 1fr);
		      gap: 10px;
		      margin-top: 14px;
		    }

		    .dashboard-action {
		      width: 100%;
		      min-height: 48px;
		      padding: 12px;
		    }

		    .transactions-history {
		      padding: 16px 12px 18px;
		      border-radius: 20px;
		    }

		    .transactions-history-title-wrap {
		      align-items: flex-start;
		      gap: 12px;
		      margin-bottom: 18px;
		    }

		    .transactions-history-icon {
		      width: 40px;
		      height: 40px;
		      border-radius: 14px;
		    }

		    .transactions-history-title {
		      font-size: 1rem;
		    }

		    .transactions-table-head {
		      display: none;
		    }

		    .transactions-table-row:not(.transactions-table-row-head) {
		      grid-template-columns: minmax(0, 1fr);
		      gap: 10px;
		      padding: 16px;
		      border: 1px solid rgba(87, 255, 164, 0.1);
		      border-radius: 18px;
		      background: rgba(17, 26, 33, 0.9);
		    }

		    .transactions-table-row:not(.transactions-table-row-head) + .transactions-table-row:not(.transactions-table-row-head) {
		      margin-top: 10px;
		    }

		    .transactions-table-row:not(.transactions-table-row-head) .transactions-table-cell {
		      display: flex;
		      align-items: baseline;
		      justify-content: space-between;
		      gap: 12px;
		    }

		    .transactions-table-row:not(.transactions-table-row-head) .transactions-table-cell::before {
		      content: attr(data-label);
		      display: inline-block;
		      flex-shrink: 0;
		      color: rgba(131, 201, 164, 0.82);
		      font-size: 0.7rem;
		      font-weight: 800;
		      letter-spacing: 0.08em;
		      text-transform: uppercase;
		    }

		    .transactions-empty {
		      min-height: 280px;
		      padding: 24px 14px;
		      border-radius: 20px;
		    }

		    .transactions-empty-icon {
		      width: 78px;
		      height: 78px;
		      border-radius: 26px;
		      margin-bottom: 20px;
		    }

		    .transactions-empty-copy {
		      font-size: 0.95rem;
		      line-height: 1.6;
		    }

		    .dashboard-profile-row {
		      display: grid;
		      justify-content: start;
		      padding: 12px;
		      gap: 6px;
		    }

		    .dashboard-profile-row span {
		      font-size: 0.9rem;
		    }

		    .dashboard-profile-row strong {
		      text-align: left;
		      font-size: 0.98rem;
		    }
		  }

		  @media (max-width: 420px) {
		    .dashboard-header-right {
		      gap: 6px;
		    }

		    .dashboard-plan-chip {
		      padding: 6px 8px;
		      font-size: 0.62rem;
		    }

		    .dashboard-avatar {
		      width: 30px;
		      height: 30px;
		      font-size: 0.78rem;
		    }

		    .dashboard-brand {
		      font-size: 0.8rem;
		    }

		    .dashboard-promo h2 {
		      font-size: 1.32rem;
		    }
		  }

		  body.cabinet-dashboard {
		    min-height: 100vh;
		  }

		  body.cabinet-dashboard::before {
		    mask-image: none;
		    opacity: 0.42;
		  }

		  body.cabinet-dashboard .rain {
		    opacity: 0.14;
		  }

		  html.dashboard-nav-open,
		  html.dashboard-nav-open body {
		    overflow: hidden;
		  }

		  .dashboard-overlay {
		    background: rgba(1, 7, 5, 0.74);
		    backdrop-filter: blur(5px);
		  }

		  .dashboard-shell {
		    position: relative;
		    z-index: 1;
		    display: grid;
		    grid-template-columns: 300px minmax(0, 1fr);
		    grid-template-areas: none;
		    align-items: start;
		    gap: 20px;
		    width: min(1480px, calc(100% - 40px));
		    margin: 20px auto 30px;
		  }

		  .dashboard-sidebar {
		    grid-area: auto;
		    position: sticky;
		    top: 20px;
		    display: flex;
		    flex-direction: column;
		    gap: 18px;
		    min-height: calc(100vh - 40px);
		    padding: 20px 16px 18px;
		    border: 1px solid rgba(87, 255, 164, 0.14);
		    border-radius: 28px;
		    background:
		      radial-gradient(circle at 14% 16%, rgba(78, 255, 184, 0.08), transparent 30%),
		      radial-gradient(circle at 88% 88%, rgba(77, 118, 255, 0.12), transparent 34%),
		      rgba(7, 14, 11, 0.9);
		    box-shadow:
		      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
		      0 20px 48px rgba(0, 0, 0, 0.34);
		  }

		  .dashboard-sidebar-mobile-bar {
		    display: none;
		    justify-content: flex-end;
		  }

		  .dashboard-brand {
		    display: inline-flex;
		    align-items: center;
		    gap: 12px;
		    color: var(--text);
		    text-decoration: none;
		    font-weight: 800;
		    letter-spacing: 0.08em;
		    text-transform: uppercase;
		  }

		  .dashboard-brand-side {
		    padding: 2px 6px 18px;
		    border-bottom: 1px solid rgba(87, 255, 164, 0.12);
		  }

		  .dashboard-nav {
		    display: flex;
		    flex: 1;
		    flex-direction: column;
		    gap: 22px;
		  }

		  .dashboard-nav-section {
		    display: grid;
		    gap: 8px;
		  }

		  .dashboard-nav-section-secondary {
		    margin-top: auto;
		    padding-top: 18px;
		    border-top: 1px solid rgba(87, 255, 164, 0.12);
		  }

		  .dashboard-nav-group-title {
		    padding: 0 6px 6px;
		    color: rgba(131, 201, 164, 0.72);
		    font-size: 0.76rem;
		    font-weight: 800;
		    letter-spacing: 0.12em;
		    text-transform: uppercase;
		  }

		  .dashboard-nav-link {
		    display: flex;
		    align-items: center;
		    gap: 12px;
		    width: 100%;
		    min-height: 50px;
		    padding: 12px;
		    border: 1px solid transparent;
		    border-radius: 16px;
		    appearance: none;
		    background: transparent;
		    color: rgba(219, 244, 232, 0.84);
		    font: inherit;
		    text-align: left;
		    cursor: pointer;
		    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
		  }

		  .dashboard-nav-link:hover {
		    transform: translateY(-1px);
		    border-color: rgba(87, 255, 164, 0.22);
		    background: rgba(11, 26, 19, 0.84);
		    color: #e7fff2;
		  }

		  .dashboard-nav-link.is-active {
		    border-color: rgba(87, 255, 164, 0.28);
		    background: linear-gradient(90deg, rgba(28, 78, 57, 0.8), rgba(14, 35, 27, 0.92));
		    color: #9effd6;
		    box-shadow: inset 3px 0 0 rgba(110, 255, 209, 0.92);
		  }

		  .dashboard-nav-link.is-soon {
		    border-color: rgba(87, 255, 164, 0.1);
		    background: rgba(8, 20, 15, 0.52);
		    color: rgba(219, 244, 232, 0.52);
		    cursor: default;
		    transform: none;
		  }

		  .dashboard-nav-link.is-soon:hover {
		    border-color: rgba(87, 255, 164, 0.1);
		    background: rgba(8, 20, 15, 0.52);
		    color: rgba(219, 244, 232, 0.52);
		  }

		  .dashboard-nav-link.is-soon .dashboard-nav-icon,
		  .dashboard-nav-link.is-soon .dashboard-nav-text {
		    filter: blur(1.3px);
		  }

		  .dashboard-nav-link-static,
		  .dashboard-nav-link-static:hover {
		    cursor: not-allowed;
		    transform: none;
		    color: rgba(219, 244, 232, 0.74);
		    border-color: rgba(87, 255, 164, 0.1);
		    background: rgba(8, 20, 15, 0.46);
		  }

		  .dashboard-nav-link-static[disabled] {
		    opacity: 0.72;
		  }

		  .dashboard-logout-form {
		    display: block;
		    margin: 0;
		  }

		  .dashboard-logout-button {
		    color: rgba(255, 218, 218, 0.86);
		    font: inherit;
		    font-size: inherit;
		    font-weight: inherit;
		    letter-spacing: inherit;
		    line-height: inherit;
		  }

		  .dashboard-logout-button:hover {
		    border-color: rgba(255, 112, 112, 0.24);
		    background: rgba(48, 14, 14, 0.5);
		    color: #ffe6e6;
		  }

		  .dashboard-nav-icon {
		    width: 30px;
		    height: 30px;
		    border-radius: 10px;
		    border: 1px solid rgba(87, 255, 164, 0.18);
		    background: rgba(9, 24, 17, 0.78);
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    font-size: 0.92rem;
		    flex-shrink: 0;
		  }

		  .dashboard-nav-text {
		    min-width: 0;
		    flex: 1;
		    line-height: 1.35;
		  }

		  .dashboard-nav-badge {
		    margin-left: auto;
		    padding: 5px 9px;
		    border-radius: 999px;
		    border: 1px solid rgba(255, 255, 255, 0.08);
		    background: rgba(255, 255, 255, 0.06);
		    color: #d9ece3;
		    font-size: 0.66rem;
		    font-weight: 800;
		    letter-spacing: 0.08em;
		    text-transform: uppercase;
		    flex-shrink: 0;
		  }

		  .dashboard-sidebar-close {
		    background: rgba(6, 19, 13, 0.82);
		  }

		  .dashboard-workspace {
		    display: grid;
		    grid-template-rows: auto 1fr;
		    min-width: 0;
		    min-height: calc(100vh - 40px);
		    border: 1px solid rgba(87, 255, 164, 0.14);
		    border-radius: 30px;
		    background:
		      radial-gradient(circle at 92% 14%, rgba(77, 118, 255, 0.1), transparent 26%),
		      radial-gradient(circle at 10% 10%, rgba(78, 255, 184, 0.06), transparent 28%),
		      rgba(7, 14, 11, 0.9);
		    box-shadow:
		      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
		      0 22px 52px rgba(0, 0, 0, 0.34);
		    overflow: hidden;
		  }

		  .dashboard-toolbar {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    gap: 18px;
		    padding: 22px 26px;
		    border-bottom: 1px solid rgba(87, 255, 164, 0.12);
		    background: rgba(12, 18, 16, 0.42);
		    backdrop-filter: blur(14px);
		  }

		  .dashboard-toolbar-main {
		    display: flex;
		    align-items: center;
		    gap: 16px;
		    min-width: 0;
		  }

		  .dashboard-toolbar-copy {
		    display: grid;
		    gap: 5px;
		    min-width: 0;
		  }

		  .dashboard-toolbar-label {
		    color: rgba(131, 201, 164, 0.72);
		    font-size: 0.74rem;
		    font-weight: 800;
		    letter-spacing: 0.12em;
		    text-transform: uppercase;
		  }

		  .dashboard-toolbar-title {
		    font-size: clamp(1.8rem, 3vw, 2.45rem);
		    line-height: 1.05;
		    letter-spacing: -0.02em;
		  }

		  .dashboard-toolbar-actions {
		    display: flex;
		    align-items: center;
		    gap: 10px;
		    flex-wrap: wrap;
		    justify-content: flex-end;
		  }

		  .dashboard-toolbar-link,
		  .dashboard-toolbar-primary {
		    min-height: 48px;
		    padding-inline: 20px;
		    border-radius: 999px;
		  }

		  .dashboard-toolbar-primary {
		    min-width: 236px;
		  }

		  .dashboard-avatar {
		    width: 40px;
		    height: 40px;
		    border-radius: 50%;
		    border: 1px solid rgba(87, 255, 164, 0.28);
		    background: rgba(9, 27, 20, 0.94);
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    color: #8fffd4;
		    font-weight: 800;
		    text-transform: uppercase;
		    flex-shrink: 0;
		  }

		  .dashboard-burger {
		    display: none;
		  }

		  .dashboard-main {
		    grid-area: auto;
		    display: block;
		    padding: 24px;
		    min-width: 0;
		  }

		  .dashboard-view-section {
		    display: none;
		    align-content: start;
		    gap: 18px;
		    min-width: 0;
		  }

		  .dashboard-view-section.is-active {
		    display: grid;
		  }

		  .dashboard-summary-grid {
		    display: grid;
		    grid-template-columns: repeat(3, minmax(0, 1fr));
		    gap: 16px;
		  }

		  .dashboard-summary-card {
		    position: relative;
		    min-height: 170px;
		    display: grid;
		    gap: 10px;
		    align-content: end;
		    padding: 22px;
		    border-radius: 24px;
		    border: 1px solid rgba(87, 255, 164, 0.12);
		    background:
		      radial-gradient(circle at 100% 0%, rgba(87, 255, 164, 0.08), transparent 38%),
		      linear-gradient(180deg, rgba(13, 19, 17, 0.94), rgba(16, 24, 21, 0.88));
		    overflow: hidden;
		  }

		  .dashboard-summary-card::before {
		    content: "";
		    position: absolute;
		    right: -26px;
		    bottom: -38px;
		    width: 180px;
		    height: 180px;
		    border-radius: 50%;
		    background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 64%);
		    pointer-events: none;
		  }

		  .dashboard-summary-card > :not(.dashboard-summary-status-art) {
		    position: relative;
		    z-index: 1;
		  }

		  .dashboard-summary-status-art {
		    position: absolute;
		    z-index: 0;
		    right: -18px;
		    top: 12px;
		    width: min(52%, 146px);
		    aspect-ratio: 1 / 1;
		    background:
		      radial-gradient(circle at 42% 32%, rgba(230, 255, 241, 0.72), rgba(69, 255, 157, 0.58) 42%, rgba(19, 200, 108, 0.18) 72%, rgba(19, 200, 108, 0.04) 100%);
		    -webkit-mask: var(--icon-url) center / contain no-repeat;
		    mask: var(--icon-url) center / contain no-repeat;
		    opacity: 0;
		    filter:
		      drop-shadow(0 0 12px rgba(199, 255, 226, 0.28))
		      drop-shadow(0 0 28px rgba(69, 255, 157, 0.2));
		    mix-blend-mode: screen;
		    pointer-events: none;
		    user-select: none;
		  }

		  .dashboard-summary-inactive-art {
		    background:
		      radial-gradient(circle at 42% 32%, rgba(255, 226, 232, 0.74), rgba(255, 112, 136, 0.5) 42%, rgba(255, 68, 101, 0.18) 72%, rgba(255, 68, 101, 0.04) 100%);
		    filter:
		      drop-shadow(0 0 12px rgba(255, 188, 200, 0.32))
		      drop-shadow(0 0 30px rgba(255, 84, 118, 0.26));
		  }

		  .dashboard-summary-expires-art {
		    background:
		      radial-gradient(circle at 42% 32%, rgba(228, 255, 244, 0.66), rgba(116, 242, 196, 0.46) 42%, rgba(48, 188, 148, 0.18) 72%, rgba(48, 188, 148, 0.04) 100%);
		    filter:
		      drop-shadow(0 0 12px rgba(198, 255, 230, 0.24))
		      drop-shadow(0 0 28px rgba(76, 220, 170, 0.18));
		    opacity: 0.2;
		  }

		  .dashboard-summary-card.is-success .dashboard-summary-success-art {
		    opacity: 0.24;
		  }

		  .dashboard-summary-card.is-empty .dashboard-summary-inactive-art,
		  .dashboard-summary-card.is-muted .dashboard-summary-inactive-art,
		  .dashboard-summary-card.is-error .dashboard-summary-inactive-art {
		    opacity: 0.24;
		  }

		  .dashboard-summary-label {
		    color: rgba(131, 201, 164, 0.76);
		    font-size: 0.78rem;
		    font-weight: 700;
		    letter-spacing: 0.06em;
		    text-transform: uppercase;
		  }

		  .dashboard-summary-value {
		    font-size: clamp(1.5rem, 2.4vw, 2.4rem);
		    line-height: 1.1;
		    overflow-wrap: anywhere;
		  }

		  .dashboard-summary-note {
		    color: var(--muted);
		    line-height: 1.5;
		  }

		  .dashboard-summary-card.is-success {
		    border-color: rgba(87, 255, 164, 0.2);
		    box-shadow: inset 0 0 0 1px rgba(87, 255, 164, 0.04);
		  }

		  .dashboard-summary-card.is-pending {
		    border-color: rgba(255, 219, 122, 0.2);
		  }

		  .dashboard-summary-card.is-error,
		  .dashboard-summary-card.is-empty,
		  .dashboard-summary-card.is-muted {
		    border-color: rgba(255, 255, 255, 0.1);
		  }

		  .dashboard-connection-stack {
		    display: grid;
		    gap: 18px;
		  }

		  .dashboard-connection-card {
		    display: grid;
		    gap: 18px;
		    padding: 24px;
		    border-radius: 26px;
		    border: 1px solid rgba(87, 255, 164, 0.12);
		    background:
		      radial-gradient(circle at 88% 16%, rgba(77, 118, 255, 0.08), transparent 24%),
		      linear-gradient(180deg, rgba(15, 21, 19, 0.94), rgba(12, 19, 16, 0.9));
		  }

		  .dashboard-connection-card.is-success {
		    border-color: rgba(87, 255, 164, 0.22);
		  }

		  .dashboard-connection-card.is-error {
		    border-color: rgba(255, 112, 112, 0.24);
		    background:
		      radial-gradient(circle at 88% 16%, rgba(255, 94, 94, 0.08), transparent 24%),
		      linear-gradient(180deg, rgba(22, 16, 16, 0.94), rgba(14, 17, 15, 0.9));
		  }

		  .dashboard-connection-top {
		    display: flex;
		    align-items: flex-start;
		    justify-content: space-between;
		    gap: 20px;
		  }

		  .dashboard-connection-heading {
		    display: flex;
		    align-items: center;
		    gap: 12px;
		    flex-wrap: wrap;
		    margin-bottom: 8px;
		  }

		  .dashboard-connection-title {
		    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
		    line-height: 1.1;
		    margin-bottom: 0;
		  }

		  .dashboard-connection-status,
		  .transactions-status,
		  .dashboard-profile-status {
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    width: fit-content;
		    border-radius: 999px;
		    padding: 6px 10px;
		    font-size: 0.72rem;
		    font-weight: 800;
		    letter-spacing: 0.08em;
		    line-height: 1;
		    text-transform: uppercase;
		    white-space: nowrap;
		  }

		  .dashboard-connection-status.is-success,
		  .transactions-status.is-success,
		  .dashboard-profile-status.is-success {
		    color: #baffdc;
		    border: 1px solid rgba(87, 255, 164, 0.22);
		    background: rgba(87, 255, 164, 0.1);
		  }

		  .dashboard-connection-status.is-pending,
		  .transactions-status.is-pending {
		    color: #ffe8a3;
		    border: 1px solid rgba(255, 219, 122, 0.24);
		    background: rgba(255, 219, 122, 0.1);
		  }

		  .dashboard-connection-status.is-error,
		  .transactions-status.is-error,
		  .dashboard-profile-status.is-error {
		    color: #ffd2d2;
		    border: 1px solid rgba(255, 112, 112, 0.26);
		    background: rgba(255, 112, 112, 0.1);
		  }

		  .dashboard-connection-status.is-muted,
		  .transactions-status.is-muted {
		    color: rgba(226, 241, 234, 0.7);
		    border: 1px solid rgba(255, 255, 255, 0.1);
		    background: rgba(255, 255, 255, 0.06);
		  }

		  .dashboard-connection-copy {
		    max-width: 640px;
		    color: var(--muted);
		    line-height: 1.6;
		  }

		  .dashboard-connection-key {
		    min-width: min(360px, 100%);
		    max-width: 420px;
		    padding: 16px 18px;
		    border-radius: 18px;
		    border: 1px solid rgba(87, 255, 164, 0.12);
		    background: rgba(255, 255, 255, 0.05);
		    color: rgba(220, 236, 227, 0.86);
		    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
		    font-size: 0.92rem;
		    line-height: 1.5;
		    overflow-wrap: anywhere;
		  }

		  .dashboard-connection-key-label {
		    display: block;
		    margin-bottom: 8px;
		    color: rgba(131, 201, 164, 0.82);
		    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		    font-size: 0.72rem;
		    font-weight: 800;
		    letter-spacing: 0.1em;
		    text-transform: uppercase;
		  }

		  .dashboard-connection-key code {
		    display: block;
		    color: inherit;
		    font: inherit;
		    overflow-wrap: anywhere;
		  }

		  .dashboard-connection-actions {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    gap: 12px;
		    flex-wrap: wrap;
		  }

		  .dashboard-connection-secondary,
		  .dashboard-connection-primary,
		  .dashboard-connection-muted {
		    min-height: 56px;
		    min-width: 240px;
		    border-radius: 18px;
		    padding-inline: 20px;
		  }

		  .dashboard-connection-muted {
		    color: rgba(215, 255, 232, 0.62);
		    background: rgba(255, 255, 255, 0.06);
		  }

		  .dashboard-connection-muted[disabled],
		  .dashboard-connection-muted[disabled]:hover {
		    cursor: not-allowed;
		    transform: none;
		    border-color: rgba(87, 255, 164, 0.1);
		    box-shadow: none;
		    opacity: 0.64;
		  }

		  [data-dashboard-copy][disabled] {
		    cursor: wait;
		    opacity: 0.78;
		    transform: none;
		  }

		  .dashboard-panel {
		    display: grid;
		    gap: 18px;
		    padding: 22px;
		    border-radius: 24px;
		    border: 1px solid rgba(87, 255, 164, 0.12);
		    background:
		      radial-gradient(circle at 85% 12%, rgba(77, 118, 255, 0.08), transparent 28%),
		      linear-gradient(180deg, rgba(14, 20, 18, 0.94), rgba(10, 17, 14, 0.9));
		  }

		  .dashboard-panel-highlight {
		    background:
		      radial-gradient(circle at 12% 20%, rgba(87, 255, 164, 0.08), transparent 28%),
		      radial-gradient(circle at 86% 0%, rgba(77, 118, 255, 0.12), transparent 32%),
		      linear-gradient(180deg, rgba(14, 20, 18, 0.94), rgba(10, 17, 14, 0.9));
		  }

		  .dashboard-panel-head {
		    display: grid;
		    gap: 6px;
		  }

		  .dashboard-panel-head h2 {
		    font-size: clamp(1.5rem, 2vw, 2rem);
		    line-height: 1.1;
		  }

		  .dashboard-panel-head p {
		    color: var(--muted);
		    line-height: 1.58;
		    max-width: 760px;
		  }

		  .dashboard-panel-actions {
		    display: flex;
		    align-items: center;
		    gap: 12px;
		    flex-wrap: wrap;
		  }

		  .dashboard-action-wide {
		    min-width: 240px;
		    min-height: 52px;
		    border-radius: 18px;
		  }

		  .dashboard-subscription-layout {
		    display: grid;
		    gap: 16px;
		  }

		  .dashboard-subscription-shell {
		    display: grid;
		    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.78fr);
		    gap: 20px;
		    align-items: start;
		  }

		  .dashboard-subscription-catalog {
		    min-width: 0;
		    display: grid;
		    gap: 20px;
		  }

		  .dashboard-subscription-panel,
		  .dashboard-order-card {
		    border-radius: 24px;
		    border: 1px solid rgba(87, 255, 164, 0.12);
		    background:
		      radial-gradient(circle at 88% 10%, rgba(77, 118, 255, 0.08), transparent 26%),
		      linear-gradient(180deg, rgba(14, 20, 18, 0.94), rgba(10, 17, 14, 0.92));
		    padding: 22px;
		  }

		  .dashboard-plan-list {
		    display: grid;
		    gap: 14px;
		  }

		  .dashboard-plan-option {
		    width: 100%;
		    display: grid;
		    grid-template-columns: 28px minmax(0, 1fr) auto;
		    align-items: center;
		    gap: 18px;
		    padding: 20px 22px;
		    border-radius: 22px;
		    border: 1px solid rgba(87, 255, 164, 0.12);
		    background: rgba(20, 24, 33, 0.88);
		    color: var(--text);
		    appearance: none;
		    text-align: left;
		    cursor: pointer;
		    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
		  }

		  .dashboard-plan-option:hover {
		    transform: translateY(-1px);
		    border-color: rgba(87, 255, 164, 0.24);
		    background: rgba(18, 28, 24, 0.94);
		  }

		  .dashboard-plan-option.is-selected {
		    border-color: rgba(87, 255, 164, 0.32);
		    background:
		      radial-gradient(circle at 100% 0%, rgba(87, 255, 164, 0.12), transparent 32%),
		      rgba(26, 41, 39, 0.94);
		    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
		  }

		  .dashboard-plan-option-check {
		    width: 28px;
		    height: 28px;
		    border-radius: 50%;
		    border: 1px solid rgba(255, 255, 255, 0.12);
		    background: rgba(255, 255, 255, 0.05);
		    position: relative;
		    flex-shrink: 0;
		  }

		  .dashboard-plan-option.is-selected .dashboard-plan-option-check {
		    border-color: rgba(87, 255, 164, 0.5);
		    background: rgba(87, 255, 164, 0.2);
		  }

		  .dashboard-plan-option.is-selected .dashboard-plan-option-check::after {
		    content: "";
		    position: absolute;
		    inset: 7px;
		    border-radius: 50%;
		    background: #ebfff4;
		  }

		  .dashboard-plan-option-main {
		    min-width: 0;
		    display: grid;
		    gap: 10px;
		  }

		  .dashboard-plan-option-title-row {
		    display: flex;
		    align-items: center;
		    gap: 10px;
		    flex-wrap: wrap;
		  }

		  .dashboard-plan-option-title {
		    font-size: 1.2rem;
		    font-weight: 800;
		    line-height: 1.15;
		  }

		  .dashboard-plan-option-badge {
		    padding: 5px 10px;
		    border-radius: 999px;
		    border: 1px solid rgba(255, 255, 255, 0.08);
		    background: rgba(255, 255, 255, 0.06);
		    color: rgba(226, 241, 234, 0.82);
		    font-size: 0.68rem;
		    font-weight: 800;
		    letter-spacing: 0.08em;
		    text-transform: uppercase;
		  }

		  .dashboard-plan-option-badge.is-accent {
		    border-color: rgba(87, 255, 164, 0.22);
		    background: rgba(69, 255, 157, 0.12);
		    color: #dffff1;
		  }

		  .dashboard-plan-option-chips {
		    display: flex;
		    align-items: center;
		    gap: 8px;
		    flex-wrap: wrap;
		  }

		  .dashboard-plan-option-chip {
		    padding: 5px 10px;
		    border-radius: 999px;
		    background: rgba(69, 255, 157, 0.1);
		    border: 1px solid rgba(87, 255, 164, 0.14);
		    color: #8efed4;
		    font-size: 0.74rem;
		    font-weight: 700;
		    letter-spacing: 0.04em;
		  }

		  .dashboard-plan-option-price {
		    display: grid;
		    justify-items: end;
		    gap: 4px;
		    text-align: right;
		    flex-shrink: 0;
		  }

		  .dashboard-plan-option-price-old {
		    color: rgba(196, 203, 214, 0.56);
		    font-size: 0.98rem;
		    text-decoration: line-through;
		  }

		  .dashboard-plan-option-price-current {
		    font-size: clamp(1.5rem, 2vw, 2rem);
		    font-weight: 800;
		    line-height: 1.05;
		  }

		  .dashboard-plan-option-price-note {
		    color: var(--muted);
		    font-size: 0.92rem;
		  }

		  .dashboard-order-card {
		    position: sticky;
		    top: 24px;
		    display: grid;
		    gap: 22px;
		  }

		  .dashboard-order-head {
		    display: grid;
		    gap: 8px;
		  }

		  .dashboard-order-head h2 {
		    font-size: clamp(1.45rem, 1.8vw, 1.85rem);
		    line-height: 1.1;
		  }

		  .dashboard-order-head p {
		    color: var(--muted);
		    line-height: 1.55;
		  }

		  .dashboard-order-summary {
		    display: grid;
		    gap: 14px;
		    padding-bottom: 2px;
		  }

		  .dashboard-order-row {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    gap: 18px;
		    color: var(--muted);
		  }

		  .dashboard-order-row strong {
		    color: var(--text);
		    text-align: right;
		  }

		  .dashboard-order-value-animated {
		    transition: opacity 180ms ease, transform 220ms ease;
		    will-change: opacity, transform;
		  }

		  .dashboard-order-value-animated.is-updating {
		    opacity: 0;
		    transform: translateY(6px);
		  }

		  .dashboard-order-total {
		    display: flex;
		    align-items: flex-end;
		    justify-content: space-between;
		    gap: 16px;
		    padding-top: 18px;
		    border-top: 1px solid rgba(87, 255, 164, 0.12);
		  }

		  .dashboard-order-total-label {
		    display: block;
		    margin-bottom: 6px;
		    color: var(--muted);
		    font-size: 0.82rem;
		    font-weight: 800;
		    letter-spacing: 0.12em;
		    text-transform: uppercase;
		  }

		  .dashboard-order-total-value {
		    font-size: clamp(1.8rem, 2.3vw, 2.5rem);
		    line-height: 1;
		  }

		  .dashboard-order-total-note {
		    color: var(--muted);
		    font-size: 0.95rem;
		    text-align: right;
		  }

		  .dashboard-order-benefits {
		    margin: 0;
		    padding: 0;
		    list-style: none;
		    display: grid;
		    gap: 12px;
		  }

		  .dashboard-order-benefits li {
		    position: relative;
		    padding-left: 30px;
		    line-height: 1.5;
		    color: rgba(223, 236, 229, 0.92);
		  }

		  .dashboard-order-benefits li::before {
		    content: "✓";
		    position: absolute;
		    top: 1px;
		    left: 0;
		    width: 20px;
		    height: 20px;
		    border-radius: 50%;
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    background: rgba(69, 255, 157, 0.18);
		    color: #98ffda;
		    font-size: 0.8rem;
		    font-weight: 800;
		  }

		  .dashboard-order-agreement {
		    display: flex;
		    align-items: flex-start;
		    gap: 12px;
		    color: var(--muted);
		    line-height: 1.5;
		  }

		  .dashboard-order-agreement input {
		    width: 18px;
		    height: 18px;
		    accent-color: #45ff9d;
		    margin-top: 2px;
		    flex-shrink: 0;
		  }

		  .dashboard-order-submit {
		    width: 100%;
		    min-height: 54px;
		    border-radius: 18px;
		  }

		  .dashboard-order-submit[disabled],
		  .dashboard-order-submit.is-waiting {
		    cursor: wait;
		    opacity: 0.78;
		    transform: none;
		  }

		  .dashboard-order-agreement.is-invalid {
		    color: #ffbcc8;
		  }

		  .dashboard-order-agreement.is-invalid input {
		    accent-color: #ff6d8c;
		    filter: drop-shadow(0 0 4px rgba(255, 102, 134, 0.42));
		  }

		  .transactions-history {
		    border-radius: 18px;
		    overflow: hidden;
		  }

		  .transactions-list {
		    display: grid;
		    padding: 4px 2px;
		  }

		  .transactions-item {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    gap: 18px;
		    padding: 18px 0;
		    border-bottom: 1px solid rgba(87, 255, 164, 0.1);
		  }

		  .transactions-item:first-child {
		    padding-top: 0;
		  }

		  .transactions-item:last-child {
		    padding-bottom: 0;
		    border-bottom: 0;
		  }

		  .transactions-item-main {
		    min-width: 0;
		    display: grid;
		    gap: 6px;
		  }

		  .transactions-item-date,
		  .transactions-item-meta {
		    color: var(--muted);
		    font-size: 0.9rem;
		    line-height: 1.4;
		  }

		  .transactions-item-title {
		    color: #e6fff1;
		    font-size: 1.05rem;
		    line-height: 1.35;
		    overflow-wrap: anywhere;
		  }

		  .transactions-item-side {
		    display: grid;
		    justify-items: end;
		    gap: 8px;
		    text-align: right;
		    flex-shrink: 0;
		  }

		  .transactions-item-amount {
		    font-size: 1.14rem;
		    line-height: 1.2;
		  }

		  .transactions-empty {
		    min-height: 360px;
		    display: grid;
		    place-items: center;
		    text-align: center;
		    padding: 34px 20px;
		    border-radius: 22px;
		    border: 1px solid rgba(87, 255, 164, 0.1);
		    background:
		      radial-gradient(circle at 20% 20%, rgba(106, 173, 215, 0.08), transparent 34%),
		      linear-gradient(180deg, rgba(14, 23, 20, 0.92), rgba(10, 17, 14, 0.94));
		  }

		  .transactions-empty-icon {
		    width: 86px;
		    height: 86px;
		    margin: 0 auto 22px;
		    border-radius: 28px;
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    color: #8fffd4;
		    background: rgba(87, 255, 164, 0.08);
		    border: 1px solid rgba(87, 255, 164, 0.12);
		    font-size: 2rem;
		  }

		  .transactions-empty-title {
		    font-size: clamp(1.4rem, 2vw, 2rem);
		    line-height: 1.2;
		    margin-bottom: 12px;
		  }

		  .transactions-empty-copy {
		    max-width: 560px;
		    color: rgba(156, 170, 176, 0.86);
		    font-size: 1rem;
		    line-height: 1.7;
		  }

		  .dashboard-placeholder-grid {
		    display: grid;
		    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
		    gap: 14px;
		  }

		  .dashboard-placeholder-card {
		    display: grid;
		    gap: 10px;
		    min-width: 0;
		    padding: 18px;
		    border-radius: 18px;
		    border: 1px solid rgba(87, 255, 164, 0.12);
		    background: rgba(6, 17, 13, 0.78);
		  }

		  .dashboard-placeholder-label {
		    color: rgba(131, 201, 164, 0.84);
		    font-size: 0.72rem;
		    letter-spacing: 0.1em;
		    text-transform: uppercase;
		  }

		  .dashboard-placeholder-title {
		    font-size: 1.05rem;
		    line-height: 1.35;
		    color: #e6fff1;
		  }

		  .dashboard-placeholder-copy {
		    color: var(--muted);
		    line-height: 1.58;
		    font-size: 0.94rem;
		  }

		  .dashboard-profile {
		    display: grid;
		    gap: 10px;
		  }

		  .dashboard-profile-row {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    gap: 14px;
		    padding: 14px 16px;
		    border-radius: 14px;
		    border: 1px solid rgba(87, 255, 164, 0.14);
		    background: rgba(5, 16, 12, 0.76);
		  }

		  .dashboard-profile-row span {
		    color: var(--muted);
		  }

		  .dashboard-profile-row strong {
		    text-align: right;
		    overflow-wrap: anywhere;
		  }

		  @media (max-width: 1240px) {
		    .dashboard-shell {
		      width: min(100%, calc(100% - 24px));
		      grid-template-columns: 280px minmax(0, 1fr);
		    }

		    .dashboard-summary-grid {
		      grid-template-columns: repeat(2, minmax(0, 1fr));
		    }

		    .dashboard-summary-card:last-child {
		      grid-column: auto;
		    }
		  }

		  @media (max-width: 1040px) {
		    .dashboard-shell {
		      grid-template-columns: 264px minmax(0, 1fr);
		    }

		    .dashboard-connection-top {
		      flex-direction: column;
		    }

		    .dashboard-connection-key {
		      min-width: 0;
		      max-width: none;
		      width: 100%;
		    }

		    .dashboard-subscription-shell {
		      grid-template-columns: minmax(0, 1fr);
		    }

		    .dashboard-order-card {
		      position: static;
		    }

		    .dashboard-placeholder-grid {
		      grid-template-columns: repeat(2, minmax(0, 1fr));
		    }
		  }

		  @media (max-width: 920px) {
		    .dashboard-shell {
		      grid-template-columns: minmax(0, 1fr);
		      width: min(100%, calc(100% - 16px));
		      margin: 10px auto 22px;
		      z-index: auto;
		    }

		    .dashboard-overlay {
		      z-index: 50;
		    }

		    .dashboard-workspace {
		      position: relative;
		      z-index: 1;
		      min-height: auto;
		    }

		    .dashboard-sidebar {
		      position: fixed;
		      top: 0;
		      left: 0;
		      z-index: 52;
		      width: min(90vw, 340px);
		      height: 100dvh;
		      min-height: 100dvh;
		      max-height: 100dvh;
		      border-radius: 0 24px 24px 0;
		      transform: translateX(-104%);
		      transition: transform 0.28s ease;
		      overflow: auto;
		      overscroll-behavior: contain;
		      -webkit-overflow-scrolling: touch;
		      padding: calc(14px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
		    }

		    .dashboard-sidebar-mobile-bar {
		      display: flex;
		    }

		    .dashboard-sidebar-close {
		      display: inline-flex;
		    }

		    .dashboard-burger {
		      width: 42px;
		      height: 42px;
		      border-radius: 12px;
		      border: 1px solid rgba(87, 255, 164, 0.28);
		      background: rgba(8, 23, 16, 0.92);
		      display: inline-flex;
		      align-items: center;
		      justify-content: center;
		      gap: 4px;
		      flex-direction: column;
		      cursor: pointer;
		      flex-shrink: 0;
		    }

		    .dashboard-burger span {
		      width: 17px;
		      height: 2px;
		      border-radius: 99px;
		      background: #7dffd2;
		    }

		    .dashboard-nav-toggle:checked ~ .dashboard-overlay {
		      opacity: 1;
		      pointer-events: auto;
		    }

		    .dashboard-nav-toggle:checked ~ .dashboard-shell .dashboard-sidebar {
		      transform: translateX(0);
		    }
		  }

		  @media (max-width: 720px) {
		    .dashboard-toolbar {
		      flex-wrap: wrap;
		      align-items: flex-start;
		      padding: 18px 18px 16px;
		    }

		    .dashboard-toolbar-main {
		      width: 100%;
		      justify-content: space-between;
		    }

		    .dashboard-toolbar-copy {
		      flex: 1;
		    }

		    .dashboard-toolbar-actions {
		      width: 100%;
		      justify-content: flex-start;
		    }

		    .dashboard-toolbar-primary {
		      min-width: 0;
		      flex: 1 1 220px;
		    }

		    .dashboard-main {
		      padding: 18px;
		    }

		    .dashboard-summary-grid,
		    .dashboard-placeholder-grid {
		      grid-template-columns: minmax(0, 1fr);
		    }

		    .dashboard-summary-card:last-child {
		      grid-column: auto;
		    }

		    .dashboard-connection-actions {
		      display: grid;
		      grid-template-columns: minmax(0, 1fr);
		    }

		    .dashboard-connection-secondary,
		    .dashboard-connection-primary,
		    .dashboard-connection-muted,
		    .dashboard-action-wide {
		      width: 100%;
		      min-width: 0;
		    }

		    .dashboard-plan-option {
		      grid-template-columns: 24px minmax(0, 1fr);
		      align-items: start;
		    }

		    .dashboard-plan-option-price {
		      grid-column: 2;
		      justify-items: start;
		      text-align: left;
		    }

		    .dashboard-order-total {
		      align-items: flex-start;
		      flex-direction: column;
		    }

		    .transactions-item {
		      align-items: flex-start;
		      flex-direction: column;
		    }

		    .transactions-item-side {
		      width: 100%;
		      justify-items: start;
		      text-align: left;
		    }
		  }

		  @media (max-width: 520px) {
		    .dashboard-shell {
		      width: min(100%, calc(100% - 12px));
		      margin: 8px auto 18px;
		    }

		    .dashboard-sidebar {
		      width: min(92vw, 320px);
		      border-radius: 0 20px 20px 0;
		      padding-top: calc(12px + env(safe-area-inset-top));
		    }

		    .dashboard-brand {
		      gap: 10px;
		      font-size: 0.86rem;
		    }

		    .dashboard-brand-side {
		      padding-bottom: 16px;
		    }

		    .dashboard-nav-link {
		      min-height: 46px;
		      padding: 10px;
		      border-radius: 14px;
		      font-size: 0.95rem;
		    }

		    .dashboard-nav-badge {
		      font-size: 0.62rem;
		      padding: 4px 8px;
		    }

		    .dashboard-nav-link.is-soon {
		      display: grid;
		      grid-template-columns: 30px minmax(0, 1fr) auto;
		      align-items: center;
		      gap: 10px;
		    }

		    .dashboard-nav-link.is-soon .dashboard-nav-icon {
		      width: 30px;
		      height: 30px;
		    }

		    .dashboard-nav-link.is-soon .dashboard-nav-text {
		      flex-basis: auto;
		      padding-top: 0;
		    }

		    .dashboard-nav-link.is-soon .dashboard-nav-badge {
		      margin-left: 0;
		      margin-top: 0;
		      justify-self: end;
		    }

		    .dashboard-workspace {
		      border-radius: 22px;
		    }

		    .dashboard-toolbar {
		      padding: 14px 14px 12px;
		    }

		    .dashboard-toolbar-title {
		      font-size: 1.5rem;
		    }

		    .dashboard-toolbar-link,
		    .dashboard-toolbar-primary {
		      min-height: 44px;
		      padding-inline: 16px;
		    }

		    .dashboard-avatar {
		      width: 34px;
		      height: 34px;
		      font-size: 0.84rem;
		    }

		    .dashboard-main {
		      padding: 14px;
		    }

		    .dashboard-panel,
		    .dashboard-summary-card,
		    .dashboard-connection-card,
		    .dashboard-subscription-panel,
		    .dashboard-order-card,
		    .transactions-history,
		    .dashboard-placeholder-card {
		      padding: 16px;
		      border-radius: 20px;
		    }

		    .dashboard-summary-card {
		      min-height: 148px;
		    }

		    .dashboard-summary-status-art {
		      right: -14px;
		      top: 10px;
		      width: min(46%, 112px);
		    }

		    .dashboard-summary-value,
		    .dashboard-plan-option-price-current,
		    .dashboard-order-total-value {
		      font-size: 1.35rem;
		    }

		    .dashboard-connection-title,
		    .dashboard-panel-head h2 {
		      font-size: 1.32rem;
		    }

		    .dashboard-plan-option {
		      gap: 14px;
		      padding: 16px;
		      border-radius: 18px;
		    }

		    .dashboard-plan-option-title {
		      font-size: 1.08rem;
		    }

		    .dashboard-plan-option-chip {
		      font-size: 0.7rem;
		    }

		    .dashboard-order-submit {
		      min-height: 46px;
		    }

		    .dashboard-connection-key {
		      padding: 14px;
		      font-size: 0.86rem;
		    }

		    .dashboard-connection-heading {
		      align-items: flex-start;
		      flex-direction: column;
		      gap: 8px;
		    }

		    .transactions-item {
		      padding: 14px;
		    }

		    .transactions-empty {
		      min-height: 280px;
		      padding: 24px 14px;
		      border-radius: 20px;
		    }

		    .transactions-empty-icon {
		      width: 72px;
		      height: 72px;
		      border-radius: 22px;
		      font-size: 1.6rem;
		    }

		    .dashboard-profile-row {
		      display: grid;
		      justify-content: start;
		      gap: 6px;
		    }

		    .dashboard-profile-row strong {
		      text-align: left;
		    }
		  }

		  @media (max-width: 420px) {
		    .dashboard-toolbar-actions {
		      gap: 8px;
		    }

		    .dashboard-toolbar-link,
		    .dashboard-toolbar-primary {
		      width: 100%;
		    }

		    .dashboard-avatar {
		      display: none;
		    }

		    .transactions-empty-title {
		      font-size: 1.24rem;
		    }
		  }

		  .dashboard-icon-mask {
		    display: inline-block;
		    flex-shrink: 0;
		    background-color: currentColor;
		    -webkit-mask: var(--icon-url) center / contain no-repeat;
		    mask: var(--icon-url) center / contain no-repeat;
		  }

		  .dashboard-icon-mask--nav {
		    width: 18px;
		    height: 18px;
		  }

		  .dashboard-icon-mask--button {
		    width: 18px;
		    height: 18px;
		    opacity: 0.92;
		  }

		  .dashboard-icon-mask--empty {
		    width: 42px;
		    height: 42px;
		    opacity: 0.94;
		  }

		  .dashboard-button-with-icon {
		    gap: 10px;
		  }

		  .dashboard-button-with-icon .dashboard-icon-mask {
		    transform: translateY(-0.5px);
		  }

		  .dashboard-nav-icon {
		    color: inherit;
		  }

		  .dashboard-nav-link.is-active .dashboard-nav-icon {
		    border-color: rgba(87, 255, 164, 0.28);
		    background: rgba(11, 30, 21, 0.92);
		  }

		  .dashboard-nav-link.is-soon .dashboard-nav-icon,
		  .dashboard-nav-link-static .dashboard-nav-icon {
		    opacity: 0.78;
		  }

		  .transactions-empty-icon {
		    color: #8fffd4;
		  }