:root { color-scheme: light; --bg:#edf1f4; --paper:#fff; --ink:#17212b; --muted:#66717d; --line:#d8e0e6; --brand:#086b91; --brand-dark:#075572; --soft:#eff7fa; --success:#187044; --success-bg:#eaf7ef; --danger:#a33131; --danger-bg:#fff0f0; --shadow:0 14px 38px rgba(30,49,65,.09); }
* { box-sizing: border-box; }
body { margin:0; min-width:1040px; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
button,input { font:inherit; }
main { width:min(1480px,calc(100% - 56px)); margin:0 auto; padding:34px 0 60px; }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
h1,h2 { margin:0; letter-spacing:-.025em; } h1 { font-size:2.25rem; } h2 { font-size:1.35rem; }
.eyebrow { margin:0 0 4px; color:var(--brand); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.panel { margin-bottom:24px; padding:24px; background:var(--paper); border:1px solid rgba(30,49,65,.08); border-radius:18px; box-shadow:var(--shadow); }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:20px; }
.section-heading>p { margin:0; color:var(--muted); font-size:.9rem; }
.planner-scroll,.template-table-wrap { overflow-x:auto; }
.planner-grid { display:grid; grid-template-columns:132px repeat(7,minmax(126px,1fr)); gap:8px; min-width:1050px; }
.weekday { padding:4px 8px 7px; color:var(--muted); text-align:center; font-size:.78rem; font-weight:800; text-transform:uppercase; }
.week-label { display:flex; align-items:center; padding:16px 12px; color:var(--muted); font-size:.86rem; font-weight:750; }
.day-card { min-height:145px; padding:12px; border:1px solid var(--line); border-radius:13px; background:#fbfcfd; transition:border-color .15s,background .15s,box-shadow .15s; }
.day-card label { display:block; margin-bottom:8px; color:var(--muted); font-size:.8rem; font-weight:750; }
.shift-code { width:100%; height:39px; padding:6px 9px; border:1px solid #bfcbd4; border-radius:8px; background:white; color:var(--ink); font-weight:800; text-transform:uppercase; }
.shift-code:focus { outline:3px solid rgba(8,107,145,.16); border-color:var(--brand); }
.shift-detail { margin-top:9px; font-size:.78rem; line-height:1.32; }
.shift-detail span { display:block; } .shift-detail .time { font-weight:750; } .shift-detail .location { margin-top:3px; color:var(--muted); }
.day-card.valid { border-color:#9ccdb3; background:var(--success-bg); }
.day-card.invalid,.day-card.failed { border-color:#e3aaaa; background:var(--danger-bg); }
.day-card.invalid .time,.day-card.failed .time { color:var(--danger); }
.day-card.saved { border-color:#62ad82; background:#ddf3e6; }
.planner-actions { display:flex; justify-content:flex-end; margin-top:18px; }
.primary-button { min-height:46px; padding:0 20px; border:0; border-radius:10px; background:var(--brand); color:white; font-weight:800; cursor:pointer; }
.primary-button:hover { background:var(--brand-dark); } .primary-button:disabled { opacity:.55; cursor:wait; }
.text-button { border:0; background:transparent; color:var(--brand); font-weight:750; cursor:pointer; }
.notice { margin-bottom:18px; padding:13px 16px; border-radius:10px; font-weight:650; }
.notice.success { color:var(--success); background:var(--success-bg); } .notice.error { color:var(--danger); background:var(--danger-bg); } .notice.info { color:var(--brand-dark); background:var(--soft); }
.hidden { display:none; }
.login-panel { width:min(520px,100%); margin:90px auto; text-align:center; }
.login-panel p { margin:10px 0 22px; color:var(--muted); } .login-button { display:inline-flex; align-items:center; text-decoration:none; }
.template-table { width:100%; border-collapse:collapse; }
.template-table th { padding:0 8px 9px; color:var(--muted); text-align:left; font-size:.76rem; text-transform:uppercase; }
.template-table td { padding:6px 8px; border-top:1px solid var(--line); }
.template-table th:nth-child(1),.template-table td:nth-child(1) { width:130px; }
.template-table th:nth-child(2),.template-table td:nth-child(2),.template-table th:nth-child(3),.template-table td:nth-child(3) { width:145px; }
.template-table th:last-child,.template-table td:last-child { width:54px; text-align:center; }
.template-input { width:100%; min-height:39px; padding:7px 9px; border:1px solid #c7d1d9; border-radius:7px; background:white; }
.template-input.code { text-transform:uppercase; font-weight:800; }
.template-row.saving { opacity:.58; } .template-row.error .template-input { border-color:#d36d6d; }
.delete-button { width:36px; height:36px; border:0; border-radius:8px; background:transparent; color:var(--danger); font-size:1.12rem; cursor:pointer; }
.delete-button:hover { background:var(--danger-bg); } .delete-button:disabled { opacity:.25; cursor:default; }
.save-state { min-height:1.2em; margin:8px; color:var(--muted); font-size:.78rem; } .save-state.error { color:var(--danger); }
.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; }