/* DoggoVPN — page CSS. Requires base.css loaded first. */

body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }.container { max-width:1280px; margin:0 auto; padding:0 32px; width:100%; }

/* NAV */
nav {
  position:sticky; top:0; z-index:50;
  background:rgba(253,250,242,0.95); backdrop-filter:blur(14px);
  height:84px; display:flex; align-items:center;
  border-bottom:1px solid var(--border);
}
.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 32px;
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* Табы внутри ЛК */
.acc-tabs { display:flex; gap:8px; }
.acc-tab {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:999px;
  background:transparent; border:none;
  font-family:inherit; font-size:15px; font-weight:600;
  color:var(--text-2); cursor:pointer;
  transition:all .2s;
}
.acc-tab:hover { background:var(--gold-light); color:var(--text); }
.acc-tab.active { background:var(--gold); color:var(--gold-text); }
.acc-tab svg { width:16px; height:16px; flex-shrink:0; }

/* Email бейдж + logout */
.acc-user {
  display:flex; align-items:center; gap:10px;
  padding:8px 8px 8px 16px; border-radius:999px;
  background:var(--bg-card); border:1.5px solid var(--border);
}
.acc-user-email { font-size:13px; color:var(--text-2); font-weight:500; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-user-logout {
  width:32px; height:32px; border-radius:50%;
  background:var(--bg); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-2); transition:all .2s;
}
.acc-user-logout:hover { background:rgba(216,90,48,0.1); color:var(--red); }

