:root {
  /* Дизайн-токены — язык прототипа SkillPath: сине-графитовая премиум-тема */
  --page: #07090C;         /* полотно вокруг фрейма */
  --bg: #0E1116;           /* основной фон приложения */
  --surface: #171C24;      /* карточка */
  --surface-2: #1F2630;    /* вложенный слой / ховер */
  --surface-hover: #262E3A;
  --line: #262E3A;         /* граница */
  --text: #E8ECF1;
  --text-dim: #8A94A3;
  --text-faint: #5A6472;

  --accent: #4E9AF1;       /* фирменный синий */
  --accent-ink: #07121F;   /* тёмный текст на синей кнопке */
  --accent-soft: rgba(78,154,241,0.10);
  --accent-line: rgba(78,154,241,0.28);
  --success: #3DDC97;
  --warning: #F5B14C;
  --danger: #FF6B6B;
  --xp: #C77DFF;           /* фиолетовый для XP/наград */
  --pink: #FF6B9D;

  /* совместимость со старыми переменными в inline-стилях экранов */
  --surface-2: #1F2630;
  --border: var(--line);
  --border-strong: #313B49;
  --accent-light: #7FB6F5;
  --blue: #4E9AF1;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;

  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Inter', sans-serif;

  --sidebar-width: 236px;
  --tabbar-h: 62px;
  /* Полная высота таб-бара вместе с home-indicator iPhone */
  --tabbar-total: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  /* Боковой отступ контента. Ленты «во всю ширину» отзеркаливают его отрицательным margin,
     поэтому менять отступ можно только здесь — иначе поедут края. */
  --gutter: 40px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  display: flex;
  height: 100vh;
  height: 100dvh; /* мобильные браузеры: реальная высота без адресной строки */
  overflow: hidden;
  overscroll-behavior: none;                 /* без «резинки» и pull-to-refresh поверх SPA */
  -webkit-tap-highlight-color: transparent;  /* без серой вспышки по тапу */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
}

/* Layout Container */
#layout-container {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Sidebar / рейл (десктоп) */
#sidebar {
  width: var(--sidebar-width);
  background-color: var(--bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  flex-shrink: 0;
  overflow-y: auto;
  z-index: 40;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 10px 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.2px;
  color: var(--text);
  text-decoration: none;
}

.logo-icon {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--accent), var(--xp));
  border-radius: 8px;
  flex-shrink: 0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
  transition: background 0.16s, color 0.16s;
  cursor: pointer;
  position: relative;
  background: none;
  border: none;
  font-family: var(--font-body);
  width: 100%;
  text-align: left;
}

.nav-item:hover { color: var(--text); background-color: var(--surface); }

.nav-item.active { color: var(--accent); font-weight: 600; background-color: var(--accent-soft); }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.nav-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-icon svg { width: 21px; height: 21px; }

.nav-more { display: none; } /* на десктопе вторичные видны в рейле, кнопка «Ещё» не нужна */
.sidebar-more { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.nav-secondary { font-size: 14px; }
.nav-secondary .nav-icon svg { width: 19px; height: 19px; }

.nav-value {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
}

.sidebar-section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 12px;
  margin-bottom: 12px;
}

.sidebar-premium {
  margin-top: auto;
  background-color: var(--surface);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--surface-2);
}

.premium-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.premium-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 16px;
  line-height: 1.4;
}

.premium-btn {
  width: 100%;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 13px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 14.5px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}
.premium-btn:hover { filter: brightness(1.06); }
.premium-btn:active { transform: scale(0.98); }

/* Main Content Area */
#main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
}

#app {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; /* страховка: ни один экран не даёт горизонтальный скролл */
  -webkit-overflow-scrolling: touch;
  padding: 36px var(--gutter);
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

/* Горизонтальная лента чипов/фильтров — как в мобильных приложениях */
.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Screen Header */
.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.screen-header h1 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.8px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.icon-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.16s;
}

.icon-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--surface);
  padding: 5px 14px 5px 5px;
  border-radius: 40px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.16s;
}
.user-profile:hover { border-color: var(--border-strong); }

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
}

.user-level {
  font-size: 11px;
  color: var(--text-dim);
}

.xp-bar-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 8px;
}

.xp-text {
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
}

.xp-bar {
  width: 80px;
  height: 4px;
  background-color: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}

