/* ============================================================================
   TearCraft Admin — дизайн-система Claude (claude.com / DESIGN.md).
   Кремовая канва #faf9f5, чернила #141413, коралл #cc785c как единственный
   главный акцент, hairline-рамки #e6dfd8 вместо теней («color-block first,
   shadow rare»). Заголовки — серифный дисплей (Cormorant Garamond ≈
   Copernicus), текст/UI — Inter (≈ StyreneB), числа и код — JetBrains Mono.
   Вторичные акценты: teal #5db8a6 и amber #e8a55a. Никаких холодных синих.
   ========================================================================== */

:root {
  --bg: #faf9f5;               /* canvas */
  --bg-elev: #faf9f5;          /* карточки = канва + hairline, не белый */
  --bg-elev-2: #f5f0e8;        /* surface-soft: шапки таблиц, подложки */
  --surface-card: #efe9de;     /* surface-card: активные табы, акцентные блоки */
  --surface-hover: #f5f0e8;
  --border: #e6dfd8;           /* hairline */
  --border-soft: #ebe6df;
  --border-strong: #d9d0bf;
  --fg: #141413;               /* ink */
  --fg-dim: #3d3d3a;           /* body */
  --muted-foreground: #6c6a64; /* muted */
  --muted-soft: #8e8b82;
  --primary: #141413;

  --accent: #cc785c;           /* coral — единственный главный акцент */
  --accent-strong: #a9583e;    /* coral active */
  --accent-soft: rgba(204, 120, 92, 0.13);
  --success: #5db872;
  --success-strong: #3f9155;
  --success-soft: rgba(93, 184, 114, 0.13);
  --info: #5db8a6;             /* teal — вторичный акцент */
  --info-soft: rgba(93, 184, 166, 0.14);
  --violet: #e8a55a;           /* amber — третий тёплый тон (бывш. violet) */
  --violet-soft: rgba(232, 165, 90, 0.16);
  --warning: #d4a017;
  --warning-light: rgba(212, 160, 23, 0.13);
  --warning-border: rgba(212, 160, 23, 0.35);
  --error: #c64545;
  --error-soft: rgba(198, 69, 69, 0.10);

  --dark: #181715;             /* surface-dark: тёмные продуктовые поверхности */
  --dark-elevated: #252320;
  --on-dark: #faf9f5;
  --on-dark-soft: #a09d96;

  --header-h: 73px;            /* единая высота шапки и брендинг-блока сайдбара */
  --radius: 12px;              /* карточки */
  --radius-sm: 8px;            /* кнопки, инпуты, табы */
  --radius-xs: 6px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Tiempos Headline', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --shadow: 0 1px 3px rgba(20,20,19,0.08);
  --shadow-sm: none;           /* глубина за счёт цвета поверхностей, не теней */
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html, body { height: 100%; }

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

/* Канва плоская: глубина за счёт цвета поверхностей, без градиентов и теней */

::selection { background: var(--accent-soft); color: var(--fg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ddd4c4; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #cec4b0; }

/* ── Экраны ─────────────────────────────────────────────────────────────── */
.screen { display: none; position: relative; z-index: 1; }
.screen.active { display: flex; }
#login-screen.active { align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
#dashboard-screen.active { flex-direction: row; height: 100vh; overflow: hidden; }

.glass { background: var(--bg-elev); border: 1px solid var(--border); }

/* ── Логин ──────────────────────────────────────────────────────────────── */
.login-card {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius);
  padding: 40px 32px;
  box-shadow: var(--shadow);
}
.brand { text-align: center; margin-bottom: 28px; }
.logo-box {
  width: 52px; height: 52px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid rgba(204,120,92,0.35);
  border-radius: 14px; color: var(--accent-strong);
}
.logo-box .logo-icon { width: 26px; height: 26px; }
.brand h1 { font-family: var(--font-serif); font-size: 30px; font-weight: 600; letter-spacing: 0.1em; }
.brand p { color: var(--muted-foreground); font-size: 13px; margin-top: 6px; }

.input-group { margin-bottom: 16px; }
.input-group label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--fg-dim); margin-bottom: 7px;
}
.input-group label i, .input-group label svg { width: 14px; height: 14px; color: var(--muted-foreground); }
.input-group input {
  width: 100%; padding: 11px 13px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--fg); font-family: var(--font); font-size: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input-group input::placeholder { color: #a8a49a; }
.input-group input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.error-message { color: var(--error); font-size: 13px; min-height: 18px; margin-bottom: 6px; }

.btn-primary {
  width: 100%; padding: 11px 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #ffffff; font-weight: 600; font-size: 14px;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  transition: filter var(--transition), transform var(--transition);
}
.btn-primary i, .btn-primary svg { width: 16px; height: 16px; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary:active { transform: translateY(1px); }

/* ── Сайдбар ────────────────────────────────────────────────────────────── */
.sidebar {
  width: 244px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: none; border-right: 1px solid var(--border);
  padding: 0 14px 18px;             /* верхний отступ убран — брендинг тянется до самого верха */
}
.sidebar-brand {
  display: flex; align-items: center; gap: 11px; position: relative;
  height: var(--header-h);          /* совпадает с высотой шапки → разделители на одной линии */
  padding: 0 8px; margin-bottom: 8px;
}
/* Разделитель во всю ширину сайдбара (компенсируем боковой padding 14px). */
.sidebar-brand::after {
  content: ""; position: absolute; left: -14px; right: -14px; bottom: 0;
  height: 1px; background: var(--border);
}
.brand-logo {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  object-fit: cover; border: 1px solid var(--border);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sidebar-brand h2 { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
.brand-caption { font-size: 10.5px; color: var(--muted-foreground); letter-spacing: 0.04em; }
.login-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }

.sidebar-menu { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; flex: 1; }
.menu-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border: none; background: transparent;
  color: var(--muted-foreground); font-family: var(--font); font-size: 13.5px; font-weight: 500;
  border-radius: var(--radius-sm); cursor: pointer; text-align: left; width: 100%;
  transition: background var(--transition), color var(--transition);
}
.menu-item i, .menu-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.menu-item span:not(.badge) { flex: 1; }
.menu-item:hover { background: var(--surface-hover); color: var(--fg-dim); }
.menu-item.active { background: var(--surface-card); color: var(--fg); }
.menu-item.active i, .menu-item.active svg { color: var(--accent-strong); }

.badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
  border-radius: 999px; background: var(--bg-elev-2); color: var(--muted-foreground);
  border: 1px solid var(--border);
}
.badge-rooms { color: var(--info); border-color: rgba(93,184,166,0.4); background: var(--info-soft); }
.badge-pending { color: var(--warning); border-color: var(--warning-border); background: var(--warning-light); }

.sidebar-footer {
  display: flex; align-items: center; gap: 10px; position: relative;
  padding-top: 14px; margin-top: 8px;
}
.sidebar-footer::before {
  content: ""; position: absolute; left: -14px; right: -14px; top: 0;
  height: 1px; background: var(--border);
}
.user-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.admin-avatar {
  width: 34px; height: 34px; padding: 7px;
  background: var(--accent-soft); color: var(--accent-strong);
  border-radius: 9px; flex-shrink: 0;
}
.username-display { font-size: 13px; font-weight: 600; color: var(--fg); }
.user-role { font-size: 11px; color: var(--muted-foreground); }
.btn-logout {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--muted-foreground); cursor: pointer; transition: all var(--transition);
}
.btn-logout i, .btn-logout svg { width: 16px; height: 16px; }
.btn-logout:hover { color: var(--error); border-color: rgba(198,69,69,0.4); background: var(--error-soft); }