/* MAIN */
main.account { flex:1; padding:40px 0 80px; }
.acc-section { display:none; }
.acc-section.active { display:block; animation:fadeIn .25s ease-out; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* Карточки */
.acc-card {
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  margin-bottom:20px;
}
.acc-card h3 {
  font-family:'Nunito',sans-serif;
  font-weight:800; font-size:18px;
  margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.acc-card h3 .icon { font-size:22px; }

/* === Подписка === */
.sub-status {
  background:linear-gradient(135deg, rgba(29,158,117,0.08), rgba(29,158,117,0.02));
  border:1.5px solid rgba(29,158,117,0.3);
}
.sub-status .status-row {
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.sub-status .shield {
  width:48px; height:48px; border-radius:50%;
  background:var(--bg-card); border:1.5px solid rgba(29,158,117,0.3);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sub-status .shield svg { width:22px; height:22px; color:var(--green); }
.sub-status .status-text { flex:1; }
.sub-status .status-text .status-title {
  font-family:'Nunito',sans-serif; font-weight:800; font-size:18px;
  color:var(--green); margin-bottom:2px;
}
.sub-status .status-text .status-sub {
  font-size:13px; color:var(--text-2);
}
.sub-status .live-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--green); flex-shrink:0;
  box-shadow:0 0 0 4px rgba(29,158,117,0.18);
  animation:pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 4px rgba(29,158,117,0.18); }
  50% { box-shadow:0 0 0 8px rgba(29,158,117,0.05); }
}
.progress-bar {
  width:100%; height:8px;
  background:rgba(29,158,117,0.1);
  border-radius:999px; overflow:hidden;
}
.progress-bar .fill {
  height:100%;
  background:linear-gradient(90deg, var(--gold), var(--orange));
  border-radius:999px;
  transition:width .6s ease-out;
}

/* Продлить подписку — карточка */
.renew-card {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 24px;
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:20px;
  cursor:pointer; transition:all .2s;
}
.renew-card:hover { border-color:var(--gold); transform:translateY(-1px); box-shadow:0 8px 24px rgba(232,184,0,0.12); }
.renew-card .renew-title { font-weight:700; font-size:17px; }
.renew-card .renew-price { color:var(--gold); font-weight:800; font-size:17px; display:flex; align-items:center; gap:6px; }
.renew-card .renew-price svg { width:16px; height:16px; }

/* === Ключ === */
.key-row {
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom:14px;
}
.key-display {
  flex:1; min-width:200px;
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  background:var(--bg-section);
  border:1.5px solid var(--border);
  border-radius:12px;
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  color:var(--text-2);
  word-break:break-all;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.btn-acc {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px;
  font-family:inherit; font-size:14px; font-weight:700;
  border:none; border-radius:12px;
  cursor:pointer; transition:all .2s;
  white-space:nowrap;
}
.btn-acc-primary {
  background:var(--gold); color:var(--gold-text);
}
.btn-acc-primary:hover { background:var(--gold-hover); transform:translateY(-1px); box-shadow:0 6px 16px rgba(232,184,0,0.25); }
.btn-acc-secondary {
  background:var(--bg-card); color:var(--text); border:1.5px solid var(--border);
}
.btn-acc-secondary:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-light); }
.btn-acc-full { width:100%; }
.btn-acc.copied { background:var(--green); color:#fff; }

.key-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* === Акцентные карточки: Ключ и Продление === */
.key-card-hero {
  padding:30px 32px;
  background:var(--bg-card);
  border:2px solid var(--gold-border);
  box-shadow:0 4px 20px rgba(232,184,0,0.08);
}
.key-card-hero h3 {
  font-size:21px;
  margin-bottom:20px;
}
.key-card-hero h3 .icon { font-size:24px; }
.key-card-hero .key-display {
  font-size:15px;
  padding:18px 20px;
  background:var(--bg-section);
  border:1.5px solid var(--border);
  color:var(--text);
  font-weight:600;
  letter-spacing:0.02em;
  border-radius:14px;
}
.btn-acc-lg {
  padding:18px 28px;
  font-size:15px;
}
.btn-acc-lg svg { width:18px; height:18px; }

.renew-card-hero {
  padding:32px 36px;
  border-radius:20px;
  background:var(--bg-card);
  border:2px solid var(--gold-border);
  box-shadow:0 4px 20px rgba(232,184,0,0.08);
}
.renew-card-hero:hover {
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(232,184,0,0.15);
}
.renew-card-hero .renew-left {
  display:flex; align-items:center; gap:20px;
  flex:1;
}
.renew-card-hero .renew-icon {
  width:60px; height:60px; border-radius:14px;
  background:var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  font-size:30px;
  flex-shrink:0;
}
.renew-card-hero .renew-title {
  font-family:'Nunito',sans-serif;
  font-weight:800; font-size:22px;
  margin-bottom:4px;
}
.renew-card-hero .renew-sub {
  font-size:14px; color:var(--text-2);
}
.renew-card-hero .renew-price {
  font-size:22px;
  font-weight:800;
}
.renew-card-hero .renew-price svg { width:22px; height:22px; }

/* === Устройства === */
.dev-head {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:6px;
}
.dev-counter {
  background:rgba(216,90,48,0.1);
  color:var(--red);
  padding:4px 12px; border-radius:999px;
  font-size:13px; font-weight:700;
}
.dev-counter.ok {
  background:rgba(29,158,117,0.1);
  color:var(--green);
}
.dev-sub { font-size:13px; color:var(--text-2); margin-bottom:18px; }
.dev-list {
  background:var(--bg-section);
  border-radius:14px;
  overflow:hidden;
}
.dev-item {
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.dev-item:last-child { border-bottom:none; }
.dev-icon {
  width:40px; height:40px; border-radius:10px;
  background:var(--bg-card);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--text-2);
}
.dev-icon svg { width:20px; height:20px; }
.dev-info { flex:1; min-width:0; }
.dev-name-row {
  display:flex; align-items:center; gap:8px;
  margin-bottom:2px; flex-wrap:wrap;
}
.dev-name { font-weight:700; font-size:15px; }
.dev-current-pill {
  font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:999px;
  background:rgba(29,158,117,0.12);
  color:var(--green);
  white-space:nowrap;
}
.dev-last { font-size:12px; color:var(--text-3); }
.dev-disconnect {
  width:36px; height:36px; border-radius:50%;
  background:transparent; border:1.5px solid var(--border);
  cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-2);
}
.dev-disconnect:hover { border-color:var(--red); color:var(--red); background:rgba(216,90,48,0.05); }
.dev-disconnect svg { width:16px; height:16px; }

/* SPEC-063 — rename modal (the ✏️ button itself is styled in account-v2.css
   alongside .dev-disconnect so the two icon buttons stay identical). */
.rename-form { display:flex; flex-direction:column; gap:16px; margin-top:8px; }
.rename-input {
  width:100%; padding:12px 14px; border-radius:12px;
  border:1.5px solid var(--border); background:var(--bg-section); color:var(--text);
  font-size:15px; outline:none; transition:border-color .2s;
}
.rename-input:focus { border-color:var(--gold); }
.rename-actions { display:flex; flex-direction:column; gap:10px; }

/* === Отключённые устройства — accordion === */
.dev-disabled-head {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:0; margin-bottom:6px;
  background:transparent; border:0; cursor:pointer;
  color:inherit; text-align:left;
}
.dev-disabled-head h3 { color:var(--text-2); }
.dev-disabled-caret {
  width:18px; height:18px; color:var(--text-3);
  transition:transform .2s ease;
}
.dev-disabled-head[aria-expanded="true"] .dev-disabled-caret {
  transform:rotate(180deg);
}
.dev-list-collapsed { display:none; }
.dev-item-disabled .dev-name { color:var(--text-2); }
.dev-icon-muted { opacity:0.6; }
.dev-recover {
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:10px;
  background:rgba(29,158,117,0.1);
  color:var(--green);
  border:0; cursor:pointer;
  font-size:13px; font-weight:700;
  transition:background .15s;
}
.dev-recover:hover { background:rgba(29,158,117,0.18); }
.dev-recover svg { width:14px; height:14px; }