.xp-fill {
  height: 100%;
  background-color: var(--accent);
  width: 60%;
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.dashboard-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Cards */
.card {
  background-color: var(--surface);
  border-radius: var(--radius);
  padding: 22px 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card:hover { border-color: var(--border-strong); }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-title {
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* Progress Section */
.progress-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.level-info h2 {
  font-size: 42px;
  margin: 8px 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.level-info h2 span {
  font-size: 20px;
  color: var(--text-dim);
  font-family: var(--font-body);
}

.level-next {
  color: var(--text-dim);
  font-size: 13px;
}

.progress-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 68%, var(--surface-2) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.progress-circle::before {
  content: '';
  position: absolute;
  inset: 8px;
  background-color: var(--surface);
  border-radius: 50%;
}

.progress-circle-inner {
  position: relative;
  text-align: center;
}

.progress-circle-value {
  font-size: 24px;
  font-weight: 700;
}

.progress-circle-label {
  font-size: 11px;
  color: var(--text-dim);
}

/* Missions */
.mission-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: var(--bg);
  border-radius: 12px;
  margin-bottom: 12px;
}

.mission-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(139, 92, 246, 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.mission-icon.blue { background-color: rgba(59, 130, 246, 0.1); color: var(--blue); }
.mission-icon.green { background-color: rgba(16, 185, 129, 0.1); color: var(--success); }

.mission-content {
  flex: 1;
}

.mission-title {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 15px;
}

.mission-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}

.mission-meta {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mission-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100px;
}

.mission-progress-text {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.mission-progress-bar {
  height: 4px;
  background-color: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}

.mission-reward {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  width: 60px;
  text-align: right;
}

.mission-btn {
  background-color: transparent;
  border: 1px solid var(--surface-2);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  transition: background 0.2s;
}

.mission-btn:hover {
  background-color: var(--surface-hover);
}

/* Funnel */
.funnel-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 8px;
  background-color: rgba(139, 92, 246, 0.1);
}

.funnel-item.blue { background-color: rgba(59, 130, 246, 0.1); }
.funnel-item.green { background-color: rgba(16, 185, 129, 0.1); }
.funnel-item.yellow { background-color: rgba(245, 158, 11, 0.1); }
.funnel-item.red { background-color: rgba(239, 68, 68, 0.1); }

.funnel-label { font-weight: 500; font-size: 14px; }
.funnel-values { display: flex; gap: 24px; font-weight: 600; font-size: 14px; }
.funnel-values span:last-child { color: var(--accent); width: 40px; text-align: right; }

/* Responsive + мобильная навигация */
/* ===== Мобильный нижний таб-бар (язык прототипа) ===== */
.sheet-wrap {
  position: fixed; inset: 0; z-index: 200;
  display: none;
}
.sheet-wrap.open { display: block; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface); border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--line);
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  animation: sheetUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-handle { width: 38px; height: 4px; border-radius: 3px; background: var(--surface-hover); margin: 4px auto 14px; }
.sheet-title { font-family: var(--font-display); font-size: 17px; margin-bottom: 10px; }
.sheet-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 8px; color: var(--text); text-decoration: none;
  font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--line);
}
.sheet-item:last-child { border-bottom: none; }
.sheet-ic { font-size: 19px; width: 24px; text-align: center; }

@media (max-width: 900px) {
  /* min-height: 0 обязателен: в колонке flex-элемент не сжимается ниже
     контента, #app вырастал за экран и скроллить становилось нечего
     (у body overflow: hidden) */
  #layout-container { flex-direction: column; min-height: 0; }
  #main-content { min-height: 0; }
  #app { min-height: 0; }
  /* сайдбар превращается в нижний таб-бар */
  #sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: var(--tabbar-h);
    flex-direction: row; align-items: stretch;
    padding: 0; border-right: none; border-top: 1px solid var(--line);
    background: rgba(14, 17, 22, 0.92);
    backdrop-filter: blur(14px);
  }
  .sidebar-logo { display: none; }
  .sidebar-nav { flex-direction: row; flex: 1; gap: 0; }
  .sidebar-more { display: none; } /* вторичные — в шторке «Ещё» */
  .nav-more { display: flex; } /* показываем кнопку «Ещё» */
  .nav-item {
    flex: 1; flex-direction: column; gap: 4px;
    justify-content: center; align-items: center;
    padding: 8px 2px; border-radius: 0; font-size: 10.5px;
  }
  .nav-item .nav-label { font-size: 10.5px; font-weight: 500; }
  .nav-item.active { background: none; }
  .nav-item.active::before { display: none; }
  .nav-item.active .nav-icon { color: var(--accent); }
  .nav-icon svg { width: 23px; height: 23px; }

  #main-content { padding-bottom: var(--tabbar-h); }
  #app { padding: 18px 16px calc(var(--tabbar-h) + 18px); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .skill-map-layout { flex-direction: column; }
  .skill-map-sidebar { width: 100%; }
  .screen-header h1 { font-size: 24px; }
}
@media (min-width: 901px) {
  .sheet-wrap { display: none !important; }
}

