| )
============================================================ */
.app-form-row {
display: grid;
grid-template-columns: 280px 1fr;
align-items: center;
gap: var(--app-space-4);
margin-bottom: var(--app-space-3);
}
.app-form-row > label {
color: var(--app-text);
font-weight: 500;
text-align: left;
}
.app-form-row > .app-form-control,
.app-form-row > .app-help {
min-width: 0;
}
.app-help {
color: var(--app-text-muted);
font-size: var(--app-fs-sm);
font-style: italic;
}
.app-input,
.app-textarea,
.app-select,
input.app-input[type="text"],
input.app-input[type="number"],
input.app-input[type="email"],
input.app-input[type="date"],
input.app-input[type="datetime-local"] {
width: 100%;
max-width: 420px;
padding: 7px 10px;
border: 1px solid var(--app-border);
border-radius: var(--app-radius-sm);
background: #fff;
color: var(--app-text);
font-family: var(--app-font);
font-size: var(--app-fs-base);
box-shadow: inset 0 1px 2px rgba(60, 40, 10, 0.04);
transition: border-color var(--app-trans), box-shadow var(--app-trans);
}
.app-input:focus,
.app-textarea:focus,
.app-select:focus {
outline: none;
border-color: var(--app-border-strong);
box-shadow: 0 0 0 3px rgba(176, 138, 75, 0.20);
}
.app-textarea { min-height: 80px; resize: vertical; }
input[type="file"].app-input,
.app-input-file {
padding: 4px;
background: var(--app-bg-soft);
box-shadow: none;
}
.app-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: var(--app-space-3) var(--app-space-4);
align-items: center;
}
.app-checkbox-group label {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: var(--app-fs-base);
}
.app-checkbox-group input[type="checkbox"],
.app-checkbox-group input[type="radio"] {
margin: 0;
accent-color: var(--app-primary);
}
/* ============================================================
Buttons
============================================================ */
.app-btn,
button.app-btn {
display: inline-block;
padding: 7px 16px;
font-family: var(--app-font);
font-size: var(--app-fs-base);
font-weight: 500;
line-height: 1.3;
border: 1px solid transparent;
border-radius: var(--app-radius-sm);
cursor: pointer;
text-decoration: none;
transition: background var(--app-trans), border-color var(--app-trans), color var(--app-trans);
}
.app-btn:hover { text-decoration: none; }
.app-btn-primary {
background: var(--app-primary);
border-color: var(--app-primary);
color: #fff;
}
.app-btn-primary:hover {
background: var(--app-primary-hover);
border-color: var(--app-primary-hover);
color: #fff;
}
.app-btn-ghost {
background: transparent;
border-color: var(--app-border-strong);
color: var(--app-primary);
}
.app-btn-ghost:hover {
background: var(--app-primary-soft);
color: var(--app-primary-hover);
}
.app-btn-danger {
background: transparent;
border-color: var(--app-danger);
color: var(--app-danger);
}
.app-btn-danger:hover {
background: var(--app-danger);
color: #fff;
}
.app-btn-sm { padding: 4px 10px; font-size: var(--app-fs-sm); }
/* ============================================================
Чипы / тэги
============================================================ */
.app-chip {
display: inline-block;
padding: 2px 10px;
background: var(--app-bg-accent);
color: var(--app-text-accent);
font-size: var(--app-fs-sm);
border-radius: 999px;
margin-right: var(--app-space-2);
}
.app-chip-accent {
background: var(--app-primary);
color: #fff;
}
/* ============================================================
Alerts / уведомления
============================================================ */
.app-alert {
padding: var(--app-space-3) var(--app-space-4);
border-radius: var(--app-radius);
margin-bottom: var(--app-space-4);
border: 1px solid;
font-size: var(--app-fs-base);
}
.app-alert-info { border-color: var(--app-info); background: rgba(21, 101, 192, 0.06); color: #0d3a72; }
.app-alert-success { border-color: var(--app-success); background: rgba(46, 125, 50, 0.06); color: #1b5e20; }
.app-alert-warn { border-color: var(--app-warning); background: rgba(199, 124, 14, 0.08); color: #6b3f00; }
.app-alert-danger { border-color: var(--app-danger); background: rgba(183, 28, 28, 0.06); color: #7f1d1d; }
/* ============================================================
Тонкие подстройки для legacy-классов чтобы не ломались
============================================================ */
/* Legacy styles.css задаёт .contact_form input { width:220px } — это перебивает
HTML-атрибут size= на широких полях транзитов / sadesati / vimshottari.
Восстанавливаем поведение по умолчанию: если автор разметки явно указал size
или cols — браузер сам подбирает ширину под атрибут. */
.contact_form input[type="text"][size],
.contact_form input[type="number"][size],
.contact_form input[type="email"][size] {
width: auto;
max-width: 100%;
}
.contact_form textarea[cols] {
width: auto;
max-width: 100%;
}
.contact_form input[type="file"] { height: auto; padding: 4px; box-shadow: none; }
.contact_form input[type="checkbox"],
.contact_form input[type="radio"],
.contact_form .form-check-input {
width: 16px;
height: 16px;
padding: 0;
margin: 0 6px 0 0;
border: 1px solid var(--app-border-strong);
border-radius: var(--app-radius-sm);
box-shadow: none;
cursor: pointer;
vertical-align: middle;
accent-color: var(--app-primary);
flex-shrink: 0;
}
.contact_form input[type="radio"],
.contact_form .form-check-input[type="radio"] {
border-radius: 50%;
}
/* Inline-группа чекбоксов в Bootstrap-вёрстке: чтобы галочка + текст были в строке */
.contact_form .form-check.form-check-inline {
display: inline-flex;
align-items: center;
margin-right: var(--app-space-4);
margin-bottom: var(--app-space-2);
padding: 0;
min-height: auto;
}
.contact_form .form-check.form-check-inline .form-check-label {
margin: 0;
cursor: pointer;
user-select: none;
}
/* Legacy .contact_form button { margin-left: 156px; } — отменяем, теперь кнопки на месте */
.contact_form button.submit,
.contact_form input.submit {
margin-left: 0;
}
/* ============================================================
interpretation_pair / single_block_with_save — flex-вёрстка
вместо table.table. Текст занимает доступное место, кнопки
прижаты к низу — обе колонки одинаковой высоты, без «пустот»
между текстом и кнопками.
============================================================ */
.app-interp-pair {
display: flex;
flex-wrap: wrap;
gap: var(--app-space-4);
margin-bottom: var(--app-space-5);
align-items: stretch;
}
.app-interp-col {
flex: 1 1 0;
min-width: 280px; /* на узком экране перенесёт правую вниз */
display: flex;
flex-direction: column;
gap: var(--app-space-2);
}
.app-interp-col .editor {
flex: 1 1 auto;
padding: var(--app-space-2) var(--app-space-3);
border: 1px solid var(--app-border);
border-radius: var(--app-radius-sm);
background: var(--app-bg-soft);
min-height: 60px;
}
.app-interp-col .editor:focus {
outline: none;
border-color: var(--app-primary);
box-shadow: 0 0 0 2px rgba(111, 78, 26, 0.15); /* --app-primary с альфой */
}
.app-interp-actions {
display: flex;
flex-wrap: wrap;
gap: var(--app-space-2);
margin-top: auto; /* кнопки прижаты к низу колонки */
}
.app-interp-pair-single .app-interp-col {
flex: 1 1 100%; /* одноколоночный вариант на всю ширину */
}
/* Override для legacy-разметки: те же flex-эффекты, но через
. Применяется к таблицам с одной
строкой и 1-2 ячейками (двухколоночный блок интерпретации). Реальные
многострочные таблицы статистики не задеваются — у них нет interp-table. */
.table.interp-table {
display: block;
border-collapse: separate;
margin-bottom: 0;
}
.table.interp-table > tbody { display: block; }
.table.interp-table > tbody > tr,
.table.interp-table > tr {
display: flex;
flex-wrap: wrap;
gap: var(--app-space-4);
margin-bottom: var(--app-space-5);
align-items: stretch;
}
.table.interp-table > tbody > tr > td,
.table.interp-table > tr > td {
flex: 1 1 0;
min-width: 280px;
display: flex;
flex-direction: column;
gap: var(--app-space-2);
padding: 0;
border: none;
vertical-align: top;
}
/* Внутри ячейки последняя кнопка / последний BR не нужны как сепаратор —
у нас flex решает порядок. Прижимаем кнопки к низу через margin-top:auto
на первой кнопке (за ней следующие лягут вплотную). */
.table.interp-table td > .btn:first-of-type {
margin-top: auto;
}
.table.interp-table td > .btn {
align-self: flex-start;
}
/* Стилизуем contenteditable .editor — раньше класс был без CSS вообще. */
.table.interp-table td .editor,
.app-interp-col .editor {
padding: var(--app-space-2) var(--app-space-3);
border: 1px solid var(--app-border);
border-radius: var(--app-radius-sm);
background: var(--app-bg-soft);
min-height: 60px;
}
.table.interp-table td .editor:focus,
.app-interp-col .editor:focus {
outline: none;
border-color: var(--app-primary);
box-shadow: 0 0 0 2px rgba(111, 78, 26, 0.15);
}
/* ============================================================
Legacy-табы .wrap-myvertical-tabs — переопределяем серую палитру
на нашу тёплую коричневую и устраняем хаотичные размеры
============================================================ */
.wrap-myvertical-tabs {
display: flex;
gap: 0;
align-items: stretch;
max-width: 100%;
background: var(--app-bg-card);
border: 1px solid var(--app-border);
border-radius: var(--app-radius-lg);
overflow: hidden;
box-shadow: var(--app-shadow-sm);
margin-top: var(--app-space-4);
}
ul.myvertical-tabs {
list-style: none;
margin: 0;
padding: 0;
background: var(--app-bg-soft);
border-right: 1px solid var(--app-line);
font-size: var(--app-fs-base);
flex-shrink: 0;
width: 230px;
}
ul.myvertical-tabs li {
padding: 10px 16px;
cursor: pointer;
background: transparent;
border: none;
border-left: 3px solid transparent;
border-bottom: 1px solid var(--app-line);
color: var(--app-text-muted);
position: static;
width: auto;
transition: background var(--app-trans), color var(--app-trans), border-color var(--app-trans);
}
ul.myvertical-tabs li:last-child {
border-bottom: none;
}
ul.myvertical-tabs li:hover {
background: var(--app-primary-soft);
color: var(--app-text);
border-left-color: var(--app-line);
}
ul.myvertical-tabs li.chosen {
background: var(--app-bg-card);
color: var(--app-text-accent);
border-left-color: var(--app-border-strong);
border-right-color: transparent;
font-weight: 500;
}
.myvertical-tabs-content-wrap {
flex: 1 1 auto;
min-width: 0;
background: var(--app-bg-card);
}
.myvertical-tabs-content {
display: none;
background: var(--app-bg-card);
padding: var(--app-space-5);
margin-left: 0;
}
.myvertical-tabs-content.active {
display: block;
}
.myvertical-tabs-content > h3:first-child {
margin-top: 0;
padding-bottom: var(--app-space-3);
border-bottom: 1px solid var(--app-line);
margin-bottom: var(--app-space-4);
}
/* Перекрашиваем legacy-заголовки .header / .header2 (blueviolet) */
.header, .header2 {
color: var(--app-text-accent);
font-family: var(--app-font);
}
.header { font-size: var(--app-fs-h1); font-weight: 600; padding: var(--app-space-3) 0; }
.header2 { font-size: var(--app-fs-xl); font-weight: 500; padding: var(--app-space-3) 0; }
.nochangetext, .text {
color: var(--app-text);
}
.text { font-size: var(--app-fs-md); }
/* Унификация Bootstrap-кнопок с нашей палитрой */
.btn.btn-outline-primary {
color: var(--app-primary);
border-color: var(--app-primary);
}
.btn.btn-outline-primary:hover {
background: var(--app-primary);
border-color: var(--app-primary);
color: #fff;
}
.btn.btn-outline-info {
color: var(--app-info);
border-color: var(--app-info);
}
/* ============================================================
Двух-колоночная сетка «форма + картинки» — секция "Общая информация"
============================================================ */
.app-info-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
gap: var(--app-space-6);
align-items: start;
}
.app-info-form { max-width: 720px; }
.app-page-lead {
color: var(--app-text-muted);
font-size: var(--app-fs-base);
margin: 0 0 var(--app-space-4);
max-width: 900px;
}
.app-readonly {
padding: 7px 10px;
background: var(--app-bg-soft);
border: 1px solid var(--app-line);
border-radius: var(--app-radius-sm);
color: var(--app-text);
font-family: var(--app-font-mono);
font-size: var(--app-fs-sm);
max-width: 420px;
}
.app-info-images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--app-space-4);
}
.app-image-thumb {
margin: 0;
background: var(--app-bg-soft);
border: 1px solid var(--app-border);
border-radius: var(--app-radius);
padding: var(--app-space-3);
text-align: center;
box-shadow: var(--app-shadow-sm);
}
.app-image-thumb img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto var(--app-space-2);
border-radius: var(--app-radius-sm);
}
.app-image-thumb figcaption {
color: var(--app-text-muted);
font-size: var(--app-fs-sm);
}
.app-image-thumb.is-empty {
border-style: dashed;
opacity: 0.6;
}
.app-image-thumb.is-empty img {
max-width: 160px;
opacity: 0.5;
}
/* ============================================================
Таблицы данных — единый стиль для всех таблиц внутри табов.
Применяется автоматом ко всем в .myvertical-tabs-content,
а также через явный класс .app-table.
============================================================ */
.myvertical-tabs-content table,
.app-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
margin: var(--app-space-3) 0 var(--app-space-5);
background: var(--app-bg-card);
border: 1px solid var(--app-line);
border-radius: var(--app-radius);
overflow: hidden;
font-size: var(--app-fs-base);
}
.myvertical-tabs-content table th,
.app-table th {
text-align: left;
background: var(--app-primary-soft);
color: var(--app-text-accent);
font-weight: 600;
font-size: var(--app-fs-xs);
padding: 6px 6px;
border-bottom: 1px solid var(--app-border);
white-space: nowrap;
}
.myvertical-tabs-content table td,
.app-table td {
padding: 4px 6px;
border-top: 1px solid var(--app-line);
vertical-align: middle;
color: var(--app-text);
font-size: var(--app-fs-sm);
}
.myvertical-tabs-content table tbody tr:nth-child(even),
.app-table tbody tr:nth-child(even) {
background: var(--app-bg-soft);
}
.myvertical-tabs-content table tbody tr:hover,
.app-table tbody tr:hover {
background: var(--app-primary-soft);
}
/* Внешние таблицы без th (legacy форма с парой td label/td input) — без zebra */
.myvertical-tabs-content > table:not(:has(th)) {
background: transparent;
border: none;
}
.myvertical-tabs-content > table:not(:has(th)) td {
border: none;
padding: 4px 8px;
}
.myvertical-tabs-content > table:not(:has(th)) tbody tr {
background: transparent !important;
}
/* Компактные select / input внутри таблиц.
width: auto и небольшой min-width — чтобы 15-колоночная таблица
"Состояние Грах" умещалась в пределах разумного. */
.myvertical-tabs-content table select,
.myvertical-tabs-content table input[type="text"],
.myvertical-tabs-content table input[type="number"],
.app-table select,
.app-table input[type="text"],
.app-table input[type="number"] {
width: auto;
min-width: 56px;
max-width: 100%;
padding: 3px 4px;
border: 1px solid var(--app-border);
border-radius: var(--app-radius-sm);
background: #fff;
color: var(--app-text);
font-family: var(--app-font);
font-size: var(--app-fs-xs);
}
/* Таблица "Состояние Грах" имеет много колонок — заворачиваем в скролл-обёртку.
Применяется автоматом ко всем таблицам внутри табов, если содержимое шире контейнера. */
.myvertical-tabs-content {
overflow-x: auto;
}
.myvertical-tabs-content table select:focus,
.app-table select:focus,
.myvertical-tabs-content table input:focus,
.app-table input:focus {
outline: none;
border-color: var(--app-border-strong);
box-shadow: 0 0 0 2px rgba(176, 138, 75, 0.20);
}
/* Узкие input для градусов/минут/секунд */
.app-table-narrow input { max-width: 80px; }
/* Колонка "Самбандха" — фиксированная узкая ширина, перенос длинных значений
ТОЛЬКО по двоеточиям (через в HTML), а не побуквенно. */
.myvertical-tabs-content table th.col-sambandha,
.myvertical-tabs-content table td.col-sambandha {
width: 140px;
max-width: 140px;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
font-size: var(--app-fs-xs);
line-height: 1.4;
}
/* ============================================================
Legacy-кнопки — мигрируем под нашу палитру через каскад
============================================================ */
.contact_form button.submit,
button.submit,
input.submit {
display: inline-block;
padding: 8px 18px;
background: var(--app-primary);
border: 1px solid var(--app-primary);
border-radius: var(--app-radius-sm);
color: #fff;
font-family: var(--app-font);
font-size: var(--app-fs-base);
font-weight: 500;
cursor: pointer;
box-shadow: none;
text-shadow: none;
transition: background var(--app-trans);
}
.contact_form button.submit:hover,
button.submit:hover,
input.submit:hover {
background: var(--app-primary-hover);
border-color: var(--app-primary-hover);
}
/* ============================================================
Списки / текстовые блоки внутри табов
============================================================ */
.myvertical-tabs-content h4,
.myvertical-tabs-content h5 {
margin-top: var(--app-space-4);
color: var(--app-text-accent);
}
.myvertical-tabs-content p {
margin: var(--app-space-2) 0;
}
/* Подзаголовки секций ("Дополнительно", "Проверка на ...") */
.myvertical-tabs-content b,
.myvertical-tabs-content strong {
color: var(--app-text-accent);
}
/* ============================================================
Справочник йог (yogas_book.php).
Размер схемы регулируется CSS-переменной --yoga-chart-size
(выставляется в yogas_book.php через :root style="...").
============================================================ */
.yoga-grid {
--yoga-chart-size: 240px;
display: grid;
grid-template-columns: 1fr;
gap: var(--app-space-5);
margin-top: var(--app-space-5);
}
.yoga-group {
display: flex;
flex-direction: column;
gap: var(--app-space-2);
}
.yoga-card {
background: var(--app-bg-card);
border: 1px solid var(--app-border);
border-radius: var(--app-radius-lg);
padding: var(--app-space-5);
box-shadow: var(--app-shadow-sm);
display: grid;
grid-template-columns: var(--yoga-chart-size) var(--yoga-chart-size) 1fr;
gap: var(--app-space-5);
align-items: start;
}
.yoga-card.disabled-card { opacity: 0.55; }
.yoga-card .chart-block { text-align: center; }
.yoga-card .chart-block svg { display: block; margin: 0 auto; }
.yoga-card .chart-block .label {
font-size: var(--app-fs-xs);
color: var(--app-text-muted);
margin-top: var(--app-space-2);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.yoga-card .empty-chart {
width: var(--yoga-chart-size);
height: var(--yoga-chart-size);
border: 1px dashed var(--app-line);
display: flex;
align-items: center;
justify-content: center;
color: var(--app-text-muted);
font-size: var(--app-fs-sm);
}
.yoga-card .info { min-width: 0; }
.yoga-card .info h3 {
margin: 0 0 var(--app-space-2);
font-size: var(--app-fs-xl);
color: var(--app-text-accent);
}
.yoga-card .meta {
color: var(--app-text-muted);
font-size: var(--app-fs-sm);
margin-bottom: var(--app-space-3);
}
.yoga-card .meta .cat {
background: var(--app-bg-accent);
padding: 2px 8px;
border-radius: var(--app-radius-sm);
color: var(--app-text-accent);
margin-right: var(--app-space-1);
}
.yoga-card .meta .code {
color: var(--app-text-muted);
font-family: var(--app-font-mono);
font-size: var(--app-fs-xs);
margin-left: var(--app-space-2);
background: transparent;
padding: 0;
}
.yoga-card p.description {
margin: var(--app-space-2) 0;
font-size: var(--app-fs-base);
line-height: 1.5;
color: var(--app-text);
}
.yoga-card p.short-text {
color: var(--app-text-accent);
font-weight: 500;
margin: var(--app-space-3) 0 var(--app-space-2);
padding: 6px 10px;
background: var(--app-primary-soft);
border-left: 3px solid var(--app-border-strong);
}
.yoga-card .source {
font-style: italic;
color: var(--app-text-muted);
font-size: var(--app-fs-sm);
margin-top: var(--app-space-2);
}
.yoga-card .disabled-flag {
color: var(--app-danger);
margin-left: var(--app-space-2);
font-size: var(--app-fs-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Тулбар фильтров */
.yoga-toolbar {
display: flex;
gap: var(--app-space-3);
align-items: center;
padding: var(--app-space-3);
background: var(--app-primary-soft);
border-radius: var(--app-radius);
margin-top: var(--app-space-3);
flex-wrap: wrap;
}
.yoga-toolbar label {
font-size: var(--app-fs-sm);
color: var(--app-text-accent);
}
.yoga-toolbar select,
.yoga-toolbar input[type=text] {
padding: 5px 8px;
border: 1px solid var(--app-border);
border-radius: var(--app-radius-sm);
background: #fff;
font-family: var(--app-font);
}
.yoga-toolbar .actions { margin-left: auto; }
/* Аккордеон подкомбинаций */
details.children-block {
margin: var(--app-space-1) 0 0 40px;
background: var(--app-bg-soft);
border-left: 3px solid var(--app-border);
border-radius: 0 var(--app-radius) var(--app-radius) 0;
}
details.children-block > summary {
list-style: none;
cursor: pointer;
padding: 10px 18px;
color: var(--app-text-accent);
font-weight: 500;
font-size: var(--app-fs-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
user-select: none;
display: flex;
align-items: center;
gap: var(--app-space-2);
}
details.children-block > summary::-webkit-details-marker { display: none; }
details.children-block > summary::before {
content: '▸';
font-size: var(--app-fs-sm);
color: var(--app-border-strong);
transition: transform var(--app-trans);
display: inline-block;
}
details[open].children-block > summary::before { transform: rotate(90deg); }
details.children-block > summary .count {
background: var(--app-border);
color: #fff;
padding: 1px 8px;
border-radius: 10px;
font-size: var(--app-fs-xs);
font-weight: 600;
}
details.children-block > summary:hover {
background: rgba(176, 138, 75, 0.08);
}
.children-list {
padding: var(--app-space-1) 18px var(--app-space-3);
}
.child-row {
padding: var(--app-space-2) 0;
border-bottom: 1px dashed var(--app-line);
}
.child-row:last-child { border-bottom: none; }
.child-row.disabled-card { opacity: 0.55; }
.child-row .child-name {
font-weight: 500;
color: var(--app-text-accent);
font-size: var(--app-fs-base);
}
.child-row .child-name .code {
color: var(--app-text-muted);
font-family: var(--app-font-mono);
font-size: var(--app-fs-xs);
font-weight: normal;
margin-left: var(--app-space-2);
background: transparent;
padding: 0;
}
.child-row .child-short {
color: var(--app-text-accent);
font-size: var(--app-fs-sm);
margin-top: var(--app-space-1);
}
.child-row .child-desc {
color: var(--app-text-muted);
font-size: var(--app-fs-sm);
margin-top: var(--app-space-1);
line-height: 1.4;
}
.yoga-empty {
text-align: center;
color: var(--app-text-muted);
padding: var(--app-space-7);
}
/* ============================================================
Редактор йог (yoga_edit.php)
============================================================ */
.yoga-edit-shell {
display: grid;
grid-template-columns: 320px 1fr;
gap: var(--app-space-5);
align-items: start;
margin-top: var(--app-space-4);
}
.yoga-edit-list {
background: var(--app-bg-card);
border: 1px solid var(--app-border);
border-radius: var(--app-radius);
overflow: hidden;
position: sticky;
top: var(--app-space-3);
max-height: calc(100vh - var(--app-space-5));
display: flex;
flex-direction: column;
}
.yoga-edit-list-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--app-space-3);
background: var(--app-primary-soft);
border-bottom: 1px solid var(--app-line);
color: var(--app-text-accent);
}
.yoga-edit-listing {
list-style: none;
margin: 0;
padding: 0;
overflow-y: auto;
flex: 1;
}
.yoga-edit-listing li {
border-bottom: 1px solid var(--app-line);
transition: background var(--app-trans);
}
.yoga-edit-listing li:hover { background: var(--app-bg-soft); }
.yoga-edit-listing li.active { background: var(--app-primary-soft); border-left: 3px solid var(--app-border-strong); }
.yoga-edit-listing li.disabled { opacity: 0.5; }
.yoga-edit-listing li a {
display: block;
padding: 10px 14px;
text-decoration: none;
border-bottom: none;
color: var(--app-text);
}
.yoga-edit-listing li a:hover { color: var(--app-text); }
.yoga-edit-listing .cat {
background: var(--app-bg-accent);
color: var(--app-text-accent);
padding: 1px 6px;
border-radius: var(--app-radius-sm);
font-size: var(--app-fs-xs);
margin-right: var(--app-space-2);
}
.yoga-edit-listing .name { font-size: var(--app-fs-sm); }
.yoga-edit-listing .parent {
color: var(--app-text-muted);
font-size: var(--app-fs-xs);
margin-left: var(--app-space-2);
}
.yoga-edit-form-wrap { min-width: 0; }
.yoga-edit-form .app-card-header { align-items: center; }
.yoga-edit-form .app-card-header .meta { display: flex; gap: var(--app-space-2); }
.yoga-edit-form .app-form-row { grid-template-columns: 200px 1fr; }
.yoga-edit-form .app-textarea-mono {
font-family: var(--app-font-mono);
font-size: var(--app-fs-sm);
line-height: 1.5;
max-width: 100%;
}
.yoga-edit-form .app-textarea-mono[name="predicate"],
.yoga-edit-form .app-textarea-mono[name="output_rules"],
.yoga-edit-form .app-textarea-mono[name="chart_example"] {
background: #fdfaf2;
}
.yoga-edit-checkbox {
display: inline-flex;
align-items: center;
gap: var(--app-space-2);
cursor: pointer;
}
.yoga-edit-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--app-primary);
cursor: pointer;
}
.yoga-edit-preview {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--app-space-4);
margin: var(--app-space-3) 0 var(--app-space-4) 200px;
}
.yoga-edit-preview .preview-block {
background: var(--app-bg-soft);
border: 1px solid var(--app-border);
border-radius: var(--app-radius);
padding: var(--app-space-3);
text-align: center;
}
.yoga-edit-preview .preview-title {
color: var(--app-text-muted);
font-size: var(--app-fs-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--app-space-2);
}
.yoga-edit-preview .preview-error {
color: var(--app-danger);
font-size: var(--app-fs-sm);
padding: var(--app-space-3);
}
.yoga-edit-preview svg { display: block; margin: 0 auto; }
@media (max-width: 1100px) {
.yoga-edit-shell { grid-template-columns: 1fr; }
.yoga-edit-list { position: static; max-height: none; }
}
@media (max-width: 1100px) {
.yoga-card {
grid-template-columns: var(--yoga-chart-size) var(--yoga-chart-size);
}
.yoga-card .info { grid-column: 1 / 3; }
}
/* ============================================================
Хлебные крошки / навигация наверху страницы
============================================================ */
.app-breadcrumb {
display: flex;
gap: var(--app-space-5);
margin-bottom: var(--app-space-3);
font-size: var(--app-fs-sm);
color: var(--app-text-muted);
}
.app-breadcrumb a {
color: var(--app-text-muted);
border-bottom: none;
}
.app-breadcrumb a:hover {
color: var(--app-primary);
border-bottom: 1px solid var(--app-border-strong);
}
/* ============================================================
Шапка карты клиента (имя + дата/координаты рождения)
============================================================ */
.app-client-header {
display: flex;
align-items: baseline;
gap: var(--app-space-5);
flex-wrap: wrap;
padding-bottom: var(--app-space-3);
margin-bottom: var(--app-space-4);
border-bottom: 1px solid var(--app-line);
}
.app-client-header h1 {
margin: 0;
color: var(--app-text-accent);
}
.app-client-header .app-client-meta {
color: var(--app-text-muted);
font-family: var(--app-font-mono);
font-size: var(--app-fs-sm);
}
/* ============================================================
Контент: общая обёртка страницы (поверх )
============================================================ */
.app-page {
max-width: 1400px;
margin: 0 auto;
padding: var(--app-space-4) var(--app-space-5);
}
/* ============================================================
v2 — блоки главной страницы / общие компоненты дизайн-системы
Источник: design/Jyotisha/styles.css
============================================================ */
/* ── Sidebar widget (луна + время) ──────────────────────────── */
.sidebar-widget {
text-align: center;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-soft);
}
.sidebar-widget__phase { display: flex; justify-content: center; margin-bottom: 12px; }
.sidebar-widget__tithi { font-size: 17px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.sidebar-widget__paksha { font-size: 12px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px; }
.sidebar-widget__date { font-size: 12px; color: var(--fg-3); letter-spacing: 0.3px; margin-bottom: 12px; }
.sidebar-widget__bar { height: 4px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin: 0 12px 6px; }
.sidebar-widget__bar-fill { height: 100%; background: var(--accent); transition: width 0.3s ease; }
.sidebar-widget__remain { font-size: 11px; color: var(--fg-3); margin-bottom: 16px; }
.sidebar-widget__divider { height: 1px; background: var(--border-soft); margin: 12px 0; }
.sidebar-widget__now { text-align: center; }
.sidebar-widget__now-time {
font-size: 22px;
font-weight: 700;
color: var(--fg);
font-variant-numeric: tabular-nums;
letter-spacing: -0.5px;
}
.sidebar-widget__now-label { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 2px; }
/* ── Section (документ-style блок без card-обёртки) ─────────── */
.section { margin-bottom: var(--section-gap); }
.section__title {
font-size: 24px;
font-weight: 700;
color: var(--accent);
margin: 0 0 18px;
letter-spacing: -0.2px;
display: flex;
align-items: baseline;
gap: 12px;
}
.section__title-sub { font-size: 14px; font-weight: 400; color: var(--fg-3); letter-spacing: 0; }
.section__title--sm { font-size: 18px; }
/* ── Hero (главная — большой блок сверху) ───────────────────── */
.hero {
display: grid;
grid-template-columns: auto 1fr; /* tear-off слева, контент справа */
gap: 28px;
align-items: start;
margin: 8px 0 28px;
padding-bottom: 22px;
border-bottom: 1px solid var(--border);
}
.hero__date {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.hero__left { min-width: 0; }
/* ── Tear-off калéndарь (отрывной листок) ─────────────────────── */
.tearoff {
width: 100px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
overflow: hidden;
text-align: center;
box-shadow: 0 2px 4px rgba(60,40,8,0.06);
line-height: 1;
}
.tearoff__hat {
background: var(--accent);
color: #fdf6e8;
padding: 6px 0;
font-size: 13px;
font-weight: 700;
text-transform: lowercase;
letter-spacing: 0.12em;
}
.tearoff__day {
font-size: 52px;
font-weight: 700;
color: var(--fg);
line-height: 1;
padding: 14px 0 4px;
letter-spacing: -1.5px;
}
.tearoff__month {
font-size: 12px;
color: var(--fg-3);
padding: 4px 6px 12px;
text-transform: lowercase;
letter-spacing: 0.04em;
}
.hero__eyebrow {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--fg-3);
font-weight: 600;
margin-bottom: 8px;
}
.hero__eyebrow-day { color: var(--fg-2); }
.hero__sep { color: var(--fg-4); }
.hero__city {
background: none;
border: none;
border-bottom: 1px dashed var(--accent);
padding: 0;
font: inherit;
color: var(--accent);
text-transform: none;
letter-spacing: 0;
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
}
.hero__city:hover { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }
.hero__title {
display: flex;
align-items: center;
gap: 14px;
font-size: 42px;
font-weight: 700;
color: var(--accent);
margin: 0 0 10px;
letter-spacing: -0.6px;
line-height: 1.05;
}
.hero__subline {
font-size: 15px;
color: var(--fg-2);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
margin-bottom: 12px;
}
.hero__sub-item { display: inline-flex; align-items: center; gap: 4px; }
.hero__sub-item strong { color: var(--fg); }
.hero__right { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero__date-block { text-align: center; line-height: 1; }
.hero__date-day {
font-size: 56px;
font-weight: 700;
color: var(--fg);
letter-spacing: -1.5px;
line-height: 1;
}
.hero__date-month {
font-size: 14px;
color: var(--fg-3);
margin-top: 4px;
text-transform: lowercase;
letter-spacing: 0.5px;
}
.hero__nav { display: flex; gap: 8px; align-items: center; }
/* ── Date-nav buttons (стрелки ‹ ›) ─────────────────────────── */
.date-nav { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.date-nav__btn {
width: 28px;
height: 28px;
border-radius: var(--r-md);
border: 1px solid var(--border);
background: var(--bg);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
cursor: pointer;
text-decoration: none;
transition: all var(--t-fast);
}
.date-nav__btn:hover { background: var(--surface-2); color: var(--accent-hi); border-bottom: 1px solid var(--border); }
.date-nav__current { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); }
.btn-today {
font-size: 14px;
color: var(--accent);
background: none;
border: none;
border-bottom: 1px dashed var(--accent);
padding: 0 0 1px;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
cursor: pointer;
text-decoration: none;
}
.btn-today:hover { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }
/* ── Festivals / day-yoga / vrata — текстом, без пилюль ─────────
Сначала рендерим список ссылок-«чипов» в один поток, разделяем
middle-dot'ом через ::before на сиблингах. Цвет = качество события.
Underline-dashed на hover показывает кликабельность. */
.festivals {
display: block; margin-top: 8px;
font-size: 14px; line-height: 1.7;
color: var(--fg-2);
}
.festivals__pill {
display: inline; padding: 0; background: transparent;
color: var(--accent); font-family: inherit; font-size: inherit;
cursor: pointer; text-decoration: none;
/* перебиваем глобальное `a { border-bottom: 1px dotted }` — рамка живёт
на дочернем (только под текстом, не под ::before-точкой). */
border: none !important;
transition: color var(--t-fast);
}
/* Подчёркивание идёт ТОЛЬКО под текстом, не под ::before-точкой —
текст рендерится в дочернем , на котором dashed border-bottom. */
.festivals__pill > span {
border-bottom: 1px dashed transparent;
transition: border-color var(--t-fast);
}
.festivals__pill:hover { color: var(--accent-hi); }
.festivals__pill:hover > span { border-bottom-color: currentColor; }
.festivals__pill + .festivals__pill::before {
content: '·'; color: var(--fg-3); padding: 0 8px;
}
.festivals__pill.is-vrata { color: var(--fg-3); }
.festivals__pill.is-vrata:hover { color: var(--fg); }
.festivals__pill.is-yoga-good { color: var(--good); }
.festivals__pill.is-yoga-bad { color: var(--bad); }
.festivals__pill-glyph {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--accent);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 700;
}
/* ── Qmark (✓ / ⊘ маркер качества) ──────────────────────────── */
.qmark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 999px;
font-size: 9px;
font-weight: 700;
margin-left: 4px;
flex-shrink: 0;
vertical-align: middle;
line-height: 1;
position: relative;
top: -1px;
}
.qmark--good { background: var(--good); color: #fff; }
.qmark--bad { background: var(--bad); color: #fff; }
.qmark--warn { background: var(--warn); color: #fff; }
.qmark--neutral { background: var(--fg-4); color: #fff; }
/* ── Card grid (1fr/auto разметки страниц) ─────────────────── */
.card-grid { display: grid; gap: 20px; margin-bottom: 20px; }
.card-grid--2to1 { grid-template-columns: 1.3fr 1fr; }
.card-grid--1to2 { grid-template-columns: 1fr 1.3fr; }
.card-grid--1to2-stack { grid-template-columns: 1fr 1.3fr; align-items: start; }
.card-grid--1to1 { grid-template-columns: 1fr 1fr; }
.card-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.card-grid--1 { grid-template-columns: 1fr; }
.stack { display: flex; flex-direction: column; gap: 20px; }
/* ── Ucard (универсальная карточка) ─────────────────────────── */
.ucard {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px 26px;
display: flex;
flex-direction: column;
box-shadow: 0 1px 2px rgba(60, 40, 8, 0.03);
min-width: 0; /* grid/flex-child может сжиматься */
box-sizing: border-box;
}
.ucard__body { min-width: 0; }
.stack { min-width: 0; }
.ukv2 { min-width: 0; }
.ukv2__v-main, .ukv2__v-sub { overflow-wrap: anywhere; } /* длинные слова переносятся */
.ucard__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.ucard__title {
font-size: 20px;
font-weight: 700;
color: var(--accent);
margin: 0;
letter-spacing: -0.2px;
}
.ucard__sub { font-size: 13px; color: var(--fg-3); }
.ucard__body { flex: 1; }
.ucard__foot {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
text-align: center;
}
.ucard__cta {
font-size: 15px;
color: var(--accent);
border-bottom: 1px dashed currentColor;
text-decoration: none;
}
.ucard__cta:hover { color: var(--accent-hi); border-bottom-style: solid; }
/* ── Universal KV (одноколоночный список) ───────────────────── */
.ukv { margin: 0; display: flex; flex-direction: column; }
.ukv__row {
display: grid;
grid-template-columns: minmax(120px, 160px) 1fr;
gap: 16px;
padding: 7px 0;
border-top: 1px solid var(--border-soft);
align-items: baseline;
}
.ukv__row:first-child { border-top: none; padding-top: 0; }
.ukv__row:last-child { padding-bottom: 0; }
.ukv__k { color: var(--fg-2); font-size: 14px; margin: 0; }
.ukv__v {
color: var(--fg);
font-size: 15px;
margin: 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 2px 10px;
line-height: 1.4;
}
.ukv__v-main { color: var(--fg); white-space: nowrap; }
.ukv__v-sub { color: var(--fg-3); font-size: 13px; white-space: nowrap; }
/* ── Ukv2 (двухколоночная KV-таблица) ───────────────────────── */
.ukv2 { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; }
.ukv2__cell {
display: grid;
grid-template-columns: minmax(96px, 110px) 1fr;
gap: 14px;
padding: 10px 0;
border-top: 1px solid var(--border-soft);
align-items: baseline;
}
.ukv2__cell--right { padding-left: 28px; border-left: 1px solid var(--border-soft); }
.ukv2__cell--full { grid-column: 1 / -1; padding-left: 0; border-left: none; }
.ukv2__k {
color: var(--fg-2);
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1.4;
}
.ukv2__v { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.35; }
.ukv2__v-main { color: var(--fg); font-size: 14px; }
.ukv2__v-sub { color: var(--fg-3); font-size: 12px; }
/* Цветной квадратик-индикатор управителя Вары (графа). */
.vara-color-sq {
display: inline-block; width: 11px; height: 11px;
border-radius: 2px; vertical-align: middle;
margin: 0 4px 1px; border: 1px solid rgba(0,0,0,0.12);
}
/* Маркер «Адхика»-маса (вставная високосная). Выделяем приглушённым красным
и мягким фоном — заметно, но не кричаще; сочетается с тёплой палитрой. */
.adhika-mark {
color: var(--bad);
font-weight: 700;
background: var(--bad-bg-soft);
padding: 1px 6px;
border-radius: 3px;
letter-spacing: 0.02em;
}
/* ── Lights row (восход/заход Сурьи и Чандры) ───────────────── */
.lights-row { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.lights-row__pair { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.lights-row__time { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.lights-row__arrow { color: var(--fg-4); }
.lights-row__dur {
color: var(--fg-3);
font-size: 12px;
padding-left: 6px;
border-left: 1px solid var(--border-soft);
margin-left: 2px;
font-variant-numeric: tabular-nums;
}
/* ── Muhurta timeline ───────────────────────────────────────── */
.muhurta-tl { }
.muhurta-tl__track {
position: relative;
height: 28px;
background: var(--bg-soft);
border-radius: 3px;
overflow: visible;
margin-bottom: 4px;
}
.muhurta-tl__seg {
position: absolute;
top: 0;
bottom: 0;
border-right: 1px solid rgba(0,0,0,0.04);
}
.muhurta-tl__seg--good { background: #c8dca0; }
.muhurta-tl__seg--bad { background: #e0a89e; }
.muhurta-tl__seg--neutral { background: #e6dab8; }
.muhurta-tl__now {
position: absolute;
top: -4px;
bottom: -4px;
width: 2px;
background: var(--accent);
z-index: 3;
}
.muhurta-tl__now-dot {
position: absolute;
top: -4px;
left: -4px;
width: 10px;
height: 10px;
background: var(--accent);
border-radius: 999px;
box-shadow: 0 0 0 3px var(--surface);
}
.muhurta-tl__axis { position: relative; height: 18px; margin-bottom: 16px; }
.muhurta-tl__axis-tick {
position: absolute;
transform: translateX(-50%);
font-size: 11px;
color: var(--fg-3);
font-variant-numeric: tabular-nums;
padding-top: 2px;
}
.muhurta-tl__good-overlay {
position: absolute;
top: 0;
bottom: 0;
background: repeating-linear-gradient(45deg, rgba(90,138,58,0.40) 0 4px, rgba(122,170,86,0.18) 4px 8px);
border-left: 1px dashed var(--good);
border-right: 1px dashed var(--good);
pointer-events: auto;
z-index: 2;
}
.muhurta-tl__legend-sq--good-overlay { background: repeating-linear-gradient(45deg, var(--good) 0 3px, #7aaa56 3px 6px); }
.muhurta-tl__kala-overlay {
position: absolute;
top: 0;
bottom: 0;
background: repeating-linear-gradient(45deg, rgba(184,69,58,0.45) 0 4px, rgba(216,95,79,0.20) 4px 8px);
border-left: 1px dashed var(--bad);
border-right: 1px dashed var(--bad);
pointer-events: auto;
z-index: 2;
}
.muhurta-tl__legend-sq--kala { background: repeating-linear-gradient(45deg, var(--bad) 0 3px, #d65f4f 3px 6px); }
.muhurta-tl__highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 14px; }
.muhurta-tl__highlight-group {
border: 1px solid var(--border-soft);
border-radius: 6px;
padding: 10px 14px;
background: var(--bg);
}
.muhurta-tl__hgroup-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.2px;
font-weight: 700;
margin-bottom: 8px;
}
.muhurta-tl__hgroup-label--good { color: var(--good); }
.muhurta-tl__hgroup-label--bad { color: var(--bad); }
.muhurta-tl__highlight-group ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.muhurta-tl__highlight-group li {
font-size: 13px;
color: var(--fg);
display: flex;
justify-content: space-between;
gap: 8px;
font-variant-numeric: tabular-nums;
}
.muhurta-tl__hi-right {
display: inline-flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
}
.muhurta-tl__hi-badge { color: var(--fg-3); }
.muhurta-tl__legend {
display: flex;
gap: 14px;
flex-wrap: wrap;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
font-size: 12px;
color: var(--fg-2);
}
.muhurta-tl__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.muhurta-tl__legend-sq { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
/* ── Transits (список переходов) ────────────────────────────── */
.transits { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.transits__row {
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 0;
border-top: 1px solid var(--border-soft);
font-size: 14px;
}
.transits__row:first-child { border-top: none; padding-top: 0; }
.transits__glyph { color: var(--accent); font-size: 16px; text-align: center; line-height: 1; }
.transits__main { color: var(--fg); line-height: 1.35; }
.transits__verb { color: var(--fg-2); font-size: 13px; }
.transits__when {
color: var(--fg-3);
font-size: 12px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* ── Chart card (D1 ромб + список планет) ───────────────────── */
.chart-card { display: flex; flex-direction: column; gap: 16px; }
.chart-card__diamond { width: 100%; max-width: 380px; margin: 0 auto; }
.chart-card__diamond svg { display: block; width: 100%; height: auto; }
.chart-card__lagna {
text-align: center;
font-size: 14px;
color: var(--fg-2);
padding: 10px 0;
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
}
.chart-card__planets {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
padding-top: 4px;
}
.chart-card__planet {
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 8px;
padding: 6px 0;
font-size: 13px;
border-top: 1px solid var(--border-soft);
align-items: baseline;
}
.chart-card__planet:nth-child(1), .chart-card__planet:nth-child(2) { border-top: none; padding-top: 4px; }
.chart-card__planet-glyph { color: var(--accent); font-size: 15px; text-align: center; }
.chart-card__planet-name { color: var(--fg-2); }
.chart-card__planet-rashi { color: var(--fg); font-weight: 600; font-size: 13px; white-space: nowrap; }
.chart-card__planet-deg { color: var(--fg-3); font-weight: 400; margin-left: 6px; font-size: 12px; }
.d1-svg { width: 100%; height: 100%; }
/* ── Buttons primary/ghost ──────────────────────────────────── */
.btn-primary {
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
font-family: inherit;
font-size: 15px;
padding: 9px 22px;
border-radius: 3px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background var(--t-fast);
cursor: pointer;
text-decoration: none;
}
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; }
.btn-ghost {
background: transparent;
color: var(--accent);
border: 1px solid var(--border-strong);
font-family: inherit;
font-size: 15px;
padding: 8px 21px;
border-radius: 3px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all var(--t-fast);
cursor: pointer;
text-decoration: none;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--accent-hi); border-color: var(--accent); }
/* ── Vaasa Directions: compass + chips ──────────────────────── */
.vd { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.vd__compass { display: flex; flex-direction: column; gap: 12px; }
.vd__compass-svg { width: 100%; max-width: 200px; height: auto; margin: 0 auto; display: block; }
.vd__sector { fill: var(--bg-soft); stroke: var(--surface); stroke-width: 1; }
.vd__sector--shula { fill: rgba(184, 69, 58, 0.55); }
.vd__sector--rahu { fill: rgba(192, 133, 64, 0.55); }
.vd__sector--yogini { fill: rgba(184, 154, 58, 0.45); }
.vd__legend { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--fg-2); }
.vd__legend-item { display: flex; align-items: center; gap: 6px; }
.vd__legend-item strong { color: var(--fg); }
.vd__sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.vd__sw--shula { background: rgba(184, 69, 58, 0.55); }
.vd__sw--rahu { background: rgba(192, 133, 64, 0.55); }
.vd__sw--yogini { background: rgba(184, 154, 58, 0.45); }
.vd__right { min-width: 0; }
.vd__group-label {
font-size: 11px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--fg-3);
font-weight: 600;
margin: 0 0 10px;
}
.vd__group-label:not(:first-child) { margin-top: 18px; }
.vd__vaasa { background: var(--bg-soft); border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; position: relative; }
.vd__vaasa-name { font-size: 11px; color: var(--fg-3); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 2px; }
.vd__vaasa-val { font-size: 15px; color: var(--fg); }
.vd__vaasa-sub { font-size: 12px; color: var(--fg-2); margin-top: 1px; margin-bottom: 6px; }
.vd__vaasa-bar { height: 4px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.vd__vaasa-bar-fill { height: 100%; background: var(--accent); transition: width 0.3s ease; }
.vd__vaasa-bar-fill--warn { background: var(--warn); }
.vd__vaasa-time { font-size: 11px; color: var(--fg-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
.vd__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vchip { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 6px; padding: 8px 12px; }
.vchip__label { font-size: 11px; color: var(--fg-3); letter-spacing: 0.6px; margin-bottom: 2px; }
.vchip__value { font-size: 14px; font-weight: 700; color: var(--fg); }
.vchip__sub { font-size: 11px; color: var(--fg-3); margin-top: 1px; }
.vchip--good { border-color: rgba(90,138,58,0.30); background: rgba(199,216,168,0.20); }
.vchip--good .vchip__value { color: var(--good); }
.vchip--bad { border-color: rgba(184,69,58,0.35); background: rgba(217,154,142,0.20); }
.vchip--bad .vchip__value { color: var(--bad); }
.vchip--warn { border-color: rgba(192,133,64,0.30); background: rgba(232,200,150,0.20); }
.vchip--warn .vchip__value { color: var(--warn); }
/* ── Footer note ────────────────────────────────────────────── */
.footer-note {
margin-top: 60px;
padding-top: 22px;
border-top: 1px solid var(--border-soft);
font-size: 13px;
color: var(--fg-3);
}
/* ── Утилитарные классы ─────────────────────────────────────── */
.muted { color: var(--fg-3); }
.muted-2 { color: var(--fg-2); }
.bold { font-weight: 700; }
.flex-row { display: flex; align-items: center; gap: 10px; }
.flex-col { display: flex; flex-direction: column; }
.tabular { font-variant-numeric: tabular-nums; }
.sep-dot::before { content: '·'; margin: 0 8px; color: var(--fg-3); }
/* ── Шиммер-плейсхолдер для async-блоков ───────────────────── */
.block-skel {
height: 90px;
border-radius: var(--r-lg);
background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 37%, var(--surface-2) 63%);
background-size: 400% 100%;
animation: block-shimmer 1.4s ease infinite;
}
@keyframes block-shimmer {
0% { background-position: 100% 0; }
100% { background-position: 0 0; }
}
/* ── Responsive: сворачиваем сетки и сайдбар на узких экранах ─── */
@media (max-width: 1300px) {
/* двухколоночные раскладки сворачиваются в одну — иначе на 1366/1440 */
/* "Сегодня" и "Карта" жмёт друг друга, и длинный текст вылезает */
.card-grid--2to1,
.card-grid--1to2,
.card-grid--1to2-stack,
.card-grid--1to1,
.card-grid--3col { grid-template-columns: 1fr; }
.chart-card__planets { grid-template-columns: 1fr; }
.ukv2 { grid-template-columns: 1fr; }
.ukv2__cell--right { padding-left: 0; border-left: none; border-top: 1px solid var(--border-soft); }
.vd { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
.hero { grid-template-columns: 1fr; }
.hero__date { flex-direction: row; justify-content: flex-start; gap: 16px; width: 100%; }
.hero__title { font-size: 32px; }
.tearoff { width: 84px; }
.tearoff__day { font-size: 42px; padding: 10px 0 2px; }
}
@media (max-width: 1200px) {
.header-search { display: none; }
}
/* ============================================================
v2 — блоки страницы Панчанг (/panchang/now)
page-header / elband / fest-banner / now-strip / panch-cols / card / collapse
============================================================ */
/* ── Page header (большой заголовок + date-nav + локация) ───── */
.page-header { margin-bottom: 36px; padding-top: 8px; }
.page-header__eyebrow {
font-size: 14px;
color: var(--fg-3);
margin-bottom: 6px;
text-transform: capitalize;
letter-spacing: 0.2px;
}
.page-header__row {
display: flex;
align-items: baseline;
gap: 22px;
flex-wrap: wrap;
}
.page-title {
font-size: 42px;
font-weight: 700;
margin: 0;
color: var(--accent);
letter-spacing: -0.8px;
line-height: 1;
}
.page-meta { color: var(--fg-3); font-size: 16px; }
.page-meta__strong { color: var(--fg-2); }
.location-strip {
margin-top: 8px;
font-size: 14px;
color: var(--fg-3);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* События дня (фестивали + vrata) — отдельная строка в шапке с акцентной
левой границей и лейблом «Сегодня:». Заменяет старый зелёный fest-banner
(полупустой блок) и inline-вариант (был незаметен среди мета-инфо). */
/* Без коробки/фона — единый стиль с .festivals на home. */
.day-events {
margin-top: 10px;
line-height: 1.7;
}
.day-events__label {
margin-right: 10px;
font-size: 12px;
font-weight: 700;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* day-events__pill — текстом, без пилюль, разделитель ·. Тот же паттерн
что .festivals__pill (см. выше). */
.day-events__pill {
display: inline; padding: 0; background: transparent;
font-size: 14px; font-weight: 500; line-height: 1.4;
color: var(--accent); font-family: inherit;
text-decoration: none;
/* перебиваем глобальное `a { border-bottom: 1px dotted }` (см. .festivals__pill). */
border: none !important;
transition: color var(--t-fast);
}
.day-events__pill > span {
border-bottom: 1px dashed transparent;
transition: border-color var(--t-fast);
}
.day-events__pill:hover { color: var(--accent-hi); }
.day-events__pill:hover > span { border-bottom-color: currentColor; }
.day-events__pill + .day-events__pill::before {
content: '·'; color: var(--fg-3); padding: 0 8px;
}
.day-events__pill.is-vrata { color: var(--fg-3); }
.day-events__pill.is-vrata:hover { color: var(--fg); }
.day-events__pill.is-yoga-good { color: var(--good); }
.day-events__pill.is-yoga-bad { color: var(--bad); }
.location-strip__city {
background: none;
border: none;
border-bottom: 1px dashed var(--accent);
padding: 0;
color: var(--accent);
font-family: inherit;
font-size: 14px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.location-strip__city:hover { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }
/* ── Element band (5 плиток tithi/vara/nakshatra/yoga/karana) ── */
.elband {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0 1px 2px rgba(60, 40, 8, 0.03);
}
.elband__head {
display: flex;
align-items: center;
gap: 14px;
padding: 15px 24px;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
}
.elband__num {
width: 34px; height: 34px;
display: grid; place-items: center;
border-radius: 999px;
border: 1px solid var(--border-strong);
color: var(--accent);
font-size: 18px; font-weight: 700;
flex-shrink: 0;
}
.elband__title { font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: 0.2px; line-height: 1.1; }
.elband__sub { font-size: 13px; color: var(--fg-3); margin-top: 2px; }
.elband__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.elband__tile {
padding: 18px 20px 20px;
border-left: 1px solid var(--border-soft);
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.elband__tile:first-child { border-left: none; }
.elband__tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.elband__tile-label {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-3);
font-weight: 700;
}
.elband__tile-value {
font-size: 22px;
font-weight: 700;
color: var(--fg);
line-height: 1.18;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
overflow-wrap: anywhere;
}
.elband__tile-glyph { display: inline-flex; flex-shrink: 0; }
.elband__tile-sub { font-size: 13px; color: var(--fg-2); line-height: 1.4; }
.elq { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.elq--good { background: var(--good); }
.elq--warn { background: var(--warn); }
.elq--bad { background: var(--bad); }
@media (max-width: 900px) {
.elband__grid { grid-template-columns: repeat(2, 1fr); }
.elband__tile:nth-child(odd) { border-left: none; }
.elband__tile { border-top: 1px solid var(--border-soft); }
.elband__tile:nth-child(-n+2) { border-top: none; }
}
/* ── Now strip (4 ячейки текущего момента) ──────────────────── */
.now-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
margin-bottom: 20px;
}
.now-strip__cell {
/* Дефолт var(--surface) — чистый белый (или близкий к нему в тёплых
палитрах). И surface-2, и accent-soft в warm-палитре имели тёплый
пиковый оттенок, читавшийся как «плохо». Белый честно нейтрален. */
background: var(--surface);
padding: 15px 22px;
display: flex;
flex-direction: column;
gap: 4px;
transition: background .25s;
}
/* Композитный «mood» — мягкий зелёный/красный фон когда суммарная картина
момента явно благоприятна или неблагоприятна. См. computeMoodClass(). */
.now-strip--good .now-strip__cell { background: var(--good-bg-soft); }
.now-strip--bad .now-strip__cell { background: var(--bad-bg-soft); }
.now-strip__label {
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
display: flex;
align-items: baseline;
gap: 8px;
}
.now-strip__label-time { color: var(--fg-3); font-weight: 400; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.now-strip__value { font-size: 21px; font-weight: 700; color: var(--fg); line-height: 1.2; }
/* Ссылка-имя внутри now-strip__value — наследует цвет/шрифт; глобальный
`a { border-bottom }` перебивается; dashed-подчёркивание появляется
на hover. Tooltip-объяснение — на title (нативный браузерный hint). */
.now-strip__link {
color: inherit; font: inherit; text-decoration: none;
border: none !important; cursor: help;
border-bottom: 1px dashed transparent;
transition: border-color var(--t-fast);
}
.now-strip__link:hover { border-bottom-color: currentColor; color: inherit; }
.now-strip__sub { font-size: 13px; color: var(--fg-2); }
@media (max-width: 920px) { .now-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .now-strip { grid-template-columns: 1fr; } }
/* ── Festivals banner (под elband — узкая полоса с пилюлями) ── */
.fest-banner {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
/* Узкая полоса: padding 6/14 вместо 13/22 — баннер ~в 2 раза тоньше,
но визуально остаётся выделенным акцентным фоном. */
padding: 6px 14px;
margin-bottom: 16px;
background: var(--good-bg-soft);
border: 1px solid var(--border);
border-radius: var(--r-xl);
}
.fest-banner__icon { color: var(--accent); font-size: 17px; line-height: 1; }
.fest-banner__label {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-2);
font-weight: 700;
}
.fest-banner__list { display: flex; flex-wrap: wrap; gap: 6px; }
.fest-banner__pill {
font-size: 13px;
font-weight: 700;
color: var(--fg);
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
padding: 2px 10px;
}
/* Vrata-пилюли (ежедневные наблюдения) — мягче и тоньше, чтобы визуально
отличались от событий-фестивалей и не доминировали в баннере. */
.fest-banner__pill.is-vrata {
font-weight: 500;
background: transparent;
color: var(--fg-2);
border-color: var(--border);
}
.fest-banner__pill.is-vrata:hover {
color: var(--fg);
border-color: var(--border-strong);
}
/* ── Panch-cols (masonry 2 колонки) ─────────────────────────── */
.panch-cols { columns: 2; column-gap: 20px; }
.panch-cols > .card,
.panch-cols > .ucard,
.panch-cols > .app-card,
.panch-cols > details {
break-inside: avoid;
-webkit-column-break-inside: avoid;
/* в columns родителе margin-bottom прижимается к границе колонки */
margin-bottom: 20px;
display: block;
}
@media (max-width: 1000px) { .panch-cols { columns: 1; } }
/* ── .card (design-style карточка для панчанга) ─────────────── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 22px 28px;
margin-bottom: 20px;
}
.card__title {
font-size: 20px;
font-weight: 700;
color: var(--accent);
margin: 0 0 16px;
letter-spacing: -0.2px;
display: flex;
align-items: baseline;
gap: 10px;
border-bottom: none;
padding-bottom: 0;
}
.card__title--sm { font-size: 17px; }
.card__help,
.section__help {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-strong);
color: var(--fg-3);
border-radius: 999px;
font-size: 11px;
font-weight: 400;
cursor: help;
flex-shrink: 0;
text-decoration: none;
}
.card__help:hover, .section__help:hover { color: var(--accent); border-color: var(--accent); }
/* ── Key/Value rows (kv для card-таблиц) ────────────────────── */
.kv {
display: grid;
grid-template-columns: minmax(180px, 240px) 1fr;
gap: 0 36px;
align-items: baseline;
}
.kv__k {
color: var(--fg-2);
font-size: 15px;
padding: var(--row-pad) 0;
border-top: 1px solid var(--border-soft);
}
.kv__v {
color: var(--fg);
font-size: 15px;
padding: var(--row-pad) 0;
border-top: 1px solid var(--border-soft);
}
.kv__k:first-of-type, .kv__v:nth-of-type(2) { border-top: none; }
.kv__sub { color: var(--fg-3); font-size: 13px; }
.kv__bad { color: var(--bad); }
.kv__good { color: var(--good); }
.kv__strong { font-weight: 700; }
/* ── list-row (для Хор/Чогадий/Мухурт списков) ──────────────── */
.list-row {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 14px;
padding: 9px 0;
border-top: 1px solid var(--border-soft);
font-size: 15px;
}
.list-row:first-child { border-top: none; }
.list-row__index { color: var(--fg-3); font-size: 14px; }
.list-row__time { color: var(--fg-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.mark-ok { color: var(--good); font-weight: 700; }
.mark-bad { color: var(--bad); font-weight: 700; }
.mark-stop {
display: inline-flex;
width: 14px; height: 14px;
border-radius: 999px;
background: var(--bad);
color: white;
align-items: center;
justify-content: center;
font-size: 10px;
}
/* ── Collapse (раскрывашка детального списка) ───────────────── */
.collapse {
border-top: 1px solid var(--border);
padding: 14px 0;
}
.collapse__head {
display: flex;
align-items: center;
gap: 10px;
padding: 0;
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
font-family: inherit;
font-size: 17px;
font-weight: 700;
color: var(--fg);
}
.collapse__caret {
display: inline-block;
color: var(--accent);
transition: transform var(--t-fast);
width: 14px;
text-align: center;
font-size: 11px;
}
.collapse--open > .collapse__head > .collapse__caret { transform: rotate(90deg); }
.collapse__body { padding: 16px 0 4px; }
/* ── Gauri panchangam table ─────────────────────────────────── */
.gauri {
display: grid;
grid-template-columns: 60px 1fr;
align-items: start;
gap: 8px 32px;
}
.gauri__period { color: var(--fg-3); font-size: 14px; padding-top: 12px; }
.gauri__list { display: flex; flex-direction: column; }
.gauri__row {
display: grid;
grid-template-columns: 1.5fr 1fr 32px;
gap: 12px;
padding: 9px 0;
border-top: 1px solid var(--border-soft);
align-items: center;
}
.gauri__row:first-child { border-top: none; }
.gauri__name { color: var(--fg); font-size: 15px; }
.gauri__time { color: var(--fg-2); font-size: 14px; font-variant-numeric: tabular-nums; }
/* ── Mini help-link (?) к глоссарию ─────────────────────────── */
.gloss-help {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 999px;
border: 1px solid var(--border-strong);
color: var(--fg-3);
font-size: 10px;
margin-left: 4px;
text-decoration: none;
vertical-align: middle;
font-weight: 400;
}
.gloss-help:hover { color: var(--accent); border-color: var(--accent); border-bottom-style: solid; }
/* ============================================================
v2 — Формы построения карты (/chart/new, /chart/now)
page-title (если без page-header), natal-form, fgrid, ffield,
flabel, finput, fcheck, fhint, ferror, fbtn, cityfield
============================================================ */
.natal-form__intro {
color: var(--fg-2);
font-size: 16px;
max-width: 640px;
margin: 14px 0 28px;
line-height: 1.5;
}
.fgrid {
display: grid;
/* minmax(0, …) — без него native date/time inputs не дают колонке сжаться
уже своего min-content, что вело к наезжанию полей друг на друга в
узком .main (sidebar + form max-width 820px). */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px 28px;
max-width: 820px;
}
/* На узких экранах колонки становятся слишком короткими для пары
Дата+Время (нативные пикеры съедают ~200px каждый) — стэкуем в 1 кол. */
@media (max-width: 760px) {
.fgrid { grid-template-columns: 1fr; }
}
.ffield { display: flex; flex-direction: column; min-width: 0; }
.ffield--full { grid-column: 1 / -1; }
.flabel {
font-size: 16px;
color: var(--fg);
margin-bottom: 8px;
font-weight: 400;
}
.finput {
width: 100%;
/* box-sizing: border-box — иначе width:100% + padding 12×16×2 + border 1×2
= +34px и инпут уезжал за свою grid-колонку, налезая на соседнюю
(видно было на Долгота→Широта в .manual-place__grid). */
box-sizing: border-box;
padding: 12px 16px;
background: var(--surface-2);
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
font-family: inherit;
font-size: 16px;
color: var(--fg);
transition: border-color 0.2s, box-shadow 0.2s;
}
.finput::placeholder { color: var(--fg-4); }
.finput:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.finput:disabled { opacity: 0.5; cursor: not-allowed; }
.fcheck {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
font-size: 14px;
color: var(--fg-2);
cursor: pointer;
}
.fcheck input { accent-color: var(--accent); width: 15px; height: 15px; }
.fhint { font-size: 14px; color: var(--fg-3); margin-top: 8px; }
.ferror { color: var(--bad); font-size: 15px; margin: 18px 0 0; }
.fbtn {
margin-top: 36px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--accent);
color: #fdf6e8;
border: none;
border-radius: var(--r-lg);
font-family: inherit;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
text-decoration: none;
}
.fbtn:hover { background: var(--accent-hi); color: #fdf6e8; }
.fbtn:active { transform: translateY(1px); }
.fbtn:disabled { opacity: 0.6; cursor: not-allowed; }
.fbtn--sm { margin-top: 0; padding: 9px 16px; font-size: 14px; }
/* Toggle-состояние «уже сохранено» — мягкий зелёный фон, не accent-bg.
Сигнал «Карта в твоих сохранённых; повторный клик удалит её». */
.fbtn--saved {
background: var(--good, #5a8a3a);
color: #fdf6e8;
}
.fbtn--saved:hover {
background: var(--bad, #b8453a);
color: #fff;
}
/* Раскрывающийся блок «Не нашли свой город?» — ручной ввод координат.
margin-top: 18px чтобы линка-toggle явно отделялась от поля «Место рождения»
(gap fgrid даёт ~20px, но визуально нужна дополнительная воздушность,
потому что справа от toggle нет других элементов). */
.manual-place { margin-top: 18px; }
.manual-place__summary {
cursor: pointer;
color: var(--accent);
user-select: none;
padding: 4px 0;
}
.manual-place__summary:hover { color: var(--accent-hi); }
/* Группа ручного ввода — только лёгкая левая полоска-маркер для отступа
от основных полей. Без фона/рамки коробки — иначе .finput (surface-2)
сливался с фоном бокса, или белые поля внутри кремовой коробки
выглядели чужеродно. row-gap увеличен (28px вместо 20px у обычного
.fgrid), потому что без коробки лейблы зрительно «прилипают» к нижнему
краю инпута предыдущего ряда — нужен дополнительный воздух. */
.manual-place__grid {
margin-top: 14px;
padding: 6px 0 6px 18px;
border-left: 3px solid var(--border-strong);
row-gap: 28px;
}
.manual-place__grid .flabel {
margin-bottom: 10px;
}
.fbtn--ghost {
background: var(--surface);
color: var(--accent);
border: 1px solid var(--border-strong);
}
.fbtn--ghost:hover { background: var(--surface-2); }
/* City typeahead (autocomplete) */
.cityfield { position: relative; }
.cityfield__drop {
position: absolute;
top: calc(100% + 5px);
left: 0;
width: 100%;
max-width: 460px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
box-shadow: 0 12px 32px rgba(60, 40, 8, 0.16);
z-index: 20;
overflow: hidden;
}
.cityfield__row {
display: flex;
align-items: baseline;
gap: 12px;
width: 100%;
text-align: left;
background: none;
border: none;
border-top: 1px solid var(--border-soft);
padding: 11px 16px;
cursor: pointer;
font-family: inherit;
}
.cityfield__row:first-child { border-top: none; }
.cityfield__row:hover,
.cityfield__row.is-focus { background: var(--surface-2); }
.cityfield__name { font-size: 16px; font-weight: 700; color: var(--fg); }
.cityfield__meta { font-size: 13px; color: var(--fg-2); }
.cityfield__tz { font-size: 13px; color: var(--fg-3); margin-left: auto; }
/* ── Global city-picker modal (открывается с [data-city-picker]) ── */
.city-picker {
position: fixed; inset: 0; z-index: 1000;
display: none; align-items: flex-start; justify-content: center;
padding: 80px 16px 16px;
}
.city-picker.is-open { display: flex; }
.city-picker__backdrop {
position: absolute; inset: 0;
background: rgba(40, 24, 6, 0.45);
backdrop-filter: blur(2px);
}
.city-picker__box {
position: relative;
width: 100%; max-width: 520px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
box-shadow: 0 24px 64px rgba(40, 24, 6, 0.25);
/* overflow:hidden намеренно НЕТ — иначе autocomplete-список из .cityfield__drop
(position:absolute, top: 100% + 5px) обрезается границами модала. */
}
.city-picker__head { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.city-picker__head {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px;
border-bottom: 1px solid var(--border-soft);
}
.city-picker__close {
background: none; border: none; cursor: pointer;
font-size: 18px; color: var(--fg-3);
width: 28px; height: 28px; border-radius: 999px;
}
.city-picker__close:hover { background: var(--surface-2); color: var(--fg); }
.city-picker__body { padding: 16px 18px 18px; }
.city-picker__body input[type=text] {
width: 100%;
box-sizing: border-box; /* без этого 100% + padding 14×2 + border 1×2 = +30px и input уезжает за модал */
padding: 11px 14px;
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
background: var(--surface-2);
color: var(--fg);
font-family: inherit;
font-size: 15px;
}
.city-picker__body input[type=text]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.city-picker__hint {
color: var(--fg-3);
font-size: 13px;
margin-top: 10px;
line-height: 1.5;
}
.city-picker__hint em { color: var(--fg-2); font-style: normal; border-bottom: 1px dotted var(--fg-3); }
.city-picker__geo {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 14px;
padding: 9px 14px;
border: 1px dashed var(--border-strong);
border-radius: var(--r-lg);
background: transparent;
color: var(--accent);
cursor: pointer;
font-family: inherit;
font-size: 14px;
}
.city-picker__geo:hover { background: var(--surface-2); border-style: solid; }
/* Внутри city-picker список подсказок не ограничиваем высотой модала —
пусть растёт по содержимому (до 10 строк), и появляется скролл, если надо. */
.city-picker__body .cityfield__drop {
max-height: 320px;
overflow-y: auto;
}
/* hero__city / header city button — должны выглядеть как ссылка */
.hero__city, button.hero__city {
background: none; border: none; padding: 0;
color: inherit; font: inherit; cursor: pointer;
border-bottom: 1px dashed currentColor;
transition: color 0.15s, border-color 0.15s;
}
.hero__city:hover { color: var(--accent); border-bottom-color: var(--accent); border-bottom-style: solid; }
/* ── Auth modal (вход / регистрация) ────────────────────────────── */
.auth-modal {
position: fixed; inset: 0; z-index: 1000;
display: none; align-items: flex-start; justify-content: center;
padding: 80px 16px 16px;
}
.auth-modal.is-open { display: flex; }
.auth-modal__backdrop {
position: absolute; inset: 0;
background: rgba(40, 24, 6, 0.45);
backdrop-filter: blur(2px);
}
.auth-modal__box {
position: relative;
width: 100%; max-width: 460px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
box-shadow: 0 24px 64px rgba(40, 24, 6, 0.25);
}
.auth-modal__box.is-shake { animation: authShake 0.45s ease-in-out; }
@keyframes authShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-8px); }
40% { transform: translateX(8px); }
60% { transform: translateX(-5px); }
80% { transform: translateX(5px); }
}
.auth-modal__head {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px;
border-bottom: 1px solid var(--border-soft);
border-radius: var(--r-lg) var(--r-lg) 0 0;
font-size: 16px;
}
.auth-modal__close {
background: none; border: none; cursor: pointer;
font-size: 18px; color: var(--fg-3);
width: 28px; height: 28px; border-radius: 999px;
}
.auth-modal__close:hover { background: var(--surface-2); color: var(--fg); }
/* Bottom padding больше верхнего — раньше под body был footer-переключатель
с «Нет аккаунта?», теперь его нет, и нижний воздух нужно вернуть в body. */
.auth-modal__body { padding: 16px 18px 22px; }
.auth-modal__alert {
padding: 10px 12px;
border-radius: var(--r-lg);
margin-bottom: 12px;
font-size: 14px;
line-height: 1.4;
}
.auth-modal__alert--error { background: var(--bad-bg-soft, #fde7e3); color: var(--bad, #8b2c1e); }
.auth-modal__alert--success { background: var(--good-bg-soft, #e3f0d4); color: var(--good, #4d6b1e); }
.auth-modal__form { display: flex; flex-direction: column; gap: 12px; }
/* [hidden] не работает само по себе — кастомный display: flex перебивает
user-agent style. Возвращаем стандартное поведение для скрытой формы. */
.auth-modal__form[hidden] { display: none; }
/* Табы «Вход / Регистрация» в шапке модалки — заменяют статичный заголовок.
Стиль: подчёркивание-индикатор активного, без фоновых заливок. */
.auth-modal__tabs { display: flex; gap: 18px; }
.auth-modal__tab {
background: none;
border: none;
font-family: inherit;
font-size: 16px;
font-weight: 600;
color: var(--fg-3);
cursor: pointer;
padding: 4px 0;
margin-bottom: -1px; /* индикатор активного перекрывает border снизу .head */
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
}
.auth-modal__tab:hover { color: var(--accent); }
.auth-modal__tab.is-active {
color: var(--fg);
border-bottom-color: var(--accent);
}
.auth-modal__row { display: flex; flex-direction: column; gap: 4px; }
.auth-modal__row label {
font-size: 13px;
color: var(--fg-2);
}
.auth-modal__row input[type="text"],
.auth-modal__row input[type="email"],
.auth-modal__row input[type="password"] {
width: 100%;
box-sizing: border-box;
padding: 10px 13px;
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
background: var(--surface-2);
color: var(--fg);
font-family: inherit;
font-size: 15px;
}
.auth-modal__row input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-modal__hint {
font-size: 12px; color: var(--fg-3);
margin-top: 2px;
}
.auth-modal__submit {
margin-top: 4px;
padding: 11px 16px;
background: var(--accent);
color: var(--surface);
border: none;
border-radius: var(--r-lg);
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.auth-modal__submit:hover { background: var(--accent-hi); }
.auth-modal__foot {
padding: 12px 18px 16px;
border-top: 1px solid var(--border-soft);
text-align: center;
font-size: 13px;
color: var(--fg-2);
}
.auth-modal__foot a { color: var(--accent); }
.auth-modal__foot a:hover { color: var(--accent-hi); }
/* Сегментный переключатель (форма / тестовая карта) */
.seg {
display: inline-flex;
background: var(--surface-2);
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
padding: 3px;
gap: 3px;
}
.seg--natal { margin-bottom: 18px; }
.seg__btn {
border: none;
background: none;
font-family: inherit;
font-size: 14px;
color: var(--fg-2);
padding: 7px 16px;
border-radius: 5px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.seg__btn:hover { color: var(--accent); }
.seg__btn.is-on {
background: var(--surface);
color: var(--accent);
font-weight: 700;
box-shadow: 0 1px 2px rgba(60, 40, 8, 0.08);
}
@media (max-width: 900px) {
.fgrid { grid-template-columns: 1fr; }
}
/* ============================================================
v2 — Результат построения карты (_chart_render.php)
chart-pair / vchart / ncard / ntable / nkv / chipgrid / ichip
pgraha / dbadge / nretro / kfacts / kmeta / varga-select
============================================================ */
/* ── Chart pair: D1 + варга рядом ───────────────────────────── */
.chart-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
/* margin-top — воздух между заголовком и картами. На /chart/now нет
подзаголовка (natal-result__sub), и без этого отступа крупный H1
«прилипал» к боксам D-1/D-9 (выглядело слеплено). */
margin-top: 16px;
margin-bottom: 24px;
align-items: start;
}
.chart-pair__col {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.vchart { margin: 0; }
.vchart__svg {
width: 100%;
max-width: 420px;
height: auto;
display: block;
margin: 0 auto;
}
/* ChartRenderer вставляет |