:root {
  --bg: #f4f7f8;
  --surface: #ffffff;
  --text: #1c2b33;
  --muted: #61727c;
  --border: #dbe3e7;
  --accent: #0f766e;
  --accent-hover: #0b5f58;
  --accent-soft: #e0f2ef;
  --tooth: #ffffff;
  --tooth-stroke: #9fb1b9;
  --radius: 12px;
  /* цветные плашки: статусы, уведомления */
  --ok-bg: #dcfce7; --ok-fg: #166534;
  --info-bg: #e0f2fe; --info-fg: #075985;
  --warn-bg: #fff4d6; --warn-border: #f0d58a;
  --bad-bg: #fee2e2; --bad-fg: #991b1b;
  --violet-bg: #ede9fe; --violet-fg: #5b21b6;
  --danger: #b42318;
  --subtle: #f8fafb;
  --groove: #c9d5da;
  --label: #94a6ae;
  color-scheme: light;
}

/* Тёмная тема (кнопка в шапке). Лист карты остаётся белым, как бумага. */
:root[data-theme="dark"] {
  --bg: #0f1719;
  --surface: #172124;
  --text: #e3ecee;
  --muted: #93a6ad;
  --border: #2a383c;
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-soft: #123a36;
  --tooth: #1e2b2f;
  --tooth-stroke: #5d7178;
  --ok-bg: #12351f; --ok-fg: #86efac;
  --info-bg: #0d2c3d; --info-fg: #7dd3fc;
  --warn-bg: #3a2f10; --warn-border: #6b5617;
  --bad-bg: #3d1515; --bad-fg: #fca5a5;
  --violet-bg: #2a1f45; --violet-fg: #c4b5fd;
  --danger: #f87171;
  --subtle: #1b272a;
  --groove: #3c4d52;
  --label: #6f848b;
  color-scheme: dark;
}
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .bc-btn.active,
:root[data-theme="dark"] .ab-toggle.active { color: #062925; }
:root[data-theme="dark"] .btn-danger { border-color: #6b2a2a; }
:root[data-theme="dark"] .btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #1a0505; }
:root[data-theme="dark"] .msg-admin { border-color: #1f5a53; }
:root[data-theme="dark"] .tooth .cls-mark { fill: #062925; }
:root[data-theme="dark"] .tooth.selected .groove { stroke: rgba(6, 41, 37, .45); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

a { color: var(--accent); }
h1, h2, h3 { line-height: 1.25; margin: 0; }

/* ---------- Шапка ---------- */
/* Слева — название, по центру — все кнопки, справа — смена темы */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "brand nav tools";
  align-items: center;
  gap: 12px 24px;
  min-height: 80px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
}
.topbar .brand { grid-area: brand; justify-self: start; white-space: nowrap; }
.topbar .nav { grid-area: nav; }
.topbar-tools { grid-area: tools; justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 20px; }
.nav-link { color: var(--text); text-decoration: none; font-size: 16px; padding: 6px 2px; }
.nav-link:hover { color: var(--accent); }
.nav-link.active { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
/* Когда кнопок много и им тесно в одной строке с названием — кнопки отдельной строкой по центру */
@media (max-width: 1560px) {
  .topbar { grid-template-columns: 1fr auto; grid-template-areas: "brand tools" "nav nav"; }
}
@media (max-width: 700px) { .topbar { padding: 14px 16px; } }
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .ic-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: block; }
:root[data-theme="dark"] .theme-btn .ic-moon { display: none; }
.nav-home { font-weight: 600; }
.btn-support { border-color: var(--accent); color: var(--accent); }

/* ---------- О нас ---------- */
.about-hero { text-align: center; padding: 40px 0 32px; }
.about-hero h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; }
.about-hero p { color: var(--muted); font-size: 18px; max-width: 720px; margin: 0 auto 28px; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.about-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 20px 18px 64px;
}
.about-num {
  position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 15px;
}
.about-card h2 { font-size: 18px; margin-bottom: 8px; }
.about-card p { margin: 0; color: var(--muted); }
.about-card ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.about-card li { margin: 2px 0; }
.about-note { text-align: center; max-width: 720px; margin: 28px auto 0; }

/* ---------- Техподдержка ---------- */
.ticket { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; background: var(--surface); }
.ticket > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ticket-title { font-weight: 600; overflow-wrap: anywhere; }
.thread { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.msg { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.msg-admin { background: var(--accent-soft); border-color: #b7ddd7; }
.msg-head { margin-bottom: 4px; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.filter-row { margin-bottom: 12px; }
.filter-row select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--surface); }
#chat-list .btn { margin: 4px 4px 0 0; }
.impersonation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 16px;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-border);
  font-size: 15px;
}
.impersonation[hidden] { display: none; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
  text-decoration: none;
}
.brand svg { width: 30px; height: 30px; }

#app { max-width: 1280px; margin: 0 auto; padding: 24px 16px 64px; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-lg { padding: 16px 32px; font-size: 18px; border-radius: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-danger { color: var(--danger); border-color: #f2c4c0; }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ---------- Аккаунт ---------- */
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.hero-note { margin-top: 20px !important; font-size: 15px !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--danger); }

.auth-card {
  max-width: 420px;
  margin: 40px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.auth-card h1 { font-size: 26px; margin-bottom: 8px; }
.auth-switch { margin: 16px 0 0; text-align: center; color: var(--muted); }

.form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.form h3 { font-size: 16px; margin: 0; }
.form + .form { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.form .btn { align-self: flex-start; }
.form-inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.form-inline .step-title { flex-basis: 100%; margin: 0; }
.form-inline .field { flex: 1 1 200px; }
.form-inline .form-msg { flex-basis: 100%; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
.field input, .field textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.form-msg { font-size: 14px; }
.form-msg:empty { display: none; }
.form-msg.error { color: var(--danger); }
.form-msg.ok { color: var(--accent); }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

.cabinet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; align-items: start; }
@media (min-width: 900px) { .cabinet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.status-line { margin: 0 0 8px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 16px 0 0; font-size: 15px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge-trial { background: var(--info-bg); color: var(--info-fg); }
.badge-admin { background: var(--violet-bg); color: var(--violet-fg); }
.badge-off { background: var(--bad-bg); color: var(--bad-fg); }

.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 13px; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.admin-table tbody tr[data-id] { cursor: pointer; }
.admin-table tbody tr[data-id]:hover { background: var(--accent-soft); }
.admin-table a { font-weight: 600; text-decoration: none; }
.field select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
}
.usage { margin: 0 0 8px; }
.privacy-note { margin-top: 16px; }

/* ---------- Тарифы ---------- */
.plans-lead { max-width: 760px; margin: -8px 0 24px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.plan-featured { border: 2px solid var(--accent); }
.plan-current { box-shadow: 0 0 0 3px var(--accent-soft); }
.plan h2 { font-size: 22px; margin-bottom: 8px; }
.plan-price { font-size: 30px; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.plan-price small { font-size: 15px; font-weight: 400; color: var(--muted); }
.plan-includes { margin: 0 0 8px; font-weight: 600; }
.plan ul { margin: 0 0 20px; padding-left: 20px; flex: 1; }
.plan li { margin-bottom: 6px; }
.plan-action { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plans-current { margin: -12px 0 16px; font-weight: 500; }
.plan-note { margin: -4px 0 12px; font-size: 14px; color: var(--muted); }
.plan-old { display: block; font-size: 15px; font-weight: 400; color: var(--muted); text-decoration: line-through; }
.plan-save { margin: -6px 0 12px; font-size: 14px; font-weight: 600; color: var(--ok-fg); }

/* ---------- Период оплаты ---------- */
.period-toggle, .seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.period-toggle { margin: 0 0 20px; }
.period-toggle button, .seg button {
  border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.period-toggle button.active, .seg button.active { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .period-toggle button.active, :root[data-theme="dark"] .seg button.active { color: #062925; }
.period-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-fg); font-size: 12px; font-weight: 600; }
.period-toggle button.active .period-badge { background: rgba(255, 255, 255, .25); color: inherit; }

/* ---------- Специальные предложения ---------- */
.offers { margin-top: 40px; }
.offers-title { font-size: 24px; margin-bottom: 16px; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.offer-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.offer-card h3 { font-size: 17px; }
.offer-card .btn { align-self: flex-start; margin-top: auto; }
.offer-size { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.offer-text, .offer-note { margin: 0; color: var(--muted); font-size: 14px; }
.offer-note { font-size: 13px; }
.offer-cond summary { cursor: pointer; font-size: 14px; color: var(--accent); }
.offer-cond ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.offer-valid { margin: 0; font-size: 13px; color: var(--muted); }
.offer-state { margin: 0; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.offer-on { background: var(--ok-bg); color: var(--ok-fg); }
.offer-off { background: var(--bad-bg); color: var(--bad-fg); }
.offer-wait { background: var(--info-bg); color: var(--info-fg); }

/* ---------- Окно оформления ---------- */
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(5, 15, 18, .55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; animation: fade .2s ease; }
.modal { position: relative; width: 100%; max-width: 620px; background: var(--surface); color: var(--text); border-radius: 16px; padding: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); animation: rise .25s ease; }
.modal h2 { font-size: 22px; margin-bottom: 18px; padding-right: 32px; }
.modal-close { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 22px; cursor: pointer; }
.co-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.co-label { font-size: 13px; color: var(--muted); }
.co-offers { display: flex; flex-direction: column; gap: 6px; }
.co-offer { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.co-offer:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.co-offer.disabled { cursor: not-allowed; opacity: .65; }
.co-offer small { display: block; color: var(--muted); font-size: 12px; }
.co-offer input { margin-top: 4px; }
.co-promo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: -4px 0 16px; }
.co-promo[hidden] { display: none; }
.co-row > .seg { align-self: flex-start; }
.co-promo .field { flex: 1 1 220px; }
.co-promo .form-msg { flex-basis: 100%; }
.co-sum { border-top: 1px solid var(--border); padding-top: 14px; transition: opacity .15s ease; }
.co-sum.loading { opacity: .5; }
.co-lines { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0 0 12px; font-size: 15px; }
.co-lines dt { color: var(--muted); }
.co-lines dd { margin: 0; text-align: right; }
.co-good { color: var(--ok-fg); font-weight: 600; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.co-total b { font-size: 28px; color: var(--accent); }
.co-saved { margin: 4px 0 0; text-align: right; font-size: 14px; color: var(--ok-fg); font-weight: 600; }
.co-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 18px; }
@media (max-width: 600px) { .modal { padding: 20px 16px; } .modal-back { padding: 12px 8px; } .co-total b { font-size: 24px; } }

/* ---------- Скидки и приглашения ---------- */
.ref-link { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.ref-link input { flex: 1 1 240px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--bg); color: var(--text); }
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.ref-stats div { text-align: center; padding: 10px 6px; border-radius: 10px; background: var(--bg); }
.ref-stats b { display: block; font-size: 24px; color: var(--accent); }
.ref-stats span { font-size: 13px; color: var(--muted); }
.d-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.d-sub { font-size: 15px; margin: 16px 0 8px; }
.d-saved { font-size: 16px; }

/* ---------- Админка: акции ---------- */
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 16px; }
.subtab { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 14px; }
.subtab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .subtab.active { color: #062925; }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 0 20px; }
.check-row { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text); }
.ap-edit td { background: var(--subtle); }
.audit-pre { white-space: pre-wrap; word-break: break-word; max-width: 420px; font-size: 12px; }

/* ---------- Клиника ---------- */
.warn-box { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--warn-border); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.warn-box.danger { background: var(--bad-bg); border-color: transparent; color: var(--bad-fg); }
.warn-box .btn { margin-left: auto; }
.auth-card.wide { max-width: 560px; }
.seat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-bottom: 8px; }
.seat-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.seat-head { display: flex; justify-content: space-between; width: 100%; }
.seat-count { font-weight: 700; color: var(--accent); }
.seat-bar { width: 100%; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.seat-bar span { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.seat-card p { margin: 0; }
.stepper { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 14px; }
.stepper .btn { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 20px; }
.stepper input { width: 80px; height: 44px; text-align: center; font: inherit; font-size: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.clinic-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.clinic-filters select, .clinic-filters input[type=date] { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--surface); color: var(--text); }
.field-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.dc-cat { border-bottom: 1px solid var(--border); padding: 8px 0; }
.dc-cat summary { cursor: pointer; }
.dc-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0 8px 14px; border-top: 1px dashed var(--border); }
.tpl-actions { white-space: nowrap; }
@media (max-width: 700px) { .tpl-actions { white-space: normal; } }

/* ---------- Загрузка и анимации (не блокируют интерфейс) ---------- */
.skeleton { border-radius: 12px; background: linear-gradient(90deg, var(--border) 25%, var(--subtle) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; min-height: 220px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.skeleton-line { min-height: 14px; margin: 8px 0; }
.skeleton-line.short { width: 60%; }
.appear { animation: rise .35s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
.price-anim { animation: flash .4s ease; }
.promo-ok { animation: pop .35s ease; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes flash { from { opacity: .3; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .appear, .price-anim, .promo-ok, .modal, .modal-back, .skeleton { animation: none !important; }
  .period-toggle button, .seg button, .co-sum { transition: none; }
}
.invite-card { padding: 12px 0; border-top: 1px solid var(--border); }
.invite-card:first-of-type { border-top: 0; padding-top: 0; }
.invite-card p { margin: 0 0 6px; }
.team-sub { font-size: 15px; margin: 18px 0 4px; color: var(--muted); }
#plans-msg { margin-bottom: 16px; }
.request-box { background: var(--info-bg); color: var(--info-fg); border-radius: 10px; padding: 10px 14px; margin: 8px 0 12px; }
.grant-box { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 16px; }
.grant-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.grant-row .field { flex: 1 1 160px; }
.req-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #b42318; color: #fff; font-size: 12px; text-align: center; }

/* ---------- Клиника ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab { padding: 10px 16px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.support-note { background: var(--accent-soft); color: var(--accent); padding: 10px 14px; border-radius: 10px; margin: -8px 0 16px; font-size: 15px; }
.staff-row { padding: 14px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.staff-owner { flex-direction: row; align-items: center; gap: 10px; border-top: 0; }
.staff-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.staff-perms { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.staff-perms .check { font-size: 14px; }
.staff-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.staff-actions input { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; min-width: 220px; }

/* ---------- Свои шаблоны ---------- */
.tpl-item { justify-content: space-between; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1100px) { .editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.editor textarea { font: 14px/1.5 ui-monospace, Consolas, monospace; resize: vertical; }
.token-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.editor-preview .sheet { margin-top: 8px; padding: 12mm 10mm; cursor: default; }
.editor-preview .para-off { display: none; }

/* ---------- Карта: уведомления, снимки ---------- */
.doc-notice { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.doc-notice[hidden] { display: none; }
.doc-notice.ok { background: var(--ok-bg); color: var(--ok-fg); }
.doc-notice.info { background: var(--info-bg); color: var(--info-fg); }
.doc-notice.error { background: var(--bad-bg); color: var(--bad-fg); }
.doc-figure { position: relative; margin: 10px 0; text-align: center; break-inside: avoid; }
.doc-figure img { max-width: 100%; max-height: 120mm; border: 1px solid #ccc; }
.doc-figure figcaption { font-size: 11pt; margin-top: 4px; outline: none; }
.fig-remove {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: #fff; color: #b42318;
  font: 16px/1 system-ui, sans-serif; cursor: pointer;
}
.print-blocked { display: none; }

/* ---------- Поиск по документу ---------- */
.doc-search {
  display: flex; align-items: center; gap: 4px;
  padding: 0 6px 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--muted); flex: 0 1 300px; min-width: 200px;
}
.doc-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.doc-search input { flex: 1; min-width: 0; border: 0; outline: none; padding: 8px 4px; font: inherit; font-size: 15px; color: var(--text); background: transparent; }
.ds-count { font-size: 13px; white-space: nowrap; }
.ds-count.ds-none { color: var(--danger); }
.ds-nav { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 15px; cursor: pointer; }
.ds-nav:hover { background: var(--accent-soft); color: var(--accent); }
::highlight(doc-search) { background-color: #fde047; color: inherit; }
::highlight(doc-search-current) { background-color: #fb923c; color: #000; }

/* ---------- Анестезия в карте ---------- */
.anest-bar {
  margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); display: flex; flex-direction: column; gap: 8px;
}
.anest-bar[hidden] { display: none; }
.ab-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ab-row[hidden] { display: none; }
.ab-toggle, .ab-kind {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 14px; color: var(--text); cursor: pointer;
}
.ab-toggle:hover, .ab-kind:hover { border-color: var(--accent); }
.ab-toggle.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ab-toggle[data-done="0"].active { background: var(--danger); border-color: var(--danger); }
.ab-kind.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

.ak .ak-auto { display: none; }
.ak.filled .ak-orig { display: none; }
.ak.filled .ak-auto { display: inline; background: #dcfce7; border-bottom: 1px solid #22c55e; border-radius: 2px; padding: 0 2px; }
.sheet.no-anest .anest-part { text-decoration: line-through; text-decoration-color: #b42318; color: #9a3412; opacity: .6; background: #fff1f0; }
.btn-sm { padding: 5px 12px; font-size: 14px; }

/* ---------- Внешний осмотр ---------- */
.ex-form { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px dashed var(--border); }
.ex-form[hidden], .ex-extra[hidden] { display: none; }
.ex-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ex-label { min-width: 210px; font-size: 14px; font-weight: 600; }
.ex-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ex-seg + .ex-seg { padding-left: 10px; border-left: 1px solid var(--border); }
.ex-extra { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 16px; padding-left: 220px; }
.ex-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ex-input { min-width: 240px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.ex-input:focus { outline: none; border-color: var(--accent); }
.ex-hint { margin: 0; }
.ab-toggle.ex-remove:hover { border-color: var(--danger); color: var(--danger); }
.exam-block { margin: 0; }

/* ---------- Поля карты ---------- */
.fp-only { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.fp-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; padding: 4px 4px 4px 0; border-top: 1px dashed var(--border); }
.fp-sec > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 6px 0; }
.fp-row { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 8px 14px; border-bottom: 1px solid var(--border); }
.fp-row[hidden] { display: none; }
.fp-row:last-child { border-bottom: 0; }
.fp-row.fp-off { opacity: .45; }
.fp-label { all: unset; cursor: pointer; font-size: 13.5px; line-height: 1.35; }
.fp-label:hover .fp-slot, .fp-label:focus-visible .fp-slot { background: var(--accent); color: #fff; }
.fp-slot { padding: 0 4px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }
.fp-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fp-ctl .fp-input { width: 220px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.fp-ctl .fp-input:focus { outline: none; border-color: var(--accent); }
.fp-opt { padding: 4px 10px; font-size: 13px; }
@media (max-width: 720px) {
  .fp-row { padding-left: 0; }
  .fp-ctl .fp-input { width: 100%; }
}
@media (max-width: 720px) {
  .ex-label { min-width: 0; flex-basis: 100%; }
  .ex-extra { padding-left: 0; }
  .ex-seg + .ex-seg { padding-left: 0; border-left: 0; }
  .ex-input { min-width: 0; width: 100%; }
}

/* ---------- Главная ---------- */
.hero {
  text-align: center;
  padding: 96px 16px;
}
.hero h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; }
.hero p { color: var(--muted); font-size: 18px; max-width: 560px; margin: 0 auto 32px; }

/* ---------- Список шаблонов ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-head h1 { font-size: 28px; }
.back { display: inline-block; margin-bottom: 12px; text-decoration: none; color: var(--muted); }
.back:hover { color: var(--accent); }

.search {
  width: 100%;
  max-width: 320px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  background: var(--surface);
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.template-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.template-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(15, 118, 110, .12); transform: translateY(-2px); }
.template-card h3 { font-size: 20px; margin-bottom: 6px; color: var(--accent); }
.template-card p { margin: 0; color: var(--muted); font-size: 14px; }
.empty { color: var(--muted); padding: 24px 0; }

/* ---------- Карта: выбор возраста ---------- */
.card-title { font-size: 28px; margin-bottom: 20px; }
.step-title { font-size: 18px; margin-bottom: 12px; }

.age-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 16px; margin-bottom: 28px; }
.age-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 18px 20px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.age-btn small { font-size: 14px; font-weight: 400; color: var(--muted); }
.age-btn:hover { border-color: var(--accent); }
.age-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ---------- Рабочая область ---------- */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1100px) {
  .workspace { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .variants-panel { position: sticky; top: 16px; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head .step-title { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.selected-line { margin-top: 8px; font-size: 15px; color: var(--muted); }
.selected-line b { color: var(--text); }

/* ---------- Зубная схема ---------- */
.chart svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; user-select: none; }
.tooth { cursor: pointer; outline: none; }
.tooth .crown { fill: var(--tooth); stroke: var(--tooth-stroke); stroke-width: 1.5; transition: fill .12s, stroke .12s; }
.tooth .groove { fill: none; stroke: var(--groove); stroke-width: 1.4; stroke-linecap: round; pointer-events: none; }
.tooth .num { font-size: 15px; fill: var(--muted); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.tooth:hover .crown, .tooth:focus-visible .crown { stroke: var(--accent); stroke-width: 2.5; }
.tooth.selected .crown { fill: var(--accent); stroke: var(--accent-hover); }
.tooth.selected .groove { stroke: rgba(255, 255, 255, .55); }
.tooth.selected .num { fill: var(--accent); font-weight: 700; }
.jaw-label { font-size: 15px; fill: var(--label); text-anchor: middle; }
.tooth .cls-mark { font-size: 13px; font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }

/* Класс по Блэку под схемой */
.black-classes { margin-top: 12px; }
.bc-title { font-weight: 600; margin-bottom: 6px; }
.bc-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.bc-tooth { min-width: 34px; font-weight: 700; color: var(--accent); }
.bc-btn {
  min-width: 38px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.bc-btn:hover { border-color: var(--accent); color: var(--accent); }
.bc-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.bc-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.bc-group { display: inline-flex; gap: 4px; margin-right: 14px; }
.bc-head .bc-group { width: calc(5 * 38px + 4 * 4px); }
.bc-btn.bc-old.active { background: #7c3aed; border-color: #7c3aed; }
.bc-btn.bc-med.active { background: #0369a1; border-color: #0369a1; }
.bc-btn.bc-dist.active { background: #b45309; border-color: #b45309; }
/* Четыре группы (полость, старая пломба, медиальная, дистальная) — с подписью над каждой, переносятся по ширине */
.bc-row { flex-wrap: wrap; align-items: flex-start; gap: 6px 0; }
.bc-head { display: none; }
.bc-group { flex-wrap: wrap; align-items: center; }
.bc-group::before { content: attr(data-label); width: 100%; font-size: 12px; color: var(--muted); }
.bc-row .bc-tooth { flex-basis: 100%; }

/* Анатомия зуба под классами */
.an-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px;
  margin: 2px 0 10px 40px; padding: 8px 10px; border-left: 3px solid var(--accent-soft); background: var(--subtle); border-radius: 0 8px 8px 0;
}
.an-name { flex-basis: 100%; font-size: 14px; font-weight: 600; color: var(--text); }
.an-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.an-field select {
  min-width: 120px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font: inherit; font-size: 14px; color: var(--text); cursor: pointer;
}
.an-field select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.an-disabled select { color: var(--muted); cursor: not-allowed; }
.an-num input, .an-names input {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font: inherit; font-size: 14px; color: var(--text);
}
.an-num input { width: 80px; }
.an-num input:focus, .an-names input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.an-names { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--muted); }
.an-names-label { flex-basis: 100%; }
.an-names input { width: 64px; text-align: center; }
.an-hint { flex-basis: 100%; }
@media (max-width: 600px) { .an-row { margin-left: 0; } .an-field { flex: 1 1 140px; } .an-field select { width: 100%; } .an-num { flex: 0 0 auto; } }

/* Каналы по посещениям (над картой) */
.canal-panel {
  margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); display: flex; flex-direction: column; gap: 10px;
}
.canal-panel[hidden] { display: none; }
.cp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cp-title { font-size: 16px; }
.cp-block { border-top: 1px solid var(--border); padding-top: 8px; }
.cp-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 6px; }
.cp-count { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.cp-count input { width: 64px; }
.cp-link { font-size: 14px; }
.cp-grid { display: grid; grid-template-columns: repeat(var(--cp-cols, 5), minmax(0, 1fr)); gap: 4px 6px; max-width: 640px; }
.cp-th { font-size: 12px; color: var(--muted); }
.cp-count input, .cp-in {
  padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  font: inherit; font-size: 14px; color: var(--text); min-width: 0;
}
.cp-in:disabled, .cp-count input:disabled { background: var(--bg); color: var(--muted); }
.cp-in:focus, .cp-count input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
@media (max-width: 600px) {
  .bc-row { flex-wrap: wrap; }
  .bc-head { display: none; }
  .bc-group { flex-wrap: wrap; align-items: center; }
  .bc-group::before { content: attr(data-label); width: 100%; font-size: 12px; color: var(--muted); }
}
.side-label { font-size: 13px; fill: var(--label); }

/* ---------- Виды (кариеса и т.д.) ---------- */
.hint { color: var(--muted); margin: 0 0 12px; }
.variant-list { display: flex; flex-direction: column; gap: 8px; }
.variant {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, background .15s;
}
a.variant:hover { border-color: var(--accent); background: var(--accent-soft); }
.variant-list.disabled .variant { opacity: .45; }
.variant-group {
  margin: 12px 0 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.variant-group:first-child { margin-top: 0; }
.variant-num {
  flex: none;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
}
.variant-text { display: flex; flex-direction: column; min-width: 0; }
.variant-text b { font-weight: 600; }
.variant-text small { color: var(--muted); font-size: 13px; }

/* ---------- Документ ---------- */
.doc-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 16px;
  margin: -8px 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.doc-info { display: flex; flex-direction: column; flex: 1 1 240px; min-width: 0; }
.doc-info span { font-size: 14px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.doc-hint { color: var(--muted); font-size: 14px; margin: 8px 0 16px; }
kbd { font: inherit; font-size: 12px; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); }

.sheet {
  max-width: 210mm;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
  padding: 18mm 16mm;
  font-family: "Times New Roman", Times, serif;
  font-size: 12pt;
  line-height: 1.4;
  color: #000;
}
.sheet { outline: none; cursor: text; }
.sheet:focus-within { box-shadow: 0 0 0 2px var(--accent-soft), 0 2px 16px rgba(0, 0, 0, .07); }
.gap-wrap { display: inline; }
.sheet .para { margin: 0; text-align: justify; position: relative; }
.para-off {
  position: absolute;
  left: -30px;
  top: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font: 14px/1 system-ui, sans-serif;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}
.para:hover > .para-off, .para.off > .para-off { opacity: 1; }
.para-off:hover { border-color: #c0392b; color: #c0392b; }
.para.off { opacity: .35; text-decoration: line-through; }
.para.off > .para-off { text-decoration: none; }
@media (hover: none) { .para-off { opacity: .6; } }
.sheet .para.right { text-align: right; }
.sheet .para.center { text-align: center; }
.sheet .sp { margin: 0; line-height: 1; }
.page-break { border-top: 1px dashed #b8c4c9; margin: 28px -16mm; }
/* Посещение с нового листа: на экране — подпись на линии разрыва */
.visit-break { position: relative; }
.visit-break::after {
  content: "следующее посещение — с нового листа";
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
  padding: 0 8px;
  background: #fff;
  color: #94a6ae;
  font: 11px/16px system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
}
.sheet.visits-together .visit-break { display: none; }
.table-wrap { overflow-x: auto; margin: 6px 0; }
.doc-table { border-collapse: collapse; width: 100%; }
.doc-table td { border: 1px solid #000; padding: 2px 6px; vertical-align: top; text-align: left; }

.gap {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 3px;
  background: #fff6d1;
  border-bottom: 1px solid #c9a227;
  border-radius: 2px;
  outline: none;
  text-align: left;
  text-indent: 0;
}
.gap:empty.gap-s { min-width: 4em; }
.gap:empty.gap-l { min-width: 10em; }
.gap:focus { background: #ffe999; border-bottom-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sign-line { display: inline-block; width: 9em; border-bottom: 1px solid #000; }

.choice select {
  font: inherit;
  padding: 0 2px;
  border: 1px solid #c9a227;
  border-radius: 3px;
  background: #fff6d1;
}
.choice-print { display: none; }

/* Выбор в тексте: «(есть, нет)» → кнопки; печатается только выбранное */
.opt { display: inline; border-radius: 5px; outline: none; }
.opt:focus { box-shadow: 0 0 0 2px var(--accent); }
.opt-btns { display: inline-flex; flex-wrap: wrap; gap: 2px; vertical-align: baseline; }
.opt-b {
  font: inherit;
  font-size: .9em;
  line-height: 1.3;
  padding: 0 5px;
  border: 1px solid #d8c27a;
  border-radius: 4px;
  background: #fffbea;
  color: #6b5a1e;
  cursor: pointer;
}
.opt-b:hover { border-color: var(--accent); }
.opt-b.active { background: #ffe58a; border-color: #b8901a; color: #000; font-weight: 600; }
.opt.opt-empty[data-mode="one"] .opt-b { border-style: dashed; }
.opt.opt-hide { display: none; }
.opt-print { display: none; }

/* «Вариант 1 … Вариант N» — один выбор */
.var-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px dashed #d8c27a;
  border-radius: 8px;
  background: #fffbea;
  font: 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1c2b33;
  outline: none;
}
.var-pick:focus { box-shadow: 0 0 0 2px var(--accent); }
.var-pick.done { border-style: solid; border-color: #9fd3ae; background: #f3fbf5; }
.var-title { width: 100%; color: #61727c; font-size: 13px; }
.var-b { font: inherit; text-align: left; padding: 4px 9px; border: 1px solid #dbe3e7; border-radius: 6px; background: #fff; color: inherit; cursor: pointer; max-width: 100%; }
.var-b:hover { border-color: #0f766e; }
.var-b.active { border-color: #0f766e; background: #e0f2ef; font-weight: 600; }
.var-picked .var-tag { display: none; }

/* Подсказки под полем: свои прошлые значения (★) и типовые */
.gap-suggest {
  position: absolute;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: 320px;
  padding: 4px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  font: 14px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.gap-suggest[hidden] { display: none; }
.gs-item { text-align: left; padding: 5px 8px; border: 0; border-radius: 5px; background: none; color: inherit; font: inherit; cursor: pointer; }
.gs-item:hover, .gs-item.active { background: var(--accent-soft); }
.gs-hist::before, .fp-hist::before { content: "★ "; color: #c9a227; }
.gs-tip { padding: 4px 8px 2px; font-size: 12px; color: var(--muted); }

/* Заготовки, комплект, проверка перед печатью */
.pr-clinic { font-size: 11px; padding: 0 5px; border-radius: 4px; background: var(--violet-bg); color: var(--violet-fg); font-weight: 600; }
.pr-name, .pr-rename, .pr-scope { padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.pr-name { flex: 1 1 260px; }
.pr-rename { flex: 1 1 200px; }
.pr-hint { margin: 4px 0 0; }
.pr-manage { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.check-panel { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--warn-border); border-radius: 10px; background: var(--warn-bg); color: var(--text); }
.check-panel[hidden] { display: none; }
.check-panel p { margin: 6px 0 0; }
.ck-list { margin: 6px 0 0; padding-left: 22px; max-height: 260px; overflow-y: auto; }
.ck-go { all: unset; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--accent); }
.ck-go:hover, .ck-go:focus-visible { text-decoration: underline; }
.fp-key { display: inline-block; min-width: 1.1em; font-size: 11px; color: var(--muted); }
.fp-sel { padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.flash { animation: fill-flash 1.4s ease-out; }
@keyframes fill-flash { 0%, 50% { box-shadow: 0 0 0 3px #f0b429; } 100% { box-shadow: 0 0 0 0 transparent; } }

@media (max-width: 600px) {
  .age-choice { grid-template-columns: 1fr 1fr; gap: 10px; }
  .age-btn { font-size: 17px; padding: 14px; }
  .sheet { padding: 20px 14px 20px 32px; font-size: 11pt; }
  .para-off { left: -27px; }
  .page-break { margin: 24px -14px; }
}

/* ---------- Печать ---------- */
@media print {
  @page { size: A4; margin: 15mm 15mm 15mm 20mm; }
  body { background: #fff; }
  .no-print, .topbar, .impersonation { display: none !important; }
  #app { max-width: none; padding: 0; margin: 0; }
  .sheet { max-width: none; border: 0; box-shadow: none; padding: 0; outline: none !important; }
  .gap { background: none; border-bottom: 0; padding: 0; min-width: 0; box-shadow: none; }
  .gap:empty.gap-s, .gap:empty.gap-l { border-bottom: 1px solid #000; }
  .para-off, .para.off { display: none !important; }
  /* Печать только через кнопку на сайте (учёт карт по тарифу) */
  body:not(.print-ok) #app { display: none !important; }
  body:not(.print-ok) .print-blocked { display: block; font: 16px sans-serif; }
  .doc-figure img { border: 0; }
  .ak.filled .ak-auto { background: none; border: 0; padding: 0; }
  .sheet.no-anest .anest-part { display: none !important; }
  .choice select { display: none; }
  .choice-print { display: inline; }
  .opt-btns, .var-pick, .gap-suggest { display: none !important; }
  .opt-print { display: inline; }
  .opt { box-shadow: none !important; }
  .flash { animation: none; box-shadow: none; }
  .page-break { border: 0; margin: 0; break-before: page; page-break-before: always; }
  .visit-break::after { content: none; }
  /* заголовок посещения убран из карты — и лист для него не начинаем */
  .visit-break:has(+ .para.off) { display: none; }
}