/* Sigma OS Calendar Step 1 — reference shell + KPI treatment. Presentation only; preserves calendar logic. */
#body:has(.calendar-head){--cal-red:#d92f50;--cal-ink:#172033;--cal-copy:#4f5b6a;--cal-muted:#697586;--cal-border:#e3e8ef;--cal-soft:#f7f9fb;background:#fff!important;color:var(--cal-ink)!important;padding:18px 22px 28px!important;overflow-anchor:none!important}
#body:has(.calendar-head)>.toolbar{min-height:190px!important;margin:0 0 14px!important;padding:28px 32px!important;border:1px solid var(--cal-border)!important;border-radius:22px!important;background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.91) 42%,rgba(245,247,250,.62) 68%,rgba(20,27,38,.10) 100%),url('/porsche-911-race-car.png?v=20260918-2') right 46% center/47% auto no-repeat!important;box-shadow:0 10px 34px rgba(22,32,48,.06)!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important;overflow:hidden!important;position:relative!important}
#body:has(.calendar-head)>.toolbar:before{content:'Workshop Booking Calendar';position:absolute;left:32px;top:48px;max-width:650px;font-size:42px;line-height:1.02;font-weight:760;letter-spacing:-.045em;color:#111827;pointer-events:none}
#body:has(.calendar-head)>.toolbar:after{content:'Plan capacity with confidence · Manage bookings, workshop allocation and your team workload in one place.';position:absolute;left:34px;top:102px;max-width:620px;font-size:15px;line-height:1.55;font-weight:480;color:#596577;pointer-events:none}
#body:has(.calendar-head)>.toolbar>div{position:relative;z-index:2;margin-left:auto!important;align-self:flex-end!important;display:flex!important;gap:9px!important}
#body:has(.calendar-head)>.toolbar .btn{min-height:42px!important;padding:0 16px!important;border:1px solid rgba(255,255,255,.56)!important;border-radius:13px!important;background:rgba(255,255,255,.78)!important;color:#263244!important;font-size:14px!important;font-weight:650!important;box-shadow:0 6px 20px rgba(15,23,42,.08)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
#body:has(.calendar-head)>.toolbar .btn.red{background:var(--cal-red)!important;border-color:var(--cal-red)!important;color:#fff!important;box-shadow:0 8px 22px rgba(217,47,80,.16)!important}
#body:has(.calendar-head)>.kpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;margin:0 0 14px!important}
#body:has(.calendar-head)>.kpis .kpi{min-height:112px!important;padding:19px 20px 18px 76px!important;border:1px solid var(--cal-border)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 5px 18px rgba(23,32,51,.045)!important;position:relative!important;justify-content:center!important;overflow:hidden!important}
#body:has(.calendar-head)>.kpis .kpi:before{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#f9e7eb;color:#c92a48;font-size:19px;font-weight:750;border:1px solid #f0d5dc}
#body:has(.calendar-head)>.kpis .kpi:nth-child(1):before{content:'B'}#body:has(.calendar-head)>.kpis .kpi:nth-child(2):before{content:'S'}#body:has(.calendar-head)>.kpis .kpi:nth-child(3):before{content:'✓'}#body:has(.calendar-head)>.kpis .kpi:nth-child(4):before{content:'D'}
#body:has(.calendar-head)>.kpis .kpi small{font-size:15px!important;line-height:1.25!important;color:var(--cal-copy)!important;font-weight:520!important;letter-spacing:-.01em!important;text-transform:none!important}
#body:has(.calendar-head)>.kpis .kpi strong{margin-top:4px!important;font-size:28px!important;line-height:1!important;font-weight:740!important;letter-spacing:-.035em!important;color:#151c29!important}
#body:has(.calendar-head)>.panel:has(.calendar-head){margin-top:0!important;border:1px solid var(--cal-border)!important;border-radius:20px!important;background:#fff!important;box-shadow:0 5px 18px rgba(23,32,51,.035)!important}
@media(max-width:1100px) and (min-width:901px){#body:has(.calendar-head)>.toolbar:before{font-size:35px;max-width:540px}#body:has(.calendar-head)>.toolbar:after{max-width:520px}#body:has(.calendar-head)>.toolbar{background:linear-gradient(90deg,rgba(255,255,255,.99),rgba(255,255,255,.88) 58%,rgba(255,255,255,.2)),url('/porsche-911-race-car.png?v=20260918-2') right center/52% auto no-repeat!important}}
@media(max-width:900px){#body:has(.calendar-head){padding:10px 12px 22px!important;background:#fff!important}#body:has(.calendar-head)>.toolbar{min-height:250px!important;padding:18px!important;border-radius:19px!important;background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.88) 52%,rgba(18,25,36,.12) 100%),url('/porsche-911-race-car.png?v=20260918-2') center bottom 42px/96% auto no-repeat!important;align-items:flex-end!important}#body:has(.calendar-head)>.toolbar:before{left:18px;top:18px;right:18px;font-size:29px;line-height:1.04;max-width:none}#body:has(.calendar-head)>.toolbar:after{left:19px;right:19px;top:56px;max-width:none;font-size:15px;line-height:1.38}#body:has(.calendar-head)>.toolbar>div{width:100%!important;margin:0!important;justify-content:flex-end!important;gap:7px!important}#body:has(.calendar-head)>.toolbar .btn{min-height:39px!important;padding:0 12px!important;font-size:13px!important}#body:has(.calendar-head)>.kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}#body:has(.calendar-head)>.kpis .kpi{min-height:100px!important;padding:15px 13px 15px 62px!important;border-radius:16px!important;box-shadow:none!important}#body:has(.calendar-head)>.kpis .kpi:before{left:13px;width:38px;height:38px;font-size:16px}#body:has(.calendar-head)>.kpis .kpi small{font-size:15px!important}#body:has(.calendar-head)>.kpis .kpi strong{font-size:24px!important}#body:has(.calendar-head)>.panel:has(.calendar-head){border-radius:18px!important}}
@media(max-width:430px){#body:has(.calendar-head)>.toolbar{min-height:235px!important}#body:has(.calendar-head)>.toolbar:before{font-size:27px}#body:has(.calendar-head)>.kpis{grid-template-columns:1fr!important}#body:has(.calendar-head)>.kpis .kpi{min-height:86px!important}}