/* === Friends — карточки статистики === */
.friends-stats {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-bottom:20px;
}
.stat-card {
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:18px;
  text-align:center;
}
.stat-card .stat-icon {
  width:36px; height:36px;
  margin:0 auto 8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.stat-card .stat-icon svg { width:22px; height:22px; }
.stat-card .stat-value {
  font-family:'Nunito',sans-serif;
  font-weight:900; font-size:26px;
  color:var(--gold);
  margin-bottom:2px;
}
.stat-card .stat-label {
  font-size:13px; color:var(--text-2);
}

/* Уровень */
.level-card .level-head {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:12px; flex-wrap:wrap; gap:6px;
}
.level-name {
  font-weight:700; font-size:16px;
  color:var(--gold);
}
.level-name .pct { color:var(--gold); }
.level-target { font-size:13px; color:var(--text-2); }
.level-bar {
  width:100%; height:6px;
  background:var(--border); border-radius:999px; overflow:hidden;
}
.level-bar .fill {
  height:100%; background:var(--red);
  border-radius:999px; transition:width .6s;
}

/* Промокод */
.promo-share-btn {
  width:100%;
  padding:16px 22px;
  background:linear-gradient(135deg, var(--gold), var(--gold-hover));
  color:var(--gold-text);
  border:none; border-radius:14px;
  font-family:inherit; font-size:16px; font-weight:700;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all .2s;
  margin-bottom:14px;
}
.promo-share-btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(232,184,0,0.25); }
.promo-share-btn svg { width:18px; height:18px; }

.promo-code-box {
  position:relative;
  padding:18px 22px;
  background:rgba(232,184,0,0.04);
  border:1.5px dashed var(--gold-border);
  border-radius:14px;
  margin-bottom:18px;
}
.promo-code-label {
  font-size:13px; color:var(--gold);
  font-weight:600; margin-bottom:4px;
}
.promo-code-value {
  font-family:'JetBrains Mono', monospace;
  font-size:22px; font-weight:700;
  letter-spacing:0.04em;
  color:var(--text);
  padding-right:40px;
  word-break:break-all;
}
.promo-copy {
  position:absolute; top:50%; right:18px; transform:translateY(-50%);
  width:36px; height:36px; border-radius:8px;
  background:transparent; border:1.5px solid var(--gold-border);
  color:var(--gold);
  cursor:pointer; transition:all .15s;
  display:flex; align-items:center; justify-content:center;
}
.promo-copy:hover { background:var(--gold); color:var(--gold-text); border-color:var(--gold); }
.promo-copy.copied { background:var(--green); color:#fff; border-color:var(--green); }
.promo-copy svg { width:18px; height:18px; }

/* Вывод бонусов */
.payout-card {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 22px;
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:14px;
  margin-bottom:24px;
  cursor:not-allowed;
  opacity:0.85;
}
.payout-card .payout-title {
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:16px;
}
.payout-card .badge-soon {
  background:var(--bg-section); color:var(--text-2);
  padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:600;
}
.payout-card .payout-sub {
  font-size:13px; color:var(--text-2); margin-top:4px;
}
.payout-card svg.arrow { width:20px; height:20px; color:var(--text-3); flex-shrink:0; }

/* Как работает */
.how-it-works h3 { margin-bottom:14px; }
.howstep {
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:12px;
  margin-bottom:8px;
}
.howstep .num {
  width:32px; height:32px; border-radius:50%;
  background:var(--gold); color:var(--gold-text);
  font-weight:900; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-family:'Nunito',sans-serif;
}
.howstep .text { color:var(--text-2); font-size:14px; }
.howstep:last-child { margin-bottom:0; }

/* Поддержка футер */
.support-block {
  margin-top:32px;
  padding:24px;
  background:var(--bg-section);
  border-radius:var(--radius);
  text-align:center;
}
.support-block .sup-title {
  font-family:'Nunito',sans-serif;
  font-weight:800; font-size:16px;
  margin-bottom:14px;
}
.support-block .sup-links {
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}
.support-block .sup-link {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:999px;
  background:var(--bg-card); border:1.5px solid var(--border);
  font-size:14px; font-weight:600; color:var(--text);
  transition:all .2s;
}
.support-block .sup-link:hover {
  border-color:var(--gold); color:var(--gold); background:var(--gold-light);
}
.support-block .sup-link svg { width:16px; height:16px; }

/* Toast */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--text); color:#fff;
  padding:12px 20px; border-radius:999px;
  font-size:14px; font-weight:600;
  opacity:0; pointer-events:none;
  transition:all .3s;
  z-index:100;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* === Адаптив === */
