/* Напарник — Telegram Mini App styles */
:root {
  --bg: #0b0b0c;
  --card: #161618;
  --card-2: #212124;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --text: #f5f5f2;
  --muted: #8d8d93;
  --muted-2: #626268;
  --accent: #ffc400;
  --accent-2: #ffdd55;
  --accent-text: #0b0b0c;
  --accent-soft: rgba(255, 196, 0, 0.12);
  --red: #ff5a4e;
  --red-soft: rgba(255, 90, 78, 0.13);
  --green: #3ddc84;
  --green-soft: rgba(61, 220, 132, 0.13);
  --blue: #5aa9ff;
  --blue-soft: rgba(90, 169, 255, 0.14);
  --orange: #ff9a1f;
  --orange-soft: rgba(255, 154, 31, 0.14);
  --violet: #b48cff;
  --violet-soft: rgba(180, 140, 255, 0.15);
  --tabbar-bg: rgba(14, 14, 16, 0.86);
  --input-bg: #111113;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  --glow: 0 8px 28px rgba(255, 196, 0, 0.28);
  --checker: repeating-conic-gradient(#0b0b0c 0 25%, #ffc400 0 50%) 0 0 / 12px 12px;
  --radius: 18px;
  --radius-sm: 12px;
  --tabbar-h: 70px;
  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --safe-t: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f2f1ec;
  --card: #ffffff;
  --card-2: #f0efe9;
  --border: rgba(15, 15, 15, 0.08);
  --border-strong: rgba(15, 15, 15, 0.16);
  --text: #111112;
  --muted: #6c6c70;
  --muted-2: #919196;
  --accent: #ffc400;
  --accent-2: #ffd633;
  --accent-text: #0b0b0c;
  --accent-soft: rgba(255, 180, 0, 0.16);
  --red: #e23b30;
  --red-soft: rgba(226, 59, 48, 0.1);
  --green: #13a35a;
  --green-soft: rgba(19, 163, 90, 0.12);
  --blue: #1f6fd6;
  --blue-soft: rgba(31, 111, 214, 0.1);
  --orange: #d17300;
  --orange-soft: rgba(209, 115, 0, 0.12);
  --violet: #7a4fe0;
  --violet-soft: rgba(122, 79, 224, 0.1);
  --tabbar-bg: rgba(255, 255, 255, 0.9);
  --input-bg: #f7f6f2;
  --shadow: 0 12px 30px rgba(20, 20, 20, 0.08);
  --glow: 0 8px 24px rgba(255, 170, 0, 0.35);
  color-scheme: light;
}
/* lime text on white is unreadable: darker "lime" for text in light theme */
:root[data-theme="light"] .lime,
:root[data-theme="light"] .rank.top,
:root[data-theme="light"] .link-accent,
:root[data-theme="light"] .tab.active { color: #9a6200; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
svg.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Page ---------- */
.page {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(18px + var(--safe-t)) 16px calc(var(--tabbar-h) + var(--safe-b) + 28px);
  min-height: 100vh;
}
body.has-sticky .page { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 100px); }
body.no-tabbar .page { padding-bottom: calc(var(--safe-b) + 28px); }
body.no-tabbar.has-sticky .page { padding-bottom: calc(var(--safe-b) + 100px); }

.theme-btn {
  position: absolute;
  top: calc(14px + var(--safe-t));
  right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  display: grid; place-items: center;
  z-index: 20;
}
.theme-btn svg.i { width: 19px; height: 19px; }
@media (min-width: 592px) { .theme-btn { right: calc(50% - 264px); } }

.topbar { min-height: 44px; display: flex; align-items: center; padding-right: 56px; margin-bottom: 6px; }
.back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 0;
  color: var(--muted); font-weight: 600; font-size: 16px;
}
.back svg.i { width: 18px; height: 18px; }

