:root {
  --bg: #171b23;
  --bg-2: #202631;
  --text: #f5f7fb;
  --hint: #aab1bd;
  --accent: #b9c4d5;
  --accent-strong: #d9e2ef;
  --glass: rgba(225,232,242,.105);
  --glass-strong: rgba(225,232,242,.16);
  --stroke: rgba(255,255,255,.18);
  --stroke-soft: rgba(255,255,255,.09);
  --shadow: 0 16px 50px rgba(0,0,0,.28);
  --tg-safe-top: 0px;
  --tg-safe-bottom: 0px;
}
*{box-sizing:border-box}
html{min-height:100%;background:#151922}
body{margin:0;min-height:100vh;background:
 radial-gradient(600px 250px at 72% -4%,rgba(187,153,73,.25),transparent 65%),
 radial-gradient(450px 380px at -10% 45%,rgba(91,117,151,.18),transparent 70%),
 linear-gradient(160deg,#161a21,#202631 55%,#151922);
 color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
 padding-bottom:94px;overflow-x:hidden}
button,input,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}
.glass{background:rgba(48,54,65,.56);border:1px solid var(--stroke);box-shadow:var(--shadow);backdrop-filter:blur(26px) saturate(135%);-webkit-backdrop-filter:blur(26px) saturate(135%)}
.glass-soft{background:rgba(230,236,244,.12);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.glass-card{background:linear-gradient(145deg,rgba(235,241,248,.12),rgba(116,127,143,.07));border:1px solid var(--stroke-soft);border-radius:22px;box-shadow:0 12px 38px rgba(0,0,0,.17),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.ambient{position:fixed;pointer-events:none;filter:blur(50px);opacity:.32;border-radius:50%;z-index:-1}.ambient-a{width:160px;height:160px;right:-70px;top:80px;background:#8d6b31}.ambient-b{width:180px;height:180px;left:-90px;bottom:180px;background:#556c87}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;height:68px;padding:calc(10px + var(--tg-safe-top,0px)) 16px 10px;border-radius:0 0 22px 22px;border-top:0}
.brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;letter-spacing:-.02em}.brand-mark{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:14px}
.balance-chip{padding:8px 12px;border-radius:14px;font-size:13px;font-weight:700}
.screen{padding:18px 15px 28px;max-width:720px;margin:auto}.hero{padding:12px 3px 18px}.hero-compact{padding-bottom:10px}
.hero-eyebrow{font-size:10px;letter-spacing:.14em;color:#cbd3de;margin-bottom:7px;font-weight:700}.hero h1{font-size:27px;line-height:1.08;letter-spacing:-.035em;margin:0 0 8px}.hero h2,.hero h3{margin:0}.muted{color:var(--hint);font-size:13px;line-height:1.45;margin:0}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}.quick{border-radius:20px;color:var(--text);text-align:left;padding:14px;border:1px solid var(--stroke-soft)}.quick span{display:block;font-size:20px;margin-bottom:11px}.quick b,.quick small{display:block}.quick small{color:var(--hint);font-size:11px;margin-top:3px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:13px}.tile{background:rgba(230,236,244,.075);border:1px solid rgba(255,255,255,.10);border-radius:19px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;transition:.16s transform,.16s border-color;box-shadow:inset 0 1px rgba(255,255,255,.07)}.tile:active{transform:scale(.95);border-color:rgba(255,255,255,.34)}.tile-num{position:absolute;right:7px;bottom:5px;font-size:9px;color:rgba(255,255,255,.42)}
.btn{display:block;width:100%;border:1px solid transparent;border-radius:16px;padding:13px 15px;font-size:14px;font-weight:700;cursor:pointer;transition:.15s transform}.btn:active{transform:scale(.98)}.btn-primary{color:#171a20;background:linear-gradient(180deg,#e5ebf2,#bfc8d4);box-shadow:0 8px 24px rgba(0,0,0,.22)}.btn-ghost{color:var(--text);background:rgba(235,241,248,.08);border-color:var(--stroke-soft)}.back-btn{border:0;background:none;color:#cbd3de;font-size:14px;padding:3px 0 15px;cursor:pointer}
.form-card{padding:17px}.field{margin-bottom:18px}.field:last-child{margin-bottom:0}.field label{display:block;font-size:12px;color:#c0c7d1;margin-bottom:8px}.field label span{color:#858e9b;margin-left:4px}.chip-row{display:flex;flex-wrap:wrap;gap:7px}.chip{padding:9px 12px;border-radius:13px;background:rgba(230,236,244,.075);border:1px solid var(--stroke-soft);font-size:12px;cursor:pointer}.chip.selected{background:rgba(226,233,241,.18);border-color:rgba(255,255,255,.34);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.1)}
input[type=text],input[type=number],select{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--stroke-soft);background:rgba(8,11,16,.24);color:var(--text);outline:none;font-size:14px}input:focus,select:focus{border-color:rgba(255,255,255,.3)}.hint{font-size:11px;color:var(--hint);margin:9px 0 0}.preview-big{width:132px;height:132px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}.create-head{display:flex;align-items:center;gap:15px;padding:5px 0 18px}.create-head h1{font-size:23px;margin:0 0 5px}.checkout-bar{position:fixed;z-index:25;left:10px;right:10px;bottom:82px;border-radius:22px;padding:12px 13px}.checkout-row{display:flex;justify-content:space-between;align-items:center;padding:2px 2px;font-size:12px;color:var(--hint)}.checkout-row strong{color:var(--text);max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkout-buttons{display:grid;grid-template-columns:1.25fr 1fr;gap:8px}.checkout-buttons .btn{margin-top:9px;padding:12px}.spacer-for-sticky{height:145px}
.shop-banner{display:flex;align-items:center;gap:13px;padding:15px;margin-bottom:12px}.shop-banner>span{font-size:25px}.shop-banner div{flex:1}.shop-banner b,.shop-banner small{display:block}.shop-banner small{color:var(--hint);font-size:11px;margin-top:3px}.circle-btn{border:1px solid var(--stroke-soft);background:rgba(255,255,255,.09);color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer}
.gift-card{display:flex;align-items:center;gap:14px;padding:17px;margin-bottom:12px}.gift-icon{font-size:32px}.gift-card small,.gift-card strong{display:block}.gift-card small{color:var(--hint);font-size:11px}.gift-card strong{font-size:27px;margin-top:2px}
.profile-hero{display:flex;align-items:center;gap:14px;padding:16px;margin-bottom:11px}.profile-hero h2{margin:0;font-size:21px}.avatar-ring{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid var(--stroke);box-shadow:inset 0 1px rgba(255,255,255,.15)}.avatar-ring span{font-size:25px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:11px}.stat-card{padding:13px 11px}.stat-card small,.stat-card b{display:block}.stat-card small{font-size:10px;color:var(--hint);margin-bottom:5px}.stat-card b{font-size:15px}
.stack{display:flex;flex-direction:column;gap:8px}.list-row{background:rgba(230,236,244,.07);border:1px solid var(--stroke-soft);border-radius:15px;padding:12px 14px;display:flex;justify-content:space-between;font-size:13px}.empty-hint{color:var(--hint);font-size:13px;text-align:center;padding:24px}.status-paid{color:#e3c27b}.status-done{color:#9dd2ae}.status-failed,.status-refunded{color:#e79a9f}
.menu-list{display:flex;flex-direction:column;gap:9px}.menu-item{text-decoration:none;color:var(--text);display:flex;align-items:center;gap:13px;padding:13px;text-align:left;cursor:pointer}.menu-item>span{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:rgba(255,255,255,.08);font-size:18px}.menu-item div{flex:1}.menu-item b,.menu-item small{display:block}.menu-item small{font-size:11px;color:var(--hint);margin-top:3px}.menu-item i{font-style:normal;font-size:23px;color:#8993a0}.admin-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid var(--stroke-soft)}.admin-row:last-of-type{border-bottom:0}.admin-row div{flex:1}.admin-row b,.admin-row small{display:block}.admin-row small{font-size:11px;color:var(--hint);margin-top:3px}.admin-row input{max-width:120px}.admin-stats{grid-template-columns:repeat(2,1fr)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;height:78px;border-radius:22px 22px 0 0;display:flex;padding:8px 4px calc(8px + var(--tg-safe-bottom,0px));background:rgba(54,60,71,.70)}.tab-btn{flex:1;border:0;background:none;color:#9da5b1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:17px;cursor:pointer;font-size:10px;transition:.18s}.tab-btn b{font-size:10px;font-weight:600}.nav-icon{width:24px;height:24px;display:grid;place-items:center}.nav-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}.tab-btn.active{color:#f2f5f8;background:rgba(230,236,244,.12);box-shadow:inset 0 1px rgba(255,255,255,.13),0 3px 14px rgba(0,0,0,.12)}@media(min-width:600px){.tabbar{left:50%;transform:translateX(-50%);max-width:700px}.checkout-bar{max-width:680px;left:50%;right:auto;width:calc(100% - 20px);transform:translateX(-50%)}}


/* ===== Финальные UI/адаптивные фиксы ===== */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior: none; }
.glass, .glass-soft, .glass-card, .tile, .chip, input, select, .btn, .menu-item, .list-row, .stat-card {
  border-width: 1px;
  border-style: solid;
}
.glass-card { border-color: rgba(255,255,255,.16); }
.tile { border-color: rgba(255,255,255,.14); }
.btn { min-height: 44px; padding: 10px 14px; }
.compact-btn { width: auto; min-width: 118px; }
.custom-topup { display:flex; gap:8px; align-items:center; margin-top:10px; }
.custom-topup input { flex:1; min-width:0; }
.payment-methods { margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); }
.payment-title { font-size:12px; color:var(--hint); margin-bottom:8px; font-weight:700; }
.btn-crypto { color:#fff; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); }
.profile-avatar { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; }
.avatar-ring { overflow:hidden; border-radius:50% !important; }
.tabbar { border:1px solid rgba(255,255,255,.16); }
.tab-btn { min-width:0; }

@media (max-width: 599px) {
  input[type=text], input[type=number], select, textarea { font-size:16px !important; line-height:1.25; }
  input:focus, select:focus, textarea:focus { font-size:16px !important; }
  .custom-topup { flex-direction:row; }
  .compact-btn { min-width:104px; }
  .screen { padding-left:14px; padding-right:14px; }
}

@media (min-width: 600px) {
  body { padding-bottom:112px; }
  #app { width:100%; max-width:1280px; margin:0 auto; }
  .topbar { margin:0 18px; border-radius:0 0 24px 24px; padding-left:24px; padding-right:24px; }
  main { width:100%; }
  .screen { max-width:1180px; padding:28px 34px 42px; }
  .hero h1 { font-size:38px; }
  .hero p.muted { max-width:760px; font-size:15px; }
  .grid { grid-template-columns:repeat(5,minmax(120px,1fr)); gap:14px; }
  .quick-actions { grid-template-columns:repeat(2,minmax(260px,1fr)); max-width:720px; }
  .tile { border-radius:22px; }
  .create-head { max-width:900px; }
  .preview-big { width:180px; height:180px; }
  .form-card { max-width:900px; }
  .checkout-bar { max-width:920px; width:calc(100% - 68px); bottom:92px; padding:15px 18px; }
  .tabbar { left:50%; right:auto; bottom:14px; transform:translateX(-50%); width:min(980px,calc(100% - 40px)); height:82px; border-radius:24px; padding:8px; }
  .tab-btn { border-radius:18px; font-size:12px; }
  .tab-btn b { font-size:12px; }
  .nav-icon, .nav-icon svg { width:28px; height:28px; }
  .stats-grid { max-width:900px; }
  .profile-hero { max-width:900px; padding:22px; }
  .avatar-ring { width:78px; height:78px; }
  .profile-hero h2 { font-size:28px; }
  .glass-card { border-radius:24px; }
  .menu-list { max-width:900px; }
}

@media (min-width: 1000px) {
  .grid { grid-template-columns:repeat(6,minmax(120px,1fr)); }
  .screen { padding-left:46px; padding-right:46px; }
}

/* ===== FIX: fixed glass frame + internal scrolling ===== */
html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}
body {
  padding: 0 !important;
  overscroll-behavior: none;
}
#app {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 60px rgba(0,0,0,.25);
}
#app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: inherit;
}
#app main {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.20) transparent;
  padding-bottom: 105px;
}
#app main::-webkit-scrollbar { width: 6px; }
#app main::-webkit-scrollbar-track { background: transparent; }
#app main::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.20);
  border-radius: 99px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.topbar {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 !important;
  border-radius: 27px 27px 0 0 !important;
  border-top: 0 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.12), inset 0 -1px rgba(255,255,255,.06);
}
.tabbar {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  height: 78px;
  border-radius: 22px !important;
  z-index: 90;
  box-shadow: 0 12px 36px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.08);
}
.checkout-bar {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 92px !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  z-index: 85;
}
.spacer-for-sticky { height: 155px; }
.screen { max-width: 1180px; }

@media (min-width: 600px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #app {
    width: min(1180px, calc(100vw - 24px));
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 30px;
  }
  .topbar { border-radius: 29px 29px 0 0 !important; }
  #app main { top: 72px; padding-bottom: 120px; }
  .tabbar {
    left: 22px !important;
    right: 22px !important;
    bottom: 16px !important;
    height: 82px;
    border-radius: 24px !important;
  }
  .checkout-bar {
    left: 50% !important;
    right: auto !important;
    width: min(920px, calc(100% - 90px)) !important;
    transform: translateX(-50%) !important;
    bottom: 110px !important;
  }
}