/* ── Основной контент ───────────────────────────────────────────────────── */
.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.main-header {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding: 0 28px;       /* фикс. высота = высоте брендинг-блока */
  background: rgba(250,249,245,0.88); backdrop-filter: blur(8px);
  border: none; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.header-left h1 { font-family: var(--font-serif); font-size: 27px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.15; }
.subtitle { font-size: 13px; color: var(--muted-foreground); margin-top: 2px; }
.header-right { display: flex; align-items: center; gap: 14px; }
.status-indicator {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--fg-dim);
  padding: 6px 12px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px;
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 0 rgba(93,184,114,0.5); animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(93,184,114,0.45); }
  70% { box-shadow: 0 0 0 6px rgba(93,184,114,0); }
  100% { box-shadow: 0 0 0 0 rgba(93,184,114,0); }
}
.btn-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--fg-dim); cursor: pointer; transition: all var(--transition);
}
.btn-icon i, .btn-icon svg { width: 17px; height: 17px; }
.btn-icon:hover { background: var(--surface-hover); color: var(--fg); border-color: var(--border-strong); }
.btn-icon.spinning i, .btn-icon.spinning svg { animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.content-body { flex: 1; overflow-y: auto; padding: 28px; }

/* ── Вкладки ────────────────────────────────────────────────────────────── */
.tab-content { display: none; animation: fadeIn 0.25s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Карточки метрик ────────────────────────────────────────────────────── */
.metrics-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
}
.metric-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.metric-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.metric-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
}
.metric-icon i, .metric-icon svg { width: 20px; height: 20px; }
.color-blue { background: var(--info-soft); color: var(--info); }
.color-green { background: var(--success-soft); color: var(--success); }
.color-purple { background: var(--violet-soft); color: var(--violet); }
.color-red { background: var(--error-soft); color: var(--error); }
.metric-data { min-width: 0; flex: 1; }
.metric-data h3 { font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); margin-bottom: 6px; }
.metric-value { font-size: 30px; font-weight: 600; font-family: var(--font-serif); letter-spacing: -0.5px; line-height: 1.1; color: var(--fg); font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
.metric-value span { font-family: inherit; }
.metric-desc { font-size: 11.5px; color: var(--muted-soft); margin-top: 5px; }
.metric-progress-bar { height: 6px; background: var(--bg-elev-2); border-radius: 999px; margin-top: 10px; overflow: hidden; }
.metric-progress-fill { height: 100%; border-radius: 999px; background: var(--info); transition: width 0.5s ease; }
.color-blue-fill { background: var(--info); }

/* ── Графики ────────────────────────────────────────────────────────────── */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.charts-grid-3 { grid-template-columns: repeat(3, 1fr); }
.chart-card { padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.chart-card h3 { font-size: 13.5px; font-weight: 600; color: var(--fg-dim); margin-bottom: 16px; }
.chart-container { position: relative; height: 240px; }

/* ── Разделитель секций + мониторинг ────────────────────────────────────── */
.section-divider {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 32px 0 18px;
}
.section-title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-serif); font-size: 21px; font-weight: 600; letter-spacing: -0.2px; color: var(--fg);
}
.section-title i, .section-title svg { width: 18px; height: 18px; color: var(--accent-strong); }
.mon-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted-foreground);
  padding: 7px 13px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px;
}
.mon-strip b { color: var(--fg-dim); font-family: var(--font-mono); font-weight: 600; margin-left: 3px; }
.mon-sep { opacity: 0.4; }
.mon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); flex-shrink: 0; }
.mon-dot.ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.mon-dot.warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-light); }
.mon-dot.down { background: var(--error); box-shadow: 0 0 0 3px var(--error-soft); }