h1.title { font-size: 28px; line-height: 1.15; font-weight: 800; margin: 8px 0 6px; padding-right: 56px; letter-spacing: -0.2px; overflow-wrap: anywhere; }
.topbar + h1.title { padding-right: 0; margin-top: 4px; }
.subtitle { color: var(--muted); margin: 0 0 18px; font-size: 15px; }
h2.section { font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin: 22px 4px 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.lime { color: var(--accent); }
.red { color: var(--red); }
.green { color: var(--green); }
.center { text-align: center; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
.stack > * + * { margin-top: 12px; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.spacer { flex: 1; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.card.tap { cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.card.tap:active { transform: scale(0.985); }
.card.hl { border-color: var(--accent); }
.card-title { font-weight: 700; font-size: 17px; margin: 0 0 6px; }
.card-text { color: var(--muted); margin: 0 0 10px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.divider { height: 1px; background: var(--border-strong); margin: 14px 0; opacity: .7; }

.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; }
.kv .k { color: var(--muted); min-width: 0; }
.kv .v { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.kv.total { padding-top: 4px; }
.kv.total .k { color: var(--text); font-weight: 700; font-size: 18px; }
.kv.total .v { font-size: 28px; font-weight: 800; color: var(--accent); }

.big-pair { display: flex; justify-content: space-between; gap: 12px; }
.big-pair > div:last-child { text-align: right; }
.big-pair .lbl { color: var(--muted); font-size: 14px; }
.big-pair .num { font-size: 26px; font-weight: 800; line-height: 1.2; white-space: nowrap; }

/* history card */
.hist-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hist-date { font-weight: 700; font-size: 17px; }
.hist-dur { color: var(--muted); font-size: 14px; white-space: nowrap; }
.hist-sub { color: var(--muted); margin-top: 6px; }
.hist-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid var(--border-strong); margin-top: 12px; padding-top: 12px; }
.hist-nums .lbl { color: var(--muted); font-size: 14px; }
.hist-nums .num { font-weight: 800; font-size: 19px; white-space: nowrap; }

/* list rows */
.row {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 12px; width: 100%; text-align: left;
}
.row.tap { cursor: pointer; }
.row.tap:active { transform: scale(0.985); }
.row .ico {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--card-2); display: grid; place-items: center; color: var(--text);
}
.row .body { flex: 1; min-width: 0; }
.row .t { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
.row .s { color: var(--muted); font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }
.row .end { color: var(--muted); flex: none; display: flex; align-items: center; gap: 8px; }
.row .amt { font-weight: 800; color: var(--text); white-space: nowrap; }
.row.alert { border-color: rgba(255, 196, 0, 0.35); }
.row.alert .ico { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="light"] .row.alert .ico { color: #9a6200; }
.count-pill { background: var(--accent); color: var(--accent-text); font-weight: 800; border-radius: 999px; padding: 2px 10px; font-size: 14px; }

/* rating */
.rank-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.rank-row.me { border-color: var(--accent); background: linear-gradient(0deg, var(--accent-soft), var(--accent-soft)), var(--card); }
.rank { width: 38px; font-weight: 800; font-size: 19px; color: var(--muted); flex: none; }
.rank.top { color: var(--accent); }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--card-2); color: var(--muted); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.rank-name { flex: 1; min-width: 0; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-amt { font-weight: 800; white-space: nowrap; text-align: right; }

/* tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.tile {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  text-align: left; font-weight: 700; min-height: 96px;
}
.tile .ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); }
.tile:active { transform: scale(0.98); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 20px; border-radius: 18px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  font-weight: 700; font-size: 16px; width: 100%; text-align: center;
  transition: opacity .15s ease, transform .1s ease;
}
.btn:active { transform: scale(0.985); }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn.danger { color: var(--red); border-color: rgba(240, 98, 98, 0.4); }
.btn.danger-fill { background: var(--red); color: #fff; border-color: var(--red); }
.btn.soft { background: var(--card-2); border-color: transparent; }
.btn.sm { min-height: 40px; padding: 8px 14px; font-size: 14px; border-radius: 14px; width: auto; }
.btn.auto { width: auto; }
.btn[disabled], .btn.busy { opacity: .55; pointer-events: none; }
.btn.busy::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row > .btn { flex: 1 1 140px; }
.pill-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--text);
  padding: 10px 18px; border-radius: 999px; font-weight: 700; margin-bottom: 16px;
}
.pill-btn.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.link-accent { color: var(--accent); background: none; border: 0; padding: 4px 0; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.link-accent svg.i { width: 16px; height: 16px; }

/* segmented */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.seg button {
  min-height: 50px; border-radius: 16px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--muted); font-weight: 700; font-size: 15px; padding: 6px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.seg.scroll { display: flex; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
.seg.scroll::-webkit-scrollbar { display: none; }
.seg.scroll button { flex: none; padding: 6px 16px; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  border: 1px solid var(--border-strong); background: var(--card); color: var(--text);
  border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.sched-chip { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; min-width: 112px; flex: none; }
.sched-chip .d { font-weight: 700; }
.sched-chip .t { font-size: 13px; margin-top: 2px; }
.hscroll { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 4px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--card-2); color: var(--muted); }
.badge.lime { background: var(--accent-soft); color: var(--accent); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.blue { background: var(--blue-soft); color: var(--blue); }
.badge.orange { background: var(--orange-soft); color: var(--orange); }
.badge.violet { background: var(--violet-soft); color: var(--violet); }
:root[data-theme="light"] .badge.lime { color: #9a6200; }

/* car pick */
.car-card { display: flex; align-items: center; gap: 12px; }
.car-card .body { flex: 1; min-width: 0; }
.car-card .t { font-weight: 700; font-size: 16px; }
.car-card .s { color: var(--muted); font-size: 14px; }
.car-card.disabled { opacity: .5; cursor: not-allowed; }
.car-card .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; }
.car-card.sel { border-color: var(--accent); }
.car-card.sel .radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 45%, transparent 50%); }

/* ---------- Forms ---------- */
.field { display: block; margin-bottom: 14px; min-width: 0; }
.field > .lbl { display: block; color: var(--muted); font-size: 14px; font-weight: 600; margin: 0 0 6px 4px; }
.field > .hint { display: block; color: var(--muted-2); font-size: 12px; margin: 5px 0 0 4px; }
.inp {
  width: 100%; min-height: 52px; border-radius: 16px; border: 1px solid var(--border-strong);
  background: var(--input-bg); color: var(--text); padding: 13px 16px; font-size: 16px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.inp:focus { border-color: var(--accent); }
.inp::placeholder { color: var(--muted-2); }
textarea.inp { min-height: 110px; resize: vertical; line-height: 1.45; }
select.inp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238f9bab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid2 > .field { margin-bottom: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 16px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 1px 0 0; }
.check span { color: var(--muted); font-size: 14px; }
.form-card { padding: 18px 16px 4px; }

/* preview */
.preview .kv { padding: 5px 0; }

/* ---------- Sticky + Tabbar ---------- */
.sticky {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  padding: 10px 16px 12px;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  z-index: 30;
}
.sticky > * { max-width: 528px; margin: 0 auto; display: flex; }
.sticky .btn { min-height: 56px; font-size: 17px; }
body.no-tabbar .sticky { bottom: 0; padding-bottom: calc(12px + var(--safe-b)); }
.rank-bar { background: var(--accent); color: var(--accent-text); border-radius: 18px; min-height: 56px; display: flex; align-items: center; justify-content: center; font-weight: 800; padding: 10px 16px; text-align: center; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: space-around;
  background: var(--tabbar-bg); border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + var(--safe-b));
  height: calc(var(--tabbar-h) + var(--safe-b));
}
.tab {
  flex: 1; min-width: 0; background: none; border: 0; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; font-weight: 600; padding: 4px 2px; position: relative;
}
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab svg.i { width: 23px; height: 23px; stroke-width: 1.8; }
.tab.active { color: var(--accent); }
.tab .dotn { position: absolute; top: 2px; left: calc(50% + 8px); background: var(--red); color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; }

/* ---------- States ---------- */
.loader { display: grid; place-items: center; padding: 80px 0; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 22px 20px; }
.empty .t { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.empty .s { color: var(--muted); }
.plain-empty { color: var(--muted); text-align: center; padding: 18px 0; }
.error-box { text-align: center; padding: 26px 20px; }
.error-box .t { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.error-box .s { color: var(--muted); margin-bottom: 16px; overflow-wrap: anywhere; }
.gate { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.gate-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 18px; }
.gate-ico svg.i { width: 32px; height: 32px; }
:root[data-theme="light"] .gate-ico { color: #9a6200; }
.skel { background: var(--card); border-radius: var(--radius); height: 110px; margin-bottom: 14px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- Toasts ---------- */
.toasts { position: fixed; top: calc(12px + var(--safe-t)); left: 16px; right: 16px; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { max-width: 480px; width: 100%; background: var(--card-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: 16px; padding: 12px 16px; font-weight: 600; box-shadow: var(--shadow); animation: tin .2s ease; display: flex; gap: 10px; align-items: center; }
.toast.ok { border-color: rgba(255, 196, 0, .5); }
.toast.err { border-color: rgba(240, 98, 98, .6); }
.toast.ok svg.i { color: var(--accent); }
.toast.err svg.i { color: var(--red); }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Chat ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.bubble { max-width: 84%; padding: 10px 14px; border-radius: 18px; overflow-wrap: anywhere; white-space: pre-wrap; }
.bubble .meta { font-size: 11px; color: var(--muted); margin-top: 4px; white-space: normal; }
.bubble.staff { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.bubble.mine { align-self: flex-end; background: var(--accent); color: var(--accent-text); border-bottom-right-radius: 6px; }
.bubble.mine .meta { color: rgba(11, 11, 12, .6); }
.chat-input { display: flex; gap: 10px; align-items: flex-end; width: 100%; }
.chat-input textarea { min-height: 52px; max-height: 140px; flex: 1; }
.chat-input .btn { width: 52px; padding: 0; flex: none; }

/* ---------- Calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head .m { font-weight: 800; font-size: 17px; text-transform: capitalize; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--card); color: var(--text); display: grid; place-items: center; flex: none; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal .wd { text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; padding-bottom: 4px; }
.cal .day {
  aspect-ratio: 1 / 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--card-2); font-weight: 700; font-size: 14px; border: 1px solid transparent; position: relative; padding: 0; min-width: 0;
}
.cal .day.out { visibility: hidden; }
.cal .day.today { border-color: var(--border-strong); }
.cal .day.sel { border-color: var(--accent); }
.cal .day.t-day { background: var(--orange-soft); color: var(--orange); }
.cal .day.t-night { background: var(--blue-soft); color: var(--blue); }
.cal .day.t-full { background: var(--violet-soft); color: var(--violet); }
.cal .day.t-multi { background: var(--accent-soft); }
.cal .day .n { position: absolute; bottom: 3px; font-size: 9px; font-weight: 800; opacity: .85; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.type-day { color: var(--orange); }
.type-night { color: var(--blue); }
.type-full { color: var(--violet); }

/* consent page */
.doc h1 { font-size: 26px; font-weight: 800; line-height: 1.2; margin: 6px 56px 8px 0; }
.doc h2 { font-size: 17px; margin: 22px 0 8px; }
.doc p, .doc li { color: var(--muted); }
.doc strong { color: var(--text); }
.doc ul { padding-left: 20px; }
.doc .card p:last-child { margin-bottom: 0; }

@media (max-width: 370px) {
  h1.title { font-size: 25px; }
  .big-pair .num { font-size: 22px; }
  .kv.total .v { font-size: 24px; }
  .card { padding: 16px; }
  .tab { font-size: 11px; }
  .grid2 { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Photos ---------- */
.photo-field { background: var(--card-2); border: 1px dashed var(--border-strong); border-radius: 16px; padding: 12px; margin-bottom: 14px; }
.photo-field.req { border-color: rgba(255, 196, 0, .45); }
.photo-field.has { border-style: solid; border-color: var(--border-strong); }
.pf-top { display: flex; align-items: center; gap: 12px; }
.pf-top .pf-lbl { flex: 1; min-width: 0; }
.pf-lbl .t { font-weight: 700; font-size: 15px; }
.pf-lbl .s { color: var(--muted); font-size: 13px; }
.pf-thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; background: var(--card); display: grid; place-items: center; overflow: hidden; position: relative; }
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-thumb .spinner { width: 22px; height: 22px; border-width: 2px; position: absolute; }
.pf-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pf-cam { position: relative; overflow: hidden; }
.pf-cam input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 0; }
.pf-hint { font-size: 13px; margin-top: 8px; color: var(--muted); }
.pf-hint.ok { color: var(--accent); }
:root[data-theme="light"] .pf-hint.ok { color: #9a6200; }
.pf-hint.warn { color: var(--orange); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.ph-item { background: var(--card-2); border: 1px solid var(--border); border-radius: 14px; padding: 0; overflow: hidden; text-align: left; color: var(--text); }
.ph-item .img { aspect-ratio: 1 / 1; background: var(--card); display: grid; place-items: center; }
.ph-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-item .cap { font-size: 12px; font-weight: 700; padding: 6px 8px; }
.ph-item .cap .muted { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(16px + var(--safe-t)) 12px calc(16px + var(--safe-b)); animation: tin .15s ease; }
.overlay img { max-width: 100%; max-height: calc(100% - 60px); object-fit: contain; border-radius: 10px; }
.overlay .cap { color: #fff; margin-top: 12px; font-weight: 600; text-align: center; }
.overlay .x { position: absolute; top: calc(14px + var(--safe-t)); right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; display: grid; place-items: center; }

/* toggle */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0 16px; cursor: pointer; }
.switch .t { font-weight: 600; }
.switch .s { color: var(--muted); font-size: 13px; }
.switch input { -webkit-appearance: none; appearance: none; width: 50px; height: 30px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border-strong); position: relative; flex: none; margin: 0; transition: background .15s ease; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform .15s ease, background .15s ease; }
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { transform: translateX(20px); background: var(--accent-text); }
.copy-box { display: flex; gap: 8px; align-items: center; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; }
.copy-box code { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; }


/* =====================================================================
   ТАКСИ-ТЕМА: шашечки, жирная типографика, анимации
   ===================================================================== */
body {
  background:
    radial-gradient(120% 60% at 100% -10%, rgba(255, 196, 0, 0.09), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="light"] body { background: radial-gradient(120% 60% at 100% -10%, rgba(255, 196, 0, 0.18), transparent 55%), var(--bg); background-attachment: fixed; }

/* полоса шашечек сверху */
body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: calc(5px + var(--safe-t) * 0); z-index: 50;
  background: var(--checker); background-size: 10px 10px; opacity: .9; pointer-events: none;
}

/* Заголовки — широкий жирный шрифт */
h1.title, .doc h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.6px; text-transform: none;
  font-size: 27px; line-height: 1.12;
}
h1.title::after {
  content: ""; display: block; width: 44px; height: 6px; margin-top: 10px; border-radius: 2px;
  background: var(--checker); background-size: 6px 6px;
}
.topbar + h1.title::after { display: none; }
h2.section, .eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 1.4px; color: var(--muted); }
h2.section { display: flex; align-items: center; gap: 8px; }
h2.section::before { content: ""; width: 8px; height: 8px; background: var(--accent); border-radius: 2px; flex: none; }

.big-pair .num, .kv.total .v, .hist-nums .num, .rank-amt, .rank, .count-pill, .rank-bar, .stat-num {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.5px; font-variant-numeric: tabular-nums;
}
.big-pair .num { font-size: 24px; }
.kv.total .v { font-size: 30px; text-shadow: 0 0 24px rgba(255, 196, 0, 0.25); }
.kv.total .k { font-family: var(--font-display); font-size: 16px; }
.lime { color: var(--accent); }

/* Карточки: тёмный металл, жёлтый кант при наведении/нажатии */
.card, .row, .rank-row, .tile, .sched-chip, .ph-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)) , var(--card);
  border-radius: var(--radius);
  transition: transform .18s var(--ease), border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
:root[data-theme="light"] .card, :root[data-theme="light"] .row, :root[data-theme="light"] .rank-row, :root[data-theme="light"] .tile { box-shadow: var(--shadow); }
.card.tap:active, .row.tap:active, .tile:active, .rank-row:active { transform: scale(0.975); border-color: rgba(255, 196, 0, 0.45); }
@media (hover: hover) {
  .card.tap:hover, .row.tap:hover, .tile:hover { border-color: rgba(255, 196, 0, 0.35); transform: translateY(-2px); }
}
.card.hl, .rank-row.me { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255,196,0,.25), var(--glow); }

/* Главная карточка смены — жёлтый акцент слева */
.card:has(.big-pair) { position: relative; overflow: hidden; }
.card:has(.big-pair)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--checker); background-size: 5px 5px;
}

/* Иконки в кругах — квадраты-плашки */
.row .ico, .tile .ico, .avatar, .gate-ico { border-radius: 14px; }
.row .ico, .tile .ico { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="light"] .row .ico, :root[data-theme="light"] .tile .ico { color: #9a6200; }
.avatar { background: var(--card-2); color: var(--text); font-family: var(--font-display); font-size: 13px; }
.rank-row:nth-child(1) .avatar, .rank-row:nth-child(2) .avatar, .rank-row:nth-child(3) .avatar { background: var(--accent); color: var(--accent-text); }
svg.i { stroke-width: 2.1; }

/* Кнопки — жёлтая «плашка такси» с бликом */
.btn { border-radius: 14px; font-weight: 800; letter-spacing: .1px; transition: transform .16s var(--spring), box-shadow .2s ease, opacity .15s ease, background .2s ease; position: relative; overflow: hidden; }
.btn.primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--accent-text);
  border-color: transparent; box-shadow: var(--glow), inset 0 -3px 0 rgba(0,0,0,.14);
  text-transform: uppercase; font-family: var(--font-display); font-size: 14px; letter-spacing: .6px;
}
.btn.primary::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: shine 3.8s ease-in-out infinite;
}
.sticky .btn.primary { font-size: 15px; min-height: 58px; }
.btn:active { transform: scale(0.96); }
.btn.primary:active { box-shadow: 0 4px 12px rgba(255,196,0,.25), inset 0 2px 0 rgba(0,0,0,.12); }
@keyframes shine { 0%, 62% { left: -60%; } 100% { left: 130%; } }

.seg button, .chip, .pill-btn { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--spring); }
.seg button { border-radius: 12px; font-family: var(--font-display); font-size: 12px; letter-spacing: .3px; }
.seg button.on, .chip.on, .pill-btn.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); box-shadow: var(--glow); }
.seg button:active, .chip:active, .pill-btn:active { transform: scale(.95); }
.rank-bar { border-radius: 14px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: var(--glow); animation: rise .5s var(--spring) both .25s; }

.inp { border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.14); }
.theme-btn { border-radius: 14px; transition: transform .3s var(--spring); }
.theme-btn:active { transform: rotate(40deg) scale(.9); }

/* Таббар: стекло + бегающий индикатор */
.tabbar { backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--border); }
.tab-ind {
  position: absolute; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  width: calc((100% - 8px) / var(--tabs) * 0.5);
  left: calc(4px + (100% - 8px) / var(--tabs) * (var(--ti) + 0.25));
  background: var(--accent); box-shadow: 0 0 14px rgba(255,196,0,.8);
  transition: left .38s var(--spring);
}
.tab { transition: color .2s ease; font-weight: 700; }
.tab svg.i { transition: transform .3s var(--spring); }
.tab.active svg.i { transform: translateY(-2px); filter: drop-shadow(0 0 8px rgba(255,196,0,.55)); }
.tab.pop svg.i { animation: tabPop .45s var(--spring); }
.tab:active svg.i { transform: scale(.85); }
@keyframes tabPop { 0% { transform: scale(.7) translateY(2px); } 60% { transform: scale(1.18) translateY(-3px); } 100% { transform: translateY(-2px); } }

