/* ============================================================
   АРТмосфера — визуальная система
   Эталон: design/prototypes/_SYSTEM.md и прототипы рядом с ним.
   Тёмная тема основная, светлая обязательна — приложение
   наследует тему Telegram.
   ============================================================ */

/* ---------- 1. Токены ---------- */

:root {
  --bg: #0D0D0C;
  --surface: #1B1A18;
  --surface-2: #262421;
  --line: #302D29;
  --tx: #FFFFFF;
  --tx-2: #8B877F;
  --tx-3: #6C6758;
  --acc: #E0563A;
  --acc-tx: #0D0D0C;
  --plate: #151413;
  --draw: #EDE7DC;

  --r-img: 18px;
  --r-plate: 24px;
  --r-field: 16px;
  --r-pill: 999px;

  /* затемнение под нижним листом: значение существующего чёрного #0D0D0C.
     Одинаково в обеих темах, поэтому объявлено один раз и не переопределяется. */
  --scrim: rgba(13, 13, 12, 0.62);

  --disp: "Unbounded", "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --bottom-nav-height: 60px;

  /* --- Совместимость со старыми именами. ---
     Приложение написано на «бумажной» палитре; вместо правки 300+ мест
     старые имена переведены на новые токены. Ссылки, а не цвета, поэтому
     переопределять их по темам не нужно — они следуют за токенами сами. */
  --cream: var(--bg);
  --warm-white: var(--surface);
  --ink: var(--tx);
  --ink-soft: var(--tx-2);
  --ink-muted: var(--tx-2);
  --terra: var(--acc);
  --terra-light: var(--surface-2);
  --terra-soft: var(--surface-2);
  --border: var(--line);
  --border-soft: var(--line);
  --serif: var(--disp);
  --sans: var(--ui);
}

/* Светлая тема. Переопределяются только токены — ни одного цвета,
   который существовал бы исключительно здесь. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #FFFFFF;
    --surface: #F3F1EE;
    --surface-2: #E8E5E0;
    --line: #DFDBD5;
    --tx: #111110;
    --tx-2: #6C6963;
    --tx-3: #8B877F;
    --acc: #C2452B;
    --acc-tx: #FFFFFF;
    --plate: #EFECE7;
    --draw: #1A1917;
  }
}
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #F3F1EE;
  --surface-2: #E8E5E0;
  --line: #DFDBD5;
  --tx: #111110;
  --tx-2: #6C6963;
  --tx-3: #8B877F;
  --acc: #C2452B;
  --acc-tx: #FFFFFF;
  --plate: #EFECE7;
  --draw: #1A1917;
}


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: contain;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  background: var(--cream);
}
.screens-host {
  flex: 1;
  min-height: 0;
  position: relative;
}
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cream);
}
.screen.hidden {
  display: none;
}

/* ---------- BOTTOM NAV ---------- */
/* ---------- 2. Общие компоненты ---------- */

/* Нижняя навигация: штриховые иконки без подписей.
   Подписи остаются в разметке для скринридера, но не показываются. */
.bottom-nav {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 14px 24px calc(16px + env(safe-area-inset-bottom));
  background: var(--bg);
  z-index: 100;
}
.bottom-nav-item {
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  font-family: inherit;
  color: var(--tx-3);
  cursor: pointer;
  padding: 4px 0;
  min-width: 0;
}
.bottom-nav-item.active { color: var(--acc); }
.bottom-nav-icon svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.bottom-nav-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Дисплейный заголовок: Unbounded, только строчными.
   Регистр задаётся здесь, в разметке текст пишется нормально —
   иначе скринридер прочитает его по буквам. */
.disp {
  font-family: var(--disp);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
}

/* Подпись раздела: капс с разрядкой */
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-2);
  margin: 0;
}

