/* ═══════════════════════════════════════════════════════════════════════
 * TEMPLATE: byte
 * FILE: style/account.css
 *
 * Byte-native account styling — tech/terminal chrome over the NewsPro forms.
 *   - Neon green (#00d084) accent, mono prompts (>_ token)
 *   - Bordered "data card" feel, tight rhythm, JetBrains Mono for chrome
 *   - 2-col dashboard grid with sticky sidebar, single-col on mobile
 *   - Full coverage for: login/register/forgot/reset, hero + sidebar shell,
 *     KPI strip, dashboard cards, account article / comment / short partials,
 *     settings form, delete stats, subscription chrome (plan cards,
 *     transactions table, payment modal)
 *
 * Uses ONLY the 6 theme vars (--color-000/fff/333/555/999/eee) and the
 * --bt-accent / --bt-accent-dim / --bt-accent-soft template vars defined
 * in base.css. No invented tokens. Dark-mode accent override lives in base.css
 * already (body.dark-mode { --bt-accent: #26e39e; ... }).
 *
 * Preserves every JS-hook class/attribute (form IDs, input names, avatar DOM,
 * data-* triggers, .social_login_button, .connections-grid, .SavingArticleButton,
 * .like_article, .follow-btn, .follow-category-btn).
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── MONO FONT FOR CHROME ─────────────────────────────────────────── */
.bt-account-container .bt-account-prompt,
.bt-dash__hero-prompt,
.bt-dash__nav-heading,
.bt-dash__card-prompt,
.bt-dash__sub-label,
.bt-kpi__prompt,
.bt-acct-card__prompt,
.bt-danger-prompt {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════
   PUBLIC AUTH PAGES (login / register / forgot / reset)
   ═══════════════════════════════════════════ */
.bt-account-container,
.settings-container {
  max-width: 540px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  color: var(--color-333);
}

.bt-account-section,
.settings-section,
.section_account {
  background: var(--color-fff);
  border: 1px solid var(--color-eee);
  border-inline-start: 3px solid var(--bt-accent);
  border-radius: var(--bt-radius);
  padding: 28px 28px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.bt-account-section h1,
.bt-account-section h2,
.bt-account-section h3,
.settings-section h1,
.settings-section h2,
.settings-section h3,
.section_account h2,
.section_account h3 {
  margin: 0 0 16px;
  color: var(--color-000);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.bt-account-section h1 { font-size: 1.6rem; }
.bt-account-section h2,
.settings-section h2,
.section_account h2 {
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bt-account-section h3 { font-size: 1rem; }
.bt-account-section h2 svg,
.settings-section h2 svg,
.section_account h2 svg {
  width: 20px;
  height: 20px;
  color: var(--bt-accent);
  flex-shrink: 0;
}

.bt-account-header,
.settings-header {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-eee);
}
.bt-account-prompt {
  display: inline-block;
  font-size: 11px;
  color: var(--bt-accent);
  background: var(--bt-accent-soft);
  padding: 3px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.bt-account-header h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-000);
}
.bt-account-subtitle {
  margin: 8px 0 0;
  color: var(--color-555);
  font-size: 14px;
  line-height: 1.5;
}

/* ── form groups / fields ─────────────────── */
.bt-form-group,
.form-group { margin-bottom: 18px; }
.bt-form-field,
.form-field { margin-bottom: 14px; position: relative; }
.bt-form-field label,
.form-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-555);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.bt-input,
.input-field,
.bt-account-form input[type="text"],
.bt-account-form input[type="email"],
.bt-account-form input[type="password"],
.bt-account-form input[type="url"],
.bt-account-form textarea,
.bt-account-form select {
  width: 100%;
  padding: 11px 13px;
  background: var(--color-fff);
  color: var(--color-000);
  border: 1px solid var(--color-eee);
  border-radius: var(--bt-radius);
  font-size: 15px;
  font-family: inherit;
  transition: border-color var(--bt-transition), box-shadow var(--bt-transition);
  box-sizing: border-box;
}
.bt-input:focus,
.input-field:focus,
.bt-account-form input:focus,
.bt-account-form textarea:focus,
.bt-account-form select:focus {
  outline: none;
  border-color: var(--bt-accent);
  box-shadow: 0 0 0 3px var(--bt-accent-dim);
}
.bt-account-form textarea {
  min-height: 110px;
  resize: vertical;
}
.bt-account-form input:disabled {
  background: var(--color-eee);
  color: var(--color-999);
  cursor: not-allowed;
}

.bt-input-pair,
.input-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .bt-input-pair,
  .input-pair { grid-template-columns: 1fr; }
}

/* ── links ────────────────────────────────── */
.bt-form-link,
.form-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--bt-accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.bt-form-link:hover,
.form-link:hover { text-decoration: underline; }

/* ── buttons ──────────────────────────────── */
.bt-btn-primary,
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--bt-accent);
  color: #000;
  border: 2px solid var(--bt-accent);
  border-radius: var(--bt-radius);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--bt-transition), color var(--bt-transition), transform 0.1s, box-shadow var(--bt-transition);
  font-family: inherit;
}
.bt-btn-primary:hover,
.button-primary:hover {
  background: transparent;
  color: var(--bt-accent);
  box-shadow: 0 0 0 3px var(--bt-accent-dim);
}
.bt-btn-primary svg,
.button-primary svg { width: 14px; height: 14px; }

