:root {
  --ink: #2c2522;
  --muted: #776d68;
  --paper: #fffaf7;
  --card: #ffffff;
  --rose: #a75f68;
  --rose-dark: #844851;
  --rose-soft: #f3e2e2;
  --line: #eaded9;
  --success: #47765b;
  --danger: #a14343;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #f7e4e0 0, transparent 38%), var(--paper); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hero { padding: max(28px, env(safe-area-inset-top)) 20px 22px; }
.hero h1, h2, h3 { margin: 4px 0 8px; font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.hero h1 { font-size: clamp(2rem, 10vw, 3.4rem); line-height: .95; max-width: 520px; }
.hero p { color: var(--muted); max-width: 440px; line-height: 1.5; margin-bottom: 0; }
.eyebrow { color: var(--rose); font-size: .7rem; font-weight: 800; letter-spacing: .18em; }
.tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; overflow-x: auto; padding: 8px 16px; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.tab, .subtab { border: 0; border-radius: 999px; padding: 10px 14px; background: transparent; color: var(--muted); white-space: nowrap; }
.tab.active, .subtab.active { background: var(--ink); color: white; }
main { max-width: 760px; margin: 0 auto; padding: 18px 16px calc(40px + env(safe-area-inset-bottom)); }
.view, .admin-view { display: none; }
.view.active, .admin-view.active { display: block; }
.card { padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: 0 14px 42px rgba(76, 48, 42, .07); }
.stack { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: .82rem; font-weight: 700; }
input, select, textarea { width: 100%; padding: 13px 14px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 13px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft); }
textarea { resize: vertical; }
fieldset { padding: 0; border: 0; }
legend { margin-bottom: 10px; color: var(--muted); font-size: .82rem; font-weight: 700; }
.slots { display: flex; gap: 8px; flex-wrap: wrap; }
.slot { padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--ink); }
.slot.selected { border-color: var(--rose); color: white; background: var(--rose); }
.primary, .secondary, .danger { min-height: 46px; border: 0; border-radius: 14px; padding: 12px 16px; font-weight: 800; }
.primary { color: white; background: var(--rose); box-shadow: 0 8px 22px rgba(167, 95, 104, .28); }
.primary:hover { background: var(--rose-dark); }
.secondary { color: var(--rose-dark); background: var(--rose-soft); }
.danger { color: var(--danger); background: #fbeaea; }
.summary { padding: 13px; border-radius: 14px; background: var(--rose-soft); color: var(--rose-dark); }
.phone-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.phone-row .secondary { min-height: 0; padding-inline: 12px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-title h2 { font-size: 2rem; }
.icon-button { border: 1px solid var(--line); width: 42px; height: 42px; border-radius: 50%; background: white; font-size: 1.4rem; }
.appointment { display: grid; gap: 10px; }
.appointment-head { display: flex; justify-content: space-between; gap: 12px; }
.appointment h3 { font-family: inherit; font-weight: 800; margin: 0; }
.meta { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.badge { align-self: start; padding: 6px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: var(--rose-soft); color: var(--rose-dark); }
.badge.completed { color: var(--success); background: #e5f2e9; }
.badge.cancelled, .badge.no_show { color: var(--danger); background: #fbeaea; }
.subtabs { display: flex; gap: 6px; margin-bottom: 14px; }
.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.filters button { grid-column: 1 / -1; }
.week-editor { display: grid; gap: 8px; }
.day-row { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 8px; align-items: center; }
.day-row label { display: flex; align-items: center; }
.day-row input[type="checkbox"] { width: 20px; height: 20px; }
.exception { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.empty { padding: 32px 18px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 18px; }
.hidden { display: none !important; }
#toast { position: fixed; z-index: 20; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 120px); max-width: calc(100vw - 32px); padding: 12px 16px; color: white; background: var(--ink); border-radius: 13px; opacity: 0; transition: .25s; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }
.loader { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(255,250,247,.68); backdrop-filter: blur(3px); }
.loader span { width: 38px; height: 38px; border: 4px solid var(--rose-soft); border-top-color: var(--rose); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 640px) { .hero { max-width: 760px; margin: auto; padding-left: 16px; } .filters { grid-template-columns: repeat(3, 1fr); } .filters button { grid-column: auto; } }