/* ── Таблицы ────────────────────────────────────────────────────────────── */
.table-section { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.margin-top { margin-top: 20px; }
.table-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.table-header h3 { font-size: 14px; font-weight: 600; color: var(--fg); }
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; padding: 11px 18px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted-foreground); background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: 12px 18px; border-bottom: 1px solid var(--border); color: var(--fg-dim); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--surface-hover); }
tbody td strong { color: var(--fg); font-weight: 600; }
.empty-row, .empty-state { text-align: center; color: var(--muted-foreground); padding: 32px 18px !important; font-size: 13px; }

.room-code-tag {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--radius-xs);
  background: var(--accent-soft); color: var(--accent-strong); border: 1px solid rgba(204,120,92,0.35);
}

/* ── Кнопки в таблицах/карточках ────────────────────────────────────────── */
.btn-sm {
  padding: 6px 12px; font-size: 12px; font-weight: 600; font-family: var(--font);
  border-radius: var(--radius-xs); cursor: pointer; background: var(--bg-elev);
  border: 1px solid var(--border); color: var(--fg-dim); transition: all var(--transition);
}
.btn-sm:hover { background: var(--surface-hover); }
.btn-success-outline { color: var(--success-strong); border-color: rgba(93,184,114,0.45); }
.btn-success-outline:hover { background: var(--success-soft); }
.btn-danger-outline { color: var(--error); border-color: rgba(198,69,69,0.35); }
.btn-danger-outline:hover { background: var(--error-soft); }
.btn-warn-outline { color: var(--warning); border-color: var(--warning-border); }
.btn-warn-outline:hover { background: var(--warning-light); }

/* ── Подвкладки модерации ───────────────────────────────────────────────── */
.tab-subnav {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm);
}
.subnav-btn {
  padding: 7px 14px; font-size: 13px; font-weight: 500; font-family: var(--font);
  background: transparent; border: none; border-radius: var(--radius-xs);
  color: var(--muted-foreground); cursor: pointer; transition: all var(--transition);
}
.subnav-btn:hover { color: var(--fg-dim); }
.subnav-btn.active { background: var(--surface-card); color: var(--fg); }
.subtab-content { display: none; }
.subtab-content.active { display: block; animation: fadeIn 0.25s ease; }

