@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* Тёмная тема в духе VS Code: нейтральные серые вместо сине-фиолетовых.
   Меняются только цвета — разметка, размеры и акценты (синий, зелёный,
   красный, оранжевый) остаются прежними. */
:root {
  --bg-base: #1f1f1f;      /* сайдбар и шапка */
  --bg-card: #252526;      /* карточки и панели */
  --bg-card2: #2d2d30;     /* вложенные блоки поверх карточки */
  --bg-deep: #181818;      /* полотно страницы */
  --border: #303031;
  --border-strong: #3f3f42;
  --border-subtle: #2a2a2b;
  --text-muted: #6b6b6b;
  --text-dim: #808080;
  --text-secondary: #9d9d9d;
  --text-primary: #d4d4d4;
  --accent: #3a7bfa;
  --accent2: #6a4bff;
  --good: #1dcb79;
  --bad: #f0524f;
  --warn: #f5a623;
}
[data-theme="light"] {
  --bg-base: #eef1f8;
  --bg-card: #ffffff;
  --bg-card2: #f7f9ff;
  --bg-deep: #f0f3fb;
  --border: #dde4f2;
  --border-strong: #c9d3e8;
  --border-subtle: #e8edf8;
  --text-muted: #b0bdd4;
  --text-dim: #6b7fa0;
  --text-secondary: #506180;
  --text-primary: #0d1426;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

* { box-sizing: border-box; }
html, body {
  font-family: 'Manrope', -apple-system, sans-serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  margin: 0;
  height: 100%;
}
body.no-scroll { overflow: hidden; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
input, textarea, select, button { font-family: 'Manrope', sans-serif; }
a { color: inherit; text-decoration: none; }

.fade-in { animation: fadeIn 0.3s ease; }

/* ---- App shell ---- */
.app-shell { display: flex; height: 100vh; overflow: hidden; background: var(--bg-deep); }

.sidebar {
  width: 220px; flex-shrink: 0; background: var(--bg-base); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden; transition: width 0.2s;
}
.sidebar-header { padding: 18px 16px 14px; border-bottom: 1px solid var(--border); }
.sidebar-logo-wrap { display: flex; align-items: center; gap: 10px; }
.sidebar-logo-icon {
  width: 36px; height: 36px; background: rgba(58,123,250,0.12); border: 1px solid rgba(58,123,250,0.25);
  border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-brand { font-size: 14px; font-weight: 800; letter-spacing: -0.3px; white-space: nowrap; }
.sidebar-tag { font-size: 12px; color: var(--text-secondary); font-weight: 500; margin-top: 1px; white-space: nowrap; }
.sidebar-nav { flex: 1; padding: 10px 10px; overflow-y: auto; overflow-x: hidden; }
.nav-section-label { font-size: 9.5px; color: var(--text-muted); font-weight: 700; letter-spacing: 0.9px; padding: 0 8px; margin: 14px 0 6px; text-transform: uppercase; white-space: nowrap; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  color: var(--text-secondary); font-size: 13px; font-weight: 600; margin-bottom: 2px; position: relative;
  white-space: nowrap; overflow: hidden;
}
.nav-item:hover { background: rgba(58,123,250,0.06); }
.nav-item.active { background: rgba(58,123,250,0.12); color: var(--accent); }
.nav-badge { margin-left: auto; display: flex; align-items: center; flex-shrink: 0; }
.sidebar-footer { padding: 12px 14px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-muted); text-align: center; white-space: nowrap; }

.icon-btn.mobile-nav-btn { display: none; }

.mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 400; }
.mobile-nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 250px; max-width: 78vw; background: var(--bg-base);
  z-index: 401; display: flex; flex-direction: column; box-shadow: 8px 0 32px rgba(0,0,0,0.4);
}

.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 28px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.icon-btn {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary);
}
.content-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.content-pad { padding: 26px 30px; }