@media (max-width: 599px) {
  #app { border-radius: 26px; }
  .topbar { border-radius: 25px 25px 0 0 !important; }
  #app main { top: 68px; padding-bottom: 110px; }
  .tabbar { left: 7px !important; right: 7px !important; bottom: 7px !important; }
  .checkout-bar { left: 9px !important; right: 9px !important; bottom: 91px !important; }
}

/* ===== Final compatibility / PC restore ===== */
@media (min-width:600px){
  body{display:block;align-items:initial;justify-content:initial;padding:0!important;}
  #app{width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;border-radius:28px;}
  .screen{max-width:720px;padding:18px 15px 28px;}
  .hero h1{font-size:27px}.hero p.muted{max-width:none;font-size:13px}
  .grid{grid-template-columns:repeat(3,1fr);gap:10px}.quick-actions{max-width:none;grid-template-columns:1fr 1fr}
  .preview-big{width:132px;height:132px}.form-card{max-width:none}.profile-hero{max-width:none;padding:16px}.avatar-ring{width:58px;height:58px}.profile-hero h2{font-size:21px}.glass-card{border-radius:22px}.menu-list{max-width:none}
  #app main{top:68px;padding-bottom:120px}.tabbar{left:10px!important;right:10px!important;bottom:10px!important;width:auto!important;height:78px!important;border-radius:22px!important;transform:none!important}
  .checkout-bar{left:12px!important;right:12px!important;bottom:92px!important;width:auto!important;max-width:none!important;transform:none!important}
}
@media (min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}.screen{padding-left:15px;padding-right:15px}}
.pack-open{color:var(--text);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pack-open:hover{text-decoration:underline}.pack-link-row{gap:10px}
.promo-card{padding:16px;margin-bottom:11px}.promo-card h3{margin:0 0 5px}.promo-card input{margin-top:12px}.promo-card .btn{margin-top:8px}
.market-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:10px 0}.market-actions .chip{white-space:nowrap}.market-item{border:1px solid var(--stroke-soft);border-radius:18px;padding:9px;background:rgba(255,255,255,.035)}.market-buy{margin-top:7px}.market-preview{min-height:110px}
.modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(5,8,12,.55);backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px}.modal{width:min(420px,100%);padding:18px}.modal h3{margin:0 0 5px}.modal-close{position:absolute;margin-top:-8px;margin-left:calc(100% - 34px);width:30px;height:30px;border:1px solid var(--stroke-soft);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:1}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.admin-extra{display:flex;flex-direction:column;gap:10px;margin-top:10px}.admin-section{padding:15px}.admin-section h3{margin:0 0 10px}.admin-actions{display:flex;flex-wrap:wrap;gap:7px}.admin-list{display:flex;flex-direction:column;gap:7px}.admin-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--stroke-soft)}.admin-item:last-child{border-bottom:0}.admin-item small,.admin-item b{display:block}.admin-item small{color:var(--hint);font-size:11px;margin-top:2px}.admin-inline{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;align-items:center}.admin-inline input{min-width:0}.admin-inline .btn{width:auto;margin-top:0;white-space:nowrap}.admin-section textarea{width:100%;min-height:100px;resize:vertical;border:1px solid var(--stroke-soft);border-radius:14px;background:rgba(8,11,16,.24);color:var(--text);padding:12px;font-size:16px;outline:none}.admin-section textarea:focus{border-color:rgba(255,255,255,.3)}
@media(max-width:599px){.admin-inline{grid-template-columns:1fr 1fr}.admin-inline .btn{grid-column:1/-1}.modal-actions{grid-template-columns:1fr}.modal-backdrop{padding:12px}.modal{border-radius:22px}}

