:root{
  --green:#1b5e20; --green-d:#0f3d14; --green-l:#e8f3e9;
  --amber:#b26a00; --amber-l:#fdf2e0;
  --red:#b3261e; --red-l:#fdeceb;
  --ink:#1a1c19; --muted:#5d6b5e; --line:#dfe6df;
  --bg:#f6f8f5; --card:#ffffff;
  --radius:14px; --shadow:0 1px 3px rgba(20,40,20,.08),0 1px 2px rgba(20,40,20,.04);
  --maxw:720px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
a{color:var(--green); text-decoration:none}

/* ---- top bar ---- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; box-shadow:var(--shadow);
}
.brand{color:#fff; font-weight:700; font-size:1.1rem}
.topbar-right{display:flex; align-items:center; gap:12px}
.estate{font-size:.85rem; opacity:.9; max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.btn-ghost{color:#fff; border:1px solid rgba(255,255,255,.5); padding:5px 10px; border-radius:8px; font-size:.8rem}

/* ---- layout ---- */
.container{max-width:var(--maxw); margin:0 auto; padding:16px 16px 96px}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 16px}
.page-head h1{font-size:1.4rem; margin:0}

/* ---- cards ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:14px}
.card h2{font-size:1rem; margin:0 0 12px}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* ---- stat grid ---- */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow)}
.stat .v{font-size:1.5rem; font-weight:700}
.stat .l{font-size:.8rem; color:var(--muted); margin-top:2px}
.stat.green .v{color:var(--green)} .stat.red .v{color:var(--red)} .stat.amber .v{color:var(--amber)}

/* ---- buttons ---- */
.btn{display:inline-block; background:var(--green); color:#fff; border:none; border-radius:10px;
  padding:12px 18px; font-size:1rem; font-weight:600; cursor:pointer; text-align:center}
.btn:active{background:var(--green-d)}
.btn-block{display:block; width:100%}
.btn-sm{padding:8px 14px; font-size:.9rem}
.btn-outline{background:#fff; color:var(--green); border:1.5px solid var(--green)}
.btn-danger{background:var(--red)}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}

/* ---- forms ---- */
label{display:block; font-size:.85rem; color:var(--muted); margin:10px 0 4px; font-weight:600}
input,select,textarea{
  width:100%; padding:12px; font-size:1rem; border:1.5px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink); font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--green)}
.form-row{display:flex; gap:12px}
.form-row>div{flex:1}
.help{font-size:.78rem; color:var(--muted); margin-top:4px}

