:root{
 --bg:#080c12;--bg2:#0c1118;--panel:#111821;--panel2:#161f2a;
 --border:rgba(255,255,255,.085);--border-strong:rgba(255,255,255,.15);
 --text:#f2f5f8;--muted:#929daa;--accent:#d7dce4;--accent-dark:#aeb7c3;
 --shadow:0 24px 80px rgba(0,0,0,.42);--radius:18px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:
 radial-gradient(circle at 12% 0,rgba(115,132,159,.13),transparent 30%),
 radial-gradient(circle at 88% 10%,rgba(255,255,255,.025),transparent 30%),
 var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(1180px,calc(100% - 36px));margin:auto}
.panel{background:linear-gradient(180deg,rgba(23,31,41,.97),rgba(14,20,28,.98));border:1px solid var(--border);box-shadow:var(--shadow)}
.brand{display:inline-flex;align-items:center;gap:11px}
.brand img{width:44px;height:44px}
.brand span{display:grid;line-height:.95}
.brand strong{font-size:16px;letter-spacing:.11em}
.brand small{font-size:10px;letter-spacing:.31em;color:#a9b3bf}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;border:1px solid var(--border-strong);border-radius:10px;background:linear-gradient(180deg,var(--accent),var(--accent-dark));color:#0a0e13;font-weight:800;transition:.18s}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-secondary{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));color:var(--text);box-shadow:none}
.btn-small{min-height:38px;padding:8px 14px}
.wide{width:100%}
.eyebrow,.caption{font-size:11px;font-weight:850;letter-spacing:.15em;color:#bdc6d1}
.public-header{min-height:76px;display:flex;align-items:center;justify-content:space-between}
.public-nav{display:flex;align-items:center;gap:24px;color:#aeb8c3}
.hero{min-height:650px;padding:70px 0;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.hero h1{font-size:clamp(44px,6vw,72px);line-height:1.02;letter-spacing:-.045em;margin:17px 0 22px}
.lead{font-size:18px;line-height:1.65;color:#9da8b5;max-width:690px}
.hero-actions{display:flex;gap:12px;margin-top:28px}
.hero-notes{display:flex;gap:21px;flex-wrap:wrap;margin-top:24px;color:#8f9aa7;font-size:13px}
.hero-notes span:before{content:"◈";margin-right:7px;color:#cad1da}
.hero-visual{position:relative;overflow:hidden;border-radius:27px;padding:28px}
.ambient{position:absolute;border-radius:50%;filter:blur(2px)}
.ambient-one{width:220px;height:220px;background:rgba(170,184,206,.055);top:-70px;right:-50px}
.ambient-two{width:180px;height:180px;background:rgba(255,255,255,.028);bottom:-70px;left:-50px}
.hero-logo{display:block;width:155px;height:155px;margin:2px auto 22px;position:relative}
.hero-status{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:18px}
.hero-status div{display:grid;gap:6px}
.hero-status strong{font-size:29px}
.status-pill,.status-chip,.table-status{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.065);color:#d6dde6;font-size:11px;font-weight:850}
.hero-data{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:17px 0}
.hero-data div{display:grid;gap:4px;padding:13px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid var(--border)}
.hero-data span{font-size:12px;color:var(--muted)}
.demo-key,.key-field,.key-large{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--border);border-radius:10px;background:#0a0f15}
.demo-key code,.key-field code,.key-large code{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b8c2cd}
.demo-key button,.key-field button{border:0;border-radius:7px;background:rgba(255,255,255,.06);color:white;padding:8px 11px}
.section{padding:78px 0}
.section-heading{margin-bottom:28px}
.section-heading.center{text-align:center}
.section-heading h2{font-size:40px;margin:10px 0}
.section-heading p{color:var(--muted);margin:0}
.feature-grid,.plans-grid,.instructions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature,.plan{border-radius:17px;padding:24px}
.feature-icon,.instruction-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--border);font-size:21px}
.feature p,.plan p,.plan li{color:#939eaa;line-height:1.6}
.plan{position:relative}
.plan.recommended{border-color:rgba(220,226,234,.42)}
.plan-badge{position:absolute;top:-11px;right:15px;padding:6px 10px;border-radius:999px;background:#d7dce4;color:#0b0f14;font-size:11px;font-weight:850}
.price{font-size:40px;font-weight:900;margin:17px 0}
.plan ul{padding-left:19px;line-height:1.9}
.footer{min-height:76px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;color:#8d98a5;font-size:13px}

/* auth */
.auth-page{display:grid;place-items:center;padding:24px}
.auth-layout{width:min(1000px,100%);display:grid;grid-template-columns:.92fr 1.08fr;gap:22px}
.auth-promo{min-height:660px;padding:28px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-promo:before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;left:50%;top:48%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.04);background:radial-gradient(circle,rgba(135,151,178,.07),transparent 67%)}
.auth-brand{position:relative;z-index:1}
.promo-center{position:relative;z-index:1;margin:auto;text-align:center;max-width:420px}
.promo-logo-wrap{width:210px;height:210px;margin:0 auto 28px}
.promo-logo-wrap img{width:100%;height:100%}
.promo-center h1{font-size:43px;line-height:1.05;letter-spacing:-.035em;margin:13px 0 17px}
.promo-center p{color:#929daa;line-height:1.6}
.promo-security{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.promo-security span{padding:8px 11px;border:1px solid var(--border);border-radius:999px;color:#9faab6;font-size:12px;background:rgba(255,255,255,.025)}
.auth-card{border-radius:22px;padding:34px;align-self:center}
.back-link{display:inline-block;color:#a9b4c0;margin-bottom:28px}
.auth-heading h2{font-size:35px;letter-spacing:-.025em;margin:0 0 12px}
.auth-heading p{color:#929daa;line-height:1.6;margin:0 0 20px}
.telegram-btn{background:linear-gradient(180deg,#36404d,#252d38);color:white}
.secure-note{text-align:center;color:#7f8b98;font-size:12px;margin-top:12px}
.divider{display:flex;align-items:center;gap:10px;color:#6f7a86;font-size:12px;margin:21px 0}
.divider:before,.divider:after{content:"";height:1px;flex:1;background:var(--border)}
.form{display:grid;gap:14px}
.form label{display:grid;gap:7px;color:#c5ccd5;font-size:13px}
input{width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:9px;background:#0a0f15;color:white;outline:none}
input:focus{border-color:rgba(220,226,234,.35);box-shadow:0 0 0 3px rgba(255,255,255,.035)}
.form-hint{font-size:12px;color:#7f8a96;line-height:1.5;margin:18px 0 0}
.security-box{margin-top:20px;padding:14px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.025)}
.security-box p{margin:5px 0 0;color:#8e99a6;font-size:12px;line-height:1.5}

/* dashboard */
.dashboard-layout{min-height:100vh;display:grid;grid-template-columns:232px 1fr}
.sidebar{position:sticky;top:0;height:100vh;padding:20px 14px;background:#090e14;border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:50}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;padding:0 7px;margin-bottom:27px}
.mobile-close{display:none;border:0;background:transparent;color:white;font-size:30px}
.side-nav{display:grid;gap:5px}
.nav-btn{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#9ba6b2;padding:11px 12px;border-radius:9px;text-align:left;font-weight:700}
.nav-btn:hover,.nav-btn.active{background:rgba(255,255,255,.055);color:white}
.nav-btn.active{box-shadow:inset 3px 0 0 #d5dae2}
.nav-btn span{width:18px;text-align:center}
.nav-divider{height:1px;background:var(--border);margin:8px 4px}
.support-mini{margin-top:auto;border-radius:12px;padding:10px;display:flex;align-items:center;gap:9px}
.support-mini img{width:35px;height:35px}
.support-mini div{display:grid;gap:3px}
.support-mini strong{font-size:12px}
.support-mini span{font-size:10px;color:var(--muted)}
.logout-button{border:0;background:transparent;color:#aab4bf;padding:13px 8px;text-align:left;margin-top:7px}
.dashboard-main{min-width:0;padding:23px 28px 44px}
.dashboard-header{display:flex;align-items:center;gap:15px;margin-bottom:23px}
.page-title{flex:1}
.page-title h1{font-size:30px;margin:0 0 5px}
.page-title p{color:var(--muted);margin:0}
.profile{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.025)}
.profile img{width:37px;height:37px}
.profile div{display:grid;gap:2px}
.profile span{font-size:11px;color:var(--muted)}
.menu-button{display:none;border:1px solid var(--border);background:rgba(255,255,255,.035);color:white;width:42px;height:42px;border-radius:10px;font-size:20px}
.tab-panel{display:none}
.tab-panel.active{display:block}
.access-banner{border-radius:17px;padding:22px;display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:16px}
.access-banner-main{display:flex;align-items:center;gap:17px}
.access-banner-main img{width:91px;height:91px}
.access-banner h2{font-size:29px;margin:7px 0}
.access-banner p{color:var(--muted);margin:0}
.access-expiry{display:grid;gap:5px;text-align:right;min-width:150px}
.access-expiry span,.access-expiry small{color:var(--muted)}
.access-expiry strong{font-size:25px}
.overview-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.dashboard-card,.content-card{border-radius:16px;padding:20px}
.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-heading h3{margin:7px 0}
.key-field{margin:16px 0 12px}
.key-card p,.connection-card p,.content-card p{color:var(--muted);line-height:1.55}
.usage-row{display:flex;align-items:end;gap:7px;margin:15px 0}
.usage-row strong{font-size:30px}
.usage-row span{color:var(--muted)}
.progress{height:8px;border-radius:999px;background:#28313b;overflow:hidden}
.progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#aeb7c3,#edf0f4)}
.usage-footer{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:10px}
.usage-footer strong{color:#d7dce4}
.connection-total{display:grid;margin:13px 0}
.connection-total strong{font-size:36px}
.connection-total span{color:var(--muted)}
.actions-card{grid-column:1/-1}
.action-row{width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.03);color:white;text-align:left;padding:13px;margin-top:10px}
.action-row span{display:grid;gap:3px}
.action-row small{color:var(--muted)}
.action-row b{font-size:20px}
.section-page-heading{margin-bottom:17px}
.section-page-heading h2{font-size:30px;margin:0 0 6px}
.section-page-heading p{color:var(--muted);margin:0}
.key-large{padding:12px}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.info-grid div{display:grid;gap:6px;padding:14px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.025)}
.info-grid span{font-size:12px;color:var(--muted)}
.dashboard-plans{max-width:990px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:13px 12px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
th{color:#909ba8;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1050px}
.stat-card>span{color:var(--muted)}
.stat-card>strong{display:block;font-size:32px;margin-top:12px}
.telegram-card{display:flex;align-items:center;gap:15px}
.telegram-card img{width:85px;height:85px}
.telegram-card h3{margin:7px 0}
.instruction-icon{margin-bottom:10px}
.support-card{display:flex;align-items:center;gap:17px}
.support-card img{width:82px;height:82px}
.support-card div{flex:1}
.support-card h3{margin:0 0 5px}
.sidebar-backdrop{display:none}
.toast{position:fixed;right:22px;bottom:22px;padding:13px 16px;border-radius:10px;background:#171f29;border:1px solid var(--border);box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:100}
.toast.show{opacity:1;transform:translateY(0)}

@media(max-width:1000px){
 .hero{grid-template-columns:1fr;min-height:auto;padding-top:45px}
 .hero-copy{text-align:center}
 .lead{margin-left:auto;margin-right:auto}
 .hero-actions,.hero-notes{justify-content:center}
 .feature-grid,.plans-grid,.instructions-grid{grid-template-columns:1fr}
 .auth-layout{grid-template-columns:1fr;max-width:620px}
 .auth-promo{min-height:460px}
 .promo-logo-wrap{width:155px;height:155px}
 .dashboard-layout{grid-template-columns:1fr}
 .sidebar{position:fixed;left:0;transform:translateX(-105%);transition:.22s;width:270px}
 .sidebar.open{transform:translateX(0)}
 .mobile-close,.menu-button{display:block}
 .sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40}
 .sidebar-backdrop.show{display:block}
 .dashboard-main{padding:18px 18px 36px}
}
@media(max-width:720px){
 .public-nav>a:not(.btn){display:none}
 .public-header{min-height:68px}
 .hero{padding:42px 0 55px;gap:35px}
 .hero h1{font-size:42px}
 .hero-actions{display:grid}
 .hero-notes{display:grid;gap:8px}
 .section{padding:58px 0}
 .section-heading h2{font-size:32px}
 .footer{display:grid;justify-items:center;gap:7px;padding:18px 0;text-align:center}
 .auth-page{padding:10px}
 .auth-promo{min-height:390px;padding:20px}
 .promo-center h1{font-size:34px}
 .auth-card{padding:24px}
 .auth-heading h2{font-size:30px}
 .dashboard-main{padding:14px 12px 30px}
 .profile div{display:none}
 .access-banner{align-items:flex-start}
 .access-banner-main img{width:67px;height:67px}
 .access-expiry{text-align:left;min-width:auto}
 .overview-grid,.two-column{grid-template-columns:1fr}
 .actions-card{grid-column:auto}
 .info-grid{grid-template-columns:1fr 1fr}
 .support-card{align-items:flex-start;flex-wrap:wrap}
 .support-card .btn{width:100%}
}
@media(max-width:480px){
 .container{width:min(100% - 24px,1180px)}
 .brand strong{font-size:14px}
 .hero h1{font-size:36px}
 .hero-visual{padding:20px}
 .hero-logo{width:125px;height:125px}
 .hero-data{grid-template-columns:1fr}
 .access-banner{display:grid}
 .access-banner-main{align-items:flex-start}
 .access-expiry{border-top:1px solid var(--border);padding-top:13px}
 .info-grid{grid-template-columns:1fr}
 .key-large{align-items:stretch;flex-direction:column}
 .key-large .btn{width:100%}
 .profile{padding:5px}
 .page-title h1{font-size:25px}
}

.hero-features {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.hero-features > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,.03);
}

.hero-features > div > span {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  color: #d7dce4;
  font-size: 18px;
}

.hero-features p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.hero-features strong {
  font-size: 14px;
}

.hero-features small {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 480px) {
  .hero-features > div {
    padding: 11px;
  }
}

/* Исправление правой карточки на главной */

.hero-status {
  display: block;
}

.hero-status > div {
  display: grid;
  gap: 8px;
}

.hero-status strong {
  display: block;
  max-width: 420px;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.hero-features {
  display: grid;
  gap: 11px;
  margin-top: 20px;
}

.hero-features > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
}

.hero-features > div > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  color: #d9dee6;
  font-size: 18px;
}

.hero-features p {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  margin: 0 !important;
  min-width: 0;
}

.hero-features strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
}

.hero-features small {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

@media (max-width: 480px) {
  .hero-status strong {
    font-size: 24px;
  }

  .hero-features > div {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 62px;
    padding: 11px 12px;
  }

  .hero-features > div > span {
    width: 38px;
    height: 38px;
  }
}

/* Исправление правой карточки на главной */

.hero-status {
  display: block;
}

.hero-status > div {
  display: grid;
  gap: 8px;
}

.hero-status strong {
  display: block;
  max-width: 420px;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.hero-features {
  display: grid;
  gap: 11px;
  margin-top: 20px;
}

.hero-features > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
}

.hero-features > div > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  color: #d9dee6;
  font-size: 18px;
}

.hero-features p {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  margin: 0 !important;
  min-width: 0;
}

.hero-features strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
}

.hero-features small {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

@media (max-width: 480px) {
  .hero-status strong {
    font-size: 24px;
  }

  .hero-features > div {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 62px;
    padding: 11px 12px;
  }

  .hero-features > div > span {
    width: 38px;
    height: 38px;
  }
}

/* Главная карточка — окончательное исправление */

.hero-features {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 20px !important;
}

.hero-feature-item {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 68px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.hero-feature-icon {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #d7dce4 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.hero-feature-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.hero-feature-text strong {
  display: block !important;
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}

.hero-feature-text span {
  display: block !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

@media (max-width: 480px) {
  .hero-feature-item {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 11px !important;
  }

  .hero-feature-icon {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Telegram Login Widget */

.telegram-widget-wrap {
  width: 100%;
  min-height: 50px;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.telegram-widget-wrap iframe {
  max-width: 100% !important;
}

@media (max-width: 480px) {
  .telegram-widget-wrap {
    overflow: hidden;
  }

  .telegram-widget-wrap iframe {
    transform-origin: center;
  }
}

/* QR-код подключения */

.subscription-qr-block {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.subscription-qr-image {
  display: flex;
  justify-content: center;
  padding: 9px;
  border-radius: 10px;
  background: #fff;
}

.subscription-qr-image img {
  display: block;
  width: 132px;
  height: 132px;
  object-fit: contain;
}

.subscription-qr-content {
  min-width: 0;
}

.subscription-qr-content strong {
  display: block;
  margin: 6px 0 8px;
  font-size: 18px;
}

.subscription-qr-content p {
  max-width: 570px;
  margin: 0;
}

@media (max-width: 600px) {
  .subscription-qr-block {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .subscription-qr-image {
    width: fit-content;
    margin: 0 auto;
  }
}

/* ===== Компактная раскладка главной страницы ===== */

.overview-grid {
  align-items: stretch;
}

/* Карточка ключа */
.key-card {
  display: flex;
  flex-direction: column;
}

.key-card > p {
  margin: 14px 0 0;
}

/* Компактный QR-блок */
.subscription-qr-block {
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 18px;
  margin-top: 16px;
  padding: 14px;
}

.subscription-qr-image {
  padding: 8px;
}

.subscription-qr-image img {
  width: 108px;
  height: 108px;
}

.subscription-qr-content strong {
  margin: 5px 0 6px;
  font-size: 17px;
}

.subscription-qr-content p {
  margin: 0;
  max-width: 510px;
  font-size: 14px;
  line-height: 1.5;
}

/* Кнопка инструкций */
.key-card > .btn {
  align-self: flex-start;
  margin-top: 14px;
}

/* Подключения на всю ширину */
.connection-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
  grid-template-areas:
    "caption caption caption"
    "total description button";
  gap: 8px 24px;
  align-items: center;
}

.connection-card > .caption {
  grid-area: caption;
}

.connection-card .connection-total {
  grid-area: total;
  margin: 6px 0 0;
}

.connection-card > p {
  grid-area: description;
  margin: 6px 0 0;
}

.connection-card > .btn {
  grid-area: button;
  width: auto;
  min-width: 230px;
  margin-top: 6px;
}

/* Трафик не растягиваем содержимым */
.usage-card {
  min-height: 0;
}

/* Мобильная версия */
@media (max-width: 760px) {
  .subscription-qr-block {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 14px;
    text-align: left;
  }

  .subscription-qr-image {
    width: auto;
    margin: 0;
  }

  .subscription-qr-image img {
    width: 94px;
    height: 94px;
  }

  .connection-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "caption"
      "total"
      "description"
      "button";
    gap: 6px;
  }

  .connection-card > .btn {
    width: 100%;
    min-width: 0;
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .subscription-qr-block {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .subscription-qr-image {
    width: fit-content;
    margin: 0 auto;
  }

  .subscription-qr-image img {
    width: 118px;
    height: 118px;
  }

  .key-card > .btn {
    width: 100%;
  }
}

/* ===== Финальная компоновка главной ===== */

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
  grid-template-areas:
    "key usage"
    "key connections"
    "actions actions";
  gap: 16px;
  align-items: stretch;
}

.key-card {
  grid-area: key;
}

.usage-card {
  grid-area: usage;
}

.connection-card {
  grid-area: connections;
}

.actions-card {
  grid-area: actions;
}

/* Большая карточка ключа */
.key-card {
  display: flex;
  flex-direction: column;
}

.key-card > .btn {
  margin-top: 14px;
}

/* Правая карточка трафика */
.usage-card {
  min-height: 190px;
}

/* Возвращаем подключения в компактный вертикальный вид */
.connection-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.connection-card > .caption {
  margin-bottom: 6px;
}

.connection-card .connection-total {
  margin: 8px 0 5px;
}

.connection-card > p {
  margin: 0 0 16px;
}

.connection-card > .btn {
  width: 100%;
  min-width: 0;
  margin-top: auto;
}

/* Немного аккуратнее QR */
.subscription-qr-block {
  flex: 1;
  grid-template-columns: 124px minmax(0, 1fr);
}

.subscription-qr-content {
  align-self: center;
}

/* Средние экраны */
@media (max-width: 1100px) {
  .overview-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  }
}

/* Планшеты и телефоны */
@media (max-width: 850px) {
  .overview-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "key"
      "usage"
      "connections"
      "actions";
  }

  .usage-card {
    min-height: 0;
  }
}

/* ===== Раздел «Мой доступ» ===== */

.access-details-card {
  padding: 24px;
}

.access-details-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 28px;
  align-items: stretch;
}

.access-key-column h3 {
  margin: 7px 0 8px;
  font-size: 24px;
}

.access-key-description {
  max-width: 760px;
  margin: 0 0 18px;
}

.access-key-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.access-key-field code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-key-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.access-key-actions .btn {
  text-decoration: none;
}

.access-key-actions .disabled {
  pointer-events: none;
  opacity: 0.5;
}

.access-qr-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.16);
  text-align: center;
}

.access-qr-image {
  margin-top: 12px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}

.access-qr-image img {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
}

.access-qr-column p {
  margin: 13px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.access-info-grid {
  margin-top: 24px;
}

.access-info-grid > div {
  min-height: 74px;
}

@media (max-width: 850px) {
  .access-details-main {
    grid-template-columns: 1fr;
  }

  .access-qr-column {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .access-details-card {
    padding: 18px;
  }

  .access-key-field {
    grid-template-columns: 1fr;
  }

  .access-key-field .btn {
    width: 100%;
  }

  .access-key-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .access-key-actions .btn {
    width: 100%;
    text-align: center;
  }

  .access-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .access-qr-image img {
    width: 145px;
    height: 145px;
  }
}

@media (max-width: 420px) {
  .access-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Платежи внутри раздела «Мой доступ» ===== */

.access-payments-section {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.access-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.access-section-heading h3 {
  margin: 7px 0 5px;
  font-size: 21px;
}

.access-section-heading p {
  margin: 0;
  color: var(--muted);
}

.access-payments-table {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.access-payments-table table {
  width: 100%;
}

.access-payments-table th,
.access-payments-table td {
  padding: 14px 16px;
}

@media (max-width: 700px) {
  .access-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .access-section-heading .btn {
    width: 100%;
  }

  .access-payments-table {
    overflow-x: auto;
  }

  .access-payments-table table {
    min-width: 680px;
  }
}

/* ===== Платежи внутри раздела «Мой доступ» ===== */

.access-payments-section {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.access-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.access-section-heading h3 {
  margin: 7px 0 5px;
  font-size: 21px;
}

.access-section-heading p {
  margin: 0;
  color: var(--muted);
}

.access-payments-table {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.access-payments-table table {
  width: 100%;
}

.access-payments-table th,
.access-payments-table td {
  padding: 14px 16px;
}

@media (max-width: 700px) {
  .access-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .access-section-heading .btn {
    width: 100%;
  }

  .access-payments-table {
    overflow-x: auto;
  }

  .access-payments-table table {
    min-width: 680px;
  }
}

/* ===== Раздел «Тарифы» ===== */

.plans-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 24px;
  margin-bottom: 26px;
}

.plans-current h3 {
  margin: 7px 0 5px;
  font-size: 23px;
}

.plans-current p {
  margin: 0;
  color: var(--muted);
}

.plans-current-expiry {
  display: grid;
  min-width: 180px;
  text-align: right;
}

.plans-current-expiry span,
.plans-current-expiry small {
  color: var(--muted);
}

.plans-current-expiry strong {
  margin: 4px 0;
  font-size: 25px;
}

.plans-section-heading {
  margin-bottom: 20px;
}

.plans-section-heading h2 {
  margin: 7px 0 6px;
}

.plans-section-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.dashboard-plans {
  align-items: stretch;
}

.dashboard-plans .plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 350px;
  padding: 24px;
}

.plan-top {
  display: grid;
  gap: 5px;
}

.plan-duration {
  font-size: 24px;
  font-weight: 800;
}

.plan-purpose {
  color: var(--muted);
  font-size: 14px;
}

.dashboard-plans .price {
  margin: 24px 0 18px;
}

.dashboard-plans .price strong {
  font-size: 38px;
  line-height: 1;
}

.plan-features {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.plan-features li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.45;
}

.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--text);
  font-weight: 800;
}

.dashboard-plans .plan .btn {
  margin-top: auto;
}

.dashboard-plans .recommended {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.25);
}

.plan-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plans-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
  padding: 18px 20px;
}

.plans-note-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-weight: 800;
}

.plans-note strong {
  display: block;
  margin-bottom: 4px;
}

.plans-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 850px) {
  .plans-current {
    align-items: flex-start;
  }

  .plans-current-expiry {
    min-width: 150px;
  }

  .dashboard-plans .recommended {
    transform: none;
  }
}

@media (max-width: 600px) {
  .plans-current {
    align-items: flex-start;
    flex-direction: column;
  }

  .plans-current-expiry {
    min-width: 0;
    text-align: left;
  }

  .dashboard-plans .plan {
    min-height: 0;
  }

  .plan-badge {
    position: static;
    width: fit-content;
    margin-bottom: 14px;
  }
}

/* ===== Раздел «Подключения» ===== */

.connections-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 24px;
  margin-bottom: 18px;
}

.connections-summary h3 {
  margin: 7px 0 5px;
  font-size: 24px;
}

.connections-summary p {
  margin: 0;
  color: var(--muted);
}

.connections-summary-side {
  display: grid;
  min-width: 150px;
  text-align: right;
}

.connections-summary-side span,
.connections-summary-side small {
  color: var(--muted);
}

.connections-summary-side strong {
  margin: 4px 0;
  font-size: 30px;
}

.connections-list-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.connections-list-heading h3 {
  margin: 7px 0 5px;
  font-size: 22px;
}

.connections-list-heading p {
  margin: 0;
  color: var(--muted);
}

.connections-table-wrap {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.connections-table-wrap table {
  width: 100%;
}

.connections-table-wrap th,
.connections-table-wrap td {
  padding: 14px 16px;
}

.connections-table-wrap code {
  white-space: nowrap;
}

.connections-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
  padding: 18px 20px;
}

.connections-note-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-weight: 800;
}

.connections-note strong {
  display: block;
  margin-bottom: 4px;
}

.connections-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .connections-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .connections-summary-side {
    min-width: 0;
    text-align: left;
  }

  .connections-list-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .connections-list-heading .btn {
    width: 100%;
  }

  .connections-table-wrap {
    overflow-x: auto;
  }

  .connections-table-wrap table {
    min-width: 650px;
  }
}

/* ===== Тестовый доступ на странице входа ===== */

.trial-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 25px 0 18px;
  color: #87929f;
  font-size: 12px;
  font-weight: 700;
}

.trial-divider::before,
.trial-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.trial-access-card {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 15px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(144, 157, 179, 0.08),
      transparent 42%
    ),
    rgba(255, 255, 255, 0.018);
}

.trial-badge {
  display: inline-flex;
  margin-bottom: 10px;
  color: #b7c0cb;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.trial-access-card h3 {
  margin: 0 0 7px;
  font-size: 20px;
}

.trial-access-card p {
  color: var(--muted);
  line-height: 1.55;
}

.trial-access-intro > p {
  margin: 0 0 14px;
}

.trial-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.trial-features span {
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: #aeb8c4;
  font-size: 11px;
  font-weight: 700;
}

.trial-small-note,
.trial-bot-note {
  margin: 10px 0 0 !important;
  text-align: center;
  font-size: 11px;
}

.trial-access-result[hidden],
.trial-access-intro[hidden] {
  display: none !important;
}

.trial-result-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}

.trial-result-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.trial-active-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8da898;
  box-shadow: 0 0 12px rgba(141, 168, 152, 0.55);
}

.trial-timer {
  min-width: 63px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.trial-timer.expired {
  color: #a99090;
}

.trial-result-text {
  margin: 0 0 14px;
}

.trial-key-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin-bottom: 12px;
}

.trial-key-field code {
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: #b9c3ce;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trial-key-field .btn {
  min-height: 42px;
  padding-inline: 13px;
}

.trial-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
  color: #7f8a96;
  font-size: 11px;
}

.trial-meta strong {
  color: #aeb8c4;
}

.trial-bot-button {
  margin-top: 2px;
}

@media (max-width: 520px) {
  .trial-access-card {
    padding: 17px;
  }

  .trial-result-heading {
    align-items: flex-start;
  }

  .trial-key-field {
    grid-template-columns: 1fr;
  }

  .trial-key-field .btn {
    width: 100%;
  }

  .trial-meta {
    flex-direction: column;
    gap: 4px;
  }
}

/* ===== Тестовый доступ на странице входа ===== */

.trial-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 25px 0 18px;
  color: #87929f;
  font-size: 12px;
  font-weight: 700;
}

.trial-divider::before,
.trial-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.trial-access-card {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 15px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(144, 157, 179, 0.08),
      transparent 42%
    ),
    rgba(255, 255, 255, 0.018);
}

.trial-badge {
  display: inline-flex;
  margin-bottom: 10px;
  color: #b7c0cb;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.trial-access-card h3 {
  margin: 0 0 7px;
  font-size: 20px;
}

.trial-access-card p {
  color: var(--muted);
  line-height: 1.55;
}

.trial-access-intro > p {
  margin: 0 0 14px;
}

.trial-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.trial-features span {
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: #aeb8c4;
  font-size: 11px;
  font-weight: 700;
}

.trial-small-note,
.trial-bot-note {
  margin: 10px 0 0 !important;
  text-align: center;
  font-size: 11px;
}

.trial-access-result[hidden],
.trial-access-intro[hidden] {
  display: none !important;
}

.trial-result-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}

.trial-result-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.trial-active-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8da898;
  box-shadow: 0 0 12px rgba(141, 168, 152, 0.55);
}

.trial-timer {
  min-width: 63px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.trial-timer.expired {
  color: #a99090;
}

.trial-result-text {
  margin: 0 0 14px;
}

.trial-key-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin-bottom: 12px;
}

.trial-key-field code {
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: #b9c3ce;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trial-key-field .btn {
  min-height: 42px;
  padding-inline: 13px;
}

.trial-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
  color: #7f8a96;
  font-size: 11px;
}

.trial-meta strong {
  color: #aeb8c4;
}

.trial-bot-button {
  margin-top: 2px;
}

@media (max-width: 520px) {
  .trial-access-card {
    padding: 17px;
  }

  .trial-result-heading {
    align-items: flex-start;
  }

  .trial-key-field {
    grid-template-columns: 1fr;
  }

  .trial-key-field .btn {
    width: 100%;
  }

  .trial-meta {
    flex-direction: column;
    gap: 4px;
  }
}

/* ===== QR тестового доступа ===== */

.trial-qr-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin: 0 0 13px;
  border: 1px dashed rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
  color: #aeb8c4;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.18s;
}

.trial-qr-toggle:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.035);
  color: #ffffff;
}

.trial-qr-block[hidden] {
  display: none !important;
}

.trial-qr-block {
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
  text-align: center;
}

.trial-qr-image-wrap {
  display: inline-flex;
  padding: 10px;
  border-radius: 12px;
  background: #ffffff;
}

.trial-qr-image-wrap img {
  display: block;
  width: min(210px, 100%);
  height: auto;
  aspect-ratio: 1;
}

.trial-qr-block p {
  max-width: 300px;
  margin: 11px auto 0;
  font-size: 11px;
}

.trial-qr-image-wrap {
  padding: 8px;
}

.trial-qr-image-wrap img {
  width: 190px;
  max-width: 100%;
}

.trial-qr-block {
  padding: 14px;
}

/* ===== Статус оплаты ===== */

.payment-status-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: start center;
  padding: 28px 18px;
  pointer-events: none;
}

.payment-status-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(540px, 100%);
  padding: 17px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: rgba(18, 25, 34, 0.98);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.payment-status-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: payment-spin 0.8s linear infinite;
}

.payment-status-content {
  min-width: 0;
}

.payment-status-content strong {
  display: block;
  margin-bottom: 4px;
}

.payment-status-content p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.payment-status-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
}

.payment-status-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.payment-status-panel[data-state="success"]
.payment-status-box {
  border-color: rgba(139, 174, 151, 0.35);
}

.payment-status-panel[data-state="error"]
.payment-status-box {
  border-color: rgba(190, 125, 125, 0.35);
}

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

@media (max-width: 520px) {
  .payment-status-panel {
    padding: 12px;
  }

  .payment-status-box {
    align-items: start;
    padding: 15px;
  }
}

/* ===== QR при отсутствии доступа ===== */

.dashboard-qr-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  width: 100%;
  min-height: 150px;
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.018);
  text-align: center;
}