/* ===== Payment / market final layout fix ===== */
.checkout-bar{
  position:sticky !important;
  left:auto !important; right:auto !important; bottom:10px !important;
  width:auto !important; max-width:none !important; transform:none !important;
  margin:16px 0 8px;
  background:rgba(48,55,67,.94);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 34px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}
.spacer-for-sticky{display:none;height:0}
.checkout-buttons .btn{min-height:46px;font-size:14px;font-weight:700;border-radius:14px}
.checkout-buttons{grid-template-columns:1fr 1fr}
.market-card{padding:14px;margin-bottom:12px;border:1px solid rgba(255,255,255,.16);border-radius:22px}
.market-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.market-card-head h3{margin:0 0 4px;font-size:17px}
.market-card-head small{color:var(--hint)}
.market-rating{white-space:nowrap;color:var(--hint);font-size:12px}
.market-pack-preview{height:180px;margin:12px 0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.12)}
.market-pack-preview canvas,.market-pack-preview img{max-width:100%;max-height:100%;object-fit:contain}
.market-numbers{display:flex;flex-wrap:wrap;gap:7px}
.market-number{min-width:42px;padding:9px 10px !important}
.market-selected{margin-top:12px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.035)}
.market-selected-head{display:flex;justify-content:space-between;gap:10px;color:var(--hint);font-size:12px}
.market-selected-head b{color:var(--text)}
.market-selected-actions{margin-top:9px}
.market-selected-actions .btn{width:100%}
.market-fonts{margin:10px 0 12px}
.market-modal input{font-size:16px !important;margin-bottom:10px}
.market-modal .field{margin-bottom:14px}
@media (min-width:600px){
  .screen{max-width:860px}
  .market-pack-preview{height:220px}
  .market-card{padding:18px}
}