.bt-btn-outline,
.button-outline,
.button-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  background: transparent;
  color: var(--color-333);
  border: 1px solid var(--color-eee);
  border-radius: var(--bt-radius);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--bt-transition), color var(--bt-transition);
  font-family: inherit;
}
.bt-btn-outline:hover,
.button-outline:hover,
.button-cancel:hover {
  border-color: var(--bt-accent);
  color: var(--bt-accent);
}

.bt-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  background: transparent;
  color: #ef4444;
  border: 2px solid #ef4444;
  border-radius: var(--bt-radius);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--bt-transition), color var(--bt-transition);
  font-family: inherit;
}
.bt-btn-danger:hover { background: #ef4444; color: #fff; }
.bt-btn-danger svg { width: 14px; height: 14px; }

.bt-btn-primary:disabled,
.button-primary:disabled,
.bt-btn-outline:disabled,
.button-outline:disabled { opacity: 0.55; cursor: not-allowed; }

.button_load {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.button_load::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-top-color: #000;
  border-radius: 50%;
  animation: bt-spin 0.7s linear infinite;
}
.bt-btn-outline.button_load::after,
.button-outline.button_load::after {
  border-color: rgba(0, 208, 132, 0.25);
  border-top-color: var(--bt-accent);
}
@keyframes bt-spin { to { transform: rotate(360deg); } }

.bt-account-actions,
.settings-actions,
.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.bt-account-actions.center,
.settings-actions.center,
.button-container.center { justify-content: center; }

/* ── OR divider ───────────────────────────── */
.bt-line-with-text,
.LineWithText {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  max-width: 540px;
  padding: 0 20px;
  margin-inline: auto;
}
.bt-line,
.Line {
  flex: 1;
  height: 1px;
  background: var(--color-eee);
}
.bt-line-with-text span,
.LineWithText span {
  color: var(--color-999);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── social connections (login + settings) ─── */
/* `.social-connections` is a wrapper used two ways:
   1) login.php: directly holds OAuth tiles → grid behavior
   2) settings.php: wraps a heading + inner `.connections-grid` → BLOCK only
   Use :not(:has(.connections-grid)) to avoid grid-in-grid collapse. */
.bt-social-connections:not(:has(.connections-grid)),
.social-connections:not(:has(.connections-grid)) {
  max-width: 540px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.bt-social-button,
.social_login_button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-fff);
  color: var(--color-333);
  border: 1px solid var(--color-eee);
  border-radius: var(--bt-radius);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--bt-transition), color var(--bt-transition), background var(--bt-transition);
}
.bt-social-button:hover,
.social_login_button:hover {
  border-color: var(--bt-accent);
  color: var(--bt-accent);
  background: var(--bt-accent-soft);
}
.bt-social-button img,
.social_login_button img,
.bt-social-button .img,
.social_login_button .img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── terms text under login ───────────────── */
.bt-account-terms {
  margin: 16px 0 0;
  color: var(--color-555);
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   DASHBOARD SHELL (_shell.php)
   ═══════════════════════════════════════════ */
.bt-dash {
  max-width: var(--bt-max-w);
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* ── HERO / TERMINAL ID CARD ──────────────── */
.bt-dash__hero {
  background: linear-gradient(135deg, #0a0f1a, #111827);
  border: 1px solid var(--color-eee);
  border-block-start: 3px solid var(--bt-accent);
  border-radius: var(--bt-radius-lg);
  padding: 28px 28px;
  margin-bottom: 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}
.bt-dash__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 208, 132, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 208, 132, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.bt-dash__hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.bt-dash__hero-identity {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.bt-dash__avatar {
  position: relative;
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: visible;
}
.bt-dash__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--bt-accent);
  display: block;
  background: var(--color-eee);
}
.bt-dash__avatar-pulse {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-end: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bt-accent);
  border: 2px solid #0a0f1a;
  box-shadow: 0 0 0 0 rgba(0, 208, 132, 0.7);
  animation: bt-pulse 2s infinite;
}
@keyframes bt-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 208, 132, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(0, 208, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 208, 132, 0); }
}
.bt-dash__hero-body { min-width: 0; }
.bt-dash__hero-prompt {
  display: inline-block;
  font-size: 11px;
  color: var(--bt-accent);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.bt-dash__hero-name {
  color: #fff;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  line-height: 1.1;
}
.bt-dash__hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bt-dash__hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(0, 208, 132, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
}
.bt-dash__hero-pill svg {
  width: 12px;
  height: 12px;
  color: var(--bt-accent);
}

/* Level ─── */
.bt-dash__level {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 208, 132, 0.25);
  border-radius: var(--bt-radius);
  min-width: 260px;
}
.bt-dash__level-badge {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--lvl-color, var(--bt-accent));
  color: #000;
  border-radius: var(--bt-radius);
  font-weight: 900;
}
.bt-dash__level-icon { font-size: 1.2rem; line-height: 1; }
.bt-dash__level-n { font-size: 10px; letter-spacing: 0.05em; margin-top: 2px; }
.bt-dash__level-body { flex: 1; min-width: 0; }
.bt-dash__level-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  color: #fff;
}
.bt-dash__level-name { font-size: 13px; font-weight: 700; }
.bt-dash__level-pts { font-size: 11px; color: var(--bt-accent); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.bt-dash__level-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}
.bt-dash__level-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bt-accent), #26e39e);
  transition: width 0.5s ease;
}
.bt-dash__level-hint {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
  .bt-dash__hero-inner { grid-template-columns: 1fr; }
  .bt-dash__hero-identity { flex-direction: column; text-align: center; gap: 12px; }
  .bt-dash__hero-meta { justify-content: center; }
  .bt-dash__level { width: 100%; min-width: 0; }
}

