@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap");
/* v7.1.13.2 — the approved Mini App design is light-only. Without an
   explicit color-scheme, WebKit/iOS renders native form controls (select
   popups especially) using the OS dark-mode UA palette when the device is
   in dark mode, regardless of this file's own light colors — the reported
   "black dropdown, white text" bug. This is the root-cause fix; the
   explicit background/color/border on individual control types below is
   defense in depth for browsers that don't fully honor color-scheme on
   every widget. */
:root {
  color-scheme: light only;
}
:root {
  --yellow: #ffd84d;
  --yellow-2: #fff3bd;
  --green: #1fa56b;
  --red: #d84c4c;
  --blue: #3267ff;
  --ink: #172033;
  --muted: #657089;
  --line: #e8ecf4;
  --card: #ffffff;
  --bg: #f6f7fb;
  --shadow: 0 10px 30px rgba(26, 38, 66, 0.10);
  /* animation tokens — v7.0.89 */
  --yc-ease: cubic-bezier(.2, .8, .2, 1);
  --yc-fast: 160ms;
  --yc-normal: 260ms;
  --yc-slow: 340ms;
  /* unified motion system */
  --motion-fast: 180ms;
  --motion-normal: 260ms;
  --motion-slow: 340ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-distance-sm: 6px;
  --motion-distance-md: 12px;
  /* ALE-73 — navigation motion: one duration + one distance for EVERY
     view change in the app (top-level tabs and inner logical views alike),
     so nothing can drift apart per screen. Reuses the existing
     --ease-enter; both values sit inside the approved 160-220ms / 6-12px
     envelope. */
  --motion-nav: 200ms;
  --motion-nav-distance: 8px;
}
* { box-sizing: border-box; }

/* prevent input[type=month] intrinsic min-width from escaping flex/grid containers */
input[type="month"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-inline-size: 0;
  box-sizing: border-box;
}
input[type="month"]::-webkit-date-and-time-value {
  min-width: 0;
  min-inline-size: 0;
  text-align: center;
}

/* ── yc-month-picker — iOS-safe month selector ────────────────────────────────
 *  The .yc-month-picker__native input is position:absolute;opacity:0 so its
 *  intrinsic min-content width never affects layout. The visible span shows
 *  the formatted month label and the wrapper div defines the visual size.
 * ─────────────────────────────────────────────────────────────────────────── */
.yc-month-picker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.yc-month-picker:focus-within {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52,152,219,.18);
  outline: none;
}
.yc-month-picker__value {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  font-size: 13px;
  padding: 0 8px;
}
.yc-month-picker__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
  .yc-month-picker { background: #263047; border-color: rgba(255,255,255,.14); color: #e8ecf4; }
}
:root[data-theme="dark"] .yc-month-picker { background: #263047; border-color: rgba(255,255,255,.14); color: #e8ecf4; }
:root[data-theme="light"] .yc-month-picker { background: #fff; border-color: var(--line); color: var(--ink); }

html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  overscroll-behavior: none;
}
.app-shell { width: 100%; max-width: none; margin: 0; padding: calc(14px + env(safe-area-inset-top)) 14px calc(30px + env(safe-area-inset-bottom)); }
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--yellow), #fff7d1);
  box-shadow: var(--shadow);
}
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b5300; }
h1 { margin: 2px 0 0; font-size: 24px; line-height: 1.1; }
h2 { margin: 0; font-size: 20px; }
p { margin: 6px 0 0; color: var(--muted); }
.badge { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.75); font-weight: 700; white-space: nowrap; }
.notice { margin: 14px 0; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--muted); }
.notice.ok { border-color: rgba(31,165,107,.35); color: #0b7548; background: #effbf6; }
.notice.error { border-color: rgba(216,76,76,.35); color: #a82d2d; background: #fff0f0; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.tab, button { border: 0; border-radius: 14px; padding: 12px 10px; font-weight: 700; cursor: pointer; color: var(--ink); background: #fff; box-shadow: 0 2px 10px rgba(26,38,66,.06); }
.tab.active { background: var(--ink); color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 8px 0 14px; }
.secondary { background: #eef2fb; color: #2e426b; padding: 10px 12px; }
.cards { display: grid; gap: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 14px; box-shadow: 0 3px 16px rgba(26,38,66,.05); }
.card-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.meta { display: grid; gap: 5px; color: var(--muted); font-size: 14px; }
.meta b { color: var(--ink); }
.status-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pill { font-size: 12px; padding: 6px 9px; border-radius: 999px; background: #f0f3f9; color: #42506c; font-weight: 700; }
.pill.ok { background: #e9f9f1; color: #087447; }
.pill.warn { background: #fff4ce; color: #8a6300; }
.pill.bad { background: #ffe5e5; color: #a72b2b; }
.actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.primary { background: var(--yellow); }
.green { background: #e6faef; color: #087447; }
.blue { background: #edf2ff; color: #244db3; }
.red { background: #ffe8e8; color: #a72b2b; }
.muted { color: var(--muted); }
.empty { padding: 24px 14px; text-align: center; color: var(--muted); border: 1px dashed #d8deec; border-radius: 20px; background: rgba(255,255,255,.6); }
.modal { position: fixed; inset: 0; background: rgba(15,20,33,.54); display: flex; align-items: flex-end; padding: 12px; z-index: 20; }
.modal.hidden { display: none; }
.modal-card { width: 100%; max-width: 920px; max-height: 92vh; overflow: auto; margin: 0 auto; background: #fff; border-radius: 26px; padding: 18px; position: relative; box-shadow: var(--shadow); }
.modal-close { position: sticky; top: 0; float: right; width: 36px; height: 36px; border-radius: 50%; background: #f1f3f8; font-size: 22px; line-height: 1; }
.material-box { margin-top: 14px; padding: 12px; border-radius: 18px; background: #f8fafc; border: 1px solid var(--line); }
.material-box pre { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; color: #3e485f; margin: 8px 0 0; max-height: 230px; overflow: auto; }
a.button-link { display: block; text-align: center; text-decoration: none; border-radius: 14px; padding: 12px; font-weight: 800; background: var(--ink); color: #fff; margin-top: 10px; }
.help-card li { margin: 8px 0; }
@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .actions { grid-template-columns: repeat(2, 1fr); }
  .modal { align-items: center; }
}
.hidden { display: none !important; }
.tabs { grid-template-columns: repeat(4, 1fr); }
.subtabs { display: flex; gap: 8px; overflow-x: auto; margin: 14px 0; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab { white-space: nowrap; background: #fff; border: 1px solid var(--line); box-shadow: none; padding: 9px 12px; flex-shrink: 0; min-height: 44px; display: flex; align-items: center; }
.subtab.active { background: var(--ink); color: #fff; }
.admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: 0 3px 16px rgba(26,38,66,.05); }
.stat-card b { display: block; font-size: 26px; }
.stat-card span { color: var(--muted); font-size: 13px; }
.admin-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0; }
#reportBox pre { white-space: pre-wrap; font-family: inherit; line-height: 1.5; }
@media (max-width: 520px) {
  .tabs { grid-template-columns: repeat(2, 1fr); }
  .topbar { align-items: flex-start; }
  .badge { font-size: 12px; }
  .admin-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .admin-actions { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Fullscreen Mini App tuning */
@media (max-width: 720px) {
  .app-shell { padding-left: 14px; padding-right: 14px; }
  .topbar { border-radius: 22px; }
  .modal { padding: 0; align-items: stretch; }
  .modal-card {
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
  }
}

.workflow-box {
  margin-top: 14px;
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
.workflow-box h3 {
  margin: 0 0 8px;
  font-size: 20px;
}
.steps {
  display: grid;
  gap: 8px;
  margin: 14px 0 12px;
}
.step-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f7f8fc;
  color: #334155;
}
.step-line.done {
  background: #eafaf1;
  color: #166534;
}
.step-line span {
  flex: 0 0 auto;
}
.step-line b {
  font-size: 14px;
  line-height: 1.35;
}
.locked-box {
  background: #fff8db;
  border-color: rgba(217, 119, 6, 0.2);
}
.warning-box {
  border-color: rgba(220, 38, 38, 0.2);
  background: #fff7f7;
}
.comment-box {
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: #f8fafc;
  color: #334155;
  font-size: 14px;
  line-height: 1.45;
}

/* v4.2.0 - Lesson workflow and fullscreen modal fix */
.next-step-box {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #eef5ff;
  border: 1px solid rgba(50, 103, 255, 0.18);
  color: #244061;
  line-height: 1.45;
}
.next-step-box b {
  display: block;
  color: var(--ink);
  margin-bottom: 4px;
}
.next-step-box.ok {
  background: #eafaf1;
  border-color: rgba(31, 165, 107, 0.22);
  color: #166534;
}
.next-step-box.warn {
  background: #fff8db;
  border-color: rgba(217, 119, 6, 0.24);
  color: #7c5400;
}
.field-label {
  display: block;
  margin-top: 14px;
  color: var(--ink);
}
.field-label span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.text-input {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: #f8fafc;
  resize: vertical;
  outline: none;
}
.text-input:focus {
  border-color: #111111;
  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.35);
  background: #fff;
}

@media (max-width: 720px) {
  .app-shell {
    padding-top: calc(14px + env(safe-area-inset-top));
  }
  .modal {
    padding: 0;
    align-items: stretch;
    background: #fff;
  }
  .modal-card {
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    padding: calc(66px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
    box-shadow: none;
  }
  .modal-close {
    position: fixed;
    top: calc(72px + env(safe-area-inset-top));
    right: 18px;
    z-index: 120;
    float: none;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(241, 243, 248, 0.96);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    font-size: 25px;
    line-height: 1;
  }
  #lessonContent {
    clear: none;
  }
}

@media (max-width: 380px) {
  .modal-close {
    top: calc(82px + env(safe-area-inset-top));
  }
  .modal-card {
    padding-top: calc(72px + env(safe-area-inset-top));
  }
}

/* v4.2.1 - teacher before-lesson prototype layout */
.lesson-top-spacer { height: 8px; }
.proto-box {
  margin-top: 14px;
  padding: 16px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(26, 38, 66, 0.05);
}
.lesson-facts {
  background: #f8fafc;
}
.lesson-facts > div { margin: 5px 0; color: var(--muted); }
.lesson-facts b { color: var(--ink); }
.todo-box {
  background: #f5f6fa;
  min-height: 82px;
}
.todo-box h3,
.prep-box h3,
.close-box h3,
.material-lite h3 { margin: 0 0 8px; }
.prep-box {
  background: #f3f4f6;
}
.prep-box .steps.compact { margin: 10px 0 12px; }
.prep-actions { grid-template-columns: 1fr; }
.file-upload-box {
  display: block;
  padding: 14px;
  margin: 12px 0 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  color: var(--muted);
  font-weight: 700;
}
.file-upload-box span { display: block; margin-bottom: 8px; color: var(--ink); }
.file-upload-box input { width: 100%; font-size: 14px; }
.wide { width: 100%; margin-top: 8px; }
.file-list { display: grid; gap: 8px; margin: 10px 0; }
.file-row {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}
.file-row span { font-weight: 800; color: #8a6300; }
.file-row small { color: var(--muted); }
.result-status { margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: #fff; }
.step-line.submitted { background: #fff4ce; color: #8a6300; }
.step-line.rejected { background: #ffe8e8; color: #a72b2b; }
.material-lite {
  background: #fff;
}
.material-lite .summary { margin-top: 12px; }
.material-lite .summary summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
}
.material-lite pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  color: #3e485f;
  margin: 8px 0 0;
  max-height: 220px;
  overflow: auto;
}
.prep-review-card .actions { grid-template-columns: 1fr 1fr; }

@media (max-width: 720px) {
  .modal {
    padding: 0;
    align-items: stretch;
    background: #fff;
  }
  .modal-card {
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
    box-shadow: none;
  }
  .modal-close {
    position: fixed;
    top: calc(72px + env(safe-area-inset-top));
    right: 18px;
    z-index: 120;
    float: none;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(241, 243, 248, 0.96);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    font-size: 24px;
    line-height: 1;
  }
  #lessonContent { padding-top: 0; }
  .lesson-top-spacer { height: 44px; }
}

/* v4.2.2 - preparation checklist uses real checkboxes instead of action buttons */
.prep-note {
  margin: 4px 0 12px;
}
.prep-checklist {
  display: grid;
  gap: 10px;
  margin: 12px 0 14px;
}
.prep-check {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.prep-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #16a34a;
}
.prep-check b {
  display: block;
  font-size: 15px;
  line-height: 1.35;
}
.prep-check small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
.prep-check.done {
  background: #eafaf1;
  border-color: rgba(22, 163, 74, 0.18);
  color: #166534;
}
.prep-check.submitted {
  background: #fff7d6;
  border-color: rgba(217, 119, 6, 0.2);
  color: #8a6300;
}
.prep-check.rejected {
  background: #ffe8e8;
  border-color: rgba(220, 38, 38, 0.2);
  color: #a72b2b;
}
.prep-check input:disabled {
  opacity: 1;
}



/* v4.2.3 - Yellow Club polished lesson screen */
:root {
  --yc-navy: #11182d;
  --yc-text: #172033;
  --yc-muted: #667089;
  --yc-yellow: #ffdb4d;
  --yc-yellow-soft: #fff3c4;
  --yc-green-soft: #effaf2;
  --yc-green-line: #c8ebd2;
  --yc-green-text: #166534;
  --yc-blue-soft: #eef3ff;
  --yc-blue-line: #d9e3ff;
  --yc-pink-soft: #fff0f1;
  --yc-pink-line: #ffd9de;
  --yc-cream: #fff8df;
  --yc-shadow: 0 12px 34px rgba(17, 24, 45, 0.08);
}
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--yc-text);
  overflow-x: hidden;
  touch-action: manipulation;
}
button, input, textarea, select {
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
input, textarea, select {
  font-size: 16px;
  touch-action: manipulation;
}
button {
  font-weight: 800;
  letter-spacing: .01em;
}
/* v7.1.13.2 — explicit light styling for every native form-control type,
   so a dark device theme can never leave one unreadable (defense in depth
   alongside color-scheme: light above). option/optgroup only accept a
   narrow set of CSS properties in most browsers (background/color) —
   still worth setting explicitly since option popups are exactly where
   the reported bug appeared. */
input, textarea, select, button {
  color-scheme: light;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  background: #fff;
  color: var(--ink, #172033);
  border: 1px solid var(--line, #e8ecf4);
  -webkit-appearance: none;
  appearance: none;
}
select {
  /* Custom chevron so removing the native (theme-dependent) arrow via
     appearance:none doesn't leave the control looking unfinished. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23657089' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 34px;
}
option, optgroup {
  background: #fff;
  color: var(--ink, #172033);
}
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  color: var(--ink, #172033);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 1;
}
/* Buttons keep the existing app-wide button:disabled{opacity:.5} dimming
   convention (defined later in this file) — only native form FIELDS get
   an explicit readable disabled style here, since those are what the
   reported dark-device bug actually affected. */
input:disabled, textarea:disabled, select:disabled {
  -webkit-text-fill-color: var(--muted, #657089);
  color: var(--muted, #657089);
  opacity: 1;
  background: #f2f3f7;
}
.dark {
  background: var(--yc-navy);
  color: #fff;
}
.modal-card {
  background: #fbfcff;
}
.modal-card h2 {
  font-size: 30px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--yc-navy);
}
.modal-card h3 {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.lesson-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-right: 56px;
  margin-bottom: 12px;
}
.lesson-modal-header p {
  font-size: 18px;
  color: var(--yc-muted);
  margin-top: 8px;
}
.modal-card .proto-box {
  margin-top: 14px;
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(17, 24, 45, 0.08);
  box-shadow: var(--yc-shadow);
}
.lesson-facts {
  background: #ffffff;
  padding: 20px !important;
}
.lesson-info-line {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  margin: 8px 0 !important;
  font-size: 17px;
}
.lesson-info-line b {
  font-weight: 900;
  color: var(--yc-navy);
}
.line-icon {
  color: #e5ad00;
  font-size: 18px;
  display: inline-flex;
  justify-content: center;
}
.lesson-statuses {
  margin-top: 16px;
  gap: 8px 10px;
}
.lesson-statuses .pill,
.status-row .pill {
  font-size: 14px;
  font-weight: 900;
  padding: 8px 14px;
  border-radius: 999px;
}
.pill.warn {
  background: var(--yc-yellow-soft);
  color: #8a6200;
}
.pill.ok {
  background: #e9faef;
  color: var(--yc-green-text);
}
.pill.bad {
  background: #ffe7e9;
  color: #a72b2b;
}
.todo-box,
.prep-box,
.close-box,
.material-lite {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: flex-start;
}
.box-icon {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex: 0 0 auto;
}
.todo-box {
  background: var(--yc-blue-soft);
  border-color: var(--yc-blue-line) !important;
  color: #26395f;
}
.todo-box .box-icon {
  background: linear-gradient(180deg, #4778ff, #2f63eb);
  color: #fff;
}
.todo-box h3,
.todo-box p {
  margin-top: 0;
}
.todo-box p {
  color: #3f4e6f;
  font-size: 16px;
  line-height: 1.45;
}
.todo-box.warn {
  background: #fff8dc;
  border-color: rgba(217, 119, 6, .2) !important;
}
.todo-box.ok {
  background: #edf9f2;
  border-color: rgba(31, 165, 107, .2) !important;
}
.prep-box {
  background: linear-gradient(180deg, #f3fbf5, #effaf2);
  border-color: var(--yc-green-line) !important;
}
.prep-icon {
  background: #dff6e8;
  color: var(--yc-green-text);
}
.prep-box h3 {
  color: var(--yc-green-text);
}
.prep-note {
  color: #5c6a62;
  font-size: 15px;
  line-height: 1.38;
}
.prep-checklist {
  gap: 8px;
  margin: 14px 0 16px;
}
.prep-check {
  min-height: 52px;
  grid-template-columns: 32px 1fr;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
.prep-check input {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid #a9b4c5;
  background: #fff;
  display: grid;
  place-items: center;
  margin: 0;
}
.prep-check input:checked {
  background: #42b978;
  border-color: #42b978;
}
.prep-check input:checked::after {
  content: "✓";
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}
.prep-check b {
  font-size: 16px;
  font-weight: 900;
}
.prep-check.done,
.prep-check.submitted {
  background: #e5f8eb;
  border-color: rgba(66, 185, 120, .28);
  color: var(--yc-green-text);
}
.prep-check.submitted {
  background: #f5f8de;
  color: #796000;
}
.upload-title {
  margin: 14px 0 8px;
  font-size: 16px;
  font-weight: 900;
  color: var(--yc-navy);
}
.file-upload-box {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  border: 1px dashed #aeb8cc;
  color: var(--yc-text);
}
.file-upload-box .file-icon {
  margin: 0;
  font-size: 20px;
}
.file-upload-box span {
  margin: 0;
}
.file-upload-box strong {
  padding: 8px 12px;
  border-radius: 12px;
  background: #f1f5ff;
  color: #5267ad;
  white-space: nowrap;
}
.file-upload-box input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
button.dark.wide,
button.primary.wide,
button.red.wide {
  min-height: 46px;
  border-radius: 14px;
  box-shadow: none;
}
button.primary.wide {
  background: var(--yc-yellow);
  color: #6f5200;
}
button.red.wide {
  background: #ffe8ea;
  color: #a72b2b;
}
.file-list,
.result-status {
  margin: 10px 0;
}
.close-box.locked-box {
  background: var(--yc-cream);
  border-color: rgba(217, 119, 6, .18) !important;
  position: relative;
}
.lock-icon {
  background: #ffeaa0;
  color: #8a6200;
}
.lock-badge {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  display: grid;
  place-items: center;
}
.material-lite {
  background: #fff1f2;
  border-color: var(--yc-pink-line) !important;
}
.notion-icon {
  background: #ffe0e5;
  color: #b42332;
}
.material-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.material-head h3 {
  color: #9f2436;
  margin: 0;
}
.notion-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid #ffc5ce;
  background: #ffe9ed;
  color: #b42332;
  text-decoration: none;
  font-weight: 900;
}
.material-summary {
  margin-top: 10px;
}
.material-summary b {
  display: block;
  margin-bottom: 8px;
  color: var(--yc-navy);
}
.material-summary ul {
  margin: 0;
  padding-left: 18px;
  color: #39445d;
}
.material-summary li {
  margin: 6px 0;
}
.material-summary li::marker {
  color: #ff9aaa;
}
@media (max-width: 720px) {
  .modal-card {
    padding: calc(74px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
    background: #fbfcff;
  }
  .modal-close {
    top: calc(86px + env(safe-area-inset-top));
    right: 18px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(17, 24, 45, .06);
  }
  .lesson-top-spacer { height: 0; }
  .todo-box,
  .prep-box,
  .close-box,
  .material-lite {
    grid-template-columns: 46px 1fr;
    gap: 12px;
  }
  .box-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .lesson-modal-header { padding-right: 58px; }
  .modal-card h2 { font-size: 26px; }
  .file-upload-box {
    grid-template-columns: 24px 1fr;
  }
  .file-upload-box strong {
    grid-column: 1 / -1;
    text-align: center;
  }
  .lock-badge { display: none; }
}


/* v4.2.4 - Mobile lesson layout alignment hotfix
   Keeps desktop layout, but makes Telegram mobile view compact and aligned. */
@media (max-width: 560px) {
  html, body {
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .modal {
    padding: 0;
    align-items: stretch;
    background: #fbfcff;
    overflow: hidden;
  }

  .modal-card {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    padding: calc(88px + env(safe-area-inset-top)) 14px calc(26px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: none;
  }

  .modal-close {
    position: fixed;
    top: calc(96px + env(safe-area-inset-top));
    right: 14px;
    width: 40px;
    height: 40px;
    z-index: 160;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(17,24,45,.08);
    box-shadow: 0 8px 22px rgba(17,24,45,.12);
    font-size: 22px;
  }

  #lessonContent {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .lesson-modal-header {
    display: block;
    padding-right: 50px;
    margin: 0 0 12px;
  }

  .modal-card h2 {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .lesson-modal-header p {
    font-size: 17px;
    line-height: 1.25;
    margin-top: 8px;
  }

  .modal-card .proto-box {
    width: 100%;
    max-width: 100%;
    margin-top: 14px;
    padding: 14px;
    border-radius: 20px;
  }

  .lesson-facts {
    padding: 16px !important;
  }

  .lesson-info-line {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    font-size: 16px;
    line-height: 1.35;
    margin: 7px 0 !important;
  }

  .line-icon {
    width: 22px;
    font-size: 16px;
    line-height: 1.35;
    justify-content: center;
  }

  .lesson-info-line div {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .lesson-statuses,
  .status-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .lesson-statuses .pill,
  .status-row .pill {
    flex: 0 1 auto;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.2;
    padding: 7px 11px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .todo-box,
  .prep-box,
  .close-box,
  .material-lite {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .box-icon {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .modal-card h3 {
    font-size: 22px;
    line-height: 1.15;
    margin: 0 0 8px;
    overflow-wrap: anywhere;
  }

  .todo-box p,
  .prep-note,
  .close-box p,
  .material-summary {
    font-size: 16px;
    line-height: 1.42;
  }

  .prep-checklist {
    gap: 9px;
    margin: 12px 0 14px;
  }

  .prep-check {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    min-height: 54px;
    padding: 12px;
    border-radius: 14px;
  }

  .prep-check input {
    width: 22px;
    height: 22px;
    border-radius: 7px;
  }

  .prep-check b {
    font-size: 16px;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  .prep-check small {
    font-size: 13px;
    line-height: 1.25;
  }

  .upload-title {
    font-size: 16px;
    margin: 14px 0 8px;
  }

  .file-upload-box {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 12px;
    border-radius: 14px;
  }

  .file-upload-box .file-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .file-upload-box #prepFileName {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .file-upload-box strong {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 42px;
    display: grid;
    place-items: center;
    text-align: center;
    margin-top: 4px;
  }

  button.dark.wide,
  button.primary.wide,
  button.red.wide {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 15px;
  }

  .result-status {
    font-size: 15px;
    line-height: 1.35;
    padding: 12px;
  }

  .close-box.locked-box {
    min-height: 116px;
  }

  .material-lite {
    background: #fff1f2;
  }

  .material-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }

  .notion-button {
    width: 100%;
    min-height: 44px;
    display: grid;
    place-items: center;
    text-align: center;
  }

  .material-summary {
    margin-top: 12px;
  }

  .material-summary ul {
    padding-left: 18px;
  }

  .material-summary li {
    margin: 7px 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 390px) {
  .modal-card {
    padding-left: 12px;
    padding-right: 12px;
  }
  .modal-card .proto-box {
    padding: 13px;
  }
  .todo-box,
  .prep-box,
  .close-box,
  .material-lite {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
  }
  .box-icon {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
  .modal-card h3 {
    font-size: 20px;
  }
}

/* v4.2.6 - header MK comment + mobile prep alignment */
.lesson-mk-comment {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #465168;
  font-size: 15px;
  line-height: 1.42;
}
.lesson-mk-comment b {
  color: var(--yc-navy, #11182d);
  font-weight: 900;
}

@media (max-width: 560px) {
  .prep-box {
    display: block;
    position: relative;
  }
  .prep-box .prep-icon {
    position: absolute;
    top: 14px;
    left: 14px;
  }
  .prep-box .box-body {
    width: 100%;
    min-width: 0;
  }
  .prep-box .box-body > h3,
  .prep-box .box-body > .prep-note {
    padding-left: 46px;
  }
  .prep-box .prep-checklist,
  .prep-box .upload-title,
  .prep-box .file-upload-box,
  .prep-box button.wide,
  .prep-box .file-list,
  .prep-box .result-status {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .prep-check {
    width: 100%;
  }
  .lesson-mk-comment {
    font-size: 14px;
    padding: 11px 12px;
  }
}

/* v4.2.9/v4.3.0 - after lesson closing flow */
.close-ready {
  margin: 14px 0;
  padding: 16px 18px;
  border-radius: 18px;
  border: 2px solid #38a7ff;
  background: #f0f9ff;
  color: #1e3a5f;
}
.close-ready h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .01em;
}
.close-ready p {
  margin: 0;
  font-size: 15px;
  line-height: 1.42;
  color: #39516e;
}
.close-ready.ready {
  border-color: rgba(35, 161, 104, .48);
  background: #eaf9ef;
  color: #12613e;
}
.active-close-box {
  background: #f2f3f5;
  border-color: rgba(148, 163, 184, .22) !important;
}
.active-close-box .close-icon {
  background: #e8ecf5;
  color: var(--yc-navy);
}
.close-checklist {
  display: grid;
  gap: 9px;
  margin: 14px 0 16px;
}
.close-check {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(148, 163, 184, .24);
  color: var(--yc-navy);
  cursor: pointer;
}
.close-check.done {
  background: #e5f8eb;
  border-color: rgba(66, 185, 120, .28);
  color: var(--yc-green-text);
}
.close-check input {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid #a9b4c5;
  background: #fff;
  display: grid;
  place-items: center;
  margin: 0;
}
.close-check input:checked {
  background: #42b978;
  border-color: #42b978;
}
.close-check input:checked::after {
  content: "✓";
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}
.close-check b {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}
.close-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.close-actions button.wide {
  width: 100%;
}
@media (max-width: 560px) {
  .close-ready {
    padding: 14px 16px;
    margin: 12px 0;
  }
  .close-ready h3 {
    font-size: 20px;
  }
  .active-close-box {
    display: block;
    position: relative;
  }
  .active-close-box .close-icon {
    position: absolute;
    top: 14px;
    left: 14px;
  }
  .active-close-box .box-body > h3,
  .active-close-box .box-body > .muted {
    padding-left: 46px;
  }
  .close-checklist,
  .close-check,
  .close-actions,
  .active-close-box .field-label,
  .active-close-box .text-input {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* v4.3.2 - speed and animation polish */
.modal:not(.hidden) {
  display: flex;
  animation: ycModalFadeIn 240ms ease-out;
}
.modal:not(.hidden) .modal-card {
  animation: ycModalSlideIn 300ms cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
}
.modal.is-closing {
  pointer-events: none;
  animation: ycModalFadeOut 200ms ease-in forwards;
}
.modal.is-closing .modal-card {
  animation: ycModalSlideOut 240ms ease-in forwards;
}
@keyframes ycModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ycModalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes ycModalSlideIn {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ycModalSlideOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(18px) scale(.985); }
}

.prep-check,
.close-check,
.card,
.proto-box,
button {
  transition: transform 150ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
button:active,
.open-lesson:active,
.prep-check:active,
.close-check:active {
  transform: scale(.985);
}
.prep-check input,
.close-check input {
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.prep-check input:checked,
.close-check input:checked {
  animation: ycCheckPop 180ms cubic-bezier(.2,.8,.2,1);
}
@keyframes ycCheckPop {
  0% { transform: scale(.86); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.prep-check.saving,
.close-check.saving {
  opacity: .72;
  position: relative;
}
.prep-check.saving::after,
.close-check.saving::after {
  content: "сохраняется...";
  position: absolute;
  right: 12px;
  bottom: 7px;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
}
.prep-check.saved-flash,
.close-check.saved-flash {
  box-shadow: 0 0 0 3px rgba(66,185,120,.12), 0 4px 12px rgba(17,24,45,.04);
}

.lesson-skeleton {
  display: grid;
  gap: 14px;
}
.skeleton-card {
  background: #fff;
  overflow: hidden;
}
.sk-line,
.sk-pills span {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef1f6 0%, #f8fafc 45%, #eef1f6 90%);
  background-size: 220% 100%;
  animation: ycSkeleton 1.1s ease-in-out infinite;
}
.sk-title { height: 30px; width: 72%; }
.sk-sub { width: 46%; }
.sk-line.short { width: 42%; }
.sk-line.mid { width: 64%; }
.skeleton-card .sk-line + .sk-line { margin-top: 10px; }
.sk-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.sk-pills span {
  width: 140px;
  height: 28px;
}
@keyframes ycSkeleton {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@media (max-width: 560px) {
  .modal:not(.hidden) .modal-card {
    animation-name: ycMobileModalSlideIn;
  }
  .modal.is-closing .modal-card {
    animation-name: ycMobileModalSlideOut;
  }
  @keyframes ycMobileModalSlideIn {
    from { opacity: 0; transform: translateY(34px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes ycMobileModalSlideOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(24px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* v4.3.3 - quiet list update after fast checkbox save */
.card.card-muted-update {
  animation: ycCardSoftPulse 420ms ease-out;
}
@keyframes ycCardSoftPulse {
  0% { transform: scale(.996); }
  100% { transform: scale(1); }
}

/* v4.3.4 - clear closed / overdue lesson states */
.lesson-card {
  position: relative;
  overflow: hidden;
}
.lesson-card-closed {
  background: linear-gradient(180deg, #eafaf1 0%, #f6fff9 100%);
  border-color: rgba(31, 165, 107, .34);
  box-shadow: 0 8px 24px rgba(31, 165, 107, .08);
}
.lesson-card-overdue {
  background: linear-gradient(180deg, #fff0f0 0%, #fff8f8 100%);
  border-color: rgba(216, 76, 76, .28);
  box-shadow: 0 8px 24px rgba(216, 76, 76, .07);
}
.lesson-card-closed .card-title,
.lesson-card-closed .meta b {
  color: #0f6b43;
}
.lesson-card-overdue .card-title,
.lesson-card-overdue .meta b {
  color: #9f2727;
}
.lesson-card-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 900;
}
.lesson-card-note.ok {
  background: rgba(31, 165, 107, .10);
  color: #0f6b43;
  border: 1px solid rgba(31, 165, 107, .20);
}
.lesson-card-note.bad {
  background: rgba(216, 76, 76, .10);
  color: #9f2727;
  border: 1px solid rgba(216, 76, 76, .20);
}
.lesson-card-closed .open-lesson {
  background: #dff7e8;
  color: #0f6b43;
}
.lesson-card-overdue .open-lesson {
  background: #ffe3e3;
  color: #9f2727;
}

.lesson-facts.closed {
  background: linear-gradient(180deg, #eafaf1 0%, #f8fff9 100%) !important;
  border-color: rgba(31, 165, 107, .34) !important;
  box-shadow: 0 12px 34px rgba(31, 165, 107, .10) !important;
}
.lesson-facts.closed .lesson-info-line,
.lesson-facts.closed .lesson-info-line b {
  color: #0f6b43;
}
.lesson-facts.closed .line-icon {
  color: #1fa56b;
}
.lesson-facts.past-open {
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%) !important;
  border-color: rgba(216, 76, 76, .18) !important;
}
.lesson-closed-box {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: center;
  background: linear-gradient(180deg, #e6f9ed 0%, #f4fff8 100%) !important;
  border-color: rgba(31, 165, 107, .34) !important;
  color: #0f6b43;
  animation: ycClosedNoticeIn 260ms cubic-bezier(.2,.8,.2,1);
}
.lesson-closed-box h3 {
  color: #0f6b43;
  margin: 0 0 6px;
}
.lesson-closed-box p {
  margin: 0;
  color: #22724d;
  font-size: 16px;
  line-height: 1.42;
}
.closed-icon {
  background: #42b978;
  color: #fff;
  box-shadow: 0 8px 20px rgba(66, 185, 120, .20);
}
@keyframes ycClosedNoticeIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
  .lesson-card-note {
    font-size: 13px;
    padding: 9px 11px;
  }
  .lesson-closed-box {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }
  .lesson-closed-box .closed-icon {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
  .lesson-closed-box p {
    font-size: 15px;
  }
}

/* v4.3.5 - Accurate modal close button centering */
.modal-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
}

.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: #172033;
  transform-origin: center;
  pointer-events: none;
}

.modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 560px) {
  .modal-close::before,
  .modal-close::after {
    width: 13px;
    height: 2px;
  }
}

/* v4.3.6 - parent report block fix: no grid overflow, no raw markup */
.report-box {
  display: block !important;
  background: #f8fbff !important;
  border-color: rgba(71, 120, 255, .18) !important;
  color: var(--yc-text, #172033);
}
.report-head {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}
.report-icon {
  background: #eaf0ff;
  color: #2f63eb;
}
.report-head h3 {
  margin: 0 0 6px;
  color: var(--yc-navy, #11182d);
}
.report-head p {
  margin: 0;
  color: var(--yc-muted, #667089);
  font-size: 15px;
  line-height: 1.35;
}
.report-text {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, .20);
  color: #253047;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.report-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.report-actions button {
  min-height: 44px;
  border-radius: 14px;
}
.report-actions button:first-child,
.report-actions button:last-child {
  grid-column: 1 / -1;
}
@media (max-width: 560px) {
  .report-head {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }
  .report-head .report-icon {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
  .report-head p,
  .report-text {
    font-size: 15px;
  }
  .report-actions {
    grid-template-columns: 1fr;
  }
}

/* v4.3.7 - preparation result downloads */
.file-download-link,
.download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #edf2ff;
  color: #244db3;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(26,38,66,.06);
}
.file-download-link {
  justify-self: start;
  margin-top: 2px;
}
.prep-review-card .actions {
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .prep-review-card .actions {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* v4.4.0 - senior teacher control and feedback */
.prep-feedback {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: #f8fbff;
  box-shadow: 0 8px 24px rgba(26, 38, 66, .06);
  margin: 12px 0;
}
.prep-feedback h3 {
  margin: 0 0 6px;
  color: #172033;
  font-size: 18px;
}
.prep-feedback p {
  margin: 0;
  color: #4c5873;
  font-size: 15px;
  line-height: 1.42;
}
.prep-feedback .review-file {
  margin: 0 0 6px;
  color: #667089;
}
.prep-feedback.ok {
  background: linear-gradient(180deg, #eafaf1 0%, #f8fff9 100%);
  border-color: rgba(31, 165, 107, .28);
}
.prep-feedback.bad {
  background: linear-gradient(180deg, #fff0f0 0%, #fff9f9 100%);
  border-color: rgba(216, 76, 76, .22);
}
.prep-feedback.warn {
  background: linear-gradient(180deg, #fff8dd 0%, #fffdf4 100%);
  border-color: rgba(245, 187, 45, .28);
}
.feedback-icon {
  background: #eef4ff;
  color: #244db3;
}
.prep-feedback.ok .feedback-icon {
  background: #42b978;
  color: #fff;
}
.prep-feedback.bad .feedback-icon {
  background: #ffe1e1;
  color: #a72b2b;
}
.prep-feedback.warn .feedback-icon {
  background: #fff0bd;
  color: #8a6300;
}
.control-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.control-summary > div {
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(17, 24, 45, .08);
  box-shadow: 0 4px 18px rgba(17, 24, 45, .05);
}
.control-summary b {
  display: block;
  font-size: 24px;
  color: #11182d;
  line-height: 1;
}
.control-summary span {
  display: block;
  margin-top: 5px;
  color: #667089;
  font-size: 13px;
  line-height: 1.25;
}
.control-card {
  border-left: 5px solid transparent;
}
.control-card.control-problem {
  background: linear-gradient(180deg, #fff2f2 0%, #ffffff 100%);
  border-left-color: #d84c4c;
}
.control-card.control-review {
  background: linear-gradient(180deg, #fff8dd 0%, #ffffff 100%);
  border-left-color: #f5bb2d;
}
.control-card.control-overdue {
  background: linear-gradient(180deg, #fff0f0 0%, #ffffff 100%);
  border-left-color: #e85c5c;
}
.control-card.control-prep {
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
  border-left-color: #ffd84d;
}
.control-card.control-ok {
  background: linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
  border-left-color: #4b7bec;
}
.control-card.control-closed {
  background: linear-gradient(180deg, #eafaf1 0%, #ffffff 100%);
  border-left-color: #42b978;
}
.control-topline {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.control-attention {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(17, 24, 45, .06);
  color: #42506c;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 7px;
}
.control-date {
  flex: 0 0 auto;
  font-size: 13px;
  color: #667089;
  font-weight: 700;
  text-align: right;
}
.control-status-row {
  margin-top: 10px;
}
.control-actions {
  margin-top: 12px;
  grid-template-columns: 1fr;
}
.control-actions .download-button {
  min-height: 44px;
}
@media (min-width: 720px) {
  .control-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .control-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .prep-feedback {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }
  .prep-feedback .feedback-icon {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
  .control-topline {
    display: block;
  }
  .control-date {
    display: block;
    text-align: left;
    margin-top: 4px;
  }
}

/* v4.5.0 - test role switcher */
.test-role-panel {
  margin: 12px 0 14px;
  padding: 14px;
  border-radius: 20px;
  background: #fffdf1;
  border: 1px solid rgba(255, 216, 77, 0.75);
  box-shadow: 0 6px 18px rgba(26, 38, 66, 0.06);
}
.test-role-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.test-role-head b {
  display: block;
  font-size: 15px;
  color: var(--ink);
}
.test-role-head span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: #7c5c00;
  line-height: 1.35;
}
.test-role-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.test-role-controls label span {
  display: block;
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.test-role-controls select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}
@media (min-width: 720px) {
  .test-role-controls {
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.4fr) auto auto;
    align-items: end;
  }
  .test-role-controls label.hidden {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
  }
}

/* v7.1.13.1 — owner-only "Клиент / родитель" test role: trusted
   client-context lookup panel. Own scoped input styling — .test-role-
   controls only ever styled <select> (see the round-2 note on
   .otn-controls for why that's a known trap to avoid repeating). */
.test-client-ctx input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line, #edf0f5);
  border-radius: 14px;
  padding: 11px 12px;
  background: #fff;
  color: var(--ink, #111);
  font: inherit;
  font-weight: 700;
}
.test-client-ctx-row {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
}
.test-client-ctx-row b { display: block; font-size: 13px; }
.test-client-ctx-row span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted, #7b8190); }

/* v7.1.13.2 — roughly half the previous height: single compact row,
   smaller type, a small icon-scale button instead of a full-size one so
   it never dominates the card. Still clearly a distinct warning-toned
   surface (stays noticeable/safe), just not competing with the premium
   header below it. */
.owner-test-client-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #fff3ce;
  border: 1px solid rgba(255, 196, 20, .5);
}
.owner-test-client-banner-text { min-width: 0; flex: 1 1 auto; }
.owner-test-client-banner b { display: block; font-size: 11px; font-weight: 800; color: #7c5c00; line-height: 1.25; }
.owner-test-client-banner span {
  display: block; font-size: 10.5px; color: #8a7a3a; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.owner-test-client-banner-btn {
  flex: 0 0 auto;
  max-width: 40%;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(124, 92, 0, .3);
  background: #fff;
  color: #7c5c00;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}

/* v4.6.0 - bottom role tab bar and AI question screen */
.app-shell {
  padding-bottom: calc(148px + env(safe-area-inset-bottom));
}
.tabs.bottom-tabbar {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 28px));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(232, 236, 244, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 38px rgba(26, 38, 66, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 18;
}
.tabs.bottom-tabbar .tab {
  min-width: 0;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 5px;
  border-radius: 18px;
  background: transparent;
  color: #7a8397;
  box-shadow: none;
  font-size: 12px;
  line-height: 1.05;
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.tabs.bottom-tabbar .tab.hidden {
  display: none !important;
}
.tabs.bottom-tabbar .tab-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
}
.tabs.bottom-tabbar .tab-label {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}
.tabs.bottom-tabbar .tab.active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.20);
  transform: translateY(-1px);
}
.tabs.bottom-tabbar .tab.active .tab-icon {
  background: rgba(255, 255, 255, 0.14);
}
.tabs.bottom-tabbar .tab:active {
  transform: translateY(1px) scale(0.98);
}
.ask-card {
  display: grid;
  gap: 14px;
}
.ask-messages {
  display: grid;
  gap: 10px;
  min-height: 260px;
  max-height: 52vh;
  overflow: auto;
  padding: 6px 2px;
  scroll-behavior: smooth;
}
.ask-empty {
  min-height: 210px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed #d8deec;
  border-radius: 20px;
  background: rgba(248, 250, 252, .72);
  padding: 24px 16px;
}
.ask-empty b {
  color: var(--ink);
  font-size: 18px;
}
.ask-message {
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 3px 12px rgba(26,38,66,.04);
}
.ask-message.user {
  justify-self: end;
  background: #fff8d8;
  border-color: rgba(255, 216, 77, .68);
}
.ask-message.agent {
  justify-self: start;
  background: #f8fafc;
}
.ask-message-role {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ask-message-text {
  line-height: 1.48;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ask-form {
  display: grid;
  gap: 10px;
}
.ask-input {
  min-height: 96px;
  margin-top: 0;
}
.ask-submit:disabled {
  opacity: .7;
  cursor: wait;
}
@media (min-width: 720px) {
  .tabs.bottom-tabbar {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .ask-form {
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: end;
  }
  .ask-submit {
    min-height: 54px;
  }
}
@media (max-width: 420px) {
  .tabs.bottom-tabbar {
    width: calc(100% - 18px);
    padding: 7px;
    border-radius: 22px;
  }
  .tabs.bottom-tabbar .tab {
    min-height: 54px;
    border-radius: 16px;
    font-size: 11px;
  }
  .tabs.bottom-tabbar .tab-icon {
    width: 25px;
    height: 25px;
    font-size: 16px;
  }
}

/* v4.7.0 - teacher automatic tasks page */
.task-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 6px 0 10px;
}
.task-summary-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 10px;
  box-shadow: 0 3px 16px rgba(26,38,66,.045);
}
.task-summary-card b {
  display: block;
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
}
.task-summary-card span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.task-help-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: #fff8d8;
  border: 1px solid rgba(255, 216, 77, .55);
  color: #705713;
  font-weight: 700;
  line-height: 1.35;
}
.tasks-cards {
  gap: 12px;
}
.task-section {
  display: grid;
  gap: 7px;
}
.task-section-title {
  padding: 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.task-section-list {
  display: grid;
  gap: 9px;
}
.task-card {
  display: grid;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid #dbe2ef;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(26,38,66,.05);
}
.task-card.urgent,
.task-card.danger {
  background: #fff1f1;
  border-color: rgba(216, 76, 76, .25);
  border-left-color: var(--red);
}
.task-card.warning {
  background: #fff9df;
  border-color: rgba(255, 216, 77, .55);
  border-left-color: #f2c500;
}
.task-card.wait {
  background: #eef7ff;
  border-color: rgba(57, 138, 255, .25);
  border-left-color: #4594ff;
}
.task-kicker {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.task-title {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.15;
  font-weight: 900;
}
.task-subtitle {
  margin-top: 3px;
  color: #34415d;
  font-size: 14px;
  font-weight: 800;
}
.task-text {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.36;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.task-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.task-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(216, 222, 236, .72);
  color: #4e5a73;
  font-size: 11px;
  font-weight: 800;
}
.task-actions {
  display: grid;
}
.task-empty {
  display: grid;
  gap: 6px;
}
.task-empty b {
  color: var(--ink);
  font-size: 17px;
}
.task-empty span {
  color: var(--muted);
  line-height: 1.4;
}
@media (min-width: 720px) {
  .tasks-cards {
    grid-template-columns: 1fr;
  }
  .task-card {
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
  }
}
@media (max-width: 380px) {
  .task-summary-card {
    padding: 10px 8px;
  }
  .task-summary-card b {
    font-size: 21px;
  }
  .task-summary-card span {
    font-size: 11px;
  }
}

/* v4.7.1 - compact teacher tasks fixes */
.task-card.normal {
  background: #fff;
}
.task-card .primary {
  min-height: 46px;
  padding: 12px 14px;
}
.tasks-cards .task-section:last-child {
  margin-bottom: 16px;
}
@media (max-width: 420px) {
  .app-shell {
    padding-bottom: calc(156px + env(safe-area-inset-bottom));
  }
  .task-summary {
    gap: 7px;
  }
  .task-card {
    padding: 12px;
  }
}

.task-group-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.task-group-list.hidden { display: none; }
.task-group-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(232, 196, 62, .45);
  border-radius: 14px;
  background: rgba(255, 255, 255, .7);
}
.task-group-index {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff4ce;
  color: #8a6300;
  font-size: 12px;
  font-weight: 900;
}
.task-group-info {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.task-group-info b {
  font-size: 13px;
  line-height: 1.2;
}
.task-group-info span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}
.task-group-item .secondary {
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
}

/* v4.8.0 - teacher instruction page */
.help-head {
  margin-bottom: 12px;
}
.help-guide {
  display: grid;
  gap: 12px;
}
.help-card {
  display: grid;
  gap: 12px;
  line-height: 1.45;
}
.help-card h3 {
  margin: 0;
  color: var(--yc-navy, var(--ink));
  font-size: 21px;
  line-height: 1.15;
  font-weight: 900;
}
.help-card h4 {
  margin: 0 0 8px;
  color: var(--yc-navy, var(--ink));
  font-size: 17px;
  font-weight: 900;
}
.help-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.help-card ol {
  margin: 0;
  padding-left: 22px;
}
.help-card li {
  margin: 7px 0;
  color: #34415d;
}
.help-hero {
  grid-template-columns: 52px 1fr;
  align-items: start;
  background: linear-gradient(135deg, #fff8d8, #ffffff);
  border-color: rgba(255, 216, 77, .55);
}
.help-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff1b5;
  font-size: 23px;
}
.help-steps {
  display: grid;
  gap: 9px;
}
.help-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(232, 236, 244, .9);
}
.help-step span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: #614a00;
  font-weight: 900;
}
.help-step b {
  display: block;
  color: var(--ink);
  font-weight: 900;
}
.help-step small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.help-page-list {
  display: grid;
  gap: 9px;
}
.help-page-list.compact {
  gap: 8px;
}
.help-page-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  padding: 11px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(232, 236, 244, .9);
}
.help-page-item > span {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(26,38,66,.06);
}
.help-page-item b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}
.help-page-item p {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.35;
}
.help-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.help-status {
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  display: grid;
  gap: 3px;
}
.help-status b {
  color: var(--ink);
  font-weight: 900;
}
.help-status span {
  color: var(--muted);
  font-size: 13px;
}
.help-status.white { background: #ffffff; }
.help-status.yellow {
  background: #fff8db;
  border-color: rgba(255, 216, 77, .55);
}
.help-status.red {
  background: #fff0f0;
  border-color: rgba(216, 76, 76, .25);
}
.help-status.green {
  background: #eafaf1;
  border-color: rgba(31, 165, 107, .25);
}
.help-status.blue {
  background: #eef7ff;
  border-color: rgba(57, 138, 255, .25);
}
.help-split {
  display: grid;
  gap: 10px;
}
.help-split > div {
  padding: 12px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
}
.help-note {
  padding: 12px;
  border-radius: 16px;
  background: #fff8db;
  border: 1px solid rgba(255, 216, 77, .55);
  color: #705713 !important;
  font-weight: 800;
}
.help-question-grid {
  display: grid;
  gap: 8px;
}
.help-question-grid span {
  padding: 10px 12px;
  border-radius: 999px;
  background: #eef2fb;
  color: #2e426b;
  font-size: 13px;
  font-weight: 800;
}
/* v7.1.7 — same pill look as .help-question-grid span, but as a real
   clickable <button> for the Payments Help table of contents. Additive:
   the existing span rule above is untouched. */
.help-question-grid button {
  padding: 10px 12px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: #eef2fb;
  color: #2e426b;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}
.help-question-grid button:active { transform: scale(.97); }
.help-accordion {
  display: grid;
  gap: 8px;
}
.help-accordion details {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}
.help-accordion summary {
  padding: 12px 14px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 900;
  list-style-position: inside;
}
.help-accordion details[open] summary {
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}
.help-accordion details p {
  padding: 12px 14px 14px;
  color: #34415d;
  font-size: 14px;
  line-height: 1.45;
}

/* ALE-36 — client Help page: small additions on top of the existing
   .cab-header--sub / .cab-card / .cab-more-row / .help-accordion visual
   language (the already-approved client cabinet screens), not a new
   design system. .help-faq-* is the same .help-accordion box shape, with
   a summary row laid out like a "Ещё" row (icon + text + chevron). */
.cab-header-sub-desc.wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.help-intro-card .help-checklist { margin-top: 10px; }
.help-section-title {
  padding: 0 4px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.help-faq-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.help-faq-summary::-webkit-details-marker { display: none; }
.help-faq-summary-text { flex: 1 1 auto; min-width: 0; }
.help-faq-summary-title { font-size: 14.5px; font-weight: 750; color: var(--ink, #111); }
.help-faq-summary-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted, #7b8190); }
.help-faq-chevron { transition: transform 150ms ease; }
.help-faq[open] .help-faq-chevron { transform: rotate(90deg); }
/* ALE-36 follow-up — production visual review: the original 60px left
   indent (aligned under the summary icon) read as a too-narrow, too-tall
   text column on real devices. Left padding now matches the summary row's
   own 14px edge padding instead of the icon offset — text starts under
   the icon's row, not indented past it. */
.help-faq-body { padding: 0 14px 14px; }
.help-faq-body p { margin: 0 0 8px; color: #34415d; font-size: 14px; line-height: 1.5; }
.help-faq-body p:last-child { margin-bottom: 0; }
.help-faq-body ul { margin: 8px 0 0; padding-left: 18px; }
.help-faq-body li { margin: 6px 0; color: #34415d; font-size: 14px; line-height: 1.45; }

@media (min-width: 720px) {
  .help-steps,
  .help-status-grid,
  .help-split,
  .help-question-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v4.8.1 - teacher instruction layout polish */
.help-card-soft {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
}
.help-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.help-route {
  display: grid;
  gap: 10px;
}
.help-route-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px;
  border-radius: 17px;
  background: #f8fafc;
  border: 1px solid rgba(232, 236, 244, .9);
}
.help-route-num {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: #614a00;
  font-weight: 900;
  line-height: 1;
  flex: 0 0 auto;
}
.help-route-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.help-route-body b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}
.help-route-body small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.help-page-grid {
  grid-template-columns: 1fr;
}
.help-status-legend {
  grid-template-columns: 1fr;
}
.help-workflow-grid {
  display: grid;
  gap: 10px;
}
.help-workflow-card {
  padding: 13px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #ffffff;
  display: grid;
  gap: 10px;
}
.help-workflow-card.before {
  background: linear-gradient(180deg, #fffdf2, #ffffff);
  border-color: rgba(255, 216, 77, .42);
}
.help-workflow-card.after {
  background: linear-gradient(180deg, #effaf5, #ffffff);
  border-color: rgba(31, 165, 107, .22);
}
.help-workflow-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.help-workflow-head span {
  min-width: 38px;
  height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 216, 77, .35);
  color: #705713;
  font-size: 12px;
  font-weight: 900;
}
.help-workflow-card.after .help-workflow-head span {
  background: rgba(31, 165, 107, .12);
  color: #12663e;
}
.help-workflow-head h4 {
  margin: 0;
}
.help-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.help-checklist li {
  position: relative;
  margin: 0;
  padding-left: 24px;
  color: #34415d;
  font-size: 14px;
  line-height: 1.38;
}
.help-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff1b5;
  box-shadow: inset 0 0 0 4px #ffd84d;
}
.help-workflow-card.after .help-checklist li::before {
  background: #e5f8ee;
  box-shadow: inset 0 0 0 4px #37b772;
}
.help-section-details {
  display: block;
  padding: 0;
  overflow: hidden;
}
.help-section-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px;
  color: var(--yc-navy, var(--ink));
  font-size: 20px;
  line-height: 1.15;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.help-section-details > summary::-webkit-details-marker {
  display: none;
}
.help-section-details > summary::after {
  content: "⌄";
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #f3f6fb;
  color: #6c7890;
  font-size: 16px;
  flex: 0 0 auto;
}
.help-section-details[open] > summary::after {
  content: "⌃";
}
.help-section-content {
  display: grid;
  gap: 12px;
  padding: 0 18px 18px;
}

/* Fix for the previous quick-route grid if an old .help-step block is still rendered from cache */
.help-step b,
.help-step small {
  grid-column: 2;
  min-width: 0;
}

@media (min-width: 560px) {
  .help-route,
  .help-workflow-grid,
  .help-page-grid,
  .help-question-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .help-status-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .help-status-legend .help-status.blue {
    grid-column: 1 / -1;
  }
}

@media (max-width: 390px) {
  .help-route-step {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 11px;
  }
  .help-route-num {
    width: 30px;
    height: 30px;
  }
  .help-section-details > summary {
    padding: 16px;
    font-size: 19px;
  }
  .help-section-content {
    padding: 0 16px 16px;
  }
}

/* v4.9.0 - stronger teacher chat page */
.chat-head {
  margin-bottom: 12px;
}
.chat-hero-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fffdf0, #ffffff);
  border-color: rgba(255, 216, 77, .45);
}
.chat-hero-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #fff2ad;
  font-size: 24px;
}
.chat-hero-card h3,
.chat-quick-card h3 {
  margin: 0 0 6px;
  font-size: 19px;
}
.chat-hero-card p,
.chat-quick-card span {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.chat-quick-card {
  margin-bottom: 12px;
}
.chat-quick-head {
  margin-bottom: 12px;
}
.chat-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.chat-chip {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 15px;
  background: #f3f6fc;
  color: #263653;
  border: 1px solid #e4eaf5;
  box-shadow: none;
  text-align: left;
  font-weight: 900;
}
.chat-chip:active {
  transform: translateY(1px) scale(.99);
}
.chat-card {
  padding: 12px;
  margin-bottom: 8px;
}
.chat-messages {
  min-height: 300px;
  max-height: 48vh;
  padding: 4px;
}
.chat-empty {
  background: linear-gradient(180deg, #f8fafc, #ffffff);
}
.ask-message.agent .ask-message-role::after {
  content: " · Yellow Club";
  color: #9aa3b6;
  font-weight: 800;
}
.chat-form {
  position: sticky;
  bottom: calc(86px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(26, 38, 66, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.chat-input {
  min-height: 84px;
  border-radius: 14px;
  resize: vertical;
}
.chat-submit {
  min-height: 48px;
  border-radius: 14px;
  font-weight: 900;
}
@media (min-width: 720px) {
  .chat-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chat-card { padding: 14px; }
  .chat-form { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .chat-hero-card { grid-template-columns: 42px 1fr; }
  .chat-hero-icon { width: 42px; height: 42px; border-radius: 15px; font-size: 21px; }
  .chat-quick-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .chat-chip { min-height: 42px; padding: 9px 10px; font-size: 13px; }
  .chat-messages { min-height: 280px; }
}

/* v4.9.1 - messenger-style chat UI */
.chat-panel.active {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 190px);
  padding-bottom: calc(216px + env(safe-area-inset-bottom));
}
.chat-panel .section-head.chat-head {
  margin: 4px 0 10px;
}
.chat-panel .section-head.chat-head h2 {
  font-size: 26px;
  line-height: 1.08;
}
.chat-panel .section-head.chat-head p {
  max-width: 640px;
  line-height: 1.42;
}
.chat-guide-card,
.chat-quick-card {
  padding: 0;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, .86);
}
.chat-guide-card summary,
.chat-quick-card summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 900;
}
.chat-guide-card summary::-webkit-details-marker,
.chat-quick-card summary::-webkit-details-marker {
  display: none;
}
.chat-guide-card summary::after,
.chat-quick-card summary::after {
  content: "⌄";
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #f3f6fc;
  color: #657089;
  font-size: 15px;
  flex: 0 0 auto;
  transition: transform .18s ease;
}
.chat-guide-card[open] summary::after,
.chat-quick-card[open] summary::after {
  transform: rotate(180deg);
}
.chat-guide-card summary small,
.chat-quick-card summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.chat-guide-body {
  padding: 0 14px 14px;
  color: var(--muted);
  line-height: 1.45;
}
.chat-guide-body p {
  margin: 0 0 8px;
}
.chat-guide-body p:last-child {
  margin-bottom: 0;
}
.chat-quick-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 14px 14px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.chat-quick-grid::-webkit-scrollbar {
  display: none;
}
.chat-chip {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 999px;
  white-space: nowrap;
  scroll-snap-align: start;
  background: #f3f6fc;
  border: 1px solid #e4eaf5;
  box-shadow: none;
  color: #263653;
  font-size: 13px;
  font-weight: 900;
}
.chat-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 52vh;
  margin-top: 2px;
}
.chat-messages,
.ask-messages.chat-messages {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 52vh;
  max-height: none;
  overflow: visible;
  padding: 8px 2px 18px;
  scroll-behavior: smooth;
}
.chat-empty.ask-empty {
  min-height: 46vh;
  width: 100%;
  align-self: stretch;
  border-style: dashed;
  background: linear-gradient(180deg, #f8fafc, #ffffff);
}
.ask-message {
  max-width: min(88%, 720px);
  width: fit-content;
  padding: 12px 14px;
  border-radius: 20px;
  box-shadow: 0 6px 22px rgba(26, 38, 66, .055);
}
.ask-message.user {
  align-self: flex-end;
  justify-self: auto;
  border-bottom-right-radius: 7px;
  background: #fff8d8;
}
.ask-message.agent {
  align-self: flex-start;
  justify-self: auto;
  border-bottom-left-radius: 7px;
  background: #ffffff;
}
.ask-message-role {
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .07em;
}
.ask-message-text {
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: normal;
}
.ask-message-text strong {
  font-weight: 900;
}
.chat-link {
  color: #1f63d7;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.chat-form,
.ask-form.chat-form {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(92px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 75;
  width: min(560px, calc(100% - 28px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  gap: 8px;
  align-items: end;
  padding: 8px;
  border-radius: 24px;
  border: 1px solid rgba(232, 236, 244, .94);
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 36px rgba(26, 38, 66, .16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.chat-input,
.ask-input.chat-input {
  width: 100%;
  min-height: 48px;
  max-height: 132px;
  margin: 0;
  padding: 13px 14px;
  resize: none;
  overflow: auto;
  border-radius: 18px;
  line-height: 1.35;
  background: #f8fafc;
}
.chat-submit,
.ask-submit.chat-submit {
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}
.chat-submit:disabled,
.ask-submit.chat-submit:disabled {
  opacity: .66;
  cursor: wait;
}
@media (min-width: 720px) {
  .chat-panel.active {
    padding-bottom: calc(220px + env(safe-area-inset-bottom));
  }
  .chat-shell {
    min-height: 58vh;
  }
  .chat-messages,
  .ask-messages.chat-messages {
    min-height: 58vh;
  }
  .chat-form,
  .ask-form.chat-form {
    bottom: calc(104px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 420px) {
  .chat-panel.active {
    padding-bottom: calc(210px + env(safe-area-inset-bottom));
  }
  .chat-panel .section-head.chat-head h2 {
    font-size: 24px;
  }
  .chat-guide-card summary,
  .chat-quick-card summary {
    min-height: 46px;
    padding: 11px 12px;
  }
  .chat-guide-card summary small,
  .chat-quick-card summary small {
    display: none;
  }
  .chat-guide-body {
    padding: 0 12px 12px;
  }
  .chat-quick-grid {
    padding: 0 12px 12px;
  }
  .ask-message {
    max-width: 91%;
  }
  .chat-form,
  .ask-form.chat-form {
    width: min(560px, calc(100% - 18px));
    bottom: calc(88px + env(safe-area-inset-bottom));
    border-radius: 22px;
  }
}

/* v4.9.2 - chat input/tabbar polish */
.chat-quick-grid {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 16px;
  scroll-padding-inline: 20px;
}
.chat-chip {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}
.chat-submit,
.ask-submit.chat-submit {
  overflow: hidden;
  border-radius: 999px;
  aspect-ratio: 1 / 1;
  white-space: nowrap;
  text-indent: 0;
}
.chat-send-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  transform: translateX(1px);
}
.chat-submit.loading .chat-send-icon,
.ask-submit.chat-submit.loading .chat-send-icon {
  display: none;
}
.chat-submit.loading::after,
.ask-submit.chat-submit.loading::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 3px solid rgba(23, 32, 51, .18);
  border-top-color: rgba(23, 32, 51, .82);
  animation: chat-spin .72s linear infinite;
}
@keyframes chat-spin {
  to { transform: rotate(360deg); }
}
body.chat-input-focused .tabs.bottom-tabbar {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(130%);
}
body.chat-input-focused .chat-form,
body.chat-input-focused .ask-form.chat-form {
  bottom: calc(10px + env(safe-area-inset-bottom));
}
body.chat-input-focused .chat-panel.active {
  padding-bottom: calc(106px + env(safe-area-inset-bottom));
}
@media (max-width: 420px) {
  .chat-quick-grid {
    padding-left: 18px;
    padding-right: 18px;
  }
  body.chat-input-focused .chat-form,
  body.chat-input-focused .ask-form.chat-form {
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
}
/* v4.9.3 - visible chat input caret */
.chat-input,
.ask-input.chat-input {
  caret-color: #111827;
  color: #111827;
}

.chat-input::selection,
.ask-input.chat-input::selection {
  background: rgba(255, 216, 77, .55);
  color: #111827;
}

/* v5.0.0 - Yellow Club platform skin and teacher work schedule */
:root {
  --yellow: #ffcb1f;
  --yellow-2: #fff4c8;
  --ink: #111111;
  --muted: #7b8190;
  --line: #edf0f5;
  --card: #ffffff;
  --bg: #f7f8fb;
  --shadow: 0 18px 46px rgba(18, 23, 34, 0.08);
}
body {
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top right, rgba(255, 203, 31, .12), transparent 34%), var(--bg);
  color: var(--ink);
  letter-spacing: .015em;
}
.topbar {
  background: linear-gradient(135deg, #fffdf4, #fff6cb 66%, #ffdc57);
  border: 1px solid rgba(255, 203, 31, .58);
  box-shadow: 0 18px 52px rgba(255, 203, 31, .16);
}
.eyebrow {
  color: #b48900;
  letter-spacing: .12em;
}
.badge {
  background: rgba(255, 255, 255, .88);
  color: #111;
  border: 1px solid rgba(255, 203, 31, .38);
}
.card,
.stat-card,
.task-summary-card,
.chat-guide-card,
.chat-quick-card {
  border-color: rgba(17, 17, 17, .06);
  box-shadow: 0 12px 34px rgba(18, 23, 34, .055);
}
.primary {
  background: var(--yellow);
  color: #111;
  box-shadow: none;
}
.secondary {
  background: #f2f4f8;
  color: #111827;
  box-shadow: none;
}
.tabs.bottom-tabbar {
  width: min(620px, calc(100% - 24px));
  padding: 7px;
  border-radius: 28px;
  border-color: rgba(17, 17, 17, .06);
  box-shadow: 0 18px 52px rgba(18, 23, 34, .18);
}
.tabs.bottom-tabbar .tab {
  min-height: 60px;
  border-radius: 21px;
  color: #7b8190;
  font-size: 11px;
}
.tabs.bottom-tabbar .tab-icon {
  font-size: 17px;
}
.tabs.bottom-tabbar .tab-label {
  max-width: 100%;
  font-size: 10.5px;
  letter-spacing: .01em;
}
.tabs.bottom-tabbar .tab.active {
  background: #111;
  color: #fff;
  box-shadow: 0 12px 28px rgba(17, 17, 17, .18);
}
.tabs.bottom-tabbar .tab.active .tab-icon {
  background: var(--yellow);
  color: #111;
}
@media (max-width: 380px) {
  .tabs.bottom-tabbar .tab-label { font-size: 9.5px; }
  .tabs.bottom-tabbar .tab { padding-left: 3px; padding-right: 3px; }
}

.schedule-head h2,
.schedule-form-title h3,
.schedule-day-section h3,
.schedule-hero-card h3 {
  margin: 0;
}
.schedule-hero-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #ffffff, #fff9db);
  border-color: rgba(255, 203, 31, .42);
}
.schedule-hero-mark {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: #fff;
  font-weight: 1000;
  font-size: 18px;
  box-shadow: 0 12px 26px rgba(255, 203, 31, .28);
}
.schedule-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 14px;
}
.schedule-day-card {
  min-height: 72px;
  padding: 10px 8px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .06);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
.schedule-day-card b {
  font-size: 14px;
  line-height: 1;
}
.schedule-day-card span {
  max-width: 100%;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-day-card.has-slots {
  background: #fff8d8;
  border-color: rgba(255, 203, 31, .55);
}
.schedule-day-card.has-slots b {
  color: #111;
}
.schedule-form-card {
  margin-bottom: 14px;
}
.schedule-form-title {
  margin-bottom: 12px;
}
.schedule-form {
  display: grid;
  grid-template-columns: 1.15fr .8fr .8fr 1.1fr;
  gap: 10px;
}
.schedule-form label {
  display: grid;
  gap: 6px;
  color: #687086;
  font-size: 12px;
  font-weight: 900;
}
.schedule-form input,
.schedule-form select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
  background: #f8fafc;
  color: #111827;
  font: inherit;
  font-weight: 800;
  outline: none;
}
.schedule-form input:focus,
.schedule-form select:focus {
  border-color: rgba(255, 203, 31, .75);
  box-shadow: 0 0 0 4px rgba(255, 203, 31, .16);
  background: #fff;
}
.schedule-note-field,
.schedule-form-actions {
  grid-column: 1 / -1;
}
.schedule-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.schedule-cards {
  gap: 14px;
}
.schedule-day-section {
  display: grid;
  gap: 10px;
}
.schedule-day-section h3 {
  padding-left: 4px;
  color: #6f7688;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.schedule-slot-list {
  display: grid;
  gap: 10px;
}
.schedule-slot-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .06);
  box-shadow: 0 10px 28px rgba(18, 23, 34, .045);
}
.schedule-slot-time {
  min-height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: #111;
  font-weight: 1000;
}
.schedule-slot-info {
  display: grid;
  gap: 2px;
}
.schedule-slot-info b {
  font-size: 16px;
}
.schedule-slot-info span {
  color: var(--muted);
  line-height: 1.3;
}
.schedule-slot-actions {
  display: flex;
  gap: 7px;
}
.schedule-slot-actions button {
  padding: 9px 10px;
  border-radius: 14px;
  white-space: nowrap;
}
.schedule-empty b {
  display: block;
  color: #111;
  margin-bottom: 4px;
}
@media (max-width: 720px) {
  .schedule-week {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .schedule-form {
    grid-template-columns: 1fr 1fr;
  }
  .schedule-form label:first-of-type,
  .schedule-form label:nth-of-type(4) {
    grid-column: 1 / -1;
  }
  .schedule-slot-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .schedule-slot-time {
    min-height: 46px;
    justify-content: start;
    padding-left: 16px;
    place-items: center start;
  }
  .schedule-slot-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* v5.1.0 - Work opportunities page */
.week-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px;
  border-radius: 18px;
  background: #eef1f6;
  border: 1px solid rgba(17, 17, 17, .05);
}
.week-switch button {
  border: 0;
  min-height: 44px;
  border-radius: 14px;
  background: transparent;
  color: #687086;
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
}
.week-switch button.active {
  background: #111;
  color: #fff;
  box-shadow: 0 10px 24px rgba(17, 17, 17, .14);
}
.schedule-list-note {
  padding: 12px 14px;
  border-radius: 18px;
  background: #fff9db;
  border: 1px solid rgba(255, 203, 31, .45);
  color: #7a5f00;
  font-weight: 800;
  line-height: 1.35;
}
.schedule-slot-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.schedule-slot-main span {
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f2f4f8;
  color: #687086;
  font-size: 12px;
  font-weight: 900;
}
.admin-work-slot {
  grid-template-columns: 96px minmax(0, 1fr);
}
.admin-work-slot .schedule-slot-info {
  gap: 5px;
}
.admin-week-switch {
  margin-bottom: 12px;
}
@media (min-width: 721px) {
  .schedule-form {
    grid-template-columns: 1fr .82fr .82fr 1.05fr 1.05fr;
  }
  .schedule-form label:first-of-type,
  .schedule-form label:nth-of-type(4) {
    grid-column: auto;
  }
}
@media (max-width: 720px) {
  .schedule-form label:nth-of-type(5) {
    grid-column: 1 / -1;
  }
  .admin-work-slot {
    grid-template-columns: 1fr;
  }
}

/* v5.1.1 - work opportunities polish */
.schedule-hero-mark {
  color: #111;
  font-size: 24px;
}
.schedule-day-card {
  align-content: start;
  justify-items: stretch;
  text-align: center;
}
.schedule-day-card b {
  margin-bottom: 4px;
}
.schedule-day-slots {
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 0;
}
.schedule-day-slots em,
.schedule-day-slots i,
.schedule-day-slots small,
.schedule-day-slots span {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  line-height: 1.08;
}
.schedule-day-slots em {
  color: #111;
  font-weight: 1000;
  font-size: 11px;
}
.schedule-day-slots small {
  color: #7b8190;
  font-weight: 900;
  font-size: 9.5px;
}
.schedule-day-slots i {
  color: #9a7800;
  font-weight: 1000;
  font-size: 10px;
}
.admin-work-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}
.admin-work-filters select {
  width: 100%;
  min-height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(17, 17, 17, .08);
  background: #f8fafc;
  color: #111827;
  padding: 9px 12px;
  font: inherit;
  font-weight: 900;
  outline: none;
}
.admin-work-filters select:focus {
  border-color: rgba(255, 203, 31, .75);
  box-shadow: 0 0 0 4px rgba(255, 203, 31, .16);
  background: #fff;
}
@media (max-width: 420px) {
  .admin-work-filters {
    grid-template-columns: 1fr;
  }
  .tabs.bottom-tabbar .tab-label {
    font-size: 10px;
  }
}

/* v5.2.0 - Client manager free windows page */
.open-slots-hero {
  background: linear-gradient(135deg, #ffffff, #fff7cf 64%, #ffdf65);
}
.open-slots-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
.open-slots-filters label {
  display: grid;
  gap: 6px;
  color: #687086;
  font-size: 12px;
  font-weight: 900;
}
.open-slots-filters select {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(17, 17, 17, .08);
  border-radius: 16px;
  padding: 10px 12px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-weight: 900;
  outline: none;
}
.open-slots-filters select:focus {
  border-color: rgba(255, 203, 31, .75);
  box-shadow: 0 0 0 4px rgba(255, 203, 31, .16);
}
.open-slots-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 10px;
  margin: 0 0 14px;
}
.open-slots-stat {
  min-height: 76px;
  border-radius: 20px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .06);
  box-shadow: 0 10px 28px rgba(18, 23, 34, .045);
  display: grid;
  align-content: center;
  gap: 3px;
}
.open-slots-stat b {
  color: #111;
  font-size: 20px;
  font-weight: 1000;
  line-height: 1.1;
}
.open-slots-stat span {
  color: #7b8190;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}
.open-slot-card {
  grid-template-columns: 96px minmax(0, 1fr) 116px;
}
.open-slot-card .schedule-slot-time {
  background: #111;
  color: #fff;
}
.open-slot-card .schedule-slot-main span {
  background: #fff3bf;
  color: #6f5500;
}
@media (max-width: 720px) {
  .open-slots-summary {
    grid-template-columns: 1fr 1fr;
  }
  .open-slots-stat.wide {
    grid-column: 1 / -1;
  }
  .open-slot-card {
    grid-template-columns: 1fr;
  }
  .open-slot-card .schedule-slot-actions {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 420px) {
  .open-slots-filters {
    grid-template-columns: 1fr;
  }
}

/* v5.2.1 - open slots use action */
.use-open-slot {
  min-height: 42px;
  border-radius: 16px;
}
.open-slot-card .schedule-slot-actions {
  align-self: stretch;
}
.open-slot-card .schedule-slot-actions .use-open-slot {
  width: 100%;
}

/* v5.3.0 - client manager tasks */
.cm-task-toolbar {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}
.cm-task-toolbar > .primary {
  min-height: 48px;
  border-radius: 18px;
}
.cm-task-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  -webkit-overflow-scrolling: touch;
}
.cm-task-filters.compact {
  margin-top: -4px;
}
.cm-task-filter {
  flex: 0 0 auto;
  border: 1px solid #edf0f6;
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  color: #6f7584;
  box-shadow: 0 8px 20px rgba(20, 27, 43, .04);
}
.cm-task-filter.active {
  background: #111;
  color: #fff;
  border-color: #111;
}
.cm-task-form-card {
  margin-bottom: 14px;
  border-color: rgba(255, 202, 30, .55);
  background: #fffdf2;
}
.cm-task-form-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.cm-task-form-head h3 {
  margin: 0 0 4px;
  font-size: 22px;
}
.cm-task-form-head p {
  margin: 0;
  color: #6f7584;
  line-height: 1.45;
}
.cm-task-form {
  display: grid;
  gap: 12px;
}
.cm-task-form label {
  display: grid;
  gap: 7px;
  color: #6f7584;
  font-weight: 800;
}
.cm-task-form input,
.cm-task-form select,
.cm-task-form textarea {
  width: 100%;
  border: 1px solid #e7eaf2;
  border-radius: 16px;
  background: #fff;
  padding: 13px 14px;
  font: inherit;
  font-weight: 800;
  color: #151827;
  outline: none;
}
.cm-task-form textarea {
  resize: vertical;
  min-height: 88px;
}
.cm-task-form input:focus,
.cm-task-form select:focus,
.cm-task-form textarea:focus {
  border-color: #ffcf28;
  box-shadow: 0 0 0 3px rgba(255, 207, 40, .2);
}
.cm-task-list {
  display: grid;
  gap: 14px;
}
.cm-task-card {
  background: #fff;
  border: 1px solid #edf0f6;
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 12px 34px rgba(20, 27, 43, .05);
}
.cm-task-card.urgent {
  border-color: rgba(255, 83, 83, .28);
  background: #fff7f7;
}
.cm-task-card.high {
  border-color: rgba(255, 207, 40, .45);
  background: #fffdf2;
}
.cm-task-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cm-task-type,
.cm-task-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 13px;
}
.cm-task-type {
  background: #111;
  color: #fff;
}
.cm-task-status {
  background: #f2f4f8;
  color: #6f7584;
}
.cm-task-status.new { background: #fff3bf; color: #6f5500; }
.cm-task-status.in_work { background: #eaf3ff; color: #175b9e; }
.cm-task-status.waiting_client,
.cm-task-status.waiting_confirm { background: #eef8f2; color: #147345; }
.cm-task-status.done { background: #e9f8ef; color: #147345; }
.cm-task-status.cancelled { background: #f3f4f6; color: #8b92a0; }
.cm-task-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.2;
}
.cm-task-meta,
.cm-task-payment,
.cm-task-contact,
.cm-task-comment {
  margin: 6px 0 0;
  color: #6f7584;
  line-height: 1.45;
}
.cm-task-payment {
  color: #6f5500;
  font-weight: 900;
}
.cm-task-comment {
  background: #f7f8fb;
  border-radius: 16px;
  padding: 10px 12px;
}
.cm-task-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.cm-task-actions .primary,
.cm-task-actions .secondary,
.cm-task-status-select {
  min-height: 42px;
  border-radius: 15px;
}
.cm-task-status-select {
  grid-column: 1 / -1;
  border: 1px solid #edf0f6;
  background: #f7f8fb;
  padding: 0 12px;
  font: inherit;
  font-weight: 900;
  color: #151827;
}
@media (min-width: 720px) {
  .cm-task-form {
    grid-template-columns: 1fr 1fr;
  }
  .cm-task-comment-field,
  .schedule-form-actions {
    grid-column: 1 / -1;
  }
}

/* v5.4.0 - automatic client manager tasks */
.cm-task-toolbar > .secondary {
  min-height: 44px;
  border-radius: 18px;
}
.cm-task-source {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 10px 0 0;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff3bf;
  color: #6f5500;
  font-weight: 900;
  font-size: 13px;
}

/* Reports page */
.reports-head h2 {
  margin-bottom: 6px;
}
.reports-hero-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-color: rgba(255, 216, 77, 0.9);
  background: linear-gradient(135deg, rgba(255, 216, 77, 0.28), rgba(255,255,255,0.94));
}
.reports-hero-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #ffd84d;
  display: grid;
  place-items: center;
  font-size: 18px;
  box-shadow: 0 6px 14px rgba(255, 216, 77, 0.25);
  flex-shrink: 0;
}
.reports-hero-card h3 {
  margin: 0 0 2px;
  font-size: 15px;
}
.reports-hero-card p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
/* Client manager section: collapsible accordion */
.report-section-accordion {
  margin-top: 12px;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 14px;
  overflow: hidden;
}
.report-section-accordion > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(135deg, rgba(255,216,77,.20), rgba(255,255,255,.94));
  font-weight: 700;
  font-size: 15px;
}
.report-section-accordion > summary::-webkit-details-marker { display: none; }
.report-section-accordion > summary::before {
  content: "▸";
  font-size: 12px;
  color: var(--muted);
  display: inline-block;
  margin-right: 4px;
  transition: transform var(--motion-normal, 200ms) var(--ease-standard, ease);
}
.report-section-accordion[open] > summary::before { transform: rotate(90deg); }
.report-section-accordion[open] > .rsm-content {
  animation: ycFadeIn var(--motion-fast, 140ms) var(--ease-enter, ease) both;
}
.report-section-accordion .rsm-desc { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.report-section-accordion .rsm-content { padding: 0 14px 12px; }
.reports-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}
.reports-controls label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .03em;
}
.reports-controls input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 58px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  padding: 0 16px;
  font: inherit;
  font-weight: 800;
  color: var(--text);
  outline: none;
  text-align: center;
  text-align-last: center;
  line-height: 58px;
  -webkit-appearance: none;
  appearance: none;
}

.reports-controls input::-webkit-date-and-time-value {
  text-align: center;
  min-width: 0;
  min-inline-size: 0;
  min-height: 58px;
}
.reports-controls input::-webkit-calendar-picker-indicator {
  margin-left: 0;
}

.reports-controls input:focus {
  border-color: #ffd84d;
  box-shadow: 0 0 0 4px rgba(255,216,77,.18);
}
.reports-controls .yc-month-picker {
  min-height: 58px;
  border-radius: 18px;
}
.reports-controls .yc-month-picker__value {
  font-size: 15px;
  font-weight: 800;
}
.reports-controls .yc-month-picker:focus-within {
  border-color: #ffd84d;
  box-shadow: 0 0 0 4px rgba(255,216,77,.18);
}
/* ALE-39 — .yc-month-picker's own dark-theme variant (see :root[data-theme=
   "dark"] .yc-month-picker, ~line 113) otherwise makes this selector read
   as a "heavy dark navy panel" under Telegram dark mode — exactly what the
   owner flagged. The client cabinet solved the same problem by forcing
   color-scheme:light on body.role-parent-cabinet; here the fix is scoped
   tighter, to just this one control, so no other part of client_manager's
   theme handling is touched. Specificity note: 3 classes + body element
   beats :root[data-theme="dark"] .yc-month-picker's 3 classes on the (c,d)
   tiebreak, so this wins regardless of source order or system theme. */
body.role-client-manager-cabinet .reports-controls .yc-month-picker {
  background: #fff;
  border-color: rgba(255, 203, 31, .45);
  color: var(--ink, #111);
}
body.role-client-manager-cabinet .reports-controls .yc-month-picker__value {
  color: var(--ink, #111);
}
body.role-client-manager-cabinet .reports-controls .yc-month-picker:focus-within {
  border-color: var(--yellow, #ffcb1f);
  box-shadow: 0 0 0 4px rgba(255, 203, 31, .22);
}
/* ALE-39 — "Дети за месяц" hero card header row: icon + title as one
   inline group so .cab-card-head's justify-content:space-between doesn't
   push them apart (there is no second child on this card, unlike the
   client cabinet's badge-bearing cards). */
.cm-report-hero-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* ALE-39 round 3 — reversible hide for the three technical/service
   Reports blocks, used only for an owner/admin's test-role PREVIEW of
   client_manager (see _hideReportsServiceBlocksForClientManager in
   app.js). A real client_manager session never uses this class — those
   nodes are permanently removed from the DOM instead. */
.cm-report-hidden-block {
  display: none;
}
.reports-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0 16px;
}
.report-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}
.report-stat b {
  display: block;
  font-size: 24px;
  margin-bottom: 4px;
}
.report-stat span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.reports-sections {
  display: grid;
  gap: 14px;
}
.report-section-card h3 {
  margin: 0 0 14px;
  font-size: 20px;
}
.report-rows {
  display: grid;
  gap: 10px;
}
.report-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(16, 24, 40, 0.07);
}
.report-row:last-child {
  border-bottom: 0;
}
.report-row span {
  color: var(--muted);
  font-weight: 700;
}
.report-row b {
  text-align: right;
  font-weight: 900;
}
.report-row small {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.35;
}
.reports-text-card {
  margin-top: 16px;
}
.reports-text-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.reports-text-head h3 {
  margin: 0 0 4px;
}
.reports-text-head p {
  margin: 0;
  color: var(--muted);
}
.reports-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f7f8fb;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.reports-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 8px;
}
.reports-loading {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,216,77,.2);
  border: 1px solid rgba(255,216,77,.8);
  font-weight: 900;
}
@media (max-width: 520px) {
  .reports-controls,
  .reports-actions {
    grid-template-columns: 1fr;
  }
  .reports-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reports-hero-card {
    grid-template-columns: 48px 1fr;
  }
  .reports-hero-mark {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
}

/* Reports detail blocks */
.reports-detail-grid {
  display: grid;
  gap: 14px;
  margin: 12px 0 16px;
}
.report-detail-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
  position: relative;
  overflow: hidden;
}
.report-detail-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: #ffd84d;
}
.report-detail-red::before { background: #ff6b6b; }
.report-detail-green::before { background: #42c783; }
.report-detail-blue::before { background: #3b82f6; }
.report-detail-head h3 {
  margin: 0 0 4px;
  font-size: 21px;
}
.report-detail-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}
.report-detail-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.report-detail-metrics div {
  background: #f7f8fb;
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: 16px;
  padding: 12px;
}
.report-detail-metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
}
.report-detail-metrics b {
  font-size: 16px;
  line-height: 1.25;
}
.report-detail-actions {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--text);
  display: grid;
  gap: 6px;
}
.report-detail-actions li::marker {
  color: #ffd84d;
}
.reports-actions-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 520px) {
  .report-detail-metrics,
  .reports-actions-wide {
    grid-template-columns: 1fr;
  }
}

/* v5.7.0 - client manager task workflow */
.cm-task-workflow,
.cm-task-message-box {
  margin-top: 14px;
  border: 1px solid #edf0f6;
  border-radius: 20px;
  background: #f8f9fc;
  padding: 12px;
}
.cm-task-workflow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cm-task-workflow-head b {
  font-size: 15px;
}
.cm-task-workflow-head span {
  font-size: 12px;
  font-weight: 900;
  color: #6f7584;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cm-task-notes {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.cm-task-notes p,
.cm-task-loading {
  margin: 0;
  border-radius: 14px;
  background: #fff8d8;
  color: #6f5500;
  padding: 9px 10px;
  font-weight: 800;
  line-height: 1.35;
}
.cm-task-loading {
  background: #fff;
  color: #6f7584;
  border: 1px dashed #e1e5ee;
}
.cm-task-slot-list {
  display: grid;
  gap: 10px;
}
.cm-task-slot {
  display: grid;
  gap: 8px;
  background: #fff;
  border: 1px solid #edf0f6;
  border-radius: 18px;
  padding: 12px;
}
.cm-task-slot.selected {
  border-color: #ffcf28;
  background: #fffdf2;
  box-shadow: 0 10px 24px rgba(255, 207, 40, .12);
}
.cm-task-slot div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.cm-task-slot b {
  color: #151827;
}
.cm-task-slot span,
.cm-task-slot p {
  color: #6f7584;
  font-weight: 800;
}
.cm-task-slot p {
  margin: 0;
  line-height: 1.35;
}
.cm-task-slot button {
  min-height: 40px;
  border-radius: 14px;
}
.cm-task-message-box {
  background: #fffdf2;
  border-color: rgba(255, 207, 40, .45);
}
.cm-task-message-box pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  line-height: 1.45;
  color: #151827;
  background: #fff;
  border: 1px solid #edf0f6;
  border-radius: 16px;
  padding: 12px;
}
.cm-task-message-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.cm-task-message-actions button {
  min-height: 42px;
  border-radius: 14px;
}
@media (max-width: 430px) {
  .cm-task-slot div {
    display: grid;
    gap: 2px;
  }
  .cm-task-message-actions {
    grid-template-columns: 1fr;
  }
}

/* v5.7.1 - client task expandable cards */
.cm-task-card.collapsed {
  padding: 15px 16px;
}
.cm-task-card.collapsed .cm-task-top {
  margin-bottom: 9px;
}
.cm-task-card.collapsed h3 {
  margin-bottom: 6px;
}
.cm-task-details {
  margin-top: 12px;
  display: grid;
  gap: 0;
}
.cm-task-compact-comment {
  margin: 8px 0 0;
  color: #6f7584;
  line-height: 1.4;
  background: #f7f8fb;
  border-radius: 15px;
  padding: 9px 11px;
}
.cm-task-source.compact-source {
  margin-top: 9px;
  padding: 6px 9px;
  font-size: 12px;
}
.cm-task-open,
.cm-task-collapse {
  width: 100%;
  min-height: 44px;
  border-radius: 16px;
  margin-top: 12px;
}
.cm-task-collapse {
  background: #f2f4f8;
}
.cm-task-card.expanded {
  border-color: rgba(255, 207, 40, .5);
  box-shadow: 0 16px 38px rgba(20, 27, 43, .07);
}
.cm-task-card.expanded .cm-task-top {
  margin-bottom: 10px;
}
.cm-task-card.expanded .cm-task-meta {
  margin-bottom: 2px;
}
.cm-task-card.expanded .cm-task-actions {
  margin-top: 14px;
}


/* v5.8.0 - client manager help page */
.help-guide .help-workflow-card .help-workflow-head span {
  white-space: nowrap;
}
.help-page-item p,
.help-route-body small,
.help-checklist li {
  word-break: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 430px) {
  .help-workflow-head {
    align-items: flex-start;
  }
  .help-workflow-head h4 {
    line-height: 1.2;
  }
}

/* v5.9.0 - simplified client task lifecycle */
.cm-task-next-step {
  display: grid;
  gap: 6px;
  margin: 4px 0 12px;
  padding: 12px;
  border-radius: 18px;
  background: #fff8d8;
  border: 1px solid rgba(255, 207, 40, .45);
}
.cm-task-next-step b {
  color: #6f5500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cm-task-next-step span {
  color: #4c4425;
  line-height: 1.4;
  font-weight: 800;
}
.cm-task-actions {
  grid-template-columns: 1fr 1fr;
}
.cm-task-actions button {
  min-height: 42px;
  border-radius: 15px;
}
.secondary.danger,
.cm-task-actions .secondary.danger {
  background: #fff0f0;
  color: #a82d2d;
}
.cm-task-final-note {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  font-weight: 900;
  line-height: 1.35;
}
.cm-task-final-note.ok {
  background: #e9f8ef;
  color: #147345;
}
.cm-task-final-note.muted {
  background: #f3f4f6;
  color: #6f7584;
}
.cm-task-card.done {
  border-color: rgba(31, 165, 107, .2);
  background: #fbfffd;
}
.cm-task-card.cancelled {
  opacity: .82;
}
.cm-task-card.done .cm-task-type,
.cm-task-card.cancelled .cm-task-type {
  background: #f2f4f8;
  color: #111827;
}
@media (max-width: 430px) {
  .cm-task-actions {
    grid-template-columns: 1fr;
  }
}

/* v5.9.1 - KPI tasks block */
.kpi-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  margin: 16px 0 10px;
  box-shadow: 0 10px 22px rgba(15,23,42,.04);
}
.kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.kpi-head h3 {
  margin: 0;
  font-size: 18px;
}
.kpi-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.kpi-stat {
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
}
.kpi-stat b {
  display: block;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}
.kpi-stat span {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.kpi-stat--done   { background: #e8faf0; }
.kpi-stat--done b { color: #1a7f4b; }
.kpi-stat--progress   { background: #fff8d8; }
.kpi-stat--progress b { color: #8a6200; }
.kpi-stat--waiting   { background: #eef3ff; }
.kpi-stat--waiting b { color: #3153c7; }
.kpi-stat--canceled   { background: #fef2f2; }
.kpi-stat--canceled b { color: #b91c1c; }
.kpi-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid rgba(16,24,40,.07);
  padding-top: 10px;
}
.kpi-type {
  text-align: center;
}
.kpi-type span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 2px;
}
.kpi-type b {
  font-size: 18px;
  font-weight: 900;
}
.kpi-loading,
.kpi-unavailable,
.kpi-empty-note {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 8px 0;
}
@media (max-width: 480px) {
  .kpi-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v5.10.0 - KPI admin subtab */
.kpi-admin-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.kpi-period-group {
  display: flex;
  gap: 6px;
}
.kpi-period-btn {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.kpi-period-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.kpi-admin-card {
  margin-bottom: 12px;
}
.kpi-admin-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
}
.kpi-actors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kpi-actor {
  padding: 10px 12px;
  background: var(--surface);
  border-radius: 10px;
}
.kpi-actor-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 5px;
}
.kpi-actor-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #555;
}

/* v5.11.0 - Intern onboarding track */
.intern-steps { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.intern-step {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.intern-step--done { border-left: 4px solid #22c55e; background: #f0fdf4; }
.intern-step--active { border-left: 4px solid var(--yellow, #ffd84d); background: #fffde7; box-shadow: 0 4px 14px rgba(255,216,77,.18); }
.intern-step--waiting { border-left: 4px solid #f59e0b; background: #fffbeb; }
.intern-step--locked { opacity: .5; filter: grayscale(30%); }
.intern-step-icon { font-size: 22px; flex-shrink: 0; line-height: 1.4; }
.intern-step-body { flex: 1; min-width: 0; }
.intern-step-header { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.intern-step-title { font-weight: 700; font-size: 15px; }
.intern-step-badge {
  font-size: 12px; font-weight: 600; padding: 2px 8px;
  border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.intern-step-badge--done { background: #dcfce7; color: #15803d; }
.intern-step-badge--active { background: #fef08a; color: #854d0e; }
.intern-step-badge--waiting { background: #fef3c7; color: #92400e; }
.intern-step-badge--locked { background: #f3f4f6; color: #6b7280; }
.intern-step-desc { font-size: 13px; color: #555; margin-bottom: 8px; }
.intern-step-extra {
  font-size: 13px; color: #374151; background: #f8fafc;
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
}
.intern-step-btn { margin-top: 4px; }

.intern-section-card { margin-top: 12px; }
.intern-section-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.intern-section-card h4 { font-size: 14px; font-weight: 600; margin: 14px 0 8px; }
.intern-section-note { font-size: 13px; color: #555; margin: 0 0 14px; }

.intern-obs-signup-form label,
.intern-work-form label,
.intern-demo-form label {
  display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; margin-bottom: 10px;
}
.intern-obs-signup-form input,
.intern-work-form input,
.intern-demo-form input {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit;
}
.intern-work-hint { font-size: 12px; color: var(--muted); margin: -6px 0 10px; }
.intern-materials-link { background: #f0fdf4; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
.intern-work-rejected { background: #fef2f2; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; color: #b91c1c; }

.intern-obs-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.intern-obs-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.intern-obs-item--observed { border-left: 4px solid #22c55e; }
.intern-obs-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 13px; }
.intern-obs-date { color: var(--muted); }
.intern-obs-title { font-weight: 600; }
.intern-obs-status { font-size: 12px; padding: 2px 8px; border-radius: 20px; background: #f3f4f6; }
.intern-obs-comment { font-size: 13px; color: #374151; background: #f8fafc; border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; }
.intern-obs-form { display: flex; flex-direction: column; gap: 6px; }
.intern-textarea { font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }

.intern-admin-review-block { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.intern-admin-review-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.intern-admin-review-form input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; margin-bottom: 8px; font-family: inherit; }
.intern-review-btns { display: flex; gap: 8px; }
.intern-review-btns button { flex: 1; }
button.danger { background: #ef4444; color: #fff; border: none; }
button.danger:hover { background: #dc2626; }

/* v5.12.0 - Intern UX improvements */
.intern-upcoming-block { margin-bottom: 16px; }
.intern-upcoming-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.intern-upcoming-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.intern-upcoming-date { font-size: 12px; color: var(--muted); font-weight: 600; }
.intern-upcoming-teacher { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intern-upcoming-group { font-size: 12px; color: #555; }
.intern-upcoming-topic { font-size: 12px; color: var(--muted); }
.intern-upcoming-empty { font-size: 13px; color: var(--muted); padding: 8px 0; }
.intern-lesson-signup-btn { white-space: nowrap; flex-shrink: 0; }
.intern-lesson-signed { font-size: 12px; color: #22c55e; font-weight: 700; white-space: nowrap; }

.intern-obs-manual { margin-top: 16px; }
.intern-obs-manual summary { font-size: 13px; color: var(--muted); cursor: pointer; padding: 4px 0; }
.intern-obs-manual[open] summary { margin-bottom: 10px; }

.intern-notion-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f3f4f6; border-radius: 14px; padding: 10px 16px;
  font-size: 14px; font-weight: 700; color: var(--ink, #111111); text-decoration: none;
  margin-bottom: 14px;
}
.intern-notion-btn:hover { background: #e5e7eb; }

.intern-file-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.intern-file-label {
  flex: 1; font-size: 13px; color: #555; background: #f3f4f6; border-radius: 8px;
  padding: 8px 12px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.intern-work-dl-link { font-size: 12px; color: var(--blue, #3b82f6); text-decoration: none; }
.intern-work-dl-link:hover { text-decoration: underline; }

/* v6.0.2 - Intern test panel */
.intern-test-panel {
  border: 1.5px dashed #f59e0b; border-radius: 12px; padding: 10px 14px;
  background: #fffbeb; margin-bottom: 14px; font-size: 13px;
}
.intern-test-panel summary {
  cursor: pointer; font-weight: 700; color: #92400e; font-size: 13px;
}
.intern-test-btns {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.intern-test-btn {
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px;
  background: #fef3c7; color: #78350f; border: 1px solid #fde68a; cursor: pointer;
}
.intern-test-btn:hover { background: #fde68a; }
.intern-test-btn[disabled] { opacity: .5; }

.intern-test-panel-inline {
  border: 1px dashed #f59e0b; border-radius: 8px; padding: 6px 10px;
  background: #fffbeb; margin-top: 8px;
}
.intern-test-panel-inline summary {
  cursor: pointer; font-size: 12px; font-weight: 700; color: #92400e;
}
.intern-test-inline-body {
  display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap;
}
.intern-test-stage-sel {
  flex: 1; font-size: 13px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line);
  min-width: 160px; background: #fff;
}
.intern-test-apply-btn {
  font-size: 12px; padding: 6px 12px; border-radius: 8px; background: #f59e0b;
  color: #fff; font-weight: 700; border: none; cursor: pointer; white-space: nowrap;
}
.intern-test-apply-btn:hover { background: #d97706; }

/* v6.1.0 - Intern accordion UX ─────────────────────────────────────────────── */
/* ALE-53 — retuned to the client cabinet's own tokens (.yc-card/.cab-card/
   .yc-badge-*/.cab-badge--*), same "keep the intern-* class names, align
   the values" technique ALE-39 used for .ws-stat-card etc. — no markup or
   logic changes, just the color/shadow/opacity values below. */
/* Onboarding progress bar — "Шаг N из 6 · <title>", mirrors .comms-stepper-* */
.intern-stepper { margin: 2px 0 12px; }
.intern-stepper-track { display: flex; gap: 4px; margin-bottom: 6px; }
.intern-stepper-seg { height: 4px; flex: 1; border-radius: 2px; background: var(--line); }
.intern-stepper-seg.is-filled { background: var(--yc-yellow, #FFCB1F); }
.intern-stepper-label { font-size: 13px; font-weight: 700; color: var(--yc-text, #111111); }

.intern-acc { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 80px; }

.intern-acc-step {
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #fff;
  box-shadow: 0 4px 16px rgba(17, 17, 17, .04);
  overflow: hidden;
}
.intern-acc-step--done { border-color: var(--yc-green-line, #c8ebd2); background: var(--yc-green-soft, #EAF8F0); }
.intern-acc-step--active {
  border-color: var(--yc-yellow, #FFCB1F);
  border-width: 2px;
  background: var(--yc-yellow-soft, #FFF8D6);
  box-shadow: 0 3px 12px rgba(255, 203, 31, .25);
}
.intern-acc-step--waiting { border-color: var(--line); background: #fcf2e5; }
.intern-acc-step--locked { opacity: .5; }
.intern-acc-step--locked.is-open { opacity: .8; }

.intern-acc-header {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; background: none; border: none; text-align: left;
  cursor: pointer; font-family: inherit; min-height: 50px;
}
.intern-acc-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.intern-acc-title-block { flex: 1; min-width: 0; }
.intern-acc-title { display: block; font-size: 14px; font-weight: 700; color: var(--yc-text, #111111); }
/* Same pill shape/values as .yc-badge-*/.cab-badge--* (and this file's own
   .intern-obs-badge--observed/--signed_up use the identical done/active
   pair already) instead of plain colored text. */
.intern-acc-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; margin-top: 4px;
}
.intern-acc-badge--done { background: #dcfce7; color: #15803d; }
.intern-acc-badge--active { background: #fef3c7; color: #92400e; }
.intern-acc-badge--waiting { background: #fcf2e5; color: #956018; }
.intern-acc-badge--locked { background: #f3f4f6; color: #6b7280; }
.intern-acc-hint { display: block; font-size: 12px; color: var(--muted, #777777); margin-top: 3px; line-height: 1.35; font-weight: 500; }
.intern-acc-arrow { font-size: 13px; color: #bbb; flex-shrink: 0; transition: transform .2s; }
.intern-acc-step.is-open .intern-acc-arrow { transform: rotate(180deg); }

.intern-acc-body { padding: 0 13px 14px; border-top: 1px solid rgba(0,0,0,.06); }

.intern-acc-note { font-size: 13px; color: #374151; }
.intern-acc-note p { margin: 6px 0; }
.intern-acc-note .muted { color: var(--yc-muted, #667089); font-size: 12px; }
.intern-acc-note-text { font-size: 13px; color: #555; margin: 8px 0 10px; line-height: 1.4; }
.intern-acc-lock { font-size: 13px; color: #6b7280; padding: 10px 0; line-height: 1.5; }
.intern-acc-lock small { display: block; margin-top: 4px; color: #9ca3af; }
.intern-acc-progress { font-size: 13px; color: #374151; margin: 10px 0 12px; }
.intern-acc-empty { font-size: 13px; color: #9ca3af; padding: 6px 0; }
.intern-acc-review-comment {
  font-size: 13px; color: #374151; background: #f8fafc;
  border-radius: 8px; padding: 8px 10px; margin: 6px 0;
  border-left: 3px solid #e2e8f0;
}
.intern-acc-admitted { text-align: center; padding: 10px 0 4px; }
.intern-acc-admitted-icon { font-size: 36px; margin-bottom: 8px; }
.intern-acc-admitted p { font-size: 14px; margin: 0; }
.intern-acc-details { margin-top: 10px; }
.intern-acc-details summary {
  font-size: 13px; color: #6b7280; cursor: pointer; padding: 4px 0;
  user-select: none; -webkit-user-select: none;
}

/* Recommendation row above lesson cards */
.intern-rec-title {
  font-size: 11px; font-weight: 700; color: var(--yc-muted, #667089);
  text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 8px;
}

/* Compact lesson cards */
.intern-lesson-card {
  display: flex; align-items: flex-start; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; margin-bottom: 6px; background: #fff;
}
.intern-lesson-card.is-signed { background: #f0fdf4; border-color: #bbf7d0; }
.intern-lesson-info { flex: 1; min-width: 0; }
.intern-lesson-dt { font-size: 11px; font-weight: 700; color: var(--yc-muted, #667089); display: block; }
.intern-lesson-teacher { font-size: 13px; font-weight: 600; display: block; }
.intern-lesson-group { font-size: 12px; color: #555; display: block; }
.intern-lesson-topic { font-size: 12px; color: var(--yc-muted, #667089); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intern-rec-label { font-size: 11px; color: #92400e; font-weight: 600; background: #fef3c7; border-radius: 4px; padding: 1px 5px; display: inline-block; margin-top: 3px; }
.intern-lesson-signed { font-size: 12px; color: #16a34a; font-weight: 700; white-space: nowrap; padding-top: 4px; flex-shrink: 0; }
.intern-lesson-signup-btn { white-space: nowrap; flex-shrink: 0; font-size: 13px; align-self: center; }

/* Obs item compact badge */
.intern-obs-badge { font-size: 11px; padding: 2px 7px; border-radius: 20px; background: #f3f4f6; display: inline-block; }
.intern-obs-badge--observed { background: #dcfce7; color: #15803d; }
.intern-obs-badge--signed_up { background: #fef3c7; color: #92400e; }

/* v6.2.0 - Intern self-assessment (ОС) feedback ──────────────────────────── */
.intern-feedback-block {
  margin-top: 12px; border-top: 1px solid rgba(0,0,0,.06); padding-top: 10px;
}
.intern-feedback-title {
  font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 8px;
}
.intern-feedback-item {
  font-size: 13px; color: #374151; margin-bottom: 6px; line-height: 1.4;
}
.intern-feedback-item b { color: #6b7280; font-weight: 600; margin-right: 4px; }
.intern-feedback-submitted {
  background: #f0fdf4; border-radius: 10px; padding: 10px 12px;
  border: 1px solid #bbf7d0;
}
.intern-feedback-form-wrap {
  background: #fffde7; border-radius: 10px; padding: 10px 12px;
  border: 1px solid #fde68a;
}
.intern-feedback-form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.intern-feedback-form label span { font-size: 12px; font-weight: 600; color: #555; }
.intern-feedback-form textarea { min-height: 52px; resize: vertical; }

/* Admin feedback view */
.intern-admin-feedback {
  font-size: 13px; background: #f8fafc; border-radius: 8px;
  padding: 8px 10px; margin: 6px 0;
}
.intern-admin-feedback--empty {
  background: #fffbeb; color: #92400e; border: 1px solid #fde68a;
}
.intern-admin-feedback-title { font-weight: 700; color: #374151; margin-bottom: 6px; font-size: 12px; }

/* v6.2.0 - Global compact styles & utilities ─────────────────────────────── */

/* All tab panels get bottom padding so content clears the fixed tab bar */
.tab-panel.active { padding-bottom: 90px; }

/* Slightly tighter base card */
.card { border-radius: 16px; padding: 12px 14px; }
.card-title { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.meta { gap: 4px; }
.status-row { margin-top: 10px; }

/* YC utility badges */
.yc-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.yc-badge-success { background: #dcfce7; color: #15803d; }
.yc-badge-warning { background: #fef3c7; color: #92400e; }
.yc-badge-danger  { background: #fee2e2; color: #b91c1c; }
.yc-badge-muted   { background: #f3f4f6; color: #6b7280; }
.yc-badge-info    { background: #dbeafe; color: #1e40af; }

/* YC section heading */
.yc-section-title {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px;
}

/* YC compact card */
.yc-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
}

/* Existing pill: more compact */
.pill { font-size: 11px; padding: 4px 8px; }

/* Task card: reduce inner padding slightly */
.task-card { padding: 12px 14px; }
.cm-task-card { border-radius: 14px; }
.lesson-card .card-title { font-size: 15px; }

/* v6.3.0 - Admin intern dashboard ─────────────────────────────────────────── */
.ia-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.ia-filter-btn {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 20px;
  border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  color: var(--yc-text, #172033); display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.ia-filter-btn--active { background: #172033; color: #fff; border-color: #172033; }
.ia-filter-count {
  border-radius: 12px; padding: 0 5px; font-size: 11px; font-weight: 700;
  min-width: 16px; text-align: center; background: #f3f4f6; color: #6b7280;
}
.ia-filter-btn--active .ia-filter-count { background: rgba(255,255,255,.2); color: #fff; }
.ia-empty-filter { font-size: 14px; color: var(--yc-muted, #667089); padding: 12px 0; }

.ia-interns-list { display: flex; flex-direction: column; gap: 8px; }

.ia-intern-card {
  border-radius: 12px; border: 1.5px solid var(--line); background: #fff; overflow: hidden;
}
.ia-intern-card.is-open { border-color: #fde68a; background: #fffde7; }

.ia-intern-header { padding: 10px 12px; }
.ia-intern-header-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px;
}
.ia-intern-header-info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ia-intern-name { font-size: 14px; font-weight: 700; }
.ia-intern-username { font-size: 12px; }
.ia-intern-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ia-intern-header-meta span { font-size: 12px; }

.ia-toggle-btn {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: #f8fafc; cursor: pointer;
  color: var(--yc-text, #172033); white-space: nowrap; flex-shrink: 0;
}

.ia-intern-body {
  border-top: 1px solid rgba(0,0,0,.08); padding: 10px 12px; background: #fafafa;
}

.ia-section { margin-bottom: 14px; }
.ia-section:last-child { margin-bottom: 0; }
.ia-section-title {
  font-size: 11px; font-weight: 700; color: var(--yc-muted, #667089);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}
.ia-empty { font-size: 13px; color: #9ca3af; }

.ia-obs-item {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,.05);
}
.ia-obs-item:last-child { border-bottom: none; }
.ia-obs-info { flex: 1; min-width: 0; }
.ia-obs-date  { font-size: 11px; color: var(--yc-muted, #667089); display: block; }
.ia-obs-title { font-size: 13px; font-weight: 600; display: block; }
.ia-obs-comment { font-size: 12px; color: #555; display: block; margin-top: 2px; line-height: 1.3; }
.ia-obs-badge {
  font-size: 11px; padding: 2px 7px; border-radius: 20px;
  font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.ia-obs-badge--observed { background: #dcfce7; color: #15803d; }
.ia-obs-badge--signed_up { background: #fef3c7; color: #92400e; }

.ia-review-block { margin-bottom: 8px; }
.ia-review-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; margin-bottom: 6px;
}
.ia-review-meta b { font-weight: 700; }
.ia-review-prev-comment {
  font-size: 12px; color: #6b7280; background: #f3f4f6;
  border-radius: 6px; padding: 5px 8px; margin-bottom: 6px;
}
.ia-dl-link { font-size: 12px; font-weight: 600; color: #2563eb; text-decoration: none; }
.ia-dl-link:hover { text-decoration: underline; }

.ia-review-form { display: flex; flex-direction: column; gap: 6px; }
.ia-review-btns { display: flex; gap: 8px; }
.ia-review-btns button { flex: 1; font-size: 13px; padding: 8px; }

.ia-history { margin-top: 6px; }
.ia-history-toggle {
  font-size: 12px; color: #6b7280; cursor: pointer; user-select: none;
  -webkit-user-select: none; padding: 2px 0;
}
.ia-history-item {
  font-size: 12px; color: #374151; padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.ia-history-item:last-child { border-bottom: none; }

/* v6.4.0 - compact teacher lesson cards ───────────────────────────────────── */
#lessonsList { gap: 8px; }
.lc-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: default;
  transition: border-color .15s;
}
.lc-card.lc-closed {
  background: linear-gradient(135deg, #eafaf1 0%, #f6fff9 100%);
  border-color: rgba(31,165,107,.32);
}
.lc-card.lc-overdue {
  background: linear-gradient(135deg, #fff0f0 0%, #fff8f8 100%);
  border-color: rgba(216,76,76,.28);
}
.lc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.lc-datetime { font-size: 12px; color: var(--muted); font-weight: 600; }
.lc-group { font-size: 15px; font-weight: 800; color: var(--ink); }
.lc-topic { font-size: 13px; color: #374151; }
.lc-room  { font-size: 12px; color: var(--muted); }
.lc-btn {
  margin-top: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 10px;
  background: #f3f4f6;
  color: var(--ink);
  border: 1.5px solid var(--line);
  cursor: pointer;
}
.lc-closed .lc-btn { background: #d1fae5; color: #065f46; border-color: rgba(31,165,107,.28); }
.lc-overdue .lc-btn { background: #fee2e2; color: #7f1d1d; border-color: rgba(216,76,76,.25); }

/* v6.4.0 - lesson modal sections ───────────────────────────────────────────── */
.lm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1.5px solid var(--line);
  margin-bottom: 10px;
}
.lm-group   { font-size: 17px; font-weight: 800; color: var(--ink); }
.lm-datetime { font-size: 13px; color: var(--muted); margin-top: 2px; }

.lm-hint {
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f3f4f6;
  color: #374151;
  margin-bottom: 10px;
  line-height: 1.4;
}
.lm-hint-ok   { background: #d1fae5; color: #065f46; }
.lm-hint-warn { background: #fef3c7; color: #78350f; }
.lm-hint-bad  { background: #fee2e2; color: #7f1d1d; }

.lm-section {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}
.lm-section[open] { border-color: #fde68a; }
.lm-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: #fafafa;
}
.lm-section[open] > .lm-section-head { background: #fffde7; }
.lm-section-head::-webkit-details-marker { display: none; }
.lm-section-head::after { content: "▾"; margin-left: auto; font-size: 12px; color: var(--muted); }
.lm-section[open] > .lm-section-head::after { content: "▴"; }
.lm-section-body {
  padding: 12px 13px;
  border-top: 1px solid rgba(0,0,0,.07);
}

.lm-info-rows { display: flex; flex-direction: column; gap: 8px; }
.lm-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
}
.lm-row > span { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.lm-row > div  { display: flex; flex-direction: column; gap: 1px; }
.lm-row b      { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lm-row span   { font-size: 13px; color: var(--ink); }

.lm-conduct-list {
  margin: 0; padding: 0 0 0 18px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: #374151; line-height: 1.4;
}
.lm-closed-banner {
  font-size: 14px; font-weight: 700;
  color: #065f46; background: #d1fae5;
  border-radius: 10px; padding: 10px 14px;
}
.lm-locked {
  font-size: 13px; color: var(--muted);
  padding: 4px 0;
}
.lm-material-body { display: flex; flex-direction: column; gap: 10px; }
.lm-material-body .notion-button { align-self: flex-start; }

/* v6.3.1 - role change UI + debug panel ───────────────────────────────────── */
.admin-user-role-change { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.admin-role-select { font-size: 13px; padding: 4px 8px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; color: var(--yc-text, #172033); }
.admin-role-save-btn { font-size: 12px; padding: 4px 12px; }

.ia-debug { margin-bottom: 12px; border: 1.5px dashed #fbbf24; border-radius: 10px; overflow: hidden; }
.ia-debug-title { padding: 7px 12px; font-size: 12px; font-weight: 700; color: #92400e; background: #fef3c7; cursor: pointer; user-select: none; }
.ia-debug-body { padding: 8px 12px; font-size: 12px; color: #374151; display: flex; flex-direction: column; gap: 3px; }
.ia-debug-body.hidden { display: none; }

/* v6.4.2 - YC brand unification ─────────────────────────────────────────────── */

:root {
  --yc-bg:          #f6f6f8;
  --yc-card:        #ffffff;
  --yc-text:        #111111;
  --yc-muted:       #8a8a8a;
  --yc-border:      #ececec;
  --yc-yellow:      #FFD21F;
  --yc-yellow-soft: #fffbea;
  --yc-black:       #111111;
  --yc-green:       #1fa56b;
  --yc-green-soft:  #e8faf1;
  --yc-red:         #d84c4c;
  --yc-red-soft:    #ffeaea;
  --yc-blue:        #3267ff;
  --yc-blue-soft:   #eef3ff;
  --yc-radius:      18px;
  --yc-shadow:      0 8px 24px rgba(0,0,0,.09);
}

/* Badge aliases used by _teacherLessonStatus (ok / warn / bad) */
.yc-badge-ok   { background: #e8faf1; color: #1a7a50; }
.yc-badge-warn { background: #fff8e1; color: #8a6000; }
.yc-badge-bad  { background: #ffeaea; color: #b33030; }

/* .dark button → pure black (was --yc-navy: #11182d) */
.dark { background: #111111 !important; color: #ffffff !important; }

/* .secondary button → neutral gray (was blue-tinted #eef2fb) */
.secondary {
  background: #f3f4f6 !important;
  color: #111111 !important;
  border: 1.5px solid #ececec !important;
}

/* .primary button → YC yellow with black text */
.primary { background: #FFD21F !important; color: #111111 !important; }

/* Lesson list cards: white + colored left border only, no gradient fill */
.lc-card.lc-closed {
  background: #ffffff !important;
  border-color: var(--line) !important;
  border-left: 3px solid #1fa56b !important;
}
.lc-card.lc-overdue {
  background: #ffffff !important;
  border-color: var(--line) !important;
  border-left: 3px solid #d84c4c !important;
}

/* lc-btn: black on all states */
.lc-btn {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

/* Lesson modal accordion: neutral when open (was yellow) */
.lm-section[open] { border-color: #ececec !important; }
.lm-section[open] > .lm-section-head { background: #f5f5f5 !important; }

/* Intern admin card open state: neutral (was yellow) */
.ia-intern-card.is-open {
  border-color: #ececec !important;
  background: #fafafa !important;
}

/* Filter button active: pure black */
.ia-filter-btn--active { background: #111111 !important; border-color: #111111 !important; }

/* Input focus ring: YC yellow (was blue) */
.text-input:focus {
  border-color: rgba(255, 210, 31, .55) !important;
  box-shadow: 0 0 0 3px rgba(255, 210, 31, .12) !important;
}

/* v6.5.0 - MVP client_manager stub ─────────────────────────────────────────── */
.mvp-cm-stub {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 24px;
}
.mvp-cm-stub-inner {
  background: #fff;
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  max-width: 340px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  border: 1.5px solid #ececec;
}
.mvp-cm-stub-icon { font-size: 40px; margin-bottom: 14px; }
.mvp-cm-stub-title { font-size: 18px; font-weight: 800; color: #111; margin: 0 0 10px; }
.mvp-cm-stub-text { font-size: 14px; color: #666; line-height: 1.55; margin: 0; }

/* v6.6.0 - YC Design System — complete visual unification ──────────── */

/* ── Single source of truth for all CSS variables ────────────────────── */
:root {
  /* Core palette (override all earlier conflicting declarations) */
  --yellow:         #FFCB1F;
  --yellow-2:       #FFF8D6;
  --ink:            #111111;
  --muted:          #777777;
  --line:           #E8E8E8;
  --card:           #FFFFFF;
  --bg:             #F7F8FB;
  --shadow:         0 10px 30px rgba(17,17,17,.06);

  /* YC Design Tokens */
  --yc-bg:          #F7F8FB;
  --yc-card:        #FFFFFF;
  --yc-text:        #111111;
  --yc-muted:       #777777;
  --yc-border:      #E8E8E8;
  --yc-yellow:      #FFCB1F;
  --yc-yellow-soft: #FFF8D6;
  --yc-black:       #111111;
  --yc-green:       #1D9A57;
  --yc-green-soft:  #EAF8F0;
  --yc-red:         #D64545;
  --yc-red-soft:    #FDECEC;
  --yc-blue:        #2F80ED;
  --yc-blue-soft:   #EAF3FF;
  --yc-radius:      20px;
  --yc-radius-sm:   14px;
  --yc-shadow:      0 10px 30px rgba(17,17,17,.06);
}

/* ── YC Button System ─────────────────────────────────────────────────── */
.yc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  border: 0;
  transition: opacity .15s;
}
.yc-btn:active { opacity: .82; }
.yc-btn-primary   { background: #111111; color: #ffffff; }
.yc-btn-yellow    { background: #FFCB1F; color: #111111; }
.yc-btn-secondary { background: #f3f4f6; color: #111111; border: 1.5px solid #E8E8E8; }
.yc-btn-danger    { background: #FDECEC; color: #b33030; }

/* ── YC Card Variants ─────────────────────────────────────────────────── */
.yc-card {
  background: #fff;
  border: 1.5px solid #E8E8E8;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(17,17,17,.04);
}
.yc-card-compact { padding: 10px 12px; border-radius: 14px; }
.yc-list-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1.5px solid #E8E8E8;
  border-radius: 14px;
  padding: 10px 13px;
  box-shadow: 0 2px 8px rgba(17,17,17,.03);
}

/* ── YC Page / Section primitives ────────────────────────────────────── */
.yc-page { display: flex; flex-direction: column; gap: 14px; }
.yc-page-title { font-size: 20px; font-weight: 900; color: #111111; margin: 0; }
.yc-page-subtitle { font-size: 14px; color: #777777; margin: 0; line-height: 1.4; }
.yc-section { display: flex; flex-direction: column; gap: 8px; }

/* ── YC Empty State ───────────────────────────────────────────────────── */
.yc-empty-state {
  padding: 28px 20px;
  text-align: center;
  border: 1.5px dashed #E8E8E8;
  border-radius: 18px;
  background: #fafafa;
  font-size: 14px;
  color: #777777;
  line-height: 1.5;
}
.yc-empty-state b {
  display: block;
  color: #111111;
  font-size: 16px;
  margin-bottom: 6px;
}

/* Harmonize existing empty states */
.empty {
  border: 1.5px dashed #E8E8E8 !important;
  border-radius: 18px !important;
  background: #fafafa !important;
  color: #777777 !important;
}
.ask-empty {
  border: 1.5px dashed #E8E8E8 !important;
  background: #fafafa !important;
  color: #777777 !important;
}
.ia-empty-filter,
.ia-empty,
.task-empty span { color: #777777; }

/* ── YC Accordion ─────────────────────────────────────────────────────── */
.yc-accordion { display: flex; flex-direction: column; gap: 8px; }
.yc-accordion-card {
  background: #fff;
  border: 1.5px solid #E8E8E8;
  border-radius: 14px;
  overflow: hidden;
}
.yc-accordion-card summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  background: #fafafa;
  user-select: none;
  -webkit-user-select: none;
}
.yc-accordion-card summary::-webkit-details-marker { display: none; }
.yc-accordion-card[open] > summary { background: #f5f5f5; }
.yc-accordion-body { padding: 12px 14px; border-top: 1px solid #f0f0f0; }

/* ── Subtab active: explicit black ───────────────────────────────────── */
.subtab.active { background: #111111 !important; color: #ffffff !important; }

/* ── next-step-box: yellow/green instead of blue ─────────────────────── */
.next-step-box {
  background: #FFF8D6 !important;
  border-color: rgba(255, 203, 31, .32) !important;
  color: #705713 !important;
}
.next-step-box b { color: #111111 !important; }
.next-step-box.ok {
  background: #EAF8F0 !important;
  border-color: rgba(29, 154, 87, .22) !important;
  color: #186642 !important;
}
.next-step-box.warn {
  background: #FFF8D6 !important;
  border-color: rgba(255, 203, 31, .32) !important;
  color: #705713 !important;
}

/* ── notion-button: neutral (was pinkish-red) ────────────────────────── */
.notion-button {
  background: #f3f4f6 !important;
  color: #111111 !important;
  border: 1.5px solid #E8E8E8 !important;
}
.notion-button:hover { background: #ececec !important; }

/* ── task-card: remove blue "wait" background ───────────────────────── */
.task-card.wait {
  background: #ffffff !important;
  border-color: rgba(47, 128, 237, .22) !important;
}

/* ── button.danger: soft red (YC design system) ──────────────────────── */
button.danger {
  background: #FDECEC !important;
  color: #b33030 !important;
  border: 1.5px solid rgba(214, 69, 69, .22) !important;
}
button.danger:hover { background: #fad7d7 !important; }

/* ── test-role-panel: clean white card ──────────────────────────────── */
.test-role-panel {
  background: #ffffff !important;
  border: 1.5px solid #E8E8E8 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

/* ── Stat card value: definitive black ──────────────────────────────── */
.stat-card b { color: #111111; }

/* ── Links / download buttons: neutral ──────────────────────────────── */
.intern-work-dl-link { color: #555555 !important; font-weight: 700; }
.ia-dl-link { color: #555555 !important; }

/* ── Prevent iOS zoom: ensure all form inputs ≥ 16px ────────────────── */
.intern-obs-signup-form input,
.intern-work-form input,
.intern-demo-form input,
.intern-textarea,
.intern-admin-review-form input,
.intern-review-comment,
.intern-test-stage-sel,
.admin-role-select,
.ia-review-form input,
.ia-review-form textarea { font-size: 16px !important; }

/* ── Muted text color: consistent neutral ────────────────────────────── */
.muted, .yc-muted { color: #777777; }

/* ── Intern acc review comment: neutral left border ──────────────────── */
.intern-acc-review-comment {
  border-left-color: #E8E8E8 !important;
}

/* ── Primary .primary override: consistent yellow + black text ───────── */
button.primary.wide {
  background: #FFCB1F !important;
  color: #111111 !important;
}

/* v6.6.1 - YC UI Consistency Pass ──────────────────────────────────── */

/* ── Page titles: unified 26px/900 across all tabs ──────────────────── */
.section-head h2 {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #111111 !important;
  margin: 0 !important;
  line-height: 1.1;
}
.section-head p {
  font-size: 14px !important;
  color: #777777 !important;
  margin: 4px 0 0 !important;
  line-height: 1.4;
}

/* ── Help card: remove navy-blue tint from headings and list items ───── */
.help-card h3,
.help-card h4 { color: #111111 !important; }
.help-card li  { color: #333333 !important; }

/* ── help-section-details: compact to match yc-accordion-card style ─── */
.help-section-details > summary {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 12px 14px !important;
  color: #111111 !important;
}
.help-section-details > summary::after {
  width: 24px !important;
  height: 24px !important;
  font-size: 13px !important;
  background: #f3f4f6 !important;
  color: #777777 !important;
}
.help-section-content {
  padding: 0 14px 14px !important;
  gap: 10px !important;
}

/* ── Lesson modal accordion: border-radius + body padding ────────────── */
.lm-section { border-radius: 14px !important; }
.lm-section-body { padding: 12px 14px !important; }

/* ── Intern track steps: radius match ────────────────────────────────── */
.intern-acc-step { border-radius: 14px !important; }

/* ── upload-title: remove navy color ─────────────────────────────────── */
.upload-title { color: #111111 !important; }

/* ── file-upload-box: white bg, neutral border, neutral button ────────── */
.file-upload-box {
  background: #ffffff !important;
  border-color: #E8E8E8 !important;
}
.file-upload-box strong {
  background: #f3f4f6 !important;
  color: #111111 !important;
}

/* ── chat-chip: neutral (was blue-tinted) ────────────────────────────── */
.chat-chip {
  background: #f3f4f6 !important;
  color: #111111 !important;
  border-color: #E8E8E8 !important;
}

/* ── chat guide/quick cards: clean white, neutral border ─────────────── */
.chat-guide-card,
.chat-quick-card {
  background: #ffffff !important;
  border: 1.5px solid #E8E8E8 !important;
  border-radius: 14px !important;
}
.chat-guide-card summary::after,
.chat-quick-card summary::after {
  background: #f3f4f6 !important;
  color: #777777 !important;
}
.chat-guide-body { color: #777777 !important; }

/* ── task-subtitle: remove navy tint ────────────────────────────────── */
.task-subtitle { color: #444444 !important; }
.task-chips span { color: #555555 !important; }

/* ── help-route-step: neutral bg (was blue-tinted #f8fafc) ──────────── */
.help-route-step {
  background: #f9f9f9 !important;
  border-color: #E8E8E8 !important;
}

/* v6.6.2 — Unified Size Grid ────────────────────────────────────────── */

/* ─── 1. Page title / subtitle — corrected spec values ─────────────── */
.section-head h2,
.yc-page-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #111111 !important;
  margin: 0 0 6px !important;
}
.section-head p,
.yc-page-subtitle {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: #777777 !important;
  margin: 0 !important;
}

/* ─── 2. Lesson list cards ──────────────────────────────────────────── */
.lc-card {
  padding: 13px 15px !important;
  border-radius: 18px !important;
}
.lc-group    { font-size: 16px !important; font-weight: 800 !important; }
.lc-topic    { font-size: 14px !important; }
.lc-datetime { font-size: 13px !important; }
.lc-room     { font-size: 13px !important; }
.lc-btn {
  font-size: 15px !important;
  padding: 0 14px !important;
  min-height: 38px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

/* ─── 3. Lesson modal — header ──────────────────────────────────────── */
.lm-group    { font-size: 20px !important; font-weight: 800 !important; }
.lm-datetime { font-size: 14px !important; }
.lm-hint {
  font-size: 14px !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  line-height: 1.4;
}

/* ─── 4. Lesson modal — accordion sections ──────────────────────────── */
.lm-section {
  border-radius: 20px !important;
  margin-bottom: 10px !important;
}
.lm-section-head {
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 13px 15px !important;
  min-height: 52px !important;
}
.lm-section-body { padding: 14px 15px !important; }

/* ─── 5. Prep checkboxes ────────────────────────────────────────────── */
.prep-check {
  min-height: 56px !important;
  padding: 11px 14px !important;
  border-radius: 14px !important;
}
.prep-check b {
  font-size: 15px !important;
  font-weight: 700 !important;
}
.prep-check input {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* ─── 6. File upload / upload-title ─────────────────────────────────── */
.upload-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 12px 0 8px !important;
}
.file-upload-box {
  border-radius: 14px !important;
  padding: 12px 14px !important;
  background: #ffffff !important;
  border: 1.5px solid #E8E8E8 !important;
}
.file-upload-box strong {
  background: #f3f4f6 !important;
  color: #111111 !important;
  font-size: 14px !important;
}

/* ─── 7. Task cards — reduce visual weight ──────────────────────────── */
.task-card {
  padding: 14px 15px !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  border: 1.5px solid #E8E8E8 !important;
  border-left: 4px solid #d0d5dd !important;
}
.task-card.warning {
  background: #fffef6 !important;
  border: 1.5px solid rgba(255, 203, 31, .22) !important;
  border-left: 4px solid #FFCB1F !important;
}
.task-card.urgent,
.task-card.danger {
  background: #fff9f9 !important;
  border: 1.5px solid rgba(214, 69, 69, .18) !important;
  border-left: 4px solid #D64545 !important;
}
.task-card.wait {
  background: #ffffff !important;
  border: 1.5px solid rgba(47, 128, 237, .18) !important;
  border-left: 4px solid #2F80ED !important;
}
.task-title {
  font-size: 16px !important;
  font-weight: 800 !important;
}
.task-subtitle {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #555555 !important;
}
.task-text { font-size: 14px !important; line-height: 1.4 !important; }
.task-card button.primary,
.task-card button.secondary {
  min-height: 40px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* ─── 8. Task summary + help note ───────────────────────────────────── */
.task-summary-card {
  border-radius: 16px !important;
  box-shadow: none !important;
  border: 1.5px solid #E8E8E8 !important;
}
.task-summary-card b { font-size: 22px !important; }
.task-help-note {
  font-size: 14px !important;
  padding: 10px 13px !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
}

/* ─── 9. Help page — cards and accordion sections ───────────────────── */
.help-card h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #111111 !important;
}
.help-guide { gap: 10px !important; }
.help-section-details {
  border-radius: 20px !important;
  border: 1.5px solid #E8E8E8 !important;
}
.help-section-details > summary {
  font-size: 17px !important;
  font-weight: 800 !important;
  padding: 14px 16px !important;
  min-height: 54px !important;
  color: #111111 !important;
  display: flex !important;
  align-items: center !important;
}
.help-section-details > summary::after {
  width: 26px !important;
  height: 26px !important;
  font-size: 13px !important;
  background: #f3f4f6 !important;
  color: #777777 !important;
}
.help-section-content {
  padding: 0 16px 16px !important;
  gap: 10px !important;
  font-size: 15px !important;
  line-height: 1.45;
}
.help-route-step {
  padding: 11px 13px !important;
  border-radius: 14px !important;
  background: #f9f9f9 !important;
  border-color: #E8E8E8 !important;
}
.help-route-body b   { font-size: 15px !important; }
.help-route-body small { font-size: 14px !important; }
.help-checklist li   { font-size: 15px !important; }

/* ─── 10. Chat page ─────────────────────────────────────────────────── */
.chat-guide-card,
.chat-quick-card {
  background: #ffffff !important;
  border: 1.5px solid #E8E8E8 !important;
  border-radius: 20px !important;
}
.chat-guide-card summary,
.chat-quick-card summary {
  font-size: 17px !important;
  font-weight: 800 !important;
  padding: 14px 16px !important;
  min-height: 54px !important;
  color: #111111 !important;
}
.chat-guide-card summary::after,
.chat-quick-card summary::after {
  width: 26px !important;
  height: 26px !important;
  background: #f3f4f6 !important;
  color: #777777 !important;
}
.chat-guide-body {
  padding: 0 16px 16px !important;
  font-size: 15px !important;
  color: #777777 !important;
  line-height: 1.45;
}
.chat-chip {
  background: #f3f4f6 !important;
  color: #111111 !important;
  border-color: #E8E8E8 !important;
  font-size: 15px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
}

/* ─── 11. Intern track ──────────────────────────────────────────────── */
.intern-acc-step   { border-radius: 18px !important; }
.intern-acc-header { padding: 13px 15px !important; min-height: 54px !important; }
.intern-acc-title  { font-size: 15px !important; font-weight: 700 !important; color: #111111 !important; }

/* ─── 12. Admin — stat cards ────────────────────────────────────────── */
.stat-card {
  border-radius: 18px !important;
  box-shadow: none !important;
  border: 1.5px solid #E8E8E8 !important;
}
.stat-card b { font-size: 24px !important; }

/* ─── 13. yc-accordion-card: final spec sizing ──────────────────────── */
.yc-accordion-card { border-radius: 20px !important; }
.yc-accordion-card summary {
  padding: 14px 16px !important;
  min-height: 54px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
.yc-accordion-body { padding: 14px 16px !important; }

/* ─── 14. Wide action buttons: unified ──────────────────────────────── */
button.wide,
a.button-link {
  min-height: 44px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* ─── 15. Zoom guard: all interactive form elements ≥ 16px ──────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  font-size: 16px !important;
}

/* v6.6.3 — Mobile safe area + modal header fix ──────────────────────── */
/* v7.1.14.2 — the top-safe-area rule that used to live here (a standalone
   .app-shell padding-top using a locally-redefined --tg-safe-top) was one
   of four stacked generations of this same fix (v6.6.3/v6.6.5/v6.6.6/
   v7.1.13.2), always beaten by the v7.1.13.2 rule below on specificity —
   dead code, removed rather than left as cascade risk. See the single
   surviving --app-top-safe-offset chain further down this file. */

/* ─── 2. lm-header: title-only column (badge moved to lm-badge-row) ─── */
.lm-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 0 56px 0 0 !important;   /* 56px right clears the fixed X button */
  border-bottom: none !important;
  margin-bottom: 8px !important;
}

/* ─── 3. lm-badge-row: status badge on its own line below the title ─── */
.lm-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1.5px solid #E8E8E8;
}

/* ─── 4. modal-close: ensure it never overlaps content ──────────────── */
.modal-close {
  z-index: 130 !important;
}

/* v7.1.14.2 — the entire v6.6.5 "--app-top-offset" generation (its own
   .app-shell padding-top, its own body.is-telegram-webapp .modal-card/
   .modal-close rules, and the hardcoded 64px Telegram-chrome guess) was
   removed here: same selectors as the v6.6.6/v7.1.13.2 block immediately
   below, always beaten there by higher specificity (.app-shell) or later
   source order (identical-selector .modal-card/.modal-close) — confirmed
   dead code, not a behavior change. One offset chain now, not four. */

/* ══════════════════════════════════════════════════════════════════════
   v6.6.6 — Robust Telegram top overlay fix
   Root cause of v6.6.5 failure: body CSS rule inherited closer than html
   inline style, so --tg-top-extra could not be zeroed from JS. Fix: set
   --app-top-safe-offset directly on <html> via JS (beats any CSS rule).
   ══════════════════════════════════════════════════════════════════════ */

/* v7.1.13.2 — replaced the old hardcoded "+56px" Telegram-chrome guess
   with Telegram's own injected content-safe-area CSS variables (present on
   clients that support them), falling back to the older/plainer Telegram
   safe-area variable, and finally to the standard env() — never a bare
   fixed pixel value. --tg-content-safe-area-inset-top already accounts for
   Telegram's own header controls when the client provides it, so no
   separate guessed buffer is layered on top of it (avoids double padding).
   JS (_applySafeArea in app.js) may still refine --app-top-safe-offset
   directly with Telegram's precise contentSafeAreaInset/safeAreaInsets
   values when the WebApp JS API reports them — same var, no second offset
   stacked underneath. */
:root {
  --tg-safe-top:           var(--tg-content-safe-area-inset-top, var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)));
  --tg-native-top-overlay: 0px;
  --app-top-safe-offset:   calc(var(--tg-safe-top) + var(--tg-native-top-overlay));
}

/* v7.1.14.3 — replaced the old "give .app-shell itself a variable
   padding-top" model with a single, real, unconditional spacer element
   (#appTopSafeSpacer, first child of .app-shell — see index.html). Real
   browser-render evidence (getComputedStyle, not just source-reading) showed
   the previous padding-based model DID compute correctly in principle, but
   left the actual safe reservation entirely dependent on Telegram reporting
   a non-zero contentSafeAreaInset/safeAreaInsets — which real Telegram iOS
   sessions are known to under-report (see the guarded iOS floor in
   _applySafeArea, app.js). A dedicated DOM node keeps the reservation
   inspectable/robust regardless of that, and .app-shell now only ever
   carries a small fixed cosmetic padding-top — never a second,
   Telegram-conditional one — so there is exactly one place adding up to
   --app-top-safe-offset, never two. */
.app-top-safe-spacer {
  display: block;
  width: 100%;
  height: 0px;
  flex: none;
}
body.is-telegram-webapp .app-top-safe-spacer {
  height: var(--app-top-safe-offset);
}
body.is-telegram-webapp .app-shell {
  padding-top: 14px !important;
}

/* Fullscreen lesson modal: push card and X button below the Telegram chrome */
@media (max-width: 720px) {
  body.is-telegram-webapp .modal-card {
    padding-top: calc(var(--app-top-safe-offset) + 56px) !important;
  }
  body.is-telegram-webapp .modal-close {
    top: calc(var(--app-top-safe-offset) + 8px) !important;
  }
}

/* v6.7.2 food-debug */
.food-debug-card { padding: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
.food-debug-card h3 { margin: 0 0 10px; font-size: 1.05rem; }
.food-debug-checkbox-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 15px; cursor: pointer; }
.food-debug-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.food-debug-actions { margin: 12px 0; }
.food-debug-summary { font-size: 14px; color: var(--color-text-secondary, #666); margin: 6px 0; }
.food-debug-summary code { background: var(--color-surface, #f5f5f5); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.food-debug-class { background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 14px; }
.food-debug-user { padding: 4px 0; border-top: 1px solid var(--border, #eee); margin-top: 4px; font-size: 13px; }
.food-debug-rawkeys { font-size: 11px; color: var(--color-text-secondary, #888); word-break: break-all; display: block; margin-top: 2px; }
.food-debug-copy-row { margin-top: 12px; }
.food-debug-disabled { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 12px; color: #856404; margin-top: 12px; font-size: 14px; }
.food-debug-disabled code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 3px; }
.food-debug-error { background: #fce4ec; border: 1px solid #f48fb1; border-radius: 8px; padding: 10px; color: #b71c1c; margin-top: 10px; font-size: 14px; }
.food-debug-warning { background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px; padding: 10px; color: #5f3e00; margin-top: 10px; font-size: 14px; }
.food-debug-field-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.food-debug-field-row label { font-size: 14px; color: var(--color-text-secondary, #555); white-space: nowrap; }
.food-debug-input { font-size: 16px; padding: 6px 10px; border: 1px solid var(--border, #ccc); border-radius: 8px; background: var(--card-bg, #fff); color: var(--color-text, #222); width: 160px; min-width: 0; }

/* v6.7.7 camp-children */
.camp-children-stats { font-size: 14px; color: var(--color-text-secondary, #555); margin: 8px 0 12px; }
.camp-child-card { margin: 8px 0; }
.camp-child-code { font-family: monospace; font-size: 15px; font-weight: 700; letter-spacing: 0.05em; background: var(--color-surface, #f5f5f5); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border, #ddd); }
.camp-child-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px; vertical-align: middle; margin-left: 4px; }
.camp-child-badge--none { background: #f0f0f0; color: #888; }
.camp-child-badge--code { background: #fff8e1; color: #5f3e00; border: 1px solid #ffe082; }
.camp-child-badge--linked { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }

/* v6.7.8 parent UI */
.parent-link-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: 14px; padding: 20px 16px; margin: 16px 0; }
.parent-link-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.parent-link-hint { font-size: 14px; color: var(--color-text-secondary, #666); margin: 0 0 12px; }
.parent-link-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.parent-code-input { font-size: 16px; padding: 10px 14px; border: 1px solid var(--border, #ccc); border-radius: 10px; background: var(--card-bg, #fff); color: var(--color-text, #222); width: 130px; min-width: 0; font-family: monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.parent-link-error { background: #fce4ec; border: 1px solid #f48fb1; border-radius: 8px; padding: 8px 12px; color: #b71c1c; margin-top: 10px; font-size: 14px; }
.parent-link-footnote { font-size: 12px; color: var(--color-text-secondary, #888); margin: 10px 0 0; }
/* ALE-44 — one-shot highlight for the child a continuation_required
   Telegram deep-link pointed at; removed automatically after 3s (see
   focusMyChild/renderMyChildren in app.js), never a persistent status.
   Still an independent modifier class — applies regardless of which base
   card class (.cab-child-card since ALE-66 Stage 2 round 2) it's added to. */
.parent-child-card--focused { border-color: var(--yc-yellow, #FFCB1F); box-shadow: 0 0 0 2px var(--yc-yellow, #FFCB1F); }

/* ALE-66 Stage 2 — "Мои дети" link-by-code forms, scoped to the client
   cabinet only (verified: no shared staff/admin usage). Structure/ids/
   handlers in renderMyChildren() are untouched; only surfaces/spacing/
   typography change to match .cab-card's design-token language. */
body.role-parent-cabinet .parent-link-card {
  background: var(--cab-surface, #fff);
  border: 1px solid var(--cab-line-soft, #e0e0e0);
  border-radius: var(--cab-radius-lg, 14px);
  padding: 18px;
  margin: 0 0 12px;
  box-shadow: var(--cab-shadow-card, none);
}
body.role-parent-cabinet .parent-link-card h3 { font-size: 15px; font-weight: 800; color: var(--cab-ink, #17150f); }
body.role-parent-cabinet .parent-link-hint { color: var(--cab-muted, #666); font-size: 12.5px; line-height: 1.4; }
body.role-parent-cabinet .parent-code-input {
  border: 1px solid var(--cab-line, #ccc);
  border-radius: var(--cab-radius-md, 10px);
  background: var(--cab-canvas, #fff);
  color: var(--cab-ink, #222);
}
body.role-parent-cabinet .parent-link-footnote { color: var(--cab-muted, #888); }
body.role-parent-cabinet .parent-child-card--focused { border-color: var(--cab-yellow, #FFCB1F); box-shadow: 0 0 0 2px var(--cab-yellow, #FFCB1F); }

/* ── ALE-66 Stage 2 review round 2 — "Мои дети" structural redesign ──────
   Design reference "Мои дети" screen: avatar+name+status header row, a
   compact canvas-tinted info-only summary block (continuation/payments/
   Availability — real state, no course/group data invented), a small
   continuation edit-chip row (reuses .cab-switch-chip so it's the exact
   same compact pill language as the child switcher elsewhere), and a real
   actions row (Availability CTA + Расписание). Food-only children get the
   same card shell without the summary/actions that don't apply to them.
   .cab-card itself (radius/shadow/surface) is already scoped for the
   client cabinet from Главная — reused as-is here, not redefined. */
.cab-child-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cab-child-avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 18px; display: grid; place-items: center;
  background: var(--cab-yellow, #ffd027); color: var(--cab-ink, #17150f); font-size: 14px; font-weight: 900;
}
.cab-child-avatar--food { background: var(--cab-yellow-soft, #fff6d6); }
.cab-child-identity-text { min-width: 0; }
.cab-child-name {
  font-size: 16px; font-weight: 800; color: var(--cab-ink, #17150f);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3;
}
.cab-child-since { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--cab-muted, #8c8878); }
.cab-child-summary {
  margin-top: 14px; padding: 14px; border-radius: var(--cab-radius-md, 20px);
  background: var(--cab-canvas, #f4f1ea); display: flex; flex-direction: column; gap: 8px;
}
.cab-child-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; }
.cab-child-summary-row span { color: var(--cab-muted, #8c8878); }
.cab-child-summary-row b { color: var(--cab-ink, #17150f); text-align: right; }
/* ALE-66 Stage 2 final polish — progressive disclosure for continuation:
   the value + a compact "Изменить" link sit together on the right of the
   row; the chip row itself only renders in the DOM when that one card's
   edit is open (see _myChildContinuationEditMk in app.js), so the default
   card state has no permanent second continuation row at all. */
.cab-child-summary-value { display: flex; align-items: baseline; gap: 8px; }
.cab-child-edit-link {
  /* Same neutral secondary-link color as .cab-card-link elsewhere in the
     cabinet (Stage 2 color-precision pass) — not the warning/orange tone,
     which is reserved for actual status/eyebrow text. */
  font: inherit; font-size: 11.5px; font-weight: 750; color: var(--cab-muted-2, #57534a);
  background: none; border: none; padding: 0; cursor: pointer;
}
.cab-child-continuation-row { margin-top: 10px; display: flex; gap: 8px; }
.cab-child-actions { margin-top: 12px; display: flex; gap: 9px; }
.cab-child-actions .primary,
.cab-child-actions .secondary { flex: 1 1 0; padding: 13px 12px; font-size: 13.5px; text-align: center; }
.cab-child-food-note {
  margin: 14px 0 0; padding: 12px 14px; border-radius: var(--cab-radius-md, 18px);
  background: var(--cab-canvas, #f4f1ea); color: var(--cab-muted-2, #57534a); font-size: 12.5px; font-weight: 600; line-height: 1.45;
}
/* Compact dashed entry point — replaces the always-expanded link forms. */
.cab-child-add-card { border-style: dashed; border-color: var(--cab-line, rgba(23, 21, 15, .18)); cursor: pointer; text-align: left; }
.cab-child-add-title { font-size: 15px; font-weight: 800; color: var(--cab-ink, #17150f); }
.cab-child-add-hint { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--cab-muted, #8c8878); line-height: 1.45; }
.cab-child-add-forms { margin-top: 12px; }

/* v7.1.12.3 — permanent "Возможности для расписания" entry card + multi-child picker */
.parent-schedule-avail-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--yc-yellow, #FFCB1F); border: none; border-radius: 14px;
  padding: 18px 16px; margin: 0 0 16px; font-family: inherit;
}
.parent-schedule-avail-title { font-weight: 800; font-size: 1.05rem; color: #6f5200; }
.parent-schedule-avail-subtitle { font-size: 13px; color: #6f5200; opacity: .85; margin-top: 4px; }
.parent-schedule-avail-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.parent-schedule-avail-child-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: 12px;
  padding: 12px 14px; text-align: left; cursor: pointer; font-family: inherit; width: 100%;
}
.parent-schedule-avail-child-name { font-weight: 700; font-size: .95rem; }
.parent-schedule-avail-child-status { font-size: 12px; color: var(--color-text-secondary, #666); white-space: nowrap; }
.parent-schedule-avail-child-status--filled { color: #1b5e20; }
@media (max-width: 420px) {
  .parent-schedule-avail-child-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* v6.8.2 food menu admin */
.food-menu-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.food-menu-panel-head h3 { margin: 0; font-size: 1.05rem; }
.food-menu-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; width: 100%; }
.food-menu-actions button { flex: 1 1 auto; min-width: 120px; min-height: 44px; }
.food-menu-create-form { background: var(--color-surface, #f5f5f5); border: 1px solid var(--border, #e0e0e0); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
.food-menu-create-form h4 { margin: 0 0 10px; font-size: 0.95rem; }
.food-menu-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.food-menu-form-row label { font-size: 13px; color: var(--color-text-secondary, #555); }
.food-menu-form-row input, .food-menu-form-row select { font-size: 16px; padding: 8px 12px; border: 1px solid var(--border, #ccc); border-radius: 8px; background: var(--card-bg, #fff); color: var(--color-text, #222); width: 100%; box-sizing: border-box; }
.food-menu-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: 12px; padding: 14px 16px; margin: 8px 0; }
.food-menu-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.food-menu-card-title { font-weight: 700; font-size: 1rem; }
.food-menu-card-meta { font-size: 13px; color: var(--color-text-secondary, #666); margin-top: 2px; }
.food-menu-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; width: 100%; box-sizing: border-box; }
.food-menu-card-actions button, .food-menu-card-actions .btn-sm { width: 100%; min-height: 44px; box-sizing: border-box; }
.btn-sm { padding: 8px 12px; font-size: 13px; min-height: 44px; }
.food-menu-status { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; vertical-align: middle; }
.food-menu-status--draft { background: #f0f0f0; color: #555; border: 1px solid #ddd; }
.food-menu-status--published { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.food-menu-status--closed { background: #fce4ec; color: #b71c1c; border: 1px solid #f48fb1; }
.food-menu-detail { margin-top: 4px; }
.food-menu-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.food-menu-detail-title { font-size: 1.05rem; font-weight: 700; }
.food-category-block { margin-bottom: 14px; }
.food-category-label { font-size: 0.9rem; font-weight: 700; color: var(--color-text-secondary, #555); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.food-item-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border, #f0f0f0); flex-wrap: wrap; }
.food-item-row:last-child { border-bottom: none; }
.food-item-name { flex: 1; font-size: 0.9rem; min-width: 120px; }
.food-item-weight { font-size: 12px; color: var(--color-text-secondary, #888); white-space: nowrap; }
.food-item-price { font-size: 0.9rem; font-weight: 600; white-space: nowrap; min-width: 60px; text-align: right; }
.food-item-hidden { opacity: 0.5; }
.food-item-actions { display: flex; gap: 4px; }
.food-item-add-form { background: var(--color-surface, #f5f5f5); border: 1px solid var(--border, #e0e0e0); border-radius: 10px; padding: 14px 16px; margin-top: 12px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
.food-item-add-form h4 { margin: 0 0 10px; font-size: 0.9rem; }
.food-item-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; width: 100%; }
.food-item-form-grid input, .food-item-form-grid select { font-size: 16px; padding: 7px 10px; border: 1px solid var(--border, #ccc); border-radius: 8px; background: var(--card-bg, #fff); color: var(--color-text, #222); width: 100%; box-sizing: border-box; }
.food-item-form-name { grid-column: 1 / -1; }

/* v6.8.2 parent food view */
.parent-food-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: 14px; padding: 18px 16px; margin: 10px 0; }
.parent-food-card-head { margin-bottom: 12px; }
.parent-food-card-title { font-weight: 700; font-size: 1.05rem; }
.parent-food-card-meta { font-size: 13px; color: var(--color-text-secondary, #666); margin-top: 2px; }
.parent-food-deadline { font-size: 13px; color: #b05800; font-weight: 600; margin-top: 4px; }
.parent-food-category { font-size: 0.85rem; font-weight: 700; color: var(--color-text-secondary, #555); text-transform: uppercase; letter-spacing: 0.04em; margin: 10px 0 4px; }
.parent-food-item { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--border, #f0f0f0); flex-wrap: wrap; }
.parent-food-item:last-child { border-bottom: none; }
.parent-food-item-name { flex: 1; font-size: 0.9rem; min-width: 110px; }
.parent-food-item-weight { font-size: 12px; color: var(--color-text-secondary, #999); white-space: nowrap; }
.parent-food-item-price { font-size: 0.9rem; font-weight: 600; white-space: nowrap; min-width: 55px; text-align: right; }
.parent-food-soon { background: var(--color-surface, #f5f5f5); border-radius: 10px; padding: 14px 16px; color: var(--color-text-secondary, #666); font-size: 14px; text-align: center; margin: 12px 0; }
.parent-food-ordering-note { font-size: 13px; color: var(--color-text-secondary, #777); text-align: center; margin: 12px 0 4px; }

/* v6.8.4 — UI polish */

/* 1. Dark text cursor */
input, textarea, select {
  caret-color: #111111;
}

/* 2. Yellow focus ring for all form controls */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #111111;
  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.35);
}

/* 3. Fade-up entrance animation */
@keyframes ycFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.parent-child-card,
.food-menu-card,
.food-item-row,
.food-debug-card,
.parent-food-card,
.admin-card {
  animation: ycFadeUp 0.22s ease both;
}

/* 4. Tab panel content fade-in — ALE-73: this rule was dead weight. It was
   shadowed by a second, later .tab-panel.active animation declaration (the
   v7.0.36 Animation Layer further down), so the app never actually ran
   ycFadeUp on a panel switch and the two rules could only drift apart.
   There is now exactly ONE canonical panel-enter rule: see
   "ALE-73 - NAVIGATION MOTION" below. ycFadeUp itself is untouched and is
   still used by the cards above. */

/* 5. Button transitions */
button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* 6. details > summary hover/focus */
details > summary {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
details > summary:hover {
  opacity: 0.75;
}
details > summary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.35);
  border-radius: 4px;
}

/* 7. Reduced motion — override all animations and transitions */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* v6.9.0 — parent food ordering */
.food-child-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.food-child-tab { padding: 7px 14px; border-radius: 20px; border: 2px solid var(--border, #e0e0e0); background: var(--card-bg, #fff); font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.food-child-tab.active { border-color: #111; background: #111; color: #FFD600; }
.food-child-context { font-weight: 700; font-size: 14px; margin-bottom: 12px; line-height: 1.4; }
.food-child-context-meta { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 4px; }
.food-order-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: 14px; padding: 16px; margin: 10px 0; }
.food-order-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.food-order-status { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.food-order-status--none { background: #f0f0f0; color: #555; }
.food-order-status--submitted { background: #e6f4ea; color: #2d7a3a; }
.food-order-status--skipped { background: #fff3e0; color: #b05800; }
.food-order-status--closed { background: #f5f5f5; color: #888; }
.food-order-deadline-passed { font-size: 12px; color: #888; }
.food-order-items-list { margin: 10px 0; }
.food-order-item-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border, #f0f0f0); }
.food-order-item-check:last-child { border-bottom: none; }
.food-order-item-check input[type="checkbox"] { width: 22px; height: 22px; min-width: 22px; accent-color: #111; cursor: pointer; }
.food-order-item-check input[type="checkbox"]:disabled { cursor: default; }
.food-order-item-label { flex: 1; font-size: 15px; }
.food-order-item-weight { font-size: 12px; color: var(--color-text-secondary, #888); }
.food-order-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.food-order-actions button { flex: 1; min-width: 120px; }

/* v6.9.0 — admin summary */
.food-summary-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.food-summary-stat { background: var(--color-surface, #f5f5f5); border-radius: 10px; padding: 10px 12px; }
.food-summary-stat-val { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.food-summary-stat-lbl { font-size: 12px; color: var(--color-text-secondary, #666); margin-top: 2px; }
.food-summary-section { margin: 16px 0 8px; font-size: 0.85rem; font-weight: 700; color: var(--color-text-secondary, #555); text-transform: uppercase; letter-spacing: 0.04em; }
.food-summary-item-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border, #f0f0f0); flex-wrap: wrap; }
.food-summary-item-row:last-child { border-bottom: none; }
.food-summary-item-name { flex: 1; font-size: 0.9rem; }
.food-summary-item-count { font-weight: 700; font-size: 1rem; white-space: nowrap; min-width: 40px; text-align: right; }
.food-summary-child-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border, #f0f0f0); flex-wrap: wrap; }
.food-summary-child-row:last-child { border-bottom: none; }
.food-summary-child-name { font-size: 0.9rem; font-weight: 600; min-width: 140px; }
.food-summary-child-items { flex: 1; font-size: 13px; color: var(--color-text-secondary, #666); }

/* v6.9.1 — collapsed order card */
.food-order-card--collapsed { background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: 14px; padding: 14px 16px; margin: 10px 0; }
.food-order-card--collapsed .food-order-card-head { margin-bottom: 6px; }
.food-order-summary-items { font-size: 13px; color: var(--color-text-secondary, #555); margin: 4px 0 8px; line-height: 1.5; }
.food-order-summary-note { font-size: 13px; color: var(--color-text-secondary, #666); margin: 4px 0 8px; font-style: italic; }
.food-order-change-btn { margin-top: 6px; }

/* v6.9.1 — admin summary location sections */
.food-location-section { border: 1px solid var(--border, #e0e0e0); border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.food-location-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.food-location-code { font-weight: 800; font-size: 1rem; background: #111; color: #FFD600; border-radius: 6px; padding: 2px 8px; letter-spacing: 0.03em; }
.food-location-address { font-size: 0.95rem; font-weight: 600; color: var(--color-text, #222); }

/* v6.9.2 — group debug label (hidden in normal view, kept for raw data access) */
.food-child-group-debug { display: none; }

/* v6.9.4 — parent menu hint */
.food-order-hint { font-size: 13px; color: var(--color-text-secondary, #666); margin: 0 0 10px; padding: 8px 12px; background: var(--bg-secondary, #f5f5f5); border-radius: 8px; line-height: 1.5; }

/* v6.9.3 — individual child order cards in summary */
.food-summary-empty { color: var(--color-text-secondary, #888); font-size: 13px; margin: 6px 0 10px; }
.food-child-order-card { border: 1px solid var(--border, #e0e0e0); border-radius: 10px; padding: 10px 14px; margin: 6px 0; background: var(--card-bg, #fff); }
.food-child-order-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.food-child-order-name { font-size: 0.9rem; font-weight: 700; flex: 1 1 auto; }
.food-child-order-items { margin: 4px 0 0 0; padding-left: 18px; font-size: 13px; color: var(--color-text, #222); line-height: 1.6; }
.food-child-order-note { font-size: 13px; color: var(--color-text-secondary, #888); margin-top: 4px; font-style: italic; }
.food-child-order-note--missing { color: #c0392b; }

/* v6.9.9 — admin item price badge */
.food-item-price { font-size: 11px; color: var(--color-text-secondary, #888); background: var(--bg-secondary, #f5f5f5); border-radius: 4px; padding: 1px 5px; margin-left: 4px; white-space: nowrap; }

/* v6.9.8 — editable bulk preview rows */
.food-bulk-item-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; flex-wrap: wrap; }

/* v6.9.5 — OCR section */
.food-ocr-section { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border, #e0e0e0); border-radius: 10px; background: var(--card-bg, #fff); width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
.food-ocr-section h4 { margin: 0 0 10px; font-size: 14px; }
.food-ocr-inputs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.food-ocr-status { padding: 6px 10px; border-radius: 6px; background: var(--bg-secondary, #f5f5f5); }
.food-ocr-status--ok { color: #27ae60; background: #eafaf1; }
.food-ocr-status--warn { color: #856404; background: #fff3cd; }
.food-ocr-status--error { color: #c0392b; background: #fdecea; }

/* v7.0.0 — food shift cost report */
.food-report-period { font-size: 13px; color: var(--color-text-secondary, #888); margin-bottom: 10px; }
.food-report-totals { background: var(--bg-secondary, #f5f5f5); border-radius: 10px; padding: 14px 16px; margin-bottom: 4px; }
.food-report-total-main { font-size: 1.6rem; font-weight: 700; color: var(--color-primary, #2a7be4); }
.food-report-total-sub { font-size: 12px; color: var(--color-text-secondary, #888); margin-top: 2px; }
.food-report-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.food-report-table th { text-align: left; font-weight: 600; padding: 5px 6px; border-bottom: 1px solid var(--border, #e0e0e0); color: var(--color-text-secondary, #888); }
.food-report-table td { padding: 5px 6px; border-bottom: 1px solid var(--border, #f0f0f0); vertical-align: top; }
.food-report-table tr:last-child td { border-bottom: none; }
.food-report-warning { margin-top: 12px; padding: 8px 12px; background: #fff3cd; color: #856404; border-radius: 8px; font-size: 13px; }

/* v7.0.2 — food reminder block in summary */
.food-remind-block { margin: 12px 0; padding: 10px 12px; background: var(--bg-secondary, #f5f5f5); border-radius: 8px; }
.food-remind-hint { font-size: 12px; color: var(--color-text-secondary, #888); margin-bottom: 8px; }
.food-remind-deadline-passed { margin: 10px 0; font-size: 13px; color: var(--color-text-secondary, #888); padding: 8px 12px; background: var(--bg-secondary, #f5f5f5); border-radius: 8px; }
.food-remind-result { padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.food-remind-result--ok { background: #eafaf1; color: #1a7a3a; }
.food-remind-result--error { background: #fdecea; color: #c0392b; }
.food-remind-no-parent { margin-top: 8px; padding: 8px 12px; background: #fff3cd; color: #856404; border-radius: 8px; font-size: 13px; }
.food-remind-result--info { background: var(--bg-secondary, #f5f5f5); color: var(--color-text, #222); }
.food-notify-block { display: flex; flex-direction: column; gap: 0; width: 100%; box-sizing: border-box; margin-bottom: 12px; }
.food-notify-block > button { width: 100%; }

/* v7.0.1 — food data status block in debug panel */
.food-debug-data-status { background: var(--bg-secondary, #f5f5f5); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.food-debug-data-status-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.food-debug-data-status-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.food-debug-data-status-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 2px 0; gap: 8px; }
.food-debug-data-status-row b { font-size: 14px; min-width: 24px; text-align: right; }
/* menu date warning */
.food-menu-date-warning { font-size: 12px; color: #856404; background: #fff3cd; border-radius: 6px; padding: 4px 8px; margin: 4px 0 6px; }

/* v7.0.6 — quantity controls for food ordering */
.food-order-qty-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border, #f0f0f0); }
.food-order-qty-row:last-child { border-bottom: none; }
.food-order-qty-label { flex: 1; font-size: 15px; min-width: 0; }
.food-order-qty-weight { font-size: 12px; color: var(--color-text-secondary, #888); white-space: nowrap; }
.food-order-qty-ctrl { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.food-order-qty-btn { width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--border, #ccc); background: var(--card-bg, #fff); color: var(--color-text, #222); font-size: 20px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: background 0.1s, border-color 0.1s; }
.food-order-qty-btn:active { background: var(--bg-secondary, #f5f5f5); }
.food-order-qty-btn:disabled { opacity: 0.35; cursor: default; }
.food-order-qty-val { min-width: 32px; text-align: center; font-size: 16px; font-weight: 700; padding: 0 4px; }
.food-order-qty-row--active .food-order-qty-val { color: #1a7a3a; }

/* v7.0.6 — staff lunch section */
.food-staff-section { background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: 14px; padding: 16px; margin: 10px 0; }
.food-staff-section-head { font-weight: 700; font-size: 1rem; margin-bottom: 10px; }
.food-staff-status-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.food-staff-status-badge--submitted { background: #e6f4ea; color: #2d7a3a; }
.food-staff-status-badge--skipped { background: #fff3e0; color: #b05800; }
.food-staff-status-badge--none { background: #f0f0f0; color: #555; }

/* v7.0.6 — Android scroll fix for food order cards */
.food-order-card,
.food-order-card--collapsed,
.food-staff-section { -webkit-overflow-scrolling: touch; }
#foodContent { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.food-order-items-list,
.food-order-qty-list { overflow-y: visible; }
.food-order-actions { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* v7.0.7 — Android scroll: allow pan-y through food content areas */
body { -webkit-overflow-scrolling: touch; }
#foodContent,
#adminContent { touch-action: pan-y; }
.food-order-card,
.food-order-card--collapsed,
.food-order-qty-row,
.food-order-qty-list,
.food-staff-section { touch-action: pan-y; }

/* v7.0.8 — Android scroll deep fix: make .app-shell the scroll container on mobile.
   body/html become overflow:hidden; .app-shell gains the scrollable viewport.
   position:fixed children (bottom tab bar, modal) remain viewport-anchored in Chrome. */
@media (max-width: 640px) {
  html, body {
    height: var(--tg-vh, 100dvh);
    min-height: 0;
    overflow: hidden;
  }
  .app-shell {
    box-sizing: border-box;
    height: var(--tg-vh, 100dvh);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

/* v7.0.9 — staff lunch debug info block */
.staff-lunch-debug { margin-top: 12px; font-size: 11px; color: #888; border-top: 1px solid var(--border, #eee); padding-top: 8px; }
.staff-lunch-debug summary { cursor: pointer; color: #aaa; user-select: none; }
.staff-lunch-debug div { padding: 1px 0; line-height: 1.5; }

/* v7.0.10 — location code badge */
.food-loc-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 8px; background: #e3f0fb; color: #1a5fa8; white-space: nowrap; margin-right: 4px; vertical-align: middle; }

/* v7.0.14 — child relink panel */
.camp-child-parent-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 13px; flex-wrap: wrap; }
.camp-child-parent-label { color: var(--color-text-secondary, #888); }
.camp-child-parent-id { font-family: monospace; font-size: 12px; color: #555; }
.camp-child-parent-date { color: var(--color-text-secondary, #888); font-size: 12px; }
.camp-child-relink-btn { display: inline-block; }
.camp-child-relink-btn--has-parent { border-color: #e0a000 !important; color: #b05800 !important; }
.camp-child-relink-result { margin-top: 6px; padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.camp-child-relink-result--ok { background: #eafaf1; color: #1a7a3a; }
.camp-child-relink-result--error { background: #fdecea; color: #c0392b; }

/* v7.0.13 — editable food menu deadline */
.food-menu-dl-status { font-size: 13px; margin: 4px 0 2px; line-height: 1.4; }
.food-menu-dl-status--active { color: #1a5fa8; font-weight: 600; }
.food-menu-dl-status--passed { color: #c0392b; font-weight: 600; }
.food-menu-dl-status--none { color: var(--color-text-secondary, #888); }
.food-menu-deadline-block { margin: 6px 0 10px; padding: 10px 12px; background: var(--bg-secondary, #f5f5f5); border-radius: 8px; width: 100%; box-sizing: border-box; }
.food-menu-deadline-block > button { display: block; width: 100%; margin-top: 8px; }
.food-deadline-form { padding: 8px 0 2px; }
.food-deadline-form-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.food-deadline-row { display: flex; gap: 10px; flex-wrap: wrap; }
.food-deadline-row .food-menu-form-row { flex: 1; min-width: 120px; }
.food-deadline-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.food-deadline-form-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.food-deadline-result { padding: 6px 10px; border-radius: 6px; font-size: 13px; margin-top: 6px; }
.food-deadline-result--error { background: #fdecea; color: #c0392b; }
.food-deadline-result--ok { background: #eafaf1; color: #1a7a3a; }

/* v7.0.15 — kitchen / restaurant read-only summary */
.kitchen-panel, .restaurant-panel { padding: 0 0 24px; }
.kitchen-panel-header, .restaurant-panel-header { padding: 16px 16px 8px; }
.kitchen-panel-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.kitchen-panel-subtitle { font-size: 13px; color: var(--color-text-secondary, #888); margin: 0; }
.kitchen-menu-selector { padding: 0 16px 12px; }
.kitchen-menu-selector select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border-color, #e0e0e0); border-radius: 10px; font-size: 15px; background: var(--bg-card, #fff); color: var(--color-text, #222); }
.kitchen-panel-actions { display: flex; gap: 8px; padding: 0 16px 12px; flex-wrap: wrap; }
.kitchen-panel-actions button { flex: 1 1 auto; min-width: 90px; min-height: 44px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--border-color, #e0e0e0); background: var(--bg-card, #fff); color: var(--color-text, #222); transition: background 0.15s; }
.kitchen-panel-actions button:active { background: var(--bg-secondary, #f0f0f0); }
.kitchen-location-block { margin: 12px 16px 0; background: var(--bg-card, #fff); border-radius: 12px; border: 1.5px solid var(--border-color, #e0e0e0); overflow: hidden; }
.kitchen-location-title { font-size: 16px; font-weight: 700; padding: 12px 16px 8px; border-bottom: 1px solid var(--border-color, #e0e0e0); background: var(--bg-secondary, #f5f5f5); margin: 0; }
.kitchen-location-meta { display: flex; gap: 12px; padding: 8px 16px; font-size: 13px; color: var(--color-text-secondary, #888); border-bottom: 1px solid var(--border-color, #e0e0e0); flex-wrap: wrap; }
.kitchen-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary, #777); padding: 10px 16px 4px; margin: 0; }
.kitchen-items-list { padding: 4px 16px 8px; }
.kitchen-item-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--border-color-light, #f0f0f0); font-size: 14px; gap: 8px; }
.kitchen-item-row:last-child { border-bottom: none; }
.kitchen-item-name { flex: 1; color: var(--color-text, #222); }
.kitchen-item-count { font-weight: 700; color: var(--color-accent, #d4a000); white-space: nowrap; }
.kitchen-item-price { color: var(--color-text-secondary, #888); font-size: 13px; white-space: nowrap; }
.kitchen-item-total { font-weight: 600; color: var(--color-text, #222); white-space: nowrap; }
.kitchen-person-block { padding: 6px 16px; border-bottom: 1px solid var(--border-color-light, #f0f0f0); }
.kitchen-person-block:last-child { border-bottom: none; }
.kitchen-person-name { font-size: 14px; font-weight: 600; color: var(--color-text, #222); margin-bottom: 2px; }
.kitchen-person-total { font-size: 13px; color: var(--color-text-secondary, #888); margin-top: 2px; }
.kitchen-person-items { list-style: none; margin: 2px 0 0; padding: 0; }
.kitchen-person-items li { font-size: 13px; color: var(--color-text, #333); padding: 1px 0 1px 12px; position: relative; }
.kitchen-person-items li::before { content: "•"; position: absolute; left: 0; color: var(--color-accent, #d4a000); }
.kitchen-no-food-list { padding: 4px 16px 10px; }
.kitchen-no-food-item { font-size: 13px; color: var(--color-text-secondary, #888); padding: 2px 0; }
.kitchen-location-total { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 2px solid var(--border-color, #e0e0e0); font-weight: 700; font-size: 15px; background: var(--bg-secondary, #f5f5f5); }
.kitchen-overall-total { margin: 12px 16px 0; background: #fffbe6; border: 2px solid #e0c000; border-radius: 12px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 700; }
.kitchen-panel-notice { margin: 12px 16px 0; padding: 12px 16px; background: var(--bg-secondary, #f5f5f5); border-radius: 10px; font-size: 14px; color: var(--color-text-secondary, #888); text-align: center; }
.kitchen-copy-ok { color: #1a7a3a; font-size: 13px; margin-top: 4px; text-align: center; }
.kitchen-deadline-info { font-size: 12px; color: var(--color-text-secondary, #999); padding: 0 16px 8px; }
.staff-location-picker { margin-top: 12px; padding: 12px; background: var(--color-bg-secondary, #f5f5f5); border-radius: 10px; border: 1px solid var(--color-border, #e0e0e0); }
.staff-location-picker-label { font-size: 14px; font-weight: 500; margin-bottom: 8px; color: var(--color-text, #222); }
.staff-location-picker-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.staff-teacher-branch-banner { padding: 9px 14px; background: #e8f5ee; border-radius: 10px; border: 1.5px solid #2ea86b; font-size: 13px; font-weight: 600; color: #176e40; margin-bottom: 10px; }
.staff-teacher-branch-loc { font-weight: 400; color: #1a7a3a; }
/* v7.0.42 — upfront location choice for teachers with multiple lessons */
.teacher-loc-choice { margin-bottom: 12px; padding: 10px 12px; background: #fff8e1; border: 1.5px solid #f9a825; border-radius: 10px; }
.teacher-loc-choice-label { font-size: 13px; font-weight: 600; color: #7c5a00; margin-bottom: 8px; }
.teacher-loc-choice-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.teacher-loc-btn { font-size: 13px !important; }
.teacher-loc-btn--selected { background: #27ae60 !important; color: #fff !important; border-color: #27ae60 !important; }
@media (prefers-color-scheme: dark) {
  .teacher-loc-choice { background: #2c2410; border-color: #c69026; }
  .teacher-loc-choice-label { color: #e8c76a; }
}
:root[data-theme="dark"] .teacher-loc-choice { background: #2c2410; border-color: #c69026; }
:root[data-theme="dark"] .teacher-loc-choice-label { color: #e8c76a; }
:root[data-theme="light"] .teacher-loc-choice { background: #fff8e1; border-color: #f9a825; }
:root[data-theme="light"] .teacher-loc-choice-label { color: #7c5a00; }
.kitchen-teacher-tag { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; background: #2ea86b; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.food-order-delete-btn { flex-shrink: 0; margin-left: auto; padding: 2px 7px; font-size: 12px; font-weight: 700; color: #c0392b; background: transparent; border: 1.5px solid #e0b0b0; border-radius: 6px; cursor: pointer; line-height: 1.4; }
.food-order-delete-btn:hover { background: #fdf0f0; border-color: #c0392b; }
.food-admin-badge-wrap { padding: 4px 0 2px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.food-admin-badge { display: inline-block; font-size: 11px; color: #7b5ea7; background: #f3eeff; border: 1px solid #d0bff0; border-radius: 8px; padding: 2px 8px; white-space: nowrap; }
.food-admin-badge-comment { font-size: 11px; color: #888; }
.food-admin-edit-btn { flex-shrink: 0; margin-left: 6px; padding: 2px 9px; font-size: 12px; color: #1a6fa8; background: transparent; border: 1.5px solid #b0d0ee; border-radius: 6px; cursor: pointer; line-height: 1.4; }
.food-admin-edit-btn:hover { background: #eaf4ff; border-color: #1a6fa8; }
.food-admin-add-btn { flex-shrink: 0; margin-left: 6px; padding: 2px 9px; font-size: 12px; color: #1a7a4a; background: transparent; border: 1.5px solid #a0d8b8; border-radius: 6px; cursor: pointer; line-height: 1.4; }
.food-admin-add-btn:hover { background: #e6f7ee; border-color: #1a7a4a; }
.food-admin-form-wrap { border: 1.5px solid #d0bff0; border-radius: 12px; padding: 16px; margin-top: 14px; background: #faf8ff; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
.food-admin-form-title { font-size: 15px; font-weight: 700; color: #5a3a8a; margin-bottom: 12px; }
.food-admin-form-row { margin-bottom: 12px; width: 100%; }
.food-admin-form-label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 4px; }
.food-admin-select { width: 100%; padding: 7px 10px; border: 1.5px solid #ccc; border-radius: 8px; font-size: 14px; background: #fff; box-sizing: border-box; min-width: 0; }
.food-admin-text-input { width: 100%; padding: 7px 10px; border: 1.5px solid #ccc; border-radius: 8px; font-size: 14px; background: #fff; box-sizing: border-box; min-width: 0; }
.food-admin-items-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.food-admin-item-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 12px; align-items: center; width: 100%; }
.food-admin-item-info { font-size: 13px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.food-admin-item-qty-wrap { display: flex; align-items: center; justify-content: center; width: 72px; }
.food-admin-item-qty { width: 64px; max-width: 64px; padding: 5px 6px; border: 1.5px solid #ccc; border-radius: 6px; font-size: 15px; text-align: center; -moz-appearance: textfield; box-sizing: border-box; }
.food-admin-item-qty::-webkit-inner-spin-button, .food-admin-item-qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.food-admin-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; width: 100%; }
.food-delete-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.food-delete-dialog { background: #fff; border-radius: 16px; padding: 24px; max-width: 340px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.food-delete-dialog-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.food-delete-dialog-name { font-size: 15px; font-weight: 600; color: #172033; margin-bottom: 4px; }
.food-delete-dialog-date { font-size: 13px; color: #657089; margin-bottom: 10px; }
.food-delete-dialog-warn { font-size: 13px; color: #c0392b; margin-bottom: 18px; }
.food-delete-dialog-btns { display: flex; gap: 10px; }
.food-delete-dialog-btns .secondary { flex: 1; }
.food-delete-confirm-btn { flex: 1; padding: 10px; background: #c0392b; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; }
.food-delete-confirm-btn:hover { background: #a93226; }
/* v7.0.20 — kitchen editor */
.kitchen-editor-create-form { margin: 0 16px 12px; padding: 14px; background: var(--bg-secondary, #f5f5f5); border-radius: 12px; border: 1.5px solid var(--border-color, #e0e0e0); }
.kitchen-editor-menu-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border-color-light, #f0f0f0); }
.kitchen-editor-menu-card:last-child { border-bottom: none; }
/* v7.0.22 — food summary audit */
.food-audit-block { border-radius: 12px; padding: 12px 14px; margin: 8px 0; font-size: 14px; border: 1.5px solid transparent; }
.food-audit-block--ok { background: #f0faf4; border-color: #a8e0b8; }
.food-audit-block--warn { background: #fffbec; border-color: #f5d76e; }
.food-audit-block--error { background: #fdf0f0; border-color: #f0b0b0; }
.food-audit-header { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.food-audit-icon { font-size: 16px; }
.food-audit-meta { font-size: 12px; color: #888; margin-bottom: 4px; }
.food-audit-totals { font-size: 13px; color: #444; margin-bottom: 2px; }
.food-audit-errors { margin: 6px 0; }
.food-audit-err-row { color: #c0392b; font-size: 13px; }
.food-audit-warnings { margin: 6px 0; }
.food-audit-warn-row { color: #b8860b; font-size: 13px; }
.food-audit-details { margin-top: 8px; }
.food-audit-details summary { cursor: pointer; font-size: 13px; color: #555; user-select: none; }
.food-audit-section { margin-top: 8px; border-top: 1px solid #e8e8e8; padding-top: 8px; }
.food-audit-section-title { font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.food-audit-loc { padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
.food-audit-loc:last-child { border-bottom: none; }
.food-audit-loc-name { font-weight: 600; font-size: 14px; }
.food-audit-loc-row { font-size: 12px; color: #555; margin-top: 2px; }
.food-audit-items { margin: 4px 0 0 16px; font-size: 12px; color: #555; }
.food-audit-check { font-size: 13px; margin-bottom: 2px; }
.food-audit-check--error { color: #c0392b; }
.food-audit-check--warn { color: #b8860b; }

/* =====================================================
   v7.0.38 — Teacher diagnostics admin panel
   ===================================================== */

.teacher-diag-panel {
  background: var(--color-surface, #f8f9fb);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
  font-size: 13px;
}
.teacher-diag-panel--error { border-color: #f5c6cb; background: #fff5f5; }
.teacher-diag-status {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.4;
}
.teacher-diag-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  font-size: 12px;
  margin-bottom: 8px;
}
.teacher-diag-grid span:nth-child(odd) {
  color: var(--color-text-secondary, #657089);
  white-space: nowrap;
}
.teacher-diag-grid span:nth-child(even) { font-weight: 600; }
.teacher-diag-section { font-weight: 700; margin: 8px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.teacher-diag-row { font-size: 12px; padding: 2px 0; border-bottom: 1px solid var(--border, #f0f0f0); }
.teacher-diag-empty { font-size: 12px; color: var(--color-text-secondary, #657089); }
.teacher-diag-refresh-info { font-size: 12px; color: var(--ink); margin-bottom: 6px; line-height: 1.6; }
.teacher-diag-refresh-error {
  font-size: 13px;
  background: #fff8f0;
  border: 1.5px solid #f0a030;
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.6;
}
@media (prefers-color-scheme: dark) {
  .teacher-diag-refresh-error { background: rgba(240,160,48,.1); border-color: #c07820; }
}
.teacher-diag-container { margin-top: 6px; }
.teacher-diag-tech {
  margin-top: 8px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  font-size: 12px;
}
.teacher-diag-tech summary {
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 600;
  color: var(--muted, #657089);
  list-style: none;
  user-select: none;
}
.teacher-diag-tech summary::-webkit-details-marker { display: none; }
.teacher-diag-tech[open] summary { border-bottom: 1px solid var(--border, #e0e0e0); color: var(--ink); }
.teacher-diag-tech-body {
  padding: 8px 10px;
  max-height: 320px;
  overflow-y: auto;
  line-height: 1.55;
}

/* v7.0.41 — MK teacher picker + mismatch warning */
.teacher-diag-mismatch {
  background: #fff8e1;
  border: 1.5px solid #f9a825;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #7c5a00;
  margin-top: 10px;
}
@media (prefers-color-scheme: dark) {
  .teacher-diag-mismatch { background: #2c2410; border-color: #c69026; color: #e8c76a; }
}
:root[data-theme="dark"] .teacher-diag-mismatch { background: #2c2410; border-color: #c69026; color: #e8c76a; }
:root[data-theme="light"] .teacher-diag-mismatch { background: #fff8e1; border-color: #f9a825; color: #7c5a00; }

.mk-picker-panel {
  background: var(--card-bg, #f8fafc);
  border: 1.5px solid var(--border, #dce3ed);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 10px;
  font-size: 13px;
}
.mk-picker-panel--error {
  border-color: #e74c3c;
  color: #c0392b;
}
@media (prefers-color-scheme: dark) {
  .mk-picker-panel { background: #1a1e28; border-color: #2e3447; }
  .mk-picker-panel--error { border-color: #e74c3c; color: #ff6b6b; }
}
:root[data-theme="dark"] .mk-picker-panel { background: #1a1e28; border-color: #2e3447; }
:root[data-theme="dark"] .mk-picker-panel--error { border-color: #e74c3c; color: #ff6b6b; }
:root[data-theme="light"] .mk-picker-panel { background: #f8fafc; border-color: #dce3ed; }

.mk-teacher-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}

.mk-teacher-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #dce3ed);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.15s;
}
.mk-teacher-card--current {
  border-color: #27ae60;
  background: #f0fff5;
}
@media (prefers-color-scheme: dark) {
  .mk-teacher-card { background: #20253a; border-color: #2e3447; }
  .mk-teacher-card--current { border-color: #27ae60; background: #0d2416; }
}
:root[data-theme="dark"] .mk-teacher-card { background: #20253a; border-color: #2e3447; }
:root[data-theme="dark"] .mk-teacher-card--current { border-color: #27ae60; background: #0d2416; }
:root[data-theme="light"] .mk-teacher-card { background: #fff; border-color: #dce3ed; }
:root[data-theme="light"] .mk-teacher-card--current { border-color: #27ae60; background: #f0fff5; }

.mk-picker-container {
  margin-top: 6px;
}

/* ── MoyKlass staff binding panel (v7.0.56) ──────────────────────────────── */
.mk-staff-bind-panel {
  border: 1.5px solid var(--border, #dce3ed);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-bg, #f8fafc);
}
.mk-staff-bind-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  user-select: none;
}
.mk-staff-bind-summary::marker, .mk-staff-bind-summary::-webkit-details-marker { display: none; }
.mk-staff-bind-summary::before { content: "▸ "; font-size: 12px; }
.mk-staff-bind-panel[open] .mk-staff-bind-summary::before { content: "▾ "; }
.mk-staff-bind-body { padding: 0 14px 14px; }
.mk-staff-bind-hint {
  font-size: 12px;
  color: var(--muted, #657089);
  margin: 0 0 10px;
  line-height: 1.4;
}
.mk-staff-bind-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.mk-staff-bind-controls input[type="search"] {
  flex: 1;
  min-width: 140px;
  padding: 7px 10px;
  border: 1px solid var(--border, #dce3ed);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg, #fff);
  color: var(--ink, #172033);
}
.mk-staff-bind-controls select {
  padding: 7px 8px;
  border: 1px solid var(--border, #dce3ed);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg, #fff);
  color: var(--ink, #172033);
}
.mk-bind-list-empty { font-size: 13px; color: var(--muted, #657089); padding: 6px 0; }
.mk-bind-card {
  background: var(--card-bg2, #fff);
  border: 1px solid var(--border, #dce3ed);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.mk-bind-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.mk-bind-card-name { font-weight: 700; font-size: 14px; }
.mk-bind-card-meta { font-size: 12px; color: var(--muted, #657089); margin-bottom: 4px; }
.mk-bind-current {
  font-size: 12px;
  color: var(--green, #1fa56b);
  background: rgba(31,165,107,.07);
  border-radius: 6px;
  padding: 3px 7px;
  margin-bottom: 6px;
}
.mk-bind-badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 7px;
}
.mk-bind-badge--linked { background: #e6f4ea; color: #1a7a45; }
.mk-bind-badge--none   { background: #f3f4f6; color: #657089; }
.mk-bind-form {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 6px;
}
.mk-bind-tg-input {
  flex: 1;
  min-width: 130px;
  padding: 6px 9px;
  border: 1px solid var(--border, #dce3ed);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg, #fff);
  color: var(--ink, #172033);
}
.mk-bind-role-select {
  flex: 1;
  min-width: 130px;
  padding: 6px 8px;
  border: 1px solid var(--border, #dce3ed);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg, #fff);
  color: var(--ink, #172033);
}
.mk-src-badge {
  font-size: 10px;
  background: #eef2ff;
  color: #5c6bc0;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .mk-staff-bind-panel { background: #1a1e28; border-color: #2e3447; }
  .mk-bind-card { background: #20253a; border-color: #2e3447; }
  .mk-bind-badge--linked { background: #0d2416; color: #4caf82; }
  .mk-bind-badge--none   { background: #252a3a; color: #8899aa; }
  .mk-bind-current { background: rgba(31,165,107,.12); color: #4caf82; }
  .mk-staff-bind-controls input[type="search"],
  .mk-staff-bind-controls select,
  .mk-bind-tg-input, .mk-bind-role-select { background: #1e2336; border-color: #2e3447; color: #e0e8f0; }
  .mk-src-badge { background: #1e2445; color: #8eacff; }
}
:root[data-theme="dark"] .mk-staff-bind-panel { background: #1a1e28; border-color: #2e3447; }
:root[data-theme="dark"] .mk-bind-card { background: #20253a; border-color: #2e3447; }
:root[data-theme="dark"] .mk-bind-badge--linked { background: #0d2416; color: #4caf82; }
:root[data-theme="dark"] .mk-bind-badge--none   { background: #252a3a; color: #8899aa; }
:root[data-theme="dark"] .mk-bind-current { background: rgba(31,165,107,.12); color: #4caf82; }
:root[data-theme="dark"] .mk-staff-bind-controls input[type="search"],
:root[data-theme="dark"] .mk-staff-bind-controls select,
:root[data-theme="dark"] .mk-bind-tg-input, :root[data-theme="dark"] .mk-bind-role-select { background: #1e2336; border-color: #2e3447; color: #e0e8f0; }
:root[data-theme="light"] .mk-bind-card { background: #fff; border-color: #dce3ed; }
:root[data-theme="light"] .mk-staff-bind-panel { background: #f8fafc; border-color: #dce3ed; }

/* =====================================================
   v7.0.37 — Published-menu edits / Utensils / Teacher view
   ===================================================== */

/* Published menu warning */
.food-published-warning {
  background: #fff8e1;
  border: 1.5px solid #f9a825;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #7c5a00;
  margin: 10px 0;
}
@media (prefers-color-scheme: dark) {
  .food-published-warning { background: #3a2e00; border-color: #e6ac00; color: #ffd54f; }
}
:root[data-theme="dark"] .food-published-warning { background: #3a2e00; border-color: #e6ac00; color: #ffd54f; }
:root[data-theme="light"] .food-published-warning { background: #fff8e1; border-color: #f9a825; color: #7c5a00; }

/* Inline item edit form */
.food-item-edit-form-inline {
  background: var(--color-surface, #f8f9fb);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.food-item-edit-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.food-item-edit-form-row label {
  font-size: 12px;
  color: var(--color-text-secondary, #657089);
  min-width: 72px;
}
.food-item-edit-form-inline select,
.food-item-edit-form-inline input[type="text"] {
  flex: 1;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 7px;
  background: var(--color-bg, #fff);
  color: var(--color-text, #172033);
}
.food-item-edit-form-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.food-item-edit-error { color: #c0392b; font-size: 12px; margin-top: 2px; }

/* Kitchen warm food warning */
.kitchen-warm-warning,
.food-summary-warm-warning {
  background: linear-gradient(90deg, #fff3cd, #fff8e1);
  border: 2px solid #f9a825;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #7c5a00;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 14px;
}
@media (prefers-color-scheme: dark) {
  .kitchen-warm-warning, .food-summary-warm-warning { background: linear-gradient(90deg, #3a2e00, #3a2800); border-color: #e6ac00; color: #ffd54f; }
}
:root[data-theme="dark"] .kitchen-warm-warning,
:root[data-theme="dark"] .food-summary-warm-warning { background: linear-gradient(90deg, #3a2e00, #3a2800); border-color: #e6ac00; color: #ffd54f; }
:root[data-theme="light"] .kitchen-warm-warning,
:root[data-theme="light"] .food-summary-warm-warning { background: linear-gradient(90deg, #fff3cd, #fff8e1); border-color: #f9a825; color: #7c5a00; }

/* Utensils row in summary */
.kitchen-item-row--utensils { font-weight: 600; border-top: 1px dashed var(--border, #e0e0e0); margin-top: 4px; padding-top: 4px; }
.food-summary-utensils-row { font-weight: 600; border-top: 1px dashed var(--border, #e0e0e0); margin-top: 4px; padding-top: 4px; }

/* Teacher class orders */
.food-teacher-class-section { margin-top: 16px; }
.food-teacher-child-card {
  background: var(--color-surface, #f8f9fb);
  border: 1px solid var(--border, #e8ecf4);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.food-teacher-child-card--nofood { opacity: 0.75; }
.food-teacher-child-card--missing { border-color: #ffccbc; }
.food-teacher-child-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.food-child-order-items { margin: 0; padding-left: 16px; font-size: 13px; }
.food-child-order-items li { margin-bottom: 2px; }
.food-child-order-note { font-size: 12px; color: var(--color-text-secondary, #657089); }
.food-child-order-note--missing { color: #c0392b; }

/* =====================================================
   v7.0.36 — Animation Layer
   ===================================================== */

/* --- Keyframes --- */
@keyframes ycFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ycCardEnter {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes ycSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ycNoticeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Utility animation classes --- */
.yc-fade-in     { animation: ycFadeIn    var(--yc-normal) var(--yc-ease) both; }
.yc-slide-up    { animation: ycSlideUp   var(--yc-normal) var(--yc-ease) both; }
.yc-card-enter  { animation: ycCardEnter var(--yc-normal) var(--yc-ease) both; }
.yc-notice-enter { animation: ycNoticeIn var(--yc-fast)  var(--yc-ease) both; }
.yc-list-enter  { animation: ycFadeIn    var(--yc-fast)  var(--yc-ease) both; }
.yc-soft-update { animation: ycCardSoftPulse 380ms ease-out; }

/* Press-feedback utility */
.yc-pressable {
  transition: transform var(--yc-fast) ease,
              background-color var(--yc-fast) ease,
              opacity var(--yc-fast) ease;
}
.yc-pressable:active:not(:disabled) { transform: scale(.97); }

/* =====================================================
   ALE-73 - NAVIGATION MOTION
   One motion system for every view change in the Mini App.

   Layer 1 - top-level tabs. activateTab() removes .active from every
   panel and adds it to the target one, so the browser restarts this
   animation by itself: no JS, no timers, nothing that can hang, and
   rapid repeated taps simply restart it. Panels live inside <main>,
   while the app header (.topbar / .cm-app-header / .cm-page-header) and
   the fixed bottom navigation are its SIBLINGS - so neither is ever
   animated or displaced by this rule.

   Layer 2 - inner logical views (payments sub-tabs, "Клиенты" modes,
   "Рассылки" screens/steps, Availability modes, client payments
   "К оплате"/"История"). Those swap innerHTML inside an already-active
   panel, so .active never toggles and layer 1 cannot see them. They go
   through the single _navViewEnter() primitive in app.js, which applies
   .yc-view-enter below. Same keyframes, same token, same easing as layer
   1, so the whole app moves as one system.
   ===================================================== */

/* --- Layer 1: the single canonical tab-panel enter --- */
@keyframes ycNavViewEnter {
  from { opacity: 0; transform: translateY(var(--motion-nav-distance, 8px)); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab-panel.active {
  /* `both`, deliberately — this matches the fill mode the app used before
     ALE-73 (ycFadeIn ... both) and must not change. Tried `backwards` while
     chasing the client_manager report and measured the consequence live:
     dropping the end-state fill also drops the leftover translateY(0), the
     panel stops being a containing block, and every position:fixed
     descendant re-anchors to the viewport — the Availability footer moved
     from 45px to 96px above the bottom. That is an accepted-layout change,
     so `both` stays. */
  animation: ycNavViewEnter var(--motion-nav, 200ms) var(--ease-enter, ease) both;
}

/* --- Layer 2: inner logical views ---
   Deliberately the SAME self-completing animation as layer 1, not a
   two-class "hide now / reveal on a callback" transition. An animation
   with `both` fill reaches the element's natural end state by itself, so
   no JS callback has to arrive for the content to be visible; the
   transition shape does need one, and a throttled or backgrounded
   renderer is exactly where it is late. Reusing one set of keyframes
   also means the two layers cannot drift apart. The class changes
   nothing at rest, so no accepted client / client_manager layout is
   affected. */
.yc-view-enter {
  animation: ycNavViewEnter var(--motion-nav, 200ms) var(--ease-enter, ease) both;
}

/* --- Reduced motion: explicitly disable ALL of the above ---
   The app already carries blanket prefers-reduced-motion overrides, but
   this navigation motion must not depend on one of them still being
   there. */
@media (prefers-reduced-motion: reduce) {
  .tab-panel.active { animation: none; }
  .yc-view-enter { animation: none; }
}

/* --- Notice bar --- */
.notice.ok    { animation: ycNoticeIn var(--yc-fast) var(--yc-ease) both; }
.notice.error { animation: ycNoticeIn var(--yc-fast) var(--yc-ease) both; }

/* --- Children report compact layout (v7.0.50) --- */
.cr-card { background: var(--card); border-radius: 18px; padding: 14px 16px; }
.cr-title { font-size: 16px; font-weight: 800; margin: 0 0 12px; }
.cr-section { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cr-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.cr-section-head { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 0 6px; }
.cr-total { display: flex; justify-content: space-between; align-items: baseline; }
.cr-total-label { font-size: 12px; font-weight: 600; color: var(--text); }
.cr-total-n { font-size: 19px; font-weight: 900; color: var(--accent); }
.cr-loc-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 12px; }
.cr-loc-name { color: var(--text); }
.cr-loc-code { font-size: 10px; color: var(--muted); margin-left: 4px; }
.cr-loc-n { font-weight: 700; min-width: 24px; text-align: right; }
.cr-note { font-size: 11px; color: var(--muted); margin: 5px 0 0; line-height: 1.4; }
.cr-excl { font-size: 11px; color: var(--muted); margin: 3px 0 0; }
.cr-groups { font-size: 11px; color: var(--muted); margin: 4px 0 0; font-style: italic; }
.cr-verify { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.cr-verify summary { font-size: 12px; font-weight: 700; cursor: pointer; color: var(--accent); padding: 4px 0; list-style: none; }
.cr-verify summary::before { content: "▸ "; }
.cr-verify[open] summary::before { content: "▾ "; }
.cr-child { padding: 5px 0; border-bottom: 1px solid rgba(16,24,40,.05); }
.cr-child:last-child { border-bottom: none; }
.cr-child-name { font-size: 12px; font-weight: 700; }
.cr-child-meta { font-size: 11px; color: var(--muted); line-height: 1.3; }
.cr-child-dates { font-size: 10px; color: var(--muted); }
.cr-diag { margin-top: 8px; }
.cr-diag summary { font-size: 11px; cursor: pointer; color: var(--muted); }
.cr-diag-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 11px; }
@media (prefers-color-scheme: dark) {
  .cr-card { border: 1px solid rgba(255,255,255,.08); }
  .cr-tile { background: rgba(255,255,255,.07); }
}
/* --- Children report summary tiles + overlaps (v7.0.53) --- */
.cr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.cr-tile { background: rgba(0,0,0,.04); border-radius: 10px; padding: 8px 6px; text-align: center; }
.cr-tile-n { font-size: 20px; font-weight: 900; color: var(--accent); display: block; line-height: 1.1; }
.cr-tile-label { font-size: 10px; color: var(--muted); display: block; margin-top: 2px; line-height: 1.2; }
.cr-overlap { margin-top: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.cr-overlap-head { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 4px; }
.cr-overlap-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; color: var(--text); }
.cr-overlap-n { font-weight: 700; }
.cr-groups-block { margin-top: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.cr-groups-block-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 4px; }
.cr-groups-total { font-size: 12px; font-weight: 700; margin-top: 4px; color: var(--text); }
.cr-group-row { padding: 4px 0; border-bottom: 1px solid var(--line); }
.cr-group-name { font-size: 12px; font-weight: 600; color: var(--text); }
.cr-group-meta { font-size: 11px; color: var(--muted); margin-top: 1px; }
.cr-revenue-block { margin-top: 12px; padding: 10px 0; border-top: 2px solid var(--accent); }
.cr-revenue-title { font-size: 13px; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
.cr-rev-tiles { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cr-rev-tile { background: var(--card-bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 110px; flex: 1 1 110px; text-align: center; }
.cr-rev-n { font-size: 15px; font-weight: 800; color: var(--accent); display: block; line-height: 1.2; }
.cr-rev-label { font-size: 10px; color: var(--muted); display: block; margin-top: 2px; }
.cr-rev-pos { color: #27ae60; }
.cr-rev-neg { color: #e74c3c; }
.cr-rev-group { padding: 6px 0; border-bottom: 1px solid var(--line); }
.cr-rev-group-name { font-size: 12px; font-weight: 700; color: var(--text); }
.cr-rev-group-loc { font-size: 11px; color: var(--muted); }
.cr-rev-group-stats { font-size: 11px; color: var(--muted); margin-top: 2px; }
.cr-rev-group-money { font-size: 12px; margin-top: 3px; color: var(--text); }
.cr-rev-group-label { color: var(--muted); }
.cr-rev-section-title { font-size: 12px; font-weight: 700; color: var(--text); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .3px; opacity: .7; }
.cr-rev-by-loc { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cr-rev-loc-row { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.cr-rev-loc-row:last-child { border-bottom: none; }
.cr-rev-loc-total { background: rgba(0,0,0,.04); }
.cr-rev-loc-name { font-size: 12px; font-weight: 700; color: var(--text); }
.cr-rev-loc-code { font-weight: 400; color: var(--muted); }
.cr-rev-loc-meta { font-size: 11px; color: var(--muted); margin-top: 1px; }
.cr-rev-loc-money { font-size: 12px; color: var(--text); margin-top: 3px; }
.cr-rev-loc-money span { color: var(--muted); }

/* --- Client flow block --- */
.cr-cf-block { margin-top: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.cr-cf-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 4px; }
.cr-cf-note { margin-top: 4px; margin-bottom: 6px; }
.cr-cf-breakdown { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 6px; }
.cr-cf-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.cr-cf-row:last-child { border-bottom: none; }
.cr-cf-status { color: var(--text); }
.cr-cf-count { font-weight: 700; color: var(--text); }
.cr-cf-scanned { margin-top: 5px; }
.cr-cf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.cr-cf-tile { background: var(--card-bg, rgba(0,0,0,.03)); border-radius: 8px; padding: 8px 6px; text-align: center; }
.cr-cf-tile-n { display: block; font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.1; }
.cr-cf-tile-n.positive { color: #27ae60; }
.cr-cf-tile-n.negative { color: #c0392b; }
.cr-cf-tile-label { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.2; }

/* --- Lesson cards --- */
.lc-card { animation: ycCardEnter var(--yc-normal) var(--yc-ease) both; }

/* --- Task sections (animate container, not individual cards) --- */
.task-section { animation: ycFadeIn var(--yc-fast) var(--yc-ease) both; }

/* --- Intern track accordion --- */
.intern-acc { animation: ycFadeIn var(--yc-normal) var(--yc-ease) both; }

/* --- Food panel containers (replaced wholesale via innerHTML) --- */
.food-debug-card { animation: ycFadeIn var(--yc-normal) var(--yc-ease) both; }

/* --- Food menu cards (admin list) --- */
.food-menu-card { animation: ycCardEnter var(--yc-normal) var(--yc-ease) both; }

/* --- Admin manual order form (slides up like a drawer) --- */
.food-admin-form-wrap { animation: ycSlideUp var(--yc-normal) var(--yc-ease) both; }

/* --- Food audit block --- */
.food-audit-block { animation: ycFadeIn var(--yc-fast) var(--yc-ease) both; }

/* --- Parent food order cards --- */
.parent-food-card { animation: ycCardEnter var(--yc-normal) var(--yc-ease) both; }
.food-order-card,
.food-order-card--collapsed { animation: ycCardEnter var(--yc-normal) var(--yc-ease) both; }

/* --- Kitchen panels --- */
.kitchen-panel,
.restaurant-panel { animation: ycFadeIn var(--yc-fast) var(--yc-ease) both; }

/* --- Kitchen editor menu cards --- */
.kitchen-editor-menu-card { animation: ycFadeIn var(--yc-fast) var(--yc-ease) both; }

/* --- Food admin action buttons (press feedback) --- */
.food-admin-edit-btn,
.food-admin-add-btn,
.food-order-delete-btn {
  transition: transform var(--yc-fast) ease,
              background-color var(--yc-fast) ease,
              opacity var(--yc-fast) ease;
}
.food-admin-edit-btn:active,
.food-admin-add-btn:active,
.food-order-delete-btn:active { transform: scale(.96); }

/* --- Safety: no animation/transform on disabled buttons --- */
button:disabled:active,
button[disabled]:active,
input:disabled { animation: none !important; transform: none !important; }

/* --- bePaid chips and tiles (v7.0.74) --- */
.chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 12px; font-size: 11px; font-weight: 600; background: rgba(0,0,0,.07); color: var(--text); line-height: 1.5; }
.chip-ok    { background: rgba(39,174,96,.15);  color: #1e8449; }
.chip-warn  { background: rgba(230,126,34,.15); color: #a04000; }
.chip-error { background: rgba(231,76,60,.15);  color: #a93226; }
.chip-info  { background: rgba(52,152,219,.15); color: #1a6da0; }
.chip-muted { background: rgba(0,0,0,.06);      color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .chip       { background: rgba(255,255,255,.10); }
  .chip-ok    { background: rgba(39,174,96,.25);  color: #58d68d; }
  .chip-warn  { background: rgba(230,126,34,.25); color: #f0b27a; }
  .chip-error { background: rgba(231,76,60,.25);  color: #f1948a; }
  .chip-info  { background: rgba(52,152,219,.25); color: #7fb3d3; }
  .chip-muted { background: rgba(255,255,255,.08); }
}
:root[data-theme="dark"] .chip       { background: rgba(255,255,255,.10); }
:root[data-theme="dark"] .chip-ok    { background: rgba(39,174,96,.25);  color: #58d68d; }
:root[data-theme="dark"] .chip-warn  { background: rgba(230,126,34,.25); color: #f0b27a; }
:root[data-theme="dark"] .chip-error { background: rgba(231,76,60,.25);  color: #f1948a; }
:root[data-theme="dark"] .chip-info  { background: rgba(52,152,219,.25); color: #7fb3d3; }
:root[data-theme="dark"] .chip-muted { background: rgba(255,255,255,.08); }
:root[data-theme="light"] .chip       { background: rgba(0,0,0,.07); color: var(--text); }
:root[data-theme="light"] .chip-ok    { background: rgba(39,174,96,.15);  color: #1e8449; }
:root[data-theme="light"] .chip-warn  { background: rgba(230,126,34,.15); color: #a04000; }
:root[data-theme="light"] .chip-error { background: rgba(231,76,60,.15);  color: #a93226; }
:root[data-theme="light"] .chip-info  { background: rgba(52,152,219,.15); color: #1a6da0; }
:root[data-theme="light"] .chip-muted { background: rgba(0,0,0,.06);      color: var(--muted); }

.cr-tile-val { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.1; }
.cr-tile-lbl { font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.2; }
.cr-tile-ok   { border-top: 3px solid #27ae60; }
.cr-tile-warn { border-top: 3px solid #e67e22; }
.cr-tile-err  { border-top: 3px solid #e74c3c; }
.cr-tile-info { border-top: 3px solid #3498db; }
.cr-tile-muted { border-top: 3px solid var(--muted); }
.cr-note { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.cr-diag-grid { margin-top: 6px; }

/* --- bePaid reconcile mobile cards (v7.0.74) --- */
.bepaid-card {
  background: var(--card-bg, rgba(0,0,0,.03));
  border: 1px solid var(--line, rgba(0,0,0,.1));
  border-radius: 12px;
  padding: 10px 12px;
}
.bepaid-card-muted { opacity: .6; }
.bepaid-card-hist { border-left: 3px solid #e67e22; opacity: .85; }
.chip-hist { background: rgba(230,126,34,.12) !important; color: #a04000 !important; }
@media (prefers-color-scheme: dark) { .chip-hist { background: rgba(230,126,34,.22) !important; color: #f0b27a !important; } }
:root[data-theme="dark"] .chip-hist { background: rgba(230,126,34,.22) !important; color: #f0b27a !important; }
:root[data-theme="light"] .chip-hist { background: rgba(230,126,34,.12) !important; color: #a04000 !important; }
.bepaid-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
@media (prefers-color-scheme: dark) {
  .bepaid-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
}
:root[data-theme="dark"] .bepaid-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
:root[data-theme="light"] .bepaid-card { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.10); }

/* ── payment intents toolbar v7.0.87 ────────────────────────────────────────── */
:root { --pi-control-h: 40px; }

.pi-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.pi-toolbar-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.pi-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.pi-toolbar-field-label {
  font-size: 12px;
  color: var(--muted);
}
.pi-toolbar-field > select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: var(--pi-control-h);
  min-height: var(--pi-control-h);
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #172033;
}
.pi-toolbar .yc-month-picker {
  height: var(--pi-control-h);
  min-height: var(--pi-control-h);
}
.pi-toolbar-actions {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.pi-toolbar-actions > button {
  width: 100%;
  min-width: 0;
  height: var(--pi-control-h);
  min-height: var(--pi-control-h);
  white-space: nowrap;
  box-sizing: border-box;
}
@media (max-width: 340px) {
  .pi-toolbar-filters,
  .pi-toolbar-actions { grid-template-columns: 1fr; }
}
.pi-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.pi-stat-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 10px;
  background: rgba(0,0,0,.06);
  color: var(--muted);
}
.pi-stat-chip.has-value { background: rgba(52,152,219,.12); color: #1a6da0; }
.pi-list { display: flex; flex-direction: column; gap: 10px; }
.pi-list > .pi-card { animation: ycCardEnter var(--motion-normal, 200ms) var(--ease-enter, ease) both; }
.pi-list > .pi-card:nth-child(2) { animation-delay: 30ms; }
.pi-list > .pi-card:nth-child(3) { animation-delay: 60ms; }
.pi-list > .pi-card:nth-child(4) { animation-delay: 90ms; }
.pi-list > .pi-card:nth-child(5) { animation-delay: 120ms; }
.pi-list > .pi-card:nth-child(6) { animation-delay: 150ms; }
.pi-list > .pi-card:nth-child(7) { animation-delay: 175ms; }
.pi-list > .pi-card:nth-child(8) { animation-delay: 200ms; }
.pi-list > .pi-card:nth-child(n+9) { animation-delay: 200ms; }
.pi-card {
  position: relative;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  scroll-margin-top: 72px;
  scroll-margin-bottom: 24px;
}
.pi-card-cancelled { opacity: .6; }
.pi-card-posted { border-left: 3px solid var(--green, #1fa56b); }
.pi-card-error { border-left: 3px solid var(--red, #d84c4c); }
.pi-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pi-card-name { font-weight: 700; font-size: 14px; }
.pi-card-amount { font-weight: 700; font-size: 15px; color: var(--green, #1fa56b); }
.pi-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.pi-card-comment { font-size: 12px; color: var(--muted); margin-top: 4px; font-style: italic; }
.pi-card-footer {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pi-card-id { font-size: 10px; color: var(--muted); margin-top: 4px; }
.pi-bepaid-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  background: rgba(155,89,182,.09);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
}
.pi-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 24px 0; }
/* status chips for pi */
.chip-pi-draft          { background: rgba(0,0,0,.07); color: var(--muted); }
.chip-pi-ready          { background: rgba(52,152,219,.13); color: #1a6da0; }
.chip-pi-creating       { background: rgba(230,126,34,.13); color: #a04000; }
.chip-pi-bepaid         { background: rgba(155,89,182,.13); color: #6c3483; }
.chip-pi-requires-check { background: rgba(231,76,60,.13); color: #a93226; }
.chip-pi-paid           { background: rgba(39,174,96,.15); color: #1e8449; }
.chip-pi-posted         { background: rgba(39,174,96,.22); color: #145a32; }
.chip-pi-cancel         { background: rgba(0,0,0,.06); color: var(--muted); }
.chip-pi-error          { background: rgba(231,76,60,.13); color: #a93226; }
.pi-bepaid-creating {
  font-size: 12px;
  color: #a04000;
  background: rgba(230,126,34,.10);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
}
.pi-bepaid-requires-check {
  font-size: 12px;
  color: #7b241c;
  background: rgba(231,76,60,.10);
  border: 1px solid rgba(231,76,60,.25);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 6px;
}
.pi-bepaid-paid {
  font-size: 12px;
  color: #15996f;
  background: rgba(21,153,111,.08);
  border: 1.5px solid rgba(21,153,111,.30);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 6px;
}
.pi-card-paid { opacity: 0.92; }
@media (prefers-color-scheme: dark) {
  .pi-bepaid-paid {
    color: #5ad8a6;
    background: rgba(90,216,166,.09);
    border-color: rgba(90,216,166,.28);
  }
}
:root[data-theme="dark"] .pi-bepaid-paid {
  color: #5ad8a6;
  background: rgba(90,216,166,.09);
  border-color: rgba(90,216,166,.28);
}
/* purpose chips */
.chip-purpose-debt { background: rgba(230,126,34,.12); color: #a04000; }
.chip-purpose-adv  { background: rgba(155,89,182,.12); color: #6c3483; }
.chip-purpose-city { background: rgba(52,152,219,.12); color: #1a6da0; }
/* ── MK Invoices section v7.0.90 ─────────────────────────────────────────── */
.mk-invoices-section {
  margin-top: 20px;
  border-top: 1px solid var(--border, rgba(0,0,0,.1));
  padding-top: 16px;
}
.mk-invoices-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.mk-invoices-title {
  font-weight: 600;
  font-size: 14px;
}
.mk-invoices-subtitle {
  font-size: 12px;
  color: var(--muted);
}
.mk-invoices-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mk-invoice-card {
  background: var(--surface, #f5f5f5);
  border-radius: 12px;
  padding: 12px 14px;
  animation: ycCardEnter var(--motion-normal, 260ms) var(--ease-enter, ease) both;
}
.mk-invoice-card.has-active-intent {
  opacity: .75;
}
/* student name — main heading of invoice card */
.mk-invoice-student-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.2;
}
.mk-invoice-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.mk-invoice-number { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.mk-invoice-status-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mk-invoice-pay-until { font-size: 11px; color: var(--muted); }
.mk-invoice-card-amount { font-weight: 700; font-size: 18px; color: var(--accent, #1fa56b); white-space: nowrap; }
/* 3-column finance breakdown */
.mk-invoice-finance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}
.mk-invoice-finance__item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mk-invoice-finance__label {
  font-size: 11px;
  color: #687083;
  font-weight: 500;
  white-space: nowrap;
}
.mk-invoice-finance__value {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #172033;
  overflow-wrap: anywhere;
}
.mk-invoice-finance__value--remaining {
  color: #15996f;
}
@media (max-width: 350px) {
  .mk-invoice-finance { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) {
  .mk-invoice-finance__label { color: rgba(255,255,255,.55); }
  .mk-invoice-finance__value { color: #f4f7fb; }
  .mk-invoice-finance__value--remaining { color: #5ad8a6; }
}
:root[data-theme="dark"] .mk-invoice-finance__label { color: rgba(255,255,255,.55); }
:root[data-theme="dark"] .mk-invoice-finance__value { color: #f4f7fb; }
:root[data-theme="dark"] .mk-invoice-finance__value--remaining { color: #5ad8a6; }
.mk-invoice-detail-row { font-size: 12px; margin: 3px 0; }
.mk-invoice-user-id { font-size: 10px; color: var(--muted); margin-top: 4px; }
.mk-invoice-card-footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mk-invoice-blocked-note { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 4px; }
/* intent badge inside invoice card */
.mk-invoice-intent-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(50,103,255,.06);
  border-radius: 8px;
  font-size: 12px;
}
.mk-invoice-intent-status { font-size: 10px; color: var(--muted); }
/* bePaid row inside invoice card */
.mk-invoice-bepaid-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(31,165,107,.06);
  border-radius: 8px;
  font-size: 12px;
}
/* intent card highlight — yellow ring via ::after so it doesn't conflict with ycCardEnter */
@keyframes piIntentHighlightRing {
  0%   { opacity: 0; transform: scale(0.985); }
  18%  { opacity: 1; transform: scale(1); }
  65%  { opacity: 1; }
  100% { opacity: 0; }
}
/* Background tint on the card itself (no animation property, so ycCardEnter keeps working) */
.pi-card-highlight {
  background-color: rgba(255, 214, 51, 0.10);
  transition: background-color 300ms ease;
}
/* Animated ring via ::after pseudo-element — independent of card's animation property */
.pi-card-highlight::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2.5px solid rgba(255, 196, 0, 0.95);
  border-radius: inherit;
  pointer-events: none;
  animation: piIntentHighlightRing 1900ms ease both;
}
@media (prefers-reduced-motion: reduce) {
  .pi-card-highlight::after {
    animation: none;
    opacity: 1;
    border: 3px solid #f2c200;
  }
}
@media (prefers-color-scheme: dark) {
  .pi-card-highlight { background-color: rgba(255, 214, 51, 0.08); }
}
:root[data-theme="dark"] .pi-card-highlight { background-color: rgba(255, 214, 51, 0.08); }

/* ALE-80 — "Изменить режим клиента" landing flash on the mobile
   .ws-pilot-card (a plain div, so the background reliably repaints — see
   _wsGoToPilotClientMode). Same yellow token as .pi-card-highlight above,
   background-only (no ::after ring). Compound selector (not just
   .ws-attn-goto-highlight alone) so this reliably beats .ws-pilot-card's own
   `background` shorthand declared later in this file — same specificity +
   later source order would otherwise win. */
.ws-pilot-card.ws-attn-goto-highlight {
  background-color: rgba(255, 214, 51, 0.10);
  transition: background-color 300ms ease;
}
@media (prefers-color-scheme: dark) {
  .ws-pilot-card.ws-attn-goto-highlight { background-color: rgba(255, 214, 51, 0.08); }
}
:root[data-theme="dark"] .ws-pilot-card.ws-attn-goto-highlight { background-color: rgba(255, 214, 51, 0.08); }
/* source badge on intent cards */
.pi-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 500;
}
.pi-source-badge-mk   { background: rgba(39,174,96,.12); color: #1e8449; }
.pi-source-badge-auto { background: rgba(52,120,246,.12); color: #1a56c4; }
.pi-source-badge-manual { background: rgba(0,0,0,.06); color: var(--muted); }
/* manual form warning */
.pi-manual-form-warning {
  margin-top: 16px;
  font-size: 11px;
  color: var(--muted);
  padding: 8px 12px;
  background: rgba(230,126,34,.08);
  border: 1px solid rgba(230,126,34,.18);
  border-radius: 8px;
}
/* search grid — v7.0.90.4 */
.mk-search-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 4px;
}
.mk-search-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mk-search-field-wide {}
.mk-search-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.mk-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mk-search-row input {
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #172033;
  outline: none;
}
.mk-search-row input:focus {
  border-color: var(--blue, #3267ff);
  background: #fff;
}
.mk-search-row input::placeholder { color: #9aa3b5; }
.mk-search-row input:disabled { opacity: .6; }
@media (prefers-color-scheme: dark) {
  .mk-search-row input { background: #23293a; border-color: rgba(255,255,255,.15); color: #e8ecf4; }
  .mk-search-row input:focus { border-color: #5e8aff; background: #23293a; }
  .mk-search-row input::placeholder { color: #7a8499; }
}
:root[data-theme="dark"] .mk-search-row input { background: #23293a; border-color: rgba(255,255,255,.15); color: #e8ecf4; }
:root[data-theme="dark"] .mk-search-row input:focus { border-color: #5e8aff; background: #23293a; }
:root[data-theme="dark"] .mk-search-row input::placeholder { color: #7a8499; }
/* diagnostics block (owner/admin only) — v7.0.90.1 */
.mk-invoices-diag {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 10px;
  color: var(--muted);
  padding: 6px 10px;
  background: rgba(0,0,0,.04);
  border-radius: 6px;
  margin-bottom: 8px;
}
.mk-diag-warn { color: #c0392b; }
/* subscription-debt-without-invoice empty state */
.mk-empty-debt-warn {
  color: var(--muted);
  font-size: 13px;
  padding: 10px 14px;
  background: rgba(230,126,34,.07);
  border: 1px solid rgba(230,126,34,.18);
  border-radius: 8px;
}
@media (prefers-color-scheme: dark) {
  .mk-invoice-card { background: rgba(255,255,255,.06); }
  .mk-invoices-diag { background: rgba(255,255,255,.05); }
  .mk-invoice-intent-badge { background: rgba(50,103,255,.10); }
  .mk-invoice-bepaid-row { background: rgba(31,165,107,.10); }
}
:root[data-theme="dark"] .mk-invoice-card { background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .mk-invoices-diag { background: rgba(255,255,255,.05); }
:root[data-theme="dark"] .mk-invoice-intent-badge { background: rgba(50,103,255,.10); }
:root[data-theme="dark"] .mk-invoice-bepaid-row { background: rgba(31,165,107,.10); }
/* ── PI Modal System v7.0.85 — portal-based, iOS-safe ─────────────────────── */

/* scroll-lock state applied by JS piLockPageScroll() */
html.pi-modal-open,
body.pi-modal-open {
  overscroll-behavior: none;
}

/* keyframes */
@keyframes piBackdropIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes piBackdropOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes piSheetUp     { from { transform: translateY(60%) } to { transform: none } }
@keyframes piSheetDown   { from { transform: none } to { transform: translateY(110%) } }
@keyframes piScaleIn     { from { opacity: 0; transform: translateY(8px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes piScaleOut    { from { opacity: 1 } to { opacity: 0; transform: translateY(8px) scale(.97) } }

/* backdrop — IS the full-screen dark overlay; direct child of <body> via #piModalRoot */
.pi-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 14, 27, 0.62);
  overscroll-behavior: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  animation: piBackdropIn 240ms ease both;
}
.pi-modal.hidden { display: none !important; }
.pi-modal.pi-closing { animation: piBackdropOut 200ms ease both; }

@media (min-width: 600px) {
  .pi-modal { align-items: center; padding: 20px; }
}

/* sheet — the visible sliding / scaling panel */
.pi-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
  background: #fff;
  color: #172033;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 -4px 40px rgba(0, 0, 0, .22);
  animation: piSheetUp 300ms cubic-bezier(.32,.72,0,1) both;
}
.pi-modal.pi-closing .pi-modal-sheet { animation: piSheetDown 240ms cubic-bezier(.32,.72,0,1) both; }
.pi-modal-sheet-sm { max-width: 420px; }

@media (min-width: 600px) {
  .pi-modal-sheet {
    width: min(96vw, 500px);
    max-height: calc(100dvh - 40px);
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
    animation: piScaleIn 240ms ease both;
  }
  .pi-modal.pi-closing .pi-modal-sheet { animation: piScaleOut 200ms ease both; }
  .pi-modal-sheet-sm { width: min(96vw, 400px); }
}

/* header — never scrolls */
.pi-modal-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e8ecf4;
}
.pi-modal-head h3 { margin: 0; font-size: 15px; }
.pi-modal-close {
  background: none; border: none; font-size: 18px;
  cursor: pointer; color: #657089; padding: 4px 8px; line-height: 1;
  border-radius: 8px;
}
.pi-modal-close:hover { background: rgba(0, 0, 0, .06); }

/* body — ONLY this scrolls; header and footer stay fixed */
.pi-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pi-modal-body label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #657089; }
.pi-modal-body label span { font-weight: 600; }
.pi-modal-body input, .pi-modal-body select, .pi-modal-body textarea {
  font-size: 14px;
  padding: 8px 10px;
  border: 1.5px solid #e0e4ef;
  border-radius: 8px;
  background: #f6f7fb;
  color: #172033;
  font-family: inherit;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-inline-size: 0;
  box-sizing: border-box;
  outline: none;
  transition: border-color 140ms;
}
.pi-modal-body input:focus, .pi-modal-body select:focus, .pi-modal-body textarea:focus {
  border-color: #3498db;
  background: #fff;
}
.pi-modal-body textarea { resize: vertical; min-height: 52px; }
.pi-modal-body .yc-month-picker {
  height: 40px;
  min-height: 40px;
  border: 1.5px solid #e0e4ef;
  background: #f6f7fb;
}
.pi-modal-body .yc-month-picker__value { font-size: 14px; }
.pi-modal-body .yc-month-picker:focus-within { border-color: #3498db; background: #fff; }

/* footer — never scrolls, home-indicator safe */
.pi-modal-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
  border-top: 1px solid #e8ecf4;
}
.pi-modal-footer button { flex: 1; }

.pi-form-error   { background: rgba(231,76,60,.1);  color: #a93226; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.pi-form-warning { background: rgba(230,126,34,.1); color: #a04000; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.req { color: var(--red, #d84c4c); }
button.danger { background: var(--red, #d84c4c); color: #fff; border: none; padding: 9px 18px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; }

/* toast — above bottom-nav (bottom-nav ≈ z 100), below modal */
.pi-toast {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #172033; color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  max-width: min(80vw, 300px);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-normal, 200ms) ease, transform var(--motion-normal, 200ms) var(--ease-enter, ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pi-toast.pi-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* reduced motion — global catch-all (pi-modal specific already merged here) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* dark theme */
@media (prefers-color-scheme: dark) {
  .pi-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
  .pi-modal-sheet { background: #1c2333; color: #e8ecf4; }
  .pi-modal-head { border-bottom-color: rgba(255,255,255,.10); }
  .pi-modal-head h3 { color: #e8ecf4; }
  .pi-modal-close { color: #8899b4; }
  .pi-modal-close:hover { background: rgba(255,255,255,.08); }
  .pi-modal-body label { color: #8899b4; }
  .pi-modal-body input, .pi-modal-body select, .pi-modal-body textarea {
    background: #263047; border-color: rgba(255,255,255,.14); color: #e8ecf4;
  }
  .pi-modal-body input:focus, .pi-modal-body select:focus, .pi-modal-body textarea:focus {
    border-color: #3498db; background: #172b40;
  }
  .pi-modal-footer { border-top-color: rgba(255,255,255,.10); }
  .pi-modal-body .yc-month-picker { background: #263047; border-color: rgba(255,255,255,.14); color: #e8ecf4; }
  .pi-modal-body .yc-month-picker:focus-within { background: #172b40; border-color: #3498db; }
  .pi-toolbar-field > select, .pi-toolbar .yc-month-picker { background: #263047; border-color: rgba(255,255,255,.14); color: #e8ecf4; }
  .pi-toolbar .yc-month-picker__value { color: #e8ecf4; }
  .pi-toolbar-actions > button.secondary { background: #263047; border-color: rgba(255,255,255,.14); color: #e8ecf4; }
  .chip-pi-draft { background: rgba(255,255,255,.08); }
  .chip-pi-cancel { background: rgba(255,255,255,.06); }
  .pi-toast { background: #e8ecf4; color: #172033; }
}
:root[data-theme="dark"] .pi-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
:root[data-theme="dark"] .pi-modal-sheet { background: #1c2333; color: #e8ecf4; }
:root[data-theme="dark"] .pi-modal-head { border-bottom-color: rgba(255,255,255,.10); }
:root[data-theme="dark"] .pi-modal-head h3 { color: #e8ecf4; }
:root[data-theme="dark"] .pi-modal-close { color: #8899b4; }
:root[data-theme="dark"] .pi-modal-close:hover { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .pi-modal-body label { color: #8899b4; }
:root[data-theme="dark"] .pi-modal-body input,
:root[data-theme="dark"] .pi-modal-body select,
:root[data-theme="dark"] .pi-modal-body textarea { background: #263047; border-color: rgba(255,255,255,.14); color: #e8ecf4; }
:root[data-theme="dark"] .pi-modal-body input:focus,
:root[data-theme="dark"] .pi-modal-body select:focus,
:root[data-theme="dark"] .pi-modal-body textarea:focus { border-color: #3498db; background: #172b40; }
:root[data-theme="dark"] .pi-modal-footer { border-top-color: rgba(255,255,255,.10); }
:root[data-theme="dark"] .pi-modal-body .yc-month-picker { background: #263047; border-color: rgba(255,255,255,.14); color: #e8ecf4; }
:root[data-theme="dark"] .pi-modal-body .yc-month-picker:focus-within { background: #172b40; border-color: #3498db; }
:root[data-theme="dark"] .pi-toolbar-field > select,
:root[data-theme="dark"] .pi-toolbar .yc-month-picker { background: #263047; border-color: rgba(255,255,255,.14); color: #e8ecf4; }
:root[data-theme="dark"] .pi-toolbar .yc-month-picker__value { color: #e8ecf4; }
:root[data-theme="dark"] .pi-toolbar-actions > button.secondary { background: #263047; border-color: rgba(255,255,255,.14); color: #e8ecf4; }
:root[data-theme="dark"] .pi-toast { background: #e8ecf4; color: #172033; }
:root[data-theme="light"] .pi-card { background: #fff; border-color: rgba(0,0,0,.10); }
:root[data-theme="light"] .pi-modal-sheet { background: #fff; color: #172033; }
:root[data-theme="light"] .pi-modal-body input,
:root[data-theme="light"] .pi-modal-body select,
:root[data-theme="light"] .pi-modal-body textarea { background: #f6f7fb; border-color: #e0e4ef; color: #172033; }
:root[data-theme="light"] .pi-toolbar-field > select,
:root[data-theme="light"] .pi-toolbar .yc-month-picker { background: #fff; border-color: #e8ecf4; color: #172033; }

/* ── MoyKlass payment posting UI (v7.0.92) ────────────────────────────── */
.pi-mk-posted { margin: 6px 0 4px; padding: 8px 10px; border-radius: 8px; background: rgba(16,185,129,.10); border-left: 3px solid #10b981; font-size: 12px; }
.pi-mk-posted strong { color: #10b981; display: block; margin-bottom: 2px; }
.mk-readiness-checks { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.mk-readiness-check { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; padding: 3px 0; }
.mk-readiness-check.ok .mk-readiness-icon { color: #10b981; }
.mk-readiness-check.fail .mk-readiness-icon { color: var(--red, #e53e3e); }
.mk-readiness-icon { flex: 0 0 14px; font-weight: 700; }
.mk-readiness-label { flex: 1; }
.mk-readiness-detail { color: var(--muted, #888); font-size: 10px; }
.mk-readiness-warnings { margin-bottom: 8px; }
.mk-readiness-warning { font-size: 11px; color: #b45309; background: rgba(180,83,9,.08); padding: 4px 8px; border-radius: 6px; margin-bottom: 4px; }
.mk-post-preview { border: 1px solid rgba(0,0,0,.10); border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 12px; }
.mk-post-preview-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.mk-post-preview-row:last-child { border-bottom: none; }
.mk-post-preview-row span { color: var(--muted, #888); }
.mk-post-preview-row strong { text-align: right; }
.mk-post-warning-serious { font-size: 12px; font-weight: 600; color: #b45309; background: rgba(180,83,9,.10); padding: 8px 10px; border-radius: 6px; margin-top: 6px; border: 1px solid rgba(180,83,9,.20); }
.mk-post-success { text-align: center; padding: 16px 0 8px; }
.mk-post-success-icon { font-size: 32px; margin-bottom: 8px; color: #10b981; }
.mk-post-success-title { font-size: 15px; font-weight: 700; color: #10b981; }
@media (prefers-color-scheme: dark) {
  .pi-mk-posted { background: rgba(16,185,129,.15); }
  .mk-post-preview { border-color: rgba(255,255,255,.10); }
  .mk-post-preview-row { border-color: rgba(255,255,255,.06); }
  .mk-readiness-warning { color: #fbbf24; background: rgba(251,191,36,.10); }
  .mk-post-warning-serious { color: #fbbf24; background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.20); }
}
:root[data-theme="dark"] .pi-mk-posted { background: rgba(16,185,129,.15); }
:root[data-theme="dark"] .mk-post-preview { border-color: rgba(255,255,255,.10); }
:root[data-theme="dark"] .mk-post-preview-row { border-color: rgba(255,255,255,.06); }
:root[data-theme="dark"] .mk-readiness-warning { color: #fbbf24; background: rgba(251,191,36,.10); }
:root[data-theme="dark"] .mk-post-warning-serious { color: #fbbf24; background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.20); }

/* ── MoyKlass payment type discovery (v7.0.92.1) ─────────────────────── */
.mk-payment-type-section { margin: 12px 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--card-bg, #f4f7fb); border: 1px solid rgba(0,0,0,.07); }
.mk-payment-type-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mk-payment-type-title { font-size: 13px; font-weight: 600; color: var(--label, #172033); }
.mk-payment-type-status { font-size: 13px; margin-bottom: 6px; }
.mk-pt-ok { color: #059669; font-weight: 500; }
.mk-pt-warn { color: #b45309; font-weight: 500; }
.mk-pt-error { color: #dc2626; }
.mk-pt-diag { font-size: 11px; color: var(--muted, #687083); margin-bottom: 6px; }
.mk-pt-hint { font-size: 12px; margin-bottom: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(234,179,8,.10); border: 1px solid rgba(234,179,8,.25); }
.mk-pt-badge-active { background: #10b981; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.mk-pt-badge-acq { background: #6366f1; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.mk-pt-badge-likely { background: #f59e0b; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; margin-right: 4px; }
.mk-pt-badge-multi { display: block; color: #b45309; font-weight: 600; margin-bottom: 4px; }
.mk-pt-dual-channels { display: flex; flex-direction: column; gap: 6px; }
.mk-pt-channel-block { padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.02); }
.mk-pt-channel-label { font-size: 11px; font-weight: 600; color: var(--muted, #687083); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .04em; }
.mk-pt-env-hint { display: block; margin-top: 4px; font-size: 11px; background: rgba(0,0,0,.06); padding: 3px 6px; border-radius: 4px; word-break: break-all; }
.mk-pt-list-title { font-size: 11px; color: var(--muted, #687083); margin: 6px 0 3px; }
.mk-pt-list { margin: 0; padding: 0 0 0 14px; font-size: 12px; }
.mk-pt-item { padding: 2px 0; color: var(--label, #172033); }
.mk-pt-item-configured { font-weight: 600; }
.mk-pt-id { color: var(--muted, #687083); margin-right: 4px; }
@media (prefers-color-scheme: dark) {
  .mk-payment-type-section { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
  .mk-pt-hint { background: rgba(234,179,8,.08); border-color: rgba(234,179,8,.20); }
  .mk-pt-env-hint { background: rgba(255,255,255,.08); }
}
:root[data-theme="dark"] .mk-payment-type-section { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] .mk-pt-hint { background: rgba(234,179,8,.08); border-color: rgba(234,179,8,.20); }
:root[data-theme="dark"] .mk-pt-env-hint { background: rgba(255,255,255,.08); }

/* ── v7.0.93.2.5 — Client payment page — Yellow Club brand redesign ────── */

/* List container */
.cp-list { display: flex; flex-direction: column; padding-bottom: 84px; }

/* Card — ALE-66 Stage 2: re-skinned onto the client-cabinet design tokens
   (radius/shadow/ink/muted/status colors), same structure/fields. */
.cp-card { background: var(--cab-surface, #fff); border: 1px solid var(--cab-line-soft, #ece9dd); border-radius: var(--cab-radius-lg, 20px); padding: 18px; margin-bottom: 12px; box-shadow: var(--cab-shadow-card, 0 4px 18px rgba(26,38,66,.07)); overflow: hidden; }

/* Header */
.cp-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cp-card-name { font-size: 18px; font-weight: 700; color: var(--cab-ink, #172033); flex: 1; min-width: 0; word-break: break-word; overflow-wrap: anywhere; line-height: 1.3; }
.cp-card-amount { font-size: 22px; font-weight: 900; color: var(--cab-ink, #172033); white-space: nowrap; line-height: 1.2; }

/* Meta row */
.cp-card-meta { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; flex-wrap: wrap; }
.cp-period { font-size: 13px; color: var(--cab-muted, #657089); font-weight: 600; }

/* Status badges — pill-shaped to match .cab-badge elsewhere in the cabinet */
.cp-status-paid { display: inline-flex; align-items: center; background: var(--cab-success-bg, rgba(31,165,107,.13)); color: var(--cab-success-fg, #116643); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 800; line-height: 1.4; }
.cp-status-pending { display: inline-flex; align-items: center; background: var(--cab-warning-bg, rgba(255,216,77,.30)); color: var(--cab-warning-fg, #6b4e00); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 800; line-height: 1.4; }

/* Comment / date */
.cp-card-comment { font-size: 13px; color: var(--cab-muted, #657089); margin-top: 5px; line-height: 1.4; }
.cp-card-date { font-size: 12px; color: var(--cab-muted, #8e9ab3); margin-top: 3px; }

/* Divider above payment methods */
.cp-methods-divider { height: 1px; background: var(--cab-line-soft, #f0eee6); margin: 12px 0 0; }

/* Payment method blocks */
.cp-pay-method { margin-top: 12px; padding: 12px 14px; border-radius: var(--cab-radius-md, 14px); background: var(--cab-canvas, #f6f7fb); border: 1px solid var(--cab-line-soft, #e8ecf4); }
.cp-pay-method + .cp-pay-method { margin-top: 10px; }
.cp-pay-method-title { font-size: 15px; font-weight: 700; color: var(--cab-ink, #172033); margin-bottom: 10px; }

/* ERIP block — Yellow Soft tint, same token as the Home continuation card */
.cp-erip-block { background: var(--cab-yellow-soft, rgba(255,248,210,.75)); border: 1px solid rgba(255, 208, 39, .35); }

/* Primary button — brand yellow CTA, matches .cab-card-link--cta geometry */
.cp-card-pay-btn { display: block; width: 100%; box-sizing: border-box; padding: 14px 20px; border-radius: var(--cab-radius-md, 12px); background: var(--cab-yellow, #ffd84d); color: var(--cab-ink, #172033); font-family: "Nunito", system-ui, sans-serif; font-size: 16px; font-weight: 800; text-align: center; text-decoration: none; border: none; cursor: pointer; transition: background .15s, transform .12s; min-height: 48px; line-height: 1.2; box-shadow: var(--cab-shadow-cta, none); }
.cp-card-pay-btn:hover { background: var(--cab-yellow, #ffc800); filter: brightness(.96); }
.cp-card-pay-btn:active { transform: scale(.98); }

/* ERIP fields */
.cp-erip-row { margin-bottom: 10px; }
.cp-erip-label { font-size: 11px; font-weight: 800; color: var(--cab-muted, #657089); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.cp-erip-value { font-size: 17px; font-weight: 700; color: var(--cab-ink, #172033); margin-bottom: 6px; word-break: break-all; overflow-wrap: anywhere; line-height: 1.3; }

/* Copy buttons — secondary, dark border */
.cp-copy-btn { display: inline-flex; align-items: center; font-family: "Nunito", system-ui, sans-serif; font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: var(--cab-radius-md, 10px); border: 1.5px solid var(--cab-ink, #172033); background: var(--cab-surface, #fff); color: var(--cab-ink, #172033); cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .1s; min-height: 44px; line-height: 1.2; }
.cp-copy-btn:hover { background: var(--cab-yellow-soft, #ffd84d); border-color: var(--cab-warning-fg, #c4a200); }
.cp-copy-btn:active { transform: scale(.98); }
.cp-copy-btn:disabled { opacity: 1; cursor: default; background: var(--cab-success-bg, rgba(31,165,107,.12)); border-color: var(--cab-success-fg, #1fa56b); color: var(--cab-success-fg, #116643); }

/* Pay hint */
.cp-pay-hint { font-size: 13px; color: var(--cab-muted, #657089); margin-top: 8px; }

/* Paid block */
.cp-card-paid-block { margin-top: 10px; padding: 10px 12px; border-radius: var(--cab-radius-md, 12px); background: var(--cab-success-bg, rgba(31,165,107,.08)); border-left: 3px solid var(--cab-success-fg, #1fa56b); }
.cp-paid-amt { font-size: 14px; font-weight: 700; color: var(--cab-ink, #172033); }
.cp-paid-date { font-size: 12px; color: var(--cab-muted, #657089); margin-top: 2px; }

/* ERIP accordion */
.cp-erip-details { margin-top: 12px; border-radius: var(--cab-radius-md, 12px); border: 1px solid rgba(255, 208, 39, .30); background: var(--cab-surface, #fff); overflow: hidden; }
.cp-erip-details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; font-size: 14px; font-weight: 700; color: var(--cab-ink, #172033); cursor: pointer; user-select: none; background: var(--cab-yellow-soft, rgba(255,248,210,.60)); }
.cp-erip-details > summary::-webkit-details-marker { display: none; }
.cp-erip-details > summary::after { content: "▾"; font-size: 16px; color: #c4a200; transition: transform .20s; flex-shrink: 0; margin-left: 8px; line-height: 1; }
.cp-erip-details[open] > summary::after { transform: rotate(180deg); }
.cp-erip-details[open] > summary { border-bottom: 1px solid rgba(255,216,77,.30); }

/* Instruction steps */
.cp-erip-steps { margin: 0; padding: 14px 14px 14px 32px; }
.cp-erip-steps li { font-size: 14px; color: #172033; opacity: 1; margin: 8px 0; line-height: 1.55; }
.cp-erip-hint-label { font-weight: 700; color: #172033; }
.cp-erip-path { display: block; margin-top: 6px; padding: 8px 12px; background: rgba(255,216,77,.15); border-radius: 8px; font-size: 13px; color: #4a3900; line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════════════
   ALE-66 — Оплаты structural redesign: payment hero, segmented control
   ("К оплате"/"История"), invoice-card head/amount-row layout, compact
   ERIP info-rows, history list. New selectors only — every rule reused
   from above (cp-card-name, cp-card-amount, the cp-status/cp-due status
   pills, cp-pay-method, cp-erip-block, cp-erip-value, cp-copy-btn) is untouched.
   All tokens (var(--cab-*)) are declared unconditionally under
   body.role-parent-cabinet, same as the rest of the redesigned cabinet, so
   these need no separate dark-theme overrides. ══════════════════════════ */

/* Payment hero — dark "К оплате сейчас" summary, same dark-anchor language
   as #cabScheduleCard on Главная, kept as its own selector so Главная's
   own card stays untouched. */
.cab-pay-hero {
  background: var(--cab-ink, #17150f);
  color: #fff;
  border-radius: var(--cab-radius-lg, 26px);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--cab-shadow-anchor, 0 14px 30px rgba(23, 21, 15, .22));
}
.cab-pay-hero-eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cab-yellow, #ffd027); }
.cab-pay-hero-sum { margin: 10px 0 0; font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.cab-pay-hero-sub { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .66); }
.cab-pay-hero-actions { display: flex; gap: 9px; margin-top: 16px; }
.cab-pay-hero-actions .primary,
.cab-pay-hero-actions .secondary { flex: 1 1 0; padding: 13px 12px; font-size: 14px; text-align: center; }
.cab-pay-hero-actions .secondary { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .16); }

/* Segmented control — "К оплате"/"История", equal-width pill segments,
   active state matches .cab-switch-chip.active (dark ink bg, white text). */
.cab-pay-segmented { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--cab-surface, #fff); border: 1px solid var(--cab-line, rgba(23, 21, 15, .07)); border-radius: var(--cab-radius-pill, 999px); }
.cab-pay-segment { flex: 1 1 0; text-align: center; padding: 9px 10px; border-radius: var(--cab-radius-pill, 999px); border: none; background: transparent; color: var(--cab-muted-2, #57534a); font: inherit; font-size: 13.5px; font-weight: 750; cursor: pointer; }
.cab-pay-segment.active { background: var(--cab-ink, #17150f); color: #fff; }

/* Invoice card — new head/amount-row wrapper classes only. */
.cp-card-head-text { min-width: 0; flex: 1; }
.cp-card-period { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--cab-muted, #657089); }
.cp-card-amount-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* Compact ERIP rows — one shared title for both fields (was a bare
   .cp-pay-method-title reused as-is), label/value/copy-button kept
   stacked (not squeezed into a horizontal row — real 13-digit account
   numbers need the full card width to avoid awkward mid-number wraps on
   a 390px viewport) inside the existing .cp-pay-method.cp-erip-block
   tinted container. */
.cp-erip-compact-title { font-size: 13px; font-weight: 800; color: var(--cab-accent-text, #7a6634); margin-bottom: 10px; }
.cp-erip-compact-row { margin-bottom: 10px; }

/* History list — compact rows, no lifecycle change, same status vocabulary. */
.cp-history-list { background: var(--cab-surface, #fff); border: 1px solid var(--cab-line-soft, #ece9dd); border-radius: var(--cab-radius-lg, 26px); overflow: hidden; margin-bottom: 84px; }
.cp-history-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--cab-line-soft, #ece9dd); }
.cp-history-row:last-child { border-bottom: none; }
.cp-history-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-size: 15px; background: var(--cab-canvas, #f4f1ea); }
.cp-history-row--paid .cp-history-icon { background: var(--cab-success-bg, #e4f3eb); }
.cp-history-row--cancelled .cp-history-icon { background: var(--cab-danger-bg, #fbe8e5); }
.cp-history-text { flex: 1; min-width: 0; }
.cp-history-title { font-size: 13.5px; font-weight: 700; color: var(--cab-ink, #17150f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-history-date { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--cab-muted, #8c8878); }
.cp-history-right { flex: 0 0 auto; text-align: right; }
.cp-history-amount { font-size: 14.5px; font-weight: 800; color: var(--cab-ink, #17150f); }
.cp-history-status { margin-top: 2px; font-size: 11.5px; font-weight: 700; }
.cp-history-status--paid { color: var(--cab-success-fg, #1f6b4c); }
.cp-history-status--cancelled { color: var(--cab-danger-fg, #b0453a); }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .cp-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); box-shadow: none; }
  .cp-card-name, .cp-card-amount { color: #f0f0f0; }
  .cp-status-pending { background: rgba(255,216,77,.18); color: #d4a800; }
  .cp-status-paid { background: rgba(31,165,107,.20); color: #34d399; }
  .cp-period, .cp-card-comment, .cp-card-date { color: #94a3b8; }
  .cp-methods-divider { background: rgba(255,255,255,.10); }
  .cp-pay-method { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
  .cp-pay-method-title { color: #f0f0f0; }
  .cp-erip-block { background: rgba(255,216,77,.07); border-color: rgba(255,216,77,.20); }
  .cp-erip-label { color: #94a3b8; }
  .cp-erip-value { color: #f0f0f0; }
  .cp-copy-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.30); color: #f0f0f0; }
  .cp-copy-btn:hover { background: #ffd84d; border-color: #ffd84d; color: #172033; }
  .cp-copy-btn:disabled { background: rgba(31,165,107,.18); border-color: #34d399; color: #34d399; }
  .cp-erip-details { border-color: rgba(255,216,77,.22); background: rgba(255,255,255,.04); }
  .cp-erip-details > summary { color: #f0f0f0; background: rgba(255,216,77,.07); }
  .cp-erip-steps li { color: #e0e0e0; opacity: 1; }
  .cp-erip-hint-label { color: #f0f0f0; }
  .cp-erip-path { background: rgba(255,216,77,.10); color: #e0c060; }
  .cp-paid-amt { color: #f0f0f0; }
  .cp-card-paid-block { background: rgba(31,165,107,.12); }
}
:root[data-theme="dark"] .cp-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); box-shadow: none; }
:root[data-theme="dark"] .cp-card-name, :root[data-theme="dark"] .cp-card-amount { color: #f0f0f0; }
:root[data-theme="dark"] .cp-status-pending { background: rgba(255,216,77,.18); color: #d4a800; }
:root[data-theme="dark"] .cp-status-paid { background: rgba(31,165,107,.20); color: #34d399; }
:root[data-theme="dark"] .cp-period, :root[data-theme="dark"] .cp-card-comment, :root[data-theme="dark"] .cp-card-date { color: #94a3b8; }
:root[data-theme="dark"] .cp-methods-divider { background: rgba(255,255,255,.10); }
:root[data-theme="dark"] .cp-pay-method { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] .cp-pay-method-title { color: #f0f0f0; }
:root[data-theme="dark"] .cp-erip-block { background: rgba(255,216,77,.07); border-color: rgba(255,216,77,.20); }
:root[data-theme="dark"] .cp-erip-label { color: #94a3b8; }
:root[data-theme="dark"] .cp-erip-value { color: #f0f0f0; }
:root[data-theme="dark"] .cp-copy-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.30); color: #f0f0f0; }
:root[data-theme="dark"] .cp-copy-btn:hover { background: #ffd84d; border-color: #ffd84d; color: #172033; }
:root[data-theme="dark"] .cp-copy-btn:disabled { background: rgba(31,165,107,.18); border-color: #34d399; color: #34d399; }
:root[data-theme="dark"] .cp-erip-details { border-color: rgba(255,216,77,.22); background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .cp-erip-details > summary { color: #f0f0f0; background: rgba(255,216,77,.07); }
:root[data-theme="dark"] .cp-erip-steps li { color: #e0e0e0; opacity: 1; }
:root[data-theme="dark"] .cp-erip-hint-label { color: #f0f0f0; }
:root[data-theme="dark"] .cp-erip-path { background: rgba(255,216,77,.10); color: #e0c060; }
:root[data-theme="dark"] .cp-paid-amt { color: #f0f0f0; }
:root[data-theme="dark"] .cp-card-paid-block { background: rgba(31,165,107,.12); }
:root[data-theme="light"] .cp-card { background: #fff; border-color: #ece9dd; }
:root[data-theme="light"] .cp-erip-block { background: rgba(255,248,210,.75); border-color: rgba(255,216,77,.45); }
:root[data-theme="light"] .cp-status-pending { background: rgba(255,216,77,.30); color: #6b4e00; }
:root[data-theme="light"] .cp-status-paid { background: rgba(31,165,107,.13); color: #116643; }
:root[data-theme="light"] .cp-copy-btn { background: #fff; border-color: #172033; color: #172033; }

/* ── v7.0.93.2.7 — Parent payment contrast & header hotfix ────────────────
 *
 * Root cause (dark mode invisible text):
 *   The dark-mode rule gave cp-card `background: rgba(255,255,255,.06)` —
 *   nearly transparent. The page body has no dark-mode override, so it stays
 *   light (#f7f8fb). Text was set to #f0f0f0 (light) but the card showed
 *   through to the light body → invisible text on a cream background.
 *   Fix: give cards a solid dark background so text stays readable.
 *
 * Root cause (ERIP summary fades on hover):
 *   Global rule `details > summary:hover { opacity: 0.75 }` applies to
 *   cp-erip-details > summary. Override to opacity: 1.
 *
 * Root cause (copy button looks disabled):
 *   Explicit `opacity: 1` on active cp- buttons guards against any global
 *   `button:disabled { opacity: 0.5 }` cascade or Telegram theme injection.
 * ─────────────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  .cp-card { background: #1b2236; border-color: rgba(255,255,255,.12); }
  .cp-pay-method { background: rgba(255,255,255,.08); }
  .cp-erip-block { background: rgba(255,216,77,.10); border-color: rgba(255,216,77,.25); }
  .cp-erip-details { background: rgba(22,32,52,.90); }
  .cp-erip-details > summary { background: rgba(255,216,77,.12); }
}
:root[data-theme="dark"] .cp-card { background: #1b2236; border-color: rgba(255,255,255,.12); }
:root[data-theme="dark"] .cp-pay-method { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .cp-erip-block { background: rgba(255,216,77,.10); border-color: rgba(255,216,77,.25); }
:root[data-theme="dark"] .cp-erip-details { background: rgba(22,32,52,.90); }
:root[data-theme="dark"] .cp-erip-details > summary { background: rgba(255,216,77,.12); }

/* ERIP accordion summary — no fade on hover, no ghost focus ring */
.cp-erip-details > summary:hover { opacity: 1; }
.cp-erip-details > summary:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,216,77,.50); border-radius: 8px; }

/* Active cp- buttons: explicit opacity guards against global button:disabled
 * cascade and Telegram WebView theme injection */
.cp-copy-btn { opacity: 1; }
.cp-copy-btn:disabled { opacity: 1; }
.cp-card-pay-btn { opacity: 1; }

/* ── v7.0.93.3.0 — Light-theme explicit text overrides for cp-cards ───────────
 * Root cause: @media (prefers-color-scheme: dark) sets .cp-card-name/.cp-card-amount
 * to #f0f0f0. When OS is dark but Telegram sets data-theme="light", the card
 * gets a white background (via :root[data-theme="light"] .cp-card) but no override
 * existed for text colors → white text on white card. Fix: explicit [data-theme="light"]
 * rules that defeat the media-query values for every cp- text element.
 * ──────────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .cp-card { background: #fff; border-color: #ece9dd; box-shadow: 0 4px 18px rgba(26,38,66,.07); }
:root[data-theme="light"] .cp-card-name { color: #172033; }
:root[data-theme="light"] .cp-card-amount { color: #172033; }
:root[data-theme="light"] .cp-period { color: #657089; }
:root[data-theme="light"] .cp-card-comment { color: #657089; }
:root[data-theme="light"] .cp-card-date { color: #8e9ab3; }
:root[data-theme="light"] .cp-pay-method { background: #f6f7fb; border-color: #e8ecf4; }
:root[data-theme="light"] .cp-pay-method-title { color: #172033; }
:root[data-theme="light"] .cp-erip-value { color: #172033; }
:root[data-theme="light"] .cp-erip-label { color: #657089; }
:root[data-theme="light"] .cp-erip-steps li { color: #172033; opacity: 1; }
:root[data-theme="light"] .cp-erip-hint-label { color: #172033; }
:root[data-theme="light"] .cp-erip-path { background: rgba(255,216,77,.15); color: #4a3900; }
:root[data-theme="light"] .cp-erip-details { background: #fff; border-color: rgba(255,216,77,.40); }
:root[data-theme="light"] .cp-erip-details > summary { color: #172033; background: rgba(255,248,210,.60); }
:root[data-theme="light"] .cp-paid-amt { color: #172033; }
:root[data-theme="light"] .cp-paid-date { color: #657089; }
:root[data-theme="light"] .cp-card-paid-block { background: rgba(31,165,107,.08); border-left-color: #1fa56b; }
:root[data-theme="light"] .cp-methods-divider { background: #f0eee6; }

/* v7.1.13.3 — .cp-due-badge (Просрочено/Срок оплаты сегодня/Оплатить до)
 * had no CSS at all in any theme — the span just inherited page text
 * color. Harmless in light mode, but on the (now-fixed) dark .cp-card
 * background it was nearly invisible. Explicit colors here, independent
 * of theme, close that gap for good. */
.cp-due-row { margin-top: 6px; }
.cp-due-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 800; line-height: 1.4; }
.cp-due-overdue { background: var(--cab-danger-bg, rgba(216,76,76,.14)); color: var(--cab-danger-fg, #a82d2d); }
.cp-due-today { background: var(--cab-warning-bg, rgba(230,126,34,.16)); color: var(--cab-warning-fg, #8b4800); }
.cp-due-upcoming { background: var(--cab-muted-bg, rgba(101,112,137,.12)); color: var(--cab-muted-fg, #4c5568); }

/* v7.1.13.3 — the card-pay CTA gets opacity:1 unconditionally (line ~8384)
 * to survive the global `button:disabled{opacity:.5}` cascade, but that
 * rule's specificity (1 class) loses to button:disabled's (1 element + 1
 * pseudo-class) once the button actually IS disabled (owner test mode) —
 * the CTA rendered at 50% opacity instead. This beats it correctly. */
.cp-card-pay-btn:disabled { opacity: 1; cursor: default; }

/* ── v7.1.13.3 — force client cabinet payments to stay light regardless of
 * Telegram/system dark theme ──────────────────────────────────────────────
 * Root cause: .cp-* (client payment card) rules got their own dedicated
 * @media (prefers-color-scheme: dark) and :root[data-theme="dark"] variants
 * back in v7.0.93.2.5 / v7.0.93.3.0 — added when this was a standalone page
 * expected to track device theme, before the client cabinet existed. Every
 * other cabinet screen (Главная/Availability/notifications/nav) never got a
 * dark variant, so only Оплаты went dark when Telegram reports colorScheme
 * "dark" (app.js _applyTgTheme sets <html data-theme="dark">) or the OS
 * matches prefers-color-scheme:dark. v7.1.13.2's `color-scheme: light only`
 * doesn't help here — it only changes native UA form-control chrome, not
 * these literal author colors.
 * Fix: re-assert the light values scoped to body.role-parent-cabinet (set
 * only for the client cabinet — never staff/admin), with !important — the
 * dark selectors above are 3 selector classes (:root + [data-theme] + the
 * .cp-* class); body.role-parent-cabinet .cp-* is only element+2 classes,
 * so plain specificity cannot win this without it. */
body.role-parent-cabinet { color-scheme: light; }
/* ALE-66 Stage 2 — re-synced to the same --cab-* tokens as the light-mode
   .cp-* rules above (was hardcoded to the pre-ALE-66 palette: #172033 ink,
   #657089 muted, etc.) so a dark-theme Telegram client sees the identical
   redesigned colors as everyone else, not a stale fallback palette. Still
   a plain literal (not var()) where the light-mode rule already used the
   exact same value as its own token fallback (e.g. cp-card's #fff), to
   keep this diff minimal and every existing exact-string test intact. */
body.role-parent-cabinet .cp-card { background: #fff !important; border-color: var(--cab-line-soft, #ece9dd) !important; box-shadow: var(--cab-shadow-card, 0 4px 18px rgba(26,38,66,.07)) !important; }
body.role-parent-cabinet .cp-card-name,
body.role-parent-cabinet .cp-card-amount { color: var(--cab-ink, #172033) !important; }
body.role-parent-cabinet .cp-status-pending { background: var(--cab-warning-bg, rgba(255,216,77,.30)) !important; color: var(--cab-warning-fg, #6b4e00) !important; }
body.role-parent-cabinet .cp-status-paid { background: var(--cab-success-bg, rgba(31,165,107,.13)) !important; color: var(--cab-success-fg, #116643) !important; }
body.role-parent-cabinet .cp-period,
body.role-parent-cabinet .cp-card-comment { color: var(--cab-muted, #657089) !important; }
body.role-parent-cabinet .cp-card-date { color: var(--cab-muted, #8e9ab3) !important; }
body.role-parent-cabinet .cp-methods-divider { background: var(--cab-line-soft, #f0eee6) !important; }
body.role-parent-cabinet .cp-pay-method { background: var(--cab-canvas, #f6f7fb) !important; border-color: var(--cab-line-soft, #e8ecf4) !important; }
body.role-parent-cabinet .cp-pay-method-title { color: var(--cab-ink, #172033) !important; }
body.role-parent-cabinet .cp-erip-block { background: var(--cab-yellow-soft, rgba(255,248,210,.75)) !important; border-color: rgba(255, 208, 39, .35) !important; }
body.role-parent-cabinet .cp-erip-label { color: var(--cab-muted, #657089) !important; }
body.role-parent-cabinet .cp-erip-value { color: var(--cab-ink, #172033) !important; }
body.role-parent-cabinet .cp-copy-btn { background: #fff !important; border-color: var(--cab-ink, #172033) !important; color: var(--cab-ink, #172033) !important; }
body.role-parent-cabinet .cp-copy-btn:hover { background: var(--cab-yellow-soft, #ffd84d) !important; border-color: var(--cab-warning-fg, #c4a200) !important; color: var(--cab-ink, #172033) !important; }
body.role-parent-cabinet .cp-copy-btn:disabled { background: var(--cab-success-bg, rgba(31,165,107,.12)) !important; border-color: var(--cab-success-fg, #1fa56b) !important; color: var(--cab-success-fg, #116643) !important; }
body.role-parent-cabinet .cp-erip-details { border-color: rgba(255, 208, 39, .30) !important; background: #fff !important; }
body.role-parent-cabinet .cp-erip-details > summary { color: var(--cab-ink, #172033) !important; background: var(--cab-yellow-soft, rgba(255,248,210,.60)) !important; }
body.role-parent-cabinet .cp-erip-steps li { color: var(--cab-ink, #172033) !important; opacity: 1 !important; }
body.role-parent-cabinet .cp-erip-hint-label { color: var(--cab-ink, #172033) !important; }
body.role-parent-cabinet .cp-erip-path { background: var(--cab-yellow-soft, rgba(255,216,77,.15)) !important; color: var(--cab-accent-text, #4a3900) !important; }
body.role-parent-cabinet .cp-paid-amt { color: var(--cab-ink, #172033) !important; }
body.role-parent-cabinet .cp-paid-date { color: var(--cab-muted, #657089) !important; }
body.role-parent-cabinet .cp-card-paid-block { background: var(--cab-success-bg, rgba(31,165,107,.08)) !important; border-left-color: var(--cab-success-fg, #1fa56b) !important; }

/* v7.0.94.0 — hide empty notice strip */
.notice:empty { display: none; }

/* Invoice automation UI */
.auto-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin-top: 6px; }
.auto-stat { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e0e0e0); border-radius: 8px; padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.auto-stat span { color: var(--color-text-secondary, #888); }
.auto-stat b { font-size: 15px; font-weight: 700; color: var(--color-text, #172033); }
.auto-stat-running { border-color: #e67e22; }
.auto-run { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--border-color-light, #f0f0f0); }
.auto-run:last-child { border-bottom: none; }
.auto-run-ok .auto-run-status { color: #1fa56b; font-weight: 700; }
.auto-run-running .auto-run-status { color: #e67e22; font-weight: 700; }
.auto-run-error .auto-run-status { color: #a82d2d; font-weight: 700; }
.auto-run-time { color: var(--color-text-secondary, #888); }
.auto-run-counts { color: var(--color-text-secondary, #666); }
.auto-queue-card { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e0e0e0); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.auto-queue-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.auto-queue-name { font-weight: 700; font-size: 14px; color: var(--color-text, #172033); }
.auto-queue-badge { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.auto-stage-discovered { background: rgba(255,216,77,.30); color: #6b4e00; }
.auto-stage-ready_for_creation { background: rgba(31,165,107,.15); color: #116643; }
.auto-stage-payment_options_created { background: rgba(31,165,107,.25); color: #0b5c38; }
.auto-stage-published { background: rgba(31,165,107,.35); color: #0b5c38; }
.auto-stage-missing_parent_link { background: rgba(230,126,34,.20); color: #8b4800; }
.auto-stage-ambiguous_parent_link { background: rgba(230,126,34,.20); color: #8b4800; }
.auto-stage-requires_check { background: rgba(216,76,76,.15); color: #a82d2d; }
.auto-stage-error { background: rgba(216,76,76,.20); color: #a82d2d; }
.auto-stage-ignored { background: rgba(0,0,0,.07); color: #888; }
.auto-queue-meta { font-size: 12px; color: var(--color-text-secondary, #657089); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.auto-queue-reason { color: #a85000; }
.auto-queue-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.auto-queue-card-duplicate { border: 1.5px solid rgba(216,76,76,.35); }
.auto-queue-duplicate-warning { background: rgba(216,76,76,.08); border-left: 3px solid #c0392b; color: #a82d2d; font-size: 11px; padding: 6px 8px; border-radius: 4px; margin-bottom: 6px; line-height: 1.5; }
.pi-duplicate-badge { background: rgba(216,76,76,.12); color: #a82d2d; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; display: inline-block; margin: 4px 0; }

/* v7.1.0 — Payment terms panel */
.pt-hint { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.pt-lookup { display: flex; gap: 8px; margin-bottom: 16px; }
.pt-lookup input { flex: 1; }
.pt-card { display: flex; flex-direction: column; gap: 10px; }
.pt-check { display: flex; align-items: center; gap: 8px; }
.pt-conflict { color: #c0392b; font-size: 13px; }
.pt-discount-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.pt-discount-row:last-child { border-bottom: none; }
.pt-discount-meta { font-size: 12px; color: var(--muted); }
.pt-audit-row { padding: 6px 0; border-bottom: 1px solid var(--line); }
.pt-audit-row:last-child { border-bottom: none; }
.pt-audit-meta { font-size: 12px; color: var(--muted); }
/* v7.1.0.1 — inline save notice */
.pt-save-notice { font-size: 13px; min-height: 0; }
.pt-save-notice--ok { color: #0b7548; font-weight: 600; }
.pt-save-notice--err { color: #a82d2d; font-weight: 600; }
/* v7.1.1 — MoyKlass subscription sync */
.pt-source-info { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.pt-source-chip { display: inline-block; background: var(--line); border-radius: 4px; padding: 1px 6px; font-size: 12px; }
.pt-sync-status { font-size: 12px; }
/* v7.1.3 — auto-sync pilot status */
.pt-auto-sync-info { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.pt-auto-sync-chip { display: inline-block; border-radius: 4px; padding: 1px 6px; font-size: 12px; background: var(--line); }
.pt-auto-sync-pilot_match { background: #d4edda; color: #155724; }
.pt-auto-sync-pilot_no_match { background: var(--line); }
.pt-auto-sync-disabled { background: var(--line); opacity: 0.7; }
/* v7.1.4 — withdrawal remote cancel method note */
.wd-remote-method { font-size: 10px; color: var(--muted); margin-left: 4px; }

/* v7.1.5.2 — Payments Workspace mobile layout ───────────────────────── */
.ws-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0 16px;
}
@media (min-width: 560px) {
  .ws-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 319px) {
  .ws-stats-grid { grid-template-columns: 1fr; }
}
/* ALE-39 round 2 — radius/shadow aligned to .cab-card's tokens (16px,
   var(--shadow)) instead of this screen's own slightly-different values
   (was 15px / a shallower one-off shadow) — same visual depth as every
   client cabinet card, without restructuring the ~24 render functions
   that build these cards. */
.ws-stat-card {
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 96px;
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .06));
}
.ws-stat-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.ws-stat-card__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
}
.ws-stat-card__icon svg { display: block; width: 16px; height: 16px; }
.ws-stat-card--pending .ws-stat-card__icon { color: #9b6b05; background: #fff7df; }
.ws-stat-card--danger  .ws-stat-card__icon { color: #b14343; background: #fceeee; }
.ws-stat-card--success .ws-stat-card__icon { color: #267b4e; background: #eaf6ef; }
.ws-stat-card--info    .ws-stat-card__icon { color: #3457a6; background: #eaf0fd; }
.ws-stat-value {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ws-stat-value small {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.ws-stat-label {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  line-height: 1.3;
}
/* ALE-39 round 2 — re-skinned to the same visual pattern as the client
   cabinet's switcher-chip row (search this file for "cab-switch" further
   down — Мои дети child switcher / Оплаты child filter): a borderless
   row of individual pill chips, each
   with its own border+background, instead of one bordered "segmented
   control" container. Same underlying data/click wiring (_wsActivateTab),
   only the CSS values on these two existing selectors changed. */
.ws-subtabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0;
  margin: 0 0 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.ws-subtabs::-webkit-scrollbar { display: none; }
.ws-subtab {
  flex: 0 0 auto;
  white-space: nowrap;
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line, #edf0f5);
  background: var(--card, #fff);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted, #7b8190);
  line-height: 1;
  font-family: inherit;
}
.ws-subtab.active {
  border-color: transparent;
  background: var(--yellow, #ffcb1f);
  color: var(--ink, #111);
}
@media (max-width: 420px) {
  .topbar h1 { font-size: 18px; }
}
@media (max-width: 360px) {
  .topbar h1 { font-size: 16px; }
}

/* v7.1.5.3 — keyboard handling and mobile pilot cards ──────────────────── */
body.keyboard-open .tabs.bottom-tabbar {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(130%);
}

/* Mobile pilot cards */
.ws-pilot-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
/* ALE-39 round 2 — var(--surface) was never defined anywhere in :root
   (resolved to the #fff fallback regardless); switched to var(--card) —
   the same token every client cabinet card uses — and radius/shadow
   aligned to .cab-card. */
.ws-pilot-card {
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .06));
}
.ws-pilot-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ws-pilot-card-id { font-weight: 700; font-size: 15px; color: var(--ink); }
.ws-pilot-mode-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.01em;
}
.ws-pilot-mode-observe { background: #e3f0fd; color: #1565c0; }
.ws-pilot-mode-review  { background: #fff3e0; color: #e65100; }
.ws-pilot-mode-auto    { background: #e8f5e9; color: #2e7d32; }
.ws-pilot-mode-disabled { background: var(--line); color: var(--muted); }
.ws-pilot-card-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  font-size: 12px;
  margin-bottom: 10px;
}
.ws-pilot-card-meta-label { color: var(--muted); white-space: nowrap; }
.ws-pilot-card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Desktop: hide mobile cards, show table */
@media (min-width: 541px) {
  .ws-pilot-cards { display: none; }
}
/* Mobile: hide table, show cards */
@media (max-width: 540px) {
  .ws-pilot-table-wrap { display: none !important; }
}

/* v7.1.6 — Payments Workspace redesign (from approved figma-yellow-club prototype) ── */

/* System bottom-safe-area class — used instead of ad-hoc inline padding on
   individual workspace screens. .app-shell already reserves space for the
   global bottom-tabbar; this exists for content fragments rendered inside
   #paymentsWorkspaceRoot that need their own explicit bottom breathing room
   (e.g. the last card in a list, right above the tab bar). */
.ws-bottom-safe-pad {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* v7.1.6.1 — Overview visual pass (figma-yellow-club Client Manager → Overview).
   Dedicated compact header for Payments Workspace only — deliberately NOT
   reusing .section-head (font-size:26px!important, shared by every other tab)
   so other screens stay untouched. */
.ws-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 14px;
}
.ws-header__eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9a7d00;
}
.ws-header__title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
}
.ws-header__subtitle {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}
/* ALE-39 round 2 — size/radius/shadow aligned to the client cabinet's
   .cab-icon-btn (43x43, radius:14px, soft shadow) instead of this
   screen's own slightly smaller/flatter values. */
.ws-refresh-btn {
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line, #edf0f5);
  border-radius: 14px;
  background: var(--card, #fff);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(23, 23, 23, .06);
}
.ws-refresh-btn svg { display: block; width: 17px; height: 17px; }
.ws-refresh-btn:active { transform: translateY(1px) scale(.97); }

/* v7.1.7 — "Помощь по оплатам" header button. Additive sibling of
   .ws-refresh-btn; .ws-header itself is untouched (still the same 2-item
   flex row — the 2nd item is now a small flex group of 2 buttons instead of 1). */
.ws-header__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ws-help-btn {
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line, #edf0f5);
  border-radius: 14px;
  background: var(--card, #fff);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(23, 23, 23, .06);
}
.ws-help-btn svg { display: block; width: 19px; height: 19px; }
.ws-help-btn:active { transform: translateY(1px) scale(.97); }
@media (max-width: 390px) {
  .ws-header__title { font-size: 19px; }
  .ws-header__actions { gap: 6px; }
}
@media (max-width: 360px) {
  .ws-header__title { font-size: 16px; }
  .ws-header__eyebrow { font-size: 9px; }
}

/* Overview mini section headers ("Требуют внимания" / "Последние операции"
   previews) — a smaller sibling of .ws-header, not the global .section-head. */
.ws-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 8px;
}
.ws-mini-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

/* "Последние операции" preview on Overview — compact single-line rows,
   distinct from the full Payment-Intent card used on the All Payments tab. */
.ws-recent-list { display: flex; flex-direction: column; gap: 8px; }
.ws-recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: 0 3px 10px rgba(23, 32, 51, .04);
}
.ws-recent-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-recent-row__amount {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

/* Tone-coloured circular icon for the Overview attention-preview empty state
   (green check) — the base .ws-empty-state-icon (font-size:26px, for emoji)
   stays untouched since other tabs' empty states still use it as-is. */
.ws-empty-state-icon--success {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf6ef;
  color: #267b4e;
  font-size: 0;
}
.ws-empty-state-icon--success svg { display: block; width: 20px; height: 20px; }

/* ── v7.1.6.1 step 2 — Attention queue header (title/subtitle + yellow count) ── */
.ws-queue-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 12px;
}
.ws-queue-head__copy { flex: 1 1 auto; min-width: 0; }
.ws-queue-head__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.ws-queue-head__subtitle {
  margin: 3px 0 0;
  font-size: 13px;
  color: #4d566c;
  line-height: 1.45;
}
.ws-queue-count {
  flex: 0 0 auto;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: var(--yellow, #ffcb1f);
  color: #665100;
  font-size: 12px;
  font-weight: 800;
}

/* ── Attention cards ────────────────────────────────────────────────────
   Row 1: name + amount · Row 2 (sub): public id + MK id · reason block ·
   Row bottom: status badge + date · optional approve action. */
.ws-attention-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
/* ALE-39 round 2 — radius/shadow aligned to .cab-card. */
.ws-attention-item {
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .06));
}
.ws-attn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ws-attn-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: break-word;
  word-break: break-word;
}
.ws-attn-amount {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.ws-attn-sub {
  margin-top: 3px;
  font-size: 12px;
  color: #4d566c;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ws-attn-row--bottom { margin-top: 8px; flex-wrap: wrap; }
.ws-attn-date { font-size: 12px; color: #4d566c; }
.ws-stage-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--line);
  color: var(--ink);
  white-space: nowrap;
}
/* Semantic mapping: pending_review=yellow, requires_check/ambiguous_parent_link=orange,
   error/missing_parent_link=red — same fg/bg pairs used by .ws-stat-card tones. */
.ws-stage-badge-pending_review        { background: #fff7df; color: #9b6b05; }
.ws-stage-badge-requires_check        { background: #fef0e4; color: #c2570d; }
.ws-stage-badge-error                 { background: #fceeee; color: #b14343; }
.ws-stage-badge-missing_parent_link   { background: #fceeee; color: #b14343; }
.ws-stage-badge-ambiguous_parent_link { background: #fef0e4; color: #c2570d; }
/* ALE-24 (Blocker B) — due-only overdue row, same red tone as error/missing_parent_link. */
.ws-stage-badge-overdue               { background: #fceeee; color: #b14343; }
.ws-intent-id { font-size: 11px; color: var(--muted); font-family: inherit; }
.ws-student { font-size: 13px; font-weight: 700; color: var(--ink); }
.ws-attention-amount { font-size: 14px; font-weight: 700; color: var(--ink); margin-left: auto; }
.ws-reason {
  font-size: 12px;
  color: var(--muted);
  background: var(--bg, #f6f7fb);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 8px 0 0;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ws-attention-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ws-attention-approve {
  flex: 0 0 auto;
  min-height: 44px;
  max-width: 100%;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 11px;
  background: var(--yellow, #ffcb1f);
  color: #171717;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

/* Skeleton shaped like the real card above, not a generic bar, per the
   "structure must match the future card" requirement. */
.ws-attention-skeleton-card {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card, #fff);
}
.ws-attention-skeleton-card .ws-skeleton { margin-bottom: 8px; }
.ws-attention-skeleton-card .ws-skeleton:last-child { margin-bottom: 0; }
.ws-attention-skeleton-line-top { height: 16px; width: 60%; }
.ws-attention-skeleton-line-sub { height: 10px; width: 40%; }
.ws-attention-skeleton-block { height: 32px; width: 100%; }
.ws-attention-skeleton-line-bottom { height: 20px; width: 30%; }

/* ── Friendly error text + owner/admin-only technical details ─────────── */
.ws-error-message {
  font-size: 12px;
  color: #a82d2d;
  background: #fdecea;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 6px 0;
  line-height: 1.4;
}
.ws-tech-details { margin: 4px 0; font-size: 11px; }
.ws-tech-details summary {
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ws-tech-details summary::-webkit-details-marker { display: none; }
.ws-tech-details summary::before { content: "▸ "; }
.ws-tech-details[open] summary::before { content: "▾ "; }
.ws-tech-details code {
  display: block;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bg, #f6f7fb);
  color: var(--muted);
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 10px;
  word-break: break-all;
}

/* ── Empty / loading / error states (shared look across workspace tabs) ──
   ALE-39 round 2 — solid border + var(--card) instead of a dashed border
   on an undefined var(--surface) token; matches the empty-state language
   the client cabinet's own Оплаты screen uses. */
.ws-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 36px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card, #fff);
}
.ws-empty-state-icon { font-size: 26px; line-height: 1; opacity: .7; }
.ws-empty-state-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.ws-empty-state-desc { font-size: 12px; color: var(--muted); max-width: 260px; }
.ws-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 28px 18px;
  border-radius: 16px;
  background: #fff0f0;
  border: 1px solid rgba(216, 76, 76, .25);
}
.ws-error-state-title { font-weight: 700; font-size: 14px; color: #a82d2d; }
.ws-error-state-desc { font-size: 12px; color: #a82d2d; opacity: .85; }
.ws-skeleton {
  border-radius: 14px;
  background: linear-gradient(90deg, var(--line) 25%, #eef0f5 37%, var(--line) 63%);
  background-size: 400% 100%;
  animation: wsShimmer 1.4s ease infinite;
}
@keyframes wsShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.ws-skeleton-stat { height: 70px; }
.ws-skeleton-row { height: 64px; margin-bottom: 10px; }

/* ── v7.1.16 shared patterns: usable outside the workspace ── */
.ui-skeleton-list { display: flex; flex-direction: column; }
.ui-inline-notice {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 8px;
}
.ui-inline-notice--info    { background: #eaf0fd; color: #3457a6; }
.ui-inline-notice--warning { background: #fef0e4; color: #c2570d; }
.ui-inline-notice--danger  { background: #fceeee; color: #b14343; }
.ui-inline-notice--success { background: #eaf6ef; color: #267b4e; }
.form-actions-bar {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.form-actions-bar button { flex: 1; min-height: 44px; }
#uiConfirmFooter button { min-height: 44px; }

/* ── Pilot add-client form: vertical, one field per row ────────────────── */
.ws-pilot-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ws-pilot-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.ws-pilot-form input,
.ws-pilot-form select {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
}
.ws-pilot-mode-hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-top: -2px;
}
.ws-pilot-form > button { min-height: 44px; margin-top: 2px; }

/* ── Pilot card: note wrapping + destructive-action divider ───────────── */
.ws-pilot-card-meta span { word-break: break-word; }
.ws-pilot-card-actions {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.ws-pilot-card-actions .danger,
.ws-pilot-card-actions button {
  min-height: 44px;
}
.ws-pilot-card select { min-height: 44px; }

/* ── v7.1.6.1 step 4 — Pilot Clients visual pass ─────────────────────────── */
.ws-pilot-add-form {
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin: 12px 0;
}
.ws-pilot-add-form h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--ink); }
.ws-pilot-add-result { margin-top: 8px; font-size: 12px; line-height: 1.4; }
.ws-pilot-add-result--success { color: #267b4e; }
.ws-pilot-add-result--error { color: #b14343; }

.ws-pilot-card-hint { margin: 0 0 10px; font-size: 12px; color: #4d566c; line-height: 1.4; }

/* Label-left / value-right rows with hairline dividers (replaces the older
   two-column .ws-pilot-card-meta grid, kept below unused for minimal diff). */
.ws-pilot-card-grid { display: flex; flex-direction: column; }
.ws-pilot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.ws-pilot-row:last-child { border-bottom: 0; }
.ws-pilot-row-label { flex: 0 0 auto; color: var(--muted); white-space: nowrap; }
.ws-pilot-row > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  color: var(--ink);
  overflow-wrap: break-word;
  word-break: break-word;
}
.ws-pilot-value--success { color: #267b4e; font-weight: 700; }
.ws-pilot-value--error   { color: #b14343; font-weight: 700; }
.ws-pilot-value--active  { color: #267b4e; font-weight: 700; }
.ws-pilot-value--disabled { color: var(--muted); }

/* Mode select — its own label, separated by a divider from the grid above
   and from the destructive delete button below (see .ws-pilot-card-actions). */
.ws-pilot-mode-change {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.ws-pilot-mode-change-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.ws-pilot-mode-change select {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
}

.ws-pilot-remove-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1.5px solid #f3b4b4;
  background: #fceeee;
  color: #b14343;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

/* ── All Payments: compact search + filter trigger ─────────────────────── */
.ws-search-row { display: flex; gap: 8px; margin: 12px 0; align-items: stretch; }
.ws-search-bar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.ws-search-bar input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
}
.ws-filter-btn {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ws-filter-btn__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
  border-radius: 20px;
  background: var(--red, #d84c4c);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.ws-results-count { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.ws-remove-warning {
  font-size: 12px;
  color: var(--muted);
  background: var(--bg, #f6f7fb);
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.4;
}

/* All Payments search/filter now use inline SVG instead of emoji glyphs. */
.ws-search-bar svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--muted); }
.ws-filter-btn svg { width: 17px; height: 17px; }
.ws-skeleton-search { flex: 1 1 auto; min-width: 0; height: 44px; border-radius: 12px; }
.ws-skeleton-filter-btn { flex: 0 0 auto; width: 96px; height: 44px; border-radius: 12px; }

/* Neutral (non-success) tone for the All Payments empty states — the
   .ws-empty-state-icon base stays untouched for other tabs' emoji usage. */
.ws-empty-state-icon--neutral {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg, #f6f7fb);
  color: var(--muted);
  font-size: 0;
}
.ws-empty-state-icon--neutral svg { display: block; width: 22px; height: 22px; }

/* ── v7.1.7 — Payments Workspace "Подключение" tab ────────────────────────
   Fifth Workspace tab. Reuses .card / .ws-search-row / .ws-search-bar /
   .ws-empty-state / .ws-queue-head / .kpi-loading / .notice / .pi-modal —
   deliberately no changes to any of those shared rules, only new, additively
   scoped .ws-conn-* / .ws-badge-- selectors below. */
.ws-conn-hint { margin: -6px 0 14px; font-size: 12px; color: var(--muted); line-height: 1.4; }

.ws-conn-results { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
/* ALE-39 round 2 — deepens the shared .card shadow to match .cab-card's
   var(--shadow) for this specific row type, without touching the global
   .card rule (used across every staff/admin/kitchen screen). */
.ws-conn-card {
  cursor: pointer;
  transition: box-shadow .15s ease;
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .06));
}
.ws-conn-card:hover, .ws-conn-card:focus-visible { box-shadow: 0 4px 16px rgba(26,38,66,.09); outline: none; }
.ws-conn-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ws-conn-card-name { font-size: 14px; font-weight: 700; color: var(--ink); word-break: break-word; }
.ws-conn-card-id { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* Semantic status pill — same visual language as .ws-pilot-mode-* badges. */
.ws-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.ws-badge--neutral   { background: var(--line, #e3e6ee); color: var(--muted); }
.ws-badge--pending    { background: #fff3e0; color: #e65100; }
.ws-badge--connected  { background: #e8f5e9; color: #2e7d32; }
.ws-badge--danger     { background: #fceeee; color: #b14343; }

.ws-conn-back-btn { min-height: 44px; margin-bottom: 12px; font-size: 13px; }

.ws-conn-detail-card { display: flex; flex-direction: column; gap: 12px; }
.ws-conn-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ws-conn-detail-name { font-size: 16px; font-weight: 800; color: var(--ink); word-break: break-word; }
.ws-conn-detail-id { margin-top: 2px; font-size: 12px; color: var(--muted); }
.ws-conn-info-row { font-size: 13px; color: var(--ink); }
.ws-conn-info-row b { font-weight: 700; }
/* ALE-82 — parent Telegram ID demoted to secondary text once a name is
   available (see _wsConnLaunchSummaryHtml); still visible, not the headline. */
.ws-conn-secondary-id { color: var(--muted); font-size: 11.5px; }
.ws-conn-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
/* ALE-46 round 2 — local-first "По одному" search: explicit escape hatch
   to the original live MoyKlass search, reuses .secondary/.ws-conn-note. */
.ws-conn-moyklass-escape { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* ALE-30 — launch-critical client summary card, appended right after the
   existing connection-status card for the same searched child. Reuses
   .ws-conn-detail-card/.ws-conn-info-row/.ws-badge* verbatim (no new
   visual language) — only these few layout-only rules are new. */
.ws-conn-summary-card { gap: 8px; }
.ws-conn-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.ws-conn-summary-label { color: var(--ink); font-weight: 600; }
.ws-conn-summary-detail { margin-top: -4px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.ws-conn-summary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; }
.ws-conn-summary-action-btn { min-height: 36px; font-size: 12px; padding: 6px 12px; }

/* v7.1.15 — launch-readiness "Подключения" diagnostics (third mode of the
   Payments Workspace «Подключение» tab, alongside «По одному»/«Массовое
   подключение»). Scoped entirely under .conn-*, no fixed pixel widths —
   grid/flex only, same 360/375px-safe discipline as the rest of the app. */
.conn-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin: 14px 0; }
.conn-stats-grid--food { margin-top: 6px; }
.conn-stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px; text-align: center; }
.conn-stat-value { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.conn-stat-label { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.conn-section-head { font-size: 13px; font-weight: 800; color: var(--ink); margin: 18px 0 8px; }
.conn-source-list, .conn-health-list, .conn-error-list { display: flex; flex-direction: column; gap: 6px; }
.conn-source-row { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.conn-health-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.conn-health-label { font-weight: 700; min-width: 120px; }
.conn-health-badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #eee; }
.conn-health-detail { flex-basis: 100%; font-size: 11px; color: var(--muted); }
.conn-health-ok { border-left-color: #1fa56b; }
.conn-health-ok .conn-health-badge { background: rgba(31,165,107,.15); color: #0b7548; }
.conn-health-warning { border-left-color: #e0a800; }
.conn-health-warning .conn-health-badge { background: rgba(224,168,0,.18); color: #6b4e00; }
.conn-health-disabled { border-left-color: #9aa4b5; }
.conn-health-disabled .conn-health-badge { background: #eee; color: #667; }
.conn-health-nodata { border-left-color: #9aa4b5; }
.conn-health-nodata .conn-health-badge { background: #eee; color: #667; }
.conn-error-row { display: flex; flex-wrap: wrap; gap: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 12px; }
.conn-error-reason { font-weight: 700; color: #a82d2d; }
.conn-error-source { color: var(--muted); }
.conn-error-time { color: var(--muted); margin-left: auto; }

/* ALE-15 — per-family onboarding diagnostics list. .conn-diag-filters
   reuses .ws-subtabs (the same borderless pill-row already re-skinned to
   match the client cabinet's .cab-switch-chip in ALE-39 round 2) as the
   filter-chip layout, just adding a top margin; the chips themselves are
   plain .ws-subtab buttons, same class, no new pill styling needed.
   .conn-diag-row reuses the same radius/shadow tokens as .cab-card. */
.conn-diag-filters { margin: 0 0 10px; }
.conn-diag-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.conn-diag-row {
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 14px; box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .06)); cursor: pointer;
}
.conn-diag-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.conn-diag-row-name { font-size: 14px; font-weight: 750; color: var(--ink); }
.conn-diag-row-children { font-size: 12px; color: var(--muted); margin-top: 2px; }
.conn-diag-row-problem { margin-top: 6px; font-size: 12px; color: #a82d2d; }
.conn-diag-row-meta { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.conn-diag-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
/* ALE-46 — "Подключённые" pager: reuses .conn-diag-row/.conn-diag-list/
   .ws-badge/.ws-subtab/.conn-stats-grid as-is, only the pager row itself
   is new. */
.conn-connected-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.conn-connected-pager button { font-size: 12px; padding: 6px 12px; }
.conn-diag-child { display: grid; gap: 4px; }
.conn-diag-child-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.conn-diag-child-rows { display: grid; gap: 3px; font-size: 12px; color: #34415d; }
.conn-diag-child-problems { color: #a82d2d; font-weight: 600; }
/* ALE-82 — consequence line under continuation/Availability status (see
   ONBOARDING_CONTINUATION_CONSEQUENCE in app.js), secondary to the status
   itself so it reads as explanation, not another status badge. */
.conn-diag-child-consequence { color: var(--muted); font-size: 11.5px; }

.ws-conn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-conn-action-btn {
  min-height: 44px;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}
.ws-conn-action-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* One-time code success card — plaintext code shown large and monospaced so
   it's easy to read/copy; never persisted anywhere outside _wsConnState. */
.ws-conn-success-card { text-align: center; padding: 22px 16px; }
.ws-conn-success-icon { color: #2e7d32; margin: 0 auto 10px; width: 40px; height: 40px; }
.ws-conn-success-icon svg { display: block; width: 40px; height: 40px; }
.ws-conn-success-title { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--ink); }
.ws-conn-code-display {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--bg, #f6f7fb);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
  word-break: break-all;
}
.ws-conn-success-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

@media (max-width: 420px) {
  .ws-conn-actions, .ws-conn-success-actions { flex-direction: column; }
  .ws-conn-action-btn { width: 100%; }
}

/* ── v7.1.12 — mass client-onboarding campaigns ────────────────────────────
   Reuses .card / .ws-badge / .ws-search-bar / .ws-search-row / .ws-conn-* /
   .notice / .pi-modal wherever the shape already matches — only new,
   additively scoped .ws-oc-* selectors below. Card-based layout (not a
   desktop table) on every viewport by design, so mobile never has to render
   a shrunk-down table — see report for the explicit trade-off. */
/* ALE-47 — 4th mode ("Подключённые") pushed .ws-oc-mode-btn's old
   `flex: 1 1 0` past its flex items' default `min-width: auto` floor on
   narrow (iPhone) viewports: flex-shrink can't shrink a row item below its
   own content's minimum intrinsic width (the longest unbreakable word,
   e.g. "Подключённые"), and this container had no overflow-x, so the 4th
   button was silently clipped by the parent instead of shrinking or
   scrolling into view. Same horizontal-scroll-row idiom already used by
   .subtabs/.cab-switcher/.sched-subtabs elsewhere in this file: natural-
   width, non-shrinking, non-wrapping buttons inside an overflow-x:auto
   row, not equal-width buttons squeezed to fit. */
.ws-oc-mode-toggle {
  display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 12px;
  background: var(--bg, #f6f7fb); border-radius: 12px; padding: 4px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ws-oc-mode-toggle::-webkit-scrollbar { display: none; }
.ws-oc-mode-btn {
  flex: 0 0 auto; white-space: nowrap; min-height: 38px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font-size: 13px; font-weight: 700;
  padding: 0 12px; cursor: pointer; scroll-snap-align: start;
}
.ws-oc-mode-btn.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(26,38,66,.10); }

/* v7.1.16.1 — Payments Workspace period filter bar. --lg only affects the
   new quick-preset buttons (44px tap target) — the base .ws-oc-mode-btn
   used elsewhere (Connection tab single/mass/diagnostics toggle) keeps its
   existing 38px sizing unchanged. */
.ws-period-bar { margin-bottom: 12px; }
.ws-period-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.ws-period-nav-btn {
  flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 1px solid var(--line, #e0e4ef);
  border-radius: 12px; background: var(--card, #fff); color: var(--ink);
  font-size: 20px; font-weight: 700; cursor: pointer; line-height: 1;
}
.ws-period-nav-label { flex: 1 1 auto; text-align: center; font-size: 14px; font-weight: 800; color: var(--ink); text-transform: capitalize; }
.ws-oc-mode-btn--lg { min-height: 44px; }
.ws-period-custom {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px;
}
.ws-period-custom-field {
  display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600;
}
.ws-period-custom-field input {
  min-height: 44px; border-radius: 10px; border: 1px solid var(--line, #e0e4ef);
  padding: 0 10px; font-size: 13px;
}
.ws-period-custom-apply { min-height: 44px; padding: 0 16px; }
.ws-period-custom-error { flex-basis: 100%; font-size: 12px; color: #b14343; }
.ws-period-summary-label { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.ws-period-outside-notice {
  display: block; width: 100%; margin-bottom: 12px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid rgba(194, 87, 13, .3); background: #fef0e4;
  color: #c2570d; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer;
  min-height: 44px;
}

.ws-oc-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
/* ALE-39 round 2 — same .cab-card shadow-depth alignment as .ws-conn-card above. */
.ws-oc-campaign-card { display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .06)); }
.ws-oc-campaign-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ws-oc-campaign-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.ws-oc-campaign-meta { font-size: 12px; color: var(--muted); }
.ws-oc-campaign-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--ink); }
.ws-oc-campaign-stats b { font-weight: 800; }
.ws-oc-campaign-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.ws-oc-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-size: 13px; color: var(--ink); }
.ws-oc-field input[type="text"], .ws-oc-field select {
  min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; font-size: 14px; font-family: inherit; color: var(--ink);
}
.ws-oc-checkbox-field { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--ink); }
.ws-oc-ttl-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-oc-ttl-btn { min-height: 34px; padding: 0 12px; font-size: 12px; }
/* v7.1.14.3 — real computed-style evidence (Playwright) showed the selected
   branch button was visually indistinguishable from the unselected ones:
   these buttons always also carry the generic ".secondary" class (see
   index.html #availBranchRow), and ".secondary { background/color/border
   !important }" (added later, for the app-wide secondary-button re-theme)
   unconditionally wins over this rule's non-!important background/color —
   the .active class was toggled correctly, it just had zero visual effect.
   !important here (scoped narrowly to .ws-oc-ttl-btn.active only) restores
   the intended yellow-bg/dark-text selected state without touching
   .secondary's normal appearance anywhere else in the app. */
.ws-oc-ttl-btn.active { background: var(--yc-yellow, #FFCB1F) !important; color: #6f5200 !important; border-color: transparent !important; }

.ws-oc-summary { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 4px; }
.ws-oc-summary-stat { font-size: 12px; color: var(--muted); }
.ws-oc-summary-stat b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }

.ws-oc-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ws-oc-filter-row select { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 12px; color: var(--ink); }

.ws-oc-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 10px; background: var(--bg, #f6f7fb); border-radius: 10px; font-size: 12px; }
.ws-oc-recipient-card { display: flex; gap: 10px; align-items: flex-start; box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .06)); }
.ws-oc-recipient-check { margin-top: 2px; }
.ws-oc-recipient-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ws-oc-recipient-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ws-oc-recipient-name { font-size: 13px; font-weight: 700; color: var(--ink); word-break: break-word; }
.ws-oc-recipient-meta { font-size: 11px; color: var(--muted); }
.ws-oc-recipient-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-oc-recipient-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* ALE-94 — says whose invite this is (or why it cannot be sent) right above
   the action row. word-break keeps a long child name inside the card at
   320px instead of pushing the page sideways. */
.ws-oc-invite-note { font-size: 11px; color: var(--muted); margin-top: 4px; word-break: break-word; overflow-wrap: anywhere; }
.ws-oc-invite-note--done { color: #0b7548; }

.ws-badge--continues { background: #effbf6; color: #0b7548; }
.ws-badge--undecided { background: #fff8e6; color: #9a6a00; }
.ws-badge--needs_consultation { background: #fff0e0; color: #a0501a; }
.ws-badge--not_continuing { background: #fff0f0; color: #a82d2d; }

@media (max-width: 420px) {
  .ws-oc-campaign-actions, .ws-oc-recipient-actions { flex-direction: column; }
  .ws-oc-list-head { flex-direction: column; align-items: stretch; }
}

/* v7.1.12.1 hotfix — mass candidate selection bar ("Выбрать всех загруженных
   — N" / "Снять выбор" / "Выбрано: N"), shown right under the bulk-load
   diagnostics line. Deliberately NOT position:sticky — Telegram WebView
   frequently runs the page inside a transformed/overflow-clipped ancestor,
   which silently breaks sticky positioning; staying in normal flow is the
   safe choice for a hotfix that can't be visually verified in-app here. */
.ws-oc-mass-select-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 8px 0; padding: 8px 10px;
  background: var(--bg, #f6f7fb); border-radius: 10px;
}
.ws-oc-mass-select-bar button { min-height: 34px; padding: 0 12px; font-size: 12px; flex: 0 0 auto; }
.ws-oc-mass-select-count { font-size: 12px; color: var(--muted); font-weight: 700; margin-left: auto; white-space: nowrap; }

/* Already-in-campaign candidates: visibly disabled, never re-selectable. */
.ws-oc-recipient-card--disabled { opacity: .55; }
.ws-oc-recipient-card--disabled .ws-oc-recipient-check { cursor: not-allowed; }

@media (max-width: 420px) {
  .ws-oc-mass-select-bar { flex-direction: column; align-items: stretch; }
  .ws-oc-mass-select-bar button { width: 100%; }
  .ws-oc-mass-select-count { margin-left: 0; text-align: center; }
}

/* v7.1.13 research — "Ученики из расписания за период" candidate-source
   filter form (date range, criterion, exclude-cancelled toggles). Reuses
   .ws-oc-field/.ws-oc-checkbox-field styling already defined above. */
.ws-oc-schedule-form { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ws-oc-schedule-form .ws-oc-field,
.ws-oc-schedule-form .ws-oc-checkbox-field { margin-bottom: 8px; }

/* v7.1.12.1 — parent-facing schedule-availability form (#ocAvailabilityModal)
   and its interval-row list; also reused read-only in the staff recipient card. */
.oc-interval-row { display: grid; grid-template-columns: auto 1fr auto 1fr auto auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.oc-interval-row select, .oc-interval-row input[type="time"] { min-height: 38px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13px; color: var(--ink); }
.oc-interval-remove { min-height: 38px; min-width: 38px; border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.oc-interval-pref-btn { min-height: 38px; padding: 0 10px; font-size: 12px; }
.oc-interval-pref-btn.active { background: var(--yc-yellow, #FFCB1F); color: #6f5200; border-color: transparent; }
@media (max-width: 480px) {
  .oc-interval-row { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
}

/* ── v7.1.7 — Payments Workspace "Помощь по оплатам" screen ───────────────
   Internal screen inside #paymentsWorkspaceRoot (not a 6th tab): opening it
   only toggles [hidden] on #wsSubtabs/#wsTabContent/#wsHelpScreen — the
   active tab, its data, any in-progress search/filters are never touched,
   so closing help restores everything exactly as it was, with zero extra
   API calls. Reuses the existing .help-* component set (see
   clientManagerHelpHtml()) adapted with .card / --yellow / ws-search-bar. */
#wsHelpScreen { display: block; }
#wsHelpScreen.hidden { display: none; }
.ws-help-back-btn { min-height: 44px; margin-bottom: 12px; font-size: 13px; }
.ws-help-toc { margin: 4px 0 16px; }
.ws-help-section { scroll-margin-top: 12px; }
.ws-help-section + .ws-help-section { margin-top: 14px; }
.ws-help-reset-btn { min-height: 44px; flex: 0 0 auto; }
/* Status/mode accordion & cards reuse .help-status/.help-accordion tones —
   only new rule needed is the searchable-item hidden state. */
.ws-help-leaf.ws-help-hidden { display: none !important; }
.ws-help-section.ws-help-hidden { display: none !important; }
/* Help components originally used emoji glyphs sized via font-size; the
   Payments Help screen uses inline SVG instead (Workspace convention), so
   these icons need explicit sizing wherever they land inside .help-* markup. */
.help-hero-icon svg { display: block; width: 22px; height: 22px; }
.help-status b svg { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; margin-right: 6px; }

@media (max-width: 420px) {
  .ws-search-row .ws-help-reset-btn { flex: 1 1 100%; }
}

/* ── v7.1.6.1 step 3 — All Payments compact card ─────────────────────────
   Row 1: name + amount · Row 2 (sub): public id + MK id · meta: period/
   method/date · bottom row: status badge + parent-visibility · collapsible
   "Подробнее" holds every technical block + every action button. */
.ws-pi-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
/* ALE-39 round 2 — radius/shadow aligned to .cab-card. */
.ws-pi-card {
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .06));
}
.ws-pi-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ws-pi-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: break-word;
  word-break: break-word;
}
.ws-pi-amount { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.ws-pi-sub {
  margin-top: 3px;
  font-size: 12px;
  color: #4d566c;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ws-pi-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 12px;
  color: #4d566c;
}
.ws-pi-meta strong { color: var(--ink); font-weight: 700; }
.ws-pi-row--bottom { margin-top: 10px; flex-wrap: wrap; }

.ws-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--line);
  color: var(--ink);
  white-space: nowrap;
}
.ws-status-badge--muted   { background: var(--line); color: var(--muted); }
.ws-status-badge--info    { background: #eaf0fd; color: #3457a6; }
.ws-status-badge--pending { background: #fff7df; color: #9b6b05; }
.ws-status-badge--warning { background: #fef0e4; color: #c2570d; }
.ws-status-badge--success { background: #eaf6ef; color: #267b4e; }
.ws-status-badge--danger  { background: #fceeee; color: #b14343; }

.ws-pi-visibility {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}
.ws-pi-visibility svg { width: 14px; height: 14px; }
.ws-pi-visibility--visible { color: #267b4e; }

/* Collapsible "Подробнее" — closed by default, no marker triangle (custom
   chevron icon rotates instead), holds technical blocks + action buttons. */
.ws-pi-more { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.ws-pi-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.ws-pi-more summary::-webkit-details-marker { display: none; }
.ws-pi-more summary svg { width: 15px; height: 15px; transition: transform 160ms ease; }
.ws-pi-more[open] summary svg { transform: rotate(180deg); }
.ws-pi-more-body { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ws-pi-info-line { font-size: 12px; color: #4d566c; line-height: 1.45; overflow-wrap: break-word; word-break: break-word; }
.ws-pi-info-block {
  font-size: 13px;
  color: var(--ink);
  background: var(--bg, #f6f7fb);
  border-radius: 10px;
  padding: 9px 10px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ws-pi-info-block strong { display: block; margin-bottom: 2px; }
.ws-pi-info-block--warn { background: #fef0e4; color: #9a5215; }
/* Technical identifiers (order_id/tracking_id/UID) live inside a collapsed
   .ws-tech-details — deliberately smaller/muted (see its own rules) so they
   never visually compete with the primary state/reason text above them. */
.ws-pi-info-block .ws-tech-details { margin-top: 6px; }
.ws-pi-withdrawal-block { font-size: 12px; }
.ws-pi-more-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.ws-pi-action-btn { flex: 0 0 auto; min-height: 44px; padding: 0 14px; font-size: 12px; }
.ws-pi-action-btn.danger { order: 99; }

/* ── v7.1.6.1 step 3 — light filter bottom sheet (scoped to #wsFiltersModal
   only; other pi-modals keep following the device light/dark theme). ──── */
#wsFiltersModal .pi-modal-sheet { background: #fff; color: #172033; }
#wsFiltersModal .pi-modal-sheet::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 4px;
  background: var(--line, #e8ecf4);
  flex: 0 0 auto;
}
#wsFiltersModal .pi-modal-head { border-bottom-color: #e8ecf4; }
#wsFiltersModal .pi-modal-head h3 { color: #172033; }
#wsFiltersModal .pi-modal-close { color: #657089; }
#wsFiltersModal .pi-modal-body label { color: #657089; }
#wsFiltersModal .pi-modal-body select {
  background: #f6f7fb;
  border-color: #e0e4ef;
  color: #172033;
  min-height: 44px;
}
#wsFiltersModal .pi-modal-footer { border-top-color: #e8ecf4; }
#wsFiltersModal .pi-modal-footer button { min-height: 44px; }

/* ── v7.1.8 — training-state (pause/vacation/finished) Attention card ────── */
.ws-training-note { margin: 8px 0 0; font-size: 13px; color: var(--ink); line-height: 1.4; }
.ws-training-warning {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7df;
  border: 1px solid #f0deA0;
}
.ws-training-warning p { margin: 0 0 8px; font-size: 13px; color: #6b5200; line-height: 1.4; }
.ws-training-warning__note { color: var(--muted) !important; font-size: 12px !important; }
.ws-training-warning .ws-attention-actions { margin-top: 0; }
.ws-training-warning .ws-attention-approve,
.ws-training-warning .secondary { min-height: 44px; }
[data-ws-training-check] { min-height: 44px; }
/* ALE-81 — "Закрыть как ошибочный" sits next to "Проверить снова" in the same
   .ws-attention-actions row, so it needs the identical 44px touch target the
   re-check button already gets; without it the two buttons are different
   heights. The hint below the row reuses the muted 12px note language already
   used elsewhere on this card. Both selectors are new — nothing existing is
   restyled. */
[data-ws-resolve-invalid] { min-height: 44px; }
.ws-resolve-invalid-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 8px 0 0;
}

@media (max-width: 390px) {
  .ws-attention-actions { flex-direction: column; }
  .ws-attention-actions button { width: 100%; }
}

/* ── v7.1.9 — Payments Workspace "Диагностика" tab ────────────────────────── */
.ws-diag-summary {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--card, #fff);
}
.ws-diag-summary__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ws-diag-status {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.ws-diag-status--neutral  { background: #eef1f6; color: #55607a; }
.ws-diag-status--healthy  { background: #eaf6ef; color: #267b4e; }
.ws-diag-status--warning  { background: #fff7df; color: #9b6b05; }
.ws-diag-status--critical { background: #fceeee; color: #b14343; }
.ws-diag-summary__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
@media (min-width: 560px) {
  .ws-diag-summary__grid { grid-template-columns: repeat(3, 1fr); }
}
.ws-diag-summary__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-diag-summary__label { font-size: 11px; color: var(--muted); }
.ws-diag-summary__value { font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ws-diag-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.ws-diag-count { font-size: 12px; color: var(--muted); }
.ws-diag-count--critical { color: #b14343; font-weight: 600; }
.ws-diag-count--warning { color: #9b6b05; font-weight: 600; }

.ws-diag-incident .ws-attn-row { align-items: flex-start; }
.ws-diag-severity-badge {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.ws-diag-severity--critical { background: #fceeee; color: #b14343; }
.ws-diag-severity--warning  { background: #fff7df; color: #9b6b05; }
.ws-diag-severity--info     { background: #eaf0fd; color: #3457a6; }

/* v7.1.10 — recently-recovered incidents (e.g. automatic training resume) */
.ws-diag-recovered__title {
  margin: 14px 4px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #6b7280);
}
.ws-diag-incident--recovered { opacity: 0.9; }

@media (max-width: 390px) {
  .ws-diag-summary__top { flex-direction: column; align-items: stretch; }
  .ws-diag-summary__top button { width: 100%; min-height: 44px; }
}
[data-ws-diag-recheck] { min-height: 44px; }

/* ══════════════════════════════════════════════════════════════════════
   v7.1.13 — Client cabinet ("Единый кабинет клиента и центр уведомлений")
   Adapted from the approved figma-yellow-club client-cabinet-v7113 review
   onto THIS app's existing tokens (--yellow/--ink/--muted/--card/--bg/
   --shadow — see :root, line ~3383) rather than porting the prototype's
   own --yc-* variable names. Everything below is scoped so it only ever
   affects the parent/client cabinet — nothing here touches staff/admin/
   kitchen screens, .tabs.bottom-tabbar's base rule, or existing .pi-modal
   behavior for other modals.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   ALE-66 Stage 1 — client/parent cabinet redesign: design tokens + Главная.
   Visual direction ported from the approved design reference
   (Yellow-Club-Agent-Design-Reference/"Yellow Club Agent.dc.html" — NOT
   Phone.dc.html, which is a stale/unrelated generic-school mockup).
   Nunito, #FFD027/#17150F/#F4F1EA, ~26px card radii, one dark "anchor"
   card per screen for the primary action.

   The new --cab-* tokens are declared ONLY inside body.role-parent-cabinet
   (never :root). The header/card/badge/switcher rules that CONSUME these
   tokens are edited in place at their original definitions further below
   (not duplicated here as a parallel override block) — several existing
   presentation tests locate "the" real rule for a given class by
   searching for the first occurrence of its selector text in the file,
   so a second, earlier-appearing scoped-override block for the same
   selector would silently hijack those tests even though it's a
   legitimate, more-specific rule. In effect this is still fully scoped:
   these .cab-* classes are only ever
   emitted by client-role render functions (renderClientHome and
   siblings), the new custom properties only resolve to a value inside
   body.role-parent-cabinet, and every literal color/radius/shadow value
   still has its original pre-ALE-66 value as the var() fallback — so
   staff/admin/client_manager/kitchen/intern and the food-only client
   fallback (which never gets this body class, see setupRoleUi()) are
   visually untouched. Editing in place also means this re-skins the other
   client-cabinet screens that reuse these same classes (Мои дети/Оплаты/
   Уведомления/Ещё/Профиль/Расписание/Помощь) — an expected token-level
   cascade, not a Stage-1 redesign of those screens: their own layout/
   behavior/content is untouched, and only Главная was visually
   acceptance-tested this stage — see ALE-66 stage-1 report.
   ══════════════════════════════════════════════════════════════════════ */
body.role-parent-cabinet {
  --cab-font: 'Nunito', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cab-yellow: #ffd027;
  --cab-yellow-soft: #fff6d6;
  --cab-ink: #17150f;
  --cab-canvas: #f4f1ea;
  --cab-surface: #ffffff;
  --cab-line: rgba(23, 21, 15, .07);
  --cab-line-soft: rgba(23, 21, 15, .06);
  /* ALE-66 visual polish pass — exact prototype values, not eyeballed:
     card shadow 0 2 10 rgba(23,21,15,.04) (was .05), anchor/cta shadows
     already matched the prototype exactly. --cab-accent-text is the
     prototype's supporting-text-on-yellow-soft color (continuation card
     body copy), distinct from the plain --cab-muted used on white cards. */
  --cab-shadow-card: 0 2px 10px rgba(23, 21, 15, .04);
  --cab-shadow-anchor: 0 14px 30px rgba(23, 21, 15, .22);
  --cab-shadow-cta: 0 8px 18px rgba(255, 208, 39, .35);
  --cab-muted: #8c8878;
  --cab-muted-2: #57534a;
  --cab-accent-text: #7a6634;
  --cab-radius-lg: 26px;
  --cab-radius-md: 18px;
  --cab-radius-pill: 999px;
  --cab-success-fg: #1f6b4c; --cab-success-bg: #e4f3eb;
  --cab-warning-fg: #a2670a; --cab-warning-bg: #fff6d6;
  --cab-danger-fg:  #b0453a; --cab-danger-bg:  #fbe8e5;
  --cab-muted-fg:   #6e6a5f; --cab-muted-bg:   #f1eee7;
  --cab-info-fg:    #3a5f92; --cab-info-bg:    #e9f0fa;

  font-family: var(--cab-font);
  background: var(--cab-canvas);
  color: var(--cab-ink);
}

/* ══════════════════════════════════════════════════════════════════════
   ALE-68 Stage 1 — client_manager shell: activates the SAME --cab-* token
   set as role-parent-cabinet above (identical values, no new palette —
   per the ALE-68 brief's "не создавать отдельную design system для
   client_manager"), scoped to its own body.role-client-manager-cabinet
   selector rather than widening role-parent-cabinet's selector list
   (client_manager is not the client cabinet — same reasoning already
   used for the bottom-nav unification below, ALE-39). Several
   client_manager screens (Отчёты's cab-header--sub/cab-card--accent,
   ALE-39; Рассылки's _cabHeaderHtml, pre-existing) already emit .cab-*
   classes but previously only ever rendered their var(--cab-x, fallback)
   hardcoded fallback values, since --cab-* was never defined for this
   role — this block is what makes those already-existing classes render
   with the real, intended design tokens for the first time.
   ══════════════════════════════════════════════════════════════════════ */
body.role-client-manager-cabinet {
  --cab-font: 'Nunito', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cab-yellow: #ffd027;
  --cab-yellow-soft: #fff6d6;
  --cab-ink: #17150f;
  --cab-canvas: #f4f1ea;
  --cab-surface: #ffffff;
  --cab-line: rgba(23, 21, 15, .07);
  --cab-line-soft: rgba(23, 21, 15, .06);
  --cab-shadow-card: 0 2px 10px rgba(23, 21, 15, .04);
  --cab-shadow-anchor: 0 14px 30px rgba(23, 21, 15, .22);
  --cab-shadow-cta: 0 8px 18px rgba(255, 208, 39, .35);
  --cab-muted: #8c8878;
  --cab-muted-2: #57534a;
  --cab-accent-text: #7a6634;
  --cab-radius-lg: 26px;
  --cab-radius-md: 18px;
  --cab-radius-pill: 999px;
  --cab-success-fg: #1f6b4c; --cab-success-bg: #e4f3eb;
  --cab-warning-fg: #a2670a; --cab-warning-bg: #fff6d6;
  --cab-danger-fg:  #b0453a; --cab-danger-bg:  #fbe8e5;
  --cab-muted-fg:   #6e6a5f; --cab-muted-bg:   #f1eee7;
  --cab-info-fg:    #3a5f92; --cab-info-bg:    #e9f0fa;

  font-family: var(--cab-font);
  background: var(--cab-canvas);
  color: var(--cab-ink);
}
/* The shared staff .topbar is redundant for client_manager: it's replaced
   by the dedicated .cm-app-header/.cm-page-header shell below — same idiom
   already used for role-parent-cabinet (line ~10334). */
body.role-client-manager-cabinet .topbar { display: none; }

/* ── ALE-68 owner correction — shared client_manager app shell ───────────
   Two levels, matching the approved Claude prototype (figma-yellow-club
   design reference, manager screens): a persistent APP HEADER (brand
   identity: YC mark + "Yellow Club · Менеджер" / "client_manager ·
   <реальное имя>", identical on every screen, never re-rendered per tab —
   see index.html) and a persistent PAGE HEADER (current section's own
   title/subtitle, plain text, no card) directly below it. Both are single
   DOM nodes outside <main>, updated by _cmSyncPageHeader()/loadMe() in
   app.js on every tab switch — replaces the 4 different per-tab header
   treatments this role previously had (Tasks white card / Clients yellow
   card / Payments own eyebrow header / More yellow card). Deliberately NOT
   a boxed/gradient card (unlike .cab-header) — the prototype's manager app
   bar sits directly on the canvas background, no status bar, no fake
   ellipsis/close icons (no such real product action exists here). Hidden
   for every other role (base rule below); shown only under this scope. */
.cm-app-header, .cm-page-header { display: none; }
body.role-client-manager-cabinet .cm-app-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0 6px;
}
body.role-client-manager-cabinet .cm-app-header-logo {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--cab-yellow);
  color: var(--cab-ink);
  font-size: 12px;
  font-weight: 900;
}
body.role-client-manager-cabinet .cm-app-header-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
body.role-client-manager-cabinet .cm-app-header-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.role-client-manager-cabinet .cm-app-header-subtitle {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cab-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ALE-68 owner correction round 3 — title/subtitle and page actions
   (refresh/help) now share ONE compact row, matching the prototype
   ([title+subtitle] .... [action icons]) instead of actions sitting on
   their own row below (which is what produced the ~60px empty gap live
   review flagged). #cmPageHeaderActions is populated per-tab by
   _cmSyncPageHeader()/each screen's own render function — see app.js. */
body.role-client-manager-cabinet .cm-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 14px;
}
body.role-client-manager-cabinet .cm-page-header-text { min-width: 0; }
body.role-client-manager-cabinet .cm-page-header-title {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.6px;
  line-height: 1.2;
  color: var(--cab-ink);
}
body.role-client-manager-cabinet .cm-page-header-subtitle {
  margin: 3px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cab-muted);
  line-height: 1.35;
}
body.role-client-manager-cabinet .cm-page-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Same CTA re-skin as role-parent-cabinet's .primary/.secondary (below),
   scoped separately per this file's own convention (see that block's own
   comment) rather than widening its selector list. Excludes #tab-reports
   via :not() — legacy Reports is out of scope for this redesign pass (see
   the ALE-68 Reports-exclusion block right below) and its buttons
   (несколько literal, non-var() properties here — border/padding/
   font-weight/box-shadow) must fall through to the ORIGINAL cascade
   untouched, not just get their --cab-* var() references neutralized. */
body.role-client-manager-cabinet .primary:not(#tab-reports .primary) {
  background: var(--cab-yellow);
  color: var(--cab-ink);
  border: none;
  border-radius: var(--cab-radius-md);
  padding: 13px 18px;
  font-weight: 800;
  box-shadow: var(--cab-shadow-cta);
}
body.role-client-manager-cabinet .secondary:not(#tab-reports .secondary) {
  background: var(--cab-canvas);
  color: var(--cab-muted-2);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  padding: 13px 18px;
  font-weight: 700;
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ALE-68 — legacy "Отчёты" (#tab-reports) is explicitly OUT of this
   redesign (owner call: separate, much older module, will get its own
   dedicated task later — not the same "Отчёты" as the Claude design
   prototype). It must render exactly as it did on baseline main
   (5f89a698...), even though it sits inside body.role-client-manager-
   cabinet and inherits that body's --cab-* custom properties by default.
   Two different fixes for two different kinds of leakage:
   1) Every --cab-* custom property is reset to `initial` scoped to
      #tab-reports. This is safe specifically because every .cab-header/
      .cab-card/.cab-card--accent/.cab-header--sub rule that consumes
      these tokens (edited in place for ALE-66, further up this file) was
      deliberately written as var(--cab-x, <original pre-ALE-66 literal
      value>) — see that section's own comment. Resetting the custom
      property to `initial` makes it compute as guaranteed-invalid within
      this subtree, which per the CSS Custom Properties spec makes every
      var(--cab-x, fallback) reference here resolve to ITS OWN fallback —
      i.e. exactly the pre-ALE-68 baseline value, with no need to
      duplicate/guess those literals here.
   2) .primary/.secondary above are excluded via :not(#tab-reports ...)
      instead, because that rule also sets plain literal properties
      (border/padding/font-weight/box-shadow) that don't go through
      var(--cab-x, fallback) at all — an `initial` reset can't touch
      those, only NOT MATCHING the element in the first place restores
      the original (pre-scoped) cascade for every property at once.
   3) body's own `color: var(--cab-ink)` is resolved once AT the body
      element and inherits down as an already-computed value — an
      `initial` reset on a descendant can't retroactively change what an
      ANCESTOR already painted/resolved. #tab-reports gets its own
      explicit `color`, reusing the untouched, pre-existing `--ink`
      token (unaffected by any ALE-68 work) so the text color is
      guaranteed identical to baseline, not hand-copied/guessed.
   Not reset: --cab-canvas at the body level (the page canvas behind/
   around every client_manager tab, incl. Отчёты, was explicitly kept —
   owner's own allowance this round) and the shared .topbar hide (shell
   chrome above every tab, not "Reports content" — flagged in the report,
   not this file, in case that reading is wrong).
   ══════════════════════════════════════════════════════════════════════ */
body.role-client-manager-cabinet #tab-reports {
  --cab-font: initial;
  --cab-yellow: initial;
  --cab-yellow-soft: initial;
  --cab-ink: initial;
  --cab-canvas: initial;
  --cab-surface: initial;
  --cab-line: initial;
  --cab-line-soft: initial;
  --cab-shadow-card: initial;
  --cab-shadow-anchor: initial;
  --cab-shadow-cta: initial;
  --cab-muted: initial;
  --cab-muted-2: initial;
  --cab-accent-text: initial;
  --cab-radius-lg: initial;
  --cab-radius-md: initial;
  --cab-radius-pill: initial;
  --cab-success-fg: initial; --cab-success-bg: initial;
  --cab-warning-fg: initial; --cab-warning-bg: initial;
  --cab-danger-fg: initial;  --cab-danger-bg: initial;
  --cab-muted-fg: initial;   --cab-muted-bg: initial;
  --cab-info-fg: initial;    --cab-info-bg: initial;
  color: var(--ink);
}
/* ALE-68 owner correction round 3 — title/subtitle AND #refreshReports
   itself now live in the shared .cm-page-header row (#refreshReports is
   physically relocated there by _cmSyncPageHeader/
   CM_RELOCATABLE_HEADER_ACTIONS, same node/handler, restored to this exact
   spot the moment it isn't client_manager's turn). Reports CONTENT (the
   accordion/report body below) stays completely untouched — the now-empty
   header card is just hidden, not deleted (the button's real DOM home is
   still right here for every other role — owner/admin/director/operations/
   methodist — who see Reports with its original header, unaffected). */
body.role-client-manager-cabinet #tab-reports .cab-header.cab-header--sub {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ALE-68 — client_manager "Задачи" (data-tab="tasks"). Scoped to
   #tab-tasks so the shared teacher/other-role Tasks view (renderTasks() →
   renderTeacherTasks() when isClientManagerRole() is false) is completely
   untouched — same #tab-tasks section, same .task-summary/.cm-task-*
   markup, only client_manager's own JS branch (renderClientTasks) reaches
   this. No JS logic/data/API changed here beyond the .cm-task-actions-main/
   -secondary wrapper split in clientTaskActionButtons() (same buttons,
   same data-*, same bindClientTaskEvents() wiring — grouping only, for the
   primary/secondary hierarchy below).
   ══════════════════════════════════════════════════════════════════════ */

/* HEADER — static .section-head shared with teacher's own Tasks; scoped
   restyle only. renderClientTasks() now sets a short one-line h2/p (ALE-68
   polish — was a 2-line title + a long explanatory paragraph). */
/* ALE-68 owner correction round 3 — title/subtitle AND #refreshTasks
   itself now live in the shared .cm-page-header row (#refreshTasks is
   physically relocated there by _cmSyncPageHeader/
   CM_RELOCATABLE_HEADER_ACTIONS — same icon-only .cab-icon-btn node/
   handler introduced in round 2, restored to this exact spot the moment
   it isn't client_manager's turn). #tab-tasks itself is shared with other
   roles (teacher/senior_teacher/etc.), so its h2/p/#refreshTasks DOM is
   left completely untouched — the now-empty header row is just hidden
   here, not deleted; teacher's own Tasks view still renders it normally. */
body.role-client-manager-cabinet #tab-tasks .section-head {
  display: none;
}

/* SUMMARY — активные/важные/ждут, computed client-side in
   renderClientTasks() from the same state.clientTasks the list uses (no
   separate KPI endpoint on this screen — /api/client-tasks-kpi only feeds
   the Отчёты tab's removed KPI block, confirmed against current code).
   ALE-68 polish — one flat compact bar (vertical dividers) instead of 3
   separate boxed cards; "важные" keeps a warning TEXT accent only, no
   colored background block, so it stays a summary strip, not a mini
   dashboard. */
body.role-client-manager-cabinet #tab-tasks .task-summary {
  display: flex;
  gap: 0;
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  padding: 10px 0;
}
body.role-client-manager-cabinet #tab-tasks .task-summary-card {
  flex: 1;
  background: none;
  border: none;
  border-left: 1px solid var(--cab-line-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 0 6px;
  text-align: center;
}
body.role-client-manager-cabinet #tab-tasks .task-summary-card:first-child {
  border-left: none;
}
body.role-client-manager-cabinet #tab-tasks .task-summary-card b {
  color: var(--cab-ink);
  font-size: 19px;
}
body.role-client-manager-cabinet #tab-tasks .task-summary-card span {
  color: var(--cab-muted);
  font-size: 11px;
}
body.role-client-manager-cabinet #tab-tasks .task-summary-card:nth-child(2) b {
  color: var(--cab-warning-fg);
}

/* HELP TEXT — was a permanent yellow card on first load; now a single
   collapsed line (native <details>, renderClientTasks() only changed the
   markup it puts inside the same static .task-help-note div — no new JS
   state). Same explanatory copy, tucked behind a tap. */
body.role-client-manager-cabinet #tab-tasks .task-help-note {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 10px;
  color: inherit;
  font-weight: normal;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-help-details summary {
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cab-muted-2);
  padding: 4px 2px;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-help-details summary::-webkit-details-marker {
  display: none;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-help-details[open] summary {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-help-details p {
  margin: 4px 0 0;
  padding: 10px 12px;
  background: var(--cab-yellow-soft);
  border-radius: var(--cab-radius-md);
  color: var(--cab-accent-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

/* PRIMARY ACTIONS — side by side instead of two stacked full-width
   buttons (toolbar always renders exactly 4 children in this order: sync
   button, manual-task button, type-filter row, status-filter row — see
   renderClientTasks() — so nth-child here is stable, not guesswork). */
body.role-client-manager-cabinet #tab-tasks .cm-task-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-toolbar > .primary,
body.role-client-manager-cabinet #tab-tasks .cm-task-toolbar > .secondary {
  border-radius: var(--cab-radius-md);
  min-height: 42px;
  padding: 10px 10px;
  font-size: 13px;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-toolbar > *:nth-child(3),
body.role-client-manager-cabinet #tab-tasks .cm-task-toolbar > *:nth-child(4) {
  grid-column: 1 / -1;
}

/* FILTERS — real segmented control (one track, transparent buttons, dark
   active pill) instead of separate floating chips. Type/status filters
   were already button-pills in the JS (renderClientTaskTypeFilters/
   renderClientTaskStatusFilters), not <select> — only the visual track
   changes here. ALE-68 polish — base .cm-task-filters had
   overflow-x:auto (visible horizontal scrollbar at 390px for the 6-item
   status row); wraps to a second row instead, same buttons/handlers,
   filter logic untouched. */
body.role-client-manager-cabinet #tab-tasks .cm-task-filters {
  background: var(--cab-canvas);
  padding: 4px;
  border-radius: var(--cab-radius-md);
  gap: 4px;
  flex-wrap: wrap;
  overflow-x: visible;
  -webkit-overflow-scrolling: auto;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-filter {
  background: transparent;
  border: none;
  color: var(--cab-muted-2);
  box-shadow: none;
  padding: 7px 12px;
  font-size: 12px;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-filter.active {
  background: var(--cab-ink);
  color: #fff;
  border-color: var(--cab-ink);
}

/* CREATE / EDIT form — same fields/validation/contract, cab-card shell. */
body.role-client-manager-cabinet #tab-tasks .cm-task-form-card {
  background: var(--cab-surface);
  border-color: var(--cab-line-soft);
  border-radius: var(--cab-radius-lg);
  box-shadow: var(--cab-shadow-card);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-form-head h3 {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-form-head p,
body.role-client-manager-cabinet #tab-tasks .cm-task-form label {
  color: var(--cab-muted);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-form-head .icon-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cab-canvas);
  color: var(--cab-muted-2);
  border: none;
  font-size: 18px;
  line-height: 1;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-form input,
body.role-client-manager-cabinet #tab-tasks .cm-task-form select,
body.role-client-manager-cabinet #tab-tasks .cm-task-form textarea {
  border-color: var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  color: var(--cab-ink);
  background: var(--cab-canvas);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-form input:focus,
body.role-client-manager-cabinet #tab-tasks .cm-task-form select:focus,
body.role-client-manager-cabinet #tab-tasks .cm-task-form textarea:focus {
  border-color: var(--cab-yellow);
  box-shadow: 0 0 0 3px rgba(255, 208, 39, .22);
}

/* TASK LIST — cab-card shell; urgent/high priority use cab semantic
   tokens instead of hardcoded reds/yellows. */
body.role-client-manager-cabinet #tab-tasks .cm-task-card {
  background: var(--cab-surface);
  border-color: var(--cab-line-soft);
  border-radius: var(--cab-radius-lg);
  box-shadow: var(--cab-shadow-card);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-card.urgent {
  border-color: rgba(176, 69, 58, .35);
  background: var(--cab-danger-bg);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-card.high {
  border-color: rgba(255, 208, 39, .5);
  background: var(--cab-yellow-soft);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-card h3,
body.role-client-manager-cabinet #tab-tasks .cm-task-meta {
  word-break: break-word;
  overflow-wrap: anywhere;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-card h3 {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-meta,
body.role-client-manager-cabinet #tab-tasks .cm-task-payment,
body.role-client-manager-cabinet #tab-tasks .cm-task-contact,
body.role-client-manager-cabinet #tab-tasks .cm-task-comment,
body.role-client-manager-cabinet #tab-tasks .cm-task-compact-comment {
  color: var(--cab-muted);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-payment {
  color: var(--cab-accent-text);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-comment,
body.role-client-manager-cabinet #tab-tasks .cm-task-compact-comment {
  background: var(--cab-canvas);
}

/* Type/status pills — status keeps its existing semantic mapping (new/
   in_work/waiting/done/cancelled), just re-colored with cab tokens. */
body.role-client-manager-cabinet #tab-tasks .cm-task-type {
  background: var(--cab-ink);
  color: #fff;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-status {
  background: var(--cab-muted-bg);
  color: var(--cab-muted-fg);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-status.new {
  background: var(--cab-warning-bg);
  color: var(--cab-warning-fg);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-status.in_work {
  background: var(--cab-info-bg);
  color: var(--cab-info-fg);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-status.waiting_client,
body.role-client-manager-cabinet #tab-tasks .cm-task-status.waiting_confirm,
body.role-client-manager-cabinet #tab-tasks .cm-task-status.done {
  background: var(--cab-success-bg);
  color: var(--cab-success-fg);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-status.cancelled {
  background: var(--cab-muted-bg);
  color: var(--cab-muted-fg);
}

/* ALE-82 — explicit text priority badge, urgent/high only (see clientTaskCard
   in app.js); the card's border/background tint stays, this just stops
   priority from being color-only. */
body.role-client-manager-cabinet #tab-tasks .cm-task-priority {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 11px;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-priority.urgent {
  background: var(--cab-danger-bg);
  color: var(--cab-danger-fg);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-priority.high {
  background: var(--cab-warning-bg);
  color: var(--cab-warning-fg);
}

/* Next-step callout */
body.role-client-manager-cabinet #tab-tasks .cm-task-next-step {
  background: var(--cab-yellow-soft);
  border-color: rgba(255, 208, 39, .45);
  border-radius: var(--cab-radius-md);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-next-step b {
  color: var(--cab-accent-text);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-next-step span {
  color: var(--cab-ink);
}

/* Actions — main (next-step) vs secondary (Изменить/Отменить) hierarchy.
   Same buttons/data-*/handlers as before; only the two wrapper groups
   (added in clientTaskActionButtons()) get distinct visual weight, so
   Edit/Cancel don't compete with the primary action for attention. */
body.role-client-manager-cabinet #tab-tasks .cm-task-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-actions-main {
  display: flex;
  gap: 8px;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-actions-main .primary {
  flex: 1;
  border-radius: var(--cab-radius-md);
  box-shadow: var(--cab-shadow-cta);
  min-height: 46px;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-actions-secondary {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-actions-secondary .secondary {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  background: transparent;
  box-shadow: none;
  border: none;
  color: var(--cab-muted-2);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-actions-secondary .secondary.danger {
  color: var(--cab-danger-fg);
  background: transparent;
}
body.role-client-manager-cabinet #tab-tasks .cm-task-open,
body.role-client-manager-cabinet #tab-tasks .cm-task-collapse {
  border-radius: var(--cab-radius-md);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-collapse {
  background: var(--cab-canvas);
  color: var(--cab-muted-2);
}

/* Workflow (slot picker) / message draft */
body.role-client-manager-cabinet #tab-tasks .cm-task-workflow {
  background: var(--cab-canvas);
  border-color: var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-message-box {
  background: var(--cab-yellow-soft);
  border-color: rgba(255, 208, 39, .4);
  border-radius: var(--cab-radius-md);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-slot {
  background: var(--cab-surface);
  border-color: var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-slot.selected {
  border-color: var(--cab-yellow);
  background: var(--cab-yellow-soft);
  box-shadow: 0 10px 24px rgba(255, 208, 39, .15);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-notes p,
body.role-client-manager-cabinet #tab-tasks .cm-task-loading {
  background: var(--cab-yellow-soft);
  color: var(--cab-accent-text);
  border-radius: var(--cab-radius-md);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-message-box pre {
  background: var(--cab-surface);
  border-color: var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  color: var(--cab-ink);
}

/* Final note (done/cancelled) */
body.role-client-manager-cabinet #tab-tasks .cm-task-final-note.ok {
  background: var(--cab-success-bg);
  color: var(--cab-success-fg);
}
body.role-client-manager-cabinet #tab-tasks .cm-task-final-note.muted {
  background: var(--cab-muted-bg);
  color: var(--cab-muted-fg);
}

/* ══════════════════════════════════════════════════════════════════════
   ALE-68 — client_manager "Клиенты" (data-tab="cm-clients"). Scoped to
   #tab-cm-clients so every OTHER real caller of these same .ws-conn-*/
   .conn-*/.ws-oc-*/.ws-badge* classes is untouched — none of them are
   client_manager-exclusive: .ws-badge* is shared with the "Мои дети"
   continuation card, .conn-stats-grid/.conn-diag-row with the per-family
   ALE-15 diagnostics list still used inside this same screen's own
   "Диагностика" mode, etc. Data/API/actions/security are unchanged —
   every data-*/id/onclick target below matches the exact same JS
   functions the pre-redesign markup called; only the surrounding HTML/
   CSS changed. Real modes (data-oc-mode, unchanged): connected(default)/
   single/mass/diagnostics — see _wsOcModeToggleHtml/_ocState in app.js.
   ══════════════════════════════════════════════════════════════════════ */

/* Segmented mode toggle — Клиенты/Подключить/Массово/Диагностика, same
   single-track/dark-active-pill language as Задачи's filters. */
body.role-client-manager-cabinet #tab-cm-clients .ws-oc-mode-toggle {
  background: var(--cab-canvas);
  border-radius: var(--cab-radius-pill);
  padding: 4px;
  margin-bottom: 12px;
}
body.role-client-manager-cabinet #tab-cm-clients .ws-oc-mode-btn {
  color: var(--cab-muted-2);
  font-size: 12.5px;
}
body.role-client-manager-cabinet #tab-cm-clients .ws-oc-mode-btn.active {
  background: var(--cab-ink);
  color: #fff;
  box-shadow: none;
}

/* ALE-68 round 2 — source filters ("Все источники"/"Кампания"/"CL-код"/
   "Подключены сегодня" — .ws-subtabs, reused by both the registry's own
   filter row and the Диагностика client-list filter chips below) had
   overflow-x:auto + flex-wrap:nowrap (base rule, shared with every other
   .ws-subtabs caller in the app — untouched there), which clipped/
   horizontal-scrolled the last chip at 390/320px. Same flex-wrap fix
   already used for Задачи's filters — filter logic/data-source semantics
   untouched, only the chip row now wraps to a second line instead of
   scrolling or clipping. */
body.role-client-manager-cabinet #tab-cm-clients .ws-subtabs {
  flex-wrap: wrap;
  overflow-x: visible;
  background: var(--cab-canvas);
  border-radius: var(--cab-radius-md);
  padding: 4px;
  gap: 4px;
}
body.role-client-manager-cabinet #tab-cm-clients .ws-subtab {
  height: auto;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  background: transparent;
  border: none;
  color: var(--cab-muted-2);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-subtab.active {
  background: var(--cab-ink);
  color: #fff;
  border-color: var(--cab-ink);
}

/* "Как это работает?" — collapsed explanatory line (same pattern as
   Задачи's cm-task-help-details), was a permanent 2-line paragraph. */
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-hint-details summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--cab-muted-2);
  padding: 2px 2px 10px;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-hint-details summary::-webkit-details-marker {
  display: none;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-hint-details[open] summary {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-hint-details .ws-conn-hint {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--cab-canvas);
  border-radius: var(--cab-radius-md);
}

/* Section headers shared by connect-flow/campaigns list/diagnostics
   (.ws-queue-head) */
body.role-client-manager-cabinet #tab-cm-clients .ws-queue-head__title {
  color: var(--cab-ink);
  font-size: 17px;
}
body.role-client-manager-cabinet #tab-cm-clients .ws-queue-head__subtitle {
  color: var(--cab-muted);
  font-size: 12.5px;
}
body.role-client-manager-cabinet #tab-cm-clients .ws-queue-head--compact {
  margin-bottom: 10px;
}

/* "Клиенты" (connected registry, default mode) — own compact header +
   flat summary bar, same pattern as Задачи. */
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-list-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-refresh-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cab-canvas);
  color: var(--cab-muted-2);
  border: none;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-refresh-btn svg {
  width: 17px;
  height: 17px;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-summary {
  display: flex;
  /* ALE-68 round 6 — Диагностика's strip carries FIVE metrics now that
     clients and children are two explicit numbers again (ALE-15 invariant,
     owner decision B1). Five cells cannot fit one 320px row, so the strip
     wraps 3+2 instead of clipping the last ones. Same card, same cells,
     same order — the registry's own 3-metric strip still renders as the
     single row it always was (3 × 30% ≤ 100%). */
  flex-wrap: wrap;
  row-gap: 12px;
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  padding: 10px 0;
  margin-bottom: 12px;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-summary-stat {
  flex: 1 1 30%;
  min-width: 0;
  text-align: center;
  padding: 0 6px;
  border-left: 1px solid var(--cab-line-soft);
}
/* first cell of the wrapped second row — no divider on a row start */
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-summary-stat:nth-child(4) {
  border-left: none;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-summary-stat:first-child {
  border-left: none;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-summary-stat b {
  display: block;
  color: var(--cab-ink);
  font-size: 18px;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-summary-stat span {
  color: var(--cab-muted);
  font-size: 11px;
}

/* Registry rows (_connConnectedRowHtml) — progressive disclosure: name +
   one meta line + an optional problem flag + chevron, detail on tap. */
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-lg);
  padding: 12px 14px;
  box-shadow: var(--cab-shadow-card);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-row:active {
  transform: translateY(1px) scale(0.99);
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-row-avatar,
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-card .cm-conn-row-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--cab-radius-md);
  background: var(--cab-yellow-soft);
  color: var(--cab-accent-text);
  font-size: 13px;
  font-weight: 900;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-row-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--cab-ink);
  word-break: break-word;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-row-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--cab-muted);
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-row-flag {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cab-danger-bg);
  color: var(--cab-danger-fg);
  font-size: 13px;
  font-weight: 900;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-row-chevron {
  flex: 0 0 auto;
  color: var(--cab-muted);
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-row-chevron svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* "Подключить" (single-connect search results) — same avatar treatment
   as the registry row, .ws-conn-card's own data-conn-idx/onclick target
   untouched. */
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cab-surface);
  border-color: var(--cab-line-soft);
  border-radius: var(--cab-radius-lg);
  box-shadow: var(--cab-shadow-card);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-card-text {
  flex: 1;
  min-width: 0;
}
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-card-name {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-card-id {
  color: var(--cab-muted);
}

/* Status pills — same semantic mapping (connected/pending/neutral/
   danger/continuation states), re-colored with cab tokens. */
body.role-client-manager-cabinet #tab-cm-clients .ws-badge--neutral {
  background: var(--cab-muted-bg);
  color: var(--cab-muted-fg);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-badge--pending {
  background: var(--cab-warning-bg);
  color: var(--cab-warning-fg);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-badge--connected,
body.role-client-manager-cabinet #tab-cm-clients .ws-badge--continues {
  background: var(--cab-success-bg);
  color: var(--cab-success-fg);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-badge--danger,
body.role-client-manager-cabinet #tab-cm-clients .ws-badge--not_continuing {
  background: var(--cab-danger-bg);
  color: var(--cab-danger-fg);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-badge--undecided,
body.role-client-manager-cabinet #tab-cm-clients .ws-badge--needs_consultation {
  background: var(--cab-warning-bg);
  color: var(--cab-warning-fg);
}

/* Connection detail card (linked/code-created/not-connected) + launch
   summary card (продолжение/availability/оплаты/онбординг) */
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-detail-card,
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-summary-card {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-lg);
  box-shadow: var(--cab-shadow-card);
  padding: 16px;
}
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-detail-name {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-detail-id,
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-note,
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-summary-detail {
  color: var(--cab-muted);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-info-row,
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-summary-label {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-back-btn {
  border-radius: var(--cab-radius-md);
}

/* One-time connection code — a strong, dedicated success state per the
   ALE-68 brief ("сильным отдельным состоянием, с понятной кнопкой
   «Скопировать»"). Expiry/security copy text itself is unchanged. */
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-success-card {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-lg);
  box-shadow: var(--cab-shadow-card);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-success-icon {
  color: var(--cab-success-fg);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-success-title {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-code-display {
  background: var(--cab-yellow-soft);
  border: 1px solid rgba(255, 208, 39, .4);
  border-radius: var(--cab-radius-md);
  color: var(--cab-ink);
  font-size: 26px;
}
body.role-client-manager-cabinet #tab-cm-clients .ws-conn-action-btn {
  border-radius: var(--cab-radius-md);
}

/* "Диагностика" (still explicitly secondary/technical by design — task 7:
   не должна доминировать, ничего удалено, только re-skinned) */
body.role-client-manager-cabinet #tab-cm-clients .conn-stat,
body.role-client-manager-cabinet #tab-cm-clients .conn-source-row,
body.role-client-manager-cabinet #tab-cm-clients .conn-health-row,
body.role-client-manager-cabinet #tab-cm-clients .conn-error-row,
body.role-client-manager-cabinet #tab-cm-clients .conn-diag-row {
  background: var(--cab-surface);
  border-color: var(--cab-line-soft);
}
body.role-client-manager-cabinet #tab-cm-clients .conn-diag-row {
  border-radius: var(--cab-radius-lg);
  box-shadow: var(--cab-shadow-card);
}
body.role-client-manager-cabinet #tab-cm-clients .conn-stat {
  border-radius: var(--cab-radius-md);
}
body.role-client-manager-cabinet #tab-cm-clients .conn-stat-value,
body.role-client-manager-cabinet #tab-cm-clients .conn-section-head,
body.role-client-manager-cabinet #tab-cm-clients .conn-diag-row-name,
body.role-client-manager-cabinet #tab-cm-clients .conn-health-label {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-cm-clients .conn-stat-label,
body.role-client-manager-cabinet #tab-cm-clients .conn-diag-row-children,
body.role-client-manager-cabinet #tab-cm-clients .conn-diag-row-meta,
body.role-client-manager-cabinet #tab-cm-clients .conn-health-detail {
  color: var(--cab-muted);
}

/* "Массово" (campaign list) — cab-card + dark anchor treatment for an
   ACTIVE campaign only (real operational state, not decorative — see
   ALE-68 report's "dark anchor" reasoning). */
body.role-client-manager-cabinet #tab-cm-clients .ws-oc-campaign-card {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-lg);
  box-shadow: var(--cab-shadow-card);
  padding: 16px;
}
body.role-client-manager-cabinet #tab-cm-clients .ws-oc-campaign-name {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-oc-campaign-meta {
  color: var(--cab-muted);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-oc-campaign-stats {
  color: var(--cab-ink);
}

/* Campaign detail — same ALE-66 card/token language as the campaign list,
   data/fields/actions unchanged (11-stat grid still all-real, just
   re-skinned). */
body.role-client-manager-cabinet #tab-cm-clients .card {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-lg);
  box-shadow: var(--cab-shadow-card);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-oc-summary-stat {
  color: var(--cab-muted);
}
body.role-client-manager-cabinet #tab-cm-clients .ws-oc-summary-stat b {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-list-subtitle {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--cab-muted);
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-primary-btn {
  width: 100%;
  margin-bottom: 12px;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-campaign-open {
  width: 100%;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-campaign-secondary {
  margin-top: 2px;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-campaign-warn {
  color: var(--cab-danger-fg);
  font-weight: 700;
}

/* Detail card's "Дополнительные действия" (staff onboarding override) —
   same collapsed-by-default pattern as .cm-conn-hint-details. */
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-more-actions summary {
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cab-muted-2);
  padding: 10px 2px;
  border-top: 1px solid var(--cab-line-soft);
  margin-top: 10px;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-more-actions summary::-webkit-details-marker {
  display: none;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-conn-more-actions[open] summary {
  color: var(--cab-ink);
}

/* "Диагностика" headline summary — the one number that answers "сколько
   клиентов сейчас требуют внимания". */
body.role-client-manager-cabinet #tab-cm-clients .cm-diag-headline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-lg);
  box-shadow: var(--cab-shadow-card);
  padding: 14px 16px;
  margin-bottom: 10px;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-diag-headline-n {
  font-size: 30px;
  font-weight: 900;
  color: var(--cab-ink);
  line-height: 1;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-diag-headline-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--cab-muted);
}

/* "Техническая информация" — everything that used to dominate the
   Диагностика screen (stat grid, source/food/health/errors) is preserved
   verbatim, just collapsed by default (task: не debug dashboard). */
body.role-client-manager-cabinet #tab-cm-clients .cm-diag-technical {
  margin-top: 14px;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-diag-technical summary {
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cab-muted-2);
  padding: 10px 2px;
  border-top: 1px solid var(--cab-line-soft);
}
body.role-client-manager-cabinet #tab-cm-clients .cm-diag-technical summary::-webkit-details-marker {
  display: none;
}
body.role-client-manager-cabinet #tab-cm-clients .cm-diag-technical[open] summary {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-cm-clients .cm-diag-technical-body {
  padding-top: 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   ALE-68 owner correction round 4 — client_manager "Платежи"
   (data-tab="payments-workspace") structural redesign. Scoped to
   #tab-payments-workspace so the exact same screen for owner/admin/
   operations (WORKSPACE_VIEW_ROLES — no shared shell for them; see
   _renderWorkspaceSkeleton's own isCm branch in app.js) keeps the
   original .ws-* look untouched; only client_manager gets the new
   --cab-* visual language + layout below. No JS data/endpoint/action
   changed by any rule here — same real .ws-* classes/markup, just
   restyled/regrouped for this role.
   ══════════════════════════════════════════════════════════════════════ */

/* MODE SWITCH — same real subtabs (Обзор/Требуют внимания/Все платежи/
   Клиенты пилота/Диагностика), wraps instead of horizontal-scrolling off-
   canvas at 390px — same adaptive pattern already used for Клиенты's
   registry filters. */
body.role-client-manager-cabinet #tab-payments-workspace .ws-subtabs {
  flex-wrap: wrap;
  overflow-x: visible;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-subtab {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  color: var(--cab-muted-2);
  font-size: 12.5px;
  padding: 0 13px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-subtab.active {
  background: var(--cab-yellow);
  color: var(--cab-ink);
  border-color: transparent;
}

/* PERIOD — visually collected into one compact card: month-nav + preset
   pills + (optional) custom range, with the muted "Расчётный период" line
   tight underneath. Same _wsPeriodState/_wsPeriodQueryParams logic,
   untouched — layout/visual only. */
body.role-client-manager-cabinet #tab-payments-workspace .ws-period-bar {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  box-shadow: var(--cab-shadow-card);
  padding: 12px;
  margin-bottom: 0;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-period-nav {
  margin-bottom: 10px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-period-nav-btn {
  border: 1px solid var(--cab-line-soft);
  background: var(--cab-canvas);
  color: var(--cab-ink);
  border-radius: 50%;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-period-nav-label {
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-period-quick-toggle {
  flex-wrap: wrap;
  overflow-x: visible;
  background: transparent;
  padding: 0;
  gap: 6px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-period-quick-toggle .ws-oc-mode-btn {
  flex: 1 1 auto;
  min-height: 34px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 8px;
  background: var(--cab-canvas);
  color: var(--cab-muted-2);
  border-radius: var(--cab-radius-pill);
  box-shadow: none;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-period-quick-toggle .ws-oc-mode-btn.active {
  background: var(--cab-yellow);
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-period-summary-label {
  margin: 8px 2px 14px;
  font-size: 12px;
  color: var(--cab-muted);
  font-weight: 600;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-period-outside-notice {
  background: var(--cab-warning-bg);
  color: var(--cab-warning-fg);
  border: 1px solid transparent;
  border-radius: var(--cab-radius-md);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-period-custom {
  border-top: 1px solid var(--cab-line-soft);
  margin-top: 10px;
  padding-top: 10px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-period-custom-field input {
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-pill);
  background: var(--cab-canvas);
  color: var(--cab-ink);
}

/* ATTENTION ANCHOR — the main operational-state card. Dark/strong only
   when there's real work (attention.length > 0); calm success state
   otherwise — see _wsRenderOverviewAnchor in app.js. Same dark-anchor
   pattern as Задачи/Диагностика's own "N requires attention" headline
   elsewhere in this role's shell (--cab-shadow-anchor), not a new one-off. */
body.role-client-manager-cabinet #tab-payments-workspace .ws-anchor {
  border-radius: var(--cab-radius-lg);
  padding: 18px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-anchor--danger {
  background: var(--cab-ink);
  color: #fff;
  box-shadow: var(--cab-shadow-anchor);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-anchor__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cab-yellow);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-anchor__n {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-top: 6px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-anchor__sub {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .68);
  margin-top: 2px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-anchor__cta {
  align-self: flex-start;
  margin-top: 14px;
  padding: 11px 18px;
  border-radius: var(--cab-radius-md);
  background: var(--cab-yellow);
  color: var(--cab-ink);
  font-weight: 800;
  font-size: 13.5px;
  border: none;
  cursor: pointer;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-anchor--success {
  background: var(--cab-success-bg);
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-anchor__success-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--cab-success-fg);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-anchor__success-icon svg { display: block; width: 100%; height: 100%; }
body.role-client-manager-cabinet #tab-payments-workspace .ws-anchor__success-text {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cab-success-fg);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-anchor--skeleton {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
}

/* SUMMARY — 3 primary KPIs, equal weight, compact. SECONDARY — same real
   fields, lower visual weight (status rows, not tiles) — data never
   hidden, per the redesign's "не 6 плиток" brief. */
body.role-client-manager-cabinet #tab-payments-workspace .ws-stats-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 10px;
}
@media (max-width: 359px) {
  body.role-client-manager-cabinet #tab-payments-workspace .ws-stats-grid--3 { grid-template-columns: 1fr 1fr; }
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-stat-card {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  box-shadow: var(--cab-shadow-card);
  min-height: 84px;
  padding: 10px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-stat-label {
  color: var(--cab-muted);
  font-size: 11px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-stat-value {
  color: var(--cab-ink);
  font-size: 19px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-stat-card--pending .ws-stat-card__icon { color: var(--cab-warning-fg); background: var(--cab-warning-bg); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-stat-card--success .ws-stat-card__icon { color: var(--cab-success-fg); background: var(--cab-success-bg); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-stat-card--danger  .ws-stat-card__icon { color: var(--cab-danger-fg);  background: var(--cab-danger-bg); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-stat-card--info    .ws-stat-card__icon { color: var(--cab-info-fg);    background: var(--cab-info-bg); }

body.role-client-manager-cabinet #tab-payments-workspace .ws-secondary-stats {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  overflow: hidden;
  margin: 0 0 16px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-secondary-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cab-surface);
  padding: 10px 12px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-secondary-stat__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--cab-muted);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-secondary-stat__icon svg { display: block; width: 100%; height: 100%; }
body.role-client-manager-cabinet #tab-payments-workspace .ws-secondary-stat__label {
  flex: 1 1 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cab-muted-2);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-secondary-stat__value {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--cab-ink);
  font-variant-numeric: tabular-nums;
}

/* WORK QUEUE / Attention cards — same _wsRenderAttentionItem markup
   everywhere (Обзор preview + full "Требуют внимания" tab). */
body.role-client-manager-cabinet #tab-payments-workspace .ws-queue-head__title { color: var(--cab-ink); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-queue-head__subtitle { color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-queue-count {
  background: var(--cab-yellow);
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-attention-item {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  box-shadow: var(--cab-shadow-card);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-overview-more-btn {
  width: 100%;
  margin-top: 2px;
  background: var(--cab-canvas);
  color: var(--cab-muted-2);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-pill);
  font-weight: 700;
  box-shadow: none;
}

/* ALL PAYMENTS — search/filter toolbar + compact card registry, same
   real fields/actions (progressive disclosure via <details> unchanged). */
body.role-client-manager-cabinet #tab-payments-workspace .ws-search-bar {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  box-shadow: none;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-filter-btn {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  color: var(--cab-ink);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-results-count { color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pi-card {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  box-shadow: var(--cab-shadow-card);
  padding: 12px;
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-pi-name { color: var(--cab-ink); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pi-amount { color: var(--cab-ink); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pi-sub,
body.role-client-manager-cabinet #tab-payments-workspace .ws-pi-meta { color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pi-meta strong { color: var(--cab-ink); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pi-more { border-top-color: var(--cab-line-soft); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pi-more summary { color: var(--cab-muted-2); }

/* STATUS PILLS — same real WS_PI_STATUS_LABELS/WS_STAGE tone mapping
   (success/warning/danger/info/pending/muted), presentation colors only. */
body.role-client-manager-cabinet #tab-payments-workspace .ws-status-badge--muted,
body.role-client-manager-cabinet #tab-payments-workspace .ws-stage-badge-cancelled { background: var(--cab-muted-bg); color: var(--cab-muted-fg); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-status-badge--info { background: var(--cab-info-bg); color: var(--cab-info-fg); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-status-badge--pending { background: var(--cab-warning-bg); color: var(--cab-warning-fg); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-status-badge--warning { background: var(--cab-warning-bg); color: var(--cab-warning-fg); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-status-badge--success { background: var(--cab-success-bg); color: var(--cab-success-fg); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-status-badge--danger { background: var(--cab-danger-bg); color: var(--cab-danger-fg); }
body.role-client-manager-cabinet #tab-payments-workspace [class*="ws-stage-badge-"] { background: var(--cab-warning-bg); color: var(--cab-warning-fg); border-radius: var(--cab-radius-pill); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-stage-badge-error { background: var(--cab-danger-bg); color: var(--cab-danger-fg); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-stage-badge-published { background: var(--cab-success-bg); color: var(--cab-success-fg); }

/* PILOT — kept as its own mode (not merged into payment cards), same
   design language as everything above. Long technical hint text
   (.ws-pilot-card-hint) stays secondary, never the main block. */
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-card {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  box-shadow: var(--cab-shadow-card);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-card-id { color: var(--cab-ink); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-card-hint { color: var(--cab-muted); font-size: 11.5px; }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-row-label { color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-add-form {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  box-shadow: var(--cab-shadow-card);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-form label { color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-form input,
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-form select {
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  color: var(--cab-ink);
  background: var(--cab-canvas);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-mode-hint { color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-mode-badge.ws-pilot-mode-review { background: var(--cab-warning-bg); color: var(--cab-warning-fg); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-mode-badge.ws-pilot-mode-auto { background: var(--cab-success-bg); color: var(--cab-success-fg); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-mode-badge.ws-pilot-mode-observe { background: var(--cab-info-bg); color: var(--cab-info-fg); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-pilot-mode-badge.ws-pilot-mode-disabled { background: var(--cab-muted-bg); color: var(--cab-muted-fg); }

/* EMPTY / ERROR states — same generic .ws-empty-state/.ws-error-state
   used across every mode. */
body.role-client-manager-cabinet #tab-payments-workspace .ws-empty-state-title,
body.role-client-manager-cabinet #tab-payments-workspace .ws-empty-state-desc { color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-payments-workspace .ws-error-state {
  background: var(--cab-danger-bg);
}
body.role-client-manager-cabinet #tab-payments-workspace .ws-error-state-title,
body.role-client-manager-cabinet #tab-payments-workspace .ws-error-state-desc { color: var(--cab-danger-fg); }

/* ══════════════════════════════════════════════════════════════════════
   ALE-68 round 5 — client_manager "Рассылки" (data-tab="comms")
   structural redesign. Scoped to #tab-comms so the exact same screen for
   owner/admin (CLIENT_COMMUNICATIONS_ROLES, reached via the Admin panel's
   comms-admin-entry-card — no shared shell for them; see _commsRenderHome/
   renderCommsDisabled's own isCm branch in app.js) keeps the original
   look untouched. No JS data/endpoint/action changed by any rule here —
   same real .comms-*/.card/.pill/.notice markup, just restyled.
   ══════════════════════════════════════════════════════════════════════ */
body.role-client-manager-cabinet #tab-comms .card {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  box-shadow: var(--cab-shadow-card);
}
body.role-client-manager-cabinet #tab-comms .notice {
  background: var(--cab-canvas);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  color: var(--cab-muted-2);
}

/* INFO card — real send-safe-mode flag (communicationsSendEnabled), no
   fabricated "pilot recipients" concept (audit found no such recipient-
   side restriction — see _commsInfoCardHtml's own comment in app.js). */
body.role-client-manager-cabinet #tab-comms .comms-info-card {
  background: var(--cab-warning-bg);
  border-color: transparent;
  padding: 12px 14px;
  margin-bottom: 12px;
}
body.role-client-manager-cabinet #tab-comms .comms-info-card__title {
  font-size: 12px;
  font-weight: 800;
  color: var(--cab-warning-fg);
}
body.role-client-manager-cabinet #tab-comms .comms-info-card__text {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--cab-accent-text);
  line-height: 1.4;
}

/* EMPTY (all-sections-empty state, reuses the same .ws-empty-state
   component the Payments/Клиенты redesigns already use). */
body.role-client-manager-cabinet #tab-comms .ws-empty-state-title,
body.role-client-manager-cabinet #tab-comms .ws-empty-state-desc { color: var(--cab-muted); }

/* CAMPAIGN LIST */
body.role-client-manager-cabinet #tab-comms .comms-section-title { color: var(--cab-ink); font-size: 15px; font-weight: 800; }
body.role-client-manager-cabinet #tab-comms .comms-section-empty { padding: 12px 14px; font-size: 12.5px; }
body.role-client-manager-cabinet #tab-comms .comms-campaign-title-wrap strong { color: var(--cab-ink); }
body.role-client-manager-cabinet #tab-comms .comms-campaign-meta { color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-comms .comms-campaign-action {
  background: var(--cab-canvas);
  color: var(--cab-muted-2);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-pill);
  font-weight: 700;
  font-size: 12.5px;
}
/* STATUS PILLS — same real .pill/cls mapping (draft="" scheduled="warn"
   sending="warn" sent="ok" partial="warn" failed="bad" cancelled="bad"),
   presentation colors only. */
body.role-client-manager-cabinet #tab-comms .pill {
  border-radius: var(--cab-radius-pill);
  font-weight: 700;
  background: var(--cab-muted-bg);
  color: var(--cab-muted-fg);
}
body.role-client-manager-cabinet #tab-comms .pill.ok { background: var(--cab-success-bg); color: var(--cab-success-fg); }
body.role-client-manager-cabinet #tab-comms .pill.warn { background: var(--cab-warning-bg); color: var(--cab-warning-fg); }
body.role-client-manager-cabinet #tab-comms .pill.bad { background: var(--cab-danger-bg); color: var(--cab-danger-fg); }

/* CREATE/EDIT WIZARD */
body.role-client-manager-cabinet #tab-comms .comms-wizard-title { color: var(--cab-ink); }
body.role-client-manager-cabinet #tab-comms .comms-stepper-seg { background: var(--cab-line-soft); }
body.role-client-manager-cabinet #tab-comms .comms-stepper-seg.is-filled { background: var(--cab-yellow); }
body.role-client-manager-cabinet #tab-comms .comms-stepper-label { color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-comms .comms-audience-option {
  background: var(--cab-surface);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  padding: 12px;
  margin-bottom: 8px;
}
body.role-client-manager-cabinet #tab-comms .comms-audience-option-desc { color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-comms .comms-lookup-card { background: var(--cab-canvas); }
body.role-client-manager-cabinet #tab-comms .comms-lookup-card-sub { color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-comms .comms-recipient-banner { background: var(--cab-warning-bg); }
body.role-client-manager-cabinet #tab-comms .comms-recipient-count-label,
body.role-client-manager-cabinet #tab-comms .comms-recipient-count-note { color: var(--cab-accent-text); }
body.role-client-manager-cabinet #tab-comms .comms-recipient-count-value { color: var(--cab-ink); }
body.role-client-manager-cabinet #tab-comms .comms-channel-desc { color: var(--cab-muted); }
/* Message preview — plain surface, "how the client sees it", no fake
   Telegram chrome (per the redesign brief). */
body.role-client-manager-cabinet #tab-comms .comms-preview-card > strong { font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-comms .comms-preview-bubble {
  background: var(--cab-canvas);
  border: 1px dashed var(--cab-line-soft);
}
body.role-client-manager-cabinet #tab-comms .comms-preview-title { color: var(--cab-ink); }
body.role-client-manager-cabinet #tab-comms .comms-preview-body { color: var(--cab-muted-2); }

/* CONFIRM SHEET */
body.role-client-manager-cabinet #tab-comms .comms-confirm-warning,
body.role-client-manager-cabinet #tab-comms .comms-review-warning {
  background: var(--cab-warning-bg);
  color: var(--cab-warning-fg);
  border-radius: var(--cab-radius-md);
  padding: 10px 12px;
}
body.role-client-manager-cabinet #tab-comms .comms-confirm-section { border-top-color: var(--cab-line-soft); }
body.role-client-manager-cabinet #tab-comms .comms-confirm-label { color: var(--cab-muted); }
body.role-client-manager-cabinet #tab-comms .comms-confirm-value,
body.role-client-manager-cabinet #tab-comms .comms-confirm-count,
body.role-client-manager-cabinet #tab-comms .comms-confirm-title-line { color: var(--cab-ink); }
body.role-client-manager-cabinet #tab-comms .comms-confirm-excluded,
body.role-client-manager-cabinet #tab-comms .comms-confirm-calculated,
body.role-client-manager-cabinet #tab-comms .comms-confirm-body-line,
body.role-client-manager-cabinet #tab-comms .comms-confirm-action-line,
body.role-client-manager-cabinet #tab-comms .comms-confirm-note { color: var(--cab-muted-2); }
body.role-client-manager-cabinet #tab-comms .comms-confirm-outcome-title { color: var(--cab-ink); }
body.role-client-manager-cabinet #tab-comms .comms-confirm-outcome-text { color: var(--cab-muted-2); }
body.role-client-manager-cabinet #tab-comms .comms-confirm-outcome-success .comms-confirm-outcome-title { color: var(--cab-success-fg); }

/* RESULT / DETAIL */
body.role-client-manager-cabinet #tab-comms .comms-result-line { color: var(--cab-muted-2); }
body.role-client-manager-cabinet #tab-comms .comms-result-error { color: var(--cab-danger-fg); }

/* ALE-66 Stage 2 — generic .primary/.secondary buttons are shared with
   staff/admin (base rules elsewhere, untouched), so the brand-yellow CTA
   and neutral-secondary look used across Мои дети/Оплаты/Уведомления
   (link-by-code, continuation, "Показать ещё", notification action
   button) is scoped here rather than touching the shared base. */
body.role-parent-cabinet .primary {
  background: var(--cab-yellow);
  color: var(--cab-ink);
  border: none;
  border-radius: var(--cab-radius-md);
  padding: 13px 18px;
  font-weight: 800;
  box-shadow: var(--cab-shadow-cta);
}
body.role-parent-cabinet .secondary {
  background: var(--cab-canvas);
  color: var(--cab-muted-2);
  border: 1px solid var(--cab-line-soft);
  border-radius: var(--cab-radius-md);
  padding: 13px 18px;
  font-weight: 700;
  box-shadow: none;
}

/* ---- "Ближайшее занятие" — the one dark anchor card on Главная ----
   ALE-12's states/behavior (loading/success/empty/error/partial, click-
   always-navigates, retry-stops-propagation) are untouched in app.js —
   this is a pure re-skin of the same #cabScheduleCard markup. */
body.role-parent-cabinet #cabScheduleCard {
  background: var(--cab-ink);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--cab-shadow-anchor);
}
body.role-parent-cabinet #cabScheduleCard .cab-card-eyebrow { color: var(--cab-yellow); }
body.role-parent-cabinet #cabScheduleCard .cab-card-amount { color: #fff; }
/* ALE-66 visual polish — exact prototype value (rgba(255,255,255,.66) on
   the schedule anchor's meta line), was .7. */
body.role-parent-cabinet #cabScheduleCard .cab-card-desc { color: rgba(255, 255, 255, .66); }
body.role-parent-cabinet #cabScheduleCard .cab-card-link {
  color: var(--cab-ink);
  background: var(--cab-yellow);
  padding: 9px 16px;
  border-radius: 14px;
  margin-top: 12px;
  font-weight: 800;
}
/* ALE-66 visual polish — exact prototype badge value (rgba(255,208,39,.16)
   for the "Скоро" pill on the dark anchor card), was .18. */
body.role-parent-cabinet #cabScheduleCard .cab-badge--info,
body.role-parent-cabinet #cabScheduleCard .cab-badge--warning { background: rgba(255, 208, 39, .16); color: var(--cab-yellow); }
body.role-parent-cabinet #cabScheduleCard .cab-badge--muted { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .78); }

/* ---- Bottom nav: full-width flush bar for the client cabinet only ----
   Scoped under body.role-parent-cabinet (set in setupRoleUi() only when
   role === "parent") so the 12-tab staff nav keeps its original
   floating-pill/translucent look untouched. ALE-66 Stage 1b — the design
   reference's nav is a plain white bar flush to the screen edges (no
   floating pill, no side margins, no elevation shadow), replacing the
   base .tabs.bottom-tabbar's position:fixed/left:50%/width:min(560px,…)/
   border-radius:24px/box-shadow geometry entirely for this role. Still a
   single rule for this selector (a regression test elsewhere asserts
   there is exactly one such block for this exact nav) — the new geometry
   lives inside the same block below, not a second override. */
body.role-parent-cabinet .tabs.bottom-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: auto;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 9px 6px calc(9px + env(safe-area-inset-bottom));
  border: none;
  border-top: 1px solid var(--cab-line, rgba(23, 21, 15, .07));
  border-radius: 0;
  background: var(--cab-surface, #fff);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* v7.1.13 round 2 — the global staff-oriented .topbar ("Оплаты · Yellow
   Club" etc.) doesn't belong in the client cabinet at all: Главная has its
   own rich ClientHeader (.cab-header, rendered inside the tab content),
   and every other cabinet tab has its own .section-head — exactly like the
   approved prototype (no shared outer app-level title bar). Hiding the
   whole element, rather than trying to keep a shared #appTitle node in
   sync across every tab switch, is what actually guarantees it can never
   show a stale previous-tab title again. */
body.role-parent-cabinet .topbar { display: none; }

/* v7.1.13 round 2 — client-only bottom nav, matches approved
   client-cabinet-v7113: no dark pill on the active tab (unlike staff nav),
   just a yellow icon-circle + dark ink icon/label. Scoped strictly under
   body.role-parent-cabinet so none of this touches the shared staff/
   kitchen/admin nav rules above (.tab.active, .tabs.bottom-tabbar .tab.active
   etc.) — those are untouched, and this block wins on both specificity
   (extra body.role-parent-cabinet ancestor) and source order (appended
   last). Icons themselves are swapped from emoji to inline monochrome SVG
   at runtime for client-visible buttons only (see _applyCabinetNavIcons in
   app.js) — the underlying <span class="tab-icon"> markup is shared with
   staff, so staff never sees this run. */
body.role-parent-cabinet .tabs.bottom-tabbar .tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: unset;
  padding: 5px 2px;
  color: #8a8f9c;
  font-weight: 650;
}
body.role-parent-cabinet .tabs.bottom-tabbar .tab-icon {
  width: 40px;
  height: 28px;
  background: transparent;
  color: inherit;
  border-radius: 14px;
  transition: background 140ms ease, color 140ms ease;
}
body.role-parent-cabinet .tabs.bottom-tabbar .tab-icon svg {
  width: 19px;
  height: 19px;
  display: block;
}
body.role-parent-cabinet .tabs.bottom-tabbar .tab.active {
  background: transparent;
  color: var(--cab-ink, #17150f);
  font-weight: 800;
  box-shadow: none;
  transform: none;
}
body.role-parent-cabinet .tabs.bottom-tabbar .tab.active .tab-icon {
  background: var(--cab-yellow, #ffd027);
  color: var(--cab-ink, #17150f);
}
body.role-parent-cabinet .tabs.bottom-tabbar .tab:active {
  transform: translateY(1px) scale(0.98);
}
/* v7.1.13 visual polish round 2 — removed the previous dark-mode navy
   override (#171c2b) for this nav: it was the actual root cause of the
   "heavy dark navy panel" feedback (system/Telegram dark theme triggered
   it even though the rest of the cabinet — and the approved prototype,
   which has no dark variant — stays light). The client cabinet nav is now
   unconditionally light/opaque (var(--card, #fff), set above), matching
   "светлый полностью непрозрачный фон" regardless of system theme. Staff
   nav is untouched either way — these rules are role-parent-cabinet only. */

/* ══════════════════════════════════════════════════════════════════════
   ALE-68 — client_manager bottom nav rebuilt to the SAME edge-to-edge
   layout as role-parent-cabinet above (full-width flex bar, fixed to the
   real viewport edges, safe-area padding, icon-circle turning yellow on
   the active tab) — not just the same colors (ALE-39's partial re-skin,
   replaced here). Only 5 real .tab buttons are visible at a time now
   (Задачи/Клиенты/Платежи/Расписание/Ещё — see `order` below and
   .cm-in-more further down), so this finally reads as "5 equal items"
   instead of the old 9-icon floating pill. Separate selector from
   role-parent-cabinet (not widening its list) — client_manager keeps its
   own .topbar-hidden/per-tab-header shell, same reasoning as before.
   ══════════════════════════════════════════════════════════════════════ */
body.role-client-manager-cabinet .tabs.bottom-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: auto;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 9px 6px calc(9px + env(safe-area-inset-bottom));
  border: none;
  border-top: 1px solid var(--cab-line, rgba(23, 21, 15, .07));
  border-radius: 0;
  background: var(--card, #fff);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: unset;
  padding: 5px 2px;
  color: #8a8f9c;
  font-weight: 650;
}
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab-icon {
  width: 40px;
  height: 28px;
  background: transparent;
  color: inherit;
  border-radius: 14px;
  transition: background 140ms ease, color 140ms ease;
}
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab-icon svg {
  width: 19px;
  height: 19px;
  display: block;
}
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab.active {
  background: transparent;
  color: var(--ink, #111);
  font-weight: 800;
  box-shadow: none;
  transform: none;
}
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab.active .tab-icon {
  background: var(--yellow, #ffcb1f);
  color: var(--ink, #111);
}
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab:active {
  transform: translateY(1px) scale(0.98);
}
/* ALE-68 — owner-reported blue/cyan rectangle around the active bottom-nav
   cell: not a devtools artifact, confirmed via computed style that no rule
   here overrides the browser/WebView UA default tap-highlight/focus ring
   for these <button> elements, so real touch devices paint their own
   default highlight over the whole tab cell. Reset it explicitly so the
   only visible active-state is the yellow icon-circle above. */
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab {
  -webkit-tap-highlight-color: transparent;
}
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab:focus {
  outline: none;
  box-shadow: none;
}
/* ...but keyboard focus keeps a real, visible indicator (a11y): drawn on the
   .tab-icon pill — the tab's own meaningful visual element — instead of the
   full-width cell, and in the cabinet's ink token instead of the browser's
   default blue. Ink holds contrast both on the white bar (inactive tabs) and
   around the yellow circle of the active one; outline-offset leaves a clean
   card-coloured gap so it never reads as a second background. */
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab:focus-visible {
  outline: none;
}
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab:focus-visible .tab-icon {
  outline: 2px solid var(--ink, #111);
  outline-offset: 2px;
}

/* Visual order (DOM order itself is untouched — shared with other roles
   whose own fallback tab-selection logic depends on it — see the ALE-68
   report's item 1 for why `order` was chosen over physically moving
   these shared <button> elements). */
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab[data-tab="tasks"] { order: 1; }
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab[data-tab="cm-clients"] { order: 2; }
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab[data-tab="payments-workspace"] { order: 3; }
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab[data-tab="schedule-foundation"] { order: 4; }
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab[data-tab="cm-more"] { order: 5; }

/* Окна/Отчёты/Рассылки/Помощь/Чат moved out of the main bar — see
   CM_MOVED_TO_MORE_TABS/_cmApplyNavLayout in app.js, which toggles this
   class (not `.hidden`) so each tab's real permission state stays
   independently readable for renderCmMore(). */
body.role-client-manager-cabinet .tabs.bottom-tabbar .tab.cm-in-more {
  display: none;
}

/* ALE-68 — narrow-viewport fix: "Расписание" (10 chars, the longest of
   the 5 main labels) was getting ellipsis-truncated at 320px under the
   390px-tuned icon/padding sizing above. Scoped to client_manager's own
   nav only (390/430 untouched — this block never applies above 360px),
   just the properties the owner explicitly allowed: icon-circle size,
   padding, label font-size/letter-spacing. Still a real, readable label
   at every one of the 5 tabs, not shrunk to illegibility. */
@media (max-width: 360px) {
  body.role-client-manager-cabinet .tabs.bottom-tabbar {
    padding: 8px 3px calc(8px + env(safe-area-inset-bottom));
  }
  body.role-client-manager-cabinet .tabs.bottom-tabbar .tab {
    padding: 4px 0;
  }
  body.role-client-manager-cabinet .tabs.bottom-tabbar .tab-icon {
    width: 32px;
    height: 24px;
    border-radius: 12px;
  }
  body.role-client-manager-cabinet .tabs.bottom-tabbar .tab-icon svg {
    width: 16px;
    height: 16px;
  }
  body.role-client-manager-cabinet .tabs.bottom-tabbar .tab-label {
    font-size: 9px;
    letter-spacing: -.01em;
  }
}

/* "Ещё" screen (renderCmMore) — same cab-header--sub the rest of the
   cabinet uses, plus a clean row list. */
body.role-client-manager-cabinet #tab-cm-more .cm-more-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.role-client-manager-cabinet #tab-cm-more .cm-more-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--cab-surface, #fff);
  border: 1px solid var(--cab-line-soft, rgba(23, 21, 15, .06));
  border-radius: var(--cab-radius-lg, 26px);
  padding: 14px 16px;
  box-shadow: var(--cab-shadow-card, 0 2px 10px rgba(23, 21, 15, .04));
  text-align: left;
  font: inherit;
  cursor: pointer;
}
body.role-client-manager-cabinet #tab-cm-more .cm-more-row:active {
  transform: translateY(1px) scale(0.99);
}
body.role-client-manager-cabinet #tab-cm-more .cm-more-row-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--cab-radius-md, 16px);
  background: var(--cab-canvas, #f4f1ea);
  color: var(--cab-ink, #17150f);
}
body.role-client-manager-cabinet #tab-cm-more .cm-more-row-icon svg {
  width: 20px;
  height: 20px;
}
body.role-client-manager-cabinet #tab-cm-more .cm-more-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.role-client-manager-cabinet #tab-cm-more .cm-more-row-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--cab-ink, #17150f);
}
body.role-client-manager-cabinet #tab-cm-more .cm-more-row-subtitle {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cab-muted, #8c8878);
}
body.role-client-manager-cabinet #tab-cm-more .cm-more-row-chevron {
  flex: 0 0 auto;
  color: var(--cab-muted, #8c8878);
}
body.role-client-manager-cabinet #tab-cm-more .cm-more-row-chevron svg {
  width: 18px;
  height: 18px;
  display: block;
}

.tab-badge {
  position: absolute;
  top: 2px;
  right: 14px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #d84c4c;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.tab { position: relative; }

.cabinet-panel { padding-bottom: 8px; }

/* ---- Client header (Главная) ---- */
/* v7.1.13 visual polish pass — premium header, faithful to the approved
   figma-yellow-club client-cabinet-v7113 prototype: no boxed/gradient card
   around the header itself (that reads as a banner/ad block, explicitly
   ruled out) — the premium feel comes from the yellow avatar circle and
   the floating white icon-buttons (soft shadow, thin border) against the
   plain page background. Shared .cab-icon-btn is reused by the header
   bell AND the availability screen's back button, so both surfaces read
   as one consistent "premium accent control" language. */
/* v7.1.13 visual polish round 2 — the header is now a real branded
   card-surface (soft cream-to-yellow gradient, thin yellow-tinted border,
   gentle shadow), not typography floating on the plain page background —
   this is what actually reads as a "premium brand zone" at a glance,
   per direct visual feedback that the previous no-card version felt too
   plain. Kept deliberately soft (low-opacity gradient stops, thin border,
   diffuse shadow) so it stays "premium quiet", not a loud banner. */
.cab-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
  padding: 15px 16px;
  border-radius: 26px;
  background: linear-gradient(160deg, #fffdf5 0%, var(--cab-yellow-soft, #fff6d6) 100%);
  border: 1px solid rgba(255, 208, 39, .35);
  box-shadow: 0 10px 26px rgba(255, 208, 39, .16), 0 1px 3px rgba(23, 21, 15, .05);
}
/* .cab-header-avatar is still used by the profile card (renderClientProfile);
   .cab-header-identity/-eyebrow/-title/-child were only used by the old
   home-mode header markup and were removed with it (ALE-66 Stage 1b — see
   .cab-appbar/.cab-greeting below). */
.cab-header-avatar {
  flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--cab-yellow, #ffd027); color: var(--cab-ink, #17150f); font-weight: 800; font-size: 16px;
}
.cab-header-text { min-width: 0; }

.cab-icon-btn {
  position: relative; flex: 0 0 auto; width: 43px; height: 43px; display: grid; place-items: center;
  border: 1px solid var(--cab-line, #edf0f5); border-radius: 16px; background: var(--cab-surface, #fff);
  color: var(--cab-ink, #111); cursor: pointer;
  box-shadow: 0 4px 14px rgba(23, 21, 15, .08);
  transition: transform 120ms ease;
}
.cab-icon-btn:active { transform: translateY(1px) scale(.97); }
.cab-icon-btn svg { width: 20px; height: 20px; display: block; }

.cab-header-bell-dot {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--cab-danger-fg, #b0453a); color: #fff; font-size: 10px; font-weight: 800; border: 2px solid var(--cab-surface, #fff);
}

/* ---- App bar + greeting (Главная only) ----
   ALE-66 Stage 1b — replaces the old single yellow header-card. Plain,
   un-cardened app bar (static YC brand mark, no per-user data) plus a
   real greeting block below it, matching the design reference's two-part
   composition. Bare selectors (no body.role-parent-cabinet prefix) —
   same reasoning as .cab-header/.cab-card etc.: this markup is also
   reused by _cabRenderFoodHeader's food-only landing header, which never
   gets the role-parent-cabinet body class, so the var() fallbacks below
   are what food-only actually renders with (the pre-ALE-66-equivalent
   look), while parent-cabinet gets the full token set. */
.cab-appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 14px; }
.cab-appbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cab-appbar-logo {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 12px; display: grid; place-items: center;
  background: var(--cab-yellow, #ffcb1f); color: var(--cab-ink, #111); font-size: 12px; font-weight: 900;
}
.cab-appbar-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cab-appbar-title { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-appbar-subtitle { font-size: 11.5px; font-weight: 600; color: var(--cab-muted, #8c8878); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cab-greeting { margin-bottom: 12px; }
.cab-greeting-date { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--cab-muted, #8c8878); }
.cab-greeting-title { margin: 2px 0 0; font-size: 24px; font-weight: 900; letter-spacing: -0.7px; line-height: 1.15; }
.cab-greeting-sub { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--cab-muted-2, #7b8190); }

/* Sub-page header (Оплаты/Уведомления/Ещё/Профиль/Availability): title +
   optional subtitle only — no eyebrow/avatar/bell, matching the approved
   SubpageHeader (repeating the brand wordmark on every screen would read
   as clutter, not premium — confirmed against the design reference). */
/* Subpage variant: same branded surface language, deliberately more
   compact (less vertical padding, no avatar/eyebrow row) so it reads as
   "the same family, a smaller sibling" rather than a full duplicate of
   the Home header. */
.cab-header--sub { align-items: center; gap: 10px; padding: 13px 15px; margin-bottom: 16px; }
.cab-header-sub-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; color: var(--cab-ink, #111); }
.cab-header-sub-desc { margin: 3px 0 0; font-size: 13px; color: var(--cab-muted, #8c8878); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-header-back { margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════════════
   ALE-66 Stage 2 — client-cabinet-only subpage header. Design reference:
   Мои дети/Оплаты/Уведомления/Ещё are plain headings directly on canvas
   (24/900 title + muted subtitle, no card/gradient) — the prototype's
   phone-chrome white bar is Telegram's own system top area in the real
   app, not something to imitate. Detail screens (Уведомление) reuse the
   exact same plain style, just with a leading back button — "единый
   subpage header", per the task.

   Scoped to body.role-parent-cabinet ONLY: .cab-header/.cab-header--sub
   markup is shared with client_manager's own tab-reports/comms headers
   (ALE-39), which must stay on the original card/gradient look — this
   round doesn't touch client_manager. Placed AFTER the base rules above
   (not a duplicate earlier in the file) so any existing test that does a
   bare `.find(".cab-header--sub {")`-style lookup still matches the
   original, client_manager-serving rule first — same lesson learned from
   ALE-66 Stage 1's own collision bug, applied proactively here. */
body.role-parent-cabinet .cab-header {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 2px 2px 14px;
  margin-bottom: 4px;
}
body.role-parent-cabinet .cab-header--sub { padding: 2px 2px 16px; }
body.role-parent-cabinet .cab-header-sub-title { font-size: 24px; font-weight: 900; letter-spacing: -0.7px; line-height: 1.15; }
body.role-parent-cabinet .cab-header-sub-desc { font-size: 12.5px; font-weight: 600; }

/* ALE-66 — "Прочитать все" pill in the Уведомления header, right-aligned
   by the existing .cab-header justify-content:space-between (no new flex
   rule needed). Hidden via the shared .hidden utility when there is
   nothing unread — see renderClientNotifications in app.js. */
.cab-notif-mark-all-btn {
  flex: 0 0 auto; padding: 8px 12px; border-radius: var(--cab-radius-pill, 999px);
  background: var(--cab-surface, #fff); border: 1px solid var(--cab-line, rgba(23, 21, 15, .08));
  color: var(--cab-muted-2, #57534a); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.cab-notif-mark-all-btn:disabled { opacity: .6; cursor: default; }

/* ---- Child switcher ---- */
.cab-switcher { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cab-switcher::-webkit-scrollbar { display: none; }
/* v7.1.13 round 2 — explicit, bulletproof colors (never inherited) so
   this can never pick up an unrelated accent color: white/neutral when
   inactive, solid dark-ink when active — the only two states that exist.
   ALE-66 — active-chip color switched from solid yellow/#6f5200 text to
   solid ink/white text (design reference: the active child chip is a
   dark "ink" pill, yellow is reserved for the avatar/CTA accent only). */
.cab-switch-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 180px;
  height: 36px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--cab-line, #edf0f5);
  background: var(--cab-surface, #fff);
  color: var(--cab-muted-2, #57534a);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cab-switch-chip-avatar {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  background: var(--cab-canvas, #f4f1ea); color: var(--cab-ink, #17150f); font-size: 10.5px; font-weight: 900; font-style: normal;
}
.cab-switch-chip-name { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.cab-switch-chip.active {
  border-color: transparent;
  background: var(--cab-ink, #17150f);
  color: #fff;
}
.cab-switch-chip.active .cab-switch-chip-avatar { background: var(--cab-yellow, #ffd027); color: var(--cab-ink, #17150f); }
/* "+ Добавить" — dashed, no avatar/name markup (different children), just
   the label; navigates to the real "Мои дети" add-by-code flow. */
.cab-switch-chip--add {
  border-style: dashed;
  border-color: var(--cab-line, rgba(23, 21, 15, .18));
  background: var(--cab-surface, #fff);
  color: var(--cab-muted, #8c8878);
  padding: 0 14px;
}

/* ---- Status summary card (Главная only) ----
   Presentation-only aggregation of already-loaded Home state — see
   _cabStatusSummaryHtml/_cabHeadline in app.js. */
.cab-status-summary { display: flex; align-items: center; gap: 12px; border-radius: 24px; padding: 15px 16px; margin-bottom: 2px; }
.cab-status-summary--ok { background: var(--cab-success-bg, #e4f3eb); }
.cab-status-summary--warn { background: var(--cab-warning-bg, #fff6d6); }
.cab-status-summary-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 15px;
}
.cab-status-summary--ok .cab-status-summary-icon { background: var(--cab-success-fg, #1f6b4c); }
.cab-status-summary--warn .cab-status-summary-icon { background: var(--cab-warning-fg, #a2670a); }
.cab-status-summary-text { margin: 0; flex: 1; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.cab-status-summary--ok .cab-status-summary-text { color: var(--cab-success-fg, #1f6b4c); }
.cab-status-summary--warn .cab-status-summary-text { color: var(--cab-warning-fg, #a2670a); }

/* ---- ALE-97 — Home "important" announcement card (Главная only) ----
   Non-dismissible, family-level, rendered once per Home render (see
   _cabAnnouncementHtml in app.js). Reuses the same light cream-yellow
   token already used for .cab-card--accent (--cab-yellow-soft) — calm,
   on-brand, never the red/error palette. */
.cab-announce {
  background: var(--cab-yellow-soft, #fff6d6);
  border-radius: var(--cab-radius-lg, 26px);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.cab-announce-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cab-announce-icon { font-size: 18px; line-height: 1; }
.cab-announce-chip {
  display: inline-flex; align-items: center;
  background: var(--cab-yellow, #ffd027); color: var(--cab-ink, #17150f);
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.cab-announce-headline { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--cab-ink, #17150f); line-height: 1.35; }
.cab-announce-text { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--cab-accent-text, #7a6634); line-height: 1.45; }

/* ---- Home module cards ---- */
.cab-card-grid { display: flex; flex-direction: column; gap: 10px; }
.cab-card {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 18px; border: 1px solid var(--cab-line-soft, #edf0f5); border-radius: 26px;
  background: var(--cab-surface, #fff); box-shadow: var(--cab-shadow-card, 0 8px 24px rgba(0,0,0,.06));
}
.cab-card--clickable { cursor: pointer; }
.cab-card--clickable:active { transform: scale(0.99); }
/* ALE-66 visual polish — the prototype's "ПРОДОЛЖЕНИЕ ОБУЧЕНИЯ" tinted
   card is a SOLID Yellow Soft background, not a gradient fade to white;
   the previous linear-gradient here was an invented effect with no
   prototype source. */
.cab-card--accent { background: var(--cab-yellow-soft, #fff6d6); }
.cab-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cab-card-title { font-size: 14.5px; font-weight: 800; }
/* Small-caps label used by schedule/payment/availability (design
   reference: "БЛИЖАЙШЕЕ ЗАНЯТИЕ"/"К ОПЛАТЕ"/"ПРОДОЛЖЕНИЕ ОБУЧЕНИЯ") — a
   pure CSS text-transform, the underlying string is unchanged real copy.
   ALE-66 visual polish — the prototype's own "К ОПЛАТЕ" label (on a plain
   white card) is the NEUTRAL --cab-muted color, not the warning/orange
   tone; --cab-warning-fg is reserved for the label's on-Yellow-Soft
   variant below ("ПРОДОЛЖЕНИЕ ОБУЧЕНИЯ", which really is orange in the
   prototype, on that specific tinted background). */
.cab-card-eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cab-muted, #8c8878); }
.cab-card--accent .cab-card-eyebrow { color: var(--cab-warning-fg, #a2670a); }
.cab-card-amount { margin: 8px 0 0; font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.cab-card-desc { margin: 6px 0 0; font-size: 12.5px; color: var(--cab-muted, #7b8190); line-height: 1.4; }
/* Prototype's supporting text on the Yellow-Soft tinted card uses a
   distinct on-yellow muted-brown, not the plain white-card muted gray. */
.cab-card--accent .cab-card-desc { color: var(--cab-accent-text, #7a6634); }
.cab-card-meta { margin: 4px 0 0; font-size: 11px; color: #9aa2b4; }
/* ALE-66 visual polish — plain secondary text-link (e.g. "Изменить",
   "Все уведомления") is neutral, matching the prototype's secondary-
   action text color; --cab-warning-fg is status/eyebrow-only now. The
   yellow-pill .cab-card-link--cta variant below is unaffected. */
.cab-card-link { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 750; color: var(--cab-muted-2, #57534a); }
/* ALE-12 mobile acceptance fix — .cab-card-link is a real <button> for the
   nearest-lesson card's retry action (needs its own click target nested
   inside the card's div, see app.js); strip native button chrome so it
   still reads as the same text-link as the span-based usage elsewhere. */
button.cab-card-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
/* ALE-66 Stage 1 — "needs action" CTA variant: a real yellow pill,
   reserved for cards that have something actionable right now (payment
   due, availability not filled). Presentation-only — it lives inside the
   same clickable card button as .cab-card-link, so it never adds a
   second click target or a new handler. Placed after .cab-card-link (not
   in the ALE-66 token block above) so it reliably wins on source order
   for elements carrying both classes. */
.cab-card-link--cta {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--cab-yellow, #ffd027);
  color: var(--cab-ink, #17150f);
  font-weight: 800;
  font-size: 13px;
  box-shadow: var(--cab-shadow-cta, 0 8px 18px rgba(255, 208, 39, .35));
}

/* ---- Status badges — soft tone pairs, never a solid aggressive card ---- */
.cab-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 750; white-space: nowrap;
}
.cab-badge--success { color: var(--cab-success-fg, #1a7a4c); background: var(--cab-success-bg, #e8f8ef); }
.cab-badge--pending { color: var(--cab-warning-fg, #9b6b05); background: var(--cab-warning-bg, #fff7df); }
.cab-badge--warning { color: var(--cab-warning-fg, #956018); background: var(--cab-warning-bg, #fcf2e5); }
.cab-badge--danger  { color: var(--cab-danger-fg, #b14343); background: var(--cab-danger-bg, #fceeee); }
.cab-badge--info    { color: var(--cab-info-fg, #3457a6); background: var(--cab-info-bg, #eaf0fd); }
.cab-badge--muted   { color: var(--cab-muted-fg, #6b6b6b); background: var(--cab-muted-bg, #eef0f2); }

/* ---- "Ещё" / Профиль rows ---- */
/* ALE-66 — structural redesign (design reference: "Ещё" isMore block): one
   grouped white menu card with thin row dividers, not floating per-row
   cards. .cab-more-row-icon (36px) / .cab-more-row-chevron stay exactly as
   pinned by tests — reused as-is by the Help FAQ rows (_helpFaqItem) too,
   untouched here. */
.cab-more-list {
  display: flex; flex-direction: column;
  background: var(--cab-surface, #fff); border: 1px solid var(--cab-line-soft, #edf0f5);
  border-radius: var(--cab-radius-lg, 26px); padding: 2px 16px;
  box-shadow: var(--cab-shadow-card, 0 8px 24px rgba(0,0,0,.06));
}
.cab-more-row {
  display: flex; align-items: center; gap: 13px; width: 100%; min-height: 44px; padding: 15px 0;
  border: none; border-bottom: 1px solid var(--cab-line-soft, rgba(23, 21, 15, .05)); border-radius: 0; background: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.cab-more-row:last-child { border-bottom: none; }
.cab-more-row-icon { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: var(--cab-canvas, #f7f8fb); color: var(--cab-ink, #111); }
.cab-more-row-icon svg { width: 19px; height: 19px; display: block; }
.cab-more-row-title { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 700; }
.cab-more-row-hint { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--cab-muted, #b5b1a6); }
.cab-more-row-chevron { flex: 0 0 auto; color: var(--cab-muted, #9aa2b4); font-size: 17px; font-weight: 800; }

.cab-profile-card {
  display: flex; align-items: center; gap: 13px; padding: 18px; margin-bottom: 12px;
  border-radius: var(--cab-radius-lg, 16px); background: var(--cab-surface, #fff); border: 1px solid var(--cab-line-soft, #edf0f5); box-shadow: var(--cab-shadow-card, 0 8px 24px rgba(0,0,0,.06));
}
/* ALE-66 — the same card, as a real <button> on "Ещё" (identity → opens
   Профиль): reset native button chrome so it reads identically to the
   static <div> version rendered on Профиль itself. */
button.cab-profile-card { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.cab-profile-card-text { flex: 1 1 auto; min-width: 0; }
.cab-profile-card-chevron { flex: 0 0 auto; font-size: 18px; font-weight: 800; color: var(--cab-muted, #c7c3b8); }
.cab-profile-name { margin: 0; font-weight: 800; font-size: 16px; color: var(--cab-ink, #111); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-profile-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--cab-muted, #7b8190); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-profile-info { margin-bottom: 12px; }

/* Help card — Yellow-Soft, links to the existing real "Помощь" screen (no
   invented contact CTA — see renderClientMore in app.js). */
.cab-more-help-card {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border: none;
  margin-top: 12px; padding: 16px; border-radius: var(--cab-radius-lg, 24px); background: var(--cab-yellow-soft, #fff6d6);
}
.cab-more-help-title { font-size: 14.5px; font-weight: 800; color: var(--cab-ink, #17150f); }
.cab-more-help-desc { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--cab-accent-text, #7a6634); line-height: 1.45; }
.cab-more-help-cta {
  display: inline-block; margin-top: 10px; padding: 11px 16px; border-radius: 16px;
  background: var(--cab-ink, #17150f); color: #fff; font-size: 13.5px; font-weight: 800;
}
.cab-more-version { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--cab-muted, #b5b1a6); padding: 10px 0 2px; }

/* ---- Notifications list ---- */
/* ALE-66 Stage 2 — re-skinned onto --cab-* tokens. Unread state matches
   the design reference exactly: a white card with a yellow-tinted BORDER
   (rgba(255,208,39,.55)) plus a small yellow dot, never a solid yellow
   fill — no "artificial yellow highlight" the prototype doesn't have. */
.cab-notif-list { display: flex; flex-direction: column; gap: 8px; }
.cab-notif-row {
  position: relative; display: flex; width: 100%; gap: 8px; padding: 16px; overflow: hidden;
  border: 1px solid var(--cab-line-soft, #edf0f5); border-radius: var(--cab-radius-lg, 14px); background: var(--cab-surface, #fff);
  box-shadow: var(--cab-shadow-card, none);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.cab-notif-row.is-unread { background: var(--cab-surface, #fff); border-color: rgba(255, 208, 39, .55); }
/* ALE-66 — category icon-circle (design reference: a colored 36px round
   glyph leading every notification row). Tone reuses the same status
   token pairs as .cab-badge--*, keyed off the real `category` field via
   NOTIF_CATEGORY_ICON in app.js — presentation only. */
.cab-notif-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 14px; display: grid; place-items: center;
  font-size: 14px; font-weight: 900;
}
.cab-notif-icon--muted   { background: var(--cab-muted-bg, #f1eee7); color: var(--cab-muted-fg, #6e6a5f); }
.cab-notif-icon--warning { background: var(--cab-warning-bg, #fff6d6); color: var(--cab-warning-fg, #a2670a); }
.cab-notif-icon--info    { background: var(--cab-info-bg, #e9f0fa); color: var(--cab-info-fg, #3a5f92); }
.cab-notif-row-main { flex: 1 1 auto; min-width: 0; }
.cab-notif-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cab-notif-row-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; font-weight: 800; color: var(--cab-ink, #111); }
.cab-notif-row-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--cab-yellow, #ffd027); }
.cab-notif-row-date { flex: 0 0 auto; color: var(--cab-muted, #9aa2b4); font-size: 11px; font-weight: 700; }
.cab-notif-row-snippet {
  margin: 4px 0 0; font-size: 12.5px; color: var(--cab-muted, #7b8190); line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cab-notif-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; color: var(--cab-muted, #9aa2b4); font-size: 11px; font-weight: 700; }
.cab-notif-row-important { color: var(--cab-danger-fg, #d84c4c); font-weight: 800; }

/* ---- ALE-12/ALE-66: client schedule list ---- */
/* ALE-66 — structural redesign: compact, dense product rows (retokenized
   onto --cab-*), a calm-but-explicit danger state for cancelled lessons
   (was a warning/yellow badge — cancellation is a negative outcome, not a
   pending one), and a presentation-only "next lesson" highlight computed
   at render time from the same real, already-fetched list (see
   renderClientSchedule/_clientScheduleLessonRowHtml) — no new field. */
.cab-lesson-list { display: flex; flex-direction: column; gap: 8px; }
.cab-lesson-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 14px;
  border: 1px solid var(--cab-line-soft, #edf0f5); border-radius: var(--cab-radius-md, 16px); background: var(--cab-surface, #fff);
}
.cab-lesson-row--next { border-color: rgba(255, 208, 39, .55); background: var(--cab-yellow-soft, #fff6d6); }
.cab-lesson-row--cancelled { background: var(--cab-danger-bg, #fbe8e5); border-color: transparent; }
.cab-lesson-row__main { min-width: 0; }
.cab-lesson-row__date { font-size: 13.5px; font-weight: 800; color: var(--cab-ink, #17150f); }
.cab-lesson-row--cancelled .cab-lesson-row__date { color: var(--cab-danger-fg, #b0453a); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.cab-lesson-row__meta { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--cab-muted, #8c8878); }
/* ALE-12 review round 1 — partial-load warning banner (reuses .pi-form-warning's tone) */
.cab-sched-partial-warning { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cab-sched-partial-warning button { font-size: 12px; padding: 6px 14px; flex: 0 0 auto; }

/* v7.1.13.2 — full-page notification detail: readable at a glance (16px+
   body, generous line-height), the content starts at the top of the page
   instead of being pinned to the bottom of a short bottom-sheet.
   ALE-66 — structural redesign: title/meta/body now live inside a real
   white content card (design reference: "Уведомление · detail"), not bare
   on canvas. .cab-notif-detail-body keeps its existing 16px/1.6 (the
   prototype's own 14px value is below this file's own accessibility
   minimum, already covered by test_visual_hotfix_v71132 — real
   readability wins over pixel-for-pixel prototype match here). */
.cab-notif-detail-card {
  background: var(--cab-surface, #fff); border: 1px solid var(--cab-line-soft, rgba(23, 21, 15, .06));
  border-radius: var(--cab-radius-lg, 26px); padding: 18px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.cab-notif-detail-pill { align-self: flex-start; padding: 6px 12px; border-radius: var(--cab-radius-pill, 999px); font-size: 11.5px; font-weight: 800; }
.cab-notif-detail-pill--warning { background: var(--cab-warning-bg, #fff6d6); color: var(--cab-warning-fg, #a2670a); }
.cab-notif-detail-pill--info    { background: var(--cab-info-bg, #e9f0fa); color: var(--cab-info-fg, #3a5f92); }
.cab-notif-detail-pill--muted   { background: var(--cab-muted-bg, #f1eee7); color: var(--cab-muted-fg, #6e6a5f); }
.cab-notif-detail-title { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -0.4px; line-height: 1.25; color: var(--cab-ink, #111); }
.cab-notif-detail-meta { font-size: 12px; font-weight: 700; color: var(--cab-muted, #9aa2b4); }
.cab-notif-detail-body { font-size: 16px; line-height: 1.6; white-space: pre-line; color: var(--cab-muted-2, #111); }
/* Compact info-block — real fields only (see renderNotificationDetail in
   app.js: a row is emitted only when the underlying real field exists). */
.cab-notif-detail-info { padding: 14px; border-radius: var(--cab-radius-md, 18px); background: var(--cab-canvas, #f4f1ea); display: flex; flex-direction: column; gap: 8px; }
.cab-notif-detail-info-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; }
.cab-notif-detail-info-row span { color: var(--cab-muted, #8c8878); }
.cab-notif-detail-info-row b { color: var(--cab-ink, #17150f); text-align: right; }
.cab-notif-detail-important { align-self: flex-start; }
.cab-notif-detail-cta { width: 100%; padding: 15px 0; border-radius: var(--cab-radius-lg, 20px); font-size: 14.5px; }
.cab-notif-detail-read { margin-top: 16px; color: var(--cab-muted, #9aa2b4); font-size: 12px; font-weight: 700; }
/* ALE-16 — shown instead of the action button when action_resolved===true
   (the underlying condition — e.g. Availability now filled, continuation
   now answered — was resolved by a later event; computed at read time,
   never a stored status, see _notification_action_resolved). */
.cab-notif-detail-resolved { margin-top: 16px; color: var(--cab-success-fg, #1fa56b); font-size: 14px; font-weight: 700; }
#tab-notification-detail.tab-panel.active { padding-bottom: 110px; }

/* ---- Availability modal: day-chips / preference buttons / summary / success ----
   ALE-66 — retokenized onto --cab-* (shared primitives: the onboarding-
   invite bottom-sheet modal and the full-page #tab-availability screen
   render the exact same classes from the same _ocAvailState — see the
   comment above _availScreenSetMode in app.js — so this upgrade reaches
   both surfaces, not just the full page one; no layout/logic changed. */
.oc-day-chip-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.oc-day-chip {
  height: 36px; border: none; border-radius: var(--cab-radius-md, 10px); background: var(--cab-canvas, #f6f7fb);
  color: var(--cab-muted-2, #7b8190); font-size: 11.5px; font-weight: 750; cursor: pointer;
}
.oc-day-chip.active { background: var(--cab-ink, #111); color: #fff; }

.oc-interval-row-v2 { padding: 12px; border: none; border-radius: var(--cab-radius-md, 14px); background: var(--cab-canvas, #f6f7fb); margin-bottom: 8px; }
.oc-interval-time-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.oc-interval-time-row input[type="time"] { flex: 1 1 0; min-width: 0; font-size: 13px; padding: 8px; border: none; border-radius: var(--cab-radius-md, 10px); background: var(--cab-surface, #fff); color: var(--cab-ink, #17150f); }
.oc-interval-remove { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: var(--cab-radius-md, 10px); background: var(--cab-danger-bg, #fceeee); color: var(--cab-danger-fg, #b14343); cursor: pointer; }

.oc-pref-row { display: flex; gap: 6px; }
.oc-pref-btn { flex: 1 1 0; min-height: 36px; padding: 0 6px; border: none; border-radius: var(--cab-radius-md, 10px); background: var(--cab-surface, #fff); color: var(--cab-muted-2, #7b8190); font-size: 11.5px; font-weight: 750; cursor: pointer; }
.oc-pref-btn--preferred.active { background: var(--cab-yellow, #ffcb1f); color: var(--cab-accent-text, #6f5200); }
.oc-pref-btn--possible.active { background: var(--cab-info-bg, #eaf0fd); color: var(--cab-info-fg, #3457a6); }

.oc-summary-view, .oc-success-view { padding: 2px; }
.oc-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cab-line-soft, #eef0f5); font-size: 13px; }
.oc-summary-row:last-of-type { border-bottom: 0; }
.oc-summary-row--wrap { flex-direction: column; align-items: flex-start; gap: 3px; }
.oc-summary-row span { color: var(--cab-muted, #9aa2b4); }
.oc-summary-row b { font-weight: 700; color: var(--cab-ink, #17150f); }
.oc-summary-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oc-summary-chip { padding: 5px 10px; border-radius: var(--cab-radius-pill, 999px); font-size: 11.5px; font-weight: 800; }
.oc-summary-chip--preferred { background: var(--cab-yellow-soft, #fff8cf); color: var(--cab-warning-fg, #6f5200); }
.oc-summary-chip--possible { background: var(--cab-info-bg, #eaf0fd); color: var(--cab-info-fg, #3457a6); }

.oc-success-view { text-align: center; }
.oc-success-icon {
  width: 44px; height: 44px; margin: 0 auto 8px; display: grid; place-items: center;
  border-radius: 50%; background: #e8f8ef; color: #1a7a4c; font-size: 22px; font-weight: 800;
}
.oc-success-title { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.oc-success-desc { margin: 0 0 12px; font-size: 12.5px; color: var(--muted, #7b8190); }
.oc-success-view .oc-summary-row { text-align: left; }

@media (max-width: 380px) {
  .oc-day-chip { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════
   v7.1.13 round 2 — full-page cabinet "Возможности для расписания"
   (#tab-availability). Every text color below is set EXPLICITLY (never
   left to inherit) specifically to rule out the white-on-white/low-
   contrast class of bug flagged in visual review — this app has no global
   dark-mode token swap for --ink/--card/--bg (confirmed: those tokens are
   only ever defined with their light values, dark handling elsewhere in
   this file is done per-component), so light-on-light everywhere here is
   intentional and correct for how this app actually themes today.
   ══════════════════════════════════════════════════════════════════════ */
/* v7.1.13 visual polish — the back button and title/subtitle now come
   from the shared .cab-header--sub / .cab-icon-btn / .cab-header-sub-title /
   .cab-header-sub-desc classes (see the block near .cab-header above), so
   this screen's header matches every other cabinet sub-header exactly —
   no bespoke rule needed here anymore. */

.avail-summary-card {
  background: var(--cab-surface, #fff);
  border: 1px solid var(--cab-line-soft, #edf0f5);
  border-radius: var(--cab-radius-lg, 22px);
  padding: 16px;
  box-shadow: var(--cab-shadow-card, 0 3px 16px rgba(26,38,66,.05));
}
.avail-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cab-line-soft, #edf0f5);
  font-size: 13px;
  font-weight: 700;
}
.avail-summary-row:last-child { border-bottom: 0; }
.avail-summary-row--wrap { flex-direction: column; align-items: flex-start; gap: 3px; }
.avail-summary-row span { color: var(--cab-muted, #7b8190); }
.avail-summary-row b { color: var(--cab-ink, #17150f); font-weight: 700; text-align: right; }
.avail-summary-row--wrap b { text-align: left; font-weight: 550; }
.avail-summary-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.avail-full-btn { width: 100%; margin-top: 12px; }

/* ALE-66 — each field its own white card (design reference: "Возможности
   для расписания · ввод"), same ids/values/handlers inside as before. */
.avail-field-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--cab-surface, #fff); border: 1px solid var(--cab-line-soft, rgba(23, 21, 15, .06));
  border-radius: var(--cab-radius-lg, 22px); padding: 14px; margin-bottom: 11px;
}
.avail-field-label { font-size: 11.5px; font-weight: 800; color: var(--cab-muted, #8c8878); }
/* ALE-66 — short product-hierarchy intro (real copy: same sentence
   _cabAvailabilityCardHtml already uses for the unfilled state elsewhere
   in the cabinet, not invented text). */
.avail-intro-desc { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: var(--cab-muted-2, #57534a); line-height: 1.5; }
.avail-add-interval-btn {
  align-self: flex-start; margin-top: 2px; padding: 10px 14px; border: none; border-radius: var(--cab-radius-md, 14px);
  background: var(--cab-yellow-soft, #fff6d6); color: var(--cab-warning-fg, #a2670a); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}

/* ALE-66 — dark "anchor" hero (design reference: "Возможности · success"),
   same real icon/title/desc content as before, just composed as one card
   instead of three bare elements on canvas. */
.avail-success-hero {
  background: var(--cab-ink, #17150f); border-radius: var(--cab-radius-lg, 26px); padding: 22px; margin-bottom: 12px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.avail-success-icon {
  width: 56px; height: 56px; margin: 0 auto 10px; display: grid; place-items: center;
  border-radius: 999px; background: var(--cab-yellow, #ffd027); color: var(--cab-ink, #17150f); font-size: 24px; font-weight: 900;
}
.avail-success-title { margin: 0 0 4px; text-align: center; font-size: 17px; font-weight: 800; color: #fff; }
.avail-success-desc { margin: 0; text-align: center; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .65); line-height: 1.5; }
.avail-success-actions { display: flex; gap: 9px; margin-top: 12px; }
.avail-success-actions > * { flex: 1 1 0; }

.avail-screen-footer {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 28px));
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--cab-radius-lg, 18px);
  background: var(--cab-surface, #fff);
  border: 1px solid var(--cab-line-soft, #edf0f5);
  box-shadow: 0 12px 32px rgba(23, 21, 15, .16);
  z-index: 5;
}
.avail-screen-footer > * { flex: 1 1 0; }
.avail-screen-footer.hidden { display: none; }
/* v7.1.13 visual polish — the shared .primary/.secondary button classes
   have slightly different vertical padding globally (12px vs 10px), which
   is invisible almost everywhere but reads as a height mismatch in a
   side-by-side sticky bar; force equal height here without touching the
   global button system. Disabled Save also gets an explicit readable
   style instead of the generic global `button:disabled { opacity:.5 }`,
   which would otherwise wash a yellow button out against the white bar. */
.avail-screen-footer .primary,
.avail-screen-footer .secondary {
  min-height: 46px;
  padding: 12px 14px;
}
.avail-screen-footer .primary:disabled {
  opacity: 1;
  background: var(--cab-warning-bg, #f2e9c9);
  color: var(--cab-warning-fg, #8a7a3a);
}

/* Room for the fixed footer + fixed bottom nav so the last form element
   (comment textarea) always scrolls fully clear of both. */
#tab-availability.tab-panel.active { padding-bottom: 170px; }

#availScreenPicker .yc-list,
#availScreenPicker .ws-conn-list { margin-top: 4px; }
.avail-picker-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 44px; padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--cab-line-soft, #edf0f5);
  border-radius: var(--cab-radius-lg, 18px); background: var(--cab-surface, #fff); color: var(--cab-ink, #17150f); text-align: left; cursor: pointer;
}
.avail-picker-row-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avail-picker-row-status { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--cab-muted, #7b8190); }
.avail-picker-row-status--filled { color: var(--cab-success-fg, #1a7a4c); }

/* Explicit contrast for the shared field/branch/day/pref controls when
   used inside the full-page screen (same classes as the modal — this just
   guarantees the text color is never left to inherit from an unexpected
   ancestor). */
#tab-availability .ws-oc-field { color: var(--cab-ink, #111); }
#tab-availability .ws-oc-field > span { color: var(--cab-ink, #111); font-weight: 650; }
#tab-availability .ws-oc-ttl-btn { color: var(--cab-ink, #111); }
#tab-availability .ws-oc-ttl-btn.active { color: var(--cab-warning-fg, #6f5200); }
#tab-availability textarea,
#tab-availability input[type="date"] {
  width: 100%; min-height: 44px; padding: 10px 12px; border: none;
  border-radius: var(--cab-radius-md, 14px); background: var(--cab-canvas, #f4f1ea); color: var(--cab-ink, #17150f); font: inherit; font-size: 14px; box-sizing: border-box;
}
#tab-availability .oc-day-chip,
#tab-availability .oc-pref-btn { color: var(--cab-muted-2, #7b8190); }
#tab-availability .oc-day-chip.active { color: #fff; }
#tab-availability .oc-pref-btn--preferred.active { color: var(--cab-warning-fg, #6f5200); }
#tab-availability .oc-pref-btn--possible.active { color: var(--cab-info-fg, #3457a6); }

/* Invalid-interval marker — used inside BOTH the modal and the full-page
   screen (same class names, shared _ocAvailApplyRowValidation). */
.oc-interval-row-v2--invalid { border-color: #d84c4c; background: #fff3f2; }
.oc-interval-row-note { margin: 6px 0 0; font-size: 11.5px; font-weight: 650; color: #b14343; }

/* v7.1.13 round 2 — owner-only test notification sender: own layout, not
   .test-role-controls (see index.html comment for why). Single column,
   full-width fields — a smoke tool, not a staff page. */
.otn-controls { display: flex; flex-direction: column; gap: 10px; }
.otn-controls label { display: block; }
.otn-controls label span { display: block; margin: 0 0 5px; font-size: 12px; font-weight: 800; color: var(--muted, #7b8190); }
.otn-controls input[type="text"],
.otn-controls select,
.otn-controls textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line, #edf0f5);
  border-radius: 14px;
  background: #fff;
  color: var(--ink, #111);
  font: inherit;
  font-size: 14px;
}
.otn-controls textarea { min-height: 76px; resize: vertical; line-height: 1.4; }
.otn-controls-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* v7.1.13.2 — short helper text under a field, explaining scope in plain
   Russian ("this only reaches the one client you named", not a broadcast). */
.otn-hint { display: block; margin: 5px 2px 0; font-size: 11px; color: var(--muted, #7b8190); line-height: 1.35; }

/* .test-role-status had no styling at all before — success/error read
   identically as plain text. Used by both the existing test-role panel
   and the owner test-notification sender. */
.test-role-status { margin-top: 10px; font-size: 13px; color: var(--muted, #7b8190); }
.test-role-status.ok { padding: 10px 12px; border-radius: 12px; background: #eafbf3; color: #116643; font-weight: 650; }
.test-role-status.error { padding: 10px 12px; border-radius: 12px; background: #fceeee; color: #b14343; font-weight: 650; }

/* ── v7.1.14 — staff "Рассылки" (communications center). Scoped entirely
   under .comms-* / #commsConfirmModal; reuses generic .card/.notice/.pill
   as the base building blocks (same design language as the rest of the
   staff app) but every layout/structural rule below is specific to this
   module and lives here rather than as inline style="" in app.js. ────── */

/* v7.1.14.1 — guaranteed one-tap entry card on the Admin screen */
.comms-admin-entry-card { margin-bottom: 14px; }
.comms-admin-entry-head { margin-bottom: 10px; }
.comms-admin-entry-head h3 { margin: 0; font-size: 16px; }

.comms-page-subtitle { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.comms-mode-notice { margin-top: 10px; }
.comms-section-head { margin-top: 18px; }
.comms-section-title { font-size: 16px; margin: 0; }

/* ALE-39 round 2 — deepens the shared .card shadow to .cab-card's
   var(--shadow) for campaign rows specifically (not the global .card
   rule, used across every staff/admin/kitchen screen). */
.comms-campaign-card { margin-bottom: 10px; box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .06)); }
.comms-campaign-card-head { margin-bottom: 6px; }
.comms-campaign-title-wrap { min-width: 0; }
.comms-campaign-meta { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.comms-campaign-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.comms-campaign-action { min-height: 40px; }
/* ALE-39 round 2 — the campaign status pill (COMMS_STATUS_PILL, app.js)
   reuses the shared .pill/.pill.ok/.warn/.bad classes site-wide (staff/
   admin screens too), so its colors aren't changed globally — this scopes
   the client-cabinet .cab-badge color values (--success/--pending/
   --danger/--muted) to just the campaign card, same class names, same
   click/data wiring, only the resulting colors move onto the cab-badge
   palette here. */
.comms-campaign-card .pill { background: #eef0f2; color: #6b6b6b; }
.comms-campaign-card .pill.ok { background: #e8f8ef; color: #1a7a4c; }
.comms-campaign-card .pill.warn { background: #fff7df; color: #9b6b05; }
.comms-campaign-card .pill.bad { background: #fceeee; color: #b14343; }

.comms-wizard-title { font-size: 18px; margin: 0; }
.comms-save-status { font-size: 12px; color: var(--muted); min-height: 16px; }

/* compact 5-segment stepper, "Шаг N из 5" — see COMMS_STEP_LABELS in app.js */
.comms-stepper-track { display: flex; gap: 5px; margin: 10px 0 4px; }
.comms-stepper-seg { height: 4px; flex: 1; border-radius: 2px; background: #eee; }
.comms-stepper-seg.is-filled { background: #ffd84d; }
.comms-stepper-label { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

.comms-audience-list { display: flex; flex-direction: column; }
.comms-audience-option { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; cursor: pointer; }
.comms-audience-option.is-disabled { opacity: .5; cursor: default; }
.comms-audience-option-radio { margin-top: 3px; }
.comms-audience-option-title { display: block; }
.comms-audience-option-desc { font-size: 12.5px; color: var(--muted); }
.comms-step-cta { margin-top: 14px; }
.comms-audience-detail-card { margin-top: 6px; }
.comms-field-wide { width: 100%; box-sizing: border-box; }
.comms-lookup-btn { margin-top: 8px; }
.comms-lookup-results { margin-top: 8px; }
.comms-lookup-card { margin-top: 6px; cursor: pointer; }
.comms-lookup-card-sub { font-size: 12px; color: var(--muted); }

/* server-computed recipient-count block — never a frontend guess */
.comms-recipient-banner { margin-top: 8px; background: #fff7d1; }
.comms-recipient-count-label { font-size: 12px; color: var(--muted); }
.comms-recipient-count-value { font-size: 28px; font-weight: 800; }
.comms-recipient-count-note { font-size: 12px; color: var(--muted); }
.comms-recipient-excluded { font-size: 12px; margin-top: 6px; }

.comms-channel-card { }
.comms-channel-desc { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.comms-step-actions { display: flex; gap: 10px; margin-top: 14px; }
.comms-step-actions-column { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-bottom: 16px; }
.comms-step-actions button, .comms-step-actions-column button { min-height: 44px; }

.comms-field { display: block; margin-top: 10px; }
.comms-preview-card { margin-top: 10px; }
.comms-preview-bubble { margin-top: 8px; background: #f6f7fb; }
.comms-preview-title { font-weight: 700; }
.comms-preview-body { font-size: 13px; margin-top: 4px; white-space: pre-wrap; }
.comms-schedule-card { margin-top: 10px; }
.comms-schedule-options { margin-top: 8px; }
.comms-schedule-fields { margin-top: 8px; }
.comms-schedule-date-input { margin-right: 8px; }

.comms-review-card + .comms-review-card { margin-top: 10px; }
.comms-review-audience { font-size: 13px; color: var(--muted); margin-top: 4px; }
.comms-review-message-title { margin-top: 6px; font-weight: 700; }
.comms-review-message-body { font-size: 13px; margin-top: 2px; white-space: pre-wrap; }
.comms-review-warning { margin-top: 10px; }

.comms-result-line { margin-top: 8px; }
.comms-result-error { color: #a72b2b; margin-top: 6px; }

/* ── confirmation sheet — full-height, forced-light (same technique as
   #wsFiltersModal above), never a native confirm()/window.confirm(). ── */
.comms-confirm-sheet {
  /* v7.1.14.1 — reuse the app's own proven top-safe-area chain
     (--app-top-safe-offset, set in styles.css :root and refined live by
     _applySafeArea in app.js) instead of a bare env(), so the sheet never
     drifts from how every other screen in this app sizes for Telegram's
     own chrome. */
  height: calc(100dvh - var(--app-top-safe-offset, env(safe-area-inset-top, 0px)) - 8px);
}
@media (min-width: 600px) {
  .comms-confirm-sheet { height: min(90vh, 760px); }
}
#commsConfirmModal .pi-modal-sheet { background: #fff; color: #172033; }
#commsConfirmModal .pi-modal-head { border-bottom-color: #e8ecf4; }
#commsConfirmModal .pi-modal-head h3 { color: #172033; }
#commsConfirmModal .pi-modal-close { color: #657089; }
#commsConfirmModal .pi-modal-close:hover { background: rgba(0, 0, 0, .06); }
#commsConfirmModal .pi-modal-footer { border-top-color: #e8ecf4; }

.comms-confirm-footer { flex-direction: column; }
.comms-confirm-footer button { flex: 0 0 auto; width: 100%; }

.comms-confirm-warning {
  background: rgba(230, 126, 34, .12); color: #a04000; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; font-weight: 600;
}
.comms-confirm-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e8ecf4; }
.comms-confirm-label {
  font-size: 11.5px; font-weight: 700; color: #657089; text-transform: uppercase;
  letter-spacing: .02em; margin-bottom: 4px;
}
.comms-confirm-value { font-size: 14px; color: #172033; }
.comms-confirm-count { font-size: 24px; font-weight: 800; color: #172033; margin-top: 4px; }
.comms-confirm-excluded { font-size: 12px; color: #657089; margin-top: 4px; }
.comms-confirm-calculated { font-size: 11.5px; color: #8892a6; margin-top: 4px; }
.comms-confirm-title-line { font-weight: 700; color: #172033; margin-top: 4px; }
.comms-confirm-body-line { font-size: 13px; color: #172033; margin-top: 2px; white-space: pre-wrap; }
.comms-confirm-action-line { font-size: 12px; color: #657089; margin-top: 4px; }
.comms-confirm-note { font-size: 12px; color: #657089; margin-top: 6px; }

.comms-confirm-outcome { text-align: center; padding: 32px 12px; }
.comms-confirm-outcome-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; color: #172033; }
.comms-confirm-outcome-text { font-size: 14px; color: #657089; }
.comms-confirm-outcome-success .comms-confirm-outcome-title { color: #116643; }
.comms-confirm-outcome-partial .comms-confirm-outcome-title { color: #a04000; }
.comms-confirm-outcome-failed .comms-confirm-outcome-title { color: #a72b2b; }
/* the #commsConfirmModal .pi-modal-sheet rule above already outranks the
   generic dark-theme .pi-modal-sheet overrides by specificity (id + class
   beats class + attribute-selector) regardless of stylesheet order, so no
   separate dark/light media-query duplicate is needed here. */

/* ── ALE-100 — "Рассылки" internal mode switcher (Рассылки / Объявления на
   Главной) and the announcement editor. Same segmented-control shape/
   values as .cab-pay-segmented (client cabinet payments), redefined here
   rather than shared across module boundaries — this page is reached by
   owner/admin/client_manager, not only the parent cabinet, so it must not
   depend on --cab-* tokens being present. */
.comms-mode-segmented { display: flex; gap: 4px; padding: 4px; margin: 12px 0; background: #fff; border: 1px solid rgba(23, 21, 15, .07); border-radius: 999px; }
.comms-mode-segment { flex: 1 1 0; text-align: center; padding: 9px 10px; border-radius: 999px; border: none; background: transparent; color: #57534a; font: inherit; font-size: 13.5px; font-weight: 750; cursor: pointer; min-height: 40px; }
.comms-mode-segment.active { background: #17150f; color: #fff; }

/* Explanatory notice — deliberately plain (same .notice class as elsewhere
   on this page), not styled as a warning; its only job is to make the
   "this is not a Telegram send" distinction unmissable. */
.comms-announce-explainer { margin-bottom: 12px; }

/* ═══════════════════════════════════════════════════════════════════════
   v7.1.17 — "Расписание" (continuing-students schedule foundation).
   Fully scoped under .sched-* (plus reuse of the existing shared
   .ws-help-btn/.ws-refresh-btn/.ws-status-badge/.ws-skeleton primitives,
   already used the same way by other staff-workspace-style screens).
   No selector here touches anything outside .sched-*, so this whole block
   can be deleted along with the module's JS/HTML without side effects.
   ═══════════════════════════════════════════════════════════════════════ */
.sched-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 2px 0 10px; }
.sched-header__eyebrow { margin: 0 0 2px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9a7d00; }
.sched-header__title { margin: 0; font-size: 21px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.sched-header__subtitle { margin: 3px 0 0; font-size: 12px; color: var(--muted); line-height: 1.3; }
.sched-header__period { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.sched-header__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
@media (max-width: 390px) {
  .sched-header__title { font-size: 19px; }
  .sched-header__actions { gap: 6px; }
}
@media (max-width: 360px) {
  .sched-header__title { font-size: 16px; }
  .sched-header__eyebrow { font-size: 9px; }
}

.sched-sync-status { margin-bottom: 10px; }
.sched-sync-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; background: #eaf6ef; color: #267b4e; }
.sched-sync-badge--running { background: #fff7df; color: #9b6b05; }
.sched-sync-badge--muted { background: var(--line); color: var(--muted); }

.sched-subtabs {
  display: flex; gap: 4px; overflow-x: auto; flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 14px; padding-bottom: 2px;
}
.sched-subtabs::-webkit-scrollbar { display: none; }
.sched-subtab {
  flex: 0 0 auto; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 14px; border-radius: 14px; background: var(--line); color: var(--muted);
  font-size: 12.5px; font-weight: 700; border: none; cursor: pointer;
}
.sched-subtab.active { background: var(--yellow, #ffcb1f); color: var(--ink); }

/* ALE-10 — "Дети" screen decision filters. Same declarations as
   .sched-subtab/.sched-subtab.active above (reused design, not a new
   visual style) under a distinct class so _schedActivateTab's
   document.querySelectorAll(".sched-subtab") (top-level nav only) never
   touches these filter buttons. */
.sched-decision-filter {
  flex: 0 0 auto; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 14px; border-radius: 14px; background: var(--line); color: var(--muted);
  font-size: 12.5px; font-weight: 700; border: none; cursor: pointer;
}
.sched-decision-filter.active { background: var(--yellow, #ffcb1f); color: var(--ink); }

.sched-cta-row { margin: 14px 0; display: flex; justify-content: center; }
.sched-cta-row button { min-height: 44px; padding: 0 20px; border-radius: 14px; font-weight: 700; }

.sched-warning-banner {
  background: #fff7df; color: #7c5a00; border: 1px solid rgba(155,107,5,.25);
  border-radius: 14px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 12px; line-height: 1.4;
}
.sched-warning-banner .sched-linklike { margin-left: 6px; }

.sched-linklike {
  background: none; border: none; padding: 0; color: #3457a6; font-size: 12.5px;
  font-weight: 700; cursor: pointer; min-height: 32px; text-decoration: underline;
}

.sched-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 14px; }
@media (min-width: 480px) { .sched-stat-grid { grid-template-columns: repeat(3, 1fr); } }
.sched-stat-card {
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 10px; text-align: left; min-width: 0;
}
.sched-stat-card__value { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.sched-stat-card__label { margin: 4px 0 0; font-size: 11px; color: var(--muted); line-height: 1.3; }

.sched-sync-progress { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.sched-sync-progress__stage { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ink); }
.sched-sync-counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 420px) { .sched-sync-counters { grid-template-columns: repeat(3, 1fr); } }
.sched-sync-counters > div { text-align: center; padding: 10px 4px; background: var(--bg, #f7f8fb); border-radius: 12px; }
.sched-sync-counters span { display: block; font-size: 19px; font-weight: 800; color: var(--ink); }
.sched-sync-counters label { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.sched-sync-progress__meta { margin: 12px 0 0; font-size: 11px; color: var(--muted); }
.sched-sync-errors { margin-top: 10px; padding: 8px 10px; background: #fceeee; border-radius: 10px; }
.sched-sync-errors p { margin: 2px 0; font-size: 11.5px; color: #a82d2d; }

.sched-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sched-filter-bar select, .sched-search-input {
  min-height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card, #fff);
  color: var(--ink); font-size: 12.5px; padding: 0 10px;
}
.sched-search-input { flex: 1 1 160px; min-width: 0; }

.sched-list-title { font-size: 13px; font-weight: 700; color: var(--ink); margin: 16px 0 8px; }

.sched-group-list { display: flex; flex-direction: column; gap: 10px; }
.sched-group-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.sched-group-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sched-group-card__header h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.sched-group-card__meta { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }
.sched-group-card__slot { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-group-card__reason { margin: 4px 0 0; font-size: 11px; color: var(--muted); font-style: italic; }
.sched-group-card__stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; font-size: 11px; color: var(--muted); }
.sched-group-card__actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.sched-group-card__actions button { min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 700; font-size: 12.5px; }
.sched-group-card__tech { margin: 8px 0 0; font-size: 10px; color: #99a1b3; }

.sched-detail-header { margin-bottom: 12px; }
.sched-detail-header h2 { margin: 6px 0 0; font-size: 19px; font-weight: 800; color: var(--ink); }

.sched-student-list, .sched-audit-list { display: flex; flex-direction: column; gap: 8px; }
.sched-member-row {
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
}
.sched-member-row--excluded { opacity: .55; }
.sched-member-row__name { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.sched-member-row__tech { margin: 2px 0 0; font-size: 10.5px; color: var(--muted); }
.sched-member-row__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-member-row__actions { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.sched-member-row__actions button { min-height: 40px; padding: 0 14px; border-radius: 10px; font-size: 12px; }

.sched-conflict-banner {
  background: #fceeee; border: 1px solid rgba(216,76,76,.3); border-radius: 14px;
  padding: 10px 14px; margin-bottom: 12px;
}
.sched-conflict-banner p { margin: 3px 0; font-size: 12px; color: #a82d2d; }

.sched-editor { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.sched-editor-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.sched-editor-field input, .sched-editor-field select {
  min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card, #fff);
  color: var(--ink); font-size: 14px; font-weight: 500; padding: 0 12px;
}
.sched-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sched-editor-actions button { min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 700; font-size: 12.5px; }

.sched-audit-row { margin: 0; font-size: 11px; color: var(--muted); padding: 6px 0; border-bottom: 1px solid var(--line); }
.sched-audit-row:last-child { border-bottom: none; }

/* v7.1.17.1 — ALE-6 Data Quality block. */
.sched-quality-block {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 14px; margin: 4px 0 14px;
}
.sched-quality-block__title { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--ink); }
.sched-quality-block__note { margin: 0 0 10px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.sched-quality-block__subtitle { margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: var(--ink); }
.sched-quality-block__errors { margin: 10px 0 0; font-size: 11.5px; color: #a82d2d; }
.sched-quality-table { width: 100%; border-collapse: collapse; }
.sched-quality-table__label { padding: 5px 0; font-size: 12px; color: var(--ink); }
.sched-quality-table__value { padding: 5px 0; text-align: right; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   v7.1.17.1 — SCOPED LIGHT THEME for the schedule workspace (ALE-6
   section 9). Deliberately NOT a global change (the rest of the app keeps
   its existing color-scheme:light-only + data-theme-driven behavior) —
   only .sched-* markup, plus the shared confirm modal/empty/error states
   WHEN rendered inside #scheduleFoundationRoot, are pinned to fixed light
   colors with no dark/prefers-color-scheme/data-theme branch at all. This
   replaces an earlier partial dark-mode override (background-only, no
   matching text-color override) that made card text unreadable in
   Telegram/iOS dark mode — the fix here is to never apply a dark variant
   here in the first place, independent of any theme signal. */
#scheduleFoundationRoot { color-scheme: light; }
#scheduleFoundationRoot .sched-stat-card,
#scheduleFoundationRoot .sched-group-card,
#scheduleFoundationRoot .sched-member-row,
#scheduleFoundationRoot .sched-sync-progress,
#scheduleFoundationRoot .sched-quality-block {
  background: #fff; border-color: var(--line); color: #172033;
}
#scheduleFoundationRoot .sched-sync-counters > div { background: #f7f8fb; }
#scheduleFoundationRoot .sched-filter-bar select,
#scheduleFoundationRoot .sched-search-input,
#scheduleFoundationRoot .sched-editor-field input,
#scheduleFoundationRoot .sched-editor-field select {
  background: #fff; border-color: var(--line); color: #172033;
}
#scheduleFoundationRoot .sched-filter-bar select:disabled,
#scheduleFoundationRoot .sched-search-input:disabled,
#scheduleFoundationRoot .sched-editor-field input:disabled,
#scheduleFoundationRoot .sched-editor-field select:disabled,
#scheduleFoundationRoot button:disabled {
  opacity: .5; background: #f6f7fb; color: #8a92a6;
}
#scheduleFoundationRoot .sched-filter-bar select:focus,
#scheduleFoundationRoot .sched-search-input:focus,
#scheduleFoundationRoot .sched-editor-field input:focus,
#scheduleFoundationRoot .sched-editor-field select:focus {
  border-color: #3498db; box-shadow: 0 0 0 3px rgba(52,152,219,.18); outline: none;
}
#scheduleFoundationRoot .ws-empty-state,
#scheduleFoundationRoot .ws-error-state {
  background: transparent;
}
#scheduleFoundationRoot .ws-empty-state-title,
#scheduleFoundationRoot .ws-empty-state-desc,
#scheduleFoundationRoot .ws-status-badge {
  color: inherit;
}
/* The confirm sheet (#uiConfirmModal) lives outside #scheduleFoundationRoot
   in the DOM (a single shared modal, index.html), so descendant scoping
   can't reach it — uiConfirmSheet() accepts an opts.scopeClass instead,
   and _schedConfirmGenerateFoundation() passes "sched-scope" so only a
   confirm sheet actually opened FROM the schedule module gets pinned
   light; every other screen's confirm sheet is untouched. */
#uiConfirmModal.sched-scope .pi-modal-sheet { background: #fff; color: #172033; }
#uiConfirmModal.sched-scope .pi-modal-head { border-bottom-color: var(--line); }
#uiConfirmModal.sched-scope .pi-modal-head h3 { color: #172033; }
#uiConfirmModal.sched-scope .pi-modal-close { color: #657089; }
#uiConfirmModal.sched-scope .pi-modal-body label { color: #657089; }
#uiConfirmModal.sched-scope .pi-modal-body input,
#uiConfirmModal.sched-scope .pi-modal-body select,
#uiConfirmModal.sched-scope .pi-modal-body textarea { background: #f6f7fb; border-color: #e0e4ef; color: #172033; }
#uiConfirmModal.sched-scope .pi-modal-footer { border-top-color: var(--line); }

/* uiConfirmSheet's body is a single escaped <p> — the "Создать основу"
   confirm message uses literal \n separators for its bullet-style summary,
   so this one shared rule renders them as line breaks. Harmless for every
   other existing confirm sheet caller, none of which include \n. */
#uiConfirmBody p { white-space: pre-line; }

/* ══════════════════════════════════════════════════════════════════════
   ALE-77 — emergency switch for automatic invoice creation
   Lives at the top of the Payments overview. Uses the accepted design
   system's own tokens (--cab-*) with hardcoded fallbacks, so it renders
   correctly both inside the client_manager cabinet (where --cab-* are
   defined) and for owner/admin/operations (where they are not). Nothing
   here restyles any existing Payments element — it is a new card only.
   ══════════════════════════════════════════════════════════════════════ */
.pa-card {
  margin: 0 0 14px;
  padding: 14px 15px;
  border: 1px solid var(--cab-line-soft, #eceaea);
  border-left: 4px solid var(--cab-line, #e0ddd6);
  border-radius: var(--cab-radius-md, 18px);
  background: var(--cab-surface, #fff);
  box-shadow: var(--cab-shadow-card, 0 2px 10px rgba(23, 21, 15, .04));
}
.pa-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pa-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.2px;
  color: var(--cab-ink, #17150f);
  overflow-wrap: anywhere;
}
.pa-card-status {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: var(--cab-radius-pill, 999px);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}
/* "Действует для всех клиентов" — the scope line is deliberately always
   present, in every state, so the operator can never mistake this for a
   per-client control. */
.pa-card-sub {
  margin: 5px 0 0;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--cab-accent-text, #7a6634);
}
.pa-card-text {
  margin: 7px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cab-muted-2, #57534a);
}
.pa-card-meta {
  margin: 9px 0 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--cab-muted, #8c8878);
}
.pa-card-btn {
  margin-top: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--cab-radius-pill, 999px);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
}
.pa-card-btn:disabled { opacity: .55; }
.pa-card-btn:focus { outline: none; }
.pa-card-btn:focus-visible {
  outline: 2px solid var(--cab-ink, #17150f);
  outline-offset: 2px;
}

/* ── state: running ─────────────────────────────────────────────────── */
.pa-card--on { border-left-color: #4bab7f; }
.pa-card--on .pa-card-status {
  background: var(--cab-success-bg, #e4f3eb);
  color: var(--cab-success-fg, #1f6b4c);
}
.pa-card-btn--pause {
  background: var(--cab-muted-bg, #f1eee7);
  color: var(--cab-ink, #17150f);
}

/* ── state: paused — must be visibly a warning, not a neutral card ──── */
.pa-card--off {
  border-left-color: #e0a52a;
  background: var(--cab-warning-bg, #fff6d6);
  border-color: rgba(162, 103, 10, .2);
}
.pa-card--off .pa-card-status {
  background: #a2670a;
  color: #fff;
}
.pa-card--off .pa-card-text { color: #7a5a10; }
.pa-card-btn--resume {
  background: var(--cab-ink, #17150f);
  color: #fff;
}

/* ── state: disabled at deployment level ────────────────────────────── */
.pa-card--serveroff {
  border-left-color: #9a958a;
  background: var(--cab-muted-bg, #f1eee7);
}
.pa-card--serveroff .pa-card-status {
  background: #6e6a5f;
  color: #fff;
}

/* ── state: error ───────────────────────────────────────────────────── */
.pa-card--error {
  border-left-color: #b0453a;
  background: var(--cab-danger-bg, #fbe8e5);
  border-color: rgba(176, 69, 58, .2);
}
.pa-card--error .pa-card-text { color: #8f382f; }
.pa-card-btn--ghost {
  background: transparent;
  color: var(--cab-ink, #17150f);
  border: 1px solid rgba(176, 69, 58, .35);
}

/* ── state: loading ─────────────────────────────────────────────────── */
/* Same footprint as the settled card so the block does not jump in height
   when the real state arrives. */
.pa-card--loading {
  border-left-color: var(--cab-line, #e0ddd6);
  min-height: 118px;
}
.pa-skel {
  display: block;
  border-radius: 8px;
  /* reuses the app's existing shimmer keyframes — no second animation */
  background: linear-gradient(90deg, #efece5 25%, #f7f5f0 37%, #efece5 63%);
  background-size: 400% 100%;
  animation: wsShimmer 1.4s ease infinite;
}
.pa-skel--status { width: 62%; height: 12px; margin-top: 12px; }
.pa-skel--btn { width: 100%; height: 40px; margin-top: 14px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .pa-skel { animation: none; }
}

/* ── ALE-86: the three-state mode selector ──────────────────────────────
   A segmented control inside the same .pa-card, using the same --cab-*
   tokens with hardcoded fallbacks. Wraps to two rows below ~360px rather
   than shrinking the tap targets, and every option keeps a >=44px target. */
.pa-modes {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding: 4px;
  border-radius: var(--cab-radius-pill, 999px);
  background: var(--cab-muted-bg, #f1eee7);
  flex-wrap: wrap;
}
.pa-mode {
  flex: 1 1 90px;
  min-height: 44px;
  padding: 10px 8px;
  border: 0;
  border-radius: var(--cab-radius-pill, 999px);
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--cab-muted-2, #57534a);
  -webkit-tap-highlight-color: transparent;
}
.pa-mode--active {
  background: var(--cab-surface, #fff);
  color: var(--cab-ink, #17150f);
  box-shadow: var(--cab-shadow-card, 0 2px 10px rgba(23, 21, 15, .04));
}
.pa-mode:disabled { opacity: .55; }
.pa-mode:focus { outline: none; }
.pa-mode:focus-visible {
  outline: 2px solid var(--cab-ink, #17150f);
  outline-offset: 2px;
}
/* How many clients keep their own per-client mode regardless of this
   control. A count, never a list of people. */
.pa-exceptions {
  margin: 8px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--cab-accent-text, #7a6634);
}

/* ALE-80 — per-mode client count summary. Same flex-wrap chip row layout as
   .oc-summary-chips/.avail-summary-chips elsewhere; the chips themselves
   reuse .ws-pilot-mode-badge, no new colors. */
.pa-mode-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

@media (max-width: 359px) {
  .pa-card { padding: 13px; }
  .pa-card-title { font-size: 14px; }
  .pa-card-btn { padding: 11px 12px; font-size: 13px; }
  .pa-mode { font-size: 12px; flex-basis: 100%; }
}