/* ===== Final content safety / neutral pack links ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body, #app, #app main, .screen, .glass-card, .market-card, .modal, .profile-hero, .form-card {
  min-width: 0;
}
#app, #app main, .screen { overflow-x: hidden; }
h1, h2, h3, h4, p, small, label, b, strong, span, .muted, .hint,
.market-card-head, .market-selected-head, .checkout-row, .admin-item, .menu-item {
  overflow-wrap: anywhere;
  word-break: break-word;
}
input, textarea, select, button { max-width: 100%; }
.market-actions .pack-open,
.pack-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text) !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  text-decoration-line: none !important;
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,.055);
  border-radius: 12px;
  padding: 8px 11px;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.market-actions .pack-open:visited,
.market-actions .pack-open:hover,
.market-actions .pack-open:active,
.market-actions .pack-open:focus { color: var(--text) !important; text-decoration: none !important; outline: none; }
.market-actions .pack-open:hover { background: rgba(255,255,255,.09); }
.market-selected-actions .btn,
.modal-actions .btn { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .market-actions { align-items: stretch; }
  .market-actions .pack-open { max-width: 100%; white-space: normal; text-align: center; }
  .modal { max-height: calc(100dvh - 24px); overflow-y: auto; }
}

/* ===== Text/button overflow fix ===================================
   Flex and grid children default to min-width:auto, so long text
   (a username, a long chip label, a gift price, a channel name) can
   push past its own button/card and spill outside the app frame even
   though the frame itself has overflow-x:hidden. Forcing min-width:0
   on every row/grid item lets them actually shrink and wrap their
   text instead of overflowing. */
