/* ── Fonts ────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/plus_jakarta_sans.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ── Design Tokens (ground truth: android/app/.../ui/theme/) ────────────── */
:root {
  --bg:             #F5F1EA;
  --surface:         #FFFFFF;
  --surface-muted:   #FAF7F1;
  --text:            #232019;
  --text-secondary:  #9A9184;
  --text-tertiary:   #B3AA9B;
  --outline:         #ECE5D9;
  --outline-soft:    #F1EBE1;

  --primary:         #D9633F;
  --primary-grad-a:  #EF8462;
  --primary-grad-b:  #D9633F;
  --primary-tint:    #FBEEE7;
  --primary-tint-outline: #F2D5C7;

  --success:         #007840;
  --success-bg:      #EAF5EE;
  --success-outline: #CBE6D5;
  --danger:          #D9463F;

  --radius-xs:  10px;
  --radius-sm:  14px;
  --radius-md:  16px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  --shadow-card:     0 4px 14px rgba(38,35,32,.05);
  --shadow-icon-btn: 0 1px 3px rgba(38,35,32,.05);
  --shadow-cta:      0 10px 24px rgba(217,99,63,.34);
  --shadow-fab:      0 10px 24px rgba(217,99,63,.36);
  --shadow-flashcard: 0 20px 44px rgba(38,35,32,.13);

  --transition-fast: 0.2s ease;
  --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* legacy alias kept so any stray reference doesn't break */
  --variant: var(--text-secondary);
}

.theme-dark {
  --bg:              #1B1917;
  --surface:         #262320;
  --surface-muted:   #2B2722;
  --text:            #F3EFE7;
  --text-secondary:  #A79E90;
  --text-tertiary:   #7E7669;
  --outline:         #3A352F;
  --outline-soft:    #332F29;

  --primary:         #E87A54;
  --primary-grad-a:  #F0916D;
  --primary-grad-b:  #E87A54;
  --primary-tint:    #3A2A22;
  --primary-tint-outline: #4A362A;

  --success:         #3FB877;
  --success-bg:      #1E2E24;
  --success-outline: #2E4A38;
  --danger:          #E8685F;

  --shadow-card:     0 4px 14px rgba(0,0,0,.24);
  --shadow-icon-btn: 0 1px 3px rgba(0,0,0,.24);
  --shadow-flashcard: 0 20px 44px rgba(0,0,0,.4);
}

/* ── Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* No blue tap flash on any element — every interactive surface has its own
     :active feedback, and the highlight also leaked onto ancestors (tapping
     the speaker button lit up the whole flashcard). */
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior-y: none;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

input {
  font-family: inherit;
  outline: none;
  border: none;
  background: none;
  font-size: 16px; /* prevent iOS Safari zoom-on-focus */
}

a { color: var(--primary); }

/* No default focus box either; keyboard users still get a ring, in brand colour.
   Text inputs keep their own focus style (.text-input:focus / .input-row:focus-within). */
:focus { outline: none; }
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="radio"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

ul { list-style: none; }

svg { flex-shrink: 0; }

/* ── View Router ──────────────────────────────────────────────────────── */
.view {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.view.active { transform: translateX(0); }
.view.slide-out { transform: translateX(-30%); }

.view--centered {
  align-items: center;
  justify-content: center;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  gap: 20px;
}

.view-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Navigation Bar ───────────────────────────────────────────────────── */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px 6px;
  flex-shrink: 0;
  padding-top: calc(10px + env(safe-area-inset-top));
}

.nav-bar__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.nav-bar--end { justify-content: flex-end; }

/* boxed icon button used everywhere in the new design */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 1px solid var(--outline);
  box-shadow: var(--shadow-icon-btn);
  color: var(--text-secondary);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.icon-btn:active { transform: scale(0.93); opacity: 0.8; }

.icon-btn--accent { color: var(--primary); }
.icon-btn--danger { color: var(--danger); }

/* ── Eyebrow / section labels ─────────────────────────────────────────── */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}

.section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  /* same 20px gutter as .lang-list-section / .settings-group below */
  padding: 16px 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.section-label__pro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Home View ────────────────────────────────────────────────────────── */
.home-header {
  padding: 6px 20px 4px;
  flex-shrink: 0;
}

.home-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.6px;
  line-height: 1.05;
}

.home-user-email {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 5px;
}

/* ── Stat strip ───────────────────────────────────────────────────────── */
.stat-strip {
  display: flex;
  gap: 10px;
  padding: 14px 20px 4px;
  flex-shrink: 0;
}

.stat-tile {
  flex: 1;
  border-radius: var(--radius-lg);
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--outline);
}

.stat-tile--streak {
  background: linear-gradient(160deg, var(--primary-grad-a), var(--primary-grad-b));
  border: none;
  box-shadow: var(--shadow-cta);
}

.stat-tile__value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--text);
}

.stat-tile--streak .stat-tile__value { color: #fff; }

.stat-tile__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
}

.stat-tile--streak .stat-tile__label { color: rgba(255,255,255,.92); }

/* ── Progress bar (generic) ──────────────────────────────────────────── */
.progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--outline);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.progress-fill--gradient {
  background: linear-gradient(90deg, var(--primary-grad-a), var(--primary-grad-b));
}

/* ── Language cards (home + add-language) ────────────────────────────── */
.lang-list-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px;
}

.lang-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  padding: 15px 16px;
  box-shadow: var(--shadow-card);
  text-align: left;
  width: 100%;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.lang-card:active { transform: scale(0.98); }

.lang-card--locked {
  background: var(--surface-muted);
  box-shadow: none;
}

