:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#172033;background:#f3f6fa;line-height:1.45;
  --navy:#102a43;--navy-2:#173f5f;--teal:#0f9f8d;--teal-dark:#08786c;
  --teal-soft:#e9f8f5;--line:#dfe5ec;--muted:#66758a;--white:#fff;
}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
button,input,select,textarea{font:inherit}
button,a{touch-action:manipulation}
h1,h2,h3,p{margin-top:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
header{background:linear-gradient(125deg,var(--navy) 0%,var(--navy-2) 70%,#146b73 140%);color:#fff;box-shadow:0 4px 20px rgba(16,42,67,.15)}
.header-inner{max-width:1220px;margin:0 auto;padding:28px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:16px}
.brand-mark{width:48px;height:48px;border-radius:13px;display:block;flex:0 0 auto;box-shadow:0 8px 20px rgba(2,20,33,.22)}
h1{margin-bottom:4px;font-size:clamp(24px,3vw,34px);letter-spacing:-.025em}
.subtitle{margin:0;color:#c8d7e5;font-size:14px}
.eyebrow{font-weight:850;letter-spacing:.15em;font-size:10px;color:#63e2cf;margin-bottom:5px}
.primary,.secondary,.danger,.ghost{border:0;border-radius:9px;padding:11px 16px;font-weight:750;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.primary{background:#23c6ad;color:#062d27;box-shadow:0 6px 15px rgba(0,0,0,.13)}
.primary:hover{background:#3bd2bb;transform:translateY(-1px)}
.header-action{white-space:nowrap}
.header-user{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;font-size:12px;color:#c8d7e5}
.header-user a{color:#fff;text-decoration:none;font-weight:700}.header-user a:hover{text-decoration:underline}
.header-link{border:0;background:transparent;color:#fff;padding:0;font:inherit;font-weight:700;cursor:pointer}.header-link:hover{text-decoration:underline}
.secondary{background:var(--teal-soft);color:var(--teal-dark)}
.danger{background:#fff0f0;color:#b42318}
.danger.filled{background:#c9352b;color:#fff}
.ghost{background:#edf1f6;color:#354158}
.icon-button{border:0;background:transparent;font-size:28px;cursor:pointer;color:#6c7586;line-height:1}
main{max-width:1220px;margin:0 auto;padding:24px 28px 60px}
.flash{padding:13px 16px;border-radius:10px;margin-bottom:18px;font-size:14px;font-weight:650;border:1px solid transparent}
.flash.success{background:#e1f7ee;color:#126448;border-color:#bce9d7}
.flash.error{background:#fff0ee;color:#9b241b;border-color:#f2c0bb}
.toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-bottom:18px}
.period-navigation{display:flex;align-items:center;gap:7px}
.nav-button,.today-button{height:38px;display:grid;place-items:center;border:1px solid #ccd5e0;background:#fff;color:#354158;text-decoration:none;border-radius:8px;font-weight:700}
.nav-button{width:38px;font-size:24px;line-height:1}
.today-button{padding:0 14px;font-size:13px}
.nav-button:hover,.today-button:hover{border-color:#8fcfc5;color:var(--teal-dark);background:#fbfefd}
.date-form input{height:38px;padding:0 10px;border:1px solid #ccd5e0;border-radius:8px;background:#fff;color:#354158}
.view-switcher{display:flex;padding:4px;background:#e5eaf1;border-radius:10px}
.view-switcher a{min-width:76px;padding:7px 15px;border-radius:7px;color:#596579;text-decoration:none;text-align:center;font-size:13px;font-weight:750}
.view-switcher a.active{background:#fff;color:var(--teal-dark);box-shadow:0 2px 8px rgba(35,50,75,.12)}
.legend{justify-self:end;font-size:13px;color:var(--muted);white-space:nowrap}
.legend span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22b99e;margin-right:7px}
.legend strong{color:#26374b}
.schedule{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 32px rgba(35,50,75,.06);overflow:hidden}
.section-title{padding:20px 24px;display:flex;justify-content:space-between;align-items:end;gap:20px;border-bottom:1px solid #e7eaf0}
.section-title p{color:#748094;font-size:12px;margin-bottom:2px}
.section-title h2{margin:0;font-size:22px;letter-spacing:-.015em}
.section-help{margin:0!important}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:14px;padding:20px 24px 24px}
.booking-card{text-align:left;border:1px solid #dce3ec;border-left:4px solid #22b99e;background:#fff;border-radius:11px;padding:15px 16px;display:flex;flex-direction:column;gap:5px;cursor:pointer;transition:.18s}
.booking-card:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(25,44,75,.1);border-color:#a9dcd2}
.booking-card .time{font-size:12px;color:var(--teal-dark);font-weight:800;display:flex;align-items:center;gap:7px}
.status-dot{width:7px;height:7px;border-radius:50%;background:#22b99e}
.booking-card strong{font-size:16px;color:#1d2c3d}
.booking-card span:not(.time):not(.edit-hint){font-size:12px;color:#697386}
.edit-hint{font-size:11px;color:var(--teal-dark);font-weight:750;margin-top:7px}
.empty{text-align:center;padding:70px 20px}
.empty h3{margin-bottom:6px}.empty p{color:#7a8597}
.week-table-wrap{overflow-x:auto}
.week-table{display:grid;grid-template-columns:180px repeat(7,minmax(145px,1fr));min-width:1195px;background:#dfe5ed;gap:1px}
.week-corner,.week-date-heading,.week-room-heading,.week-cell{background:#fff}
.week-corner{display:flex;align-items:center;padding:13px 16px;background:#f2f5f9;color:#596579;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.week-date-heading{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:11px 8px;color:#697386;text-decoration:none;background:#f7f9fc}
.week-date-heading span{font-size:10px;font-weight:850;letter-spacing:.07em}
.week-date-heading strong{font-size:14px;color:#253147}
.week-date-heading.today{background:#e3f7f3}.week-date-heading.today strong{color:var(--teal-dark)}
.week-room-heading{position:sticky;left:0;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:13px 15px;min-height:108px;box-shadow:2px 0 5px rgba(26,46,70,.04)}
.week-room-heading strong{font-size:13px;color:#253147}.week-room-heading span,.week-room-heading small{font-size:10px;color:#778295;margin-top:2px}
.week-cell{min-height:108px;padding:8px}.week-cell.today{background:#f3fcfa}
.week-available{width:100%;min-height:72px;border:1px dashed transparent;background:transparent;color:#9aa5b3;font-size:11px;cursor:pointer;border-radius:7px}
.week-available:hover{border-color:#9edcd1;background:#effaf8;color:var(--teal-dark)}
.calendar-booking{width:100%;text-align:left;border:0;border-left:3px solid #22b99e;background:#e8f7f4;border-radius:6px;padding:7px 8px;margin-bottom:6px;cursor:pointer;overflow:hidden}
.calendar-booking:hover{background:#d9f2ed}.calendar-booking span,.calendar-booking small{display:block;font-size:10px;color:#547168}.calendar-booking strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#233e38}
.month-weekdays,.month-grid{display:grid;grid-template-columns:repeat(7,1fr);min-width:760px}
.month-weekdays{background:#f5f7fa;border-bottom:1px solid #e4e8ef}
.month-weekdays span{text-align:center;padding:10px;font-size:10px;font-weight:850;letter-spacing:.06em;color:#778295;text-transform:uppercase}
.month-grid{background:#e3e8ef;gap:1px}
.month-day{background:#fff;min-height:132px;padding:8px;overflow:hidden}.month-day.today{background:#f2fbf9}.month-day.outside{background:#f7f8fa}
.month-day-head{display:flex;justify-content:flex-end;align-items:center;gap:5px}
.month-date{width:28px;height:28px;display:grid;place-items:center;color:#3f4a5d;text-decoration:none;font-size:13px;font-weight:750}
.month-day.today .month-date{background:#22b99e;color:#fff;border-radius:50%}
.month-count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center;background:#e6ebf1;color:#627086;font-size:9px;font-weight:800}
.month-bookings{margin-top:5px}
.month-booking{display:block;width:100%;border:0;border-left:2px solid #22b99e;background:#e9f8f5;color:#24483f;border-radius:4px;text-align:left;padding:4px 6px;margin-bottom:3px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.month-booking:hover{background:#d9f2ed}.month-booking span{font-weight:800;color:var(--teal-dark);margin-right:3px}
dialog{border:0;border-radius:16px;padding:0;width:min(680px,calc(100vw - 28px));box-shadow:0 24px 80px rgba(11,24,43,.3)}
dialog::backdrop{background:rgba(8,20,38,.62);backdrop-filter:blur(2px)}
dialog form{padding:24px}
.dialog-head{display:flex;justify-content:space-between;align-items:start}.dialog-head h2{margin-bottom:20px}
.form-error{background:#fff1ef;border:1px solid #f2b8b2;border-left:5px solid #c9352b;border-radius:9px;color:#8f2018;font-size:13px;font-weight:650;margin:0 0 18px;padding:12px 14px}
.form-error[hidden]{display:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-grid label{font-size:12px;font-weight:750;color:#566176}
.form-grid .wide{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea{display:block;width:100%;margin-top:6px;border:1px solid #cbd3de;border-radius:8px;padding:10px 11px;color:#172033;background:#fff;outline:none}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:#28a995;box-shadow:0 0 0 3px rgba(34,185,158,.13)}
.dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}.dialog-actions>div{display:flex;gap:8px}
.confirm-dialog{width:min(430px,calc(100vw - 28px))}.confirm-dialog p{color:#687386}.confirm-dialog .dialog-actions{justify-content:flex-end}
.auth-page{min-height:100vh;background:linear-gradient(135deg,var(--navy),#146b73);display:grid;place-items:center;padding:20px}
.auth-shell{width:min(440px,100%);padding:0}.auth-card,.settings-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 18px 50px rgba(11,24,43,.18)}
.auth-card h1{color:var(--navy);font-size:28px}.auth-card>p:not(.eyebrow){color:var(--muted)}
.auth-logo{width:64px;height:64px;margin-bottom:18px;border-radius:17px}.auth-footnote{margin:22px 0 0!important;padding-top:18px;border-top:1px solid var(--line);font-size:11px;text-align:center}
.stack-form{display:grid;gap:14px}.stack-form label{font-size:12px;font-weight:750;color:#566176}
.stack-form input,.stack-form select{display:block;width:100%;margin-top:6px;border:1px solid #cbd3de;border-radius:8px;padding:10px 11px;background:#fff}
.stack-form .check-row{display:flex;gap:9px;align-items:flex-start;font-size:13px}.stack-form .check-row input{width:auto;margin:3px 0 0}
.link-button{display:inline-block;text-decoration:none}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.wide-panel{grid-column:1/-1;margin:0}
.settings-card h2{font-size:19px}.user-list{display:grid;gap:10px}.user-list>div{border-bottom:1px solid var(--line);padding:8px 0;display:grid}.user-list span,.user-list small{color:var(--muted);font-size:12px}
@media(max-width:820px){
  .header-inner{align-items:flex-start;flex-direction:column;padding:24px 20px}.header-action{width:100%}
  .header-user{width:100%;justify-content:flex-start}.settings-grid{grid-template-columns:1fr}
  main{padding:18px 14px 40px}.toolbar{grid-template-columns:1fr auto}.period-navigation{flex-wrap:wrap}.legend{display:none}
  .view-switcher{grid-column:1/-1;grid-row:2;width:100%}.view-switcher a{flex:1;min-width:0}
  .section-title{padding:17px 18px;align-items:flex-start;flex-direction:column}.section-help{display:none}
  .cards{padding:16px 18px 18px;grid-template-columns:1fr}
  .week-table-wrap,.month-weekdays,.month-grid{overflow-x:visible}.week-table-wrap{overflow-x:auto}
  .month-weekdays,.month-grid{min-width:720px}.schedule{overflow-x:auto}
  .form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}
  .dialog-actions{align-items:stretch;flex-direction:column-reverse}.dialog-actions>div{display:grid;grid-template-columns:1fr 1fr}.dialog-actions button{width:100%}
}
@media(max-width:480px){
  .brand-mark:not(.auth-logo){width:42px;height:42px}.subtitle{font-size:12px}.date-form{width:100%}.date-form input{width:100%}
  .period-navigation{display:grid;grid-template-columns:38px 1fr 38px;width:100%}.date-form{grid-column:1/-1}
  .toolbar{grid-template-columns:1fr}.view-switcher{grid-row:auto}
}

/* v12 — finished product design */
:root{
  color-scheme:light;
  --ink:#132238;
  --ink-soft:#34445a;
  --muted:#718096;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --canvas:#f5f7fb;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --navy:#0b2139;
  --navy-2:#123b5b;
  --teal:#0d9488;
  --teal-dark:#0f766e;
  --teal-soft:#e6f7f4;
  --focus:rgba(13,148,136,.16);
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 3px 10px rgba(15,23,42,.04);
  --shadow-md:0 12px 36px rgba(15,35,58,.09);
  --shadow-lg:0 28px 80px rgba(4,20,38,.28);
}
html{background:var(--canvas);scroll-behavior:smooth}
body{color:var(--ink);background:
  radial-gradient(circle at 15% 0%,rgba(13,148,136,.045),transparent 26rem),
  var(--canvas);font-size:14px;-webkit-font-smoothing:antialiased}
button,a,input,select,textarea{transition:border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
button[hidden]{display:none!important}

header{position:relative;overflow:hidden;background:
  radial-gradient(circle at 78% -60%,rgba(74,222,200,.28),transparent 31rem),
  linear-gradient(118deg,var(--navy) 0%,#0e3150 62%,#0b5961 145%);box-shadow:0 8px 32px rgba(7,28,50,.16)}
header::after{content:"";position:absolute;inset:auto -8% -70px auto;width:340px;height:180px;border:1px solid rgba(255,255,255,.07);border-radius:50%;transform:rotate(-10deg);pointer-events:none}
.header-inner{position:relative;z-index:1;max-width:1320px;padding:26px 32px}
.brand{min-width:0}.brand-mark{width:50px;height:50px;border-radius:15px;border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 28px rgba(0,0,0,.22)}
.brand h1{font-size:clamp(23px,2.4vw,31px);font-weight:780;letter-spacing:-.035em}
.subtitle{color:#b9cada;font-size:13px}
.eyebrow{color:#67e8d3;font-size:9px;letter-spacing:.19em}
.header-user{gap:16px;color:#c8d7e5}
.user-chip{display:flex;align-items:center;gap:10px;padding:7px 11px 7px 7px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.07);backdrop-filter:blur(8px)}
.user-avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(145deg,#5eead4,#2dd4bf);color:#073c37;font-size:12px;font-weight:900}
.user-copy{display:grid;line-height:1.18}.user-copy small{font-size:9px;color:#a9bfd1}.user-copy strong{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:12px}
.header-links{display:flex;align-items:center;gap:14px}.header-links a,.header-link{font-size:12px;color:#fff!important}
.header-links a:hover,.header-link:hover{color:#fff!important;text-decoration:none}

/* v17 — account settings */
.settings-back{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff}.settings-back:hover{background:rgba(255,255,255,.17);color:#fff}
.settings-header{min-height:112px}.settings-back{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.settings-page{max-width:1180px;padding-top:30px}.settings-page .settings-grid{padding:0}
.settings-intro{display:flex;align-items:center;gap:15px;margin-bottom:20px;padding:19px 22px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.9);box-shadow:var(--shadow-sm)}
.settings-profile-avatar{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;background:linear-gradient(145deg,#dff7f3,#bcebe4);color:var(--teal-dark);font-size:19px;font-weight:850}
.settings-profile-copy{min-width:0}.settings-profile-copy .eyebrow{margin:0 0 3px;color:var(--teal-dark)}.settings-profile-copy h2{margin:0;font-size:17px}.settings-profile-copy p:last-child{margin:2px 0 0;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.role-badge{margin-left:auto;padding:6px 10px;border:1px solid #bde5df;border-radius:999px;background:var(--teal-soft);color:var(--teal-dark);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.settings-page>.flash{margin-bottom:20px}
.settings-section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:30px 2px 14px}.settings-section-heading h2{margin:2px 0 0;font-size:20px;letter-spacing:-.025em}.settings-section-heading>p{max-width:360px;margin:0;color:var(--muted);font-size:12px;text-align:right}.settings-admin-heading{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.settings-card-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:21px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.settings-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:var(--teal-soft);color:var(--teal-dark);font-size:14px;font-weight:900}
.settings-card-head h2{margin:1px 0 5px;font-size:18px}.settings-card-head p:last-child{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.settings-kicker{margin:0;color:var(--teal-dark);font-size:9px;font-weight:850;letter-spacing:.13em}
.settings-card{height:100%}.settings-card-form{height:calc(100% - 78px)}.settings-submit{justify-self:start;min-width:168px;margin-top:auto}
.settings-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field-help{display:block;margin-top:5px;color:var(--muted);font-size:10px;font-weight:500}
.notification-toggle{position:relative;display:flex!important;align-items:center!important;justify-content:space-between;gap:20px;padding:15px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);cursor:pointer}
.notification-toggle span{display:grid;gap:3px}.notification-toggle strong{color:var(--ink);font-size:13px}.notification-toggle small{color:var(--muted);font-size:11px;font-weight:500}.notification-toggle input{position:absolute;opacity:0;pointer-events:none}
.notification-toggle i{position:relative;width:42px;height:24px;flex:0 0 auto;border-radius:999px;background:#cbd5e1;transition:.2s}.notification-toggle i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.25);transition:.2s}
.notification-toggle input:checked+i{background:var(--teal)}.notification-toggle input:checked+i::after{transform:translateX(18px)}.notification-toggle input:focus-visible+i{outline:3px solid var(--focus);outline-offset:2px}
.settings-personal-grid{grid-template-columns:minmax(300px,.85fr) minmax(420px,1.15fr)}
.settings-admin-grid{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(470px,1.28fr);align-items:start;gap:22px}
.registered-users-card{max-height:650px}.user-list{max-height:484px;overflow:auto;padding-right:5px;scrollbar-width:thin}.user-list-item{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px!important;border:0!important;border-radius:12px!important;background:#fff}
.user-list-item:nth-child(odd){background:#f8fafc}.user-list-item:hover{background:#f1faf8}
.user-list-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#e8f7f4;color:var(--teal-dark);font-size:12px;font-weight:850}.user-list-copy{min-width:0;display:grid}.user-list-copy strong{font-size:13px}.user-list-copy span,.user-list-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-list-copy small{display:flex;align-items:center;gap:5px}.status-dot{width:6px;height:6px;display:inline-block;flex:0 0 auto;border-radius:50%;background:#94a3b8}.status-dot.active{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.1)}.status-dot.inactive{background:#f59e0b}
.user-role{padding:5px 8px;border-radius:999px;background:#eef2f7;color:#5d6b7e;font-size:9px!important;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.user-role.admin{background:#e8f7f4;color:var(--teal-dark)}
@media(max-width:900px){.settings-personal-grid,.settings-admin-grid{grid-template-columns:1fr}.settings-card-form{height:auto}.settings-submit{margin-top:3px}}
@media(max-width:820px){.settings-page{padding-top:20px}.settings-page .settings-grid{padding-top:0}.settings-intro{padding:17px 18px}.settings-header{min-height:0}}
@media(max-width:560px){.settings-header{align-items:stretch}.settings-back{justify-content:center;width:100%}.settings-section-heading{display:block}.settings-section-heading>p{margin-top:5px;text-align:left}.settings-field-row{grid-template-columns:1fr}}
@media(max-width:480px){.settings-card{padding:21px 18px}.settings-intro{align-items:flex-start;flex-wrap:wrap}.role-badge{margin-left:63px;margin-top:-13px}.settings-card-head{gap:11px}.settings-submit{width:100%}.notification-toggle{padding:13px}.user-list-item{grid-template-columns:34px minmax(0,1fr)}.user-list-avatar{width:32px;height:32px}.user-role{grid-column:2;justify-self:start}}
.header-action{min-height:42px;padding:11px 17px;border-radius:11px;background:linear-gradient(145deg,#45ddc4,#22c5ad);box-shadow:0 8px 20px rgba(2,18,32,.22);color:#062f2a}
.header-action:hover{background:linear-gradient(145deg,#66e6d1,#39cfb8);box-shadow:0 11px 25px rgba(2,18,32,.28)}

main{max-width:1320px;padding:28px 32px 68px}
.flash{display:flex;align-items:center;min-height:48px;padding:13px 16px;border-radius:12px;box-shadow:var(--shadow-sm)}
.toolbar{min-height:56px;margin-bottom:16px;padding:8px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.88);box-shadow:var(--shadow-sm);backdrop-filter:blur(10px)}
.period-navigation{gap:6px}.nav-button,.today-button,.date-form input{height:40px;border-color:var(--line);border-radius:9px;background:var(--surface)}
.nav-button{width:40px}.today-button{padding-inline:16px}.date-form input{font-size:13px}
.nav-button:hover,.today-button:hover{border-color:#8dd4ca;background:#f3fbfa;box-shadow:0 3px 10px rgba(13,148,136,.08)}
.view-switcher{padding:4px;border:1px solid #e2e8f0;background:#eef2f7;border-radius:11px}
.view-switcher a{padding:8px 17px;border-radius:8px;color:#64748b}
.view-switcher a:hover{color:var(--ink)}.view-switcher a.active{color:var(--teal-dark);box-shadow:0 2px 8px rgba(15,23,42,.1)}
.legend{padding-right:8px}.legend span{box-shadow:0 0 0 4px var(--teal-soft)}

.schedule{border-color:var(--line);border-radius:18px;box-shadow:var(--shadow-md)}
.section-title{min-height:84px;padding:20px 25px;background:linear-gradient(180deg,#fff,#fdfefe);border-bottom-color:var(--line)}
.section-title p:first-child{color:var(--teal-dark);font-size:10px;font-weight:850;letter-spacing:.1em}
.section-title h2{font-size:22px;font-weight:780;color:var(--ink)}
.section-help{display:flex;align-items:center;gap:6px;color:#7c899a!important}
.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:22px 25px 26px;background:#fbfcfe}
.booking-card{position:relative;min-height:176px;padding:17px 18px;border-color:var(--line);border-left:0;border-radius:13px;box-shadow:var(--shadow-sm);overflow:hidden}
.booking-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(#19b7a6,#0d9488)}
.booking-card:hover{transform:translateY(-3px);border-color:#b8ddd8;box-shadow:0 14px 30px rgba(18,52,70,.11)}
.booking-card .time{font-size:11px;letter-spacing:.015em}.booking-card strong{margin:3px 0;font-size:16px;line-height:1.35}
.booking-card span:not(.time):not(.edit-hint){line-height:1.45}.edit-hint{margin-top:auto;padding-top:8px}
.empty{padding:84px 20px;background:linear-gradient(180deg,#fff,#fbfcfe)}
.empty::before{content:"";display:block;width:52px;height:52px;margin:0 auto 16px;border:1px solid #bfe5df;border-radius:16px;background:linear-gradient(145deg,#effaf8,#dff5f1);box-shadow:inset 0 0 0 10px #f8fdfc}

.week-table{grid-template-columns:190px repeat(7,minmax(150px,1fr));min-width:1240px;background:#e4e9f0}
.week-corner{position:sticky;left:0;z-index:4;background:#eef3f7}
.week-date-heading{padding:13px 8px;background:#f6f8fb}.week-date-heading:hover{background:#edf7f5}
.week-date-heading.today{background:#dff6f2;box-shadow:inset 0 -2px 0 var(--teal)}
.week-date-heading span{color:#7c8797}.week-date-heading strong{font-size:13px}
.week-room-heading{z-index:3;min-height:118px;padding:15px 17px;background:#fbfcfe;box-shadow:4px 0 12px rgba(15,23,42,.05)}
.week-room-heading strong{font-size:13px}.week-room-heading span{color:var(--teal-dark);font-weight:700}.week-room-heading small{color:#8a95a5}
.week-cell{min-height:118px;padding:9px;background:#fff}.week-cell.today{background:#f1fbf9}
.week-available{min-height:86px;color:#a0aaba}.week-available:hover{border-color:#8bd2c7;background:#edf9f7}
.calendar-booking{border-left-color:var(--teal);border-radius:7px;background:#e8f7f4;padding:8px 9px;box-shadow:0 1px 2px rgba(13,148,136,.07)}
.calendar-booking:hover{transform:translateY(-1px);background:#daf3ee;box-shadow:0 5px 12px rgba(13,148,136,.1)}

.month-weekdays{background:#f4f7fa}.month-weekdays span{padding:12px 10px;color:#748196}
.month-weekdays span:nth-last-child(-n+2){color:#96706f}
.month-grid{background:#e4e9f0}.month-day{min-height:142px;padding:9px;background:#fff}.month-day:hover{background:#fcfefe}.month-day.today{background:#f0fbf9;box-shadow:inset 0 0 0 1px #b6e5de}
.month-day.outside{background:#f7f9fb}.month-day-head{justify-content:space-between}.month-date{order:2;border-radius:9px}.month-date:hover{background:#eef7f5;color:var(--teal-dark)}
.month-day.today .month-date{background:var(--teal);box-shadow:0 4px 10px rgba(13,148,136,.25)}
.month-count{order:1;background:#eef2f7}.month-booking{border-left-color:var(--teal);border-radius:5px;padding:5px 7px;background:#e8f7f4}
.month-booking:hover{transform:translateX(1px);background:#d9f3ee}

dialog{border:1px solid rgba(255,255,255,.5);border-radius:20px;box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(6,18,32,.68);backdrop-filter:blur(5px)}
dialog form{padding:26px 28px 28px}.dialog-head{padding-bottom:4px}.dialog-head h2{font-size:24px;letter-spacing:-.025em}
.icon-button{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#f1f4f7;font-size:23px}.icon-button:hover{background:#e7ecf2;color:#172033}
.form-grid{gap:17px 16px}.form-grid label,.stack-form label{color:#4b5b70;font-size:11px;letter-spacing:.01em}
.form-grid input,.form-grid select,.form-grid textarea,.stack-form input,.stack-form select{min-height:43px;margin-top:7px;border-color:#cfd8e3;border-radius:10px;padding:10px 12px}
.form-grid textarea{min-height:88px;resize:vertical}.form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover,.stack-form input:hover,.stack-form select:hover{border-color:#aab7c7}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.stack-form input:focus,.stack-form select:focus{border-color:var(--teal);box-shadow:0 0 0 4px var(--focus)}
.dialog-actions{padding-top:20px;border-top:1px solid var(--line)}
.primary,.secondary,.danger,.ghost{min-height:41px;border-radius:10px}.primary{background:linear-gradient(145deg,#16a596,#0d9488);color:#fff;box-shadow:0 6px 14px rgba(13,148,136,.2)}.primary:hover{background:linear-gradient(145deg,#159b8f,#0b8379);box-shadow:0 9px 18px rgba(13,148,136,.24)}
.ghost{background:#f1f4f7}.ghost:hover{background:#e7ecf2}.danger{border:1px solid #fed7d2}.danger:hover{background:#ffe8e5}

.auth-page{position:relative;overflow:hidden;background:
  radial-gradient(circle at 18% 20%,rgba(45,212,191,.2),transparent 28rem),
  radial-gradient(circle at 86% 86%,rgba(56,189,248,.12),transparent 26rem),
  linear-gradient(135deg,#081c31,#0d3451 62%,#0b5961);padding:32px}
.auth-page::before,.auth-page::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%;pointer-events:none}
.auth-page::before{width:520px;height:520px;left:-300px;bottom:-300px}.auth-page::after{width:380px;height:380px;right:-220px;top:-220px}
.auth-shell{position:relative;z-index:1;width:min(450px,100%)}
.auth-card{padding:34px 36px;border:1px solid rgba(255,255,255,.65);border-radius:22px;box-shadow:0 30px 90px rgba(0,10,25,.32)}
.auth-logo{width:68px;height:68px;margin-bottom:22px;border-radius:20px;box-shadow:0 12px 28px rgba(6,33,54,.2)}
.auth-card h1{margin-bottom:9px;font-size:29px;letter-spacing:-.035em}.auth-card>p:not(.eyebrow){margin-bottom:24px}
.auth-card .eyebrow{color:var(--teal-dark)}.auth-card .primary{width:100%;margin-top:3px}
.auth-footnote{color:#8793a2!important}

.settings-grid{max-width:1180px;align-items:start;gap:22px;padding-top:30px}
.settings-card{padding:25px 26px;border-radius:17px;box-shadow:var(--shadow-sm)}
.settings-card h2{margin-bottom:19px;font-size:18px;letter-spacing:-.02em}
.user-list>div{position:relative}

@media(max-width:980px){
  .header-inner{align-items:flex-start}.header-user{max-width:520px}.user-chip{order:0}.header-links{order:1}.header-action{order:2}
  .toolbar{grid-template-columns:1fr auto}.legend{display:none}.view-switcher{justify-self:end}
}
@media(max-width:820px){
  .header-inner{padding:22px 18px}.header-user{max-width:none;display:grid;grid-template-columns:1fr auto;width:100%;gap:11px}
  .user-chip{grid-column:1}.header-links{grid-column:2;justify-content:flex-end}.header-action{grid-column:1/-1}
  main{padding:18px 12px 44px}.toolbar{padding:7px}.section-title{min-height:0}.schedule{border-radius:15px}
  .month-day{min-height:132px}
  dialog form{padding:22px 20px}.settings-grid{padding-top:20px}
}
@media(max-width:560px){
  .auth-page{padding:18px}.auth-card{padding:28px 23px}.auth-card h1{font-size:26px}
  .brand{align-items:flex-start}.subtitle{max-width:280px}.header-user{grid-template-columns:1fr}.header-links{grid-column:1;justify-content:flex-start}.header-action{grid-column:1}
  .toolbar{display:grid;grid-template-columns:1fr}.period-navigation{grid-template-columns:40px 1fr 40px}.view-switcher{width:100%;justify-self:stretch}
  .cards{padding:15px}.booking-card{min-height:164px}.section-title{padding:17px 18px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}

/* v18 — unified blue design system */
:root{
  --ink:#10213a;
  --ink-soft:#334968;
  --muted:#6b7f9d;
  --line:#dbe5f2;
  --line-strong:#bfd0e4;
  --canvas:#f2f7fd;
  --surface:#ffffff;
  --surface-soft:#f6f9fe;
  --navy:#082b5c;
  --navy-2:#0b4d91;
  --teal:#1677d2;
  --teal-dark:#0b5cad;
  --teal-soft:#e8f3ff;
  --focus:rgba(22,119,210,.18);
  --shadow-sm:0 1px 2px rgba(12,54,104,.04),0 4px 14px rgba(12,54,104,.06);
  --shadow-md:0 14px 38px rgba(12,54,104,.10);
  --shadow-lg:0 28px 80px rgba(3,30,67,.30);
}
html{background:var(--canvas)}
body{
  background:
    radial-gradient(circle at 12% 0%,rgba(46,144,235,.09),transparent 30rem),
    radial-gradient(circle at 92% 22%,rgba(90,169,244,.06),transparent 28rem),
    var(--canvas);
}
header{
  background:
    radial-gradient(circle at 82% -55%,rgba(112,190,255,.32),transparent 33rem),
    linear-gradient(118deg,#072750 0%,#0a4380 58%,#0b67b9 145%);
  box-shadow:0 8px 32px rgba(4,43,88,.22);
}
.subtitle,.header-user{color:#c7dcf2}
.eyebrow{color:#8dccff}
.user-chip{border-color:rgba(184,220,255,.24);background:rgba(255,255,255,.09)}
.user-copy small{color:#b7d2ec}
.user-avatar{
  background:linear-gradient(145deg,#a8dcff,#4ba6ed);
  color:#073663;
}
.header-action,.primary{
  background:linear-gradient(145deg,#2f98ed,#1677d2);
  color:#fff;
  box-shadow:0 7px 18px rgba(3,48,96,.24);
}
.header-action:hover,.primary:hover{
  background:linear-gradient(145deg,#4aa9f2,#126ac0);
  box-shadow:0 10px 24px rgba(3,48,96,.30);
}
.secondary{background:var(--teal-soft);color:var(--teal-dark)}
.toolbar{border-color:#d7e3f1;background:rgba(255,255,255,.91)}
.nav-button:hover,.today-button:hover{border-color:#87bce9;color:var(--teal-dark);background:#f1f8ff;box-shadow:0 3px 10px rgba(22,119,210,.10)}
.view-switcher{border-color:#dbe5f0;background:#eaf1f9}
.view-switcher a.active{color:var(--teal-dark);background:#fff;box-shadow:0 3px 10px rgba(22,88,150,.12)}
.legend span{background:#2d8fe1;box-shadow:0 0 0 4px var(--teal-soft)}
.section-title{background:linear-gradient(180deg,#fff,#f8fbff)}
.section-title p:first-child,.booking-card .time,.edit-hint{color:var(--teal-dark)}
.cards{background:#f8fbff}
.booking-card::before{background:linear-gradient(#4ca7ef,#176fca)}
.booking-card:hover{border-color:#accfed;box-shadow:0 14px 30px rgba(18,83,145,.13)}
.status-dot{background:#2f91e2}
.empty::before{border-color:#b8d8f3;background:linear-gradient(145deg,#f3f9ff,#ddecfb);box-shadow:inset 0 0 0 10px #f9fcff}
.week-corner{background:#eaf2fb}
.week-date-heading:hover{background:#edf6ff}
.week-date-heading.today{background:#dceeff;box-shadow:inset 0 -2px 0 var(--teal)}
.week-date-heading.today strong{color:var(--teal-dark)}
.week-room-heading span{color:var(--teal-dark)}
.week-cell.today,.month-day.today{background:#eff7ff}
.week-available:hover{border-color:#8fc2eb;background:#edf7ff;color:var(--teal-dark)}
.calendar-booking,.month-booking{
  border-left-color:var(--teal);
  background:#e6f2ff;
  color:#163f67;
  box-shadow:0 1px 2px rgba(22,119,210,.08);
}
.calendar-booking:hover,.month-booking:hover{background:#d7eaff;box-shadow:0 5px 12px rgba(22,119,210,.12)}
.calendar-booking span,.calendar-booking small,.month-booking span{color:#326b9f}
.calendar-booking strong{color:#183f64}
.month-day.today{box-shadow:inset 0 0 0 1px #abd3f3}
.month-date:hover{background:#e7f3ff;color:var(--teal-dark)}
.month-day.today .month-date{background:var(--teal);box-shadow:0 4px 10px rgba(22,119,210,.28)}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.stack-form input:focus,.stack-form select:focus{border-color:var(--teal);box-shadow:0 0 0 4px var(--focus)}
.auth-page{
  background:
    radial-gradient(circle at 18% 20%,rgba(85,168,240,.24),transparent 29rem),
    radial-gradient(circle at 86% 86%,rgba(62,139,215,.20),transparent 27rem),
    linear-gradient(135deg,#051f43,#083d75 60%,#0b67b9);
}
.auth-card .eyebrow{color:var(--teal-dark)}
.settings-profile-avatar{
  background:linear-gradient(145deg,#e4f2ff,#badbfa);
  color:var(--teal-dark);
}
.role-badge{border-color:#bad8f2;background:var(--teal-soft);color:var(--teal-dark)}
.settings-profile-copy .eyebrow,.settings-kicker{color:var(--teal-dark)}
.settings-icon{background:var(--teal-soft);color:var(--teal-dark)}
.notification-toggle input:checked+i{background:var(--teal)}
.user-list-avatar{background:#e5f2ff;color:var(--teal-dark)}
.user-list-item:nth-child(odd){background:#f6f9fd}
.user-list-item:hover{background:#edf6ff}
.user-role.admin{background:#e6f2ff;color:var(--teal-dark)}
.settings-back{border-color:rgba(196,224,250,.27);background:rgba(255,255,255,.11)}
.settings-back:hover{background:rgba(255,255,255,.19)}

/* v20 — attachments and reservation audit details */
.settings-personal-grid.single-card{grid-template-columns:minmax(0,760px);justify-content:start}
.attachment-field small{display:block;margin-top:7px;color:var(--muted);font-weight:500}
.attachment-field input[type=file]{padding:10px;background:#f8fbff}
.current-attachment{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;
  border:1px solid #c9def2;border-radius:10px;background:#f1f8ff;color:var(--ink-soft)
}
.current-attachment[hidden],.audit-details[hidden]{display:none}
.attachment-link{font-weight:750;color:var(--teal-dark);text-decoration:none}
.attachment-link:hover{text-decoration:underline}
.remove-attachment{margin-left:auto;display:flex!important;align-items:center;gap:7px;font-size:13px!important}
.remove-attachment input{width:auto!important;margin:0}
.audit-details{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)
}
.audit-details div{display:grid;gap:2px}
.audit-details small{color:var(--muted);font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
.audit-details strong{color:var(--ink)}
.audit-details span{color:var(--muted);font-size:12px}
.attachment-indicator{color:var(--teal-dark)!important;font-weight:700}
.recurrence-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px;border:1px solid #cfe0f4;border-radius:12px;background:#f5f9ff}
.recurrence-fields[hidden],.recurrence-fields label[hidden]{display:none}
.recurrence-fields p{grid-column:1/-1;margin:0;color:var(--muted);font-size:12px;font-weight:600}
@media(max-width:640px){
  .recurrence-fields{grid-template-columns:1fr}
  .recurrence-fields p{grid-column:auto}
}
@media(max-width:560px){
  .audit-details{grid-template-columns:1fr}
  .remove-attachment{margin-left:0;width:100%}
}