.quick-actions > .quick,
.grid > .tile,
.chip-row > .chip,
.admin-actions > .chip,
.checkout-buttons > .btn,
.modal-actions > .btn,
.stats-grid > .stat-card,
.admin-inline > *,
.market-numbers > .market-number,
.tabbar > .tab-btn,
.admin-row,
.admin-row > div,
.admin-item,
.admin-item > div,
.list-row,
.menu-item,
.menu-item > div,
.market-card-head,
.market-card-head > div,
.shop-banner,
.shop-banner > div,
.gift-card,
.profile-hero,
.profile-hero > div {
  min-width: 0;
}

button, .btn, .chip, .quick, .tile, .tab-btn,
.menu-item b, .menu-item small,
.admin-item b, .admin-item small,
.admin-row b, .admin-row small,
.list-row, .stat-card b, .stat-card small,
.market-selected-head, .admin-inline input {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* Короткие однословные ярлыки (вкладки навигации, 👍/👎) не переносим —
   их ширина всегда мала и предсказуема. Остальные чипы (шрифты,
   длинные подписи) переносятся по словам, как заданo правилом выше. */
.tabbar .tab-btn b,
.market-actions .chip {
  white-space: nowrap;
}

/* ================================================================
   REFERENCE DESIGN / DESKTOP FULLSCREEN FIX
   The controls/labels stay exactly as they are in HTML/JS; this block
   only changes layout, sizing and visual treatment.
   ================================================================ */

/* Desktop Mini App: use the entire Telegram WebView instead of a
   centered 1180px "phone/card" frame. */
@media (min-width: 600px) {
  html, body {
    width: 100vw;
    height: 100vh;
    min-width: 0;
    min-height: 100vh;
    overflow: hidden;
  }

  body {
    display: block !important;
    padding: 0 !important;
  }

  #app {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #app::before {
    border-radius: 0 !important;
    border: 0 !important;
  }

  #app main {
    top: 72px !important;
    bottom: 0 !important;
    padding: 0 0 132px !important;
  }

  .screen {
    width: min(1240px, 100%);
    max-width: none !important;
    margin: 0 auto;
    padding: 30px 48px 42px !important;
  }

  .topbar {
    height: 72px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    background: rgba(31,36,46,.88);
    box-shadow: 0 8px 28px rgba(0,0,0,.20), inset 0 -1px rgba(255,255,255,.07);
  }

  .hero h1 { font-size: 36px; }
  .hero p.muted { font-size: 15px; }
  .grid { grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 14px; }

  /* Reference-style bottom navigation: wide, rounded glass panel with
     a single active capsule. */
  .tabbar {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 18px !important;
    width: auto !important;
    height: 88px !important;
    max-width: none !important;
    transform: none !important;
    padding: 8px !important;
    border-radius: 26px !important;
    background: rgba(58,65,78,.82) !important;
    border: 1px solid rgba(255,255,255,.17) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.09) !important;
  }

  .tab-btn {
    min-height: 0 !important;
    height: 70px !important;
    min-width: 0 !important;
    border-radius: 21px !important;
    gap: 5px !important;
    padding: 7px 10px !important;
    color: #aab1bd;
    font-size: 12px !important;
    overflow: hidden !important;
  }

  .tab-btn.active {
    background: rgba(225,231,240,.18) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.15), 0 4px 16px rgba(0,0,0,.12) !important;
    color: #f5f7fb;
  }

  .nav-icon, .nav-icon svg {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px;
  }

  .tab-btn b {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 13px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* Keep the checkout inside the viewport above the navigation. */
  .checkout-bar {
    left: 50% !important;
    right: auto !important;
    bottom: 122px !important;
    width: min(920px, calc(100% - 96px)) !important;
    max-width: 920px !important;
    transform: translateX(-50%) !important;
    border-radius: 24px !important;
  }
}

