:root { --ink:#19222d; --muted:#647180; --paper:#fffdf8; --canvas:#e8f0ed; --line:#d7e0dc; --teal:#076b68; --teal-dark:#034c4b; --warm:#d9623b; --shadow:0 18px 45px rgba(25,34,45,.10); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:"Manrope",sans-serif; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; }
[hidden] { display:none !important; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(125deg,#d9ebe5 0%,#f8f0df 54%,#e7d2c1 100%); }
.login-panel { width:min(100%,460px); padding:44px; background:var(--paper); border:1px solid rgba(7,107,104,.13); box-shadow:var(--shadow); border-radius:8px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800; } .brand span { display:grid; place-items:center; width:32px; height:32px; color:#fff; background:var(--warm); border-radius:50%; }
.eyebrow { margin:32px 0 8px; color:var(--teal); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1,h2 { font-family:"Playfair Display",serif; margin:0; letter-spacing:0; } h1 { font-size:2.5rem; line-height:1.08; } h2 { font-size:1.6rem; } .supporting-copy,.demo-note,.empty-state { color:var(--muted); line-height:1.6; } .demo-note { margin:28px 0 0; font-size:.82rem; }
.form-stack { display:grid; gap:17px; margin-top:30px; } label { display:grid; gap:7px; font-size:.84rem; font-weight:700; } input,select,textarea { min-width:0; width:100%; padding:11px 12px; border:1px solid var(--line); background:#fff; border-radius:4px; color:var(--ink); } textarea { min-height:92px; resize:vertical; }
.primary-action,.outline-action,.join-class { border:0; border-radius:4px; padding:12px 16px; font-weight:800; text-decoration:none; text-align:center; }.primary-action,.join-class { background:var(--teal); color:#fff; }.outline-action { border:1px solid var(--teal); color:var(--teal); background:transparent; }.form-status { min-height:20px; margin:0; color:var(--teal); font-size:.86rem; }.form-status.is-error { color:#b43125; }
.dashboard { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }.sidebar { min-height:100vh; display:flex; flex-direction:column; gap:28px; padding:30px 22px; background:var(--paper); border-right:1px solid var(--line); }.user-summary { display:grid; gap:3px; padding:16px 0; border-block:1px solid var(--line); }.user-summary small,.user-summary span { color:var(--muted); font-size:.78rem; }.user-summary strong { font-size:.94rem; } nav { display:grid; gap:5px; }.nav-item,.logout-button { border:0; background:transparent; text-align:left; color:var(--muted); padding:11px 12px; border-radius:4px; font-weight:700; }.nav-item.is-active { color:var(--teal-dark); background:#dceee8; }.logout-button { margin-top:auto; color:#9a3325; }
.content-area { width:min(1240px,100%); padding:38px; margin:0 auto; }.dashboard-header,.panel-heading,.booking-item,.booking-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; }.dashboard-header { margin-bottom:30px; }.dashboard-header .eyebrow,.panel-heading .eyebrow { margin:0 0 6px; }.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }.metric-grid article,.panel { background:var(--paper); border:1px solid rgba(7,107,104,.12); border-radius:6px; box-shadow:0 8px 20px rgba(25,34,45,.04); }.metric-grid article { padding:22px; display:grid; gap:10px; }.metric-grid span { color:var(--muted); font-size:.82rem; font-weight:700; }.metric-grid strong { font-family:"Playfair Display",serif; font-size:1.65rem; }.panel { padding:26px; margin-top:20px; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:22px; }.form-grid .wide { grid-column:1 / -1; }.form-grid .primary-action { width:max-content; }.table-wrap { overflow:auto; margin-top:20px; } table { border-collapse:collapse; width:100%; min-width:600px; font-size:.88rem; } th,td { padding:13px 10px; text-align:left; border-bottom:1px solid var(--line); } th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }.role-tag { color:var(--teal); font-weight:800; }.booking-list { display:grid; margin-top:16px; }.booking-item { padding:16px 0; border-bottom:1px solid var(--line); }.booking-item div:first-child { display:grid; gap:4px; }.booking-item span,time { color:var(--muted); font-size:.84rem; }.join-class { font-size:.8rem; padding:9px 11px; white-space:nowrap; }.text-action { padding:7px 3px; border:0; background:transparent; color:var(--teal); font-size:.78rem; font-weight:800; }.text-action.is-danger { color:#a73728; }.row-actions { white-space:nowrap; }.edit-dialog { width:min(100% - 32px,620px); padding:28px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); }.edit-dialog::backdrop { background:rgba(25,34,45,.48); }.dialog-heading { grid-column:1 / -1; }.dialog-heading .eyebrow { margin:0 0 5px; }.dialog-actions { display:flex; justify-content:flex-end; gap:10px; }.dialog-actions .outline-action { cursor:pointer; }
@media (max-width:760px) { .dashboard { display:block; }.sidebar { min-height:auto; padding:18px; gap:16px; }.sidebar nav { display:flex; overflow-x:auto; }.logout-button { margin-top:0; }.content-area { padding:24px 16px; }.metric-grid,.form-grid { grid-template-columns:1fr; }.form-grid .wide { grid-column:auto; }.form-grid .primary-action { width:100%; }.booking-item { align-items:flex-start; flex-direction:column; }.booking-actions { width:100%; }.login-panel { padding:30px 24px; } }