/* Плашка с фактом: одна заливкой акцентом, остальные обводкой */
.plate {
  border-radius: var(--r-plate);
  padding: 20px 18px 18px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.plate.fill { background: var(--acc); color: var(--acc-tx); }
.plate.out { background: transparent; border: 1.5px solid var(--line); color: var(--tx); }
.plate .n {
  font-size: 44px; font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.plate .t { font-size: 13px; font-weight: 500; line-height: 1.3; opacity: 0.78; }
.plate.fill .t { opacity: 0.72; }

/* Точки-индикатор шага. Прогресс без процентов. */
.dots { display: flex; gap: 7px; }
.dots i {
  width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--tx-3); display: block;
}
.dots i.done { background: var(--tx-2); }
.dots i.now { background: var(--acc); width: 20px; }

/* Штриховой рисунок: обводка через классы, а не атрибутом,
   иначе рисунок пропадёт в одной из тем. */
svg .d { stroke: currentColor; }
svg .s { stroke: var(--acc); }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- HOME SCREEN ---------- */
.screen-home-scroll {
  flex: 1;
  overflow-y: auto;
  padding: calc(12px + env(safe-area-inset-top)) 16px 20px;
}
.home-greeting {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.home-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--terra-light);
}
.home-avatar-fallback {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terra-light);
  color: var(--terra);
  font-size: 22px;
  font-weight: 600;
  flex-shrink: 0;
}
.home-greeting-label {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.home-greeting-name {
  font-family: var(--disp);
  text-transform: lowercase;
  letter-spacing: -0.025em;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.home-greeting-status {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.home-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}
/* факты показываются плашками .plate из общих компонентов */
.home-section {
  margin-bottom: 24px;
}
.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.home-section-more {
  border: none;
  background: none;
  color: var(--tx-2);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}
.home-section-more svg { display: block; }
.home-works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.home-work-thumb {
  aspect-ratio: 1;
  border-radius: var(--r-img);
  overflow: hidden;
  border: 0;
  padding: 0;
  background: var(--plate);
  cursor: pointer;
}
.home-work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-works-empty {
  background: var(--surface);
  border-radius: var(--r-plate);
  padding: 28px 20px;
  text-align: center;
  color: var(--tx-2);
  font-size: 14px;
  line-height: 1.5;
}
.home-works-empty-btn {
  margin-top: 16px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--acc);
  color: var(--acc-tx);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.home-track-card {
  background: var(--warm-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-plate);
  padding: 16px;
  margin-bottom: 24px;
  cursor: pointer;
}
.home-track-card-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.home-track-card-heading {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.home-track-progress {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
/* прогресс показывается точками .dots — процентов в системе нет */
#home-track-dots { margin-bottom: 12px; }
.home-track-current-label {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.home-track-current-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.home-track-current-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.home-track-cta,
.home-track-build-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--terra);
  color: var(--acc-tx);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.home-track-empty-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.track-survey-overlay,
.track-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}
.track-survey-overlay.hidden,
.track-detail-overlay.hidden {
  display: none;
}
.track-survey-container,
.track-detail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.track-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.track-detail-back,
.track-detail-menu-btn {
  border: none;
  background: var(--warm-white);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-muted);
}
.track-detail-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}
.track-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-2);
  margin: 24px 0 12px;
}
.track-starting-point {
  font-size: 14px;
  line-height: 1.55;
  color: var(--tx-2);
  padding: 16px 18px;
  border-radius: var(--r-plate);
  background: var(--surface);
}
.track-zone-card {
  padding: 14px 16px;
  border-radius: var(--r-plate);
  background: var(--surface);
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--tx);
}
.track-zone-card.active {
  border-color: var(--terra);
}
.track-zone-badge {
  display: inline-block;
  font-size: 11px;
  color: var(--terra);
  margin-bottom: 4px;
}
.track-step-item {
  border-radius: var(--r-plate);
  border: 1.5px solid transparent;
  background: var(--surface);
  margin-bottom: 8px;
  overflow: hidden;
}
.track-step-item.future { opacity: 0.65; }
.track-step-item.active { border-color: var(--acc); }
.track-step-head {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 12px 14px;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink);
}
.track-step-body {
  padding: 0 14px 14px;
  display: none;
}
.track-step-item.active .track-step-body,
.track-step-item.expanded .track-step-body {
  display: block;
}
.track-step-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.track-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.track-step-btn {
  padding: 10px 14px;
  border-radius: var(--r-pill);
  border: none;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.track-step-btn.primary {
  background: var(--terra);
  color: var(--acc-tx);
}
.track-step-btn.secondary {
  background: var(--cream);
  color: var(--ink-soft);
  border: 1px solid var(--border-soft);
}
.track-recreate-btn {
  margin-top: 20px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-muted);
  font-family: inherit;
  cursor: pointer;
}
.track-survey-step.hidden { display: none; }
.track-survey-step-indicator {
  margin-bottom: 20px;
}
.track-survey-title {
  font-family: var(--disp);
  font-weight: 400;
  font-size: 28px;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 0 0 10px;
}
.track-survey-subtitle {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 16px;
  line-height: 1.45;
}
.track-survey-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.track-survey-options .cabinet-chip { font-size: 13px; }
.track-survey-textarea {
  width: 100%;
  min-height: 96px;
  border-radius: var(--r-field);
  border: 1px solid var(--border-soft);
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 16px;
  background: var(--warm-white);
}
.track-survey-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
}
.track-survey-next,
.track-survey-finish {
  margin-left: auto;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--terra);
  color: var(--acc-tx);
  font-family: inherit;
  cursor: pointer;
}
.track-survey-skip {
  border: none;
  background: none;
  color: var(--ink-muted);
  font-family: inherit;
  cursor: pointer;
}
.home-loading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home-loading[hidden],
#home-content[hidden] {
  display: none !important;
}
#home-content:not([hidden]) {
  display: block;
}
.home-error {
  padding: 14px 16px;
  border-radius: var(--r-field);
  background: var(--warm-white);
  border: 1px solid var(--border-soft);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 16px;
}
.home-skeleton {
  border-radius: var(--r-plate);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: home-shimmer 1.2s ease-in-out infinite;
}
.home-skeleton.greeting { height: 72px; }
.home-skeleton.stats { height: 132px; }
.home-skeleton.works { height: 160px; }
@keyframes home-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
#screen-profile {
  background: var(--warm-white);
}
#screen-profile .cabinet-sheet {
  max-height: none;
  height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  animation: none;
}
#screen-profile .cabinet-tab-content {
  padding-bottom: 16px;
}
#screen-profile .cabinet-back {
  display: none;
}
#screen-chat {
  background: var(--cream);
}

/* ---------- MATERIALS ---------- */
.screen-materials-scroll {
  flex: 1;
  overflow-y: auto;
  padding: calc(12px + env(safe-area-inset-top)) 16px 20px;
}
.materials-page-title {
  font-size: 38px;
  margin: 8px 0 22px;
  color: var(--tx);
}
.materials-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0 0 6px;
}
.materials-section-hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.materials-recommended {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.materials-rec-card {
  display: flex;
  gap: 12px;
  align-items: stretch;
  text-align: left;
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-plate);
  background: var(--warm-white);
  padding: 10px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.materials-rec-cover,
.materials-card-cover {
  background: var(--terra-light);
  color: var(--terra);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.materials-rec-cover {
  width: 72px;
  height: 72px;
  border-radius: var(--r-field);
  font-size: 28px;
}
.materials-rec-cover img,
.materials-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.materials-rec-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.materials-rec-title,
.materials-card-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.materials-rec-meta,
.materials-card-meta {
  font-size: 12px;
  color: var(--ink-muted);
}
.materials-toolbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 10px;
  position: relative;
}
.materials-toolbar-sticky {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--cream);
  padding-right: 8px;
}
.materials-toolbar-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-field);
  border: 1px solid var(--border-soft);
  background: var(--warm-white);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.materials-toolbar-btn.active {
  background: var(--terra-light);
  border-color: var(--terra);
  color: var(--terra);
}
.materials-toolbar-btn-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--terra);
  color: var(--acc-tx);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.materials-toolbar-scroll-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}