.lang-card--dashed {
  background: transparent;
  border: 1.5px dashed var(--outline);
  box-shadow: none;
}

.lang-card__avatar {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  flex-shrink: 0;
  background: oklch(0.93 0.045 var(--hue, 250));
  color: oklch(0.52 0.13 var(--hue, 250));
}

.theme-dark .lang-card__avatar {
  background: oklch(0.28 0.05 var(--hue, 250));
  color: oklch(0.72 0.12 var(--hue, 250));
}

.lang-card--locked .lang-card__avatar {
  background: var(--outline);
  color: var(--text-tertiary);
}

.lang-card--dashed .lang-card__avatar {
  background: var(--outline-soft);
  color: var(--primary);
}

.lang-card__avatar--sm { width: 46px; height: 46px; border-radius: var(--radius-sm); font-size: 20px; }

.lang-card__body { flex: 1; min-width: 0; }

.lang-card__top-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.lang-card__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-card--locked .lang-card__name { color: var(--text-secondary); }

.lang-card__pct {
  font-size: 12px;
  font-weight: 700;
  color: oklch(0.52 0.13 var(--hue, 250));
  flex-shrink: 0;
}

.lang-card__meta {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 3px 0 9px;
}

.lang-card--locked .lang-card__meta { color: var(--text-tertiary); margin: 3px 0 0; }
.lang-card--dashed .lang-card__title { font-size: 16px; font-weight: 700; color: var(--text); }
.lang-card--dashed .lang-card__meta { color: var(--text-secondary); margin: 2px 0 0; }

.lang-card__chevron { color: var(--text-tertiary); flex-shrink: 0; }

.lang-card__pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-tint);
  border: 1px solid var(--primary-tint-outline);
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}

.lang-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-tint);
  border: 1px solid var(--primary-tint-outline);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-top: 4px;
}

.lang-card__added-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--success);
  flex-shrink: 0;
}

.lang-card__add-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-xs);
  background: var(--primary-tint);
  border: 1px solid var(--primary-tint-outline);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lang-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  color: var(--text-secondary);
  font-size: 15px;
  text-align: center;
}

/* ── FAB ──────────────────────────────────────────────────────────────── */
.fab {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--primary-grad-a), var(--primary-grad-b));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-fab);
  transition: transform var(--transition-fast);
  z-index: 10;
}

.fab:active { transform: scale(0.93); }

.fab--static {
  position: static;
  margin: 0 24px 20px auto;
}

/* ── Mode picker ──────────────────────────────────────────────────────── */
.mode-picker-title-block { padding: 22px 22px 14px; flex-shrink: 0; }

.mode-picker-title-block .home-title { font-size: 26px; }

.mode-picker-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.mode-picker-meta__item { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.mode-picker-meta__item--accent { font-weight: 700; color: var(--success); }
.mode-picker-meta__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-tertiary); }

/* Scope selector: study the whole language or one deck */
.scope-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 20px 16px;
  flex-shrink: 0;
}

.scope-row::-webkit-scrollbar { display: none; }

.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--outline);
  box-shadow: var(--shadow-icon-btn);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: transform var(--transition-fast), background var(--transition-fast),
              color var(--transition-fast), border-color var(--transition-fast);
}

.scope-chip:active { transform: scale(0.96); }

.scope-chip__count { font-size: 12px; font-weight: 700; color: var(--text-tertiary); }

.scope-chip.selected {
  background: var(--primary-tint);
  border-color: var(--primary-tint-outline);
  color: var(--primary);
}

.scope-chip.selected .scope-chip__count { color: var(--primary); opacity: 0.7; }

.mode-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  width: 100%;
  text-align: left;
  transition: transform var(--transition-fast);
}

.mode-card:active { transform: scale(0.98); }

.mode-card__icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 800;
}

.mode-card__body { flex: 1; min-width: 0; }
.mode-card__title { font-size: 17px; font-weight: 700; color: var(--text); }
.mode-card__subtitle { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin-top: 2px; }

/* ── Card (study) View ────────────────────────────────────────────────── */
.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 24px calc(24px + env(safe-area-inset-bottom));
  gap: 26px;
  overflow: hidden;
}

.session-progress {
  width: 100%;
  flex-shrink: 0;
  margin-top: -8px;
}

#card-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}

.card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-empty-text {
  font-size: 20px;
  color: var(--text-secondary);
}

.flashcard-stage {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 340px;
  /* the stack behind the card peeks 24px below the stage box — count it in so
     «Следующая» / «Выучено» don't sit right against the deck */
  margin-bottom: 24px;
}

.flashcard-stack {
  position: absolute;
  left: 50%;
  top: 0;
  border-radius: var(--radius-xl);
  background: var(--surface-muted);
  border: 1px solid var(--outline);
}

.flashcard-stack--1 { transform: translateX(-50%) translateY(24px); width: 82%; height: 100%; opacity: 0.6; }
.flashcard-stack--2 { transform: translateX(-50%) translateY(12px); width: 91%; height: 100%; opacity: 0.85; }

.flashcard {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  will-change: transform;
}

.flashcard__inner {
  position: relative;
  height: 100%;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-flashcard);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  gap: 18px;
  overflow: hidden;
}

.flashcard__direction-tag {
  position: absolute;
  top: 18px;
  left: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-tertiary);
}

.flashcard__front {
  font-size: 36px;
  font-weight: 800;
  text-align: center;
  color: var(--primary);
  line-height: 1.2;
  letter-spacing: -0.6px;
  word-break: break-word;
}

