:root {
  --bg:#FAF7F1; --surface:#FFFFFF; --text:#241F1A; --text-soft:#6E655B;
  --border:#EDE5D8; --green:#1C8A3D; --green-dark:#146B2F; --green-soft:#E7F4EA;
  --amber:#E08A2B; --amber-soft:#FCEEDD; --red:#D14343; --red-soft:#FBEAE8;
  --font: 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); }
button, input { font-family: inherit; }
a { color: var(--green-dark); }

#app { min-height: 100vh; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; background: var(--bg); position: relative; }

.screen { display: flex; flex-direction: column; flex: 1; min-height: 100vh; }
.scroll { flex: 1; overflow-y: auto; padding: 0 20px; display: flex; flex-direction: column; gap: 16px; }

.topbar { display: flex; align-items: center; gap: 12px; padding: 20px 20px 12px; }
.topbar h1 { font-size: 18px; font-weight: 800; margin: 0; flex: 1; }
.iconbtn { width: 36px; height: 36px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.iconbtn svg { pointer-events: none; }

.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pill.active { background: var(--green); color: #fff; border-color: var(--green); font-weight: 700; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; }
.card-row { display: flex; align-items: center; gap: 12px; }

.btn { display: block; width: 100%; text-align: center; border-radius: 14px; padding: 14px; font-size: 14.5px; font-weight: 800; border: none; cursor: pointer; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:disabled { opacity: .5; }
.btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.btn-link { background: none; border: none; color: var(--text-soft); font-weight: 700; font-size: 12.5px; text-align: center; cursor: pointer; }

.footer-actions { padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }

.bottom-nav { display: flex; align-items: center; justify-content: space-around; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-soft); font-size: 10.5px; font-weight: 600; cursor: pointer; position: relative; background: none; border: none; }
.nav-item.active { color: var(--green-dark); font-weight: 700; }
.nav-dot { position: absolute; top: -2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

.fab { position: fixed; max-width: 480px; margin: 0 auto; right: calc((100vw - min(480px, 100vw)) / 2 + 20px); bottom: 96px; width: 56px; height: 56px; border-radius: 18px; background: var(--green); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 22px -8px rgba(28,138,61,0.55); border: none; cursor: pointer; z-index: 20; }

/* PIN pad */
.pinpad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; justify-content: center; }
.pinkey { width: 72px; height: 72px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 22px; font-weight: 600; box-shadow: 0 1px 2px rgba(36,31,26,0.04); cursor: pointer; }
.pinkey:active { background: var(--green-soft); }
.pin-dots { display: flex; gap: 14px; justify-content: center; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border); }
.pin-dot.filled { background: var(--green); border-color: var(--green); }

.badge { background: var(--amber-soft); color: #B5791E; font-family: var(--mono); font-weight: 700; font-size: 13px; padding: 5px 11px; border-radius: 999px; }

input[type="text"], input[type="number"], input[type="date"] {
  width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; background: var(--surface); color: var(--text);
}

select {
  width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; background: var(--surface); color: var(--text); margin-top: 6px;
}

.section-title { font-size: 12.5px; font-weight: 800; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-day { aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; cursor: pointer; border: 1.5px dashed var(--border); color: var(--text-soft); }
.calendar-day.worked { background: var(--green-soft); color: var(--green-dark); border: none; }
.calendar-day.today { box-shadow: 0 0 0 2px var(--green-dark) inset; background: var(--green); color: #fff; }
.calendar-day.pad { visibility: hidden; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 110px; background: rgba(36,31,26,0.92); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; z-index: 50; max-width: 90%; text-align: center; }

.scan-box { position: relative; border-radius: 20px; overflow: hidden; background: #161310; aspect-ratio: 3/4; }
.scan-box video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 22px; border: 2px solid rgba(255,255,255,0.35); border-radius: 14px; pointer-events: none; }

.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--green); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.center-msg { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--text-soft); font-weight: 600; padding: 24px; text-align: center; }