/* ── Карточки модерации ─────────────────────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card-pending {
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.card-pending:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.card-image-wrapper {
  position: relative; height: 150px; background: var(--bg-elev-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.card-preview { width: 100%; height: 100%; object-fit: cover; }
.card-preview-fallback { color: #cfc8ba; }
.card-preview-fallback i, .card-preview-fallback svg { width: 36px; height: 36px; }
.card-tags { position: absolute; bottom: 8px; left: 8px; display: flex; gap: 5px; flex-wrap: wrap; }
.card-body { padding: 14px 16px; flex: 1; }
.card-body h4 { font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 5px; }
.card-desc {
  font-size: 12.5px; color: var(--muted-foreground); margin-bottom: 12px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--muted-foreground); }
.card-author { display: flex; align-items: center; gap: 5px; }
.card-author i, .card-author svg { width: 12px; height: 12px; }
.card-actions { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.card-actions .btn-sm { flex: 1; }

.tag-pill {
  font-size: 10.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.55); color: #ffffff; border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(4px);
}
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-list .tag-pill { background: var(--bg-elev-2); color: var(--fg-dim); border: 1px solid var(--border); }

.table-preview { width: 52px; height: 36px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border); }
.table-preview-fallback {
  width: 52px; height: 36px; border-radius: var(--radius-xs); background: var(--bg-elev-2); border: 1px solid var(--border);
  align-items: center; justify-content: center; color: #cfc8ba;
}

.status-pill {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  display: inline-block; white-space: nowrap;
}
.status-active { color: var(--success-strong); background: var(--success-soft); border: 1px solid rgba(93,184,114,0.4); }
.status-closed { color: var(--error); background: var(--error-soft); border: 1px solid rgba(198,69,69,0.3); }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .charts-grid { grid-template-columns: 1fr; }
  .content-body { padding: 18px; }
}
@media (max-width: 720px) {
  .sidebar { width: 64px; padding: 0 8px 16px; }
  .sidebar-brand h2, .menu-item span:not(.badge), .username-display, .user-role { display: none; }
  .menu-item { justify-content: center; }
  .metrics-grid { grid-template-columns: 1fr; }
}

/* Lucide-иконки без собственного класса (заменяются на <svg>) — общий стиль */
svg.lucide { stroke-width: 2; vertical-align: middle; }

/* ── Аналитика: когортное сравнение версий ─────────────────────────────── */

/* Липкая панель фильтров — полноширинный тулбар, продолжение шапки */
.an-filterbar {
  position: sticky; top: -28px; z-index: 20;   /* компенсируем padding контейнера */
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 10px 28px 12px; margin: -28px -28px 24px;
  border: none; border-bottom: 1px solid var(--border); border-radius: 0;
  box-shadow: 0 6px 16px -12px rgba(20,20,19,0.18);
  background: rgba(250,249,245,0.92); backdrop-filter: blur(10px);
}
.an-filterbar .fin-range-select { font-size: 12.5px; padding: 7px 8px; }
#an-va, #an-vb { max-width: 182px; }
.an-apply-btn { align-self: flex-end; margin-left: auto; }
.an-date-range { display: flex; align-items: center; gap: 5px; color: var(--muted-foreground); }
.an-check {
  display: flex; align-items: center; gap: 6px; align-self: flex-end;
  font-size: 12.5px; color: var(--fg-dim); cursor: pointer; user-select: none;
  padding: 0 0 9px;
}
.an-check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.an-filter-group { display: flex; flex-direction: column; gap: 6px; }
.an-filter-group label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.an-filter-group input[type="date"] { font-family: var(--font-mono); font-size: 12.5px; }
.an-apply-btn { width: auto; padding: 9px 20px; font-size: 13.5px; }
.an-filter-note { font-size: 12.5px; color: var(--muted-foreground); align-self: center; }

/* Полоса контекста когорты */
.an-cohort-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 13px 18px; margin-bottom: 22px;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.an-cohort-versions { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.an-cohort-versions b { font-family: var(--font-mono); }
.an-cohort-meta { font-size: 12px; color: var(--muted-foreground); }

/* Чипы версий A/B */
.an-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px;
  font-size: 11px; font-weight: 700; font-family: var(--font-mono);
  vertical-align: middle; margin-right: 2px;
}
.an-chip-a { background: rgba(124,58,237,0.12); color: #5b21b6; border: 1px solid rgba(124,58,237,0.38); }
.an-chip-b { background: rgba(236,72,153,0.12); color: #be185d; border: 1px solid rgba(236,72,153,0.38); }

/* Индикатор надёжности выборки + размер n */
.an-rel { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px 0 8px; vertical-align: middle; }
.an-rel.ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.an-rel.warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-light); }
.an-rel.low { background: var(--error); box-shadow: 0 0 0 3px var(--error-soft); }
.an-n { font-size: 12px; color: var(--muted-foreground); font-family: var(--font-mono); }

/* Заголовки секций отчёта */
.an-section-title { margin: 30px 0 14px; }
.an-section-title h2 { font-size: 16px; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; }
.an-section-title p { font-size: 12px; color: var(--muted-foreground); margin-top: 3px; }

