/* «Клавиши» — фирменный стиль (ТЗ 06, раздел 6.2) */
:root {
  --ebony: #1E1B2E; --ivory: #FBF6EC; --surface: #FFFFFF; --primary: #4B4FD6; --primary-dark: #3A3EB8;
  --accent: #FF8A3D; --sun: #FFC940; --ok: #1F9E7A; --warn: #D98A00; --err: #E0483E;
  --muted: #5E5A6E; --line: #E6DFD0; --soft: #F4EFE4;
  --radius: 12px; --font: "Manrope", "Segoe UI", Arial, sans-serif; --display: "Unbounded", var(--font);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--ivory); color: var(--ebony); font: 16px/1.5 var(--font); }
a { color: var(--primary); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; }
h1 { font: 600 26px/1.25 var(--display); }
h2 { font-size: 19px; }

/* шапка */
.top { display: flex; align-items: center; gap: 20px; padding: 10px 24px; background: var(--surface);
       border-bottom: 1px solid var(--line); }
.top .logo img { height: 48px; display: block; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--ebony); padding: 8px 14px; border-radius: 999px; }
.top nav a.on, .top nav a:hover { background: var(--soft); }
.top .who { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }

footer.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 0 16px 24px; }
/* уютные растения выглядывают из-за карточек — декор, случайный на каждой странице */
body { overflow-x: hidden; }
main { position: relative; }
main > * { position: relative; z-index: 1; }
main > .decor { position: absolute; z-index: 0; height: 150px; pointer-events: none; user-select: none;
                filter: saturate(.45) opacity(.7); }
