/* Дизайн-система QuickOffer · проверка ДЗ. Токены — reference/DESIGN_BRIEF.md (визуальный язык main.png). */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- токены: светлая тема ---------- */
:root {
  color-scheme: light;
  --bg-app: #F4F6FA;
  --bg-backdrop: #DADBE4;
  --surface: #FFFFFF;
  --surface-muted: #E2E4E9;
  --surface-hover: #EEF0F5;
  --border: #D3D6DC;
  --track: #E4E5EA;
  --text-primary: #1F2025;
  --text-secondary: #6B6F79;   /* в брифе #8E919A: 3:1 на фоне, ниже WCAG AA — затемнён */
  --text-on-primary: #FFFFFF;
  --primary: #2B6CF6;
  --primary-hover: #1F5BE0;
  --primary-soft: #4D7EFF;
  --primary-tint: #E6EEFE;
  --accent-coral: #F2757B;
  --accent-orange: #F97A33;
  --accent-violet: #A9A6F5;
  --accent-violet-strong: #8B5CF6;
  --accent-amber: #F5B83D;
  --accent-mint: #2FB9AE;
  --success: #22C55E;
  --danger: #E5484D;
  --dot-grid: rgba(217, 220, 227, 0.6);

  /* бейджи: пастельный фон + насыщенный текст того же оттенка */
  --badge-blue-bg: #E6EEFE;   --badge-blue-fg: #1F56C9;
  --badge-coral-bg: #FDE8E9;  --badge-coral-fg: #C2343B;
  --badge-orange-bg: #FEEBDD; --badge-orange-fg: #B4501A;
  --badge-violet-bg: #EEEBFE; --badge-violet-fg: #6236D6;
  --badge-green-bg: #E3F6EA;  --badge-green-fg: #167A3A;
  --badge-gray-bg: #E9EBEF;   --badge-gray-fg: #4A4E57;
  --badge-mint-bg: #D9F5F2;   --badge-mint-fg: #13756E;

  --mesh-warm:
    radial-gradient(60% 55% at 12% 10%, #CED0F4 0%, transparent 70%),
    radial-gradient(55% 70% at 100% 38%, #FF8A7A 0%, transparent 72%),
    radial-gradient(60% 55% at 6% 100%, #F9B8D0 0%, transparent 72%),
    radial-gradient(80% 80% at 45% 55%, #F6EDF5 0%, #F6EDF5 30%, transparent 75%),
    #F3D6E3;
  --mesh-cool:
    radial-gradient(60% 75% at 0% 55%, #7EE7E0 0%, transparent 72%),
    radial-gradient(55% 60% at 100% 10%, #8FD3FF 0%, transparent 72%),
    radial-gradient(55% 70% at 100% 85%, #6FA2FF 0%, transparent 72%),
    radial-gradient(70% 70% at 45% 40%, #E4F6FC 0%, #E4F6FC 25%, transparent 75%),
    #BDE6F4;
  --mesh-ink: #1F2025;
  --glass: rgba(255, 255, 255, 0.5);

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --radius-full: 9999px;

  --shadow-card: 0 1px 2px rgba(20, 24, 40, 0.04), 0 8px 24px rgba(20, 24, 40, 0.05);
  --shadow-float: 0 2px 4px rgba(20, 24, 40, 0.04), 0 12px 32px rgba(20, 24, 40, 0.08);
  --shadow-modal: 0 24px 64px rgba(20, 24, 40, 0.16);
  --scrim: rgba(15, 18, 30, 0.3);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  --font: "Manrope", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sidebar-w: 248px;
  --aside-w: 360px;
}

/* ---------- токены: тёмная тема ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-app: #0E0F13; --bg-backdrop: #08090C; --surface: #17181D; --surface-muted: #202228;
    --surface-hover: #1D1F25; --border: #2A2C33; --track: #2A2C33;
    --text-primary: #F2F3F5; --text-secondary: #8B8F99; --primary: #4D7EFF; --primary-hover: #6A93FF;
    --primary-tint: #1B2647; --dot-grid: rgba(64, 68, 80, 0.55);
    --badge-blue-bg: #1B2647;   --badge-blue-fg: #8FB0FF;
    --badge-coral-bg: #3A1D21;  --badge-coral-fg: #FF9BA0;
    --badge-orange-bg: #3A2416; --badge-orange-fg: #FFAE7A;
    --badge-violet-bg: #2A2347; --badge-violet-fg: #C3B6FF;
    --badge-green-bg: #15301F;  --badge-green-fg: #7BE09F;
    --badge-gray-bg: #25272E;   --badge-gray-fg: #B4B8C2;
    --badge-mint-bg: #133330;   --badge-mint-fg: #7FDDD4;
    --mesh-warm:
      radial-gradient(60% 55% at 12% 10%, #5B5FC7 0%, transparent 70%),
      radial-gradient(55% 70% at 100% 38%, #D9534A 0%, transparent 72%),
      radial-gradient(60% 55% at 6% 100%, #B84A86 0%, transparent 72%),
      radial-gradient(80% 80% at 45% 55%, #1E2030 0%, #1E2030 25%, transparent 75%),
      #2A1E2E;
    --mesh-cool:
      radial-gradient(60% 75% at 0% 55%, #1D9C94 0%, transparent 72%),
      radial-gradient(55% 60% at 100% 10%, #2A86C9 0%, transparent 72%),
      radial-gradient(55% 70% at 100% 85%, #2F5FD0 0%, transparent 72%),
      radial-gradient(70% 70% at 45% 40%, #1E2030 0%, #1E2030 25%, transparent 75%),
      #172A36;
    --mesh-ink: #F2F3F5;
    --glass: rgba(255, 255, 255, 0.12);
    --shadow-card: 0 0 0 1px var(--border);
    --shadow-float: 0 0 0 1px var(--border), 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-modal: 0 0 0 1px var(--border), 0 24px 64px rgba(0, 0, 0, 0.6);
    --scrim: rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #0E0F13; --bg-backdrop: #08090C; --surface: #17181D; --surface-muted: #202228;
  --surface-hover: #1D1F25; --border: #2A2C33; --track: #2A2C33;
  --text-primary: #F2F3F5; --text-secondary: #8B8F99; --primary: #4D7EFF; --primary-hover: #6A93FF;
  --primary-tint: #1B2647; --dot-grid: rgba(64, 68, 80, 0.55);
  --badge-blue-bg: #1B2647;   --badge-blue-fg: #8FB0FF;
  --badge-coral-bg: #3A1D21;  --badge-coral-fg: #FF9BA0;
  --badge-orange-bg: #3A2416; --badge-orange-fg: #FFAE7A;
  --badge-violet-bg: #2A2347; --badge-violet-fg: #C3B6FF;
  --badge-green-bg: #15301F;  --badge-green-fg: #7BE09F;
  --badge-gray-bg: #25272E;   --badge-gray-fg: #B4B8C2;
  --badge-mint-bg: #133330;   --badge-mint-fg: #7FDDD4;
  --mesh-warm:
    radial-gradient(60% 55% at 12% 10%, #5B5FC7 0%, transparent 70%),
    radial-gradient(55% 70% at 100% 38%, #D9534A 0%, transparent 72%),
    radial-gradient(60% 55% at 6% 100%, #B84A86 0%, transparent 72%),
    radial-gradient(80% 80% at 45% 55%, #1E2030 0%, #1E2030 25%, transparent 75%),
    #2A1E2E;
  --mesh-cool:
    radial-gradient(60% 75% at 0% 55%, #1D9C94 0%, transparent 72%),
    radial-gradient(55% 60% at 100% 10%, #2A86C9 0%, transparent 72%),
    radial-gradient(55% 70% at 100% 85%, #2F5FD0 0%, transparent 72%),
    radial-gradient(70% 70% at 45% 40%, #1E2030 0%, #1E2030 25%, transparent 75%),
    #172A36;
  --mesh-ink: #F2F3F5;
  --glass: rgba(255, 255, 255, 0.12);
  --shadow-card: 0 0 0 1px var(--border);
  --shadow-float: 0 0 0 1px var(--border), 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 0 0 1px var(--border), 0 24px 64px rgba(0, 0, 0, 0.6);
  --scrim: rgba(0, 0, 0, 0.55);
}

/* ---------- основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font: 400 15px/1.5 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
button, input, select, textarea { font: inherit; color: inherit; }
.icon { flex: none; display: block; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-secondary); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible { outline-offset: 0; }

/* типографика */
.t-hero { font-size: 48px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.t-page { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.t-card { font-size: 18px; font-weight: 500; line-height: 1.3; }
.t-body { font-size: 15px; line-height: 1.5; }
.t-secondary { font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.t-caption { font-size: 13px; font-weight: 500; line-height: 1.3; }

/* ---------- каркас ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: var(--s-6);
  padding: var(--s-8) var(--s-4) var(--s-6);
  background: var(--bg-app);
  border-right: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-3); }
.brand-logo {
  width: 40px; height: 40px; border-radius: var(--radius-full); flex: none;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(232, 120, 46, 0.18);
}
.brand-logo svg { display: block; }
.brand-name { font-weight: 500; font-size: 15px; line-height: 1.2; }
.brand-sub { font-size: 13px; color: var(--text-secondary); }

.nav { display: grid; gap: var(--s-1); }
.nav-label { padding: var(--s-4) var(--s-4) var(--s-2); font-size: 13px; color: var(--text-secondary); }
.nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  height: 44px; padding: 0 var(--s-4);
  border-radius: var(--radius-full);
  color: var(--text-secondary); font-weight: 500;
}
.nav-item:hover { color: var(--text-primary); background: var(--surface-hover); }
.nav-item:active { transform: scale(0.98); }
.nav-item.is-active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-card); }
.nav-item.is-active .icon { color: var(--primary); }
.nav-count {
  margin-left: auto; min-width: 24px; height: 24px; padding: 0 var(--s-2);
  display: grid; place-items: center; border-radius: var(--radius-full);
  background: var(--badge-coral-bg); color: var(--badge-coral-fg); font-size: 12px; font-weight: 600;
}
.sidebar-foot { margin-top: auto; display: grid; gap: var(--s-4); }
.me {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2); border-radius: var(--radius-full);
}
.me-name { font-weight: 500; font-size: 14px; line-height: 1.2; }
.me-role { font-size: 13px; color: var(--text-secondary); }

.main { min-width: 0; padding: var(--s-10); }
.page-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  margin-bottom: var(--s-8);
}
.page-heading { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.page-heading .t-secondary { margin-top: 6px; }
.header-actions { display: flex; align-items: center; gap: var(--s-3); }
.header-actions .select + form .search, .header-actions .select ~ form .search { width: 240px; }
.page-heading .t-secondary { white-space: nowrap; }
.icon-btn.menu-toggle { display: none; }

.layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-w); min-height: 100vh; }
.aside {
  padding: var(--s-10) var(--s-6);
  border-left: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.stack { display: grid; gap: var(--s-4); align-content: start; }
.section { margin-top: var(--s-12); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* ---------- карточки ---------- */
.card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--s-8);
  min-width: 0;
}
.card--md { border-radius: var(--radius-lg); padding: var(--s-6); }
.card--muted { background: var(--surface-muted); box-shadow: none; }
.card--mesh-warm, .card--mesh-cool { overflow: hidden; isolation: isolate; color: var(--mesh-ink); box-shadow: none; }
.card--mesh-warm { background: var(--mesh-warm); }
.card--mesh-cool { background: var(--mesh-cool); }
.card--mesh-warm::after, .card--mesh-cool::after {
  /* лёгкий шум поверх градиента */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.card-head + * { margin-top: var(--s-6); }
.card-sub { margin-top: 6px; }
.card-link { display: block; }
.card-link:hover { color: inherit; }
.mesh-metric { display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; }
.mesh-metric .t-secondary { color: color-mix(in srgb, var(--mesh-ink) 72%, transparent); margin-top: var(--s-2); }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 44px; padding: 0 var(--s-5);
  border: 0; border-radius: var(--radius-full);
  font-weight: 500; font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: transform 150ms var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--primary); color: var(--text-on-primary); }
.btn--primary:hover { background: var(--primary-hover); color: var(--text-on-primary); }
.btn--secondary { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-card); }
.btn--secondary:hover { background: var(--surface-hover); }
.btn--ghost { height: auto; padding: 0; background: none; color: var(--text-secondary); }
.btn--ghost:hover { color: var(--text-primary); }
.btn--sm { height: 36px; padding: 0 var(--s-4); font-size: 14px; }
.btn--block { width: 100%; }

.icon-btn {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-full);
  background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-card);
  cursor: pointer; position: relative;
  transition: transform 150ms var(--ease);
}
.icon-btn:hover { color: var(--primary); }
.icon-btn:active { transform: scale(0.96); }
.icon-btn--sm { width: 40px; height: 40px; }
.icon-btn--flat { box-shadow: none; background: transparent; }
.icon-btn--flat:hover { background: var(--surface-hover); }
.icon-btn--glass {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  background: var(--glass); color: var(--mesh-ink); box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.icon-btn .dot {
  position: absolute; top: 10px; right: 11px; width: 8px; height: 8px;
  border-radius: var(--radius-full); background: var(--accent-coral); box-shadow: 0 0 0 2px var(--surface);
}

/* ---------- пилюли, сегменты, StatPill ---------- */
.segmented { display: inline-flex; gap: var(--s-1); padding: var(--s-1); border-radius: var(--radius-full); background: var(--surface-muted); }
.segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented > * { flex: none; }
.segmented--vertical { flex-direction: column; background: none; padding: 0; gap: var(--s-2); }
.seg {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 36px; padding: 0 var(--s-4); border-radius: var(--radius-full);
  color: var(--text-secondary); font-weight: 500; font-size: 14px; white-space: nowrap;
}
.seg:hover { color: var(--text-primary); }
.seg:active { transform: scale(0.98); }
.seg.is-active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-card); }
.segmented--vertical .seg.is-active { background: var(--primary); color: var(--text-on-primary); box-shadow: none; }
.seg .seg-count { color: var(--text-secondary); font-weight: 500; }
.seg.is-active .seg-count { color: var(--primary); }

.tabs { display: flex; gap: var(--s-1); flex-wrap: wrap; }

.stat-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 44px; padding: 0 var(--s-5); border-radius: var(--radius-full);
  background: var(--surface); box-shadow: var(--shadow-float); font-weight: 500;
}
.stat-pill .icon { color: var(--accent-coral); }

/* ---------- поля ---------- */
.search {
  display: flex; align-items: center; gap: var(--s-3);
  width: 320px; height: 48px; padding: 0 var(--s-5);
  border-radius: var(--radius-full); background: var(--surface-muted); color: var(--text-secondary);
}
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text-primary); }
.search input::placeholder { color: var(--text-secondary); }
.search:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.search--sm { height: 40px; width: 260px; }

.field { display: grid; gap: var(--s-2); }
.field label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.input {
  width: 100%; height: 48px; padding: 0 var(--s-4);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text-primary);
}
.input:hover { border-color: var(--text-secondary); }
.input:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }

.check {
  appearance: none; width: 20px; height: 20px; margin: 0; flex: none; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 6px; background: var(--surface);
  display: inline-grid; place-items: center;
}
.check:hover { border-color: var(--text-secondary); }
.check:checked { background: var(--primary); border-color: var(--primary); }
.check:checked::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}

/* Select на <details>: работает без скриптов */
.select { position: relative; }
.select > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 48px; padding: 0 var(--s-5); border-radius: var(--radius-full);
  background: var(--surface); box-shadow: var(--shadow-card); font-weight: 500; white-space: nowrap;
}
.select > summary::-webkit-details-marker { display: none; }
.select > summary .muted { font-weight: 400; color: var(--text-primary); }
.select > summary:active { transform: scale(0.98); }
.select[open] > summary .icon { transform: rotate(180deg); }
.select--sm > summary { height: 36px; padding: 0 var(--s-4); font-size: 14px; }
.menu {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; width: max-content; max-width: 380px;
  max-height: 60vh; overflow-y: auto;
  display: grid; gap: 2px; padding: var(--s-2);
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-float);
}
.menu a, .menu button {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: 10px var(--s-3); border: 0; border-radius: var(--radius-md);
  background: none; text-align: left; cursor: pointer; font-size: 14px;
}
.menu a:hover, .menu button:hover { background: var(--surface-hover); color: var(--text-primary); }
.menu a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
/* у правого края экрана меню открывается влево */
.header-actions .menu, .card-head .menu, .section-head .menu { left: auto; right: 0; }
.menu .is-active { color: var(--primary); }

/* ---------- бейджи, прогресс, кольцо ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: var(--badge-gray-bg); color: var(--badge-gray-fg);
}
.badge--blue { background: var(--badge-blue-bg); color: var(--badge-blue-fg); }
.badge--coral { background: var(--badge-coral-bg); color: var(--badge-coral-fg); }
.badge--orange { background: var(--badge-orange-bg); color: var(--badge-orange-fg); }
.badge--violet { background: var(--badge-violet-bg); color: var(--badge-violet-fg); }
.badge--green { background: var(--badge-green-bg); color: var(--badge-green-fg); }

.progress-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(56px, 160px) 40px 24px; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; }
.aside .progress-row { grid-template-columns: minmax(0, 1fr) 88px 40px 24px; }
.aside .progress-row .label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; line-height: 1.3; }
.icon-fill { fill: currentColor; }
.progress-row .label { font-size: 17px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress { display: block; height: 8px; border-radius: var(--radius-full); background: var(--track); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.progress--coral > span { background: var(--accent-coral); }
.progress-value { font-size: 13px; font-weight: 500; text-align: right; color: var(--text-secondary); }
.trend {
  width: 20px; height: 20px; border-radius: var(--radius-full); display: grid; place-items: center;
  color: #fff; background: var(--primary); position: relative;
}
.trend--down { background: var(--accent-orange); }
.progress-row .trend::before {
  content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 1px; background: var(--border);
}

.ring { position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-track { stroke: var(--track); }
.ring-fill { stroke: var(--accent-coral); }
.ring .avatar { width: 124px; height: 124px; font-size: 40px; }
.ring-badge {
  position: absolute; right: 18px; bottom: 18px; width: 32px; height: 32px; border-radius: var(--radius-full);
  display: grid; place-items: center; background: var(--text-primary); color: var(--surface); box-shadow: 0 0 0 3px var(--surface);
}

/* ---------- аватары ---------- */
.avatar {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-full);
  display: grid; place-items: center; font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  background: var(--badge-gray-bg); color: var(--badge-gray-fg);
}
.avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.avatar--coral { background: var(--badge-coral-bg); color: var(--badge-coral-fg); }
.avatar--violet { background: var(--badge-violet-bg); color: var(--badge-violet-fg); }
.avatar--blue { background: var(--badge-blue-bg); color: var(--badge-blue-fg); }
.avatar--mint { background: var(--badge-mint-bg); color: var(--badge-mint-fg); }
.avatar--amber { background: var(--badge-orange-bg); color: var(--badge-orange-fg); }
.avatar-group { display: flex; }
.avatar-group .avatar { box-shadow: 0 0 0 2px var(--surface); }
.avatar-group .avatar + .avatar { margin-left: -6px; }

/* ---------- таблица ---------- */
.table-card { padding: var(--s-2) 0 0; overflow: visible; }
.table-card .table-scroll { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-6) var(--s-8) var(--s-4); }
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--s-3) var(--s-3); text-align: left; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--text-secondary); background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.table td { height: 64px; padding: var(--s-2) var(--s-3); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: var(--s-8); }
.table th:last-child, .table td:last-child { padding-right: var(--s-6); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover td { background: var(--bg-app); }
.table tbody tr.is-selected td { background: var(--primary-tint); }
.table .right { text-align: right; }
.table .num, .table td:last-child { white-space: nowrap; }
.table td:last-child { width: 1%; }
.table .truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-person { display: flex; align-items: center; gap: var(--s-3); min-width: 180px; }
.cell-person .name { font-weight: 500; }
.cell-person .sub { font-size: 13px; color: var(--text-secondary); }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-8) var(--s-6); color: var(--text-secondary); font-size: 14px; }
.pager { display: flex; align-items: center; gap: var(--s-2); }

.score { display: inline-flex; align-items: center; gap: 3px; }
.score i { width: 4px; height: 16px; border-radius: 2px; background: var(--track); }
.score i.on { background: var(--primary); }
.score-label { margin-left: var(--s-2); font-size: 13px; color: var(--text-secondary); }

.bulk-bar {
  position: fixed; left: 50%; bottom: var(--s-6); z-index: 40;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-6);
  border-radius: var(--radius-full); background: var(--text-primary); color: var(--surface);
  box-shadow: var(--shadow-modal);
  transform: translate(-50%, 0); opacity: 1;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.bulk-bar[hidden] { display: flex; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; }
.bulk-bar .btn--secondary { box-shadow: none; }

/* ---------- список (как My meetings) ---------- */
.list { display: grid; container-type: inline-size; }
.list-item {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) 24px; gap: var(--s-4); align-items: start;
  padding: var(--s-6) 0; border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { color: inherit; }
.list-item:hover .list-title { color: var(--primary); }
.list-when { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.list-when strong { display: block; color: var(--text-primary); font-weight: 600; }
.list-title { font-size: 18px; font-weight: 500; line-height: 1.3; }
.list-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: var(--text-secondary); }
.list-arrow { color: var(--text-primary); margin-top: 2px; }
@container (max-width: 380px) {
  .list-item { grid-template-columns: minmax(0, 1fr) 24px; gap: var(--s-2) var(--s-3); }
  .list-when { grid-column: 1; display: flex; gap: var(--s-2); }
  .list-when strong { display: inline; }
  .list-item > span:nth-child(2) { grid-column: 1; }
  .list-arrow { grid-column: 2; grid-row: 1; }
}
.chart-wrap { container-type: inline-size; }
@container (max-width: 560px) { .chart-axis { --axis-even: hidden; } }

/* ---------- KPI ---------- */
.kpi { display: grid; gap: var(--s-3); }
.kpi-label { font-size: 14px; color: var(--text-secondary); }
.kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
.kpi-value { font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; }
.delta--up { color: var(--badge-green-fg); }
.delta--down { color: var(--badge-orange-fg); }
.sparkline { width: 96px; height: 36px; }
.sparkline path { fill: none; stroke: var(--accent-coral); stroke-width: 2; }

/* ---------- графики ---------- */
.chart { position: relative; }
.chart { margin-top: var(--s-12); }
.chart-area { position: relative; }
.chart-area::before {
  /* точечная сетка с затуханием к краям; маска только на фоне, чтобы не срезать подсказку */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1.2px);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.chart-svg { position: relative; display: block; width: 100%; overflow: visible; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.chart-line--coral { stroke: var(--accent-coral); }
.chart-line--violet { stroke: var(--accent-violet); }
.chart-line--blue { stroke: var(--primary); }
.chart-line--faint { opacity: 0.45; }
.chart-dot {
  position: absolute; z-index: 2; width: 18px; height: 18px; transform: translate(-50%, -50%);
  border-radius: var(--radius-full); background: var(--surface); border: 2.5px solid var(--accent-violet-strong);
  pointer-events: none;
}
.chart-line { vector-effect: non-scaling-stroke; }
.chart-guide { stroke: var(--border); stroke-dasharray: 3 4; }
.chart-axis { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-3); font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.chart-axis span:nth-child(even) { visibility: var(--axis-even, visible); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-6); font-size: 15px; color: var(--text-secondary); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.chart-legend i { width: 12px; height: 12px; border-radius: 3px; }
.sw-coral { background: var(--accent-coral); }
.sw-violet { background: var(--accent-violet-strong); }
.sw-blue { background: var(--primary); }
.sw-green { background: var(--success); }
.sw-amber { background: var(--accent-amber); }
.chart-tooltip {
  position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 18px));
  padding: var(--s-3) var(--s-6); border-radius: var(--radius-full);
  background: var(--surface); box-shadow: var(--shadow-float); text-align: center; white-space: nowrap; pointer-events: none;
}
.chart-tooltip strong { display: block; font-weight: 500; font-size: 17px; line-height: 1.3; }
.chart-tooltip span { font-size: 14px; color: var(--text-secondary); }
.chart-total { text-align: right; }
.chart-total .t-hero { font-size: 56px; }

/* ---------- панель справа, модалка ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 50; background: var(--scrim);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 1; transition: opacity 200ms var(--ease);
}
.scrim[hidden] { display: block; opacity: 0; pointer-events: none; }
.drawer {
  position: fixed; top: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 60;
  width: min(440px, calc(100vw - 24px)); overflow-y: auto;
  padding: var(--s-8); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--shadow-modal);
  transform: translateX(0); transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.drawer[hidden] { display: block; transform: translateX(calc(100% + 24px)); opacity: 0; pointer-events: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); color: var(--text-secondary); font-size: 14px; }
.drawer-person { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-6) 0; }
.drawer-actions { display: flex; gap: var(--s-2); }
.drawer-actions .btn--primary { flex: 1; }
.square-btn {
  width: 48px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radius-md);
  background: var(--bg-app); color: var(--text-primary); cursor: pointer;
}
.square-btn:hover { background: var(--surface-hover); color: var(--primary); }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-3) var(--s-4); font-size: 14px; }
.kv dt { color: var(--text-secondary); }
.kv dd { margin: 0; }

dialog.modal {
  width: min(520px, calc(100vw - 32px)); padding: var(--s-8); border: 0;
  border-radius: var(--radius-lg); background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-modal);
}
dialog.modal::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.modal[open] { animation: modal-in 200ms var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-8); }

/* ---------- пустые состояния, загрузка ---------- */
.empty { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-12) var(--s-6); text-align: center; }
.empty-orb { width: 96px; height: 96px; border-radius: var(--radius-full); background: var(--mesh-cool); margin-bottom: var(--s-3); }
.empty-orb--warm { background: var(--mesh-warm); }
.empty .t-secondary { max-width: 42ch; }
.skeleton { border-radius: var(--radius-md); background: var(--surface-muted); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* ---------- витрина /ui ---------- */
.ui-section { margin-top: var(--s-12); }
.ui-section > h2 { margin-bottom: var(--s-4); }
.ui-note { font-size: 13px; color: var(--text-secondary); margin-top: var(--s-2); }

/* ---------- страницы входа ---------- */
.auth { max-width: 400px; margin: 0 auto; padding: 14vh var(--s-4) var(--s-8); }
.auth .card { padding: var(--s-8); }
.auth h1 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: var(--s-3); }
.auth .product { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-6); color: var(--text-secondary); font-size: 14px; }
.hint { color: var(--text-secondary); font-size: 14px; margin: 0 0 var(--s-4); }
.hint.spaced { margin-top: var(--s-6); }
.error {
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius-md);
  background: var(--badge-coral-bg); color: var(--badge-coral-fg); font-size: 14px;
}
.form { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.form label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.form label + input { margin-bottom: var(--s-2); }
.form input:not([type="hidden"]) {
  width: 100%; height: 48px; padding: 0 var(--s-4);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
}
.form input:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }
.form input.code { height: 64px; font-size: 28px; letter-spacing: 0.35em; text-align: center; }
.form button, .auth button.secondary, .auth button.link {
  height: 48px; border: 0; border-radius: var(--radius-full); font-weight: 500; cursor: pointer;
}
.form button { margin-top: var(--s-2); background: var(--primary); color: var(--text-on-primary); }
.form button:hover { background: var(--primary-hover); }
.auth button.secondary { width: 100%; background: var(--surface); box-shadow: var(--shadow-card); }
.auth button.link { height: auto; padding: 0; background: none; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.inline { display: inline; }

/* ---------- Обзор (main.png) ---------- */
.tone-blue { color: var(--primary); }
.tone-coral { color: var(--accent-coral); }
.tone-violet { color: var(--accent-violet-strong); }
.tone-orange { color: var(--accent-orange); }
.ov-top {
  display: grid; gap: var(--s-4);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
}
.ov-profile { grid-row: span 2; padding: var(--s-6) var(--s-6) var(--s-8); display: flex; flex-direction: column; align-items: center; gap: var(--s-6); }
.ov-profile-head { align-self: stretch; }
.ov-profile-head + * { margin-top: 0; }
.ov-profile-name { text-align: center; }
.ov-name { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 6px; }
.ov-pills { display: flex; justify-content: center; gap: var(--s-2); flex-wrap: wrap; margin-top: auto; }
.ov-pills .stat-pill { height: 40px; padding: 0 var(--s-4); }
.ov-top .mesh-metric { min-height: 288px; }
.ov-sources { grid-column: 2 / span 2; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-6) var(--s-8); }
.ov-sources-right { flex-wrap: nowrap; }
.app-icons { display: flex; }
.app-icon {
  width: 52px; height: 52px; border-radius: var(--radius-full); display: grid; place-items: center;
  background: var(--surface); box-shadow: 0 0 0 3px var(--surface-muted), var(--shadow-card);
}
.app-icon + .app-icon { margin-left: -6px; }
.ov-chart { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-4); align-items: stretch; }
.ov-chart .chart { margin-top: 84px; }
.month-switch { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; }
.month, .month-step {
  display: grid; place-items: center; min-width: 56px; height: 44px; padding: 0 var(--s-3);
  border-radius: var(--radius-full); color: var(--text-secondary); font-size: 15px;
}
.month:hover, .month-step:hover { color: var(--text-primary); }
.month:active { transform: scale(0.98); }
.month.is-active { background: var(--primary); color: var(--text-on-primary); }
.month-step { color: var(--text-primary); }
.month-step.is-disabled { color: var(--border); }
.ov-chart-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-top: var(--s-4); }
.ov-chart-foot .chart-legend { margin-top: 0; }
.aside-head { margin-bottom: var(--s-2); }
.aside-more { margin: var(--s-4) 0 0 136px; }
.aside-progress { margin-top: var(--s-6); display: grid; gap: var(--s-4); }