/* Skill Map Tabs */
.skill-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--surface-2);
  margin-bottom: 32px;
  padding-bottom: 16px;
}
.skill-tab {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.skill-tab.active {
  color: var(--text);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 16px;
  margin-bottom: -17px;
}

/* Skill Map Layout */
.skill-map-layout {
  display: flex;
  gap: 32px;
}
.skill-map-main {
  flex: 1;
}
.skill-map-sidebar {
  width: 320px;
  flex-shrink: 0;
}

/* Branches */
.branch-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
  gap: 24px;
}
.branch-info {
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.branch-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--accent);
  background-color: rgba(139, 92, 246, 0.1);
}
.branch-icon.yellow { color: var(--warning); background-color: rgba(245, 158, 11, 0.1); }
.branch-icon.blue { color: var(--blue); background-color: rgba(59, 130, 246, 0.1); }
.branch-icon.red { color: var(--danger); background-color: rgba(239, 68, 68, 0.1); }
.branch-icon.green { color: var(--success); background-color: rgba(16, 185, 129, 0.1); }

.branch-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.branch-stats {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: auto;
  align-self: center;
  padding-top: 16px;
}

.branch-nodes {
  flex: 1;
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-top: 4px;
}
.branch-line {
  position: absolute;
  top: 24px;
  left: 40px;
  right: 40px;
  height: 2px;
  background-color: var(--surface-2);
  z-index: 0;
}
.branch-line-progress {
  height: 100%;
  background-color: var(--accent);
  transition: width 0.3s;
}
.branch-line-progress.yellow { background-color: var(--warning); }
.branch-line-progress.blue { background-color: var(--blue); }

/* Nodes */
.skill-node-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1;
}
.skill-node {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--surface);
  border: 2px solid var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.skill-node.mastered {
  border-color: var(--success);
  color: var(--success);
}
.skill-node.learning {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}
.skill-node.available {
  border-color: var(--warning);
  color: var(--warning);
}
.skill-node.locked {
  border-color: var(--surface-2);
  color: var(--text-dim);
  background-color: var(--bg);
}
.skill-node-title {
  font-size: 11px;
  text-align: center;
  color: var(--text-dim);
  max-width: 80px;
  line-height: 1.2;
}
.skill-node-dots {
  display: flex;
  gap: 4px;
}
.skill-node-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--surface-2);
}
.skill-node-dot.filled {
  background-color: currentColor;
}
.node-color-purple { color: var(--accent); }
.node-color-green { color: var(--success); }
.node-color-yellow { color: var(--warning); }
.node-color-blue { color: var(--blue); }
.node-color-red { color: var(--danger); }

/* Skill Map (SVG-граф) */
.skillmap-wrap {
  position: relative;
  background:
    radial-gradient(ellipse at 25% -5%, rgba(78, 154, 241, 0.08), transparent 55%),
    var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: clamp(520px, calc(100vh - 240px), 940px);
  cursor: grab;
}
.skillmap-wrap:active { cursor: grabbing; }

#skillmap-svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
}

#skillmap-svg text {
  font-family: var(--font-body);
  pointer-events: none;
}

.sm-node:hover circle:not([fill="none"]) {
  filter: brightness(1.25);
}

.sm-pulse .sm-ring {
  animation: sm-pulse 2.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes sm-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.12; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .sm-pulse .sm-ring { animation: none; }
}

/* Ребро «прорастает» к только что открытому навыку (ТЗ 05 §3) */
.sm-grow {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sm-grow 0.7s ease-out 0.1s forwards;
}

@keyframes sm-grow {
  to { stroke-dashoffset: 0; }
}

/* Вспышка узла при смене статуса */
.sm-flash {
  animation: sm-flash 0.8s ease-out 0.5s;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes sm-flash {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sm-grow { animation-duration: 0.01s; animation-delay: 0s; }
  .sm-flash { animation: none; }
}

.skillmap-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skillmap-btn {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(23, 28, 36, 0.92);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, transform 0.1s;
  display: flex; align-items: center; justify-content: center;
}
.skillmap-btn:hover { background: var(--surface-2); border-color: var(--accent-line); color: var(--accent); }
.skillmap-btn:active { transform: scale(0.94); }

.skillmap-hint {
  position: absolute;
  left: 14px; bottom: 14px;
  font-size: 11.5px; color: var(--text-faint);
  background: rgba(23, 28, 36, 0.85);
  backdrop-filter: blur(8px);
  padding: 7px 12px; border-radius: 10px;
  border: 1px solid var(--line);
  pointer-events: none;
  max-width: 60%;
}
@media (max-width: 900px) { .skillmap-hint { display: none; } }

.skillmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.skillmap-legend > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--surface-2);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

/* Карточка «Следующий шаг» — доминанта Главной */
.next-card {
  border: 1px solid rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.12), inset 0 0 40px rgba(139, 92, 246, 0.04);
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent-light);
  font-weight: 700;
  text-transform: uppercase;
}

.next-title {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 8px 0 14px;
}

.reason-box {
  background: rgba(139, 92, 246, 0.08);
  border-left: 3px solid var(--accent);
  padding: 11px 13px;
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #C6CFDA;
  margin-bottom: 14px;
}

.reason-box strong { color: var(--text); }

