/* METRO app dark theme, 2026-10-26. Only inside the app (<html class="app">): data-theme="dark", or the phone's dark setting
   when the viewer chose "automatic" (no data-theme). Product photos stay on white (they are shot on white). */
@media (prefers-color-scheme: dark) { html.app:not([data-theme="light"]) { color-scheme: dark; } }
html.app[data-theme="dark"] { color-scheme: dark; }

/* the same block twice: once for the explicit choice, once for "automatic" + phone in dark mode */
html.app[data-theme="dark"] body, html.app[data-theme="dark"] .mo-page { --mo-bg: #0f141a; --mo-surface: #171e26; --mo-line: #29333f; --mo-line-2: #36414f; --mo-text: #e5eaf0; --mo-muted: #9ba7b6; --mo-blue: #6aa6e8; --mo-red: #ff5d70; --mo-promo: #f2c744; --mo-promo-ink: #241c00; --mo-hl: #3a331c; }
@media (prefers-color-scheme: dark) {
	html.app:not([data-theme="light"]) body, html.app:not([data-theme="light"]) .mo-page { --mo-bg: #0f141a; --mo-surface: #171e26; --mo-line: #29333f; --mo-line-2: #36414f; --mo-text: #e5eaf0; --mo-muted: #9ba7b6; --mo-blue: #6aa6e8; --mo-red: #ff5d70; --mo-promo: #f2c744; --mo-promo-ink: #241c00; --mo-hl: #3a331c; }
}

/* explicit dark */
html.app[data-theme="dark"] body { background: var(--mo-bg); color: var(--mo-text); }
html.app[data-theme="dark"] .app-head { background: var(--mo-surface); border-bottom-color: #b8952a; }
html.app[data-theme="dark"] .app-logo img { background: #fff; border-radius: 8px; padding: 2px 5px; }
html.app[data-theme="dark"] .app-title { color: var(--mo-blue); }
html.app[data-theme="dark"] .app-lang { color: var(--mo-blue); border-color: var(--mo-line-2); }
html.app[data-theme="dark"] .app-icon { background: var(--mo-surface); border-color: var(--mo-line-2); }
html.app[data-theme="dark"] .app-icon[aria-pressed="false"] > span { color: var(--mo-muted); }
html.app[data-theme="dark"] .app-icon[aria-pressed="false"]::after { box-shadow: 0 0 0 1.5px var(--mo-surface); }
html.app[data-theme="dark"] .app-btn { background: var(--mo-blue); color: #0b1420; }
html.app[data-theme="dark"] .app-tabs { background: var(--mo-surface); border-top-color: var(--mo-line); box-shadow: none; }
html.app[data-theme="dark"] .app-tab { color: var(--mo-muted); }
html.app[data-theme="dark"] .app-tab.on { color: var(--mo-promo); background: var(--mo-hl); }
html.app[data-theme="dark"] .app-foot { color: var(--mo-muted); border-top-color: var(--mo-line); }
html.app[data-theme="dark"] .app-foot a { color: var(--mo-blue); }
html.app[data-theme="dark"] #appIosHint, html.app[data-theme="dark"] .app-howto, html.app[data-theme="dark"] .mo-valid1 { background: #3a331c; border-color: #6b5a1f; color: #ffe9a6; }
html.app[data-theme="dark"] .app-offline { background: #3a1a22; border-color: #6e2a35; color: #ffb3bd; }
html.app[data-theme="dark"] .app-loading { color: var(--mo-muted); }
html.app[data-theme="dark"] .mo-subs .mo-chip { background: var(--mo-surface); }
html.app[data-theme="dark"] .mo-pbtn:hover { background: #1d2530; }
html.app[data-theme="dark"] .mo-pane li.on > .mo-pbtn, html.app[data-theme="dark"] .mo-cats .mo-chip.on { color: #241c00; }
html.app[data-theme="dark"] .mo-box { background: #121820; }
html.app[data-theme="dark"] .mo-boxlabel { background: #121820; color: var(--mo-muted); }
html.app[data-theme="dark"] .mo-card { background: var(--mo-surface); }
html.app[data-theme="dark"] .mo-card.is-3day { border-color: #7a2a35; }
html.app[data-theme="dark"] .mo-zoom { background: var(--mo-surface); border-color: var(--mo-line-2); color: var(--mo-text); }
html.app[data-theme="dark"] .mo-zbody { border-top-color: var(--mo-line); }
html.app[data-theme="dark"] .mo-price s { color: var(--mo-muted); }
html.app[data-theme="dark"] .st-card { background: var(--mo-surface); border-color: var(--mo-line); }
html.app[data-theme="dark"] .st-img { background: #1d2530; }
html.app[data-theme="dark"] .st-name { color: var(--mo-blue); }
html.app[data-theme="dark"] .st-addr { color: var(--mo-text); }
html.app[data-theme="dark"] .st-status.is-open { background: #12302c; color: #6fe0c8; }
html.app[data-theme="dark"] .st-status.is-closed { background: #3a1a22; color: #ff9aa6; }
html.app[data-theme="dark"] .st-hours th, html.app[data-theme="dark"] .st-hours td { color: var(--mo-muted); border-bottom-color: #222b36; }
html.app[data-theme="dark"] .st-hours tr.today th, html.app[data-theme="dark"] .st-hours tr.today td { color: var(--mo-text); }
html.app[data-theme="dark"] .st-btn { background: var(--mo-blue); color: #0b1420; }
html.app[data-theme="dark"] .st-btn.ghost { background: transparent; color: var(--mo-blue); border-color: var(--mo-line-2); }
html.app[data-theme="dark"] .st-phone { color: var(--mo-muted); }
html.app[data-theme="dark"] .app-toast { background: #e5eaf0; color: #0f141a; }

/* automatic + phone in dark mode */
@media (prefers-color-scheme: dark) {
	html.app:not([data-theme="light"]) body { background: var(--mo-bg); color: var(--mo-text); }
	html.app:not([data-theme="light"]) .app-head { background: var(--mo-surface); border-bottom-color: #b8952a; }
	html.app:not([data-theme="light"]) .app-logo img { background: #fff; border-radius: 8px; padding: 2px 5px; }
	html.app:not([data-theme="light"]) .app-title { color: var(--mo-blue); }
	html.app:not([data-theme="light"]) .app-lang { color: var(--mo-blue); border-color: var(--mo-line-2); }
	html.app:not([data-theme="light"]) .app-icon { background: var(--mo-surface); border-color: var(--mo-line-2); }
	html.app:not([data-theme="light"]) .app-icon[aria-pressed="false"] > span { color: var(--mo-muted); }
	html.app:not([data-theme="light"]) .app-icon[aria-pressed="false"]::after { box-shadow: 0 0 0 1.5px var(--mo-surface); }
	html.app:not([data-theme="light"]) .app-btn { background: var(--mo-blue); color: #0b1420; }
	html.app:not([data-theme="light"]) .app-tabs { background: var(--mo-surface); border-top-color: var(--mo-line); box-shadow: none; }
	html.app:not([data-theme="light"]) .app-tab { color: var(--mo-muted); }
	html.app:not([data-theme="light"]) .app-tab.on { color: var(--mo-promo); background: var(--mo-hl); }
	html.app:not([data-theme="light"]) .app-foot { color: var(--mo-muted); border-top-color: var(--mo-line); }
	html.app:not([data-theme="light"]) .app-foot a { color: var(--mo-blue); }
	html.app:not([data-theme="light"]) #appIosHint, html.app:not([data-theme="light"]) .app-howto, html.app:not([data-theme="light"]) .mo-valid1 { background: #3a331c; border-color: #6b5a1f; color: #ffe9a6; }
	html.app:not([data-theme="light"]) .app-offline { background: #3a1a22; border-color: #6e2a35; color: #ffb3bd; }
	html.app:not([data-theme="light"]) .app-loading { color: var(--mo-muted); }
	html.app:not([data-theme="light"]) .mo-subs .mo-chip { background: var(--mo-surface); }
	html.app:not([data-theme="light"]) .mo-pbtn:hover { background: #1d2530; }
	html.app:not([data-theme="light"]) .mo-pane li.on > .mo-pbtn, html.app:not([data-theme="light"]) .mo-cats .mo-chip.on { color: #241c00; }
	html.app:not([data-theme="light"]) .mo-box { background: #121820; }
	html.app:not([data-theme="light"]) .mo-boxlabel { background: #121820; color: var(--mo-muted); }
	html.app:not([data-theme="light"]) .mo-card { background: var(--mo-surface); }
	html.app:not([data-theme="light"]) .mo-card.is-3day { border-color: #7a2a35; }
	html.app:not([data-theme="light"]) .mo-zoom { background: var(--mo-surface); border-color: var(--mo-line-2); color: var(--mo-text); }
	html.app:not([data-theme="light"]) .mo-zbody { border-top-color: var(--mo-line); }
	html.app:not([data-theme="light"]) .mo-price s { color: var(--mo-muted); }
	html.app:not([data-theme="light"]) .st-card { background: var(--mo-surface); border-color: var(--mo-line); }
	html.app:not([data-theme="light"]) .st-img { background: #1d2530; }
	html.app:not([data-theme="light"]) .st-name { color: var(--mo-blue); }
	html.app:not([data-theme="light"]) .st-addr { color: var(--mo-text); }
	html.app:not([data-theme="light"]) .st-status.is-open { background: #12302c; color: #6fe0c8; }
	html.app:not([data-theme="light"]) .st-status.is-closed { background: #3a1a22; color: #ff9aa6; }
	html.app:not([data-theme="light"]) .st-hours th, html.app:not([data-theme="light"]) .st-hours td { color: var(--mo-muted); border-bottom-color: #222b36; }
	html.app:not([data-theme="light"]) .st-hours tr.today th, html.app:not([data-theme="light"]) .st-hours tr.today td { color: var(--mo-text); }
	html.app:not([data-theme="light"]) .st-btn { background: var(--mo-blue); color: #0b1420; }
	html.app:not([data-theme="light"]) .st-btn.ghost { background: transparent; color: var(--mo-blue); border-color: var(--mo-line-2); }
	html.app:not([data-theme="light"]) .st-phone { color: var(--mo-muted); }
	html.app:not([data-theme="light"]) .app-toast { background: #e5eaf0; color: #0f141a; }
}
html.app[data-theme="dark"] .app-theme > span { color: var(--mo-promo); }
@media (prefers-color-scheme: dark) { html.app:not([data-theme="light"]) .app-theme > span { color: var(--mo-promo); } }
html.app[data-theme="dark"] .mo-3day-h { background: #fff; border-radius: 8px; padding: 3px 6px; }
@media (prefers-color-scheme: dark) { html.app:not([data-theme="light"]) .mo-3day-h { background: #fff; border-radius: 8px; padding: 3px 6px; } }