.flashcard__divider {
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--outline);
  flex-shrink: 0;
}

.flashcard__back {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  line-height: 1.3;
  transition: opacity 0.2s ease, transform 0.2s ease;
  word-break: break-word;
}

/* ── Speaker / pronunciation button ──────────────────────────────────── */
.speaker-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-xs);
  background: var(--primary-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

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

.speaker-btn[data-state="playing"] {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-cta);
}

.speaker-btn[data-state="loading"] { color: var(--text-tertiary); }
.speaker-btn[data-state="loading"] svg { animation: spin 0.9s linear infinite; }

.speaker-btn[data-state="error"] { background: var(--outline-soft); color: var(--text-secondary); }

/* ── Card Actions ─────────────────────────────────────────────────────── */
.card-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  width: 100%;
}

.card-hint {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.card-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.card-btn {
  flex: 1;
  height: 56px;
  border-radius: var(--radius-lg);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.card-btn:active { transform: scale(0.97); }

.card-btn--next {
  background: var(--surface);
  border: 1.5px solid var(--primary-tint-outline);
  color: var(--primary);
  box-shadow: var(--shadow-icon-btn);
}

.card-btn--learned {
  background: linear-gradient(160deg, var(--primary-grad-a), var(--primary-grad-b));
  color: #fff;
  box-shadow: var(--shadow-cta);
}

/* ── Sheet (modal bottom sheet) ──────────────────────────────────────── */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sheet.open { pointer-events: all; opacity: 1; }

.sheet__backdrop { position: absolute; inset: 0; background: rgba(20,18,15,.45); }

.sheet__panel {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
}

.sheet.open .sheet__panel { transform: translateY(0); }

.sheet__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--outline);
  min-height: 52px;
}

.sheet__nav-title { font-size: 17px; font-weight: 700; text-align: center; flex: 1; }
.sheet__nav-btn { font-size: 16px; color: var(--text-secondary); min-width: 70px; }
.sheet__nav-btn--primary { color: var(--primary); font-weight: 700; }
.sheet__nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.sheet__nav-menu { position: relative; min-width: 70px; display: flex; justify-content: flex-end; }

.sheet__body { padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet__body--list { padding: 0; flex: 1; min-height: 0; }
.sheet__search { padding: 10px 16px; border-bottom: 1px solid var(--outline); flex-shrink: 0; }

/* ── Text Input ───────────────────────────────────────────────────────── */
.text-input {
  width: 100%;
  padding: 15px 16px;
  font-size: 16px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color var(--transition-fast);
}

.text-input:focus { border-color: var(--primary); }
.text-input::placeholder { color: var(--text-tertiary); }

/* icon-prefixed input row, used on auth screens */
.input-group { display: flex; flex-direction: column; gap: 7px; }

.input-group__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0 2px;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  transition: border-color var(--transition-fast);
}

.input-row:focus-within { border-color: var(--primary); }
.input-row--match { border-color: var(--success-outline); }

.input-row__icon { color: var(--text-tertiary); flex-shrink: 0; }
.input-row__icon-btn { color: var(--text-tertiary); flex-shrink: 0; }

.input-row input {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  color: var(--text);
}

.input-row input::placeholder { color: var(--text-tertiary); }

/* ── Password strength meter ─────────────────────────────────────────── */
.pw-strength { display: flex; align-items: center; gap: 7px; padding: 0 2px; }
.pw-strength__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--outline); }
.pw-strength__bar.filled { background: var(--success); }
.pw-strength__bar.filled--weak { background: var(--danger); }
.pw-strength__bar.filled--medium { background: #D9A63F; }
.pw-strength__label { font-size: 11.5px; font-weight: 600; color: var(--success); margin-left: 4px; white-space: nowrap; }

/* ── Search Bar ───────────────────────────────────────────────────────── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  padding: 12px 15px;
  box-shadow: var(--shadow-icon-btn);
}

.search-bar__icon { color: var(--text-tertiary); flex-shrink: 0; }
.search-bar__input { flex: 1; font-size: 15px; color: var(--text); background: none; }
.search-bar__input::placeholder { color: var(--text-tertiary); }
.search-bar__input::-webkit-search-cancel-button { display: none; }

/* ── Word List ────────────────────────────────────────────────────────── */
.word-list { padding: 0 0 16px; }

.word-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--text-secondary);
  font-size: 17px;
}

.word-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--outline);
  position: relative;
  overflow: hidden;
}

.word-item:first-child { border-top: 1px solid var(--outline); margin-top: 8px; }

.word-item__text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.word-item__english {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.word-item__english.learned { color: var(--text-secondary); }

.word-item__russian {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.word-item__badge { color: var(--success); flex-shrink: 0; display: none; }
.word-item__badge.visible { display: flex; align-items: center; }

.word-item__actions {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  align-items: stretch;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}

.word-item__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.word-item__action-btn--restore { background: var(--primary); color: #fff; }
.word-item__action-btn--delete { background: var(--danger); color: #fff; }

/* ── Voice picker sheet ──────────────────────────────────────────────── */
.voice-list { display: flex; flex-direction: column; }

.voice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--outline-soft);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  width: 100%;
}

.voice-item__check { color: var(--primary); flex-shrink: 0; visibility: hidden; }
.voice-item.selected .voice-item__check { visibility: visible; }

/* ── Dropdown ─────────────────────────────────────────────────────────── */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  min-width: 220px;
  z-index: 200;
  overflow: hidden;
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--text);
  text-align: left;
  transition: background var(--transition-fast);
}

