:root { --ink:#20191e; --muted:#6d6269; --paper:#fffafc; --pink:#dda9d2; --pink-deep:#b966a5; --pink-soft:#f7e8f2; --line:rgba(67,42,58,.13); --danger:#a83c4d; --green:#2f7a57; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
header { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 max(20px,calc((100% - 1080px)/2)); border-bottom:1px solid var(--line); background:white; font-size:13px; font-weight:700; }
.brand { display:flex; align-items:center; gap:10px; font-family:"Playfair Display",serif; font-size:18px; }
.brand img { width:43px; height:43px; object-fit:cover; border-radius:50%; border:1px solid var(--line); }
main { width:min(1080px,calc(100% - 32px)); margin:0 auto; padding:60px 0 90px; }
.admin-heading { margin-bottom:30px; }
.admin-heading p { margin:0 0 8px; color:var(--pink-deep); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; }
h1,h2 { font-family:"Playfair Display",serif; }
h1 { margin:0 0 10px; font-size:clamp(42px,7vw,68px); letter-spacing:-.04em; }
.admin-heading span,.panel p,.toolbar span { color:var(--muted); }
.panel { padding:24px; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:0 18px 55px rgba(76,45,63,.07); }
.login-card { width:min(480px,100%); }
.login-card h2 { margin-top:0; font-size:30px; }
label span { display:block; margin-bottom:7px; font-size:12px; font-weight:800; }
input { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:12px; outline:none; }
input:focus { border-color:var(--pink-deep); box-shadow:0 0 0 3px rgba(185,102,165,.12); }
button { min-height:43px; padding:0 17px; border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:white; font-weight:800; cursor:pointer; }
.login-card button { width:100%; margin-top:13px; }
button.secondary { background:white; color:var(--ink); }
button.danger { background:var(--danger); border-color:var(--danger); }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.toolbar strong,.toolbar span { display:block; }
.toolbar strong { font-family:"Playfair Display",serif; font-size:25px; }
.toolbar-actions { display:flex; gap:8px; }
.status { min-height:24px; margin:10px 0; font-size:13px; color:var(--muted); }
.status.error { color:var(--danger); }
.booking-list { display:grid; gap:12px; }
.booking-card { display:grid; grid-template-columns:150px 1fr auto; gap:22px; align-items:center; padding:20px; border:1px solid var(--line); border-radius:18px; background:white; }
.booking-card.cancelled { opacity:.58; }
.booking-date strong,.booking-date span { display:block; }
.booking-date strong { font-family:"Playfair Display",serif; font-size:24px; }
.booking-date span { color:var(--pink-deep); font-size:12px; font-weight:800; }
.booking-info h3 { margin:0 0 6px; font-size:18px; }
.booking-info p { margin:3px 0; color:var(--muted); font-size:13px; }
.booking-info .notes { margin-top:8px; padding:9px 11px; border-radius:10px; background:var(--pink-soft); color:var(--ink); }
.booking-actions { display:grid; gap:7px; min-width:145px; }
.booking-actions a,.booking-actions button { display:flex; align-items:center; justify-content:center; min-height:39px; padding:0 14px; border-radius:999px; font-size:12px; font-weight:800; }
.booking-actions a { border:1px solid var(--ink); }
.status-pill { display:inline-block; margin-left:8px; padding:3px 8px; border-radius:999px; background:#e5f2eb; color:var(--green); font-size:10px; text-transform:uppercase; }
.status-pill.cancelled { background:#f3e2e5; color:var(--danger); }
.empty { padding:50px; border:1px dashed var(--line); border-radius:18px; text-align:center; color:var(--muted); }
dialog { width:min(430px,calc(100% - 30px)); border:0; border-radius:22px; padding:30px; box-shadow:0 30px 100px rgba(42,26,36,.3); }
dialog::backdrop { background:rgba(32,25,30,.55); }
dialog h2 { margin-top:0; font-size:31px; }
dialog p { color:var(--muted); }
.dialog-actions { display:flex; gap:9px; margin-top:22px; }
.dialog-actions button { flex:1; }
@media(max-width:760px){ main{padding-top:42px}.toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{width:100%}.toolbar-actions button{flex:1}.booking-card{grid-template-columns:1fr;gap:12px}.booking-actions{grid-template-columns:1fr 1fr}.dialog-actions{flex-direction:column} }