:root {
  --ink: #101828; --muted: #667085; --line: #d0d5dd; --blue: #2563eb; --danger: #d92d20;
  --focus: #84adff; --focus-ring: 0 0 0 4px #eff4ff; --shadow: 0 12px 32px #10182814;
  --radius: 16px; --radius-card: 24px; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --control-height: 48px; --font-control: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: linear-gradient(#eef4ff,#f8fafc 42%,#f4f7fb); color: var(--ink); min-height: 100vh; }
.app { width: 100%; max-width: 760px; margin: auto; padding: calc(22px + env(safe-area-inset-top)) var(--space-4) calc(90px + env(safe-area-inset-bottom)); overflow-x: hidden; }
header, .row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
header { margin-bottom: var(--space-5); }.brand { display: flex; align-items: center; gap: var(--space-3); }.logo { width: 46px; height: 46px; border-radius: var(--radius); background: linear-gradient(135deg,#2563eb,#7c3aed); display: grid; place-items: center; color: #fff; font-size: 24px; box-shadow: var(--shadow); }
h1 { font-size: 28px; margin: 0; } h2 { font-size: 18px; margin: 0 0 var(--space-4); }.sub,.muted { color: var(--muted); font-size: 14px; margin: var(--space-1) 0 0; }.version { font-size: 12px; color: var(--muted); }
.card { background: #fffffff0; border: 1px solid #ffffffb3; border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--shadow); margin-bottom: var(--space-4); }
.hero,.live { background: linear-gradient(145deg,#0f172a,#1e293b); color: #fff; }.hello { font-size: 25px; font-weight: 850; margin: 0; }.hero .sub,.live .sub { color: #cbd5e1; }.live label { color: #cbd5e1; }
.goal-row { margin-top: var(--space-5); }.goal-track { height: 12px; background: #ffffff24; border-radius: 999px; overflow: hidden; margin: var(--space-4) 0 var(--space-2); }.goal-fill { height: 100%; width: 0; background: linear-gradient(90deg,#60a5fa,#34d399); border-radius: inherit; transition: .3s; }.goal-meta { display: flex; justify-content: space-between; gap: var(--space-2); color: #cbd5e1; font-size: 13px; }.status { display: flex; align-items: center; gap: var(--space-2); font-weight: 800; }.dot { width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 7px #94a3b824; }.dot.on { background: #34d399; box-shadow: 0 0 0 7px #34d39924; }
.summary,.live-grid,.grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-3); }.live-grid { grid-template-columns: 1fr 1fr; margin-top: var(--space-4); }.metric,.live-box { min-width: 0; background: #f8fafc; border-radius: var(--radius); padding: var(--space-4); }.live-box { background: #ffffff14; }.metric span,.live-box span { display: block; font-size: 12px; color: var(--muted); }.live-box span { color: #cbd5e1; }.metric b,.live-box b { display: block; overflow-wrap: anywhere; font-size: 21px; margin-top: var(--space-1); }.live-box b { font-size: 28px; }.grid { grid-template-columns: 1fr 1fr; }.field { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); }.full { grid-column: 1/-1; } form { margin-top: var(--space-4); } label { font-size: 13px; font-weight: 700; color: #344054; }
.form-control { display: block; width: 100%; min-width: 0; height: var(--control-height); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; background: #fff; color: var(--ink); font: inherit; font-size: var(--font-control); line-height: 1.5; outline: none; transition: border-color .15s,box-shadow .15s,background-color .15s; }
textarea.form-control { min-height: 96px; height: auto; padding-block: 12px; resize: vertical; }
.form-control:hover { border-color: #98a2b3; }.form-control:focus-visible { border-color: var(--focus); box-shadow: var(--focus-ring); }.form-control:disabled { background: #f2f4f7; color: #98a2b3; cursor: not-allowed; opacity: 1; } input[type="color"].form-control { padding: 6px; }
.preview { background: #eff8ff; border-radius: var(--radius); padding: 13px 14px; color: #175cd3; font-weight: 700; display: flex; justify-content: space-between; gap: var(--space-2); }
button { min-height: var(--control-height); border: 0; border-radius: var(--radius); padding: 0 var(--space-4); font: inherit; font-size: 15px; font-weight: 750; cursor: pointer; transition: transform .12s,filter .15s,box-shadow .15s,opacity .15s; } button:hover:not(:disabled) { filter: brightness(.96); } button:active:not(:disabled) { transform: translateY(1px) scale(.99); } button:focus-visible { outline: none; box-shadow: var(--focus-ring); } button:disabled { cursor: not-allowed; opacity: .5; }
.primary { background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; width: 100%; margin-top: var(--space-4); }.secondary { background: #f2f4f7; color: #344054; }.danger { background: #fef3f2; color: var(--danger); }.start { background: #fff; color: #0f172a; width: 100%; margin-top: var(--space-3); }.stop { background: #ef4444; color: #fff; width: 100%; margin-top: var(--space-3); }.mini { min-height: 44px; padding: 0 var(--space-3); font-size: 13px; }.button-full { width: 100%; margin-top: var(--space-2); }.toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.shift { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-3); }.shift:last-child { border: 0; }.shift-title { font-weight: 800; }.shift-meta { color: var(--muted); font-size: 13px; margin-top: var(--space-1); overflow-wrap: anywhere; }.shift-money { font-weight: 850; text-align: right; }.shift-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-2); }.empty { text-align: center; color: var(--muted); padding: var(--space-5); }.notice { font-size: 12px; color: var(--muted); line-height: 1.5; }.month .form-control { max-width: 220px; }.saved { display: none; color: #039855; font-weight: 700; font-size: 13px; margin-top: var(--space-3); }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } [hidden] { display: none!important; }
.calendar-head { margin-bottom: var(--space-4); }.calendar-title { margin: 0; text-align: center; text-transform: capitalize; }.calendar-week,.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; }.calendar-week span { text-align: center; color: var(--muted); font-size: 11px; font-weight: 800; padding: var(--space-1); }.calendar-day { min-width: 0; min-height: 92px; height: auto; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: 7px; overflow: hidden; text-align: left; color: var(--ink); }.calendar-day:hover { border-color: var(--focus); box-shadow: 0 0 0 3px #eff4ff; }.calendar-blank { min-height: 92px; }.day-number { display: grid; place-items: center; width: 25px; height: 25px; font-size: 12px; }.calendar-day.today .day-number { border-radius: 50%; background: var(--blue); color: #fff; font-weight: 850; }.day-summary { font-size: 10px; color: var(--muted); line-height: 1.35; margin-top: var(--space-1); }.employer-marks { display: flex; gap: 3px; margin-top: 5px; }.employer-mark { height: 4px; flex: 1; max-width: 20px; border-radius: 4px; }.calendar-stats { grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: var(--space-4); }.dialog { border: 0; border-radius: var(--radius-card); padding: 0; max-width: 520px; width: calc(100% - 32px); color: var(--ink); background: #fff; box-shadow: 0 24px 70px #10182855; }.dialog::backdrop { background: #10182899; }.dialog-body { padding: var(--space-5); }.dialog-close { min-width: 44px; padding: 0 var(--space-3); }.day-shift { border-left: 5px solid var(--blue); padding: var(--space-3); margin-top: var(--space-3); background: #f8fafc; border-radius: var(--radius); }.day-shift strong,.day-shift span { display: block; }.day-shift span { font-size: 13px; color: var(--muted); margin-top: var(--space-1); }
@media(max-width:560px) { .app { padding-inline: var(--space-3); }.card { padding: var(--space-4); }.summary,.live-grid,.grid { grid-template-columns: minmax(0,1fr); }.full { grid-column: auto; }.metric { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }.metric b { margin: 0; }.month { align-items: stretch; flex-direction: column; }.month .form-control { max-width: none; }.toolbar { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }.toolbar button { width: 100%; }.toolbar .danger { grid-column: 1/-1; }.shift { grid-template-columns: minmax(0,1fr); }.shift-money { text-align: left; }.shift-actions { justify-content: flex-start; }.calendar-day,.calendar-blank { min-height: 74px; padding: 4px; }.day-summary { font-size: 9px; }.calendar-stats { grid-template-columns: 1fr 1fr; }.calendar-stats .metric { display: block; }.calendar-stats .metric b { margin-top: 4px; font-size: 17px; } }
@media(max-width:360px) { .app { padding-inline: var(--space-2); }.card { padding: var(--space-3); }.calendar-week,.calendar-grid { gap: 2px; }.calendar-day { border-radius: 10px; }.day-summary { font-size: 8px; } }
@media(prefers-color-scheme:dark) { :root { --ink:#f8fafc; --muted:#94a3b8; --line:#475569; --focus-ring:0 0 0 4px #1e3a8a; }.card { background:#0f172aeb; border-color:#1e293b; }.metric,.form-control { background:#111827; color:#f8fafc; }.form-control:disabled { background:#1e293b; color:#64748b; }.preview { background:#172554; color:#bfdbfe; } body { background:linear-gradient(#020617,#0f172a); } label { color:#cbd5e1; }.secondary { background:#1e293b; color:#e2e8f0; }.calendar-day,.dialog { background:#111827; color:#f8fafc; }.day-shift { background:#0f172a; } }