.materials-toolbar-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.materials-toolbar-scroll::-webkit-scrollbar {
  display: none;
}
.materials-toolbar-fade {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--cream));
}
.materials-filter-chip {
  border: 1px solid var(--border-soft);
  background: var(--warm-white);
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.materials-filter-chip.active {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--acc-tx);
}
.materials-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
}
.materials-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-soft);
  background: var(--warm-white);
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  padding: 5px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.materials-active-reset {
  border: none;
  background: none;
  color: var(--terra);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 5px 4px;
}
.materials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .materials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.materials-card {
  position: relative;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-plate);
  background: var(--warm-white);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.materials-card-cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  font-size: 36px;
}
.materials-card-body {
  padding: 10px 12px 12px;
}
.materials-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.materials-card-viewed {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--scrim);
  color: var(--acc-tx);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.materials-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--tx-2);
  font-size: 14px;
  line-height: 1.5;
  background: var(--surface);
  border-radius: var(--r-plate);
}
.materials-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48vh;
  padding: 48px 24px;
  color: var(--tx-2);
  font-size: 14px;
  line-height: 1.55;
}
.materials-coming-soon[hidden] {
  display: none;
}
.materials-coming-soon .materials-empty-title {
  max-width: 18em;
}
.materials-coming-soon > div:last-child {
  max-width: 22em;
}
.materials-empty-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.materials-empty-btn {
  margin-top: 16px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--acc);
  color: var(--acc-tx);
  font-weight: 600;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.materials-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 220;
  background: var(--scrim);
  align-items: flex-end;
  justify-content: center;
}
.materials-filter-overlay.open {
  display: flex;
}
.materials-filter-sheet {
  width: 100%;
  max-width: 480px;
  max-height: min(80vh, 640px);
  background: var(--warm-white);
  border-radius: var(--r-field) 16px 0 0;
  border: 1px solid var(--border-soft);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px var(--line);
  animation: sheet-up 0.22s ease-out;
}
.materials-filter-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  flex-shrink: 0;
}
.materials-filter-sheet-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.materials-filter-sheet-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--cream);
  border-radius: 50%;
  font-size: 20px;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: inherit;
}
.materials-filter-sheet-body {
  overflow-y: auto;
  padding: 0 16px 12px;
  flex: 1;
}
.materials-filter-group {
  margin-bottom: 18px;
}
.materials-filter-group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.materials-filter-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.materials-filter-sheet-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
  background: var(--warm-white);
}
.materials-filter-sheet-reset {
  flex: 1;
  padding: 12px 14px;
  border-radius: var(--r-field);
  border: 1px solid var(--border-soft);
  background: var(--cream);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.materials-filter-sheet-apply {
  flex: 1.4;
  padding: 12px 14px;
  border-radius: var(--r-field);
  border: none;
  background: var(--terra);
  color: var(--acc-tx);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.materials-filter-sheet-apply:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.material-detail-similar {
  margin-top: 28px;
}
.material-detail-similar-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.material-detail-similar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.material-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}
.material-detail-overlay.hidden {
  display: none;
}
.material-detail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.material-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.material-detail-back,
.material-detail-fav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--warm-white);
  color: var(--ink-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
}
.material-detail-fav.active {
  color: var(--terra);
}
.material-detail-cover {
  width: 100%;
  border-radius: var(--r-plate);
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--terra-light);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 64px;
  color: var(--terra);
}
.material-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.material-detail-title {
  font-family: var(--disp);
  font-size: 30px;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 0 0 8px;
  color: var(--tx);
}
.material-detail-subtitle {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 8px;
  line-height: 1.45;
}
.material-detail-meta {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.material-detail-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--terra);
  color: var(--acc-tx);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 18px;
}
.material-detail-content {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.material-detail-content h2,
.material-detail-content h3 {
  font-family: var(--serif);
  color: var(--ink);
  margin: 18px 0 8px;
}
.material-detail-content p {
  margin: 0 0 12px;
}
.material-detail-content ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.material-detail-content img {
  max-width: 100%;
  border-radius: var(--r-field);
  margin: 8px 0 14px;
}

/* ---------- HEADER ---------- */
.header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  flex-shrink: 0;
}
.header-info {
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--terra-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.header-title {
  font-family: var(--disp);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.025em;
  color: var(--tx);
}
.header-subtitle {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* ---------- MESSAGES ---------- */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  position: relative;
}

.msg {
  display: flex;
  max-width: 88%;
}
.msg.user { align-self: flex-end; }
.msg.assistant { align-self: flex-start; }

.bubble {
  padding: 14px 16px;
  border-radius: var(--r-plate);
  font-size: 15px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.bubble .msg-plain {
  white-space: pre-wrap;
}
.bubble .msg-body {
  white-space: normal;
}
.msg.user .bubble {
  background: var(--surface-2);
  color: var(--tx);
}
/* Разбор наставника — не пузырь мессенджера, а плашка-документ:
   во всю ширину, без хвостика и без рамки. */
.msg.assistant { max-width: 100%; }
.msg.assistant .bubble {
  background: var(--surface);
  color: var(--tx);
  width: 100%;
  padding: 18px;
}
.bubble img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  border-radius: var(--r-img);
  margin-bottom: 8px;
  cursor: pointer;
}
.bubble.error {
  background: var(--surface-2);
  color: var(--terra);
  border: 1px solid var(--terra-light);
}

/* Typing indicator */
.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}
.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-muted);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- INPUT AREA ---------- */
.input-area {
  flex-shrink: 0;
  background: var(--bg);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}

.preview-row {
  display: none;
  padding: 6px 4px 0 4px;
}
.preview-row.active { display: flex; }
.preview {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--r-img);
  overflow: hidden;
}
.preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--warm-white);
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 4px 0;
}

.icon-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--cream);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  transition: background-color 0.15s, color 0.15s;
  padding: 0;
}
.icon-btn:hover { background: var(--border-soft); }
.icon-btn:active { transform: scale(0.96); }
.icon-btn svg { width: 20px; height: 20px; }