/* Вход экранов: каскад блоков */
.page.anim-fwd > *, .page.anim-tab > *, .page.anim-fade > *, .page.anim-back > * { animation: inUp .5s var(--ease) both; }
.page.anim-fwd > * { animation-name: inRight; }
.page.anim-back > * { animation-name: inLeft; }
.page.anim-fade > * { animation-name: inFade; animation-duration: .3s; }
.page[class*="anim-"] > *:nth-child(1) { animation-delay: 0ms; }
.page[class*="anim-"] > *:nth-child(2) { animation-delay: 40ms; }
.page[class*="anim-"] > *:nth-child(3) { animation-delay: 80ms; }
.page[class*="anim-"] > *:nth-child(4) { animation-delay: 120ms; }
.page[class*="anim-"] > *:nth-child(5) { animation-delay: 160ms; }
.page[class*="anim-"] > *:nth-child(6) { animation-delay: 200ms; }
.page[class*="anim-"] > *:nth-child(7) { animation-delay: 240ms; }
.page[class*="anim-"] > *:nth-child(n+8) { animation-delay: 280ms; }
@keyframes inUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes inRight { from { opacity: 0; transform: translateX(28px); } }
@keyframes inLeft { from { opacity: 0; transform: translateX(-28px); } }
@keyframes inFade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.sticky:not([hidden]) > div { animation: rise .45s var(--spring) both; }

/* Лоадер — крутящееся колесо */
.spinner { border: 0; width: 42px; height: 42px; border-radius: 50%; background:
  radial-gradient(circle, var(--bg) 0 30%, transparent 31%),
  conic-gradient(var(--accent) 0 12.5%, #26262a 0 25%, var(--accent) 0 37.5%, #26262a 0 50%, var(--accent) 0 62.5%, #26262a 0 75%, var(--accent) 0 87.5%, #26262a 0);
  animation: spin .9s linear infinite; box-shadow: 0 0 0 4px rgba(255,196,0,.1); }
.btn.busy::after { border-color: currentColor; border-right-color: transparent; }
.skel { background: linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Тосты */
.toast { border-radius: 14px; animation: toastIn .45s var(--spring); backdrop-filter: blur(12px); }
.toast.ok { border-color: rgba(255,196,0,.6); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-20px) scale(.95); } }

/* Пустые состояния и шлюзы */
.gate-ico { background: var(--accent); color: var(--accent-text); box-shadow: var(--glow); animation: float 3s ease-in-out infinite; }
:root[data-theme="light"] .gate-ico { color: var(--accent-text); }
@keyframes float { 50% { transform: translateY(-6px); } }
.empty, .plain-empty { position: relative; }
.empty::before { content: ""; display: block; width: 36px; height: 12px; margin: 0 auto 12px; background: var(--checker); background-size: 6px 6px; border-radius: 2px; opacity: .8; }

/* Бейджи */
.badge { border-radius: 8px; font-weight: 800; letter-spacing: .2px; }
.badge.lime { background: var(--accent); color: var(--accent-text); }
:root[data-theme="light"] .badge.lime { color: var(--accent-text); }

/* Чат */
.bubble { animation: inUp .3s var(--ease) both; border-radius: 16px; }
.bubble.mine { background: linear-gradient(180deg, var(--accent-2), var(--accent)); }

/* Календарь */
.cal .day { border-radius: 10px; transition: transform .16s var(--spring); }
.cal .day:active { transform: scale(.9); }
.cal .day.sel { box-shadow: 0 0 0 2px var(--accent); }

/* Фото */
.photo-field { border-radius: 14px; }
.photo-field.req { border-color: rgba(255,196,0,.5); }
.pf-hint.ok { animation: inFade .4s ease; }
.ph-item:active { transform: scale(.96); }

/* Переключатель */
.switch input:checked { box-shadow: var(--glow); }
.switch input::after { transition: transform .3s var(--spring), background .2s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Бренд */
.brand { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 4px; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text); }
.brand svg.logo { width: 26px; height: 26px; stroke: none; filter: drop-shadow(0 4px 10px rgba(255,196,0,.35)); animation: logoIn .6s var(--spring) both; }
@keyframes logoIn { from { transform: rotate(-90deg) scale(.4); opacity: 0; } }
.gate-logo { width: 96px; height: 96px; margin: 0 auto 20px; display: block; filter: drop-shadow(0 10px 30px rgba(255,196,0,.4)); animation: float 3s ease-in-out infinite; }
.gate h1.title::after, h1.title.center::after { margin-left: auto; margin-right: auto; }

