/* ═══════════════════════════════════════════════════════════════
   WEY TO UI — Унифицированный интерфейс домена (WEY TO & Human Design)
   Стиль: Axis Unified Architecture (Sidebar + Topbar + Panels)
   Палитра: 
     - Поле справа от меню (холст/фон): благородный дымчатый сланец (+30-35% светлее, #4c5563)
     - Окна и карточки расчетов: сохранен текущий темно-серый цвет (#22262d)
     - Акценты: приглушенное старое золото (#c5a059), бордо (#872b3b), синий (#2a5681)
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Холст рабочей области справа от меню (заметно светлее, но не полностью светлый) */
  --bg: #4c5563;                  /* дымчатый средне-серый сланец (~35% lightness) */
  --bg-deep: #404854;             /* умеренно глубокий серый */
  --bg-subtle: #566070;           /* акцентный тон холста */
  
  /* Окна и карточки расчетов (сохранен исходный серый) */
  --surface: #22262d;             /* карточки и панели с расчетами */
  --surface-elevated: #1a1e24;    /* сайдбар и приподнятые элементы */
  --surface-alt: #282e37;         /* внутренние ячейки цифр и подложки */
  --bo: rgba(255, 255, 255, 0.12); /* тонкие чистые разделители */
  --bo-focus: #c5a059;
  
  --ink: #ffffff;                 /* ясный светлый текст */
  --ink-mut: #d5dce7;             /* читаемый вторичный текст */
  --ink-soft: #a1adbd;            /* неактивные подписи */
  
  /* Акценты WEY TO */
  --gold: #c5a059;                /* приглушенное старое золото */
  --gold-d: #9e7d3b;
  --gold-l: #e6c582;
  --gold-p: rgba(197, 160, 89, 0.18);
  
  --bordeaux: #872b3b;            /* приглушенное бордо */
  --bordeaux-d: #661d2b;
  --bordeaux-l: #a7394d;
  --bordeaux-p: rgba(135, 43, 59, 0.22);
  
  --blue: #2a5681;                /* приглушенный синий */
  --blue-d: #1b3d5e;
  --blue-l: #3970a3;
  --blue-p: rgba(42, 86, 129, 0.22);
  
  --ok: #4f8a5a;
  --ok-p: rgba(79, 138, 90, 0.20);
  --warn: #c58d28;
  --warn-p: rgba(197, 141, 40, 0.20);
  --danger: #b33939;
  --danger-p: rgba(179, 57, 57, 0.20);
  
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14.5px;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .serif, .font-display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app {
  display: flex;
  min-height: 100vh;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface-elevated);
  border-right: 1px solid var(--bo);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--bo);
}
.brand .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-d) 100%);
  color: #121519;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 3px 12px var(--gold-p);
}
.brand .nm {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.1;
}
.brand .nm b { color: var(--gold); }
.brand .nm span { color: var(--ink); font-weight: 400; }
.brand .sub {
  font-size: 10.5px;
  color: var(--ink-mut);
  margin-top: 2px;
  line-height: 1.3;
}

.lang {
  display: flex;
  gap: 6px;
  padding: 10px 16px 4px;
}
.lang button {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink-mut);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lang button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}
.lang button.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #121519;
  font-weight: 700;
}

.nav {
  flex: 1;
  padding: 8px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-label {
  padding: 14px 12px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  color: var(--ink-mut);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}
.nav-item.active {
  background: var(--gold-p);
  color: var(--gold-l);
  box-shadow: inset 3px 0 0 0 var(--gold);
  font-weight: 600;
}
.nav-item .ic {
  font-size: 16px;
  opacity: 0.85;
  width: 20px;
  text-align: center;
}
.nav-item.active .ic {
  opacity: 1;
  color: var(--gold);
}
.nav-item .soon {
  margin-left: auto;
  font-size: 9px;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
}

.foot {
  padding: 12px 14px;
  border-top: 1px solid var(--bo);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-elevated);
}
.foot .av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold-p);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
.foot .nm { font-size: 12px; font-weight: 600; color: var(--ink); }
.foot .rl { font-size: 10px; color: var(--ink-mut); }

/* ── MAIN WORKSPACE (ПОЛЕ СПРАВА) ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg); /* светлее, но не полностью светлый */
}

.topbar {
  min-height: var(--topbar-h);
  border-bottom: 1px solid var(--bo);
  background: #39414e; /* комфортный промежуточный серый верхнего бара */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.crumbs {
  font-size: 11px;
  color: var(--ink-mut);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.ptitle {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  color: var(--ink);
  line-height: 1.15;
  font-weight: 600;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.content-body {
  flex: 1;
  padding: 24px;
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
}

/* ── BUTTONS ── */
.btn {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bo);
  background: var(--surface-alt);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
}
.btn.primary, .btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-d) 100%);
  border-color: transparent;
  color: #121519;
  font-weight: 600;
  box-shadow: 0 2px 10px var(--gold-p);
}
.btn.primary:hover, .btn-gold:hover {
  filter: brightness(1.1);
  color: #121519;
}
.btn-bordeaux {
  background: linear-gradient(135deg, var(--bordeaux) 0%, var(--bordeaux-d) 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 10px var(--bordeaux-p);
}
.btn-bordeaux:hover { filter: brightness(1.1); color: #fff; }
.btn-blue {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 10px var(--blue-p);
}
.btn-blue:hover { filter: brightness(1.1); color: #fff; }
.btn-ghost {
  background: transparent;
  border-color: var(--bo);
  color: var(--ink-mut);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}
.btn-sm, .btn.sm {
  padding: 5px 11px;
  font-size: 12px;
}
.btn-xs, .btn.xs {
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.2;
  border-radius: 4px;
}

/* ── CARDS & PANELS (ОКНА С РАСЧЕТАМИ В ТЕМНО-СЕРОМ ЦВЕТЕ) ── */
.panel {
  background: var(--surface); /* исходный темно-серый #22262d */
  border: 1px solid var(--bo);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bo);
}
.panel-hd h2, .panel-hd h3 {
  font-size: 18px;
  color: var(--ink);
}
.panel-hd .desc {
  font-size: 12.5px;
  color: var(--ink-mut);
}

/* ── FORM ELEMENTS ── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fld label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bo);
  background: var(--surface-alt);
  color: var(--ink);
  outline: none;
  transition: all 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-p);
  background: #20242b;
}

/* ═══════════════════════════════════════════════════════════════
   ДАШБОРД 360 (DASHBOARD 360)
   ═══════════════════════════════════════════════════════════════ */
.db-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.db-hero {
  background: var(--surface);
  border: 1px solid var(--bo);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: var(--shadow);
}
.db-av {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--gold-p);
  color: var(--gold);
  border: 2px solid var(--gold);
}
.db-av.f { background: var(--bordeaux-p); color: var(--bordeaux-l); border-color: var(--bordeaux); }
.db-av.m { background: var(--blue-p); color: var(--blue-l); border-color: var(--blue); }

.db-hmain {
  flex: 1;
  min-width: 0;
}
.db-hnm {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.db-sexico {
  font-size: 15px;
  font-weight: bold;
}
.db-sexico.f { color: #f472b6; }
.db-sexico.m { color: #60a5fa; }
.db-cohort-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}
.db-hmeta {
  font-size: 13px;
  color: var(--ink-mut);
  margin-top: 4px;
}
.db-request {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(197, 160, 89, 0.08);
  border-left: 3px solid var(--gold);
  font-size: 13px;
  color: var(--ink);
  font-style: italic;
}

.db-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -6px;
  margin-bottom: 4px;
}

.db-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 980px) {
  .db-grid { grid-template-columns: 1fr; }
}

.db-card {
  background: var(--surface);
  border: 1px solid var(--bo);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.db-card.span2 {
  grid-column: span 2;
}
@media (max-width: 980px) {
  .db-card.span2 { grid-column: span 1; }
}
.db-h {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bo);
}
.db-h .ic { font-size: 17px; }
.db-empty {
  color: var(--ink-soft);
  font-size: 13px;
  padding: 12px 0;
  font-style: italic;
}

/* Расчетная карта мини внутри дашборда */
.db-calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.db-num-cell {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
}
.db-num-cell .lbl { font-size: 10px; font-weight: 700; color: var(--ink-mut); text-transform: uppercase; }
.db-num-cell .val { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 700; color: var(--gold); }
.db-num-cell .sub { font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; }

/* История обращений / консультаций */
.db-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.db-session-item {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.db-session-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.db-session-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
}
.db-session-type {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-mut);
}
.db-session-topic {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.db-session-notes {
  font-size: 12.5px;
  color: var(--ink-mut);
  line-height: 1.4;
}

/* Список задач и запросов клиента */
.db-todo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.db-todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: all 0.15s ease;
}
.db-todo-item.done {
  opacity: 0.6;
  text-decoration: line-through;
}
.db-todo-item input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--gold);
}
.db-todo-body {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
}
.db-todo-title {
  font-weight: 600;
  color: var(--ink);
}
.db-todo-desc {
  font-size: 11.5px;
  color: var(--ink-mut);
  margin-top: 2px;
}
.db-todo-remedy {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--gold-p);
  color: var(--gold);
  border: 1px solid rgba(197, 160, 89, 0.3);
}
.db-todo-del {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
}
.db-todo-del:hover { color: var(--danger); }