.send-btn {
  background: var(--acc);
  color: var(--acc-tx);
  border-color: var(--acc);
}
.send-btn:hover { background: var(--acc); border-color: var(--acc); opacity: 0.86; }
.send-btn:disabled {
  background: transparent;
  border-color: var(--line);
  color: var(--tx-3);
  cursor: not-allowed;
}
.send-btn:disabled:hover { background: transparent; opacity: 1; }

.textarea-wrap {
  flex: 1;
  background: var(--surface);
  border: 1.5px solid transparent;
  border-radius: var(--r-field);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  transition: border-color 0.15s;
}
.textarea-wrap:focus-within { border-color: var(--ink-muted); }

textarea {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  max-height: 120px;
  min-height: 22px;
  width: 100%;
  padding: 0;
  overflow-y: auto;
}
textarea::placeholder { color: var(--ink-muted); }

#file-input { display: none; }

/* Markdown styling - компактная версия */
.bubble p { margin: 0 0 4px 0; }
.bubble p:last-child { margin-bottom: 0; }
.bubble p:empty { display: none; margin: 0; padding: 0; }
.bubble strong { font-weight: 600; }
.bubble em { font-style: italic; }
.bubble ul, .bubble ol {
  margin: 2px 0;
  padding-left: 0;
  list-style-position: inside;
}
.bubble li { margin: 0; padding: 1px 0; }
.bubble li > p { margin: 0; }
.bubble li + li { margin-top: 0; }
.bubble code { 
  background: var(--line); 
  padding: 2px 4px; 
  border-radius: var(--r-pill); 
  font-family: monospace;
  font-size: 0.9em;
}
.bubble pre { 
  background: var(--line); 
  padding: 8px; 
  border-radius: var(--r-field); 
  overflow-x: auto;
  margin: 6px 0;
}
.bubble pre code { 
  background: none; 
  padding: 0; 
}

/* Feedback buttons */
.feedback-buttons {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.feedback-buttons:hover { opacity: 1; }
.feedback-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  padding: 4px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.feedback-btn:hover {
  background: var(--border-soft);
  transform: scale(1.05);
}
.feedback-btn.selected {
  background: var(--terra-light);
  border-color: var(--terra);
}
.feedback-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.correction-preview-wrap {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.correction-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  width: 100%;
}
.correction-preview-btn:hover:not(:disabled) {
  background: var(--warm-white);
  border-color: var(--ink-muted);
}
.correction-preview-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
.correction-preview-panel {
  margin-top: 10px;
}
.correction-preview-panel img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: var(--r-field);
  border: 1px solid var(--border-soft);
  display: block;
  background: var(--cream);
  cursor: pointer;
}
.correction-preview-caption,
.correction-preview-changed,
.correction-preview-error {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
  margin-top: 8px;
}
.correction-preview-changed > strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 4px;
}
.correction-preview-changed-body {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.correction-preview-changed-body p {
  margin: 0 0 6px;
}
.correction-preview-changed-body p:last-child {
  margin-bottom: 0;
}
.correction-preview-changed-body strong {
  color: var(--ink);
  font-weight: 600;
}
.correction-preview-error {
  color: var(--acc);
}
.correction-preview-hide {
  margin-top: 8px;
  font-size: 12px;
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.style-example-wrap {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.style-example-group-label {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-muted);
  font-style: italic;
}
.style-example-branch-actions {
  margin-top: 0;
}
.style-example-result img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: var(--r-field);
  border: 1px solid var(--border-soft);
  display: block;
  background: var(--cream);
  cursor: pointer;
  margin-top: 8px;
}
.style-example-caption {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 8px;
}
.style-example-disclaimer {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
  margin-top: 4px;
  font-style: italic;
}
.style-example-error {
  font-size: 12px;
  line-height: 1.45;
  color: var(--acc);
  margin-top: 8px;
}

.feedback-status {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.feedback-status.error {
  color: var(--acc);
}
.feedback-clarify {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.feedback-clarify-intro {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.feedback-clarify-label {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--ink-muted);
}
.feedback-reason-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.feedback-reason-btn {
  text-align: left;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  background: var(--paper);
  cursor: pointer;
  color: var(--ink);
}
.feedback-reason-btn:hover {
  background: var(--border-soft);
}
.feedback-reason-btn.selected {
  border-color: var(--terra);
  background: var(--terra-light);
}
.feedback-comment {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  resize: vertical;
  min-height: 48px;
  margin-bottom: 6px;
  font-family: inherit;
}
.feedback-submit {
  font-size: 12px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--r-field);
  background: var(--terra);
  color: var(--acc-tx);
  cursor: pointer;
}
.feedback-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.feedback-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.feedback-skip {
  font-size: 12px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.feedback-skip:hover {
  color: var(--ink);
}

/* Подсказка при прикреплении работы */
.attachment-hint {
  font-size: 13px;
  color: var(--ink-muted);
  padding: 8px 4px 0 4px;
  text-align: left;
  line-height: 1.4;
}

/* PRO mode toggle */
.pro-mode-btn {
  position: relative;
  min-width: 36px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.pro-mode-btn.active {
  background: var(--terra-light);
  border-color: var(--terra);
  color: var(--terra);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 22%, transparent);
}
.pro-mode-label {
  pointer-events: none;
  line-height: 1;
}

/* PRO review settings panel (visible when PRO toggle is on) */
.pro-settings-btn.pro-ui-hidden {
  display: none !important;
}
.pro-settings-btn {
  position: relative;
}
.pro-settings-btn.active {
  background: var(--terra-light);
  border-color: var(--terra);
  color: var(--terra);
}
.pro-settings-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-field);
  background: var(--terra);
  color: var(--warm-white);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.pro-settings-label {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  pointer-events: none;
}
.pro-settings-btn.active .pro-settings-label {
  color: var(--terra);
}
.pro-settings-label.pro-ui-hidden {
  display: none !important;
}

.composer-menu-btn {
  position: relative;
}
.composer-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 180;
  background: var(--scrim);
  align-items: flex-end;
  justify-content: center;
}
.composer-menu-overlay.open {
  display: flex;
}
.composer-menu-sheet {
  width: 100%;
  max-width: 480px;
  max-height: min(72vh, 520px);
  background: var(--warm-white);
  border-radius: var(--r-field) 16px 0 0;
  border: 1px solid var(--border-soft);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px var(--line);
  animation: sheet-up 0.22s ease-out;
  touch-action: pan-y;
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.composer-menu-handle {
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: var(--r-pill);
  background: var(--border);
  flex-shrink: 0;
}
.composer-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  flex-shrink: 0;
}
.composer-menu-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.composer-menu-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--cream);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: inherit;
}
.composer-menu-hint {
  margin: 0 16px 8px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-muted);
  font-style: italic;
}
.composer-menu-body {
  overflow-y: auto;
  padding: 0 16px calc(12px + env(safe-area-inset-bottom));
  flex: 1;
}
.composer-menu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.composer-menu-confirm {
  display: none;
  flex-direction: column;
  gap: 12px;
}
.composer-menu-confirm.visible {
  display: flex;
}
.composer-menu-confirm-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
.composer-menu-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.composer-menu-confirm-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  border-radius: var(--r-field);
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
}
.composer-menu-confirm-btn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--warm-white);
}
.composer-menu-btn.active {
  background: var(--border-soft);
  color: var(--ink);
}
.composer-menu-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
/* Отступ слева был у кнопки и раньше, но равнялся на текст внутри
   рамки «Личного кабинета» над ней. Кабинета не стало — равняться не
   на что, и отступ читается как сбитое выравнивание. Вытягиваем кнопку
   влево на её же поле: текст встаёт по левому краю чипов, а подложка
   под курсором остаётся во всю ширину. */
