:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17233b;
  background: #edf2f8;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; min-height: 100vh; }
[hidden] { display: none !important; }

button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }

.app-shell {
  width: min(100%, 540px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 14px 96px;
  background: linear-gradient(180deg, #f8fbff 0, #edf2f8 280px);
}

.topbar, .shift-heading, .section-heading, .primary-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar { margin-bottom: 14px; }
.eyebrow { margin: 0 0 4px; color: #3674dd; font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: 1.45rem; }
h2 { margin: 0; font-size: 1.05rem; }
.muted { margin: 0 0 4px; color: #718096; font-size: .82rem; }
.icon-button { width: 42px; height: 42px; border: 0; border-radius: 14px; color: #52617a; background: #fff; box-shadow: 0 5px 20px #50627b1a; }
.auth-screen { display: grid; place-items: center; min-height: 100vh; padding: 20px; background: linear-gradient(145deg, #edf4ff, #f8fbff 55%, #e8eff8); }
.auth-card { width: min(100%, 420px); padding: 26px; border: 1px solid #dce4ef; border-radius: 20px; background: #fff; box-shadow: 0 20px 60px #3c526f1f; }
.auth-copy { margin: 10px 0 22px; color: #718096; line-height: 1.5; }
.auth-card label, dialog form label { display: block; margin: 13px 0 6px; color: #52617a; font-size: .78rem; font-weight: 700; }
.code-input, dialog input, dialog textarea, dialog select { width: 100%; padding: 12px; border: 1px solid #cfd9e7; border-radius: 11px; color: #17233b; background: #fff; }
.code-input { text-align: center; text-transform: uppercase; font-size: 1.45rem; font-weight: 800; letter-spacing: .24em; }
.code-input:focus, dialog input:focus, dialog textarea:focus { outline: 3px solid #dce9ff; border-color: #3674dd; }
.auth-actions { margin-top: 22px; }
.auth-actions .button { flex: 1; }
.demo-hint { margin: 14px 0 0; color: #8794a8; text-align: center; font-size: .74rem; }
.form-error { margin: 14px 0 0; color: #b42335; font-size: .82rem; }

.clock-card, .history-card, .duties-card, .calendar-card, .team-card {
  margin-bottom: 10px;
  padding: 15px;
  border: 1px solid #dce4ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px #3c526f12;
}

.status-pill { padding: 7px 11px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.status-pill.off_shift { color: #64748b; background: #eef2f6; }
.status-pill.working { color: #08734f; background: #ddf8ed; }
.status-pill.on_break { color: #9a5c04; background: #fff1cf; }

.work-timer { display: block; margin-top: 15px; text-align: center; font-size: clamp(2.5rem, 12vw, 3.6rem); font-weight: 750; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.timer-caption { margin: 0 0 15px; text-align: center; color: #718096; font-size: .76rem; }
.primary-actions .button { flex: 1; }
.button { min-height: 50px; border: 0; border-radius: 14px; font-weight: 750; transition: transform .12s, filter .12s; }
.button:active:not(:disabled) { transform: scale(.98); }
.button.primary { color: #fff; background: #2769dc; }
.button.danger { color: #b42335; background: #ffe8eb; }
.button.secondary { color: #28538c; background: #eaf2ff; }
.button.full { width: 100%; margin-top: 12px; }
.break-timer { display: flex; justify-content: space-between; margin: 11px 4px 0; color: #9a5c04; }
.break-timer span { display: grid; gap: 2px; }
.break-timer span:last-child { text-align: right; }
.break-timer small { color: #8a7557; font-size: .68rem; font-weight: 600; }
.break-timer strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.break-timer.warning strong:last-child, .break-timer.warning span:last-child { color: #cf263f; animation: pulse-warning 1s infinite; }
@keyframes pulse-warning { 50% { opacity: .35; } }

.section-heading { margin-bottom: 15px; }
.section-heading span { color: #8794a8; font-size: .76rem; }
.history-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.history-item { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid #edf0f5; }
.history-item:last-child { border-bottom: 0; }
.event-dot { width: 8px; height: 8px; border-radius: 50%; background: #3674dd; }
.event-name { font-size: .88rem; font-weight: 650; }
.event-time { color: #718096; font-size: .8rem; font-variant-numeric: tabular-nums; }
.empty-state { padding: 15px 0; color: #8794a8; font-size: .86rem; text-align: center; }

.task-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf0f5; font-size: .88rem; }
.task-row:last-child { border-bottom: 0; }
.task-row input { width: 19px; height: 19px; accent-color: #2769dc; }
h3 { margin: 10px 0 5px; color: #718096; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.duty-row, .schedule-row, .team-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #edf0f5; font-size: .86rem; }
.duty-row::before { content: "•"; color: #3674dd; font-size: 1.2rem; }
.widget-divider { height: 1px; margin: 9px 0; background: #dce4ef; }
.schedule-row { justify-content: space-between; }
.schedule-row time { color: #718096; font-size: .76rem; }
.team-row { justify-content: space-between; }
.team-person { display: flex; align-items: center; gap: 9px; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #28538c; background: #eaf2ff; font-size: .72rem; font-weight: 800; }
.team-status { padding: 5px 8px; border-radius: 999px; font-size: .68rem; font-weight: 750; }
.team-status.working { color: #08734f; background: #ddf8ed; }
.team-status.on_break { color: #9a5c04; background: #fff1cf; }
.team-status.clocked_out { color: #28538c; background: #eaf2ff; }
.team-status.off_duty { color: #64748b; background: #eef2f6; }
.scroll-widget { scroll-margin-top: 12px; }

.error-banner { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; color: #922c3e; background: #ffe8eb; font-size: .85rem; }
.bottom-nav { position: fixed; left: 50%; bottom: 12px; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); width: min(calc(100% - 24px), 516px); padding: 8px; transform: translateX(-50%); border: 1px solid #dce4ef; border-radius: 20px; background: #fffffff0; box-shadow: 0 12px 35px #283b5a26; backdrop-filter: blur(14px); }
.nav-item { display: grid; gap: 2px; justify-items: center; padding: 7px; border: 0; border-radius: 13px; color: #7b879a; background: transparent; font-size: .69rem; }
.nav-item span { font-size: 1.15rem; }
.nav-item i { font-style: normal; }
.nav-item.active { color: #2769dc; background: #eaf2ff; }
.settings-dialog { width: min(calc(100% - 28px), 460px); padding: 16px; border: 0; border-radius: 18px; color: #17233b; box-shadow: 0 24px 80px #17233b4d; }
.settings-dialog::backdrop { background: #17233b66; backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.settings-row { display: flex; justify-content: space-between; width: 100%; padding: 14px 4px; border: 0; border-bottom: 1px solid #edf0f5; color: #17233b; background: transparent; text-align: left; }
.settings-row strong { color: #718096; font-weight: 600; }
.settings-row.sign-out { color: #b42335; border-bottom: 0; }
.settings-row select { width: auto; padding: 4px 22px 4px 6px; border: 0; color: #52617a; background: transparent; }
.text-button { padding: 4px; border: 0; color: #2769dc; background: transparent; font-size: .76rem; font-weight: 700; }
.page-dialog { width: min(calc(100% - 20px), 520px); max-height: calc(100vh - 30px); padding: 16px; border: 0; border-radius: 18px; color: #17233b; box-shadow: 0 24px 80px #17233b4d; }
.page-dialog::backdrop { background: #17233b66; }
.full-history { display: grid; gap: 6px; margin-top: 14px; }
.full-history-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 11px; border: 1px solid #e1e8f1; border-radius: 11px; }
.full-history-row time { color: #52617a; font-size: .82rem; }
.full-history-row small { color: #8794a8; }
.edit-time { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 7px 9px; border: 0; border-radius: 8px; color: #28538c; background: #eaf2ff; font-size: .72rem; font-weight: 700; }
.edit-time:disabled { color: #8794a8; background: #eef2f6; }
.success-message { padding: 10px; border-radius: 10px; color: #08734f; background: #ddf8ed; font-size: .82rem; }

@media (min-width: 700px) {
  .app-shell { margin-top: 24px; min-height: calc(100vh - 48px); border-radius: 28px; }
}