/* Mobile keeps the Telegram-like rounded mini-app shell. */
@media (max-width: 599px) {
  #app {
    width: 100%;
    min-height: 100dvh;
  }

  .tabbar {
    height: 84px !important;
    padding: 7px !important;
    border-radius: 24px !important;
    background: rgba(58,65,78,.86) !important;
  }

  .tab-btn {
    height: 68px !important;
    padding: 6px 4px !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .tab-btn b {
    width: 100%;
    min-width: 0;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .nav-icon, .nav-icon svg {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px;
  }
}

/* Hard stop for text escaping its own visual container. */
.btn, .chip, .quick, .tile, .menu-item, .list-row,
.stat-card, .glass-card, .admin-item, .admin-row,
.market-card, .checkout-bar, .tab-btn {
  min-width: 0;
  overflow: hidden;
}

.btn, .chip, .quick, .menu-item, .list-row, .admin-item,
.admin-row, .market-card, .stat-card {
  overflow-wrap: anywhere;
}

.btn, .chip, .quick, .menu-item, .list-row, .admin-item,
.admin-row, .market-card, .stat-card {
  line-height: 1.25;
}

/* Inputs and selects must never make a card wider than its parent. */
input, textarea, select, button {
  min-width: 0;
  max-width: 100%;
}

/* Do not let long usernames / pack names stretch flex children. */
.profile-hero > div,
.profile-hero h2,
.profile-hero .muted,
.menu-item > div,
.market-card-head > div,
.checkout-row > strong {
  min-width: 0;
  max-width: 100%;
}

.checkout-row > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ===== FINAL DESKTOP/MOBILE NAV + LAYOUT OVERRIDES ===== */
html, body { width:100%; min-width:0; }
body { overflow:hidden; }
#app { width:100%; min-width:0; }

/* The Telegram client owns the outer window size. Inside that viewport the app
   must always consume 100% of the available width/height. */
@media (min-width:600px) {
  html, body { width:100%; height:100%; min-height:100%; }
  #app {
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  #app main {
    top:72px !important;
    bottom:0 !important;
    width:100% !important;
    padding:0 0 132px !important;
  }
  .screen {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:30px clamp(24px, 4vw, 64px) 42px !important;
  }

  /* Reference screenshot: wide glass navigation, with the existing bot tabs. */
  .tabbar {
    position:absolute !important;
    left:20px !important;
    right:20px !important;
    bottom:18px !important;
    width:auto !important;
    max-width:none !important;
    height:92px !important;
    padding:8px !important;
    display:flex !important;
    gap:6px !important;
    border-radius:28px !important;
    background:rgba(72,80,94,.78) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:0 16px 46px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.10) !important;
    backdrop-filter:blur(28px) saturate(130%);
    -webkit-backdrop-filter:blur(28px) saturate(130%);
    overflow:hidden !important;
  }
  .tab-btn {
    flex:1 1 0 !important;
    width:0 !important;
    min-width:0 !important;
    height:76px !important;
    min-height:0 !important;
    padding:8px 10px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:22px !important;
    background:transparent !important;
    color:rgba(239,243,248,.66) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    overflow:hidden !important;
    box-shadow:none !important;
  }
  .tab-btn.active {
    color:#f7f9fc !important;
    background:rgba(225,231,240,.19) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.15), 0 5px 18px rgba(0,0,0,.12) !important;
  }
  .nav-icon, .nav-icon svg {
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
  }
  .nav-icon svg { stroke-width:1.65 !important; }
  .tab-btn b {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    font-size:14px !important;
    line-height:18px !important;
    font-weight:600 !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  /* Cards/content can use the whole desktop viewport instead of being forced
     into the old phone-width 1180px frame. */
  .hero { max-width:100%; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; }
  .quick-actions { max-width:none !important; }
  .profile-hero, .stats-grid, .menu-list, .form-card, .create-head { max-width:none !important; }

  /* Prevent any child from widening a flex/grid track. */
  .screen, .screen > *, .glass-card, .quick, .menu-item, .market-card,
  .profile-hero, .stat-card, .tabbar, .tab-btn, .tab-btn b, .nav-icon {
    min-width:0 !important;
  }
}