.composer-menu-clear-history-btn {
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  border: none;
  border-radius: var(--r-field);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  text-align: left;
}
.composer-menu-clear-history-btn:hover {
  background: var(--cream);
  color: var(--ink);
}

.clear-history-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 220;
  background: var(--scrim);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.clear-history-overlay.open {
  display: flex;
}
.clear-history-dialog {
  width: 100%;
  max-width: 360px;
  background: var(--warm-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-field);
  padding: 20px 18px 16px;
  box-shadow: 0 12px 40px var(--line);
}
.clear-history-dialog-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.clear-history-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.clear-history-dialog-btn {
  padding: 9px 14px;
  font-size: 13px;
  font-family: inherit;
  border-radius: var(--r-field);
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
}
.clear-history-dialog-btn.danger {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--acc-tx);
  font-weight: 600;
}

.review-settings-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--scrim);
  align-items: flex-end;
  justify-content: center;
}
.review-settings-overlay.open {
  display: flex;
}
.review-settings-sheet {
  width: 100%;
  max-width: 480px;
  max-height: min(82vh, 640px);
  background: var(--warm-white);
  border-radius: var(--r-field) 16px 0 0;
  border: 1px solid var(--border-soft);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px var(--line);
  animation: sheet-up 0.22s ease-out;
}
.review-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.review-settings-title {
  font-family: var(--disp);
  font-size: 22px;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  color: var(--tx);
}
.review-settings-pro-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: var(--r-field);
  background: var(--terra-light);
  color: var(--terra);
  vertical-align: middle;
}
.review-settings-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--cream);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: inherit;
}
.review-settings-body {
  overflow-y: auto;
  padding: 12px 16px 8px;
  flex: 1;
}
.review-settings-group {
  margin-bottom: 16px;
}
.review-settings-group-conditional {
  max-height: 200px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
.review-settings-group-conditional.hidden {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.review-settings-group-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 8px;
}
.review-settings-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.review-settings-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.3;
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.review-settings-chip:hover:not(:disabled) {
  background: var(--border-soft);
}
.review-settings-chip.selected {
  background: var(--terra-light);
  border-color: var(--terra);
  color: var(--ink);
}
.review-settings-chip.dimmed:not(.selected) {
  opacity: 0.45;
  cursor: default;
}
.review-settings-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.review-settings-footer button {
  flex: 1;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  border-radius: var(--r-field);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink);
}
.review-settings-footer .review-settings-save {
  background: var(--ink);
  color: var(--warm-white);
  border-color: var(--ink);
}
.review-settings-toast {
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(12px);
  z-index: 300;
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: var(--warm-white);
  background: var(--ink);
  border-radius: var(--r-field);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.review-settings-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.intent-clarification-title {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.35;
}
.intent-clarification-hint {
  margin: 0 0 0 10px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-muted);
}
.intent-clarification-hint em {
  font-style: italic;
}

.intent-clarification-actions,
.my-style-review-now-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.intent-action-item {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
.intent-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 28px 9px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.25;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tx);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.intent-action-btn:hover:not(:disabled) {
  background: var(--border-soft);
  border-color: var(--ink-muted);
}
.intent-action-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.intent-action-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.intent-action-btn.pro-action {
  background: var(--terra-light);
  border-color: var(--terra);
  color: var(--ink);
}
.intent-action-btn.pro-action:hover:not(:disabled) {
  background: var(--surface-2);
}
.intent-action-pro-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--terra);
}
.intent-info-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--ink-muted);
  border-radius: 50%;
  background: var(--warm-white);
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.intent-info-btn:hover {
  border-color: var(--ink-soft);
  color: var(--ink-soft);
}
.intent-info-tooltip {
  position: fixed;
  z-index: 10000;
  width: max-content;
  max-width: min(240px, calc(100vw - 24px));
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  background: var(--warm-white);
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.35;
  box-shadow: 0 4px 16px var(--line);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s, visibility 0.15s;
}
.intent-info-tooltip.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.welcome-clarification-body .intent-clarification-title {
  margin-bottom: 0;
}
.intent-clarification-actions.welcome-intent-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 0;
  border-top: none;
}
.welcome-action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-plate);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
}
.welcome-action-card:hover:not(:disabled) {
  border-color: var(--border);
  background: var(--border-soft);
}
.welcome-action-card:active:not(:disabled) {
  transform: scale(0.99);
}
.welcome-action-card:disabled {
  opacity: 0.5;
  cursor: default;
}
.welcome-action-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-field);
  background: var(--welcome-accent-bg, var(--terra-light));
  color: var(--welcome-accent-fg, var(--terra));
}
.welcome-action-card-icon svg {
  width: 20px;
  height: 20px;
}
.welcome-action-card-text {
  min-width: 0;
  flex: 1;
}
.welcome-action-card-title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.welcome-action-card-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-muted);
}

