:root{--background:#f5f3ee;--surface:#fff;--text:#292b27;--muted:#60645c;--border:#d4d5cd;--primary:#292f29;--primary-text:#fff;--error:#982e28;--error-bg:#fff1ee;--status-held:#f4ebd4;--status-confirmed:#e9efdf;--status-cancelled:#ececea;--focus:#225fa0;--preview:#dae7f6;--off-hours-bg:#f4f2ec;--area-BED-strip:#C2410C;--area-BED-tint:#FBE3D6;--area-BOOK-strip:#4D7C0F;--area-BOOK-tint:#E6F2D3;--area-US-strip:#1D4ED8;--area-US-tint:#DCE6FD;--area-WHITE-strip:#475569;--area-WHITE-tint:#E5E9EF;--area-OFFICE-strip:#0F766E;--area-OFFICE-tint:#D5F0EC;--area-MAKEUP-strip:#BE185D;--area-MAKEUP-tint:#FADDEA;--slot-h:24px}
*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--text);font:16px/1.5 system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;font-variant-numeric:tabular-nums}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--border);background:var(--surface);border-radius:6px;min-height:44px;padding:8px 14px}button:hover{border-color:var(--text);background:#f2f2ec}button:disabled{cursor:wait;opacity:.6}button.primary{background:var(--primary);color:var(--primary-text);border-color:var(--primary)}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}input,select,textarea{min-width:0;max-width:100%;border:1px solid #999e93;border-radius:5px;background:white;padding:9px;min-height:44px}label{display:flex;gap:6px;align-items:center}h1{font-size:28px;margin:0}h2{font-size:21px;margin:0 0 16px}h3{font-size:17px}p{margin:8px 0 16px}.prototype{background:#eae5d8;padding:9px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px}.prototype select{font-size:13px;padding:4px 8px}.prototype label{margin-left:auto}header{display:flex;align-items:center;padding:16px 28px;background:var(--surface);border-bottom:1px solid var(--border);gap:36px}.brand{font-size:19px}nav{display:flex;gap:8px}nav button{border:0}nav [aria-current=page]{background:var(--background);font-weight:700}.staff{margin-left:auto;font-size:14px}.staff button{margin-left:12px}main{padding:24px 28px}.heading,.toolbar,.group,.actions,.calendar-caption{display:flex;align-items:center;gap:10px;justify-content:space-between}.heading{margin-bottom:20px}.eyebrow{font-size:13px;color:var(--muted);margin:0 0 4px}.toolbar{flex-wrap:wrap;margin-bottom:16px}.group{flex-wrap:wrap;justify-content:flex-start}.segmented{display:flex}.segmented button{border-radius:0;min-width:44px}.segmented [aria-pressed=true]{background:var(--primary);color:white}.workspace{display:flex;align-items:flex-start;gap:20px}.calendar-surface{min-width:0;flex:1;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}.calendar-caption{padding:16px 18px;flex-wrap:wrap}.calendar-caption span,.hint{font-size:13px;color:var(--muted)}.hint{padding:0 18px;margin-bottom:12px}#calendar{overflow:auto;max-height:calc(100vh - 340px);min-height:340px;position:relative}.schedule{position:relative;min-width:0}.grid-head{display:grid;grid-template-columns:56px repeat(var(--cols),minmax(0,1fr));position:sticky;top:0;z-index:6;background:var(--surface);border-bottom:1px solid var(--border)}.grid-head>div:first-child{position:sticky;left:0;z-index:7;background:var(--surface)}.grid-head>div{padding:10px 4px;text-align:center;font-size:13px;overflow-wrap:anywhere}.grid-head>div.col-header{border-bottom:3px solid var(--col-strip,transparent)}.grid-head b{display:block}.chip{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}.time-grid{position:relative}.grid-row{display:grid;grid-template-columns:56px repeat(var(--cols),minmax(0,1fr));height:var(--slot-h)}.ruler{position:sticky;left:0;background:var(--surface);z-index:3;text-align:center;font-size:13px;border-top:1px solid var(--border)}.slot{border:0;border-radius:0;border-left:1px solid var(--border);border-top:1px solid var(--border);padding:0;min-height:0;background:transparent}.grid-row.half .slot,.grid-row.half .ruler{border-top:1px dashed #e5e5df}.slot.off-hours{background:var(--off-hours-bg)}.slot.disabled,.slot.closed{background:#e8e8e1;color:var(--muted);cursor:not-allowed}.slot:focus-visible{outline-offset:-3px}.events{position:absolute;left:56px;right:0;top:0;bottom:0;pointer-events:none}.booking{position:absolute;pointer-events:auto;text-align:left;padding:3px 6px;border:1px solid #b8bac0;border-left:5px solid var(--area-strip,#475569);background:var(--area-tint,#f0f0f0);color:var(--text);font-size:13px;border-radius:4px;overflow:hidden;min-height:0;line-height:18px}.booking span,.booking strong{display:block;overflow-wrap:anywhere}.booking.all{background:var(--primary);border-color:var(--primary);border-left:5px solid var(--primary);color:var(--primary-text)}.booking.all:hover{background:#42483f}.booking .status{font-size:13px;margin-top:2px}.preview{position:absolute;border:2px dashed var(--focus);background:#dae7f66b;pointer-events:none;z-index:4;font-size:13px;padding:4px;color:#163c65}.now{position:absolute;left:0;right:0;border-top:2px solid var(--error);z-index:5;pointer-events:none}.now span{position:absolute;right:100%;top:-9px;width:54px;text-align:center;background:var(--error);color:white;font-size:11px;line-height:17px;border-radius:3px;white-space:nowrap;letter-spacing:-0.2px;z-index:6}.week{min-width:780px}.scroll-hint{font-size:12px;padding:8px;background:var(--background)}.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-width:770px}.month-head{text-align:center;padding:8px;font-size:12px}.month-cell{min-height:180px;padding:6px;border-top:1px solid var(--border);border-right:1px solid var(--border)}.month-cell.outside{background:var(--background)}.month-cell .date-number{padding:4px;min-width:44px;font-size:14px}.month-booking{display:block;text-align:left;width:100%;font-size:11px;line-height:1.35;margin-top:4px;padding:3px 5px;border:1px solid #b8bac0;border-left:4px solid var(--area-strip,#475569);background:var(--area-tint,#f0f0f0);color:var(--text);border-radius:3px;overflow:hidden}.month-booking.all{background:var(--primary);border-color:var(--primary);border-left:4px solid var(--primary);color:var(--primary-text)}.month-booking span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.month-booking .mb-status{font-size:10px;opacity:.85}.more{font-size:12px;width:100%;margin-top:5px}#panel{flex:0 0 360px;width:360px;max-height:calc(100vh - 40px);overflow:auto;position:sticky;top:20px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;z-index:12}#panel[hidden]{display:none}.panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.panel-top h2{margin:0}.form-field{margin:0 0 14px}.form-field label{display:block;font-size:16px;margin-bottom:5px}.form-field input,.form-field textarea,.form-field select{width:100%}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.error{font-size:14px;color:var(--error)}.error:empty{display:none}.error-summary{background:var(--error-bg);color:var(--error);padding:12px;margin-bottom:14px;border:1px solid var(--error)}.summary{padding:12px;background:var(--background);border-radius:5px;margin:16px 0;overflow-wrap:anywhere}.outside-hours-box{margin:10px 0;padding:8px 12px;background:#fef3c7;border:1px solid #d97706;border-radius:4px;font-size:13px;color:#92400e;font-weight:600}.actions{justify-content:flex-start;flex-wrap:wrap;margin-top:16px}.badge{display:inline-block;background:var(--status-confirmed);padding:4px 9px;border-radius:4px;font-size:13px}.badge.held{background:var(--status-held)}.badge.cancelled{background:var(--status-cancelled)}dl{display:grid;grid-template-columns:70px 1fr;gap:12px;margin:20px 0}dt{color:var(--muted)}dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.history{padding-left:20px;font-size:14px}.history li{margin-bottom:14px}.warning{color:var(--error);font-weight:600}#search{background:white;padding:18px;border:1px solid var(--border);border-radius:8px;margin-bottom:20px}#search-form{display:flex;flex-wrap:wrap;gap:12px;align-items:end}#search-form label{display:block}#search-form input,#search-form select{display:block;width:100%}.result{display:block;text-align:left;width:100%;margin-top:8px;overflow-wrap:anywhere}.admin-card{padding:24px;border:1px solid var(--border);border-radius:8px;background:white;margin-bottom:18px}.admin-row{display:grid;grid-template-columns:80px 1fr 110px 100px 120px;gap:14px;align-items:end;padding:16px 0;border-bottom:1px solid var(--border)}.admin-row label{display:block}.admin-row input{width:100%}#toast:not(:empty){position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--primary);color:white;padding:12px 20px;border-radius:6px;z-index:40;width:max-content;max-width:90vw}dialog{border:1px solid var(--border);border-radius:8px;max-width:520px;width:calc(100% - 32px);max-height:85vh;overflow:auto;padding:24px}dialog::backdrop{background:#2226}.skeleton{margin:20px;height:52px;background:#eeeee8;border-radius:6px}.empty-note{padding:10px 18px;background:var(--status-confirmed);font-size:14px}[hidden]{display:none!important}
@media(max-width:1199px){#panel{position:fixed;right:0;top:0;bottom:0;max-height:100dvh;border-radius:0;width:380px;box-shadow:-8px 0 0 #292b2720}.workspace{gap:0}.staff{font-size:13px}header{gap:16px}}
@media(max-width:800px){header{padding:12px;flex-wrap:wrap;gap:8px}.brand{display:none}.staff{margin-left:auto}main{padding:16px 12px}.prototype{padding:8px 12px;gap:6px}.prototype label{margin-left:0}.toolbar>.group{width:100%}.heading{margin-bottom:16px}.admin-row{grid-template-columns:1fr 1fr}.admin-row>strong{grid-column:1/-1}#calendar{max-height:65vh}.calendar-caption{padding:12px}.grid-head>div{padding:8px 4px}.toolbar label{font-size:14px}}
@media(max-width:480px){#panel{width:100%;padding:18px}.staff{width:100%;display:flex;justify-content:space-between;align-items:center}.prototype strong{font-size:13px}.heading h1{font-size:24px}.toolbar .group{gap:8px}.toolbar input[type=date]{max-width:164px}.toolbar label{flex-wrap:wrap}.calendar-caption{align-items:flex-start;flex-direction:column}.admin-card{padding:14px}.admin-row{gap:10px}#search-form>*{width:100%}.booking{font-size:14px}.actions button{flex:1}}

/* The prototype notice remains visible above full-width drawers. */
.prototype{position:sticky;top:0;z-index:30}
@media(max-width:1199px){#panel{top:var(--banner-height,80px);max-height:calc(100dvh - var(--banner-height,80px))}}

.month-row{display:contents}

/* Drag is a shortcut to the form; native panning remains available until armed. */
#calendar{touch-action:pan-x pan-y}
.preview{pointer-events:auto;cursor:grab;user-select:none;padding:4px 6px;min-width:44px;overflow:hidden}
.drag-copy{display:block;pointer-events:none;max-height:100%;overflow:hidden}
.drag-handle{position:absolute;left:0;right:0;width:100%;cursor:ns-resize;z-index:4;border:none;padding:0;background:transparent;transform:none}
.preview.dragging{outline:3px solid var(--focus);outline-offset:2px;cursor:grabbing;z-index:8}
.preview.drag-warning{border:2px dashed var(--error);color:var(--error);background:repeating-linear-gradient(135deg,var(--error-bg),var(--error-bg) 8px,#982e2820 8px,#982e2820 10px)}
#drag-label{position:fixed;z-index:40;pointer-events:none;max-width:272px;padding:8px;background:var(--surface);border:2px solid var(--focus);font-size:13px}

@media(prefers-reduced-motion:reduce){.preview,.drag-handle{animation:none;transition:none}#calendar{scroll-behavior:auto}}
.drag-reason{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--error);font-size:12px;line-height:1.3;margin-top:2px}
@media(pointer:fine){
  .drag-handle{height:6px;min-height:0;background:var(--focus);border-radius:3px;opacity:0;transition:opacity .15s ease}
  .drag-handle.top{top:-3px}
  .drag-handle.bottom{bottom:-3px}
  .preview:hover .drag-handle,.preview:focus-within .drag-handle,.drag-handle:hover,.drag-handle:focus,.drag-handle:focus-visible,.preview.dragging .drag-handle{opacity:1}
  .drag-handle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .preview.drag-warning .drag-handle{background:var(--error)}
  .preview.drag-warning .drag-handle:focus-visible{outline-color:var(--error)}
}
@media(pointer:coarse){
  .drag-handle{height:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .drag-handle.top{top:-22px}
  .drag-handle.bottom{bottom:-22px}
  .drag-handle::after{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--focus)}
  .drag-handle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .preview.drag-warning .drag-handle::after{background:var(--error)}
  .preview.drag-warning .drag-handle:focus-visible{outline-color:var(--error)}
}

/* Viewport budget: 36 banner + 49 navigation + 12 top + 56 toolbar
   + 43 column header + 40 bottom + 2 surface borders = 238px. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
body:has(#booking-screen:not([hidden])){height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.prototype{flex:none;min-height:36px;padding:2px 20px;gap:8px;flex-wrap:nowrap;white-space:nowrap}
.prototype strong{overflow:hidden;text-overflow:ellipsis}
.prototype label{flex-shrink:0}.prototype select{max-width:200px}
#demo-note:empty{display:none}#demo-note{overflow:hidden;text-overflow:ellipsis}
header{flex:none;padding:8px 20px;gap:24px;min-height:49px}
main{padding:12px 20px 40px;min-height:0;flex:1;display:flex;flex-direction:column}
#booking-screen{min-height:0;flex:1;display:flex;flex-direction:column}
.toolbar{flex:none;min-height:56px;margin:0;gap:8px;justify-content:flex-start;position:relative;padding-bottom:12px}
.toolbar>.group{gap:6px}.toolbar>.group-view{margin-left:auto}
#range-title{font-size:16px;white-space:nowrap}.toolbar label{font-size:13px}
.toolbar input,.toolbar select{font-size:13px;padding:4px;max-width:146px}
.calendar-help{position:relative;flex:none}
.calendar-help summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--border);border-radius:50%;background:white}
.calendar-help summary::-webkit-details-marker{display:none}
.calendar-help>div{position:absolute;right:0;top:40px;width:min(340px,calc(100vw - 40px));padding:16px;background:white;border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 16px #0002;z-index:20;font-size:14px}
.workspace{min-height:0;flex:1;align-items:stretch;gap:16px;position:relative}
.calendar-surface{display:flex;flex-direction:column;min-height:0}
#calendar{flex:1;min-height:0;max-height:none;overflow:auto}
.grid-head>div{height:42px;padding:2px 4px;line-height:18px;overflow:hidden}
.grid-head{grid-template-columns:56px repeat(var(--cols),minmax(120px,1fr))}
.grid-row{grid-template-columns:56px repeat(var(--cols),minmax(120px,1fr))}
.schedule{min-width:calc(56px + var(--cols)*120px)}
.ruler{line-height:var(--slot-h)}
.booking{padding:3px 4px;font-size:13px;line-height:18px}
.booking strong,.booking .customer{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.booking .status{display:table;font-size:13px;line-height:16px;margin-top:2px;padding:0 3px;border:1px solid currentColor;border-radius:3px}
.booking:focus-visible{outline-offset:-3px}
#panel{position:relative;top:0;max-height:100%;padding:16px;flex:0 0 360px;width:360px}
#search{flex:none;max-height:35vh;overflow:auto;margin-bottom:8px}
.month-head{position:sticky;top:0;z-index:6;background:var(--surface)}
@media(min-width:801px) and (pointer:fine){
 button,input,select{min-height:32px}button{padding:4px 10px}
 .slot{min-height:0;padding:0}.booking{min-height:0;padding:3px 4px}
 .segmented button{min-width:32px}.prototype select{height:32px}
}
/* 40 margins + 2 borders + 56 ruler + 6×120 columns + 16 gap + 360 panel = 1194. */
@media(max-width:1199px){
 #panel{position:fixed;right:0;top:var(--banner-height,36px);bottom:0;max-height:calc(100dvh - var(--banner-height,36px));width:360px;border-radius:0;box-shadow:-8px 0 0 #292b2720}
 .workspace{gap:0}.toolbar{flex-wrap:wrap}
}
@media(max-width:800px),(pointer:coarse){
 :root{--slot-h:44px}button,input,select{min-height:44px}
 .calendar-help summary{width:44px;height:44px}
 .prototype{min-height:48px}.prototype select{min-height:44px}
 .slot{min-height:44px}.booking{min-height:44px}
}
@media(max-width:800px){
 main{padding:8px 12px 12px}header{padding:4px 12px;gap:8px}
 .toolbar{padding-bottom:8px;gap:6px;flex-direction:column;align-items:stretch}
 #range-title{display:none}
 .toolbar>.group{width:100%;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;justify-content:flex-start}
 .toolbar>.group-view{margin-left:0}
 .toolbar>.group-actions{margin-left:0}
 .toolbar label{white-space:nowrap;flex-wrap:nowrap}
 .toolbar button{padding:8px 10px}
 .prototype{padding:2px 8px}.prototype strong{font-size:12px}.prototype label{font-size:0;gap:0}.prototype select{width:112px;font-size:12px}
 #demo-note{position:absolute;top:100%;right:0;max-width:100%;font-size:12px;background:var(--background)}
 .staff{width:auto;font-size:12px}.staff button{margin-left:4px}
}
@media(max-width:480px){#panel{width:100%;padding:18px}header{flex-wrap:nowrap}nav{gap:2px}nav button{padding:4px 8px}.staff{font-size:0}.staff button{font-size:14px}.toolbar .group{gap:6px}.toolbar label{flex-wrap:nowrap;white-space:nowrap}.toolbar input[type=date]{max-width:138px}.toolbar select{max-width:126px}}

/* Workbench polish: preserve small calendar type and three visible bookings. */
:root{--border-soft:#e8ebe5;--surface-subtle:#f8f9f5;--hover:#edf1e9;--radius-control:8px;--shadow-panel:0 12px 36px #24332218}
body{background:#f3f4ef;-webkit-font-smoothing:antialiased}
button,input,select,textarea{border-radius:var(--radius-control)}
button{transition:background-color .15s,border-color .15s,box-shadow .15s}
button:hover{background:var(--hover);border-color:#a2aa9c}
button:active:not(:disabled){background:#e3e9dc}
button.primary:hover{background:#3d493b;border-color:#3d493b}
button:disabled{cursor:not-allowed}
input,select,textarea{border-color:#b6bdb1;accent-color:var(--primary)}
input:focus,select:focus,textarea:focus{border-color:var(--focus)}
.prototype{background:#e9eddf;border-bottom:1px solid #dce2cf;color:#454e3e;font-size:12px}
.prototype strong{display:flex;align-items:center;gap:7px;font-weight:500}
.prototype-dot{width:6px;height:6px;border-radius:50%;background:#687c4c;flex:none}
.prototype select{border-color:#c2cab6;background:#f9faf5;min-height:28px;height:28px}
header{padding:8px 24px;gap:32px;border-color:var(--border-soft)}
.brand{display:flex;align-items:center;gap:9px;font-size:17px;letter-spacing:.02em;white-space:nowrap}
.brand svg{width:23px;height:23px;color:#56674b}
nav{gap:4px}nav button{color:var(--muted);font-size:14px;font-weight:500;padding:7px 14px}
nav [aria-current=page]{color:var(--primary);background:#edf1e6}
.staff{color:var(--muted);font-size:12px}.staff button{font-size:12px;border-color:var(--border-soft)}
main{padding:12px 24px 16px}
.toolbar{padding-bottom:12px;gap:12px;min-height:54px}
.toolbar>.group{gap:8px}.toolbar>.group-date{flex:1}
#range-title{font-size:17px;font-weight:650;margin-right:6px;letter-spacing:.01em}
.toolbar label{color:var(--muted);gap:7px}
.toolbar input,.toolbar select{background:#fff;font-size:13px;min-height:34px;padding:5px 8px}
.toolbar button{min-height:34px;font-size:13px;padding:6px 12px}
.toolbar #prev,.toolbar #next{padding:4px;width:34px;min-width:34px;font-size:18px}
.segmented{background:#e8ece3;padding:3px;border:1px solid #dde3d5;border-radius:9px;gap:2px}
.segmented button{background:transparent;border:0;border-radius:6px;min-width:34px;min-height:28px;padding:3px 10px;color:var(--muted)}
.segmented button[aria-pressed=true]{background:#fff;color:var(--primary);box-shadow:0 1px 4px #24332218;font-weight:650}
#search-toggle[aria-expanded=true]{border-color:var(--primary);background:#edf1e6}
.calendar-help summary{border-color:var(--border-soft);color:var(--muted)}
.calendar-surface{border-color:#d9dfd2;border-radius:12px;box-shadow:0 1px 3px #24332205}
#calendar{scroll-padding-top:42px;scroll-padding-bottom:12px;scrollbar-width:thin;scrollbar-color:#b9c2af transparent}
.scroll-hint{font-size:12px;background:var(--surface-subtle);color:var(--muted);padding:7px 12px;border-bottom:1px solid var(--border-soft)}
.month-head{font-size:12px;font-weight:600;padding:9px 6px;border-bottom:1px solid var(--border-soft);background:#f8faf6}
.month-head.weekend{color:#7b6647}
.month-cell{min-height:158px;padding:6px;border-color:var(--border-soft)}
.month-cell.weekend{background:#fcfcf8}
.month-cell.outside{background:#f5f6f1;color:#717a69}
.month-cell.is-today{background:#f5f9ef;box-shadow:inset 0 0 0 1px #93a57d}
.month-cell:focus-visible{outline-offset:-3px}
.month-cell .date-number{font-size:14px;min-width:28px;min-height:28px;padding:2px 5px;border-color:transparent;background:transparent;border-radius:7px;line-height:20px;margin-bottom:2px}
.month-cell .date-number:hover{background:#e7eddf}
.month-cell .date-number[aria-current=date]{background:var(--primary);color:#fff;font-weight:650}
.month-booking{font-size:11px;line-height:1.3;padding:3px 5px;margin-top:3px;min-height:32px;border-radius:5px;border-color:#b7bfaf;border-left-color:var(--area-strip,#475569)}
.month-booking .mb-status{font-size:10px;opacity:1;color:#505746}
.month-booking.all .mb-status{color:#fff}
.month-booking:hover{background:var(--area-tint,#f0f0f0);border-color:var(--area-strip,#475569);box-shadow:0 1px 4px #2433221c}
.month-booking.is-held,.booking.is-held{border-top-style:dashed;border-right-style:dashed;border-bottom-style:dashed}
.more{min-height:26px;padding:3px 7px;font-size:11px;margin-top:4px;background:transparent;border:1px solid transparent;color:#4c613c;text-align:left;font-weight:600}
.more:hover{background:#edf3e6;border-color:#bdcbaa}
.calendar-legend{display:flex;align-items:center;gap:16px;flex:none;min-height:34px;padding:7px 12px;border-top:1px solid var(--border-soft);background:#fdfefa;font-size:11px;color:var(--muted)}
#legend-areas{display:flex;align-items:center;gap:16px;min-width:0;overflow-x:auto;scrollbar-width:thin;flex:1}
#legend-areas>span,.legend-held{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#legend-areas i{display:inline-block;width:7px;height:7px;border-radius:2px;flex:none}
.legend-held i{width:14px;height:10px;border:1px dashed #637452;border-radius:2px}
.grid-head{background:#f8faf6;border-color:var(--border-soft)}
.grid-head>div{color:#4b5942}
.grid-head>div:first-child{background:#f8faf6}
.grid-head b{font-size:13px;font-weight:650}
.ruler{font-size:11px;color:var(--muted)}
.slot{border-left-color:var(--border-soft)}
.slot:hover:not([aria-disabled=true]):not(.disabled){background:#eaf1e3}
.booking{border-radius:6px;padding:4px 6px}
.booking:hover{background:var(--area-tint,#f0f0f0);border-color:var(--area-strip,#475569);box-shadow:0 2px 6px #2433221a}
.booking.all:hover{background:#424f3b;border-color:#424f3b}
.booking strong{font-weight:650}
.booking .status{font-size:11px;line-height:15px;border:0;padding:0;font-weight:500}
.booking.is-held .status{font-weight:650}
#panel{display:flex;flex-direction:column;overflow:hidden;padding:0;box-shadow:var(--shadow-panel);border-color:#cdd5c4;border-radius:12px}
.panel-top{flex:none;margin:0;padding:14px 16px;border-bottom:1px solid var(--border-soft);background:#fbfcf8}
.panel-top h2{font-size:18px;font-weight:650}
.panel-top button{min-width:32px;padding:4px;min-height:32px;border:0;background:transparent;color:var(--muted)}
.panel-body{flex:1;min-height:0;overflow:auto;padding:16px;scroll-padding:12px;overscroll-behavior:contain}
.panel-footer{flex:none;padding:12px 16px;border-top:1px solid var(--border-soft);background:#fbfcf8}
.panel-footer button{width:100%;min-height:44px;font-size:14px;font-weight:600}
.form-field{margin-bottom:14px}.form-field label{font-size:13px;font-weight:550;color:#48523f}
.form-field input,.form-field select,.form-field textarea{font-size:14px;min-height:38px;padding:8px 10px}
.panel-body .hint{padding:0;margin:8px 0;font-size:12px;line-height:1.65}
.panel-body>p{font-size:13px;color:var(--muted)}
.summary{background:#f1f5e9;border:1px solid #dce5cf;border-radius:8px;padding:12px;font-size:13px;line-height:1.75}
.badge{font-size:11px;font-weight:600;letter-spacing:.02em;padding:4px 8px;border:1px solid #c5d2b1}
.badge.held{border-color:#dac38b;color:#72591e}.badge.cancelled{border-color:#cdd1c7;color:#5b6254}
dl{font-size:13px;line-height:1.7;grid-template-columns:56px 1fr;gap:12px}
.panel-body h3{font-size:13px;margin:24px 0 12px}.history{font-size:12px;color:var(--muted);padding-left:18px}.history li::marker{color:#8a9b76}
#cancel-booking{color:var(--error);border-color:#dfc5c0;background:#fffafa}
.error-summary{border-radius:8px;font-size:13px}.error{font-size:12px;line-height:1.65}.error-summary a{color:var(--error)}
#area-availability{font-size:12px}#area-availability ul{padding-left:20px;line-height:1.8}
#search{border-radius:10px;border-color:#d9dfd2;padding:14px 16px}
#search-form{gap:10px}#search-form label{font-size:12px;color:var(--muted)}#search-form input,#search-form select{font-size:14px;margin-top:4px}
.result{font-size:13px;border-color:var(--border-soft);padding:10px 12px;border-radius:8px;line-height:1.7}
.admin-card{border-color:#d9dfd2;border-radius:12px;padding:22px}
#admin>h1{font-size:24px;margin-bottom:6px}#admin>p{font-size:13px;color:var(--muted)}
.admin-card h2{font-size:18px}.admin-card>p{font-size:13px;color:var(--muted)}
.admin-row{grid-template-columns:72px minmax(160px,1fr) 100px 140px;border-color:var(--border-soft);font-size:13px;gap:16px}
.admin-row input{font-size:14px}.admin-row label{font-size:12px;color:var(--muted)}
dialog{border-radius:12px;border-color:#cdd5c4;box-shadow:var(--shadow-panel)}dialog h2{font-size:19px}dialog p{font-size:14px;line-height:1.7}
@media(max-width:1199px){#panel{border-radius:12px 0 0 12px}.toolbar>.group-view{margin-left:auto}header{gap:20px}}
@media(max-width:1050px) and (min-width:801px){.toolbar>.group-date{width:100%;flex-basis:100%}.toolbar>.group-view{margin-left:0}.toolbar>.group-actions{margin-left:auto}}
@media(max-width:800px){
 header{padding:6px 12px;gap:8px}.brand{display:none}nav button{font-size:13px;padding:6px 10px;min-height:40px}
 main{padding:8px 10px 12px}.prototype{font-size:11px}.prototype strong{font-size:11px;gap:5px}.prototype select{min-height:40px;height:40px}
 .toolbar{gap:7px;padding-bottom:9px}.toolbar>.group{gap:6px}.toolbar>.group-view{margin-left:0}.toolbar>.group-date{flex:none}
 .toolbar button,.toolbar input,.toolbar select{min-height:44px}.toolbar #prev,.toolbar #next{width:40px;min-width:40px}
 .toolbar input[type=date]{max-width:152px;font-size:14px}.toolbar select{max-width:154px;font-size:14px}
 .toolbar label{font-size:12px;gap:5px}.segmented button{min-width:38px;padding:4px 9px;min-height:38px}
 .toolbar>.group-actions{display:grid;grid-template-columns:1fr 1fr 44px;gap:8px}
 .calendar-help summary{width:44px;height:44px}.calendar-help>div{right:0;top:48px}
 .calendar-legend{gap:8px;padding:6px 10px;font-size:10px}#legend-areas{gap:12px}.legend-held{display:none}
 .month-cell{min-height:180px}.month-cell .date-number{min-width:44px;min-height:44px}
 .month-booking,.more{min-height:44px}.month-booking{font-size:11px}.more{font-size:11px}
 .panel-top button{min-width:44px;min-height:44px}.panel-body{padding:16px}.panel-footer{padding:12px 16px max(12px,env(safe-area-inset-bottom))}
 .form-field input,.form-field select,.form-field textarea{font-size:16px;min-height:44px}.form-field label{font-size:13px}
 .booking{min-height:44px}.admin-row{grid-template-columns:1fr 1fr;gap:12px}.admin-row>strong{grid-column:1/-1}
}
@media(max-width:480px){#panel{width:100%;border-radius:0}.prototype select{width:106px}.staff button{font-size:12px}.toolbar input[type=date]{max-width:145px}.toolbar select{max-width:148px}.calendar-legend{min-height:32px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
#env-badge{margin-left:auto;font-size:12px;color:var(--muted);background:#fff8;padding:2px 8px;border-radius:4px;border:1px solid #d4d5cd}
.calendar-loading{padding:28px 16px;text-align:center;font-size:14px;color:var(--muted)}
.calendar-error{padding:28px 16px;text-align:center;color:var(--error)}
.calendar-error button{margin-top:12px}
.empty-results{padding:24px 16px;text-align:center;color:var(--muted)}
.empty-results button{margin-top:10px}
.time-end-group{display:flex;gap:6px;align-items:center}
.btn-time-shortcut{min-height:36px;padding:4px 10px;font-size:13px;white-space:nowrap;background:var(--surface);border:1px solid var(--border);border-radius:4px;cursor:pointer}
.btn-time-shortcut.active{background:var(--primary);color:var(--primary-text);border-color:var(--primary)}
.end-24-notice{font-size:12px;color:#0f766e;font-weight:600;margin-top:4px}
#account-management{margin-top:24px}
#btn-admin-close-24{min-height:36px;padding:4px 10px;font-size:13px;white-space:nowrap;margin-left:4px}

/* V1.4 Additions */
.readonly-banner{background:#fef2f2;border-bottom:1px solid #f87171;color:#991b1b;padding:10px 24px;font-size:14px;font-weight:600;text-align:center}
.badge.pending{background:#fef3c7;border:1px dashed #d97706;color:#92400e}
.badge.rejected{background:#fee2e2;border:1px solid #ef4444;color:#991b1b}
.booking.pending,.month-booking.pending{border-style:dashed;border-color:#d97706}
.legend-pending i{width:14px;height:10px;border:1px dashed #d97706;background:#fef3c7;border-radius:2px}
.badge-count{display:inline-block;background:#d97706;color:#fff;padding:1px 6px;border-radius:10px;font-size:11px;font-weight:700;margin-left:4px;vertical-align:middle}
.badge-past{background:#fee2e2;color:#991b1b;border:1px solid #f87171;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}
.badge-waiting{background:#f3f4f6;color:var(--muted);padding:2px 8px;border-radius:4px;font-size:12px}
.review-item{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:18px;margin-bottom:16px}
.review-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.reschedule-compare{display:flex;align-items:center;gap:12px;background:var(--surface-subtle);padding:12px;border-radius:6px;margin:12px 0;flex-wrap:wrap}
.reschedule-time{font-size:15px;font-weight:600}
.link-table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0}
.link-table th,.link-table td{padding:10px;border-bottom:1px solid var(--border-soft);text-align:left}
.link-table th{background:var(--surface-subtle);font-weight:600}