.db-add-row {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.db-add-row input {
  flex: 1;
  padding: 7px 10px;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   КАЛЕНДАРЬ (CALENDAR)
   ═══════════════════════════════════════════════════════════════ */
.cal-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cal-wrap {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .cal-wrap { grid-template-columns: 1fr; }
}

.cal-card {
  background: var(--surface);
  border: 1px solid var(--bo);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.cal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cal-month {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  text-transform: capitalize;
}
.cal-nav {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cal-nav:hover {
  background: rgba(255, 255, 255, 0.1);
}
.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-mut);
  margin-bottom: 8px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-cell {
  aspect-ratio: 1;
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}
.cal-cell:hover {
  border-color: var(--gold);
  background: rgba(197, 160, 89, 0.1);
}
.cal-cell.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.cal-cell.today {
  border-color: var(--gold);
  font-weight: 700;
}
.cal-cell.sel {
  background: var(--gold);
  color: #121519;
  font-weight: 700;
  border-color: var(--gold);
}
.cal-cell .cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  position: absolute;
  bottom: 4px;
}
.cal-cell.sel .cal-dot { background: #121519; }

.cal-day-h {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  text-transform: capitalize;
}
.cal-day-sub {
  font-size: 12.5px;
  color: var(--ink-mut);
  margin-bottom: 16px;
}

/* Блок энергетики дня WEY TO */
.cal-energy-box {
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.12) 0%, rgba(34, 38, 45, 0.95) 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.cal-energy-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.cal-energy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.cal-energy-item {
  background: var(--surface-alt);
  padding: 8px;
  border-radius: 6px;
  text-align: center;
}
.cal-energy-item .lbl { font-size: 10px; color: var(--ink-mut); text-transform: uppercase; }
.cal-energy-item .val { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700; color: var(--gold); }
.cal-energy-remedy {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.4;
  margin-top: 6px;
  font-style: italic;
}

.cal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.cal-item {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cal-item.done { opacity: 0.6; }
.cal-item input[type="checkbox"] { margin-top: 3px; accent-color: var(--gold); }
.cal-item-body { flex: 1; }
.cal-item-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.cal-item-meta { font-size: 12px; color: var(--ink-mut); margin-top: 3px; }
.cal-del { background: transparent; border: none; color: var(--ink-soft); font-size: 13px; cursor: pointer; }
.cal-del:hover { color: var(--danger); }

.cal-form {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-form-h { font-size: 14px; font-weight: 600; color: var(--ink); }
.cal-row2 { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }

/* ═══════════════════════════════════════════════════════════════
   БАЗА КЛИЕНТОВ (CLIENTS)
   ═══════════════════════════════════════════════════════════════ */
.cb-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cb-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cb-search {
  flex: 1;
  min-width: 260px;
  position: relative;
}
.cb-search input {
  width: 100%;
  padding-left: 34px;
}
.cb-search .mg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  font-size: 16px;
}
.cb-count {
  font-size: 13px;
  color: var(--ink-mut);
  white-space: nowrap;
}

.cb-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--bo);
  padding-bottom: 8px;
  overflow-x: auto;
}
.cb-tab {
  background: transparent;
  border: none;
  color: var(--ink-mut);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cb-tab:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.cb-tab.active { background: var(--gold-p); color: var(--gold); font-weight: 600; }
.cb-tab-cnt {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 10px;
}

.cb-table {
  background: var(--surface);
  border: 1px solid var(--bo);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cb-grid {
  display: flex;
  flex-direction: column;
}
.cb-hrow {
  display: grid;
  grid-template-columns: 44px 1.5fr 1fr 1fr 1.2fr 130px;
  gap: 12px;
  padding: 12px 18px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--bo);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mut);
}
@media (max-width: 900px) {
  .cb-hrow { display: none; }
}
.cb-row {
  display: grid;
  grid-template-columns: 44px 1.5fr 1fr 1fr 1.2fr 130px;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bo);
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.15s ease;
}
@media (max-width: 900px) {
  .cb-row { grid-template-columns: 1fr; gap: 6px; }
}
.cb-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.cb-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold-p);
  color: var(--gold);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 1px solid var(--gold);
}
.cb-nm {
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cb-cell {
  color: var(--ink-mut);
  font-size: 13px;
}
.cb-actions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   АНАЛИЗ (КАЛЬКУЛЯТОР ЧИСЕЛ И МАТРИЦЫ WEY TO)
   ═══════════════════════════════════════════════════════════════ */
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 800px) {
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
}
.number-card {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.number-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--gold-p);
}
.number-card .lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mut);
  margin-bottom: 6px;
}
.number-card .val {
  font-family: 'Fraunces', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.number-card .comp {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.number-card .subtext {
  font-size: 11px;
  color: var(--ink-mut);
  margin-top: 6px;
}

/* ── MATRIX 3x3 ── */
.matrix-container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.matrix-table {
  display: grid;
  grid-template-columns: repeat(3, 84px);
  grid-template-rows: repeat(3, 84px);
  gap: 8px;
  background: var(--surface-elevated);
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--bo);
}
.matrix-cell {
  background: var(--surface);
  border: 1px solid var(--bo);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.matrix-cell:hover {
  border-color: var(--gold);
  background: rgba(197, 160, 89, 0.08);
}
.matrix-cell .cell-num {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 9px;
  color: var(--ink-soft);
  font-weight: 700;
}
.matrix-cell .cell-digits {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
}
.matrix-cell.empty .cell-digits {
  color: var(--ink-soft);
  font-size: 16px;
}
.d-birth { color: var(--gold); font-weight: 700; }
.d-action { color: #d65d70; font-weight: 700; }
.d-real { color: #5ea0dc; font-weight: 700; }
.d-outcome { color: #5ebb7d; font-weight: 700; }

.matrix-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-mut);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ── 12 LINES LIST ── */
.lines-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.line-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.line-chip:hover {
  border-color: var(--gold);
}
.line-chip.active {
  border-color: rgba(79, 138, 90, 0.4);
  background: var(--ok-p);
  color: #72cf85;
}
.line-chip.inactive {
  opacity: 0.55;
}

/* ── MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-hd {
  padding: 18px 24px;
  border-bottom: 1px solid var(--bo);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-hd h3 {
  color: var(--gold);
  font-size: 20px;
}
.modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--ink-mut);
  font-size: 22px;
  cursor: pointer;
}
.modal-close:hover {
  color: #fff;
}

/* ── TABS INSIDE PANELS ── */
.subtabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--bo);
  margin-bottom: 16px;
}
.subtab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mut);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}
.subtab:hover {
  color: var(--ink);
}
.subtab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 600;
}

