/* Натальная карта — спокойная палитра: кремовый фон, тёмно-коричневый текст, один акцент (оранжевый) */
:root {
  --paper: #FFF8EF;
  --card: #FFFDF9;
  --ink: #2A1405;
  --ink2: rgba(42, 20, 5, .64);
  --ink3: rgba(42, 20, 5, .42);
  --line: rgba(42, 20, 5, .13);
  --line2: rgba(42, 20, 5, .32);
  --accent: #F28C28;
  --accent-ink: #A9570A;
  --accent-soft: #FDEBD3;
  --sel: #FBE6CB;
  --sel2: #F8CD98;
  --good: #4F7A1F;
  --calm: #2F6F8F;
  --bad: #B4532A;
  --hover: rgba(42, 20, 5, .05);
  --hover2: rgba(42, 20, 5, .035);
  --backdrop: rgba(42, 20, 5, .34);
  --shadow: rgba(42, 20, 5, .25);
  --theme: light;  /* для рисунков на странице (wheel.js: palette) */
  color-scheme: light;
  --radius: 8px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sym: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", "DejaVu Sans", "Segoe UI", sans-serif;
  --mono: Consolas, "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  /* линии планет в графических эфемеридах — по группам (проверено на различимость, в том числе при нарушениях
     цветового зрения); у каждой линии ещё и значок планеты */
  --ge-lum: #eb6834; --ge-pers: #2a78d6; --ge-soc: #1baf7a; --ge-out: #4a3aa7;
}

