:root{--bg: #f7f0e4;--panel: rgba(255, 255, 255, .8);--text: #15263f;--muted: #5d6b7a;--accent: #0d7c66;--accent-soft: #ddf5ee;--danger: #b8402f;--danger-soft: #fbe3dc;--shadow: 0 18px 45px rgba(21, 38, 63, .12)}body{color:var(--text)}button,input{font:inherit}button{cursor:pointer}.app-shell{max-width:860px;margin:0 auto;padding:24px 16px 48px}.hero{padding:8px 4px 20px}.eyebrow{letter-spacing:.16em;font-size:12px;font-weight:700;color:var(--muted)}.hero h1{margin:10px 0 12px;font-size:clamp(32px,7vw,56px);line-height:.95}.subtle{max-width:560px;color:var(--muted)}.panel{background:var(--panel);border:1px solid rgba(255,255,255,.7);border-radius:24px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.date-nav,.quick-actions{display:flex;gap:12px;margin-bottom:14px}.date-nav{padding:12px}.date-nav button,.quick-actions button,.segmented button{border:0;border-radius:999px;padding:12px 16px;background:#fff;color:var(--text)}.date-nav input{flex:1;min-width:0;border:0;border-radius:999px;padding:12px 16px;background:#fff}.quick-actions button{background:linear-gradient(135deg,#fff8ee,#eef7f5)}.attendance-table{display:grid;gap:12px;padding:14px}.attendance-row{display:grid;gap:14px;padding:16px;border-radius:20px;background:#ffffffdb}.staff-name{font-size:18px;font-weight:700}.staff-status,.status-banner{color:var(--muted)}.segmented{display:flex;flex-wrap:wrap;gap:8px}.segmented button.active{background:var(--accent);color:#fff}.status-banner{margin:12px 0;padding:14px 16px;border-radius:18px;background:#ffffffb8}@media(min-width:720px){.attendance-row{grid-template-columns:1fr auto;align-items:center}}