:root {
  --bg: #f4f6fb;
  --card: #ffffff;
  --text: #1a1c22;
  --muted: #5e6472;
  --line: #dde1ea;
  --primary: #1565c0;
  --on-primary: #ffffff;
  --primary-soft: #dbe7fb;
  --ok: #2e7d32;
  --ok-soft: #e3f2e5;
  --bad: #c62828;
  --bad-soft: #fde7e7;
  --info: #1e5fb4;
  --water: #1e88e5;
  --garbage: #6d8b3a;
  --land: #b7791f;
  --warn-soft: #f3e8fb;
  --radius: 14px;
  color-scheme: light;
}

/* тёмная: по системе (если не выбрана светлая вручную) или выбрана вручную */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111318;
    --card: #1b1e25;
    --text: #e6e8ee;
    --muted: #a1a7b4;
    --line: #2d313b;
    --primary: #a8c7fa;
    --on-primary: #0b2a55;
    --primary-soft: #23324a;
    --ok: #81c784;
    --ok-soft: #1d2e20;
    --bad: #ef9a9a;
    --bad-soft: #3a1f22;
    --info: #90caf9;
    --warn-soft: #33283d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #111318;
    --card: #1b1e25;
    --text: #e6e8ee;
    --muted: #a1a7b4;
    --line: #2d313b;
    --primary: #a8c7fa;
    --on-primary: #0b2a55;
    --primary-soft: #23324a;
    --ok: #81c784;
    --ok-soft: #1d2e20;
    --bad: #ef9a9a;
    --bad-soft: #3a1f22;
    --info: #90caf9;
    --warn-soft: #33283d;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }

.wrap { max-width: 900px; margin: 0 auto; padding: 16px 16px 96px; }

/* ---------- шапка ---------- */
.top {
  position: sticky; top: 0; z-index: 5;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
}
.top-in { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.top h1 { font-size: 18px; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .who { font-size: 12px; color: var(--muted); }
.back { border: 0; background: none; font-size: 22px; padding: 4px 8px; cursor: pointer; }

/* ---------- нижние вкладки ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button {
  flex: 1; border: 0; background: none; padding: 10px 4px 8px; cursor: pointer;
  font-size: 12px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tabs button .ic { font-size: 20px; }
.tabs button.on { color: var(--primary); font-weight: 600; }

/* ---------- широкий экран: меню слева, как в программе на ПК ---------- */
.tabs .logo { display: none; }
@media (min-width: 760px) {
  .tabs {
    top: 0; bottom: 0; right: auto; width: 92px;
    flex-direction: column; justify-content: flex-start; gap: 4px;
    border-top: 0; border-right: 1px solid var(--line);
    padding: 12px 0 0;
  }
  .tabs .logo { display: block; text-align: center; font-size: 26px; padding: 4px 0 14px; }
  .tabs button { flex: none; padding: 8px 4px 10px; }
  .tabs button .ic {
    width: 56px; height: 32px; border-radius: 16px;
    display: grid; place-items: center;
  }
  .tabs button.on .ic { background: var(--primary-soft); }
  body.rail { padding-left: 92px; }
  body.rail .wrap { padding-bottom: 32px; }
}

/* ---------- элементы ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin: 10px 0;
}
.row { display: flex; gap: 10px; align-items: center; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); font-size: 13px; }
.h2 { font-size: 17px; font-weight: 600; margin: 18px 4px 8px; }
.big { font-size: 22px; font-weight: 700; }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.hidden { display: none !important; }

input, select, textarea {
  width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 12px 18px; cursor: pointer;
  background: var(--primary); color: var(--on-primary); font-weight: 600;
}
.btn.ghost { background: transparent; color: var(--primary); border: 1px solid var(--line); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.chip {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; font-size: 14px;
}
.chip.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.stat .v { font-size: 20px; font-weight: 700; margin-top: 4px; }
.stat.water .v { color: var(--water); }
.stat.garbage .v { color: var(--garbage); }
.stat.land .v { color: var(--land); }

.list .item {
  display: flex; gap: 12px; align-items: center; padding: 12px 4px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.list .item:last-child { border-bottom: 0; }
.acc {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft);
  color: var(--primary); display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.badge.ok { background: var(--ok-soft); }
.badge.bad { background: var(--bad-soft); }
.badge.off { background: var(--line); color: var(--muted); }
.badge.warn { background: var(--warn-soft); }

/* ---------- месяцы ---------- */
.months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 560px) { .months { grid-template-columns: repeat(4, 1fr); } }
.m {
  border: 0; border-radius: 10px; padding: 14px 8px; cursor: pointer; font-weight: 500;
  background: var(--line); text-align: center;
}
.m.debt { background: var(--bad-soft); color: var(--bad); }
.m.paid { background: var(--ok-soft); color: var(--ok); cursor: default; }
.m.exempt, .m.disabled { opacity: .45; cursor: default; }
.m.locked { opacity: .45; cursor: not-allowed; }
.m.sel { background: var(--primary); color: var(--on-primary); }
.yearbar { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; }
.yearbar button { font-size: 22px; border: 0; background: none; padding: 6px 14px; cursor: pointer; }

.paybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--card);
  border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.paybar .in { max-width: 900px; margin: 0 auto; display: flex; gap: 12px; align-items: center; }