/* Same reference treatment on mobile, but keep Telegram's compact shell. */
@media (max-width:599px) {
  #app { width:100% !important; min-width:0 !important; }
  .tabbar {
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    width:auto !important;
    max-width:none !important;
    height:84px !important;
    padding:7px !important;
    gap:4px !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }
  .tab-btn {
    flex:1 1 0 !important;
    width:0 !important;
    min-width:0 !important;
    height:68px !important;
    min-height:0 !important;
    padding:6px 4px !important;
    gap:3px !important;
    border-radius:20px !important;
    overflow:hidden !important;
  }
  .nav-icon, .nav-icon svg { width:27px !important; height:27px !important; flex:0 0 27px !important; }
  .tab-btn b {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:11px !important;
    line-height:14px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

/* ===== Market pack preview: render every emoji, not only the selected one ===== */
.market-pack-preview.market-pack-preview-grid {
  height:auto;
  min-height:180px;
  padding:8px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  align-items:stretch;
  justify-content:stretch;
}
.market-preview-cell {
  position:relative;
  min-width:0;
  min-height:132px;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(230,236,244,.075);
  border:1px solid rgba(255,255,255,.09);
  cursor:pointer;
}
.market-preview-cell.selected {
  border-color:rgba(255,255,255,.42);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.10);
}
.market-preview-stage {
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.market-preview-stage svg,
.market-preview-stage canvas,
.market-preview-stage img {
  width:100% !important;
  height:100% !important;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.market-preview-badge {
  position:absolute;
  z-index:2;
  left:6px;
  top:6px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(25,30,38,.72);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:10px;
  font-weight:700;
  pointer-events:none;
}
.market-card-head > div:first-child { min-width:0; flex:1; }
.market-card-head h3,
.market-card-head small,
.market-selected-head b,
.market-selected-head span {
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.market-card-head small { display:block; line-height:1.35; }
.market-rating { max-width:38%; overflow:hidden; text-overflow:ellipsis; }

@media (max-width: 599px) {
  .market-pack-preview.market-pack-preview-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    min-height:150px;
  }
  .market-preview-cell { min-height:118px; }
}

/* Never let long Russian labels escape a button/card. */
.btn, .chip, .tab-btn, .menu-item, .quick, .market-actions .pack-open,
.market-selected-actions, .modal, .modal-actions > .btn {
  overflow:hidden;
  min-width:0;
}
.btn, .chip, .tab-btn b, .menu-item b, .menu-item small {
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}


/* ===== v5 reference navigation / overflow hardening ===== */
.nav-more-icon svg { fill:none !important; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.tab-btn b { text-overflow:ellipsis; }
.btn, .chip, .quick, .menu-item, .list-row, .admin-item, .admin-row, .market-card {
  max-width:100%; overflow:hidden;
}
.btn, .chip, .quick b, .quick small, .menu-item b, .menu-item small, .list-row > span, .admin-item > *, .admin-row > * {
  min-width:0; max-width:100%; overflow-wrap:anywhere;
}
.pack-open {
  border:1px solid var(--stroke-soft); background:rgba(235,241,248,.08); color:var(--text);
  border-radius:14px; padding:10px 13px; cursor:pointer; font:inherit; font-weight:600;
  min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.market-actions { min-width:0; }
@media (min-width:600px) {
  .tabbar .nav-more-icon svg { width:38px !important; height:38px !important; }
}
@media (max-width:599px) {
  .tabbar .nav-more-icon svg { width:27px !important; height:27px !important; }
}
/* ===== FIX: текст внутри рамки + крестики ===== */

* {
    box-sizing: border-box;
}

/* Любые поля ввода в Mini App */
input[type="text"],
input[type="number"],
textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;

    line-height: 1.25;
}

/* Если это именно большое поле ввода текста */
textarea {
    resize: none;
    min-height: 54px;
    max-height: 160px;
}

/* Контейнер поля не должен расширяться из-за текста */
.field,
.form-card,
.input-wrapper,
.text-input-wrapper,
.text-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* Крестики / кнопки закрытия */
.modal-close,
.close,
.close-btn,
.corner,
.frame-corner {
    box-sizing: border-box;

    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    line-height: 1 !important;
    text-align: center !important;

    overflow: visible !important;
    flex-shrink: 0 !important;
}

/* Конкретно твой крестик модального окна */
.modal {
    position: relative;
    width: min(420px, calc(100% - 24px));
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    overflow: visible;
}

.modal-close {
    position: absolute !important;

    top: 12px !important;
    right: 12px !important;

    margin: 0 !important;

    font-size: 20px !important;
    line-height: 30px !important;

    border-radius: 50%;
}

/* Чтобы содержимое модалки не вылезало */
.modal h3,
.modal p,
.modal input,
.modal textarea,
.modal .btn {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Мобильные */
@media (max-width: 599px) {
    input[type="text"],
    input[type="number"],
    textarea {
        width: 100%;
        max-width: 100%;
        font-size: 16px !important;
    }

    .modal {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        margin: 0 auto;
    }

    .modal-close {
        top: 10px !important;
        right: 10px !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }
}
.crypto-hint,
.crypto-info,
.payment-hint,
.payment-description {
    width: 100%;
    max-width: 100%;
    padding: 0 8px;

    box-sizing: border-box;
    text-align: center;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    line-height: 1.35;
}
/* ===== FIX CRYPTO PAYMENT TEXT ===== */

.payment-methods,
.payment-methods p,
.payment-methods .hint,
.payment-methods .muted,
.payment-methods small {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.payment-methods p,
.payment-methods .hint,
.payment-methods .muted,
.payment-methods small {
    display: block;
    margin-left: 0;
    margin-right: 0;

    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;

    line-height: 1.4;
    text-align: center;
}

/* Если текст находится прямо внутри карточки оплаты */
.modal p,
.modal .hint,
.modal .muted {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;

    text-align: center;
    line-height: 1.4;
}

/* Крестик модального окна — полностью внутри карточки */
.modal {
    position: relative !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.modal-close {
    position: absolute !important;

    top: 10px !important;
    right: 10px !important;

    margin: 0 !important;

    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    line-height: 1 !important;
    font-size: 20px !important;

    box-sizing: border-box !important;
}
/* ===== FIX: МОИ НАБОРЫ НЕ ВЫЛЕЗАЮТ ЗА ВЕРХНЮЮ РАМКУ ===== */

.my-sets,
.my-packs,
.my-sets-list,
.packs-list,
.sets-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    overflow: hidden !important;
}

/* Сама карточка набора */
.my-sets .card,
.my-packs .card,
.my-sets-list .card,
.packs-list .card,
.sets-list .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Если наборы находятся внутри общей рамки */
.my-sets,
.my-packs {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* На телефоне */
@media (max-width: 599px) {
    .my-sets,
    .my-packs,
    .my-sets-list,
    .packs-list,
    .sets-list {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}
/* ===== FIX: МОИ НАБОРЫ НЕ ВЫЛЕЗАЮТ ЗА ВЕРХНЮЮ РАМКУ ===== */

.my-sets,
.my-packs,
.my-sets-list,
.packs-list,
.sets-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    overflow: hidden !important;
}

/* Сама карточка набора */
.my-sets .card,
.my-packs .card,
.my-sets-list .card,
.packs-list .card,
.sets-list .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Если наборы находятся внутри общей рамки */
.my-sets,
.my-packs {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* На телефоне */
@media (max-width: 599px) {
    .my-sets,
    .my-packs,
    .my-sets-list,
    .packs-list,
    .sets-list {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}
/* ============================================= */
/* 🔹 ИСПРАВЛЕНИЯ ДЛЯ "ПОПОЛНИТЬ БАЛАНС" (увеличение рамки и текста) */
/* ============================================= */
.form-card {
  padding: 22px 18px !important; /* Было ~17px → теперь шире */
  margin-bottom: 24px !important; /* Отступ снизу */
  background: rgba(48, 54, 65, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(20px) !important;
}

/* Заголовок "Пополнить баланс" */
.form-card h2 {
  font-size: 19px !important;
  margin-bottom: 18px !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* Кнопки с суммами (50, 100, 250...) */
.chip-row {
  gap: 10px !important;
  margin-bottom: 20px !important;
}

.chip {
  padding: 12px 18px !important; /* Было ~9px 12px */
  font-size: 15px !important; /* Было 12px */
  min-height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.15s !important;
}
.chip:hover {
  background: rgba(225, 231, 240, 0.15) !important;
}

/* Поле "Своя сумма" */
.field input {
  padding: 14px 16px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
  background: rgba(8, 11, 16, 0.3) !important;
}

/* Кнопка "Пополнить" */
.btn {
  padding: 14px 20px !important;
  font-size: 16px !important;
  border-radius: 16px !important;
  min-height: 48px !important;
}

/* ============================================= */
/* 🔹 ИСПРАВЛЕНИЯ ДЛЯ "МОИ НАБОРЫ" (чтобы не залезала на другие рамки) */
/* ============================================= */
.form-card + .form-card {
  margin-top: 24px !important; /* Отступ между ВСЕМИ карточками */
}

/* Специально для "Мои наборы" (если нужно больше отступа) */
.form-card:has(h2:contains("Мои наборы")) {
  margin-top: 28px !important;
}

/* Fallback для браузеров, где :has не работает */
.form-card:nth-of-type(3) {
  margin-top: 28px !important;
}

/* Увеличиваем карточки в "Мои наборы" */
.list-row {
  padding: 14px 16px !important;
  border-radius: 16px !important;
  margin-bottom: 10px !important;
  background: rgba(230, 236, 244, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.list-row > span {
  font-size: 15px !important;
}

/* ============================================= */
/* 🔹 ДОПОЛНИТЕЛЬНЫЕ ФИКСЫ (чтобы ничего не ломалось) */
 /* ============================================= */
/* Убираем лишние отступы у родительских контейнеров */
.screen {
  padding-bottom: 120px !important; /* Чтобы не резало низ */
}

/* Фиксируем отступы на мобильных */
@media (max-width: 599px) {
  .form-card {
    padding: 18px 14px !important;
  }
  .chip {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
  .list-row {
    padding: 12px 14px !important;
  }
}
/* ============================================= */
/* 🔥 УВЕЛИЧЕНИЕ СЕКЦИИ "ПОПОЛНИТЬ БАЛАНС"               */
/* ============================================= */
.form-card {
  padding: 22px 18px !important;
  margin-bottom: 24px !important;
  background: rgba(48, 54, 65, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(20px) !important;
}

/* Заголовок "Пополнить баланс" */
.form-card h2 {
  font-size: 19px !important;
  margin-bottom: 18px !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* Кнопки с суммами (50, 100, 250...) */
.chip-row {
  gap: 10px !important;
  margin-bottom: 20px !important;
}

.chip {
  padding: 12px 18px !important;
  font-size: 15px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.15s !important;
}
.chip:hover {
  background: rgba(225, 231, 240, 0.15) !important;
}

/* Поле "Своя сумма" */
.field input {
  padding: 14px 16px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
  background: rgba(8, 11, 16, 0.3) !important;
}

/* Кнопка "Пополнить" */
.btn {
  padding: 14px 20px !important;
  font-size: 16px !important;
  border-radius: 16px !important;
  min-height: 48px !important;
}

/* ============================================= */
/* 🔥 ОТСТУПЫ МЕЖДУ СЕКЦИЯМИ (чтобы "Мои наборы" не залезали) */
/* ============================================= */
.form-card + .form-card {
  margin-top: 24px !important; /* Отступ между ВСЕМИ карточками */
}

/* Увеличиваем карточки в "Мои наборы" */
.list-row {
  padding: 14px 16px !important;
  border-radius: 16px !important;
  margin-bottom: 10px !important;
  background: rgba(230, 236, 244, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.list-row > span {
  font-size: 15px !important;
}

/* ============================================= */
/* 🔥 АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ                  */
/* ============================================= */
@media (max-width: 599px) {
  .form-card {
    padding: 18px 14px !important;
  }
  .chip {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
  .list-row {
    padding: 12px 14px !important;
  }
}