:root{
  --bg:#0f0f0e;
  --panel:#171714;
  --panel2:#1e1d19;
  --panel3:#24221e;
  --line:#2d2a24;
  --line2:#403a31;
  --text:#f6f3eb;
  --muted:#9f9a90;
  --accent:#d9a85b;
  --accent2:#f2cf91;
  --green:#74d39a;
  --red:#f07167;
  --amber:#f2bd5e;
  --blue:#7bb4ff;
  --shadow:0 18px 54px rgba(0,0,0,.32);
  --r:22px;
  --r2:14px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(900px 500px at 80% -10%,rgba(217,168,91,.12),transparent 62%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-width:320px}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.48}
a{color:inherit}
.hidden{display:none!important}
.app{min-height:100vh}
.boot-screen,.fatal-screen{min-height:100vh;display:grid;place-items:center;align-content:center;gap:18px;padding:28px;text-align:center}
.boot-screen p,.fatal-screen p{color:var(--muted);margin:0}
.boot-mark,.brand-lockup{display:flex;align-items:center;gap:12px}
.boot-mark img,.brand-lockup img{width:84px;height:60px;object-fit:contain;display:block}
.boot-mark span,.ops-badge{font-size:10px;font-weight:900;letter-spacing:.16em;color:#17120a;background:var(--accent);padding:6px 8px;border-radius:7px}
.spinner{width:24px;height:24px;border:2px solid #34312a;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(1060px,100%);display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);background:linear-gradient(145deg,rgba(31,30,26,.98),rgba(18,18,16,.99));border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}
.brand-side{padding:58px;min-height:620px;position:relative;overflow:hidden}
.brand-side:after{content:"";position:absolute;right:-130px;bottom:-180px;width:470px;height:470px;border:1px solid rgba(217,168,91,.16);border-radius:50%;box-shadow:0 0 0 60px rgba(217,168,91,.03),0 0 0 120px rgba(217,168,91,.02)}
.hero-logo img{width:190px;height:130px;object-fit:contain}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--accent);font-weight:800}
.brand-side h1{font-family:Georgia,serif;font-weight:500;font-size:clamp(46px,6vw,76px);line-height:.98;margin:30px 0 18px}
.brand-side p{color:#cbc6bb;font-size:17px;line-height:1.7;max-width:520px}
.proof{margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.proof div{padding:18px;border:1px solid var(--line);border-radius:16px;background:#141411}
.proof strong{display:block;font-size:18px}
.proof span{font-size:11px;color:var(--muted)}
.login-side{background:#121210;padding:50px 44px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--line)}
.login-side h2{margin:8px 0 6px;font-size:31px}
.login-side>p{color:var(--muted);line-height:1.55;margin-top:0}
.login-form{display:grid;gap:14px;margin-top:24px}
.field label{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#11110f;color:var(--text);border-radius:12px;padding:12px 13px;outline:none}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#6b5637;box-shadow:0 0 0 3px rgba(217,168,91,.08)}
.login-note{margin-top:20px;padding:14px;border-radius:12px;background:rgba(217,168,91,.07);border:1px solid rgba(217,168,91,.18);color:#c9b995;font-size:12px;line-height:1.55}
.login-error{padding:11px 12px;border-radius:11px;border:1px solid rgba(240,113,103,.25);background:rgba(240,113,103,.08);color:#f4aaa4;font-size:12px}

/* Shell */
.shell{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);background:rgba(16,16,14,.92);backdrop-filter:blur(18px);padding:22px 15px;display:flex;flex-direction:column;z-index:30}
.brand-mini{padding:2px 7px 22px}
.brand-mini img{width:72px;height:49px}
.brand-copy strong{display:block}
.brand-copy small{display:block;color:var(--muted);font-size:10px;letter-spacing:.09em}
.nav{display:grid;gap:5px}
.nav button{border:0;background:transparent;color:#bbb6ad;text-align:left;padding:12px 13px;border-radius:12px;font-weight:700;display:flex;gap:11px;align-items:center}
.nav button:hover,.nav button.active{background:#1f1e1a;color:var(--text)}
.nav .ico{width:22px;text-align:center}
.user-chip{margin-top:auto;border-top:1px solid var(--line);padding:17px 7px 4px;display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#5d482b,#a87a3c);font-weight:900}
.user-chip strong{font-size:12px;display:block}
.user-chip small{font-size:10px;color:var(--muted);display:block}
.logout-btn{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:20px}
.main{min-width:0}
.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line);background:rgba(15,15,14,.78);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}
.topbar h2{font-size:17px;margin:0}
.topbar .sub{font-size:11px;color:var(--muted);margin-top:3px}
.top-actions{display:flex;align-items:center;gap:10px}
.clock-pill,.health-pill{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#171714;padding:9px 11px;border-radius:999px;font-size:11px}
.live-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 0 4px rgba(116,211,154,.1)}
.content{padding:28px 30px 94px;max-width:1480px;margin:auto}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.hero h1{font-size:36px;margin:3px 0 6px;font-family:Georgia,serif;font-weight:500}
.hero p{margin:0;color:var(--muted);line-height:1.5}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:28px 0 12px}
.section-head h3{margin:0;font-size:17px}
.section-head span{font-size:11px;color:var(--muted)}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:linear-gradient(180deg,#191816,#151512);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 40px rgba(0,0,0,.12)}
.pad{padding:20px}
.stat{padding:18px}
.stat .label{font-size:11px;color:var(--muted);margin-bottom:9px}
.stat .value{font-size:28px;font-weight:800;letter-spacing:-.03em}
.stat .foot{font-size:10px;color:var(--muted);margin-top:6px}
.red{color:var(--red)}.green{color:var(--green)}.amber{color:var(--amber)}.blue{color:var(--blue)}
.banner{padding:15px 17px;border-radius:15px;border:1px solid rgba(217,168,91,.22);background:rgba(217,168,91,.07);display:flex;gap:12px;align-items:flex-start}
.banner.error{border-color:rgba(240,113,103,.25);background:rgba(240,113,103,.08)}
.banner strong{font-size:13px}
.banner small{display:block;color:var(--muted);margin-top:3px;line-height:1.45}
.empty{padding:26px;text-align:center;color:var(--muted);font-size:12px}

/* Lists / tasks */
.task-list{display:grid;gap:10px}
.task{display:grid;grid-template-columns:minmax(72px,90px) 1fr auto;gap:15px;align-items:center;padding:15px 16px;border:1px solid var(--line);background:#171714;border-radius:16px}
.task h4{margin:0 0 5px;font-size:14px}
.task-time{font-size:12px;color:#d6d1c8}
.task-time small{display:block;font-size:10px;color:var(--muted);margin-top:4px}
.meta{display:flex;gap:7px;flex-wrap:wrap}
.tag{font-size:10px;padding:4px 7px;border-radius:99px;background:#24221d;color:#c0baae;border:1px solid #302d26}
.tag.critical{background:rgba(240,113,103,.10);color:#f9a49c;border-color:rgba(240,113,103,.18)}
.status{font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.status.overdue{color:var(--red)}
.status.available,.status.pending{color:var(--amber)}
.status.locked{color:var(--blue)}
.status.completed,.status.accepted,.status.resolved{color:var(--green)}
.status.deferred,.status.acknowledged{color:#c9a6ff}
.actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.btn{border:1px solid var(--line);background:#24221e;color:var(--text);padding:9px 12px;border-radius:11px;font-weight:800;font-size:11px;transition:.15s ease}
.btn:hover:not(:disabled){border-color:#665339;transform:translateY(-1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#17120a}
.btn.danger{color:#f5a19a}
.btn.ghost{background:transparent}
.btn.big{padding:12px 16px;font-size:12px}
.btn.full{width:100%}
.btn.small{padding:7px 9px;font-size:10px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar.spread{justify-content:space-between}
.segmented{display:flex;gap:5px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#141411}
.segmented button{border:0;background:transparent;color:var(--muted);padding:7px 10px;border-radius:8px;font-size:10px;font-weight:800}
.segmented button.active{background:#26241f;color:var(--text)}
.pulse-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.pulse-row:last-child{border-bottom:0}
.pulse-row b{font-size:12px}
.pulse-row small{display:block;color:var(--muted);margin-top:4px;font-size:10px;line-height:1.4}

/* Incidents / attention */
.issue{padding:14px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:10px 1fr auto;gap:10px}
.issue:last-child{border-bottom:0}
.sev{width:8px;height:8px;border-radius:50%;margin-top:5px}
.sev.low{background:var(--green)}
.sev.medium{background:var(--amber)}
.sev.high,.sev.critical{background:var(--red)}
.issue b{font-size:12px}
.issue small{display:block;color:var(--muted);margin-top:4px;font-size:10px;line-height:1.45}
.attention-card{padding:16px;border:1px solid var(--line);border-radius:16px;background:#171714;display:grid;gap:10px}
.attention-card.critical{border-color:rgba(240,113,103,.32)}
.attention-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.attention-head h4{margin:0;font-size:13px}
.attention-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}

/* Tables/forms */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}
.table{width:100%;border-collapse:collapse;min-width:760px;background:#161613}
.table th,.table td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;font-size:11px;vertical-align:middle}
.table th{color:#938f85;font-size:9px;text-transform:uppercase;letter-spacing:.08em;background:#1b1a17}
.table tr:last-child td{border-bottom:0}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid.three{grid-template-columns:repeat(3,1fr)}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:380px;overflow:auto;padding-right:4px}
.check-row{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid var(--line);border-radius:11px;background:#141411}
.check-row input{margin-top:2px}
.check-row b{font-size:11px;display:block}
.check-row small{font-size:9px;color:var(--muted);display:block;margin-top:3px}
.help{font-size:10px;color:var(--muted);line-height:1.5}
.inline-note{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#131310;color:var(--muted);font-size:10px}
.code-chip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#11110f;border:1px solid var(--line);border-radius:8px;padding:4px 6px;font-size:10px}

/* Modal / toast */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:18px;z-index:100}
.modal{width:min(560px,100%);max-height:90vh;overflow:auto;background:#171714;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:22px}
.modal h3{margin:0 0 6px}
.modal p{margin:0 0 18px;color:var(--muted);font-size:11px;line-height:1.5}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.toast-root{position:fixed;right:18px;bottom:18px;z-index:6000;display:grid;gap:8px;max-width:min(360px,calc(100vw - 36px))}
.toast{padding:14px 16px;border:1px solid rgba(94,211,145,.38);background:rgba(24,31,26,.97);border-radius:14px;box-shadow:var(--shadow);font-size:12px;line-height:1.45;display:flex;align-items:flex-start;gap:10px;animation:toast-in .18s ease-out}
.toast.success{color:#eaf8ef}
.toast.error{border-color:rgba(240,113,103,.42);background:rgba(39,24,23,.97);color:#ffc0ba}
.toast-mark{display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:50%;background:rgba(94,211,145,.14);color:#72dea1;font-weight:900}
.toast.error .toast-mark{background:rgba(240,113,103,.14);color:#ff8f85}
.toast.leaving{opacity:0;transform:translateY(6px);transition:.2s ease}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mobile-nav{display:none}

/* Responsive */
@media (max-width:1050px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .login-card{grid-template-columns:1fr}
  .brand-side{min-height:auto;padding:40px}
  .login-side{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .shell{display:block}
  .sidebar{display:none}
  .topbar{height:68px;padding:0 16px}
  .topbar .health-pill{display:none}
  .content{padding:20px 14px 92px}
  .hero{align-items:flex-start;flex-direction:column}
  .hero h1{font-size:31px}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .form-grid,.form-grid.three{grid-template-columns:1fr}
  .checkbox-grid{grid-template-columns:1fr}
  .task{grid-template-columns:1fr;gap:9px}
  .task-time{display:flex;justify-content:space-between;align-items:center}
  .actions{justify-content:flex-start}
  .mobile-nav{display:grid;position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:6px;background:rgba(23,23,20,.96);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:18px;z-index:50;box-shadow:var(--shadow)}
  .mobile-nav button{border:0;background:transparent;color:var(--muted);border-radius:12px;padding:8px 4px;font-size:9px;font-weight:800}
  .mobile-nav button span{display:block;font-size:16px;margin-bottom:2px}
  .mobile-nav button.active{background:#26241f;color:var(--text)}
  .brand-side{padding:30px 24px}
  .brand-side h1{font-size:46px}
  .proof{grid-template-columns:1fr}
  .login-side{padding:30px 24px}
  .login{padding:12px}
}

/* v2.1.7 weekly roster grid + Relief Manager */
.roster-weekbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#151512}
.roster-weekbar>div:nth-child(2){text-align:center}
.roster-weekbar strong{display:block;font-size:13px}
.roster-weekbar small{display:block;color:var(--muted);font-size:9px;margin-top:3px}
.roster-editor,.roster-readonly{display:grid;gap:14px;margin-top:14px}
.roster-week-note{margin-top:14px}
.roster-person{overflow:visible}
.roster-person-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.roster-person-head h3{margin:0;font-size:17px}
.roster-person-head small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.roster-live-total{color:#f3eee4;font-weight:900;font-variant-numeric:tabular-nums}
.roster-saved-total{color:var(--muted)}
.roster-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow:visible;padding-bottom:2px}
.roster-day-read{min-width:0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#12120f;display:grid;gap:12px;align-content:start}
.roster-day-read>b{font-size:12px;color:#f0ece4}
.roster-day-read small{display:block;font-size:9px;color:var(--muted);line-height:1.35}
.roster-day-read .status{justify-self:start}
.is-hidden{display:none!important}

.roster-grid-wrap{overflow-x:auto;overflow-y:visible;padding-bottom:4px;scrollbar-width:thin}
.roster-grid-head,.roster-grid-row{display:grid;grid-template-columns:minmax(150px,1.15fr) repeat(7,minmax(108px,1fr)) minmax(82px,.7fr);min-width:1040px}
.roster-grid-head{position:sticky;top:0;z-index:4;background:#10100e;border:1px solid var(--line);border-radius:14px 14px 0 0;overflow:hidden}
.roster-grid-head-cell{padding:10px 8px;border-right:1px solid var(--line);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#9e988d;text-align:center;display:flex;align-items:center;justify-content:center}
.roster-grid-head-cell:last-child{border-right:0}
.roster-grid-staff-head{justify-content:flex-start;text-align:left;padding-left:14px}
.roster-grid-row{border:1px solid var(--line);border-top:0;background:#151512;min-height:88px}
.roster-grid-row:last-child{border-radius:0 0 14px 14px;overflow:hidden}
.roster-staff-cell,.roster-total-cell{padding:12px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;min-width:0}
.roster-staff-cell strong{font-size:13px;line-height:1.2;overflow-wrap:anywhere}
.roster-staff-cell small,.roster-total-cell small{color:var(--muted);font-size:9px;margin-top:4px}
.roster-total-cell{text-align:center;align-items:center;border-right:0}
.roster-total-cell strong{font-size:13px}
.roster-grid-day{position:relative;min-width:0;border-right:1px solid var(--line);transition:background .15s ease}
.roster-day-button{width:100%;height:100%;min-height:86px;border:0;background:transparent;color:inherit;padding:10px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;cursor:pointer;font:inherit}
.roster-day-button:focus-visible{outline:2px solid rgba(225,176,92,.7);outline-offset:-3px;border-radius:8px}
.roster-day-button:hover{background:rgba(255,255,255,.025)}
.roster-day-state{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:#aaa397;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roster-day-time{font-size:11px;font-weight:900;line-height:1.3;color:#f1ede5;font-variant-numeric:tabular-nums}
.roster-day-note-indicator{font-size:8px;color:#8b857a;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roster-day-hours{position:absolute;right:5px;bottom:4px;font-size:8px;color:#746f66;font-weight:800;pointer-events:none}
.roster-day-mobile-label{display:none}
.roster-state-working{background:rgba(84,204,135,.045)}
.roster-state-day_off{background:#12120f}
.roster-state-annual_leave{background:rgba(100,149,237,.055)}
.roster-state-sick_leave{background:rgba(240,113,103,.05)}
.roster-state-unpaid_leave{background:rgba(225,176,92,.045)}
.roster-state-pending_leave{background:rgba(176,160,126,.05)}
.roster-state-working .roster-day-state{color:#78d99f}
.roster-state-annual_leave .roster-day-state{color:#9ebcff}
.roster-state-sick_leave .roster-day-state{color:#ffaaa2}
.roster-state-unpaid_leave .roster-day-state{color:#e8bd72}
.roster-state-pending_leave .roster-day-state{color:#c6b99f}

.roster-modal-times{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.roster-time-select{width:100%;min-width:0;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.01em;padding-right:34px!important;color:var(--text);background:#11110f}
.roster-time-select option{background:#161613;color:#f4f1ea}
.roster-time-select:focus{outline:2px solid rgba(225,176,92,.55);outline-offset:1px}
.copy-days{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.copy-days>strong{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#b8b2a6;margin-bottom:9px}
.copy-days-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.copy-day-check{display:flex;align-items:center;gap:7px;padding:8px 9px;border:1px solid var(--line);border-radius:10px;background:#12120f;font-size:10px;color:#d9d4c9;cursor:pointer}
.copy-day-check input{accent-color:#e1b05c}

.sticky-actions{position:sticky;bottom:12px;z-index:25;margin:18px 0 24px;display:flex;justify-content:flex-end;gap:8px;padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(20,20,17,.94);backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.health-pill.relief{border-color:rgba(225,176,92,.28);color:#efc77d}
.status.working,.status.active{background:rgba(84,204,135,.12);color:#7fe2a8}
.status.day_off,.status.pending_leave{background:#26241f;color:#b8b2a6}
.status.annual_leave{background:rgba(100,149,237,.12);color:#9ebcff}
.status.sick_leave{background:rgba(240,113,103,.12);color:#ffaaa2}
.status.unpaid_leave{background:rgba(225,176,92,.10);color:#e8bd72}

/* Screenshot-ready roster share view */
.modal-wide{width:min(1480px,calc(100vw - 24px));max-height:94vh;padding:14px}
.share-roster-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;padding:2px 2px 8px}
.share-roster-actions strong{display:block;font-size:12px}
.share-roster-actions small{display:block;color:var(--muted);font-size:9px;margin-top:3px}
.share-roster-sheet{background:#f3eee3;color:#181713;border-radius:16px;padding:20px;border:1px solid #d7cdbd;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.share-roster-titlebar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:2px solid #2c2923}
.share-brand{display:flex;align-items:center;gap:12px;min-width:0}
.share-brand img{width:70px;height:auto;aspect-ratio:420/323;object-fit:contain;border-radius:4px;display:block;flex:0 0 auto}
.share-brand span{display:block;font-size:9px;letter-spacing:.18em;color:#7c6848;font-weight:800}
.share-brand strong{display:block;font-family:Georgia,serif;font-size:24px;line-height:1.1;margin-top:3px;letter-spacing:.02em}
.share-roster-state{padding:7px 10px;border:1px solid #b28a50;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.12em;color:#7a5b2c;background:#fbf4e7;white-space:nowrap}
.share-roster-state.is-published{border-color:#4d8b61;color:#326842;background:#e8f4ec}
.share-roster-week{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:12px 0}
.share-roster-week strong{font-size:15px}
.share-roster-week small{font-size:9px;color:#756f64}
.share-roster-grid{border:1px solid #cfc5b6;border-radius:10px;overflow:hidden}
.share-roster-head,.share-roster-row{display:grid;grid-template-columns:minmax(130px,1.2fr) repeat(7,minmax(76px,1fr)) 76px}
.share-roster-head{background:#29261f;color:#fff}
.share-roster-head>div{padding:8px 6px;border-right:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8px;letter-spacing:.05em;text-align:center}
.share-roster-head>div:first-child{align-items:flex-start;padding-left:10px}
.share-roster-head small{font-size:7px;color:#d7cfc1;margin-top:1px}
.share-roster-row{min-height:48px;background:#fffdf8;border-top:1px solid #ddd3c4}
.share-roster-row:nth-child(odd){background:#f9f5ed}
.share-roster-row>div{padding:6px;border-right:1px solid #ddd3c4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0}
.share-roster-row>div:last-child{border-right:0}
.share-staff{align-items:flex-start!important;text-align:left!important;padding-left:10px!important}
.share-staff strong{font-size:10px;line-height:1.2;overflow-wrap:anywhere}
.share-day strong{font-size:9px;line-height:1.1;white-space:nowrap}
.share-day small{font-size:8px;color:#675f54;line-height:1.1;margin-top:2px;white-space:nowrap}
.share-day em{font-size:7px;color:#8a7758;font-style:normal;margin-top:2px}
.share-day::before{display:none}
.share-hours strong{font-size:9px;white-space:nowrap}
.share-status{font-size:8px;font-weight:900;letter-spacing:.04em}
/* Screenshot-ready roster: visibly highlight every OFF day, including already-published rosters.
   This targets a day_off status only, without altering shift/leave data or publication state. */
.share-roster-row>.share-day.is-day-off{background:#f7d4d0}
.share-day_off{color:#8d2e2c}.share-annual_leave{color:#4167a4}.share-sick_leave{color:#a64c45}.share-unpaid_leave{color:#8e682d}.share-pending_leave{color:#786e5f}
.share-empty{color:#aaa296}
.share-week-note{display:flex;gap:10px;margin-top:10px;padding:9px 10px;border:1px solid #d8cdbd;border-radius:9px;background:#faf6ee;font-size:9px}
.share-week-note strong{white-space:nowrap}.share-week-note span{color:#5f594f}
.share-roster-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px;font-size:7px;color:#6d665b}
.share-roster-legend span{white-space:nowrap}
.legend-working{display:inline-block;width:7px;height:7px;border-radius:50%;background:#56a575;margin-right:4px}
.share-roster-footer{text-align:right;margin-top:8px;font-size:7px;color:#8c8376;letter-spacing:.04em}

@media (max-width:980px){
  .roster-grid-head,.roster-grid-row{min-width:990px;grid-template-columns:minmax(140px,1.1fr) repeat(7,minmax(102px,1fr)) 78px}
}

@media (max-width:760px){
  .roster-weekbar{align-items:stretch;flex-direction:column}
  .roster-weekbar>div:nth-child(2){text-align:left;order:-1}
  .roster-weekbar .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .roster-weekbar .actions .btn:last-child{grid-column:1/-1}
  .roster-days{grid-template-columns:1fr;margin-right:0}
  .roster-grid-wrap{overflow:visible}
  .roster-grid-head{display:none}
  .roster-grid-row{min-width:0;display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px;padding:12px;border:1px solid var(--line);border-radius:16px;background:#151512}
  .roster-staff-cell{border:0;padding:2px 2px 8px}
  .roster-staff-cell strong{font-size:16px}
  .roster-grid-day{border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .roster-day-button{min-height:68px;display:grid;grid-template-columns:82px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;text-align:left;column-gap:12px;padding:10px 12px}
  .roster-day-mobile-label{display:block;grid-row:1/3;font-size:11px;font-weight:900;color:#d8d2c7}
  .roster-day-state{font-size:9px;text-align:left}
  .roster-day-time{font-size:12px;text-align:left}
  .roster-day-note-indicator{display:none}
  .roster-day-hours{right:8px;bottom:7px}
  .roster-total-cell{border:0;border-top:1px solid var(--line);padding:10px 2px 0;align-items:flex-start;text-align:left}
  .roster-total-cell strong{font-size:15px}
  .roster-modal-times{grid-template-columns:1fr 1fr}
  .roster-time-select{font-size:16px;min-height:48px}
  .copy-days-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sticky-actions{bottom:82px;display:grid;grid-template-columns:1fr 1fr}
  .sticky-actions .btn:first-child{grid-column:1/-1}
  .mobile-nav{overflow-x:auto;grid-auto-columns:minmax(64px,1fr);justify-content:start}
  .mobile-nav button{min-width:64px}

  .modal-wide{width:min(100%,calc(100vw - 16px));padding:10px}
  .share-roster-actions{align-items:flex-start}
  .share-roster-sheet{padding:12px}
  .share-roster-titlebar{align-items:flex-start}
  .share-brand img{width:54px;height:auto;aspect-ratio:420/323;object-fit:contain}
  .share-brand span{font-size:7px}.share-brand strong{font-size:17px}
  .share-roster-state{font-size:7px;padding:5px 7px}
  .share-roster-week{align-items:flex-start;flex-direction:column;padding:10px 0}
  .share-roster-week strong{font-size:13px}
  .share-roster-head{display:none}
  .share-roster-grid{border:0;display:grid;gap:9px;overflow:visible}
  .share-roster-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #d7cdbd;border-radius:9px;overflow:hidden;min-height:0}
  .share-roster-row>div{border-right:1px solid #ddd3c4;border-bottom:1px solid #ddd3c4;min-height:47px}
  .share-staff{grid-column:1/-1;background:#29261f;color:#fff;border-right:0!important;min-height:36px!important}
  .share-day{position:relative;padding-top:18px!important}
  .share-day::before{display:block;content:attr(data-day);position:absolute;top:5px;left:6px;font-size:6px;font-weight:900;color:#8c8376;text-transform:uppercase}
  .share-hours{grid-column:1/-1;border-right:0!important;border-bottom:0!important;min-height:34px!important;flex-direction:row!important;gap:6px}
  .share-hours::before{content:"Weekly hours";font-size:7px;color:#786f63;text-transform:uppercase;letter-spacing:.06em}
  .share-roster-legend{gap:6px 10px;font-size:6px}
  .share-roster-footer{text-align:left}
}

/* v2.1.2: harden admin credential-creation fields against browser/password-manager autofill. */
.autofill-decoy{position:fixed!important;left:-10000px!important;top:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:.001!important;pointer-events:none!important}
.pin-mask{-webkit-text-security:disc;text-security:disc}

/* v2.1.5: replace browser-native roster time inputs with explicit 12-hour selects. */
.roster-time-select option{background:#161613;color:#f4f1ea}
.roster-time-select:focus{outline:2px solid rgba(225,176,92,.55);outline-offset:1px}
@media (max-width:760px){
  .roster-time-select{font-size:16px;min-height:48px}
}


/* v2.1.10 branded Barrel Sync overlay */
.network-progress{
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  place-items:center;
  padding:max(22px,env(safe-area-inset-top,0px)) 18px max(22px,env(safe-area-inset-bottom,0px));
  background:rgba(8,8,7,.72);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility 0s linear .18s;
}
.network-progress.visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .18s ease;
}
.network-progress-card{
  width:min(360px,calc(100vw - 36px));
  min-width:0;
  display:grid;
  justify-items:center;
  text-align:center;
  gap:15px;
  padding:28px 28px 24px;
  border:1px solid rgba(217,168,91,.28);
  border-radius:26px;
  background:
    radial-gradient(circle at 50% -8%,rgba(217,168,91,.13),transparent 48%),
    linear-gradient(155deg,rgba(31,29,25,.98),rgba(15,15,13,.99));
  box-shadow:0 24px 80px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.025) inset;
  transform:translateY(8px) scale(.985);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.network-progress.visible .network-progress-card{transform:translateY(0) scale(1)}
.network-orbit{
  position:relative;
  width:116px;
  height:116px;
  display:grid;
  place-items:center;
}
.network-ring{
  position:absolute;
  border-radius:50%;
  inset:0;
  pointer-events:none;
}
.network-ring-a{
  background:conic-gradient(from 18deg,transparent 0 13%,rgba(217,168,91,.95) 13% 31%,transparent 31% 53%,rgba(242,207,145,.55) 53% 66%,transparent 66% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  animation:barrelOrbit 1.7s linear infinite;
}
.network-ring-b{
  inset:9px;
  border:1px solid rgba(217,168,91,.22);
  border-top-color:rgba(242,207,145,.85);
  border-bottom-color:rgba(217,168,91,.5);
  animation:barrelOrbitReverse 2.4s linear infinite;
}
.network-ring-c{
  inset:19px;
  border:1px solid rgba(217,168,91,.16);
  box-shadow:0 0 22px rgba(217,168,91,.09) inset;
}
.network-logo-wrap{
  position:relative;
  z-index:2;
  width:72px;
  height:56px;
  border-radius:10px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#10100e;
  border:1px solid rgba(217,168,91,.24);
  box-shadow:0 8px 22px rgba(0,0,0,.34);
}
.network-logo-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.network-check{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(16,29,21,.94);
  color:var(--green);
  font-size:30px;
  font-weight:900;
  opacity:0;
  transform:scale(.76);
  transition:opacity .18s ease,transform .18s ease;
}
.network-progress-copy{display:grid;gap:5px}
.network-kicker{
  color:var(--accent);
  font-size:9px;
  font-weight:900;
  letter-spacing:.22em;
}
.network-progress-label{
  color:var(--text);
  font-family:Georgia,serif;
  font-size:24px;
  line-height:1.08;
  letter-spacing:-.015em;
}
.network-progress-sub{
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.network-track{
  width:100%;
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:#29261f;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.network-progress-bar{
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  border-radius:inherit;
  background:linear-gradient(90deg,#8d6731,var(--accent),var(--accent2));
  box-shadow:0 0 14px rgba(217,168,91,.42);
  transition:transform .18s cubic-bezier(.2,.7,.2,1);
}
.network-wait{
  min-height:14px;
  color:#8f897e;
  font-size:10px;
  letter-spacing:.03em;
  opacity:.72;
}
.network-progress.slow .network-wait::after{content:" · securing latest data"}
.network-progress.complete .network-ring-a,
.network-progress.complete .network-ring-b{animation-play-state:paused;opacity:.22}
.network-progress.complete .network-check{opacity:1;transform:scale(1)}
.network-progress.complete .network-progress-sub{color:#9cc9aa}
.network-progress.complete .network-progress-sub::before{content:"Latest floor data is ready";font-size:0}
.network-progress.failed .network-progress-card{border-color:rgba(240,113,103,.32);box-shadow:0 24px 80px rgba(0,0,0,.48),0 0 36px rgba(240,113,103,.06)}
.network-progress.failed .network-ring-a{background:conic-gradient(from 18deg,transparent 0 16%,rgba(240,113,103,.9) 16% 36%,transparent 36% 64%,rgba(240,113,103,.45) 64% 75%,transparent 75% 100%)}
.network-progress.failed .network-progress-bar{background:linear-gradient(90deg,#7a342f,var(--red),#f5a19a)}
.network-progress.failed .network-progress-label{color:#ffd4d0}

.build-credit{
  color:#7f796f;
  font-size:9px;
  font-weight:650;
  letter-spacing:.055em;
  line-height:1.35;
  opacity:.76;
}
.network-progress-card .build-credit{margin-top:-2px}
.boot-screen .build-credit{margin-top:2px}

@keyframes barrelOrbit{to{transform:rotate(360deg)}}
@keyframes barrelOrbitReverse{to{transform:rotate(-360deg)}}
@media (max-width:520px){
  .network-progress-card{width:min(330px,calc(100vw - 28px));padding:25px 22px 22px;border-radius:22px}
  .network-orbit{width:104px;height:104px}
  .network-logo-wrap{width:66px;height:51px}
  .network-progress-label{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .network-progress,.network-progress-card,.network-progress-bar,.network-check{transition:none}
  .network-ring-a,.network-ring-b{animation:none}
}

/* Barrel Ops v2.2.5 — Option 3: premium all-caps credit.
   Place at the END of styles.css. No HTML or JavaScript changes required. */
.build-credit {
  color: #e8be79;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.94;
  text-shadow: 0 1px 6px rgba(217, 168, 91, 0.10);
}

.network-progress-card .build-credit {
  margin-top: 4px;
}

.boot-screen .build-credit {
  margin-top: 6px;
}

@media (max-width: 520px) {
  .build-credit {
    font-size: 12px;
    letter-spacing: 0.06em;
  }
}

/* Manager row: planning only, no FOH assignment. */
.roster-grid-row:has(.roster-staff-cell small) .roster-staff-cell small{line-height:1.45}
.roster-state-not_set .roster-day-state{opacity:.52;font-style:italic}
.share-staff small{display:block;color:#dbb775;font-size:7px;font-weight:900;letter-spacing:.08em;margin-top:3px}
.sticky-actions{flex-wrap:wrap}

/* Laundry tracker v2.2.7 — self-contained, mobile-first additions */
.laundry-form{display:grid;gap:16px}
.laundry-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:20px 0}
.laundry-stats .card h2{font:700 30px Georgia,serif;margin:8px 0 0}
.laundry-stats .card small{display:block;color:var(--muted);font-size:12px}
.laundry-list{display:grid;gap:9px;margin:10px 0 24px}
.laundry-list-row{display:grid;grid-template-columns:minmax(180px,1.3fr) minmax(230px,1.4fr) minmax(130px,.8fr) auto;align-items:center;gap:16px;padding:15px 19px;background:var(--panel,#1a1917);border:1px solid var(--border,#39352f);border-radius:16px}
.laundry-list-row strong,.laundry-list-row small{display:block}
.laundry-list-row small{color:var(--muted);font-size:11px;margin-top:5px}
.laundry-numbers{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.laundry-numbers b{color:var(--text);font-size:15px;margin-left:3px}
.laundry-pill{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap;background:#27241c;color:#dac292}
.laundry-pill.complete{background:#173c2a;color:#86dab0}.laundry-pill.partial{background:#203043;color:#a7c8f3}
.laundry-pill.shortage{background:#4a2422;color:#ffac9c}
.laundry-sender{color:var(--muted);margin-bottom:16px}.laundry-sender b{color:var(--text)}
.laundry-table-head,.laundry-send-row{display:grid;grid-template-columns:minmax(165px,1.3fr) minmax(110px,.7fr) minmax(160px,1.4fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border,#39352f)}
.laundry-table-head,.laundry-receive-head{color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.08em}
.laundry-send-row:last-child,.laundry-receive-row:last-child{border-bottom:none}
.laundry-send-row input,.laundry-receive-row input,.laundry-custom-fields input{width:100%;min-width:0;box-sizing:border-box;background:#131310;color:var(--text);border:1px solid #3e3a34;border-radius:9px;padding:12px}
.laundry-send-row label{font-size:14px;font-weight:650}
.laundry-custom-card p{margin:0 0 12px}.laundry-custom-fields{display:grid;grid-template-columns:2fr .7fr 1.5fr auto;gap:12px;align-items:end}
.laundry-custom-fields label{color:var(--muted);font-size:12px;min-width:0}.laundry-custom-fields input{display:block;margin-top:7px}
.laundry-custom-row{display:grid;grid-template-columns:2fr .7fr 1.5fr auto;gap:10px;align-items:center;padding:12px 3px;border-bottom:1px solid var(--border,#39352f)}
.laundry-custom-row small{color:var(--muted)}
.laundry-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:14px 0 26px}
.laundry-batch-header{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.laundry-batch-header>div{display:grid;gap:7px}.laundry-batch-header small{font-size:11px;color:var(--muted)}
.laundry-receive-head,.laundry-receive-row{display:grid;grid-template-columns:minmax(160px,2fr) minmax(45px,.5fr) minmax(85px,.8fr) minmax(110px,.9fr) minmax(100px,.9fr);align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--border,#39352f)}
.laundry-receive-row>span,.laundry-receive-row>b{text-align:center;font-size:14px}
.laundry-receive-row strong{font-size:14px}.laundry-receive-row small{color:var(--muted);font-weight:400}
.laundry-balance{color:#e9bd79}.laundry-receive-row input{width:100px;text-align:center}
.laundry-shortage-panel{margin-top:18px;border:1px solid #87473a;border-radius:12px;padding:12px;background:#2a1d1c}
.laundry-shortage-panel[hidden]{display:none!important}
.laundry-history{display:grid;gap:0}
.laundry-event{position:relative;padding:12px 14px;border-left:2px solid #92764e;margin-left:8px}
.laundry-event b,.laundry-event small{display:block}.laundry-event small{color:var(--muted);margin-top:5px}
@media(max-width:1000px){.laundry-list-row{grid-template-columns:minmax(160px,1fr) 1fr;gap:10px}.laundry-custom-fields{grid-template-columns:1fr 1fr}.laundry-batch-header{gap:12px}}
@media(max-width:640px){.laundry-stats{gap:7px}.laundry-stats .card{padding:10px}.laundry-stats .card h2{font-size:22px}.laundry-list-row{grid-template-columns:1fr auto;gap:12px}.laundry-list-row .laundry-numbers{grid-column:1 / -1;grid-row:2}.laundry-send-row{grid-template-columns:1fr 100px;gap:8px}.laundry-send-row>input:last-child{grid-column:1 / -1}.laundry-table-head{display:none}.laundry-custom-fields{grid-template-columns:1fr}.laundry-custom-row{grid-template-columns:1fr auto}.laundry-receive-head{display:none}.laundry-receive-row{grid-template-columns:1fr 1fr 1fr;gap:8px}.laundry-receive-row strong{grid-column:1 / -1}.laundry-receive-row>span:nth-child(2)::before{content:'Sent: ';color:var(--muted)}.laundry-receive-row>span:nth-child(3)::before{content:'Returned: ';color:var(--muted)}.laundry-receive-row>span:nth-child(4){grid-column:1 / 3}.laundry-balance::before{content:'Left: ';color:var(--muted)}.laundry-receive-row input{width:100%}}


/* v2.2.17 — Optional warm light theme. Dark remains exactly the baseline. */
.theme-toggle{
  width:37px;height:37px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 37px;padding:0;border-radius:12px;border:1px solid var(--line);
  color:var(--accent2);background:var(--panel);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .18s,border-color .18s;
}
.theme-toggle:hover{border-color:var(--accent)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.theme-icon{display:block;font-family:Arial,Helvetica,sans-serif;font-size:23px;line-height:1}

html[data-theme="light"]{
  color-scheme:light;
  --bg:#faf8f3;--panel:#fffdf9;--panel2:#f6f1e9;--panel3:#eee8dc;
  --line:#e5ddd0;--line2:#d6caba;--text:#282620;--muted:#615e57;
  --accent:#9a642e;--accent2:#7e4f21;--green:#20784b;--red:#ad3d36;
  --amber:#955c1c;--blue:#225fa4;--shadow:0 14px 40px rgba(61,48,27,.09);
  --border:#e5ddd0;
}
html[data-theme="light"] body{
  background:radial-gradient(900px 500px at 80% -10%,rgba(188,151,92,.09),transparent 62%),var(--bg);
}
html[data-theme="light"] .sidebar{background:rgba(253,251,246,.97)}
html[data-theme="light"] .topbar{background:rgba(250,248,243,.94)}
html[data-theme="light"] .nav button{color:#565149}
html[data-theme="light"] .nav button:hover,
html[data-theme="light"] .nav button.active{background:#ece5d9;color:#29231b}
html[data-theme="light"] .health-pill,
html[data-theme="light"] .clock-pill{background:#fffdf9}
html[data-theme="light"] .card{background:linear-gradient(180deg,#fffefb,#fdfaf5);box-shadow:0 10px 28px rgba(48,36,21,.045)}
html[data-theme="light"] .btn{background:#f2ecdf;color:var(--text)}
html[data-theme="light"] .btn.primary{background:var(--accent);color:#fffdf8;border-color:var(--accent)}
html[data-theme="light"] .btn.danger{color:#a12b28}
html[data-theme="light"] .btn.ghost{background:transparent}
html[data-theme="light"] .theme-toggle{color:#81521e;background:#f1e7d6}
html[data-theme="light"] .eyebrow{color:#86551c}
html[data-theme="light"] .login-card{background:linear-gradient(145deg,#f8f2e7,#fffdf9)}
html[data-theme="light"] .brand-side p{color:#555047}
html[data-theme="light"] .proof div{background:#f0e9dd}
html[data-theme="light"] .login-side{background:#fffdf9}
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea{background:#ffffff;color:var(--text);border-color:#d8ccbd}
html[data-theme="light"] .login-note{color:#68491e;background:#f7eedb}
html[data-theme="light"] .login-error{color:#982925;background:#ffefed}
html[data-theme="light"] .task{background:#fffdf9}
html[data-theme="light"] .task-time{color:#49443c}
html[data-theme="light"] .tag{background:#efe9de;color:#625a4f;border-color:#d8cebf}
html[data-theme="light"] .tag.critical{color:#9d2e29}
html[data-theme="light"] .status.deferred,
html[data-theme="light"] .status.acknowledged{color:#673dae}
html[data-theme="light"] .attention-card{background:#fffdf9}
html[data-theme="light"] .table{background:#fffdf9}
html[data-theme="light"] .table th{color:#686056;background:#f1ebe2}
html[data-theme="light"] .check-row,
html[data-theme="light"] .inline-note{background:#f9f5ed}
html[data-theme="light"] .code-chip{background:#f5f0e8}
html[data-theme="light"] .segmented{background:#f0eae0}
html[data-theme="light"] .segmented button.active{background:#fffdf9}
html[data-theme="light"] .modal{background:#fffdf9}
html[data-theme="light"] .toast{background:#f1faef;color:#215c38;border-color:#b5d5ba}
html[data-theme="light"] .toast.error{background:#fff2ef;color:#942e28;border-color:#e5aba4}
html[data-theme="light"] .roster-weekbar{background:#f7f1e7}
html[data-theme="light"] .roster-live-total{color:#24211b}
html[data-theme="light"] .roster-day-read{background:#fffdfa}
html[data-theme="light"] .roster-day-read>b{color:#292620}
html[data-theme="light"] .roster-grid-head{background:#efe8de}
html[data-theme="light"] .roster-grid-head-cell{color:#625a4f}
html[data-theme="light"] .roster-grid-row{background:#fffcf7}
html[data-theme="light"] .roster-day-state{color:#645b51}
html[data-theme="light"] .roster-day-time{color:#302c25}
html[data-theme="light"] .roster-day-note-indicator{color:#645c52}
html[data-theme="light"] .roster-day-hours{color:#6c6256}
html[data-theme="light"] .roster-state-day_off{background:#f1ede6}
html[data-theme="light"] .roster-state-working{background:#edf9f0}
html[data-theme="light"] .roster-state-annual_leave{background:#edf3ff}
html[data-theme="light"] .roster-state-sick_leave{background:#fff0ef}
html[data-theme="light"] .roster-state-unpaid_leave{background:#fef3e1}
html[data-theme="light"] .roster-state-pending_leave{background:#f4f0eb}
html[data-theme="light"] .roster-state-working .roster-day-state{color:#1e7045}
html[data-theme="light"] .roster-state-annual_leave .roster-day-state{color:#275eac}
html[data-theme="light"] .roster-state-sick_leave .roster-day-state{color:#a62a27}
html[data-theme="light"] .roster-state-unpaid_leave .roster-day-state{color:#85500e}
html[data-theme="light"] .roster-state-pending_leave .roster-day-state{color:#6a5648}
html[data-theme="light"] .roster-time-select,
html[data-theme="light"] .roster-time-select option{color:#282620;background:#fff}
html[data-theme="light"] .copy-days>strong{color:#625a4f}
html[data-theme="light"] .copy-day-check{background:#fffdf9;color:#3e382e}
html[data-theme="light"] .sticky-actions{background:rgba(253,250,245,.97)}
html[data-theme="light"] .health-pill.relief{color:#895b22}
html[data-theme="light"] .status.working,
html[data-theme="light"] .status.active{color:#145b37;background:#e8f6eb}
html[data-theme="light"] .status.day_off,
html[data-theme="light"] .status.pending_leave{color:#564d43;background:#eae5dc}
html[data-theme="light"] .status.annual_leave{color:#215b9e}
html[data-theme="light"] .status.sick_leave{color:#9c2d2d}
html[data-theme="light"] .status.unpaid_leave{color:#885616}
html[data-theme="light"] .roster-day-mobile-label{color:#524a41}
html[data-theme="light"] .laundry-pill{background:#f4e7d5;color:#68461d}
html[data-theme="light"] .laundry-pill.complete{background:#e5f3e9;color:#1a673f}
html[data-theme="light"] .laundry-pill.partial{background:#e5efff;color:#245a96}
html[data-theme="light"] .laundry-pill.shortage{background:#fbe9e5;color:#9e3026}
html[data-theme="light"] .laundry-send-row input,
html[data-theme="light"] .laundry-receive-row input,
html[data-theme="light"] .laundry-custom-fields input{background:#fff;color:#282620;border-color:#d8ccbd}
html[data-theme="light"] .laundry-balance{color:#83561e}
html[data-theme="light"] .laundry-shortage-panel{background:#fff1ec;border-color:#dea392;color:#7b2c24}
html[data-theme="light"] .msg-tab{background:#fffdf9}
html[data-theme="light"] .msg-tab.selected{background:#f4e6d0;color:#764a1d;border-color:#cda875}
html[data-theme="light"] .msg-card{background:linear-gradient(130deg,#fffefa,#faf6ef)}
html[data-theme="light"] .msg-card.unread{background:#fff5df}
html[data-theme="light"] .msg-unread-alert{background:#fff2e0}
html[data-theme="light"] .msg-unread-alert strong{color:#6e311c}
html[data-theme="light"] .msg-recipient-panel{background:#f9f5ed}
html[data-theme="light"] .msg-person{background:#fffdf8}
html[data-theme="light"] .mobile-nav{background:rgba(255,253,248,.98)}
html[data-theme="light"] .mobile-nav button.active{background:#eee1cc;color:#3c3022}
html[data-theme="light"] .network-progress-card{
  background:radial-gradient(circle at 50% -8%,rgba(217,168,91,.12),transparent 48%),linear-gradient(155deg,#fffcf7,#f7f1e7);
  box-shadow:0 24px 80px rgba(0,0,0,.20);color:var(--text)
}
html[data-theme="light"] .network-logo-wrap{background:#24201b}
html[data-theme="light"] .network-track{background:#e5ddd0}
html[data-theme="light"] .network-wait{color:#726958}
html[data-theme="light"] .network-progress.failed .network-progress-label{color:#a73230}
html[data-theme="light"] .build-credit{color:#9a6329}
@media(max-width:760px){
  .theme-toggle{width:34px;height:34px;flex-basis:34px}
  .top-actions{gap:7px}
}

/* Festive Orders — inherits light/dark theme tokens and Barrel Ops cards */
.festive-section{margin-bottom:16px}
.festive-section h3,.festive-detail-grid h3,.festive-edit-card h3{margin:0 0 17px;font-size:17px}
.festive-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.festive-section-head h3{margin:0}
.festive-address{margin-top:15px}
.festive-lines{display:grid;gap:12px}
.festive-item{padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.festive-line-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}
.festive-line-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.festive-line-grid .field input,.festive-line-grid .field select{min-width:0}
.festive-line-price{margin-top:12px;display:flex;align-items:center;justify-content:flex-end;gap:8px;color:var(--muted);font-size:12px}
.festive-line-price strong{color:var(--text)}
.festive-totals{display:grid;gap:11px;max-width:650px}
.festive-totals>div{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:13px}
.festive-totals span{color:var(--muted)}
.festive-totals strong{color:var(--text)}
.festive-totals .festive-grand{border-top:1px solid var(--line);padding-top:12px;font-size:17px}
.festive-payment-fields{margin-top:22px}
.festive-note,.festive-hint{font-size:12px;color:var(--muted);line-height:1.55}
.festive-hint.warning{color:var(--red)}
.festive-savebar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px}
.festive-filter{display:grid;grid-template-columns:minmax(190px,2fr) minmax(125px,1fr) minmax(145px,1fr) minmax(145px,1fr) auto auto;align-items:end;gap:10px;margin-bottom:20px}
.festive-filter button{min-height:42px}
.festive-order-list{display:grid;gap:4px}
.festive-order-row{display:grid;grid-template-columns:minmax(200px,2fr) minmax(145px,1fr) minmax(145px,1fr) 110px 60px;gap:12px;align-items:center;padding:13px 10px;border-top:1px solid var(--line)}
.festive-order-row b,.festive-order-row small{display:block}
.festive-order-row b{font-size:12px;overflow-wrap:anywhere}
.festive-order-row small{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4}
.festive-status{font-size:11px;font-weight:700;padding:7px 9px;border-radius:12px;background:var(--panel2);width:fit-content;text-transform:capitalize}
.festive-status.ready,.festive-status.completed{color:var(--green)}
.festive-status.preparing,.festive-status.confirmed{color:var(--amber)}
.festive-status.cancelled{color:var(--red)}
.festive-summary{margin-bottom:16px}
.festive-summary .festive-value{font-size:clamp(18px,2vw,27px)}
.festive-detail-grid{align-items:start}
.festive-detail-grid .field{margin-bottom:12px}
.festive-details-list>div{display:grid;gap:5px;padding:11px 0;border-bottom:1px solid var(--line)}
.festive-details-list strong{font-size:13px}
.festive-details-list small{color:var(--muted);font-size:11px}
.festive-details-list span{font-weight:700;font-size:12px}
.festive-detail-grid h4{font-size:13px;margin:20px 0 8px}
.festive-readable{white-space:pre-wrap;line-height:1.5;font-size:13px;overflow-wrap:anywhere}
.festive-separator{height:1px;background:var(--line);margin:24px 0}
.festive-edit-card{margin-top:16px}
.festive-wide{grid-column:1/-1}
.festive-price-table{display:grid}
.festive-price-header,.festive-price-row{display:grid;grid-template-columns:minmax(180px,2fr) minmax(105px,1fr) minmax(105px,1fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.festive-price-header{color:var(--muted);font-size:11px}
.festive-price-row strong{font-size:12px}
.festive-price-row input{min-width:0;width:100%;padding:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px}
html[data-theme="light"] .festive-item,html[data-theme="light"] .festive-price-row input{background:#faf7f0}
@media(max-width:1230px){.festive-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.festive-filter>.field:first-child{grid-column:1/-1}}
@media(max-width:950px){.festive-line-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.festive-order-row{grid-template-columns:minmax(130px,1.5fr) minmax(120px,1fr) auto}.festive-order-row>div:nth-child(3){grid-column:2}.festive-order-row .festive-status{grid-column:3;grid-row:1}.festive-order-row>button{grid-column:3;grid-row:2}}
@media(max-width:620px){.festive-line-grid,.festive-filter{grid-template-columns:1fr}.festive-filter>.field:first-child{grid-column:auto}.festive-order-row{grid-template-columns:1fr auto}.festive-order-row>div:nth-child(3){grid-column:1}.festive-order-row .festive-status{grid-column:2;grid-row:1}.festive-order-row>button{grid-column:2;grid-row:3}.festive-price-header,.festive-price-row{grid-template-columns:minmax(100px,1.4fr) minmax(75px,1fr) minmax(75px,1fr);gap:5px}.festive-price-row input{padding:8px 5px;font-size:12px}.festive-savebar .btn{width:100%}}


/* ============================================================
   BARREL OPS v2.2.20 — COPPER IDENTITY (visual-only layer)
   Baseline: deployed v2.2.18. No API, auth, D1 or event changes.
   ============================================================ */
:root{
  --bg:#11100f;
  --panel:#191715;
  --panel2:#211d19;
  --panel3:#29231f;
  --line:#382c25;
  --line2:#524032;
  --text:#f3ebe1;
  --muted:#afa195;
  --accent:#c68c61;
  --accent2:#efbd86;
  --shadow:0 20px 60px rgba(0,0,0,.32);
}
html,body{background:radial-gradient(1050px 650px at 90% -15%,rgba(126,67,36,.14),transparent 62%),var(--bg)}
.brand-side{
  background:
    radial-gradient(ellipse at 24% 8%,rgba(179,109,62,.12),transparent 58%),
    linear-gradient(155deg,#201a17,#151312 74%);
  isolation:isolate;
}
.brand-side::before{
  content:"";
  position:absolute;inset:0;
  background:url('/logo.png') center 28%/125% auto no-repeat;
  opacity:.065;filter:saturate(.85);
  pointer-events:none;z-index:-1;
}
.brand-side::after{z-index:-1;border-color:rgba(198,140,97,.16);box-shadow:0 0 0 60px rgba(198,140,97,.028),0 0 0 120px rgba(198,140,97,.018)}
.login-card{border-color:rgba(174,113,76,.29);box-shadow:0 30px 100px rgba(0,0,0,.45)}
.hero-logo{display:flex;align-items:center;justify-content:center;position:relative;margin:-12px -10px 0}
.hero-logo img{
  width:min(100%,370px);height:auto;max-height:280px;display:block;object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse 65% 65% at 50% 50%,#000 55%,transparent 100%);
  mask-image:radial-gradient(ellipse 65% 65% at 50% 50%,#000 55%,transparent 100%);
  filter:contrast(1.08) saturate(1.1);
}
.brand-side h1{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(34px,4vw,50px);font-weight:700;letter-spacing:-.05em;line-height:1.12;margin:18px 0 16px}
.brand-side p{font-size:14px;line-height:1.7;color:#c6b8aa}
.proof{margin-top:27px}
.proof div{background:rgba(21,18,16,.62);border-color:rgba(198,140,97,.16)}
.login-side{background:linear-gradient(160deg,#161311,#100f0e)}
.login-side .btn.primary{box-shadow:0 7px 22px rgba(149,81,44,.15)}
.login-form .field input:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(198,140,97,.17)}
.brand-mini{align-items:center;gap:11px;border-bottom:1px solid rgba(198,140,97,.12);margin-bottom:18px;padding-bottom:23px}
.brand-mini img{width:47px;height:47px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(198,140,97,.18))}
.brand-mini .ops-badge{margin-left:-8px;align-self:flex-end;font-size:8px;padding:4px 6px}
.brand-copy strong{font-size:15px;letter-spacing:.01em}
.brand-copy small{font-size:8px;letter-spacing:.12em}
.sidebar{background:linear-gradient(180deg,rgba(27,22,19,.98),rgba(16,15,14,.98));border-right-color:rgba(198,140,97,.14)}
.nav button.active{background:linear-gradient(95deg,rgba(198,140,97,.17),rgba(198,140,97,.055));box-shadow:inset 2px 0 0 var(--accent);color:var(--text)}
.nav button:hover:not(.active){background:rgba(198,140,97,.09)}
.topbar{background:rgba(20,17,15,.91);border-bottom-color:rgba(198,140,97,.14)}
.hero h1{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:700;letter-spacing:-.045em}
.hero{position:relative}
.hero::after{content:"";position:absolute;right:0;top:-35px;width:170px;height:170px;background:url('/barrel-emblem.svg') center/contain no-repeat;opacity:.44;filter:brightness(1.35) saturate(1.05);pointer-events:none}
.network-progress{background:rgba(10,9,8,.82);backdrop-filter:blur(10px)}
.network-progress-card{
  width:min(376px,calc(100vw - 32px));gap:13px;
  padding:32px 28px 24px;
  border:1px solid rgba(198,140,97,.34);
  background:radial-gradient(ellipse at 50% 12%,rgba(140,80,47,.14),transparent 60%),linear-gradient(160deg,#1e1916,#100f0e);
  box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 44px rgba(170,91,50,.09),inset 0 1px 0 rgba(255,240,211,.05);
}
.network-orbit{width:162px;height:162px}
.network-ring-a{
  inset:-4px;
  background:conic-gradient(from 0deg,transparent 0% 12%,rgba(238,166,103,.1) 13%,rgba(240,181,122,.97) 23%,rgba(240,181,122,.12) 29%,transparent 36% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  animation:barrelOrbit 3.8s linear infinite;
  filter:drop-shadow(0 0 9px rgba(237,159,90,.65));
}
.network-ring-b{
  inset:6px;border:1px solid rgba(198,140,97,.28);border-top-color:rgba(255,196,133,.85);
  border-bottom-color:rgba(198,140,97,.40);
  animation:barrelOrbitReverse 7s linear infinite;
}
.network-ring-c{inset:13px;border:1px solid rgba(198,140,97,.11);box-shadow:inset 0 0 30px rgba(170,102,56,.07)}
.network-logo-wrap{width:136px;height:136px;border:0;border-radius:50%;overflow:hidden;background:transparent;box-shadow:none}
.network-logo-wrap img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px rgba(218,141,81,.22))}
.network-kicker{font-family:Georgia,"Times New Roman",serif;font-size:14px;letter-spacing:.32em;font-weight:500;color:#e0b48c}
.network-progress-label{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.025em}
.network-progress-sub{font-size:12px}
.network-track{height:3px;background:#322820}
.network-progress-bar{background:linear-gradient(90deg,#815039,#c88b5d,#f0c190);box-shadow:0 0 13px rgba(223,150,91,.38)}
.network-progress-card .build-credit{font-size:11px;letter-spacing:.035em;color:#c69875;margin-top:0}
.network-check{border-radius:50%;background:rgba(14,28,19,.94)}
.network-progress.complete .network-check{box-shadow:inset 0 0 0 1px rgba(116,211,154,.2)}
.boot-screen{position:relative;isolation:isolate;background:radial-gradient(circle at 50% 42%,rgba(166,94,55,.10),transparent 40%)}
.boot-screen::before{content:"";position:absolute;inset:0;background:url('/barrel-emblem.svg') center/340px 340px no-repeat;opacity:.085;pointer-events:none;z-index:-1}
.boot-mark img{width:200px;height:auto;max-height:160px;object-fit:contain;filter:drop-shadow(0 4px 18px rgba(0,0,0,.25))}
.boot-mark{gap:0;flex-direction:column}
.boot-mark span{margin-top:-7px}
.boot-screen .spinner{width:35px;height:35px;border-width:2px;border-color:rgba(198,140,97,.12);border-top-color:var(--accent);animation-duration:1.65s}
/* Existing fatal-screen mark remains legible; no error handling was changed. */
.fatal-screen .boot-mark img{width:140px}
html[data-theme="light"]{
  --accent:#a6653f;--accent2:#7e452b;
  --bg:#faf7f2;--panel:#fffdf9;--panel2:#f8f1ea;
  --line:#e2d5ca;--line2:#ccb49e;--text:#2b231f;--muted:#71645b;
}
html[data-theme="light"] body{background:radial-gradient(900px 550px at 80% -10%,rgba(170,113,77,.10),transparent 62%),var(--bg)}
html[data-theme="light"] .sidebar{background:linear-gradient(180deg,rgba(255,251,246,.98),rgba(250,244,235,.98))}
html[data-theme="light"] .topbar{background:rgba(255,251,246,.94)}
html[data-theme="light"] .nav button.active{background:linear-gradient(90deg,rgba(166,101,63,.14),rgba(166,101,63,.045));color:#493224}
html[data-theme="light"] .login-card{background:#fffcf7;box-shadow:0 24px 70px rgba(51,33,17,.12)}
html[data-theme="light"] .brand-side{background:linear-gradient(155deg,#29211b,#151311);color:#f4e7d5}
html[data-theme="light"] .brand-side .eyebrow{color:#d9a177}
html[data-theme="light"] .brand-side h1{color:#f5eadb}
html[data-theme="light"] .brand-side p{color:#d0bcaa}
html[data-theme="light"] .proof div{background:rgba(22,19,16,.62);border-color:rgba(198,140,97,.16);color:#f2e5d5}
html[data-theme="light"] .proof span{color:#bba898}
html[data-theme="light"] .login-side{background:#fffdf9}
html[data-theme="light"] .network-progress{background:rgba(32,23,16,.55)}
html[data-theme="light"] .network-progress-card{background:radial-gradient(ellipse at 50% 15%,rgba(175,116,78,.11),transparent 55%),linear-gradient(155deg,#fffcf8,#f3ede5);box-shadow:0 24px 80px rgba(35,25,15,.22);color:var(--text)}
html[data-theme="light"] .network-logo-wrap{background:transparent}
html[data-theme="light"] .network-kicker{color:#98613c}
html[data-theme="light"] .network-progress-card .build-credit{color:#9b6949}
html[data-theme="light"] .network-ring-a{background:conic-gradient(from 0deg,transparent 0 12%,rgba(151,83,45,.08) 13%,rgba(155,91,50,.9) 23%,rgba(155,91,50,.12) 29%,transparent 36% 100%)}
@media(max-width:760px){
  .brand-side{padding:26px 26px 22px;min-height:auto}
  .hero-logo{margin:0 auto;max-width:290px}
  .hero-logo img{max-height:230px}
  .brand-side h1{font-size:33px;margin-top:8px}
  .brand-side p{font-size:13px}
  .proof{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:18px}
  .proof div{padding:10px 8px}
  .proof strong{font-size:13px}
  .proof span{font-size:9px}
  .login-side{padding:28px 24px}
  .hero::after{width:105px;height:105px;top:-15px}
  .network-orbit{width:144px;height:144px}
  .network-logo-wrap{width:121px;height:121px}
}
@media(max-width:390px){
  .login{padding:8px}
  .brand-side{padding:20px 18px 18px}
  .hero-logo img{max-height:190px}
  .brand-side h1{font-size:28px}
  .brand-side p{font-size:12px}
  .proof{margin-top:14px}
  .proof div{padding:8px 5px}
  .login-side{padding:22px 18px}
  .network-progress-card{padding:24px 20px 20px}
}
@media(prefers-reduced-motion:reduce){
  .network-ring-a,.network-ring-b,.boot-screen .spinner{animation:none!important}
  .network-progress-card,.network-progress-bar{transition:none!important}
}


/* BARREL original-artwork identity — extra final presentation only.
   Zero new event handlers, endpoint calls, permissions or server changes. */
:root{
  --barrel-ivory:#d6c8b4;
  --barrel-copper:#926042;
  --barrel-copper-bright:#c58c64;
  --barrel-ink:#252321;
}
/* This translucent original photographic grain is deliberately limited
   to the non-operational surfaces; form contents remain crisp. */
.login{
  background:
    radial-gradient(ellipse at 13% 9%,rgba(142,79,46,.13),transparent 39%),
    radial-gradient(ellipse at 93% 89%,rgba(109,67,37,.12),transparent 35%),
    #100f0e;
}
.login-card{box-shadow:0 35px 105px rgba(0,0,0,.58),0 0 0 1px rgba(216,158,104,.045) inset}
.brand-side{background-color:#1a1816}
.brand-side::before{
  background-image:linear-gradient(160deg,rgba(21,18,16,.22),rgba(12,11,10,.25)),url('/barrel-artwork.webp');
  background-position:center center;
  background-size:cover;
  opacity:.14;filter:saturate(.65);
}
.brand-side::after{pointer-events:none}
.hero-logo img{
  width:min(100%,412px);
  max-height:305px;
  aspect-ratio:1030/792;
  object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse 72% 76% at 50% 50%,#000 59%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 76% at 50% 50%,#000 59%,transparent 100%);
}
.brand-side .eyebrow{color:#daa77d}
.brand-side h1{color:#f1e6d8}
.login-side{border-left-color:rgba(198,140,97,.19)}
.login-side h2{letter-spacing:-.045em}
.login-side .btn.primary{background:linear-gradient(110deg,#ae734d,#d69b70 52%,#a56945);border-color:#b67a56;color:#1c120d}
.login-side .btn.primary:hover:not(:disabled){filter:brightness(1.07)}
.login-side .login-note{border-color:rgba(198,140,97,.23);background:rgba(198,140,97,.08);color:#c9b7a7}
.login-form .field input{background:rgba(11,10,9,.56);border-color:#534033}
/* Navigation, cards and action controls reflect the copper barrel engraving. */
.sidebar{background-image:linear-gradient(180deg,#1d1916,#131210)}
.sidebar::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url('/barrel-grain.webp') 0 0/290px 264px repeat;
  opacity:.045;
}
.sidebar>*{position:relative}
.brand-mini{position:relative;padding-bottom:22px}
.brand-mini::after{
  content:"";position:absolute;bottom:0;left:7px;right:7px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,140,97,.47),transparent)
}
.brand-mini img{width:52px;height:52px}
.brand-mini .ops-badge{color:#1c120b;background:#b67b52;border:1px solid rgba(249,196,145,.2)}
.brand-mini .brand-copy strong{color:#f3e6d6}
.nav button{color:#c4b7aa}
.nav button .ico{color:#b59378}
.nav button.active .ico{color:#e6ac7d}
.nav button.active{border:1px solid rgba(198,140,97,.13);padding:11px 12px}
.main{background:radial-gradient(850px 470px at 84% -5%,rgba(155,84,48,.12),transparent 68%),transparent}
.topbar{border-image:none}
.topbar::after{
  content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(195,126,79,.30),rgba(195,126,79,.03) 85%,transparent);
  pointer-events:none
}
.hero{padding:4px 0 10px}
.hero .eyebrow{color:#c79772;letter-spacing:.20em}
.hero::after{width:198px;height:198px;right:2px;top:-46px;opacity:.44}
.section-head{position:relative}
.section-head h3{letter-spacing:-.022em}
.card{position:relative;border-color:rgba(182,130,94,.21);background:linear-gradient(165deg,rgba(35,30,26,.98),rgba(23,21,19,.98));box-shadow:0 14px 44px rgba(0,0,0,.12),inset 0 1px 0 rgba(245,208,168,.015)}
.card.stat::before{
  content:"";height:2px;position:absolute;top:0;left:22px;right:22px;
  background:linear-gradient(90deg,rgba(192,127,84,.6),transparent 70%);
  pointer-events:none
}
.card .value{letter-spacing:-.045em}
.health-pill,.clock-pill{background:rgba(33,29,25,.85);border-color:rgba(181,130,94,.23)}
.avatar{background:linear-gradient(145deg,#643f2c,#ad7750);color:#f9e9d7}
.btn:not(.primary):not(.danger):not(.ghost){background:#302721;border-color:#534034}
.btn.primary{background:#bf855a;border-color:#bf855a;color:#18110d}
.btn:hover:not(:disabled){border-color:#c08c67}
.field input,.field select,.field textarea{background:#191614;border-color:#594235}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#bd865f;box-shadow:0 0 0 3px rgba(194,130,86,.17)}
.table th{background:#251f1b;color:#bcb0a4}
.tag{background:#322820;color:#d8c1aa;border-color:#594332}
.segmented{background:#201b17;border-color:#594232}
.segmented button.active{background:#422f25;color:#f1e4d5}
.attention-card,.task,.roster-weekbar{background:#201c19;border-color:#49372b}
.mobile-nav{background:rgba(25,21,18,.96);border-color:rgba(198,140,97,.28)}
.mobile-nav button.active{background:rgba(196,131,86,.2);color:#f6e2cf}
.theme-toggle{border-color:rgba(198,140,97,.27)}
.network-progress-card{
  background:
    radial-gradient(ellipse at 50% 18%,rgba(138,80,46,.19),transparent 53%),
    linear-gradient(155deg,rgba(33,26,22,.98),rgba(15,14,13,.995));
}
.network-orbit{filter:drop-shadow(0 0 9px rgba(218,140,90,.13))}
.network-logo-wrap img{width:100%;height:100%;object-fit:contain}
.network-kicker{font-family:Georgia,"Times New Roman",serif;color:#e6c4a6;letter-spacing:.30em;font-size:13px}
.network-progress .network-wait{color:#b1a092}
.network-progress .build-credit,.boot-screen .build-credit{color:#c48d65;text-shadow:none}
.boot-screen{background:radial-gradient(ellipse at 50% 40%,rgba(140,80,47,.18),transparent 55%),#100e0d}
.boot-mark img{width:176px;max-height:166px;height:auto;filter:drop-shadow(0 0 12px rgba(184,111,69,.12))}
.boot-mark span{font-size:9px;margin-top:-5px}
/* Keep light mode warm and clean, not a dark page painted white. */
html[data-theme="light"] .login{background:radial-gradient(circle at 15% 10%,rgba(174,121,83,.12),transparent 46%),#f7f3ec}
html[data-theme="light"] .brand-side{background:#1c1714}
html[data-theme="light"] .login-side .login-note{color:#76543e;background:#f7efe6;border-color:#ead6c5}
html[data-theme="light"] .login-side .field input{background:#fff;color:#27211c;border-color:#d9c4b3}
html[data-theme="light"] .sidebar{
  background:linear-gradient(180deg,#fffbf5,#f9f3eb);
  border-right-color:#ddcbbc
}
html[data-theme="light"] .sidebar::before{opacity:.014}
html[data-theme="light"] .brand-mini .brand-copy strong{color:#32241b}
html[data-theme="light"] .nav button{color:#635348}
html[data-theme="light"] .nav button .ico{color:#9a6b4d}
html[data-theme="light"] .nav button.active{background:#eee0d4;color:#3d271a;border-color:rgba(156,99,62,.09)}
html[data-theme="light"] .nav button.active .ico{color:#854e31}
html[data-theme="light"] .main{background:radial-gradient(800px 460px at 90% -9%,rgba(149,93,56,.08),transparent 70%)}
html[data-theme="light"] .hero .eyebrow{color:#8b542f}
html[data-theme="light"] .hero::after{opacity:.28;filter:brightness(.78) saturate(.85)}
html[data-theme="light"] .card{background:linear-gradient(165deg,#fffefa,#fffaf5);border-color:#e7d7ca;box-shadow:0 12px 34px rgba(62,36,20,.04)}
html[data-theme="light"] .card.stat::before{background:linear-gradient(90deg,rgba(162,99,61,.38),transparent 70%)}
html[data-theme="light"] .health-pill,html[data-theme="light"] .clock-pill{background:#fffdfa;border-color:#e6d9cd}
html[data-theme="light"] .btn:not(.primary):not(.danger):not(.ghost){background:#f2e8df;border-color:#dcc8b7;color:#392a20}
html[data-theme="light"] .btn.primary{background:#a86c46;border-color:#a86c46;color:#fffdf9}
html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea{background:#fff;color:#29221d;border-color:#d9c8b8}
html[data-theme="light"] .table th{background:#f2e8df;color:#6e5d51}
html[data-theme="light"] .tag{background:#f3e9e0;color:#685548;border-color:#decaba}
html[data-theme="light"] .segmented{background:#f3e8dd;border-color:#e2cfc0}
html[data-theme="light"] .segmented button.active{background:#fffdf9;color:#3f2f24}
html[data-theme="light"] .attention-card,html[data-theme="light"] .task,html[data-theme="light"] .roster-weekbar{background:#fffdf8;border-color:#e5d4c5}
html[data-theme="light"] .mobile-nav{background:rgba(255,250,244,.97);border-color:#dfcbbb}
html[data-theme="light"] .mobile-nav button.active{background:#ecdaca;color:#613c26}
html[data-theme="light"] .network-progress-card{
  background:radial-gradient(ellipse at 50% 15%,rgba(178,115,74,.12),transparent 55%),linear-gradient(155deg,#fffcf8,#f3ede6)
}
html[data-theme="light"] .network-progress .network-wait{color:#846d5a}
html[data-theme="light"] .network-progress .build-credit{color:#94603f}
@media(max-width:1050px){.hero-logo img{max-height:290px}}
@media(max-width:760px){
  .hero-logo img{max-height:225px;width:min(100%,320px)}
  .hero::after{width:115px;height:115px;top:-10px}
  .brand-mini{padding-bottom:17px}
  .network-progress-card{max-width:340px}
}
@media(max-width:390px){.hero-logo img{max-height:186px;width:min(100%,268px)}}
@media(prefers-reduced-motion:reduce){.network-orbit{filter:none}}

/* Retain the original artwork as the hero: no oversized duplicate wordmark behind copy. */
.brand-side::before{background:url('/barrel-grain.webp') left top/290px 264px repeat;opacity:.075;filter:none}
.brand-side::after{opacity:.42}

/* Compact copper barrel status for festive-order list loading. */
.barrel-inline-loader{display:flex;align-items:center;justify-content:center;gap:13px;min-height:92px;color:var(--muted);font-size:12px}
.barrel-inline-emblem{display:grid;place-items:center;position:relative;width:58px;height:58px;flex:none}
.barrel-inline-emblem img{width:49px;height:49px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(194,128,82,.18))}
.barrel-inline-emblem::after{content:"";position:absolute;inset:0;border:2px solid transparent;border-top-color:#d89b71;border-radius:50%;animation:barrelOrbit 2.8s linear infinite;pointer-events:none}
@media(prefers-reduced-motion:reduce){.barrel-inline-emblem::after{animation:none}}


/* ============================================================
   v2.2.21 — RESTORED BARREL OPS PRODUCT WORDMARK
   Purely visual; no existing loaders, handlers, API calls or
   authentication logic altered. Original copper animation retained.
   ============================================================ */
.network-progress-copy{gap:7px}
.network-kicker{
  display:flex;align-items:center;justify-content:center;gap:13px;
  width:100%;margin:4px auto 0;color:#ead8c3;
  font-size:inherit;line-height:1.15;letter-spacing:normal;
  font-family:Georgia,"Times New Roman",serif;
}
.network-word-barrel{
  color:#e7d3bb;font-family:Georgia,"Times New Roman",serif;
  font-size:28px;letter-spacing:.185em;font-weight:500;
  text-shadow:0 2px 18px rgba(223,148,91,.15);
}
.network-word-ops{
  color:#e8b38c;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12px;font-weight:800;letter-spacing:.17em;
  border:1px solid rgba(196,131,86,.40);border-radius:5px;
  padding:5px 6px 4px;background:rgba(174,99,55,.11);
}
.network-progress-label{font-size:19px;line-height:1.3}
.boot-product-wordmark{
  display:flex;align-items:center;justify-content:center;gap:11px;
  margin:0!important;color:#e9d6bf;font-family:Georgia,"Times New Roman",serif;
  font-size:27px!important;font-weight:500;letter-spacing:.13em;line-height:1.25;
}
.boot-product-wordmark b{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.14em;color:#e5b58c;
  border:1px solid rgba(196,131,86,.36);border-radius:4px;padding:4px 6px;
}
.login-product-wordmark{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  color:#ead7c0;font-family:Georgia,"Times New Roman",serif;
  font-size:27px;letter-spacing:.14em;line-height:1.2;white-space:nowrap;
}
.login-product-wordmark span{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12px;font-weight:800;letter-spacing:.14em;color:#e9b487;
  border:1px solid rgba(192,126,77,.38);padding:4px 6px;border-radius:5px;
  background:rgba(159,93,55,.09)
}
html[data-theme="light"] .network-word-barrel{color:#442d1f;text-shadow:none}
html[data-theme="light"] .network-word-ops{color:#895237}
/* Loading surfaces remain dark for legibility in both themes. */
html[data-theme="light"] .boot-product-wordmark{color:#ead6bb}
@media(max-width:520px){
  .network-kicker{gap:10px}
  .network-word-barrel{font-size:25px;letter-spacing:.13em}
  .network-word-ops{font-size:11px}
  .login-product-wordmark{font-size:23px;gap:9px;margin-bottom:12px}
  .boot-product-wordmark{font-size:23px!important;gap:9px}
}
/* Light-mode contrast: product name must be as visible as in dark mode. */
html[data-theme="light"] .login-product-wordmark{color:#513522}
html[data-theme="light"] .login-product-wordmark span{color:#8c512e;border-color:rgba(151,86,47,.42);background:rgba(179,109,66,.06)}


/* ============================================================
   v2.2.22 — ACTION-REQUIRED ATTENTION PULSES
   Pure visual states: existing messages/incident API and handlers
   control when the classes appear or disappear. Zero = no flash.
   ============================================================ */
/* Inbox buttons are only rendered while server-confirmed action is
   pending: unread message or unacknowledged Important message. */
.msg-action-pulse:not(:disabled){
  animation:barrelActionRequired 1.9s ease-in-out infinite;
}
.msg-action-read{border-color:#b58a66!important}
.msg-action-ack{animation-delay:-.65s!important;animation-duration:1.7s!important}
@keyframes barrelActionRequired{
  0%,100%{box-shadow:0 0 0 0 rgba(190,127,80,0),0 0 0 rgba(195,125,73,0)}
  50%{box-shadow:0 0 0 4px rgba(197,133,87,.26),0 0 20px rgba(220,145,91,.42)}
}
/* Only manager/admin Live Operations counters above zero pulse.
   Animating opacity and glow avoids number movement or reflow. */
.live-attention-pulse{
  display:inline-block;
  animation:barrelAttentionNumber 1.65s ease-in-out infinite;
}
@keyframes barrelAttentionNumber{
  0%,100%{opacity:1;text-shadow:0 0 0 rgba(240,113,103,0)}
  50%{opacity:.55;text-shadow:0 0 15px rgba(240,113,103,.62)}
}
/* High visibility, light or dark, without covering labels or numbers. */
html[data-theme="light"] .msg-action-read{border-color:#a76c48!important}
html[data-theme="light"] .live-attention-pulse{color:#ae392f}
/* Accessibility: retain a static warning color and focus outline. */
@media(prefers-reduced-motion:reduce){
  .msg-action-pulse:not(:disabled),.live-attention-pulse{animation:none!important}
  .msg-action-pulse:not(:disabled){box-shadow:0 0 0 2px rgba(197,133,87,.45)}
  .live-attention-pulse{text-shadow:0 0 0 rgba(0,0,0,0)}
}


/* ================================================================
   Barrel Ops v2.2.23 — RED NAVIGATION DOTS + HIGH-VISIBILITY PANELS
   Desktop side navigation and horizontally scrollable mobile bottom
   navigation share the same action-required alert state.
   ================================================================ */
/* Respect the existing alert count badge; the new dot lives ON THE ICON. */
.nav button .ico{position:relative;display:inline-flex;flex:0 0 22px;align-items:center;justify-content:center}
.mobile-nav button{position:relative}
.mobile-nav button .mobile-nav-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:23px;width:max-content;max-width:30px;margin:0 auto 3px;font-size:16px;line-height:1.25}
.nav-attention-dot,.stat-alert-dot{
  width:10px;height:10px;border-radius:50%;background:#ff394a;
  border:1px solid rgba(255,236,235,.95);
  box-shadow:0 0 0 2px rgba(207,33,48,.27),0 0 11px rgba(255,44,59,.62);
  animation:barrelAlertDotPulse 1.05s ease-in-out infinite;
  pointer-events:none;
}
.nav-attention-dot{position:absolute;top:-7px;right:-8px;z-index:2}
.mobile-nav .nav-attention-dot{top:-5px;left:-9px;right:auto;width:9px;height:9px}
@keyframes barrelAlertDotPulse{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 2px rgba(228,32,50,.20),0 0 8px rgba(255,49,65,.6)}
  48%{opacity:.58;transform:scale(1.23);box-shadow:0 0 0 5px rgba(229,43,55,.25),0 0 20px rgba(255,45,59,.95)}
}
/* Faster, brighter RED outline/halo on only the nonzero cards. */
.card.stat.stat-attention-alert{position:relative;border-color:rgba(246,66,75,.62)}
.card.stat.stat-attention-alert::after{
  content:"";position:absolute;inset:-1px;border:2px solid rgba(255,63,76,.85);
  border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,42,60,.12),0 0 25px rgba(234,34,51,.34),inset 0 0 16px rgba(229,38,55,.09);
  animation:barrelPanelWarningPulse 1.12s ease-in-out infinite;
}
.card.stat .stat-alert-dot{position:absolute;top:20px;right:22px;z-index:1}
.card.stat.stat-attention-alert .value{color:#fb6164}
@keyframes barrelPanelWarningPulse{
  0%,100%{opacity:.96}
  50%{opacity:.18}
}
.live-attention-pulse{animation-duration:1.12s}
/* Light theme: preserve contrast while matching the copper branding. */
html[data-theme="light"] .card.stat.stat-attention-alert{border-color:rgba(207,50,60,.52)}
html[data-theme="light"] .card.stat.stat-attention-alert .value{color:#b92637}
/* The existing message action buttons also become slightly quicker. */
.msg-action-read:not(:disabled){animation-duration:1.35s}
.msg-action-ack:not(:disabled){animation-duration:1.15s!important}
@media(prefers-reduced-motion:reduce){
  .nav-attention-dot,.stat-alert-dot,.card.stat.stat-attention-alert::after{animation:none!important}
  .card.stat.stat-attention-alert::after{opacity:.85}
  .nav-attention-dot,.stat-alert-dot{transform:none;box-shadow:0 0 0 2px rgba(228,32,50,.22)}
}

/* v2.2.26 — Barrel Data Pour (scoped to existing network overlay).
   Animation is composited CSS/SVG; no network, video, canvas or dependencies. */
.network-progress.barrel-pour{
  display:flex;justify-content:center;align-items:center;
  background:radial-gradient(ellipse 48% 53% at 50% 35%,rgba(94,49,27,.30),transparent 75%),
   #0e0c0b!important;
  backdrop-filter:none!important;overflow:hidden;
  padding:max(12px,env(safe-area-inset-top,0px)) 14px max(12px,env(safe-area-inset-bottom,0px));
  transition:opacity .25s ease,visibility 0s linear .25s;
}
.network-progress.barrel-pour.visible{transition:opacity .22s ease;}
.network-progress.barrel-pour::before{
  content:'';position:absolute;inset:15px;border:1px solid rgba(181,121,83,.10);
  pointer-events:none;border-radius:8px;
}
.network-progress .barrel-pour-view{
  box-sizing:border-box;position:relative;display:flex;align-items:center;flex-direction:column;
  width:min(650px,100%);min-width:0;padding:13px 20px 16px;z-index:1;
  color:#f1e8df;text-align:center;font-family:Inter,ui-sans-serif,'Segoe UI',Arial,sans-serif;
}
.network-progress .barrel-pour-eyebrow{font-size:10px;letter-spacing:.31em;font-weight:700;color:#c59a78;}
.network-progress .barrel-pour-eyebrow span{margin:0 9px;}
.network-progress .barrel-pour-stage{
  position:relative;isolation:isolate;width:560px;max-width:100%;height:354px;margin-top:7px;
}
.network-progress .barrel-pour-emblem{
  position:absolute;left:calc(50% - 110px);top:1px;width:220px;height:220px;z-index:2;
}
.network-progress .barrel-pour-emblem::before{
  content:'';position:absolute;inset:-35px;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(198,116,64,.13),transparent 63%);
}
.network-progress .barrel-pour-emblem svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 14px rgba(175,100,58,.17))}
.network-progress .barrel-pour-emblem .tap-lever{
  transform-origin:119px 132px;transform-box:view-box;
}
.network-progress.barrel-pour.pour-playing .tap-lever{
  animation:barrelDataTapOpen .44s cubic-bezier(.2,.72,.22,1) .06s both;
}
.network-progress.barrel-pour.pour-ready .tap-lever{
  animation:barrelDataTapClose .48s cubic-bezier(.2,.68,.2,1) both;
}
@keyframes barrelDataTapOpen{0%{transform:rotate(0deg)}44%{transform:rotate(17deg)}68%{transform:rotate(25deg)}83%{transform:rotate(17deg)}100%{transform:rotate(19deg)}}
@keyframes barrelDataTapClose{0%{transform:rotate(19deg)}56%{transform:rotate(-3deg)}78%{transform:rotate(1.5deg)}100%{transform:rotate(0deg)}}
.network-progress .barrel-pour-flare{
  position:absolute;width:18px;height:4px;left:calc(49.375% - 9px);top:90%;
  border-radius:100%;background:#ffdb99;box-shadow:0 0 10px 3px rgba(232,131,61,.40);opacity:0;
}
.network-progress.barrel-pour.pour-pouring .barrel-pour-flare{animation:barrelDataFlare 1.2s ease-in-out infinite}
@keyframes barrelDataFlare{0%,100%{opacity:.32}50%{opacity:1}}
/* Outlet of the approved SVG is near x=118.5,y=211 in a 240x240 viewBox;
   lane begins at x=~118.5,y=217 in the 220px scaled emblem. */
.network-progress .barrel-pour-stream{
  position:absolute;top:199px;left:calc(50% - 19px);width:38px;height:90px;
  z-index:5;opacity:0;transition:opacity .14s;pointer-events:none;
}
.network-progress.barrel-pour.pour-pouring .barrel-pour-stream{opacity:1}
.network-progress .barrel-pour-core{
  position:absolute;left:17px;top:0;width:3px;height:87px;border-radius:10px;
  background:linear-gradient(#fff0c8,#f7be7e 9%,rgba(208,113,58,.8) 60%,transparent 100%);
  box-shadow:0 0 10px rgba(226,128,69,.46);transform-origin:top;transform:scaleY(0);
}
.network-progress.barrel-pour.pour-pouring .barrel-pour-core{animation:barrelDataStreamCome .25s ease-out both}
@keyframes barrelDataStreamCome{to{transform:scaleY(1)}}
.network-progress .barrel-pour-core::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,transparent 0 9px,rgba(17,11,7,.7) 10px 13px);
  animation:none;
}
.network-progress.barrel-pour.pour-pouring .barrel-pour-core::after{animation:barrelDataScan .22s linear infinite}
@keyframes barrelDataScan{to{background-position-y:26px}}
.network-progress .barrel-pour-particle{
  position:absolute;top:0;left:calc(17px + var(--px));width:4px;height:9px;
  background:#f2b77c;box-shadow:0 0 9px rgba(253,176,99,.63);border-radius:1px;opacity:0;
  animation:none;
}
.network-progress.barrel-pour.pour-pouring .barrel-pour-particle{
  animation:barrelDataParticle var(--duration,900ms) linear infinite;
  animation-delay:var(--delay,0ms);
}
.network-progress .barrel-pour-particle:nth-child(3n){width:2px;height:3px;background:#fff0c8}
@keyframes barrelDataParticle{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.96}79%{opacity:.85}
  100%{transform:translate3d(calc(var(--px) * -1.3),84px,0);opacity:0}
}
.network-progress .barrel-pour-reservoir{
  position:absolute;z-index:4;left:50%;transform:translateX(-50%);
  top:287px;width:444px;max-width:calc(100% - 18px);text-align:left;
}
.network-progress .barrel-pour-track{
  box-sizing:border-box;position:relative;border:1px solid rgba(183,116,74,.68);
  background:linear-gradient(180deg,rgba(23,16,13,.9),rgba(25,17,14,.93));
  height:39px;padding:5px;border-radius:8px;box-shadow:0 0 30px rgba(152,87,50,.12),inset 0 0 12px #0008;
  overflow:hidden;
}
.network-progress .barrel-pour-track::before{
  content:'';position:absolute;inset:6px;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(238,193,152,.11) 12px 14px);
}
.network-progress #network-progress-bar.barrel-pour-fill{
  position:relative;width:100%;height:100%;border-radius:3px;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,#8d4f32,#d18d5b 50%,#f2c18b);
  box-shadow:0 0 16px rgba(242,183,109,.45);transition:transform .12s linear;
}
.network-progress .barrel-pour-fill::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:7px;background:#ffedbf;
  box-shadow:0 0 12px 4px rgba(248,189,112,.59);
}
.network-progress .barrel-pour-readout{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 4px 0;font:10px/1.2 Consolas,ui-monospace,monospace;
  color:#c99b72;letter-spacing:.13em;
}
.network-progress .barrel-pour-readout strong{font-size:12px;color:#f7ddbf;font-variant-numeric:tabular-nums}
.network-progress .barrel-pour-impact{
  position:absolute;width:45px;height:18px;left:calc(50% - 23px);top:282px;z-index:6;opacity:0;pointer-events:none;
}
.network-progress.barrel-pour.pour-pouring .barrel-pour-impact{animation:barrelDataImpact .75s ease-out infinite}
.network-progress .barrel-pour-impact::before{
  content:'';position:absolute;inset:0;border:1px solid rgba(246,184,120,.72);border-radius:50%;
}
@keyframes barrelDataImpact{0%{opacity:0;transform:scale(.3)}30%{opacity:.8}100%{opacity:0;transform:scale(1.35)}}
.network-progress .barrel-pour-wordmark{
  margin-top:0;font-size:28px;line-height:1.2;letter-spacing:.28em;padding-left:.28em;
  font-weight:650;color:#f3e6d9;font-family:Inter,ui-sans-serif,'Segoe UI',sans-serif;
}
.network-progress .barrel-pour-wordmark em{font-style:normal;font-size:13px;letter-spacing:.17em;color:#d29a6e;margin-left:3px}
.network-progress .barrel-pour-tagline{font-size:16px;font-weight:650;margin-top:15px;color:#f5d9bd;line-height:1.4}
.network-progress .barrel-pour-status{font:12px/1.5 Inter,ui-sans-serif,'Segoe UI',sans-serif;color:#b49c8b;min-height:18px;margin-top:8px;}
.network-progress .barrel-pour-signals{
  margin:27px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(535px,100%);gap:10px;
}
.network-progress .barrel-pour-signal{
  border:1px solid #65402c;border-radius:7px;padding:11px 6px;
  background:linear-gradient(160deg,#261b16,#17120f);color:#856d60;
  opacity:.34;transition:opacity .35s,border-color .35s,background-color .35s;
  font-size:10px;letter-spacing:.15em;font-weight:800;
}
.network-progress .barrel-pour-signal.online{border-color:#ac744f;background:#38261b;color:#f1c292;opacity:1}
.network-progress .barrel-pour-view .build-credit{color:#ae856c;font-size:10px;margin-top:23px!important}
.network-progress.barrel-pour.pour-ready .barrel-pour-reservoir .barrel-pour-track{box-shadow:0 0 30px rgba(235,158,94,.30)}
.network-progress.barrel-pour.failed .barrel-pour-track{border-color:#e3635d}
.network-progress.barrel-pour.failed #network-progress-bar{background:linear-gradient(90deg,#7a342f,#ee7469)}
.network-progress.barrel-pour.failed .barrel-pour-status{color:#f4b1a6}
@media(max-width:760px){
  .network-progress.barrel-pour::before{inset:10px}
  .network-progress .barrel-pour-view{padding:10px 12px}
  .network-progress .barrel-pour-eyebrow{font-size:9px;letter-spacing:.18em}
  .network-progress .barrel-pour-stage{width:355px;height:286px;margin-top:8px}
  .network-progress .barrel-pour-emblem{width:180px;height:180px;left:calc(50% - 90px);top:1px}
  .network-progress .barrel-pour-stream{top:163px;left:calc(50% - 19px);height:60px}
  .network-progress .barrel-pour-core{height:59px}
  .network-progress .barrel-pour-reservoir{top:223px;width:300px}
  .network-progress .barrel-pour-track{height:35px}
  .network-progress .barrel-pour-impact{top:218px}
  .network-progress .barrel-pour-particle{animation-name:barrelDataParticleMobile}
  .network-progress .barrel-pour-wordmark{font-size:23px}
  .network-progress .barrel-pour-wordmark em{font-size:10px}
  .network-progress .barrel-pour-tagline{font-size:14px;margin-top:12px}
  .network-progress .barrel-pour-signals{gap:6px;margin-top:21px}
  .network-progress .barrel-pour-signal{font-size:8px;padding:10px 4px;letter-spacing:.05em}
  .network-progress .barrel-pour-view .build-credit{margin-top:18px!important}
}
@keyframes barrelDataParticleMobile{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.96}79%{opacity:.85}100%{transform:translate3d(calc(var(--px) * -1.3),56px,0);opacity:0}}
@media(max-height:640px){
  .network-progress .barrel-pour-view{transform:scale(.76)}
}
@media(prefers-reduced-motion:reduce){
  .network-progress.barrel-pour,.network-progress .barrel-pour-fill,.network-progress .barrel-pour-signal{transition:none!important}
  .network-progress .barrel-pour-emblem .tap-lever,.network-progress .barrel-pour-flare,
  .network-progress .barrel-pour-core,.network-progress .barrel-pour-particle,
  .network-progress .barrel-pour-impact{animation:none!important}
  .network-progress .barrel-pour-stream{display:none!important}
}

/* Responsive hero watermark: retain the brand mark without masking mobile copy. */
@media(max-width:760px){
  .hero::after{width:96px;height:96px;right:0;top:-7px;opacity:.23}
  html[data-theme="light"] .hero::after{opacity:.19}
}


/* Barrel Ops 2.2.30 - contained animated wordmark watermark. The underlying emblem is static.
   Three BARREL OPS inscriptions turn smoothly around its outer edge once / 45s.
   This uses only composited CSS transform, no recurring JavaScript or network calls. */
.hero{isolation:isolate}
.hero::before{
  content:"";
  position:absolute;
  top:-36px;
  right:20px;
  width:198px;
  height:198px;
  background:url('/barrel-ops-orbit-dark.svg') center / contain no-repeat;
  opacity:.82;
  pointer-events:none;
  z-index:0;
  transform-origin:50% 50%;
  animation:barrelOpsWatermarkOrbit 45s linear infinite;
}
/* Keep the existing Barrel emblem motionless inside the text ring. */
.hero::after{
  z-index:0;
  width:166px;
  height:166px;
  top:-20px;
  right:36px;
}
.hero > *{position:relative;z-index:1}
@keyframes barrelOpsWatermarkOrbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
html[data-theme="light"] .hero::before{
  background-image:url('/barrel-ops-orbit-light.svg');
  opacity:.70;
}
@media(max-width:760px){
  /* Keep the small-screen emblem clear of text and operational controls. */
  .hero::before{display:none}
  .hero::after{width:96px;height:96px;right:0;top:-10px}
}
@media(prefers-reduced-motion:reduce){
  .hero::before{animation:none!important;transform:none!important}
}

/* Barrel Ops v2.2.31 — responsive incident history (dark/light themes). */
.incident-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 20px;max-width:100%}
.incident-tabs .btn{min-width:0;max-width:100%;white-space:normal}
.incident-staff-history{margin-top:20px;min-width:0}
.incident-history-panel{min-width:0;overflow-wrap:anywhere}
.incident-history-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px;align-items:end;min-width:0}
.incident-history-form .field{min-width:0;margin:0}
.incident-history-form .field input,.incident-history-form .field select{max-width:100%;min-width:0;width:100%;box-sizing:border-box}
.incident-history-filter-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:end;min-width:0}
.incident-history-list{min-width:0}
.incident-history-row{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--border,rgba(150,150,150,.2));min-width:0}
.incident-history-row:last-child{border-bottom:0}
.incident-history-main{flex:1;min-width:0;overflow-wrap:anywhere}
.incident-history-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.incident-history-main small{display:block;margin:5px 0;opacity:.8}
.incident-history-main p{margin:6px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.incident-history-pages{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:18px}
.incident-detail-line{display:grid;grid-template-columns:minmax(105px,35%) 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--border,rgba(150,150,150,.2));overflow-wrap:anywhere}
.incident-detail-description{margin-top:16px;overflow-wrap:anywhere}
.incident-detail-description p{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:600px){.incident-tabs .btn{flex:1}.incident-history-row{align-items:flex-start;flex-direction:column}.incident-history-filter-actions{grid-column:1/-1}.incident-history-pages .actions{display:flex;gap:8px}.incident-detail-line{grid-template-columns:1fr;gap:3px}}


/* 2.2.32 — Next Shift Notes. Electric Cyan is reserved for FOH briefing only. */
:root{--shift-cyan:#22d3ee;--shift-cyan-text:#67e8f9}
.shift-note-heading{color:var(--shift-cyan-text)}
.shift-note-dot,.nav-attention-dot.shift-note-dot{background:var(--shift-cyan)!important;
  box-shadow:0 0 0 3px rgba(34,211,238,.16),0 0 12px rgba(34,211,238,.58)!important;
  animation:shift-note-breathe 3s ease-in-out infinite!important}
.shift-note-alert{display:flex;align-items:center;gap:14px;padding:15px 17px;margin-bottom:16px;
  background:linear-gradient(95deg,rgba(34,211,238,.12),rgba(34,211,238,.028));
  border:1px solid rgba(34,211,238,.53);border-radius:16px;
  box-shadow:0 0 24px rgba(34,211,238,.08);min-width:0}
.shift-note-alert>div{min-width:0;flex:1}
.shift-note-alert strong{color:var(--shift-cyan-text);font-size:13px}
.shift-note-alert small{display:block;color:var(--text);opacity:.83;font-size:11px;margin-top:4px;line-height:1.45;overflow-wrap:anywhere}
.shift-note-glow-dot,.shift-note-card-dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--shift-cyan);
  box-shadow:0 0 0 4px rgba(34,211,238,.13),0 0 14px rgba(34,211,238,.55)}
.shift-note-glow-dot{animation:shift-note-breathe 3s ease-in-out infinite}
.btn.shift-note-button{color:#072c37!important;border:1px solid #22d3ee!important;background:var(--shift-cyan)!important;white-space:normal}
.btn.shift-note-button:hover{filter:brightness(1.06)}
.shift-note-compose{border-color:rgba(34,211,238,.37);box-shadow:0 0 26px rgba(34,211,238,.045)}
.shift-note-compose textarea{min-height:95px;resize:vertical}
.shift-note-compose-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:15px}
.shift-note-compose-footer .help{flex:1;min-width:180px}
.shift-note-stack{display:grid;gap:10px}
.shift-note-card{min-width:0;display:flex;align-items:flex-start;gap:12px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:15px;overflow-wrap:anywhere}
.shift-note-card.shift-note-unread{border-color:rgba(34,211,238,.56);
  background:linear-gradient(100deg,rgba(34,211,238,.075),var(--panel));
  box-shadow:0 0 15px rgba(34,211,238,.055)}
.shift-note-card-dot{margin-top:5px;width:7px;height:7px;box-shadow:none;opacity:.55}
.shift-note-unread .shift-note-card-dot{opacity:1;box-shadow:0 0 9px rgba(34,211,238,.6)}
.shift-note-copy{flex:1;min-width:0}
.shift-note-copy p{margin:0 0 8px;font-size:12px;line-height:1.65;white-space:pre-wrap}
.shift-note-copy small{color:var(--muted);font-size:10px}
.shift-note-card-action{flex:none;align-self:center}
.shift-note-seen{font-size:10px;color:var(--muted)}
@keyframes shift-note-breathe{0%,100%{opacity:.72;box-shadow:0 0 0 3px rgba(34,211,238,.12),0 0 7px rgba(34,211,238,.24)}
  50%{opacity:1;box-shadow:0 0 0 4px rgba(34,211,238,.22),0 0 15px rgba(34,211,238,.65)}}
html[data-theme="light"] .shift-note-alert{background:linear-gradient(95deg,rgba(34,211,238,.095),rgba(255,255,255,.94));border-color:rgba(8,145,178,.52)}
html[data-theme="light"] .shift-note-alert strong,html[data-theme="light"] .shift-note-heading{color:#087e98}
html[data-theme="light"] .shift-note-card{background:#fffdf9}
html[data-theme="light"] .shift-note-card.shift-note-unread{background:linear-gradient(100deg,rgba(34,211,238,.1),#fffdf9)}
html[data-theme="light"] .shift-note-compose{border-color:rgba(8,145,178,.42)}
@media(max-width:760px){.shift-note-alert{flex-wrap:wrap}.shift-note-alert .shift-note-button{margin-left:auto}
  .shift-note-card{flex-wrap:wrap}.shift-note-card-action{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.shift-note-glow-dot,.nav-attention-dot.shift-note-dot{animation:none!important}}

@media(max-width:760px){.mobile-nav button{min-width:0;overflow-wrap:anywhere}.mobile-nav{max-width:calc(100vw - 20px)}}
/* All ten mobile menu buttons remain visible without a sideways scrollbar. */
@media(max-width:760px){
  .mobile-nav{grid-auto-columns:minmax(0,1fr);width:auto}
  .mobile-nav button{min-width:0;padding:7px 1px;font-size:8px;line-height:1.18;overflow-wrap:anywhere}
}

/* Compact mobile bottom bar and accessible More sheet. No missing modules. */
.mobile-more-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.mobile-more-item{display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left;min-width:0;position:relative}
.mobile-more-item>span{font-size:20px;color:var(--accent)}
.mobile-more-alert{margin-left:auto;color:var(--red);font-size:20px}
@media(max-width:760px){.mobile-nav{grid-auto-columns:minmax(0,1fr);gap:4px}
.mobile-nav button{font-size:10px;padding:8px 4px;overflow-wrap:normal}}

/* Barrel Ops 2.2.35 — balanced desktop navigation, full-size readable labels.
   The ten navigation items share the free height.  Never shrink the labels
   simply to create vertical space; reserve space for the header and account.
   A small-height fallback reduces row padding before font size, without
   introducing a second scrollbar.  Mobile styles are untouched. */
@media (min-width:761px) {
  .sidebar {
    height:100vh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
    padding:clamp(9px,1.35dvh,15px) 15px clamp(8px,1.2dvh,13px);
  }
  .sidebar .brand-mini {
    flex:0 0 auto;
    margin:0;
    padding:0 7px clamp(10px,1.5dvh,16px);
    min-width:0;
  }
  .sidebar .brand-mini img {width:51px;height:51px}
  .sidebar .brand-mini .brand-copy strong {font-size:17px}
  .sidebar .brand-mini .brand-copy small {font-size:9px}
  .sidebar .nav {
    display:flex;
    flex:1 1 0;
    flex-direction:column;
    justify-content:space-evenly;
    min-height:0;
    gap:0;
    margin:0;
    overflow:hidden;
  }
  .sidebar .nav button,
  .sidebar .nav button.active {
    display:flex;
    flex:0 0 auto;
    width:100%;
    min-height:44px;
    padding:10px 12px;
    font-size:17px;
    line-height:1.25;
    font-weight:700;
    gap:11px;
    border-radius:12px;
  }
  .sidebar .nav .ico {width:22px;flex:0 0 22px}
  .sidebar .user-chip {
    flex:0 0 auto;
    margin-top:0;
    min-width:0;
    padding:clamp(10px,1.3dvh,14px) 7px 3px;
    gap:10px;
  }
  .sidebar .avatar {width:38px;height:38px;flex:0 0 38px;font-size:13px}
  .sidebar .user-chip > div:nth-child(2) {flex:1 1 auto;min-width:0}
  .sidebar .user-chip strong {font-size:13px}
  .sidebar .user-chip strong,
  .sidebar .user-chip small {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sidebar .logout-btn {flex:0 0 auto;padding:2px;font-size:19px}
}
/* On short laptop windows tighten the spacing before reducing type. */
@media (min-width:761px) and (max-height:690px) {
  .sidebar {padding-top:7px;padding-bottom:7px}
  .sidebar .brand-mini {padding-bottom:7px}
  .sidebar .brand-mini img {width:43px;height:43px}
  .sidebar .nav button,
  .sidebar .nav button.active {min-height:36px;padding:6px 10px;font-size:16px}
  .sidebar .user-chip {padding-top:7px}
  .sidebar .avatar {width:32px;height:32px;flex-basis:32px}
}
@media (min-width:761px) and (max-height:540px) {
  .sidebar .brand-mini img {width:35px;height:35px}
  .sidebar .brand-mini {padding-bottom:4px}
  .sidebar .nav button,
  .sidebar .nav button.active {min-height:29px;padding:4px 8px;font-size:14px;gap:8px}
  .sidebar .user-chip {padding-top:5px}
  .sidebar .avatar {width:28px;height:28px;flex-basis:28px}
}


/* ===============================================================
   v2.2.36 — PREVIEW ONLY: alert animation composition experiment.
   Source v2.2.35 unchanged except this opt-in visual concession:
   red attention numbers and standard red alert dots now switch
   instantly between their exact original 0%-frame ON appearance
   and fully transparent OFF state. Existing durations remain.
   No DOM, layout, API, watermark, theme, or other animation edits.
   Special cyan shift-note indicators retain their original pulse.
   Reduced-motion behavior retains its pre-existing rules.
   =============================================================== */
@keyframes barrelAlertBinaryOpacity {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .nav-attention-dot:not(.shift-note-dot), .stat-alert-dot {
    /* Exact on-frame box-shadow from original barrelAlertDotPulse at 0%. */
    box-shadow:0 0 0 2px rgba(228,32,50,.20),0 0 8px rgba(255,49,65,.6);
    animation-name:barrelAlertBinaryOpacity;
    animation-timing-function:steps(1,end);
  }
  .live-attention-pulse {
    /* Exact on-frame text-shadow from original barrelAttentionNumber at 0%. */
    text-shadow:0 0 0 rgba(240,113,103,0);
    animation-name:barrelAlertBinaryOpacity;
    animation-timing-function:steps(1,end);
  }
}


/* ==========================================================
   v2.2.37 -- PREVIEW ONLY: synchronized compositor-only halo.
   The original alert-frame glow and red outline live on ::after;
   they now blink in step with red dots at exactly 1.05 seconds.
   Underlying card border is always the original normal-card color.
   NO animated border color, shadow, filter or layout property.
   Card text/content stays continuously visible.
   ========================================================== */
@keyframes barrelAlertFrameHaloBinary {
  0%, 100% { opacity: .96; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .card.stat.stat-attention-alert {
    border-color: rgba(182,130,94,.21);
  }
  html[data-theme="light"] .card.stat.stat-attention-alert {
    border-color: #e7d7ca;
  }
  .card.stat.stat-attention-alert::after {
    animation: barrelAlertFrameHaloBinary 1.05s steps(1,end) infinite;
  }
}


/* ======================================================================
   v2.2.38 — ELECTRIC CYAN NEXT SHIFT NOTES: SYNCHRONIZED ALERT FLASH.
   Only unread-note indicators are affected. Preserve the exact original
   cyan color, button, bar background, spacing, typography and glow ON state.
   Freeze shadows, and animate opacity ONLY to prevent per-frame repaint.
   The same 1.05s stepped blink governs sidebar/mobile dot, banner dot,
   and banner outline; note-card contents never flash or disappear.
   ====================================================================== */
@keyframes barrelShiftNoteCyanBinary {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Keep the existing bar layout and background; blink only its frame. */
  .shift-note-alert {
    position: relative;
    border-color: transparent;
    box-shadow: none;
  }
  .shift-note-alert::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(34,211,238,.53);
    border-radius: inherit;
    box-shadow: 0 0 24px rgba(34,211,238,.08);
    pointer-events: none;
    animation: barrelShiftNoteCyanBinary 1.05s steps(1,end) infinite;
  }
  html[data-theme="light"] .shift-note-alert::after {
    border-color: rgba(8,145,178,.52);
  }
  /* Bar dot: retain the original full-bright cyan and static halo. */
  .shift-note-glow-dot {
    box-shadow: 0 0 0 4px rgba(34,211,238,.13),0 0 14px rgba(34,211,238,.55);
    animation: barrelShiftNoteCyanBinary 1.05s steps(1,end) infinite;
  }
  /* Sidebar/mobile dot: override the earlier 3-second breathing pulse. */
  .shift-note-dot, .nav-attention-dot.shift-note-dot {
    box-shadow: 0 0 0 3px rgba(34,211,238,.16),0 0 12px rgba(34,211,238,.58)!important;
    animation: barrelShiftNoteCyanBinary 1.05s steps(1,end) infinite!important;
  }
}
/* Accessibility: when reduced motion is requested, retain the original
   steady appearance without any blinking. */