/* Онбординг */
.ob-option {
  background: var(--bg);
  border: 1px solid var(--surface-2);
  color: var(--text);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.ob-option:hover { border-color: var(--accent); background: rgba(139, 92, 246, 0.06); }

/* Toasts */
#toast-container {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  background: var(--surface-2);
  border: 1px solid var(--surface-hover);
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.2, 1.2, 0.4, 1);
  white-space: nowrap;
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast.xp { color: var(--accent-light); }
.toast.error { color: var(--danger); }

/* Быстрая фиксация воронки */
.funnel-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.funnel-quick-btn {
  background: var(--bg);
  border: 1px solid var(--surface-2);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}

.funnel-quick-btn:hover { border-color: var(--accent); }
.funnel-quick-btn:active { transform: scale(0.95); }

/* Дневник */
.diary-label {
  display: block;
  font-size: 11.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 12px 0 6px;
}

#diary-form textarea, #content-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 11px 12px;
  resize: vertical;
}

#diary-form textarea:focus, #content-form textarea:focus { outline: none; border-color: var(--accent); }

.diary-insight {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 10px;
  color: var(--text-dim);
}

/* Ежедневные задания */
.daily-task {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.daily-task:not(.done):hover { border-color: var(--accent); }

.daily-box {
  width: 22px;
  height: 22px;
  border: 2px solid var(--text-dim);
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: 0.2s;
}

.daily-task.done { cursor: default; }
.daily-task.done .daily-box { background: var(--success); border-color: var(--success); color: #062; }
.daily-task.done .daily-label { text-decoration: line-through; color: var(--text-dim); }

.daily-label { flex: 1; font-size: 14px; }
.daily-xp { font-size: 12px; font-weight: 700; color: var(--accent-light); }

/* Ачивки */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.ach {
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-radius: 12px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: default;
}

.ach small {
  font-size: 9.5px;
  color: var(--text-dim);
  text-align: center;
  padding: 0 4px;
  line-height: 1.2;
}

.ach.locked { opacity: 0.3; filter: grayscale(1); }

/* Воронка (визуализация) */
.fun-wrap { display: flex; flex-direction: column; align-items: center; }

.fun-stage { width: 100%; display: flex; justify-content: center; }

.fun-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  border-radius: 12px;
  padding: 13px 16px;
  color: #fff;
  transition: width 0.4s;
}

.fun-icon { font-size: 18px; }
.fun-count { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.fun-title { font-size: 13px; opacity: 0.92; }

.fun-conv {
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
  padding: 4px 0;
}

.fun-conv-empty { opacity: 0.4; }

/* Экран награды (ТЗ 05 §5.2) */
.reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(8, 10, 18, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
  padding: 20px;
}
.reward-overlay.show { opacity: 1; }

.reward-card {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 0 60px rgba(139, 92, 246, 0.35);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.reward-overlay.show .reward-card { transform: scale(1); }

.reward-confetti { font-size: 48px; margin-bottom: 8px; animation: reward-pop 0.5s ease; }
@keyframes reward-pop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }

.reward-title { font-family: var(--font-display); font-size: 22px; margin-bottom: 4px; }
.reward-sub { font-size: 14px; color: var(--text-dim); margin-bottom: 16px; }
.reward-xp { font-family: var(--font-display); font-size: 40px; color: var(--accent-light); margin-bottom: 16px; text-shadow: 0 0 30px rgba(199, 125, 255, 0.5); }
.reward-unlocks { margin-bottom: 16px; }
.reward-unlock, .reward-ach {
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13.5px;
}
.reward-unlock strong { color: var(--success); }
.reward-card .premium-btn { width: 100%; }
.reward-card .mission-btn { width: 100%; }

/* Дедлайн миссии */
.mission-deadline { font-size: 12px; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.mission-deadline.urgent { color: var(--warning); }

/* Детали миссии */
.mission-clickable { cursor: pointer; }

.mission-details {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: #C6CFDA;
}

/* Карточки материалов библиотеки */
.mat-card {
  display: flex;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.mat-card:hover { border-color: var(--accent); }

.mat-cover {
  width: 120px;
  height: 74px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.mat-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--surface-2);
}

.mat-body { flex: 1; min-width: 0; }
.mat-kind { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
.mat-title { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.mat-meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.mat-desc { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.45; }

.mat-seg {
  font-size: 12.5px;
  color: var(--accent-light);
  margin-top: 5px;
  cursor: pointer;
}

.mat-seg:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .mat-cover { width: 84px; height: 54px; }
}

/* Разборы переписок */
#artifact-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  padding: 11px 12px;
  resize: vertical;
}

#artifact-form textarea:focus { outline: none; border-color: var(--accent); }

.art-section { margin-bottom: 12px; font-size: 13.5px; }
.art-section strong { display: block; margin-bottom: 4px; font-size: 13px; }
.art-section p { color: #C6CFDA; line-height: 1.55; }

/* Фидбек-виджеты */
.fb-widget {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fb-btn {
  background: none;
  border: 1px solid var(--surface-2);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.fb-btn:hover { border-color: var(--accent); }

.fb-chip {
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text);
  padding: 4px 11px;
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  margin: 2px 2px 2px 0;
  transition: border-color 0.15s;
}

.fb-chip:hover { border-color: var(--accent); }

/* Auth */
body.auth-mode #sidebar { display: none; }

.auth-wrap {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#auth-form input, #profile-form input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 11px 12px;
}

#auth-form input:focus, #profile-form input:focus { outline: none; border-color: var(--accent); }

#challenge-form input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
}

#challenge-form input:focus { outline: none; border-color: var(--accent); }

/* Сообщество */
.post-fire.lit { color: var(--warning); }

#partner-form input[type="text"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
}

#partner-form input[type="text"]:focus { outline: none; border-color: var(--accent); }

/* Тренер: чат */
.coach-card {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  min-height: 420px;
}

.coach-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
}

.coach-msg {
  max-width: 78%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.coach-msg.me {
  align-self: flex-end;
  background: var(--surface-2);
  border-bottom-right-radius: 4px;
}

.coach-msg.ai {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-bottom-left-radius: 4px;
}

.coach-msg.typing { color: var(--text-dim); }

.coach-quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
}

.coach-input {
  display: flex;
  gap: 8px;
}

.coach-input input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 11px 14px;
}

.coach-input input:focus { outline: none; border-color: var(--accent); }

/* Кнопка +1 counter-миссий */
.plus-btn {
  font-weight: 700;
  font-size: 15px;
  border-color: var(--accent);
  color: var(--accent-light);
  min-width: 52px;
}

.plus-btn:active { transform: scale(0.92); }

/* Экран навыка */
.md-block { font-size: 14px; line-height: 1.6; color: #C6CFDA; }
.md-block h4 { font-family: var(--font-body); font-size: 14px; color: var(--text); margin: 12px 0 6px; }
.md-block p { margin-bottom: 8px; }
.md-block ul { margin: 6px 0 10px 18px; }
.md-block li { margin-bottom: 4px; }

.dep-chip {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s;
}

.dep-chip:hover { border-color: var(--accent); }

/* Details Panel */
.details-panel {
  background-color: var(--surface);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--surface-2);
  position: sticky;
  top: 32px;
}
.details-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.details-close {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-dim); font-size: 14px; cursor: pointer;
  font-family: var(--font-body);
}
.details-close:hover { color: var(--text); }