/* PRO welcome toast (once per session) */
.pro-welcome-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 0.5px solid var(--surface-2);
  border-radius: var(--r-field);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  flex-shrink: 0;
}
.pro-welcome-toast.visible {
  opacity: 1;
  transform: translateY(0);
}
.pro-welcome-toast.leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.pro-welcome-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--acc);
  color: var(--surface-2);
}
.pro-welcome-toast-icon svg {
  width: 22px;
  height: 22px;
}
.pro-welcome-toast-text {
  min-width: 0;
  flex: 1;
}
.pro-welcome-toast-title {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tx);
}
.pro-welcome-toast-subtitle {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--tx-2);
}

/* PRO extended onboarding (first activation, once per device) */
.pro-onboarding-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 14px 36px 14px 14px;
  background: var(--surface-2);
  border: 0.5px solid var(--surface-2);
  border-radius: var(--r-field);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: auto;
  flex-shrink: 0;
}
.pro-onboarding-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.pro-onboarding-card.leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.pro-onboarding-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--r-field);
  background: transparent;
  color: var(--tx-2);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.pro-onboarding-close svg {
  width: 14px;
  height: 14px;
}
.pro-onboarding-close:hover {
  color: var(--tx);
}
.pro-onboarding-body {
  min-width: 0;
  flex: 1;
}
.pro-onboarding-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tx);
}
.pro-onboarding-lead {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--tx-2);
}
.pro-onboarding-list {
  margin: 6px 0 0;
  padding-left: 14px;
  list-style: disc;
}
.pro-onboarding-list li {
  font-size: 12px;
  line-height: 1.45;
  color: var(--tx-2);
  margin-top: 2px;
}
.pro-onboarding-hint {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--acc);
}

@keyframes pro-gear-highlight-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 35%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 55%, transparent); }
}
.pro-settings-btn.pro-gear-highlight {
  animation: pro-gear-highlight-pulse 1.5s ease-in-out infinite;
}

/* Theme transitions (light ↔ PRO dark) */
body,
.app,
.header,
.messages,
.input-area,
.bottom-nav,
.home-stat-card,
.home-works-empty,
.bubble,
.icon-btn,
.textarea-wrap,
.welcome-action-card,
.intent-action-btn,
.composer-menu-sheet,
.clear-history-dialog,
.review-settings-sheet,
.intent-info-btn,
.intent-info-tooltip,
.composer-menu-close,
.review-settings-close,
.review-settings-chip,
.clear-history-dialog-btn,
.composer-menu-confirm-btn {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
}
.image-lightbox[hidden] {
  display: none !important;
}
.image-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  cursor: pointer;
}
.image-lightbox-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.image-lightbox-toolbar {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.image-lightbox-download,
.image-lightbox-close {
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  border: 1px solid var(--tx-2);
  border-radius: var(--r-field);
  background: var(--scrim);
  color: var(--acc-tx);
  cursor: pointer;
  padding: 10px 14px;
  text-decoration: none;
  backdrop-filter: blur(6px);
}
.image-lightbox-close {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.image-lightbox-download:hover,
.image-lightbox-close:hover {
  background: var(--surface-2);
}
.image-lightbox-caption {
  display: none;
  width: 100%;
  max-width: 720px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r-field);
  background: var(--tx);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  max-height: 40vh;
  overflow-y: auto;
  white-space: pre-wrap;
}
.image-lightbox-caption.visible {
  display: block;
}
.image-lightbox-caption.empty-note {
  color: var(--ink-muted);
  font-style: italic;
}

/* Personal cabinet */
.cabinet-avatar-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
}
.cabinet-avatar-btn .cabinet-avatar-silhouette {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--ink-muted);
  background: var(--cream);
}
.cabinet-avatar-btn img,
.cabinet-avatar-btn .cabinet-avatar-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cabinet-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terra-soft);
  color: var(--terra);
  font-size: 13px;
  font-weight: 600;
}
.cabinet-overlay,
.cabinet-edit-overlay {
  display: none;
  position: fixed;
  inset: 0;
  align-items: flex-end;
  justify-content: center;
}
.cabinet-overlay {
  z-index: 190;
  background: var(--scrim);
}
.cabinet-edit-overlay {
  z-index: 210;
  background: var(--scrim);
}
.cabinet-overlay.open,
.cabinet-edit-overlay.open {
  display: flex;
}
.cabinet-sheet,
.cabinet-edit-sheet {
  width: 100%;
  max-width: 480px;
  max-height: min(92vh, 780px);
  background: var(--warm-white);
  border-radius: var(--r-field) 16px 0 0;
  border: 1px solid var(--border-soft);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px var(--line);
  animation: sheet-up 0.22s ease-out;
}
.cabinet-header,
.cabinet-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.cabinet-header h2,
.cabinet-edit-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.cabinet-back,
.cabinet-edit-back {
  border: none;
  background: var(--cream);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-muted);
}
.cabinet-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-soft);
  background: var(--warm-white);
}
.cabinet-tab {
  flex: 1;
  padding: 12px 8px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-muted);
  cursor: pointer;
  margin-bottom: -1px;
}
.cabinet-tab.active {
  color: var(--tx);
  font-weight: 600;
  border-bottom-color: var(--acc);
}
.cabinet-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
.cabinet-tab-content.hidden {
  display: none;
}
.cabinet-tab-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  color: var(--ink-muted);
  font-size: 14px;
}
.cabinet-tab-loading.hidden {
  display: none;
}
.cabinet-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-soft);
  border-top-color: var(--terra);
  border-radius: 50%;
  animation: cabinet-spin 0.7s linear infinite;
}
@keyframes cabinet-spin {
  to { transform: rotate(360deg); }
}
.cabinet-stats-grid {
  display: grid;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 8px;
}
.cabinet-stats-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.cabinet-stats-label {
  color: var(--ink-muted);
}
.cabinet-stats-value {
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}

