:root {
  color-scheme: dark;
  --bg: #101417;
  --panel: #1a2024;
  --border: #303b42;
  --text: #edf4f7;
  --muted: #9baab2;
  --accent: #67b7dc;
  --success: #8bdb8e;
  --error: #ff8f8f;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--bg); font: 14px/1.5 system-ui, sans-serif; }
button, input, select { font: inherit; }
.account-shell { width: min(920px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 48px; }
.account-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.account-brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.account-brand img { display: block; width: 92px; height: 50px; object-fit: contain; }
.account-header-actions { display: flex; align-items: center; gap: 10px; }
.account-header-actions a, .account-header-actions button, .account-header-actions select { height:38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: #20282d; text-decoration: none; cursor: pointer; }
.account-header-actions a { display:inline-flex; align-items:center; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-card { padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.account-card h1, .account-card h2 { margin: 0 0 18px; font-size: 20px; }
.account-loading { color: var(--muted); }
.account-password-card { grid-column: 1 / -1; }
.account-telegram-card { grid-column: 1 / -1; }
.account-muted { color: var(--muted); }
.account-details { display: grid; gap: 0; margin: 0; }
.account-details > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.07); }
.account-details > div:first-child { border-top: 0; }
.account-details dt { color: var(--muted); }
.account-details dd { margin: 0; overflow-wrap: anywhere; }
.subscription-status { display: grid; gap: 5px; margin-bottom: 12px; padding: 14px; border: 1px solid rgba(103,183,220,.36); border-radius: 9px; background: rgba(103,183,220,.08); }
.subscription-status strong { color: var(--accent); font-size: 18px; }
.subscription-status span { color: var(--muted); }
.account-buy-credits { display:inline-flex; margin-top:14px; padding:9px 14px; border-radius:7px; color:#071113; background:var(--accent); font-weight:800; text-decoration:none; }
#passwordForm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
#passwordForm label { display: grid; gap: 6px; color: var(--muted); }
#passwordForm input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: #11171a; outline: none; }
#passwordForm input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(103,183,220,.14); }
.account-primary { height: 40px; padding: 0 18px; border: 0; border-radius: 7px; color: #071113; background: var(--accent); font-weight: 800; cursor: pointer; }
.account-primary:disabled { opacity: .55; cursor: wait; }
.account-status { grid-column: 1 / -1; min-height: 21px; margin: 0; color: var(--muted); }
.account-status.success { color: var(--success); }
.account-status.error { color: var(--error); }
@media (max-width: 680px) {
  .account-grid { grid-template-columns: 1fr; }
  .account-password-card { grid-column: auto; }
  #passwordForm { grid-template-columns: 1fr; }
  .account-details > div { grid-template-columns: 105px minmax(0, 1fr); }
}