:root{color-scheme:light;--bg:#edf3f9;--surface:#fff;--border:#d2e0ed;--ink:#30475f;--muted:#7892ae;--blue:#739af0;--green:#13886b;--mint:#e8f5ef;--soft:#f0f5fb;--violet:#8373d8;--amber:#eebd65;--shadow:0 4px 24px rgba(42,73,110,.055)}*{box-sizing:border-box}body{margin:0;background:var(--bg);font:14px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}.app{max-width:1050px;margin:auto;padding:22px 18px 60px}.topbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 17px;gap:14px}.brand{display:flex;align-items:center;gap:11px}.brand-icon{height:37px;width:37px;border-radius:12px;background:#e1ecf9;display:grid;place-items:center;color:#4981be}.brand strong{font-size:20px;display:block;line-height:1.1}.brand small{color:#89a5bf;font-size:10px;letter-spacing:.08em}.ico{display:inline-block;width:19px;height:19px;vertical-align:-4px;background-color:currentColor;-webkit-mask:var(--url) center/contain no-repeat;mask:var(--url) center/contain no-repeat;flex-shrink:0}.ico.sm{width:15px;height:15px}.ico.lg{width:25px;height:25px}.nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.nav button{border:1px solid transparent;border-radius:9px;padding:8px 11px;background:transparent;color:#6383a4;display:flex;align-items:center;gap:7px;font-weight:600}.nav button.active{background:#deebfb;color:#316ba8;border-color:#bcd2f0}.card{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:17px;margin-bottom:13px;box-shadow:var(--shadow)}h1,h2,h3,p{margin-top:0}h2{font-size:17px;margin-bottom:4px}h3{font-size:15px;margin:0}p.sub{color:#7990a8;font-size:13px;margin:0 0 17px}.row{display:flex;align-items:center;justify-content:space-between;gap:10px}.stack{display:grid;gap:12px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.field{display:grid;gap:5px}.field label,.small-label{font-size:12px;font-weight:600;color:#45607d}.field input,.field select,.text-field{width:100%;border:1px solid #d7dfe9;background:#fff;border-radius:22px;padding:10px 12px;min-width:0;color:#213a56;outline-color:#729af0}.field input[type='number']{appearance:textfield}.field input[type=date]{min-height:40px}.divider{border:0;border-top:1px solid #e1eaf3;margin:16px 0}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{background:#f4f7fa;color:#879bb1;border:1px solid #dee6ef;border-radius:10px;padding:8px 10px;font-size:12px}.chip.selected{background:#e2ebff;color:#315caa;border-color:#80a4f6}.pref{background:#f1f6fc;border-radius:11px;margin-top:12px;padding:13px;color:#4d6a89}.pref summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}.pref summary::after{content:'⌄';margin-left:auto;color:#7391b0}.pref[open] summary::after{content:'⌃'}.pref-body{padding-top:16px;display:grid;gap:13px}.slider-line{display:flex;justify-content:space-between;align-items:center}.slider{width:100%;accent-color:var(--blue)}.btn{border:1px solid #bfd3e9;border-radius:11px;padding:10px 14px;background:#f6f9fd;color:#41668c;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:650}.btn.primary{background:#07080a;color:white;border-color:#07080a}.btn.blue{background:#326fe3;border-color:#326fe3;color:#fff}.btn.green{background:#178c70;border-color:#178c70;color:#fff}.btn.danger{background:#fff5f3;border-color:#f0c9c2;color:#b54c3b}.btn.full{width:100%}.btn.small{padding:7px 10px;font-size:12px}.badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:30px;background:#e9edf2;color:#59718c;font-size:11px;font-weight:650}.badge.ok{background:#dcf4e7;color:#078454}.badge.warn{background:#fff1d7;color:#9c6b18}.heading-row{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:13px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric{background:#eff4fa;padding:13px;border-radius:11px;min-height:66px}.metric.emph{background:#e5f3ed}.metric.blue{background:#e8f1fb}.metric label{font-size:11px;color:#7690aa;display:block;margin-bottom:5px}.metric strong{color:#344e6b;font-size:19px;line-height:1.2}.metric.emph strong{color:var(--green)}.metric.feature strong{font-size:25px}.muted{color:#7c93aa}.tiny{font-size:11px}.note{padding:12px 13px;border-radius:11px;background:#eef5fe;color:#597997;font-size:12px}.note.warn{background:#fff6e9;color:#936c36}.empty{background:#e7eff9;text-align:center;padding:24px;border-radius:14px;color:#617d9d}.empty .ico{color:#6d95c1;margin-bottom:8px}.day{border:1px solid #dce6f0;border-radius:13px;background:#fff;padding:10px;margin-bottom:7px}.day-main{display:flex;align-items:center;gap:13px;cursor:pointer;width:100%;border:none;background:none;color:inherit;text-align:left;padding:0}.date-box{min-width:58px;text-align:center;background:#e9f0fa;padding:7px 9px;border-radius:10px;color:#35649b}.date-box strong{display:block;font-size:20px}.day-body{flex:1;min-width:0}.day-head{font-weight:700}.day-summary{font-size:12px;color:#8299b2}.earn{color:var(--green);font-weight:750;font-size:18px}.timeline{height:11px;display:flex;gap:2px;overflow:hidden;border-radius:9px;margin:10px 0 0;background:#e3eaf4}.seg-work{background:#769cf0}.seg-break{background:#91d8ad}.seg-meal{background:#f4c56f}.day-detail{border-top:1px solid #e0e9f2;margin-top:15px;padding-top:14px}.detail-item{display:flex;gap:13px;align-items:center;padding:10px 4px;min-height:46px}.detail-bar{width:4px;align-self:stretch;border-radius:5px}.detail-time{font-size:12px;color:#7c96b1;min-width:100px}.detail-title{font-weight:600;flex:1}.detail-item input{width:80px;border:1px solid #cfdfec;border-radius:9px;padding:7px}.preview{background:#edf5fd;border-radius:10px;padding:12px;margin-top:12px}.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}.big-time{font-size:38px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.025em}.progress{height:9px;border-radius:12px;background:#e1e8f1;overflow:hidden;margin:10px 0}.progress>div{height:100%;background:#8b73df;border-radius:12px}.ongoing-line{padding:10px;border-radius:9px;display:flex;align-items:center;gap:10px}.ongoing-line.current{background:#f0eafb}.state-mark{width:18px;height:18px;border-radius:50%;border:2px solid #9eb1c5;display:grid;place-items:center;font-size:11px}.state-mark.done{border-color:#35b885;color:#18865f}.care{background:#f3eefa;padding:15px;border-radius:13px;color:#655482}.statline{background:#f1f5fb;padding:12px;border-radius:10px;display:flex;justify-content:space-between;gap:8px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#263a55;color:white;padding:10px 18px;border-radius:12px;box-shadow:0 6px 30px #0003;z-index:100;max-width:92vw}.footer{text-align:center;font-size:11px;color:#9db0c0;margin-top:25px}.section-label{font-weight:700;margin:10px 0;color:#37516c}.hide{display:none!important}@media(max-width:690px){.app{padding:14px 12px 90px}.topbar{display:block}.topbar .nav{margin-top:13px;overflow:auto;flex-wrap:nowrap}.nav button{white-space:nowrap}.card{padding:13px}.two{gap:9px}.field label{font-size:11px}.metrics{gap:7px}.metric{padding:10px}.metric strong{font-size:17px}.metric.feature strong{font-size:22px}.day-main{gap:9px}.date-box{min-width:44px;padding:6px}.detail-time{min-width:87px}.actions .btn{flex:1}.big-time{font-size:34px}}

/* Shiftly V0.2: embedded inline SVGs inherit the theme color reliably. */
.ico{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;vertical-align:-4px;flex-shrink:0;background:none;-webkit-mask:none;mask:none}
.ico.sm{width:15px;height:15px}.ico.lg{width:25px;height:25px}
.ico .shiftly-svg{display:block;width:100%;height:100%;flex:none;overflow:visible;stroke:currentColor}
/* On Going: extension tool (no changes to Planning V1.1). */
.extension-tool{margin-top:16px;padding:15px;border-radius:14px;background:#f1f5fa;border:1px solid #d8e4ef}
.extension-tool h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:#304c69;font-size:15px}
.extension-fields{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:10px 0}
.extension-fields .field{flex:1;min-width:150px;margin:0}
.extension-fields .field:first-child{flex:2;min-width:220px}
.extension-fields .btn{flex:0 0 auto}

/* V0.4: non-intrusive confirmation of real-world work/rest overruns. */
.reschedule-alert{margin-top:15px;padding:15px;border-radius:12px;border:1px solid #e8c991;background:#fff6e7;color:#73501b}.reschedule-alert h3{margin:0 0 8px}.reschedule-alert p{margin:5px 0 10px}

/* Shiftly identity V0.6: brand colors only; approved layouts remain untouched. */
:root{--bg:#F7FAFC;--surface:#ffffff;--border:#D8E3EB;--ink:#233B57;--muted:#6B8199;--blue:#4B70A0;--green:#168675;--mint:#E4F5F0;--soft:#F0F5FA;--violet:#4B70A0;--amber:#E6B661;--shadow:0 4px 24px rgba(35,59,87,.055);--brand-blue:#4B70A0;--brand-mint:#38BDA5;--brand-deep:#233B57}
body{color:var(--ink)}
.brand-icon{background:#E7F4F2;color:var(--brand-blue);overflow:hidden}
.brand-avatar{display:block;width:32px;height:32px;object-fit:contain}
.brand strong{color:var(--brand-deep)}
.brand small{color:#68849E}
.nav button{color:#58789C}
.nav button.active{background:#E8F1F8;color:var(--brand-blue);border-color:#BFD5E6}
.field input:focus,.field select:focus,.text-field:focus{outline-color:var(--brand-mint)}
.chip.selected{background:#E6F2FA;color:#355D89;border-color:#8CB2CF}
.pref{background:#EFF5FA;color:#4B70A0}
.slider{accent-color:var(--brand-mint)}
.btn.blue{background:#4B70A0;border-color:#4B70A0}
.btn.green{background:#168675;border-color:#168675}
.badge.ok{background:#DDF5EC;color:#13775E}
.metric{background:#EFF4F9}.metric.blue{background:#EDF4FA}.metric.emph{background:#E5F4EF}
.metric.emph strong,.earn{color:#168675}
.date-box{background:#EAF2F8;color:#355D89}
.timeline{background:#E4ECF3}.seg-work{background:#7297C6}.seg-break{background:#83D7BF}.seg-meal{background:#EEC476}
.progress>div{background:#38BDA5}
.ongoing-line.current{background:#E8F4F2}
.state-mark.done{border-color:#38BDA5;color:#168675}
.care{background:#EAF7F4;color:#335C64;border:1px solid #D2EEE5}
.care-inner{display:flex;align-items:center;gap:14px}
.care-mascot{width:72px;height:80px;flex:0 0 72px;object-fit:contain}
.care-copy{flex:1;min-width:0}.care-copy strong{color:#284F66}
.care-copy .ico{color:#38BDA5}
.toast{background:var(--brand-deep)}
.empty{background:#EAF2F8;color:#527390}
@media(max-width:420px){.care-mascot{width:56px;height:65px;flex-basis:56px}}

/* Shiftly V0.7: expressive mascot WebP. No changes to approved form/grid structure. */
.mascot-note{width:60px;height:60px;object-fit:contain;flex:none;}
.mascot-alert-head{display:flex;gap:12px;align-items:center;margin-bottom:8px;}
.mascot-alert-head h3{margin:0;}
.mascot-mini{width:34px;height:34px;flex:0 0 34px;object-fit:contain;vertical-align:middle;}
.mascot-inline-notice{display:flex;gap:9px;align-items:center;}
.mascot-care{width:80px;height:80px;flex:0 0 80px;object-fit:contain;}
.mascot-empty{display:block;width:84px;height:84px;object-fit:contain;margin:0 auto 7px;}
.mascot-toast{display:flex;align-items:center;gap:9px;}
@media(max-width:420px){.mascot-care{width:60px;height:60px;flex-basis:60px}.mascot-note{width:48px;height:48px}}