:root{
  --bg:#f2f4f7; --card:#ffffff; --ink:#1c2733; --sub:#5b6b7b; --line:#e3e8ee;
  --blue:#12496e; --blue2:#1d6fa5; --accent:#e8722a; --green:#1e8a5f; --red:#c0392b;
  --chip:#eaf2f8; --gold:#b8860b;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{margin:0; font-family:system-ui,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--ink); padding-bottom:76px}
header.app{background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; padding:14px 16px 12px; position:sticky; top:0; z-index:5}
header.app h1{margin:0; font-size:18px; font-weight:700}
header.app .sub{font-size:12px; opacity:.85; margin-top:2px}
#view{padding:12px; max-width:640px; margin:0 auto}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; box-shadow:0 1px 2px rgba(16,36,56,.05)}
.card h3{margin:0 0 6px; font-size:15px}
.card h4{margin:10px 0 4px; font-size:13px; color:var(--blue)}
.muted{color:var(--sub); font-size:12.5px}
.small{font-size:12px}
.chip{display:inline-block; background:var(--chip); color:var(--blue); border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:600; margin:1px 3px 1px 0}
.chip.orange{background:#fdeadd; color:var(--accent)}
.chip.green{background:#e2f3ea; color:var(--green)}
.chip.gold{background:#f7efd8; color:var(--gold)}
.row{display:flex; align-items:center; gap:8px}
.row .grow{flex:1}
button{font-family:inherit}
.btn{border:1px solid var(--line); background:#fff; color:var(--blue); border-radius:10px; padding:7px 12px; font-size:13px; font-weight:600; cursor:pointer}
.btn.primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn.mini{padding:3px 9px; font-size:12px; border-radius:8px}
.btn.warn{color:var(--red)}
nav{position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line); display:flex; z-index:10; padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1; border:0; background:none; padding:8px 0 7px; font-size:10.5px; color:var(--sub); cursor:pointer}
nav button .ic{display:block; font-size:19px; margin-bottom:1px}
nav button.on{color:var(--blue); font-weight:700}
.slot{border-top:1px solid var(--line); padding:7px 0}
.slot:first-of-type{border-top:0}
.slot .lab{font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--sub); font-weight:700}
.slot .meal{font-size:13.5px; margin-top:1px}
.slot .meta{font-size:11.5px; color:var(--sub)}
input[type=text],input[type=number],textarea,select{font-family:inherit; font-size:13px; border:1px solid var(--line); border-radius:8px; padding:7px 9px; width:100%; background:#fff; color:var(--ink)}
textarea{resize:vertical}
.grid7{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.dcell{background:#fff; border:1px solid var(--line); border-radius:8px; min-height:44px; padding:3px 2px; text-align:center; font-size:12px; position:relative; cursor:pointer}
.dcell.dim{opacity:.35}
.dcell.today{border-color:var(--accent); border-width:2px}
.dcell .dots{display:flex; justify-content:center; gap:2px; margin-top:2px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--blue2)}
.dot.race{background:var(--accent)}
.dot.done{background:var(--green)}
.dot.rest{background:#c8d2dc}
.dhead{text-align:center; font-size:10.5px; color:var(--sub); font-weight:700; padding:2px 0}
.shopitem{display:flex; align-items:center; gap:9px; border-top:1px solid var(--line); padding:7px 0}
.shopitem:first-child{border-top:0}
.shopitem input[type=checkbox]{width:19px; height:19px; accent-color:var(--green)}
.shopitem .nm{flex:1; font-size:13.5px}
.shopitem .nm .q{color:var(--sub); font-size:11.5px}
.shopitem.off .nm{opacity:.45; text-decoration:line-through}
.cost{font-size:12.5px; color:var(--sub); white-space:nowrap}
.cathead{font-size:11.5px; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.5px; margin:12px 0 2px}
.modalbg{position:fixed; inset:0; background:rgba(10,25,40,.5); z-index:20; display:flex; align-items:flex-end; justify-content:center}
.modal{background:#fff; border-radius:18px 18px 0 0; width:100%; max-width:640px; max-height:82vh; overflow-y:auto; padding:16px 16px 24px}
.modal h3{margin:2px 0 8px}
.opt{border:1px solid var(--line); border-radius:10px; padding:9px 11px; margin-bottom:7px; font-size:13.5px; cursor:pointer}
.opt.sel{border-color:var(--blue); background:var(--chip)}
.opt .meta{font-size:11.5px; color:var(--sub)}
.bignum{font-size:26px; font-weight:800; color:var(--blue)}
.sessioncard{border-left:4px solid var(--blue2); padding-left:10px}
.sessioncard.race{border-left-color:var(--accent)}
.sessioncard.batch{border-left-color:var(--green)}
label.inline{display:flex; align-items:center; gap:7px; font-size:13px; margin:6px 0}
.seg{display:flex; gap:5px; margin:5px 0}
.seg button{flex:1; border:1px solid var(--line); background:#fff; border-radius:8px; padding:6px 0; font-size:13px; cursor:pointer; color:var(--sub)}
.seg button.on{background:var(--blue); color:#fff; border-color:var(--blue); font-weight:700}
.wkbanner{background:linear-gradient(135deg,#eaf2f8,#f4f8fb); border:1px solid #d5e4ef}
ul.tight{margin:4px 0 2px; padding-left:18px}
ul.tight li{font-size:12.5px; margin-bottom:3px}
.footer-note{text-align:center; font-size:11px; color:var(--sub); margin:14px 0}
h2.screen{font-size:16px; margin:2px 0 10px}
.equip .st{font-size:11px; font-weight:700; border-radius:6px; padding:2px 7px; cursor:pointer}
.st.todo{background:#fdeadd; color:var(--accent)} .st.booked{background:#eaf2f8; color:var(--blue)} .st.done{background:#e2f3ea; color:var(--green)}
.syncdot{width:11px; height:11px; border-radius:50%; background:var(--green); border:2px solid rgba(255,255,255,.7); cursor:pointer; flex:0 0 auto; align-self:center}
.authwrap{max-width:420px; margin:5vh auto 0}
.authcard label.au-lab{display:block; font-size:11px; font-weight:700; color:var(--sub); margin:9px 0 3px; text-transform:uppercase; letter-spacing:.4px}
.au-actions{display:flex; gap:8px; margin-top:13px}
.au-msg{font-size:12.5px; color:var(--red); margin-top:9px; min-height:15px}
.au-msg.ok{color:var(--green)}
.acct-row{display:flex; align-items:center; gap:10px}
.banner{background:#fdeadd; color:var(--accent); border:1px solid #f5cfb3; border-radius:10px; padding:8px 11px; font-size:12.5px; margin-bottom:10px}
.dcell.sup{opacity:.55}