/* Панель создателя */
.op-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-strong); }
.op-stats div { display: flex; flex-direction: column; align-items: flex-start; }
.op-stats b { font-size: 20px; line-height: 1.1; }
.op-stats span { color: var(--muted); font-size: 12px; margin-top: 2px; }
.op-park .s + .s { margin-top: 1px; }
.op-park.off { opacity: .55; }
.op-park .amt { font-family: var(--font-display); font-size: 14px; }
.rank-row[data-act] { cursor: pointer; }
.row .ico svg.logo { width: 26px; height: 26px; stroke: none; }
.opbar {
  position: fixed; left: 0; right: 0; top: calc(5px + var(--safe-t)); z-index: 45;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 14px; font-size: 13px;
  background: var(--accent); color: var(--accent-text); font-weight: 600; box-shadow: var(--glow);
  animation: inFade .3s ease;
}
.opbar svg.logo { width: 20px; height: 20px; stroke: none; flex: none; }
.opbar span { flex: 1; min-width: 0; }
.opbar button { flex: none; border: 0; background: #0b0b0c; color: var(--accent); font-weight: 800; border-radius: 10px; padding: 6px 12px; font-size: 13px; }
body.has-opbar .page { padding-top: calc(60px + var(--safe-t)); }
body.has-opbar .theme-btn { top: calc(56px + var(--safe-t)); }
.danger-card { border-color: rgba(255, 90, 78, .45); background: linear-gradient(180deg, rgba(255,90,78,.08), transparent), var(--card); }
.danger-card .card-title { display: flex; align-items: center; gap: 8px; }
.btn.danger-fill { box-shadow: 0 8px 24px rgba(255, 90, 78, .3); }

/* Живая смена (как в Trukly) */
.active-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-right: 56px; }
.active-head h1.title { padding-right: 0; }
.active-head .muted { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agg-card .agg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agg-card .eyebrow { margin: 0; }
.agg-total { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -1px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.total-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--accent-text);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--glow); }
.total-bar .t { font-weight: 800; font-size: 17px; }
.total-bar .s { font-size: 13px; opacity: .7; }
.total-bar .v { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -.8px; white-space: nowrap; }
.total-bar.small-bar { padding: 12px 16px; margin: 12px 0 2px; border-radius: 14px; box-shadow: none; }
.total-bar.small-bar .t { font-size: 15px; } .total-bar.small-bar .v { font-size: 20px; }
.live-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; margin: -2px 2px 14px; }
.live-meta .btn { width: auto; }
.btn.spin svg.i { animation: spin .8s linear infinite; }
.warn-card { border-color: rgba(255, 154, 31, .45); color: var(--orange); display: flex; gap: 8px; align-items: flex-start; }
.kv.sub { padding: 0 0 6px 12px; font-size: 13px; }
.kv.sub .k, .kv.sub .v { color: var(--muted); font-weight: 500; }
.pf-gal input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 0; }
.pf-gal { position: relative; overflow: hidden; }
.wd-chips .chip { position: relative; cursor: pointer; user-select: none; }
.wd-chips .chip input { position: absolute; opacity: 0; pointer-events: none; }
.wd-chips .chip:has(input:checked) { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.card-title svg.i { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; }
.card-title svg.logo { stroke: none; }
.row .ico svg.logo { width: 24px; height: 24px; stroke: none; }
.modebar svg.i { width: 18px; height: 18px; flex: none; }
body.has-modebar .page { padding-top: calc(60px + var(--safe-t)); }
body.has-modebar .theme-btn { top: calc(56px + var(--safe-t)); }
.next-shift { border-left: 5px solid var(--accent); }
.next-shift.type-border-day { border-left-color: var(--orange); }
.next-shift.type-border-night { border-left-color: var(--blue); }
.next-shift.type-border-full { border-left-color: var(--violet); }
.next-shift .num.type-day { color: var(--orange); } .next-shift .num.type-night { color: var(--blue); } .next-shift .num.type-full { color: var(--violet); }
.rank-end { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.rank-sub { font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 2px; white-space: nowrap; }
.row-warn .ico { background: rgba(255, 154, 31, .14); color: var(--orange); }
.row-warn { border-color: rgba(255, 154, 31, .3); }

/* Плитки на смене, касса, агрегаторы */
.tile-warn .ico { background: rgba(255, 154, 31, .14); color: var(--orange); }
.row-accent .ico { background: var(--accent); color: var(--accent-text); }
.kassa { background: var(--card-2); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.kassa-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kassa-top span { color: var(--muted); font-weight: 600; }
.kassa-top b { font-family: var(--font-display); font-size: 24px; letter-spacing: -.6px; }
.kassa-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-strong); }
.kassa-split span { display: block; color: var(--muted); font-size: 13px; }
.kassa-split b { font-size: 17px; }
.agg-row { border-bottom: 1px solid var(--border); padding-top: 6px; margin-bottom: 8px; }
.agg-row .switch { padding-bottom: 8px; }
.add-agg .btn { width: 100%; min-height: 52px; }
.empty .empty-cta { width: auto; margin: 16px auto 4px; padding: 12px 20px; min-height: 48px; font-size: 13px; }

/* Демо-режим */
.demobar { position: fixed; left: 0; right: 0; top: calc(5px + var(--safe-t)); z-index: 46; background: linear-gradient(90deg, var(--accent-2), var(--accent)); color: var(--accent-text);
  padding: 8px 12px 10px; box-shadow: var(--glow); animation: inFade .3s ease; }
.demobar .db-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.demobar .db-tag { background: #0b0b0c; color: var(--accent); border-radius: 6px; padding: 2px 7px; font: 800 10.5px var(--font-display); letter-spacing: 1px; flex: none; }
.demobar .db-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demobar .db-top button { flex: none; border: 0; background: #0b0b0c; color: var(--accent); font-weight: 800; border-radius: 9px; padding: 6px 10px; font-size: 12px; }
.demobar .db-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; background: rgba(11, 11, 12, .12); border-radius: 11px; padding: 3px; }
.demobar .db-roles button { border: 0; background: transparent; color: #0b0b0c; border-radius: 9px; padding: 7px 0; font: 700 11.5px var(--font-display); opacity: .7; transition: background .2s ease, opacity .2s ease; }
.demobar .db-roles button.on { background: #0b0b0c; color: var(--accent); opacity: 1; }
body.has-demobar .page { padding-top: calc(104px + var(--safe-t)); }
body.has-demobar .theme-btn { top: calc(100px + var(--safe-t)); }
.demo-end { padding-top: 6px; }
.demo-end h1.title::after { margin-left: auto; margin-right: auto; }
.demo-hint { display: flex; gap: 12px; align-items: flex-start; border-color: rgba(255,196,0,.35); }
.demo-hint svg.logo { width: 32px; height: 32px; stroke: none; flex: none; }
.demo-hint .t { font-weight: 800; } .demo-hint .s { color: var(--muted); font-size: 13px; margin-top: 2px; }
.photo-field.demo-photo { border-style: dashed; border-color: rgba(255,196,0,.35); }

/* пользователи бота */
.ustats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.ustat { background: var(--card); border-radius: 14px; padding: 12px 6px; text-align: center; animation: rise .4s both; }
.ustat b { display: block; font-family: Unbounded, sans-serif; font-size: 20px; color: var(--accent); }
.ustat span { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.user-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.user-tags .badge { white-space: normal; }
.search-row { margin: 10px 0 12px; }

/* центрирование заголовков по центру (без отступа под кнопку темы) */
h1.title.center, .gate h1.title, .demo-end h1.title { padding-right: 0; padding-left: 0; }
.demo-feats .kv .k { display: flex; align-items: center; gap: 10px; color: var(--text); }
.demo-feats .kv .k svg.i { flex: none; width: 18px; height: 18px; color: var(--accent); }

/* правки после проверки интерфейса */
.cal .day .n { bottom: auto; top: 2px; right: 4px; font-size: 9px; line-height: 1; }
.rank-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; font-size: 15px; }
.tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ===== Новогодняя тема ===== */
.logo-wrap { display: block; width: 96px; margin: 0 auto; position: relative; }
.brand { position: relative; }
#nySnow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 15; pointer-events: none; opacity: .75; }
:root[data-theme="light"] #nySnow { opacity: 1; filter: drop-shadow(0 0 1px rgba(0,0,0,.35)); }
#nyGarland { position: fixed; left: 0; right: 0; top: calc(4px + var(--safe-t) * 0); height: 16px; z-index: 47; pointer-events: none;
  display: flex; justify-content: space-between; padding: 0 6px;
  background: radial-gradient(60% 9px at 50% -2px, transparent 7px, rgba(30,60,30,.9) 7.5px, rgba(30,60,30,.9) 8.5px, transparent 9px) 0 0 / 28px 16px repeat-x; }
#nyGarland i { width: 7px; height: 10px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; margin-top: 5px; background: #ff4d4d; box-shadow: 0 0 8px 2px currentColor; color: #ff4d4d;
  animation: nyBlink 1.6s ease-in-out infinite; }
#nyGarland i::before { content: ""; display: block; width: 4px; height: 3px; margin: -2px auto 0; background: #3b4a3b; border-radius: 1px; }
#nyGarland i:nth-child(4n+2) { background: #ffc400; color: #ffc400; animation-delay: .4s; }
#nyGarland i:nth-child(4n+3) { background: #36d27a; color: #36d27a; animation-delay: .8s; }
#nyGarland i:nth-child(4n+4) { background: #4fc3f7; color: #4fc3f7; animation-delay: 1.2s; }
#nyGarland i:nth-child(n+15) { display: none; }
@media (min-width: 420px) { #nyGarland i:nth-child(n+15) { display: block; } #nyGarland i:nth-child(n+21) { display: none; } }
@media (min-width: 600px) { #nyGarland i:nth-child(n+21) { display: block; } }
@keyframes nyBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; box-shadow: none; } }
body.ny .brand { margin-top: 14px; }
body.ny .brand::before { content: ""; position: absolute; left: -2px; top: -12px; width: 24px; height: 19px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 92%22%3E%3Cpath d=%22M14 70 C16 40 34 14 62 9 C80 6 96 14 104 30 C107 37 108 46 106 54 L96 52 C97 44 95 36 90 31 C92 44 96 58 102 70 Z%22 fill=%22%23d62828%22/%3E%3Cpath d=%22M62 9 C80 6 96 14 104 30 C107 37 108 46 106 54 L99 53 C100 40 92 24 74 18 C70 16 66 12 62 9 Z%22 fill=%22%23a4161a%22 opacity=%22.55%22/%3E%3Cpath d=%22M30 66 C34 44 46 26 62 18%22 stroke=%22%23ff6b6b%22 stroke-width=%224%22 stroke-linecap=%22round%22 fill=%22none%22 opacity=%22.45%22/%3E%3Crect x=%224%22 y=%2264%22 width=%22112%22 height=%2224%22 rx=%2212%22 fill=%22%23fff%22/%3E%3Crect x=%224%22 y=%2278%22 width=%22112%22 height=%2210%22 rx=%225%22 fill=%22%23dfe6ee%22/%3E%3Ccircle cx=%22103%22 cy=%2258%22 r=%2211%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22106%22 cy=%2261%22 r=%226%22 fill=%22%23dfe6ee%22 opacity=%22.7%22/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-12deg); z-index: 1; }
body.ny .logo-wrap { margin-top: 40px; }
body.ny .logo-wrap::before { content: ""; position: absolute; left: -2px; top: -42px; width: 84px; height: 65px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 92%22%3E%3Cpath d=%22M14 70 C16 40 34 14 62 9 C80 6 96 14 104 30 C107 37 108 46 106 54 L96 52 C97 44 95 36 90 31 C92 44 96 58 102 70 Z%22 fill=%22%23d62828%22/%3E%3Cpath d=%22M62 9 C80 6 96 14 104 30 C107 37 108 46 106 54 L99 53 C100 40 92 24 74 18 C70 16 66 12 62 9 Z%22 fill=%22%23a4161a%22 opacity=%22.55%22/%3E%3Cpath d=%22M30 66 C34 44 46 26 62 18%22 stroke=%22%23ff6b6b%22 stroke-width=%224%22 stroke-linecap=%22round%22 fill=%22none%22 opacity=%22.45%22/%3E%3Crect x=%224%22 y=%2264%22 width=%22112%22 height=%2224%22 rx=%2212%22 fill=%22%23fff%22/%3E%3Crect x=%224%22 y=%2278%22 width=%22112%22 height=%2210%22 rx=%225%22 fill=%22%23dfe6ee%22/%3E%3Ccircle cx=%22103%22 cy=%2258%22 r=%2211%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22106%22 cy=%2261%22 r=%226%22 fill=%22%23dfe6ee%22 opacity=%22.7%22/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-12deg); z-index: 1; pointer-events: none; animation: nyHat 3s ease-in-out infinite; }
@keyframes nyHat { 0%, 100% { transform: rotate(-12deg); } 50% { transform: translateY(-6px) rotate(-12deg); } }
body.ny h1.title::after { background: repeating-linear-gradient(-45deg, #e53935 0 5px, #fff 5px 10px); }
body.ny .empty::before { width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc400' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M12 2l-2 2.5M12 2l2 2.5M12 22l-2-2.5M12 22l2-2.5'/%3E%3C/svg%3E") center / contain no-repeat; border-radius: 0; opacity: 1; animation: nySpin 8s linear infinite; }
@keyframes nySpin { to { transform: rotate(360deg); } }
.ny-greet { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 14px; border: 1px solid rgba(229,57,53,.35);
  background: linear-gradient(135deg, rgba(229,57,53,.16), rgba(46,158,87,.12)), var(--card); position: relative; overflow: hidden; animation: rise .5s var(--spring) both; }
.ny-greet::after { content: ""; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc400' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M12 2l-2 2.5M12 2l2 2.5M12 22l-2-2.5M12 22l2-2.5'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .12; animation: nySpin 20s linear infinite; pointer-events: none; }
.ny-greet .ny-tree { flex: none; width: 40px; height: 46px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 56'%3E%3Cpath d='M24 4 L36 20 H30 L42 34 H34 L46 48 H2 L14 34 H6 L18 20 H12 Z' fill='%232e9e57'/%3E%3Crect x='20' y='48' width='8' height='7' rx='1.5' fill='%238d5a2b'/%3E%3Ccircle cx='18' cy='28' r='2.6' fill='%23ffc400'/%3E%3Ccircle cx='30' cy='38' r='2.6' fill='%23e53935'/%3E%3Ccircle cx='22' cy='42' r='2.4' fill='%234fc3f7'/%3E%3Ccircle cx='28' cy='22' r='2.2' fill='%23e53935'/%3E%3Cpath d='M24 0 l1.6 3.4 3.7.4-2.8 2.5.8 3.6-3.3-1.9-3.3 1.9.8-3.6-2.8-2.5 3.7-.4z' fill='%23ffc400'/%3E%3C/svg%3E") center / contain no-repeat; animation: float 3s ease-in-out infinite; }
.ny-greet .body { flex: 1; min-width: 0; }
.ny-greet .t { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.ny-greet .s { font-size: 13px; color: var(--muted); margin-top: 3px; }
.ny-greet .icon-btn { flex: none; position: relative; z-index: 1; }
.ny-greet.bye { opacity: 0; transform: scale(.96); transition: .25s; }
.ny-card .seg { margin: 10px 0; }
@media (prefers-reduced-motion: reduce) { #nyGarland i, body.ny .empty::before, .ny-greet::after, .ny-greet .ny-tree { animation: none; } }

/* перенос данных */
.imp-table { overflow-x: auto; padding: 10px; }
.imp-table table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.imp-table th { text-align: left; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.imp-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.inp.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ===== Скорость: короткие переходы, лёгкие эффекты для слабых телефонов ===== */
body, :root[data-theme="light"] body { background-attachment: scroll; }
.page.anim-fwd > *, .page.anim-back > *, .page.anim-tab > * { animation-duration: .3s; }
.page.anim-tab > * { animation-duration: .24s; }
.page.anim-fade > * { animation-duration: .18s; }
.page[class*="anim-"] > *:nth-child(2) { animation-delay: 20ms; }
.page[class*="anim-"] > *:nth-child(3) { animation-delay: 40ms; }
.page[class*="anim-"] > *:nth-child(4) { animation-delay: 60ms; }
.page[class*="anim-"] > *:nth-child(5) { animation-delay: 80ms; }
.page[class*="anim-"] > *:nth-child(6) { animation-delay: 100ms; }
.page[class*="anim-"] > *:nth-child(n+7) { animation-delay: 120ms; }
.tabbar { backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); }
/* мгновенная заставка до загрузки приложения */
.boot-splash { min-height: 70vh; display: grid; place-items: center; }
.boot-splash img { width: 84px; height: 84px; filter: drop-shadow(0 10px 30px rgba(255,196,0,.35)); animation: bootPulse 1.4s ease-in-out infinite; }
@keyframes bootPulse { 50% { transform: scale(.94); opacity: .8; } }

/* светлая тема: жёлтый текст на белом плохо читается — используем тёмное золото */
:root[data-theme="light"] .kv.total .v { color: #9a6200; text-shadow: none; }
:root[data-theme="light"] .ustat b, :root[data-theme="light"] .toast.ok svg.i { color: #9a6200; }
/* самые узкие телефоны (320–340 px) */
@media (max-width: 340px) {
  h1.title { font-size: 23px; }
  .big-pair .num { font-size: 20px; }
  .kv.total .v { font-size: 24px; }
  .page { padding-left: 12px; padding-right: 12px; }
}

/* вход с сайта */
.wl-box { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.wl-code { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: 10px; text-align: center; color: var(--accent); padding: 4px 0 2px; }
:root[data-theme="light"] .wl-code { color: #9a6200; }
.wl-wait { display: flex; gap: 10px; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; }
.spinner.sm { width: 18px; height: 18px; border-width: 2px; }
.center { text-align: center; }
/* в браузере на компьютере панель шире и по центру */
@media (min-width: 900px) {
  body.web .page { max-width: 720px; }
  body.web .tabbar { width: 720px; max-width: 100%; left: 50%; right: auto; transform: translateX(-50%); border-radius: 18px 18px 0 0; }
}
a.btn { text-decoration: none; }

/* ---- касса / выплаты / маржа ---- */
.num.orange { color: var(--orange); }
.amt.muted { color: var(--muted); }
.row .end .icon-btn { width: 34px; height: 34px; margin-left: 6px; }
.row .end .badge { margin-left: 6px; }
.money-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.money-strip.one { grid-template-columns: 1fr; }
.money-strip .ms { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px; text-align: left; color: var(--text); font: inherit; min-width: 0; }
.money-strip .ms .lbl { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.money-strip .ms .v { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; }
.money-strip .ms.hot { border-color: var(--orange-soft); }
.money-strip .ms.hot .v { color: var(--orange); }
.money-strip .ms.good .v { color: var(--accent); }
:root[data-theme="light"] .money-strip .ms.good .v { color: #9a6200; }
.cash-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ===== Компьютерная панель /panel/ ===== */
.dgrid { display: contents; }
.side { display: none; }
body.desk { --side-w: 248px; }
body.desk.has-side .side {
  display: flex; flex-direction: column; gap: 2px; position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); z-index: 40;
  background: var(--card); border-right: 1px solid var(--border); padding: 18px 12px 14px; overflow-y: auto; scrollbar-width: thin;
}
body.desk .side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
body.desk .side-brand svg.logo { width: 34px; height: 34px; flex: none; stroke: none; }
body.desk .side-brand b { display: block; font: 800 15px var(--font-display); letter-spacing: .02em; }
body.desk .side-brand span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
body.desk .side-grp { font: 800 10.5px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); padding: 14px 10px 6px; }
body.desk .side-it { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: transparent; color: var(--muted); font: 600 14px var(--font, inherit); text-align: left; padding: 9px 10px; border-radius: 11px; transition: background .15s ease, color .15s ease; }
body.desk .side-it svg.i { width: 18px; height: 18px; flex: none; }
body.desk .side-it span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.desk .side-it:hover { background: var(--card-2); color: var(--text); }
body.desk .side-it.on { background: var(--card-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
body.desk .side-it.on svg.i { color: var(--accent); }
:root[data-theme="light"] body.desk .side-it.on svg.i { color: #9a6200; }
body.desk .side-n { font-style: normal; font: 800 11px var(--font-display); background: var(--accent); color: var(--accent-text); border-radius: 20px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; }
body.desk .side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
body.desk .side-park { margin-bottom: 8px; height: 40px; font-size: 13px; }
body.desk .side-user { font-size: 12px; color: var(--muted); padding: 8px 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.desk.has-side .theme-btn { display: none; }
body.desk.has-side .page { margin-left: var(--side-w); max-width: none; padding: 28px 36px 60px; }
body.desk.has-side.has-sticky .page { padding-bottom: 110px; }
body.desk.has-side .page > * { max-width: 1240px; }
body.desk.has-side .page > .brand { display: none; }
body.desk.has-side .page > .card, body.desk.has-side .page > form, body.desk.has-side .page > .row, body.desk.has-side .page > .seg:not(.scroll),
body.desk.has-side .page > .tiles, body.desk.has-side .page > .money-strip, body.desk.has-side .page > .stack, body.desk.has-side .page > .rank-row { max-width: 760px; }
body.desk.has-side .page > .seg.scroll { margin-left: 0; margin-right: 0; padding: 0; max-width: 760px; }
body.desk.has-side .page > .dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; margin-bottom: 14px; }
body.desk.has-side .page > .dgrid > .card { margin: 0; }
body.desk.has-side .sticky { left: var(--side-w); bottom: 0; padding: 12px 36px 14px; background: linear-gradient(transparent, var(--bg) 30%); }
body.desk.has-side .sticky > * { max-width: 760px; margin: 0; }
body.desk.has-side .opbar, body.desk.has-side .demobar { left: var(--side-w); }
body.desk.has-side h1.title { font-size: 30px; }
body.desk .tap { cursor: pointer; }
body.desk .card.tap:hover, body.desk .row.tap:hover { border-color: var(--border-strong); }

/* сводка */
.dk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dk-head .subtitle { margin-bottom: 0; }
.dk-head .seg { margin: 0; min-width: 330px; }
.dk-alerts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.dk-alert { display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255, 196, 0, .35); background: var(--accent-soft); color: var(--text); border-radius: 12px; padding: 9px 12px; font: 600 13.5px inherit; }
.dk-alert svg.i { width: 17px; height: 17px; color: var(--accent); }
.dk-alert b { font: 800 12px var(--font-display); background: var(--accent); color: var(--accent-text); border-radius: 20px; padding: 2px 8px; }
.dk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.dk-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; min-width: 0; text-align: left; color: var(--text); font: inherit; }
.dk-kpi .l { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.dk-kpi .v { font: 700 clamp(20px, 1.9vw, 27px)/1.2 var(--font-display); margin-top: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-kpi .v small { font-size: 14px; color: var(--muted); font-weight: 600; }
.dk-kpi .v.lime { color: var(--accent); } .dk-kpi .v.red { color: var(--red); } .dk-kpi .v.orange { color: var(--orange); }
:root[data-theme="light"] .dk-kpi .v.lime { color: #9a6200; }
.dk-kpi .d { font-size: 12px; color: var(--muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-kpi.tap:hover { border-color: var(--border-strong); }
.dk-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.dk-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.dk-box { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; min-width: 0; }
.dk-h { display: flex; justify-content: space-between; gap: 10px; font: 800 11px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.dk-ok { color: var(--green); }
.dk-live { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text); padding: 10px 0; font: inherit; }
.dk-live:first-of-type { border-top: 0; }
.dk-live .n { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-live .c { color: var(--muted); font-size: 12px; grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-live .r { font: 700 13.5px var(--font-display); grid-row: span 2; align-self: center; font-variant-numeric: tabular-nums; }
.dk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 8px; box-shadow: 0 0 0 3px rgba(54, 210, 122, .18); vertical-align: 1px; }
.dk-bars { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 18px; }
.dk-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; position: relative; }
.dk-bar i { display: block; width: 100%; background: linear-gradient(var(--accent), #b98d00); border-radius: 5px 5px 2px 2px; min-height: 2px; }
.dk-bar.today i { background: var(--text); }
.dk-bv { font-size: 9.5px; color: var(--muted); margin-bottom: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dk-bl { font-size: 10.5px; color: var(--muted); margin-top: 5px; }
.dk-ev { display: flex; gap: 10px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text); font: 13px/1.4 inherit; padding: 8px 0; align-items: flex-start; }
.dk-ev:first-of-type { border-top: 0; }
.dk-ev svg.i { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 2px; }
.dk-ev span:nth-of-type(1) { flex: 1; min-width: 0; }
.dk-ev .t { color: var(--muted); white-space: nowrap; font-size: 11.5px; }
.dk-empty { color: var(--muted); font-size: 13px; padding: 14px 0; }
.dk-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dk-tbl th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.dk-tbl td { padding: 9px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dk-tbl td:nth-child(2) { white-space: normal; }
.dk-tbl td.b { font-weight: 700; text-align: right; } .dk-tbl th:last-child { text-align: right; }
.dk-tbl tr:last-child td { border-bottom: 0; }
@media (max-width: 1280px) { .dk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dk-grid .dk-ev-box { grid-column: 1 / -1; } }
@media (max-width: 1000px) { .dk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dk-grid, .dk-grid.two { grid-template-columns: 1fr; } }
/* узкое окно: меню сворачивается в иконки */
@media (max-width: 860px) {
  body.desk { --side-w: 66px; }
  body.desk .side-brand div, body.desk .side-grp, body.desk .side-it span, body.desk .side-user, body.desk .side-park { display: none; }
  body.desk .side-it { justify-content: center; position: relative; }
  body.desk .side-n { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: 9px; padding: 0 4px; }
  body.desk.has-side .page { padding: 20px 16px 60px; }
  .dk-head .seg { min-width: 0; width: 100%; }
}
body.desk.has-side .page > .dgrid > * { margin: 0 !important; }
body.desk .dk-head .seg button { min-height: 40px; }

/* ---- предупреждения / оценка ---- */
.row.warn-red .ico { background: var(--red-soft); color: var(--red); }
.row.warn-orange .ico { background: var(--orange-soft); color: var(--orange); }
.score-big { font: 800 44px/1 var(--font-display); margin: 6px 0 6px; font-variant-numeric: tabular-nums; }
.score-big small { font-size: 16px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.score-big.green { color: var(--green); } .score-big.orange { color: var(--orange); } .score-big.red { color: var(--red); }
/* QR пункта осмотра */
.qr-card { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qr-box { width: min(78vw, 320px); aspect-ratio: 1; background: #fff; border-radius: 18px; padding: 10px; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.qr-timer { font: 700 14px var(--font-display); color: var(--accent); }
:root[data-theme="light"] .qr-timer { color: #9a6200; }
.card.adm-here { border-color: rgba(255, 196, 0, .45); }
.badge svg.i { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }

/* график: неделя */
.wk-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; max-width: 760px; }
.wk-title { font: 700 16px var(--font-display); }
.wk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.wk-legend .red { color: var(--red); }
.wk-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lg.day { background: var(--accent); } .lg.night { background: #6c8cff; } .lg.full { background: #b17cff; }
.lg.free { border: 1px dashed var(--muted); } .lg.bad { background: var(--red); }
.wk-wrap { overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px; scrollbar-width: thin; }
body.desk.has-side .page > .wk-wrap { margin: 0 0 14px; padding: 0; max-width: none; }
.wk { border-collapse: separate; border-spacing: 4px; min-width: 760px; width: 100%; table-layout: fixed; }
.wk th { font-weight: 600; font-size: 11.5px; color: var(--muted); text-align: center; padding: 4px 2px; }
.wk th b { display: block; font: 800 12px var(--font-display); color: var(--text); text-transform: uppercase; }
.wk th.we b { color: var(--orange); }
.wk th.today b, .wk th.today span { color: var(--accent); }
.wk th.wk-car, .wk td.wk-car { width: 128px; text-align: left; }
.wk td { vertical-align: top; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 4px; height: 58px; }
.wk td.today { border-color: rgba(255, 196, 0, .45); }
.wk td.wk-car { background: transparent; border: 0; padding: 6px 4px; }
.wk td.wk-car b { display: block; font-size: 12.5px; line-height: 1.25; }
.wk td.wk-car span { display: block; font-size: 11px; color: var(--muted); }
.wk-sh, .wk-free { display: block; width: 100%; text-align: left; border: 0; border-radius: 7px; padding: 4px 6px; margin-bottom: 3px; font: 600 11.5px inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-sh { background: var(--card-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.wk-sh i { font-style: normal; font-weight: 800; margin-right: 5px; color: var(--accent); }
.wk-sh.type-night { box-shadow: inset 3px 0 0 #6c8cff; } .wk-sh.type-night i { color: #6c8cff; }
.wk-sh.type-full { box-shadow: inset 3px 0 0 #b17cff; } .wk-sh.type-full i { color: #b17cff; }
.wk-sh.bad { background: var(--red-soft); box-shadow: inset 3px 0 0 var(--red); }
.wk-sh.draft { opacity: .65; border: 1px dashed var(--border-strong); }
.wk-free { background: transparent; border: 1px dashed var(--border-strong); color: var(--muted); }
.wk-free:hover { color: var(--accent); border-color: var(--accent); }
.wk-none { color: var(--muted-2); font-size: 12px; padding: 4px; display: block; }
:root[data-theme="light"] .wk-sh i { color: #9a6200; }
.mr-list { padding-top: 6px; padding-bottom: 6px; }
.mr-row { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.ev-tbl td:first-child { color: var(--muted); }
.ev-tbl th:not(:first-child), .ev-tbl td.b { text-align: right; }

/* =====================================================================
   СТИЛЬ «НАПАРНИК ГОВОРИТ» (v2): молочный фон, чёрные контуры, жёсткие
   тени, лайм + оранжевый. Слой поверх прежних стилей — меняет только вид.
   ===================================================================== */
:root, :root[data-theme="light"] {
  --bg: #F4F1E8; --card: #FFFFFF; --card-2: #F0EDE4;
  --border: #121212; --border-strong: #121212; --line: #121212; --hard: #121212;
  --text: #121212; --muted: #5E5A50; --muted-2: #77736A;
  --accent: #C8F04A; --accent-2: #D6F56E; --accent-text: #121212; --accent-soft: #EEF9C8;
  --fire: #FF7A2F; --fire-soft: #FFE7D9;
  --red: #C8281C; --red-soft: #FBE3E0; --green: #15803D; --green-soft: #DCF2E3;
  --blue: #1D4ED8; --blue-soft: #E0E8FB; --orange: #B8460F; --orange-soft: #FFE7D9;
  --violet: #6D28D9; --violet-soft: #EDE4FB;
  --tabbar-bg: #FFFFFF; --input-bg: #FFFFFF; --shadow: none; --glow: none;
  --radius: 20px; --radius-sm: 14px;
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #141413; --card: #1E1E1C; --card-2: #2A2926;
  --border: #4A4842; --border-strong: #5A5850; --line: #E9E5DA; --hard: #000000;
  --text: #F4F1E8; --muted: #ADA89B; --muted-2: #8C877B;
  --accent-soft: rgba(200, 240, 74, 0.16); --fire-soft: rgba(255, 122, 47, 0.16);
  --red: #FF6B5E; --red-soft: rgba(255, 107, 94, 0.15); --green: #4ADE80; --green-soft: rgba(74, 222, 128, 0.14);
  --blue: #7FB0FF; --blue-soft: rgba(127, 176, 255, 0.15); --orange: #FF9A5C; --orange-soft: rgba(255, 154, 92, 0.15);
  --violet: #C4A1FF; --violet-soft: rgba(196, 161, 255, 0.15);
  --tabbar-bg: #1A1A18; --input-bg: #191917;
  color-scheme: dark;
}
html body { font-family: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); }
html body::before { display: none; }

/* заголовки */
html h1.title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: 28px; }
html h1.title::after { width: 34px; height: 8px; border-radius: 3px; background: var(--accent); border: 2px solid var(--line); margin-top: 10px; }
html h2.section, html .eyebrow { font-family: "Onest", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
html h2.section::before { width: 10px; height: 10px; border-radius: 3px; background: var(--fire); border: 2px solid var(--line); box-sizing: border-box; }

/* карточки и строки: контур + жёсткая тень */
html .card, html .row, html .rank-row, html .tile, html .sched-chip, html .ph-item {
  background: var(--card); border: 2px solid var(--line); box-shadow: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
html .card { box-shadow: 4px 4px 0 var(--hard); }
html .card:has(.big-pair)::before { display: none; }
html .card.tap:active, html .row.tap:active, html .tile:active, html .rank-row:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--hard); border-color: var(--line); }
@media (hover: hover) { html .card.tap:hover, html .row.tap:hover, html .tile:hover { border-color: var(--line); transform: translate(-1px, -1px); } }
html .card.hl, html .rank-row.me { border-color: var(--line); background: var(--accent-soft); box-shadow: 4px 4px 0 var(--hard); }
:root[data-theme="dark"] .card.hl, :root[data-theme="dark"] .rank-row.me { background: #2B3318; }
html .divider { background: var(--card-2); opacity: 1; height: 2px; }
:root[data-theme="dark"] .divider { background: #2E2D29; }

/* иконки в плашках */
html .row .ico, html .tile .ico, :root[data-theme="light"] .row .ico, :root[data-theme="light"] .tile .ico {
  background: var(--accent); color: #121212; border: 2px solid var(--line); border-radius: 12px; box-sizing: border-box;
}
html .row.alert, :root .row.alert { background: var(--fire-soft); border-color: var(--line); }
html .row.alert .ico, :root[data-theme="light"] .row.alert .ico { background: var(--fire); color: #121212; }
html .row-warn .ico { background: var(--fire); color: #121212; }
html .row-warn { border-color: var(--line); }
html .row-accent .ico { background: #121212; color: var(--accent); }
html .avatar { background: var(--card-2); border: 2px solid var(--line); box-sizing: border-box; color: var(--text); }
html .rank-row:nth-child(1) .avatar, html .rank-row:nth-child(2) .avatar, html .rank-row:nth-child(3) .avatar { background: var(--accent); color: #121212; }
html .count-pill { background: var(--fire); color: #121212; border: 2px solid var(--line); font-family: var(--font-display); font-size: 12px; padding: 1px 9px; }

/* цифры: лаймовый маркер вместо жёлтого текста */
html .big-pair .num, html .kv.total .v, html .hist-nums .num, html .rank-amt, html .stat-num { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; }
html .kv.total .v { text-shadow: none; }
:root[data-theme="light"] .num.lime, :root[data-theme="light"] .kv.total .v, :root[data-theme="light"] .rank-amt.lime {
  color: #121212; background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); padding: 0 3px; border-radius: 2px;
}
:root[data-theme="light"] .lime { color: #3F5A00; }
:root[data-theme="light"] .link-accent { color: #121212; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 4px; text-underline-offset: 3px; }

/* кнопки: вдавливаются при нажатии */
html .btn { border: 2px solid var(--line); border-radius: 16px; font-weight: 700; box-shadow: none; text-transform: none; letter-spacing: 0; font-family: "Onest", sans-serif; }
html .btn:active { transform: translate(3px, 3px); box-shadow: none !important; }
html .btn.primary { background: var(--accent); color: #121212; border-color: var(--line); box-shadow: 4px 4px 0 var(--hard); text-transform: none; font-family: "Onest", sans-serif; font-size: 16px; letter-spacing: 0; }
html .btn.primary::before { display: none; }
html .sticky .btn.primary { background: #121212; color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 15px; box-shadow: 4px 4px 0 var(--accent); border-color: #121212; }
:root[data-theme="dark"] .sticky .btn.primary { background: var(--accent); color: #121212; box-shadow: 4px 4px 0 #000; }
html .btn.soft { background: var(--card-2); border-color: var(--line); }
html .btn.danger { color: var(--red); border-color: var(--line); background: var(--card); }
html .btn.danger-fill { background: var(--red); color: #fff; border-color: var(--line); }
html .btn.sm { border-radius: 12px; }
html .pill-btn { border: 2px solid var(--line); }
html .rank-bar { background: #121212; color: var(--accent); border: 2px solid #121212; box-shadow: 4px 4px 0 var(--accent); }

/* переключатели и чипы */
html .seg button { border: 2px solid var(--line); background: var(--card); color: var(--text); font-family: "Onest", sans-serif; font-size: 14px; font-weight: 700; border-radius: 999px; min-height: 46px; }
html .seg button.on { background: #121212; color: var(--accent); border-color: #121212; box-shadow: none; }
:root[data-theme="dark"] .seg button.on { background: var(--accent); color: #121212; border-color: var(--accent); }
html .chip { border: 2px solid var(--line); font-weight: 600; }
html .chip.on, html .pill-btn.on { background: var(--accent); color: #121212; border-color: var(--line); box-shadow: 2px 2px 0 var(--hard); }
html .wd-chips .chip:has(input:checked) { background: var(--accent); color: #121212; border-color: var(--line); }

/* поля ввода */
html .inp { border: 2px solid var(--line); border-radius: 14px; background: var(--input-bg); }
html .inp:focus { border-color: var(--line); box-shadow: 3px 3px 0 var(--accent); }
html .check input, html .switch input { accent-color: #121212; }
html .field > .lbl { color: var(--text); font-weight: 600; }

/* бейджи */
html .badge { border-radius: 8px; font-weight: 700; border: 1.5px solid transparent; }
html .badge.lime, :root[data-theme="light"] .badge.lime { background: var(--accent); color: #121212; border-color: var(--line); }
html .badge.orange { background: var(--fire-soft); }

/* нижнее меню: активный пункт — лаймовая плашка */
html .tabbar { background: var(--tabbar-bg); border-top: 2px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
html .tab-ind { display: none; }
html .tab { color: var(--muted); font-weight: 600; }
html .tab.active { color: var(--text); font-weight: 700; }
html .tab svg.i { box-sizing: content-box; padding: 3px 10px; border-radius: 10px; border: 2px solid transparent; }
html .tab.active svg.i { background: var(--accent); color: #121212; border-color: var(--line); transform: none; filter: none; }
html .sticky { background: linear-gradient(to top, var(--bg) 72%, transparent); }

/* шапка, кнопка темы, тосты, лоадер */
html .theme-btn { border: 2px solid var(--line); border-radius: 12px; box-shadow: 2px 2px 0 var(--hard); }
html .brand { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; text-transform: none; font-size: 16px; }
html .brand svg.logo { width: 32px; height: 28px; filter: none; }
html .gate-logo { filter: none; }
html .toast { border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--hard); background: var(--card); backdrop-filter: none; }
html .toast.ok { border-color: var(--line); background: var(--accent-soft); }
:root[data-theme="dark"] .toast.ok { background: #2B3318; }
html .spinner { background: radial-gradient(circle, var(--bg) 0 30%, transparent 31%), conic-gradient(var(--accent) 0 25%, var(--fire) 0 50%, var(--accent) 0 75%, var(--fire) 0); box-shadow: 0 0 0 2px var(--line); }
html .gate-ico { background: var(--accent); color: #121212; border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--hard); }
html .empty::before { width: 30px; height: 10px; background: var(--accent); border: 2px solid var(--line); border-radius: 4px; }
html .bubble.mine { background: var(--accent); color: #121212; border: 2px solid var(--line); }
html .cal .day.sel { box-shadow: 0 0 0 2px var(--line); background: var(--accent); color: #121212; }
html .opbar, html .modebar { border: 2px solid var(--line); }

/* денежные плашки, касса */
html .money-strip .ms { border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--hard); border-radius: 18px; }
html .money-strip .ms.hot { background: var(--fire); color: #121212; border-color: var(--line); }
html .money-strip .ms.hot .v, html .money-strip .ms.hot .lbl { color: #121212; }
html .money-strip .ms.good { background: var(--accent); color: #121212; }
html .money-strip .ms.good .v, html .money-strip .ms.good .lbl, :root[data-theme="light"] .money-strip .ms.good .v { color: #121212; }
html .money-strip .ms .v { font-family: var(--font-display); font-weight: 800; }

/* ===== «Напарник говорит»: персонаж и реплика ===== */
.say { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; }
.say .mascot { flex: none; width: 52px; height: 48px; }
.say .mascot svg { width: 100%; height: 100%; display: block; }
.say .bubble-say { flex: 1; min-width: 0; background: var(--card); border: 2px solid var(--line); border-radius: 6px 20px 20px 20px; padding: 12px 14px; box-shadow: 3px 3px 0 var(--hard); font-size: 15px; line-height: 1.42; animation: sayIn .45s var(--spring) both; }
.say.worried .bubble-say { background: var(--fire-soft); }
.say.happy .bubble-say { background: var(--accent-soft); }
:root[data-theme="dark"] .say.happy .bubble-say { background: #2B3318; }
.say .bubble-say b { font-weight: 800; }
.say .say-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.say .say-acts button { min-height: 38px; padding: 0 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font: 700 13px "Onest", sans-serif; }
.say .say-acts button.go { background: var(--accent); color: #121212; }
.say.worried .say-acts button.go { background: var(--fire); color: #121212; }
.say .say-acts button:active { transform: translate(2px, 2px); }
.say .mascot .eyes { transform-origin: 31px 15px; animation: blink 5s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes sayIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
body.desk .say { max-width: 760px; }

/* конфетти-квадратики при рекорде */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 120; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 12px; border: 2px solid #121212; border-radius: 3px; animation: fall 1.6s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

/* компьютерная панель */
html body.desk.has-side .side { background: var(--card); border-right: 2px solid var(--line); }
html body.desk .side-it { color: var(--text); font-weight: 600; border: 2px solid transparent; }
html body.desk .side-it:hover { background: var(--card-2); }
html body.desk .side-it.on { background: var(--accent); color: #121212; border-color: var(--line); box-shadow: 3px 3px 0 var(--hard); }
html body.desk .side-it.on svg.i, :root[data-theme="light"] body.desk .side-it.on svg.i { color: #121212; }
html body.desk .side-n { background: var(--fire); color: #121212; border: 2px solid var(--line); }
html body.desk .side-brand b { font-size: 16px; }
html body.desk .side-brand svg.logo { width: 38px; height: 34px; }
html .dk-kpi, html .dk-box { border: 2px solid var(--line); border-radius: 20px; }
html .dk-kpi { box-shadow: 4px 4px 0 var(--hard); }
html .dk-kpi .v.lime, :root[data-theme="light"] .dk-kpi .v.lime { color: #121212; }
html .dk-kpis .dk-kpi:nth-child(2) { background: var(--accent); }
:root[data-theme="dark"] .dk-kpis .dk-kpi:nth-child(2) { color: #121212; }
:root[data-theme="dark"] .dk-kpis .dk-kpi:nth-child(2) .l, :root[data-theme="dark"] .dk-kpis .dk-kpi:nth-child(2) .d { color: #3a3a3a; }
html .dk-kpi .v.orange { color: var(--orange); }
html .dk-alert { border: 2px solid var(--line); background: var(--fire-soft); }
html .dk-alert svg.i { color: var(--text); }
html .dk-alert b { background: var(--fire); color: #121212; border: 2px solid var(--line); }
html .dk-bar i { background: var(--accent); border: 2px solid var(--line); box-sizing: border-box; border-bottom: 0; }
html .dk-bar.today i { background: var(--fire); }
html .dk-ev svg.i { color: var(--text); }
html .wk td { border: 2px solid var(--line); }
html .wk-sh { border: 1.5px solid var(--line); }
html .qr-box { border: 2px solid #121212; }
html body, :root[data-theme="light"] body, :root[data-theme="dark"] body { background: var(--bg); }

/* ===== правки вида панели (октябрь) ===== */
/* заголовок без «пустой плашки» под ним */
html h1.title::after { display: none; }
/* пустые состояния — маленький Напарник вместо полоски */
html .empty::before { width: 48px; height: 44px; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 44'%3E%3Crect x='2' y='9' width='28' height='28' rx='8' fill='%23C8F04A' stroke='%23121212' stroke-width='2.4'/%3E%3Crect x='16' y='3' width='29' height='29' rx='8' fill='%23FF7A2F' stroke='%23121212' stroke-width='2.4'/%3E%3Ccircle cx='27' cy='15' r='2.4' fill='%23121212'/%3E%3Ccircle cx='36' cy='15' r='2.4' fill='%23121212'/%3E%3Cpath d='M26.5 22 Q31.5 25.5 36.5 22' stroke='%23121212' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 1; }
/* сводка: левая колонка (на линии + график) и события справа одной высоты, без дыр */
.dk-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; }
.dk-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dk-col > .dk-box:last-child { flex: 1; display: flex; flex-direction: column; }
.dk-col > .dk-box:last-child .dk-bars { flex: 1; min-height: 190px; height: auto; }
.dk-ev-box { display: flex; flex-direction: column; contain: size; min-height: 260px; }
.dk-ev-list { flex: 1; min-height: 0; overflow-y: auto; margin-right: -8px; padding-right: 8px; scrollbar-width: thin; }
@media (max-width: 1280px) { .dk-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .dk-grid .dk-ev-box { grid-column: auto; } }
@media (max-width: 1000px) { .dk-grid { grid-template-columns: 1fr; } .dk-ev-box { contain: none; min-height: 0; } .dk-ev-list { max-height: 420px; } }
/* график: пустые дни — без «пеньков», общая линия основания */
.dk-bars { border-bottom: 2px solid var(--line); padding-bottom: 0; }
.dk-bar i.zero { height: 0 !important; min-height: 0; border: 0 !important; background: none !important; }
html .dk-bar i { border-radius: 6px 6px 0 0; }
.dk-bar .dk-bl { position: absolute; bottom: -22px; }
.dk-col > .dk-box:last-child { padding-bottom: 34px; }
.dk-bv { font-weight: 700; color: var(--text); }
/* плитки: подпись переносится, а не обрезается */
.dk-kpi .d { white-space: normal; overflow: visible; line-height: 1.35; }
/* маркер под цифрами — ровно под текстом */
:root[data-theme="light"] .num.lime, :root[data-theme="light"] .kv.total .v, :root[data-theme="light"] .rank-amt.lime { background: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 94%, transparent 94%); padding: 0 4px; }
/* график смен: сегодняшний день читается в светлой теме */
.wk th.today b, .wk th.today span { color: var(--text); }
.wk th.today b { display: inline-block; background: var(--accent); border: 2px solid var(--line); border-radius: 8px; padding: 1px 6px; }
.wk th.today span { display: block; font-weight: 700; }
html .wk td.today { border-color: var(--line); background: var(--accent-soft); }
:root[data-theme="dark"] .wk td.today { background: #2B3318; }
/* таблицы панели: линии в стиле контуров */
.dk-tbl th { border-bottom: 2px solid var(--line); }
.dk-tbl td { border-bottom: 1px solid var(--card-2); }
.dk-ev, .dk-live { border-top: 1px solid var(--card-2); }
:root[data-theme="dark"] .dk-tbl td, :root[data-theme="dark"] .dk-ev, :root[data-theme="dark"] .dk-live { border-color: #2E2D29; }

/* ===== тёмная тема в стиле «Напарник говорит»: чернильный фон, кремовые контуры,
   видимые жёсткие тени (светлее фона), цветные тени у реплик ===== */
:root[data-theme="dark"] {
  --bg: #121212; --card: #1C1C1A; --card-2: #262622;
  --border: #EDE9DD; --border-strong: #EDE9DD; --line: #EDE9DD; --hard: #4A4940;
  --text: #F4F1E8; --muted: #B3AE9F; --muted-2: #8F8A7C;
  --accent-soft: #263011; --fire-soft: #2C1C12;
  --tabbar-bg: #1C1C1A; --input-bg: #161615;
}
:root[data-theme="dark"] .card { box-shadow: 4px 4px 0 var(--hard); }
:root[data-theme="dark"] .divider { background: #2F2E2A; }
/* реплика Напарника: тёмная карточка, цвет настроения — в тени и рамке */
:root[data-theme="dark"] .say .bubble-say { background: var(--card); box-shadow: 4px 4px 0 var(--hard); }
:root[data-theme="dark"] .say.worried .bubble-say { background: var(--card); border-color: var(--fire); box-shadow: 4px 4px 0 var(--fire); }
:root[data-theme="dark"] .say.happy .bubble-say { background: var(--card); border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent); }
:root[data-theme="dark"] .say .mascot svg rect { stroke: #EDE9DD; }
:root[data-theme="dark"] .say .say-acts button:not(.go) { background: transparent; }
/* кнопки и переключатели */
:root[data-theme="dark"] .btn.primary { box-shadow: 4px 4px 0 var(--hard); }
:root[data-theme="dark"] .sticky .btn.primary { background: var(--accent); color: #121212; border-color: var(--accent); box-shadow: 4px 4px 0 var(--hard); }
:root[data-theme="dark"] .seg button { background: var(--card); }
:root[data-theme="dark"] .seg button.on { background: var(--accent); color: #121212; border-color: var(--line); box-shadow: 3px 3px 0 var(--hard); }
:root[data-theme="dark"] .chip.on, :root[data-theme="dark"] .pill-btn.on { box-shadow: 2px 2px 0 var(--hard); }
:root[data-theme="dark"] .inp:focus { box-shadow: 3px 3px 0 var(--accent); }
/* цифры: лаймовый текст вместо маркера */
:root[data-theme="dark"] .num.lime, :root[data-theme="dark"] .kv.total .v, :root[data-theme="dark"] .rank-amt.lime { color: var(--accent); background: none; }
/* иконки строк и плитки */
:root[data-theme="dark"] .row .ico, :root[data-theme="dark"] .tile .ico { border-color: #121212; }
:root[data-theme="dark"] .row.alert { background: var(--card); border-color: var(--fire); box-shadow: 3px 3px 0 var(--fire); }
:root[data-theme="dark"] .tab.active svg.i { border-color: #121212; }
:root[data-theme="dark"] .tabbar { border-top-color: #2F2E2A; }
/* компьютерная панель */
:root[data-theme="dark"] body.desk.has-side .side { background: #161615; border-right-color: #2F2E2A; }
:root[data-theme="dark"] body.desk .side-it.on { box-shadow: 3px 3px 0 var(--hard); border-color: #121212; }
:root[data-theme="dark"] .dk-kpi { box-shadow: 4px 4px 0 var(--hard); }
:root[data-theme="dark"] .dk-kpis .dk-kpi:nth-child(2) { border-color: var(--accent); }
:root[data-theme="dark"] .dk-box { border-color: #3A3934; }
:root[data-theme="dark"] .dk-bars { border-bottom-color: #3A3934; }
:root[data-theme="dark"] .dk-bar i { border-color: #121212; }
:root[data-theme="dark"] .dk-tbl th { border-bottom-color: #3A3934; }
:root[data-theme="dark"] .wk th.today b { border-color: #121212; color: #121212; }
:root[data-theme="dark"] .money-strip .ms { box-shadow: 3px 3px 0 var(--hard); }
:root[data-theme="dark"] .toast { box-shadow: 4px 4px 0 var(--hard); }
/* маркер под суммой — только по ширине текста */
:root[data-theme="light"] .num.lime, :root[data-theme="light"] .kv.total .v, :root[data-theme="light"] .rank-amt.lime { width: fit-content; max-width: 100%; display: inline-block; }
.big-pair > div:last-child { text-align: right; }