.dashboard-qr-empty span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.dashboard-qr-empty small {
  max-width: 150px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

/* ===== Исправление QR-заглушки ===== */

.dashboard-qr-image-hidden {
  display: none !important;
  visibility: hidden !important;
}

.dashboard-qr-wrapper-empty {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden;
  background: transparent !important;
}

.dashboard-qr-wrapper-empty .dashboard-qr-empty {
  width: 100%;
  height: 100%;
  min-height: 150px;
  border: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.025);
}

.dashboard-qr-empty {
  box-sizing: border-box;
}

/* Выравнивание карточек тарифов */

.dashboard-plans {
  align-items: stretch;
}

.dashboard-plans .plan {
  margin-top: 0 !important;
  transform: none !important;
}

.dashboard-plans .plan.featured,
.dashboard-plans .plan.recommended,
.dashboard-plans .plan:last-child {
  margin-top: 0 !important;
  transform: none !important;
}

.payment-status-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.payment-continue-button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.payment-continue-button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.profile img.telegram-avatar {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
}

/* Telegram-аватар в блоке текущего доступа */
.access-banner-main img.access-user-avatar {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Маленькая Telegram-аватарка */
.profile img.telegram-avatar {
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

/* ===== Security card fix ===== */

.telegram-card.security-account-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 26px !important;
}

.security-account-main {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.security-avatar {
  width: 82px !important;
  height: 82px !important;
  min-width: 82px;
  object-fit: cover;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.14);
}

.security-account-info {
  flex: 1;
  min-width: 0;
}

.security-account-info h3 {
  margin: 7px 0 18px;
  font-size: 20px;
}

.security-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--text-muted);
}

