:root {
  --hg: #f6f4ef; --pov: #ffffff; --text: #1f2421; --tiho: #6b716d; --rama: #d9d5cc;
  --akcent: #1f6f50; --akcent-text: #ffffff; --ok: #1f8a4c; --doubt: #c99a12; --ploho: #c0392b; --zv: #2a6fb0; --vydel: #fff4d6;
  --inworld: #6b4fbb; --eleven: #1d1d1d; --soniox: #0b7a8a; --gemini: #3367d6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hg: #141715; --pov: #1c201e; --text: #e8e6e0; --tiho: #9aa19c; --rama: #343a37;
    --akcent: #3fa37a; --akcent-text: #0d1310; --ok: #45b875; --doubt: #e0b43a; --ploho: #e5675a; --zv: #5a9ee0; --vydel: #3a3320;
    --inworld: #a08be0; --eleven: #d8d8d8; --soniox: #4cc3d3; --gemini: #7ea6f0;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--hg); color: var(--text); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
button, .knopka, input, select, textarea { font: inherit; color: inherit; }
button, .knopka { background: var(--pov); border: 1px solid var(--rama); border-radius: 7px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
button:hover, .knopka:hover { border-color: var(--akcent); }
button:disabled { opacity: .5; cursor: default; }
button.opasno { color: var(--ploho); }
button.idet { background: var(--ploho); color: #fff; border-color: var(--ploho); }
input, select, textarea { background: var(--pov); border: 1px solid var(--rama); border-radius: 7px; padding: 5px 8px; }
textarea { width: 100%; resize: vertical; }
a { color: var(--akcent); }
.tiho { color: var(--tiho); font-size: 13px; }
.krasn { color: var(--ploho); }
.ok { color: var(--ok); }
.ryad { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.verh { position: relative; z-index: 6; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between;
  padding: 8px 16px; background: var(--pov); border-bottom: 1px solid var(--rama); }
.nazv { font-size: 17px; }
.nazad { text-decoration: none; margin-right: 4px; }
.knopki { display: flex; gap: 6px; align-items: center; }
.menyu { position: relative; }
.menyu summary { list-style: none; cursor: pointer; background: var(--pov); border: 1px solid var(--rama); border-radius: 7px; padding: 5px 10px; }
.menyu summary::-webkit-details-marker { display: none; }
.menyu-telo { position: absolute; right: 0; top: calc(100% + 4px); z-index: 7; display: grid; gap: 6px; width: min(340px, calc(100vw - 32px));
  background: var(--pov); border: 1px solid var(--rama); border-radius: 10px; padding: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.menyu-telo button, .menyu-telo .knopka { text-align: left; white-space: normal; }

main { padding: 12px 16px 40px; max-width: 1600px; margin: 0 auto; }
.nabor, .itogi { background: var(--pov); border: 1px solid var(--rama); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; }
.nabor summary, .itogi summary { cursor: pointer; }
.sistemy { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 10px 0; }
.sis-blok { border: 1px solid var(--rama); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; margin: 0; min-width: 0; }
.sis-blok legend { padding: 0 4px; }
.sis-blok legend label { display: inline-flex; gap: 5px; align-items: center; color: var(--text); font-size: 15px; }
.sis-blok.vykl > :not(legend) { opacity: .45; }
.sis-blok label { display: grid; gap: 2px; font-size: 13px; color: var(--tiho); }
.sis-blok select, .sis-blok input:not([type=checkbox]) { width: 100%; color: var(--text); }
.sis-inworld legend b { color: var(--inworld); } .sis-eleven legend b { color: var(--eleven); } .sis-soniox legend b { color: var(--soniox); } .sis-gemini legend b { color: var(--gemini); }
.nabor-niz { justify-content: space-between; border-top: 1px dashed var(--rama); padding-top: 8px; }
.nabor-niz label { display: inline-flex; gap: 4px; align-items: center; }

.panel { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 8px; }
.panel #f-poisk { min-width: 12em; flex: 1 1 12em; max-width: 22em; }
.tiho-panel { font-size: 13px; }
.ochered { font-weight: 600; }
.prosl { display: inline-flex; gap: 4px; align-items: center; }
.prosl input { width: 110px; }
.klavishi { margin-left: auto; }

.tabl-obertka { overflow: auto; max-height: calc(100vh - 120px); border: 1px solid var(--rama); border-radius: 12px; background: var(--pov); }
#tablica { border-collapse: separate; border-spacing: 0; width: 100%; }
#tablica th { position: sticky; top: 0; z-index: 2; background: var(--pov); border-bottom: 1px solid var(--rama); padding: 6px; font-size: 13px; font-weight: 600; text-align: left; vertical-align: bottom; }
#tablica th small { font-weight: normal; color: var(--tiho); }
#tablica td { border-bottom: 1px solid var(--rama); padding: 5px 6px; vertical-align: top; }
#tablica .slovo-g, #tablica td.slovo { position: sticky; left: 0; z-index: 1; background: var(--pov); min-width: 170px; max-width: 210px; border-right: 1px solid var(--rama); }
#tablica .slovo-g { z-index: 3; }
td.slovo .n { font-size: 12px; color: var(--tiho); }
td.slovo .de { font-weight: 700; }
td.slovo .ru { font-size: 17px; font-weight: 700; }
td.slovo .ud { color: var(--tiho); }
.prs { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.pr { font-size: 10.5px; color: var(--tiho); border: 1px solid var(--rama); border-radius: 6px; padding: 0 4px; }
.sis { font-weight: 700; } .sis-inworld { color: var(--inworld); } .sis-eleven { color: var(--eleven); } .sis-soniox { color: var(--soniox); } .sis-gemini { color: var(--gemini); }
th.kl { min-width: 118px; }
td.ya { min-width: 118px; border-left: 3px solid transparent; }
td.ya.o-good { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--pov)); }
td.ya.o-doubt { border-left-color: var(--doubt); background: color-mix(in srgb, var(--doubt) 11%, var(--pov)); }
td.ya.o-bad { border-left-color: var(--ploho); background: color-mix(in srgb, var(--ploho) 8%, var(--pov)); }
td.ya.zvezda { box-shadow: inset 0 0 0 2px var(--zv); }
td.ya .ryad { gap: 3px; flex-wrap: nowrap; }
td.ya .ryad.mal { margin-top: 3px; }
td.ya button { padding: 2px 7px; font-size: 13px; }
td.ya .mal button { padding: 1px 6px; font-size: 12px; }
td.ya .metka { font-size: 12px; font-weight: 700; color: var(--tiho); margin-bottom: 2px; }
.oc-good.akt { background: var(--ok); border-color: var(--ok); color: #fff; }
.oc-doubt.akt { background: var(--doubt); border-color: var(--doubt); color: #fff; }
.oc-bad.akt { background: var(--ploho); border-color: var(--ploho); color: #fff; }
.zv.akt { background: var(--zv); border-color: var(--zv); color: #fff; }
.skolko, .prich, .nesohr { font-size: 11px; color: var(--tiho); align-self: center; }
.prich { color: var(--ploho); font-weight: 700; } .nesohr { color: var(--ploho); }
.st { font-size: 11.5px; margin-top: 2px; color: var(--tiho); max-width: 160px; overflow-wrap: anywhere; }
.st-oshibka, .st-neyasno { color: var(--ploho); }
td.kurs { width: 44px; }
td.deystv { white-space: nowrap; }
td.deystv button { padding: 2px 7px; }
tr.akt-str > td { background-image: linear-gradient(var(--vydel), var(--vydel)); }
tr.akt-str > td.ya.o-good, tr.akt-str > td.ya.o-doubt, tr.akt-str > td.ya.o-bad { background-image: none; }
td.akt-ya { outline: 2px solid var(--akcent); outline-offset: -2px; }
tr.s-zvezdoy td.slovo .ru::after { content: ' ★'; color: var(--zv); }
tr.podrobno > td { background: var(--hg); }
.pod { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr); gap: 14px; }
.pod .pole { display: flex; gap: 4px; align-items: flex-start; margin: 4px 0 6px; }
.vse-dubli { border-collapse: collapse; width: 100%; margin-top: 4px; }
.vse-dubli td { padding: 4px 6px; border-bottom: 1px dashed var(--rama) !important; vertical-align: top; position: static !important; background: none !important; }
.vse-dubli tr.vydel td { background: var(--vydel) !important; }
.vse-dubli .oc-td { white-space: nowrap; }
.vse-dubli .prichiny { font-size: 12px; }
.vse-dubli .prichiny label { display: inline-flex; gap: 2px; margin-right: 6px; white-space: nowrap; }
.vse-dubli pre { margin: 0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pusto { padding: 20px; text-align: center; color: var(--tiho); }

.itogi h3 { font-size: 15px; margin: 12px 0 4px; }
.shir { overflow-x: auto; }
table.it { border-collapse: collapse; min-width: 100%; font-size: 13px; }
table.it th, table.it td { border-bottom: 1px solid var(--rama); padding: 4px 8px; text-align: left; }
.c-good { color: var(--ok); } .c-doubt { color: var(--doubt); } .c-bad { color: var(--ploho); }

dialog { border: 1px solid var(--rama); border-radius: 14px; background: var(--pov); color: var(--text); max-width: 560px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(0,0,0,.4); }
.dlg { display: grid; gap: 10px; }
.dlg h2 { margin: 0; font-size: 18px; }
.kl-pole { display: grid; gap: 3px; }
.kl-pole input { flex: 1; min-width: 10em; }
.kl-pole .rez { font-size: 13px; }

.tost { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--text); color: var(--hg); padding: 9px 14px; border-radius: 10px; z-index: 10; max-width: calc(100% - 32px); }

@media (max-width: 760px) {
  main { padding: 10px 10px 40px; }
  .verh { padding: 8px 10px; }
  .nazv .tiho, .klavishi { display: none; }
  #tablica .slovo-g, #tablica td.slovo { min-width: 120px; max-width: 140px; }
  td.slovo .prs { display: none; }
  .pod { grid-template-columns: 1fr; }
  .tabl-obertka { max-height: none; }
}

button.glavn { background: var(--akcent); color: var(--akcent-text); border-color: var(--akcent); font-weight: 600; }

/* журнал */
table.zh td { white-space: nowrap; }
table.zh td:last-child { white-space: normal; min-width: 18em; }
tr.zh-oshibka td, tr.zh-neyasno td, tr.zh-pauza td { color: var(--ploho); }
tr.zh-limit td { color: var(--doubt); }
tr.zh-gotovo td:nth-child(6) { color: var(--ok); font-weight: 600; }