.dropdown__item:hover { background: rgba(0,0,0,.04); }
.dropdown__item:active { background: rgba(0,0,0,.08); }
.theme-dark .dropdown__item:hover { background: rgba(255,255,255,.06); }

/* ── Toast ────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(32px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  max-width: 88vw;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 500;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.error { background: var(--danger); color: #fff; }

/* ── Auth / config / forgot / reset screens ──────────────────────────── */
.auth-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding: 8px 28px calc(24px + env(safe-area-inset-bottom));
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 0 30px;
}

.auth-brand__logo { height: 42px; width: auto; display: block; }
.auth-brand__title { font-size: 23px; font-weight: 800; color: var(--text); letter-spacing: -0.4px; margin-top: 24px; }
.auth-brand__subtitle { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-top: 6px; line-height: 1.45; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }

.auth-forgot-link { text-align: right; font-size: 13px; font-weight: 600; color: var(--primary); padding: 0 2px; }

.auth-error {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--danger);
  text-align: center;
  min-height: 18px;
}

.btn-cta {
  height: 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--primary-grad-a), var(--primary-grad-b));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  box-shadow: var(--shadow-cta);
  width: 100%;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.btn-cta:active { transform: scale(0.98); }
.btn-cta:disabled { opacity: 0.55; box-shadow: none; }

.btn-outline {
  height: 54px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-icon-btn);
  width: 100%;
  transition: transform var(--transition-fast);
}

.btn-outline:active { transform: scale(0.98); }

.auth-divider { display: flex; align-items: center; gap: 12px; padding: 20px 0; }
.auth-divider__line { flex: 1; height: 1px; background: var(--outline); }
.auth-divider__label { font-size: 12.5px; font-weight: 500; color: var(--text-tertiary); }

.auth-footer {
  margin-top: auto;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 18px 0 4px;
}

.auth-footer__link { font-weight: 700; color: var(--primary); }

.auth-hero-icon {
  width: 82px;
  height: 82px;
  border-radius: var(--radius-lg);
  background: var(--primary-tint);
  border: 1px solid var(--primary-tint-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin: 20px auto 0;
}

.auth-heading { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; text-align: center; margin-top: 20px; }
.auth-subheading { font-size: 14px; font-weight: 500; color: var(--text-secondary); line-height: 1.5; text-align: center; margin: 10px 8px 26px; }

.hint-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--success-bg);
  border: 1px solid var(--success-outline);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-top: 16px;
  color: var(--success);
}

.hint-box__text { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text); }

.match-hint { display: flex; align-items: center; gap: 7px; padding: 0 2px; font-size: 12.5px; font-weight: 600; color: var(--success); }

/* ── Server-not-configured notice (view-config) ──────────────────────── */
.config-overlay__subtitle { font-size: 15px; color: var(--text-secondary); text-align: center; max-width: 320px; line-height: 1.5; }
.config-overlay__subtitle code { background: var(--outline-soft); padding: 2px 6px; border-radius: 6px; font-size: 0.9em; }

/* ── Settings view ────────────────────────────────────────────────────── */
.settings-account {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  margin: 4px 20px 20px;
}

.avatar-initial {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--primary-grad-a), var(--primary-grad-b));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.settings-account__email { font-size: 16px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.settings-group {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin: 0 20px 20px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--outline-soft);
  width: 100%;
  text-align: left;
}

.settings-row:last-child { border-bottom: none; }

.settings-row__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--outline-soft);
  color: var(--text-secondary);
}

.settings-row__body { flex: 1; min-width: 0; }
.settings-row__title { font-size: 15.5px; font-weight: 600; color: var(--text); }
.settings-row__subtitle { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-top: 2px; }

.settings-row__value {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.settings-row__value svg { color: var(--text-tertiary); }

.settings-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--primary-tint-outline);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  margin: 0 20px 8px;
  color: var(--danger);
  font-size: 15.5px;
  font-weight: 700;
  width: calc(100% - 40px);
}

.settings-version { text-align: center; font-size: 12px; font-weight: 500; color: var(--text-tertiary); padding: 14px 0 24px; }

/* ── Toggle switch ────────────────────────────────────────────────────── */
.toggle-switch {
  width: 46px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--outline);
  padding: 3px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.toggle-switch__knob {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform var(--transition-spring);
}

.toggle-switch.on { background: var(--primary); justify-content: flex-end; }

/* ── Paywall ──────────────────────────────────────────────────────────── */
.paywall-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 30px 4px;
  flex-shrink: 0;
}

.paywall-hero__icon {
  width: 78px;
  height: 78px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--primary-grad-a), var(--primary-grad-b));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-cta);
  color: #fff;
}

.paywall-hero__title { font-size: 25px; font-weight: 800; color: var(--text); letter-spacing: -0.6px; margin-top: 18px; }
.paywall-hero__subtitle { font-size: 14px; font-weight: 500; color: var(--text-secondary); line-height: 1.45; margin-top: 8px; }

.paywall-features { padding: 20px 26px 0; display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
.paywall-feature { display: flex; align-items: center; gap: 13px; }

.paywall-feature__icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-xs);
  background: var(--primary-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paywall-feature__text { font-size: 14.5px; font-weight: 600; color: var(--text); }

.paywall-bottom { padding: 16px 24px calc(8px + env(safe-area-inset-bottom)); flex-shrink: 0; }

.price-card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.price-card__label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.price-card__sub { font-size: 13px; font-weight: 600; color: var(--success); margin-top: 2px; }
.price-card__value { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; }

.paywall-restore { text-align: center; font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-top: 12px; }

/* ── Add-language search ─────────────────────────────────────────────── */
.add-language-search { padding: 0 20px 12px; flex-shrink: 0; }

/* ── Learning badge (legacy small stat) ──────────────────────────────── */
.learned-badge { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--success); font-weight: 600; }

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

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