/* ── LAYOUT GRID ──────────────────────────── */
.bt-dash__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .bt-dash__grid { grid-template-columns: 1fr; }
}

/* ── SIDEBAR ──────────────────────────────── */
.bt-dash__side {
  position: sticky;
  top: calc(var(--bt-nav-h) + var(--bt-catbar-h) + 12px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 900px) {
  .bt-dash__side { position: static; }
}
.bt-dash__nav {
  background: var(--color-fff);
  border: 1px solid var(--color-eee);
  border-radius: var(--bt-radius);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bt-dash__nav-heading {
  padding: 8px 12px 4px;
  font-size: 10px;
  color: var(--color-999);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bt-dash__nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--bt-radius);
  color: var(--color-333);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--bt-transition), color var(--bt-transition);
  position: relative;
}
.bt-dash__nav-link svg {
  width: 16px;
  height: 16px;
  color: var(--color-555);
  flex-shrink: 0;
  transition: color var(--bt-transition);
}
.bt-dash__nav-link > span:first-of-type { flex: 1; min-width: 0; }
.bt-dash__nav-link:hover {
  background: var(--bt-accent-soft);
  color: var(--bt-accent);
}
.bt-dash__nav-link:hover svg { color: var(--bt-accent); }
.bt-dash__nav-link.is-active {
  background: var(--bt-accent-soft);
  color: var(--bt-accent);
  border-inline-start: 2px solid var(--bt-accent);
  padding-inline-start: 10px;
}
.bt-dash__nav-link.is-active svg { color: var(--bt-accent); }
.bt-dash__nav-badge {
  background: var(--color-eee);
  color: var(--color-555);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bt-dash__nav-link.is-active .bt-dash__nav-badge {
  background: var(--bt-accent);
  color: #000;
}
.bt-dash__nav-sep {
  height: 1px;
  background: var(--color-eee);
  margin: 6px 8px;
}
.bt-dash__nav-link--warn svg { color: #f59e0b; }
.bt-dash__nav-link--warn:hover { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.bt-dash__nav-link--warn:hover svg { color: #f59e0b; }
.bt-dash__nav-link--danger svg { color: #ef4444; }
.bt-dash__nav-link--danger:hover { background: rgba(239, 68, 68, 0.08); color: #ef4444; }
.bt-dash__nav-link--danger:hover svg { color: #ef4444; }

/* Sidebar subscription card */
.bt-dash__sub-card {
  padding: 16px;
  border-radius: var(--bt-radius);
  border: 1px solid var(--color-eee);
  background: var(--color-fff);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bt-dash__sub-card--active {
  background: linear-gradient(135deg, #0a0f1a, #111827);
  border-color: var(--bt-accent);
  color: #fff;
}
.bt-dash__sub-card--upsell {
  border: 1px dashed var(--bt-accent);
  background: var(--bt-accent-soft);
}
.bt-dash__sub-label {
  font-size: 10px;
  color: var(--bt-accent);
  text-transform: uppercase;
}
.bt-dash__sub-card--active .bt-dash__sub-label { color: var(--bt-accent); }
.bt-dash__sub-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.bt-dash__sub-card--active .bt-dash__sub-name { color: #fff; }
.bt-dash__sub-status {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 8px;
  background: var(--bt-accent);
  color: #000;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bt-dash__sub-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-555);
}
.bt-dash__sub-card--active .bt-dash__sub-meta { color: rgba(255,255,255,0.65); }
.bt-dash__sub-btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bt-accent);
  color: #000;
  border-radius: var(--bt-radius);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background var(--bt-transition);
}
.bt-dash__sub-btn:hover { background: #00e892; }

/* ── MAIN COLUMN ──────────────────────────── */
.bt-dash__main { min-width: 0; }

/* Generic "card" wrapper used by every dashboard section */
.bt-dash__card {
  background: var(--color-fff);
  border: 1px solid var(--color-eee);
  border-radius: var(--bt-radius);
  padding: 22px 22px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.bt-dash__card-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-eee);
  flex-wrap: wrap;
}
.bt-dash__card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--color-000);
  display: flex;
  flex-direction: column;
  gap: 4px;
  letter-spacing: -0.01em;
}
.bt-dash__card-prompt {
  font-size: 11px;
  color: var(--bt-accent);
  font-weight: 600;
  text-transform: uppercase;
}
.bt-dash__card-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bt-dash__card-main svg {
  width: 18px;
  height: 18px;
  color: var(--bt-accent);
}
.bt-dash__card-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  background: var(--bt-accent-soft);
  color: var(--bt-accent);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  margin-inline-start: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bt-dash__card-more {
  color: var(--bt-accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bt-dash__card-more:hover { text-decoration: underline; }

/* ── KPI STRIP (index.php) ────────────────── */
.bt-dash__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.bt-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px;
  background: var(--color-fff);
  border: 1px solid var(--color-eee);
  border-inline-start: 3px solid var(--bt-accent);
  border-radius: var(--bt-radius);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--bt-transition), transform 0.12s, border-color var(--bt-transition);
}
.bt-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 208, 132, 0.12);
  border-color: var(--bt-accent);
}
.bt-kpi__prompt {
  font-size: 10px;
  color: var(--bt-accent);
  text-transform: uppercase;
}
.bt-kpi__n {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-000);
  letter-spacing: -0.03em;
  line-height: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bt-kpi__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-555);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bt-kpi__label svg {
  width: 12px;
  height: 12px;
  color: var(--bt-accent);
}

/* ═══════════════════════════════════════════
   ACCOUNT PARTIALS — article card / comment / short
   ═══════════════════════════════════════════ */

/* Saved / Liked articles list */
.bt-acct-articles-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bt-acct-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 12px;
  background: var(--color-fff);
  border: 1px solid var(--color-eee);
  border-radius: var(--bt-radius);
  transition: border-color var(--bt-transition), box-shadow var(--bt-transition);
}
.bt-acct-card:hover {
  border-color: var(--bt-accent);
  box-shadow: 0 4px 14px rgba(0, 208, 132, 0.1);
}
.bt-acct-card__thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-eee);
}
.bt-acct-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.bt-acct-card:hover .bt-acct-card__thumb img { transform: scale(1.04); }
.bt-acct-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bt-acct-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bt-acct-card__cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bt-accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bt-acct-card__prompt { color: var(--bt-accent); }
.bt-acct-card__date {
  font-size: 11px;
  color: var(--color-999);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bt-acct-card__action {
  margin-inline-start: auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bt-accent-soft);
  color: var(--bt-accent);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--bt-transition), color var(--bt-transition);
  border: none;
}
.bt-acct-card__action:hover {
  background: var(--bt-accent);
  color: #000;
}
.bt-acct-card__action svg { width: 14px; height: 14px; }
.bt-acct-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.bt-acct-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-000);
  line-height: 1.3;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--bt-transition);
}
.bt-acct-card__link:hover .bt-acct-card__title { color: var(--bt-accent); }
.bt-acct-card__sub {
  font-size: 13px;
  color: var(--color-555);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bt-acct-card__foot {
  margin-top: auto;
  padding-top: 6px;
}
.bt-acct-card__author {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-555);
  font-weight: 600;
}
.bt-acct-card__author svg { width: 12px; height: 12px; color: var(--color-555); }

