:root {
      --bg: #07070a;
      --panel: rgba(17, 17, 24, .95);
      --panel-2: rgba(24, 23, 34, .97);
      --line: rgba(133, 126, 170, .18);
      --line-strong: rgba(113, 101, 255, .40);
      --text: #f8f8fb;
      --muted: #9a98aa;
      --violet: #7165ff;
      --violet-2: #4c42c7;
      --lime: #d0ff19;
      --cyan: #15d7e8;
      --green: #4fe5a0;
      --yellow: #ffd96a;
      --danger: #ff7d90;
      --shadow: 0 24px 70px rgba(0,0,0,.34);
      --radius: 24px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--bg); }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 78% -8%, rgba(113,101,255,.24), transparent 30%),
        radial-gradient(circle at 0 88%, rgba(21,215,232,.07), transparent 30%),
        linear-gradient(180deg, #08080c, #060609);
      overflow-x: hidden;
    }

    body.menu-open { overflow: hidden; }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .20;
      background-image:
        linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: linear-gradient(to bottom, black, transparent 88%);
    }

    button, input { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button:disabled { cursor: not-allowed; opacity: .55; transform: none !important; }
    .hidden { display: none !important; }

    .center-screen {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      position: relative;
      z-index: 2;
    }

    .login-card {
      width: min(470px, 100%);
      border: 1px solid var(--line-strong);
      border-radius: 30px;
      padding: 34px;
      text-align: center;
      background:
        radial-gradient(circle at 80% 5%, rgba(113,101,255,.24), transparent 34%),
        linear-gradient(150deg, rgba(28,25,48,.97), rgba(12,12,18,.98));
      box-shadow: var(--shadow);
    }

    .login-logo {
      width: 150px;
      height: 150px;
      object-fit: contain;
      filter: drop-shadow(0 0 30px rgba(113,101,255,.28));
    }

    .login-card h1 {
      margin: 18px 0 9px;
      font-size: 32px;
      letter-spacing: -.045em;
    }

    .login-card p {
      margin: 0 auto 24px;
      max-width: 350px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }

    .loader {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 3px solid rgba(255,255,255,.10);
      border-top-color: var(--cyan);
      animation: spin .8s linear infinite;
      margin: 0 auto 18px;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .shell {
      width: min(1440px, 100%);
      min-height: 100vh;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
      position: relative;
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 26px 20px;
      border-right: 1px solid var(--line);
      background: rgba(6,6,9,.84);
      backdrop-filter: blur(18px);
      z-index: 90;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 2px 8px 28px;
    }

    .brand-logo {
      width: 46px;
      height: 46px;
      object-fit: contain;
      filter: drop-shadow(0 0 18px rgba(113,101,255,.28));
      flex: none;
    }

    .brand-name { font-size: 18px; font-weight: 850; letter-spacing: .08em; }
    .brand-sub { color: var(--muted); font-size: 10px; margin-top: 3px; letter-spacing: .08em; text-transform: uppercase; }

    nav { display: grid; gap: 7px; }

    .nav-item {
      width: 100%;
      border: 1px solid transparent;
      background: transparent;
      color: #aaa8b8;
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 50px;
      padding: 0 14px;
      border-radius: 15px;
      cursor: pointer;
      text-align: left;
      font-weight: 720;
      transition: .18s ease;
    }

    .nav-item:hover { color: var(--text); background: rgba(255,255,255,.035); }
    .nav-item.active {
      color: white;
      border-color: var(--line-strong);
      background: linear-gradient(135deg, rgba(113,101,255,.18), rgba(21,215,232,.05));
      box-shadow: inset 0 0 24px rgba(113,101,255,.05);
    }

    .nav-icon { width: 22px; text-align: center; font-size: 17px; }

    .main { min-width: 0; padding: 24px 32px 60px; }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 26px;
    }

    .title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }

    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid var(--line);
      color: white;
      background: rgba(255,255,255,.035);
      cursor: pointer;
      flex: none;
    }

    .menu-toggle span,
    .menu-toggle::before,
    .menu-toggle::after {
      content: "";
      display: block;
      width: 19px;
      height: 2px;
      margin: 4px auto;
      border-radius: 999px;
      background: white;
    }

    .title-block h1 { margin: 0; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.035em; }
    .title-block p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }

    .account-wrap { display: flex; align-items: center; gap: 9px; }
    .account-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 11px 8px 8px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.025);
    }

    .avatar {
      width: 38px;
      height: 38px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      font-weight: 850;
      color: #071012;
      background: linear-gradient(135deg, var(--lime), var(--cyan));
      box-shadow: 0 0 22px rgba(21,215,232,.18);
    }

    .account-meta strong { display: block; font-size: 12px; }
    .account-meta span { color: var(--muted); font-size: 10px; }

    .icon-button {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.025);
      color: #c7c4d1;
      cursor: pointer;
      font-size: 17px;
    }

    .account-chip .icon-button {
      width: 38px;
      height: 38px;
      margin-left: 2px;
      border-width: 0 0 0 1px;
      border-radius: 0 12px 12px 0;
      background: transparent;
    }

    .page { display: none; animation: enter .24s ease; }
    .page.active { display: block; }

    @keyframes enter {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: 260px;
      padding: 28px;
      border: 1px solid var(--line-strong);
      border-radius: 30px;
      background:
        radial-gradient(circle at 86% 26%, rgba(113,101,255,.25), transparent 24%),
        radial-gradient(circle at 78% 78%, rgba(21,215,232,.08), transparent 24%),
        linear-gradient(135deg, rgba(26,23,47,.96), rgba(12,12,18,.97));
      box-shadow: var(--shadow);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      align-items: center;
      gap: 24px;
      position: relative;
      z-index: 1;
    }

    .hero-logo {
      width: min(100%, 250px);
      max-height: 220px;
      object-fit: contain;
      display: block;
      margin: 0 auto;
      filter: drop-shadow(0 0 28px rgba(113,101,255,.26));
    }

    .status-line {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #dffced;
      background: rgba(79,229,160,.08);
      border: 1px solid rgba(79,229,160,.23);
      padding: 8px 11px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
    }

    .status-line.inactive {
      color: #ffe6ea;
      background: rgba(255,125,144,.07);
      border-color: rgba(255,125,144,.22);
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 12px var(--green);
    }

    .status-line.inactive .status-dot { background: var(--danger); box-shadow: 0 0 12px var(--danger); }

    .hero h2 { margin: 22px 0 10px; font-size: clamp(30px, 4vw, 50px); line-height: 1.02; letter-spacing: -.05em; max-width: 680px; }
    .hero p { max-width: 620px; color: #bbb8c7; line-height: 1.6; margin: 0; font-size: 14px; }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 22px; }

    .btn {
      min-height: 48px;
      border: 0;
      border-radius: 14px;
      padding: 0 17px;
      color: white;
      cursor: pointer;
      font-weight: 800;
      transition: .18s ease;
    }

    .btn:hover,
    .btn:active {
      transform: none;
    }
    .btn-primary { background: linear-gradient(90deg, var(--lime), var(--cyan)); color: #061013; box-shadow: 0 12px 28px rgba(21,215,232,.13); }
    .btn-secondary { border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); }
    .btn-ghost { color: #c8c5d2; border: 1px solid var(--line); background: transparent; }
    .btn-danger { color: #ffe7eb; border: 1px solid rgba(255,125,144,.25); background: rgba(255,125,144,.07); }
    .full { width: 100%; }

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

    .card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 20px;
      background: linear-gradient(155deg, rgba(22,22,31,.96), rgba(13,13,19,.94));
      box-shadow: 0 14px 40px rgba(0,0,0,.15);
    }

    .card-title { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 17px; }
    .card-title h3 { margin: 0; font-size: 15px; }
    .label { color: var(--muted); font-size: 11px; line-height: 1.45; }
    .metric { font-size: 29px; font-weight: 900; letter-spacing: -.045em; margin-top: 6px; }
    .metric small { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0; }

    .progress { height: 8px; margin-top: 15px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
    .progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 16px rgba(113,101,255,.28); }

    .inline-info { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 10px; margin-top: 9px; }

    .balance-card { background: linear-gradient(145deg, rgba(40,34,73,.96), rgba(18,17,27,.96)); border-color: rgba(113,101,255,.3); }
    .balance-number { display: flex; align-items: baseline; gap: 7px; margin-top: 8px; }
    .balance-number strong { font-size: 40px; letter-spacing: -.055em; }
    .balance-number span { font-size: 16px; color: #c8c5d4; }

    .section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 2px 0 18px; }
    .section-head h2 { margin: 0; font-size: 27px; letter-spacing: -.035em; }
    .section-head p { margin: 6px 0 0; color: var(--muted); line-height: 1.5; font-size: 13px; }

    .payment-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; align-items: start; }
    .amount-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 16px; }

    .amount {
      border: 1px solid var(--line);
      color: var(--text);
      text-align: left;
      min-height: 76px;
      padding: 15px;
      border-radius: 17px;
      background: rgba(255,255,255,.025);
      cursor: pointer;
      transition: .18s ease;
    }

    .amount:hover { border-color: var(--line-strong); background: rgba(113,101,255,.06); }
    .amount.selected { border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(208,255,25,.4); background: linear-gradient(145deg, rgba(208,255,25,.055), rgba(21,215,232,.055)); }
    .amount strong { display: block; font-size: 21px; margin-bottom: 4px; }
    .amount span { color: var(--muted); font-size: 10px; }

    .custom-amount {
      width: 100%;
      margin-top: 11px;
      color: white;
      background: rgba(255,255,255,.025);
      border: 1px solid var(--line);
      border-radius: 15px;
      padding: 14px;
      outline: none;
    }

    .custom-amount:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(113,101,255,.07); }

    .method { margin-top: 16px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(113,101,255,.05); display: flex; align-items: center; gap: 13px; }
    .method-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; color: #071012; background: linear-gradient(135deg, var(--lime), var(--cyan)); font-size: 20px; font-weight: 900; }
    .method strong { display: block; font-size: 13px; }
    .method span { color: var(--muted); font-size: 10px; }

    .summary { position: sticky; top: 24px; }
    .summary-row { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
    .summary-row strong { color: white; text-align: right; }
    .summary-total { display: flex; justify-content: space-between; align-items: end; margin: 17px 0; }
    .summary-total strong { font-size: 30px; letter-spacing: -.045em; }

    .secure-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 13px; color: var(--muted); font-size: 10px; line-height: 1.55; }
    .list { display: grid; gap: 8px; }
    .list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .list-row:last-child { border-bottom: 0; }
    .list-row strong { display: block; font-size: 13px; }
    .list-row span { color: var(--muted); font-size: 10px; }

    .badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 850; white-space: nowrap; }
    .badge-green { color: #dffced; border: 1px solid rgba(79,229,160,.22); background: rgba(79,229,160,.08); }
    .badge-purple { color: #e8e5ff; border: 1px solid rgba(113,101,255,.25); background: rgba(113,101,255,.09); }
    .badge-red { color: #ffe6ea; border: 1px solid rgba(255,125,144,.22); background: rgba(255,125,144,.07); }

    .connection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
    .app-card { border: 1px solid var(--line); border-radius: 20px; padding: 18px; background: rgba(255,255,255,.02); }
    .app-logo { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-weight: 900; background: linear-gradient(145deg, rgba(113,101,255,.32), rgba(21,215,232,.13)); border: 1px solid rgba(255,255,255,.08); margin-bottom: 13px; }
    .app-card h3 { margin: 0 0 6px; }
    .app-card p { color: var(--muted); font-size: 11px; line-height: 1.55; min-height: 36px; }

    .toggle { position: relative; width: 48px; height: 28px; border: 0; padding: 0; border-radius: 999px; background: var(--violet); box-shadow: inset 0 0 0 1px rgba(255,255,255,.11); cursor: pointer; flex: none; }
    .toggle::after { content: ""; position: absolute; top: 4px; left: 24px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 3px 9px rgba(0,0,0,.3); transition: .18s ease; }
    .toggle.off { background: rgba(255,255,255,.11); }
    .toggle.off::after { left: 4px; }
    .toggle.busy { opacity: .55; pointer-events: none; }

    .notice { margin-top: 16px; padding: 15px 17px; border-radius: 18px; border: 1px solid rgba(255,217,106,.18); background: rgba(255,217,106,.05); color: #e8dcae; font-size: 11px; line-height: 1.55; }
    .error-box { margin-top: 14px; padding: 14px 16px; border-radius: 16px; color: #ffe6ea; border: 1px solid rgba(255,125,144,.25); background: rgba(255,125,144,.07); font-size: 12px; line-height: 1.55; }

    .empty-state { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 12px; }

    .menu-overlay { display: none; position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); }
    .menu-overlay.open { display: block; }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 220;
      width: min(410px, calc(100vw - 32px));
      padding: 14px 16px;
      border: 1px solid var(--line-strong);
      border-radius: 16px;
      color: var(--text);
      background: rgba(17,17,24,.98);
      box-shadow: 0 18px 50px rgba(0,0,0,.38);
      transform: translateY(18px);
      opacity: 0;
      pointer-events: none;
      transition: transform .18s ease, opacity .18s ease;
      font-size: 12px;
      line-height: 1.5;
    }

    .toast.show { transform: translateY(0); opacity: 1; }
    .toast.error {
      color: #ffe6ea;
      border-color: rgba(255,125,144,.32);
      background: rgba(35,15,20,.98);
    }


    @media (min-width: 981px) {
      .menu-overlay { display: none !important; }
      body.menu-open { overflow: auto; }
    }

    @media (max-width: 980px) {
      .shell { display: block; }
      .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 24px 0 60px rgba(0,0,0,.35); }
      .sidebar.open { transform: translateX(0); }
      .menu-toggle { display: block; }
      .main { padding: 18px 18px 48px; }
      .payment-layout { grid-template-columns: 1fr; }
      .summary { position: static; }
      .hero-grid { grid-template-columns: 1fr; }
      .hero-logo { width: 190px; }
    }

    @media (max-width: 700px) {
      .main { padding: 14px 14px 42px; }
      .topbar { align-items: flex-start; margin-bottom: 16px; }
      .account-chip { padding: 7px; }
      .account-meta { display: none; }
      .hero { padding: 21px; }
      .hero-logo { width: 160px; max-height: 150px; }
      .grid-3, .grid-2, .connection-grid { grid-template-columns: 1fr; }
      .amount-grid { grid-template-columns: 1fr 1fr; }
      .section-head { align-items: flex-start; flex-direction: column; }
    }

    @media (max-width: 430px) {
      .title-block p { display: none; }
      .amount-grid { grid-template-columns: 1fr; }
      .hero-actions { flex-direction: column; }
      .hero-actions .btn { width: 100%; }
      .hero h2 { font-size: 31px; }
      .login-card { padding: 25px 20px; }
    }
  
    /* Кнопка закрытия мобильного меню удалена во всех версиях. */
    #mobileClose,
    .mobile-close {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .platform-tabs {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .platform-tab {
      min-height: 48px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255,255,255,.025);
      color: var(--muted);
      padding: 0 14px;
      cursor: pointer;
      font-weight: 800;
      transition: .18s ease;
    }

    .platform-tab:hover {
      color: white;
      border-color: var(--line-strong);
    }

    .platform-tab.active {
      color: #071012;
      border-color: transparent;
      background: linear-gradient(90deg, var(--lime), var(--cyan));
      box-shadow: 0 12px 26px rgba(21,215,232,.12);
    }

    .connection-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
      gap: 16px;
      margin-bottom: 16px;
    }

    .setup-steps {
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
      counter-reset: setup;
    }

    .setup-steps li {
      counter-increment: setup;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      color: #d9d7e4;
      font-size: 12px;
      line-height: 1.5;
    }

    .setup-steps li::before {
      content: counter(setup);
      width: 30px;
      height: 30px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      color: #071012;
      background: linear-gradient(135deg, var(--lime), var(--cyan));
      font-weight: 900;
    }

    .platform-note {
      min-height: 100%;
      border: 1px solid rgba(113,101,255,.28);
      border-radius: 20px;
      padding: 18px;
      background: linear-gradient(145deg, rgba(40,34,73,.7), rgba(16,16,23,.95));
    }

    .platform-note strong {
      display: block;
      margin-bottom: 8px;
      font-size: 15px;
    }

    .platform-note p {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.6;
    }

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

    .app-card {
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }

    .app-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .app-card-header .app-logo {
      margin-bottom: 0;
      flex: none;
    }

    .app-card h3 {
      margin: 0 0 3px;
    }

    .app-card .app-platform {
      color: var(--muted);
      font-size: 10px;
    }

    .app-card p {
      min-height: 0;
      margin: 0 0 13px;
    }

    .app-steps {
      margin: 0 0 16px;
      padding-left: 18px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.6;
    }

    .app-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 9px;
      margin-top: auto;
    }

    .app-actions .btn,
    .app-actions a.btn {
      width: 100%;
      min-height: 48px;
      display: grid;
      place-items: center;
      text-decoration: none;
      text-align: center;
    }

    /* Все кнопки в разделе подключения одного фирменного цвета. */
    .connection-action {
      background: linear-gradient(90deg, var(--lime), var(--cyan)) !important;
      color: #061013 !important;
      border: 0 !important;
      box-shadow: 0 12px 28px rgba(21,215,232,.13);
    }

    .connection-action:hover {
      filter: brightness(1.04);
    }

    .connection-action:disabled {
      opacity: .46;
      cursor: not-allowed;
      transform: none;
      filter: grayscale(.25);
    }

    @media (max-width: 700px) {
      .platform-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

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

  
    .ui-icon {
      width: 20px;
      height: 20px;
      display: block;
      flex: none;
    }

    .nav-icon {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      flex: none;
      text-align: initial;
      font-size: initial;
    }

    .nav-icon .ui-icon {
      width: 19px;
      height: 19px;
    }

    .avatar .ui-icon,
    .method-icon .ui-icon {
      width: 21px;
      height: 21px;
    }

    .icon-button {
      display: grid;
      place-items: center;
      font-size: initial;
    }

    .icon-button .ui-icon {
      width: 19px;
      height: 19px;
    }

    .secure-note-icon {
      display: grid;
      place-items: center;
      flex: none;
      margin-top: 1px;
    }

    .secure-note-icon .ui-icon {
      width: 15px;
      height: 15px;
    }

    .app-logo .ui-icon {
      width: 25px;
      height: 25px;
    }

    .connection-install {
      color: #e8e6ef !important;
      background: rgba(255,255,255,.035) !important;
      border: 1px solid var(--line-strong) !important;
      box-shadow: none !important;
    }

    .connection-install:hover {
      color: white !important;
      background: rgba(113,101,255,.10) !important;
      border-color: rgba(113,101,255,.55) !important;
      filter: none !important;
    }

    .connection-install:active {
      background: rgba(113,101,255,.15) !important;
    }

  

    .connection-qr {
      color: #e8e6ef !important;
      background: rgba(255,255,255,.025) !important;
      border: 1px solid var(--line) !important;
      box-shadow: none !important;
    }

    .connection-qr:hover {
      color: white !important;
      border-color: rgba(21,215,232,.48) !important;
      background: rgba(21,215,232,.07) !important;
    }

    .connection-subscription-link {
      color: #e8e6ef !important;
      background: rgba(255,255,255,.025) !important;
      border: 1px solid var(--line) !important;
      box-shadow: none !important;
    }

    .connection-subscription-link:hover {
      color: white !important;
      border-color: rgba(113,101,255,.55) !important;
      background: rgba(113,101,255,.09) !important;
    }

    .subscription-link-dialog {
      text-align: left;
    }

    .subscription-link-dialog h3,
    .subscription-link-dialog p,
    .subscription-link-dialog .qr-expiry {
      text-align: center;
    }

    .subscription-link-value {
      display: block;
      width: 100%;
      margin: 0 0 16px;
      padding: 14px;
      overflow-wrap: anywhere;
      word-break: break-word;
      border: 1px solid var(--line-strong);
      border-radius: 14px;
      color: #f0eff7;
      background: rgba(255,255,255,.035);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 11px;
      line-height: 1.65;
      user-select: all;
    }

    .subscription-link-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 9px;
    }

    .subscription-reset-card {
      display: flex;
      flex-direction: column;
    }

    .subscription-reset-description {
      flex: 1;
      margin: 0 0 17px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.65;
    }

    .subscription-reset-dialog .qr-expiry {
      margin-top: -4px;
    }


    .qr-modal {
      position: fixed;
      inset: 0;
      z-index: 260;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(0,0,0,.76);
      backdrop-filter: blur(8px);
    }

    .qr-modal.hidden {
      display: none !important;
    }

    .qr-dialog {
      width: min(440px, 100%);
      border: 1px solid var(--line-strong);
      border-radius: 26px;
      padding: 22px;
      text-align: center;
      background:
        radial-gradient(circle at 80% 0, rgba(113,101,255,.18), transparent 34%),
        linear-gradient(155deg, rgba(24,23,34,.99), rgba(12,12,18,.99));
      box-shadow: 0 28px 80px rgba(0,0,0,.52);
    }

    .qr-dialog h3 {
      margin: 0;
      font-size: 21px;
      letter-spacing: -.025em;
    }

    .qr-dialog p {
      margin: 9px auto 17px;
      max-width: 350px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.6;
    }

    .qr-image-wrap {
      width: min(330px, 100%);
      aspect-ratio: 1;
      margin: 0 auto 17px;
      padding: 14px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 20px;
      background: white;
    }

    .qr-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      image-rendering: pixelated;
    }

    .qr-expiry {
      margin-bottom: 16px;
      color: var(--yellow);
      font-size: 10px;
      line-height: 1.5;
    }

    .qr-dialog-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 9px;
    }

    .site-footer {
      width: 100%;
      margin: 30px 0 0;
      padding: 15px 2px 0;
      border-top: 1px solid rgba(133, 126, 170, .10);
      color: rgba(154, 152, 170, .46);
      text-align: left;
      font-size: 10px;
      line-height: 1.65;
      letter-spacing: .015em;
    }

    .site-footer-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      gap: 4px 8px;
    }

    .site-footer-separator {
      opacity: .55;
    }

    @media (max-width: 700px) {
      .site-footer {
        margin-top: 24px;
        padding-top: 13px;
        font-size: 9px;
      }
    }

  
    /* Убираем только повторные заголовки внутри страниц, не меняя DOM. */
    #payment .section-head > div,
    #connect .section-head > div {
      display: none;
    }

    #payment .section-head,
    #connect .section-head {
      justify-content: flex-end;
      margin-bottom: 16px;
    }

    #bonuses .section-head,
    #history .section-head,
    #support .section-head {
      display: none;
    }

    @media (max-width: 700px) {
      #payment .section-head,
      #connect .section-head {
        justify-content: flex-start;
      }
    }

  
    .faq-layout {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .faq-group {
      padding: 0;
      overflow: hidden;
    }

    .faq-group-head {
      display: flex;
      align-items: flex-start;
      gap: 13px;
      padding: 20px 20px 17px;
      border-bottom: 1px solid var(--line);
      background:
        radial-gradient(circle at 0 0, rgba(113,101,255,.10), transparent 42%),
        rgba(255,255,255,.012);
    }

    .faq-group-head h3 {
      margin: 1px 0 5px;
      font-size: 15px;
    }

    .faq-group-head p {
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.55;
    }

    .faq-group-icon {
      width: 38px;
      height: 38px;
      flex: none;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: #071012;
      background: linear-gradient(135deg, var(--lime), var(--cyan));
      box-shadow: 0 10px 24px rgba(21,215,232,.12);
    }

    .faq-group-icon-svg {
      width: 20px;
      height: 20px;
      display: block;
    }

    .faq-list {
      padding: 0 20px;
    }

    .faq-item {
      border-bottom: 1px solid var(--line);
    }

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

    .faq-item summary {
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 13px 0;
      cursor: pointer;
      color: #f2f0f7;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.4;
      list-style: none;
      user-select: none;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary:hover {
      color: white;
    }

    .faq-chevron {
      width: 17px;
      height: 17px;
      flex: none;
      color: var(--muted);
      transition: transform .18s ease, color .18s ease;
    }

    .faq-item[open] .faq-chevron {
      transform: rotate(90deg);
      color: var(--cyan);
    }

    .faq-answer {
      padding: 0 30px 16px 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.65;
    }

    .support-contact {
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .support-contact-copy {
      display: grid;
      gap: 5px;
    }

    .support-contact-copy strong {
      font-size: 14px;
    }

    .support-contact-copy span {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.55;
    }

    .support-contact .btn {
      flex: none;
      min-width: 260px;
      min-height: 48px;
      padding: 0 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      text-align: center;
      text-decoration: none;
      line-height: 1.2;
      white-space: normal;
    }

    .support-contact-button {
      font-size: 14px;
    }

    @media (max-width: 900px) {
      .faq-layout {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 700px) {
      .faq-group-head {
        padding: 17px 16px 15px;
      }

      .faq-list {
        padding: 0 16px;
      }

      .faq-item summary {
        min-height: 54px;
      }

      .support-contact {
        align-items: stretch;
        flex-direction: column;
      }

      .support-contact .btn {
        width: 100%;
        min-width: 0;
      }
    }

  
    button:hover,
    button:active,
    a.btn:hover,
    a.btn:active {
      translate: none;
    }


/* CSP-safe replacements for former inline styles. */
.login-button {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.balance-packages {
  margin-top: 6px;
}

.card-action {
  margin-top: 16px;
}

.renew-title {
  margin-top: 5px;
}

.notice-flush {
  margin-top: 0;
}

.referral-link {
  margin: 12px 0 15px;
  padding: 14px;
  overflow: auto;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  font-size: 12px;
}

.transaction-amount-wrap {
  text-align: right;
}

.transaction-badge {
  margin-top: 5px;
}

.amount-positive {
  color: var(--green);
}

.amount-neutral {
  color: var(--text);
}

.progress-native {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 15px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  appearance: none;
  -webkit-appearance: none;
}

.progress-native::-webkit-progress-bar {
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

.progress-native::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 16px rgba(113,101,255,.28);
}

.progress-native::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 16px rgba(113,101,255,.28);
}