/* riderOK: оформление «дорогой продукт» (только экран, печать не трогаем).
   Принципы: тёплый нейтральный фон, графитовые чернила как главный цвет (кнопки, шапки таблиц, акценты), один живой индиго —
   только для фокуса и логотипа; тонкие линии вместо теней и заливок, крупная плотная типографика, много воздуха.
   Цвета статусов (зелёный/янтарный/красный/синий) остаются — они несут смысл. Всё на переменных. */
@media screen {
:root {
  --bg: #f7f6f3; --surface: #ffffff; --surface-2: #f0eee9; --hover: #f5f3ef;
  --border: #e8e5de; --border-strong: #d4d0c6;
  --text: #17161c; --text-2: #46444d; --muted: #6b6872;
  --accent: #1b1a21; --accent-hover: #34323d; --accent-fg: #ffffff; --accent-soft: #efece6; --accent-text: #1b1a21;
  --focus: #5b5bd6; --brand: #5b5bd6;
  --r-sm: 10px; --r-md: 12px; --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgb(23 22 28 / .04);
  --shadow-md: 0 1px 2px rgb(23 22 28 / .04), 0 10px 28px -12px rgb(23 22 28 / .16);
  --shadow-lg: 0 28px 56px -16px rgb(23 22 28 / .28);
  --header-bg: rgb(247 246 243 / .82);
  --ring: 0 0 0 4px color-mix(in srgb, var(--focus) 20%, transparent);
  --th-bg: #1b1a21;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e11; --surface: #16161b; --surface-2: #1d1d23; --hover: #1a1a20;
    --border: #26262d; --border-strong: #393942;
    --text: #f0eff3; --text-2: #bdbcc6; --muted: #8f8e99;
    --accent: #f1f0f4; --accent-hover: #ffffff; --accent-fg: #14131a; --accent-soft: #22222a; --accent-text: #f1f0f4;
    --focus: #8b8cf0; --brand: #8b8cf0;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-md: 0 1px 2px rgb(0 0 0 / .4), 0 12px 28px -12px rgb(0 0 0 / .7);
    --header-bg: rgb(14 14 17 / .8);
    --th-bg: #26262e;
  }
}
:root[data-theme="dark"] {
  --bg: #0e0e11; --surface: #16161b; --surface-2: #1d1d23; --hover: #1a1a20;
  --border: #26262d; --border-strong: #393942;
  --text: #f0eff3; --text-2: #bdbcc6; --muted: #8f8e99;
  --accent: #f1f0f4; --accent-hover: #ffffff; --accent-fg: #14131a; --accent-soft: #22222a; --accent-text: #f1f0f4;
  --focus: #8b8cf0; --brand: #8b8cf0;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-md: 0 1px 2px rgb(0 0 0 / .4), 0 12px 28px -12px rgb(0 0 0 / .7);
  --header-bg: rgb(14 14 17 / .8);
  --th-bg: #26262e;
}

body { background: var(--bg); letter-spacing: -0.003em; }
main { padding-top: var(--sp-6); }

/* шапка и логотип */
.top { background: var(--header-bg); border-bottom: 1px solid var(--border); box-shadow: none; }
.logo { font-size: 23px; font-weight: 760; letter-spacing: -0.045em; }
.logo b, h1 b { color: var(--brand); background: none; -webkit-text-fill-color: currentColor; }
nav button, nav a.btn { color: var(--text-2); }
h1 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
h2 { font-weight: 660; letter-spacing: -0.025em; font-size: 20px; }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 600; color: var(--muted); }
.sub, .muted, .list-sub { color: var(--muted); }
.crumbs a { color: var(--muted); }

/* кнопки: чернильная главная, остальные — белые с тонкой линией */
button, .btn { border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
  font-weight: 540; letter-spacing: -0.01em; transition: background .15s, border-color .15s, box-shadow .15s, transform .08s, color .15s; }
