/* Shared look for the signed-in consumer pages. Mirrors the Flutter app's
   MwColors / flat widgets (lib/core/theme/app_theme.dart, widgets/mw_widgets.dart). */
:root {
    --bg:#fff; --page:#f2f3f5; --text:#0f1115; --on-text:#fff; --muted:#8a9099; --secondary:#5b616b;
    --line:#eceef1; --card-line:#e1e4e8; --track:#f1f2f4;
    --green:#22b573; --amber:#f2a516; --red:#e5484d; --off:#c4c8ce; --off-text:#b6bac1;
    --bad-bg:#fdecea; --bad-text:#a6261c; --ok-bg:#e6f6ee; --ok-text:#13784a;
    --warn-bg:#fdf4e3; --warn-text:#8a5a00; --accent:#c74e20; --accent-soft:#fdf1ec; --accent-text:#a3401a;
}
html[data-theme="dark"] {
    color-scheme:dark;
    --bg:#121417; --page:#0b0c0e; --text:#f2f3f5; --on-text:#121417; --muted:#9298a1; --secondary:#b4b9c1;
    --line:#2a2e35; --card-line:#353a42; --track:#1e2126;
    --red:#f0625a; --off:#4a4f57; --off-text:#6b717a;
    --bad-bg:#3a1714; --bad-text:#f5a39b; --ok-bg:#173d2a; --ok-text:#7ee0b0;
    --warn-bg:#3a2c10; --warn-text:#f2c46b; --accent-soft:#3a2018; --accent-text:#f08a5d;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--page); color:var(--text); font-family:system-ui,-apple-system,'Segoe UI',sans-serif; min-height:100vh; }
.wrap { max-width:720px; margin:0 auto; padding:22px 14px 40px; }

.head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.head h1 { font-size:22px; font-weight:600; }
.head a { font-size:13px; color:var(--muted); text-decoration:none; white-space:nowrap; }
.head a:hover { color:var(--text); }
.sub { font-size:13px; color:var(--muted); margin-top:2px; }
.state { text-align:center; color:var(--muted); font-size:14px; padding:56px 0; }
.state a { color:var(--text); }
.empty { font-size:13px; color:var(--muted); padding:12px 0; }

.section { background:var(--bg); margin-top:12px; padding:14px 16px 8px; }
.section > h2 { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:17px; font-weight:700; margin-bottom:6px; min-height:30px; }
.section > h2 .hint { font-size:12px; font-weight:400; color:var(--muted); }

.seg { display:flex; padding:3px; background:var(--track); }
.seg.compact { display:inline-flex; }
.seg button { all:unset; box-sizing:border-box; flex:1 1 0; min-height:38px; padding:0 8px; display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; color:var(--secondary); cursor:pointer; text-align:center; min-width:0; }
.seg.compact button { flex:none; min-height:30px; padding:0 12px; font-size:12px; }
.seg button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seg button.on { background:var(--bg); color:var(--text); font-weight:600; box-shadow:0 1px 1px rgba(15,17,21,.08); }
.seg button i { width:8px; height:8px; flex:none; }
.seg button:focus-visible { outline:2px solid var(--text); outline-offset:-2px; }

.pick { position:relative; }
.pick select { appearance:none; width:100%; height:46px; padding:0 40px 0 12px; border:1px solid var(--card-line); background:var(--bg); color:var(--text); font:inherit; font-size:14px; font-weight:600; border-radius:0; }
.pick::after { content:""; position:absolute; right:16px; top:19px; width:7px; height:7px; border-right:2px solid var(--secondary); border-bottom:2px solid var(--secondary); transform:rotate(45deg); pointer-events:none; }

.avatar { width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; background:var(--track); color:var(--muted); }
.avatar.sm { width:30px; height:30px; font-size:11px; }
.avatar.healthy { background:var(--ok-bg); color:var(--ok-text); }
.avatar.monitor { background:var(--warn-bg); color:var(--warn-text); }
.avatar.expiring { background:var(--bad-bg); color:var(--bad-text); }

.thin { height:4px; background:var(--track); }
.thin > div { height:100%; background:var(--text); }

.btn-small { all:unset; box-sizing:border-box; cursor:pointer; font-size:12px; font-weight:500; padding:5px 12px; background:var(--track); color:var(--text); text-decoration:none; }
.btn-small:hover { opacity:.85; }

.locked { background:var(--track); padding:18px; margin-top:22px; }
.locked svg { width:22px; height:22px; stroke:var(--secondary); fill:none; stroke-width:1.8; }
.locked h3 { font-size:16px; font-weight:600; margin-top:10px; }
.locked p { font-size:14px; line-height:1.4; color:var(--secondary); margin-top:4px; }

/* Pages on a plain white ground (the app's Dashboard and Live) */
body.plain { background:var(--bg); }
.tile { background:var(--track); padding:12px; min-width:0; }
.tile .l { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile .v { font-size:22px; font-weight:600; letter-spacing:-.5px; margin-top:4px; white-space:nowrap; }
.tile .v small { font-size:12px; font-weight:400; color:var(--muted); letter-spacing:0; }
.tile.bad .v { color:var(--bad-text); }
.banner { display:flex; align-items:center; gap:8px; padding:12px 16px; text-decoration:none; color:inherit; }
.banner .t { font-size:15px; font-weight:600; }
.banner .d { font-size:12px; margin-top:2px; }
.banner > div { flex:1; }
.banner.ok { background:var(--ok-bg); color:var(--ok-text); }
.banner.warn { background:var(--warn-bg); color:var(--warn-text); }
.banner.bad { background:var(--bad-bg); color:var(--bad-text); }
.banner::after { content:"›"; font-size:22px; line-height:1; }
.pills { display:flex; gap:6px; flex-wrap:wrap; }
.pills button { all:unset; box-sizing:border-box; cursor:pointer; min-height:36px; padding:0 16px; display:flex; align-items:center; font-size:13px; background:var(--track); color:var(--secondary); }
.pills button.on { background:var(--text); color:var(--on-text); }
.icon-btn { all:unset; box-sizing:border-box; cursor:pointer; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--track); color:var(--secondary); font-size:16px; }

/* Settings rows and the flat switch */
.srow { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; cursor:pointer; }
.srow:last-child { border-bottom:0; }
.srow .t { flex:1; min-width:0; }
.srow b { display:block; font-size:14px; font-weight:600; }
.srow span { display:block; font-size:12px; color:var(--muted); }
.srow .go { color:var(--off); font-size:20px; line-height:1; }
.switch { all:unset; box-sizing:border-box; cursor:pointer; width:44px; height:24px; background:var(--off); position:relative; flex:none; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:var(--bg); transition:left .15s; }
.switch[aria-checked="true"] { background:var(--text); }
.switch[aria-checked="true"]::after { left:23px; }
.switch:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.locked .go { display:inline-block; margin-top:14px; padding:12px 18px; background:var(--text); color:var(--on-text); font-size:14px; font-weight:500; text-decoration:none; }
.locked .go:hover { opacity:.9; }