.security-account-row:last-child {
  border-bottom: 0;
}

.security-account-row strong {
  color: var(--text);
  text-align: right;
}

.security-status {
  color: #b9f7cf !important;
}

.security-session-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.security-session-actions p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.security-logout-all {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.security-logout-all:hover {
  background: rgba(255,255,255,.09);
}


/* ===== Security form polish ===== */

#credentialsForm input,
#credentialsForm input:focus {
  background: #0b1117 !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

#credentialsForm input:-webkit-autofill,
#credentialsForm input:-webkit-autofill:hover,
#credentialsForm input:-webkit-autofill:focus,
#credentialsForm input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px #0b1117 inset !important;
  box-shadow: 0 0 0 1000px #0b1117 inset !important;
  caret-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
}

.security-logout-all {
  min-width: 220px;
  white-space: nowrap;
  padding: 0 20px;
}

.security-session-actions {
  align-items: center;
}

@media (max-width: 900px) {
  .security-logout-all {
    min-width: 0;
    width: 100%;
    white-space: normal;
  }
}

.security-session-actions > div {
  flex: 1;
}

.security-session-actions strong {
  display: block;
  margin-bottom: 4px;
}

#securitySessionCount {
  font-variant-numeric: tabular-nums;
}

/* ===== Support page ===== */