/* ── Utility ──────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ══ Placement test («Тест уровня») ══════════════════════════════════════
   Screens 1–8 of the placement flow + deck detail. Layout values follow
   CardLingo_Placement_Test.dc.html; colors ride the app's token variables
   so the dark theme works without a parallel palette. */
:root {
  --pt-ladder-bar: #DDD3C2;
  --pt-amber: oklch(0.62 0.15 60);
  --pt-amber-border: oklch(0.86 0.07 60);
  --pt-amber-strike: oklch(0.72 0.13 60);
  --pt-blue: oklch(0.52 0.13 250);
  --pt-blue-bg: oklch(0.93 0.045 250);
  --pt-blue-banner-bg: oklch(0.95 0.03 250);
  --pt-blue-banner-border: oklch(0.88 0.05 250);
  --pt-blue-banner-text: oklch(0.42 0.09 250);
  --pt-green: oklch(0.5 0.13 155);
  --pt-green-bg: oklch(0.93 0.045 155);
  --pt-green-bar: oklch(0.6 0.13 155);
  --pt-green-panel-bg: oklch(0.95 0.03 155);
  --pt-green-panel-border: oklch(0.88 0.05 155);
  --pt-green-panel-head: oklch(0.38 0.1 155);
  --pt-green-panel-text: oklch(0.42 0.08 155);
  --pt-chip-selected-bg: oklch(0.95 0.03 155);
  --pt-chip-selected-text: oklch(0.42 0.11 155);
}

.theme-dark {
  --pt-ladder-bar: #423C34;
  --pt-amber-border: oklch(0.45 0.08 60);
  --pt-blue: oklch(0.72 0.12 250);
  --pt-blue-bg: oklch(0.3 0.05 250);
  --pt-blue-banner-bg: oklch(0.27 0.04 250);
  --pt-blue-banner-border: oklch(0.35 0.05 250);
  --pt-blue-banner-text: oklch(0.82 0.06 250);
  --pt-green: oklch(0.72 0.12 155);
  --pt-green-bg: oklch(0.28 0.05 155);
  --pt-green-panel-bg: oklch(0.25 0.04 155);
  --pt-green-panel-border: oklch(0.33 0.05 155);
  --pt-green-panel-head: oklch(0.8 0.08 155);
  --pt-green-panel-text: oklch(0.75 0.07 155);
  --pt-chip-selected-bg: oklch(0.3 0.05 155);
  --pt-chip-selected-text: oklch(0.8 0.08 155);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.btn-cta--test { height: 58px; border-radius: 18px; font-size: 16.5px; }

/* ── Screen 1 · Приглашение ─────────────────────────────────────────── */
.pt-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(12px + env(safe-area-inset-top)) 22px 0;
  flex-shrink: 0;
}

.pt-topbar--left { justify-content: flex-start; }

.pt-langpill {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--outline-soft);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
}

.pt-invite-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 0;
  overflow-y: auto;
  min-height: 0;
}

.pt-hero-icon {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--primary-grad-a), var(--primary-grad-b));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(217,99,63,0.32);
  flex-shrink: 0;
}

.pt-invite-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.8px;
  line-height: 1.12;
  margin-top: 22px;
}

.pt-invite-sub {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 12px;
}

.pt-feature-list { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

.pt-feature {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 14px 15px;
}

.pt-feature__icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pt-feature__icon--blue { background: var(--pt-blue-bg); color: var(--pt-blue); }
.pt-feature__icon--green { background: var(--pt-green-bg); color: var(--pt-green); }

.pt-feature__text { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.4; }

.pt-invite-note {
  margin-top: 18px;
  background: var(--surface-muted);
  border: 1px solid var(--outline);
  border-radius: 16px;
  padding: 13px 15px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.5;
}

.pt-invite-bottom { padding: 20px 24px calc(18px + env(safe-area-inset-bottom)); flex-shrink: 0; }

.pt-skip-link {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 14px;
  min-height: 44px;
}

/* ── Screens 2–4 · заголовок, прогресс, лесенка ─────────────────────── */
.pt-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: calc(14px + env(safe-area-inset-top)) 22px 12px;
  flex-shrink: 0;
}

.pt-header__body { flex: 1; min-width: 0; }

.pt-header__title { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }

.pt-header__sub {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-counter {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--outline-soft);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.pt-progress { padding: 0 24px 4px; flex-shrink: 0; }

.pt-progress__track { height: 6px; border-radius: 3px; background: var(--outline); overflow: hidden; }

.pt-progress__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-grad-a), var(--primary-grad-b));
  transition: width 0.3s ease;
}

.pt-ladder-wrap { padding: 18px 24px 0; flex-shrink: 0; }

.pt-ladder { display: flex; align-items: flex-end; gap: 5px; height: 46px; }

.pt-ladder__bar { flex: 1; max-width: 26px; border-radius: 3px; background: var(--pt-ladder-bar); }
.pt-ladder__bar--current { background: var(--primary); }

.pt-ladder__caption { padding-top: 7px; font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); }

.pt-state { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pt-state[hidden] { display: none !important; }

.pt-bottom { padding: 12px 22px calc(22px + env(safe-area-inset-bottom)); flex-shrink: 0; }

/* Screen 2 · знаю / не знаю */
.pt-selfcard-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  min-height: 0;
}