/* ── ПОЛНЫЙ КАТАЛОГ / РАЗБОР КЛИЕНТА (DOSSIER) ── */
.dossier-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dossier-header-card {
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.12) 0%, rgba(34, 38, 45, 0.95) 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
}
.dossier-section {
  background: var(--surface);
  border: 1px solid var(--bo);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.dossier-section-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--bo);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.dossier-section-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--gold);
  font-weight: 700;
}
.dossier-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
}
.dossier-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.dossier-meta-item {
  background: var(--surface-alt);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bo);
}
.dossier-meta-item .lbl {
  font-size: 11px;
  color: var(--ink-mut);
  text-transform: uppercase;
  font-weight: 600;
}
.dossier-meta-item .val {
  font-size: 16px;
  color: var(--ink);
  font-weight: 600;
  margin-top: 2px;
}

/* ── ДИЗАЙН ЧЕЛОВЕКА (HUMAN DESIGN) ── */
.hd-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .hd-grid { grid-template-columns: 1fr; }
}
.hd-svg-box {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hd-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-alt);
  border: 1px solid var(--bo);
}
.hd-badge.defined {
  background: var(--gold-p);
  color: var(--gold);
  border-color: var(--gold);
}
.hd-badge.open {
  background: transparent;
  color: var(--ink-soft);
}

/* ── ПЕЧАТЬ И PDF ВЕРСТКА ── */
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 12mm 12mm 12mm;
  }
  body {
    background: #ffffff !important;
    color: #1a1a1a !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 10.5pt !important;
    line-height: 1.5 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .sidebar, .topbar, .btn, .no-print, .btn-group, .dossier-toolbar, .subtabs, .modal-close, #importFileInput, .topbar-actions, .nav {
    display: none !important;
  }
  .app {
    display: block !important;
  }
  .main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .content-body {
    padding: 0 !important;
  }
  .dossier-container {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .dossier-header-card {
    background: #faf8f5 !important;
    color: #111111 !important;
    border: 1.5px solid #c8a86b !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 20px !important;
  }
  .dossier-header-card h1 {
    color: #111111 !important;
    font-size: 26px !important;
    margin-bottom: 4px !important;
  }
  .dossier-meta-grid {
    border-top: 1px solid #e0d6c3 !important;
    border-bottom: 1px solid #e0d6c3 !important;
    padding: 8px 0 !important;
    margin-top: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
  }
  .dossier-meta-item .lbl {
    font-size: 9px !important;
    color: #666666 !important;
  }
  .dossier-meta-item .val {
    font-size: 13px !important;
    color: #111111 !important;
    font-weight: 700 !important;
  }
  .dossier-section {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e2e4e8 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 20px !important;
    padding: 16px 20px !important;
  }
  .dossier-section-title {
    color: #8a6a24 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
  }
  .dossier-page-break {
    page-break-after: always;
    break-after: page;
  }
  .dossier-section:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }
  
  /* ЦВЕТА И БЕЙДЖИ В ПЕЧАТИ */
  .badge {
    border: 1px solid currentColor !important;
    background: transparent !important;
  }
  .hd-col-design {
    background: #fff5f6 !important;
    border: 1px solid #ff758c !important;
  }
  .hd-col-personality {
    background: #fdfbf7 !important;
    border: 1px solid #c8a86b !important;
  }
  .hd-gate-badge.design {
    color: #b8253e !important;
    background: #ffebee !important;
    border: 1px solid #ff758c !important;
    font-weight: 700 !important;
  }
  .hd-gate-badge.personality {
    color: #7d5e1a !important;
    background: #fdf8eb !important;
    border: 1px solid #c8a86b !important;
    font-weight: 700 !important;
  }
  .matching-badge-closed {
    color: #1b6d32 !important;
    background: #e8f5e9 !important;
    border: 1px solid #81c784 !important;
  }
  .matching-badge-channel {
    color: #7d5e1a !important;
    background: #fdf8eb !important;
    border: 1px solid #c8a86b !important;
  }

  /* СЕТКА ПЛАНЕТ В ПЕЧАТИ */
  .hd-planets-table, div[style*="grid-template-columns: 260px 1fr 260px"] {
    grid-template-columns: 1fr 1.1fr 1fr !important;
    gap: 10px !important;
  }

  /* МАТРИЦА 3x3 В ПЕЧАТИ */
  .matrix-table {
    border: 1.5px solid #c8a86b !important;
  }
  .matrix-cell {
    background: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
  }
  .matrix-cell.empty {
    background: #f8f9fa !important;
  }
  .matrix-cell .cell-num {
    color: #888888 !important;
  }
  .d-birth {
    color: #8a6a24 !important;
    font-weight: 700 !important;
  }
  .d-action {
    color: #b8253e !important;
    font-weight: 700 !important;
  }
  .d-real {
    color: #1d5f94 !important;
    font-weight: 700 !important;
  }
  .d-outcome {
    color: #2e7d32 !important;
    font-weight: 700 !important;
  }

  /* SVG БОДИГРАФ В ПЕЧАТИ */
  .hd-svg-box svg text {
    fill: #ffffff !important;
    font-weight: bold !important;
  }
  .hd-svg-box svg line {
    stroke: #888888 !important;
  }
}