.details-title {
  font-size: 20px;
  font-family: var(--font-display);
  margin-bottom: 8px;
}
.details-tag {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--blue);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}
.details-level-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--blue);
}
.details-section {
  margin-bottom: 24px;
}
.details-section h4 {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 12px;
}
.details-list {
  list-style: none;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.details-list li {
  margin-bottom: 8px;
  padding-left: 16px;
  position: relative;
}
.details-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-dim);
}

/* ===== Арсенал и Программы (ТЗ 14 D1/D3) ===== */
.chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.active { background: var(--accent-soft); border-color: transparent; color: var(--accent-light); font-weight: 600; }

.input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--text-faint); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.input { resize: vertical; width: 100%; }

.btn-primary {
  background: var(--accent);
  border: none;
  border-radius: 11px;
  padding: 11px 20px;
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }
.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-2); }

/* Бейдж черновика (ТЗ 16 E1) */
.draft-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  color: #e0a93e;
  background: rgba(224,169,62,0.14);
  border: 1px solid rgba(224,169,62,0.3);
  border-radius: 5px;
  padding: 1px 6px;
  vertical-align: middle;
  margin-left: 6px;
}
/* Иконка редактирования на клиентских карточках (ТЗ 16 E1) */
.edit-pencil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1px solid var(--surface-2);
  background: rgba(139,92,246,0.12);
  color: var(--accent-light, #A78BFA);
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  flex-shrink: 0;
  transition: all 0.15s;
}
.edit-pencil:hover { background: var(--accent); transform: scale(1.05); }

/* Карточка «Действие дня» (ТЗ 16 E3) */
.practice-card .md-block { font-size: 14.5px; }
.practice-actions { border-top: 1px solid var(--surface-2); padding-top: 12px; }
.practice-done { transition: all 0.12s; }
.practice-done:hover { border-color: var(--accent); background: rgba(139,92,246,0.12); }

/* ===== Консолидированная навигация 12→5 (ТЗ 16 E4) ===== */
.nav-sep {
  height: 1px;
  background: var(--surface-2);
  margin: 14px 16px;
  opacity: 0.6;
}
.nav-item.nav-secondary { opacity: 0.62; }
.nav-item.nav-secondary:hover { opacity: 1; }
.nav-item.nav-secondary .nav-label { font-size: 13.5px; }

