:root {
  --text: #1f1b18; --muted: #6d6660; --border: rgba(0,0,0,.12);
  --soft: color-mix(in srgb, var(--text) 5%, var(--card));
  --accent-wash: color-mix(in srgb, var(--accent) 12%, var(--card));
  --accent-text: color-mix(in srgb, var(--accent) 62%, var(--text));
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05);
  --bad: #c5221f; --ok: #177a33; --warn: #9a5400;
  --radius: 14px; --radius-sm: 9px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
html[data-mode="dark"] {
  --text: #f3efea; --muted: #a8a199; --border: rgba(255,255,255,.14);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  --bad: #ff6b66; --ok: #57c37a; --warn: #f0a847; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) {
    --text: #f3efea; --muted: #a8a199; --border: rgba(255,255,255,.14);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
    --bad: #ff6b66; --ok: #57c37a; --warn: #f0a847; color-scheme: dark;
  }
}

.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 10px max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); background: var(--top); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.brand-mark { font-size: 1.5rem; line-height: 1; }
.topnav { display: flex; gap: 4px; flex: 1; }
.topnav a { color: rgba(255,255,255,.82); text-decoration: none; padding: 7px 12px; border-radius: 999px; font-weight: 500; font-size: .95rem; }
.topnav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.topnav a.active { background: rgba(255,255,255,.2); color: #fff; }
.usermenu { position: relative; }
.usermenu > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 999px; color: #fff; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover, .usermenu[open] > summary { background: rgba(255,255,255,.14); }
.uname { font-weight: 600; font-size: .95rem; }
.usermenu .menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; }
.menu-who { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu-who span { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.usermenu .menu a, .usermenu .menu button { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 7px; color: var(--text); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.usermenu .menu a:hover, .usermenu .menu button:hover { background: var(--soft); }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .8rem; flex: none; }
.avatar.sm { width: 28px; height: 28px; font-size: .7rem; margin-right: 8px; vertical-align: middle; }

[data-palette="homestead"]{--bg:#faf6f1;--top:#2b2118;--card:#ffffff;--accent:#b5452b;--accent-ink:#ffffff;--accent-opp:#000000}
[data-palette="homestead"][data-mode="dark"]{--bg:#141110;--top:#1d1916;--card:#211d1a;--accent:#e0673f;--accent-ink:#1a1209;--accent-opp:#ffffff}
[data-palette="meadow"]{--bg:#eef3ee;--top:#24432b;--card:#ffffff;--accent:#2e8734;--accent-ink:#ffffff;--accent-opp:#000000}
[data-palette="meadow"][data-mode="dark"]{--bg:#0f1a12;--top:#18281c;--card:#18281c;--accent:#3fa346;--accent-ink:#1a1209;--accent-opp:#ffffff}
[data-palette="lake"]{--bg:#eaeef4;--top:#3a4a68;--card:#ffffff;--accent:#2f64c0;--accent-ink:#ffffff;--accent-opp:#000000}
[data-palette="lake"][data-mode="dark"]{--bg:#171c26;--top:#222a39;--card:#222a39;--accent:#4a86ea;--accent-ink:#1a1209;--accent-opp:#ffffff}
[data-palette="sunrise"]{--bg:#fbf5e8;--top:#4a3410;--card:#ffffff;--accent:#c27a00;--accent-ink:#1a1209;--accent-opp:#ffffff}
[data-palette="sunrise"][data-mode="dark"]{--bg:#181308;--top:#261e0d;--card:#261e0d;--accent:#e6a21c;--accent-ink:#1a1209;--accent-opp:#ffffff}
[data-palette="lavender"]{--bg:#f1ebf8;--top:#3f2f63;--card:#ffffff;--accent:#7a3fc4;--accent-ink:#ffffff;--accent-opp:#000000}
[data-palette="lavender"][data-mode="dark"]{--bg:#17111f;--top:#241a33;--card:#241a33;--accent:#9d62e0;--accent-ink:#1a1209;--accent-opp:#ffffff}
[data-palette="rose"]{--bg:#f4f1f3;--top:#48394a;--card:#ffffff;--accent:#dc1f72;--accent-ink:#ffffff;--accent-opp:#000000}
[data-palette="rose"][data-mode="dark"]{--bg:#1e1c20;--top:#2a272d;--card:#2a272d;--accent:#ec3f85;--accent-ink:#1a1209;--accent-opp:#ffffff}
[data-palette="teal"]{--bg:#ecf4f5;--top:#134048;--card:#ffffff;--accent:#008577;--accent-ink:#ffffff;--accent-opp:#000000}
[data-palette="teal"][data-mode="dark"]{--bg:#0a1a1d;--top:#12282c;--card:#12282c;--accent:#1fa596;--accent-ink:#1a1209;--accent-opp:#ffffff}
[data-palette="graphite"]{--bg:#eceef0;--top:#3a4046;--card:#ffffff;--accent:#5a6572;--accent-ink:#ffffff;--accent-opp:#000000}
[data-palette="graphite"][data-mode="dark"]{--bg:#1b1c1e;--top:#26282b;--card:#26282b;--accent:#8793a1;--accent-ink:#1a1209;--accent-opp:#ffffff}
@media (prefers-color-scheme: dark){
  [data-palette="homestead"]:not([data-mode="light"]){--bg:#141110;--top:#1d1916;--card:#211d1a;--accent:#e0673f;--accent-ink:#1a1209;--accent-opp:#ffffff}
  [data-palette="meadow"]:not([data-mode="light"]){--bg:#0f1a12;--top:#18281c;--card:#18281c;--accent:#3fa346;--accent-ink:#1a1209;--accent-opp:#ffffff}
  [data-palette="lake"]:not([data-mode="light"]){--bg:#171c26;--top:#222a39;--card:#222a39;--accent:#4a86ea;--accent-ink:#1a1209;--accent-opp:#ffffff}
  [data-palette="sunrise"]:not([data-mode="light"]){--bg:#181308;--top:#261e0d;--card:#261e0d;--accent:#e6a21c;--accent-ink:#1a1209;--accent-opp:#ffffff}
  [data-palette="lavender"]:not([data-mode="light"]){--bg:#17111f;--top:#241a33;--card:#241a33;--accent:#9d62e0;--accent-ink:#1a1209;--accent-opp:#ffffff}
  [data-palette="rose"]:not([data-mode="light"]){--bg:#1e1c20;--top:#2a272d;--card:#2a272d;--accent:#ec3f85;--accent-ink:#1a1209;--accent-opp:#ffffff}
  [data-palette="teal"]:not([data-mode="light"]){--bg:#0a1a1d;--top:#12282c;--card:#12282c;--accent:#1fa596;--accent-ink:#1a1209;--accent-opp:#ffffff}
  [data-palette="graphite"]:not([data-mode="light"]){--bg:#1b1c1e;--top:#26282b;--card:#26282b;--accent:#8793a1;--accent-ink:#1a1209;--accent-opp:#ffffff}
}


.topbar{flex-wrap:wrap;font:16px/1.5 var(--font);padding-top:calc(10px + env(safe-area-inset-top,0px))}.topbar *{box-sizing:border-box}.topbar form{margin:0}.appmenu summary{white-space:nowrap;min-height:40px}.appmenu .menu{min-width:180px}
@media(max-width:560px){.topnav a{padding:6px 9px;font-size:.88rem}.uname,.brand-name{display:none}}
@media(pointer:coarse){.topbar a,.topbar button,.topbar summary{min-height:44px}}

.mobile-dock{display:none}
@media(max-width:767px){
 body:has(.mobile-dock){padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
 .topbar .topnav{display:none}.topbar .appmenu{margin-left:auto}
 .mobile-dock{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:1035;background:var(--card);border-top:1px solid var(--border);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));gap:4px;font:600 12px/1.4 var(--font)}
 .mobile-dock a,.mobile-dock button{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:54px;border:0;border-radius:9px;color:var(--muted);background:transparent;text-decoration:none;font:inherit;cursor:pointer}
 .mobile-dock span{font-size:23px;line-height:1.2}.mobile-dock [aria-current=page]{background:var(--accent-wash);color:var(--accent-text)}
 .mobile-dock :focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
}
@media print{.mobile-dock,.topbar{display:none!important}}

.brand-garage{gap:10px}.brand-garage svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand-garage span{display:flex;flex-direction:column;line-height:1.1}.brand-garage small{font-size:9px;letter-spacing:.14em;font-weight:600;opacity:.8}.brand-garage strong{font-size:21px;letter-spacing:-.02em;margin-top:3px}
@media(max-width:420px){.topbar:has(.brand-garage){gap:8px;flex-wrap:nowrap}.brand-garage{gap:7px}.brand-garage svg{width:30px}.brand-garage strong{font-size:19px}.brand-garage small{font-size:8px}.topbar:has(.brand-garage) .appmenu summary{font-size:13px;padding:4px}.topbar:has(.brand-garage) .usermenu>summary{padding-right:0}}