/* ── HD PLANETARY ACTIVATIONS ── */
.hd-planets-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.hd-col-design {
  background: rgba(214, 93, 112, 0.06);
  border: 1px solid rgba(214, 93, 112, 0.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.hd-col-personality {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--bo);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.hd-planet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
}
.hd-planet-row:last-child {
  border-bottom: none;
}
.hd-gate-badge {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 13px;
  padding: 1px 6px;
  border-radius: 4px;
}
.hd-gate-badge.design {
  color: #ff758c;
  background: rgba(214, 93, 112, 0.2);
}
.hd-gate-badge.personality {
  color: var(--gold);
  background: var(--gold-p);
}
.matching-card {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 16px;
}
.matching-badge-closed {
  background: rgba(114, 207, 133, 0.15);
  color: #72cf85;
  border: 1px solid rgba(114, 207, 133, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
}
.matching-badge-channel {
  background: var(--gold-p);
  color: var(--gold);
  border: 1px solid rgba(200, 168, 107, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
}

/* ── ДИНАМИКА КРИЗИСА И РОСТА (+1 / -1 И ТРИАДЫ +3) ── */
.dynamics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.dynamics-card {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dynamics-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.dynamics-card.stress {
  border-left: 4px solid var(--bordeaux-l);
  background: linear-gradient(180deg, rgba(214, 93, 112, 0.06) 0%, var(--surface-alt) 100%);
}
.dynamics-card.growth {
  border-left: 4px solid #72cf85;
  background: linear-gradient(180deg, rgba(114, 207, 133, 0.06) 0%, var(--surface-alt) 100%);
}
.dynamics-card.triad {
  border-left: 4px solid var(--gold);
  background: linear-gradient(180deg, rgba(200, 168, 107, 0.06) 0%, var(--surface-alt) 100%);
}
.triad-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.triad-step-chip {
  background: var(--surface);
  border: 1px solid var(--bo);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: center;
  flex: 1;
  min-width: 80px;
}
.triad-step-chip.active {
  border-color: var(--gold);
  background: var(--gold-p);
}

/* ── ОБЛАКО СИМПТОМОВ (СЕМАНТИЧЕСКИЙ НАВИГАТОР) ── */
.symptom-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.symptom-chip {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}
.symptom-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.symptom-chip.active {
  background: var(--gold-p);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}
.symptom-solution-box {
  background: var(--surface-alt);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

/* ── ПРЕМИУМ ТИТУЛЬНЫЙ ЛИСТ ДОСЬЕ ДЛЯ ПЕЧАТИ ── */
.dossier-cover-page {
  display: none;
}
@media print {
  .dossier-cover-page {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    height: 96vh;
    padding: 60px 40px;
    box-sizing: border-box;
    border: 3px double #c8a86b !important;
    border-radius: 8px;
    text-align: center;
    background: #ffffff !important;
    page-break-after: always !important;
    break-after: page !important;
  }
  .cover-logo-box {
    margin-top: 40px;
  }
  .cover-logo-emblem {
    font-size: 52px;
    font-weight: 800;
    font-family: 'Fraunces', serif;
    color: #8a6a24 !important;
    letter-spacing: 4px;
  }
  .cover-sub-brand {
    font-size: 13pt;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #666666 !important;
    margin-top: 8px;
  }
  .cover-title-box {
    margin: 80px 0;
  }
  .cover-dossier-title {
    font-size: 26pt;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    color: #111111 !important;
    margin-bottom: 12px;
    line-height: 1.2;
  }
  .cover-client-name {
    font-size: 32pt;
    font-family: 'Fraunces', serif;
    font-weight: 800;
    color: #8a6a24 !important;
    margin-bottom: 20px;
  }
  .cover-meta-card {
    border-top: 1px solid #c8a86b !important;
    border-bottom: 1px solid #c8a86b !important;
    padding: 16px 0;
    display: inline-block;
    min-width: 400px;
    font-size: 12pt;
    color: #333333 !important;
    line-height: 1.8;
  }
  .cover-footer-box {
    margin-bottom: 30px;
    font-size: 10pt;
    color: #777777 !important;
    border-top: 1px solid #eeeeee;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
  }
}


/* ═══════════════════════════════════════════════════════════════
   АДАПТАЦИЯ К МОБИЛЬНЫМ УСТРОЙСТВАМ И СПЕЦИФИКЕ IPHONE (iOS Safari)
   ═══════════════════════════════════════════════════════════════ */

/* Кнопка вызова мобильного меню (бургер) */
.mobile-menu-btn {
  display: none;
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  color: var(--gold);
  font-size: 22px;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Кнопка закрытия сайдбара на мобильном */
.sidebar-close-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--ink-mut);
  font-size: 22px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Затемняющий оверлей за сайдбаром */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, 0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 998;
  -webkit-tap-highlight-color: transparent;
}

/* Предотвращение проблем с высотой и скроллом на iOS */
html, body {
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}
.app {
  min-height: 100vh;
  min-height: 100dvh;
}



/* ═══════════════════════════════════════════════════════════════
   АДАПТИВНЫЕ МАКЕТЫ WEY TO (RESPONSIVE GRID LAYOUTS)
   ═══════════════════════════════════════════════════════════════ */

/* 1. Human Design 3-колоночный макет (Дизайн / Бодиграф / Личность) */
.hd-3col-layout {
  display: grid;
  grid-template-columns: 270px 1fr 270px;
  gap: 16px;
  margin-bottom: 24px;
  align-items: start;
}

/* 2. Матрица Судьбы (22) макет (Октаграмма / Линии и Арканы) */
.matrix-destiny-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 24px;
}

/* 3. Групповые расчеты (Дефициты / Переизбыток) */
.group-dyn-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
}

/* 4. Расчет Имени и Страны */
.name-country-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* 5. Шкала 9 частот */
.freq-9-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  text-align: center;
}

.topbar-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Адаптивные медиа-запросы для планшетов и смартфонов (iPhone) */
@media (max-width: 900px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .app, .main, .content-body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
  }
  .sidebar-close-btn {
    display: inline-flex !important;
  }
  .sidebar-backdrop {
    display: block !important;
  }

  /* Выдвижной сайдбар (Drawer) */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -320px !important;
    width: 290px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding-top: max(12px, env(safe-area-inset-top, 12px)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    padding-left: max(14px, env(safe-area-inset-left, 14px)) !important;
    z-index: 9999 !important;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.7) !important;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar.mobile-open {
    left: 0 !important;
  }

  .main {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Шапка на смартфонах: двухстрочная, компактная, без горизонтального расползания */
  .topbar {
    height: auto !important;
    min-height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: max(10px, env(safe-area-inset-top, 10px)) max(12px, env(safe-area-inset-right, 12px)) 10px max(12px, env(safe-area-inset-left, 12px)) !important;
    gap: 8px !important;
  }

  .topbar-row-header {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .topbar-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .topbar-actions select,
  .topbar-actions input[type="date"] {
    max-width: 100% !important;
    font-size: 14px !important;
  }

  /* 1. Human Design: на мобильном бодиграф сверху, а планеты следуют ниже */
  .hd-3col-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  .hd-3col-layout > :nth-child(2) {
    order: 1 !important; /* Центральный бодиграф SVG идет первым */
    width: 100% !important;
  }
  .hd-3col-layout > :nth-child(1) {
    order: 2 !important; /* Дизайн (Тело) вторым */
    width: 100% !important;
  }
  .hd-3col-layout > :nth-child(3) {
    order: 3 !important; /* Личность (Ум) третьим */
    width: 100% !important;
  }

  /* 2. Матрица Судьбы: октаграмма сверху, расшифровка под ней */
  .matrix-destiny-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 3. Групповые расчеты: в 1 колонку */
  .group-dyn-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 4. Имя и Страна: в 1 колонку */
  .name-country-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 5. Сетка частотности */
  .freq-9-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
  }

  /* SVG Бодиграфа и Матрицы не вылезают за границы экрана */
  svg {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 768px) {
  /* Защита от авто-зума на iPhone при клике в input/select */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Отступы контента с учетом нижнего Home Indicator на iPhone */
  .content-body {
    padding: 12px max(10px, env(safe-area-inset-right, 10px)) max(32px, env(safe-area-inset-bottom, 32px)) max(10px, env(safe-area-inset-left, 10px)) !important;
  }

  /* Кнопки на мобильном: не распирают экран в ширину, переносятся аккуратно */
  .btn {
    min-height: 42px !important;
    padding: 8px 12px !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    line-height: 1.3 !important;
    touch-action: manipulation !important;
  }

  /* Быстрые действия на Дашборде: ровная плитка по 2 кнопки в ряд */
  .db-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .db-actions .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 130px !important;
    font-size: 12px !important;
    justify-content: center !important;
  }

  /* Hero-шапка клиента на Дашборде */
  .db-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  .db-av {
    width: 48px !important;
    height: 48px !important;
    font-size: 18px !important;
  }
  .db-hnm {
    font-size: 18px !important;
  }

  /* Мини-карта расчетов CU, CD, CR, CI на Дашборде: аккуратная сетка 2x2 */
  .db-calc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .db-num-cell {
    padding: 8px !important;
  }
  .db-num-cell .val {
    font-size: 22px !important;
  }

  /* 4 базовых числа на вкладке Анализ */
  .numbers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .number-card {
    padding: 12px !important;
  }
  .number-card .val {
    font-size: 26px !important;
  }

  /* Матрица 3x3 от рождения: вертикальная сборка */
  .matrix-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .matrix-legend {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Навигация в сайдбаре: удобный палец */
  .nav-item {
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  /* Модальные окна на iPhone: во весь экран со скроллом */
  .modal-box, .modal-dialog {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 85vh !important;
    max-height: 85dvh !important;
    margin: auto !important;
    padding: 16px !important;
    border-radius: 14px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Сетки дашборда сворачиваются в 1 колонку */
  .db-grid, .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* Карточки клиентов в картотеке */
  .cb-hrow {
    display: none !important;
  }
  .cb-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  /* Горизонтальная прокрутка для фильтров и чипов без полосы */
  .subtabs, .chips, .tab-bar-scroll {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .subtabs::-webkit-scrollbar, .chips::-webkit-scrollbar, .tab-bar-scroll::-webkit-scrollbar {
    display: none !important;
  }
}

@media (max-width: 380px) {
  /* Сверх-компактные экраны (iPhone SE, iPhone mini) */
  .numbers-grid {
    grid-template-columns: 1fr !important;
  }
  .db-calc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .db-actions .btn {
    flex: 1 1 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   КОММЕРЧЕСКИЙ ОТЧЕТ WEY TO (КНИГИ 1, 2, 3) — ПРЕМИАЛЬНАЯ ВЕРСТКА A4
   ═══════════════════════════════════════════════════════════════ */
.commercial-dossier {
  max-width: 960px;
  margin: 0 auto;
  color: var(--ink, #f0f3f6);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 4 Ключевых Числа */
.grid-4-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.num-card {
  background: var(--surface-alt, #1c2128);
  padding: 14px 12px;
  border-radius: var(--radius-sm, 8px);
  text-align: center;
  border: 1.5px solid var(--bo, #30363d);
}
.num-card.num-gold { border-color: var(--gold, #c5a059); }
.num-card.num-bordeaux { border-color: var(--bordeaux-l, #ff758c); }
.num-card.num-blue { border-color: var(--blue-l, #60a5fa); }
.num-card.num-green { border-color: #72cf85; }

.num-card .num-tag {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.num-card.num-gold .num-tag { color: var(--gold, #c5a059); }
.num-card.num-bordeaux .num-tag { color: var(--bordeaux-l, #ff758c); }
.num-card.num-blue .num-tag { color: var(--blue-l, #60a5fa); }
.num-card.num-green .num-tag { color: #72cf85; }

.num-card .num-val {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
}
.num-card.num-gold .num-val { color: var(--gold, #c5a059); }
.num-card.num-bordeaux .num-val { color: var(--bordeaux-l, #ff758c); }
.num-card.num-blue .num-val { color: var(--blue-l, #60a5fa); }
.num-card.num-green .num-val { color: #72cf85; }

.num-card .num-comp {
  font-size: 11.5px;
  color: var(--ink-mut, #8b949e);
  margin-top: 2px;
}
.num-card .num-desc {
  font-size: 11px;
  color: var(--ink-soft, #c9d1d9);
  margin-top: 6px;
  line-height: 1.4;
}

/* Триада атрибутов */
.meta-triad-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.triad-item {
  background: var(--surface-alt, #1c2128);
  border: 1px solid var(--bo, #30363d);
  padding: 14px 16px;
  border-radius: var(--radius-sm, 8px);
}
.triad-lbl {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold, #c5a059);
  margin-bottom: 4px;
}
.triad-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #fff);
}
.triad-note {
  font-size: 11px;
  color: var(--ink-mut, #8b949e);
  margin-top: 4px;
  line-height: 1.4;
}

/* Финансово-солярный баннер */
.finance-rhythm-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.fr-col {
  background: var(--surface-alt, #1c2128);
  border: 1px solid var(--bo, #30363d);
  padding: 14px 18px;
  border-radius: var(--radius-sm, 8px);
}
.fr-label {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mut, #8b949e);
  margin-bottom: 4px;
}
.fr-val {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
}
.fr-val.gold { color: var(--gold, #c5a059); letter-spacing: 2px; }
.fr-desc {
  font-size: 11.5px;
  color: var(--ink-mut, #8b949e);
  margin-top: 4px;
}

/* Карточки выносок (Callouts) */
.callout {
  border-left: 3.5px solid var(--gold, #c5a059);
  background: var(--surface-alt, #1c2128);
  padding: 14px 18px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.callout.callout-gold { border-left-color: var(--gold, #c5a059); }
.callout.callout-bordeaux { border-left-color: var(--bordeaux-l, #ff758c); }
.callout.callout-blue { border-left-color: var(--blue-l, #60a5fa); }
.callout.callout-green { border-left-color: #72cf85; }

.callout-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.callout.callout-gold .callout-title { color: var(--gold, #c5a059); }
.callout.callout-bordeaux .callout-title { color: var(--bordeaux-l, #ff758c); }
.callout.callout-blue .callout-title { color: var(--blue-l, #60a5fa); }
.callout.callout-green .callout-title { color: #72cf85; }

.callout-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink, #f0f3f6);
  margin: 0;
}

/* Подблоки */
.sub-block {
  background: rgba(197, 160, 89, 0.05);
  border: 1px dashed rgba(197, 160, 89, 0.35);
  padding: 12px 16px;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 16px;
}
.sub-block-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--gold, #c5a059);
  margin-bottom: 6px;
}
.sub-block-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink, #f0f3f6);
  margin: 0;
}

/* 2-колоночные сетки */
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.card {
  background: var(--surface-alt, #1c2128);
  border: 1px solid var(--bo, #30363d);
  padding: 14px 16px;
  border-radius: var(--radius-sm, 8px);
}
.card-green { border-left: 3px solid #72cf85; }
.card-bordeaux { border-left: 3px solid var(--bordeaux-l, #ff758c); }
.card-hd {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.card-green .card-hd { color: #72cf85; }
.card-bordeaux .card-hd { color: var(--bordeaux-l, #ff758c); }
.card-bd {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink, #f0f3f6);
}

/* Кармический баннер */
.karmic-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.12), rgba(197, 160, 89, 0.03));
  border: 1px solid var(--gold, #c5a059);
  padding: 14px 18px;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 18px;
}
.kb-icon { font-size: 24px; line-height: 1; }
.kb-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold, #c5a059);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.kb-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink, #f0f3f6);
}

/* Карточка синтеза Ум x Действие */
.synthesis-card {
  background: var(--surface-alt, #1c2128);
  border: 1.5px solid var(--gold, #c5a059);
  padding: 16px 20px;
  border-radius: var(--radius, 10px);
  margin-bottom: 20px;
}
.sc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sc-badge {
  background: var(--gold, #c5a059);
  color: #12151a;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}
.sc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold, #c5a059);
}
.sc-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink, #f0f3f6);
  margin: 0;
}

/* 3 колонки карьеры */
.grid-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.career-card {
  background: var(--surface-alt, #1c2128);
  border: 1px solid var(--bo, #30363d);
  border-radius: var(--radius-sm, 8px);
  padding: 14px;
}
.cc-hd {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cc-hd.gold { color: var(--gold, #c5a059); }
.cc-hd.blue { color: var(--blue-l, #60a5fa); }
.cc-hd.red { color: #ff758c; }
.cc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft, #c9d1d9);
}
.cc-list li {
  margin-bottom: 8px;
}
.cc-list li b {
  color: var(--ink, #fff);
  display: block;
}

/* Соматическая дисциплина */
.body-discipline-box {
  background: rgba(96, 165, 250, 0.06);
  border: 1px solid rgba(96, 165, 250, 0.35);
  padding: 14px 18px;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 18px;
}
.bdb-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 6px;
}
.bdb-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink, #f0f3f6);
  margin: 0;
}

/* Блоки циклов */
.cycle-box {
  background: var(--surface-alt, #1c2128);
  padding: 16px;
  border-radius: var(--radius-sm, 8px);
  border: 1.5px solid var(--bo, #30363d);
}
.cycle-plus { border-color: #72cf85; }
.cycle-minus { border-color: var(--bordeaux-l, #ff758c); }
.cb-hd {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cycle-plus .cb-hd { color: #72cf85; }
.cycle-minus .cb-hd { color: var(--bordeaux-l, #ff758c); }
.cb-lead {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #fff);
  margin-bottom: 6px;
}
.cb-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft, #c9d1d9);
  margin: 0;
}

/* Триада шага */
.triad-step-card {
  background: var(--surface-alt, #1c2128);
  border: 1px solid var(--bo, #30363d);
  padding: 16px 20px;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 18px;
}
.tsc-hd {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold, #c5a059);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.tsc-flow {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 14px;
}
.flow-node {
  text-align: center;
}
.fn-badge {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  background: var(--surface, #12151a);
  border: 2px solid var(--gold, #c5a059);
  border-radius: 50%;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold, #c5a059);
  margin-bottom: 6px;
}
.fn-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #fff);
}
.fn-sub {
  font-size: 10.5px;
  color: var(--ink-mut, #8b949e);
}
.flow-arrow {
  font-size: 22px;
  color: var(--gold, #c5a059);
}
.tsc-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft, #c9d1d9);
  margin: 0;
  text-align: center;
}

/* Мудрость */
.wisdom-card {
  background: rgba(114, 207, 133, 0.06);
  border: 1px solid rgba(114, 207, 133, 0.35);
  padding: 14px 18px;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 18px;
}
.wc-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #72cf85;
  margin-bottom: 6px;
}
.wc-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink, #f0f3f6);
  margin: 0;
}

/* Сетка Матрицы 3x3 */
.matrix-overview-box {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--surface-alt, #1c2128);
  border: 1px solid var(--bo, #30363d);
  padding: 18px 22px;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 20px;
}
.matrix-grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 6px;
}
.mg-cell {
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1.5px solid var(--bo, #30363d);
  background: var(--surface, #12151a);
}
.mg-cell.mg-has {
  border-color: #72cf85;
  background: rgba(114, 207, 133, 0.1);
}
.mg-cell.mg-absent {
  border-color: rgba(255, 117, 140, 0.4);
  background: rgba(255, 117, 140, 0.05);
}
.mg-digit {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 700;
}
.mg-cell.mg-has .mg-digit { color: #72cf85; }
.mg-cell.mg-absent .mg-digit { color: #ff758c; opacity: 0.6; }
.mg-count {
  font-size: 10px;
  color: var(--ink-mut, #8b949e);
  margin-top: 1px;
}
.matrix-legend {
  font-size: 12px;
  color: var(--ink-soft, #c9d1d9);
  line-height: 1.6;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
.dot-green { background: #72cf85; }
.dot-red { background: #ff758c; }

/* Карточки цифр матрицы */
.matrix-analysis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.mac-card {
  background: var(--surface-alt, #1c2128);
  border: 1px solid var(--bo, #30363d);
  padding: 12px 16px;
  border-radius: var(--radius-sm, 8px);
}
.mac-card.mac-present { border-left: 3.5px solid #72cf85; }
.mac-card.mac-absent { border-left: 3.5px solid #ff758c; }
.mac-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.mac-num {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 700;
  color: #72cf85;
}
.mac-num.absent { color: #ff758c; }
.mac-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #fff);
}
.mac-title.absent { color: #ff758c; }
.mac-bd {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft, #c9d1d9);
}

/* Синергии */
.synergy-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.syn-card {
  padding: 12px 16px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--bo, #30363d);
}
.syn-gift {
  background: rgba(114, 207, 133, 0.08);
  border-color: rgba(114, 207, 133, 0.4);
}
.syn-advice {
  background: rgba(197, 160, 89, 0.08);
  border-color: rgba(197, 160, 89, 0.4);
}
.syn-warning {
  background: rgba(255, 117, 140, 0.08);
  border-color: rgba(255, 117, 140, 0.4);
}
.syn-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.syn-gift .syn-title { color: #72cf85; }
.syn-advice .syn-title { color: var(--gold, #c5a059); }
.syn-warning .syn-title { color: #ff758c; }
.syn-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink, #f0f3f6);
  margin: 0;
}

/* Линии */
.lines-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.line-detail-card {
  background: var(--surface-alt, #1c2128);
  border: 1px solid var(--bo, #30363d);
  padding: 14px 18px;
  border-radius: var(--radius-sm, 8px);
}
.line-detail-card.line-active {
  border-left: 3.5px solid var(--gold, #c5a059);
}
.ldc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ldc-badge {
  background: var(--gold, #c5a059);
  color: #12151a;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
}
.ldc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #fff);
  flex: 1;
}
.ldc-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold, #c5a059);
}
.ldc-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft, #c9d1d9);
  margin: 0;
}

/* Нумерология Имени (Книга 3) */
.name-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.n-card {
  background: var(--surface-alt, #1c2128);
  padding: 14px;
  border-radius: var(--radius-sm, 8px);
  border: 1.5px solid var(--bo, #30363d);
  text-align: center;
}
.n-card.gold { border-color: var(--gold, #c5a059); }
.n-card.blue { border-color: var(--blue-l, #60a5fa); }
.n-card.bordeaux { border-color: var(--bordeaux-l, #ff758c); }
.n-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.n-card.gold .n-label { color: var(--gold, #c5a059); }
.n-card.blue .n-label { color: var(--blue-l, #60a5fa); }
.n-card.bordeaux .n-label { color: var(--bordeaux-l, #ff758c); }
.n-val {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}
.n-card.gold .n-val { color: var(--gold, #c5a059); }
.n-card.blue .n-val { color: var(--blue-l, #60a5fa); }
.n-card.bordeaux .n-val { color: var(--bordeaux-l, #ff758c); }
.n-sub {
  font-size: 11px;
  color: var(--ink-mut, #8b949e);
  margin-top: 2px;
}
.n-desc {
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-soft, #c9d1d9);
  margin-top: 8px;
}

/* Финансовый код */
.money-code-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface-alt, #1c2128);
  border: 2px solid var(--gold, #c5a059);
  padding: 18px 24px;
  border-radius: var(--radius, 10px);
  margin-bottom: 18px;
}
.mcb-number {
  font-family: 'Fraunces', serif;
  font-size: 44px;
  font-weight: 800;
  color: var(--gold, #c5a059);
  letter-spacing: 4px;
  line-height: 1;
}
.mcb-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #fff);
  margin-bottom: 4px;
}
.mcb-sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-mut, #8b949e);
}

.grid-4-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.step-card {
  background: var(--surface-alt, #1c2128);
  border: 1px solid var(--bo, #30363d);
  padding: 12px;
  border-radius: var(--radius-sm, 8px);
  text-align: center;
}
.sc-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold, #c5a059);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.sc-num {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--gold, #c5a059);
}
.sc-desc {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-soft, #c9d1d9);
  margin-top: 4px;
}

.money-rules-card {
  background: rgba(197, 160, 89, 0.05);
  border: 1px solid rgba(197, 160, 89, 0.35);
  padding: 16px 20px;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 18px;
}
.mrc-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold, #c5a059);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mrc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink, #f0f3f6);
}
.mrc-list li {
  margin-bottom: 6px;
}

/* Прогноз */
.forecast-block {
  background: var(--surface-alt, #1c2128);
  border: 1px solid var(--bo, #30363d);
  padding: 16px 20px;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 16px;
}
.forecast-year { border-left: 3.5px solid var(--gold, #c5a059); }
.forecast-month { border-left: 3.5px solid #60a5fa; }
.fb-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.fb-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}
.forecast-year .fb-tag { background: var(--gold, #c5a059); color: #12151a; }
.forecast-month .fb-tag { background: #60a5fa; color: #12151a; }
.fb-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #fff);
}
.fb-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink, #f0f3f6);
  margin: 0;
}

/* 5 Правил Жизни */
.rules-five-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.rule-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface-alt, #1c2128);
  border: 1px solid var(--bo, #30363d);
  padding: 14px 18px;
  border-radius: var(--radius-sm, 8px);
}
.rb-num {
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: var(--gold, #c5a059);
  color: #12151a;
  border-radius: 50%;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.rb-hd {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #fff);
  margin-bottom: 4px;
}
.rb-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft, #c9d1d9);
}

.final-sign-card {
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.15), rgba(197, 160, 89, 0.03));
  border: 1.5px solid var(--gold, #c5a059);
  padding: 20px 24px;
  border-radius: var(--radius, 10px);
  text-align: center;
  margin-top: 10px;
}
.fsc-quote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gold, #c5a059);
  margin-bottom: 10px;
}
.fsc-author {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink, #fff);
}

/* ═══════════════════════════════════════════════════════════════
   ПЕЧАТЬ И PDF (СТРОГО A4)
   ═══════════════════════════════════════════════════════════════ */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm 10mm;
  }
  body, html {
    background: #fff !important;
    color: #1a1e24 !important;
  }
  .commercial-dossier {
    max-width: 100% !important;
    color: #1a1e24 !important;
  }
  .commercial-dossier * {
    color: #1a1e24 !important;
  }
  .num-card, .triad-item, .fr-col, .card, .career-card, .cycle-box,
  .triad-step-card, .matrix-overview-box, .mac-card, .line-detail-card,
  .n-card, .step-card, .forecast-block, .rule-box {
    background: #fff !important;
    border-color: #d0d7de !important;
    box-shadow: none !important;
    break-inside: avoid !important;
  }
  .callout {
    background: #f6f8fa !important;
  }
  .fn-badge {
    background: #fff !important;
    border-color: #8c6d2d !important;
    color: #8c6d2d !important;
  }
  .rb-num {
    background: #8c6d2d !important;
    color: #fff !important;
  }
  .fsc-quote, .num-val, .mcb-number, .gold {
    color: #8c6d2d !important;
  }
  .dossier-page-break {
    page-break-after: always !important;
    break-after: page !important;
  }
  .dossier-section:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   КОМПАКТНАЯ ВЕРСТКА: РОСКОШНЫЕ 5 ЛИСТОВ А4 БЕЗ ПУСТЫХ МЕСТ
   ═══════════════════════════════════════════════════════════════ */
.compact-layout {
  max-width: 920px;
  margin: 0 auto;
}

.compact-layout .dossier-page {
  background: var(--surface, #12151a);
  border: 1px solid var(--bo, #30363d);
  border-radius: var(--radius, 10px);
  padding: 24px 28px;
  margin-bottom: 24px;
  position: relative;
}

/* Шапка страницы 1 */
.compact-header-banner {
  border-bottom: 1.5px solid var(--gold, #c5a059);
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.chb-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.chb-logo {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--gold, #c5a059);
  letter-spacing: 2px;
}
.chb-badge {
  background: rgba(197, 160, 89, 0.15);
  color: var(--gold, #c5a059);
  border: 1px solid var(--gold, #c5a059);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}
.chb-date {
  font-size: 11px;
  color: var(--ink-mut, #8b949e);
}
.chb-client-name {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink, #fff);
  margin: 0 0 6px 0;
  line-height: 1.2;
}
.chb-formula-line {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-soft, #c9d1d9);
}
.chb-formula-line b {
  color: var(--gold, #c5a059);
}

.compact-numbers {
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.compact-numbers .num-card {
  padding: 10px 8px !important;
}
.compact-numbers .num-val {
  font-size: 28px !important;
}
.compact-numbers .num-desc {
  font-size: 10px !important;
  margin-top: 4px !important;
}

.compact-triad {
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.compact-triad .triad-item {
  padding: 10px 12px !important;
}
.compact-triad .triad-lbl {
  font-size: 10px !important;
}
.compact-triad .triad-val {
  font-size: 13px !important;
}
.compact-triad .triad-note {
  font-size: 10px !important;
}

.compact-fr {
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.compact-fr .fr-col {
  padding: 10px 14px !important;
}
.compact-fr .fr-val {
  font-size: 22px !important;
}
.compact-fr .fr-desc {
  font-size: 10.5px !important;
}

.page-footer-note {
  text-align: center;
  font-size: 10px;
  color: var(--ink-mut, #8b949e);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--bo, #30363d);
}

/* Заголовок разделов */
.section-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid var(--gold, #c5a059);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.section-title-bar h2 {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--gold, #c5a059);
  margin: 0;
}

/* Плотные группы */
.dense-group {
  margin-bottom: 12px;
}
.dense-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.dense-header .dh-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #fff);
}
.dense-header.gold .dh-title { color: var(--gold, #c5a059); }
.dense-header.bordeaux .dh-title { color: var(--bordeaux-l, #ff758c); }
.dense-header .dh-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-mut, #8b949e);
}
.dense-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink, #f0f3f6);
  margin: 0 0 8px 0;
}

.day-micro-card, .cdcomp-micro-card {
  background: rgba(197, 160, 89, 0.05);
  border-left: 2.5px solid var(--gold, #c5a059);
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 8px;
  border-radius: 0 4px 4px 0;
}
.cdcomp-micro-card {
  border-left-color: var(--bordeaux-l, #ff758c);
  background: rgba(255, 117, 140, 0.05);
}

.compact-grid {
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.compact-card {
  padding: 8px 12px !important;
}
.compact-card .card-hd {
  font-size: 11px !important;
  margin-bottom: 4px !important;
}
.compact-card .card-bd {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

.compact-karmic {
  padding: 8px 12px !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.compact-karmic .kb-icon { font-size: 18px !important; }
.compact-karmic .kb-title { font-size: 10.5px !important; margin-bottom: 2px !important; }
.compact-karmic .kb-text { font-size: 12px !important; line-height: 1.45 !important; }

.compact-synthesis {
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
}
.compact-synthesis .sc-header { margin-bottom: 4px !important; }
.compact-synthesis .sc-title { font-size: 12.5px !important; }
.compact-synthesis .sc-text { font-size: 12px !important; line-height: 1.5 !important; }

.compact-grid-3 {
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.compact-grid-3 .career-card {
  padding: 10px !important;
}
.compact-grid-3 .cc-hd {
  font-size: 10.5px !important;
  margin-bottom: 6px !important;
}
.compact-grid-3 .cc-list {
  font-size: 11px !important;
  line-height: 1.4 !important;
}
.compact-grid-3 .cc-list li { margin-bottom: 4px !important; }

.compact-bdb {
  padding: 8px 12px !important;
  margin-bottom: 10px !important;
}
.compact-bdb .bdb-title { font-size: 11px !important; margin-bottom: 3px !important; }
.compact-bdb .bdb-text { font-size: 11.5px !important; line-height: 1.45 !important; }

.compact-cycle {
  padding: 10px 12px !important;
}
.compact-cycle .cb-hd { font-size: 10.5px !important; margin-bottom: 2px !important; }
.compact-cycle .cb-lead { font-size: 11.5px !important; margin-bottom: 2px !important; }
.compact-cycle .cb-desc { font-size: 11px !important; line-height: 1.4 !important; }

.compact-tsc {
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
}
.compact-tsc .tsc-hd { font-size: 11.5px !important; margin-bottom: 8px !important; }
.compact-tsc .tsc-flow { margin-bottom: 0 !important; }
.compact-tsc .fn-badge { width: 32px !important; height: 32px !important; line-height: 32px !important; font-size: 16px !important; margin-bottom: 2px !important; }
.compact-tsc .fn-label { font-size: 11px !important; }
.compact-tsc .flow-arrow { font-size: 16px !important; }

.compact-callout {
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
}
.compact-callout .callout-title { font-size: 11px !important; margin-bottom: 3px !important; }
.compact-callout .callout-text { font-size: 11.5px !important; line-height: 1.45 !important; }

.compact-mob {
  padding: 12px 16px !important;
  gap: 16px !important;
  margin-bottom: 10px !important;
}
.compact-mob .matrix-grid-3x3 {
  grid-template-columns: repeat(3, 48px) !important;
  gap: 4px !important;
}
.compact-mob .mg-cell {
  width: 48px !important;
  height: 48px !important;
}
.compact-mob .mg-digit { font-size: 17px !important; }
.compact-mob .mg-count { font-size: 9px !important; }

.compact-synergy {
  margin-bottom: 10px !important;
  gap: 6px !important;
}
.compact-synergy .syn-card {
  padding: 8px 12px !important;
}
.compact-synergy .syn-title { font-size: 11px !important; margin-bottom: 2px !important; }
.compact-synergy .syn-text { font-size: 11.5px !important; line-height: 1.45 !important; }

.lines-compact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.line-micro-card {
  background: var(--surface-alt, #1c2128);
  border: 1px solid var(--bo, #30363d);
  padding: 8px 10px;
  border-radius: var(--radius-sm, 6px);
}
.line-micro-card.lmc-active {
  border-left: 2.5px solid var(--gold, #c5a059);
}
.lmc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.lmc-badge {
  background: var(--gold, #c5a059);
  color: #12151a;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
}
.lmc-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink, #fff);
  flex: 1;
}
.lmc-status {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold, #c5a059);
}
.lmc-desc {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-soft, #c9d1d9);
}

.compact-name-grid {
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.compact-n {
  padding: 8px !important;
}
.compact-n .n-label { font-size: 10px !important; margin-bottom: 2px !important; }
.compact-n .n-val { font-size: 24px !important; }
.compact-n .n-desc { font-size: 10px !important; margin-top: 4px !important; line-height: 1.35 !important; }

.compact-mcb {
  padding: 10px 16px !important;
  gap: 14px !important;
  margin-bottom: 10px !important;
}
.compact-mcb .mcb-number { font-size: 32px !important; letter-spacing: 2px !important; }
.compact-mcb .mcb-title { font-size: 12px !important; margin-bottom: 2px !important; }
.compact-mcb .mcb-sub { font-size: 11px !important; }

.compact-forecast {
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
}
.compact-forecast .fb-hd { margin-bottom: 4px !important; }
.compact-forecast .fb-tag { font-size: 9.5px !important; padding: 1px 6px !important; }
.compact-forecast .fb-title { font-size: 12px !important; }
.compact-forecast .fb-text { font-size: 11.5px !important; line-height: 1.45 !important; }

.compact-rules {
  gap: 6px !important;
  margin-bottom: 10px !important;
}
.compact-rb {
  padding: 6px 12px !important;
  gap: 10px !important;
}
.compact-rb .rb-num {
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  font-size: 12px !important;
}
.compact-rb .rb-hd { font-size: 11.5px !important; margin-bottom: 1px !important; }
.compact-rb .rb-text { font-size: 11px !important; line-height: 1.4 !important; }

.compact-fsc {
  padding: 12px 18px !important;
  margin-top: 8px !important;
}
.compact-fsc .fsc-quote { font-size: 12.5px !important; margin-bottom: 6px !important; line-height: 1.5 !important; }
.compact-fsc .fsc-author { font-size: 10.5px !important; }

/* Печать ровно 5 листов А4 */
@media print {
  .compact-layout .dossier-page {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
  .dossier-page-break {
    page-break-after: always !important;
    break-after: page !important;
  }
  .compact-layout .dossier-page:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   WEY TO CARDS ENGINE — Проективные Карты & Подсознательная Диагностика
   ═══════════════════════════════════════════════════════════════ */
.cards-deck-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--bo);
}
.cards-deck-btn {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  color: var(--ink-mut);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.cards-deck-btn:hover {
  background: var(--surface);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-1px);
}
.cards-deck-btn.active {
  background: var(--gold-p);
  border-color: var(--gold);
  color: var(--gold-l);
  box-shadow: 0 0 12px rgba(197, 160, 89, 0.2);
}
.cards-mode-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cards-fan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
  perspective: 1000px;
}
.card-item-back {
  background: linear-gradient(145deg, #1f2530 0%, #141820 100%);
  border: 1.5px solid rgba(197, 160, 89, 0.35);
  border-radius: 12px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 12px;
  position: relative;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  user-select: none;
}
.card-item-back::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border: 1px dashed rgba(197, 160, 89, 0.25);
  border-radius: 8px;
  pointer-events: none;
}
.card-item-back:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: var(--gold);
  box-shadow: 0 12px 28px rgba(197, 160, 89, 0.3);
}
.card-item-back.selected {
  border-color: var(--gold);
  background: linear-gradient(145deg, #2a3342 0%, #1a202a 100%);
  box-shadow: 0 0 20px rgba(197, 160, 89, 0.45);
  transform: translateY(-4px) scale(1.02);
}
.card-back-icon {
  font-size: 32px;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.card-back-num {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 1px;
}
.card-item-manual {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}
.card-item-manual:hover {
  border-color: var(--gold);
  background: var(--surface);
  transform: translateY(-2px);
}
.card-item-manual.selected {
  border-color: var(--gold);
  background: var(--gold-p);
}
.card-diag-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .card-diag-layout {
    grid-template-columns: 1fr;
  }
}
.card-hero-display {
  background: linear-gradient(160deg, #222936 0%, #151921 100%);
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 24px rgba(197, 160, 89, 0.15);
  position: relative;
  text-align: center;
}
.card-hero-display::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid rgba(197, 160, 89, 0.25);
  border-radius: 10px;
  pointer-events: none;
}
.card-hero-symbol {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.card-hero-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--gold-l);
  font-weight: 600;
  margin-bottom: 6px;
}
.card-hero-archetype {
  display: inline-block;
  background: rgba(197, 160, 89, 0.15);
  color: var(--gold-l);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(197, 160, 89, 0.3);
  margin-bottom: 16px;
}
.card-signal-box {
  background: rgba(197, 160, 89, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 12px 14px;
  text-align: left;
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 16px;
}
.card-hero-meaning {
  text-align: left;
  font-size: 13.5px;
  color: var(--ink-mut);
  line-height: 1.6;
}
.card-res-box {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.card-res-box.open-center {
  border-left: 3px solid #e6c582;
}
.card-res-box.defined-center {
  border-left: 3px solid #3970a3;
}
.card-res-box.num-match {
  border-left: 3px solid #a7394d;
}
.card-res-box.time-res {
  border-left: 3px solid #4f8a5a;
}

/* ═══════════════════════════════════════════════════════════════
   WEY TO DONOR SYSTEMS: АСТРОЛОГИЯ ВРОНСКОГО & ЭННЕАГРАММА НАРАНХО
   ═══════════════════════════════════════════════════════════════ */
.donor-card {
  background: var(--surface);
  border: 1px solid var(--bo);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 24px;
}
.astro-planet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.astro-planet-card {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.astro-planet-card:hover {
  border-color: var(--gold);
  background: var(--surface-elevated);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.astro-planet-sym {
  font-size: 24px;
  line-height: 1;
}
.ennea-tabs-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.ennea-tab-btn {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  color: var(--ink-mut);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.ennea-tab-btn:hover {
  border-color: var(--gold);
  color: var(--ink);
}
.ennea-tab-btn.active {
  background: var(--gold-p);
  border-color: var(--gold);
  color: var(--gold-l);
  font-weight: 600;
}
.synth-4layer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .synth-4layer-grid {
    grid-template-columns: 1fr;
  }
}
.synth-layer-card {
  background: var(--surface-alt);
  border: 1px solid var(--bo);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.synth-layer-card.layer-1 { border-top: 3px solid #c5a059; }
.synth-layer-card.layer-2 { border-top: 3px solid #2a5681; }
.synth-layer-card.layer-3 { border-top: 3px solid #872b3b; }
.synth-layer-card.layer-4 { border-top: 3px solid #4f8a5a; }