button:hover, .btn:hover { background: var(--surface); border-color: var(--text); box-shadow: var(--shadow-sm); color: var(--text); }
button:active, .btn:active { transform: translateY(1px); box-shadow: none; }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 8px 18px -10px rgb(23 22 28 / .55); text-shadow: none; filter: none; }
button.primary:hover, .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); filter: none; transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 12px 22px -10px rgb(23 22 28 / .6); }
button.primary:active, .btn.primary:active { transform: translateY(0); }
button.danger, .btn.danger { color: var(--danger); border-color: var(--border-strong); }
button.danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
button.link, .btn.link, nav button, nav a.btn { background: none; border-color: transparent; box-shadow: none; }
button.link:hover, nav button:hover, nav a.btn:hover { background: var(--surface-2); border-color: transparent; }
button.small, .btn.small { border-radius: 10px; font-weight: 520; }
button.ok { background: var(--st-ok-bg); border-color: var(--st-ok-bd); color: var(--st-ok-fg); box-shadow: none; }
button.ok:hover { border-color: var(--st-ok-fg); }
button.bring.on { background: var(--st-bad-bg); border-color: var(--st-bad-bd); color: var(--st-bad-fg); }

/* поля */
input, select, textarea { border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); box-shadow: none; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--text) 45%, var(--border-strong)); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); box-shadow: var(--ring); }
label { font-weight: 540; color: var(--text-2); }

/* карточки */
.card, .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5); }
@media (max-width: 700px) { .card, .stat { padding: var(--sp-4); } }
a.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card .title { letter-spacing: -0.015em; }
.kind-ic { background: var(--surface-2); color: var(--text); border-radius: 11px; width: 36px; height: 36px; box-shadow: none; border: 1px solid var(--border); }
.avatar { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); font-weight: 650; }
.cc-date { background: var(--surface-2); border-radius: 12px; }
.empty-state { border-color: var(--border-strong); border-radius: var(--r-lg); background: transparent; }
.preview { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }

/* чипы статусов: тонкие, спокойные */
.chip { padding: 4px 10px 4px 8px; font-weight: 570; letter-spacing: -0.005em; box-shadow: none; font-size: 12.5px; }
.chip.plain { color: var(--muted); }

/* вкладки */
.tabs, .seg { background: var(--surface-2); border-radius: 13px; box-shadow: none; padding: 4px; border: 1px solid var(--border); }
.tab, .seg button { border-radius: 9px; font-weight: 530; color: var(--text-2); background: transparent; border: 0; box-shadow: none; }
.tab:hover, .seg button:hover { background: transparent; color: var(--text); }
.tab.on, .seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(23 22 28 / .1), 0 0 0 1px var(--border); font-weight: 620; }