.support-main-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.support-profile {
  display: flex;
  align-items: center;
  gap: 20px;
}

.support-avatar {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
}

.support-profile h3 {
  margin: 7px 0 8px;
}

.support-profile p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.support-profile p strong {
  color: var(--text);
}

.support-telegram-button {
  flex: 0 0 auto;
  min-width: 210px;
  text-decoration: none;
  text-align: center;
}

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

.support-info-card h3 {
  margin: 8px 0 18px;
}

.support-list {
  display: flex;
  flex-direction: column;
}

.support-list span {
  position: relative;
  padding: 10px 0 10px 20px;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.support-list span:last-child {
  border-bottom: 0;
}

.support-list span::before {
  content: "›";
  position: absolute;
  left: 2px;
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 900px) {
  .support-main-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .support-telegram-button {
    width: 100%;
  }

  .support-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Emergency access ===== */

.emergency-access-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-top: 16px;
}

.emergency-access-info {
  flex: 1;
}

.emergency-access-info h3 {
  margin: 8px 0;
}

.emergency-access-info > p {
  margin: 0;
  max-width: 680px;
  color: var(--text-muted);
  line-height: 1.6;
}

.emergency-access-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.emergency-access-actions a {
  text-decoration: none;
}

.emergency-access-result {
  margin-top: 20px;
  padding-top: 20px;
  border-top:
    1px solid
    rgba(255,255,255,.08);
}

.emergency-timer {
  margin-bottom: 12px;
  color: var(--text-muted);
}

.emergency-timer strong {
  margin-left: 5px;
  color: var(--text);
  font-variant-numeric:
    tabular-nums;
}

.emergency-key {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.emergency-key input {
  flex: 1;
  min-width: 0;
}

.emergency-qr-block {
  margin-top: 16px;
}

.emergency-qr-block img {
  display: block;
  width: 190px;
  height: 190px;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
}

@media (max-width: 900px) {
  .emergency-access-card,
  .emergency-access-actions,
  .emergency-key {
    flex-direction: column;
  }

  .emergency-access-actions,
  .emergency-access-actions .btn,
  .emergency-key .btn {
    width: 100%;
  }
}

.support-mini img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  image-rendering: auto;
}


/* Маленькая карточка поддержки в сайдбаре */
button.support-mini {
  width: 100%;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

button.support-mini > img {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  border-radius: 9999px !important;
  clip-path: circle(50%) !important;

  object-fit: cover !important;
  object-position: center !important;

  display: block !important;
  flex: 0 0 42px !important;

  overflow: hidden !important;
}

button.support-mini:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Иконка Главная — выравниваем размер с остальными */
.nav-btn[data-tab="home"] > span {
  font-size: 18px !important;
  width: 22px !important;
  min-width: 22px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transform: scale(1.15);
}


/* Аккуратная иконка Главная */
.nav-btn .home-nav-icon {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transform: none !important;
}

.nav-btn .home-nav-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}


/* =========================================================
   MOBILE — HOME TAB ONLY
   ========================================================= */
@media (max-width: 768px) {

  /* Не даём Главной создавать горизонтальный скролл */
  #home,
  #home * {
    box-sizing: border-box;
  }

  #home {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Верхняя карточка текущего доступа */
  #home .access-banner {
    padding: 24px 22px;
    width: 100%;
  }

  #home .access-banner-main {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    min-width: 0;
  }

  #home .access-banner-main > div {
    min-width: 0;
    flex: 1;
  }

  #home .access-user-avatar {
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
  }

  #home .access-banner-main h2 {
    font-size: clamp(28px, 7vw, 36px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  #home .access-banner-main p {
    font-size: 17px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  #home .access-expiry {
    width: 100%;
    margin-top: 24px;
  }

  /* Все карточки Главной строго в одну колонку */
  #home .overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 18px;
  }

  #home .dashboard-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 22px;
    overflow: hidden;
  }

  /* Карточка ключа */
  #home .key-card .card-heading {
    width: 100%;
    min-width: 0;
  }

  #home .key-card h3 {
    font-size: 25px;
    line-height: 1.2;
  }

  #home .key-field {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  #home .key-field code {
    display: block;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
  }

  #home .key-field button {
    flex: 0 0 auto;
  }

  #home .key-card > p {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* QR на Главной: вертикальная мобильная компоновка */
  #home .subscription-qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    padding: 22px 16px;
    text-align: center;
    overflow: hidden;
  }

  #home .subscription-qr-image {
    width: min(230px, 100%);
    max-width: 100%;
    margin: 0 auto;
  }

  #home .subscription-qr-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 230px;
    margin: 0 auto;
  }

  #home .subscription-qr-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: center;
  }

  #home .subscription-qr-content strong {
    display: block;
    font-size: 22px;
    line-height: 1.25;
  }

  #home .subscription-qr-content p {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  /* Кнопки внутри Главной */
  #home .btn,
  #home .btn.wide,
  #home .key-card > .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  /* Трафик */
  #home .usage-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    min-width: 0;
  }

  #home .usage-row strong,
  #home .usage-row span {
    max-width: 100%;
  }

  /* Активные подключения */
  #home .connection-card p {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  #home .connection-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
  }

  /* Быстрые действия */
  #home .action-row {
    width: 100%;
    min-width: 0;
  }

  #home .action-row > span {
    min-width: 0;
    text-align: left;
  }

  #home .action-row strong,
  #home .action-row small {
    overflow-wrap: anywhere;
  }
}


