/* Цвета сайта собраны в палитры: каждая задаёт одни и те же переменные, компоненты берут цвет только
   из переменных. Палитра ставится на <html data-theme="..."> (courses/themes.py, KURSY_THEME).
   Цвет только там, где он несёт смысл: статус, просрочка, игра. Синего и фиолетового нет. */
:root, [data-theme="1c"] {
  /* «Как в 1С»: палитра прототипа курса 1С (исходники/оболочка.html) */
  --paper: #eef4ec; --card: #ffffff; --field: #ffffff; --ink: #12332b; --soft: #4d6a62; --faint: #6f8880;
  --line: #d9e4dc; --line-strong: #b9cdbf;
  --primary: #0e6b55; --primary-deep: #0a4f3f; --on-primary: #ffffff; --link: #0e6b55;
  --tint: #dcefe3; --tint-ink: #0a4f3f; --tint-line: #b7d6c6;
  --accent: #d4f04a; --logo: #0e6b55; --logo-ink: #d4f04a;
  --danger: #b83d1d; --danger-tint: #fdf4f0; --danger-line: #e8b9a6;
  --ok-tint: #f1f8f3; --ok-line: #b7d6c6;
  --soft-bg: #f4f8f3; --col-bg: rgba(255, 255, 255, .5); --mine-bg: #f5faf4;
  --sub-bg: #fdf9ea; --sub-line: #e2cf8a;
  --focus: #ff7a59; --shadow: rgba(18, 51, 43, .05); --backdrop: rgba(18, 51, 43, .35);
  --issued-bg: #e7eee9; --issued: #4d6a62; --issued-cell: #cbd6cf;
  --in_progress-bg: #efe8d6; --in_progress: #6b5a33; --in_progress-cell: #d6c193;
  --submitted-bg: #f4e6b4; --submitted: #6d5413; --submitted-cell: #e2bd4f;
  --needs_work-bg: #f6ddd2; --needs_work: #9c3a1c; --needs_work-cell: #cd7656;
  --accepted-bg: #d7ecdf; --accepted: #0a4f3f; --accepted-cell: #2e8467;
  --room-wall-a: #f7fbf6; --room-wall-b: #d3e6da; --room-floor: #f4e6c9; --room-plank: #e8d7b2;
  --room-base-a: #dfe9e0; --room-base-b: #adcfbc; --room-rug: #cfe3c3; --room-rug-in: #e2eed6; --room-sign: #0e6b55;
  --room-db: #0e6b55; --room-db-top: #12866a; --room-db-band: #d4f04a;
  --room-screen: #10332b; --room-tile-1: #d4f04a; --room-tile-2: #9fd0b7; --room-tile-3: #ff7a59; --room-line: #d4f04a;
  --room-bar: #0e6b55; --room-bar-2: #ff7a59; --room-board-line: #12332b; --room-plant: #0e6b55; --room-pot: #ff7a59;
}
[data-theme="terracotta"] {
  /* «Терракота»: тёплая глина и шафран */
  --paper: #f6f0e8; --card: #fffdfa; --field: #ffffff; --ink: #2b211c; --soft: #6e5f55; --faint: #8f8076;
  --line: #e8ddd0; --line-strong: #d4c3b0;
  --primary: #b4532a; --primary-deep: #8e3d1c; --on-primary: #ffffff; --link: #a24a24;
  --tint: #f7e2d6; --tint-ink: #8e3d1c; --tint-line: #ebc3ad;
  --accent: #f3b23a; --logo: #2b211c; --logo-ink: #f3b23a;
  --danger: #a3233f; --danger-tint: #fbecee; --danger-line: #e9b8c2;
  --ok-tint: #eef3e4; --ok-line: #c5d5a9;
  --soft-bg: #f9f3eb; --col-bg: rgba(255, 255, 255, .55); --mine-bg: #fbf5ee;
  --sub-bg: #fdf5e1; --sub-line: #ebd096;
  --focus: #f3b23a; --shadow: rgba(43, 33, 28, .06); --backdrop: rgba(43, 33, 28, .4);
  --issued-bg: #efe8df; --issued: #6e5f55; --issued-cell: #d8cbbd;
  --in_progress-bg: #f8e6d1; --in_progress: #8a4f1c; --in_progress-cell: #e2ad74;
  --submitted-bg: #f7e7b2; --submitted: #6f5612; --submitted-cell: #e6c158;
  --needs_work-bg: #f6d8de; --needs_work: #a3233f; --needs_work-cell: #d27a8b;
  --accepted-bg: #e2e9d2; --accepted: #4e6326; --accepted-cell: #7d9447;
  --room-wall-a: #fcf5ec; --room-wall-b: #ecd3c3; --room-floor: #f2e1cb; --room-plank: #e4cdb0;
  --room-base-a: #ebdccb; --room-base-b: #d8b7a1; --room-rug: #e9b99e; --room-rug-in: #f3cfb9; --room-sign: #b4532a;
  --room-db: #b4532a; --room-db-top: #d0703f; --room-db-band: #f3b23a;
  --room-screen: #2b211c; --room-tile-1: #f3b23a; --room-tile-2: #e9b99e; --room-tile-3: #fffdfa; --room-line: #f3b23a;
  --room-bar: #b4532a; --room-bar-2: #f3b23a; --room-board-line: #2b211c; --room-plant: #4f7a3a; --room-pot: #b4532a;
}
[data-theme="bordo"] {
  /* «Бордо и золото»: винный с золотом, спокойно и солидно */
  --paper: #f4f1ee; --card: #ffffff; --field: #ffffff; --ink: #2a1c21; --soft: #6d5b61; --faint: #8e7f84;
  --line: #e6ddda; --line-strong: #cfc1c0;
  --primary: #7c2d40; --primary-deep: #5d1f2f; --on-primary: #ffffff; --link: #7c2d40;
  --tint: #f3e2e6; --tint-ink: #5d1f2f; --tint-line: #dfbcc5;
  --accent: #e3b65a; --logo: #7c2d40; --logo-ink: #f0cf86;
  --danger: #b9472a; --danger-tint: #fbefea; --danger-line: #ebc1b3;
  --ok-tint: #eef4ee; --ok-line: #c3d8c6;
  --soft-bg: #f7f3f2; --col-bg: rgba(255, 255, 255, .55); --mine-bg: #faf6f5;
  --sub-bg: #fbf5e5; --sub-line: #e5cd93;
  --focus: #e3b65a; --shadow: rgba(42, 28, 33, .06); --backdrop: rgba(42, 28, 33, .4);
  --issued-bg: #ece7e6; --issued: #6d5b61; --issued-cell: #d5cacb;
  --in_progress-bg: #f1e7da; --in_progress: #7a5634; --in_progress-cell: #d8bb95;
  --submitted-bg: #f4e6b9; --submitted: #6c5718; --submitted-cell: #e2c25f;
  --needs_work-bg: #f6ded6; --needs_work: #b9472a; --needs_work-cell: #d98c70;
  --accepted-bg: #dde9e0; --accepted: #36664a; --accepted-cell: #5f9677;
  --room-wall-a: #faf6f5; --room-wall-b: #ead7db; --room-floor: #f0e3d0; --room-plank: #e2d0b6;
  --room-base-a: #ebe2df; --room-base-b: #d4b9bf; --room-rug: #d9b3bb; --room-rug-in: #ead0d5; --room-sign: #7c2d40;
  --room-db: #7c2d40; --room-db-top: #9a4357; --room-db-band: #e3b65a;
  --room-screen: #2a1c21; --room-tile-1: #e3b65a; --room-tile-2: #d9b3bb; --room-tile-3: #f4f1ee; --room-line: #e3b65a;
  --room-bar: #7c2d40; --room-bar-2: #e3b65a; --room-board-line: #2a1c21; --room-plant: #3f6b4a; --room-pot: #b9472a;
}
[data-theme="mustard"] {
  /* «Графит и горчица»: тёмно-серый с горчичными кнопками */
  --paper: #efefec; --card: #ffffff; --field: #ffffff; --ink: #1d1e21; --soft: #5b5d61; --faint: #7c7e82;
  --line: #dfdfdb; --line-strong: #c6c6c1;
  --primary: #e0a21f; --primary-deep: #c98e10; --on-primary: #1d1e21; --link: #8a6210;
  --tint: #f7ecce; --tint-ink: #6a4d08; --tint-line: #e9cf86;
  --accent: #e0a21f; --logo: #1d1e21; --logo-ink: #e0a21f;
  --danger: #c0392b; --danger-tint: #fbecea; --danger-line: #eebcb6;
  --ok-tint: #edf3ec; --ok-line: #bfd6c2;
  --soft-bg: #f5f5f2; --col-bg: rgba(255, 255, 255, .6); --mine-bg: #f7f7f4;
  --sub-bg: #fcf5df; --sub-line: #e8ce86;
  --focus: #e0a21f; --shadow: rgba(29, 30, 33, .06); --backdrop: rgba(29, 30, 33, .45);
  --issued-bg: #e8e8e4; --issued: #5b5d61; --issued-cell: #cfcfca;
  --in_progress-bg: #ece6d8; --in_progress: #6a5a35; --in_progress-cell: #c9b98f;
  --submitted-bg: #f8e8b3; --submitted: #6a4d08; --submitted-cell: #e8bf4c;
  --needs_work-bg: #f6dad6; --needs_work: #b0322a; --needs_work-cell: #df8a7f;
  --accepted-bg: #dbe9dd; --accepted: #2e6a46; --accepted-cell: #4f9a6e;
  --room-wall-a: #f8f8f5; --room-wall-b: #dcdcd7; --room-floor: #ece5d6; --room-plank: #ddd3be;
  --room-base-a: #e4e4e0; --room-base-b: #c4c4be; --room-rug: #f1d68f; --room-rug-in: #f7e6b8; --room-sign: #1d1e21;
  --room-db: #2e3035; --room-db-top: #4a4d54; --room-db-band: #e0a21f;
  --room-screen: #1d1e21; --room-tile-1: #e0a21f; --room-tile-2: #c6c6c1; --room-tile-3: #ffffff; --room-line: #e0a21f;
  --room-bar: #2e3035; --room-bar-2: #e0a21f; --room-board-line: #1d1e21; --room-plant: #3f7a52; --room-pot: #e0a21f;
}
[data-theme="olive"] {
  /* «Олива и апельсин»: оливковый с апельсиновым акцентом */
  --paper: #f5f3ea; --card: #fffefa; --field: #ffffff; --ink: #262b1d; --soft: #5f6450; --faint: #848873;
  --line: #e3e2d2; --line-strong: #cbcbb4;
  --primary: #55682a; --primary-deep: #3f4f1d; --on-primary: #ffffff; --link: #55682a;
  --tint: #e7ecd4; --tint-ink: #3f4f1d; --tint-line: #c9d4a9;
  --accent: #f08a3c; --logo: #f08a3c; --logo-ink: #262b1d;
  --danger: #b8322a; --danger-tint: #fbecea; --danger-line: #ecbcb6;
  --ok-tint: #eef2e1; --ok-line: #c6d3a6;
  --soft-bg: #f8f7ef; --col-bg: rgba(255, 255, 255, .55); --mine-bg: #f9f8f1;
  --sub-bg: #fdf2e2; --sub-line: #efc690;
  --focus: #f08a3c; --shadow: rgba(38, 43, 29, .06); --backdrop: rgba(38, 43, 29, .4);
  --issued-bg: #ebe9de; --issued: #5f6450; --issued-cell: #d2d0bf;
  --in_progress-bg: #f8e6d3; --in_progress: #8a4b16; --in_progress-cell: #eeb07a;
  --submitted-bg: #f4e9b8; --submitted: #6a5a12; --submitted-cell: #e2c65a;
  --needs_work-bg: #f6dad6; --needs_work: #b8322a; --needs_work-cell: #df8a7f;
  --accepted-bg: #e2ebce; --accepted: #455a1c; --accepted-cell: #7f9a43;
  --room-wall-a: #fbfaf2; --room-wall-b: #e0e4ca; --room-floor: #f0e3c7; --room-plank: #e3d2ae;
  --room-base-a: #e7e7d7; --room-base-b: #c0c8a0; --room-rug: #f4c59e; --room-rug-in: #f8dcc3; --room-sign: #55682a;
  --room-db: #55682a; --room-db-top: #6f8640; --room-db-band: #f08a3c;
  --room-screen: #262b1d; --room-tile-1: #f08a3c; --room-tile-2: #c9d4a9; --room-tile-3: #fffefa; --room-line: #f08a3c;
  --room-bar: #55682a; --room-bar-2: #f08a3c; --room-board-line: #262b1d; --room-plant: #55682a; --room-pot: #f08a3c;
}
[data-theme="night"] {
  /* «Ночь»: тёмная тема с янтарём, без синего */
  color-scheme: dark;
  --paper: #131518; --card: #1c1f23; --field: #15181b; --ink: #ece7df; --soft: #ada79d; --faint: #827d75;
  --line: #2c3035; --line-strong: #3b4046;
  --primary: #e6b04d; --primary-deep: #f0c46c; --on-primary: #1a1611; --link: #f0c46c;
  --tint: #3a3120; --tint-ink: #f0c46c; --tint-line: #5a4a28;
  --accent: #e6b04d; --logo: #e6b04d; --logo-ink: #1a1611;
  --danger: #ff8f70; --danger-tint: #3a2420; --danger-line: #6a3a30;
  --ok-tint: #1d3128; --ok-line: #2f5a46;
  --soft-bg: #202328; --col-bg: rgba(255, 255, 255, .03); --mine-bg: #23261f;
  --sub-bg: #2b2619; --sub-line: #5a4a24;
  --focus: #ff8f70; --shadow: rgba(0, 0, 0, .25); --backdrop: rgba(0, 0, 0, .55);
  --issued-bg: #2a2e33; --issued: #bcb6ac; --issued-cell: #4b5057;
  --in_progress-bg: #362f22; --in_progress: #e2c58e; --in_progress-cell: #8e7449;
  --submitted-bg: #3f3518; --submitted: #f2d06c; --submitted-cell: #c9a33a;
  --needs_work-bg: #3d231d; --needs_work: #f39c84; --needs_work-cell: #b2533f;
  --accepted-bg: #1d3328; --accepted: #86d3a8; --accepted-cell: #3f8f66;
  --room-wall-a: #2b2f35; --room-wall-b: #23272c; --room-floor: #3a342e; --room-plank: #4a423a;
  --room-base-a: #262a2f; --room-base-b: #1e2226; --room-rug: #4a3f2a; --room-rug-in: #5a4c31; --room-sign: #e6b04d;
  --room-db: #e6b04d; --room-db-top: #f0c46c; --room-db-band: #1c1f23;
  --room-screen: #0d0f11; --room-tile-1: #e6b04d; --room-tile-2: #86d3a8; --room-tile-3: #ff8f70; --room-line: #e6b04d;
  --room-bar: #e6b04d; --room-bar-2: #ff8f70; --room-board-line: #1c1f23; --room-plant: #3f8f66; --room-pot: #b2533f;
}
:root {
  --display: 'Geologica', 'Segoe UI', sans-serif;
  --sans: 'Golos Text', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { background: var(--paper); }
body { margin: 0; color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--display); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 19px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0 0 .7em; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
code, .mono { font-family: var(--mono); font-size: .9em; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px) 48px; }
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 16px 0 18px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 800 19px var(--display); color: var(--ink); text-decoration: none; }
.logo-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--logo); color: var(--logo-ink); font: 900 15px var(--display); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.nav a, .nav button { color: var(--soft); text-decoration: none; padding: 7px 11px; border-radius: 9px; font-weight: 500; font-size: 15px; background: none; border: 0; cursor: pointer; }
.nav a:hover, .nav button:hover { background: var(--card); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.nav form { margin: 0; }
.who { color: var(--faint); font-size: 14px; padding: 0 6px 0 12px; }
.badge { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.foot { margin-top: 40px; color: var(--faint); font-size: 13px; }
.themes { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 8px; }
.themes a { color: var(--soft); }
.themes a[aria-current="true"] { color: var(--ink); font-weight: 600; text-decoration: none; }

.box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.box > :last-child { margin-bottom: 0; }
.stack > * + * { margin-top: 16px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.grid-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.spread { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.muted { color: var(--faint); }
.small { font-size: 14px; }
.lead { color: var(--soft); max-width: 70ch; }
.crumbs { margin: 0 0 12px; font-size: 14px; }
.crumbs a { text-decoration: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary); font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
.btn.line { background: transparent; color: var(--link); }
.btn.line:hover { background: var(--tint); }
.btn.small { padding: 5px 10px; font-size: 13.5px; border-radius: 8px; }
.btn.warn { background: transparent; color: var(--danger); border-color: var(--danger-line); }
.btn.warn:hover { background: var(--danger-tint); }
.btn.wide { width: 100%; }
.btn[disabled], .btn.off { opacity: .45; cursor: not-allowed; pointer-events: none; }

.notice { padding: 10px 14px; border-radius: 12px; margin: 0 0 12px; border: 1px solid var(--line); background: var(--card); }
.notice.success { border-color: var(--ok-line); background: var(--ok-tint); }
.notice.error { border-color: var(--danger-line); background: var(--danger-tint); color: var(--danger); }
.notice.info { background: var(--soft-bg); }

/* Статусы и метки */
.status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
/* --cell: насыщеннее, для клеток прогресса, чтобы статусы различались с одного взгляда */
.issued { --bg: var(--issued-bg); --fg: var(--issued); --cell: var(--issued-cell); }
.in_progress { --bg: var(--in_progress-bg); --fg: var(--in_progress); --cell: var(--in_progress-cell); }
.submitted { --bg: var(--submitted-bg); --fg: var(--submitted); --cell: var(--submitted-cell); }
.needs_work { --bg: var(--needs_work-bg); --fg: var(--needs_work); --cell: var(--needs_work-cell); }
.accepted { --bg: var(--accepted-bg); --fg: var(--accepted); --cell: var(--accepted-cell); }
.status { background: var(--bg); color: var(--fg); }
.dot { background: var(--fg); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--soft); font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill.practice { color: var(--link); border-color: var(--tint-line); }
.pill.both { color: var(--tint-ink); background: var(--tint); border-color: var(--tint); }
.due { font-size: 12.5px; color: var(--soft); white-space: nowrap; }
.due.over { color: var(--danger); font-weight: 600; }
.unread { font-size: 12.5px; color: var(--link); font-weight: 600; }

/* Доска: пять колонок, на узком экране листается вбок */
.board-wrap { overflow-x: auto; margin: 0 calc(-1 * clamp(16px, 3vw, 40px)); padding: 0 clamp(16px, 3vw, 40px) 8px; }
.board { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: 12px; min-width: 1180px; }
@media (min-width: 1320px) { .board { min-width: 0; } }
/* Телефон: колонка почти во весь экран, листается вбок с доводкой, как в мобильных канбанах. */
@media (max-width: 700px) {
  .board-wrap { scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
  .board { grid-template-columns: repeat(5, 84vw); min-width: 0; }
  .col { scroll-snap-align: start; }
}
.col { background: var(--col-bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px; min-height: 180px; display: flex; flex-direction: column; gap: 9px; transition: background .15s; }
.col-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; font: 700 14px var(--display); }
.col-head .count { color: var(--faint); font: 500 13px var(--sans); }
.col.drop-ok { background: var(--tint); outline: 2px dashed var(--primary); outline-offset: -5px; }
.col.drop-no { opacity: .5; }
.col .empty { color: var(--faint); font-size: 13px; padding: 4px; }
.tile { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--ink); text-decoration: none; box-shadow: 0 1px 0 var(--shadow); }
.tile:hover { border-color: var(--line-strong); }
.tile[draggable="true"] { cursor: grab; }
.tile.dragging { opacity: .4; }
.tile-title { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.tile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.tile.over { border-left: 3px solid var(--danger); }
.board-hint { font-size: 13px; color: var(--faint); margin: 8px 0 0; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.tabs a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--soft); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.tabs a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* Текст карточки урока */
.lesson-text { max-width: 74ch; }
.lesson-text h3 { margin: 1.5em 0 .5em; font-size: 13.5px; letter-spacing: .07em; color: var(--tint-ink); }
.lesson-text h3:first-child { margin-top: .4em; }
.lesson-text p { margin: .55em 0; }
.lesson-text ul { margin: .4em 0 .8em; padding-left: 1.25em; }
.lesson-text a { word-break: break-word; }
.card-figure { margin: 1.1em 0; }
.card-figure img { max-width: 100%; border: 1px solid var(--line); border-radius: 10px; }
.card-figure figcaption { margin-top: 4px; font-size: 13px; color: var(--soft); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }

/* Чат карточки */
.thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; max-height: 560px; overflow-y: auto; }
.msg { border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; background: var(--card); font-size: 14.5px; }
.msg.mine { background: var(--mine-bg); }
.msg.system { border-style: dashed; background: transparent; color: var(--soft); font-size: 13.5px; padding: 6px 10px; }
.msg.review.needs { border-color: var(--danger-line); background: var(--danger-tint); }
.msg.review.accepted { border-color: var(--ok-line); background: var(--ok-tint); }
.msg.submission { border-color: var(--sub-line); background: var(--sub-bg); }
.msg-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 12.5px; color: var(--faint); margin-bottom: 2px; }
.msg-head b { color: var(--ink); font-weight: 600; font-size: 13px; }
.msg img { display: block; max-width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; }
.msg a { word-break: break-all; }

/* Формы */
form { margin: 0; }
label { font-weight: 500; font-size: 14px; }
input[type=text], input[type=email], input[type=url], input[type=date], input[type=number], input[type=file], textarea, select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); font: inherit; font-size: 15px;
}
input[type=file] { padding: 6px; font-size: 14px; }
textarea { resize: vertical; min-height: 64px; }
.field { display: grid; gap: 4px; margin: 0 0 10px; }
.helptext { font-size: 12.5px; color: var(--faint); }
.errorlist { margin: 2px 0 6px; padding-left: 1.1em; color: var(--danger); font-size: 14px; }
.checks { display: grid; gap: 3px; max-height: 340px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.checks label, .checks li label { display: flex; gap: 8px; align-items: baseline; font-weight: 400; font-size: 14.5px; }
.checks ul, ul.checks-list { list-style: none; margin: 0; padding: 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.inline-form .field { margin: 0; flex: 1 1 160px; }
details.more { margin-top: 10px; }
details.more summary { cursor: pointer; color: var(--link); font-weight: 500; font-size: 14.5px; }

/* Таблицы */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: left; font-weight: 600; color: var(--soft); background: var(--soft-bg); border-bottom: 1px solid var(--line); padding: 8px 10px; white-space: nowrap; }
.table td { border-bottom: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.matrix th, .matrix td { padding: 4px 3px; text-align: center; }
.matrix th.left, .matrix td.left { text-align: left; padding-right: 10px; white-space: nowrap; }
.cell { display: inline-block; width: 22px; height: 22px; border-radius: 6px; background: var(--cell); text-decoration: none; }
.cell.none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.cell.over { outline: 2px solid var(--danger); outline-offset: 1px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--soft); margin: 6px 0 12px; }
.legend .cell { width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 5px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; text-decoration: none; color: var(--ink); }
.kpi b { display: block; font: 800 26px/1.2 var(--display); }
.kpi span { color: var(--soft); font-size: 13.5px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { font-family: var(--mono); font-size: 13px; }

/* Вход */
.login { max-width: 520px; margin: 4vh auto 0; }
.login .btn { width: 100%; justify-content: center; margin-bottom: 8px; }
.demo { border: 1px dashed var(--danger-line); background: var(--danger-tint); }
.demo h2 { color: var(--danger); }
.demo-list { display: grid; gap: 6px; }
.login .demo-list .btn { justify-content: space-between; margin-bottom: 0; }

dialog { border: 1px solid var(--line); border-radius: 16px; padding: 20px; width: min(460px, calc(100% - 32px)); color: var(--ink); background: var(--card); }
dialog::backdrop { background: var(--backdrop); }

/* Игра: кабинет, звание, достижения (по образцу курса 1С) */
.office-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) { .office-grid { grid-template-columns: 1fr; } }
.room-box { position: relative; overflow: hidden; }
.rank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.rank b { font: 800 22px/1.2 var(--display); color: var(--tint-ink); }
.rank span { color: var(--soft); font-size: 14px; }
.scene { display: block; width: 100%; height: auto; }
.scene .prop { cursor: pointer; outline: none; }
.scene .prop:hover, .scene .prop:focus-visible, .scene .prop.sel { filter: drop-shadow(0 0 6px var(--primary)); }
.scene .prop.fresh { animation: pop .9s ease-out 2; transform-box: fill-box; transform-origin: center; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.room-info { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--soft-bg); border: 1px solid var(--line); display: grid; gap: 2px; font-size: 14.5px; }
.room-info b { font-weight: 600; }
.room-info span { color: var(--soft); }
.room-info em { font-style: normal; color: var(--link); font-weight: 600; font-size: 13.5px; }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; }
.medal { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.medal i { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px; background: var(--soft-bg); color: var(--faint); }
.medal.on i { background: var(--logo); color: var(--logo-ink); }
.medal div { display: grid; gap: 1px; }
.medal b { font-size: 14.5px; font-weight: 600; }
.medal span { font-size: 13px; color: var(--soft); }
.medal em { font-style: normal; font-size: 12px; color: var(--faint); }
.medal.fresh { border-color: var(--primary); box-shadow: 0 0 0 3px var(--tint); }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -14px; width: 9px; height: 13px; border-radius: 2px; animation: fall 1.8s ease-in forwards; }
.confetti i:nth-child(5n+1) { background: var(--accent); } .confetti i:nth-child(5n+2) { background: var(--danger); }
.confetti i:nth-child(5n+3) { background: var(--primary); } .confetti i:nth-child(5n+4) { background: var(--tint-line); }
.confetti i:nth-child(5n) { background: var(--sub-line); }
.confetti i:nth-child(1) { left: 4%; } .confetti i:nth-child(2) { left: 9%; animation-delay: .1s; } .confetti i:nth-child(3) { left: 14%; animation-delay: .25s; }
.confetti i:nth-child(4) { left: 19%; animation-delay: .05s; } .confetti i:nth-child(5) { left: 24%; animation-delay: .3s; } .confetti i:nth-child(6) { left: 29%; animation-delay: .15s; }
.confetti i:nth-child(7) { left: 34%; } .confetti i:nth-child(8) { left: 39%; animation-delay: .2s; } .confetti i:nth-child(9) { left: 44%; animation-delay: .35s; }
.confetti i:nth-child(10) { left: 49%; animation-delay: .1s; } .confetti i:nth-child(11) { left: 54%; animation-delay: .28s; } .confetti i:nth-child(12) { left: 59%; }
.confetti i:nth-child(13) { left: 64%; animation-delay: .18s; } .confetti i:nth-child(14) { left: 69%; animation-delay: .05s; } .confetti i:nth-child(15) { left: 74%; animation-delay: .32s; }
.confetti i:nth-child(16) { left: 79%; animation-delay: .12s; } .confetti i:nth-child(17) { left: 84%; } .confetti i:nth-child(18) { left: 89%; animation-delay: .22s; }
.confetti i:nth-child(19) { left: 94%; animation-delay: .08s; } .confetti i:nth-child(20) { left: 98%; animation-delay: .3s; }
@keyframes fall { to { transform: translateY(520px) rotate(320deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .scene .prop.fresh { animation: none; } }

/* Кафе «Лапки» (внутри рамки своя палитра курса 1С) */
/* Схема цветов рамки наследуется от страницы: кафе красится в ту же палитру, и прозрачный фон остаётся
   прозрачным (при разных схемах браузер подкладывает под рамку сплошной фон). */
.cafe-frame { display: block; width: 100%; height: 640px; border: 0; background: transparent; }
@media (max-width: 760px) { .cafe-frame { height: 900px; } }
.pets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pet { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.pet div { display: grid; }
.pet span { color: var(--soft); font-size: 14px; }
.pet-img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--soft-bg); }
.pet-paw { flex: 0 0 34px; }
.notice-box { border-color: var(--danger-line); background: var(--danger-tint); margin-bottom: 16px; }

/* Уроки открываются сами: блок на странице ученика у ментора и подсказка на доске ученика */
.plan-box { margin-bottom: 18px; }
.plan-state { margin: 6px 0 14px; }
.check-line { display: flex; gap: 8px; align-items: center; font-weight: 600; margin: 0 0 12px; cursor: pointer; }
.check-line input, .plan-groups input { accent-color: var(--primary); }
.check-line input { width: 18px; height: 18px; }
.plan-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; }
.plan-fields input { max-width: 150px; }
.help { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--soft); }
.plan-list { margin: 8px 0 14px; }
.plan-list summary { cursor: pointer; color: var(--link); font-weight: 500; }
.plan-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; margin: 10px 0 8px; }
.plan-groups fieldset { margin: 0; padding: 8px 12px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); min-width: 0; }
.plan-groups legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--soft); }
.plan-groups label { display: flex; gap: 8px; align-items: baseline; font-size: 14.5px; padding: 2px 0; }
.plan-hint { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--tint); color: var(--tint-ink); border: 1px solid var(--tint-line); font-size: 14.5px; }