@media (max-width:900px) {
  .nav-inner { gap:12px; }
  .acc-user-email { display:none; }
}
@media (max-width:768px) {
  .container { padding:0 16px; }
  .nav-inner { padding:0 16px; flex-wrap:wrap; height:auto; padding-top:12px; padding-bottom:12px; gap:10px; }
  nav { height:auto; padding:0; }
  .nav-logo img { width:38px; height:38px; }
  .nav-logo-name { font-size:18px; }
  .acc-tabs { width:100%; order:3; justify-content:center; }
  .acc-tab { padding:8px 16px; font-size:13px; flex:1; justify-content:center; }
  .acc-tab span.tab-label { display:inline; }
  .acc-card { padding:20px; border-radius:14px; }
  .key-card-hero { padding:24px 20px; }
  .key-card-hero h3 { font-size:18px; }
  .key-card-hero .key-display { font-size:13px; padding:14px 16px; }
  .btn-acc-lg { padding:14px 18px; font-size:14px; }
  .renew-card-hero { padding:20px; flex-direction:column; align-items:flex-start; gap:14px; }
  .renew-card-hero .renew-left { width:100%; }
  .renew-card-hero .renew-icon { width:44px; height:44px; font-size:22px; border-radius:12px; }
  .renew-card-hero .renew-title { font-size:17px; }
  .renew-card-hero .renew-sub { font-size:13px; }
  .renew-card-hero .renew-price { font-size:16px; align-self:flex-end; }
  .friends-stats { grid-template-columns:repeat(3, 1fr); gap:8px; }
  .stat-card { padding:12px 8px; }
  .stat-card .stat-value { font-size:20px; }
  .stat-card .stat-label { font-size:11px; }
  .promo-code-value { font-size:18px; }
  main.account { padding:24px 0 60px; }
}
/* SPEC-054 T4 — TG-link banner + change-email modal + trial CTA */

.tg-link-banner {
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  margin:16px auto 0;
  max-width:1140px;
  padding:18px 24px;
  background:linear-gradient(135deg, #229ED9 0%, #2B8FE3 55%, #6BB4F2 100%);
  color:#fff;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(34,158,217,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
  overflow:hidden;
  isolation:isolate;
}
.tg-link-banner::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 90% 50%, rgba(255,255,255,0.18) 0%, transparent 60%);
  pointer-events:none;
  z-index:-1;
}
.tg-link-banner::after {
  content:"";
  position:absolute;
  top:-30px; right:-30px;
  width:160px; height:160px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' opacity='0.08'><path d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/></svg>") no-repeat center / contain;
  transform:rotate(-12deg);
  pointer-events:none;
  z-index:-1;
}
.tg-link-banner .tg-link-icon {
  width:46px; height:46px;
  flex-shrink:0;
  border-radius:14px;
  background:rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22);
}
.tg-link-banner .tg-link-body {
  flex:1;
  min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.tg-link-banner .tg-link-title {
  font-family:'Nunito',sans-serif;
  font-weight:800;
  font-size:16px;
  letter-spacing:0.01em;
}
.tg-link-banner .tg-link-text {
  font-size:13px;
  opacity:0.88;
  font-weight:500;
  line-height:1.4;
}
.tg-link-banner .tg-link-cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  background:#fff;
  color:#229ED9;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,0.10);
  transition:transform .15s ease, box-shadow .15s ease;
}
.tg-link-banner .tg-link-cta:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,0.16);
}
.tg-link-banner .tg-link-cta::after {
  content:"→";
  font-weight:900;
  font-size:16px;
  line-height:1;
  transition:transform .15s ease;
}
.tg-link-banner .tg-link-cta:hover::after { transform:translateX(2px); }

@media (max-width:600px) {
  .tg-link-banner {
    margin:12px 16px 0;
    padding:14px 16px;
    gap:12px;
    flex-wrap:wrap;
  }
  .tg-link-banner .tg-link-icon { width:38px; height:38px; font-size:18px; border-radius:12px; }
  .tg-link-banner .tg-link-title { font-size:14px; }
  .tg-link-banner .tg-link-text { font-size:12px; }
  .tg-link-banner .tg-link-cta { width:100%; justify-content:center; padding:10px 14px; }
}

.trial-cta-card {
  background:linear-gradient(135deg, rgba(232,184,0,0.08), rgba(232,184,0,0.02));
  border:1.5px solid var(--gold-border);
}
.trial-cta-sub { color:var(--text-2); margin-bottom:14px; font-size:14px; }