@media (max-width: 640px) {
  .bt-acct-card { grid-template-columns: 100px 1fr; gap: 10px; padding: 10px; }
  .bt-acct-card__title { font-size: 0.95rem; }
  .bt-acct-card__sub { display: none; }
}

/* Comments list */
.bt-acct-comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bt-acct-comment {
  padding: 14px 16px;
  background: var(--color-fff);
  border: 1px solid var(--color-eee);
  border-inline-start: 3px solid var(--bt-accent);
  border-radius: var(--bt-radius);
}
.bt-acct-comment__body {
  font-size: 14px;
  color: var(--color-333);
  line-height: 1.55;
  margin-bottom: 10px;
}
.bt-acct-comment__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11px;
  color: var(--color-999);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bt-acct-comment__date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bt-acct-comment__date svg { width: 12px; height: 12px; color: var(--bt-accent); }
.bt-acct-comment__ref {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-555);
  text-decoration: none;
  transition: color var(--bt-transition);
  font-weight: 600;
}
.bt-acct-comment__ref:hover { color: var(--bt-accent); }
.bt-acct-comment__ref svg { width: 12px; height: 12px; color: var(--bt-accent); }

/* Shorts grid */
.bt-acct-shorts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.bt-acct-short {
  display: block;
  background: var(--color-eee);
  border: 1px solid var(--color-eee);
  border-radius: var(--bt-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, border-color var(--bt-transition);
}
.bt-acct-short:hover {
  transform: translateY(-3px);
  border-color: var(--bt-accent);
}
.bt-acct-short__thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #111;
}
.bt-acct-short__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bt-acct-short__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0.85;
  pointer-events: none;
}
.bt-acct-short__play svg { width: 32px; height: 32px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.bt-acct-short__stats {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-start: 6px;
  inset-inline-end: 6px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bt-acct-short__stats svg { width: 11px; height: 11px; vertical-align: -1px; margin-inline-end: 3px; }
.bt-acct-short__title {
  padding: 8px 10px 2px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  background: var(--color-fff);
  color: var(--color-000);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bt-acct-short__meta {
  padding: 0 10px 10px;
  font-size: 11px;
  color: var(--color-999);
  background: var(--color-fff);
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Empty state ──────────────────────────── */
.bt-empty {
  padding: 48px 20px;
  text-align: center;
  background: var(--color-eee);
  border: 1px dashed rgba(128, 128, 128, 0.25);
  border-radius: var(--bt-radius);
  color: var(--color-555);
  font-size: 13px;
  margin: 0;
}
.bt-empty::before {
  content: '>_';
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--bt-accent);
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

/* ═══════════════════════════════════════════
   SETTINGS (inside .bt-settings → reset cards)
   ═══════════════════════════════════════════ */
.bt-settings .bt-account-section,
.bt-settings .settings-section,
.bt-settings .section_account,
.bt-settings .fl-account-section {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 18px 0;
  margin: 0;
  border-block-end: 1px solid var(--color-eee);
  border-inline-start: 0;
}
.bt-settings .bt-account-section:last-of-type,
.bt-settings .settings-section:last-of-type {
  border-block-end: 0;
}

.bt-save-bar {
  background: transparent;
  border-block-start: 1px solid var(--color-eee);
  padding-top: 18px;
  margin-top: 6px;
}

/* Avatar picker — preserve DOM, style only */
.avatar-container,
.ContainerAvatar {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.ContainerAvatar {
  position: relative;
  width: 120px;
  height: 120px;
}
.AvatarPreview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--bt-accent);
  background: var(--color-eee);
  box-shadow: 0 0 0 3px var(--color-fff), 0 6px 16px rgba(0, 208, 132, 0.18);
}
.AvatarPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.AvatarEdit {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  z-index: 2;
}
.AvatarEdit input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.AvatarEdit label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bt-accent);
  color: #000;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--color-fff);
  transition: transform 0.15s, background var(--bt-transition);
}
.AvatarEdit label:hover { transform: scale(1.1); background: #00e892; }
.AvatarEdit label svg,
.AvatarEdit .AddAvatarbutton {
  width: 16px;
  height: 16px;
  color: #000;
}

/* Switch / toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  vertical-align: middle;
  margin-inline-end: 8px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--color-eee);
  border-radius: 24px;
  transition: background 0.2s;
}
.slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: var(--color-fff);
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.switch input:checked + .slider { background: var(--bt-accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* Checkbox */
.checkbox-field { margin: 16px 0; }
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  color: var(--color-555);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
}
.checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--bt-accent);
}
.checkbox-label a {
  color: var(--bt-accent);
  font-weight: 600;
  text-decoration: none;
}
.checkbox-label a:hover { text-decoration: underline; }