/* ---------- вход ---------- */
.login { max-width: 380px; margin: 12vh auto 0; padding: 0 16px; }
.login .logo { font-size: 44px; text-align: center; }
.login h1 { text-align: center; margin: 4px 0; font-size: 24px; }
.login p { text-align: center; }
.login input { margin: 8px 0; }

.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 20;
  background: #222; color: #fff; padding: 12px 18px; border-radius: 10px; max-width: 90vw;
}
.toast.err { background: var(--bad); color: #fff; }

.loading { text-align: center; padding: 40px; color: var(--muted); }

/* ---------- чек: печать ---------- */
.receipt-print, .sheet-print { display: none; }
@media print {
  body > *:not(.receipt-print):not(.sheet-print) { display: none !important; }
  .sheet-print { display: block; color: #000; background: #fff; font: 12px/1.4 system-ui, sans-serif; }
  .sheet-print table { border-collapse: collapse; width: 100%; margin-top: 8px; }
  .sheet-print th, .sheet-print td { border: 1px solid #999; padding: 4px 6px; text-align: left; vertical-align: top; color: #000; }
  .sheet-print img { width: 240px; height: 170px; object-fit: cover; margin: 0 6px 6px 0; }
  .sheet-print h3 { margin: 12px 0 4px; }
  .receipt-print { display: block; width: 58mm; font: 11px/1.35 system-ui, sans-serif; color: #000; }
  .receipt-print .c { text-align: center; }
  .receipt-print .b { font-weight: 700; }
  .receipt-print hr { border: 0; border-top: 1px dashed #000; }
  .receipt-print table { width: 100%; }
  .receipt-print td { vertical-align: top; }
  @page { margin: 3mm; }
}

/* ---------- значки Material (как в программе) ---------- */
.material-symbols-outlined {
  font-size: 22px; line-height: 1; vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.tabs .logo .material-symbols-outlined { font-size: 30px; color: var(--primary); }
.tabs button.on .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.tabs .ic { position: relative; }
.nbadge {
  position: absolute; top: -2px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; line-height: 18px; font-weight: 700;
}
.back { color: var(--text); display: grid; place-items: center; }

/* на телефоне — «Ещё» */
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; }
.sheet-in { width: 100%; background: var(--card); border-radius: 16px 16px 0 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
.sheet-item { width: 100%; border: 0; background: none; text-align: left; padding: 14px 20px; display: flex; gap: 14px; align-items: center; font-size: 16px; cursor: pointer; }
.sheet-item.on { color: var(--primary); font-weight: 600; }

/* сегменты (вкладки внутри экрана) */
.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 10px 0; }
.seg button { flex: 1; border: 0; background: var(--card); padding: 10px 6px; cursor: pointer; display: flex; gap: 6px; justify-content: center; align-items: center; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

.card.warn { background: var(--warn-soft); }
.card.active { border-color: var(--primary); border-width: 2px; }
.info { color: var(--info); font-weight: 600; }
.chips .btn { padding: 9px 14px; }
.bar { height: 8px; border-radius: 4px; background: var(--ok-soft); overflow: hidden; margin: 8px 0 6px; }
.bar i { display: block; height: 100%; background: var(--land); }
.req { padding: 10px 0; border-top: 1px solid var(--line); }
.req:first-of-type { border-top: 0; }
.street { padding: 6px 0 6px 6px; display: flex; gap: 8px; align-items: center; }
a.item.file { color: inherit; text-decoration: none; }
.list .item .material-symbols-outlined { color: var(--muted); }

/* ---------- дома улицы ---------- */
.houses { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; margin-top: 10px; }
.house {
  border: 0; border-radius: 10px; padding: 10px 4px; cursor: pointer; background: var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted);
}
.house b { font-size: 16px; color: var(--text); }
.house span { display: flex; align-items: center; font-size: 12px; }
.house span .material-symbols-outlined { font-size: 15px; }
.house.has { background: var(--primary-soft); color: var(--primary); }
.house.reported { outline: 2px solid var(--info); }
.house.absent { opacity: .4; }
.house.sel { outline: 2px solid var(--primary); }
.radio { display: flex; gap: 8px; align-items: center; padding: 8px 0; cursor: pointer; }
.radio input { width: auto; }
.yearbar button:disabled { opacity: .3; }

/* ---------- график аналитики ---------- */
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw.water, .b.water { background: var(--water); }
.sw.garbage, .b.garbage { background: var(--garbage); }
.chart { display: flex; height: 230px; padding-top: 8px; }
.axis { position: relative; width: 58px; height: 200px; flex: none; }
.axis span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.plot { position: relative; flex: 1; display: flex; align-items: flex-start; height: 200px; }
.gl { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.mcol { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.bars { height: 200px; flex: none; display: flex; align-items: flex-end; gap: 2px; position: relative; }
.b { width: clamp(3px, 1vw, 10px); border-radius: 4px 4px 0 0; min-height: 0; }
.ml { font-size: 11px; color: var(--muted); margin-top: 6px; }
.rt { border-collapse: collapse; font-size: 14px; }
.rt th, .rt td { padding: 6px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.rt td:first-child, .rt th:first-child { text-align: left; }
.stat .v .material-symbols-outlined, .stat .muted .material-symbols-outlined { font-size: 16px; }

/* управление: поля форм, полоса выполнения, график, таблица изменений */
textarea { resize: vertical; font: inherit; color: inherit; }
.fl { font-size: 13px; color: var(--muted, #777); margin: 10px 2px 4px; }
.prog { position: relative; height: 8px; border-radius: 4px; background: var(--line); margin: 8px 0 4px; }
.prog i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--ok); }
.prog.bad i { background: var(--bad); }
.prog b { position: absolute; top: -3px; width: 2px; height: 14px; background: currentColor; }
.dchart { width: 100%; height: 160px; display: block; }
.dchart .pace { stroke: var(--muted, #999); stroke-width: .6; vector-effect: non-scaling-stroke; }
.dchart .fact { fill: none; stroke: var(--ok); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.chg { width: 100%; border-collapse: collapse; margin-top: 6px; }
.chg td { padding: 4px 6px; vertical-align: top; text-align: left; border-top: 1px solid var(--line); word-break: break-word; }
.chg td:first-child { white-space: nowrap; width: 1%; }
.chg td:nth-child(3) { width: 1%; }
details summary { cursor: pointer; margin-top: 6px; }
a.chip { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: inherit; }
label.chip { display: inline-flex; align-items: center; gap: 4px; }
.crow { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.crow .n { width: 26px; flex: none; }
.tbl { border-collapse: collapse; font-size: 14px; }
.plink { color: var(--primary); }
.prow { padding-top: 8px; padding-bottom: 8px; }
/* два блока по половине ширины (на телефоне — друг под другом) */
.halves { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 12px; }
.prow .one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* почта — как в программе: слева орган и папки, справа письма */
.wrap.wide { max-width: 1280px; }
.mailwrap { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.mailside { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
.mailside .card { margin: 0; }
.mailside .fold { cursor: pointer; }
.mailside .fold.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.mailside .fold.on .material-symbols-outlined { color: var(--primary); }
.mailside .fold .nbadge { position: static; }
.mailside .fold-chips { display: none; }
.mailhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mailhead h2 { margin: 0; font-size: 20px; white-space: nowrap; }
.mailhead input { flex: 1; margin: 0; max-width: 420px; }
@media (max-width: 900px) {
  .mailwrap { grid-template-columns: 1fr; }
  .mailside { position: static; }
  .mailside .fold-list { display: none; }
  .mailside .fold-chips { display: flex; }
}
.tbl th, .tbl td { padding: 6px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }