:root {
  --ink:#14221c; --muted:#637069; --paper:#f5f2ea; --card:#fffdfa;
  --green:#176b4b; --green2:#0e5138; --line:#ddd9cf; --red:#a33a32;
  --shadow:0 18px 50px rgba(24,36,29,.09);
}
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 85% 0,#dfeadf 0,transparent 35%),var(--paper); }
button,input,select { font:inherit; }
.shell { width:min(100%,520px); margin:auto; padding:calc(18px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom)); }
.admin-shell { width:min(100%,980px); }
.brand { display:flex; align-items:center; gap:11px; margin-bottom:38px; }
.brand img { width:42px; height:42px; }
.brand div { display:flex; flex-direction:column; }
.brand strong { font-size:17px; letter-spacing:.02em; }
.brand span { color:var(--muted); font-size:13px; }
.card { background:rgba(255,253,250,.92); border:1px solid rgba(221,217,207,.9); border-radius:24px; box-shadow:var(--shadow); padding:24px; }
.auth-card h1,.welcome h1 { margin:4px 0 22px; font-size:clamp(30px,8vw,45px); line-height:1.02; letter-spacing:-.035em; }
.eyebrow { font-size:11px; font-weight:800; letter-spacing:.17em; color:var(--green); margin:0; }
.hidden { display:none!important; }
form { display:grid; gap:15px; }
label { display:grid; gap:7px; font-size:13px; font-weight:700; color:#435048; }
input,select { width:100%; border:1px solid var(--line); border-radius:13px; background:#fff; padding:14px; color:var(--ink); outline:none; }
input:focus,select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(23,107,75,.12); }
button { border:0; cursor:pointer; }
.primary,.secondary { border-radius:13px; padding:14px 18px; font-weight:800; }
.primary { background:var(--green); color:#fff; }
.primary:hover { background:var(--green2); }
.secondary { background:#e7ebe6; color:var(--ink); }
.compact { padding:9px 12px; }
.error { min-height:20px; color:var(--red); font-weight:700; font-size:13px; }
.notice { color:var(--green); font-weight:700; font-size:13px; }
.welcome { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }
.text-btn { background:transparent; color:var(--muted); padding:8px; }
.status-card { text-align:center; padding:30px 24px; }
.status-label { font-weight:800; color:var(--green); margin:0 0 8px; }
.elapsed { font-variant-numeric:tabular-nums; font-size:clamp(42px,13vw,68px); font-weight:800; letter-spacing:-.045em; }
.muted { color:var(--muted); }
.note-label { text-align:left; margin:28px 0 18px; }
.clock-button { width:100%; min-height:118px; border-radius:22px; background:var(--green); color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(23,107,75,.2); }
.clock-button.out { background:#9c463b; }
.clock-button:disabled { opacity:.6; }
.clock-button span { font-size:27px; font-weight:900; }
.clock-button small { opacity:.78; margin-top:4px; }
.location-toggle { display:flex; align-items:center; gap:9px; text-align:left; margin-top:17px; color:var(--muted); font-weight:600; }
.location-toggle input { width:18px; height:18px; }
.history-section { margin-top:32px; }
.history-section h2,.create-card h2 { font-size:20px; }
.shift-row { display:grid; grid-template-columns:1fr auto; gap:8px; border-bottom:1px solid var(--line); padding:15px 2px; }
.shift-row:last-child { border:0; }
.shift-row strong { display:block; }
.shift-row small { color:var(--muted); }
.shift-hours { font-weight:800; font-variant-numeric:tabular-nums; }
.worker-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.worker-card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; }
.worker-card.live { border-color:#63a985; box-shadow:0 0 0 3px rgba(99,169,133,.13); }
.worker-card h3 { margin:0 0 5px; }
.worker-card .big { font-size:28px; font-weight:850; margin:14px 0 0; }
.badge { display:inline-flex; padding:5px 9px; border-radius:999px; background:#e8eee9; color:var(--green); font-size:11px; font-weight:800; }
.badge.off { background:#eeeae3; color:#706b63; }
.create-card { margin-top:24px; }
.worker-form { grid-template-columns:repeat(3,1fr); align-items:end; }
.worker-form .primary { min-height:49px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; }
.pay-meta { font-size:12px; color:var(--muted); margin:13px 0 0; }
.worker-dialog { width:min(92vw,480px); border:0; border-radius:22px; padding:24px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.worker-dialog::backdrop { background:rgba(17,33,27,.58); }
.worker-dialog h2 { margin:0; }
.worker-dialog .location-toggle { margin:4px 0; }
.worker-dialog .primary { width:100%; }
@media(max-width:700px) {
  .worker-form { grid-template-columns:1fr; }
  .admin-shell { padding-inline:14px; }
  .brand { margin-bottom:28px; }
}