.pt-selfcard {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-flashcard);
  padding: 44px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.pt-selfcard__label {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-tertiary);
}

.pt-selfcard__speak {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.pt-selfcard__speak:active { transform: scale(0.9); }
.pt-selfcard__speak[data-state="playing"] { background: var(--primary); color: #fff; }
.pt-selfcard__speak[data-state="loading"] { color: var(--text-tertiary); }
.pt-selfcard__speak[data-state="loading"] svg { animation: spin 0.9s linear infinite; }
.pt-selfcard__speak[data-state="error"] { background: var(--outline-soft); color: var(--text-secondary); }

.pt-selfcard__word {
  font-size: 42px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -1px;
  margin-top: 8px;
  text-align: center;
  word-break: break-word;
}

.pt-selfcard__meta { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-top: 10px; min-height: 18px; }

.pt-honesty { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-top: 22px; text-align: center; }

.pt-answer-row { padding: 12px 22px calc(22px + env(safe-area-inset-bottom)); display: flex; gap: 12px; flex-shrink: 0; }

.pt-answer-btn {
  flex: 1;
  height: 60px;
  min-height: 44px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
  transition: transform var(--transition-fast);
}

.pt-answer-btn:active { transform: scale(0.97); }
.pt-answer-btn:disabled { pointer-events: none; }

.pt-answer-btn--no {
  background: var(--surface);
  border: 1.5px solid var(--outline);
  color: var(--text-secondary);
}

.pt-answer-btn--no svg { color: var(--text-secondary); }

.pt-answer-btn--yes {
  background: linear-gradient(160deg, var(--primary-grad-a), var(--primary-grad-b));
  color: #fff;
  box-shadow: 0 8px 20px rgba(217,99,63,0.32);
}

/* Screen 3 · выборочная проверка */
.pt-checkbanner {
  margin: 20px 24px 0;
  background: var(--pt-blue-banner-bg);
  border: 1px solid var(--pt-blue-banner-border);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pt-blue-banner-text);
  line-height: 1.45;
}

.pt-checkbanner svg { color: var(--pt-blue); margin-top: 1px; }

.pt-check-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px;
  min-height: 0;
  overflow-y: auto;
}

.pt-check-word {
  text-align: center;
  font-size: 38px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.9px;
  word-break: break-word;
}

.pt-check-hint { text-align: center; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-top: 8px; letter-spacing: 0.3px; }

.pt-options { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

.pt-option {
  min-height: 58px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--outline);
  display: flex;
  align-items: center;
  padding: 8px 18px;
  gap: 14px;
  box-shadow: 0 3px 10px rgba(38,35,32,0.04);
  width: 100%;
  text-align: left;
  transition: transform var(--transition-fast);
}

.pt-option:active { transform: scale(0.98); }

.pt-option.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 8px 20px rgba(217,99,63,0.14);
}

.pt-option__letter {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--outline-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.pt-option.selected .pt-option__letter { background: var(--primary); color: #fff; }

.pt-option__text { flex: 1; font-size: 16px; font-weight: 600; color: var(--text); }
.pt-option.selected .pt-option__text { font-weight: 700; }

.pt-option__check { color: var(--primary); visibility: hidden; }
.pt-option.selected .pt-option__check { visibility: visible; }

/* Screen 4 · слово-ловушка */
.pt-trap-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  min-height: 0;
}

.pt-trapcard {
  width: 100%;
  background: var(--surface);
  border: 2px solid var(--pt-amber-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-flashcard);
  padding: 40px 26px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.pt-trapcard__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pt-amber);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pt-trapcard__word {
  font-size: 40px;
  font-weight: 800;
  color: var(--text-tertiary);
  letter-spacing: -0.9px;
  text-decoration: line-through;
  text-decoration-color: var(--pt-amber-strike);
  text-decoration-thickness: 3px;
  margin-top: 6px;
  word-break: break-word;
}

.pt-trapcard__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 16px;
  text-align: center;
  line-height: 1.5;
}

.pt-trapcard__pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.pt-trapcard__pill svg { color: var(--pt-amber); }

.pt-trap-note {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 24px;
  text-align: center;
  line-height: 1.5;
  max-width: 280px;
}

/* ── Screen 5 · Результат ───────────────────────────────────────────── */
.pt-result-head { padding: calc(18px + env(safe-area-inset-top)) 24px 0; }

.pt-result-eyebrow { font-size: 12px; font-weight: 700; color: var(--primary); letter-spacing: 0.7px; text-transform: uppercase; }

.pt-result-title { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -0.7px; line-height: 1.1; margin-top: 7px; }

.pt-result-card {
  margin: 18px 22px 0;
  background: linear-gradient(160deg, var(--primary-grad-a), var(--primary-grad-b));
  border-radius: var(--radius-xl);
  padding: 24px 24px 22px;
  color: #fff;
  box-shadow: 0 14px 32px rgba(217,99,63,0.3);
}

.pt-result-card__row { display: flex; align-items: flex-end; gap: 14px; }

.pt-result-card__num { font-size: 54px; font-weight: 800; letter-spacing: -2px; line-height: 0.9; }

.pt-result-card__unit { font-size: 15px; font-weight: 600; opacity: 0.92; padding-bottom: 5px; line-height: 1.15; }

.pt-result-card__band-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; }

.pt-result-card__band {
  background: rgba(255,255,255,0.22);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.pt-result-card__bandnote { font-size: 13px; font-weight: 600; opacity: 0.92; }

.pt-card {
  margin: 16px 22px 0;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-card);
}

.pt-chart-card { padding: 18px 18px 16px; }