/* Password utilities */
.password-input-wrapper { position: relative; }
.toggle-password {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-555);
}
.toggle-password:hover { color: var(--bt-accent); }
.password-strength {
  margin-top: 6px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-eee);
  transition: width 0.3s, background-color 0.3s;
}
.password-strength.weak { background: #ef4444; width: 33%; }
.password-strength.medium { background: #f59e0b; width: 66%; }
.password-strength.strong { background: var(--bt-accent); width: 100%; }
.password-match {
  margin-top: 5px;
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.password-match.match { color: var(--bt-accent); }
.password-match.no-match { color: #ef4444; }
.password-requirements {
  background: var(--color-eee);
  padding: 12px 14px;
  border-radius: var(--bt-radius);
  margin: 14px 0;
  color: var(--color-555);
  font-size: 13px;
}
.password-requirements p {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--bt-accent);
  margin: 0 0 6px;
  letter-spacing: 0.04em;
}
.password-requirements ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.password-requirements li {
  padding: 3px 0 3px 22px;
  position: relative;
  font-size: 12px;
}
.password-requirements li::before {
  content: '\2717';
  position: absolute;
  left: 0;
  color: #ef4444;
  font-weight: 700;
}
.password-requirements li.valid::before {
  content: '\2713';
  color: var(--bt-accent);
}

/* Input with icon (social links on settings) */
.input-with-icon { position: relative; }
.input-with-icon label { margin-bottom: 6px; }
.input-with-icon svg {
  position: absolute;
  inset-inline-start: 10px;
  top: 34px;
  width: 16px;
  height: 16px;
  color: var(--color-555);
  pointer-events: none;
}
.input-with-icon input { padding-inline-start: 34px; }

/* Connections grid (followed, social in settings) */
.connections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.connection-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-eee);
  border: 1px solid transparent;
  border-radius: var(--bt-radius);
  font-size: 13px;
  transition: border-color var(--bt-transition);
}
.connection-item.connected {
  border-color: var(--bt-accent);
  background: var(--bt-accent-soft);
}
.connection-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-555);
  flex-shrink: 0;
}
.connection-item.connected svg { color: var(--bt-accent); }
.connection-item .bt-btn-outline,
.connection-item .button-outline {
  margin-inline-start: auto;
  padding: 5px 10px;
  font-size: 11px;
}
.connection-item-2 { justify-content: space-between; }
.category-link,
.connection-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-333);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.category-link:hover,
.connection-link:hover { color: var(--bt-accent); }
.category-color-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.connection-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--color-eee);
}
.follow-btn,
.follow-category-btn {
  padding: 5px 10px;
  background: transparent;
  color: var(--bt-accent);
  border: 1px solid var(--bt-accent);
  border-radius: var(--bt-radius);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: background var(--bt-transition), color var(--bt-transition);
}
.follow-btn:hover,
.follow-category-btn:hover {
  background: var(--bt-accent);
  color: #000;
}
.follow-btn svg,
.follow-category-btn svg {
  width: 14px;
  height: 14px;
}
.no-followed-message {
  color: var(--color-999);
  font-style: italic;
  font-size: 13px;
  margin: 8px 0 0;
}

/* Security (passkey) */
.security-item { margin-bottom: 12px; }
.passkey-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-eee);
  border-radius: var(--bt-radius);
  font-size: 13px;
}
.passkey-status.active {
  background: var(--bt-accent-soft);
  border: 1px solid var(--bt-accent);
}
.passkey-status svg { width: 18px; height: 18px; color: var(--color-555); flex-shrink: 0; }
.passkey-status.active svg { color: var(--bt-accent); }
.passkey-status > button { margin-inline-start: auto; padding: 6px 12px; font-size: 11px; }

