:root { --navy:#1F3864; --bg:#f4f5f8; --card:#fff; --line:#d9dde5; --ok:#2e7d32; --err:#c62828; --warn:#fff2cc; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:#1a1a1a; }
header.top { position:sticky; top:0; z-index:5; background:var(--navy); color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:.5rem 1rem 0; padding-top:calc(.5rem + env(safe-area-inset-top)); }
header nav { flex:1 0 100%; display:flex; gap:.2rem; overflow-x:auto; white-space:nowrap; padding:.4rem 0 .5rem; scrollbar-width:none; }
header nav::-webkit-scrollbar { display:none; }
[hidden] { display:none !important; }
header .brand { color:#fff; font-weight:700; text-decoration:none; font-size:1.1rem; }
header nav a { color:#fff; text-decoration:none; padding:.3rem .6rem; border-radius:6px; opacity:.9; }
header nav a.primary { background:#fff; color:var(--navy); font-weight:700; opacity:1; }
header .user { font-size:.8rem; opacity:.8; }
body { min-height:100vh; display:flex; flex-direction:column; }
main { max-width:640px; width:100%; margin:0 auto; padding:1rem; padding-bottom:1.5rem; flex:1; }
footer.owner { text-align:center; font-size:.8rem; color:#fff; background:var(--navy); padding:.6rem 1rem; padding-bottom:calc(.6rem + env(safe-area-inset-bottom)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem; margin-bottom:1rem; }
.card.narrow { max-width:360px; margin:3rem auto; }
h1 { font-size:1.3rem; margin:0 0 .8rem; color:var(--navy); }
label { display:block; margin:.7rem 0 .2rem; font-weight:600; font-size:.95rem; }
label small { font-weight:400; color:#666; }
input, select { display:block; width:100%; font:inherit; padding:.7rem .8rem; border:1px solid var(--line); border-radius:8px; margin-top:.25rem; background:#fff; }
input.big { font-size:1.6rem; font-weight:700; text-align:right; }
fieldset { border:0; padding:0; margin:.8rem 0; }
legend { font-weight:600; font-size:.95rem; margin-bottom:.3rem; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.5rem; }
.tiles.pay { grid-template-columns:repeat(3,1fr); }
.tile { position:relative; margin:0; }
.tile input { position:absolute; opacity:0; width:0; height:0; }
.tile span { display:block; text-align:center; padding:.9rem .5rem; border:2px solid var(--line); border-radius:10px; background:#fff; font-weight:600; }
.tile input:checked + span { border-color:var(--navy); background:#e8eef7; }
.tile.warn span { border-style:dashed; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.btn { display:block; width:100%; text-align:center; font:inherit; font-weight:700; padding:.9rem; border-radius:10px; border:0; text-decoration:none; cursor:pointer; }
.btn.primary { background:var(--navy); color:#fff; }
.btn.big { font-size:1.15rem; margin-top:1rem; }
.btn:disabled { opacity:.6; }
.flash { padding:.7rem .9rem; border-radius:8px; margin-bottom:.8rem; }
.flash.ok { background:#e6f4ea; color:var(--ok); }
.flash.error { background:#fdecea; color:var(--err); }
.flash.info { background:#e8eef7; color:var(--navy); }
.flash ul { margin:0; padding-left:1.2rem; }
.daynav { display:flex; align-items:center; justify-content:space-between; }
.daynav a { font-size:1.5rem; text-decoration:none; color:var(--navy); padding:0 .5rem; }
.daynav h1 { margin:0; }
.total { font-size:1.8rem; font-weight:700; margin:.4rem 0; }
.total small { display:block; font-size:.9rem; font-weight:400; color:#555; }
.list { list-style:none; margin:0; padding:0; }
.list li { display:flex; justify-content:space-between; gap:.8rem; background:#fff; border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; margin-bottom:.5rem; }
.list small { display:block; color:#666; font-size:.85rem; }
.list .r { text-align:right; white-space:nowrap; }
.list .r b { display:block; font-size:1.1rem; }
form.inline { display:inline; }
button.link { background:none; border:0; color:#888; font:inherit; font-size:.8rem; padding:0; cursor:pointer; text-decoration:underline; }
.muted { color:#777; text-align:center; }
.tablewrap { overflow-x:auto; }
.tbl { border-collapse:collapse; width:100%; font-size:.85rem; }
.tbl th, .tbl td { padding:.4rem .5rem; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align:left; }
.tbl tr.bad td { background:#fdecea; }
.tag { display:inline-block; background:var(--err); color:#fff; font-size:.7rem; padding:.1rem .4rem; border-radius:4px; margin-left:.3rem; vertical-align:middle; }
.tbl td small { display:block; color:#777; font-size:.75rem; }
label.check { display:flex; align-items:center; gap:.5rem; font-weight:400; }
label.check input { width:auto; margin:0; }
.btn:not(.primary) { background:#e8eef7; color:var(--navy); margin-top:.5rem; }
h2 { font-size:1.05rem; margin:0 0 .6rem; color:var(--navy); }
.kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-bottom:1rem; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:10px; padding:.7rem .8rem; }
.kpi small { display:block; color:#666; font-size:.75rem; }
.kpi b { display:block; font-size:1.35rem; margin:.1rem 0; }
.kpi span { color:#888; font-size:.75rem; }
.bars { display:flex; align-items:flex-end; gap:2px; height:140px; padding-bottom:1.2rem; position:relative; }
.bar { flex:1; position:relative; height:100%; display:flex; align-items:flex-end; }
.bar i { display:block; width:100%; background:var(--navy); border-radius:2px 2px 0 0; min-height:1px; }
.bar em { position:absolute; bottom:-1.2rem; left:0; font-size:.6rem; color:#888; font-style:normal; white-space:nowrap; }
.card.alerts { background:#fdecea; border-color:#f5c6c2; }
.card.alerts h2 { color:var(--err); }
.card.alerts ul { margin:0; padding-left:1.2rem; }
.neg { color:var(--err); }
.tbl td:last-child { text-align:right; }
.tbl td:first-child, .tbl th:first-child { white-space:normal; }
.tbl.targets input { width:6.5rem; padding:.3rem .4rem; margin:0; text-align:right; font-size:.85rem; }
tr.muted td { color:#999; }