.decor-l { left: -78px; bottom: 30px; transform: rotate(-16deg); }
.decor-r { right: -84px; transform: scaleX(-1) rotate(-14deg); }
@media (max-width: 1200px) { main > .decor { height: 115px; } .decor-l { left: -64px; } .decor-r { right: -70px; } }
@media (max-width: 720px) { main > .decor { display: none; } }
main { max-width: 1040px; margin: 0 auto; padding: 24px 16px 48px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; }
.center { max-width: 460px; margin: 6vh auto; }
.hero { text-align: center; }
.hero img { max-width: 100%; height: auto; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* экран входа: иллюстрация слева, форма справа */
.card.split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; padding: 0; overflow: hidden; max-width: 1000px; margin: 4vh auto; }
.split-art { background: #FBF3E3; display: flex; align-items: center; }
.split-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-form { padding: 36px 36px 28px; align-self: center; }
.split-logo { height: 56px; display: block; margin-bottom: 8px; }
@media (max-width: 820px) { .card.split { grid-template-columns: 1fr; } .split-art img { max-height: 260px; } }

/* формы */
label { display: block; font-weight: 600; font-size: 14px; margin: 12px 0 4px; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px 16px; margin: 16px 0; }
legend { font-weight: 700; padding: 0 6px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 4px; }

.btn { display: inline-block; font: 600 15px var(--font); border: 0; border-radius: 999px; padding: 11px 22px;
       background: var(--primary); color: #fff; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--primary-dark); }
.btn.sec { background: var(--soft); color: var(--ebony); }
.btn.danger { background: #FDE3E1; color: var(--err); }
.btn.wide { width: 100%; margin-top: 18px; }
.linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; padding: 0; }

/* сообщения и метки статуса (цвет + значок + текст) */
.msg { padding: 10px 14px; border-radius: 10px; margin: 12px 0; }
.msg.err { background: #FDE3E1; } .msg.ok { background: #DDF3EB; } .msg.warn { background: #FFF1D6; }
.tag { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.tag::before { font-weight: 700; }
.tag.ok { background: #DDF3EB; color: #146B53; } .tag.ok::before { content: "✓"; }
.tag.warn { background: #FFF1D6; color: #8A5A00; } .tag.warn::before { content: "!"; }
.tag.wait { background: #ECEBFB; color: var(--primary-dark); } .tag.wait::before { content: "…"; }
.tag.off { background: var(--soft); color: var(--muted); } .tag.off::before { content: "–"; }

/* таблицы */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 13px; color: var(--muted); font-weight: 600; }
tr.link:hover { background: var(--soft); cursor: pointer; }
dl.props { display: grid; grid-template-columns: 220px 1fr; gap: 6px 16px; margin: 0; }
dl.props dt { color: var(--muted); } dl.props dd { margin: 0; }
.copy { display: flex; gap: 8px; } .copy input { font-size: 14px; }

/* ученик */
.today { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; }
.today img { width: 200px; }
.mode-junior h1 { font-size: 30px; } .mode-junior .btn { padding: 14px 26px; font-size: 17px; }

@media (max-width: 720px) {
  .grid2, .today, dl.props { grid-template-columns: 1fr; }
  .top { padding: 10px 16px; flex-wrap: wrap; }
  .hide-sm { display: none; }
}

/* итерация 1.2: библиотека, ноты, запись */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.notation svg { max-width: 100%; height: auto; display: block; }
.rollbox { overflow-x: auto; border-radius: 8px; }
.rollbox canvas { display: block; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--err); display: inline-block; }
.dot.on { background: var(--ok); }
.mono { font: 600 18px/1 monospace; }
.steps { display: grid; gap: 8px; margin-top: 12px; }
.step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--soft); }
.step .n { width: 26px; height: 26px; border-radius: 50%; background: var(--line); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.step.done .n { background: var(--ok); color: #fff; } .step.warn .n { background: var(--warn); color: #fff; }
.step.active { outline: 2px solid var(--primary); }
.step .res { font-size: 14px; color: var(--muted); }
ul.plain { list-style: none; padding: 0; margin: 0 0 12px; }
ul.plain li { padding: 4px 0; }
@media (max-width: 720px) { .grid3 { grid-template-columns: 1fr; } }

/* итерация 1.4: результат попытки */
.score-head { display: flex; gap: 20px; align-items: center; margin: 8px 0 16px; }
.score-big { font: 600 56px/1 var(--display); }
.score-big span { font-size: 18px; color: var(--muted); }
.stars span { font-size: 28px; color: var(--line); } .stars span.on { color: var(--sun); }
.verdict { font-weight: 700; font-size: 18px; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.tile { border-radius: 12px; padding: 12px; background: var(--soft); border-top: 4px solid var(--line); }
.tile img { width: 28px; height: 28px; }
.tile-name { font-weight: 700; font-size: 14px; margin-top: 4px; }
.tile-score { font: 600 26px/1.2 var(--display); }
.tile.st-na { opacity: .6; } .tile.st-green { border-top-color: var(--ok); } .tile.st-yellow { border-top-color: var(--warn); } .tile.st-red { border-top-color: var(--err); }
.problems li { display: flex; gap: 8px; align-items: center; }
.dot.st-dot-red { background: var(--err); } .dot.st-dot-yellow { background: var(--warn); }
table.heat { width: auto; font-size: 12px; } table.heat th, table.heat td { padding: 3px 6px; text-align: center; border: 1px solid var(--line); }
.h-g { background: #DDF3EB; } .h-y { background: #FFF1D6; } .h-r { background: #FDE3E1; }
.score-chip { font-weight: 700; }
@media (max-width: 720px) { .tiles { grid-template-columns: repeat(2, 1fr); } .score-big { font-size: 44px; } }

/* проигрыватель записи */
.player { display: inline-flex; gap: 8px; align-items: center; }
.player input[type=range] { width: 160px; accent-color: var(--primary); }
.pstop { font-size: 18px; color: var(--ebony); }

/* итерация 1.5: правки, сводка, сигналы */
.corr { color: var(--primary-dark); margin-top: 4px; }
.review { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.summary .nums { display: flex; gap: 28px; flex-wrap: wrap; margin: 8px 0 12px; }
.summary .nums b { display: block; font: 600 26px/1.1 var(--display); }

/* справка */
.q { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-left: 6px;
     background: var(--soft); color: var(--muted); font: 700 13px var(--font); text-decoration: none; vertical-align: middle; }
.q:hover { background: var(--primary); color: #fff; }
.help-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs a { text-decoration: none; color: var(--ebony); padding: 8px 14px; border-radius: 999px; }
.tabs a.on, .tabs a:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.help-grid { display: grid; grid-template-columns: 240px 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.toc { position: sticky; top: 12px; font-size: 14px; } .toc a { text-decoration: none; }
.help h1 { margin-bottom: 8px; } .help h2 { margin-top: 26px; scroll-margin-top: 16px; }
.help li { margin: 4px 0; } .help p, .help li { line-height: 1.6; }
@media (max-width: 820px) { .help-grid { grid-template-columns: 1fr; } .toc { position: static; } }
@media print {
  .top, .no-print, footer.foot, main > .decor { display: none !important; }
  body { background: #fff; } .card { border: 0; padding: 0; } .help-grid { display: block; }
  .help h2 { break-after: avoid; color: var(--primary-dark); }
}

/* фильтры списков */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.filters input[type=search] { flex: 1 1 240px; width: auto; }
.filters select { width: auto; flex: 0 1 auto; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
        padding: 6px 12px; cursor: pointer; }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; } .chip.on .muted { color: #E4E4FF; }

/* ---------- 1.6: программа, план, контрольные точки ---------- */
.day-plan { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.day-plan li { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--soft); }
.day-plan li > div { flex: 1; }
.day-plan .mins { min-width: 56px; font-weight: 700; color: var(--primary-dark); }
.plan-counts { gap: 6px; margin-bottom: 8px; }
.add-item { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.add-item select, .add-item input { flex: 1 1 180px; width: auto; }
.checkpoint { border-top: 1px solid var(--line); padding: 10px 0; }
.checkpoint:first-of-type { border-top: 0; }
.warn-text { color: #8A5A00; font-weight: 600; }
td form.row { gap: 6px; flex-wrap: nowrap; }
td form.row select { width: auto; padding: 4px 6px; }
#program h3 { margin-top: 18px; }
.nw { white-space: nowrap; }