:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#322334;background:#fcf9fc;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;transition:background .15s,transform .15s;border:1px solid transparent}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #6bbaa0;outline-offset:2px}button:hover:not(:disabled){filter:brightness(.97)}button:disabled{cursor:default;opacity:.35}p{line-height:1.52}h1,h2,h3,h4,p{margin-top:0}h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:8px;letter-spacing:-.7px}h3{font-size:1.13rem;margin-bottom:10px}.topbar{height:84px;padding:0 clamp(18px,4vw,65px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #eee2eb}.brand{display:flex;align-items:center;gap:14px}.logo{width:47px;height:47px;display:grid;place-items:center;background:#f4e5f2;color:#7a146b;border-radius:14px;font-size:29px}.brand h1{font-size:22px;letter-spacing:-1px;margin:0}.brand span,.who span{font-size:12px;color:#796878}.identity{display:flex;align-items:center;gap:15px}.who{display:flex;flex-direction:column;text-align:right;gap:3px;font-size:13px}.avatar{border-radius:50%;display:grid;place-items:center;background:#5f0f55;color:#fff;font-size:16px;font-weight:700;width:39px;height:39px}.shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:calc(100vh - 84px)}.navigation{border-right:1px solid #f0e5ee;padding:28px 12px;background:#fff;display:flex;flex-direction:column;gap:8px}.nav-btn{width:100%;display:flex;align-items:center;gap:14px;padding:14px 17px;background:transparent;text-align:left;border-radius:10px;color:#665765;font-size:14px;font-weight:600}.nav-btn.active{background:#f7e7f3;color:#77166a}.nav-icon{font-size:20px;width:22px;text-align:center}main{padding:35px clamp(20px,3.2vw,52px) 0;min-width:0;max-width:1580px}.page-heading,.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:25px}.eyebrow{font-size:10px;color:#891e79;letter-spacing:2px;font-weight:800;margin:0 0 9px}.muted{color:#807381}.page-heading .muted{margin:0;font-size:14px}.primary,.secondary{padding:11px 17px;border-radius:9px;font-weight:700;font-size:13px}.primary{background:#7a146b;color:#fff}.secondary{background:#fff;color:#62215a;border-color:#e5d7e3}.ghost{background:transparent;color:#48675b;border-color:#e4e9e5}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.month-select{display:flex;align-items:center;gap:12px}.month-select strong{min-width:180px;text-align:center;text-transform:capitalize}.icon-btn{background:transparent;border-radius:9px;padding:5px 12px;font-size:25px;line-height:1}.toggle,.admin-tabs{display:flex;gap:3px;background:#f2e9f0;padding:4px;border-radius:10px}.toggle button,.admin-tabs button{border-radius:7px;background:transparent;color:#746271;font-size:12px;font-weight:700;padding:9px 13px}.toggle button.active,.admin-tabs button.active{background:#fff;color:#7a146b;box-shadow:0 1px 4px #47203a17}.filter-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:18px}.chip{padding:8px 13px;border:1px solid #eadce7;border-radius:50px;background:#fff;color:#756473;font-size:12px;font-weight:700}.chip.active{background:#7a146b;color:#fff;border-color:#7a146b}.legend{margin-left:auto;display:flex;gap:9px;align-items:center;font-size:11px;color:#82928a}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#d5ded9}.dot.free{background:#47b18a}.dot.mine{background:#6591df}.dot.open{background:#e6af57}.calendar-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:20px;align-items:start}.panel{background:#fff;border:1px solid #eee2eb;border-radius:16px;box-shadow:0 3px 16px #32233406}.calendar-panel{padding:18px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.weekday{text-align:center;font-size:11px;color:#8a9990;padding:8px 0 13px;font-weight:700}.day{min-height:84px;display:flex;flex-direction:column;align-items:flex-start;padding:9px 7px;background:#fafbf9;border:1px solid #e8eeea;border-radius:9px;text-align:left;color:#465b52}.day.out{background:transparent;border-color:transparent}.day.chosen{border:2px solid #7a146b;background:#faeaf6;padding:8px 6px}.day.today strong{background:#286f53;color:white;padding:1px 5px;border-radius:50%}.day strong{font-size:12px}.day-dots{display:flex;gap:4px;margin-top:12px}.day small{font-size:9px;color:#9ca9a0;margin-top:5px;white-space:nowrap}.list-days{display:grid;max-height:700px;overflow:auto}.list-day{padding:12px 16px;display:flex;justify-content:space-between;text-align:left;border:0;border-bottom:1px solid #edf0ed;background:#fff;color:#4a6457}.list-day span:last-child{color:#84968a}.list-day.selected{background:#faeaf6}.duties-panel{padding:22px;max-height:860px;overflow:auto}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:10px}.panel-heading h3{font-size:18px;margin:0}.count{font-size:10px;color:#597d6c;padding:6px 9px;border-radius:30px;background:#eaf3ed;white-space:nowrap}.shift-card{border:1px solid #e5ece8;border-radius:12px;padding:16px;margin-bottom:12px;background:#fff}.shift-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.category{font-size:14px;font-weight:750}.shift-card p{margin:8px 0;color:#849087;font-size:12px}.pill{border-radius:20px;padding:5px 10px;font-size:10px;font-weight:800;white-space:nowrap}.pill.green{background:#def3e8;color:#15845c}.pill.blue{background:#e5efff;color:#326dbd}.pill.muted{background:#f0f2f0;color:#8a948e}.shift-meta{display:flex;flex-wrap:wrap;gap:14px;color:#657970;font-size:11px;border-top:1px solid #edf1ed;padding-top:11px}.shift-card p.shift-note{color:#586e5f}.shift-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.small{font-size:11px;padding:8px 10px;border-radius:8px;font-weight:700}.tag{display:inline-block;background:#f6eede;border-radius:7px;padding:4px 7px;font-size:10px;margin-top:8px}.pad{padding:25px}.my-duty{margin-bottom:15px;max-width:620px}.date-label{font-weight:750;font-size:14px;display:block;margin:10px 0}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}.stat{border-radius:15px;background:#fff;border:1px solid #e3ebe6;padding:23px;display:flex;flex-direction:column;gap:6px}.stat-icon{font-size:23px;color:#7a146b}.stat strong{font-size:27px;color:#4b1744}.stat>span:last-child{color:#7c8c80;font-size:12px}.awards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:25px}.award{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 10px;border:1px solid #e2eae5;border-radius:13px;gap:9px}.award>span{font-size:38px}.award strong{font-size:12px}.award small{font-size:11px;color:#73877a}.award em{font-size:10px;color:#34895d;font-weight:bold;font-style:normal}.award.locked{filter:grayscale(1);opacity:.45}.footnote{font-size:12px;margin-top:20px}.admin-tabs{display:inline-flex;margin-bottom:20px;flex-wrap:wrap}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px}td,th{padding:14px 12px;text-align:left;white-space:nowrap;border-bottom:1px solid #edf1ef}th{font-size:11px;color:#72847a;background:#f8faf8}.section-heading h3{margin:0}.section-heading .muted{margin:5px 0 0;font-size:12px}.info{padding:16px;border:1px solid #ead8e6;border-radius:9px;background:#fdf6fb;color:#784a70;font-size:13px}.linklike{border:0;padding:0;background:transparent;color:#7a146b;text-decoration:underline;font-size:inherit}.button-row{display:flex;gap:16px;align-items:center}.empty{padding:32px 18px;text-align:center;color:#8b9990;font-size:13px}footer{text-align:center;font-size:12px;color:#9aa8a0;padding:55px 0 22px}.demo-banner{border:1px solid #edd9a9;border-radius:8px;padding:10px 15px;background:#fff7e6;color:#82611d;margin-bottom:22px;font-size:11px;font-weight:700;letter-spacing:.2px}dialog{border:0;border-radius:17px;max-width:min(650px,95vw);width:100%;padding:0;box-shadow:0 25px 85px #132d2745;max-height:90vh}dialog::backdrop{background:#102f25a3}.modal-body{padding:25px;max-height:88vh;overflow:auto}.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}.modal-heading h3{margin:0}.modal-footer{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #e5ebe7;padding-top:18px;margin-top:18px}.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;margin-bottom:14px;color:#5c4859}.field input,.field select{border:1px solid #e5d6e2;border-radius:8px;padding:11px;color:#342734;background:#fff;font-size:13px;width:100%;min-width:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.weekday-checks{display:flex;gap:12px;flex-wrap:wrap;padding:10px 0}.weekday-checks label{display:flex;align-items:center;gap:4px}.checkbox-field{display:flex;gap:8px;align-items:center;font-size:13px;margin:15px 0}.help{font-size:11px;color:#8a948c}.booking-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ebf1eb;padding:12px 0;gap:8px}.booking-row div{display:flex;flex-direction:column;gap:4px}.booking-row small{color:#8d958e}.toast{position:fixed;z-index:20;bottom:20px;right:20px;padding:12px 20px;border-radius:10px;box-shadow:0 9px 25px #182f2529;max-width:380px;font-size:13px}.toast.ok{background:#6e105f;color:#fff}.toast.warn{background:#8d422c;color:#fff}.toast[hidden]{display:none}.loading{padding:100px 15px;text-align:center;color:#6e8374}.welcome{max-width:490px;margin:9vh auto;padding:37px;background:#fff;border:1px solid #ead9e7;border-radius:20px;text-align:center;box-shadow:0 15px 55px #13251910}.welcome-logo{font-size:46px;color:#7a146b;margin-bottom:12px}.welcome h1{font-size:28px}.welcome p{color:#607b6d}.welcome-actions{display:flex;justify-content:center;gap:10px;margin:27px 0}.welcome small{font-size:11px;color:#8b998f}.welcome details{font-size:12px;text-align:left;margin-top:25px;color:#697f6f}.welcome code{display:block;word-break:break-all;padding:10px}hr{border:0;border-top:1px solid #edf0ec;margin:16px 0}.note{font-size:12px}
@media(max-width:1100px){.calendar-layout{grid-template-columns:1fr}.duties-panel{max-height:none}.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.topbar{height:72px;padding:0 15px}.brand h1{font-size:18px}.brand span{font-size:10px}.identity .who{display:none}.shell{display:block}.navigation{position:sticky;top:0;z-index:5;display:flex;flex-direction:row;padding:8px;background:#fff;border-right:0;border-bottom:1px solid #ecf0eb;overflow-x:auto;gap:4px}.nav-btn{flex-shrink:0;flex-direction:column;gap:4px;padding:7px 10px;font-size:10px;width:auto}.nav-icon{font-size:19px}main{padding:22px 12px}.page-heading{align-items:flex-start}.toolbar{flex-wrap:wrap}.calendar-panel{padding:7px}.calendar-grid{gap:3px}.weekday{font-size:10px}.day{min-height:66px;padding:5px 3px;border-radius:5px}.day.chosen{padding:4px 2px}.day small{display:none}.day-dots{margin-top:11px;gap:2px}.dot{width:6px;height:6px}.stat-grid{grid-template-columns:repeat(2,1fr)}.awards{grid-template-columns:repeat(2,1fr)}.filter-row .legend{margin-left:0}.section-heading{flex-wrap:wrap}.form-grid{grid-template-columns:1fr}.pad{padding:14px}.brand .logo{width:37px;height:37px}.welcome{margin:5vh 12px}.welcome-actions{flex-direction:column}}

/* A separated, purely client-side synthetic demo with a visible role switch. */
.demo-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.demo-controls{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.demo-controls select{min-width:145px;max-width:230px;padding:.45rem .65rem;border-radius:8px;border:1px solid #b996b5;background:white;color:#431a3d}
.demo-controls label{font-size:.83rem;font-weight:600}
@media(max-width:600px){.demo-banner{align-items:stretch;flex-direction:column}.demo-controls select{flex:1}}

/* v0.3: transparent visual distinction for completely staffed days. */
.brand-button{border:0;background:transparent;padding:0;text-align:left;color:inherit;border-radius:12px}
.brand-button:hover{background:#fbf0f8}
.day.fully-booked{background:#7a146b;color:#fff;border-color:#561049}
.day.fully-booked small{color:#fff4fc;font-weight:750}
.day.fully-booked.today strong{background:#fff;color:#641254}
.day.fully-booked.chosen{background:#611052;border-color:#471039;box-shadow:0 0 0 3px #d5a2ce}
.list-day.fully-booked{background:#f3e3f0;border-left:4px solid #7a146b;font-weight:700}
.list-day.fully-booked span:last-child{color:#611052}
.legend-full{display:inline-block;width:11px;height:11px;background:#7a146b;border-radius:3px;vertical-align:middle}

/* v0.4: VinziPort-inspired purple, sampled from supplied screenshots (#7A146B).
   Status colours remain distinct and accessible without relying only on hue. */
:root{--vinzi-purple:#7a146b;--vinzi-purple-dark:#57104d;--vinzi-purple-light:#f7e7f3;--vinzi-canvas:#fcf9fc}
.topbar{border-bottom:3px solid var(--vinzi-purple)}
.primary:hover:not(:disabled){background:#621058}
.day.fully-booked{background:var(--vinzi-purple);border-color:#57104d;color:#fff}
.day.fully-booked.chosen{background:#641254;border-color:#410937}
.list-day.fully-booked{background:#f3e3f0;border-left-color:var(--vinzi-purple)}
.legend-full{background:var(--vinzi-purple)}
.chip.active{background:var(--vinzi-purple);border-color:var(--vinzi-purple)}
.logo,.welcome-logo{color:var(--vinzi-purple)}
.lang-control{display:flex;align-items:center;gap:4px;flex-shrink:0;padding:4px;border:1px solid #e5d7e3;border-radius:10px;background:white;color:#6f4b68;font-weight:750;font-size:12px}
.lang-control button{padding:8px 10px;border:0;border-radius:7px;background:transparent;color:#675763;font-size:12px;font-weight:750}
.lang-control button.active{background:var(--vinzi-purple);color:#fff}
.lang-control button:focus-visible{outline:3px solid #b974b1;outline-offset:1px}
.welcome-lang{display:flex;justify-content:flex-end;margin:-15px -15px 17px}
.lang-control button:hover:not(.active){background:#fbf0f8}
@media(max-width:720px){.identity{gap:8px}.lang-control{gap:2px}.lang-control button{padding:7px 8px}}