:root {
  /* Уровень цветом не кодируется: акцент отмечает то, что ищется,
     нейтральный — то, что рука уже держит. Второго цвета в системе нет. */
  --skill-zone-growth: var(--acc);
  --skill-zone-developing: var(--acc);
  --skill-zone-confident: var(--tx-2);
  --skill-zone-strong: var(--tx-2);
}
/* Отдельный экран выбора языка. Стоит поверх онбординга и не зависит
   от словаря: заголовок сразу на трёх языках, названия кнопок — на своих. */
.language-picker {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  padding: calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.language-picker.hidden {
  display: none;
}
.language-picker-inner {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}
.language-picker-brand {
  margin: 0 0 28px;
  font-family: var(--disp);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--tx);
}
.language-picker-title {
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--tx);
}
.language-picker-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.language-picker-option {
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--r-plate);
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--tx);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.language-picker-option.is-preset {
  border-color: var(--acc);
  color: var(--acc);
}

/* ---------- Переключатель языка ---------- */
.lang-switch {
  display: flex;
  gap: 8px;
  flex: none;
}
.lang-option {
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--tx-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.lang-option.active {
  border-color: var(--acc);
  color: var(--acc);
}

/* ---------- Карта навыков: лист с пробами ---------- */
.skmap-sheet {
  position: relative;
  background: var(--plate);
  border-radius: var(--r-plate);
  padding: 10px 4px 6px;
  overflow: hidden;
}
.skmap {
  display: block;
  width: 100%;
  height: auto;
  color: var(--draw);
}
.skmap-label {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: var(--tx-2);
}
.skmap-label.none { fill: var(--tx-3); }
.skmap-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--tx-2);
  font-weight: 500;
  margin: 14px 0 26px;
}

/* Тап-цели: проценты от viewBox, поэтому едут вместе с масштабом SVG */
.skmap-hit {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-img);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s ease;
}
.skmap-hit:hover { background: color-mix(in srgb, var(--tx) 7%, transparent); }
.skmap-hit:focus-visible { outline: 2px solid var(--acc); outline-offset: 0; }

/* ---------- Нижний лист навыка ---------- */
.skill-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}
.skill-scrim.on { opacity: 1; visibility: visible; }
.skill-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 201;
  display: flex;
  justify-content: center;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.26s cubic-bezier(0.22, 0.8, 0.3, 1), visibility 0.26s;
}
.skill-sheet.on { transform: none; visibility: visible; }
.skill-sheet-in {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border-radius: var(--r-plate) var(--r-plate) 0 0;
  padding: 26px 20px calc(22px + env(safe-area-inset-bottom));
}
.skill-sheet-name { font-size: 28px; margin: 12px 0 0; }
.skill-sheet-mark { display: block; width: 168px; height: auto; margin: 20px 0 0; }
.skill-sheet-note {
  font-size: 15px;
  line-height: 1.5;
  color: var(--tx);
  margin: 20px 0 0;
  font-weight: 500;
}
.skill-sheet-next {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 0;
  padding: 15px 16px;
  border-radius: var(--r-field);
  background: var(--surface-2);
  color: var(--tx);
  text-decoration: none;
}
.skill-sheet-next span { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.35; }
.skill-sheet-next .label { display: block; margin: 0 0 5px; }
.skill-sheet-next svg { flex: none; color: var(--tx-2); }
.skill-sheet-close {
  width: 100%;
  margin: 24px 0 0;
  padding: 15px 0;
  cursor: pointer;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--tx);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
}

.skills-radar-section {
  margin-bottom: 24px;
}
.skills-radar-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 16px;
}
.skills-radar-empty {
  text-align: center;
  padding: 12px 8px 4px;
}
.skills-radar-empty-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 8px 0 4px;
}
.skills-radar-empty-count {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.skills-radar-empty-btn {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--terra);
  color: var(--acc-tx);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.skills-zone-list {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.skills-zone-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-field);
  padding: 12px 14px;
  background: var(--warm-white);
}
.skills-zone-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.skills-zone-card-meta {
  font-size: 12px;
}
.skills-zone-card-meta.growth { color: var(--skill-zone-growth); }
.skills-zone-card-meta.developing { color: var(--skill-zone-developing); }
.skills-zone-card-meta.confident { color: var(--skill-zone-confident); }
.skills-zone-card-meta.strong { color: var(--skill-zone-strong); }
.skills-strengths-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-field);
  padding: 12px 14px;
  background: var(--warm-white);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}

