/* Spa Reception — "Serene Desk". Warm palette. Namespaced .sr */
* { box-sizing: border-box; }
.sr {
    --bg: #f4efe7; --panel: #ffffff; --panel2: #faf6ee; --line: #e6dfd3;
    --ink: #2e2a24; --muted: #8b8175; --brand: #9a7b5b; --brand-ink: #7c6249; --accent: #b26a4e;
    --ok: #4a7c59; --warn: #c98a3a; --danger: #b4453a;
    --shadow: 0 14px 34px -20px rgba(90,60,40,.4);
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif; color: var(--ink);
    min-height: calc(100vh - 44px);
    background: radial-gradient(800px 340px at 10% -8%, rgba(154,123,91,.1), transparent), var(--bg);
}
:root[data-demo-theme="dark"] .sr {
    --bg: #191512; --panel: #231e19; --panel2: #1e1915; --line: #352e26; --ink: #efe9e1; --muted: #a99e8f;
}
.sr h2, .sr h3 { margin: 0; }
.sr-topbar { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.5rem; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; flex-wrap: wrap; }
.sr-brand { display: flex; align-items: center; gap: .6rem; } .sr-logo { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; display: grid; place-items: center; }
.sr-brand b { display: block; } .sr-brand small { color: var(--muted); font-size: .72rem; }
.sr-nav { display: flex; gap: .25rem; margin: 0 auto; flex-wrap: wrap; }
.sr-navbtn { border: 0; background: transparent; color: var(--muted); padding: .5rem .85rem; border-radius: .6rem; font: 600 .85rem inherit; cursor: pointer; }
.sr-navbtn:hover { color: var(--ink); background: var(--panel2); } .sr-navbtn.active { background: var(--brand); color: #fff; }
.sr-live { color: var(--ok); font-size: .72rem; font-weight: 800; letter-spacing: .08em; display: inline-flex; gap: .35rem; align-items: center; }
.sr-live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); animation: srp 1.4s infinite; }
@keyframes srp { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.sr-btn { border: 0; cursor: pointer; border-radius: .6rem; padding: .55rem .95rem; font: 700 .84rem inherit; background: var(--accent); color: #fff; transition: transform .1s, box-shadow .16s; }
.sr-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px var(--accent); }
.sr-btn.ghost { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); }
.sr-view { max-width: 1220px; margin: 0 auto; padding: 1.5rem; }
.sr-h { font-size: 1.3rem; font-weight: 800; } .sr-sub { color: var(--muted); font-size: .85rem; margin-bottom: 1.2rem; }
.sr-stats { display: flex; gap: 1.6rem; margin: .6rem 0 1.3rem; flex-wrap: wrap; }
.sr-stats .s b { font-size: 1.5rem; font-weight: 800; display: block; } .sr-stats .s small { color: var(--muted); font-size: .74rem; }
.sr-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.3rem; } @media (max-width: 900px) { .sr-layout { grid-template-columns: 1fr; } }
.sr-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.sr-room { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; box-shadow: var(--shadow); border-top: 4px solid var(--muted); }
.sr-room.occupied { border-top-color: var(--accent); } .sr-room.free { border-top-color: var(--ok); } .sr-room.cleaning { border-top-color: var(--warn); }
.sr-room .rt { display: flex; justify-content: space-between; align-items: baseline; } .sr-room b { font-size: .95rem; } .sr-room .ty { color: var(--muted); font-size: .72rem; }
.sr-room .badge { font-size: .62rem; font-weight: 800; text-transform: uppercase; padding: .12rem .5rem; border-radius: 999px; }
.sr-room.occupied .badge { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.sr-room.free .badge { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.sr-room.cleaning .badge { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.sr-room .body { margin-top: .6rem; font-size: .82rem; min-height: 3.2rem; }
.sr-room .body b { font-size: .86rem; } .sr-room .body small { color: var(--muted); display: block; }
.sr-room .ends { margin-top: .5rem; font-size: .74rem; color: var(--accent); font-weight: 700; }
.sr-room .act { margin-top: .5rem; }
.sr-room .act button { width: 100%; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); border-radius: .5rem; padding: .4rem; font: 700 .74rem inherit; cursor: pointer; }
.sr-card { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; padding: 1.2rem; box-shadow: var(--shadow); }
.sr-card h3 { font-size: .95rem; margin-bottom: 1rem; }
.sr-q { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px dashed var(--line); }
.sr-q:last-child { border-bottom: 0; } .sr-q .qn b { display: block; font-size: .88rem; } .sr-q .qn small { color: var(--muted); font-size: .76rem; }
.sr-q .wait { margin-left: auto; text-align: right; } .sr-q .wait b { color: var(--accent); } .sr-q .wait small { color: var(--muted); font-size: .7rem; display: block; }
.sr-mem { font-size: .62rem; font-weight: 800; padding: .1rem .4rem; border-radius: 999px; margin-left: .3rem; }
.sr-mem.Gold { background: #f6ecd2; color: #9a7325; } .sr-mem.Silver { background: #eceef0; color: #6b7280; }
.sr-q button { border: 0; background: var(--accent); color: #fff; border-radius: .5rem; padding: .4rem .7rem; font: 700 .74rem inherit; cursor: pointer; }
.sr-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: .7rem 1.1rem; border-radius: .7rem; font: 700 .86rem inherit; z-index: 200; box-shadow: var(--shadow); }
.sr-toast[hidden] { display: none; }
.sr-modal { position: fixed; inset: 0; background: rgba(46,42,36,.5); display: grid; place-items: center; z-index: 130; padding: 1rem; }
.sr-modal[hidden] { display: none; }
.sr-modal .card { background: var(--panel); border-radius: 1.1rem; padding: 1.5rem; width: min(26rem, 100%); box-shadow: var(--shadow); }
.sr-modal h3 { margin: 0 0 1rem; } .sr-field { margin-bottom: .8rem; } .sr-field label { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.sr-field select, .sr-field input { width: 100%; font: inherit; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--panel2); color: var(--ink); }