:root {
  --bg: #12161d;
  --card: #1b202a;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f4f1ee;
  --muted: #9aa3ad;
  --coral: #f07568;
  --teal: #53cbb6;
  --ok: #6ee7b7;
  --warn: #fbbf24;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: "Segoe UI", Arial, sans-serif; }
body { padding: 12px 12px 28px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.brand-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; background: #1b202a; border: 1px solid rgba(83, 203, 182, 0.45); }
.brand { margin: 0; font-size: 22px; letter-spacing: 0.12em; font-weight: 300; }
.tag { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.pill { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--teal); color: var(--teal); border-radius: 999px; padding: 5px 10px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; }
.tabs button { flex: 0 0 auto; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; }
.tabs button.active { color: #111; background: var(--coral); border-color: var(--coral); }
.view { display: grid; gap: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.card h2, .card h3 { margin: 0 0 8px; font-size: 16px; }
.muted { color: var(--muted); font-size: 13px; }
.row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.price { color: var(--coral); font-weight: 700; white-space: nowrap; }
.btn { appearance: none; border: 0; border-radius: 12px; padding: 11px 14px; font-weight: 700; cursor: pointer; }
.btn-coral { background: var(--coral); color: #fff; }
.btn-teal { background: var(--teal); color: #102; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
input, textarea, select { width: 100%; background: #10141b; color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.cal-month { margin-bottom: 14px; }
.cal-title { font-weight: 700; margin-bottom: 8px; }
.cal-week, .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-week { margin-bottom: 4px; }
.cal-week span { text-align: center; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.cal-empty { min-height: 38px; }
.picked-day { color: var(--teal); font-weight: 700; margin: 10px 0 8px; }
.upcoming-row { width: 100%; background: transparent; color: inherit; border: 0; text-align: left; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day, .slot { border: 1px solid var(--line); background: #151a22; color: var(--text); border-radius: 10px; padding: 8px 4px; text-align: center; font-size: 12px; }
.day { min-height: 40px; font-weight: 600; }
.day.active, .slot.active { border-color: var(--coral); background: rgba(240, 117, 104, 0.18); }
.day.off, .slot.off { opacity: 0.35; }
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.slot { white-space: pre-line; min-height: 52px; line-height: 1.25; }
.apt-card { display: grid; gap: 10px; }
.apt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.when { font-size: 28px; font-weight: 700; color: var(--teal); letter-spacing: 0.04em; line-height: 1; }
.when-date { color: var(--muted); font-size: 13px; margin-top: 4px; }
.banner { background: linear-gradient(135deg, rgba(240,117,104,.2), rgba(83,203,182,.12)); border: 1px solid rgba(240,117,104,.35); }
.note { font-size: 12px; color: var(--teal); }
.status { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.status.pending { color: var(--warn); }
.status.confirmed { color: var(--teal); }
.status.completed { color: var(--ok); }
.status.rejected, .status.cancelled { color: var(--coral); }
.err { color: var(--coral); font-size: 13px; }
.ok { color: var(--ok); font-size: 13px; }
.link { color: var(--teal); word-break: break-all; }
.price-edit, .price-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.price-edit input[name="name"], .price-add input[name="name"] { flex: 1 1 140px; min-width: 0; padding: 8px 10px; }
.price-edit input[name="price"], .price-add input[name="price"] { width: 88px; flex: 0 0 88px; padding: 8px 10px; }
.price-edit .btn, .price-add .btn { padding: 8px 12px; }
.chk { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin: 0; }
.chk input { width: auto; }
.service-btn { width: 100%; text-align: left; background: transparent; color: inherit; border: 0; padding: 0; }
.when-block { min-width: 0; }