:root{
    --bg: #0A0F1C;
    --card: #121A2C;
    --card-2: #1A2438;
    --stroke: #253048;
    --text: #F2F5FA;
    --text-dim: #8592AD;
    --text-mid: #B9C3D9;
    --accent-a: #2E44C4;
    --accent-b: #2E44C4;
    --accent-grad: var(--accent-b);
    --danger-badge: linear-gradient(135deg,#FF6B4A,#FF3D77);
    --green: #17A876;
    --nav-active: #0A84FF;
    --heart-active: #C7C7CC;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
  html,body{margin:0; padding:0; background:var(--bg); color:var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", Roboto, Helvetica, Arial, sans-serif;
    height:100%; overflow:hidden;}
  #app{max-width:480px; margin:0 auto; height:100vh; height:100dvh; height:var(--app-height, 100dvh); position:relative; overflow:hidden; background:var(--bg); display:flex; flex-direction:column;}

  /* ---------- Scroll body ---------- */
  .body-scroll{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(84px + var(--safe-bottom));}
  .body-scroll::-webkit-scrollbar{display:none;}

  @keyframes navBadgeBump{
    0%{transform:scale(1);} 35%{transform:scale(1.45);} 60%{transform:scale(.92);} 100%{transform:scale(1);}
  }
  .nav-badge.bump{}

  /* ---------- Search ---------- */
  .searchbar{margin:4px 16px 18px; background:var(--card-2); border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:15px;}
  .searchbar svg{width:18px; height:18px; flex-shrink:0;}
  .searchbar input{min-width:0;flex:1;width:100%;border:0;background:transparent;color:var(--text);font:inherit;outline:none;}
  .searchbar input::placeholder{color:var(--text-dim);}
  .searchbar:focus-within{box-shadow:0 0 0 2px #676dff;}
  .searchbar button{border:0;background:transparent;color:var(--text-dim);font-size:24px;cursor:pointer;}
  #view-home.search-active > :not(.searchbar):not(#search-results){display:none;}
  #search-results{margin:0 16px 24px;}
  #search-count{color:var(--text-dim);font-size:14px;}
  #search-items{display:grid;gap:10px;}
  .search-result{display:flex;align-items:center;gap:14px;width:100%;padding:12px;text-align:left;border:1px solid transparent;border-radius:16px;background:var(--card-2);color:var(--text);font:inherit;cursor:pointer;}
  .search-result:hover,.search-result:focus-visible{border-color:#676dff;outline:none;}
  .search-result img{width:58px;height:66px;object-fit:cover;border-radius:9px;flex-shrink:0;}
  .search-result span{min-width:0;overflow-wrap:anywhere;}
  .search-result strong,.search-result small{display:block;}
  .search-result small{margin-top:6px;color:var(--text-dim);}

  /* ---------- Promo banner ---------- */
  .promo-wrap{margin:0 0 18px; padding-left:16px; position:relative;}
  .promo-scroll{display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding-right:16px; scroll-snap-type:x mandatory;}
  .promo-scroll::-webkit-scrollbar{display:none;}
  .promo-card{
    min-width:88%; flex-shrink:0; border-radius:22px; position:relative; overflow:hidden;
    aspect-ratio:16/9;
    background: var(--tint, #17122E);
    scroll-snap-align:start;
    transform:translateZ(0); -webkit-transform:translateZ(0); will-change:transform;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
  }
  .promo-photo{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
  }

  /* ---------- Hero banner (single promo) ---------- */
  .hero-banner-wrap{margin:0 16px 16px;}
  .hero-banner{
    border-radius:18px; overflow:hidden; background:var(--card-2);
    border:1px solid var(--stroke); box-shadow:0 6px 18px rgba(0,0,0,.3);
  }
  .hero-photo{
    width:100%; aspect-ratio:16/9; background-size:cover; background-position:center;
    background-color:#151b2c;
  }
  .hero-bottom{
    display:flex; align-items:center; gap:12px; padding:12px 14px;
    background:var(--card); border-top:1px solid var(--stroke);
  }
  .hero-logo{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    background-size:cover; background-position:center; background-color:#fff;
  }
  .hero-info{flex:1; min-width:0;}
  .hero-title{font-size:16px; font-weight:800; color:var(--text); line-height:1.2;}
  .hero-sub{font-size:12.5px; color:var(--text-dim); margin-top:2px;}
  .hero-btn{
    flex-shrink:0; align-self:center; border:none; cursor:pointer; padding:0 20px; height:38px; border-radius:100px;
    display:flex; align-items:center; justify-content:center; line-height:1;
    background:#3247A6; color:#fff; font-size:14px; font-weight:800;
    font-family:inherit; box-shadow:none;
    white-space:nowrap; transition:background .12s ease, transform .12s ease;
  }
  .hero-btn:active{transform:scale(.96); background:#293A8C;}

  /* ---------- Hero CTA (акцентный баннер-призыв, напр. Steam) ---------- */
  .hero-cta{
    position:relative; overflow:hidden; border-radius:18px; padding:18px 16px;
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(135deg,#152233 0%,#0D1520 55%,#050709 100%);
    box-shadow:0 8px 22px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.06);
    cursor:pointer;
  }
  .hero-cta::after{
    content:""; position:absolute; right:-50px; top:-50px; width:180px; height:180px;
    background:radial-gradient(circle, rgba(102,192,244,.18) 0%, rgba(102,192,244,.06) 45%, rgba(102,192,244,0) 75%);
    filter:blur(8px);
    pointer-events:none;
  }
  .hero-cta-icon{
    flex-shrink:0; width:52px; height:52px; border-radius:14px; position:relative; overflow:hidden;
    background:linear-gradient(160deg,#233A56,#0E141C); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .hero-cta-icon::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(135deg, rgba(102,192,244,.22), rgba(102,192,244,0) 55%);
  }
  .hero-cta-icon svg{width:26px; height:26px; position:relative; z-index:1;}
  .hero-cta-icon img{width:100%; height:100%; object-fit:cover; position:relative; z-index:1;}
  .hero-cta-body{flex:1; min-width:0; position:relative; z-index:1;}
  .hero-cta-eyebrow{
    display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800;
    color:#66C0F4; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px;
  }
  .hero-cta-title{font-size:17px; font-weight:800; color:#fff; line-height:1.2;}
  .hero-cta-sub{font-size:12.5px; color:rgba(255,255,255,.6); margin-top:3px; display:flex; align-items:center; gap:5px;}
  .hero-cta-sub svg{flex-shrink:0;}
  .hero-cta-arrow{
    flex-shrink:0; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center; color:#fff; position:relative; z-index:1;
    transition:transform .12s ease, background .12s ease;
  }
  .hero-cta:active .hero-cta-arrow{transform:translateX(2px); background:rgba(255,255,255,.18);}

  /* ---------- Top-up custom amount form (Steam RU/KZ и т.п.) ---------- */
  .topup-custom-summary{
    margin:16px; padding:14px; border-radius:14px; background:var(--card-2); border:1px solid var(--stroke);
  }
  .topup-custom-row{
    display:flex; align-items:center; justify-content:space-between;
    font-size:13.5px; color:var(--text-dim); padding:5px 0;
  }
  .topup-custom-row.topup-custom-total{
    color:var(--text); font-size:15px; font-weight:800; margin-top:4px; padding-top:10px;
    border-top:1px solid var(--stroke);
  }

  /* ---------- Section ---------- */
  .section{margin-bottom:30px;}
  .section-head{display:flex; align-items:center; justify-content:space-between; padding:0 16px; margin-bottom:14px;}
  .section-title{font-size:22px; font-weight:800; letter-spacing:-0.3px;}
  .section-link{font-size:14px; color:var(--accent-a); font-weight:600;}

  .hscroll{display:flex; gap:14px; overflow-x:auto; padding:0 16px; scrollbar-width:none;}
  .hscroll::-webkit-scrollbar{display:none;}

  .game-card{min-width:150px; max-width:150px; flex-shrink:0;}
  .cover{
    width:150px; height:150px; border-radius:16px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    background-size:cover; background-position:center;
    transform:translateZ(0); -webkit-transform:translateZ(0); will-change:transform;
    transition:filter .12s ease;
  }
  .game-card:active:not(:has(.card-heart:active)) .cover{filter:brightness(.82);}
  .cover .badge,
  .donate-tile-cover .badge,
  .sub-tile-cover .badge{
    position:absolute; top:10px; left:10px; z-index:2;
    background:var(--danger-badge); color:#fff; font-size:11px; font-weight:800;
    padding:4px 8px; border-radius:20px;
  }
  .donate-tile-cover .badge{top:12px; left:12px;}
  .cover::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.3) 0%, transparent 40%); pointer-events:none;}
  .cover .cov-label{position:relative; z-index:1;}
  .price-row{display:flex; align-items:center; gap:8px; margin-top:9px;}
  .price{font-size:16px; font-weight:800;}
  .old-price{font-size:12.5px; color:var(--text-dim); text-decoration:line-through; margin-top:1px;}
  .game-name{
    font-size:13.5px; font-weight:600; margin-top:9px; line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .game-sub{font-size:12px; color:var(--text-dim); margin-top:1px;}

  /* ---------- Donate section (лаконичный постер-стиль, как в PS Store) ---------- */
  .section-title-donate{
    display:flex; align-items:center; gap:10px; padding:0 16px; margin-bottom:16px;
    font-size:25px; font-weight:800; letter-spacing:-0.4px;
  }
  .section-title-donate .sti-icon{font-size:28px; line-height:1;}
  .donate-tile{
    min-width:210px; max-width:210px; flex-shrink:0; cursor:pointer;
  }
  .donate-tile-cover{
    width:210px; aspect-ratio:3/4; border-radius:26px; position:relative; overflow:hidden;
    background-size:cover; background-position:center;
    box-shadow:0 12px 28px rgba(0,0,0,.45);
    transform:translateZ(0); -webkit-transform:translateZ(0);
    transition:filter .12s ease;
  }
  .donate-tile:active:not(:has(.card-heart:active)) .donate-tile-cover{filter:brightness(.82);}
  .donate-tile .dt-heart{position:absolute; top:10px; right:10px; z-index:2;}
  .donate-tile .dt-name{
    font-size:14px; font-weight:600; margin-top:10px; line-height:1.25; color:#fff;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .donate-tile .dt-price{font-size:15px; font-weight:700; margin-top:5px; color:#fff;}

  /* subscription rows */
  .sub-row{display:flex; align-items:center; gap:14px; padding:14px 16px; border-top:1px solid var(--stroke); cursor:pointer;}
  .sub-row:first-child{border-top:none;}
  .sub-icon{width:56px; height:56px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; color:#fff; text-align:center; line-height:1.1; background-size:cover; background-position:center;}
  .sub-info{flex:1;}
  .sub-price{font-size:16px; font-weight:800;}
  .sub-period{font-size:12.5px; color:var(--text-dim); margin-top:2px;}
  .sub-list{background:var(--card); border-radius:18px; margin:0 16px; overflow:hidden;}

  /* subscription tiles (home, photo-style cards) */
  .sub-tiles{display:flex; gap:14px; overflow-x:auto; padding:0 16px 4px; scrollbar-width:none;}
  .sub-tiles::-webkit-scrollbar{display:none;}
  .sub-tile{min-width:47%; max-width:47%; flex-shrink:0; cursor:pointer;}
  .sub-tile-cover{
    width:100%; aspect-ratio:1/1.05; border-radius:22px; position:relative; overflow:hidden;
    background-size:cover; background-position:center;
    box-shadow:0 10px 26px rgba(0,0,0,.4);
    transform:translateZ(0); -webkit-transform:translateZ(0); will-change:transform;
  }
  .sub-tile-cover::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 45%); pointer-events:none;}
  .sub-tile-badge{
    position:absolute; left:12px; bottom:12px; z-index:1;
    background:#fff; color:#0A0F1C; font-weight:800; font-size:12.5px;
    padding:8px 14px; border-radius:20px; box-shadow:0 4px 12px rgba(0,0,0,.3); white-space:nowrap;
  }
  /* компактный дискаунт-бейдж для карточек подписок — тоньше и без тени,
     чтобы не спорить визуально с sub-tile-badge снизу */
  .sub-tile-cover .badge{
    top:10px; left:10px; padding:3px 7px; font-size:10px; font-weight:800;
    border-radius:7px; letter-spacing:0; box-shadow:none;
  }
  .sub-tile-name{font-size:16px; font-weight:700; margin-top:10px;}
  .section-head-arrow{width:20px; height:20px; color:var(--text-dim); flex-shrink:0;}

  /* pill tabs (for plus durations) */
  .pill-tabs{display:flex; gap:8px; margin:0 16px 16px; background:var(--card-2); border-radius:14px; padding:4px;}
  .pill{flex:1; text-align:center; padding:10px 0; border-radius:11px; font-size:13.5px; font-weight:700; color:var(--text-dim); cursor:pointer;}
  .pill.active{background:var(--accent-grad); color:#fff;}
  #payment-server-tabs.error{box-shadow:0 0 0 1.5px #FF453A;}

  /* ---------- Карточка сервиса на странице пополнения (шапка) ---------- */
  .topup-info-card{
    margin:14px 16px 18px; padding:16px; border-radius:22px;
    background:var(--card-2); border:1px solid var(--stroke); box-shadow:0 8px 24px rgba(0,0,0,.35);
  }
  .topup-info-head{display:flex; align-items:center; gap:12px;}
  .topup-info-logo-wrap{position:relative; flex-shrink:0;}
  .topup-info-logo{
    width:54px; height:54px; border-radius:16px; background-color:#fff; background-size:cover;
    background-position:center; display:flex; align-items:center; justify-content:center;
    font-size:24px; box-shadow:0 4px 12px rgba(0,0,0,.3); position:relative; overflow:hidden;
  }
  .topup-info-logo::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%);
  }
  .topup-info-logo svg{width:27px; height:27px; position:relative; z-index:1;}
  .topup-info-badge{
    position:absolute; top:-7px; left:-7px; background:var(--danger-badge); color:#fff;
    font-size:10.5px; font-weight:800; padding:3px 7px; border-radius:20px;
    box-shadow:0 2px 6px rgba(0,0,0,.4);
  }
  .topup-info-name{flex:1; min-width:0; font-size:18px; font-weight:800; color:var(--text); line-height:1.2;}

  .topup-info-body{padding:12px 2px 2px; font-size:13.5px; color:var(--text-dim); line-height:1.5;}

  /* ---------- Предупреждение о регионе (например, "не для РФ-аккаунтов") ----------
     Отдельный акцентный блок ПОД карточкой описания сервиса на странице
     пополнения (не внутри неё). Показывается только когда у сервиса задано
     donateServices.*.regionWarning. */
  .topup-region-warning{
    margin:-4px 16px 18px; padding:12px 14px; border-radius:16px;
    background:rgba(255,69,58,.1);
    border:1px solid rgba(255,69,58,.38);
    color:#FF453A; font-size:13.5px; font-weight:800; line-height:1.4;
    text-align:center;
  }
  .topup-faq-item{padding:10px 0; border-top:1px solid var(--stroke);}
  .topup-faq-item:first-child{border-top:none; padding-top:2px;}
  .topup-faq-q{font-size:13.5px; font-weight:700; color:var(--text);}
  .topup-faq-a{font-size:13px; color:var(--text-dim); margin-top:4px; line-height:1.45;}

  .dropdown-select{position:relative; margin:0 16px;}
  .dropdown-select .dropdown-select-trigger{
    margin:0; width:100%; box-sizing:border-box; display:flex; align-items:center;
    justify-content:space-between; gap:8px; cursor:pointer; user-select:none;
  }
  .dropdown-select-trigger.placeholder{color:var(--text-dim);}
  .dropdown-select-trigger:not(.placeholder){font-weight:700;}
  .dropdown-select-trigger .dropdown-chevron{width:17px; height:17px; color:var(--text-dim); flex-shrink:0; transition:transform .18s ease;}
  .dropdown-select.open .dropdown-select-trigger .dropdown-chevron{transform:rotate(180deg);}
  .dropdown-select-menu{
    display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:20;
    background:var(--card-2); border:1px solid var(--stroke); border-radius:14px; overflow:hidden;
    box-shadow:0 14px 30px rgba(0,0,0,.4);
  }
  .dropdown-select.open .dropdown-select-menu{display:block;}
  .dropdown-select-option{padding:13px 14px; font-size:14px; font-weight:600; color:var(--text); cursor:pointer;}
  .dropdown-select-option + .dropdown-select-option{border-top:1px solid var(--stroke);}
  .dropdown-select-option.selected{background:rgba(255,255,255,.14); color:#fff; font-weight:700;}
  .dropdown-select-option:active{background:rgba(255,255,255,.08);}

  /* service grid */
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 16px;}
  .service-card{border-radius:16px; padding:16px; min-height:120px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;}

  /* list style rows (catalog) */
  .list-card{background:var(--card); border-radius:18px; margin:0 16px; overflow:hidden;}
  .list-row{display:flex; align-items:center; gap:14px; padding:13px 14px; border-top:1px solid var(--stroke); cursor:pointer; transition:background .12s ease;}
  .list-row:active{background:var(--card-2);}
  .list-row:first-child{border-top:none;}
  .list-icon{width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; color:#fff; position:relative;}
  .list-discount{flex-shrink:0; background:rgba(255,69,58,.14); color:#FF6B5B; font-size:12px; font-weight:800; padding:5px 10px; border-radius:20px; letter-spacing:0.1px;}
  .list-name{flex:1; font-size:15px; font-weight:600; color:var(--text);}
  a.list-row{text-decoration:none; color:inherit;}
  a.list-row .list-name{color:var(--text); font-size:15px; font-weight:600;}
  .chev{color:var(--text-dim); width:18px; height:18px; flex-shrink:0;}

  .banner-strip{margin:0 16px 26px; border-radius:18px; overflow:hidden; background:#2E44C4; padding:18px 18px; display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px;}

  .po-card{margin:0 16px 14px; background:var(--card); border:1px solid var(--stroke); border-radius:18px; padding:15px 16px; box-shadow:0 6px 18px rgba(0,0,0,.16);}
  .po-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
  .po-id{font-size:12.5px; color:var(--text-dim); font-weight:700;}
  .po-date{font-size:11.5px; color:var(--text-dim); margin-top:2px;}
  .po-status{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; padding:6px 10px; border-radius:999px; flex-shrink:0; white-space:nowrap;}
  .po-status.processing{color:#FFB020; background:rgba(255,176,32,.12); border:1px solid rgba(255,176,32,.3);}
  .po-status.paid{color:var(--green); background:rgba(23,168,118,.12); border:1px solid rgba(23,168,118,.3);}
  .po-dot{width:6px; height:6px; border-radius:50%; background:currentColor; animation:po-blink 1s infinite ease-in-out;}
  @keyframes po-blink{0%,100%{opacity:.25;} 50%{opacity:1;}}
  .po-item{padding:10px 0; border-top:1px solid var(--stroke);}
  .po-item:first-child{border-top:none;}
  .po-item-row{display:flex; align-items:center; gap:10px;}
  .po-item-cover{width:36px; height:36px; border-radius:10px; flex-shrink:0; background-size:cover; background-position:center;}
  .po-item-name{flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--text);}
  .po-item-qty{font-size:11px; color:var(--text-dim); font-weight:600; margin-left:4px;}
  .po-item-price{font-size:13px; font-weight:700; white-space:nowrap;}
  .po-item-userid{margin:6px 0 0 46px; font-size:12px; color:var(--text-dim);}
  .po-item-userid span{color:var(--text); font-weight:700;}
  .po-codes{margin:10px 0 2px 46px; display:flex; flex-direction:column; gap:7px;}
  .po-codes-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
    background:var(--card-2); border:1px solid var(--stroke); border-radius:11px;
    padding:9px 11px; cursor:pointer; font:inherit; color:var(--text);
  }
  .po-codes-toggle .po-codes-label{margin:0;}
  .po-codes-chevron{width:16px; height:16px; color:var(--text-dim); flex-shrink:0; transition:transform .2s ease;}
  .po-codes-toggle.open .po-codes-chevron{transform:rotate(180deg);}
  .po-codes-list{display:flex; flex-direction:column; gap:7px;}
  .po-codes-label{font-size:10.5px; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.4px;}
  .po-code-row{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--card-2); border:1px dashed var(--stroke); border-radius:11px; padding:9px 8px 9px 11px;}
  .po-code-text{font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; font-size:12.5px; font-weight:700; letter-spacing:.4px; color:var(--text); word-break:break-all;}
  .po-code-num{color:var(--text-dim); font-weight:700; font-family:inherit;}
  .po-code-denom{font-size:10.5px; color:var(--text-dim); font-weight:700; margin:6px 0 4px;}
  .po-code-copy{flex-shrink:0; display:flex; align-items:center; gap:5px; background:var(--card); border:1px solid var(--stroke); border-radius:9px; color:var(--accent-b); font-size:11.5px; font-weight:700; cursor:pointer; padding:6px 10px; white-space:nowrap;}
  .po-code-copy svg{width:13px; height:13px; flex-shrink:0;}
  .po-code-copy.copied{color:var(--green); border-color:rgba(23,168,118,.35);}
  .po-code-copy:active{opacity:.7;}
  .po-foot{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px dashed var(--stroke);}
  .po-foot-label{font-size:12px; color:var(--text-dim); font-weight:600;}
  .po-foot-total{font-size:16px; font-weight:800;}
  .po-note{margin-top:10px; font-size:11.5px; line-height:1.4; color:var(--text-dim);}
  .po-note.paid{color:var(--green);}
  .po-support-link{color:var(--green); font-weight:700; text-decoration:underline; text-underline-offset:2px;}

  /* ---------- Checkout mode: hide bottom tab bar on payment page (top-up
     services + game donate), the "Перейти к оплате" button takes its exact
     place — a solid full-width bar flush with the bottom edge ---------- */
  #app.checkout-mode .bottomnav{display:none;}
  #app.checkout-mode #payment-buy-btn{
    position:absolute; left:12px; right:12px; bottom:calc(10px + var(--safe-bottom)); z-index:100;
    margin:0; width:auto; border-radius:18px;
    padding:17px 16px; font-size:17.5px;
    box-shadow:0 8px 24px -10px rgba(0,0,0,.55);
    letter-spacing:.1px;
  }
  #app.checkout-mode #payment-buy-btn:active{transform:none; box-shadow:0 -6px 16px -8px rgba(0,0,0,.35);}

  /* Форма "своя сумма" (Steam RU/KZ) на экране пополнения занимает то же
     место, что и страница оплаты — кнопка "Перейти к оплате" становится
     сплошной полосой внизу вместо таб-бара (см. checkoutOnlyViews в JS). */
  #app.checkout-mode #topup-custom-buy-btn{
    position:absolute; left:12px; right:12px; bottom:calc(10px + var(--safe-bottom)); z-index:100;
    margin:0; width:auto; border-radius:18px;
    padding:17px 16px; font-size:17.5px;
    box-shadow:0 8px 24px -10px rgba(0,0,0,.55);
    letter-spacing:.1px;
  }
  #app.checkout-mode #topup-custom-buy-btn:active{transform:none; box-shadow:0 -6px 16px -8px rgba(0,0,0,.35);}

  /* ---------- Legal pages (Пользовательское соглашение / Политика конфиденциальности) ----------
     На этих экранах прячем нижнюю таб-бар панель — там всё равно нечего делать,
     кроме чтения документа, а кнопка "Назад" в шапке остаётся как есть. */
  #app.legal-mode .bottomnav{display:none;}
  #app.legal-mode .body-scroll{padding-bottom:calc(20px + var(--safe-bottom));}

  /* ---------- Bottom nav ---------- */
  .bottomnav{
    position:absolute; left:0; right:0; bottom:0; max-width:480px; margin:0 auto;
    /* Сплошной фон без backdrop-filter: в WebView Telegram размытие иногда
       не отрисовывается при открытии, и панель выглядела прозрачной. */
    background:#0B0C11; transform:translateZ(0);
    border-top:1px solid var(--stroke);
    display:flex; padding:8px 6px calc(8px + var(--safe-bottom));
    z-index:100;
  }
  .navitem{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0; cursor:pointer; color:var(--text-dim); position:relative;}
  .navitem svg{width:23px; height:23px;}
  .navitem span{font-size:11px; font-weight:600;}
  .navitem.active{color:var(--nav-active); font-weight:800;}
  .navitem.active span{font-weight:800;}
  .navitem.active svg{fill:var(--nav-active);}
  .nav-badge{position:absolute; top:0; right:24%; background:var(--nav-active); color:#fff; font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px;}

  /* ---------- Empty states ---------- */
  .empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:80px 40px 20px; color:var(--text-dim);}
  .empty-icon{width:64px; height:64px; border-radius:50%; background:var(--card-2); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--text-dim);}
  .empty-title{color:var(--text); font-size:17px; font-weight:700; margin-bottom:6px;}
  .empty-sub{font-size:14px; line-height:1.4;}
  .empty-btn{margin-top:20px; background:var(--accent-grad); color:#fff; border:none; border-radius:14px; padding:13px 26px; font-size:14.5px; font-weight:700; cursor:pointer;}

  /* ---------- Cart (shared with other checkout screens — do not repurpose) ---------- */
  .summary-row{display:flex; justify-content:space-between; font-size:14px; color:var(--text-mid); margin-bottom:7px;}
  .summary-total{display:flex; justify-content:space-between; font-size:18px; font-weight:800; padding-top:8px; border-top:1px solid var(--stroke); margin-top:2px;}
  .buy-btn{margin:14px 16px; background:var(--accent-grad); color:#fff; border:none; border-radius:16px; padding:15px; font-size:16px; font-weight:800; width:calc(100% - 32px); cursor:pointer; transition:transform .12s, box-shadow .12s;}

  /* ---------- Profile ---------- */
  .profile-head{display:flex; align-items:center; gap:14px; padding:8px 16px 22px;}
  .avatar{width:60px; height:60px; border-radius:50%; background:var(--accent-grad); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; flex-shrink:0;}
  .profile-name{font-size:18px; font-weight:800;}
  .profile-id{font-size:13px; color:var(--text-dim); margin-top:2px;}
  .balance-card{margin:0 16px 22px; background:linear-gradient(135deg,#1B1730,#241A3D); border:1px solid #2E2451; border-radius:18px; padding:18px;}
  .balance-label{font-size:12.5px; color:var(--text-dim); margin-bottom:6px;}
  .balance-amt{font-size:26px; font-weight:800;}
  .topup-btn{margin-top:14px; background:var(--accent-grad); border:none; color:#fff; font-weight:700; font-size:14px; padding:10px 16px; border-radius:11px; cursor:pointer;}

  .view{display:none;}
  .view.active{display:block;}

  /* ---------- Detail topbar (like screenshots) ---------- */
  .detail-topbar{display:flex; align-items:center; gap:10px; padding:14px 16px; position:sticky; top:0; background:var(--bg); z-index:5;}
  .detail-back{display:flex; align-items:center; gap:6px; color:var(--text); font-size:15px; font-weight:600; cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent; transition:opacity .15s ease, transform .15s ease; border-radius:8px;}
  .detail-back svg{width:20px; height:20px;}
  .detail-back:active{opacity:.55; transform:scale(.94);}
  .detail-title{flex:1; text-align:center; font-size:15px; font-weight:700; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  /* ---------- Top-up (donate) ---------- */
  .topup-pkg-list{padding:4px 16px 0; display:flex; flex-direction:column; gap:10px;}
  .topup-pkg{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:var(--card); border:2px solid transparent; cursor:pointer; transition:transform .1s ease;}
  .topup-pkg:not([style*="cursor:default"]):active{transform:scale(.95);}
  .topup-pkg.selected{border-color:var(--accent-a);}
  .topup-pkg-icon{width:46px; height:46px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; position:relative;}
  .topup-badge{position:absolute; top:-6px; left:-6px; background:var(--danger-badge); color:#fff; font-size:10px; font-weight:800; padding:2px 6px; border-radius:20px;}
  .topup-pkg-info{flex:1;}
  .topup-pkg-name{font-weight:700; font-size:14px;}
  .topup-pkg-price{font-weight:800; font-size:15px; margin-top:2px;}
  .topup-pkg-old{font-size:12px; color:var(--text-dim); text-decoration:line-through; margin-left:6px;}
  .topup-radio{width:20px; height:20px; border-radius:50%; border:2px solid var(--stroke); flex-shrink:0;}
  .topup-pkg.selected .topup-radio{border-color:var(--accent-a); background:radial-gradient(circle,var(--accent-a) 40%, transparent 44%);}
  .field-label{font-size:13px; color:var(--text-dim); margin:14px 16px 6px;}
  #view-payment.spacious .field-label{margin-top:18px;}
  #view-payment.spacious .field-input{padding:12px 14px;}
  #view-payment.spacious .payment-card{margin-top:14px;}
  #view-payment.spacious .payment-card .pay-methods{padding:16px 16px 14px;}
  #view-payment.spacious .pay-method{padding:13px 6px;}
  #view-payment.spacious .topup-total-box{margin-top:16px; padding:15px;}
  #view-payment.spacious .summary-row{margin-bottom:8px;}
  #view-payment.spacious .summary-total{padding-top:9px;}
  #view-payment.spacious .agree-row{margin-top:16px;}
  #view-payment.spacious .buy-btn{margin:16px 16px; padding:16px;}
  .field-label.id-field-label{display:flex; align-items:center; gap:6px;}
  .id-help-btn{
    width:16px; height:16px; border-radius:50%; background:var(--stroke); color:var(--text-dim);
    display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700;
    cursor:pointer; flex-shrink:0; line-height:1; overflow:hidden; transition:background .12s ease, color .12s ease;
  }
  .id-help-btn:active{background:var(--accent-a); color:#fff;}

  .id-help-overlay{
    display:none; position:fixed; left:0; right:0; top:0; height:var(--app-height, 100dvh);
    z-index:1200; background:rgba(4,6,12,.72);
    align-items:flex-end; justify-content:center; padding:0;
  }
  .id-help-overlay.show{display:flex;}
  .id-help-modal{
    width:100%; max-width:480px; background:var(--card); border-radius:24px 24px 0 0;
    padding:16px 16px calc(10px + var(--safe-bottom)); box-sizing:border-box;
  }
  .id-help-image{
    width:100%; aspect-ratio:16/10; border-radius:16px; background:var(--card-2) center/cover no-repeat;
    margin-bottom:14px;
  }
  .id-help-text{font-size:14px; color:var(--text); line-height:1.5; margin-bottom:16px;}
  .id-help-close{
    width:100%; background:var(--accent-grad); color:#fff; border:none; border-radius:16px;
    padding:15px; font-size:16px; font-weight:800; cursor:pointer;
  }

  /* ---------- Package info modal (состав пакета, по центру экрана) ---------- */
  .pkg-info-overlay{
    display:none; position:fixed; left:0; right:0; top:0; height:var(--app-height, 100dvh);
    z-index:1300; background:rgba(4,6,12,.72);
    align-items:center; justify-content:center; padding:24px; box-sizing:border-box;
    backdrop-filter:blur(2px);
  }
  .pkg-info-overlay.show{display:flex;}
  .pkg-info-modal{
    width:100%; max-width:340px; background:var(--card); border:1px solid var(--stroke);
    border-radius:20px; padding:22px 20px 18px; box-sizing:border-box;
    text-align:center;
  }
  .pkg-info-title{font-size:16px; font-weight:800; color:var(--text); margin-bottom:10px;}
  .pkg-info-text{font-size:14px; color:var(--text-mid); line-height:1.55; margin-bottom:18px; white-space:pre-line;}
  .pkg-info-close{
    width:100%; background:var(--accent-grad); color:#fff; border:none; border-radius:14px;
    padding:13px; font-size:15px; font-weight:800; cursor:pointer;
  }
  .pkg-info-close:active{opacity:.85;}

  /* ---------- Package "what's inside" button on product card ---------- */
  .card-info{
    position:absolute; top:8px; left:8px; z-index:3;
    width:31px; height:31px; border-radius:50%;
    background:var(--accent-grad);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:transform .12s;
  }
  .card-info svg{width:16px; height:16px; color:#fff; stroke-width:2.2;}
  .card-info:active{transform:scale(0.88);}

  .payment-qty-stepper{display:inline-flex; align-items:center; gap:2px; background:var(--card-2); border:1px solid var(--stroke); border-radius:14px; padding:4px; margin:0 16px 6px;}
  .payment-qty-stepper button{width:34px; height:34px; border-radius:10px; border:none; background:var(--card); color:var(--text); font-size:18px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .payment-qty-stepper button:active{background:var(--stroke);}
  .payment-qty-stepper span{min-width:32px; text-align:center; font-size:15px; font-weight:800;}
  .field-input{-webkit-appearance:none; appearance:none; margin:0 16px; background:var(--card); border:1px solid var(--stroke); border-radius:12px; padding:10px 14px; color:var(--text); font-size:14px; width:calc(100% - 32px); box-sizing:border-box; outline:none;}
  .field-input:focus{outline:none; box-shadow:none;}
  .field-input::placeholder{color:var(--text-dim);}
  .field-input.error{border-color:#FF453A;}
  .field-input::-webkit-outer-spin-button,
  .field-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
  .field-input[type="number"]{-moz-appearance:textfield;}
  .field-error{display:none; color:#FF453A; font-size:12.5px; margin:6px 16px 0;}
  .field-error.show{display:block;}
  .agree-row{display:flex; align-items:flex-start; gap:10px; margin:14px 16px 0; font-size:13px; color:var(--text-mid); line-height:1.45;}
  .agree-check{width:22px; height:22px; border-radius:7px; border:2px solid var(--stroke); flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center;}
  .agree-check svg{width:13px; height:13px; stroke:#fff; stroke-width:3; fill:none; display:none;}
  .agree-check.checked{background:var(--green); border-color:var(--green);}
  .agree-check.checked svg{display:block;}
  .agree-link{color:var(--accent-b); text-decoration:none;}
  .pay-methods{display:flex; gap:10px; padding:14px 16px 0;}
  .pay-method{position:relative; flex:1; background:#fff; border-radius:12px; padding:10px 6px; display:flex; align-items:center; justify-content:center; border:3px solid #E4E7F0; cursor:pointer; font-weight:800; font-size:13px; color:#000; text-align:center; transition:border-color .15s, transform .15s, box-shadow .15s;}
  .pay-method.selected{border-color:var(--accent-b); transform:scale(0.98); box-shadow:inset 0 2px 6px rgba(0,0,0,.18);}
  .pay-method-badge{position:absolute; top:-8px; left:50%; transform:translateX(-50%); background:var(--accent-grad); color:#fff; font-size:9px; font-weight:800; padding:2px 7px; border-radius:20px; letter-spacing:.2px; white-space:nowrap;}

  /* ---------- Unified payment method card (methods + savings hint) ---------- */
  .payment-card{margin:10px 16px 0; background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius-lg); overflow:hidden;}
  .payment-card .pay-methods{padding:12px 16px 12px;}
  .payment-savings-note{margin:0; padding:0 16px 10px; background:transparent; border:none; border-radius:0; font-size:12.5px; font-weight:700; color:var(--green); line-height:1.4; display:flex; gap:7px; align-items:center;}
  .payment-savings-note .savings-icon{font-size:13px; line-height:1;}
  .topup-total-box{margin:14px 16px 0; background:var(--card); border-radius:16px; padding:13px 16px;}

  /* ---------- Telegram Stars buy screen ---------- */
  .tg-star-icon{font-size:20px; flex-shrink:0; line-height:1;}
  .tg-pkg-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; padding:2px 16px 4px;}
  .tg-pkg-cell{background:var(--card); border:2px solid transparent; border-radius:12px; padding:9px 4px 8px; text-align:center; cursor:pointer; display:flex; flex-direction:column; align-items:center;}
  .tg-pkg-cell.selected{border-color:var(--accent-a); background:var(--card-2);}
  .tg-pkg-cell .tg-star-icon{margin-bottom:4px;}
  .tg-pkg-amount{font-weight:800; font-size:12px; line-height:1.15;}
  .tg-pkg-cell-price{font-weight:800; font-size:11.5px; margin-top:4px; color:var(--text);}
  .tg-pkg-cell-old{font-size:9.5px; color:var(--text-dim); text-decoration:line-through; margin-top:1px;}

  /* ---------- Telegram Premium buy screen ---------- */
  .tg-prem-plan-list{display:flex; flex-direction:column; gap:10px; padding:2px 16px 4px;}
  .tg-prem-plan{position:relative; display:flex; align-items:center; gap:12px; background:var(--card); border:2px solid transparent; border-radius:14px; padding:13px 14px; cursor:pointer;}
  .tg-prem-plan.selected{border-color:var(--accent-b); background:var(--card-2);}
  .tg-prem-radio{width:20px; height:20px; border-radius:50%; border:2px solid var(--stroke); flex-shrink:0; position:relative; box-sizing:border-box;}
  .tg-prem-plan.selected .tg-prem-radio{border-color:var(--accent-b);}
  .tg-prem-plan.selected .tg-prem-radio::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent-grad);}
  .tg-prem-plan-mid{flex:1; min-width:0;}
  .tg-prem-plan-period{font-weight:800; font-size:14.5px;}
  .tg-prem-plan-permonth{font-size:11.5px; color:var(--text-dim); margin-top:2px;}
  .tg-prem-plan-right{text-align:right; flex-shrink:0;}
  .tg-prem-plan-price{font-weight:800; font-size:15px;}
  .tg-prem-plan-old{font-size:11.5px; color:var(--text-dim); text-decoration:line-through; margin-top:1px;}
  .tg-prem-plan-badge{position:absolute; top:-9px; right:14px; background:var(--danger-badge); color:#fff; font-size:10px; font-weight:800; padding:3px 8px; border-radius:8px; letter-spacing:.2px;}

  /* ---------- Checkout: payment method screen ---------- */
  .checkout-total-hint{padding:2px 16px 16px; font-size:14px; color:var(--text-dim);}
  .checkout-total-hint b{color:var(--text); font-weight:800;}
  .checkout-pay-list{padding:0 16px; display:flex; flex-direction:column; gap:12px;}
  .checkout-pay-row{position:relative; display:flex; align-items:center; gap:14px; padding:16px 14px; border-radius:16px; background:var(--card); border:2px solid transparent; cursor:pointer; transition:border-color .15s, background .15s;}
  .checkout-pay-row.selected{border-color:var(--accent-b); background:rgba(46,68,196,.12);}
  .checkout-pay-icon{width:56px; height:56px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; background:#fff;}
  .checkout-pay-info{flex:1; min-width:0;}
  .checkout-pay-name-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .checkout-pay-name{font-weight:800; font-size:15px;}
  .checkout-pay-badge{background:var(--accent-grad); color:#fff; font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:20px; letter-spacing:.2px; white-space:nowrap;}
  .checkout-pay-sub{font-size:12.5px; margin-top:3px; font-weight:500;}
  .checkout-pay-sub.good{color:var(--green);}
  .checkout-pay-sub.neutral{color:var(--text-dim);}
  .checkout-pay-price{flex-shrink:0; text-align:right;}
  .checkout-pay-price-value{font-size:15px; font-weight:800; white-space:nowrap;}
  .checkout-pay-price-value.green{color:var(--green);}
  .checkout-pay-price-note{font-size:11px; font-weight:700; margin-top:2px; white-space:nowrap; color:var(--text-dim);}
  .checkout-pay-price-note.green{color:var(--green);}
  .checkout-pay-radio{width:22px; height:22px; border-radius:50%; border:2px solid var(--stroke); flex-shrink:0;}
  .checkout-pay-row.selected .checkout-pay-radio{border-color:var(--accent-b); background:radial-gradient(circle,var(--accent-b) 40%, transparent 44%);}
  .checkout-savings-note{margin:16px 16px 0; background:rgba(23,168,118,.1); border:1px solid rgba(23,168,118,.3); border-radius:14px; padding:12px 14px; font-size:12.5px; color:var(--green); line-height:1.4; display:flex; gap:8px; align-items:flex-start;}
  .tg-buy-btn{background:var(--green); margin-bottom:8px; display:flex; align-items:center; justify-content:center; gap:8px;}
  .tg-buy-btn .tg-buy-icon{height:24px; width:24px; object-fit:contain; flex-shrink:0; display:block;}
  .tg-buy-wrap{position:relative;}
  .tg-buy-badge{position:absolute; top:-8px; right:10px; background:var(--accent-grad); color:#fff; font-size:10px; font-weight:800; padding:3px 9px; border-radius:20px; letter-spacing:.2px; z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.35);}
  .tg-other-btn{background:var(--card-2); color:var(--text); box-shadow:none; margin-top:0;}

  /* ---------- Gift card catalog (Сервисы пополнения) ---------- */
  .giftcard-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:6px 16px 10px;}
  .giftcard{cursor:pointer;}
  .giftcard-cover{
    aspect-ratio:1/1; border-radius:20px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center; padding:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
    transition:transform .1s ease;
  }
  .giftcard:active:not(:has(.card-heart:active)):not(:has(.card-info:active)) .giftcard-cover{transform:scale(.95);}
  .giftcard-inner{
    width:100%; height:100%; border-radius:14px; display:flex; flex-direction:column;
    align-items:center; justify-content:flex-end; overflow:hidden; position:relative;
  }
  .giftcard-logo{position:absolute; top:14px; left:0; right:0; text-align:center; font-size:26px; opacity:.92;}
  .giftcard-amount-box{
    width:100%; padding:10px 0 12px; text-align:center; font-weight:800; color:#fff;
  }
  .giftcard-amount-box-left{
    text-align:center; padding:10px 14px 12px; text-shadow:0 1px 3px rgba(0,0,0,.85), 0 1px 10px rgba(0,0,0,.6);
  }
  .giftcard-amount-region{font-size:11px; font-weight:700; opacity:.85; letter-spacing:.5px;}
  .giftcard-amount-value{font-size:15px; font-weight:700; margin-top:2px;}
  .giftcard-amount-value .emoji{font-size:13px;}
  .giftcard-price{font-size:15px; font-weight:800; margin-top:10px;}
  .giftcard-old{font-size:12px; color:var(--text-dim); text-decoration:line-through; font-weight:600; margin-left:6px;}
  .giftcard-name{font-size:12.5px; color:var(--text-mid); margin-top:2px; line-height:1.3;}
  .giftcard-country{font-size:11px; font-weight:700; color:var(--text-dim); letter-spacing:.4px; text-transform:uppercase; margin-top:2px;}
  .giftcard.selected .giftcard-cover{outline:2.5px solid var(--accent-a); outline-offset:2px;}
  .topup-grid-price{font-size:16px; font-weight:800; color:#fff; margin-top:10px;}
  .topup-grid-price .old{color:var(--text-dim); text-decoration:line-through; margin-left:6px; font-weight:600; font-size:13px;}
  .topup-grid-name{font-size:13.5px; font-weight:700; color:var(--text-mid); margin-top:3px; display:flex; flex-direction:column; gap:1px;}
  .topup-grid-main{display:flex; align-items:baseline; gap:3px;}
  .topup-grid-main .emoji{font-size:13px;}
  .topup-grid-region{font-size:11px; font-weight:700; color:var(--text-dim); letter-spacing:.4px; text-transform:uppercase;}
  .topup-grid-name .emoji{font-size:13px;}

  /* ---------- Favorite heart button ---------- */
  .card-heart{
    position:absolute; top:8px; right:8px; z-index:3;
    width:31px; height:31px; border-radius:50%;
    background:rgba(10,10,13,.45); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .15s, transform .12s;
  }
  .card-heart svg{width:17px; height:17px; color:#fff; stroke-width:2.2;}
  .card-heart.active{background:rgba(10,10,13,.45);}
  .card-heart.active svg{fill:var(--heart-active); stroke:var(--heart-active);}
  .card-heart:active{transform:scale(0.88);}
  .card-heart.card-heart-inline{position:static; width:29px; height:29px; background:transparent; flex-shrink:0;}
  .card-heart.card-heart-inline svg{color:var(--text-dim);}
  .card-heart.card-heart-inline.active{background:transparent;}
  .card-heart.card-heart-inline.active svg{color:var(--heart-active); fill:var(--heart-active); stroke:var(--heart-active);}
  .card-heart.inline{position:static; flex-shrink:0; width:38px; height:38px; margin-left:auto;}
  .card-heart.inline svg{width:21px; height:21px;}
  .fav-empty-hint{padding:80px 40px 20px;}
  .fav-header{padding:4px 16px 14px; font-size:22px; font-weight:800;}

  /* ---------- Tap / press feedback (all interactive buttons & tabs) ---------- */
  .buy-btn, .empty-btn, .navitem, .pill, .list-row,
  .checkout-pay-row, .id-help-close{
    transition: transform .12s cubic-bezier(.4,0,.2,1), background .12s ease, opacity .12s ease, box-shadow .12s ease, filter .12s ease;
    will-change: transform;
  }
  .buy-btn:active{filter:brightness(.82);}
  .empty-btn:active{transform:scale(.95);}
  .navitem:active{transform:scale(.9); opacity:.7;}
  .pill:active{transform:scale(.94);}
  .list-row:active{transform:scale(.98);}
  .checkout-pay-row:active{transform:scale(.98);}
  .id-help-close:active{transform:scale(.95);}

  /* ---------- Legal documents (agreement / privacy policy) ---------- */
  .legal-doc{padding:6px 18px 40px; color:var(--text-mid);}
  .legal-title{font-size:19px; font-weight:800; color:var(--text); line-height:1.3; margin:8px 0 4px; text-align:center;}
  .legal-subtitle{font-size:13px; color:var(--text-dim); text-align:center; margin-bottom:18px;}
  .legal-heading{font-size:15.5px; font-weight:700; color:var(--text); margin:22px 0 8px;}
  .legal-p{font-size:14px; line-height:1.55; color:var(--text-mid); margin:0 0 12px;}
  .legal-p a{color:var(--accent-b);}
  .legal-table{margin:0 0 16px; border:1px solid var(--stroke); border-radius:12px; overflow:hidden;}
  .legal-table-row{display:grid; grid-template-columns:1fr 1fr; gap:0;}
  .legal-table-row + .legal-table-row{border-top:1px solid var(--stroke);}
  .legal-table-row div{padding:10px 12px; font-size:12.5px; line-height:1.4; color:var(--text-mid);}
  .legal-table-row div:first-child{border-right:1px solid var(--stroke);}
  .legal-table-head{background:var(--card-2);}
  .legal-table-head div{font-weight:700; color:var(--text); font-size:12.5px;}

.product-sold-out{position:relative;cursor:not-allowed!important;overflow:hidden}
.product-sold-out>*{filter:blur(2px) grayscale(1);opacity:.5}
.product-sold-out::after{content:'Нет в наличии';position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(10,12,18,.45);color:white;font-weight:700;font-size:16px;pointer-events:none}
.purchase-card{padding:20px!important;overflow-wrap:anywhere}
.purchase-title{font-weight:700;font-size:17px;margin:0 0 8px}
.purchase-id,.purchase-date{font-size:12px;opacity:.65}
.purchase-status{display:inline-block;padding:5px 10px;border-radius:20px;background:#34456d;color:#c4d6ff;font-size:12px;margin:4px 0}
.purchase-card[data-status="paid"] .purchase-status{background:#534423;color:#ffe6a6}
.purchase-card[data-status="delivered"] .purchase-status{background:#194338;color:#a9f3d1}
.purchase-card[data-status="cancelled"] .purchase-status{background:#43333a;color:#e7bac6}
.purchase-amount{font-weight:700;margin:8px 0}
.purchase-card code{display:block;padding:12px;background:#080f1d;border-radius:8px;white-space:pre-wrap}
@media(max-width:700px){.cards,.catalog-grid,.giftcards-grid,.gift-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.giftcard,.catalog-card{min-width:0!important}.giftcard img,.catalog-card img{height:110px!important}.giftcard .info,.catalog-card .info{padding:10px!important;font-size:12px}}
#purchases-list > .empty{width:100%;box-sizing:border-box;margin:0 auto;text-align:center;align-items:center;justify-content:flex-start}#purchases-list > .empty .empty-btn{margin-left:auto;margin-right:auto}
.email-hint{margin:8px 16px 14px;color:var(--text-dim);font-size:12px;line-height:1.4}


/* Без шапки страницы: отступ сверху, когда карточка сервиса скрыта (Telegram). */
#giftcard-info-card[style*="display: none"] + #giftcard-country-tabs{margin-top:14px !important;}

/* Кнопки оплаты вынесены из прокрутки в #app: видны только на своём экране. */
#app > #payment-buy-btn, #app > #topup-custom-buy-btn{display:none;}
#app.checkout-mode[data-view="view-payment"] > #payment-buy-btn,
#app.checkout-mode[data-view="view-topup"] > #topup-custom-buy-btn{display:block;}
#app.checkout-mode .body-scroll{padding-bottom:calc(92px + var(--safe-bottom));}

/* Запасная кнопка «Назад» для клиентов без системной кнопки Telegram. */
.fallback-back{position:absolute; top:10px; left:10px; z-index:120; width:38px; height:38px; border-radius:50%; border:1px solid var(--stroke); background:rgba(18,26,44,.92); color:var(--text); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;}
.fallback-back[hidden]{display:none;}
.fallback-back svg{width:20px; height:20px;}

/* На юридических страницах свой заголовок уже есть в тексте, шапку с «Назад» убрали. */
#view-agree > .legal-title:first-child, #view-privacy > .legal-title:first-child{margin-top:14px;}