:root {
  color-scheme: dark;
  --bg: #070a10;
  --panel: rgba(18, 23, 34, 0.92);
  --panel-soft: rgba(25, 31, 44, 0.88);
  --text: #f4f7fb;
  --muted: #8f9bad;
  --line: rgba(255,255,255,.085);
  --accent: #83b5ff;
  --accent-soft: rgba(131,181,255,.13);
  --shadow: 0 20px 70px rgba(0,0,0,.34);
  --radius: 28px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif; }
body { min-height: 100dvh; overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { width: 100%; height: 100dvh; max-height: 100dvh; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); display: grid; grid-template-columns: minmax(370px, 40fr) minmax(520px, 60fr); grid-template-rows: minmax(0, 1fr); gap: 16px; overflow: hidden; }
.panel { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.calendar-pane { min-width: 0; display: flex; flex-direction: column; padding: clamp(24px, 3.2vw, 46px); }
.calendar-header { display: flex; justify-content: space-between; align-items: flex-start; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.hero-date { margin-top: 8px; display: flex; gap: 14px; align-items: baseline; }
.hero-date #dayNumber { font-size: clamp(58px, 8vw, 104px); line-height: .9; font-weight: 690; letter-spacing: -.06em; }
.hero-date #monthName { font-size: clamp(25px, 3.2vw, 44px); font-weight: 520; letter-spacing: -.035em; }
.year-label { margin-top: 5px; color: var(--muted); font-size: 17px; }
.icon-button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.045); display: grid; place-items: center; cursor: pointer; font-size: 22px; }
.icon-button:active, .nav-button:active { transform: scale(.96); }
.month-toolbar { margin: clamp(24px,4vh,54px) 0 16px; display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; }
.nav-button { height: 42px; border: 0; border-radius: 14px; background: transparent; color: var(--muted); font-size: 30px; cursor: pointer; }
.month-title { border: 0; background: transparent; font-size: 21px; font-weight: 650; cursor: pointer; }
.calendar-grid { flex: 1; min-height: 300px; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 34px repeat(6, minmax(40px, 1fr)); gap: 4px; }
.weekday { display: grid; place-items: center; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.day-cell { border: 0; background: transparent; color: var(--text); border-radius: 18px; display: grid; place-items: center; position: relative; font-size: clamp(15px,1.55vw,21px); cursor: default; }
.day-cell.other { color: rgba(143,155,173,.35); }
.day-cell.today { background: var(--accent); color: #07101f; font-weight: 800; box-shadow: 0 8px 26px rgba(97,156,255,.28); }
.day-cell.selected:not(.today) { background: var(--accent-soft); }
.calendar-footer { padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.today-chip { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 13px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.clock { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.right-pane { min-width: 0; min-height: 0; height: 100%; max-height: 100%; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) clamp(220px, 32dvh, 360px); gap: 16px; }
.media-panel { position: relative; min-height: 0; overflow: hidden; background: #111725; }
.media-backdrop { position: absolute; inset: 0; background:
  radial-gradient(circle at 22% 32%, rgba(119,160,235,.32), transparent 36%),
  radial-gradient(circle at 80% 22%, rgba(164,122,216,.22), transparent 34%),
  linear-gradient(145deg, #1a273a, #0d111a 65%); transition: opacity .8s ease; }
.media-content { position: relative; height: 100%; min-height: 0; overflow: hidden; padding: clamp(22px, 3vw, 38px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.media-topline { display: flex; justify-content: space-between; align-items: center; }
.media-counter { color: rgba(255,255,255,.58); font-size: 12px; }
.media-placeholder { margin: auto; text-align: center; color: rgba(255,255,255,.72); }
.media-glyph { margin: 0 auto 14px; width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); border-radius: 18px; font-size: 30px; }
.media-placeholder-title { font-size: clamp(24px,3vw,42px); font-weight: 650; letter-spacing: -.04em; }
.media-placeholder-sub { margin-top: 8px; color: rgba(255,255,255,.45); font-size: 14px; }
.media-caption { font-size: 14px; color: rgba(255,255,255,.66); min-height: 20px; }
.media-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: rgba(255,255,255,.72); width: 0%; }
.media-progress.animate { animation: mediaProgress var(--duration, 15s) linear forwards; }
@keyframes mediaProgress { from { width: 0 } to { width: 100% } }
.info-panel { position: relative; min-height: 0; overflow: hidden; padding: clamp(24px,3vw,38px); background: var(--panel-soft); }
.info-card { position: absolute; inset: clamp(24px,3vw,38px); opacity: 0; transform: translateY(12px); transition: opacity .42s ease, transform .42s ease; pointer-events: none; display: flex; flex-direction: column; }
.info-card.active { opacity: 1; transform: translateY(0); }
.info-kicker { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.live-pill, .route-badge { padding: 5px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); letter-spacing: .06em; }
.weather-row, .bus-main { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.info-title { font-size: clamp(24px, 3vw, 40px); font-weight: 680; letter-spacing: -.04em; }
.weather-summary { margin-top: 7px; color: var(--muted); font-size: clamp(13px,1.4vw,17px); }
.temperature { font-size: clamp(58px,7vw,92px); line-height: .9; font-weight: 650; letter-spacing: -.06em; }
.metric-row { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); padding-top: 15px; gap: 12px; }
.metric-row div { display: flex; justify-content: space-between; gap: 8px; }
.metric-label { color: var(--muted); }
.eta-primary { font-size: clamp(48px,6vw,80px); font-weight: 690; letter-spacing: -.06em; }
.eta-primary small { font-size: .25em; color: var(--muted); letter-spacing: 0; }
.eta-row { display: flex; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.eta-row span { padding: 8px 12px; background: rgba(255,255,255,.05); border-radius: 12px; font-variant-numeric: tabular-nums; }
.info-dots { position: absolute; right: clamp(24px,3vw,38px); bottom: 15px; display: flex; gap: 6px; z-index: 4; }
.info-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.2); transition: width .3s ease, background .3s ease; }
.info-dot.active { width: 18px; border-radius: 4px; background: var(--accent); }
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.48); backdrop-filter: blur(8px); z-index: 20; }
.settings-sheet { position: fixed; z-index: 21; top: 12px; bottom: 12px; right: 12px; width: min(480px, calc(100vw - 24px)); background: #131925; border: 1px solid var(--line); border-radius: 28px; padding: 18px 22px 24px; overflow: auto; box-shadow: var(--shadow); transform: translateX(calc(100% + 30px)); transition: transform .35s cubic-bezier(.22,.8,.24,1); }
.settings-sheet.open { transform: translateX(0); }
.sheet-handle { display: none; width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.16); margin: 0 auto 15px; }
.sheet-header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 18px; }
.sheet-header h2 { margin: 5px 0 0; font-size: 32px; letter-spacing: -.04em; }
.setting-section { padding: 20px 0; border-top: 1px solid var(--line); }
.setting-section h3 { margin: 0 0 14px; font-size: 15px; }
.radio-row, .toggle-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.radio-row span, .toggle-row span { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.radio-row small, .toggle-row small, .setting-note { color: var(--muted); font-size: 12px; }
.inline-setting { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
input[type="text"], .inline-setting input, select { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); border-radius: 12px; padding: 11px 12px; }
.inline-setting button, .small-button { border: 1px solid var(--line); background: rgba(255,255,255,.07); color: var(--text); border-radius: 12px; padding: 9px 12px; }
.setting-note { margin-top: 9px; line-height: 1.4; }
.bus-config { border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin-top: 9px; display: grid; grid-template-columns: 90px 1fr 1fr; gap: 8px; }
.bus-config .slot-name { grid-column: 1/-1; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.bus-config input { min-width: 0; border: 0; background: rgba(255,255,255,.045); color: var(--text); border-radius: 10px; padding: 9px 10px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.two-col label { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 12px; }
.toggle-list input[type="checkbox"] { width: 42px; height: 24px; accent-color: var(--accent); }
.save-button { width: 100%; border: 0; border-radius: 16px; padding: 15px; background: var(--accent); color: #07101f; font-weight: 800; cursor: pointer; }

@media (orientation: portrait) and (min-width: 700px) {
  body { overflow: auto; }
  .app-shell { min-height: 100dvh; height: auto; max-height: none; overflow: visible; grid-template-columns: 1fr; grid-template-rows: minmax(560px, 56dvh) auto; }
  .right-pane { height: auto; max-height: none; overflow: visible; grid-template-rows: minmax(380px, 52dvh) minmax(280px, 34dvh); }
  .calendar-grid { min-height: 330px; }
}

@media (max-width: 699px) {
  body { overflow: auto; }
  .app-shell { min-height: 100dvh; height: auto; max-height: none; overflow: visible; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 10px; }
  .panel { border-radius: 22px; }
  .calendar-pane { padding: 20px; min-height: 610px; }
  .hero-date #dayNumber { font-size: 64px; }
  .hero-date #monthName { font-size: 28px; }
  .month-toolbar { margin: 26px 0 12px; }
  .calendar-grid { min-height: 330px; }
  .day-cell { font-size: 16px; border-radius: 13px; }
  .right-pane { height: auto; max-height: none; overflow: visible; display: grid; grid-template-rows: minmax(320px, 48dvh) minmax(300px, auto); gap: 10px; }
  .media-content { padding: 22px; }
  .info-panel { padding: 22px; }
  .info-card { inset: 22px; }
  .info-title { font-size: 27px; }
  .temperature { font-size: 64px; }
  .metric-row { font-size: 12px; }
  .metric-row div { flex-direction: column; gap: 3px; }
  .settings-sheet { top: auto; right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 88svh; transform: translateY(calc(100% + 20px)); }
  .settings-sheet.open { transform: translateY(0); }
  .sheet-handle { display: block; }
  .two-col { grid-template-columns: 1fr; }
  .bus-config { grid-template-columns: 80px 1fr; }
  .bus-config input:last-child { grid-column: 1/-1; }
}

@media (prefers-color-scheme: light) {
  :root { --bg:#e9edf4; --panel:rgba(250,252,255,.92); --panel-soft:rgba(247,249,253,.96); --text:#101522; --muted:#667184; --line:rgba(16,21,34,.09); --accent:#3f7fda; --accent-soft:rgba(63,127,218,.11); --shadow:0 20px 70px rgba(48,62,82,.12); }
  .media-panel { color:#fff; }
  .settings-sheet { background:#f8faff; }
  input[type="text"], .inline-setting input, select, .bus-config input { color:var(--text); }
}

/* v0.2 live weather */
.warning-card { --warning-accent: #ffcc66; }
.warning-card .warning-badge { padding: 5px 9px; border-radius: 999px; background: rgba(255,204,102,.12); color: var(--warning-accent); letter-spacing: .08em; }
.warning-main { flex: 1; display: flex; align-items: center; }
.warning-title { color: #ffe4a3; }
.warning-footer { border-top: 1px solid var(--line); padding-top: 15px; display: flex; justify-content: space-between; color: var(--muted); }
.warning-footer strong { color: var(--text); }
#weatherLive { min-width: 44px; text-align: center; }

/* v0.3 live bus ETA */
.bus-config { grid-template-columns: 1fr 1fr 1fr; }
.bus-config select, .bus-config input { min-width: 0; border: 0; background: rgba(255,255,255,.045); color: var(--text); border-radius: 10px; padding: 10px; }
.bus-stop-picker { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.bus-stop-picker select { width: 100%; }
.bus-config-status { grid-column: 1/-1; color: var(--muted); font-size: 11px; line-height: 1.45; }
.bus-help { margin-top: -6px; margin-bottom: 10px; }
.eta-row span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 699px) {
  .bus-config { grid-template-columns: 1fr 1fr; }
  .bus-config [data-key="label"] { grid-column: 1/-1; }
  .bus-stop-picker { grid-template-columns: 1fr; }
}


/* v0.4.4 Telegram media — layout-contained for desktop + iOS Safari */
.media-stage {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 14px 0;
  overflow: hidden;
  border-radius: 18px;
  position: relative;
  contain: layout paint;
}
.media-stage .media-placeholder {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 20px;
}
.media-asset {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 16px;
  background: #05070b;
  user-select: none;
  -webkit-user-drag: none;
}
/* Photos keep their natural size when smaller than the frame, but shrink to fit. */
img.media-asset {
  width: auto;
  height: auto;
}
/* Video owns the frame but object-fit keeps the source aspect ratio. Its intrinsic
   dimensions can no longer resize the grid row or push the Info panel away. */
video.media-asset {
  width: 100%;
  height: 100%;
}
.media-backdrop.has-media {
  background:
    radial-gradient(circle at 20% 22%, rgba(70,100,150,.22), transparent 38%),
    linear-gradient(145deg, #111827, #080b11 72%);
}
.media-panel { touch-action: pan-y; }
.media-caption {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.telegram-status {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 13px;
  background: rgba(255,255,255,.035);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  line-height: 1.4;
}
.telegram-status strong { color: var(--text); }
.telegram-status span { color: var(--muted); }
.telegram-status.ok { border-color: rgba(102,214,155,.28); background: rgba(102,214,155,.06); }
.telegram-status.warning { border-color: rgba(255,204,102,.24); background: rgba(255,204,102,.05); }
.telegram-status .telegram-error { color: #ffadad; }
.telegram-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.telegram-actions .small-button:disabled { opacity: .45; cursor: default; }

@media (max-width: 699px) {
  .media-stage { margin: 10px 0; border-radius: 14px; min-height: 0; }
  .media-asset { border-radius: 12px; }
  video.media-asset { width: 100%; height: 100%; }
  .telegram-actions { grid-template-columns: 1fr; }
}