/* Дашборд ученика (courses/selfdash.py, шаблон _dashboard.html) */
.dash-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 22px; }
@media (max-width: 900px) { .dash-top { grid-template-columns: 1fr; } }
.dash-main { position: relative; overflow: hidden; display: grid; align-content: start; gap: 6px; }
.dash-kicker { margin: 0; color: var(--soft); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }
.dash-nsm { display: flex; align-items: baseline; gap: 10px; }
.dash-nsm b { font: 900 56px/1 var(--display); color: var(--ink); }
.dash-nsm span { color: var(--soft); font-size: 16px; }
.dash-bar { height: 10px; border-radius: 999px; background: var(--soft-bg); border: 1px solid var(--line); overflow: hidden; margin: 6px 0 4px; }
.dash-bar i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.dash-rank, .dash-forecast { margin: 0; }
.dash-rank b { color: var(--tint-ink); font-weight: 700; }
.dash-forecast { color: var(--ink); }
.dash-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .dash-kpis { gap: 8px; } .kpi-tile { padding: 10px 12px; } .kpi-value { font-size: 24px; } .dash-nsm b { font-size: 46px; } }
.kpi-tile { display: grid; align-content: start; gap: 2px; padding: 14px 16px; }
.kpi-name { color: var(--soft); font-size: 13.5px; font-weight: 600; }
.kpi-value { font: 800 30px/1.15 var(--display); color: var(--ink); }
.kpi-note { color: var(--soft); font-size: 13px; }
details.how { margin-top: 6px; font-size: 13.5px; }
details.how summary { cursor: pointer; color: var(--link); font-weight: 500; width: max-content; }
details.how p { margin: 6px 0; color: var(--soft); }
details.how pre, pre.code { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--field); border: 1px solid var(--line);
  color: var(--ink); font: 12.5px/1.5 var(--mono); font-variant-ligatures: none; white-space: pre-wrap; overflow-x: auto; }