/* Узкие телефоны */
@media (max-width: 480px) {

  #home .access-banner {
    padding: 20px 18px;
  }

  #home .access-banner-main {
    gap: 14px;
  }

  #home .access-user-avatar {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
  }

  #home .access-banner-main h2 {
    font-size: 29px;
  }

  #home .dashboard-card {
    padding: 20px 18px;
  }

  #home .subscription-qr-block {
    padding: 20px 12px;
  }

  #home .subscription-qr-image {
    width: min(210px, 100%);
  }

  #home .subscription-qr-image img {
    max-width: 210px;
  }
}


/* MOBILE — центрирование футера */
@media (max-width: 768px) {
  .dashboard-footer,
  footer {
    text-align: center;
  }

  .dashboard-footer p,
  .dashboard-footer span,
  footer p,
  footer span {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* MOBILE — точное выравнивание футера */
@media (max-width: 768px) {
  .footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .footer > * {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* MOBILE — SECURITY TAB */
@media (max-width: 768px) {

  #settings .security-sessions,
  #settings .sessions-row,
  #settings .security-session-row,
  #settings .logout-all-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    width: 100% !important;
  }

  #settings .security-sessions > *,
  #settings .sessions-row > *,
  #settings .security-session-row > *,
  #settings .logout-all-row > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #settings .security-sessions .btn,
  #settings .sessions-row .btn,
  #settings .security-session-row .btn,
  #settings .logout-all-row .btn,
  #settings #logoutAllSessionsButton {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/* MOBILE — SECURITY / ACTIVE SESSIONS */
@media (max-width: 768px) {

  #settings .security-session-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    width: 100% !important;
  }

  #settings .security-session-actions > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  #settings .security-session-actions > div > strong {
    display: block !important;
    margin-bottom: 8px !important;
  }

  #settings .security-session-actions > div > p {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 1.5 !important;
  }

  #settings #logoutAllButton {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/* ===== Spector Cloud: одинаковая высота тарифов + hover кнопок ===== */

.plans-grid {
    align-items: stretch;
}

.plan {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plan ul {
    margin-bottom: 24px;
}

.plan .btn {
    margin-top: auto;
}

/* Recommended не должен менять высоту карточки */
.plan.recommended {
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Все кнопки тарифов по умолчанию одинаковые */
.plan .btn {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
}

/* Светлая кнопка только при наведении */
.plan .btn:hover {
    background: #e8edf4 !important;
    color: #000 !important;
    border-color: #e8edf4 !important;
}


/* ===== Spector Cloud: одинаковая высота тарифов + hover кнопок ===== */

.plans-grid {
    align-items: stretch;
}

.plan {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plan ul {
    margin-bottom: 24px;
}

.plan .btn {
    margin-top: auto;
}

/* Recommended не должен менять высоту карточки */
.plan.recommended {
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Все кнопки тарифов по умолчанию одинаковые */
.plan .btn {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
}

/* Светлая кнопка только при наведении */
.plan .btn:hover {
    background: #e8edf4 !important;
    color: #000 !important;
    border-color: #e8edf4 !important;
}


/* ===== Dashboard plans: hover кнопок ===== */

.dashboard-plans .plan .btn {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
}

.dashboard-plans .plan .btn:hover {
    background: #e8edf4 !important;
    color: #000 !important;
    border-color: #e8edf4 !important;
}


/* ===== Поддержать проект ===== */

.project-support-card {
    margin-top: 22px;
}

.project-support-heading h3 {
    margin: 7px 0 8px;
}

.project-support-heading p {
    max-width: 720px;
    margin: 0;
    color: #939eaa;
    line-height: 1.6;
}

.project-support-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.support-amount-preset {
    min-width: 90px;
}

.project-support-custom {
    margin-top: 20px;
}

.project-support-custom label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #939eaa;
}

.project-support-input-row {
    display: flex;
    align-items: center;
    max-width: 320px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.project-support-input-row input {
    width: 100%;
    padding: 13px 15px;
    border: 0;
    outline: none;
    background: transparent;
    color: #fff;
    font: inherit;
}

.project-support-input-row span {
    padding-right: 15px;
    color: #939eaa;
}

.project-support-button {
    margin-top: 18px;
}

@media (max-width: 768px) {
    .project-support-presets {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .support-amount-preset {
        width: 100%;
    }

    .project-support-input-row {
        max-width: 100%;
    }

    .project-support-button {
        width: 100%;
    }
}


/* Убираем стандартные стрелки у поля суммы */
#projectSupportAmount::-webkit-outer-spin-button,
#projectSupportAmount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#projectSupportAmount {
    -moz-appearance: textfield;
    appearance: textfield;
}


@media (max-width: 520px) {
  .payment-status-box {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .payment-status-spinner {
    display: none;
  }

  .payment-status-content p {
    font-size: 12px;
  }
}