/* ---- buttons ---- */
.btn { border: none; border-radius: 9px; padding: 11px 20px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: Manrope, sans-serif; display: inline-flex; align-items: center; gap: 7px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-card); }
.btn-card { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); }
.btn-soft-blue { background: rgba(58,123,250,0.1); border: 1px solid rgba(58,123,250,0.25); color: var(--accent); }
.btn-soft-green { background: rgba(29,203,121,0.1); border: 1px solid rgba(29,203,121,0.25); color: var(--good); }
.btn-gradient { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.btn-gradient-gb { background: linear-gradient(135deg, var(--accent), var(--good)); color: #fff; }
.btn-sm { padding: 6px 13px; font-size: 12px; border-radius: 7px; }

/* ---- cards / tables ---- */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }
table.dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dtable th { padding: 10px 14px; color: var(--text-secondary); font-weight: 600; text-align: left; white-space: nowrap; background: var(--bg-deep); border-bottom: 1px solid var(--border); }
table.dtable td { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.tag-chip { font-size: 11px; background: rgba(58,123,250,0.08); color: var(--accent); padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(58,123,250,0.18); font-weight: 700; }
.pill { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 700; }
.pill-green { background: rgba(29,203,121,0.1); color: var(--good); }
.pill-blue { background: rgba(58,123,250,0.1); color: var(--accent); }
.pill-red { background: rgba(240,82,79,0.1); color: var(--bad); }

/* ---- чат ментора ----
   Ответ модели приходит markdown'ом и рисуется тегами: задаём им вид внутри
   пузыря, иначе списки и заголовки ломают верстку сообщения. */
.chat-bubble > *:first-child { margin-top: 0; }
.chat-bubble > *:last-child { margin-bottom: 0; }
.chat-bubble p { margin: 0 0 9px; }
.chat-bubble ul, .chat-bubble ol { margin: 0 0 9px; padding-left: 20px; }
.chat-bubble li { margin-bottom: 4px; }
.chat-bubble h3, .chat-bubble h4, .chat-bubble h5, .chat-bubble h6 { font-size: 13.5px; margin: 10px 0 6px; }
.chat-bubble code { background: rgba(127,127,127,0.16); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.chat-bubble a { color: var(--accent); text-decoration: underline; }
/* Меню диалога показывается по наведению — как в списке чатов у claude.ai. */
.chat-row-menu { opacity: 0; transition: opacity .15s ease; }
.chat-row:hover .chat-row-menu, .chat-row:focus-within .chat-row-menu { opacity: 1; }
.chat-menu-item { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 8px 12px; border-radius: 7px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; font-family: Manrope, sans-serif; }
.chat-menu-item:hover { background: var(--bg-deep); }

/* ---- полоса прогресса ИИ-разбора ----
   Общая для всех кнопок ИИ: рекомендации, разбор сделки, аудит стратегии,
   оценка навыков и портрет трейдера. Бегущая заливка говорит «работа идёт»
   даже когда процент стоит: модель отвечает не равномерно. */
.ai-job { margin: 12px 0; }
.ai-job-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; gap: 10px; }
.ai-job-label { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.ai-job-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ai-job-track { height: 8px; background: var(--bg-deep); border-radius: 6px; overflow: hidden; }
.ai-job-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 7px; line-height: 1.5; }
.ai-job-error { margin: 12px 0; padding: 11px 14px; border-radius: 10px; background: rgba(240,82,79,0.1); border: 1px solid rgba(240,82,79,0.3); font-size: 12.5px; color: var(--bad); }
.job-bar {
  background: linear-gradient(90deg, #3a7bfa, #6a4bff, #3a7bfa);
  background-size: 200% 100%;
  animation: job-flow 1.6s linear infinite;
  transition: width .5s ease;
}
@keyframes job-flow { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* ---- лента активности ----
   Список прокручивается внутри карточки: история глубокая (до 500 событий по
   50 на страницу), и растягивать ею всю главную нельзя — соседние карточки
   тогда уезжают за экран. */
.activity-scroll { flex: 1; min-height: 0; max-height: 420px; overflow-y: auto; padding-right: 6px; }
.activity-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border-subtle); }
.activity-pager-off { opacity: 0.4; cursor: default; }

/* ---- forms ---- */
.field-label { font-size: 12px; color: var(--text-secondary); font-weight: 700; margin-bottom: 7px; letter-spacing: 0.3px; }
.input, textarea.input, select.input {
  width: 100%; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 11px;
  padding: 12px 15px; color: var(--text-primary); font-size: 14px; outline: none; font-family: Manrope, sans-serif;
}
.input:focus { border-color: var(--accent); }

/* ---- tabs ---- */
.tabbar { display: flex; gap: 2px; background: var(--bg-deep); border-radius: 10px; padding: 3px; width: fit-content; }
.tabbar-item { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--text-secondary); cursor: pointer; border: none; background: transparent; font-family: Manrope, sans-serif; }
.tabbar-item.active { background: var(--accent); color: #fff; }
.tabbar-underline { display: flex; gap: 0; border-bottom: none; }
.tabbar-underline .tabbar-item { border-radius: 0; padding: 10px 18px; border-bottom: 2px solid transparent; }
.tabbar-underline .tabbar-item.active { background: transparent; color: var(--accent); border-bottom-color: var(--accent); }

/* ---- kanban ---- */
.kanban-col { background: var(--bg-deep); border-radius: 14px; display: flex; flex-direction: column; min-width: 280px; align-self: start; }
.kanban-col-header { padding: 12px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 800; }
.kanban-badge { margin-left: auto; background: var(--bg-card); border-radius: 20px; padding: 1px 9px; font-size: 11px; color: var(--text-secondary); font-weight: 700; }
/* Колонка растёт под содержимое, прокручивается страница. Раньше высота была
   фиксированной, и одиннадцать карточек сжимались в полоски вместо прокрутки. */
.kanban-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
/* Карточка не сжимается: текст важнее того, чтобы колонка влезла в экран. */
.kanban-card { flex: 0 0 auto; position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.kanban-card:hover { border-color: rgba(58,123,250,0.45); transform: translateY(-1px); }
.kanban-card.dragging { opacity: 0.5; }
.kanban-body.drop-target { background: rgba(58,123,250,0.08); border-radius: 12px; outline: 1px dashed rgba(58,123,250,0.45); }
.kanban-card-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 10px 0 0 10px; }
/* Текст карточки не обрезается по высоте: заголовок переносится целиком,
   описание — до трёх строк. Раньше блок был фиксированной высоты, и заголовки
   налезали друг на друга. */
.kanban-card-body { padding: 12px 12px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.kanban-card-title { font-size: 11.5px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.kanban-card-desc { font-size: 10.5px; color: var(--text-secondary); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kanban-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ---- wizard / onboarding ---- */
.wizard-shell { height: 100vh; background: var(--bg-deep); display: flex; flex-direction: column; overflow: hidden; }
.wizard-header { padding: 20px 32px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.wizard-body { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; padding: 52px 24px; overflow-y: auto; }
.wizard-inner { width: 100%; max-width: 680px; }
.step-dot { width: 22px; height: 4px; border-radius: 2px; background: var(--border); }
.step-dot.active { background: var(--accent); width: 28px; }
.step-dot.done { background: var(--good); }

.toggle-switch { width: 36px; height: 20px; border-radius: 12px; background: var(--border); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.15s; }
.toggle-switch.on { background: var(--accent); }
.toggle-knob { width: 16px; height: 16px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: left 0.15s; }
.toggle-switch.on .toggle-knob { left: 18px; }

.checkbox-sq { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--border); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.checkbox-sq.checked { background: var(--accent); border-color: var(--accent); }
/* Галочка внутри рисуется всегда — прячем её, пока квадрат не отмечен. Белый
   крыжик на тёмном фоне читался как «отмечено», и пустой список выглядел
   выбранным целиком. */
.checkbox-sq > svg { visibility: hidden; }
.checkbox-sq.checked > svg { visibility: visible; }
.checkbox-circle { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.checkbox-circle.checked { background: var(--accent); border-color: var(--accent); }

.dropdown-panel { position: absolute; top: calc(100% + 6px); left: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 8px; min-width: 260px; z-index: 100; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 300; display: flex; align-items: center; justify-content: center; }
.modal-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); }

.ai-mode-toggle { display: flex; align-items: center; gap: 7px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.ai-mode-toggle span { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }

.hidden { display: none !important; }

/* ---- Мастер: выбор шаблона и живой макет столбцов ---- */
.tmpl-card { padding: 14px; display: flex; align-items: center; gap: 11px; cursor: pointer; position: relative; transition: border-color 0.15s, background 0.15s; }
.tmpl-card:hover { border-color: var(--border-strong); }
.tmpl-card.selected { border-color: var(--accent); background: rgba(58,123,250,0.06); }
.tmpl-custom { border-style: dashed; border-color: rgba(29,203,121,0.35); }
.tmpl-custom.selected { border-style: solid; border-color: var(--good); background: rgba(29,203,121,0.06); }
.tmpl-icon { width: 34px; height: 34px; background: rgba(58,123,250,0.08); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.tmpl-mark { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.draft-table { border-collapse: collapse; width: 100%; min-width: 100%; }
.draft-table th { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-subtle); font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: top; }
.draft-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); font-size: 12.5px; }
.draft-table th:last-child, .draft-table td:last-child { border-right: none; }
.draft-type { font-size: 10px; color: var(--text-muted); font-weight: 500; margin-top: 3px; }
.draft-empty { color: var(--text-muted); }
.draft-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.draft-lock { color: var(--text-muted); display: inline-flex; }
.draft-remove { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; display: inline-flex; border-radius: 4px; }
.draft-remove:hover { color: var(--bad); background: rgba(240,82,79,0.12); }
.draft-add { display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }

/* Свёрнутый блок замечаний: `<details>` работает без JS, по умолчанию закрыт.
   Замечаний по файлу бывает полтора десятка — развёрнутыми они заслоняют форму. */
.notes-box { background: rgba(245,166,35,0.07); border: 1px solid rgba(245,166,35,0.3); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.notes-box > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; list-style: none; }
.notes-box > summary::-webkit-details-marker { display: none; }
/* Треугольник рисуем сами — родной маркер в разных браузерах выглядит по-разному. */
.notes-box > summary::after { content: '▾'; margin-left: auto; color: var(--warn); font-size: 12px; transition: transform 0.15s; }
.notes-box[open] > summary::after { transform: rotate(180deg); }
.notes-count { font-size: 11px; font-weight: 700; color: var(--warn); background: rgba(245,166,35,0.14); border-radius: 20px; padding: 1px 8px; }

/* Строка уведомления — кнопка формы, но выглядит как строка списка. */
.notif-row { display: flex; gap: 10px; width: 100%; padding: 10px 8px; border: none; border-bottom: 1px solid var(--border-subtle); background: transparent; color: inherit; cursor: pointer; text-align: left; font-family: inherit; }
.notif-row:hover { background: var(--bg-deep); }

/* ---- Личный кабинет: переключатели, чипы, калькулятор ---- */
/* Тумблер — настоящий чекбокс: форма уходит на сервер и без JS, а вид берётся
   у той же .toggle-switch, что рисуется в остальной оболочке. */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.switch-row:last-of-type { border-bottom: none; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row input:checked + .toggle-switch { background: var(--accent); }
.switch-row input:checked + .toggle-switch .toggle-knob { left: 18px; }

.chip-check { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-deep); font-size: 12.5px; cursor: pointer; position: relative; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check:has(input:checked) { border-color: var(--accent); background: rgba(58,123,250,0.12); color: var(--accent); font-weight: 700; }

.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 16px; }
.calc-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; background: var(--bg-deep); }
.calc-row-off { opacity: 0.55; }

/* ---- Календарь: шапка, сводка, рутина, сетка дней ---- */
.cal-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.cal-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cal-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cal-stat { padding: 15px 16px; }
.cal-stat-label { font-size: 11px; color: var(--text-secondary); font-weight: 600; margin-bottom: 6px; }
.cal-stat-value { font-size: 22px; font-weight: 800; display: flex; align-items: baseline; gap: 8px; }
.cal-stat-note { font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* Двухколоночный разворот с перетаскиваемой границей. Ширина левой колонки
   живёт в переменной --split: её ставит JS, а без JS работает значение по
   умолчанию. Ниже 900px колонки встают друг под друга, ручка прячется. */
.split-pane { display: grid; grid-template-columns: var(--split, 320px) 16px minmax(0, 1fr); align-items: start; }
.split-handle { align-self: stretch; cursor: col-resize; display: flex; align-items: center; justify-content: center; touch-action: none; }
.split-handle::before { content: ''; width: 3px; height: 46px; border-radius: 3px; background: var(--border-strong); transition: background 0.15s, height 0.15s; }
.split-handle:hover::before, .split-handle.dragging::before { background: var(--accent); height: 84px; }
.split-main { min-width: 0; }
body.split-dragging { user-select: none; cursor: col-resize; }

.routine-card { padding: 16px 16px 14px; }
.routine-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.routine-count { font-size: 11.5px; font-weight: 800; color: var(--text-secondary); background: var(--bg-deep); border-radius: 20px; padding: 3px 9px; white-space: nowrap; }
.routine-progress { height: 5px; border-radius: 3px; background: var(--bg-deep); overflow: hidden; margin-bottom: 6px; }
.routine-progress > i { display: block; height: 100%; background: var(--good); border-radius: 3px; transition: width 0.25s; }
.routine-list { display: flex; flex-direction: column; }
.routine-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 6px; border-radius: 9px; border-bottom: 1px solid var(--border-subtle); }
.routine-item:last-child { border-bottom: none; }
.routine-item:hover { background: var(--bg-deep); }
.routine-text { font-size: 12.5px; line-height: 1.5; word-break: break-word; }
.routine-item.done .routine-text { color: var(--text-dim); text-decoration: line-through; }
.routine-subs { margin-top: 7px; display: flex; flex-direction: column; gap: 5px; }
.routine-sub { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--bg-deep); border-radius: 7px; padding: 5px 9px; font-size: 11.5px; color: var(--text-secondary); }
.routine-item:hover .routine-sub { background: var(--bg-card2); }
.routine-tag { font-size: 10px; color: var(--accent); font-weight: 700; background: rgba(58,123,250,0.12); padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
/* Крестик появляется на наведении, но остаётся доступным с клавиатуры. */
.routine-del { opacity: 0; transition: opacity 0.15s; }
.routine-item:hover .routine-del, .routine-del:focus-within { opacity: 1; }
.routine-add { display: flex; gap: 7px; margin-top: 12px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-weekdays { margin-bottom: 4px; }
.cal-weekdays > div { text-align: center; padding: 6px 0; font-size: 11px; color: var(--text-muted); font-weight: 700; }
.cal-cell { min-height: 78px; padding: 7px 8px; border-radius: 10px; border: 1px solid transparent; display: flex; flex-direction: column; gap: 2px; transition: border-color 0.15s, transform 0.15s; }
.cal-cell:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.cal-cell.empty { border: none; }
.cal-cell.flat { background: var(--bg-deep); }
.cal-cell.win { background: rgba(29,203,121,0.10); border-color: rgba(29,203,121,0.20); }
.cal-cell.loss { background: rgba(240,82,79,0.10); border-color: rgba(240,82,79,0.20); }
.cal-cell.weekend { opacity: 0.72; }
.cal-cell.today .cal-cell-day { color: var(--accent); font-weight: 800; }
.cal-cell.today { box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cell.selected { border: 2px solid var(--accent); background: rgba(58,123,250,0.14); }
.cal-cell-day { font-size: 12px; color: var(--text-secondary); }
.cal-cell-pnl { font-size: 12px; font-weight: 800; }
.cal-cell-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; font-size: 10px; color: var(--text-muted); }
.cal-cell-foot span:last-child { font-size: 13px; }

.cal-row { display: grid; grid-template-columns: 1.4fr 90px 90px 110px 60px; gap: 8px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); min-width: 520px; }
.cal-row-head { background: var(--bg-deep); border-bottom: 1px solid var(--border); }
.cal-row-head > div { font-size: 10px; color: var(--text-muted); font-weight: 700; }
a.cal-row:hover { background: var(--bg-deep); }
.cal-row.weekend { background: var(--bg-deep); opacity: 0.6; }

.cal-modal-label { font-size: 11px; color: var(--text-muted); font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; margin-bottom: 9px; }
.cal-day-row { display: grid; grid-template-columns: 1fr 80px 70px 90px; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.cal-day-row:last-child { border-bottom: none; }
.cal-day-head > div { font-size: 10px; color: var(--text-muted); font-weight: 700; }
.cal-emotion { padding: 10px 8px; text-align: center; cursor: pointer; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary); }
.cal-emotion:hover { border-color: var(--border-strong); }
.cal-emotion.active { background: rgba(58,123,250,0.15); border-color: var(--accent); }

@media (max-width: 899px) {
  .split-pane { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .split-handle { display: none; }
  .cal-cell { min-height: 62px; }
  .cal-controls { justify-content: flex-start; }
}

/* ---- Responsive sidebar: desktop (>=1024) full, tablet (640-1023) icon-only, mobile (<640) hidden+drawer ---- */
@media (max-width: 1023px) and (min-width: 640px) {
  .sidebar { width: 76px; }
  .sidebar-logo-wrap { justify-content: center; }
  .sidebar-logo-wrap > div:not(.sidebar-logo-icon) { display: none; }
  .nav-section-label { display: none; }
  .sidebar .nav-item { justify-content: center; padding: 9px 4px; gap: 0; }
  .sidebar .nav-item span { display: none; }
  .sidebar .nav-badge { display: none; }
  .sidebar-footer { display: none; }
}

@media (max-width: 639px) {
  .sidebar { display: none; }
  .content-pad { padding: 18px 16px; }
  .icon-btn.mobile-nav-btn { display: flex; }
  .ai-mode-toggle { display: none; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-right { gap: 6px; }
  .profile-name-block { display: none; }
}

/* ---- Рынки: виджеты TradingView ----------------------------------------
   Виджет сам решает, какого он размера, поэтому высоту задаёт контейнер, а
   ширину он берёт от него же. Раскладка живёт классами, а не инлайн-стилями:
   инлайн медиазапросом не переопределить. */
.markets-split {
  display: grid;
  /* minmax(0, 1fr) обязателен: без него колонка не даёт себя сжать (по
     умолчанию min-width: auto), и виджет со своим содержимым распирает сетку
     за пределы экрана — появляется горизонтальная прокрутка страницы. */
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.tv-widget {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-deep);
}
.tv-chart  { height: 560px; }
.tv-news   { height: 560px; }
.tv-events { height: 620px; }

/* Виджет не загрузился — площадь не должна оставаться пустой дырой без
   объяснения. Подпись лежит под виджетом и закрывается им, когда он приедет. */
.tv-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.tv-widget .tradingview-widget-container { position: relative; z-index: 1; height: 100%; }

@media (max-width: 1023px) {
  .markets-split { grid-template-columns: minmax(0, 1fr); }
  .tv-news { height: 420px; }
}
@media (max-width: 639px) {
  .tv-chart  { height: 380px; }
  .tv-news   { height: 380px; }
  .tv-events { height: 560px; }
}