pre.code { white-space: pre; }  /* код не переносится посреди строки: длинное прокручивается */
.dash-h { margin-top: 4px; }
.dash-sub { margin: -4px 0 12px; }
.widgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 14px; margin-bottom: 18px; align-items: start; }
.widgets.small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; margin-bottom: 22px; }
.widgets.small .widget { padding: 12px 14px; gap: 4px; }
.widgets.small h3 { font-size: 14.5px; }
.widgets.small .widget-about { font-size: 13px; }
.widget { display: grid; align-content: start; gap: 8px; min-width: 0; }
.widget-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.widget-head h3 { margin: 0; font-size: 16px; }
.widget.locked { background: var(--col-bg); border-style: dashed; }
.widget.locked h3 { color: var(--soft); }
.widget .lock { color: var(--faint); display: inline-flex; }
.widget-about { margin: 0; color: var(--soft); font-size: 14px; }
.widget-when { margin: 0; color: var(--faint); font-size: 13px; }
.widget .small { margin: 0; }
.table.events { font-size: 13.5px; }
.table.events td, .table.events th { padding: 6px 8px; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--sans); }
.chart .ax { fill: var(--faint); font-size: 11.5px; }
.chart .val { fill: var(--ink); font-size: 12px; font-weight: 600; }
.chart .note { font-size: 12px; font-weight: 600; }
.funnel { display: grid; gap: 8px; }
.fun-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 34px 42px; gap: 10px; align-items: center; font-size: 14px; }
.fun-label { color: var(--soft); }
.fun-bar { height: 22px; border-radius: 6px; background: var(--soft-bg); overflow: hidden; }
.fun-bar i { display: block; height: 100%; background: var(--primary); border-radius: 6px; min-width: 3px; }
.fun-row b { text-align: right; font-weight: 700; }
.fun-conv { color: var(--soft); font-size: 13px; text-align: right; }
.tree, .ba { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tree-node, .ba > div { display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft-bg); min-width: 92px; }
.tree-node b, .ba b { font: 800 22px/1.2 var(--display); color: var(--ink); }
.tree-node span, .ba span, .ba em { color: var(--soft); font-size: 12.5px; font-style: normal; }
.tree-node.root { background: var(--tint); border-color: var(--tint-line); }
.tree-node.root b { color: var(--tint-ink); }
.tree-node.weak { border-color: var(--danger-line); background: var(--danger-tint); }
.tree-node.weak b { color: var(--danger); }
.tree-op { color: var(--faint); font: 700 18px var(--display); }
.dash-medals { position: relative; }
.dash-insights { margin-bottom: 20px; border-color: var(--tint-line); }
.dash-insights h2 { font-size: 16px; margin-bottom: 6px; }
.dash-insights ul, .job-notes { margin: 0; padding-left: 1.15em; display: grid; gap: 4px; }
.job-widget { margin-bottom: 22px; border-color: var(--tint-line); }
.job-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 6px; }
@media (max-width: 900px) { .job-grid { grid-template-columns: 1fr; } }
.job-data { display: grid; gap: 10px; min-width: 0; }
.job-data .small { margin: 0; }
.job-notes { font-size: 14.5px; }
.job-data .fun-row { grid-template-columns: 112px minmax(0, 1fr) 40px 52px; }
.job-form { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--soft-bg); border: 1px solid var(--line); }
.job-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.job-fields .field, .job-form .field { margin: 0; }
.job-form .help { margin: 0; }