.cabinet-edit-body {
  overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
.cabinet-profile-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.cabinet-profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.cabinet-profile-avatar-btn {
  position: relative;
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  font-family: inherit;
}
.cabinet-profile-avatar-btn .cabinet-profile-avatar-camera {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--scrim);
  color: var(--acc-tx);
  font-size: 22px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.cabinet-profile-avatar-btn:hover .cabinet-profile-avatar-camera,
.cabinet-profile-avatar-btn:focus-visible .cabinet-profile-avatar-camera {
  opacity: 1;
}
.cabinet-profile-identity {
  flex: 1;
  min-width: 0;
}
.cabinet-profile-names-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cabinet-profile-names {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cabinet-profile-name-field {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.cabinet-profile-name-field::placeholder {
  color: var(--ink-muted);
  font-weight: 500;
  opacity: 0.75;
}
.cabinet-profile-name-field:placeholder-shown {
  font-weight: 500;
}
.cabinet-profile-edit-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.cabinet-profile-edit-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
.cabinet-profile-username {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.cabinet-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  flex-shrink: 0;
}
.cabinet-profile-avatar img,
.cabinet-profile-avatar .cabinet-avatar-fallback,
.cabinet-profile-avatar .cabinet-avatar-silhouette {
  width: 100%;
  height: 100%;
}
.cabinet-profile-avatar .cabinet-avatar-silhouette {
  display: block;
  color: var(--ink-muted);
  background: var(--cream);
}
.cabinet-profile-avatar .cabinet-avatar-fallback {
  font-size: 28px;
}
.cabinet-profile-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.cabinet-profile-status {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.cabinet-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
}
.cabinet-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.cabinet-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-2);
  margin-bottom: 14px;
}
.cabinet-stats-line {
  font-size: 13px;
  color: var(--ink);
}
.cabinet-profile-grid {
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.cabinet-profile-row {
  display: flex;
  gap: 8px;
}
.cabinet-profile-label {
  min-width: 88px;
  color: var(--ink-muted);
}
.cabinet-profile-value {
  flex: 1;
  color: var(--ink);
}
.cabinet-banner {
  padding: 14px;
  border-radius: var(--r-field);
  background: var(--cream);
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
}
.cabinet-primary-btn,
.cabinet-secondary-btn,
.cabinet-menu-entry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--r-field);
  border: 1px solid var(--border);
  background: var(--warm-white);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.cabinet-primary-btn {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--acc-tx);
  font-weight: 600;
}
.cabinet-tariff-card {
  padding: 14px;
  border-radius: var(--r-field);
  border: 1px solid var(--border-soft);
  background: var(--cream);
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.cabinet-tariff-card .cabinet-primary-btn,
.cabinet-tariff-card .cabinet-secondary-btn {
  width: 100%;
  margin-top: 12px;
}

.plan-selector-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 220;
  background: var(--scrim);
  align-items: flex-end;
  justify-content: center;
}
.plan-selector-overlay.open {
  display: flex;
}
.plan-selector-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--warm-white);
  border-radius: var(--r-field) 16px 0 0;
  border: 1px solid var(--border-soft);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px var(--line);
  animation: sheet-up 0.22s ease-out;
}
.plan-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--border-soft);
}
.plan-selector-title {
  font-family: var(--disp);
  font-size: 22px;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  color: var(--tx);
}
.plan-selector-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--cream);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: inherit;
}
.plan-selector-body {
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-field);
  background: var(--cream);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.plan-option:hover:not(:disabled) {
  border-color: var(--terra);
  background: var(--terra-light, var(--surface-2));
}
.plan-option:active:not(:disabled) {
  transform: scale(0.99);
}
.plan-option:disabled {
  opacity: 0.55;
  cursor: wait;
}
.plan-option-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.plan-option-price {
  font-size: 14px;
  color: var(--ink-soft);
}
.plan-option-save {
  font-size: 12px;
  color: var(--terra);
  font-weight: 500;
}
.cabinet-settings-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cabinet-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font-size: 15px;
}
/* Переключатель. Нативный чекбокс рисуется системным синим —
   это фактически второй акцент, поэтому он заменён своим. */
.cabinet-setting-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1.5px solid var(--line);
  position: relative;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.cabinet-setting-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--tx-3);
  transform: translateY(-50%);
  transition: transform 0.16s ease, background 0.16s ease;
}
.cabinet-setting-row input[type="checkbox"]:checked {
  background: var(--acc);
  border-color: var(--acc);
}
.cabinet-setting-row input[type="checkbox"]:checked::after {
  background: var(--acc-tx);
  transform: translateY(-50%) translateX(18px);
}

.cabinet-setting-link {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
}
.cabinet-edit-field {
  margin-bottom: 16px;
}
.cabinet-form-hint {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--r-field);
  background: var(--cream);
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}
.cabinet-edit-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}
.cabinet-edit-field select,
.cabinet-edit-field input,
.cabinet-edit-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--r-field);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 14px;
  background: var(--warm-white);
}
.cabinet-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cabinet-chip {
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--warm-white);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.cabinet-chip.selected {
  background: var(--terra-soft);
  border-color: var(--terra);
  color: var(--terra);
}
.cabinet-edit-footer {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* First-launch onboarding */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--cream);
  overflow: hidden;
}
.onboarding-overlay.hidden {
  display: none;
}
.onboarding-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}
.onboarding-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: onboarding-fade-in 0.22s ease-out;
}
.onboarding-step.hidden {
  display: none;
}
@keyframes onboarding-fade-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
.onboarding-step-indicator {
  margin-bottom: 24px;
}
.onboarding-title {
  font-family: var(--disp);
  font-size: 34px;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--tx);
}
.onboarding-subtitle {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.onboarding-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  color: var(--terra);
  flex-shrink: 0;
}
.onboarding-illustration svg {
  width: 56px;
  height: 56px;
}
.onboarding-pro-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
  background: linear-gradient(135deg, var(--acc), var(--acc));
  color: var(--acc-tx);
}
.onboarding-buttons {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.onboarding-skip,
.onboarding-back {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 10px 4px;
}
.onboarding-next,
.onboarding-finish {
  margin-left: auto;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  background: var(--terra);
  color: var(--acc-tx);
}
.onboarding-finish {
  width: 100%;
  margin-left: 0;
  padding: 14px 20px;
  font-size: 16px;
}
.onboarding-step[data-step="4"] .onboarding-buttons {
  flex-direction: column;
  align-items: stretch;
}
.onboarding-step[data-step="4"] .onboarding-back {
  align-self: flex-start;
}

.image-lightbox-stage {
  flex: 1;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8px 12px 16px;
  pointer-events: auto;
}
.image-lightbox-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-field);
  touch-action: pinch-zoom;
  user-select: none;
  -webkit-user-drag: none;
}
body.image-lightbox-open {
  overflow: hidden;
}