/* таблицы */
.ptable-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); background: var(--surface); }
.ptable th { background: var(--th-bg); color: #fff; border: 0; border-right: 1px solid rgb(255 255 255 / .1); text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; font-weight: 620; padding: 12px 10px; text-shadow: none; }
.ptable td { border-color: var(--border); padding: 11px 12px; }
.ptable tr.p-sec td { background: var(--accent-soft); color: var(--text); box-shadow: none; padding: 12px; font-weight: 680; font-size: 15px; letter-spacing: -0.015em; border-top: 1px solid var(--border-strong); }
.ptable tr.p-item:hover td { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.ptable tr.p-item:hover td:first-child { box-shadow: 3px 0 0 var(--brand) inset; padding-left: 14px; }
.ptable tr.p-note td { color: var(--text-2); }
@media (min-width: 900px) { .asheet { border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); background: var(--surface); } }
.asheet .ahead { background: var(--th-bg) !important; color: #fff !important; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; font-weight: 620; }
.asheet .ahead > div { padding: 12px 10px; }
.asheet .asec { background: var(--accent-soft); color: var(--text); box-shadow: none; font-size: 15px; font-weight: 680; border-color: var(--border); }
.asheet .asec .chip { background: var(--surface); }
.arow.item:hover, .arow.item:focus-within { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
@media (max-width: 899px) {
  .asheet .asec { border-radius: var(--r-md); border: 1px solid var(--border); }
  .arow.item { border-radius: var(--r-lg); border-color: var(--border); box-shadow: var(--shadow-sm); }
}
.bar > span { background: var(--text); }
.ptable th, .asheet .ahead > div { white-space: nowrap; }

/* решения артиста */
.dec-btn { border-radius: 10px; }
.dec-btn.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.dec-btn[data-dec="approved"].on { background: var(--st-ok-bg); color: var(--st-ok-fg); border-color: var(--st-ok-bd); }
.dec-btn[data-dec="replace"].on { background: var(--st-warn-bg); color: var(--st-warn-fg); border-color: var(--st-warn-bd); }
.dec-btn[data-dec="drop"].on { background: var(--st-none-bg); color: var(--st-none-fg); border-color: var(--st-none-bd); }
.dec-btn[data-dec="approved"]:hover { border-color: var(--st-ok-fg); color: var(--st-ok-fg); }
.dec-btn[data-dec="replace"]:hover { border-color: var(--st-warn-fg); color: var(--st-warn-fg); }
.dec-btn[data-dec="drop"]:hover { border-color: var(--danger); color: var(--danger); }
.dec-closed .chip { box-shadow: none; }
.submitbar { box-shadow: 0 -12px 32px -18px rgb(23 22 28 / .3); background: var(--header-bg); border-top: 1px solid var(--border); }
a { color: var(--text); text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); }
a:hover { text-decoration-color: var(--text); }
a.btn, a.card, .logo, .crumbs a, nav a { text-decoration: none; }

/* окно выбора (выгрузка в Excel) */
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgb(23 22 28 / .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.modal { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.modal .title { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.modal p { margin: 0; }

/* «Везём сами»: свой цвет (синий), чтобы не сливалось с разделами и серым фоном */
.ptable tr.p-ownrow td { background: color-mix(in srgb, var(--st-info-bg) 65%, var(--surface)); }
.ptable tr.p-ownrow:hover td { background: var(--st-info-bg); }
.ptable tr.p-ownrow td:first-child { box-shadow: 3px 0 0 var(--st-info-fg) inset; padding-left: 14px; }
.ptable .p-own { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: var(--r-pill); background: var(--st-info-bg); color: var(--st-info-fg); border: 1px solid var(--st-info-bd); font-weight: 640; font-size: 13px; }
.chip.own { background: var(--st-info-bg); color: var(--st-info-fg); border-color: var(--st-info-bd); }
.arow.item.own { background: color-mix(in srgb, var(--st-info-bg) 55%, var(--surface)); border-left: 3px solid var(--st-info-fg); }
@media (min-width: 900px) { .arow.item.own { background: color-mix(in srgb, var(--st-info-bg) 55%, var(--surface)); border-left: 0; box-shadow: 3px 0 0 var(--st-info-fg) inset; } }

/* «Согласовано» — зелёным */
.ptable tr.p-approved td { background: color-mix(in srgb, var(--st-ok-bg) 70%, var(--surface)); }
.ptable tr.p-approved:hover td { background: var(--st-ok-bg); }
.ptable tr.p-approved td:first-child { box-shadow: 3px 0 0 var(--st-ok-fg) inset; padding-left: 14px; }
.arow.item.locked.approved { background: color-mix(in srgb, var(--st-ok-bg) 60%, var(--surface)); border-left: 3px solid var(--st-ok-fg); }
@media (min-width: 900px) { .arow.item.locked.approved { border-left: 0; box-shadow: 3px 0 0 var(--st-ok-fg) inset; } }
.ptable tr.p-ownrow:hover td:first-child { box-shadow: 3px 0 0 var(--st-info-fg) inset; }
.ptable tr.p-approved:hover td:first-child { box-shadow: 3px 0 0 var(--st-ok-fg) inset; }
/* многострочные ячейки: выглядят как поле ввода, растут по высоте (Cmd/Ctrl+Enter — новая строка) */
textarea.cellta { min-height: var(--tap); resize: none; overflow: hidden; line-height: 1.4; padding: 10px 12px; }
@media (min-width: 900px) { textarea.cellta { min-height: 36px; padding: 7px 8px; } }
/* «Как начать» */
.howto summary { cursor: pointer; font-weight: 620; display: flex; align-items: center; gap: var(--sp-2); list-style: none; min-height: 28px; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.howto[open] summary::after { transform: rotate(180deg); }
.howto ol { margin: var(--sp-3) 0 0; padding-left: 22px; display: grid; gap: var(--sp-2); color: var(--text-2); }
.howto li::marker { color: var(--muted); font-weight: 600; }
.howto li b { color: var(--text); }
/* «Контакты»: карточки людей и кнопки не наезжают друг на друга */
.cgrid { gap: var(--sp-3); }
.cgroups > div > .actions { margin-top: var(--sp-3); }
.pcard { padding: var(--sp-4); gap: var(--sp-3); }
.pcard .who { gap: var(--sp-3); }
.pcard .pact { gap: var(--sp-2); }
.pcard .pact button { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
@media (max-width: 700px) { .pcard .pact button { min-height: 40px; } }
}

/* базовый райдер артиста */
.sync-modal { max-width: 560px; max-height: 85vh; overflow: auto; }
.sync-row { display: flex; justify-content: flex-start; gap: 12px; align-items: flex-start; cursor: pointer; }
.sync-row input[type=checkbox] { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.base-panel .notice { margin: 12px 0; }

/* диалоги подтверждения и ввода (ask / askText / askChoice в ui.js) */
.dlg-back { z-index: 100; animation: dlg-fade .12s ease-out; }
.dlg { width: min(400px, 100%); animation: dlg-pop .14s ease-out; }
.dlg .dlg-text { line-height: 1.5; }
.dlg-btns { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.dlg-btns button { width: 100%; min-height: 48px; }
.dlg-btns .link { min-height: 44px; }
@media (min-width: 640px) { .dlg-btns:not(.dlg-choices) { flex-direction: row-reverse; } .dlg-btns:not(.dlg-choices) button { width: auto; flex: 1; } }
@keyframes dlg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlg-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dlg-back, .dlg { animation: none; } }

/* «Мои входы» */
.sess-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.sess-info { min-width: 0; flex: 1 1 220px; }
.sess-info .title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* бренд: знак в шапке и на экране входа */
.logo { gap: 9px; }
.logo-mark { display: block; width: 30px; height: 30px; border-radius: 8px; flex: none; }
.hero { text-align: left; }
.hero-mark { display: block; width: 72px; height: 72px; border-radius: 20px; margin: 0 0 16px; box-shadow: 0 8px 24px rgba(91, 91, 214, .28); }
.hero h1 { letter-spacing: -0.03em; line-height: 1.12; }
.hero-h { font-size: clamp(30px, 8.4vw, 42px); font-weight: 780; letter-spacing: -0.04em; line-height: 1.06; }
.hero-points { list-style: none; counter-reset: hp; margin: 22px 0 22px; padding: 0; border-top: 1px solid var(--border, rgba(127,127,127,.25)); }
.hero-points li { counter-increment: hp; display: grid; grid-template-columns: 32px 1fr auto; gap: 0 8px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border, rgba(127,127,127,.25)); font-size: 17px; }
.hero-points li::before { content: counter(hp, decimal-leading-zero); font-size: 12px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.hero-points b { color: var(--text); font-weight: 680; letter-spacing: -0.01em; }
.hp-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 750; letter-spacing: .04em; color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); border-radius: 999px; padding: 4px 10px 4px 8px; }
.hp-ok::before { content: ""; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-1px) rotate(-45deg); }

/* вход: текст и кнопка Telegram по центру карточки */
.login-box { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 8px 0; }
.login-box p { margin: 0; }
.login-box iframe { display: block; margin: 0 auto; }

/* riderOK: согласие и политика данных */
.consent-line { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; font-size: 14px; line-height: 1.4; }
.consent-line input { width: 22px; height: 22px; flex: none; margin: 0; }
.legal-note { font-size: 13px; margin-top: 12px; }
footer a { color: inherit; }

/* riderOK: спокойный интерфейс — второстепенное свёрнуто */
.more > summary, .more-block > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--text-2); font-weight: 560; }
.more > summary::-webkit-details-marker, .more-block > summary::-webkit-details-marker { display: none; }
.more > summary::after, .more-block > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.more[open] > summary::after, .more-block[open] > summary::after { transform: rotate(180deg); }
.more { margin-top: var(--sp-2); border-top: 1px solid var(--border); }
.more > summary { font-size: 14px; font-weight: 500; }
.more-block { margin-top: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0 var(--sp-4); margin-bottom: var(--sp-3); }
.more-block[open] { padding-bottom: var(--sp-3); }
.more-block > .card, .more-block > details > .card { border: 0; box-shadow: none; padding: 0; background: transparent; margin-bottom: var(--sp-2); }
.more-block h2 { font-size: 16px; margin: var(--sp-4) 0 var(--sp-2); }
.welcome { padding-top: var(--sp-4); }
.welcome-steps { list-style: none; margin: var(--sp-5) 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); color: var(--text-2); }
.welcome-steps li { display: flex; gap: var(--sp-3); align-items: center; }
.welcome-steps .wn { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2, rgba(127,127,127,.15)); display: grid; place-items: center; font-weight: 650; font-size: 14px; color: var(--text); }