.pt-card-title { font-size: 13.5px; font-weight: 700; color: var(--text); }

.pt-card-text { font-size: 13px; font-weight: 500; color: var(--text-secondary); line-height: 1.55; margin-top: 8px; }

.pt-chart { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.pt-chart-row { display: flex; align-items: center; gap: 11px; }

.pt-chart-row__label { width: 62px; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }
.pt-chart-row__label--accent { color: var(--primary); }

.pt-chart-row__track { flex: 1; height: 9px; border-radius: 5px; background: var(--outline-soft); overflow: hidden; }

.pt-chart-row__fill { height: 100%; border-radius: 5px; background: var(--pt-green-bar); width: 0; transition: width 0.4s ease; }
.pt-chart-row__fill--accent { background: var(--primary); }
.pt-chart-row__fill--low { background: var(--text-tertiary); }

.pt-chart-row__pct { width: 34px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--text); flex-shrink: 0; }
.pt-chart-row__pct--accent { font-weight: 800; color: var(--primary); }
.pt-chart-row__pct--low { color: var(--text-secondary); }

.pt-chart-trapnote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--outline-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.pt-chart-trapnote svg { color: var(--pt-amber); }

.pt-result-bottom { padding: 12px 22px calc(20px + env(safe-area-inset-bottom)); flex-shrink: 0; }

/* ── Screen 6 · Колоды ──────────────────────────────────────────────── */
.pt-decks-head { padding: calc(16px + env(safe-area-inset-top)) 22px 0; display: flex; align-items: center; gap: 13px; }

.pt-decks-head__label { flex: 1; font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.5px; text-transform: uppercase; }

.pt-decks-title-block { padding: 18px 24px 0; }

.pt-decks-title { font-size: 29px; font-weight: 800; color: var(--text); letter-spacing: -0.7px; line-height: 1.1; }

.pt-decks-sub { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }

.pt-deckcards { padding: 20px 22px 0; display: flex; flex-direction: column; gap: 12px; }

.pt-deckcard {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow-card);
  position: relative;
  width: 100%;
  text-align: left;
  transition: opacity var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pt-deckcard.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 10px 26px rgba(217,99,63,0.14);
}

.pt-deckcard.deselected { opacity: 0.55; }

.pt-deckcard__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
}

.pt-deckcard__row { display: flex; align-items: center; gap: 14px; }

.pt-deckcard__icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pt-deckcard__icon--gaps {
  background: linear-gradient(160deg, var(--primary-grad-a), var(--primary-grad-b));
  box-shadow: 0 6px 16px rgba(217,99,63,0.28);
  color: #fff;
}

.pt-deckcard__icon--growth { background: var(--pt-blue-bg); color: var(--pt-blue); }
.pt-deckcard__icon--topic { background: var(--pt-green-bg); color: var(--pt-green); }

.pt-deckcard__body { flex: 1; min-width: 0; }

.pt-deckcard__name { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }

.pt-deckcard__meta { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.pt-deckcard__meta--gaps { color: var(--primary); }
.pt-deckcard__meta--growth { color: var(--pt-blue); }
.pt-deckcard__meta--topic { color: var(--pt-green); }

.pt-deckcard__desc { font-size: 13px; font-weight: 500; color: var(--text-secondary); line-height: 1.5; margin-top: 13px; }

.pt-deckcard__chips { display: flex; gap: 7px; margin-top: 13px; flex-wrap: wrap; }

.pt-deckcard__chip {
  background: var(--outline-soft);
  border-radius: var(--radius-pill);
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.pt-deckcard__chip--more { color: var(--text-tertiary); }

.pt-topicchips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.pt-topicchip {
  background: var(--outline-soft);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  min-height: 34px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.pt-topicchip.selected {
  background: var(--pt-chip-selected-bg);
  border-color: var(--pt-green);
  color: var(--pt-chip-selected-text);
  font-weight: 700;
}

/* ── Screen 7 · Колода (деталь) ─────────────────────────────────────── */
.deck-stats {
  margin: 4px 22px 0;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 20px;
  padding: 15px 16px;
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}

.deck-stats__cell { flex: 1; }

.deck-stats__num { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.4px; }
.deck-stats__num--green { color: var(--pt-green); }
.deck-stats__num--accent { color: var(--primary); }

.deck-stats__label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); margin-top: 3px; }

.deck-stats__div { width: 1px; background: var(--outline-soft); }

.deck-words-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 18px 24px 8px;
  flex-shrink: 0;
}

.deck-words-scroll { padding: 0 22px; }

.deck-words { display: flex; flex-direction: column; gap: 8px; }

.deck-word-row {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 13px 15px;
}

.deck-word-row.learned { opacity: 0.55; }

.deck-word-row__body { flex: 1; min-width: 0; }

.deck-word-row__word { font-size: 16px; font-weight: 700; color: var(--text); }

.deck-word-row__tr {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-word-row__rank {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-secondary);
  background: var(--outline-soft);
  padding: 5px 9px;
  border-radius: 7px;
  flex-shrink: 0;
}

.deck-bottom {
  padding: 12px 22px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.deck-add-btn {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--surface);
  border: 1.5px solid var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.deck-add-btn:active { transform: scale(0.93); }

/* ── Screen 8 · Объём в день ────────────────────────────────────────── */
.goal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 0;
  overflow-y: auto;
  min-height: 0;
}

.goal-title { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -0.7px; line-height: 1.12; }

.goal-sub { font-size: 14px; font-weight: 500; color: var(--text-secondary); line-height: 1.55; margin-top: 10px; }

