/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ── Базовые переменные (не зависят от темы) ────────────────────────────────── */
:root {
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --primary:      #4F46E5;
  --primary-dark: #4338CA;
  --rose:         #F43F5E;
  --green:        #10B981;
  --amber:        #F59E0B;
  --blue:         #3B82F6;
  --purple:       #8B5CF6;

  --radius-sm:  16px;
  --radius-md:  24px;
  --radius-lg:  32px;
  --radius-xl:  40px;
  --radius-2xl: 48px;
}

/* ── Авто-тема: следует за Telegram ─────────────────────────────────────────── */
[data-theme="auto"] {
  --bg:        var(--tg-theme-bg-color,           #F8FAFC);
  --surface:   var(--tg-theme-secondary-bg-color, #FFFFFF);
  --text:      var(--tg-theme-text-color,         #0F172A);
  --text-2:    var(--tg-theme-hint-color,         #64748B);
  --btn-color: var(--tg-theme-button-color,       #4F46E5);
  --btn-text:  var(--tg-theme-button-text-color,  #FFFFFF);
  --border:    rgba(0,0,0,0.08);
  --icon-bg-indigo: rgba(79,70,229,0.12);
  --icon-bg-purple: rgba(139,92,246,0.12);
}

/* ── Светлая тема: фиксированная, Telegram не переопределит ─────────────────── */
[data-theme="light"] {
  --bg:        #F0F4FF;
  --surface:   #FFFFFF;
  --text:      #111827;
  --text-2:    #6B7280;
  --btn-color: #4F46E5;
  --btn-text:  #FFFFFF;
  --border:    rgba(0,0,0,0.07);
  --icon-bg-indigo: rgba(79,70,229,0.1);
  --icon-bg-purple: rgba(139,92,246,0.1);
}

/* ── Тёмная тема: улучшенная ────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #1C1C28;
  --surface:   #25253A;
  --text:      #F1F1F6;
  --text-2:    #8B8BA0;
  --btn-color: #5B52F0;
  --btn-text:  #FFFFFF;
  --border:    rgba(255,255,255,0.08);
  --icon-bg-indigo: rgba(99,90,255,0.22);
  --icon-bg-purple: rgba(159,112,255,0.22);
}

[data-theme="dark"] .action-title,
[data-theme="dark"] .action-row { color: var(--text); }

/* Стат-карточки в тёмной теме чуть ярче */
[data-theme="dark"] .stat-card--green  { background: rgba(16,185,129,0.15); }
[data-theme="dark"] .stat-card--rose   { background: rgba(244,63,94,0.15); }
[data-theme="dark"] .stat-card--blue   { background: rgba(59,130,246,0.15); }
[data-theme="dark"] .stat-card--amber  { background: rgba(245,158,11,0.15); }

/* Deck cards в тёмной теме */
[data-theme="dark"] .deck-card { background: var(--surface); }
[data-theme="dark"] .deck-card__fill { background: #10B981; }

/* Кнопки в тёмной теме — чётче видны */
[data-theme="dark"] .btn-circle.btn-secondary {
  background: rgba(99,90,255,0.18);
  border-color: rgba(99,90,255,0.35);
  color: #A5A0FF;
}
[data-theme="dark"] .btn-back-circle {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Screens ──────────────────────────────────────────────────────────────── */
.screen {
  display: none;
  flex-direction: column;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  animation: fadeUp 0.28s ease both;
}

.screen.active { display: flex; }

.screen--dark {
  background: #020617;
  color: #FFFFFF;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hidden { display: none !important; }

/* ── Loading ──────────────────────────────────────────────────────────────── */
.loading-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

/* ── Login ────────────────────────────────────────────────────────────────── */
.login-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 28px;
  max-width: 380px;
  margin: auto;
  width: 100%;
}

.login-logo { font-size: 64px; line-height: 1; }
.login-logo-img { width: 260px; height: auto; object-fit: contain; }
.header-logo-img { height: 48px; width: auto; object-fit: contain; }
.login-title { font-size: 28px; font-weight: 900; letter-spacing: -0.5px; }
.login-hint  { color: var(--text-2); font-size: 14px; font-weight: 600; }

/* ── Empty ────────────────────────────────────────────────────────────────── */
.empty-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 28px;
  text-align: center;
}

.empty-icon  { font-size: 56px; }
.empty-title { font-size: 22px; font-weight: 800; }
.empty-sub   { color: var(--text-2); font-size: 14px; max-width: 240px; }

/* ── Page header (decks) ──────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 56px 24px 20px;
}

.page-title { font-size: 32px; font-weight: 900; letter-spacing: -1px; }
.page-sub   { color: var(--text-2); font-size: 13px; font-weight: 700; margin-top: 2px; }

/* ── Decks list ───────────────────────────────────────────────────────────── */
.decks-list {
  padding: 0 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deck-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 20px 20px 18px;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
  text-align: left;
  width: 100%;
  color: var(--text);
}

.deck-card:active { transform: scale(0.97); opacity: 0.85; }

.deck-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.deck-card__name  { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.deck-card__count {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
}

.deck-card__arrow {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--icon-bg-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.deck-card__progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.deck-card__progress {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.deck-card__fill {
  height: 100%;
  background: var(--green);
  border-radius: 99px;
  transition: width 0.8s ease;
}

.deck-card__pct-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-2);
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Deck detail ──────────────────────────────────────────────────────────── */
.nav-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 8px;
}

.nav-title {
  font-size: 18px;
  font-weight: 800;
}

.detail-header {
  padding: 8px 24px 20px;
}

.detail-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.detail-sub {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-top: 4px;
}

/* ── Stat grid ────────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 4px;
}

.stat-card {
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-card--green  { background: rgba(16,185,129,0.1); }
.stat-card--rose   { background: rgba(244,63,94,0.1); }
.stat-card--blue   { background: rgba(59,130,246,0.1); }
.stat-card--amber  { background: rgba(245,158,11,0.1); }

.stat-card__label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  opacity: 0.55;
}

.stat-card__value {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}

.stat-card--green .stat-card__value  { color: var(--green); }
.stat-card--rose  .stat-card__value  { color: var(--rose); }
.stat-card--blue  .stat-card__value  { color: var(--blue); }
.stat-card--amber .stat-card__value  { color: var(--amber); }

/* ── Section ──────────────────────────────────────────────────────────────── */
.section {
  padding: 16px 16px 4px;
}

.section--last { padding-bottom: 40px; }

.section-label {
  font-size: 10px;
  font-weight: 900;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 0 4px;
  margin-bottom: 10px;
}

/* ── Action rows ──────────────────────────────────────────────────────────── */
.action-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease;
}

.action-row:active { transform: scale(0.97); }

.action-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-icon--indigo { background: var(--icon-bg-indigo); color: var(--primary); }
.action-icon--purple { background: var(--icon-bg-purple); color: var(--purple); }

.action-info  { flex: 1; }
.action-title { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; color: var(--text); }
.action-desc  { font-size: 12px; color: var(--text-2); font-weight: 600; margin-top: 2px; }
.action-arrow { color: var(--border); flex-shrink: 0; }

/* ── Export chips ─────────────────────────────────────────────────────────── */
.export-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.export-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 12px;
  border-radius: var(--radius-lg);
  border: 1.5px solid transparent;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.12s ease;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.export-chip:active { transform: scale(0.95); }

.export-chip__icon { font-size: 16px; }

.export-chip--rose  { background: rgba(244,63,94,0.08);  color: #E11D48; border-color: rgba(244,63,94,0.15); }
.export-chip--amber { background: rgba(245,158,11,0.08); color: #B45309; border-color: rgba(245,158,11,0.15); }
.export-chip--green { background: rgba(16,185,129,0.08); color: #047857; border-color: rgba(16,185,129,0.15); }
.export-chip--blue  { background: rgba(59,130,246,0.08); color: #1D4ED8; border-color: rgba(59,130,246,0.15); }

/* ── Import form ──────────────────────────────────────────────────────────── */
.import-form {
  padding: 8px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.import-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 24px;
  border: 1.5px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field-group { display: flex; flex-direction: column; gap: 8px; }

.field-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-left: 4px;
}

.field-hint {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

.field-input, .field-textarea {
  width: 100%;
  padding: 18px 22px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.field-input:focus, .field-textarea:focus {
  border-color: var(--primary);
  background: var(--surface);
}

.field-textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
  font-family: monospace;
  font-size: 14px;
}

.divider-text {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

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

.file-upload { cursor: pointer; }

.file-upload__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: border-color 0.2s, color 0.2s;
}

.file-upload:hover .file-upload__inner {
  border-color: var(--primary);
  color: var(--primary);
}

.file-name {
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
  font-weight: 600;
}

/* ── Study screen ─────────────────────────────────────────────────────────── */
.study-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
}

.study-counter {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 99px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.1em;
}

.study-progress {
  padding: 0 20px 8px;
}

.study-progress__bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
}

.study-progress__fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* ── Card stack ───────────────────────────────────────────────────────────── */
.card-stack {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px 24px;
}

.card-shadow {
  position: absolute;
  width: calc(100% - 80px);
  max-width: 300px;
  aspect-ratio: 3/4;
  border-radius: var(--radius-2xl);
  pointer-events: none;
}

.card-shadow--3 {
  background: rgba(55,48,195,0.15);
  transform: translateY(16px) scale(0.88);
  filter: blur(1px);
}

.card-shadow--2 {
  background: rgba(79,70,229,0.25);
  transform: translateY(8px) scale(0.94);
}

.card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3/4;
  border-radius: var(--radius-2xl);
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transform-origin: center bottom;
  transition: transform 0.05s linear;
  will-change: transform;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius-2xl);
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.card-face--front {
  background: linear-gradient(145deg, #5B4FFF, #3730C4);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 32px 64px rgba(79,70,229,0.35), 0 8px 16px rgba(0,0,0,0.2);
}

.card-face--back {
  background: #FFFFFF;
  color: #0F172A;
  transform: rotateY(180deg);
  box-shadow: 0 32px 64px rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.12);
}

.card-word {
  font-size: 36px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  line-height: 1.2;
  font-style: italic;
}

.card-tap-hint {
  position: absolute;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
}

.card-translation {
  font-size: 36px;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

/* ── Swipe overlays ───────────────────────────────────────────────────────── */
.swipe-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 20;
  pointer-events: none;
  transition: opacity 0.1s ease;
  border: 4px solid transparent;
}

.swipe-overlay--known {
  background: rgba(16,185,129,0.2);
  border-color: #10B981;
  color: #10B981;
}

.swipe-overlay--unknown {
  background: rgba(244,63,94,0.2);
  border-color: #F43F5E;
  color: #F43F5E;
}

/* ── Answer buttons ───────────────────────────────────────────────────────── */
.answer-buttons {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 20px 40px 8px;
}

.answer-btn {
  width: 96px;
  height: 96px;
  border-radius: 32px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.answer-btn:active { transform: scale(0.88); }

.answer-btn--unknown {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  color: #F43F5E;
}

.answer-btn--known {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 16px 40px rgba(79,70,229,0.5);
}

.answer-btn--known:active { background: var(--primary-dark); }

.swipe-hint {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.3px;
  padding: 8px 24px 48px;
}

/* ── Quiz screen ──────────────────────────────────────────────────────────── */
.quiz-word-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 32px 16px;
  min-height: 160px;
}

.quiz-word {
  font-size: 42px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -1px;
  line-height: 1.2;
  text-align: center;
  font-style: italic;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 24px 48px;
}

.quiz-option {
  width: 100%;
  padding: 20px 24px;
  border-radius: var(--radius-xl);
  border: 2px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
  color: #FFFFFF;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}

.quiz-option:active { transform: scale(0.97); }

.quiz-option--correct {
  background: rgba(16,185,129,0.2);
  border-color: #10B981;
  color: #10B981;
}

.quiz-option--wrong {
  background: rgba(244,63,94,0.2);
  border-color: #F43F5E;
  color: #F43F5E;
}

.quiz-option--disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* ── Done screen ──────────────────────────────────────────────────────────── */
.done-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 28px;
  max-width: 380px;
  margin: auto;
  width: 100%;
}

.done-emoji { font-size: 64px; line-height: 1; }
.done-title { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; color: #fff; }

.done-stats {
  display: flex;
  gap: 14px;
  margin: 8px 0;
}

.done-stat {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}

.done-stat__num  { font-size: 36px; font-weight: 900; letter-spacing: -1px; }
.done-stat__label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5); margin-top: 4px; }

.done-stat--known .done-stat__num   { color: #10B981; }
.done-stat--unknown .done-stat__num { color: #F43F5E; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--btn-color);
  color: var(--btn-text);
  border: none;
  border-radius: var(--radius-md);
  padding: 16px 24px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
  letter-spacing: -0.2px;
}

.btn-primary:active { transform: scale(0.96); background: var(--primary-dark); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.btn-secondary:active { transform: scale(0.96); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.btn-ghost:active { transform: scale(0.96); }

.btn-full { width: 100%; }

.btn-circle {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.btn-back-circle {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  transition: transform 0.12s ease;
}

.btn-back-circle:active { transform: scale(0.9); }

.btn-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: transform 0.12s ease;
}

.btn-close:active { transform: scale(0.9); }

/* ── Profile ──────────────────────────────────────────────────────────────── */
.profile-avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 24px 20px;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--icon-bg-indigo);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-name {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.3px;
}

/* ── Theme options ────────────────────────────────────────────────────────── */
.theme-options {
  display: flex;
  gap: 10px;
}

.theme-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 8px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.theme-option--active {
  border-color: var(--primary);
  background: rgba(79,70,229,0.08);
}

.theme-option__icon  { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--primary); }
.theme-option__label { font-size: 13px; font-weight: 800; color: var(--text); }
.theme-option__sub   { font-size: 11px; font-weight: 600; color: var(--text-2); }

/* ── Status messages ──────────────────────────────────────────────────────── */
.status-msg {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
}

.status-msg--loading { color: var(--text-2); }
.status-msg--success { color: #047857; background: rgba(16,185,129,0.1); }
.status-msg--error   { color: #BE123C; background: rgba(244,63,94,0.1); }

.error-msg {
  font-size: 13px;
  font-weight: 700;
  color: var(--rose);
}