/* таблица проката: меньше подписей на телефоне, редкие кнопки — в меню */
@media (max-width: 899px) { .asheet .aline .lbl, .asheet .af-comment .lbl { display: none; } }
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: "▾"; margin-left: 6px; color: var(--muted); }
.menu-body { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 220px; display: grid; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.14)); }
.menu-body .btn, .menu-body button { justify-content: flex-start; width: 100%; }
@media print { .menu { display: none; } }
@media (max-width: 899px) { .asheet .abtns { flex-wrap: nowrap; } .asheet .abtns button { flex: 1 1 0; padding-inline: 6px; white-space: nowrap; font-size: 14px; min-width: 0; } .asheet .abtns .ok { flex: 0 0 64px; } }

/* телефон, таблица согласования: подпись и значение в одной строке — карточка позиции вдвое короче */
@media screen and (max-width: 700px) {
  .ptable.has-ans td[data-label]:not(.dec):not(.p-name) { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: baseline; }
  .ptable.has-ans td[data-label]:not(.dec)::before { margin: 0; }
  .ptable.has-ans td.dec::before { display: none; }
}
.rounds-history, .contacts-block { padding-top: 0; padding-bottom: 0; }
.rounds-history[open], .contacts-block[open] { padding-bottom: var(--sp-3); }
.rounds-history > summary, .contacts-block > summary { min-height: 52px; display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }

/* ссылка проката — компактная строка */
.rental-card { padding: var(--sp-3) var(--sp-4); }
.rent-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.rent-acts { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.rent-row .menu-body { right: 0; left: auto; min-width: 260px; }
.rent-row .link-box { font-size: 12px; word-break: break-all; margin: 0; }

/* вкладка StagePlan: схема — крупная кнопка «Открыть», остальное в меню */
.card.sp-card { display: flex; align-items: center; padding-right: var(--sp-3); }
.sp-card .sp-main { flex: 1; min-width: 0; min-height: 80px; }
.sp-open { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent, var(--text)); flex: none; }
.sp-open .ic.flip { margin-left: 0; }
.sp-menu .menu-body { right: 0; left: auto; }
@media (max-width: 520px) { .sp-open { font-size: 0; gap: 0; } .sp-open .ic { font-size: 16px; } }
.card.sp-card { overflow: visible; }
.sp-dots { min-width: 44px; justify-content: center; font-size: 22px; line-height: 1; padding: 0 10px; }
.sp-menu > .sp-dots::after { display: none; }
.sp-menu .menu-body { min-width: 250px; }
.sp-menu .menu-body button { white-space: nowrap; }
.rent-acts { flex-wrap: nowrap; }
.rent-acts > button, .rent-acts > details > summary { padding-inline: 12px; flex: none; }