.goal-options { display: flex; flex-direction: column; gap: 11px; margin-top: 28px; }

.goal-option {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 3px 10px rgba(38,35,32,0.04);
  width: 100%;
  text-align: left;
  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.goal-option.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 10px 26px rgba(217,99,63,0.14);
}

.goal-option__num {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--outline-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.goal-option.selected .goal-option__num {
  background: linear-gradient(160deg, var(--primary-grad-a), var(--primary-grad-b));
  color: #fff;
  box-shadow: 0 6px 16px rgba(217,99,63,0.28);
}

.goal-option__body { flex: 1; min-width: 0; }

.goal-option__title-row { display: flex; align-items: center; gap: 8px; }

.goal-option__title { font-size: 16.5px; font-weight: 700; color: var(--text); }

.goal-option__badge {
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
}

.goal-option__sub { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin-top: 2px; }

.goal-option__radio {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--pt-ladder-bar);
  flex-shrink: 0;
  position: relative;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.goal-option.selected .goal-option__radio { background: var(--primary); border-color: var(--primary); }

.goal-option.selected .goal-option__radio::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 7px;
  width: 9px;
  height: 5px;
  border-left: 2.6px solid #fff;
  border-bottom: 2.6px solid #fff;
  transform: rotate(-45deg);
}

.goal-forecast {
  margin: 24px 0 16px;
  background: var(--pt-green-panel-bg);
  border: 1px solid var(--pt-green-panel-border);
  border-radius: 20px;
  padding: 16px 17px;
  flex-shrink: 0;
}

.goal-forecast__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pt-green-panel-head);
}

.goal-forecast__head svg { color: var(--pt-green-panel-head); }

.goal-forecast__text {
  font-size: 13px;
  font-weight: 500;
  color: var(--pt-green-panel-text);
  line-height: 1.5;
  margin-top: 8px;
}

/* ── Screen 9 · карточка языка после теста ──────────────────────────── */
.lang-card--tested { display: block; }

.lang-card--tested .lang-card__toprow { display: flex; align-items: center; gap: 15px; width: 100%; }

.lang-card__name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }

.lang-card__band-badge {
  background: oklch(0.93 0.045 var(--hue, 250));
  color: oklch(0.45 0.13 var(--hue, 250));
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 4px 8px;
  border-radius: 7px;
  flex-shrink: 0;
}

.theme-dark .lang-card__band-badge {
  background: oklch(0.28 0.05 var(--hue, 250));
  color: oklch(0.72 0.12 var(--hue, 250));
}

.lang-card__decks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 15px;
  padding-top: 9px;
  border-top: 1px solid var(--outline-soft);
}

.lang-deck-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 5px 2px;
  min-height: 30px;
  border-radius: 8px;
}

.lang-deck-row__dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.lang-deck-row__dot--gaps { background: var(--primary); }
.lang-deck-row__dot--growth { background: var(--pt-blue); }
.lang-deck-row__dot--topic { background: var(--pt-green-bar); }
.lang-deck-row__dot--custom { background: var(--text-tertiary); }

.lang-deck-row__title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-deck-row__count { font-size: 12px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }

.retake-row {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface-muted);
  border: 1.5px dashed var(--outline);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  width: 100%;
  text-align: left;
  transition: transform var(--transition-fast);
}

.retake-row:active { transform: scale(0.98); }

.retake-row__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--outline-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.retake-row__body { flex: 1; min-width: 0; }

.retake-row__title { font-size: 14.5px; font-weight: 700; color: var(--text); }

.retake-row__sub { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-top: 2px; }

.modepicker-test-entry { padding: 4px 20px 0; }

/* ── Confirm dialog ─────────────────────────────────────────────────── */
.dlg {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.dlg.open { opacity: 1; pointer-events: all; }

.dlg__backdrop { position: absolute; inset: 0; background: rgba(20,18,15,.45); }

.dlg__panel {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 22px 20px 20px;
  width: min(88vw, 340px);
  box-shadow: 0 24px 60px rgba(20,18,15,.3);
  transform: scale(0.96);
  transition: transform 0.2s ease;
}

.dlg.open .dlg__panel { transform: scale(1); }

.dlg__title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; }

.dlg__text { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); line-height: 1.5; margin-top: 8px; }

.dlg__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }

.dlg-btn {
  height: 48px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: transform var(--transition-fast);
}

.dlg-btn:active { transform: scale(0.98); }

.dlg-btn--primary {
  background: linear-gradient(160deg, var(--primary-grad-a), var(--primary-grad-b));
  color: #fff;
  box-shadow: var(--shadow-cta);
}

.dlg-btn--outline { background: var(--surface); border: 1px solid var(--outline); color: var(--text); }

.dlg-btn--danger { background: var(--danger); color: #fff; }

/* Short viewports: shrink the card instead of letting .card-content clip it. */
@media (max-height: 720px) {
  .flashcard-stage { height: 300px; }
}

@media (max-height: 640px) {
  .flashcard-stage { height: 258px; }
  .flashcard__front { font-size: 30px; }
  .flashcard__back { font-size: 21px; }
  .card-btn { height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-chart-row__fill { transition: none; }
  .pt-progress__fill { transition: none; }
  .dlg__panel { transition: none; }
}

/* Time picker in Settings — matches the row's value slot rather than a full input. */
.settings-time {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid var(--outline-soft);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  min-width: 92px;
  text-align: center;
}
.settings-time::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.theme-dark .settings-time { background: rgba(255,255,255,.08); }
.toggle-switch:disabled { opacity: .45; cursor: not-allowed; }