.dev-empty {
  padding:24px;
  text-align:center;
  color:var(--text-2);
  font-size:13px;
}

.doggo-modal-overlay {
  position:fixed; inset:0;
  background:rgba(20,20,20,0.5);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0;
  transition:opacity .25s ease;
  z-index:9000;
}
.doggo-modal-overlay.show { opacity:1; }
.doggo-modal-card {
  background:var(--bg-card);
  border-radius:20px;
  padding:28px 24px;
  max-width:440px;
  width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,0.15);
}
.doggo-modal-title {
  font-family:'Nunito',sans-serif;
  font-weight:800;
  font-size:20px;
  margin:0 0 8px;
}
.doggo-modal-body { color:var(--text-2); font-size:14px; line-height:1.5; margin:0 0 18px; }
.doggo-modal-actions { display:flex; gap:10px; justify-content:flex-end; }
.doggo-modal-btn {
  padding:10px 18px;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  border:none;
  cursor:pointer;
  font-family:inherit;
}
.doggo-modal-btn-primary { background:var(--gold); color:var(--gold-text); }
.doggo-modal-btn-secondary { background:transparent; color:var(--text-2); border:1.5px solid var(--border); }

/* SPEC-054 T4 — change-email modal — matched to .pay-modal visual language */

.doggo-modal-card:has(.chgemail-modal) {
  max-width:520px;
  padding:32px 28px;
}
.chgemail-modal { display:flex; flex-direction:column; gap:18px; }
.chgemail-modal .doggo-modal-title {
  font-family:'Nunito',sans-serif;
  font-weight:900;
  font-size:24px;
  margin:0;
  display:flex; align-items:center; gap:10px;
}
.chgemail-modal .doggo-modal-title::before {
  content:"✉️";
  font-size:24px;
}
.chgemail-modal .doggo-modal-body {
  margin:0;
  font-size:14px;
  color:var(--text-2);
  font-weight:500;
  line-height:1.5;
}
.chgemail-step { display:flex; flex-direction:column; gap:14px; }
.chgemail-modal .field { display:flex; flex-direction:column; gap:6px; margin:0; }
.chgemail-modal .field label {
  font-size:13px;
  font-weight:700;
  color:var(--text);
  letter-spacing:0.01em;
}
.chgemail-modal .field input {
  width:100%;
  padding:14px 16px;
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:12px;
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
  box-sizing:border-box;
}
.chgemail-modal .field input:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 4px var(--gold-light);
}
.chgemail-modal .field input.input-mono,
.chgemail-modal .field input[inputmode="numeric"] {
  font-family:'JetBrains Mono', 'Courier New', monospace;
  letter-spacing:0.18em;
  text-align:center;
  font-size:18px;
  font-weight:700;
}
.chgemail-radios {
  border:none;
  padding:0;
  margin:0;
  display:flex; flex-direction:column; gap:8px;
}
.chgemail-radios legend {
  font-size:13px;
  font-weight:700;
  color:var(--text);
  padding:0;
  letter-spacing:0.01em;
}

/* Segmented-control pill toggle. Native radios hidden; the label is
   the clickable surface. :has(:checked) drives the selected state so
   we never write JS for it. */