/* KPI-карточки сравнения */
.an-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 10px; }
.an-kpi-grid-3 { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.an-kpi { padding: 15px 16px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.an-kpi h3 { font-size: 11.5px; font-weight: 500; color: var(--muted-foreground); margin-bottom: 10px; line-height: 1.35; }
.an-kpi-vals { display: flex; flex-direction: column; gap: 6px; }
.an-kpi-val { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; font-family: var(--font-mono); letter-spacing: -0.02em; }
.an-delta {
  display: inline-block; margin-top: 9px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; font-family: var(--font-mono);
}
.an-delta.up { color: var(--success-strong); background: var(--success-soft); }
.an-delta.down { color: var(--error); background: var(--error-soft); }
.an-delta.flat { color: var(--muted-foreground); background: var(--bg-elev-2); }
.an-kpi-note { font-size: 11px; color: var(--muted-foreground); margin-top: 8px; line-height: 1.4; }

/* Сетки графиков отчёта */
.an-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 6px; }
.an-chart-grid-3 { grid-template-columns: repeat(3, 1fr); }
.an-chart { height: 260px; }
.an-chart-sm { height: 200px; }

@media (max-width: 1200px) {
  .an-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .an-chart-grid, .an-chart-grid-3 { grid-template-columns: 1fr; }
}

/* ── Таблицы дневных когорт (heatmap) ───────────────────────────────────── */
.an-ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1200px) { .an-ct-grid { grid-template-columns: 1fr; } }
.an-ct { font-size: 12px; }
.an-ct thead th { padding: 8px 6px; text-align: center; }
.an-ct thead th:first-child { text-align: left; padding-left: 12px; }
.an-ct tbody td { padding: 6px 6px; text-align: center; font-family: var(--font-mono); font-size: 12px; }
.an-ct .an-ct-day { font-weight: 600; color: var(--fg); text-align: left; white-space: nowrap; padding-left: 12px; width: 1%; }
.an-ct .an-ct-n { color: var(--muted-foreground); width: 1%; }
.an-ct .an-ct-empty { color: #cfc8ba; }
.an-ct tbody tr:hover { background: transparent; }
/* Стрелки «лучше/хуже» в ячейках: цветной текст на тонированном фоне не читается,
   компактная стрелка при обычном цвете значения — читается везде. */

/* Светофор FPS-таблицы + стрелки изменения B против A */
.an-sev-g { background: rgba(93,184,114,0.16); color: #2f7a44; }
.an-sev-m { background: rgba(212,160,23,0.16); color: #8a6a10; }
.an-sev-b { background: rgba(198,69,69,0.13); color: #9c3535; }
.an-arr-good { color: #3f9155; font-size: 9px; font-weight: 700; }
.an-arr-bad { color: #c64545; font-size: 9px; font-weight: 700; }
.an-fps-legend { display: flex; gap: 8px; font-size: 11px; flex-wrap: wrap; }
.an-fps-legend span { padding: 3px 9px; border-radius: 999px; }

/* Узкие таблицы (FPS, плейсменты): значения короткие — во всю ширину нечитаемо */
.an-narrow { width: 50%; min-width: 560px; }
@media (max-width: 1200px) { .an-narrow { width: 100%; min-width: 0; } }

/* ── Кастомный датапикер (в стиле админки, вместо системного календаря) ──── */
.an-date { cursor: pointer; width: 104px; }
.an-dp {
  /* top:100% обязателен: без него absolute-элемент внутри flex-строки дат
     берёт «статическую» позицию с центрированием по кросс-оси и уезжает вверх. */
  position: absolute; top: calc(100% + 6px); z-index: 50; width: 252px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px; user-select: none;
  animation: fadeIn 0.15s ease;
}
.an-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.an-dp-title { font-size: 13px; font-weight: 600; color: var(--fg); text-transform: capitalize; }
.an-dp-nav { display: flex; gap: 4px; }
.an-dp-btn {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-xs);
  color: var(--fg-dim); cursor: pointer; font-size: 13px; line-height: 1;
  transition: all var(--transition);
}
.an-dp-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.an-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.an-dp-wd {
  font-size: 10.5px; font-weight: 600; color: var(--muted-foreground);
  text-align: center; padding: 4px 0; text-transform: uppercase;
}
.an-dp-day {
  height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-family: var(--font-mono); color: var(--fg-dim);
  border: none; background: transparent; border-radius: var(--radius-xs); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.an-dp-day:hover { background: var(--surface-hover); color: var(--fg); }
.an-dp-day.other { color: #cfc8ba; }
/* Подсказки когорт: зелёная точка — установки есть у всех выбранных версий (≥10),
   янтарная — есть, но мало (<10). */
.an-dp-day { position: relative; }
.an-dp-day.has-strong::after, .an-dp-day.has-weak::after {
  content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
}
.an-dp-day.has-strong::after { background: var(--accent); }
.an-dp-day.has-weak::after { background: var(--warning); }
.an-dp-day.selected.has-strong::after, .an-dp-day.selected.has-weak::after { background: #fff; }
.an-dp-day.today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.an-dp-day.selected { background: var(--accent); color: #fff; font-weight: 600; }
.an-dp-day.selected:hover { background: var(--accent-strong); }
.an-dp-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.an-dp-link {
  font-size: 12px; font-weight: 600; color: var(--accent-strong);
  background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 4px;
}
.an-dp-link:hover { background: var(--success-soft); }
.an-dp-link.muted { color: var(--muted-foreground); }
.an-dp-link.muted:hover { background: var(--bg-elev-2); }

/* ── Записи сессий (Replays) ────────────────────────────────────────────── */

/* Тулбар списка */
.rp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#rp-refresh { display: inline-flex; align-items: center; gap: 6px; }

/* Мастер-деталь: таблица слева, sticky-панель просмотра справа (полстраницы) */
.rp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.rp-list-pane { min-width: 0; }
.rp-detail-pane {
  position: sticky; top: 16px;
  align-self: start;
  min-width: 0;
}

/* Строки таблицы кликабельны — выбирают запись для просмотра */
.rp-row { cursor: pointer; }
.rp-row.active {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.rp-row.active:hover { background: var(--accent-soft); }
.rp-row.active td strong, .rp-row.active td { color: var(--fg); }

/* Статусы записей */
.status-recording { color: var(--info); background: var(--info-soft); border: 1px solid rgba(59,130,246,0.3); }
.status-abandoned { color: var(--warning); background: var(--warning-light); border: 1px solid var(--warning-border); }

/* Панель настроек записи */
.rp-config-header { cursor: pointer; user-select: none; }
.rp-config-header:hover { background: var(--surface-hover); }
.rp-config-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 18px 20px 6px;
}
.rp-field { display: flex; flex-direction: column; gap: 6px; }
.rp-field label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.rp-input {
  width: 100%; padding: 7px 10px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--fg); font-family: var(--font-mono); font-size: 13px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.rp-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rp-check {
  display: flex; align-items: center; gap: 8px; align-self: end;
  font-size: 13px; font-weight: 500; color: var(--fg-dim); cursor: pointer; user-select: none;
  padding: 8px 0;
}
.rp-check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.rp-hint { font-size: 11.5px; color: var(--muted-foreground); line-height: 1.4; }
.rp-config-footer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 20px 18px;
}
.rp-save-btn { width: auto; padding: 9px 20px; font-size: 13.5px; }
.rp-save-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.rp-msg { font-size: 12.5px; font-weight: 600; }
.rp-msg-ok { color: var(--success-strong); }
.rp-msg-err { color: var(--error); }
.rp-warning {
  margin: 14px 20px 0; padding: 10px 14px;
  border-radius: var(--radius-sm); font-size: 12.5px; color: #92400e;
  background: var(--warning-light); border: 1px solid var(--warning-border);
}

/* Панель просмотра (деталь) */
.rp-detail-card { display: flex; flex-direction: column; }

/* Пустое состояние — ничего не выбрано */
.rp-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 320px; padding: 32px 20px;
  color: var(--muted-foreground); font-size: 13.5px; text-align: center;
}
.rp-detail-empty i, .rp-detail-empty svg { width: 34px; height: 34px; color: #cfc8ba; }

/* Видео + управление */
.rp-video-area { padding: 16px 16px 14px; }
.rp-video-wrap {
  position: relative; background: #0b0b0e; border-radius: var(--radius-sm);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 220px;
}
#rp-video { display: block; width: 100%; max-height: 68vh; background: #000; cursor: pointer; }

/* Полноэкранный режим: фуллскринится контейнер видео+контролы, чтобы работали
   наши перемотка/скорость/чанки (у нативного видео они бы пропали). */
.rp-video-area:fullscreen {
  background: #000;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 24px;
}
.rp-video-area:fullscreen .rp-video-wrap { border-radius: 0; }
.rp-video-area:fullscreen #rp-video { max-height: calc(100vh - 96px); }
.rp-video-area:fullscreen .rp-time,
.rp-video-area:fullscreen .rp-chunk { color: #e4e4e7; }
.rp-video-area:fullscreen .rp-seek { background: #27272a; border-color: #3f3f46; }
.rp-video-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; width: 100%;
  color: #a1a1aa; font-size: 13.5px;
}
.rp-seek {
  position: relative; height: 9px; margin-top: 14px;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; overflow: hidden;
}
.rp-seek:hover { border-color: var(--border-strong); }
.rp-seek-fill {
  height: 100%; width: 0%; background: var(--accent); border-radius: 999px;
  transition: width 0.15s linear;
}
.rp-controls { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
#rp-play { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; }
.rp-time, .rp-chunk { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-dim); white-space: nowrap; }
#rp-speed { width: auto; }

/* Метаданные: сетка «метка — значение» */
.rp-meta-grid {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 16px;
  padding: 4px 16px 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.rp-meta-label {
  color: var(--muted-foreground);
  padding: 7px 0; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rp-meta-val {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg);
  text-align: right; word-break: break-all; min-width: 0;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.rp-meta-grid .rp-meta-label:nth-last-of-type(2),
.rp-meta-grid .rp-meta-val:last-of-type { border-bottom: none; }
.rp-id { font-family: var(--font-mono); word-break: break-all; }
.rp-copy-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; padding: 0;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xs);
  color: var(--muted-foreground); cursor: pointer; transition: all var(--transition);
}
.rp-copy-btn:hover { background: var(--surface-hover); color: var(--fg); border-color: var(--border-strong); }
.rp-copy-btn.copied { color: var(--success-strong); border-color: rgba(93,184,114,0.45); }
.rp-copy-btn i, .rp-copy-btn svg { width: 12px; height: 12px; }

/* Низ панели: удаление записи */
.rp-detail-footer {
  padding: 12px 16px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 8px;
}

@media (max-width: 1200px) {
  .rp-config-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Узкие экраны: одна колонка, панель просмотра над таблицей */
@media (max-width: 1100px) {
  .rp-layout { grid-template-columns: 1fr; }
  .rp-detail-pane { position: static; order: -1; }
  .rp-detail-empty { min-height: 160px; }
}
@media (max-width: 720px) {
  .rp-config-grid { grid-template-columns: 1fr; }
}

/* Финансы: селектор диапазона графика и кнопка синхронизации */
.fin-range-select {
  padding: 6px 10px; background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; cursor: pointer;
}
.fin-range-select:hover { border-color: var(--border-strong); }
#fin-sync-btn { display: inline-flex; align-items: center; gap: 6px; }
#fin-sync-btn.spinning i, #fin-sync-btn.spinning svg { animation: spin 0.6s linear infinite; }

/* ── P&L: отчёт о прибылях и убытках (редакционная таблица в стиле Claude) ─ */
.pnl-hint { font-size: 12px; color: var(--muted-soft); }

.pnl-table-wrap { overflow-x: auto; }
.pnl-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.pnl-table th, .pnl-table td {
  padding: 7px 9px; text-align: right; white-space: nowrap;
  font-family: var(--font-mono);
}
.pnl-table td { border-bottom: 1px solid var(--border-soft); color: var(--fg-dim); }
.pnl-table .empty-row { text-align: center; padding: 24px; font-family: var(--font); color: var(--muted-foreground); }

/* Шапка: месяцы caption-uppercase, текущий месяц отмечен кораллом */
.pnl-head-row th {
  font-family: var(--font); font-weight: 500; font-size: 10.5px;
  color: var(--muted-soft); text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--bg-elev-2); border-bottom: 1px solid var(--border);
  padding-top: 10px; padding-bottom: 10px;
}
.pnl-head-row th.pnl-m-now { color: var(--accent-strong); font-weight: 600; }

/* Первая колонка — названия статей: одна строка, действия не ломают вёрстку */
.pnl-table .pnl-cat-cell {
  text-align: left; font-family: var(--font);
  width: 256px; min-width: 256px; max-width: 256px;
}
.pnl-cat-row .pnl-cat-cell { position: relative; padding-right: 12px; }
.pnl-cat-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: var(--fg-dim);
}
.pnl-cat-actions {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; gap: 2px; padding-left: 6px; opacity: 0; transition: opacity var(--transition);
  background: linear-gradient(90deg, transparent, var(--bg) 12px);
  border-radius: var(--radius-xs);
}
.pnl-cat-row:hover .pnl-cat-actions { opacity: 1; }
.pnl-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: none; border-radius: var(--radius-xs);
  color: var(--muted-soft); cursor: pointer; transition: all var(--transition);
}
.pnl-icon-btn:hover { background: var(--surface-card); color: var(--fg); }
.pnl-icon-btn.pnl-danger:hover { color: var(--error); background: var(--error-soft); }
.pnl-icon-btn i, .pnl-icon-btn svg { width: 13px; height: 13px; }

/* Секции «Доходы»/«Расходы»: caption-uppercase с цветной точкой */
.pnl-section-row td {
  font-family: var(--font); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg);
  padding: 18px 9px 7px; border-bottom: 1px solid var(--border);
}
.pnl-section-row .pnl-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px;
}
.pnl-income .pnl-dot { background: var(--info); }
.pnl-expense .pnl-dot { background: var(--accent); }

/* Строка «+ Добавить статью» — тихий коралловый text-link */
.pnl-add-row td { padding: 0; border-bottom: 1px solid var(--border-soft); }
.pnl-add-btn {
  display: block; width: 100%; padding: 6px 9px; text-align: left;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--accent);
  border-radius: 0; transition: background var(--transition), color var(--transition);
}
.pnl-add-btn:hover { background: var(--accent-soft); color: var(--accent-strong); }

/* Редактируемые ячейки: пустые — чистые, значение появляется по вводу */
td.pnl-cell { cursor: pointer; color: var(--fg); min-width: 58px; transition: background var(--transition), box-shadow var(--transition); }
td.pnl-cell:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(204,120,92,0.4); }
td.pnl-editing { padding: 2px; }
.pnl-cell-input {
  width: 88px; padding: 4px 6px; text-align: right;
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--accent); border-radius: var(--radius-xs);
  background: var(--bg); color: var(--fg);
  outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
.pnl-cell-input::-webkit-outer-spin-button, .pnl-cell-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Итоги секций и колонка «Год» */
.pnl-subtotal-row td { font-weight: 600; background: var(--bg-elev-2); color: var(--fg); border-bottom: 1px solid var(--border); }
.pnl-subtotal-row .pnl-cat-cell { font-size: 12px; }
.pnl-row-total { font-weight: 600; border-left: 1px solid var(--border); color: var(--fg); }

/* Финальная строка — surface-card, как featured-карточка */
.pnl-net-row td {
  font-weight: 700; font-size: 12.5px;
  background: var(--surface-card); border-bottom: none;
  padding-top: 10px; padding-bottom: 10px;
}
.pnl-net-row .pnl-cat-cell { font-size: 13px; }
.pnl-pos { color: var(--success-strong); }
.pnl-neg { color: var(--error); }

.pnl-note { padding: 6px 16px 12px; font-size: 12.5px; min-height: 18px; color: var(--muted-foreground); }

@media (max-width: 1280px) {
  .pnl-table .pnl-cat-cell { width: 200px; min-width: 200px; max-width: 200px; }
  .pnl-table th, .pnl-table td { padding: 7px 6px; }
  td.pnl-cell { min-width: 50px; }
}

/* ── P&L: валюты, курс месяца, режимы просмотра ───────────────────────────── */

/* Переключатель «Полный / Операционный» — сегментед в стиле category-tab */
.pnl-mode-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.pnl-mode-btn {
  padding: 5px 12px; font-family: var(--font); font-size: 12.5px; font-weight: 500;
  background: transparent; border: none; border-radius: var(--radius-xs);
  color: var(--muted-foreground); cursor: pointer; transition: all var(--transition);
}
.pnl-mode-btn:hover { color: var(--fg-dim); }
.pnl-mode-btn.active { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgba(20,20,19,0.06); }

/* Строка курса ₽/$ */
.pnl-rate-row td { background: var(--bg); border-bottom: 1px solid var(--border); }
.pnl-rate-label { font-size: 11.5px !important; color: var(--muted-foreground); font-weight: 500; }
td.pnl-rate-cell {
  cursor: pointer; font-size: 11.5px; color: var(--muted-foreground);
  transition: background var(--transition), box-shadow var(--transition);
}
td.pnl-rate-cell:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(204,120,92,0.4); }
td.pnl-rate-inherited { color: var(--muted-soft); font-style: italic; }
td.pnl-rate-missing { color: var(--accent-strong); font-weight: 600; }
.pnl-rate-input { width: 64px; }

/* Бейдж CAPEX у инвестиционных статей */
.pnl-capex-badge {
  flex-shrink: 0; margin-left: 6px;
  font-family: var(--font); font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
  padding: 1.5px 6px; border-radius: 999px;
  background: var(--violet-soft); color: #a86a1e; border: 1px solid rgba(232,165,90,0.4);
}
.pnl-cat-row .pnl-cat-cell { display: flex; align-items: center; }
.pnl-cat-row .pnl-cat-name { flex: 1 1 auto; min-width: 0; }

/* Рублёвая ячейка без курса — предупреждающий вид */
td.pnl-cell-rub { color: var(--accent-strong); font-style: italic; }

/* Редактор ячейки: инпут + переключатель ₽/$ */
.pnl-edit-wrap { display: inline-flex; align-items: center; gap: 3px; }
.pnl-cur-toggle {
  display: inline-flex; gap: 1px; padding: 2px;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-xs);
}
.pnl-cur-btn {
  width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 11px; font-weight: 600;
  background: transparent; border: none; border-radius: 4px;
  color: var(--muted-soft); cursor: pointer; transition: all var(--transition);
}
.pnl-cur-btn.active { background: var(--accent); color: #fff; }

/* Строка «скрыто CAPEX-статей» в операционном режиме */
.pnl-hidden-row td {
  font-family: var(--font); font-size: 11.5px; font-style: italic;
  color: var(--muted-soft); padding: 6px 9px; border-bottom: 1px solid var(--border-soft);
}

/* ── P&L: авто-строка налога УСН ──────────────────────────────────────────── */
.pnl-tax-row td { border-bottom: 1px solid var(--border-soft); color: var(--muted-foreground); }
.pnl-tax-row .pnl-cat-cell { display: flex; align-items: center; }
.pnl-tax-row .pnl-cat-name { flex: 1 1 auto; min-width: 0; color: var(--muted-foreground); }
.pnl-auto-badge {
  flex-shrink: 0; margin-left: 6px;
  font-family: var(--font); font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1.5px 6px; border-radius: 999px;
  background: var(--info-soft); color: #33806f; border: 1px solid rgba(93,184,166,0.4);
}
td.pnl-cell-auto { cursor: default; color: var(--muted-foreground); }