:root { --bg:#141414; --card:#1e1e1e; --gold:#D4A017; --txt:#f5f5f5; --mut:#a8a8a8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt);
  font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif; }
body::before { content:''; position:fixed; inset:0; z-index:-1;
  background:url('/static/barber-bg.jpg') center/cover no-repeat;
  opacity:.14; }
.wrap { max-width:560px; margin:0 auto; padding:16px 16px 40px; }
h1 { font-size:1.5rem; margin:.4em 0; }
h2 { font-size:1.2rem; color:var(--gold); margin:1em 0 .5em; }
p { color:var(--mut); line-height:1.5; }
a { color:var(--gold); }
.card { background:var(--card); border:1px solid #2c2c2c; border-radius:12px;
  padding:14px; margin:10px 0; }
.btn { display:block; width:100%; text-align:center; background:var(--gold);
  color:#141414; font-weight:700; border:0; border-radius:10px;
  padding:14px; font-size:1.05rem; margin:10px 0; text-decoration:none;
  cursor:pointer; }
.btn.ghost { background:transparent; color:var(--gold);
  border:1px solid var(--gold); }
.btn.small { padding:8px 10px; font-size:.9rem; width:auto; display:inline-block; }
.btn.danger { background:#5a1f1f; color:#ffb3b3; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.slot { background:var(--card); border:1px solid #2c2c2c; color:var(--txt);
  border-radius:10px; padding:14px 8px; font-size:1rem; cursor:pointer; }
.slot:active { border-color:var(--gold); }
label { display:block; margin:12px 0 4px; color:var(--txt); font-weight:600; }
input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=time], select {
  width:100%; padding:12px; border-radius:10px; border:1px solid #333;
  background:#0f0f0f; color:var(--txt); font-size:1rem; }
input[type=checkbox] { width:20px; height:20px; accent-color:var(--gold); }
.row { display:flex; align-items:center; gap:10px; }
.between { display:flex; justify-content:space-between; align-items:center; }
.mut { color:var(--mut); font-size:.9rem; }
.err { background:#3a1d1d; color:#ffb3b3; padding:10px; border-radius:8px; }
.ok { background:#1d3a24; color:#b3ffbd; padding:12px; border-radius:8px; }
.steps { color:var(--gold); font-size:.85rem; margin-bottom:4px; }
.nav { display:flex; gap:6px; overflow-x:auto; margin:10px 0 16px; }
.nav a { white-space:nowrap; padding:8px 12px; border-radius:20px;
  background:var(--card); color:var(--txt); text-decoration:none;
  font-size:.85rem; border:1px solid #2c2c2c; }
.nav a.on { background:var(--gold); color:#141414; font-weight:700; }
table.list { width:100%; border-collapse:collapse; font-size:.95rem; }
table.list td { padding:10px 6px; border-bottom:1px solid #2c2c2c;
  vertical-align:top; }
.foot { text-align:center; color:#555; padding:20px; font-size:.8rem; }
.qrimg { width:100%; max-width:320px; display:block; margin:10px auto;
  border-radius:12px; background:#fff; padding:8px; }
.hero { text-align:center; padding:30px 0 10px; }
.hero .logo { font-size:3rem; }
.hero.photo { position:relative; border-radius:16px; overflow:hidden;
  padding:52px 16px 40px; margin:0 -16px 6px;
  background:url('/static/barber-bg.jpg') center/cover; }
.hero.photo::before { content:''; position:absolute; inset:0;
  background:linear-gradient(rgba(10,10,10,.55), rgba(10,10,10,.85)); }
.hero.photo > * { position:relative; }
.price { color:var(--gold); font-weight:700; }
.alert { border-radius:12px; padding:12px 14px; margin-bottom:14px; font-size:.95rem; }
.alert.error { background:#3a1d1d; border:1px solid #a33; color:#ffb3b3; }
.alert.ok { background:#1d3a24; border:1px solid #3a6; color:#b3f0c0; }
.muted { color:#888; font-size:.85rem; }
.muted a { color:var(--gold); }
.mono { font-family:monospace; }
form label { display:block; margin-bottom:14px; font-size:.95rem; }
form input, form select { width:100%; margin-top:6px; padding:12px;
  border-radius:10px; border:1px solid #2c2c2c; background:#1c1c1c;
  color:var(--txt); font-size:1rem; box-sizing:border-box; }
form small { display:block; color:#888; font-size:.8rem; margin-top:4px; }
form .btn { width:100%; margin-top:6px; }
.linkbox { text-align:center; }
.linkurl { background:#1c1c1c; border:1px solid #2c2c2c; border-radius:10px;
  padding:12px; word-break:break-all; font-size:.9rem; margin-bottom:12px; }
.linkbtns { display:flex; gap:10px; }
.linkbtns .btn { flex:1; margin-top:0; }
.cover { margin:-16px -16px 0; }
.cover img { width:100%; height:170px; object-fit:cover; display:block; }
.shophead { display:flex; align-items:center; gap:14px; margin:16px 0 6px; }
.shophead.over { margin-top:-36px; }
.shophead .avatar { width:76px; height:76px; border-radius:50%;
  object-fit:cover; border:3px solid var(--bg); background:#222;
  flex-shrink:0; }
.shophead.over .avatar { border-color:#141414; }
.avatar.placeholder { display:flex; align-items:center; justify-content:center;
  font-size:2rem; }
.shophead-txt h1 { margin:0; font-size:1.4rem; }
.shophead-txt p { margin:2px 0 0; }
.prev-profile { width:90px; height:90px; border-radius:50%; object-fit:cover;
  display:block; margin:6px 0 12px; border:2px solid #2c2c2c; }
.prev-cover { width:100%; max-height:120px; object-fit:cover; border-radius:10px;
  display:block; margin:6px 0 12px; }
.addr { margin:4px 0 0; font-size:.95rem; }
.addr a { color:#7ec8ff; }
.ratingline { font-size:1.05rem; margin:4px 0 12px; }
.review p { margin:6px 0; }
.review .stars { font-size:1.1rem; }
.small { font-size:.85rem; }
.inline-form { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.inline-form select, .inline-form input[type=text] { flex:1 1 140px; }
.paybox { margin:12px 0; }
.check { display:flex; gap:8px; align-items:center; margin-top:10px; font-weight:600; }
.check input { width:auto; }
.badge { display:inline-block; font-size:.8rem; padding:2px 8px; border-radius:10px; margin-top:4px; }
.badge.paid { background:#123f22; color:#7ee2a0; }
.badge.unpaid { background:#3a2a10; color:#f0c060; }