/* Огонёк: дни подряд (courses/streaks.py, _streak.html). Рисунок пламени свой. */
.streak { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; margin: 0 0 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.streak.compact { display: inline-flex; flex-wrap: nowrap; padding: 0; margin: 0; border: 0; background: none; gap: 8px; vertical-align: middle; }
.flame { --ring: 0; flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--ring) * 1%), var(--line) 0); }
.flame-in { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--card); }
.compact .flame { width: 30px; height: 30px; }
.compact .flame-in { width: 24px; height: 24px; }
.compact .flame svg { width: 14px; height: 17px; }
.flame .f-out { fill: var(--faint); }
.flame .f-in { fill: var(--card); }
.streak.lit .f-out { fill: var(--primary); }
.streak.lit .f-in { fill: var(--danger); }
.streak.risk .f-out { fill: var(--primary); opacity: .45; }
.streak-text { display: grid; gap: 1px; min-width: 0; }
.streak-text b { font: 800 17px/1.2 var(--display); color: var(--ink); }
.compact .streak-text b { font-size: 14px; white-space: nowrap; }
.streak-text span { color: var(--soft); font-size: 13px; }
.compact .streak-text span { font-size: 12px; }
td .streak.compact { min-width: 150px; }
.streak.risk .streak-text span { color: var(--danger); }
.streak-days { display: flex; gap: 3px; margin-left: auto; }
.streak-days i { width: 12px; height: 18px; border-radius: 4px; background: var(--soft-bg); border: 1px solid var(--line); }
.streak-days i.on { background: var(--primary); border-color: var(--primary); }
.streak-days i.today { outline: 2px solid var(--tint-line); outline-offset: 1px; }
.streak-mark { margin: 0; }
.kpi-tile .streak-mark { margin-top: 6px; }
@media (max-width: 640px) { .streak-days { margin-left: 0; width: 100%; } }