/* Под-вкладки секции — segmented control (язык прототипа) */
.section-tabs {
  display: flex;
  gap: 3px;
  margin: 0 0 24px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.section-tab {
  padding: 9px 20px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
}
.section-tab:hover { color: var(--text); }
.section-tab.active { color: var(--text); background: var(--surface-2); }

/* Eyebrow — акцентная надпись над заголовком карточки */
.eyebrow {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
/* Reason — акцентный блок «почему» с левой полосой */
.reason {
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  padding: 11px 13px; border-radius: 0 10px 10px 0;
  font-size: 13.5px; line-height: 1.5; color: #C6D4E4;
}
.reason b { color: var(--text); }

/* ===== Премиальные штрихи: прокрутка, выделение, фокус (минимализм) ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: 8px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--surface-hover); }
* { scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent; }
::selection { background: var(--accent-soft); color: var(--accent-light); }

/* Тонкая граница карточек-ссылок при наведении — премиальный отклик */
a.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

/* Детали-теги: мягче, воздушнее */
.details-tag {
  border-color: var(--border) !important;
}

/* ===== Аватары и публичный профиль ===== */
.avatar-circle {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--xp));
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex-shrink: 0;
  overflow: hidden; user-select: none;
}
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-clickable { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.avatar-clickable:hover { transform: scale(1.06); box-shadow: 0 0 0 3px var(--accent-soft); }

.avatar-xl {
  width: 92px; height: 92px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--xp));
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700; color: #fff;
  overflow: hidden; flex-shrink: 0;
  border: 2px solid var(--line);
}
.avatar-xl img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Модалка профиля */
.profile-modal-wrap { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.profile-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }
.profile-modal {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px;
  width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: pmIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pmIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.profile-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-dim); font-size: 15px; cursor: pointer;
}
.profile-modal-close:hover { color: var(--text); }
.profile-hero { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; padding-right: 34px; }
.profile-sub { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin: 0 0 10px; font-family: var(--font-body); font-weight: 600; }
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.profile-stat {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 8px; text-align: center;
}
.profile-stat b { display: block; font-size: 20px; font-weight: 700; margin-bottom: 3px; }
.profile-stat span { font-size: 10.5px; color: var(--text-dim); line-height: 1.3; display: block; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px 8px 10px;
}
.pb-icon { font-size: 17px; }
.pb-title { font-size: 12.5px; font-weight: 500; }
@media (max-width: 560px) {
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .profile-hero { flex-direction: column; text-align: center; padding-right: 0; }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   Принципы: одна колонка, ничего не уезжает вбок, тач-цели ≥44px,
   тяжёлые панели → нижние шторки, безопасные зоны iPhone.
   ============================================================ */

@media (max-width: 900px) {
  :root { --gutter: 16px; }

  /* Элементы, которым не место на маленьком экране (поиск, колокольчик, XP-бар) */
  .hide-mobile { display: none !important; }

  /* --- Оболочка и таб-бар --- */
  #sidebar {
    height: var(--tabbar-total);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #main-content { padding-bottom: 0; }
  #app { padding: 14px var(--gutter) calc(var(--tabbar-total) + 20px); }

  /* Лента, уезжающая под края экрана: отступы внутри, отрицательный margin наружу */
  .edge-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  .edge-scroll::-webkit-scrollbar { display: none; }
  .edge-scroll > * { flex-shrink: 0; }

  /* Блок, растянутый до краёв экрана (карта, чат) */
  .edge-bleed {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .nav-item { min-height: 48px; }        /* тач-цель */
  .nav-item:hover { background: none; }  /* на тач-экране ховер «залипает» */
  .nav-item.active .nav-label { color: var(--accent); font-weight: 600; }

  /* --- Шапка экрана: заголовок + аватар, всё лишнее скрыто --- */
  .screen-header {
    margin-bottom: 18px;
    gap: 12px;
    min-width: 0;
  }
  .screen-header > div:first-child { min-width: 0; flex: 1; }
  .screen-header h1 {
    font-size: 23px;
    letter-spacing: -0.4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .header-actions { gap: 10px; flex-shrink: 0; }
  .user-profile { padding: 3px; border-radius: 50%; }
  .user-avatar { width: 38px; height: 38px; }

  /* --- Ленты вкладок и чипов: горизонтальный свайп до края экрана --- */
  .skill-tabs {
    gap: 8px;
    border-bottom: none;
    padding: 0 var(--gutter) 2px;
    margin: 0 calc(var(--gutter) * -1) 18px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .skill-tabs::-webkit-scrollbar { display: none; }
  .skill-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 13px;
  }
  .skill-tab.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: transparent;
    border-bottom: 1px solid transparent; /* сбрасываем десктопное подчёркивание */
    padding-bottom: 9px;
    margin-bottom: 0;
    font-weight: 600;
  }

  .section-tabs {
    width: auto;
    margin: 0 calc(var(--gutter) * -1) 18px;
    padding: 4px var(--gutter);
    border-radius: 0;
    border-left: none; border-right: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .section-tabs::-webkit-scrollbar { display: none; }
  .section-tab { padding: 10px 16px; }

  .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 var(--gutter);
    margin: 0 calc(var(--gutter) * -1);
    -webkit-overflow-scrolling: touch;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-row > * { flex-shrink: 0; }

  /* --- Тач-цели: минимум 44px по высоте --- */
  .chip, .btn-secondary, .funnel-quick-btn, .mission-btn, .ob-option, .dep-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-primary, .premium-btn { min-height: 48px; }
  .icon-btn { width: 44px; height: 44px; }
  .fb-btn { min-height: 36px; padding: 6px 12px; }
  .fb-chip { min-height: 34px; padding: 6px 13px; }
  .edit-pencil { width: 40px; height: 40px; }
  .details-close { width: 40px; height: 40px; }
  /* min-*, а не width/height: у части чекбоксов инлайновый width:auto перебил бы правило */
  input[type="checkbox"], input[type="radio"] {
    min-width: 22px; min-height: 22px; flex-shrink: 0;
    accent-color: var(--accent);
  }
  /* Ссылка-строка внутри карточки — увеличиваем зону нажатия */
  .card a[href^="#/"] { min-height: 40px; }

  /* --- Формы: 16px гасит принудительный зум iOS при фокусе --- */
  input, select, textarea,
  .input,
  #auth-form input, #profile-form input, #challenge-form input,
  #partner-form input[type="text"], .coach-input input,
  #diary-form textarea, #content-form textarea, #artifact-form textarea {
    font-size: 16px;
  }
  .input, #auth-form input, #profile-form input { padding: 13px 14px; }

  /* Ползунки Модели 100: под палец, а не под курсор */
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    background: transparent;
    touch-action: pan-y; /* вертикальный скролл страницы не блокируем */
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px; background: var(--surface-2);
  }
  input[type="range"]::-moz-range-track {
    height: 6px; border-radius: 3px; background: var(--surface-2);
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px; height: 28px; margin-top: -11px;
    border-radius: 50%; background: var(--accent);
    border: 3px solid var(--bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  input[type="range"]::-moz-range-thumb {
    width: 28px; height: 28px;
    border-radius: 50%; background: var(--accent);
    border: 3px solid var(--bg);
  }
  /* формы в одну колонку */
  #auth-form, #profile-form, #partner-form, #challenge-form { width: 100%; }
  .auth-wrap { min-height: auto; padding: 8px 0 0; align-items: flex-start; }

  /* --- Карточки: чуть плотнее, крупнее радиус --- */
  .card { padding: 16px 16px; border-radius: 16px; }
  .card-header { margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
  .dashboard-grid, .dashboard-col { gap: 14px; }

  /* Прогресс-блок: круг под текст, а не рядом */
  .progress-section { flex-direction: column; align-items: flex-start; gap: 16px; }
  .progress-section .progress-circle { align-self: center; }
  .level-info h2 { font-size: 34px; }

  /* Миссии: мета уходит на вторую строку, а не растягивает карточку */
  .mission-item { flex-wrap: wrap; padding: 14px; gap: 12px; }
  .mission-content { flex: 1 1 100%; order: 1; }
  .mission-icon { order: 0; width: 42px; height: 42px; font-size: 20px; }
  .mission-meta { order: 2; width: 100%; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
  .mission-progress { width: auto; flex: 1; min-width: 90px; }
  .mission-reward { width: auto; }

  /* Ачивки: 4 в ряд слишком мелко для пальца */
  .ach-grid { grid-template-columns: repeat(3, 1fr); }
  .ach small { font-size: 10px; }

  /* Материалы библиотеки */
  .mat-card { padding: 10px; }

  /* Воронка */
  .fun-bar { min-width: 0; width: 100%; padding: 12px 14px; }
  .funnel-values { gap: 14px; }

  /* --- Карта навыков: экран целиком, крупные кнопки --- */
  .skillmap-wrap {
    height: calc(100dvh - var(--tabbar-total) - 175px);
    min-height: 380px;
    margin: 0 calc(var(--gutter) * -1);
    border-radius: 0;
    border-left: none; border-right: none;
    touch-action: none; /* жесты карты не должны прокручивать страницу */
  }
  .skillmap-controls { right: 12px; bottom: 12px; gap: 8px; }
  .skillmap-btn { width: 52px; height: 52px; border-radius: 15px; font-size: 24px; }
  /* Легенда — одна строка со свайпом, чтобы не съедать высоту карты */
  .skillmap-legend {
    gap: 14px;
    font-size: 11.5px;
    margin-top: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 var(--gutter);
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  .skillmap-legend::-webkit-scrollbar { display: none; }
  .skillmap-legend > div { flex-shrink: 0; white-space: nowrap; }
  .legend-edge { display: none; } /* тип связи на телефоне не читается — прячем */

  /* Детали навыка → нижняя шторка поверх карты */
  .skill-map-layout { gap: 0; }
  .skill-map-sidebar.has-node {
    position: fixed;
    left: 0; right: 0; bottom: var(--tabbar-total);
    z-index: 120;
    max-height: 62dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.5);
    animation: sheetUp 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .skill-map-sidebar.has-node .details-panel {
    position: static;
    background: none;
    border: none;
    border-radius: 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .details-header { margin-bottom: 16px; gap: 12px; }
  .details-section { margin-bottom: 16px; }
  .details-panel { position: static; }

  /* --- Тренер: чат во весь экран, поле ввода прижато вниз --- */
  .coach-card {
    height: calc(100dvh - var(--tabbar-total) - 96px);
    min-height: 0;
    margin: 0 calc(var(--gutter) * -1);
    border-radius: 0;
    border-left: none; border-right: none;
    padding: 14px var(--gutter);
  }
  .coach-msg { max-width: 86%; font-size: 15px; }
  .coach-quick {
    gap: 8px;
    padding: 8px var(--gutter);
    margin: 0 calc(var(--gutter) * -1);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .coach-quick::-webkit-scrollbar { display: none; }
  .coach-quick > * { flex-shrink: 0; }
  .coach-input input { padding: 13px 14px; }
  .coach-input .premium-btn { min-width: 52px; }

  /* --- Модалки → нижние шторки --- */
  .profile-modal-wrap { padding: 0; align-items: flex-end; }
  .profile-modal {
    max-width: none;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    border-bottom: none;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    animation: sheetUp 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .profile-modal-close { width: 40px; height: 40px; }

  .reward-overlay { padding: 0; align-items: flex-end; }
  .reward-card {
    max-width: none;
    border-radius: 22px 22px 0 0;
    padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  }

  /* Шторка «Ещё»: тач-цели */
  .sheet-item { padding: 16px 8px; min-height: 52px; }

  /* Тосты не должны вылезать за экран */
  #toast-container { top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; transform: none; }
  .toast { white-space: normal; text-align: center; max-width: 100%; }
}

/* Очень узкие экраны (iPhone SE и подобные) */
@media (max-width: 380px) {
  :root { --gutter: 12px; }
  .screen-header h1 { font-size: 21px; }
  .ach-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-item .nav-label { font-size: 9.5px; }
}

/* Телефон в альбомной ориентации: экран низкий — экономим вертикаль */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .screen-header { margin-bottom: 12px; }
  .skillmap-wrap { height: calc(100dvh - var(--tabbar-total) - 90px); }
  .coach-card { height: calc(100dvh - var(--tabbar-total) - 70px); }
  .skillmap-legend { display: none; }
}

/* Тач-устройства: ховер-эффекты только там, где есть мышь */
@media (hover: none) {
  .card:hover { border-color: var(--border); }
  .chip:hover, .btn-secondary:hover, .mat-card:hover,
  .daily-task:not(.done):hover, .ob-option:hover { border-color: inherit; }
  .avatar-clickable:hover { transform: none; box-shadow: none; }
  .chip:active, .btn-secondary:active, .skillmap-btn:active { transform: scale(0.96); }
}

/* Звёздочка избранного (ТЗ 18) */
.fav-star {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.1s;
}
.fav-star:hover { color: var(--warning); }
.fav-star.on { color: var(--warning); }
.fav-star:active { transform: scale(0.88); }
@media (max-width: 900px) {
  .fav-star { min-width: 44px; min-height: 44px; font-size: 24px; }
}

/* ===== Карта активности и секундомер (ТЗ 19) ===== */
.heat-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.heat-scroll::-webkit-scrollbar { display: none; }

.heat-months {
  display: flex;
  gap: 3px;
  margin-bottom: 4px;
  min-width: min-content;
}
.heat-month {
  width: 13px;
  flex-shrink: 0;
  font-size: 9.5px;
  color: var(--text-faint);
  white-space: nowrap;
}

.heat-grid {
  display: flex;
  gap: 3px;
  min-width: min-content;
}
.heat-week { display: flex; flex-direction: column; gap: 3px; }

.heat-cell {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-block;
}
.heat-empty { background: none; }
/* Не заходил / только заходил / действия по нарастающей */
.heat-l0 { background: var(--surface-2); }
.heat-l1 { background: #3A4658; }
.heat-l2 { background: rgba(78, 154, 241, 0.42); }
.heat-l3 { background: rgba(78, 154, 241, 0.72); }
.heat-l4 { background: var(--accent); }

.heat-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.timer-card { border-color: var(--accent-line); }
.timer-live {
  display: flex;
  gap: 10px;
  text-align: center;
}
.timer-live > div { flex: 1; }
.timer-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.timer-lap { color: var(--accent); }
.timer-label {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .heat-scroll { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; }
  .timer-value { font-size: 23px; }
}