/* ---------- главная наставника ---------- */
.notice { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.notice p { flex: 1; font-size: 15px; }
.dash-kpis .mesh-metric { min-height: 248px; }
.mesh-metric:not(.card--mesh-warm):not(.card--mesh-cool) .icon-btn--glass { background: var(--bg-app); color: var(--text-primary); }
.section-card { margin-top: var(--s-4); }
.where { display: grid; gap: var(--s-2); }
.where-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(60px, 0.8fr) 32px minmax(0, 1.2fr);
  align-items: center; gap: var(--s-4); padding: var(--s-2) 0;
}
.where-row.is-empty .where-name, .where-row.is-empty .where-count { color: var(--text-secondary); }
.where-name { font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
.where-bar { display: block; min-width: 0; }
.where-count { font-size: 15px; font-weight: 600; text-align: right; }
.where-people { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-2); min-width: 0; }
.where-people .more { font-size: 13px; color: var(--text-secondary); }
.where-behind { flex-basis: 100%; font-size: 13px; font-weight: 500; color: var(--badge-coral-fg); white-space: nowrap; }
.queue { display: grid; gap: var(--s-3); min-width: 0; }
.layout-aside > *, .aside > * { min-width: 0; }
.aside { min-width: 0; overflow-wrap: anywhere; }
.queue-item { padding: var(--s-5) var(--s-4) var(--s-4) var(--s-5); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.queue-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.queue-top .list-meta { margin-top: 0; }
.queue-wait { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.queue-wait.is-overdue { color: var(--badge-coral-fg); }
.queue-title { margin-top: var(--s-3); font-size: 17px; font-weight: 500; line-height: 1.3; }
.queue-item .t-secondary { margin-top: 2px; }
.queue-actions .btn--ghost { font-size: 14px; padding: 0; height: 36px; }
.queue-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.queue-actions form { display: contents; }
.people { display: grid; margin-top: var(--s-4); }
.person-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.person-row:last-child { border-bottom: 0; }
.person-name { font-weight: 500; font-size: 15px; }
.person-sub { font-size: 13px; }
.person-flag { grid-column: 2; font-size: 13px; font-weight: 500; }
.tone-orange { color: var(--badge-orange-fg); }
.person-flag.tone-coral { color: var(--badge-coral-fg); }

/* ---------- опросники ---------- */
.mood { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.mood-tile { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); border-radius: var(--radius-lg); background: var(--bg-app); }
.mood-value { display: flex; align-items: baseline; gap: 2px; }
.mood-n { font-size: 13px; }
.problems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); margin-top: var(--s-6); }
.problems h3 { margin-bottom: var(--s-3); }
.problem { display: grid; grid-template-columns: minmax(0, 1fr) 80px 24px; align-items: center; gap: var(--s-3); padding: 6px 0; font-size: 14px; }
.problem-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.problem .num { text-align: right; font-weight: 600; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.quote { margin: 0; padding: var(--s-4); border-radius: var(--radius-lg); background: var(--bg-app); }
.quote blockquote { margin: 0 0 var(--s-2); font-size: 15px; line-height: 1.45; }
.dist { display: grid; gap: 6px; }
.dist-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) 32px; gap: var(--s-3); align-items: center; font-size: 14px; }
.dist-row .num { text-align: right; font-weight: 600; }
.dist-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* клик по ответу: кто его выбрал */
.answer-link { color: inherit; text-decoration: none; cursor: pointer; margin: 0 calc(-1 * var(--s-2)); padding-inline: var(--s-2); border-radius: var(--radius-sm); }
.answer-link:hover { background: var(--surface-hover); }
.answer-link:active { background: var(--surface-muted); }
.answer-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
summary.answer-link { list-style: none; }
summary.answer-link::-webkit-details-marker { display: none; }
.answer-who[open] > summary { background: var(--surface-hover); }
.answer-people { list-style: none; margin: var(--s-1) 0 var(--s-2); padding: 0 0 0 var(--s-3); display: grid; gap: 2px; border-left: 2px solid var(--border); }
.answer-people li { padding: 2px 0; font-size: 14px; }
.dists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.toolbar-plain { padding: 0 0 var(--s-2); }
.table tbody tr.row-static { cursor: default; }
.lock { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }

/* ---------- ученики ---------- */
.th-sort { color: inherit; }
.th-sort:hover, .th-sort.is-active { color: var(--text-primary); }
.cell-topic { display: grid; gap: 6px; min-width: 180px; max-width: 240px; }
.cell-topic .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-progress { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: var(--s-2); font-size: 13px; color: var(--text-secondary); }
.nowrap { flex-wrap: nowrap; white-space: nowrap; }
.table .tone-coral { color: var(--badge-coral-fg); }
#assign-form { display: block; }

/* ---------- карточка ученика ---------- */
.link-quiet { color: inherit; }
.link-quiet:hover { color: var(--primary); }
a.person-row { color: inherit; }
a.person-row:hover .person-name { color: var(--primary); }
.crumbs { margin: calc(-1 * var(--s-4)) 0 var(--s-4); }
.crumbs a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text-secondary); }
.crumbs a:hover { color: var(--primary); }
.sc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6) var(--s-8); align-items: start; }
.sc-head .sc-stats { grid-column: 1 / -1; grid-row: 2; }
.sc-head .sc-mentor { grid-column: 2; grid-row: 1; justify-items: end; }
.sc-person { display: flex; gap: var(--s-4); align-items: flex-start; }
.sc-badges { margin-top: var(--s-3); }
.sc-badges .t-secondary, .sc-badges .tone-coral { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.sc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.sc-stat { display: grid; gap: 6px; align-content: start; padding: var(--s-4); border-radius: var(--radius-lg); background: var(--bg-app); min-width: 0; }
.sc-stat .kpi-value { font-size: 28px; }
.sc-stat-text { font-size: 17px; }
.sc-stat-text { font-weight: 500; line-height: 1.3; }
.sc-mentor { display: grid; gap: var(--s-2); }
.input--sm { height: 36px; border-radius: var(--radius-full); padding: 0 var(--s-3); width: auto; max-width: 160px; }
.path { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
.path-step { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.path-step--todo { background: var(--bg-app); box-shadow: none; }
.path-step--todo .path-name { color: var(--text-secondary); }
.path-step.is-current { box-shadow: 0 0 0 2px var(--primary), var(--shadow-card); }
.path-step--done .progress > span { background: var(--success); }
.path-name { font-weight: 500; font-size: 15px; line-height: 1.3; min-height: 2.6em; }
.path-meta { font-size: 13px; color: var(--text-secondary); }
.sc-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-4); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; max-height: 360px; overflow-y: auto; }
.timeline li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: 14px; }
.timeline li:last-child { border-bottom: 0; }
.timeline li.t-secondary { display: block; }
.timeline-icon { width: 28px; height: 28px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--bg-app); }
.timeline-when { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.tone-green { color: var(--badge-green-fg); }
.hw { padding: 0; }
.hw-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); }
.hw-summary::-webkit-details-marker { display: none; }
.hw-title { display: grid; gap: 2px; min-width: 0; }
.hw-title .t-body { font-weight: 500; }
.hw-facts { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; }
.hw-score { font-size: 13px; color: var(--text-secondary); padding: 2px 10px; border-radius: var(--radius-full); background: var(--bg-app); }
.hw[open] > .hw-summary .hw-chevron { transform: rotate(180deg); }
.thread { display: grid; gap: var(--s-3); padding: 0 var(--s-6) var(--s-6); }
.msg { max-width: 760px; padding: var(--s-4); border-radius: var(--radius-lg); background: var(--bg-app); }
.msg--teacher { margin-left: auto; background: var(--primary-tint); }
.msg--auto { opacity: 0.7; }
.msg-head { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; font-size: 14px; margin-bottom: var(--s-2); }
.msg-body { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.msg-body p { margin: 0 0 var(--s-2); }
.msg-body a { color: var(--primary); text-decoration: underline; }
.msg-files { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-card); font-size: 13px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip.is-disabled { opacity: 0.6; }
.wrong summary { cursor: pointer; color: var(--badge-coral-fg); font-size: 14px; }
.wrong ul { margin: var(--s-2) 0 0; padding-left: var(--s-4); font-size: 13px; color: var(--text-secondary); max-width: 360px; white-space: normal; }
.survey-card + .survey-card { margin-top: var(--s-3); }
.kv--wide { grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1fr); margin-top: var(--s-4); }

/* ---------- попытки тестов ---------- */
.test[data-empty] .hw-summary { cursor: default; }
.test-fact { font-size: 14px; }
.attempts { display: grid; gap: var(--s-2); padding: 0 var(--s-6) var(--s-6); }
.attempt { border-radius: var(--radius-lg); background: var(--bg-app); }
.attempt-summary {
  list-style: none; cursor: pointer; display: grid; align-items: center; gap: var(--s-4);
  grid-template-columns: 96px 130px 110px 56px 100px 90px minmax(0, 1fr) 16px; padding: var(--s-3) var(--s-4); font-size: 14px;
}
.attempt-summary::-webkit-details-marker { display: none; }
.attempt[open] > .attempt-summary .hw-chevron { transform: rotate(180deg); }
.attempt-n { font-weight: 600; }
.attempt-score { font-weight: 600; font-size: 15px; }
.attempt-diff { text-align: right; }
.attempt-empty { padding: 0 var(--s-4) var(--s-4); }
.questions { list-style: none; margin: 0; padding: 0 var(--s-4) var(--s-4); display: grid; gap: var(--s-2); }
.question { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-3); border-radius: var(--radius-md); background: var(--surface); }
.q-mark { width: 24px; height: 24px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--badge-green-bg); color: var(--badge-green-fg); }
.question.is-wrong .q-mark { background: var(--badge-coral-bg); color: var(--badge-coral-fg); }
.q-title { font-weight: 500; font-size: 14px; line-height: 1.4; }
.q-line { font-size: 13px; margin-top: 4px; overflow-wrap: anywhere; }
.q-time { font-size: 12px; white-space: nowrap; }

/* ---------- лента и карточка сдачи ---------- */
.cell-lesson { display: grid; max-width: 260px; }
.cell-lesson .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cell-lesson .sub, .sub-line .sub { font-size: 13px; color: var(--text-secondary); }
.sub-line { display: grid; }
.sub-head { display: flex; justify-content: space-between; gap: var(--s-6); align-items: flex-start; flex-wrap: wrap; }
.sub-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.sub-actions form { display: contents; }
.sub-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: var(--s-4); align-items: start; }
.thread--flat { padding: 0; margin-top: var(--s-4); }
.ai-box { display: flex; gap: var(--s-4); align-items: center; margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--radius-lg); border: 1px dashed var(--border); }
.ai-orb { width: 44px; height: 44px; flex: none; border-radius: var(--radius-full); background: var(--mesh-warm); }
.assignment { margin-top: var(--s-3); font-size: 14px; }
.other-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.other-row:last-child { border-bottom: 0; }
.other-row .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.manage-note { padding: var(--s-4) var(--s-8) var(--s-6); font-size: 14px; }
.table--compact td { height: 48px; font-size: 14px; }

/* ---------- настройки ---------- */
.switch-row { display: flex; align-items: flex-start; gap: var(--s-3); font-size: 15px; cursor: pointer; }
.switch-row .check { margin-top: 2px; }
.checklist { display: grid; gap: var(--s-3); max-height: 360px; overflow-y: auto; }
.input--area { height: auto; padding: var(--s-3) var(--s-4); resize: vertical; }
.input--name { max-width: 200px; }
.input--tg { max-width: 150px; }
.settings-actions { display: flex; justify-content: flex-end; margin-top: var(--s-4); }
.notice-error { margin-bottom: var(--s-4); }
.settings-tabs { margin-bottom: var(--s-6); }
.projects-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.projects-grid .checklist { margin-top: var(--s-2); }
.settings-tabs .seg { gap: 6px; }
.sc-mentor-label { margin-top: var(--s-3); }
code { font-size: 13px; padding: 2px 6px; border-radius: 6px; background: var(--bg-app); }

/* ---------- баги и тест-кейсы ---------- */
.artifact { border-top: 1px solid var(--border); }
.artifact:first-of-type { margin-top: var(--s-4); }
.artifact-head { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; }
.artifact-head::-webkit-details-marker { display: none; }
.artifact-key { font-weight: 600; font-size: 14px; color: var(--primary); }
.artifact-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-kv { margin: 0 0 var(--s-3); }
.artifact-body { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); border-radius: var(--radius-md); background: var(--bg-app); font-size: 14px; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.steps { margin: 0 0 var(--s-4); padding-left: var(--s-6); display: grid; gap: var(--s-2); }
.steps li { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); padding: var(--s-3); border-radius: var(--radius-md); background: var(--bg-app); font-size: 14px; }
.step-col { display: grid; gap: 2px; align-content: start; }

