/* Мост — оформление мини-приложения. Токены повторяют design/tokens.css. */
:root {
  --bg: #F3F5F8;
  --card: #FFFFFF;
  --field: #F3F5F8;
  --ink: #0F1B2D;
  --ink-2: #55607A;
  --line: #D5DBE3;
  --line-strong: #C3CBD6;
  --accent: #0B7A8C;
  --accent-ink: #075E6C;
  --accent-soft: #DDF0F3;
  --warn: #D9730D;
  --warn-ink: #9A4A07;
  --warn-soft: #FFF1E3;
  --warn-line: #E9C7A6;
  --line-soft: #E3E8EE;
  --on-ink: #FFFFFF;                                     /* текст на тёмной кнопке (в тёмной теме кнопка светлая) */
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 24px;
  --font-display: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nav-h: 68px;
  color-scheme: light;
}
/* тёмная тема (Настройки → Внешний вид); акцент тот же, чуть светлее подписи и подложки */
:root[data-theme="dark"] {
  --bg: #0B1422;
  --card: #121E30;
  --field: #1A283C;
  --ink: #E7ECF4;
  --ink-2: #98A5BA;
  --line: #27364C;
  --line-strong: #364A66;
  --line-soft: #1F2D42;
  --accent: #0E8A9D;
  --accent-ink: #7DD3E0;
  --accent-soft: #11343E;
  --warn: #E8873A;
  --warn-ink: #F3B37A;
  --warn-soft: #3A2516;
  --warn-line: #6B4422;
  --on-ink: #0B1422;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.4 var(--font-text); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .55; cursor: default; }
a { color: var(--accent-ink); }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.boot, .loading { padding: 48px 20px; text-align: center; color: var(--ink-2); }
.boot { font: 600 32px var(--font-display); color: var(--ink); padding-top: 30vh; }

/* ---------- каркас: на телефоне меню снизу (что не влезло — в «Ещё»), на планшете — узкая колонка слева,
   на компьютере — меню с подписями, LabFrame, админкой, настройками и ролью внизу ---------- */
.shell { min-height: 100vh; min-height: 100dvh; }
.page { min-width: 0; }
.main { padding: 16px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); max-width: 1640px; margin: 0 auto; }
.nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line); }
.nav .group { display: contents; }
.nav .logo, .nav .foot, .nav .extra, .nav .desk { display: none; }
.tab { position: relative; flex: 1 1 0; min-width: 0; min-height: 54px; border: 0; border-radius: var(--r-md); background: none; color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11.5px; font-weight: 500; }
.tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab[aria-current="page"] { background: var(--ink); color: var(--on-ink); }
.tab svg { flex: none; }