.chgemail-segment {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:4px;
  background:var(--bg-section);
  border:1px solid var(--border);
  border-radius:12px;
}
.chgemail-segment .chgemail-radio {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  padding:11px 12px;
  font-size:14px;
  font-weight:700;
  color:var(--text-2);
  cursor:pointer;
  border-radius:9px;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
  user-select:none;
}
.chgemail-segment .chgemail-radio input {
  /* Hide the native radio; the label IS the toggle. Use
     ``appearance:none`` rather than ``display:none`` so :focus-visible
     still routes through the input for keyboard a11y. */
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.chgemail-segment .chgemail-radio:has(input:checked) {
  background:var(--bg-card);
  color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 0 0 1.5px var(--gold);
}
.chgemail-segment .chgemail-radio:hover:not(:has(input:checked)) {
  background:rgba(255,255,255,0.5);
  color:var(--text);
}
.chgemail-segment .chgemail-radio:has(input:focus-visible) {
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.chgemail-hint {
  font-size:13px;
  color:var(--text-2);
  margin:0;
  padding:12px 14px;
  background:rgba(232,184,0,0.06);
  border:1px dashed var(--gold-border);
  border-radius:10px;
  line-height:1.45;
}
.chgemail-modal .btn-primary {
  width:100%;
  padding:14px 20px;
  background:var(--gold);
  color:var(--gold-text);
  border:none;
  border-radius:12px;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  letter-spacing:0.01em;
}
.chgemail-modal .btn-primary:hover:not(:disabled) {
  background:var(--gold-hover);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(232,184,0,0.25);
}
.chgemail-modal .btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.chgemail-modal .btn-link {
  background:transparent;
  border:none;
  color:var(--text-2);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  padding:8px;
  transition:color .15s ease;
}
.chgemail-modal .btn-link:hover { color:var(--text); }
.chgemail-modal .error-msg {
  margin:0;
  padding:10px 14px;
  background:rgba(220,55,55,0.06);
  border:1px solid rgba(220,55,55,0.20);
  border-radius:10px;
  color:#c83333;
  font-size:13px;
  font-weight:600;
  display:none;
}
.chgemail-modal .error-msg.show { display:block; }

@media (max-width:520px) {
  .doggo-modal-card:has(.chgemail-modal) { padding:24px 20px; }
  .chgemail-modal .doggo-modal-title { font-size:20px; }
}

/* ── Set-password modal — scoped on top of .chgemail-modal ────────
   account.html only loads account.css; the generic .pwd-field rules
   in auth.css don't apply here. These rules use higher specificity
   so they win cascade over .chgemail-modal .field input padding. */

.chgemail-modal.setpwd-modal { gap:24px; }
.setpwd-modal .doggo-modal-title::before { content:"🔐"; }
.setpwd-modal .doggo-modal-body { margin:0 0 4px; }

.setpwd-form {
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:0;
}

/* Password input wrapper — input + overlay eye toggle inside it. */
.setpwd-modal .pwd-field { position:relative; }
.setpwd-modal .field .pwd-field input {
  /* override .chgemail-modal .field input padding so the eye doesn't
     overlap text */
  padding-right:52px;
}

/* Eye button — pill-shaped, lives inside the input on the right. */
.setpwd-modal .pwd-toggle {
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1.5px solid transparent;
  border-radius:10px;
  font-size:18px;
  line-height:1;
  color:var(--text-2);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.setpwd-modal .pwd-toggle:hover {
  background:var(--gold-light);
  color:var(--text);
}
.setpwd-modal .pwd-toggle:focus-visible {
  outline:none;
  border-color:var(--gold);
  background:var(--gold-light);
}
.setpwd-modal .pwd-toggle:active {
  transform:translateY(-50%) scale(0.94);
}

/* Buttons — Сохранить is full-width gold (inherits from .chgemail-modal
   .btn-primary). Отмена is centered, subtle, with proper padding so it
   doesn't get visually squashed under the submit button. */
.setpwd-form .btn-primary { margin-top:2px; }
.setpwd-form .btn-link {
  align-self:center;
  padding:10px 18px;
  margin-top:-2px;
}

/* SPEC-054 T4 — payment modal (tariff + method picker)
 * Visual language matches .acc-card / .renew-card / .btn-acc family.
 */

.doggo-modal-card:has(.pay-modal) {
  max-width:520px;
  padding:32px 28px;
}

.pay-modal { display:flex; flex-direction:column; gap:18px; }
.pay-modal .doggo-modal-title {
  font-family:'Nunito',sans-serif;
  font-weight:900;
  font-size:24px;
  margin:0;
  display:flex; align-items:center; gap:10px;
}
.pay-modal .doggo-modal-title::before {
  content:"🚀";
  font-size:24px;
}
.pay-step-hint {
  margin:0;
  font-size:14px;
  color:var(--text-2);
  font-weight:500;
}

/* SPEC-082 W1-G — модалка согласия перед платным триалом приведена к раскладке
   Mini App (`TrialConfirmModal`): шапка с крестиком, затем что покупаем, галочка
   и одна кнопка-CTA во всю ширину. Раньше кнопка оплаты выглядела строкой «способа
   оплаты», хотя способ ровно один — крипто-близнеца у триала нет по проекту, и
   подача одного варианта как выбора обещает выбор, которого не существует. */
.trial-modal-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.trial-modal-head .doggo-modal-title { flex:1; }
.trial-modal-close {
  flex:none;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1;
  border:none; border-radius:10px;
  background:var(--bg-card);
  color:var(--text-2);
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.trial-modal-close:hover { background:var(--border); color:var(--text); }

/* Шаг задаёт колонку и воздух сам — у `.pay-step` своего layout нет, поэтому без
   этого правила блоки слипались в сплошную стену текста (замерено скриншотом). */
.pay-step-trial { display:flex; flex-direction:column; gap:16px; }

/* Заголовок без ракеты: в Mini App его нет, а `.pay-modal .doggo-modal-title::before`
   подставляет 🚀 всем платёжным модалкам. */
.trial-pay-modal .doggo-modal-title::before { content:none; }

/* Галочка карточкой — аналог `AgreementCard` из Mini App. Существующие правила
   согласия в `account-v2.css` прибиты к `.buy-traffic-modal`, поэтому сюда они не
   доезжали и чекбокс оставался голым нативным. */
.trial-pay-modal .wallet-consent {
  display:flex; align-items:center; gap:12px;
  margin:0;
  padding:14px 16px;
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:14px;
  font-size:14px; line-height:1.4;
  color:var(--text);
  cursor:pointer;
  transition:border-color .18s ease;
}
.trial-pay-modal .wallet-consent:hover { border-color:var(--gold); }
.trial-pay-modal .wallet-consent-box {
  flex:none;
  width:20px; height:20px;
  accent-color:var(--gold);
  cursor:pointer;
}

/* Стили кнопки живут ЗДЕСЬ, а не через `.btn-primary`: тот класс определён в
   auth.css и landing.css, а `account.html` не подключает ни один из них — опора на
   него давала кнопку вообще без оформления (поймано скриншотом, не чтением). */
.trial-pay-btn {
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 20px;
  border:none; border-radius:14px;
  background:var(--gold); color:var(--gold-text);
  font-family:'Nunito',sans-serif;
  font-size:16px; font-weight:800;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.trial-pay-btn:hover:not(:disabled) {
  background:var(--gold-hover);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(232,184,0,0.25);
}
.trial-pay-btn:disabled { opacity:0.45; cursor:not-allowed; transform:none; box-shadow:none; }
.trial-pay-icon { font-size:18px; line-height:1; }
.trial-pay-label { font-weight:800; }

/* Юридическая строка — мелкая, приглушённая, по центру, как сноска под кнопкой в
   Mini App. Класс называется `hint`, но стиля у него не было ни здесь, ни в
   account-v2: на всех платёжных экранах он рисовался обычным крупным текстом. */
.pay-legal-hint {
  margin:0;
  font-size:12px;
  line-height:1.5;
  text-align:center;
  color:var(--text-2);
}
.pay-legal-hint a { color:var(--gold); text-decoration:underline; }

.pay-tariff-list { display:flex; flex-direction:column; gap:10px; }
.pay-tariff-btn {
  display:grid;
  grid-template-columns:1fr auto auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:4px 14px;
  padding:18px 20px;
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:14px;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pay-tariff-btn:hover {
  border-color:var(--gold);
  background:var(--gold-light);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(232,184,0,0.12);
}
.pay-tariff-btn:active { transform:translateY(0); }
.pay-tariff-label {
  font-size:16px; font-weight:800;
  color:var(--text);
  grid-column:1; grid-row:1;
  font-family:'Nunito',sans-serif;
}
.pay-tariff-monthly {
  font-size:18px; font-weight:800;
  color:var(--gold);
  grid-column:2; grid-row:1;
  white-space:nowrap;
  font-family:'Nunito',sans-serif;
}
.pay-tariff-total {
  font-size:12px; color:var(--text-2);
  grid-column:1 / span 2; grid-row:2;
  font-weight:500;
}
.pay-tariff-save {
  font-size:12px; font-weight:800;
  color:var(--green, #1D9E75);
  background:rgba(29,158,117,0.10);
  padding:4px 10px; border-radius:999px;
  grid-column:3; grid-row:1 / span 2;
  align-self:center;
  letter-spacing:0.02em;
}

.pay-step-method { display:flex; flex-direction:column; gap:10px; }
.pay-method-btn {
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:14px;
  cursor:pointer;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  color:var(--text);
  text-align:left;
  width:100%;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pay-method-btn:hover:not(:disabled) {
  border-color:var(--gold);
  background:var(--gold-light);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(232,184,0,0.12);
}
.pay-method-btn:disabled {
  opacity:0.6;
  cursor:wait;
}
.pay-method-icon {
  font-size:22px;
  line-height:1;
}

.pay-back-btn {
  background:transparent;
  border:none;
  color:var(--text-2);
  font-family:inherit;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  padding:8px 0;
  margin-top:4px;
  align-self:flex-start;
  transition:color .15s ease;
}
.pay-back-btn:hover { color:var(--gold); }

.pay-modal .error-msg {
  margin:0;
  padding:10px 14px;
  background:rgba(220,55,55,0.06);
  border:1px solid rgba(220,55,55,0.20);
  border-radius:10px;
  color:#c83333;
  font-size:13px;
  font-weight:600;
  display:none;
}
.pay-modal .error-msg.show { display:block; }

.pay-modal .btn-link {
  background:transparent;
  border:none;
  color:var(--text-2);
  font-family:inherit;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  padding:10px;
  margin-top:4px;
  transition:color .15s ease;
}
.pay-modal .btn-link:hover { color:var(--text); }

@media (max-width:520px) {
  .pay-tariff-btn { padding:14px 16px; gap:2px 10px; }
  .pay-tariff-label { font-size:15px; }
  .pay-tariff-monthly { font-size:16px; }
  .pay-method-btn { padding:14px 16px; font-size:14px; }
  .doggo-modal-card:has(.pay-modal) { padding:24px 20px; }
}

/* SPEC-054 T4 — VPN key "Как подключиться" disclosure + payment waiting screen */

.key-howto {
  margin-top:16px;
  padding:12px 16px;
  background:rgba(232,184,0,0.04);
  border:1px solid var(--gold-border);
  border-radius:12px;
  font-size:14px;
  color:var(--text);
}
.key-howto > summary {
  cursor:pointer;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700;
  user-select:none;
}
.key-howto > summary::-webkit-details-marker { display:none; }
.key-howto-arrow {
  font-size:20px; line-height:1;
  color:var(--gold);
  transition:transform .2s ease;
}
.key-howto[open] .key-howto-arrow { transform:rotate(90deg); }
.key-howto-steps {
  margin:14px 0 4px;
  padding:0 0 0 22px;
  display:flex; flex-direction:column; gap:12px;
  list-style:decimal;
}
.key-howto-steps li {
  line-height:1.55;
  color:var(--text-2);
}
.key-howto-steps li b { color:var(--text); font-weight:700; }
.key-howto-steps li span { display:block; margin-top:2px; }
.key-howto-steps a { color:var(--gold); font-weight:700; text-decoration:none; }
.key-howto-steps a:hover { text-decoration:underline; }

.pay-step-waiting {
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap:12px;
  padding:18px 4px 4px;
}
.pay-spinner {
  width:56px; height:56px;
  border-radius:50%;
  border:4px solid var(--border);
  border-top-color:var(--gold);
  animation:pay-spin 0.8s linear infinite;
}
@keyframes pay-spin { to { transform:rotate(360deg); } }
.pay-waiting-title {
  font-family:'Nunito',sans-serif;
  font-weight:900;
  font-size:20px;
  color:var(--text);
}
.pay-waiting-sub {
  font-size:14px;
  color:var(--text-2);
  font-weight:500;
  line-height:1.5;
  max-width:380px;
}
.pay-waiting-meta {
  font-size:13px;
  color:var(--text);
  font-weight:600;
  padding:8px 14px;
  background:var(--gold-light);
  border-radius:999px;
}
.pay-waiting-actions {
  display:flex; flex-direction:column; gap:4px;
  align-items:center;
  margin-top:8px;
}
.pay-waiting-actions .btn-link {
  background:transparent;
  border:none;
  color:var(--gold);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  padding:6px 10px;
  text-decoration:none;
  cursor:pointer;
  transition:opacity .15s ease;
}
.pay-waiting-actions .btn-link:hover { opacity:0.75; }
.pay-result-icon {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:900;
  margin-bottom:4px;
}
.pay-result-icon-ok {
  background:rgba(29,158,117,0.12);
  color:var(--green, #1D9E75);
}
.pay-result-icon-fail {
  background:rgba(220,55,55,0.10);
  color:#c83333;
}
.pay-result-icon-warn {
  background:rgba(232,184,0,0.12);
  color:var(--gold);
}

/* SPEC-054 T4 — Happ install platforms grid inside key-howto */
.key-howto-platforms {
  display:flex; flex-direction:column;
  gap:6px;
  margin-top:6px;
}
.key-howto-os {
  display:flex; flex-wrap:wrap;
  align-items:baseline; gap:6px;
  font-size:13px;
}
.key-howto-os-label {
  font-weight:700;
  color:var(--text);
  min-width:130px;
}

/* SPEC-054 — settings card buttons row */
.settings-actions { display:flex; flex-direction:column; gap:10px; }
.settings-actions .btn-acc { width:100%; justify-content:flex-start; }

/* SPEC-054 — inactive subscription card uses warning-red tones */
.sub-status.inactive {
  background:linear-gradient(135deg, rgba(220,55,55,0.08), rgba(220,55,55,0.02));
  border-color:rgba(220,55,55,0.30);
}
.sub-status.inactive .shield {
  border-color:rgba(220,55,55,0.30);
  background:var(--bg-card);
}
.sub-status.inactive .shield svg { color:#c83333; }
.sub-status.inactive .status-title { color:#c83333; }
.sub-status.inactive .live-dot {
  background:#c83333;
  box-shadow:0 0 0 4px rgba(220,55,55,0.18);
}
.sub-status.inactive .progress-bar { background:rgba(220,55,55,0.10); }
.sub-status.inactive .progress-bar .fill {
  background:linear-gradient(90deg, #c83333, #d8763a);
}