/* ---------- значки Jira / Zephyr ---------- */
.jira-type, .jira-prio { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; }
.lozenge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.lozenge--grey { background: #DFE1E6; color: #42526E; }
.lozenge--blue { background: #DEEBFF; color: #0747A6; }
.lozenge--green { background: #E3FCEF; color: #006644; }
.lozenge--orange { background: #FF8B00; color: #fff; }
:root[data-theme="dark"] .lozenge--grey { background: #3B4252; color: #C7D0DD; }
:root[data-theme="dark"] .lozenge--blue { background: #1C2B4A; color: #85B8FF; }
:root[data-theme="dark"] .lozenge--green { background: #1C3329; color: #7EE2B8; }
.artifact-row { list-style: none; cursor: pointer; display: grid; grid-template-columns: 16px auto minmax(0, 1fr) 16px auto auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; }
.artifact-row::-webkit-details-marker { display: none; }
.artifact-row:hover .artifact-title { color: var(--primary); }
.artifact-author { font-size: 13px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.artifact-folder { display: flex; align-items: center; gap: 6px; margin: var(--s-5) 0 var(--s-1); font-size: 14px; font-weight: 600; }
.artifact-empty { margin-top: var(--s-4); }

/* ---------- активность на главной ---------- */
:root { --chart-in: #F2757B; --chart-out: #2B6CF6; --st-good: #0CA30C; --st-warn: #FAB219; --st-serious: #EC835A; }
:root[data-theme="dark"] { --chart-in: #E5626A; --chart-out: #4D7EFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chart-in: #E5626A; --chart-out: #4D7EFF; } }
.act-tabs { margin: var(--s-4) 0; }
.act-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.act-tile { position: relative; display: grid; gap: var(--s-1); padding: var(--s-5); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.act-tile-label { display: flex; align-items: center; gap: var(--s-2); font-size: 13px; color: var(--text-secondary); }
.act-tile-value { font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.act-tile-sub { font-size: 12px; color: var(--text-secondary); }
.act-spark { display: block; width: 100%; height: 26px; margin-top: var(--s-1); }
.act-spark polyline { fill: none; stroke: var(--chart-in); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.act-card { padding: var(--s-6); overflow-x: auto; }
.act-card .act-chart { min-width: 560px; }
.act-chart { display: block; width: 100%; height: auto; overflow: visible; }
.act-chart .grid { stroke: var(--border); stroke-width: 1; opacity: 0.6; }
.act-chart .tick { font-size: 11px; fill: var(--text-secondary); font-variant-numeric: tabular-nums; }
.act-chart .bar { transition: opacity 120ms ease; }
.act-chart .bar:hover { opacity: 0.75; }
.bar-in { fill: var(--chart-in); } .bar-out { fill: var(--chart-out); }
.bar-good { fill: var(--st-good); } .bar-warn { fill: var(--st-warn); } .bar-serious { fill: var(--st-serious); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sw-in { background: var(--chart-in); } .sw-out { background: var(--chart-out); }
.sw-good { background: var(--st-good); } .sw-warn { background: var(--st-warn); } .sw-serious { background: var(--st-serious); }
.act-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); font-size: 13px; }
.act-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.act-table { margin-top: var(--s-4); font-size: 13px; }
.act-table summary { cursor: pointer; color: var(--text-secondary); }
.act-table summary:hover { color: var(--text-primary); }
.act-table summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.act-table table { margin-top: var(--s-3); }
.act-headline { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.heat { display: grid; gap: 6px; }
.heat-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr 120px; align-items: center; gap: var(--s-4); }
.heat-head { font-size: 12px; color: var(--text-secondary); }
.heat-name { font-size: 14px; color: var(--text-primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat-name:hover { color: var(--primary); }
.heat-name:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.heat-cells { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.heat-day { text-align: center; font-variant-numeric: tabular-nums; }
.heat-day.is-weekend { opacity: 0.6; }
.heat-cell { display: block; aspect-ratio: 1; max-height: 26px; border-radius: 5px; }
.heat-cell.lvl-0 { background: var(--surface-muted); }
.heat-cell.lvl-1 { background: color-mix(in srgb, var(--chart-out) 30%, var(--surface)); }
.heat-cell.lvl-2 { background: color-mix(in srgb, var(--chart-out) 60%, var(--surface)); }
.heat-cell.lvl-3 { background: var(--chart-out); }
.heat-idle { font-size: 13px; text-align: right; color: var(--text-secondary); }
.act-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); font-size: 13px; }
.heat-legend { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); }
.heat-legend .heat-cell { width: 12px; height: 12px; }
@media (max-width: 1023px) { .act-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .heat-row { grid-template-columns: 1fr; gap: 4px; }
  .heat-head > :first-child, .heat-head > :last-child { display: none; }
  .heat-idle { text-align: left; }
  .act-card { padding: var(--s-4); }
}

/* ---------- полоса счётчиков ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.stat-col {
  --tone: var(--primary);
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr; gap: var(--s-2);
  padding: var(--s-6) var(--s-6) var(--s-5); color: inherit; text-decoration: none;
  transition: background-color 160ms ease;
}
.stat-col + .stat-col { border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.stat-col:hover { background: var(--surface-hover); }
.stat-col:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.stat-col:active .stat-value { transform: translateY(1px); }
.stat-col.is-active { background: color-mix(in srgb, var(--tone) 7%, var(--surface)); }
.stat-col.tone-coral { --tone: var(--accent-coral); }
.stat-col.tone-violet { --tone: var(--accent-violet-strong); }
.stat-col.tone-amber { --tone: var(--accent-orange); }
.stat-col.tone-mint { --tone: var(--badge-green-fg); }
.stat-col.tone-blue { --tone: var(--primary); }
.stat-head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.stat-icon {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, var(--surface));
}
.stat-label { font-size: 14px; font-weight: 500; color: var(--text-secondary); line-height: 1.3; }
.stat-col.is-active .stat-label { color: var(--text-primary); }
.stat-value { font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; margin-top: var(--s-2); transition: transform 120ms ease; }
.stat-caption { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.stat-bar { align-self: end; height: 6px; margin-top: var(--s-3); border-radius: var(--radius-full); background: color-mix(in srgb, var(--tone) 12%, var(--surface)); overflow: hidden; }
.stat-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--tone); }
.stat-col.is-active::after { content: ""; position: absolute; left: var(--s-6); right: var(--s-6); top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--tone); }
@media (max-width: 1023px) {
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-col:nth-child(3) { border-left: 0; }
  .stat-col:nth-child(n + 3) { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
}
@media (max-width: 480px) {
  .stat-col { padding: var(--s-4); }
  .stat-value { font-size: 30px; }
  .stat-caption { display: none; }
}

/* ---------- разбор ИИ ---------- */
.ai-review { scroll-margin-top: var(--s-6); }
.ai-head { display: flex; gap: var(--s-3); align-items: flex-start; flex-wrap: nowrap; }
.ai-head > div { min-width: 0; }
.ai-orb--sm { width: 32px; height: 32px; margin-top: 2px; }
.ai-wait { display: flex; align-items: center; gap: var(--s-2); color: var(--text-secondary); }
.ai-summary { font-size: 16px; line-height: 1.55; margin-bottom: var(--s-2); }
.ai-h { margin: var(--s-6) 0 var(--s-3); font-size: 14px; font-weight: 700; }
.ai-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.ai-check { display: grid; grid-template-columns: 16px minmax(140px, 0.6fr) 1fr; gap: var(--s-3); align-items: start; font-size: 14px; line-height: 1.45; }
.ai-check .icon { margin-top: 2px; }
.ai-check--ok .icon { color: var(--badge-green-fg); }
.ai-check--warn .icon { color: var(--accent-orange); }
.ai-check--fail .icon { color: var(--accent-coral); }
.ai-check-item { font-weight: 600; }
.ai-table th, .ai-table td { white-space: normal; }
.ai-table td { height: auto; padding-top: var(--s-2); padding-bottom: var(--s-2); vertical-align: top; }
.ai-table th:first-child, .ai-table td:first-child { padding-left: 0; min-width: 150px; }
.ai-table td:last-child { min-width: 200px; white-space: normal; }
.ai-chips { flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-full); background: var(--surface-muted); font-size: 13px; white-space: nowrap; }
.chip--key { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--primary); text-decoration: none; }
a.chip--key:hover { background: var(--primary-soft); }
a.chip--key:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ai-problems { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-4); }
.ai-problem p { margin: var(--s-1) 0 var(--s-2); color: var(--text-secondary); line-height: 1.5; }
.ai-problem-title { font-weight: 600; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.ai-problem--minor .ai-problem-title { font-weight: 500; }
.ai-strengths { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); line-height: 1.5; }
/* Сводка перед созвоном: факты слева, Claude справа */
.brief-facts { grid-template-columns: 150px minmax(0, 1fr); align-content: start; line-height: 1.45; }
.brief-ai > .ai-summary:first-child, .brief-ai > .ai-wait:first-child { margin-top: 0; }
.ai-draft { font-size: 14px; line-height: 1.55; }
.ai-draft-actions { gap: var(--s-3); margin-top: var(--s-2); }
.input--code { font-size: 13px; line-height: 1.5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.lozenge--red { background: #FFEBE6; color: #BF2600; }
:root[data-theme="dark"] .lozenge--red { background: #3D1F1A; color: #FF9C8F; }
.runs { margin-bottom: var(--s-2); }
.run-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: center; padding: var(--s-2) 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.run-row > .t-caption { grid-column: 2 / -1; }
.run-summary { gap: 4px; flex-wrap: wrap; }
.artifact { scroll-margin-top: var(--s-6); }
.artifact:target { box-shadow: inset 3px 0 0 var(--primary); }
@media (max-width: 767px) {
  .ai-review > .card-head { flex-wrap: wrap; }
  .ai-review > .card-head > form { width: 100%; }
  .ai-check { grid-template-columns: 16px 1fr; }
  .ai-check > .t-secondary { grid-column: 2; }
  .run-row { grid-template-columns: auto minmax(0, 1fr); }
  .run-row > .run-summary, .run-row > .t-caption { grid-column: 1 / -1; }
}

/* ---------- вспомогательные ---------- */
.center { justify-content: center; text-align: center; }
.ui-gap { margin-top: var(--s-4); }
.ui-section-body { margin-top: var(--s-4); }
.ui-section > .t-card, section > .t-card { margin-bottom: var(--s-4); }
.layout-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-4); }
.sk-title { height: 24px; width: 50%; }
.sk-line { height: 14px; }
.sk-block { height: 96px; }
.menu--up { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 0; }
.menu--up button { white-space: normal; text-align: left; line-height: 1.3; }
.me-menu > summary.me { height: auto; padding: var(--s-2); background: none; box-shadow: none; font-weight: 400; }
.me-menu > summary.me:hover { background: var(--surface-hover); }
.drawer-kv { margin-top: var(--s-8); }
.modal-field { margin-top: var(--s-6); }
.menu form { display: contents; }

/* ---------- адаптив ---------- */
@media (max-width: 1279px) {
  .sub-grid { grid-template-columns: minmax(0, 1fr); }
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
  .mood { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dists { grid-template-columns: minmax(0, 1fr); }
  .ov-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-profile { grid-row: auto; grid-column: 1 / -1; }
  .ov-sources { grid-column: 1 / -1; }
  .aside-more { margin-left: 0; }
  .layout-split { grid-template-columns: minmax(0, 1fr); }
  .layout-aside { grid-template-columns: minmax(0, 1fr); }
  .aside { border-left: 0; border-top: 1px solid var(--border); padding-top: var(--s-8); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .attempt-summary { grid-template-columns: repeat(3, auto) minmax(0, 1fr); }
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: 280px;
    background: var(--bg-app); box-shadow: var(--shadow-modal);
    transform: translateX(-100%); transition: transform 200ms var(--ease);
  }
  body.sidebar-open .sidebar { transform: none; }
  .icon-btn.menu-toggle { display: grid; }
  .main { padding: var(--s-6); }
  .search { width: 220px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .artifact-row { grid-template-columns: 16px auto minmax(0, 1fr); }
  .artifact-row .jira-prio, .artifact-row .lozenge, .artifact-author { display: none; }
  .steps li { grid-template-columns: minmax(0, 1fr); }
  .sc-head { grid-template-columns: minmax(0, 1fr); }
  .sc-head .sc-mentor { grid-column: 1; grid-row: 3; justify-items: start; }
  .sc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-summary { flex-direction: column; align-items: flex-start; }
  .kv--wide { grid-template-columns: minmax(0, 1fr); }
  .problems { grid-template-columns: minmax(0, 1fr); }
  .where-row { grid-template-columns: minmax(0, 1fr) 32px; }
  .where-bar, .where-people { display: none; }
  .ov-top { grid-template-columns: minmax(0, 1fr); }
  .ov-sources { flex-wrap: wrap; }
  .ov-chart { grid-template-columns: minmax(0, 1fr); }
  .month-switch { flex-direction: row; justify-content: flex-start; overflow-x: auto; }
  .main, .aside { padding: var(--s-4); }
  .page-header { flex-wrap: wrap; }
  .search { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .brief-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .brief-facts dd + dt { margin-top: var(--s-2); }
  .t-hero { font-size: 40px; }
  .card { padding: var(--s-6); border-radius: var(--radius-lg); }
  .table th:first-child, .table td:first-child { padding-left: var(--s-4); }
  .table-toolbar, .table-foot { padding-left: var(--s-4); padding-right: var(--s-4); }
  .progress-row { grid-template-columns: minmax(0, 1fr) 100px 40px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- проценты без inline-стилей (CSP запрещает style="…") ---------- */
.pct-0{width:0%} .pct-1{width:1%} .pct-2{width:2%} .pct-3{width:3%} .pct-4{width:4%} .pct-5{width:5%} .pct-6{width:6%} .pct-7{width:7%} .pct-8{width:8%} .pct-9{width:9%} .pct-10{width:10%} .pct-11{width:11%} .pct-12{width:12%} .pct-13{width:13%} .pct-14{width:14%} .pct-15{width:15%} .pct-16{width:16%} .pct-17{width:17%} .pct-18{width:18%} .pct-19{width:19%} .pct-20{width:20%} .pct-21{width:21%} .pct-22{width:22%} .pct-23{width:23%} .pct-24{width:24%} .pct-25{width:25%} .pct-26{width:26%} .pct-27{width:27%} .pct-28{width:28%} .pct-29{width:29%} .pct-30{width:30%} .pct-31{width:31%} .pct-32{width:32%} .pct-33{width:33%} .pct-34{width:34%} .pct-35{width:35%} .pct-36{width:36%} .pct-37{width:37%} .pct-38{width:38%} .pct-39{width:39%} .pct-40{width:40%} .pct-41{width:41%} .pct-42{width:42%} .pct-43{width:43%} .pct-44{width:44%} .pct-45{width:45%} .pct-46{width:46%} .pct-47{width:47%} .pct-48{width:48%} .pct-49{width:49%} .pct-50{width:50%} .pct-51{width:51%} .pct-52{width:52%} .pct-53{width:53%} .pct-54{width:54%} .pct-55{width:55%} .pct-56{width:56%} .pct-57{width:57%} .pct-58{width:58%} .pct-59{width:59%} .pct-60{width:60%} .pct-61{width:61%} .pct-62{width:62%} .pct-63{width:63%} .pct-64{width:64%} .pct-65{width:65%} .pct-66{width:66%} .pct-67{width:67%} .pct-68{width:68%} .pct-69{width:69%} .pct-70{width:70%} .pct-71{width:71%} .pct-72{width:72%} .pct-73{width:73%} .pct-74{width:74%} .pct-75{width:75%} .pct-76{width:76%} .pct-77{width:77%} .pct-78{width:78%} .pct-79{width:79%} .pct-80{width:80%} .pct-81{width:81%} .pct-82{width:82%} .pct-83{width:83%} .pct-84{width:84%} .pct-85{width:85%} .pct-86{width:86%} .pct-87{width:87%} .pct-88{width:88%} .pct-89{width:89%} .pct-90{width:90%} .pct-91{width:91%} .pct-92{width:92%} .pct-93{width:93%} .pct-94{width:94%} .pct-95{width:95%} .pct-96{width:96%} .pct-97{width:97%} .pct-98{width:98%} .pct-99{width:99%} .pct-100{width:100%}
.at-x-0{left:0%} .at-x-1{left:1%} .at-x-2{left:2%} .at-x-3{left:3%} .at-x-4{left:4%} .at-x-5{left:5%} .at-x-6{left:6%} .at-x-7{left:7%} .at-x-8{left:8%} .at-x-9{left:9%} .at-x-10{left:10%} .at-x-11{left:11%} .at-x-12{left:12%} .at-x-13{left:13%} .at-x-14{left:14%} .at-x-15{left:15%} .at-x-16{left:16%} .at-x-17{left:17%} .at-x-18{left:18%} .at-x-19{left:19%} .at-x-20{left:20%} .at-x-21{left:21%} .at-x-22{left:22%} .at-x-23{left:23%} .at-x-24{left:24%} .at-x-25{left:25%} .at-x-26{left:26%} .at-x-27{left:27%} .at-x-28{left:28%} .at-x-29{left:29%} .at-x-30{left:30%} .at-x-31{left:31%} .at-x-32{left:32%} .at-x-33{left:33%} .at-x-34{left:34%} .at-x-35{left:35%} .at-x-36{left:36%} .at-x-37{left:37%} .at-x-38{left:38%} .at-x-39{left:39%} .at-x-40{left:40%} .at-x-41{left:41%} .at-x-42{left:42%} .at-x-43{left:43%} .at-x-44{left:44%} .at-x-45{left:45%} .at-x-46{left:46%} .at-x-47{left:47%} .at-x-48{left:48%} .at-x-49{left:49%} .at-x-50{left:50%} .at-x-51{left:51%} .at-x-52{left:52%} .at-x-53{left:53%} .at-x-54{left:54%} .at-x-55{left:55%} .at-x-56{left:56%} .at-x-57{left:57%} .at-x-58{left:58%} .at-x-59{left:59%} .at-x-60{left:60%} .at-x-61{left:61%} .at-x-62{left:62%} .at-x-63{left:63%} .at-x-64{left:64%} .at-x-65{left:65%} .at-x-66{left:66%} .at-x-67{left:67%} .at-x-68{left:68%} .at-x-69{left:69%} .at-x-70{left:70%} .at-x-71{left:71%} .at-x-72{left:72%} .at-x-73{left:73%} .at-x-74{left:74%} .at-x-75{left:75%} .at-x-76{left:76%} .at-x-77{left:77%} .at-x-78{left:78%} .at-x-79{left:79%} .at-x-80{left:80%} .at-x-81{left:81%} .at-x-82{left:82%} .at-x-83{left:83%} .at-x-84{left:84%} .at-x-85{left:85%} .at-x-86{left:86%} .at-x-87{left:87%} .at-x-88{left:88%} .at-x-89{left:89%} .at-x-90{left:90%} .at-x-91{left:91%} .at-x-92{left:92%} .at-x-93{left:93%} .at-x-94{left:94%} .at-x-95{left:95%} .at-x-96{left:96%} .at-x-97{left:97%} .at-x-98{left:98%} .at-x-99{left:99%} .at-x-100{left:100%}
.at-y-0{top:0%} .at-y-1{top:1%} .at-y-2{top:2%} .at-y-3{top:3%} .at-y-4{top:4%} .at-y-5{top:5%} .at-y-6{top:6%} .at-y-7{top:7%} .at-y-8{top:8%} .at-y-9{top:9%} .at-y-10{top:10%} .at-y-11{top:11%} .at-y-12{top:12%} .at-y-13{top:13%} .at-y-14{top:14%} .at-y-15{top:15%} .at-y-16{top:16%} .at-y-17{top:17%} .at-y-18{top:18%} .at-y-19{top:19%} .at-y-20{top:20%} .at-y-21{top:21%} .at-y-22{top:22%} .at-y-23{top:23%} .at-y-24{top:24%} .at-y-25{top:25%} .at-y-26{top:26%} .at-y-27{top:27%} .at-y-28{top:28%} .at-y-29{top:29%} .at-y-30{top:30%} .at-y-31{top:31%} .at-y-32{top:32%} .at-y-33{top:33%} .at-y-34{top:34%} .at-y-35{top:35%} .at-y-36{top:36%} .at-y-37{top:37%} .at-y-38{top:38%} .at-y-39{top:39%} .at-y-40{top:40%} .at-y-41{top:41%} .at-y-42{top:42%} .at-y-43{top:43%} .at-y-44{top:44%} .at-y-45{top:45%} .at-y-46{top:46%} .at-y-47{top:47%} .at-y-48{top:48%} .at-y-49{top:49%} .at-y-50{top:50%} .at-y-51{top:51%} .at-y-52{top:52%} .at-y-53{top:53%} .at-y-54{top:54%} .at-y-55{top:55%} .at-y-56{top:56%} .at-y-57{top:57%} .at-y-58{top:58%} .at-y-59{top:59%} .at-y-60{top:60%} .at-y-61{top:61%} .at-y-62{top:62%} .at-y-63{top:63%} .at-y-64{top:64%} .at-y-65{top:65%} .at-y-66{top:66%} .at-y-67{top:67%} .at-y-68{top:68%} .at-y-69{top:69%} .at-y-70{top:70%} .at-y-71{top:71%} .at-y-72{top:72%} .at-y-73{top:73%} .at-y-74{top:74%} .at-y-75{top:75%} .at-y-76{top:76%} .at-y-77{top:77%} .at-y-78{top:78%} .at-y-79{top:79%} .at-y-80{top:80%} .at-y-81{top:81%} .at-y-82{top:82%} .at-y-83{top:83%} .at-y-84{top:84%} .at-y-85{top:85%} .at-y-86{top:86%} .at-y-87{top:87%} .at-y-88{top:88%} .at-y-89{top:89%} .at-y-90{top:90%} .at-y-91{top:91%} .at-y-92{top:92%} .at-y-93{top:93%} .at-y-94{top:94%} .at-y-95{top:95%} .at-y-96{top:96%} .at-y-97{top:97%} .at-y-98{top:98%} .at-y-99{top:99%} .at-y-100{top:100%}

/* Практика: карточки практик, формы и таблица участников */
.practice-card { display: grid; gap: var(--s-4); align-content: start; }
.practice-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.practice-form { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.practice-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.practice-form legend { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--s-2); }
.practice-projects { gap: var(--s-2) var(--s-6); flex-wrap: wrap; }
.check-label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 15px; cursor: pointer; }
.practice-add { flex-wrap: wrap; gap: var(--s-3); }
.practice-head .t-page { display: inline-flex; align-items: center; gap: var(--s-3); }
@media (max-width: 720px) { .practice-stats, .practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- практика: автопроверки и эталон дефектов ---------- */
.checks-head { gap: var(--s-2); flex-wrap: wrap; }
.checks-groups { display: grid; gap: var(--s-5); margin-top: var(--s-2); }
.checks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.check-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-1) var(--s-3); align-items: start; font-size: 14px; line-height: 1.45; }
.check-row .icon { margin-top: 2px; }
.check-row--major .icon { color: var(--accent-coral); }
.check-row--minor .icon { color: var(--accent-orange); }
.check-row--info .icon { color: var(--primary); }
.check-title { font-weight: 600; display: inline-flex; align-items: center; gap: var(--s-2); }
.check-keys { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip--xs { height: 22px; padding: 0 8px; font-size: 12px; }
.ai-signal-box { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius-md); background: var(--surface-muted); }
.ai-signals { margin: var(--s-2) 0 0; padding-left: var(--s-5); color: var(--text-secondary); line-height: 1.5; font-size: 14px; }
.defects-line { margin-top: var(--s-2); }
.defects-line .chip { margin-right: 2px; }
.defect-missed { opacity: 0.75; }
.checks-cell { gap: var(--s-2); font-variant-numeric: tabular-nums; }
.checks-cell > span { display: inline-flex; align-items: center; gap: 2px; }
.table--defects td { white-space: normal; vertical-align: top; height: auto; padding-top: var(--s-2); padding-bottom: var(--s-2); }
.table--defects .input--sm { border-radius: var(--radius-md); max-width: none; width: 100%; height: 32px; margin: 2px 0; }
.table--defects .input--kw { height: auto; min-height: 56px; resize: vertical; font-size: 13px; line-height: 1.4; padding: var(--s-2) var(--s-3); }
.table--defects .input--code-short { width: 96px; }
.table--defects .btn--ghost { height: 32px; }
.row-muted td { opacity: 0.6; }
.table--defects td:nth-child(3) { min-width: 340px; }
.table--defects td:nth-child(5) { min-width: 260px; }
.practice-ai { margin: var(--s-4) 0 var(--s-2); padding: var(--s-4) var(--s-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-muted) 50%, transparent); }
.practice-ai > .card-head { margin-bottom: var(--s-2); }
.practice-ai .ai-h { margin-top: var(--s-4); }
.practice-ai .ai-summary { font-size: 15px; }

/* Шаблоны эпиков и задач → Jira (/practice/{id}/templates) */
.tj-details > summary { cursor: pointer; list-style: none; }
.tj-details > summary::-webkit-details-marker { display: none; }
.tj-details > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--text-secondary); }
.tj-details[open] > summary::before { content: "▾"; }
.tj-details--epic { padding: var(--s-3) var(--s-6) 0; }
.tj-wiki { margin: var(--s-3) 0 var(--s-2); padding: var(--s-4); max-height: 520px; overflow: auto; font-size: 13px; line-height: 1.5;
  background: var(--surface-hover); border: 1px solid var(--border); border-radius: 10px; font-variant-numeric: tabular-nums; }
.table--templates td:nth-child(2) { max-width: 720px; }
.tj-run-rows td { padding-top: 0; }
.field-label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: var(--s-2); }

/* Старые потоки: колонка текущего потока в таблице темпа */
.table td.archive-current { background: var(--badge-blue-bg); color: var(--badge-blue-fg); font-weight: 600; }

/* --- Созвоны: раздел наставника ------------------------------------------------------ */
.calls-tabs { margin-bottom: var(--s-6); }
.calls-filters { margin-bottom: var(--s-4); }
.calls-filters .seg { background: var(--surface-muted); }
.calls-filters .seg.is-active { background: var(--primary); color: var(--text-on-primary); }
.calls-grid { gap: var(--s-4); }
.call-req .call-when { font-size: 18px; font-weight: 500; }
.call-quote { font-size: 15px; line-height: 1.5; color: var(--text-primary); border-left: 3px solid var(--primary-tint); padding-left: var(--s-4); }
.call-head .sc-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.plain-list { display: grid; gap: var(--s-2); list-style: none; padding: 0; margin: 0; font-size: 15px; }
.code-pill { font: 600 15px/1 var(--font); letter-spacing: 0.08em; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--primary-tint); color: var(--primary); }
.sched-who { margin-bottom: var(--s-4); }
.sched-who .seg, .sched-table .seg { background: var(--surface-muted); }
.sched-table td { vertical-align: middle; }
.sched-table .sched-new td { color: var(--text-secondary); }
.input--time { width: 88px; }
.input--num { width: 72px; }
.sched-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); }
.sched-day { padding: var(--s-5); }
.sched-slots { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.slot { display: flex; align-items: center; gap: var(--s-2); padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-muted); }
.slot--booked { background: var(--badge-green-bg); }
.slot--blocked { opacity: 0.55; }
.slot--pref .slot-time::after { content: "★"; margin-left: 4px; color: var(--accent-amber); font-size: 12px; }
.slot-time { min-width: 48px; font-weight: 500; }
.slot-who { flex: 1; font-size: 14px; }
.slot .input--num { width: 60px; }
.icon-btn.is-on { color: var(--accent-amber); }
.sched-add { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); }
.field { display: grid; gap: 4px; font-size: 14px; }
.field > span:first-child { font-weight: 500; }
.textarea { height: auto; padding: var(--s-3) var(--s-4); line-height: 1.5; resize: vertical; }

/* --- Созвоны: страница ученика /my ---------------------------------------------------- */
.my-body { background: var(--bg-app); color: var(--text-primary); font-family: var(--font); min-height: 100dvh; margin: 0; }
.my { max-width: 560px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-12); display: grid; gap: var(--s-5); align-content: start; }
.my-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.my-brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--text-primary); font-weight: 600; font-size: 15px; line-height: 1.15; }
.my-brand:hover { color: inherit; }
.my-brand-sub { font-weight: 500; color: var(--text-secondary); font-size: 13px; }
.my-tz { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-card); font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.my-tz:hover { color: var(--text-primary); }
.my-notice, .my-error { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius-md); font-size: 15px; margin: 0; }
.my-notice { background: var(--badge-green-bg); color: var(--badge-green-fg); }
.my-error { background: var(--badge-coral-bg); color: var(--badge-coral-fg); }
.my-hero { padding: var(--s-4) 0 0; }
.my-hero--login { padding-top: var(--s-10); }
.my-h1 { font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--s-3); max-width: 22ch; }
.my-h2 { font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0 0 var(--s-3); }
.my-lead { font-size: 16px; line-height: 1.5; color: var(--text-secondary); margin: 0; max-width: 46ch; }
.my-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--s-5); }
.my-stack { display: grid; gap: var(--s-4); }
.my-field { display: grid; gap: var(--s-2); }
.my-label { font-size: 14px; font-weight: 600; }
.my-code { font-size: 22px; letter-spacing: 0.14em; text-align: center; height: 56px; text-transform: uppercase; }
.my-textarea { height: auto; padding: var(--s-3) var(--s-4); line-height: 1.5; resize: vertical; }
.my-consent { align-items: flex-start; font-size: 15px; line-height: 1.45; }
.my-details summary { cursor: pointer; color: var(--text-secondary); font-size: 14px; }
.my-consent-text { margin-top: var(--s-3); font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.my-next { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-3); }
.my-kicker { margin: 0; font-size: 14px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.my-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); flex: none; }
.my-dot--green { background: var(--success); } .my-dot--orange { background: var(--accent-orange); }
.my-dot--coral { background: var(--danger); } .my-dot--blue { background: var(--primary); }
.my-time { margin: 0; display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.my-time-big { font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.my-time-date { font-size: 17px; line-height: 1.35; }
.my-next-meta { margin: 0; font-size: 15px; color: var(--text-secondary); }
.my-quote { margin: 0; font-size: 15px; line-height: 1.5; border-left: 3px solid var(--primary-tint); padding-left: var(--s-4); }
.my-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-2); }
.my-actions .btn { height: 44px; }
.my-cta .btn { height: 52px; font-size: 16px; }
.my-section { display: grid; gap: var(--s-2); }
.my-list { display: grid; gap: var(--s-2); }
.my-row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); padding: var(--s-4) var(--s-5); background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); color: inherit; }
.my-row:hover { color: inherit; background: var(--surface-hover); }
.my-row-when { font-weight: 600; font-size: 15px; }
.my-row-what { grid-column: 1; font-size: 14px; color: var(--text-secondary); }
.my-row > .t-secondary:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: 13px; max-width: 12ch; }
.my-choices { display: grid; gap: var(--s-2); }
.my-choice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--radius-md); background: var(--surface-muted); font-size: 15px; line-height: 1.4; cursor: pointer; }
.my-choice:has(input:checked) { outline: 2px solid var(--primary); background: var(--primary-tint); }
.my-choice input { margin-top: 3px; }
.my-days { display: grid; gap: var(--s-2); }
.my-day { border-radius: var(--radius-md); background: var(--surface-muted); padding: 0 var(--s-4); }
.my-day > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; cursor: pointer; list-style: none; font-size: 15px; }
.my-day > summary::-webkit-details-marker { display: none; }
.my-day > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: rotate(45deg); transition: transform 150ms var(--ease); margin-left: auto; }
.my-day[open] > summary::after { transform: rotate(-135deg); }
.my-day-name { font-weight: 600; }
.my-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-2); padding: 0 0 var(--s-4); }
.my-slot { position: relative; display: grid; gap: 2px; padding: var(--s-3) var(--s-3); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; font-size: 17px; font-weight: 600; line-height: 1.2; }
.my-slot input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.my-slot .t-secondary { font-size: 12px; font-weight: 500; }
.my-slot:has(input:checked) { outline: 2px solid var(--primary); background: var(--primary-tint); }
.my-slot:has(input:focus-visible) { outline: 2px solid var(--primary); }
.my-slot--pref::before { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-amber); }
.my-summary p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }
.my-back { margin: 0; font-size: 14px; }
.my-back a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); }
.my-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding-top: var(--s-6); font-size: 13px; color: var(--text-secondary); }
@media (max-width: 420px) { .my-time-big { font-size: 48px; } .call-head .sc-stats { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .my-day > summary::after { transition: none; } }

/* --- Созвоны: график «наставники × дни» (как в YClients) --------------------------- */
.wg-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.cal-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-4); font-size: 13px; }
.sched-layout2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-4); align-items: start; }
/* Календарь как в телефоне: 7 столбцов, неделя в строку; клетка — день графика наставника */
.cal-card { padding: 0; overflow: hidden; }
.cal { user-select: none; -webkit-user-select: none; font-size: 12px; }
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.cal-wd { padding: 10px 6px; text-align: center; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.cal-wd.is-weekend { color: var(--danger); }
.cal-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(92px, auto); }
.cal--week .cal-body { grid-auto-rows: minmax(220px, auto); }
.cal-cell { position: relative; min-width: 0; padding: 6px 6px 22px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); cursor: pointer; line-height: 1.3; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; }
.cal-num small { margin-left: 3px; font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.cal-wdl { display: none; margin-left: 6px; font-size: 12px; color: var(--text-secondary); }
.cal-cell.is-weekend .cal-num { color: var(--danger); }
.cal-cell.is-today .cal-num { background: var(--primary); color: var(--text-on-primary); }
.cal-cell.is-other { background: var(--surface-muted); }
.cal-cell.is-other .cal-num { color: var(--text-secondary); font-weight: 500; }
/* Прошедшие дни остаются в календаре, но приглушены: график и созвоны видны, свободные слоты не считаются */
.cal-cell.is-past { color: var(--text-secondary); }
.cal-cell.is-past .cal-num, .cal-cell.is-past.is-weekend .cal-num { color: var(--text-secondary); font-weight: 500; }
.cal-cell.is-past .cal-time { font-weight: 500; }
.cal-cell.is-past.is-work { background: color-mix(in srgb, var(--badge-green-bg) 40%, var(--surface)); }
.cal-cell.is-past.is-weekend:not(.is-work):not(.is-off) { background: var(--surface); }
.cal-cell.is-work { background: var(--badge-green-bg); }
.cal-cell.is-off { background: repeating-linear-gradient(135deg, var(--surface-muted) 0 6px, var(--surface) 6px 9px); }
.cal-cell:hover:not(.is-sel)::after, .cal-cell:focus-visible::after { content: ""; position: absolute; inset: 2px; border: 1.5px dashed var(--success); border-radius: var(--radius-sm); pointer-events: none; }
.cal-cell:not(.is-work):not(.is-off):hover:not(.is-sel)::after { content: "+"; display: grid; place-items: center; color: var(--success); font-size: 18px; }
.cal-cell:focus-visible { outline: none; }
.cal-cell.is-sel { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--primary-tint); }
.cal-time { display: block; margin-top: 4px; font-weight: 600; white-space: nowrap; }
.cal-time--short { display: none; }
.cal-time sup { margin-left: 1px; font-size: 9px; font-weight: 600; color: var(--text-secondary); }
.cal-br, .cal-off { display: block; font-size: 11px; color: var(--text-secondary); }
.cal-cnt { position: absolute; right: 6px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-secondary); }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.cal-slots { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.cal-slot { display: block; padding: 2px 5px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-slot .num { font-weight: 600; }
.cal-slot.is-booked { background: var(--primary-tint); border-color: transparent; }
.cal-slot.is-pending { border-style: dashed; border-color: var(--primary); }
.cal-slot.is-blocked { color: var(--text-secondary); text-decoration: line-through; }
.cal-slot.is-done { background: var(--badge-green-bg); color: var(--badge-green-fg); border-color: transparent; }
.cal-slot.is-no_show { color: var(--text-secondary); text-decoration: line-through; border-style: dashed; }
.cal-cnt .icon { width: 12px; height: 12px; }
.cal-menu > summary { width: 40px; height: 40px; padding: 0; justify-content: center; }
.cal-menu .menu { left: auto; right: 0; min-width: 260px; padding: var(--s-3); }
.wg-copy { padding: var(--s-2) 0; }
.wg-legend { padding: var(--s-3) var(--s-5); }
.win-hint { margin-top: -4px; font-size: 12px; min-height: 1em; }
.day-editor .win { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); }
.day-editor .win--break { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; align-items: end; }
.win-f { display: grid; gap: 3px; min-width: 0; font-size: 12px; color: var(--text-secondary); }
.win-f .input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.win-del { margin-bottom: 2px; }
.input[type="time"], .input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; font-variant-numeric: tabular-nums; }
.slot-add { display: grid; grid-template-columns: minmax(0, 1fr) 88px auto; gap: var(--s-2); align-items: end; }
.chk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); background: var(--surface-muted); font-size: 13px; cursor: pointer; }
.chk-pill:has(input:checked) { background: var(--primary); color: var(--text-on-primary); }
.chk-pill input { width: 1px; height: 1px; opacity: 0; position: absolute; }
.day-editor.is-active { box-shadow: 0 0 0 2px var(--primary-tint), var(--shadow-card); }
@media (max-width: 980px) { .sched-layout2 { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .cal--week .cal-head { display: none; }
  .cal--week .cal-body { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .cal--week .cal-cell { border-right: 0; }
  .cal--week .cal-wdl { display: inline; }
  .cal--month .cal-body { grid-auto-rows: minmax(66px, auto); }
  .cal--month .cal-cell { padding: 4px 4px 18px; }
  .cal--month .cal-time--full, .cal--month .cal-br { display: none; }
  .cal--month .cal-time--short { display: block; font-size: 11px; }
  .cal-num { min-width: 20px; height: 20px; font-size: 12px; }
  .cal-cnt { right: 4px; bottom: 3px; }
}
@media (max-width: 480px) { .day-editor .input, .slot-add .input { font-size: 16px; } .slot-add { grid-template-columns: minmax(0, 1fr) 80px; } .slot-add .btn { grid-column: 1 / -1; } }
/* Шапка страницы на узких экранах: заголовок и подзаголовок переносятся, страница не уезжает вбок. */
.page-header, .page-heading, .page-heading > div { min-width: 0; }
.page-heading > div > .t-secondary, .page-heading .t-page { white-space: normal; overflow-wrap: anywhere; }
.main { min-width: 0; }
.feed-row { min-width: 0; }
.feed-url { flex: 1 1 220px; min-width: 0; }

/* hidden важнее display у .stack/.row: панель графика прячет блоки шаблонов. */
.day-editor [hidden], .slot-add [hidden] { display: none !important; }

/* ---------- запись и расшифровка в карточке созвона ---------- */
.call-transcript { white-space: pre-wrap; font: inherit; font-size: 13px; line-height: 1.5; max-height: 50vh; overflow: auto; margin: var(--s-2) 0 0; padding: var(--s-3); border-radius: var(--radius-sm); background: var(--surface-muted); }
.notice--inline { padding: var(--s-3); border-radius: var(--radius-sm); background: var(--surface-muted); display: flex; gap: var(--s-2); align-items: flex-start; }
.chk-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.chk-row input { margin-top: 3px; }

/* ---------- страница созвона (комната LiveKit): тёмная, на весь экран ---------- */
.room-body { margin: 0; min-height: 100vh; background: #0E0F13; color: #E6E8EE; }
.room { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; min-height: 100vh; min-height: 100dvh; }
.room-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px 16px; }
.room-title { display: grid; line-height: 1.3; min-width: 0; }
.room-title strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-title .t-secondary { color: #A2A7B5; font-size: 13px; }
.room-flags { display: flex; align-items: center; gap: var(--s-3); font-size: 13px; color: #A2A7B5; white-space: nowrap; }
.room-rec { display: inline-flex; align-items: center; gap: 6px; color: #FF6B6B; font-weight: 600; }
.room-rec .icon { fill: currentColor; animation: room-blink 1.6s ease-in-out infinite; }
@keyframes room-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .room-rec .icon { animation: none; } }
.room-stage { position: relative; margin: 0 12px; border-radius: 16px; overflow: hidden; background: #17181D; min-height: 240px; }
.room-remote { position: absolute; inset: 0; display: grid; place-items: center; }
/* Кадр целиком при любом формате (камера телефона стоя, окно экрана 9:19); обрезка — только .fit-cover, когда формат почти
   совпадает со сценой (ставит room.js). В сетке height: 100% не срабатывал — высокий кадр уходил за край, и был виден только верх. */
.room-remote .room-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.room-remote .room-video.fit-cover { object-fit: cover; }
.room-remote.has-screen .room-video[data-source="camera"] { inset: 12px 12px auto auto; z-index: 1; width: 22%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; object-fit: contain; }
.room-wait { margin: 0; color: #A2A7B5; font-size: 15px; }
.room-local { position: absolute; left: 12px; bottom: 12px; width: 26%; max-width: 240px; min-width: 120px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #202228; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.room-local .room-video { width: 100%; height: 100%; object-fit: contain; background: #000; transform: scaleX(-1); }
.room-local .room-video.fit-cover, .room-preview .room-video.fit-cover { object-fit: cover; }
.room-local-tag { position: absolute; left: 8px; top: 6px; z-index: 1; padding: 2px 6px; border-radius: 6px; font-size: 11px; color: #E6E8EE; background: rgba(0, 0, 0, 0.45); }
.room-error { margin: 8px 16px 0; color: #FF8A8A; font-size: 14px; }
.room-bar { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
.room-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #2A2C33; color: #E6E8EE; font: inherit; cursor: pointer; }
.room-btn:hover { background: #343640; }
.room-btn:active { transform: scale(0.96); }
.room-btn:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.room-btn .off { display: none; }
.room-btn[data-mic]:not(.is-on), .room-btn[data-cam]:not(.is-on) { background: #E5484D; color: #fff; }
.room-btn[data-mic]:not(.is-on) .on, .room-btn[data-cam]:not(.is-on) .on { display: none; }
.room-btn[data-mic]:not(.is-on) .off, .room-btn[data-cam]:not(.is-on) .off { display: inline-flex; }
.room-btn[data-screen].is-on { background: #4C8DFF; color: #fff; }
.room-btn--leave { width: auto; padding: 0 18px; border-radius: 26px; background: #E5484D; color: #fff; font-weight: 600; }
.room-btn--leave:hover { background: #F05A5F; }
.room-btn--sound { width: auto; padding: 0 16px; border-radius: 26px; background: #4C8DFF; color: #fff; font-weight: 600; }
.room-audio { display: none; }

/* ---------- статистика созвонов ---------- */
.stats-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
.stats-kpi { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: var(--radius-md); background: var(--surface-muted); }
.stats-kpi b { font-size: 24px; font-weight: 600; line-height: 1.1; }
.stats-kpi .t-secondary { font-size: 12px; }
.heat { border-collapse: collapse; font-size: 11px; }
.heat th, .heat td { padding: 0; text-align: center; }
.heat th { font-weight: 500; color: var(--text-secondary); padding: 2px 3px; }
.heat td { width: 26px; height: 22px; border: 1px solid var(--surface); border-radius: 4px; background: var(--surface-muted); color: var(--text-secondary); }
.heat td.h1 { background: color-mix(in srgb, var(--primary) 25%, var(--surface)); color: var(--text-primary); }
.heat td.h2 { background: color-mix(in srgb, var(--primary) 50%, var(--surface)); color: var(--text-primary); }
.heat td.h3 { background: color-mix(in srgb, var(--primary) 75%, var(--surface)); color: var(--text-on-primary); }
.heat td.h4 { background: var(--primary); color: var(--text-on-primary); }
.heat-wrap { overflow-x: auto; }

/* комната: экран до входа, индикаторы речи и микрофона */
.room [hidden] { display: none !important; }   /* display: flex/grid у блоков не должен перебивать hidden */
.room-prejoin { display: grid; place-items: center; padding: 12px; }
.room-prejoin-card { display: grid; gap: 14px; width: min(560px, 100%); padding: 16px; border-radius: 16px; background: #17181D; }
.room-preview { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #202228; }
.room-preview .room-video { width: 100%; height: 100%; object-fit: contain; background: #000; transform: scaleX(-1); }
.room-meter { height: 8px; border-radius: 4px; background: #2A2C33; overflow: hidden; }
.room-meter i { display: block; height: 100%; width: 0; background: #22C55E; transition: width 80ms linear; }
.room-prejoin-note { margin: 0; color: #A2A7B5; font-size: 13px; }
.room-prejoin-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.room-join { margin-left: auto; height: 52px; padding: 0 22px; border-radius: 26px; font-size: 15px; }
.room-muted-tag { position: absolute; left: 8px; bottom: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #fff; background: #E5484D; }
.room-muted-tag--remote { left: 12px; top: 12px; bottom: auto; }
.room-speaking-tag { position: absolute; right: 12px; bottom: 12px; z-index: 1; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #0E0F13; background: #22C55E; font-weight: 600; }
.room-local.is-speaking, .room-remote.is-speaking { box-shadow: inset 0 0 0 3px #22C55E; }
.room-remote.is-speaking { border-radius: 16px; }
.room-mic-wrap { position: relative; }
.room-mic-level { position: absolute; left: 6px; right: 6px; bottom: -6px; height: 3px; border-radius: 2px; background: #22C55E; transform: scaleX(0); transform-origin: left; transition: transform 80ms linear; }
.room-btn[data-mic]:not(.is-on) + .room-mic-level { display: none; }
@media (max-width: 640px) { .room-join { margin-left: 0; width: 100%; } }

/* комната: раскладка, чат, фон. Компьютер — видео и панель чата рядом; телефон/узкое окно — видео на весь экран,
   шапка и кнопки поверх него, чат и выбор фона выезжают снизу. */
.room { position: relative; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "top top" "main chat" "err err" "bar bar"; }
.room-top { grid-area: top; }
.room-prejoin, .room-stage { grid-area: main; }
.room-error { grid-area: err; }
.room-bar { grid-area: bar; }
.room-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: #C9CDD6; cursor: pointer; flex: none; }
.room-icon-btn:hover { background: #2A2C33; color: #fff; }
.room-icon-btn:active { transform: scale(0.94); }
.room-icon-btn:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.room-btn--chat { position: relative; }
.room-btn[data-chat-open].is-on, .room-btn[data-bg-open].is-on { background: #2B6CF6; color: #fff; }
.room-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E5484D;
  color: #fff; font: 600 11px/18px var(--font, inherit); font-variant-numeric: tabular-nums; }
.room-local.is-off::after { content: "камера выключена"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: #8E93A0; }

.room-chat { grid-area: chat; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: 340px; margin: 0 12px 0 0;
  border-radius: 16px; overflow: hidden; background: #17181D; min-height: 0; }
.room-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 8px 16px; font-size: 15px; }
.room-chat-pin { margin: 0 12px 8px; padding: 10px 12px; border-radius: 10px; background: #22242B; box-shadow: inset 3px 0 0 #F97A33; font-size: 14px; line-height: 1.45; }
.room-chat-pin span { font-size: 12px; color: #A2A7B5; }
.room-chat-pin p { margin: 2px 0 0; overflow-wrap: anywhere; }
.room-chat-log { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 10px; overflow-y: auto; overscroll-behavior: contain; }
.room-chat-empty { margin: auto 0; color: #8E93A0; font-size: 13px; line-height: 1.5; text-align: center; padding: 0 8px; }
.room-msg { max-width: 88%; align-self: flex-start; }
.room-msg.is-mine { align-self: flex-end; text-align: right; }
.room-msg-head { font-size: 11px; color: #8E93A0; font-variant-numeric: tabular-nums; }
.room-msg p { margin: 2px 0 0; padding: 8px 12px; border-radius: 12px; background: #262830; font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.room-msg.is-mine p { background: #2B6CF6; color: #fff; }
.room-msg a { color: #8DB4FF; }
.room-msg.is-mine a { color: #fff; }
.room-chat-form { display: flex; align-items: flex-end; gap: 6px; padding: 10px 10px 12px 12px; border-top: 1px solid #262830; }
.room-chat-form textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 9px 12px; border: 1px solid #30333C; border-radius: 10px;
  background: #22242B; color: #E6E8EE; font: inherit; font-size: 15px; line-height: 1.4; }
.room-chat-form textarea:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 0; border-color: transparent; }
.room-chat-send { color: #8DB4FF; width: 40px; height: 40px; }

.room-sheet { position: absolute; left: 50%; bottom: 92px; z-index: 6; width: min(460px, calc(100% - 24px)); transform: translateX(-50%);
  border-radius: 16px; background: #1C1E24; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); padding-bottom: 14px; }
.room-bg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 2px 14px 0; }
.room-bg-opt { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 10; padding: 0; border: 2px solid transparent;
  border-radius: 10px; overflow: hidden; background: #2A2C33 center / cover no-repeat; color: #E6E8EE; font: inherit; cursor: pointer; }
.room-bg-opt span { position: relative; z-index: 1; margin: 4px; padding: 1px 6px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); font-size: 11px; }
.room-bg-opt:hover { border-color: #4A4D57; }
.room-bg-opt:active { transform: scale(0.97); }
.room-bg-opt:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.room-bg-opt.is-sel { border-color: #4C8DFF; }
.room-bg-opt--none { align-items: center; justify-content: center; background: #22242B; }
.room-bg-opt--none span { background: none; font-size: 12px; }
.room-bg-opt--blur { background: radial-gradient(circle at 50% 38%, #9AA1B3 0 18%, #5D6372 42%, #343842 80%); }
.room-bg-opt--blur2 { background: radial-gradient(circle at 50% 38%, #6E7584 0 12%, #3B3F4A 46%, #24272E 85%); }
.room-bg-opt--light { background-image: url(/static/room-bg/light.jpg); }
.room-bg-opt--warm { background-image: url(/static/room-bg/warm.jpg); }
.room-bg-opt--graphite { background-image: url(/static/room-bg/graphite.jpg); }
.room-bg-opt--brand { background-image: url(/static/room-bg/brand.jpg); }
.room-bg-opt--custom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-bg-opt--add { flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px dashed #3A3D46; background: transparent; }
.room-bg-opt--add span { background: none; margin: 0; }
.room-bg-note { margin: 12px 16px 0; font-size: 12px; line-height: 1.45; color: #A2A7B5; }

.room-toast { position: absolute; left: 50%; bottom: 96px; z-index: 7; max-width: min(520px, calc(100% - 24px)); transform: translateX(-50%);
  padding: 10px 14px; border-radius: 12px; background: rgba(32, 34, 41, 0.97); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; cursor: pointer; }

@media (max-width: 899px), (max-height: 559px) {
  .room { display: block; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .room-top { position: absolute; inset: 0 0 auto; z-index: 4; padding: calc(8px + env(safe-area-inset-top)) 12px 22px;
    background: linear-gradient(rgba(14, 15, 19, 0.9), rgba(14, 15, 19, 0)); }
  .room-title strong { font-size: 14px; }
  .room-title .t-secondary { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .room-flags { font-size: 12px; gap: 8px; }
  .room-status { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
  .room-prejoin { height: 100%; overflow-y: auto; place-items: start center; padding: calc(64px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)); }
  .room-stage { position: absolute; inset: 0; margin: 0; border-radius: 0; min-height: 0; }
  .room-remote.has-screen .room-video[data-source="camera"] { right: auto; left: 10px; top: calc(env(safe-area-inset-top) + 64px); width: 26vw; max-width: 150px; }
  .room-remote.is-speaking { border-radius: 0; }
  .room-muted-tag--remote { top: calc(env(safe-area-inset-top) + 64px); }
  .room-speaking-tag { bottom: calc(env(safe-area-inset-bottom) + 96px); }
  .room-local { left: auto; right: 10px; bottom: auto; top: calc(env(safe-area-inset-top) + 64px); z-index: 2; width: 27vw; max-width: 150px;
    min-width: 92px; aspect-ratio: 3 / 4; }
  .room-bar { position: absolute; inset: auto 0 0; z-index: 4; gap: 10px; padding: 26px 10px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(14, 15, 19, 0), rgba(14, 15, 19, 0.92)); }
  .room-btn { width: 48px; height: 48px; flex: none; }
  .room-btn--leave { width: 48px; padding: 0; }
  .room-btn--leave span { display: none; }
  .room-bar .room-btn--sound { position: absolute; left: 50%; bottom: calc(100% - 8px); width: auto; height: 40px; transform: translateX(-50%); white-space: nowrap; }
  .room-error { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 88px); z-index: 5; margin: 0;
    padding: 8px 12px; border-radius: 10px; background: rgba(48, 18, 20, 0.94); }
  .room-chat { position: absolute; inset: auto 0 0; z-index: 6; width: auto; height: min(72dvh, 600px); margin: 0; border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.55); }
  .room-sheet { left: 0; right: 0; bottom: 0; width: auto; max-height: 84dvh; overflow-y: auto; transform: none; border-radius: 16px 16px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .room-toast { bottom: calc(env(safe-area-inset-bottom) + 92px); }
  .room-chat-form textarea { font-size: 16px; }   /* меньше 16px — iPhone приближает страницу при вводе */
}
/* телефон боком: себя — шире, чат и фон — панелью справа на всю высоту */
@media (max-height: 559px) and (min-width: 560px) {
  .room-local { aspect-ratio: 4 / 3; width: 20vw; top: calc(env(safe-area-inset-top) + 56px); }
  .room-chat, .room-sheet { inset: 0 0 0 auto; width: min(380px, 55vw); height: auto; max-height: none; border-radius: 0; }
  .room.chat-open .room-bar, .room.chat-open .room-top, .room.chat-open .room-toast { right: min(380px, 55vw); }
  .room.chat-open .room-local { right: calc(min(380px, 55vw) + 10px); }
}
.rec-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.rec-row audio { height: 32px; max-width: 100%; }
.rec-media { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; max-width: 100%; }
.rec-video { align-items: flex-start; }
.rec-video video { width: 480px; max-width: 100%; border-radius: var(--r-md, 8px); background: #000; }

.pre-line { white-space: pre-line; }   /* переносы строк из текста без <br> */

/* карточка ученика: входы на платформу */
.logins-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
.logins-recent { margin: 0; line-height: 1.7; }

/* ---------- карточки: раздел наставника и редактор колод ---------- */
.row-group td { background: var(--surface-muted); font-size: 13px; padding-top: var(--s-2); padding-bottom: var(--s-2); }
.cards-table .cell-def { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cards-table tr.is-dim td { color: var(--text-secondary); }
.pill-toggle { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; }
.pill-toggle:hover { background: var(--surface-hover); color: var(--text-primary); }
.pill-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pill-toggle.is-on { background: var(--badge-green-bg); color: var(--badge-green-fg); border-color: transparent; }
.pill-toggle.is-off { background: var(--badge-gray-bg); color: var(--badge-gray-fg); border-color: transparent; }
.deck-head .card-head { align-items: center; }
.card-form .form-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-4); }
@media (max-width: 720px) { .card-form .form-grid { grid-template-columns: 1fr; } }
.check-label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 14px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.row.wrap { flex-wrap: wrap; }
.my-cards { display: grid; gap: var(--s-3); }
.my-cards .btn { justify-self: start; }

/* Карточки: материалы ИИ в колоде */
.materials-bar { border-top: 1px solid var(--border); }
.materials { gap: var(--s-5); }
.material { padding: var(--s-4) 0 0; border-top: 1px solid var(--border); }
.material .card-head { align-items: flex-start; }
.material-list { display: grid; gap: var(--s-3); margin: var(--s-3) 0 0; }
.material-row { display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: var(--s-3); align-items: start; }
.material-row dt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.material-row dd { margin: 0; font-size: 15px; line-height: 1.5; display: grid; gap: 4px; }
.material-row.is-dim { opacity: 0.55; }
.material-row .inline { display: inline; }
.card-form fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s-3) var(--s-4) var(--s-4); margin: 0; }
.card-form legend { padding: 0 var(--s-2); display: flex; gap: var(--s-2); align-items: center; }
@media (max-width: 720px) { .material-row { grid-template-columns: 1fr; } }

.diagram-preview { display: block; max-width: 520px; width: 100%; margin-top: var(--s-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }

/* ---------- кабинет ученика /my: главная с дашбордом ---------- */
.my-me { display: flex; align-items: flex-start; gap: var(--s-4); padding-top: var(--s-2); }
.my-me-text { display: grid; gap: var(--s-2); min-width: 0; }
.my-me .my-h1 { margin: 0; font-size: 26px; }
.my-me .my-lead { font-size: 15px; }
.my-ring { position: relative; flex: none; width: 64px; height: 64px; display: grid; place-items: center; margin-top: 2px; }
.my-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.my-ring-track { stroke: var(--track); }
.my-ring-fill { stroke: var(--accent-coral); }
.my-ring-pct { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.my-pace { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.my-pace--behind { color: var(--badge-orange-fg); }

.my-cards-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: var(--s-2); padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--radius-xl); background: var(--mesh-warm); color: var(--mesh-ink); }
.my-cards-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.my-cards-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.my-kicker--ink { color: color-mix(in srgb, var(--mesh-ink) 78%, transparent); }
.my-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--radius-full); background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13px; font-weight: 500; white-space: nowrap; }
.my-chip .icon { color: var(--accent-orange); }
.my-big { margin: var(--s-3) 0 0; font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.my-big-label { margin: 0; font-size: 16px; line-height: 1.35; max-width: 30ch; }
.my-cards-meta { margin: var(--s-1) 0 0; font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--mesh-ink) 72%, transparent); max-width: 42ch; }
.my-cards-hero .my-actions { margin-top: var(--s-3); }
.btn--ink { background: var(--text-primary); color: var(--surface); }
.btn--ink:hover { background: color-mix(in srgb, var(--text-primary) 86%, var(--surface)); color: var(--surface); }
.btn--glass { background: var(--glass); color: var(--mesh-ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--glass:hover { background: color-mix(in srgb, var(--glass) 70%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--ink { background: var(--surface-muted); color: var(--text-primary); } }
:root[data-theme="dark"] .btn--ink { background: var(--surface-muted); color: var(--text-primary); }

.my-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.my-section-head .my-h2 { margin: 0; }
.my-section-head + * { margin-top: var(--s-1); }
.my-calls-empty .my-lead { font-size: 15px; }
.my-row--hw { grid-template-columns: 1fr auto; }
.my-row--hw .my-row-when { font-size: 15px; }
.my-status { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-full); font-size: 13px; font-weight: 500; white-space: nowrap; }
.my-status--orange { background: var(--badge-orange-bg); color: var(--badge-orange-fg); }
.my-status--green { background: var(--badge-green-bg); color: var(--badge-green-fg); }

.my-path { list-style: none; margin: 0; padding: var(--s-2) var(--s-5); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.my-step { position: relative; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; font-size: 15px; }
.my-step + .my-step::before { content: ""; position: absolute; left: 9px; top: -14px; width: 2px; height: 18px; background: var(--track); }
.my-step--done + .my-step::before { background: var(--primary); }
.my-step-dot { width: 20px; height: 20px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--track); color: var(--surface); }
.my-step--done .my-step-dot { background: var(--primary); }
.my-step--current .my-step-dot { background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary); }
.my-step--current .my-step-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.my-step--started .my-step-dot { background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary-soft); }
.my-step--locked .my-step-dot { background: var(--surface-muted); color: var(--text-secondary); }
.my-step--locked .my-step-name, .my-step--todo .my-step-name { color: var(--text-secondary); }
.my-step--current .my-step-name { font-weight: 600; }
.my-step-name { min-width: 0; }
.my-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.my-step-meta { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 400px) { .my-big { font-size: 48px; } .my-me .my-h1 { font-size: 23px; } }
@media (prefers-reduced-motion: no-preference) { .my-ring-fill { transition: stroke-dasharray 600ms var(--ease); } }

/* Кабинет ученика: разделы внизу (главная · карточки · созвоны) */
.my { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.my-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 560px; margin: 0 auto; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
.my-tab { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: var(--radius-md); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; }
.my-tab:hover { background: var(--surface-hover); color: var(--text-primary); }
.my-tab.is-on { color: var(--primary); }
.my-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
a.my-cards-hero { color: var(--mesh-ink); display: grid; }
a.my-cards-hero:hover { color: var(--mesh-ink); }
.my-cards-go { justify-self: start; margin-top: var(--s-3); }
.my-howto { margin: calc(var(--s-2) * -1) 0 0; font-size: 14px; line-height: 1.45; }
.my-howto a { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 600; padding: 4px 0; }
.my-howto a:hover { text-decoration: underline; }
.my-howto a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.my-howto .icon { flex: none; }
.my-more { font-size: 14px; color: var(--primary); white-space: nowrap; }
.my-row--next .my-row-when { font-size: 16px; }
.my-row--next .t-secondary { display: inline-flex; align-items: center; gap: 6px; }
.my-hero--tight { padding-top: 0; }
.my-calls-empty .btn { margin-top: var(--s-2); }


/* ---------- кабинет ученика: визуальный язык «Rent a boat» (как в приложении карточек) ---------- */
@font-face { font-family: "Comfortaa"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/static/fonts/comfortaa-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Comfortaa"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/static/fonts/comfortaa-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/nunito-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.my-body {
  --font: "Nunito", "Manrope", system-ui, -apple-system, sans-serif;
  --font-display: "Comfortaa", "Nunito", system-ui, sans-serif;
  --bg-app: #E8F1FF; --surface: #FFFFFF; --surface-muted: #F1F5FF; --surface-hover: #EEF3FF; --border: #DCE5F7; --track: #E3EAF8;
  --text-primary: #2F3B5C; --text-secondary: #66749A;
  --primary: #2752F3; --primary-hover: #1C43CC; --primary-soft: #5B82FF; --primary-tint: #E4EAFF;
  --accent-coral: #F36981; --accent-orange: #F5C245; --accent-amber: #F5C245; --accent-mint: #0F7A86; --success: #1E8E5A; --danger: #E0435F;
  --badge-green-bg: #DDF5E8; --badge-green-fg: #1E8E5A; --badge-orange-bg: #FFF1CC; --badge-orange-fg: #8A5A00;
  --badge-coral-bg: #FFE4E9; --badge-coral-fg: #B8364E; --badge-gray-bg: #EDF1FA; --badge-gray-fg: #4B5878; --badge-blue-bg: #E4EAFF; --badge-blue-fg: #2752F3;
  --radius-xl: 28px; --radius-lg: 22px; --radius-md: 14px; --radius-sm: 10px;
  --shadow-card: 0 2px 6px rgba(39, 82, 243, 0.06), 0 12px 30px rgba(39, 82, 243, 0.10);
  --shadow-float: 0 6px 18px rgba(39, 82, 243, 0.10), 0 24px 56px rgba(39, 82, 243, 0.16);
  --glass: rgba(255, 255, 255, 0.3); --glass-border: rgba(255, 255, 255, 0.55); --glass-blur: blur(22px) saturate(180%);
  --hero: linear-gradient(165deg, #3A66FF 0%, #2752F3 55%, #1C43CC 100%); --mesh-ink: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .my-body {
    --bg-app: #0E1324; --surface: #171D33; --surface-muted: #1F2640; --surface-hover: #222A48; --border: #2B3451; --track: #2B3451;
    --text-primary: #EEF2FF; --text-secondary: #A4AECB; --primary: #5B82FF; --primary-hover: #7A99FF; --primary-tint: #1E2A55;
    --badge-green-bg: #15311F; --badge-green-fg: #6BD9A0; --badge-orange-bg: #3A2C10; --badge-orange-fg: #F2C25B;
    --badge-coral-bg: #3D1F28; --badge-coral-fg: #FF7A90; --badge-gray-bg: #25294A; --badge-gray-fg: #B4B8D2; --badge-blue-bg: #1E2A55; --badge-blue-fg: #8FB0FF;
    --shadow-card: 0 0 0 1px var(--border); --shadow-float: 0 0 0 1px var(--border), 0 12px 32px rgba(0, 0, 0, 0.45);
    --glass: rgba(23, 29, 51, 0.6); --glass-border: rgba(255, 255, 255, 0.14);
    --hero: linear-gradient(165deg, #2F57E6 0%, #2149CF 55%, #1A3AA8 100%);
  }
}
.my-body .my-h1, .my-body .my-h2, .my-body .my-time-big, .my-body .my-big, .my-body .my-brand > span:last-child, .my-body .my-row--hw .my-row-when { font-family: var(--font-display); letter-spacing: -0.01em; }
.my-body .my-h1 { font-weight: 700; }
.my-body .my-h2 { font-size: 18px; }
.my-body .btn { border-radius: 14px; font-weight: 700; }
.my-body .btn--primary { box-shadow: 0 10px 24px rgba(39, 82, 243, 0.28); }
.my-body .my-tz, .my-body .my-chip { font-weight: 700; }
.my-body .my-ring-fill { stroke: var(--accent-coral); }
.my-body .my-ring-pct { font-family: var(--font-display); }
/* Плитка карточек — электрик-синяя карточка с жёлтой кнопкой, как «Sun Dolphin» и «Rent a boat» */
.my-body .my-cards-hero { background: var(--hero); color: #FFFFFF; box-shadow: 0 16px 40px rgba(39, 82, 243, 0.28); }
.my-body .my-cards-hero::after { background-image: none; opacity: 1; background: radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.14) 120px, transparent 121px); }
.my-body a.my-cards-hero, .my-body a.my-cards-hero:hover { color: #FFFFFF; }
.my-body .my-kicker--ink { color: rgba(255, 255, 255, 0.82); }
.my-body .my-cards-meta { color: rgba(255, 255, 255, 0.82); }
.my-body .my-chip { background: var(--glass); border: 1px solid var(--glass-border); color: #FFFFFF; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.my-body .my-chip .icon { color: var(--accent-amber); }
.my-body .my-cards-go.btn--ink { background: var(--accent-amber); color: #4A3400; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.my-body .my-cards-go.btn--ink:hover { background: #FFD061; color: #4A3400; }
.my-body .my-big { font-weight: 700; }
/* Ближайший созвон: время синим, крупно */
.my-body .my-time-big { color: var(--primary); font-weight: 700; }
.my-body .my-next { border-radius: var(--radius-xl); }
/* Путь по курсу */
.my-body .my-step--done .my-step-dot, .my-body .my-step--done + .my-step::before { background: var(--primary); }
.my-body .my-status { font-weight: 700; }
/* Нижняя навигация — плавающая прозрачная стеклянная капсула */
.my-body .my { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.my-body .my-nav { left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 528px; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 12px 32px rgba(39, 82, 243, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.my-body .my-tab { border-radius: 999px; padding: 7px 4px 6px; color: var(--text-primary); font-weight: 700; }
.my-body .my-tab:hover { background: rgba(255, 255, 255, 0.35); color: var(--text-primary); }
.my-body .my-tab.is-on { background: var(--primary); color: #FFFFFF; box-shadow: 0 8px 20px rgba(39, 82, 243, 0.3); }
/* Появление страницы */
@keyframes my-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.my-body .my > * { animation: my-in 320ms var(--ease) both; }
.my-body .my > *:nth-child(2) { animation-delay: 40ms; } .my-body .my > *:nth-child(3) { animation-delay: 80ms; } .my-body .my > *:nth-child(4) { animation-delay: 120ms; } .my-body .my > *:nth-child(5) { animation-delay: 160ms; }
@media (prefers-reduced-motion: reduce) { .my-body .my > * { animation: none; } }

/* Кабинет ученика на ПК: широкий холст, навигация слева, главная в две колонки */
@media (min-width: 960px) {
  .my-body .my { max-width: 1120px; padding: var(--s-6) 40px 60px 136px; }
  .my-body .my-nav { left: 24px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: 84px; max-width: none; margin: 0; grid-template-columns: 1fr; gap: 6px; padding: 10px 8px; border-radius: 30px; }
  .my-body .my-tab { padding: 12px 4px 10px; border-radius: 22px; }
  .my-body .my--grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .my-body .my--grid > .my-top, .my-body .my--grid > .my-notice, .my-body .my--grid > .my-error, .my-body .my--grid > .my-me, .my-body .my--grid > .my-howto, .my-body .my--grid > .my-foot { grid-column: 1 / -1; }
  .my-body .my-h1 { font-size: 32px; }
  .my-body .my-me .my-h1 { font-size: 30px; }
  .my-body .my-cards-hero { padding: var(--s-8) var(--s-6); }
  .my-body .my-big { font-size: 64px; }
}

/* Карточка ученика: активность в карточках */
.heat-cells--28 { grid-template-columns: repeat(28, minmax(0, 1fr)); }
#activity .stat-strip { margin: 0; }
.cards-table .tts-line { white-space: normal; margin-top: 4px; }
.cards-table .tts-line .icon { vertical-align: -2px; color: var(--primary); }

/* Перенос созвона: свёрнутая форма в «Действиях» карточки созвона */
.call-move > summary { list-style: none; width: fit-content; }
.call-move > summary::-webkit-details-marker { display: none; }
.call-move[open] > summary { margin-bottom: var(--s-3); }
.call-move-form { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.call-move-when { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-items: end; }
.call-move-form .input { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; }
.call-move-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
@media (max-width: 560px) { .call-move-when { grid-template-columns: 1fr 1fr; } .call-move-when > :first-child { grid-column: 1 / -1; } .call-move-form .input { font-size: 16px; } }

/* Сводка по ученикам (/calls/summary): матрица «ученик × блок / задание», имя и шапка закреплены */
.sum-top { flex-wrap: wrap; gap: var(--s-3); }
.sum-head-text { display: grid; gap: var(--s-1); max-width: 640px; }
.sum-legend { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.sum-scroll { max-height: calc(100vh - 220px); overflow: auto; }
.sum-table td, .sum-table th { white-space: nowrap; }
.sum-table thead th { vertical-align: bottom; z-index: 2; box-shadow: inset 0 -1px 0 var(--border); }
.sum-th { display: block; max-width: 168px; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); font-weight: 600; }
.sum-th-total { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sum-table .sum-name { position: sticky; left: 0; z-index: 1; min-width: 220px; max-width: 260px; background: var(--surface); text-align: left; font-weight: 500; }
.sum-table thead .sum-name { z-index: 3; }
.sum-table tbody .sum-name { top: auto; font-size: 14px; color: var(--text-primary); white-space: normal; box-shadow: 1px 0 0 color-mix(in srgb, var(--border) 60%, transparent); }
.sum-table tbody tr:hover .sum-name { background: var(--bg-app); }
.sum-name a { display: block; max-width: 240px; color: var(--text-primary); text-decoration: none; }
.sum-name a:hover { text-decoration: underline; }
.sum-name a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.sum-mentor { display: block; font-size: 12px; font-weight: 400; }
.sum-cell { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  background: var(--badge-gray-bg); color: var(--badge-gray-fg); font-variant-numeric: tabular-nums; }
a.sum-cell { transition: transform 120ms ease, opacity 120ms ease; }
a.sum-cell:hover { opacity: 0.85; }
a.sum-cell:active { transform: scale(0.97); }
a.sum-cell:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sum-cell--done { background: var(--badge-green-bg); color: var(--badge-green-fg); }
.sum-cell--booked { background: var(--badge-blue-bg); color: var(--badge-blue-fg); }
.sum-cell--warn { background: var(--badge-orange-bg); color: var(--badge-orange-fg); }
.sum-cell--miss { background: var(--badge-coral-bg); color: var(--badge-coral-fg); }
.sum-cell--idle { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border); }
.sum-dash { color: var(--text-secondary); padding-left: 10px; }
.sum-empty { padding: 0 var(--s-8) var(--s-8); }
@media (max-width: 720px) { .sum-scroll { max-height: none; } .sum-table .sum-name { min-width: 140px; max-width: 160px; } .sum-name a { max-width: 150px; } .sum-table th:first-child, .sum-table td:first-child { padding-left: var(--s-4); } }

/* Подтверждение темы при записи (/my/book): время и вопрос из заявки */
.my-confirm { display: grid; gap: var(--s-1); margin: 0; }
.my-confirm dd { margin: 0 0 var(--s-2); font-size: 16px; overflow-wrap: anywhere; }