/* тёмная тема: по настройке («Настроить» → «Программа») или, при «как в системе», по теме телефона */
:root[data-theme="dark"] {
  --paper: #1C1814; --card: #25201B; --ink: #EFE6DC; --ink2: rgba(239, 230, 220, .68); --ink3: rgba(239, 230, 220, .45);
  --line: rgba(239, 230, 220, .14); --line2: rgba(239, 230, 220, .32); --accent-ink: #F6A65A; --accent-soft: #3A2A1A;
  --sel: #3B2C1E; --sel2: #5A3F24; --good: #8DBF55; --calm: #6FB3D2; --bad: #E58A63;
  --hover: rgba(239, 230, 220, .07); --hover2: rgba(239, 230, 220, .05); --backdrop: rgba(0, 0, 0, .55);
  --shadow: rgba(0, 0, 0, .5); --theme: dark; color-scheme: dark;
  --ge-lum: #d95926; --ge-pers: #3987e5; --ge-soc: #199e70; --ge-out: #9085e9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #1C1814; --card: #25201B; --ink: #EFE6DC; --ink2: rgba(239, 230, 220, .68); --ink3: rgba(239, 230, 220, .45);
    --line: rgba(239, 230, 220, .14); --line2: rgba(239, 230, 220, .32); --accent-ink: #F6A65A; --accent-soft: #3A2A1A;
    --sel: #3B2C1E; --sel2: #5A3F24; --good: #8DBF55; --calm: #6FB3D2; --bad: #E58A63;
    --hover: rgba(239, 230, 220, .07); --hover2: rgba(239, 230, 220, .05); --backdrop: rgba(0, 0, 0, .55);
    --shadow: rgba(0, 0, 0, .5); --theme: dark; color-scheme: dark;
    --ge-lum: #d95926; --ge-pers: #3987e5; --ge-soc: #199e70; --ge-out: #9085e9;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 14px/1.45 var(--font); -webkit-text-size-adjust: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
[hidden] { display: none !important; }
h1 { font-size: 22px; font-weight: 600; margin: 0; line-height: 1.25; }
h2 { font-size: 15px; font-weight: 600; margin: 0; }
.muted, .sub { color: var(--ink2); }
.grow { flex: 1; }
.sym { font-family: var(--sym); font-variant-emoji: text; }

/* версия для телефона: заставка, пока программа загружается на страницу */
.boot { position: fixed; inset: 0; z-index: 100; background: var(--paper); display: flex; align-items: center;
  justify-content: center; padding: 24px; text-align: center; }
.boot > div { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.boot b { font-size: 20px; }
.boot small { color: var(--ink2); }

/* ------------------------------------------------ верх: вкладки и строка состояния */
header.top {  /* именно шапка: класс top есть и у ячеек таблиц (наибольшее значение) */
  display: flex; align-items: flex-end; gap: 16px; padding: 0 20px;
  border-bottom: 1px solid var(--line); flex: none;
}
.tabs { display: flex; gap: 22px; }
.tab {
  appearance: none; border: 0; background: none; font: inherit; color: var(--ink2); cursor: pointer;
  padding: 12px 0 9px; border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.status { margin-left: auto; padding: 0 0 10px; color: var(--good); font-size: 13px; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.status.err { color: var(--bad); }

main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 20px 16px; }

/* ------------------------------------------------ кнопки и поля */
.btn {
  appearance: none; font: inherit; color: var(--ink); background: transparent; cursor: pointer;
  border: 1px solid var(--line2); border-radius: var(--radius); padding: 6px 12px; white-space: nowrap;
  line-height: 1.3;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); font-weight: 600; color: #2A1405; }
.btn.primary:hover { background: #E67F1B; }
.btn.ghost { border-color: transparent; color: var(--ink2); }
.btn.ghost:hover { color: var(--ink); }
.btn.danger { color: var(--bad); border-color: rgba(180, 83, 42, .5); }
.btn.done { color: var(--good); border-color: var(--good); font-weight: 600; }  /* «✓ В базе» после сохранения */
.btn.icon { padding: 4px 9px; font-size: 16px; line-height: 1; }
.btn.small { padding: 3px 9px; font-size: 13px; }
input[type=text], input[type=search], select, textarea {
  font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 6px 9px; min-width: 0; width: 100%;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
input:disabled, select:disabled { background: var(--hover); color: var(--ink3); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.seg button { appearance: none; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink2);
  padding: 4px 11px; cursor: pointer; border-left: 1px solid var(--line); white-space: nowrap; }
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--ink); color: var(--paper); }
/* космограмма: полоса «где планета была за сутки» — того же цвета, что на круге (RANGE в wheel.js) */
.range-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px;
  background: rgba(126, 91, 166, .55); border: 1px solid #7E5BA6; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }

/* ------------------------------------------------ карта: строка человека и форма */
.person { display: flex; align-items: center; gap: 12px; flex: none; margin-bottom: 10px; }
.person-main { flex: 1; min-width: 0; }
.person-main .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#b-more { display: none; }

.form { display: grid; gap: 10px 14px; padding: 14px 16px; margin-bottom: 12px; flex: none;
  grid-template-columns: repeat(12, minmax(0, 1fr)); }
.f > span, .f > label { display: block; font-size: 12px; color: var(--ink2); margin-bottom: 3px; }
.f .row { display: flex; gap: 8px; }
.f-name { grid-column: span 5; }
.f-city { grid-column: span 7; }
.f-city select { margin-top: 6px; }
.f-date { grid-column: span 2; }
.f-time { grid-column: span 2; }
.f-unknown { grid-column: span 2; align-self: end; padding-bottom: 7px; }
.f-unknown > span { display: inline; font-size: 14px; color: var(--ink); margin: 0; }
.f-rodden { grid-column: span 2; }
.f-lat { grid-column: span 2; }
.f-lng { grid-column: span 2; }
.f-tz { grid-column: span 6; }
.f-actions { grid-column: span 6; display: flex; gap: 8px; align-items: end; justify-content: flex-end; }

/* ------------------------------------------------ карта: круг и панель */
.chart-area { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 18px; }
.wheel-box { position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
/* полоса над кругом: шаг по времени карты и второй круг (транзиты, прогрессии, синастрия…) */
.wheel-bar { flex: none; display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; margin-bottom: 4px; font-size: 13px; }
.bar-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#time-step { margin-left: auto; }  /* шаг времени — справа и спрятан под кнопкой: второй круг остаётся на месте */
#time-step-body[hidden] { display: none; }
#b-timestep[aria-expanded=true] { color: var(--ink); border-color: var(--line2); }
.w-off { padding: 3px 8px; line-height: 1; }
.wheel-bar select, .wheel-bar input[type=text] { width: auto; padding: 3px 7px; font-size: 13px; }
.wheel-bar input.w-date { width: 92px; }
.wheel-bar input.w-time, .wheel-bar input.w-year { width: 62px; }
.wheel-bar .who { font-weight: 600; }
.stepper { align-items: stretch; }
.stepper button { padding: 3px 9px; font-family: var(--sym); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.stepper button:active { background: var(--sel); }
.stepper select { border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; padding: 3px 4px; }
.stepper span { border-left: 1px solid var(--line); padding: 3px 9px; color: var(--ink2); }
#wheel { flex: 1 1 0; min-height: 0; width: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
#wheel.zoomed { cursor: grab; touch-action: none; }
#wheel.dragging { cursor: grabbing; }
#wheel text { font-family: var(--font); fill: var(--ink); }
#wheel text.g { font-family: var(--sym); font-variant-emoji: text; }
#wheel .halo { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
#wheel line, #wheel path, #wheel circle, #wheel polygon { vector-effect: non-scaling-stroke; }
#wheel .hit { stroke: transparent; stroke-width: 9px; fill: none; pointer-events: stroke; }
.wheel-tools { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 8px;
  pointer-events: none; }
.wheel-tools .seg, .wheel-tools .btn { pointer-events: auto; }

.details { min-height: 0; overflow: auto; padding-right: 6px; }
.details h2 { margin: 18px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line); position: relative; }
.details h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 34px; height: 2px; background: var(--accent); }
.details section:first-child h2 { margin-top: 4px; }
.details h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.h-setup { appearance: none; border: 0; background: none; font: 400 12.5px var(--font); color: var(--accent-ink);
  cursor: pointer; padding: 0 2px; }
.h-setup:hover { text-decoration: underline; }
.panel-setup { margin: 18px 0 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.note { color: var(--ink2); font-size: 12.5px; margin: 4px 0 6px; }
.para { margin: 6px 0; }
.para.calm { color: var(--calm); }
.label { color: var(--ink2); font-size: 12px; margin: 8px 0 2px; }
.lines { margin: 2px 0; }
.lines div { margin: 1px 0; }
.lines .head { font-weight: 600; margin-top: 5px; }
.lines.small { font-size: 12.5px; }
table.t { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
table.t th { text-align: left; font-weight: 400; font-size: 12px; color: var(--ink2); padding: 2px 8px 3px 0; }
table.t td { padding: 4px 8px 4px 0; border-top: 1px solid var(--line); vertical-align: baseline; }
table.t tr:first-child td { border-top: 0; }
table.t thead + tbody tr:first-child td { border-top: 1px solid var(--line); }
table.t tr.sep td { border-top: 1px solid var(--line2); padding-top: 7px; }
table.t tr[data-tip] { cursor: default; }
table.t tr[data-tip]:hover td { background: var(--hover2); }
td.glyph, .gl { font-family: var(--sym); font-variant-emoji: text; width: 1.6em; }
td.num, td.sign, td.name, td.aspect, .t-planets td:nth-child(2), .nw { white-space: nowrap; }
td .sh { display: none; }  /* короткое имя точки — только на телефоне в узких таблицах */
td.retro { color: var(--ink2); font-size: 12px; width: 1.4em; }
td.bold, .bold { font-weight: 600; }
td.muted { color: var(--ink2); }
td.accent { color: var(--accent-ink); }
td.small { font-size: 12.5px; }
td.glyphs { font-family: var(--sym); letter-spacing: 2px; }
.tone-good { color: var(--good); font-weight: 600; }
.tone-bad { color: var(--bad); font-weight: 600; }
.tone-calm { color: var(--calm); font-weight: 600; }
.gl { display: inline-block; margin-right: 5px; color: var(--ink2); }
.t-planets td:nth-child(4), .t-planets th:nth-child(4), .t-planets td:last-child, .t-planets th:last-child,
.t-aspects td:nth-child(4), .t-aspects th:nth-child(4) { text-align: right; }
.t-planets td:last-child { padding-right: 2px; }
.t-planets td.muted:last-child { text-align: left; font-size: 12.5px; }
.cols2 { columns: 2; column-gap: 22px; }
.cols2 table { break-inside: avoid; }
/* у обеих половин домов — одинаковые столбцы: и рядом, и одна под другой (телефон) они ровные */
.t-houses td:first-child { width: 2em; text-align: right; padding-right: 8px; }
.t-houses td:nth-child(2) { width: 2.8em; }
.t-houses td:nth-child(3) { width: 7.8em; }

/* ------------------------------------------------ структура карты: рисунки в панели */
.details svg text { font-family: var(--font); fill: var(--ink); }
.details svg text.g { font-family: var(--sym); font-variant-emoji: text; }
.details svg { display: block; }
[data-focus] { cursor: pointer; }
table.t tr[data-focus]:hover td { background: var(--sel); }
table.t tr.pinned td, table.t tr.pinned:hover td { background: var(--sel2); }
.st-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; border: 1px solid transparent; border-radius: 10px; }
.st-row:hover { background: var(--accent-soft); }
.st-switch { margin: 2px 0 8px; flex-wrap: wrap; }
.st-text { flex: 1; min-width: 190px; }
.st-name { font-size: 17px; font-weight: 600; margin: 6px 0 4px; }
.st-legend { display: flex; align-items: center; gap: 2px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); margin-bottom: 4px; }
.st-legend .lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.st-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1.6px solid var(--accent-ink); }
.st-legend .dot.full { background: var(--accent-ink); }
.st-sub { margin: 10px 0 4px; font-size: 13px; }
table.bal { border-collapse: collapse; margin: 2px 0 6px; }
table.bal th { font-weight: 400; font-size: 12.5px; color: var(--ink2); padding: 4px 10px 4px 2px; text-align: left; white-space: nowrap; }
table.bal thead th { text-align: center; padding: 2px 6px 5px; }
table.bal td.cell { border: 1px solid var(--line); min-width: 96px; height: 34px; padding: 3px 8px; white-space: nowrap; }
table.bal td.cell:hover, table.bal th.h:hover { background: var(--sel); }
table.bal td.cell.pinned, table.bal th.h.pinned { background: var(--sel2); }
table.bal .sg { color: var(--ink3); font-family: var(--sym); font-variant-emoji: text; margin-right: 8px; }
table.bal .pl { font-family: var(--sym); font-variant-emoji: text; font-size: 16px; letter-spacing: 1px; }
table.bal td.synth { outline: 2px solid var(--accent); outline-offset: -2px; }
table.bal .sum { text-align: center; color: var(--ink2); padding: 4px 8px; font-variant-numeric: tabular-nums; }
table.bal .top { color: var(--accent-ink); font-weight: 600; }
table.hemi th.h { text-align: center; white-space: normal; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; min-width: 92px; }
table.hemi th.h .muted { font-size: 11.5px; }
table.hemi th.h .n { font-size: 16px; font-weight: 600; color: var(--ink); }
table.hemi th.h.most .n, table.hemi th.h.most div:first-child { color: var(--accent-ink); }
table.hemi th.h div:first-child { font-weight: 600; color: var(--ink); }
table.hemi td.cell { height: 48px; min-width: 116px; position: relative; vertical-align: middle; }
table.hemi td.cell .n { position: absolute; right: 6px; bottom: 2px; font-size: 11.5px; color: var(--ink3); }
table.hemi td { border: 0; }
table.hemi td.cell { border: 1px solid var(--line2); }
.st-scale svg { margin-top: 4px; max-width: 100%; }
.t-gq td { padding: 2px 8px 2px 0; }
.t-huber td { padding: 3px 10px 3px 0; }
.t-huber td.glyphs { white-space: nowrap; font-size: 16px; }
.t-huber tr.lead td:first-child { color: var(--accent-ink); font-weight: 600; }
.gq-fig svg { max-width: 100%; height: auto; }
.t-rulers td:first-child, .t-rulers th:first-child { width: 2.4em; text-align: right; padding-right: 10px; }
.t-pairs td:last-child, .t-pairs th:last-child, .t-stars td:last-child, .t-stars th:last-child,
.t-aspects td:nth-child(4), .t-aspects th:nth-child(4) { text-align: right; }
.t-aspects td:last-child { padding-left: 8px; }
/* сетка аспектов: на диагонали — точки, в клетках — аспект и орбис */
.agrid-wrap { overflow-x: auto; padding-bottom: 2px; }
table.agrid { border-collapse: collapse; margin: 2px 0 4px; }
table.agrid td.ac { border: 1px solid var(--line); min-width: 25px; height: 31px; padding: 0; text-align: center; vertical-align: middle; line-height: 1.05; }
table.agrid td.ac .gl { display: block; width: auto; margin: 0; font-size: 15px; color: var(--ink); }
table.agrid td.ac .ob { display: block; font-size: 9.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
table.agrid td.ac.app .ob { font-weight: 700; color: var(--ink); }
table.agrid td.ac[data-focus]:hover { background: var(--sel); }
table.agrid th.gh { font: 400 15px/1 var(--sym); font-variant-emoji: text; min-width: 25px; height: 31px; padding: 0 3px; text-align: center;
  white-space: nowrap; border-radius: 6px; }
table.agrid th.gh:hover, table.agrid th.gh.on { background: var(--sel); color: var(--accent-ink); }
table.agrid td.ac.pinned, table.agrid th.gh.pinned { background: var(--sel2); }
.t-outer td:nth-child(4), .t-outer th:nth-child(4) { text-align: right; }
.chain-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.chain { border: 1px solid transparent; border-radius: 10px; padding: 2px 4px; }
.chain:hover { border-color: var(--accent); background: var(--accent-soft); }
.chain.pinned, .st-row.pinned { border-color: var(--accent); background: var(--sel); box-shadow: 0 0 0 1px var(--accent); }
.cfgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 4px; }
.cfg { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px;
  padding: 5px 10px 5px 6px; background: var(--card); }
.cfg:hover { border-color: var(--accent); background: var(--accent-soft); }
.cfg.pinned { border-color: var(--accent); background: var(--sel); box-shadow: 0 0 0 1px var(--accent); }
.cfg-body { min-width: 0; }
.cfg-name { font-weight: 600; }
.cfg-pl { font-family: var(--sym); font-variant-emoji: text; font-size: 15px; }
.cfg .note { margin: 1px 0 0; }
.cfgs.odd { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cfg.small { padding: 1px 8px 1px 2px; }
.cfg.small .cfg-fig svg { width: 42px; height: 42px; }
.cfg-day { font-size: 12px; color: var(--accent-ink); margin-top: 1px; }
.cfg.small .cfg-day { font-size: 11px; }
/* часть суток (время неизвестно): полоса — сутки, закрашено — когда аспект или фигура есть, черта — время карты */
.dp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 1.1fr) 10.5em; gap: 10px; align-items: center;
  padding: 3px 4px; border-radius: 6px; font-size: 13px; }
.dp-row[data-focus]:hover { background: var(--sel); }
.dp-row.pinned { background: var(--sel2); }
.dp-row.off .dp-name { color: var(--ink2); }
.dp-head { padding-top: 0; padding-bottom: 0; }
.dp-name { min-width: 0; }
.dp-g { font-family: var(--sym); font-variant-emoji: text; font-size: 15px; margin-right: 6px; white-space: nowrap; }
.dp-bar { position: relative; height: 12px; border-radius: 3px; background: var(--hover); border: 1px solid var(--line); }
.dp-on { position: absolute; top: 0; bottom: 0; background: var(--accent); opacity: .75; }
.dp-now { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); }
.dp-scale { position: relative; height: 14px; font-size: 10.5px; color: var(--ink3); }
.dp-scale span { position: absolute; transform: translateX(-50%); }
.dp-scale span:first-child { transform: none; }
.dp-scale span:last-child { transform: translateX(-100%); }
.dp-time { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ подсказка, меню, окна */
.tip { position: fixed; z-index: 50; max-width: min(420px, 92vw); background: var(--ink); color: var(--paper);
  padding: 8px 11px; border-radius: var(--radius); font-size: 13px; line-height: 1.4; white-space: pre-wrap;
  pointer-events: none; font-family: var(--sym); }
.menu { position: fixed; z-index: 40; background: var(--card); border: 1px solid var(--line2); border-radius: 10px;
  padding: 5px; min-width: 200px; max-width: 92vw; max-height: 80vh; overflow: auto;
  box-shadow: 0 6px 24px var(--shadow); }
.menu button { display: block; width: 100%; text-align: left; appearance: none; border: 0; background: none; font: inherit;
  color: var(--ink); padding: 7px 11px; border-radius: 6px; cursor: pointer; }
.menu button:hover { background: var(--sel); }
.menu button.danger { color: var(--bad); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 2px; }
.backdrop { position: fixed; inset: 0; z-index: 30; background: var(--backdrop); display: flex;
  align-items: center; justify-content: center; padding: 16px; }
.dialog { background: var(--paper); border-radius: 14px; padding: 18px 20px; width: min(520px, 100%); max-height: 92vh;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 40px var(--shadow); }
.dialog.wide { width: min(860px, 100%); }
.dialog h2 { font-size: 17px; }
.dialog .body { overflow: auto; min-height: 0; white-space: pre-wrap; }
.dialog .actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dialog textarea { min-height: 260px; resize: vertical; white-space: pre-wrap; }
.dialog.xl { width: min(1360px, 100%); max-height: 94vh; }
/* окно «Настройки»: разделы — переключателем сверху (он остаётся на виду при прокрутке) */
.dialog .body.quick { white-space: normal; min-height: min(520px, 64vh); }
.set-tabs { position: sticky; top: 0; z-index: 2; flex-wrap: wrap; margin-bottom: 12px; }
.set-tabs button { font-size: 13.5px; padding: 6px 12px; }
.set-body h3 { font-size: 13.5px; font-weight: 600; margin: 16px 0 6px; }
.set-body h3:first-child { margin-top: 0; }
/* «Сила и гармония»: разделы «Планеты» и «Дома» */
.set-body h3.str-part { font-size: 15px; margin: 22px 0 4px; padding-bottom: 4px; border-bottom: 2px solid var(--accent); }
.set-grid select { width: 100%; }
.quick .check { margin: 5px 0; }
.quick-asp { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 14px; }
.quick-asp .gl { width: 1.3em; margin-right: 0; text-align: center; }
.dialog pre { margin: 0; font: 12.5px/1.45 var(--mono); white-space: pre; overflow: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.pick { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: auto; max-height: 46vh; padding: 4px; }
.pick button { display: block; width: 100%; text-align: left; appearance: none; border: 0; background: none; font: inherit;
  color: var(--ink); padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.pick button:hover { background: var(--sel); }

/* ------------------------------------------------ база: группы и список */
.db { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; }
.groups { min-height: 0; display: flex; flex-direction: column; }
.groups-head { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.groups-toggle { flex: 1; text-align: left; font-weight: 600; color: var(--ink); padding-left: 6px; overflow: hidden;
  text-overflow: ellipsis; display: flex; gap: 6px; }
.groups-toggle #g-current { overflow: hidden; text-overflow: ellipsis; }
.groups-toggle .chev { display: none; color: var(--ink2); }
.tree { flex: 1; min-height: 0; overflow: auto; }
.node { display: flex; align-items: center; border-radius: 6px; cursor: pointer; padding: 3px 4px 3px 0; }
.node:hover { background: var(--hover); }
.node.sel { background: var(--sel); }
.node .tw { width: 18px; flex: none; text-align: center; color: var(--ink3); font-size: 11px; }
.node .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node .ct { color: var(--ink3); font-size: 12px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.kids { margin-left: 14px; }

.people { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar input[type=search] { width: 220px; }
.conds { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.conds:empty { display: none; }
.cond { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cond select, .cond input[type=text] { width: auto; padding: 4px 7px; }
.cond input.w-orb { width: 58px; }
.cond .lead { width: 62px; flex: none; color: var(--ink2); }
.cond .lead select { width: 100%; }  /* «И» / «ИЛИ» — той же ширины, что «Где»: «НЕ» в строках — друг под другом */
.list-head { color: var(--ink2); font-size: 13px; margin: 10px 0 6px; }
.table-wrap { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--line); }
table.list { border-collapse: collapse; width: 100%; table-layout: fixed; }
table.list th { position: sticky; top: 0; background: var(--paper); text-align: left; font-weight: 600; font-size: 13px;
  padding: 7px 10px 6px 0; border-bottom: 1px solid var(--line2); cursor: pointer; white-space: nowrap; z-index: 1;
  user-select: none; }
table.list th:hover { color: var(--accent-ink); }
table.list td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
table.list tr { cursor: default; }
table.list tbody tr:hover { background: var(--hover2); }
table.list tbody tr.sel { background: var(--sel); }
/* ширина столбцов задана в шапке (table-layout: fixed): имя, место и совпадения делят то, что осталось */
table.list .c-check { width: 30px; padding-left: 4px; }
table.list .c-fav, table.list .c-notes { width: 30px; text-align: center; cursor: pointer; color: var(--ink3); padding-right: 0; }
table.list .c-fav.on { color: var(--accent); }
table.list .c-notes.on { color: var(--ink); }
table.list .c-date { width: 96px; font-variant-numeric: tabular-nums; }
table.list .c-time { width: 64px; font-variant-numeric: tabular-nums; }
table.list .c-rodden { width: 78px; }
table.list .c-group { width: 22%; }
table.list .c-match { width: 30%; }
table.list .c-more { width: 40px; text-align: center; padding-right: 0; }
.more { padding: 10px 0; color: var(--ink2); font-size: 13px; text-align: center; }
.selbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0 0; border-top: 1px solid var(--line); }
.progress { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 6px 0; }
.progress i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s; }

/* ------------------------------------------------ общие показатели */
.overlay { position: fixed; inset: 0; z-index: 20; background: var(--paper); display: flex; flex-direction: column;
  padding: 14px 20px 16px; }
.an-head { display: flex; align-items: flex-start; gap: 12px; }
.an-info { color: var(--ink2); font-size: 13px; margin: 6px 0 8px; white-space: pre-wrap; max-height: 22vh; overflow: auto; }
.an-controls { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.an-controls select, .an-controls input[type=text], .an-controls input[type=search] { width: auto; padding: 4px 7px; }
.an-controls input.w-min { width: 54px; text-align: center; }
.an-split { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 3fr) minmax(0, 1.2fr); gap: 10px; }
.an-detail { overflow: auto; white-space: pre-wrap; font-size: 13px; border-top: 1px solid var(--line2); padding-top: 8px; }
table.list.an .c-label { width: 46%; }
table.list.an td.r, table.list.an th.r { text-align: center; }

/* ------------------------------------------------ настройки */
.set-grid { display: grid; grid-template-columns: max-content minmax(0, 360px); gap: 8px 14px; align-items: center; }
/* строки настроек — текстом с полями (settings.js, flow): переносятся по словам, поле — вместе со своей подписью */
.set-row { margin: 5px 0; line-height: 1.6; }
.set-row input[type=text] { width: 64px; text-align: center; padding: 4px 6px; }
.set-row input.wide { width: 170px; text-align: left; }
.set-row select { width: auto; max-width: 100%; }
/* по середине строки — только поля и флажки; слова (и склейки слов со словом или полем, .glue) — по строке текста,
   иначе склеенные слова съезжают выше или ниже соседних */
.set-row input, .set-row select, .set-row .check, .rule input, .rule select, .rule .check,
.glue input, .glue select { vertical-align: middle; }
.set-row input, .set-row select, .rule input, .rule select { margin: 2px 0; }
.set-row .check, .rule .check { display: inline-flex; }
.glue { white-space: nowrap; }
/* подписи в несколько строк — строками примерно равной длины, без одинокого слова в конце */
.set-row, .rule, .set-grid > span, .check > span { text-wrap: balance; }
.set-note { color: var(--ink2); font-size: 12.5px; max-width: 860px; white-space: pre-wrap; margin: 4px 0 8px; }
/* таблица орбисов всегда вписывается в окно: ширина столбцов задана в заголовке, поля тянутся по столбцу;
   прокрутка появляется только на совсем узком экране (телефон) */
.orbs-wrap { overflow: auto; }
table.orbs { border-collapse: collapse; font-variant-numeric: tabular-nums; table-layout: fixed; width: 100%; min-width: 860px; }
table.orbs th { font-weight: 400; font-size: 12px; color: var(--ink2); padding: 2px 1px 5px; text-align: center; white-space: nowrap;
  overflow: hidden; }
table.orbs th.c-on { width: 24px; }
table.orbs th.c-sym { width: 26px; }
table.orbs th.c-name { width: 134px; text-align: left; }
table.orbs th.c-ang { width: 62px; text-align: right; padding-right: 8px; }
table.orbs th.c-maj { width: 18px; }
table.orbs th.c-line { width: 52px; text-align: left; }
table.orbs th.w2 { width: 6.4%; }
/* «Asc/Dsc», «MC/IC», «Др. дома» — в узкий столбец: мельче, «Др. дома» — в две строки */
table.orbs th:not(.sym) { font-size: 11px; letter-spacing: -.2px; white-space: normal; line-height: 1.1; vertical-align: bottom; }
table.orbs th.sym { font-size: 15px; color: var(--ink); }
table.orbs td.sym { text-align: center; color: var(--ink2); }
table.orbs td { padding: 2px 2px; white-space: nowrap; overflow: hidden; }
table.orbs td.nm { padding-right: 6px; text-overflow: ellipsis; }
table.orbs td.ang { text-align: right; color: var(--ink2); padding-right: 8px; }
table.orbs input[type=text] { width: 100%; min-width: 0; padding: 3px 1px; text-align: center; border-color: var(--line); font-size: 13px; }
table.orbs input[type=color] { width: 44px; height: 22px; padding: 0; border: 1px solid var(--line2); border-radius: 4px; background: none; }
table.orbs .swatch { display: inline-block; width: 44px; height: 0; border-top: 2px solid; vertical-align: middle; }
table.orbs tr.minor[hidden] { display: none; }
.dign { display: grid; grid-template-columns: max-content repeat(4, minmax(110px, 170px)); gap: 5px 8px; align-items: center; }
.dign input[type=text] { text-align: center; padding: 4px 6px; }
.dign .hd { font-size: 12px; color: var(--ink2); display: flex; align-items: center; gap: 6px; }
.dign .hd input { width: 54px; }
/* название и число рядом, столбцами одинаковой ширины; пунктир ведёт глаз от названия к числу */
.kv { display: grid; grid-template-columns: repeat(auto-fill, 216px); gap: 2px 34px; }
.kv label { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 2px 0;
  border-bottom: 1px dotted var(--line2); }
.kv label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv input[type=text] { width: 58px; text-align: center; padding: 3px 6px; flex: none; }
.set-actions { position: sticky; bottom: 0; background: var(--paper); padding: 10px 0 2px; margin-top: 18px;
  border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input.pt { width: 58px; text-align: center; padding: 3px 6px; flex: none; }
/* «Сила и гармония»: правила пользовательского метода по сворачиваемым группам */
details.grp { border: 1px solid var(--line); border-radius: 10px; background: var(--card); margin: 8px 0; }
details.grp > summary { cursor: pointer; padding: 8px 12px; font-size: 13.5px; user-select: none; }
details.grp > summary:hover { background: var(--accent-soft); border-radius: 10px; }
details.grp[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
details.grp .muted { font-size: 12.5px; }
.grp-body { padding: 8px 12px 10px; }
.grp-body .set-note { margin: 2px 0 8px; }
.grp-body h3 { margin-top: 14px; }
.lilly-help table { width: 100%; max-width: 760px; border-collapse: collapse; font-size: 13px; }
.lilly-help td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lilly-help td.pt { width: 3.5em; text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.lilly-help td.plus { color: var(--good); }
.lilly-help td.minus { color: var(--bad); }
.lilly-help ul { margin: 12px 0 2px; padding-left: 18px; font-size: 12.5px; color: var(--ink2); max-width: 760px; }
.lilly-help li { margin: 3px 0; }
.rules { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
.rule { padding: 5px 0; line-height: 1.6; border-bottom: 1px solid var(--line); }
.rule:last-child { border-bottom: 0; }
.rule select { width: auto; max-width: 100%; padding: 3px 7px; }
.rule .check { margin: 0 0 0 6px; }
.houses12 { display: grid; grid-template-columns: repeat(6, max-content); gap: 4px 18px; margin-bottom: 4px; }
.houses12 label { display: flex; align-items: center; gap: 6px; justify-content: space-between; font-size: 12.5px; }
/* «Выраженность»: веса точек — карточками по группам планет */
.emph-min { grid-template-columns: max-content max-content; }
.wcards { display: flex; flex-wrap: wrap; gap: 12px; }
.wcard { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 8px 12px 10px; min-width: 190px; }
.wtitle { font-size: 12px; color: var(--ink2); margin-bottom: 6px; }
.wcard label { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.wcard .gl { width: 1.3em; margin: 0; text-align: center; font-size: 16px; color: var(--ink); }
.wcard .nm { flex: 1; }
.wcard input[type=text] { width: 58px; text-align: center; padding: 3px 6px; flex: none; }
/* «Календарь»: вес планеты по видам */
table.cw { border-collapse: collapse; margin: 2px 0 6px; }
table.cw th { font-weight: 400; font-size: 12px; color: var(--ink2); text-align: center; padding: 2px 6px 4px; }
table.cw td { padding: 2px 6px 2px 0; border-top: 1px solid var(--line); white-space: nowrap; }
table.cw td .gl { display: inline-block; width: 1.3em; text-align: center; }
table.cw input.pt { width: 56px; }
table.cw th .short, #b-tz .short, table.bal th .short { display: none; }
/* формулы арабских жребиев */
.lots-edit { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.lot-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.lot-row .lot-name { width: 150px; padding: 4px 7px; }
.lot-row select { width: auto; padding: 4px 6px; }
.lot-row .glue { white-space: nowrap; }
/* «Дополнительно»: орбисы второго круга */
table.outer-orbs { border-collapse: collapse; margin: 2px 0 6px; }
table.outer-orbs th { font-weight: 400; font-size: 12px; color: var(--ink2); text-align: left; padding: 2px 16px 4px 0; }
table.outer-orbs td { padding: 3px 16px 3px 0; border-top: 1px solid var(--line); }
table.outer-orbs select { width: auto; padding: 3px 7px; }

/* календарь аспектов */
.body.cal { white-space: normal; display: flex; flex-direction: column; gap: 8px; min-height: min(420px, 60vh); }
.cal-controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.cal-controls label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cal-controls label.check { flex-direction: row; align-items: center; padding-bottom: 6px; }
.cal-controls select, .cal-controls input[type=text] { width: auto; padding: 4px 7px; }
.cal-controls input.w-date { width: 110px; }
.cal-controls input.w-time { width: 84px; }
.cal-title { margin: 4px 0 2px; }
.cal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 6px; font-size: 13.5px; }
.cal-list { display: flex; flex-direction: column; }
.cal-row { appearance: none; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: var(--ink);
  text-align: left; padding: 6px 4px; cursor: pointer; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 0 12px; }
.cal-row:hover { background: var(--sel); }
.cal-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-what .g { font-family: var(--sym); }
.cal-span { grid-column: 2; font-size: 12.5px; }

/* календарь: временная шкала (js/calendar.js) */
.tl { --lab: 104px; --dates: 178px; margin: 4px 0; user-select: none; -webkit-user-select: none; }
.tl-head, .tl-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) var(--dates); align-items: center; }
.tl-h { font-size: 11.5px; color: var(--ink2); padding-left: 2px; }
.tl-axis { position: relative; height: 40px; border-bottom: 1px solid var(--line2); cursor: pointer; touch-action: pan-y; }
.tl-tick { position: absolute; bottom: -4px; height: 18px; border-left: 1px solid var(--line2); padding-left: 3px; font-size: 11px;
  color: var(--ink2); white-space: nowrap; line-height: 16px; }
.tl-bubble { position: absolute; top: 0; z-index: 2; background: var(--accent); color: #2A1405; font-size: 12px; font-weight: 600;
  padding: 1px 6px; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.tl-body { position: relative; }
.tl-row { border-bottom: 1px solid var(--line); }
.tl-row.sel { background: var(--sel); }
.tl-row.on .tl-lab { font-weight: 700; }  /* действует на выбранную дату */
.tl-row.on .tl-lab .sc { color: var(--accent-ink); }
.tl-lab { appearance: none; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  padding: 3px 6px 3px 2px; display: flex; align-items: center; justify-content: space-between; gap: 4px; white-space: nowrap; }
.tl-lab .g { font-family: var(--sym); font-size: 15px; }
.tl-lab .sc { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.tl-track { position: relative; height: 28px; cursor: pointer; touch-action: pan-y; }
.tl-bar { position: absolute; top: 10px; height: 8px; border-radius: 4px; opacity: .75; }
.tl-dot { position: absolute; top: 8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink);
  border: 2px solid var(--paper); }
.tl-dot.r { background: var(--paper); border-color: var(--ink); }
.tl-ph, .tl-ecl { position: absolute; top: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  border: 1.5px solid var(--ink2); background: var(--paper); cursor: pointer; z-index: 1; }
.tl-ph.new { background: var(--ink2); }
.tl-ecl { top: 7px; width: 14px; height: 14px; margin-left: -7px; border: 2px solid var(--accent-ink); box-shadow: 0 0 0 2px var(--paper); }
.tl-ecl.solar { background: var(--accent-ink); }
.tl-legend .tl-ph, .tl-legend .tl-ecl { position: static; margin: 0; }
.tl-moon .tl-lab { cursor: default; color: var(--ink2); }
.tl-dates { font-size: 12px; color: var(--ink2); padding-left: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-cursor { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none;
  left: calc(var(--lab) + (100% - var(--lab) - var(--dates)) * var(--f)); }
/* поиск момента: окна */
.el-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 2px; cursor: default; }
.el-row:hover { background: none; }
.el-row .cal-what, .el-row .cal-span { grid-column: 1; }
.el-row .btn { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
.el-len::before { content: " · "; }
/* ректификация: события, полоса баллов, лучшие времена */
.rect-events { display: flex; flex-direction: column; gap: 6px; }
.rect-ev { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rect-ev input.w-date { width: 112px; padding: 4px 7px; }
.rect-ev .rect-text { flex: 1 1 180px; width: auto; padding: 4px 7px; }
.rect-ev select { width: auto; padding: 4px 7px; }
.rect-methods { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 6px 0; }
.rect-strip { margin: 8px 0 4px; }
.rect-bars { display: flex; align-items: flex-end; height: 64px; border-bottom: 1px solid var(--line2); }
.rect-bar { flex: 1 1 0; min-width: 1px; background: var(--calm); opacity: .5; border-radius: 4px 4px 0 0; }
.rect-bar.best { background: var(--accent); opacity: 1; }
.rect-bar:hover { opacity: 1; }
.rect-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink2); margin-top: 2px; }
.rect-row .rect-more { grid-column: 1 / -1; font-size: 13.5px; }
.rect-row summary { cursor: pointer; color: var(--accent-ink); }
.rect-evhit { margin: 4px 0 6px; }
/* хорар */
.cal-controls label.wide .hq-text { width: 280px; max-width: 100%; }
.hq-list { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 10px; font-size: 14px; }
.hq-item.ok, .hq-item.warn, .hq-item.q { display: grid; grid-template-columns: 20px minmax(0, 1fr); }
.hq-mark { font-weight: 700; }
.hq-item.ok .hq-mark { color: var(--good); }
.hq-item.warn .hq-mark { color: var(--bad); }
.hq-item.q .hq-mark { color: var(--ink2); }
.hq-sig { border-top: 1px solid var(--line); padding: 5px 0; }
.hq-sig .small { font-size: 12.5px; }
/* графические эфемериды */
.ge-wrap { position: relative; margin: 6px 0; }
.ge-wrap svg { display: block; width: 100%; touch-action: pan-y; }
.ge-wrap .grid { stroke: var(--line); stroke-width: 1; }
.ge-wrap .axis { fill: var(--ink2); font-size: 11px; }
.ge-wrap .band { fill: var(--ink3); font-size: 10.5px; }
.ge-wrap .natal { stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 4 3; }
.ge-wrap .nlab { fill: var(--ink2); font-size: 12px; font-family: var(--sym); }
.ge-wrap .pl { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ge-wrap .pl.lum { stroke: var(--ge-lum); } .ge-wrap .pl.pers { stroke: var(--ge-pers); }
.ge-wrap .pl.soc { stroke: var(--ge-soc); } .ge-wrap .pl.out { stroke: var(--ge-out); }
.ge-wrap .plab { fill: var(--ink); font-size: 13px; font-family: var(--sym); paint-order: stroke; stroke: var(--card);
  stroke-width: 3px; stroke-linejoin: round; }
.ge-wrap .cross { stroke: var(--accent); stroke-width: 1.5; }
.ge-tip { position: absolute; z-index: 3; pointer-events: none; background: var(--card); border: 1px solid var(--line2);
  border-radius: 6px; padding: 6px 8px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 2px 8px var(--shadow);
  white-space: nowrap; }
.ge-tip .g { font-family: var(--sym); display: inline-block; width: 1.3em; }
.ge-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ink2); }
.ge-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ge-legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; }
.ge-legend i.lum { border-color: var(--ge-lum); } .ge-legend i.pers { border-color: var(--ge-pers); }
.ge-legend i.soc { border-color: var(--ge-soc); } .ge-legend i.out { border-color: var(--ge-out); }
.ge-legend i.natal { border-top: 1px dashed var(--ink3); }
.ge-hits { margin-top: 8px; }
.ge-hits .row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 3px 0; border-top: 1px solid var(--line);
  font-size: 13.5px; }
.ge-hits .g { font-family: var(--sym); }
/* лунный календарь: по дням */
.lu-list { display: flex; flex-direction: column; margin-top: 6px; }
.lu-day { border-top: 1px solid var(--line); padding: 6px 2px 8px; }
.lu-day.today { background: var(--sel); border-radius: var(--radius); }
.lu-head { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin-bottom: 2px; }
.lu-head .muted { font-size: 13px; }
.lu-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px; font-size: 14px; padding: 1px 0; }
.lu-time { font-variant-numeric: tabular-nums; color: var(--ink2); }
.lu-item.k-new, .lu-item.k-full, .lu-item.k-q1, .lu-item.k-q3 { font-weight: 600; }
.lu-item.k-eclipse { font-weight: 700; color: var(--accent-ink); }
.lu-item.k-voc > span:last-child { color: var(--calm); }
.lu-item .muted { font-weight: 400; font-size: 13px; }
.tl-show { width: auto; padding: 2px 6px; font-size: 13px; }
.tl-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; padding: 6px 0; position: sticky; top: 0;
  z-index: 3; background: var(--paper); border-bottom: 1px solid var(--line); }
.tl-nav input.w-date { width: 112px; padding: 4px 7px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-nav .stepper select { padding: 3px 6px; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ink2); margin: 2px 0 4px; }
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tl-legend i { display: inline-block; flex: none; }
.tl-legend .lg-bar { width: 22px; height: 8px; border-radius: 4px; background: var(--calm); opacity: .75; }
.tl-legend .lg-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--line2); }
.tl-legend .lg-dot.r { background: var(--paper); border-color: var(--ink); box-shadow: none; }
.tl-legend .lg-cur { width: 2px; height: 14px; background: var(--accent); }
.tl-details { border: 1px solid var(--line2); border-radius: var(--radius); background: var(--card); padding: 8px 10px; margin: 8px 0;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 13.5px; }
.tl-details .cal-what { font-size: 14.5px; font-weight: 600; }
.tl-active .cal-row { grid-template-columns: 52px minmax(0, 1fr); }
.tl-active .cal-when { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; grid-row: span 3; }
.tl-active .cal-when b { font-size: 18px; }
.tl-active .cal-when small { font-size: 11px; color: var(--ink2); }
.linklike { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--accent-ink); text-decoration: underline;
  cursor: pointer; }

/* ------------------------------------------------ узкий экран (телефон) */
@media (max-width: 900px) {
  body { font-size: 15px; overflow: auto; display: block; height: auto; }
  html { height: auto; }
  header.top { padding: 0 14px; position: sticky; top: 0; background: var(--paper); z-index: 10; }
  .t-aspects td:nth-child(5), .t-aspects th:nth-child(5), .t-pairs td.muted, .t-pairs th:nth-child(4):not(:last-child),
  .t-rulers td:nth-child(5), .t-rulers th:nth-child(5) { display: none; }
  table.bal.hemi { table-layout: auto; }  /* подписи сторон — по своей ширине, клетки квадрантов — поровну */
  table.bal.hemi td.cell { width: 50%; }
  table.hemi th.h { min-width: 0; padding: 4px 3px; }
  table.bal.hemi th:first-child { width: auto; }
  table.hemi td.cell { min-width: 84px; }
  .status { display: none; }
  .page { padding: 12px 14px 20px; display: block; }
  .person { flex-wrap: wrap; }
  .person-main { flex-basis: 100%; }
  .person-main .sub { white-space: normal; }
  .person-actions { justify-content: flex-start; }
  /* на телефоне у имени — главное, остальное в меню «⋯» */
  #b-notes, #b-text, #b-save, #b-tools { display: none; }
  #b-more { display: inline-block; }
  .person-actions .btn { padding: 6px 9px; }  /* «Изменить», «Настроить», «В базу» и «⋯» — в одну строку */
  .form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .f-name, .f-city, .f-tz, .f-actions { grid-column: span 6; }
  .f-date, .f-time, .f-lat, .f-lng { grid-column: span 3; }
  .f-unknown, .f-rodden { grid-column: span 3; }
  /* «Рассчитать» — во всю ширину, под ней поровну «Очистить» и «Свернуть» */
  .f-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  .f-actions #b-calc { grid-column: 1 / -1; }
  .f-tz .row .btn { padding-left: 10px; padding-right: 10px; font-size: 14px; flex: none; }
  #b-tz .full { display: none; }  /* «Определить» — короче: поле пояса шире */
  #b-tz .short { display: inline; }
  .f-tz .row input { flex: 1; min-width: 0; }
  .chart-area { display: block; }
  .wheel-box { display: block; }
  .wheel-tools { position: static; flex-wrap: wrap; margin-top: 4px; pointer-events: auto; }
  #wheel { height: auto; aspect-ratio: 1; }
  .details { overflow: visible; padding-right: 0; margin-top: 8px; }
  .details section { overflow-x: auto; }
  table.bal { width: 100%; table-layout: fixed; }
  table.bal th:first-child { width: 58px; }
  table.bal th.sum, table.bal td.sum { width: 44px; }
  table.bal thead th { font-size: 11px; overflow: hidden; text-overflow: ellipsis; padding: 2px 2px 5px; }
  table.bal td.cell { min-width: 0; padding: 3px 5px; overflow: hidden; }
  table.bal .sg { margin-right: 4px; }
  table.bal .pl { font-size: 15px; letter-spacing: 0; }
  .cfgs { grid-template-columns: minmax(0, 1fr); }
  .cfgs.odd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
  .dp-time { text-align: right; }
  .dp-row .dp-bar { grid-column: 1 / -1; grid-row: 2; }
  .dp-head > div:not(.dp-scale) { display: none; }
  .dp-head .dp-scale { grid-column: 1 / -1; }
  .db { display: block; }
  .groups-toggle .chev { display: inline; }
  .groups { margin-bottom: 10px; }
  .tree { display: none; max-height: 50vh; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; background: var(--card); }
  .groups.open .tree { display: block; }
  /* база: поиск — во всю ширину, кнопки — ровными парами */
  .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar input[type=search] { grid-column: 1 / -1; width: auto; }
  .toolbar .grow { display: none; }
  .toolbar .btn { padding-left: 6px; padding-right: 6px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #b-cond, #b-all { grid-column: 1 / -1; }
  #b-cond:has(+ #b-search:not([hidden])) { grid-column: auto; }
  /* условие поиска — фразой, поля выбора растягиваются по строке */
  .cond select { flex: 1 1 90px; min-width: 0; }
  /* вкладки настроек — ровной сеткой по две */
  .set-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-tabs button { border-left: 0; border-top: 1px solid var(--line); text-align: center; }
  .set-tabs button:nth-child(even) { border-left: 1px solid var(--line); }
  .set-tabs button:nth-child(-n+2) { border-top: 0; }
  .table-wrap { overflow: visible; }
  table.list th { top: 41px; }
  table.list .c-place, table.list .c-group, table.list .c-rodden, table.list .c-check, table.list .c-notes { display: none; }
  table.list .c-date { width: 100px; }
  table.list .c-time { width: 58px; }
  table.list .c-match { width: 34%; }
  table.list td { padding-top: 8px; padding-bottom: 8px; }
  .overlay { position: fixed; overflow: auto; display: block; padding: 12px 14px; }
  .an-split { display: block; }
  .an-info { max-height: none; }
  table.list.an th { top: 0; position: static; }
  .set-grid { grid-template-columns: minmax(0, 1fr); }
  /* выбор из списка в строке настроек — под подписью и во всю ширину, как в остальных полях */
  .set-row select { display: block; width: 100%; margin-top: 4px; }
  .set-grid.emph-min { grid-template-columns: minmax(0, 1fr) max-content; }  /* порог — справа от подписи */
  /* окно на телефоне — почти во всю ширину экрана */
  .backdrop { padding: 8px; }
  .dialog { padding: 14px 12px; }
  /* баллы домов — сеткой 4 × 3, подпись над полем */
  .houses12 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; }
  .houses12 label { flex-direction: column; align-items: stretch; gap: 2px; }
  .houses12 input.pt { width: 100%; }
  .kv { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 18px; }
  table.outer-orbs th, table.outer-orbs td { padding-right: 8px; }
  /* знаки достоинств: имя планеты — строкой, под ним обитель и экзальтация, ниже изгнание и падение (как в заголовке) */
  .dign { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4px 6px; }
  .dign > span:not(.hd), .dign > .hd:first-child { grid-column: 1 / -1; font-size: 13.5px; }
  .dign > :nth-child(5n+6) { margin-top: 8px; }
  .dign .hd { flex-direction: column; align-items: flex-start; gap: 2px; }
  .dign input[type=text] { padding: 4px; font-size: 14px; }
  /* орбисы второго круга: строка таблицы — карточкой, подписи столбцов — у полей */
  table.outer-orbs, table.outer-orbs tbody { display: block; }
  table.outer-orbs thead { display: none; }
  table.outer-orbs tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
  table.outer-orbs td { display: block; padding: 0; border: 0; white-space: nowrap; }
  table.outer-orbs td:first-child { flex-basis: 100%; font-weight: 600; }
  table.outer-orbs td:nth-child(2) { flex-basis: 100%; }
  table.outer-orbs td:nth-child(2) select { width: 100%; }
  table.outer-orbs td.na { display: none; }
  table.outer-orbs td[data-label]::before { content: attr(data-label) "\00a0\00a0"; color: var(--ink2); font-size: 12.5px; }
  .tip { max-width: 92vw; }
  .cal-row { grid-template-columns: minmax(0, 1fr); }
  .tl { --lab: 92px; }
  /* большие окна (календарь, настройки) на телефоне — во весь экран */
  .backdrop:has(> .dialog.xl) { padding: 0; }
  .dialog.xl { width: 100%; height: 100%; max-height: 100%; border-radius: 0; padding: 12px 10px; }
  /* таблицы силы и гармонии: «напряжённый» и «1 дом» — без обрезания и переноса */
  table.t-strength td, table.t-hstrength td { font-size: 13.5px; }
  table.t-hstrength td:first-child { white-space: nowrap; }
  table.t-strength td { white-space: pre-line; }  /* число, под ним оценка — все строки одной высоты */
  /* дома — одним столбцом: вторая половина продолжает первую */
  .cols2 { columns: auto; }
  .cols2 table + table tr:first-child td { border-top: 1px solid var(--line); }
  /* таблицы панели — плотнее, чтобы умещались в ширину телефона без прокрутки вбок */
  table.t th, table.t td { padding-right: 6px; }
  :where(.details table.t) td { font-size: 14px; }
  .details table.t .gl { margin-right: 4px; }
  /* в аспектах, параллелях, антисах, мидпойнтах и звёздах у точки — только значок или «Асц» (имена — в «Планетах») */
  :is(.t-aspects, .t-pairs, .t-mid, .t-stars) td.name .tx { display: none; }
  :is(.t-aspects, .t-pairs, .t-mid, .t-stars) td.name .sh { display: inline; }
  :is(.t-aspects, .t-pairs, .t-mid, .t-stars) td.name .gl { margin-right: 0; color: var(--ink); width: auto; min-width: 1.15em; }
  .t-aspects th:nth-child(1), .t-aspects th:nth-child(3) { font-size: 0; }  /* над значками точек подпись не нужна */
  .t-mid th { white-space: nowrap; }
  .t-aspects td:last-child { padding-left: 4px; }
  .t-aspects td:last-child .tx { display: none; }  /* «прав.» / «лев.» */
  .t-aspects td:last-child .sh { display: inline; }
  /* жребии: знак — значком, формулы — в настройках */
  .t-lots td.sign .tx, .t-lots td:last-child, .t-lots th:last-child { display: none; }
  .cal-span { grid-column: 1; }
  .cal-when { font-weight: 600; font-size: 13px; }
  .tl-active .cal-row { grid-template-columns: 46px minmax(0, 1fr); }
  .tl-active .cal-span { grid-column: 2; }
  .el-row .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
  /* хорар: вопрос, дом и система домов — во всю ширину, одной шириной */
  .hq-controls > label { flex: 1 1 100%; }
  .hq-controls > label > select, .hq-controls label.wide .hq-text { width: 100%; max-width: none; }
  /* календарь: «аспектов: N» слева, «Изменить» справа, что показывать — под ними во всю ширину */
  .tl-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .tl-meta select { grid-column: 1 / -1; order: 1; width: 100%; font-size: 14px; padding: 4px 7px; }
  .el-len { display: block; }  /* длительность окна — строкой под датами, а не хвостом « · » */
  .el-len::before { content: none; }
  /* поиск момента: «+ Условие», под ним дата и период поровну, под ними «Найти» */
  .el-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .el-controls > .btn { grid-column: 1 / -1; }
  .el-controls > .primary { order: 1; }
  .el-controls input.w-date, .el-controls select { width: 100%; }
  /* условия (поиск момента и база): связка, «НЕ» и ✕ — первой строкой, вид условия — во всю ширину, дальше — фраза */
  .conds { gap: 0; }
  .cond { padding: 8px 0; }
  .cond + .cond { border-top: 1px solid var(--line); }
  .cond > * { order: 2; }
  .cond > .lead, .cond > .check, .cond > .btn { order: 0; }
  .cond > .btn { margin-left: auto; }
  .cond > select:nth-child(3) { order: 1; flex: 1 1 100%; }
  .rect-ev .rect-text { flex-basis: 100%; order: 3; }
  .lot-row .lot-name { flex: 1 1 160px; }
  .lot-row > .btn { margin-left: auto; }  /* ✕ — у правого края, как у условий поиска */
  .lot-row .glue { display: flex; gap: 3px; align-items: center; flex-basis: 100%; min-width: 0; }
  /* ширина в процентах: поле выбора тогда может сжиматься уже своего самого длинного пункта */
  .lot-row .glue select { flex: 1 1 30%; width: 30%; min-width: 0; padding: 4px 2px; font-size: 14px; }
  /* веса календаря: три столбца полей умещаются в ширину телефона */
  table.cw th { padding: 2px 2px 4px; font-size: 11px; }
  table.cw td { padding: 2px 4px 2px 0; }
  table.cw input.pt { width: 46px; padding-left: 2px; padding-right: 2px; }
  table.cw th .full { display: none; }
  table.cw th .short { display: inline; }
  table.bal td.cell { white-space: normal; }  /* много планет в знаке — в две строки, а не за край клетки */
  table.bal thead th.sum { padding: 2px 0 5px; }
  table.bal th .full { display: none; }  /* «Кардин.», «Фиксир.», «Мутаб.» */
  table.bal th .short { display: inline; }
  table.cw td .gl { width: 1.1em; }
}
/* телефон боком: круг слева, панель справа (круг — не выше экрана) */
@media (max-width: 900px) and (orientation: landscape) {
  .chart-area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .wheel-box { display: flex; flex-direction: column; }
  #wheel { flex: none; height: auto; aspect-ratio: 1; max-height: calc(100vh - 56px); width: 100%; }
  .details { margin-top: 0; }
  .person-main { flex-basis: auto; }
  .person { flex-wrap: nowrap; align-items: flex-start; }
  .person-actions { justify-content: flex-end; }
}
@media (max-width: 359px) {  /* совсем узкий телефон (320): всё то же, что на телефоне, но ещё плотнее */
  .person-actions { gap: 6px; }
  .person-actions .btn { padding: 6px 7px; font-size: 14px; }  /* четыре кнопки под именем — в одну строку */
  .toolbar { grid-template-columns: minmax(0, 1fr); }  /* кнопки базы — по одной в строке, без обрезанных подписей */
  #b-cond:has(+ #b-search:not([hidden])) { grid-column: 1 / -1; }
  /* веса календаря: поля уже, без значков планет */
  table.cw input.pt { width: 40px; }
  table.cw td .gl { display: none; }
  /* знак — только значком; сила домов — тоже в две строки */
  .t-planets td.sign .tx, .t-lots td.sign .tx, .t-stars td.sign .tx, .t-rulers td.sign .tx { display: none; }
  .t-rulers td.small.nw { white-space: normal; }  /* «включён Близнецы» — в две строки */
  .t-rulers td:first-child, .t-rulers th:first-child { width: 2em; padding-right: 6px; }
  table.t-hstrength td { white-space: pre-line; }
  .t-gq td:last-child, :where(.details table.t-lots) td { font-size: 13px; }
  .t-aspects td:last-child, .t-aspects th:last-child { display: none; }  /* «Цикл» на самом узком экране не помещается */
  /* полусферы: значки в клетке квадранта — в две строки, подписи сторон мельче */
  table.hemi td.cell { white-space: normal; height: auto; padding: 3px 4px 14px; }
  table.hemi td.cell .pl { letter-spacing: 0; }
  table.hemi th.h div:first-child { font-size: 12.5px; }
}
@media (max-width: 699px) {  /* узко (телефон стоймя): даты «в орбисе» — в списке под шкалой, а не столбцом */
  .tl { --dates: 0px; }
  .tl .tl-dates { display: none; }
}
/* печать и «Сохранить как PDF»: круг на первой странице, за ним — все таблицы панели целиком */
@media print {
  @page { margin: 12mm; }
  :root:root:root {  /* печать — всегда в светлых цветах, и при тёмной теме */
    --paper: #FFF8EF; --card: #FFFDF9; --ink: #2A1405; --ink2: rgba(42, 20, 5, .64); --ink3: rgba(42, 20, 5, .42);
    --line: rgba(42, 20, 5, .13); --line2: rgba(42, 20, 5, .32); --accent-ink: #A9570A; --accent-soft: #FDEBD3;
    --sel: #FBE6CB; --sel2: #F8CD98; --good: #4F7A1F; --calm: #2F6F8F; --bad: #B4532A; --theme: light; color-scheme: light;
  }
  header.top, .person-actions, .wheel-tools, .wheel-bar, #birth, #page-people, #analysis, #layer, #tip, .h-setup, .panel-setup,
  .st-switch { display: none !important; }
  html, body { height: auto; }
  body { overflow: visible; display: block; background: #fff; }
  main, .page { display: block; overflow: visible; padding: 0; }
  .chart-area { display: block; }
  .wheel-box { display: block; break-after: page; }
  #wheel { display: block; width: 100%; height: auto; aspect-ratio: 1; max-height: 240mm; }
  .details { overflow: visible; padding: 0; }
  .details section { break-inside: avoid; }
  .agrid-wrap { overflow: visible; }
}