:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111827);
  --hint: var(--tg-theme-hint-color, #6b7280);
  --accent: var(--tg-theme-button-color, #2563eb);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-secondary-bg-color, #f3f4f6);
  --line: rgba(127, 127, 127, 0.25);
  --k-factory: #2563eb; --k-home: #7c3aed; --k-shop: #16a34a; --k-shop_off: #ca8a04; --k-night: #6b7280; --k-unknown: #ea580c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { display: grid; grid-template-rows: auto minmax(200px, 1fr) minmax(160px, 42vh); height: 100dvh; }
#top { padding: 8px 10px 6px; border-bottom: 1px solid var(--line); background: var(--bg); z-index: 500; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row + .row { margin-top: 6px; }
select, input[type=date], button { font: inherit; color: var(--text); background: var(--card); border: 0;
  border-radius: 8px; padding: 7px 10px; }
#car { flex: 1 1 160px; min-width: 0; font-weight: 600; }
.days { display: flex; gap: 4px; align-items: center; }
.days button { width: 34px; padding: 7px 0; font-size: 18px; line-height: 1; }
.chips { display: flex; gap: 4px; }
.chips button.on, .tabs button.on { background: var(--accent); color: var(--accent-text); }
.summary { color: var(--hint); font-size: 13px; flex: 1 1 200px; }
.summary b { color: var(--text); }
#map { min-height: 0; }
#sheet { overflow-y: auto; border-top: 1px solid var(--line); padding: 6px 10px 16px; background: var(--bg); }
.tabs { display: flex; gap: 6px; position: sticky; top: -6px; padding: 6px 0; background: var(--bg); z-index: 1; }
#notes .note { color: var(--hint); font-size: 12px; margin: 4px 0; }
#list { list-style: none; margin: 4px 0 0; padding: 0; }
#list li { display: flex; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
#list li.day { cursor: default; font-weight: 700; padding-top: 12px; border-bottom: 0; }
#list li .t { flex: 1; min-width: 0; }
#list li small { display: block; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin { flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.k-factory { background: var(--k-factory); } .k-home { background: var(--k-home); } .k-shop { background: var(--k-shop); }
.k-night { background: var(--k-night); } .k-unknown { background: var(--k-unknown); }
.k-shop_off { background: var(--k-shop_off); }
.leaflet-div-icon.marker { background: none; border: 0; }
.popup b, .popup span, .popup small { display: block; } .popup small { color: #6b7280; }
.msg { position: fixed; inset: 40% 20px auto; padding: 16px; border-radius: 12px; background: var(--card);
  text-align: center; z-index: 1000; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); }
@media (min-width: 900px) {
  body { grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr; }
  #top { grid-column: 1 / 3; }
  #sheet { border-top: 0; border-left: 1px solid var(--line); }
}
.plan { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.plan.big { width: 26px; height: 26px; font-size: 13px; flex: none; }
.s-visited, .s-brief { background: #16a34a; } .s-missed { background: #dc2626; }
.s-unseen, .s-unknown { background: #9ca3af; } .s-pending { background: #f59e0b; }