/* ---- tables / lists ---- */
.list{list-style:none; margin:0; padding:0}
.list li{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 0; border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:none}
.list .meta{font-size:.8rem; color:var(--muted)}
table.tbl{width:100%; border-collapse:collapse; font-size:.92rem}
table.tbl th,table.tbl td{padding:10px 8px; text-align:left; border-bottom:1px solid var(--line)}
table.tbl th{font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em}
.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---- pills / tags ---- */
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:700}
.pill.present{background:var(--green-l); color:var(--green)}
.pill.half{background:var(--amber-l); color:var(--amber)}
.pill.absent{background:var(--red-l); color:var(--red)}
.pill.coffee{background:#efe3d8; color:#6b3f1d}
.pill.pepper{background:#e7e0f0; color:#4a2b7a}
.pill.shared{background:#e3edf4; color:#1f5675}

/* ---- attendance segmented control ---- */
.seg{display:inline-flex; border:1.5px solid var(--line); border-radius:10px; overflow:hidden}
.seg button{border:none; background:#fff; padding:8px 12px; font-weight:700; font-size:.85rem; cursor:pointer; color:var(--muted)}
.seg button.on.present{background:var(--green); color:#fff}
.seg button.on.half{background:var(--amber); color:#fff}
.seg button.on.absent{background:var(--red); color:#fff}
.seg button+button{border-left:1.5px solid var(--line)}

/* ---- worker rows (tappable) ---- */
.wrow{display:flex; align-items:center; gap:12px; padding:14px 4px; border-bottom:1px solid var(--line); color:var(--ink)}
.wrow:last-child{border-bottom:none}
.wrow .nm{font-weight:700; font-size:1.02rem}
.wrow .sub{font-size:.82rem; color:var(--muted); margin-top:2px}
.wrow .grow{flex:1; min-width:0}
.wrow .chev{color:var(--muted); font-size:1.4rem; line-height:1; flex-shrink:0}
.badge{display:inline-flex; flex-direction:column; align-items:flex-end; padding:6px 12px; border-radius:10px; flex-shrink:0; min-width:84px}
.badge .ba{font-weight:800; font-size:1.05rem; line-height:1.1}
.badge .bl{font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; margin-top:1px}
.badge.pay{background:var(--green-l); color:var(--green)}
.badge.adv{background:var(--amber-l); color:var(--amber)}
.badge.set{background:#eef1ee; color:var(--muted)}
.subtitle{color:var(--muted); font-size:.9rem; margin:-8px 0 16px}
summary{cursor:pointer; list-style:none; font-size:1rem}
summary::-webkit-details-marker{display:none}
details>summary{padding:2px 0}

/* daily action banner */
.daily{display:flex; align-items:center; gap:14px; background:var(--green); color:#fff; border-radius:var(--radius); padding:16px; margin-bottom:16px; box-shadow:var(--shadow)}
.daily .di{font-size:1.7rem}
.daily .dt{flex:1}
.daily .dt b{display:block; font-size:1.02rem}
.daily .dt span{font-size:.82rem; opacity:.9}
.daily .dgo{background:#fff; color:var(--green); padding:9px 14px; border-radius:9px; font-weight:700; font-size:.9rem; white-space:nowrap}

/* ---- attendance segmented radios (big, full-width, equal thirds) ---- */
.att-row{display:flex; flex-direction:column; gap:8px; padding:14px 0; border-bottom:1px solid var(--line)}
.att-row:last-child{border-bottom:none; padding-bottom:4px}
.att-row .nm{font-weight:700; font-size:1.05rem}
.att-row .rt{font-size:.78rem; color:var(--muted)}
.segr{display:flex; width:100%; border:1.5px solid var(--line); border-radius:12px; overflow:hidden}
.segr input{position:absolute; opacity:0; pointer-events:none}
.segr label{flex:1; margin:0; padding:13px 6px; font-weight:700; font-size:.95rem; color:var(--muted);
  cursor:pointer; background:#fff; user-select:none; text-align:center}
.segr input+label{border-left:1.5px solid var(--line)}
.segr label:first-of-type{border-left:none}
.segr input.p:checked + label{background:var(--green); color:#fff}
.segr input.h:checked + label{background:var(--amber); color:#fff}
.segr input.a:checked + label{background:var(--red); color:#fff}
.stat-inline{font-size:1.05rem}

/* ---- Today screen ---- */
.today-head{margin:4px 0 18px}
.today-head h1{font-size:1.5rem; margin:0}
.today-date{color:var(--muted); font-size:.95rem; margin-top:2px}
.bignum{display:block; text-align:center; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; color:var(--ink)}
.bignum-v{font-size:2rem; font-weight:800; color:var(--green)}
.bignum-l{font-size:.85rem; color:var(--muted); margin-top:4px}

/* ---- worker hero number ---- */
.hero{text-align:center; border-radius:var(--radius); padding:22px 16px; margin-bottom:14px; box-shadow:var(--shadow)}
.hero-v{font-size:2.4rem; font-weight:800; line-height:1}
.hero-l{font-size:.92rem; margin-top:6px}
.hero-pay{background:var(--green-l)} .hero-pay .hero-v{color:var(--green)} .hero-pay .hero-l{color:var(--green-d)}
.hero-adv{background:var(--amber-l)} .hero-adv .hero-v{color:var(--amber)} .hero-adv .hero-l{color:var(--amber)}
.list li span:first-child{color:var(--muted)}

/* ---- flash ---- */
.flash{padding:12px 14px; border-radius:10px; margin-bottom:14px; font-size:.92rem}
.flash-success{background:var(--green-l); color:var(--green-d)}
.flash-error{background:var(--red-l); color:var(--red)}
.flash-info{background:#e3edf4; color:#1f5675}

/* ---- bottom nav ---- */
.bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:20;
  display:flex; background:#fff; border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottomnav a{flex:1; text-align:center; padding:8px 2px 10px; color:var(--muted); font-size:.7rem}
.bottomnav a .ic{display:block; font-size:1.25rem; line-height:1.3}
.bottomnav a.on{color:var(--green); font-weight:700}

/* ---- auth ---- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.auth-card{max-width:400px; width:100%}
.auth-logo{text-align:center; font-size:1.8rem; font-weight:800; color:var(--green); margin-bottom:4px}
.auth-tag{text-align:center; color:var(--muted); margin-bottom:20px; font-size:.9rem}

.empty{text-align:center; color:var(--muted); padding:32px 12px}
.empty .big{font-size:2.4rem}
hr.sep{border:none; border-top:1px solid var(--line); margin:16px 0}
.right{text-align:right}
.spacer{height:8px}