/* Danger zone */
.bt-danger-zone {
  border-inline-start: 3px solid #ef4444 !important;
  background: rgba(239, 68, 68, 0.03);
}
.bt-danger-prompt {
  display: inline-block;
  font-size: 11px;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  padding: 2px 8px;
  border-radius: 3px;
  margin-inline-end: 8px;
  text-transform: uppercase;
}
.danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* ═══════════════════════════════════════════
   DELETE PAGE
   ═══════════════════════════════════════════ */
.bt-delete-card .bt-dash__card-main svg { color: #ef4444; }
.bt-delete-warning,
.delete-account-warning {
  background: rgba(239, 68, 68, 0.06) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  border-inline-start: 3px solid #ef4444 !important;
  color: var(--color-333);
  padding: 16px 18px;
  border-radius: var(--bt-radius);
  margin-bottom: 16px;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.55;
}
.bt-delete-warning p,
.delete-account-warning p { margin: 0 0 8px; }
.bt-delete-warning p:last-child,
.delete-account-warning p:last-child { margin-bottom: 0; }

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.stat-item {
  text-align: center;
  padding: 14px 10px;
  background: var(--color-eee);
  border-radius: var(--bt-radius);
  border: 1px solid transparent;
  transition: border-color var(--bt-transition);
}
.stat-item:hover { border-color: var(--bt-accent); }
.stat-value {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--bt-accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1;
}
.stat-label {
  font-size: 10px;
  color: var(--color-555);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* Confirmation dialog (native <dialog>) */
dialog.dl1 {
  max-width: 380px;
  width: 90%;
  background: var(--color-fff);
  color: var(--color-000);
  border: 1px solid var(--color-eee);
  border-block-start: 3px solid #ef4444;
  border-radius: var(--bt-radius-lg);
  padding: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
dialog.dl1::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); }
.dl2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: #ef4444;
}
.dl3 { margin: 0 0 18px; color: var(--color-555); font-size: 13px; }
.npuni-btn-group {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.npuni-btn {
  padding: 8px 16px;
  background: transparent;
  color: var(--color-333);
  border: 1px solid var(--color-eee);
  border-radius: var(--bt-radius);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color var(--bt-transition), color var(--bt-transition);
}
.npuni-btn:hover { border-color: var(--bt-accent); color: var(--bt-accent); }
.npuni-btn.filled {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}
.npuni-btn.filled:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

/* Expired reset link */
.expired-message {
  text-align: center;
  padding: 30px 20px;
  color: var(--color-555);
}
.expired-message .error-icon {
  color: #ef4444;
  margin: 0 auto 14px;
}
.expired-message p { margin: 6px 0; font-size: 14px; }

/* ═══════════════════════════════════════════
   SUBSCRIPTION PAGE
   ═══════════════════════════════════════════ */
.bt-subscription .container_account,
.bt-subscription .bt-account-grid { margin-bottom: 18px; }
.bt-subscription .section_account,
.bt-subscription .bt-account-section {
  background: var(--color-eee);
  border: 1px solid var(--color-eee);
  border-inline-start: 3px solid var(--bt-accent);
  padding: 20px 22px;
  border-radius: var(--bt-radius);
  margin-bottom: 16px;
  box-shadow: none;
}
.bt-subscription .bt-account-grid.single-row { display: block; }

.bt-success-message {
  background: var(--bt-accent-soft);
  border: 1px solid var(--bt-accent);
  border-radius: var(--bt-radius);
  padding: 18px;
  text-align: center;
  margin-bottom: 18px;
}
.bt-success-message svg {
  width: 36px;
  height: 36px;
  color: var(--bt-accent);
  margin-bottom: 8px;
}
.bt-success-message h3 {
  margin: 0 0 6px;
  color: var(--color-000);
  font-size: 1.1rem;
  font-weight: 800;
}
.bt-success-message p { margin: 0; color: var(--color-333); font-size: 13px; }

.subscription_info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.info_item_account {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-fff);
  border-radius: var(--bt-radius);
  font-size: 13px;
}
.info_item_account strong {
  color: var(--color-555);
  font-size: 11px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.info_item_account span {
  color: var(--color-000);
  font-weight: 600;
  text-align: end;
}

.subscription_status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.subscription_status.active { background: var(--bt-accent); color: #000; }
.subscription_status.trialing { background: #3b82f6; color: #fff; }
.subscription_status.cancelled,
.subscription_status.canceled { background: #ef4444; color: #fff; }

.action_link_account,
.bt-action-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  color: #ef4444;
  border: 1px solid #ef4444;
  border-radius: var(--bt-radius);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--bt-transition), color var(--bt-transition);
  font-family: inherit;
}
.action_link_account:hover,
.bt-action-link:hover { background: #ef4444; color: #fff; }
.action_link_account svg,
.bt-action-link svg { width: 14px; height: 14px; }

.no_subscription_message {
  text-align: center;
  padding: 24px 16px;
}
.no_subscription_message svg {
  width: 40px;
  height: 40px;
  color: var(--bt-accent);
  margin-bottom: 10px;
}
.no_subscription_message h3 { margin: 0 0 6px; color: var(--color-000); font-size: 1.1rem; font-weight: 800; }
.no_subscription_message p { margin: 0; color: var(--color-555); font-size: 13px; }

.free_usage { margin-top: 12px; }
.usage_bar {
  height: 8px;
  background: var(--color-fff);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.usage_progress {
  height: 100%;
  background: linear-gradient(90deg, var(--bt-accent), #26e39e);
  transition: width 0.4s;
}
.free_usage p {
  margin: 0;
  font-size: 12px;
  color: var(--color-555);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.free_usage strong { color: var(--color-000); }

/* Transactions */
.transactions_table { overflow-x: auto; }
.transactions_table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--color-fff);
  border-radius: var(--bt-radius);
  overflow: hidden;
}
.transactions_table th,
.transactions_table td {
  padding: 10px 14px;
  text-align: start;
  border-block-end: 1px solid var(--color-eee);
}
.transactions_table th {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--color-555);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-eee);
  font-weight: 700;
}
.transactions_table td { color: var(--color-333); }
.transaction_status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.transaction_status.completed { background: var(--bt-accent); color: #000; }
.transaction_status.pending { background: #f59e0b; color: #fff; }
.transaction_status.failed { background: #ef4444; color: #fff; }
.receipt_link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--bt-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 11px;
}
.receipt_link:hover { text-decoration: underline; }
.receipt_link svg { width: 12px; height: 12px; }

/* Plan selector toggle */
.plan_selector { margin-bottom: 18px; }
.plan_toggle {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  background: var(--color-fff);
  border: 1px solid var(--color-eee);
  border-radius: 999px;
}
.plan_toggle button {
  padding: 7px 16px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--color-555);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--bt-transition), color var(--bt-transition);
  font-family: inherit;
}
.plan_toggle button.active {
  background: var(--bt-accent);
  color: #000;
}

/* Plan cards */
.plans_container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.plans_container.display_none { display: none; }
.plan_card {
  background: var(--color-fff);
  border: 1px solid var(--color-eee);
  border-radius: var(--bt-radius);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: border-color var(--bt-transition), box-shadow var(--bt-transition), transform 0.15s;
}
.plan_card:hover {
  border-color: var(--bt-accent);
  box-shadow: 0 8px 20px rgba(0, 208, 132, 0.15);
  transform: translateY(-2px);
}
.plan_card.featured {
  border: 2px solid var(--bt-accent);
  box-shadow: 0 4px 16px rgba(0, 208, 132, 0.15);
}
.plan_badge {
  position: absolute;
  top: -10px;
  inset-inline-start: 16px;
  padding: 3px 10px;
  background: var(--bt-accent);
  color: #000;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.plan_card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-000);
}
.plan_price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--color-000);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.plan_price .currency { font-size: 0.9rem; color: var(--color-555); }
.plan_price .amount { font-size: 1.8rem; font-weight: 900; color: var(--bt-accent); letter-spacing: -0.02em; }
.plan_price .period { font-size: 0.85rem; color: var(--color-555); margin-inline-start: 2px; }
.plan_price.has_sale .original_price {
  text-decoration: line-through;
  color: var(--color-999);
  font-size: 0.85rem;
}
.plan_price.has_sale .original_price .amount {
  color: var(--color-999);
  font-size: 0.85rem;
  font-weight: 600;
}
.plan_price.has_sale .sale_price { display: flex; align-items: baseline; gap: 4px; }
.sale_badge {
  background: #ef4444;
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-inline-start: 4px;
}
.sale_timer {
  padding: 6px 10px;
  background: var(--color-eee);
  border-radius: 3px;
  font-size: 11px;
  color: var(--color-555);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-align: center;
}
.trial_info {
  padding: 4px 10px;
  background: var(--bt-accent-soft);
  color: var(--bt-accent);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: flex-start;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.plan_card p { margin: 0; font-size: 12px; color: var(--color-555); line-height: 1.5; }
.plan_features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan_features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-333);
}
.plan_features svg { width: 14px; height: 14px; color: var(--bt-accent); flex-shrink: 0; }