/* Рейтинг (courses/rating.py): доски, открытая страница */
.rating-flag { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 16px; }
.rating-group { margin-bottom: 16px; }
.rating-group > .small { margin: -2px 0 10px; }
.table.rating td, .table.rating th { padding: 7px 10px; }
.table.rating tr.me td { background: var(--tint); }
.table.rating tr.me td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.table.rating tr.gap td { color: var(--faint); text-align: center; padding: 2px; }
.rating-bar { display: inline-block; width: 90px; height: 8px; margin-right: 8px; border-radius: 999px; background: var(--soft-bg);
  border: 1px solid var(--line); overflow: hidden; vertical-align: middle; }
.rating-bar i { display: block; height: 100%; background: var(--primary); }
.consent-box { margin-top: 16px; display: grid; gap: 8px; }
.consent-box p { margin: 0; }
.story-form { display: grid; gap: 8px; max-width: 640px; }
.public-kpis { margin: 14px 0 20px; }
.grads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.grad { display: grid; gap: 8px; align-content: start; }
.grad-head { display: flex; gap: 12px; align-items: center; }
.grad-head h2 { margin: 0 0 2px; font-size: 18px; }
.grad-story { margin: 0; }
.grad-quote { margin: 0; color: var(--soft); font-style: italic; }
.grad-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; }
.grad-nums div { padding: 8px 10px; border-radius: 10px; background: var(--soft-bg); border: 1px solid var(--line); }
.grad-nums dt { color: var(--soft); font-size: 12px; }
.grad-nums dd { margin: 0; font: 700 16px/1.3 var(--display); }
/* Журнал собеседований: форма над журналом, журнал во всю ширину; на узком экране строки карточками */
.journal-form { margin-bottom: 16px; }
.journal-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 14px; }
.journal-fields .wide { grid-column: 1 / -1; }
.table.journal td { overflow-wrap: anywhere; }
.journal-edit { white-space: nowrap; text-align: right; }
@media (max-width: 640px) {
  .table.journal thead { display: none; }
  .table.journal tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .table.journal td { border: 0; padding: 0; }
  .table.journal td[data-label]::before { content: attr(data-label); display: block; color: var(--soft); font-size: 12px; }
  .journal-edit { text-align: left; }
}