@media (min-width: 900px) {
  .shell { display: flex; }
  .page { flex: 1 1 0; }
  .nav { position: sticky; top: 0; bottom: auto; right: auto; height: 100vh; height: 100dvh; width: 96px; flex: none; flex-direction: column; align-items: center;
    padding: 18px 8px; border-top: 0; border-right: 1px solid var(--line); gap: 4px; overflow-y: auto; }
  .nav .group { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
  .nav .extra { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
  .nav .desk { display: flex; }
  .nav .mob { display: none; }
  .nav .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 0; border: 0; background: none; color: var(--ink); }
  .nav .logo .mark { width: 52px; height: 52px; border-radius: 16px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
  .nav .logo .word { display: none; font: 700 22px var(--font-display); letter-spacing: -0.03em; }
  .nav .foot { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin-top: auto; padding-top: 12px; }
  .tab { flex: none; width: 80px; min-height: 60px; }
  .who { width: 80px; padding: 8px 4px; border: 0; border-radius: var(--r-md); background: var(--field); color: var(--ink); display: flex; justify-content: center; }
  .who-t { display: none; }
  .main { padding: 28px 28px 40px; }
}
@media (min-width: 1200px) {
  .nav { width: 256px; align-items: stretch; padding: 22px 16px 18px; }
  .nav .group, .nav .foot { align-items: stretch; }
  .nav .logo { padding: 0 6px; }
  .nav .logo .mark { width: 44px; height: 44px; border-radius: 14px; }
  .nav .logo .word { display: block; }
  .tab { width: auto; min-height: 44px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px; font-size: 14.5px; }
  .tab:not([aria-current="page"]):hover { background: var(--field); color: var(--ink); }
  .who { width: auto; justify-content: flex-start; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; }
  .who:hover { background: var(--line-soft); }
  .who-t { display: flex; flex-direction: column; min-width: 0; }
  .who-t b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .who-t small { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main { padding: 32px 40px 48px; }
}

/* ---------- заголовки и общие блоки ---------- */
.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.head h1 { font: 600 28px/1.1 var(--font-display); letter-spacing: -0.3px; }
.head .sub { margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }
.back { width: 44px; height: 44px; flex: none; border: 0; border-radius: var(--r-md); background: var(--card); display: flex; align-items: center; justify-content: center; }
h2.group { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.stack { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; }
.wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.grow { flex: 1 1 0; min-width: 0; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.num { font-family: var(--font-display); font-weight: 500; }
.big { font: 600 40px/1.1 var(--font-display); letter-spacing: -0.5px; }
.big small { font: 500 28px var(--font-text); }
.empty { padding: 28px 16px; border-radius: var(--r-lg); background: var(--card); color: var(--ink-2); text-align: center; }
.cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }   /* minmax(0, …): широкое содержимое не распирает страницу */
@media (min-width: 900px) { .cols { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
@media (min-width: 1400px) { .cols { grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; } }

.card { background: var(--card); border-radius: var(--r-lg); padding: 16px; }
.card h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.card.warn { background: var(--warn-soft); }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 0; }
.kv > :first-child { color: var(--ink-2); }
.kv > :last-child { font-weight: 500; text-align: right; }
.hr { height: 1px; background: var(--line-soft); margin: 10px 0; }

/* ---------- кнопки, чипы, поля ---------- */
.btn { min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--r-md); background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn.accent { background: var(--accent); color: #fff; }
.btn.line { background: var(--card); color: var(--ink); border: 1.5px solid var(--line-strong); font-weight: 500; }
.btn.soft { background: var(--field); color: var(--ink); font-weight: 500; }
.btn.danger { background: var(--card); color: var(--warn-ink); border: 1.5px solid var(--warn-line); font-weight: 500; }
.btn.block { width: 100%; }
.btn.two { flex-direction: column; align-items: flex-start; gap: 1px; min-height: 52px; padding: 6px 14px; text-align: left; }
.btn.two small { font-size: 12px; font-weight: 400; color: var(--ink-2); }
.chip { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500; }
.chip.in { background: var(--field); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--field); font-size: 12.5px; white-space: nowrap; }
.tag.accent { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.tag.warn { background: var(--warn-soft); color: var(--warn-ink); font-weight: 600; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); }
.field input, .field select, .field textarea, .input { min-height: 48px; width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink); font-size: 16px; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--accent); }
.grid2 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- наряд в списке ---------- */
.order { width: 100%; border: 0; text-align: left; display: grid; gap: 10px 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--card); color: var(--ink);
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no due" "what what" "state state" "go go"; cursor: pointer; }
.order .no { grid-area: no; font: 600 16px var(--font-display); color: var(--ink-2); white-space: nowrap; }
.order .what { grid-area: what; min-width: 0; }
.order .title { font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.order .sub { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.order .state { grid-area: state; display: flex; flex-direction: column; gap: 6px; }
.order .due { grid-area: due; text-align: right; font-size: 14px; font-weight: 500; white-space: nowrap; }
.order .due .small { display: inline; margin-left: 8px; }
.order .go { grid-area: go; }
.steps { display: flex; gap: 4px; }
.steps i { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--line); }
.steps i.on { background: var(--accent); }
.steps i.bad { background: var(--warn); }
.state .label { font-size: 13px; font-weight: 500; }
.state .label.accent { color: var(--accent-ink); font-weight: 600; }
.state .label.warn { color: var(--warn-ink); font-weight: 600; }
@media (min-width: 900px) {
  .order { grid-template-columns: 68px minmax(0, 1fr) 230px 110px auto; grid-template-areas: "no what state due go"; align-items: center; }
  .order .due { text-align: left; }
  .order .due .small { display: block; margin-left: 0; }
}
.order .whom { display: none; }
@media (min-width: 1400px) {
  /* колонка кнопки — постоянной ширины, чтобы строки с кнопкой и без стояли ровно */
  .order { grid-template-columns: 76px minmax(0, 1.5fr) minmax(0, 1fr) 280px 130px 200px; grid-template-areas: "no what whom state due go"; padding: 14px 20px; }
  .order .go { justify-self: end; }
  .order .whom { grid-area: whom; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
  .order .whom small { font-size: 12.5px; color: var(--ink-2); }
  .order .whom > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .order .sub .where { display: none; }
}

/* ---------- карточка наряда ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fact { padding: 10px 12px; border-radius: var(--r-md); background: var(--field); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fact span { font-size: 12px; color: var(--ink-2); }
.fact b { font: 600 17px var(--font-display); overflow-wrap: anywhere; }
.name { font: 600 24px/1.15 var(--font-display); letter-spacing: -0.2px; overflow-wrap: anywhere; }
.timeline { display: flex; flex-direction: column; }
.timeline .st { display: flex; gap: 12px; min-height: 40px; }
.timeline .mark { width: 24px; flex: none; display: flex; flex-direction: column; align-items: center; }
.timeline .dot { width: 24px; height: 24px; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--card); display: flex; align-items: center; justify-content: center; color: #fff; }
.timeline .bar { flex: 1 1 0; width: 2px; background: var(--line); }
.timeline .st.done .dot { background: var(--accent); border-color: var(--accent); }
.timeline .st.done .bar { background: var(--accent); }
.timeline .st.now .dot { border-color: var(--ink); }
.timeline .st.now .dot::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--ink); }
.timeline .st:last-child .bar { display: none; }
.timeline .txt { padding-bottom: 12px; font-size: 15px; font-weight: 500; }
.timeline .st.now .txt { font-weight: 600; }
.timeline .txt small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.thumbs button { border: 0; padding: 0; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 1; background: var(--field); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.history { font-size: 13.5px; }
.history li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.history li:first-child { border-top: 0; }
.history ul { list-style: none; margin: 0; padding: 0; }
.history time { color: var(--ink-2); white-space: nowrap; font-size: 12.5px; }
.msgs { display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 86%; align-self: flex-start; padding: 9px 12px; border-radius: 4px 16px 16px 16px; background: var(--field); font-size: 14.5px; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; border-radius: 16px 4px 16px 16px; background: var(--accent-soft); }
.msg small { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 2px; }
.send { display: flex; gap: 8px; margin-top: 10px; }
.send .input { border: 0; background: var(--field); border-radius: 16px; }
.send .btn { width: 48px; padding: 0; border-radius: 16px; flex: none; }

/* ---------- новый наряд: зубная формула ---------- */
/* челюсть — две половины по восемь зубов; не помещаются в ряд — встают друг под другом, зубы сжимаются под ширину */
.jaw { display: flex; flex-wrap: wrap; gap: 6px 0; max-width: 930px; }
.quad { display: flex; align-items: center; flex: 1 1 372px; min-width: 0; }
.tooth { flex: 1 1 0; min-width: 0; max-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: var(--field); font: 600 15px var(--font-display); }
.tooth[aria-pressed="true"] { background: var(--accent); color: #fff; }
.join { width: 14px; height: 44px; flex: none; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; }
.join i { width: 10px; height: 10px; border-radius: 999px; border: 2px solid #8792A6; background: var(--card); }
.join[aria-pressed="true"] i { border-color: var(--accent); background: var(--accent); }
.join:disabled { opacity: 0; }
@media (max-width: 480px) { .join { width: 11px; } .tooth { font-size: 14px; border-radius: 9px; } }
.wrap > select.input:not(.pick) { flex: 1 1 100%; }
.shade { width: 52px; min-height: 44px; padding: 0; border: 0; border-radius: var(--r-sm); background: var(--field); font: 600 16px var(--font-display); }
.shade[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

/* ---------- окно снизу, просмотр файлов, всплывающее сообщение ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(15, 27, 45, .45); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--card);
  display: flex; flex-direction: column; gap: 14px; }
.sheet h2 { font: 600 22px/1.2 var(--font-display); }
@media (min-width: 640px) { .scrim { align-items: center; } .sheet { border-radius: var(--r-xl); } }
.viewer { position: fixed; inset: 0; z-index: 50; background: #0F1B2D; display: flex; flex-direction: column; }
.viewer .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; color: #fff; font-size: 14px; }
.viewer .bar .btn { min-height: 44px; background: rgba(255, 255, 255, .14); }
.viewer iframe, .viewer .pic { flex: 1 1 0; min-height: 0; width: 100%; border: 0; background: #fff; }
.viewer .pic { background: #0F1B2D; display: flex; align-items: center; justify-content: center; }
.viewer .pic img { max-width: 100%; max-height: 100%; }
#toast { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom)); max-width: min(92vw, 460px);
  padding: 12px 16px; border-radius: var(--r-md); background: var(--ink); color: var(--on-ink); font-size: 14.5px; opacity: 0; pointer-events: none; transition: opacity .2s; }
#toast.on { opacity: 1; }
#toast.bad { background: var(--warn-ink); }

/* ---------- прайс и ставки ---------- */
.price { display: grid; gap: 10px; }
.price .rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.price .field input { min-height: 44px; }
.bar-load { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.bar-load i { display: block; height: 6px; border-radius: 3px; background: var(--accent); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* на телефоне действия по наряду — сразу под шапкой, а не в самом низу */
.cols .side { order: -1; }
@media (min-width: 900px) { .cols .side { order: 0; } }

.linkish { border: 0; background: none; padding: 6px 0; margin: -3px 0; color: inherit; font: inherit; text-align: left; }
.linkish.edit { margin-left: 10px; color: var(--accent-ink); text-decoration: underline; font-weight: 500; }
.handover > summary { cursor: pointer; padding: 10px 0; font-size: 14px; font-weight: 500; }
.handover > summary small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
.handover[open] > summary { margin-bottom: 6px; }
.viewer .bar { gap: 8px; }
/* прайс для одной клиники: работа — общая цена — особая цена */
.pline { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.pline:first-of-type { border-top: 0; }
.pline input { min-height: 44px; width: 100%; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card); font-size: 16px; }
.pline input:focus { outline: none; border-color: var(--accent); }
.card.off { opacity: .6; }
.code { font: 600 30px var(--font-display); letter-spacing: 3px; }

/* ---------- админка владельцев сервиса ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kpi { padding: 14px; border-radius: var(--r-lg); background: var(--card); min-width: 0; }
.kpi.warn { background: var(--warn-soft); }
.kpi .l { font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-2); }
.kpi .v { margin-top: 4px; font: 600 28px/1.15 var(--font-display); overflow-wrap: anywhere; }
.kpi .s { margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.days { display: flex; align-items: flex-end; gap: 6px; height: 132px; }
.days .d { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-2); }
.days .bars { flex: 1 1 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.days .bars i { width: 42%; min-height: 2px; border-radius: 3px 3px 0 0; }
.days .in, .dot.in { background: var(--ink); }
.days .out, .dot.out { background: var(--accent); }
.dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.dot.out { margin-left: 10px; }
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
.num.minus { color: var(--warn-ink); }
.row.off { opacity: .55; }
.tooth:disabled, .chip:disabled { opacity: .55; cursor: default; }
.field select:disabled, .field input:disabled { opacity: .65; }

/* ---------- список: поиск, отбор, сроки ---------- */
.tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 8px; }
.tools .find { flex: 1 1 220px; min-width: 0; max-width: 420px; min-height: 44px; border: 0; border-radius: 999px; padding: 0 16px; background: var(--card); }
.chip.count { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px 0 14px; font-size: 13.5px; }
.chip.count b { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--field); font: 600 12.5px var(--font-display); text-align: center; }
.chip.count[aria-pressed="true"] b { background: rgba(255, 255, 255, .22); }
.chip.count.warn:not([aria-pressed="true"]) { color: var(--warn-ink); }
.chip.count.warn:not([aria-pressed="true"]) b { background: var(--warn-soft); }
.input.pick { width: auto; min-height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--card); font-size: 13.5px; }
.wrap + .wrap:not(:empty) { margin-top: 8px; }
.order.late { box-shadow: inset 3px 0 0 var(--warn); }
.order .when { font-weight: 600; }
.order .when.warn, .tag.msg + .warn { color: var(--warn-ink); }
.order .when.accent { color: var(--accent-ink); }
.order .title .msg { margin-left: 8px; font-size: 12px; vertical-align: 2px; }
.step .tick { width: 26px; height: 26px; flex: none; border-radius: 999px; border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: #fff; }
.step.done .tick { background: var(--accent); border-color: var(--accent); }
.step.done b { color: var(--ink-2); font-weight: 500; }
.head .tag + .tag { margin-left: -4px; }
@media (max-width: 559px) {
  .step { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 6px 12px; }
  .step .btn { grid-column: 2; justify-self: start; min-height: 40px; }
}

/* ---------- профиль ---------- */
.way { align-items: flex-start; }
.waydot { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: #fff; }
.waydot.on { border-color: var(--accent); background: var(--accent); }
.addr { padding: 12px 14px; border-radius: var(--r-md); background: var(--field); font: 500 14px var(--font-text); overflow-wrap: anywhere; }
h1, .name, .big { letter-spacing: -0.03em; }

/* ---------- админка владельцев: сводка, организации, люди ---------- */
.ad-hero { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); padding: 22px; border-radius: var(--r-xl); color: #fff; background-color: #0B1422;
  background-image: radial-gradient(420px 260px at 88% 0%, rgba(11, 122, 140, .6), transparent 70%), radial-gradient(360px 240px at 0% 100%, rgba(11, 122, 140, .3), transparent 70%); }
@media (min-width: 900px) { .ad-hero { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: end; padding: 28px; } }
.ad-hero .l { font-size: 11.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #A9B6CC; }
.ad-hero .s { font-size: 13px; color: #A9B6CC; }
.ad-now .big { margin: 6px 0 4px; font: 600 72px/1 var(--font-display); letter-spacing: -0.04em; }
.ad-now .wrap { margin-top: 14px; }
.ad-alert { min-height: 36px; padding: 0 14px 0 6px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.ad-alert b { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--warn); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; }
.ad-trio { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ad-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ad-trio > div { min-width: 0; padding: 14px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .07); }
.ad-trio .v { margin: 4px 0 6px; font: 600 26px/1.15 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.ad-spark svg { display: block; width: 100%; height: 34px; }
.ad-spark polyline { fill: none; stroke: #5FD0E0; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 900; animation: ad-draw-s 1.4s ease-out both; }
.ad-spark polygon { fill: rgba(95, 208, 224, .16); }
.ad-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; }
.ad-tile { min-width: 0; padding: 16px; border-radius: var(--r-lg); background: var(--card); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.ad-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -22px rgba(15, 27, 45, .4); }
.ad-tile .l { font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-2); }
.ad-tile .v { margin-top: 6px; font: 600 30px/1.1 var(--font-display); letter-spacing: -0.03em; }
.ad-tile .v small { font: 500 14px var(--font-text); letter-spacing: 0; color: var(--ink-2); }
.ad-tile .s { margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.ad-meter { display: block; height: 6px; margin-top: 10px; border-radius: 3px; background: var(--field); overflow: hidden; }
.ad-meter u, .ad-bar u { display: block; height: 100%; border-radius: 3px; background: var(--accent); transform-origin: left; animation: ad-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.ad-chart { overflow-x: auto; }
.ad-chart svg { display: block; max-width: 100%; height: auto; }
.ad-chart .g { stroke: var(--line); stroke-width: 1; }
.ad-chart .t { font: 11px var(--font-text); fill: var(--ink-2); }
.ad-chart .ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 6000; animation: ad-draw 1.8s ease-out both; }
.ad-chart .ln.in { stroke: var(--ink); }
.ad-chart .ln.out { stroke: var(--accent); }
.ad-chart .area { fill: var(--accent-soft); opacity: .7; animation: ad-fade 1.2s .4s ease-out both; }
.ad-chart .col rect { fill: transparent; }
.ad-chart .col circle { opacity: 0; stroke: var(--card); stroke-width: 2; }
.ad-chart .col circle.in { fill: var(--ink); }
.ad-chart .col circle.out { fill: var(--accent); }
.ad-chart .col:hover rect { fill: rgba(15, 27, 45, .05); }
.ad-chart .col:hover circle { opacity: 1; }
.ad-bars { display: grid; gap: 12px; }
.ad-bar .row { margin-bottom: 5px; font-size: 14px; }
.ad-bar i { display: block; height: 8px; border-radius: 4px; background: var(--field); overflow: hidden; }
.ad-split { display: flex; gap: 3px; height: 12px; border-radius: 6px; background: var(--field); overflow: hidden; }
.ad-split i { min-width: 6px; transform-origin: left; animation: ad-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.ad-split .a, .dot.a { background: var(--ink); }
.ad-split .b, .dot.b { background: var(--accent); }
.ad-split .c, .dot.c { background: #F0A65A; }
.kv .dot { display: inline-block; vertical-align: middle; }
.ad-ava { position: relative; flex: none; width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font: 600 15px var(--font-display); color: #0F1B2D; background: #BDE7EC; }
.ad-ava.lg { width: 48px; height: 48px; border-radius: 16px; font-size: 21px; }
.ad-ava.t1 { background: #FFE0B5; }
.ad-ava.t2 { background: #FFD0D9; }
.ad-ava.t3 { background: #DCD5FF; }
.ad-ava.t4 { background: #CCE1FF; }
.ad-ava.t5 { background: #D2EFC6; }
.ad-ava.live::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #2DBE6C; border: 2px solid var(--card); }
.ad-org .title .tag { margin-left: 8px; font-weight: 500; }
.ad-user summary { list-style: none; cursor: pointer; }
.ad-user summary::-webkit-details-marker { display: none; }
@keyframes ad-draw { from { stroke-dashoffset: 6000; } }
@keyframes ad-draw-s { from { stroke-dashoffset: 900; } }
@keyframes ad-grow { from { transform: scaleX(0); } }
@keyframes ad-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ad *, .ad *::before, .ad *::after { animation: none !important; transition: none !important; } }

/* вход без роли (выбор «кто вы», приглашение): на большом экране — узкая колонка по центру, а не лента во всю ширину */
.main.door { max-width: 620px; margin-inline: auto; }
@media (min-width: 900px) { .main.door { padding-top: 9vh; } }

/* ---------- счёт документом ---------- */
.doc { max-width: 860px; display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 4vw, 36px); border-radius: var(--r-lg); background: var(--card); }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.doc-kind { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.doc-head h2 { margin-top: 4px; font: 600 26px/1.15 var(--font-display); letter-spacing: -0.02em; }
.doc-brand { display: flex; align-items: center; gap: 8px; font: 600 16px var(--font-display); color: var(--accent-ink); }
.doc-parties { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .doc-parties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc-parties span { display: block; font-size: 12px; color: var(--ink-2); }
.doc-parties b { display: block; font-size: 16px; }
.doc-parties p { margin-top: 6px; font-size: 13px; color: var(--ink-2); white-space: pre-line; }
.doc-scroll { overflow-x: auto; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.doc-table th { padding: 8px 6px; border-bottom: 1.5px solid var(--ink); font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: left; }
.doc-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-table td.num, .doc-table th:last-child { text-align: right; white-space: nowrap; }
.doc-sum { width: min(100%, 320px); margin-left: auto; }
.doc-sum .total { margin-top: 4px; padding-top: 8px; border-top: 1.5px solid var(--ink); font-size: 16px; }
.doc-foot { font-size: 12px; color: var(--ink-2); }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .nav, .head, .noprint, #toast, #layer { display: none !important; }
  .shell { display: block; }
  .main { max-width: none; margin: 0; padding: 0 !important; }
  .doc { max-width: none; padding: 0; border-radius: 0; }
}

/* оплата Моста: карточки тарифов — выбор одной */
.plans { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.plan b { font: 600 24px/1.1 var(--font-display); }
.plan[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.agree input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }

/* схема зубов в карточке наряда: выбранные зубы и мосты, без кнопок */
.chart { display: flex; flex-direction: column; gap: 6px; }
.chart .tooth { display: flex; align-items: center; justify-content: center; height: 30px; font-size: 13px; border-radius: 8px; }
.chart .tooth[aria-pressed="false"] { color: var(--ink-2); opacity: .6; }
.chart .join { height: 30px; }
.chart .join.off { opacity: 0; }
/* библиотеки и скрытые клиники */
.lib { padding: 8px 0; border-top: 1px solid var(--line); }
.lib:first-of-type { border-top: 0; }
details.card > summary { cursor: pointer; font-weight: 600; }

/* ---------- «Ещё» на телефоне, полоса «Смотреть как» ---------- */
.menu { display: flex; flex-direction: column; }
.menu-i { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 4px; border: 0; border-top: 1px solid var(--line-soft); background: none; color: var(--ink);
  font-size: 16px; font-weight: 500; text-align: left; }
.menu-i:first-child { border-top: 0; }
.menu-i > svg:last-child { color: var(--ink-2); }
.menu-i small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
.viewer-bar { position: sticky; top: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px;
  background: var(--ink); color: var(--on-ink); font-size: 14px; }
.viewer-bar .linkish { color: inherit; text-decoration: underline; }
.viewer-bar .btn { min-height: 36px; padding: 0 14px; font-size: 14px; }
.look-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.look { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 2px solid transparent; border-radius: var(--r-lg);
  background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.look:hover { border-color: var(--line-strong); }
.look.on { border-color: var(--accent); background: var(--accent-soft); }
.look b { font-size: 15.5px; }
.look small { font-size: 12.5px; color: var(--ink-2); }

/* ---------- главная (home.js) ---------- */
.hm { display: flex; flex-direction: column; gap: 16px; }
.hm-head h1 { font-size: 30px; }
.hm-head .sub::first-letter { text-transform: uppercase; }
.hm-gear { flex: none; }
@media (min-width: 900px) { .hm-gear { display: none; } }
.hm-hero .l { font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.hm-hero .ad-now .big { font-size: 64px; }
.hm-chip { min-height: 36px; padding: 0 14px 0 6px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px; }
.hm-chip:hover { background: rgba(255, 255, 255, .16); }
.hm-chip b { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; }
.hm-chip.warn b { background: var(--warn); }
.hm-money { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .hm-money { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hm-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .07); }
.hm-stat .l { font-size: 13px; color: #A9B6CC; }
.hm-stat .v { font: 600 26px/1.15 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.hm-stat .s { font-size: 12.5px; color: #A9B6CC; }
.hm-stat.warn .v { color: #F6B97A; }
:root[data-theme="dark"] .ad-hero { background-color: #0F1B2D; box-shadow: inset 0 0 0 1px var(--line); }
/* телефон: коротко — число, что ждёт и куда смотреть; графики и карта — на большом экране */
.hm-grid { display: none; }
@media (max-width: 699px) {
  .hm-hero .ad-now .big { font-size: 52px; }
  .hm-money .hm-stat:not(:first-child) { display: none; }
}
@media (min-width: 700px) {
  .hm-phone { display: none; }
  .hm-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1000px) { .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-s12 { grid-column: 1 / -1; } }
@media (min-width: 1200px) {
  .hm-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hm-s3 { grid-column: span 3; } .hm-s4 { grid-column: span 4; } .hm-s5 { grid-column: span 5; } .hm-s7 { grid-column: span 7; } .hm-s12 { grid-column: span 12; }
}
.hm-grid > div { display: flex; min-width: 0; }
.hm-grid > div > * { flex: 1 1 auto; min-width: 0; }
.hm-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: var(--r-xl); background: var(--card); }
.hm-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hm-h h3 { font: 600 17px var(--font-display); letter-spacing: -0.01em; }
.hm-h .linkish.edit { margin-left: 0; }
/* конвейер: этапы слева направо, ширина — сколько там нарядов */
.hm-track { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.hm-seg { flex: 1 1 0; min-width: 92px; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.hm-seg i { display: block; height: 14px; border-radius: 7px; background: var(--accent); transition: filter .15s; }
.hm-seg.clinic i { background: var(--warn); }
.hm-seg b { font: 600 24px/1 var(--font-display); letter-spacing: -0.03em; }
.hm-seg span { font-size: 12.5px; color: var(--ink-2); }
.hm-seg:hover i { filter: brightness(1.15); }
/* карта зубов — главная картинка дашборда */
.hm-teeth { align-items: stretch; }
.hm-arch { position: relative; width: 100%; max-width: 460px; margin: 0 auto; }
.hm-arch svg { display: block; width: 100%; height: auto; }
.hm-arch .th rect { fill: var(--field); stroke: var(--line); stroke-width: 1; transition: stroke .15s; }
.hm-arch .th.on rect { fill: var(--accent); stroke: none; }
.hm-arch .th:hover rect { stroke: var(--ink); stroke-width: 1.6; }
.hm-arch text { font: 600 10.5px var(--font-display); fill: var(--ink-2); text-anchor: middle; pointer-events: none; }
.hm-arch .th.on text { fill: var(--accent-ink); }
.hm-arch .th.on text.lt { fill: #fff; }
.hm-arch-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.hm-arch-c b { font: 600 46px/1 var(--font-display); letter-spacing: -0.04em; }
.hm-arch-c span { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.hm-legend { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
.hm-legend i { width: 18px; height: 10px; border-radius: 3px; background: var(--accent); }
.hm-legend i:first-of-type { margin-left: 6px; } .hm-legend i:last-of-type { margin-right: 6px; }
/* списки на главной: сдачи, клиники, лаборатории */
.hm-list { display: flex; flex-direction: column; }
.hm-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line-soft); background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.hm-row:first-child { border-top: 0; }
.hm-row b, .hm-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row b { font-size: 14.5px; font-weight: 600; }
.hm-row small { font-size: 12.5px; color: var(--ink-2); }
.hm-row:hover b { color: var(--accent-ink); }
.hm-date { flex: none; min-width: 96px; padding: 6px 10px; border-radius: 10px; background: var(--field); font-size: 12.5px; font-weight: 600; text-align: center; }
.hm-date.warn { background: var(--warn-soft); color: var(--warn-ink); }
.hm-date.accent { background: var(--accent-soft); color: var(--accent-ink); }
.hm-sum { flex: none; text-align: right; font-weight: 600; white-space: nowrap; }
.hm-sum small { font-weight: 500; }
.hm-sum .warn { color: var(--warn-ink); }
.hm-feed { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.hm-feed li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.hm-feed li:first-child { border-top: 0; }
.hm-feed time { padding-top: 1px; font-size: 12.5px; color: var(--ink-2); }
.hm-feed .linkish { margin: 0; padding: 0; }
.hm-feed .linkish:hover b { color: var(--accent-ink); }
.hm-team { display: flex; flex-direction: column; gap: 12px; }
.hm-team .ad-meter { margin: 6px 0 4px; }
.hm-bars rect { fill: var(--accent); }
.hm-bars .t { font: 11px var(--font-text); fill: var(--ink-2); }
.hm-bars svg { display: block; max-width: 100%; height: auto; }
.ad-chart svg { max-width: 100%; }

/* ---------- настройки ---------- */
.set { max-width: 1240px; }
.set-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.set-role.on b { color: var(--accent-ink); }

/* ---------- LabFrame: своя марка и свои цвета, как в его приложении ---------- */
.lfp { max-width: 1120px; }
.lf-hero { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 4vw, 44px); border-radius: var(--r-xl); color: #0F1221;
  background: #FFFFFF radial-gradient(520px 300px at 92% 8%, rgba(165, 188, 217, .55), transparent 70%); box-shadow: inset 0 0 0 1px rgba(15, 18, 33, .06); }
.lf-brand { display: flex; align-items: center; gap: 18px; color: #0F1221; }
.lf-brand b { display: block; font: 600 32px/1.1 var(--font-display); letter-spacing: -0.03em; }
.lf-brand span { font-size: 14px; color: #53565D; }
.lf-hero p { max-width: 560px; font-size: 18px; line-height: 1.45; color: #343844; }
.lf-steps { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .lf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lf-steps .card { display: flex; flex-direction: column; gap: 6px; }
.lf-n { width: 28px; height: 28px; border-radius: 50%; background: #A5BCD9; color: #0F1221; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.plan:disabled { opacity: .45; cursor: default; }
/* наряды внутри карточки главной — компактно, в две строки, на любой ширине экрана */
.hm-card .order { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "no what due" "no state go"; align-items: center; padding: 12px 14px; background: var(--field); }
.hm-card .order .whom { display: none; }
.hm-card .order .sub .where { display: inline; }
.hm-card .order .due { text-align: right; }
.hm-card .order .go { min-height: 40px; }
@media (max-width: 699px) {
  .viewer-bar { font-size: 13px; }
  .viewer-bar .grow { flex-basis: calc(100% - 30px); }
}