.plan_card .button_black,
.plan_card .bt-btn-primary,
.plan_card .button-primary {
  margin-top: 10px;
  width: 100%;
}

.plans_info_text {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--color-eee);
  border-radius: var(--bt-radius);
  font-size: 12px;
  color: var(--color-555);
  line-height: 1.55;
}

/* Payment modal */
.help_window {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.help_window.is-active { display: flex; }
.help_window_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.help_window_wrapper {
  position: relative;
  background: var(--color-fff);
  border: 1px solid var(--color-eee);
  border-block-start: 3px solid var(--bt-accent);
  border-radius: var(--bt-radius-lg);
  max-width: 560px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.help_window_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-block-end: 1px solid var(--color-eee);
  position: sticky;
  top: 0;
  background: var(--color-fff);
  z-index: 1;
}
.help_window_header .modal__title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-000);
}
.help_window_close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-999);
  padding: 4px;
  transition: color var(--bt-transition);
}
.help_window_close:hover { color: var(--bt-accent); }
.help_window_close svg { width: 18px; height: 18px; }
.payment_selection_wrapper { padding: 18px 20px; }

.coupon_section {
  margin-bottom: 18px;
  padding: 14px;
  background: var(--color-eee);
  border-radius: var(--bt-radius);
}
.coupon_section h4 {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--bt-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
}
.coupon_input_wrapper { display: flex; gap: 6px; }
.coupon_input {
  flex: 1;
  padding: 8px 12px;
  background: var(--color-fff);
  border: 1px solid var(--color-eee);
  border-radius: var(--bt-radius);
  font-size: 13px;
  font-family: inherit;
  color: var(--color-000);
}
.coupon_input:focus { outline: none; border-color: var(--bt-accent); }
.coupon_button {
  padding: 8px 14px;
  background: var(--bt-accent);
  color: #000;
  border: none;
  border-radius: var(--bt-radius);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--bt-transition);
}
.coupon_button:hover { background: #00e892; }
.coupon_message {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--bt-radius);
  font-size: 12px;
}
.coupon_message.success { background: var(--bt-accent-soft); color: var(--bt-accent); }
.coupon_message.error { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.applied_coupon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--bt-accent-soft);
  border-radius: var(--bt-radius);
  font-size: 12px;
}
.applied_coupon .coupon_details { display: flex; align-items: center; gap: 6px; flex: 1; }
.applied_coupon svg { width: 14px; height: 14px; color: var(--bt-accent); }
.remove_coupon {
  background: none;
  border: none;
  color: var(--color-555);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}

