:root {
  --fon: #f6f3ec;
  --karta: #ffffff;
  --tekst: #1f2433;
  --tusk: #5d6476;
  --glavnyj: #23407a;
  --glavnyj-2: #2f56a3;
  --zoloto: #c99a2e;
  --zoloto-svet: #f6ecd2;
  --verno: #2e7d4f;
  --verno-svet: #e3f3e9;
  --oshibka: #b4532a;
  --oshibka-svet: #fbe9df;
  --linia: #e3ded2;
  --ten: 0 2px 10px rgba(31, 36, 51, .08);
  --r: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fon: #161a24; --karta: #20263a; --tekst: #eceef4; --tusk: #a9afc0;
    --glavnyj: #8fb0f0; --glavnyj-2: #a9c3f7; --zoloto: #e2b85a; --zoloto-svet: #3a321f;
    --verno: #6cc792; --verno-svet: #1d3a2a; --oshibka: #f0946a; --oshibka-svet: #43281c;
    --linia: #343b52; --ten: 0 2px 10px rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fon); color: var(--tekst); }
body { font: 19px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 30px; margin: 8px 0 4px; }
h2 { font-size: 24px; margin: 24px 0 12px; }
h3 { font-size: 20px; margin: 16px 0 8px; }
p { margin: 8px 0; }
.tusk { color: var(--tusk); }
.skryt { display: none !important; }

.shapka { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.logo { font-weight: 700; color: var(--glavnyj); letter-spacing: .3px; }
.logo span { color: var(--zoloto); }

.karta { background: var(--karta); border-radius: var(--r); box-shadow: var(--ten); padding: 20px; margin: 16px 0; }
.plitki { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.plitka { background: var(--karta); border-radius: var(--r); box-shadow: var(--ten); padding: 16px; }
.plitka .chislo { font-size: 34px; font-weight: 700; color: var(--glavnyj); line-height: 1.1; }
.plitka .podpis { color: var(--tusk); font-size: 16px; }

button, .knopka {
  font: inherit; cursor: pointer; border: 0; border-radius: 14px; padding: 14px 22px;
  background: var(--glavnyj); color: #fff; font-weight: 600; text-decoration: none; display: inline-block;
  transition: transform .06s, background .15s;
}
@media (prefers-color-scheme: dark) { button, .knopka { color: #10131c; } }
button:hover, .knopka:hover { background: var(--glavnyj-2); }
button:active { transform: scale(.98); }
button:disabled { opacity: .45; cursor: default; transform: none; }
button.vtorich { background: transparent; color: var(--glavnyj); box-shadow: inset 0 0 0 2px var(--glavnyj); }
button.vtorich:hover { background: var(--zoloto-svet); }
button.bolshaya { font-size: 24px; padding: 20px 32px; width: 100%; }
button.ssylka { background: none; color: var(--tusk); padding: 6px; font-weight: 400; text-decoration: underline; }
.ryad { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

/* передача */
.ekran { background: var(--karta); border-radius: var(--r); box-shadow: var(--ten); overflow: hidden; }
.ekran .chast { padding: 14px 20px; font-weight: 700; color: var(--glavnyj); border-bottom: 1px solid var(--linia); }
.ekran .kartina { aspect-ratio: 4 / 3; max-height: 52vh; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--zoloto-svet); }
.ekran .kartina img { max-width: 100%; max-height: 52vh; object-fit: contain; }
.ekran .zaglushka { font-size: 64px; color: var(--zoloto); text-align: center; padding: 20px; }
.ekran .zaglushka small { display: block; font-size: 20px; color: var(--tusk); }
.status { padding: 12px 20px; min-height: 52px; font-size: 20px; }
.status.vopros { background: var(--zoloto-svet); font-weight: 600; }
.upravlenie { display: flex; align-items: center; gap: 12px; padding: 12px 20px 20px; }
.polosa { flex: 1; height: 12px; background: var(--linia); border-radius: 6px; position: relative; cursor: pointer; }
.polosa .zalivka { position: absolute; inset: 0 auto 0 0; background: var(--glavnyj); border-radius: 6px; width: 0; }
.polosa .metka { position: absolute; top: -3px; width: 3px; height: 18px; background: var(--zoloto); border-radius: 2px; }
.vremya { color: var(--tusk); font-variant-numeric: tabular-nums; font-size: 16px; min-width: 96px; text-align: right; }

/* вопросы */
.vopros-tekst { font-size: 24px; font-weight: 600; margin: 12px 0 16px; }
.media-foto { text-align: center; background: var(--zoloto-svet); border-radius: 12px; padding: 12px; }
.media-foto img { max-width: 100%; max-height: 44vh; object-fit: contain; border-radius: 8px; }
.media-audio { display: flex; align-items: center; gap: 16px; background: var(--zoloto-svet); border-radius: 12px; padding: 16px; }
.varianty { display: grid; gap: 10px; margin-top: 12px; }
.variant {
  text-align: left; background: var(--karta); color: var(--tekst); box-shadow: inset 0 0 0 2px var(--linia);
  font-weight: 500; padding: 16px 20px;
}
.variant:hover { background: var(--zoloto-svet); }
.variant.vybran { box-shadow: inset 0 0 0 3px var(--glavnyj); background: var(--zoloto-svet); }
.variant.verno { box-shadow: inset 0 0 0 3px var(--verno); background: var(--verno-svet); }
.variant.neverno { box-shadow: inset 0 0 0 3px var(--oshibka); background: var(--oshibka-svet); }
.variant:disabled { opacity: 1; }
.vvod { display: flex; gap: 10px; margin-top: 12px; }
.vvod input { flex: 1; font: inherit; padding: 14px; border-radius: 12px; border: 2px solid var(--linia); background: var(--karta); color: var(--tekst); }
.otklik { border-radius: 12px; padding: 14px 18px; margin-top: 14px; }
.otklik.proverka { background: var(--zoloto-svet); }
.otklik.verno { background: var(--verno-svet); }
.otklik.neverno { background: var(--oshibka-svet); }
.otklik b { display: block; font-size: 21px; margin-bottom: 4px; }
.schet { color: var(--tusk); font-size: 16px; }
.progress { height: 8px; background: var(--linia); border-radius: 4px; overflow: hidden; margin: 8px 0 4px; }
.progress div { height: 100%; background: var(--zoloto); width: 0; transition: width .3s; }

.vybor-poryadka { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.vybor-poryadka button { padding: 24px 16px; font-size: 22px; }
.vybor-poryadka small { display: block; font-weight: 400; font-size: 16px; opacity: .85; }

.zvanie-novoe { background: var(--zoloto-svet); border-radius: 12px; padding: 14px 18px; margin: 8px 0; font-weight: 600; }
.rukami h1, .rukami h2 { font-size: 22px; }
.rukami li { margin: 6px 0; }

/* экран мамы */
table { width: 100%; border-collapse: collapse; font-size: 17px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linia); vertical-align: top; }
th { color: var(--tusk); font-weight: 600; }
details summary { cursor: pointer; color: var(--glavnyj); }
.metka-status { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 15px; }
.metka-status.zakryta { background: var(--verno-svet); color: var(--verno); }
.metka-status.povtorit { background: var(--oshibka-svet); color: var(--oshibka); }
.ssylka-vhoda { word-break: break-all; background: var(--zoloto-svet); padding: 10px; border-radius: 8px; font-family: ui-monospace, monospace; font-size: 15px; }

@media (max-width: 560px) {
  body { font-size: 17px; }
  h1 { font-size: 25px; }
  .vopros-tekst { font-size: 21px; }
  button.bolshaya { font-size: 21px; }
  table { font-size: 15px; }
}

/* календарь */
.kal-shapka { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kal-mesyac { font-size: 22px; font-weight: 700; min-width: 170px; text-align: center; text-transform: capitalize; }
.kal-itog { margin-left: auto; }
button.malaya { padding: 6px 16px; font-size: 22px; line-height: 1; }
.kal-sled { margin: 10px 0; }
.kal-setka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.kal-den-nedeli { text-align: center; color: var(--tusk); font-size: 14px; font-weight: 600; padding: 4px 0; }
.kal-den { min-height: 86px; background: var(--fon); border-radius: 10px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.kal-den.pusto { background: transparent; }
.kal-den.mozhno { cursor: pointer; }
.kal-den.mozhno:hover { box-shadow: inset 0 0 0 2px var(--linia); }
.kal-den.segodnya { box-shadow: inset 0 0 0 2px var(--zoloto); }
.kal-den.syuda { box-shadow: inset 0 0 0 3px var(--glavnyj); background: var(--zoloto-svet); }
.kal-chislo { font-size: 14px; color: var(--tusk); padding: 0 2px; }
.zan { display: block; border-radius: 7px; padding: 3px 6px; font-size: 13px; line-height: 1.25; color: #fff; overflow: hidden; overflow-wrap: anywhere; }
.zan[draggable="true"] { cursor: grab; }
.zan.tashchu { opacity: .4; }
.zan.plan { background: var(--glavnyj); }
.zan.proshlo { background: var(--verno); }
.zan.ne_otmecheno { background: var(--zoloto); color: #2a2208; }
.zan.propusk { background: var(--oshibka); }
.zan.otmena { background: var(--linia); color: var(--tusk); text-decoration: line-through; }
@media (prefers-color-scheme: dark) { .zan.plan, .zan.proshlo, .zan.propusk { color: #10131c; } }
.zan-vremya { font-weight: 700; }
.zan-otmetka { display: block; font-weight: 700; }
.kal-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 15px; color: var(--tusk); }
.kal-legenda i.zan { display: inline-block; width: 14px; height: 14px; padding: 0; margin-right: 6px; vertical-align: -2px; }

/* окно правки */
dialog.okno { border: 0; border-radius: var(--r); padding: 20px; width: min(520px, calc(100vw - 32px)); background: var(--karta); color: var(--tekst); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog.okno::backdrop { background: rgba(20, 24, 36, .45); }
.pole { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; flex: 1; }
.pole span { color: var(--tusk); font-size: 15px; }
.pole input, .pole select, .pole textarea { font: inherit; font-size: 17px; padding: 10px; border-radius: 10px; border: 2px solid var(--linia); background: var(--karta); color: var(--tekst); }
.polya-ryad { display: flex; gap: 12px; flex-wrap: wrap; }
.galki { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.galka { display: flex; gap: 4px; align-items: center; }
.oshibka-tekst { color: var(--oshibka); min-height: 1em; }
button.opasno { color: var(--oshibka); margin-left: auto; }

@media (max-width: 560px) {
  .kal-den { min-height: 64px; }
  .zan { font-size: 11px; padding: 2px 4px; }
  .zan-nazv { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}