/* календарь концертов на главной */
.cal { padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.cal-title { text-transform: capitalize; font-size: 17px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { margin-bottom: 2px; }
.cal-wd span { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal-day { position: relative; display: grid; place-items: center; min-height: 44px; border-radius: var(--r-md, 10px); font: inherit; color: var(--text-2); background: transparent; border: 0; padding: 0; }
.cal-day b { font-weight: 500; font-size: 15px; }
.cal-day.today b { color: var(--accent, var(--text)); font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.cal-day.has { background: var(--surface-2, rgba(127,127,127,.12)); color: var(--text); cursor: pointer; }
.cal-day.has b { font-weight: 700; }
.cal-day.has i { position: absolute; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #6d5bd0); }
.cal-day.on { outline: 2px solid var(--accent, #6d5bd0); }
.cal-list { display: grid; gap: 6px; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.cal-item { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md, 10px); background: var(--surface-2, rgba(127,127,127,.1)); color: inherit; text-decoration: none; }
@media (min-width: 900px) { .cal { max-width: 460px; } }

/* цвета артистов в календаре и на карточках концертов */
.cal-day.has { background: color-mix(in srgb, var(--ac, var(--accent)) 16%, transparent); }
.cal-day.on { outline-color: var(--ac, var(--accent)); }
.cal-dots { position: absolute; bottom: 5px; display: flex; gap: 3px; }
.cal-dots i { position: static; width: 6px; height: 6px; border-radius: 50%; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.cal-key { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.cal-key i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cal-item { border-left: 4px solid var(--ac, var(--accent)); }
a.card.cc { border-left: 4px solid var(--ac, var(--border)); }

/* главная: календарь и артисты слева, концерты справа; на телефоне — календарь, концерты, артисты */
.home-grid { display: grid; gap: var(--sp-3); grid-template-areas: "cal" "main" "side"; }
.home-cal { grid-area: cal; } .home-main { grid-area: main; } .home-side { grid-area: side; }
.home-grid .card { margin-bottom: var(--sp-3); }
.home-side h2 { margin-top: var(--sp-4); }
@media (min-width: 900px) {
  .home-grid { grid-template-columns: 380px minmax(0, 1fr); grid-template-areas: "cal main" "side main"; gap: 0 var(--sp-5); align-items: start; }
  .cal { max-width: none; }
  .home-cal, .home-side { min-width: 0; }
}
.avatar[style*="--ac"] { background: color-mix(in srgb, var(--ac) 18%, var(--surface)); color: color-mix(in srgb, var(--ac) 80%, var(--text)); }
a.card.cc { padding: var(--sp-3) var(--sp-4); }
.home-grid > * { min-width: 0; }
@media (min-width: 900px) { .home-grid { grid-template-rows: auto 1fr; } }
.chips .chip { max-width: 100%; white-space: normal; height: auto; min-height: 24px; text-align: left; }
.cal-grid:not(.cal-wd) { grid-auto-rows: 44px; }
.past-block { margin-top: var(--sp-4); }
.past-block > a.card.cc { margin: 0 0 var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--ac, var(--border)); box-shadow: none; padding: var(--sp-3); }

/* шаги согласования */
[hidden] { display: none !important; }
.stepper { list-style: none; display: flex; gap: 6px; margin: 0 0 var(--sp-3); padding: 0; }
.stepper li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-top: 8px; border-top: 3px solid var(--border); color: var(--muted); font-size: 13px; }
.stepper li.done { border-top-color: var(--st-ok-fg, #05603a); color: var(--text-2); }
.stepper li.now { border-top-color: var(--accent); color: var(--text); font-weight: 650; }
.stepper .sn { display: none; }
.stepper .sl { line-height: 1.2; }
@media (min-width: 700px) { .stepper li { flex-direction: row; align-items: center; gap: 8px; } .stepper .sn { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); font-size: 12px; flex: none; } .stepper li.done .sn { background: var(--st-ok-bg); color: var(--st-ok-fg); } .stepper li.now .sn { background: var(--accent); color: var(--accent-fg); } }

/* поиск и фильтры таблицы */
.tfilters { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: 0 0 var(--sp-2); }
.tfilter { flex: 1 1 200px; max-width: 360px; }
.tfilter-in { width: 100%; min-height: 40px; }
button[aria-pressed="true"].on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.only-unresolved tr.p-item:not([data-unresolved]) { display: none; }

/* метка сохранения: плашка вверху справа */
.save-state[data-state="ok"], .save-state[data-state="busy"], .save-state[data-state="err"] { position: fixed; z-index: 30; top: calc(var(--header-h, 56px) + 10px); right: 16px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.14)); border: 1px solid transparent; }
.save-state[data-state="ok"] { background: var(--st-ok-bg); color: var(--st-ok-fg); border-color: var(--st-ok-bd); animation: savefade 3.5s forwards; }
.save-state[data-state="busy"] { background: var(--st-warn-bg); color: var(--st-warn-fg); border-color: var(--st-warn-bd); }
.save-state[data-state="err"] { background: var(--st-bad-bg); color: var(--st-bad-fg); border-color: var(--st-bad-bd); }
@keyframes savefade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media print { .save-state, .stepper, .tfilters { display: none !important; } }
.only-empty .arow.item:not([data-status="empty"]), .only-empty .arow.note { display: none; }

/* «Нужно ваше внимание» и прогресс концерта */
.attn-card { border-color: var(--st-warn-bd); background: color-mix(in srgb, var(--st-warn-bg) 55%, var(--surface)); }
.attn-card .title { margin-bottom: var(--sp-2); }
.attn-item { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--st-warn-bd) 60%, transparent); color: inherit; text-decoration: none; min-height: 52px; }
.attn-item span { flex: 1; display: grid; gap: 2px; min-width: 0; }
.attn-item.hot b { color: var(--accent-text); }
.attn-item .ic.flip { margin-left: auto; color: var(--muted); flex: none; }
.cprog { display: flex; align-items: center; gap: var(--sp-2); margin: 6px 0 2px; font-size: 13px; color: var(--text-2); }
.cprog .bar { flex: 0 0 90px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.cprog .bar i { display: block; height: 100%; background: var(--st-ok-fg, #05603a); }