.selected_plan_info h4 {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--bt-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
}
.plan_summary {
  padding: 12px;
  background: var(--color-eee);
  border-radius: var(--bt-radius);
  margin-bottom: 14px;
}
.summary_item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  color: var(--color-333);
}
.summary_item.total {
  border-block-start: 1px solid var(--color-999);
  margin-top: 8px;
  padding-top: 10px;
  font-weight: 800;
  color: var(--color-000);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.summary_item.discount_item { color: var(--bt-accent); }

.payment_methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.payment_method {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-fff);
  border: 1px solid var(--color-eee);
  border-radius: var(--bt-radius);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-333);
  cursor: pointer;
  transition: border-color var(--bt-transition), color var(--bt-transition), background var(--bt-transition);
  font-family: inherit;
  text-align: start;
}
.payment_method:hover {
  border-color: var(--bt-accent);
  color: var(--bt-accent);
  background: var(--bt-accent-soft);
}
.payment_method svg { width: 16px; height: 16px; color: var(--bt-accent); flex-shrink: 0; }

.payment_form {
  padding: 14px;
  background: var(--color-eee);
  border-radius: var(--bt-radius);
  margin-top: 10px;
}
.payment_form.display_none { display: none; }

.security_badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 10px;
  font-size: 11px;
  color: var(--color-555);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.security_badge svg { width: 12px; height: 12px; color: var(--bt-accent); }

/* Confirm dialog (inside help_window) */
.confirm_dialog_content { padding: 18px 20px; }
.confirm_dialog_content p { margin: 0 0 16px; color: var(--color-333); font-size: 13px; }
.confirm_dialog_buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.confirm_yes {
  padding: 8px 16px;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: var(--bt-radius);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.confirm_yes:hover { background: #dc2626; }
.confirm_no {
  padding: 8px 16px;
  background: transparent;
  color: var(--color-333);
  border: 1px solid var(--color-eee);
  border-radius: var(--bt-radius);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.confirm_no:hover { border-color: var(--bt-accent); color: var(--bt-accent); }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .bt-dash { padding: 16px 12px 40px; }
  .bt-dash__hero { padding: 20px 18px; }
  .bt-dash__card { padding: 18px 16px; }
  .bt-dash__kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bt-kpi { padding: 14px; }
  .bt-kpi__n { font-size: 1.6rem; }
  .subscription_info { grid-template-columns: 1fr; }
  .bt-account-section,
  .settings-section { padding: 20px 18px; }
}

@media (max-width: 480px) {
  .bt-dash__kpis { grid-template-columns: 1fr; }
  .plan_toggle button { padding: 6px 10px; font-size: 11px; }
  .payment_methods { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   DARK-MODE NUDGES
   The 6 theme vars flip automatically. We only adjust
   elements that hard-code colors or need extra contrast.
   ═══════════════════════════════════════════ */
body.dark-mode .bt-dash__hero {
  /* keep dark hero in both modes — it's a design anchor */
  border-color: #1e293b;
}
body.dark-mode .bt-dash__hero-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(38, 227, 158, 0.3);
}
body.dark-mode .bt-dash__nav,
body.dark-mode .bt-dash__card,
body.dark-mode .bt-kpi,
body.dark-mode .bt-acct-card,
body.dark-mode .bt-acct-comment,
body.dark-mode .plan_card,
body.dark-mode .help_window_wrapper,
body.dark-mode .help_window_header {
  background: var(--color-fff);
}
body.dark-mode .bt-acct-short__title,
body.dark-mode .bt-acct-short__meta { background: var(--color-fff); }
body.dark-mode .AvatarPreview {
  box-shadow: 0 0 0 3px var(--color-fff), 0 6px 16px rgba(38, 227, 158, 0.25);
}
body.dark-mode .info_item_account,
body.dark-mode .coupon_section,
body.dark-mode .plan_summary,
body.dark-mode .sale_timer,
body.dark-mode .plans_info_text,
body.dark-mode .payment_form,
body.dark-mode .stat-item,
body.dark-mode .connection-item,
body.dark-mode .password-requirements,
body.dark-mode .bt-subscription .section_account,
body.dark-mode .bt-subscription .bt-account-section {
  background: var(--color-eee);
}
body.dark-mode .bt-btn-primary,
body.dark-mode .button-primary { color: #000; }
body.dark-mode .bt-btn-primary:hover,
body.dark-mode .button-primary:hover { color: var(--bt-accent); }

/* Accent cat label on saved/liked card — ensure readable in dark */
body.dark-mode .bt-acct-card__cat { color: var(--bt-accent); }