:root{
  --bg:#f6f7f9;--card:#fff;--text:#17191d;--muted:#6d7480;--border:#dfe3e8;
  --dark:#111318;--accent:#c79a3b;--accent2:#e5c06c;--ok:#19734c;--danger:#b42318;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
.container{width:min(1120px,calc(100% - 32px));margin:auto}
.topbar{background:var(--dark);color:#fff;position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center}.brand-mark{font-size:32px;color:var(--accent2)}
.brand strong{display:block;font-size:18px}.brand small{color:#aeb4bf}
.admin-link{color:#fff;text-decoration:none;border:1px solid #424751;border-radius:10px;padding:8px 12px;font-size:14px}
.hero{background:linear-gradient(135deg,#111318 0%,#262b32 100%);color:#fff;padding:52px 0}
.hero-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:34px;align-items:center}
.eyebrow{display:inline-block;color:var(--accent2);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
h1{font-size:clamp(34px,5vw,58px);line-height:1.05;margin:14px 0 16px}
.hero p{font-size:18px;color:#c9ced6;max-width:720px}
.hero-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.hero-badges span{background:#20242a;border:1px solid #3a4048;padding:9px 12px;border-radius:999px;font-size:14px}
.hero-card{background:#1b1f24;border:1px solid #343a43;border-radius:22px;padding:28px;min-height:220px;display:flex;flex-direction:column;justify-content:center}
.hero-card .scissors{font-size:58px;color:var(--accent2);margin-bottom:10px}.hero-card strong{font-size:24px}.hero-card p{font-size:15px}
.booking-wrap{margin-top:-24px;padding-bottom:50px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.step{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;display:flex;align-items:center;gap:9px;color:var(--muted)}
.step b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#eef0f3}.step.active b{background:var(--accent);color:#111}.step.active{color:var(--text)}
.booking-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:0 12px 32px rgba(0,0,0,.06)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
label span{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
input,select{width:100%;border:1px solid var(--border);border-radius:11px;padding:12px 13px;background:#fff;font:inherit;outline:none}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(199,154,59,.15)}
select:disabled{background:#f2f3f5;color:#969ba3}
.slot-section,.customer-section{border-top:1px solid var(--border);margin-top:24px;padding-top:24px}
.section-title{display:flex;justify-content:space-between;gap:14px;align-items:center}.section-title h2,.customer-section h2{font-size:20px;margin:0}.section-title p{margin:5px 0 0;color:var(--muted);font-size:14px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-top:16px}
.slot{border:1px solid var(--border);background:#fff;border-radius:10px;padding:10px;text-align:center;cursor:pointer;font-weight:700}
.slot:hover{border-color:var(--accent)}.slot.selected{background:var(--dark);color:#fff;border-color:var(--dark)}
.slot small{display:block;font-weight:400;color:var(--muted);margin-top:3px}.slot.selected small{color:#c9ced6}
.empty-state{grid-column:1/-1;border:1px dashed var(--border);border-radius:12px;padding:28px;text-align:center;color:var(--muted)}
.btn{border:0;border-radius:11px;padding:11px 16px;font:inherit;font-weight:700;cursor:pointer}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);color:#17191d}.btn.secondary{background:#eef0f3;color:#333}
.summary{margin-top:24px;border-radius:14px;background:#f7f4ec;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.summary span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}.summary strong{display:block}
.notice{padding:12px 14px;border-radius:10px;margin-bottom:18px}.notice.error{background:#fff0ee;color:var(--danger);border:1px solid #f2c3bd}.notice.info{background:#eef7f2;color:var(--ok);border:1px solid #bee0cf}
.hidden{display:none!important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:grid;place-items:center;padding:20px;z-index:100}
.modal-card{background:#fff;border-radius:18px;padding:28px;width:min(480px,100%);text-align:center}
.success-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:#e8f6ee;color:var(--ok);font-size:32px;font-weight:800}
.receipt{text-align:left;background:#f6f7f9;border-radius:12px;padding:16px;margin:18px 0}.receipt div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid #e3e6ea}.receipt div:last-child{border-bottom:0}
footer{padding:26px 0;color:var(--muted);font-size:13px;text-align:center}
@media(max-width:760px){
  .hero-grid,.form-grid{grid-template-columns:1fr}.hero{padding:38px 0 50px}.hero-card{min-height:auto}
  .steps{grid-template-columns:repeat(2,1fr)}.summary{align-items:stretch;flex-direction:column}.summary .btn{width:100%}
  .booking-card{padding:18px}
}