/* ── Салон «Фелиция» — Mini App. Тема берётся у Telegram, акцент — золото салона ── */
:root{
  --bg: var(--tg-theme-bg-color, #fffaf6);
  --text: var(--tg-theme-text-color, #2b2320);
  --hint: var(--tg-theme-hint-color, #8a7f78);
  --card: var(--tg-theme-secondary-bg-color, #ffffff);
  --accent: #c9a227;
  --accent-ink: #6b5416;
  --rose: #b98da0;
  --line: rgba(0,0,0,.09);
  --shadow: 0 6px 20px rgba(70,48,20,.10);
  --radius: 16px;
  --tap: rgba(201,162,39,.16);
}
body.dark{
  --bg: var(--tg-theme-bg-color, #17161a);
  --text: var(--tg-theme-text-color, #f2ece6);
  --hint: var(--tg-theme-hint-color, #a79d95);
  --card: var(--tg-theme-secondary-bg-color, #221f24);
  --accent: #e0bd4f;
  --accent-ink: #f0d68a;
  --line: rgba(255,255,255,.10);
  --shadow: 0 6px 22px rgba(0,0,0,.45);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overscroll-behavior-y:contain}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
.hidden{display:none !important}
.muted{color:var(--hint)}
.small{font-size:13px}
.dot{opacity:.5;margin:0 6px}
#app{max-width:720px;margin:0 auto;padding:0 14px}

/* ── шапка ── */
#top{display:flex;gap:14px;align-items:center;padding:14px 0 10px}
#logo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid var(--accent);background:var(--card);box-shadow:var(--shadow)}
#top h1{font:600 19px/1.2 Georgia,"Times New Roman",serif;margin:0 0 2px}
#top p{margin:0}
#top .links{margin-top:4px;font-size:14px}
#top a{color:var(--accent-ink);text-decoration:none;border-bottom:1px dashed currentColor}
body.dark #top a{color:var(--accent)}

/* ── лоадер ── */
.loader{padding:40px 0;text-align:center;color:var(--hint)}
.loader:after{content:"";display:block;width:26px;height:26px;margin:14px auto 0;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── табы ── */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:var(--card);border-top:1px solid var(--line);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(0,0,0,.06)}
.tabs .tab-btn{flex:1;background:none;border:0;color:var(--hint);font:500 11px/1.2 inherit;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:12px}
.tabs .tab-btn span{font-size:19px;line-height:1}
.tabs .tab-btn.active{color:var(--accent-ink);background:var(--tap)}
body.dark .tabs .tab-btn.active{color:var(--accent)}

h2.h2{font:600 17px/1.25 Georgia,"Times New Roman",serif;margin:16px 0 8px}

/* ── поиск и чипсы ── */
.search-wrap{padding:2px 0 10px}
#svcSearch{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font-size:15px;outline:none}
#svcSearch:focus{border-color:var(--accent)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:8px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font-size:13.5px;white-space:nowrap}
.chip:active{background:var(--tap)}

/* ── карточки категорий ── */
.cats{display:grid;gap:12px}
.cat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.cat-hero{position:relative;display:block;width:100%;padding:0;border:0;background:none}
.cat-hero img{display:block;width:100%;height:118px;object-fit:cover}
.cat-hero .cat-name{position:absolute;left:12px;bottom:10px;right:12px;text-align:left;
  font:600 19px/1.1 Georgia,"Times New Roman",serif;color:#4a3218;
  text-shadow:0 1px 6px rgba(255,255,255,.75)}
.cat-meta{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.cat-meta .price{font:inherit;font-weight:600;color:var(--accent-ink);background:none;border:0;
  padding:6px 4px;cursor:pointer;border-radius:10px}
.cat-meta .price:active{background:var(--tap)}
body.dark .cat-meta .price{color:var(--accent)}
.svc-list{display:grid;gap:8px;margin-top:6px}
.svc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 12px;
  display:flex;gap:10px;align-items:center}
.svc-main{flex:1;min-width:0}
.svc-name{display:block;font-weight:500}
.svc-sub{font-size:13px;color:var(--hint)}
.svc-price{font-weight:600;white-space:nowrap}
.svc-go{flex:0 0 auto;border:0;background:var(--accent);color:#2b2320;font-weight:600;
  padding:8px 12px;border-radius:11px;font-size:13.5px}
.linkback{margin:10px 0 0;background:none;border:0;color:var(--accent-ink);font-size:15px;padding:4px 0}
body.dark .linkback{color:var(--accent)}

/* ── мастера ── */
.masters{display:grid;gap:12px}
.master{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow)}
.ava{width:62px;height:62px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:var(--tap);
  display:flex;align-items:center;justify-content:center;font:600 22px/1 Georgia,serif;color:var(--accent-ink)}
.master .m-main{flex:1;min-width:0}
.master .m-name{font-weight:600}
.master .m-spec{font-size:13px;color:var(--hint)}
.stars{font-size:13px;color:var(--accent-ink);margin-top:2px}
body.dark .stars{color:var(--accent)}
.m-next{font-size:12.5px;color:var(--hint);margin-top:2px}
.note{margin-top:14px}

/* ── мои записи ── */
.my-list{display:grid;gap:8px}
.my{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 12px}
.my .r1{display:flex;justify-content:space-between;gap:8px;font-weight:500}
.badge{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--tap);color:var(--accent-ink);
  white-space:nowrap}
body.dark .badge{color:var(--accent)}
.badge.ok{background:rgba(60,160,90,.16);color:#2f7d4a}
.badge.bad{background:rgba(190,70,70,.16);color:#b04646}
.ghost{margin:12px 0;width:100%;padding:12px;border-radius:14px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font-size:15px}

/* ── салон ── */
.info{display:grid;gap:8px}
.info .row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 12px}
.info .row b{display:block;font-weight:600;margin-bottom:2px}
.info .row span{font-size:14px;color:var(--hint)}
.photo{width:100%;border-radius:var(--radius);margin:12px 0;border:1px solid var(--line);display:block}

/* ── экран записи ── */
.sheet{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;
  animation:up .18s ease-out}
@keyframes up{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
  border-bottom:1px solid var(--line)}
.icon-btn{border:0;background:var(--tap);color:var(--text);width:36px;height:36px;border-radius:12px;
  font-size:19px;line-height:1}
.steps{flex:1;display:flex;gap:6px;justify-content:center}
.step-dot{width:26px;height:4px;border-radius:4px;background:var(--line)}
.step-dot.active{background:var(--accent)}
.sheet-body{flex:1;overflow-y:auto;padding:14px}
.sheet-foot{padding:10px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
  background:var(--card)}
.sheet-sum{font-size:13px;color:var(--hint);margin-bottom:8px;min-height:17px}
.cta{width:100%;padding:15px;border:0;border-radius:15px;background:var(--accent);color:#2b2320;
  font:600 16px inherit}
.cta:disabled{opacity:.45}
.opt{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:8px;color:var(--text);
  font-size:15px}
.opt.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--tap) inset}
.opt .opt-main{flex:1;min-width:0}
.opt .opt-sub{font-size:13px;color:var(--hint)}
.opt .opt-price{font-weight:600;white-space:nowrap}
.group-title{font:600 13px/1 inherit;text-transform:uppercase;letter-spacing:.04em;color:var(--hint);
  margin:16px 2px 8px}
.day-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.day-strip::-webkit-scrollbar{display:none}
.day{flex:0 0 auto;min-width:72px;padding:9px 10px;border-radius:14px;border:1px solid var(--line);
  background:var(--card);color:var(--text);text-align:center}
.day.sel{border-color:var(--accent);background:var(--tap)}
.day .d-w{font-size:12px;color:var(--hint);text-transform:lowercase}
.day .d-d{font-weight:600;font-size:15px}
.day .d-f{font-size:11px;color:var(--hint)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.slot{padding:11px 6px;border-radius:12px;border:1px solid var(--line);background:var(--card);
  color:var(--text);font-size:15px}
.slot.sel{border-color:var(--accent);background:var(--accent);color:#2b2320;font-weight:600}
.slot.busy{opacity:.35;text-decoration:line-through}
.empty{padding:26px 6px;text-align:center;color:var(--hint)}
.field{margin-bottom:10px}
.field label{display:block;font-size:13px;color:var(--hint);margin-bottom:4px}
.field input,.field textarea{width:100%;padding:12px 13px;border-radius:13px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font:15px inherit;outline:none}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.done{text-align:center;padding:26px 8px}
.done .big{font-size:44px;line-height:1}
.done h3{font:600 19px/1.3 Georgia,serif;margin:10px 0 6px}
.done .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;text-align:left;margin-top:12px}

/* ── тост ── */
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:#2b2320;color:#fff;padding:11px 16px;border-radius:14px;font-size:14px;z-index:80;
  max-width:88vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}

/* ── календарь на месяц ── */
.cal{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 10px 12px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cal-title{font-weight:600;font-size:15px}
.cal-nav{width:34px;height:34px;border-radius:11px;border:1px solid var(--line);background:var(--bg);
  color:var(--text);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}
.cal-nav:disabled{opacity:.3}
.cal-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal-wd span{text-align:center;font-size:11px;color:var(--hint);text-transform:uppercase;letter-spacing:.03em}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cell{position:relative;min-height:44px;padding:2px;border-radius:12px;border:1px solid transparent;
  background:var(--bg);color:var(--text);font-size:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px}
.cal-cell.empty{background:none;border:0}
.cal-cell b{font-weight:600;line-height:1.1}
.cal-cell i{font-style:normal;font-size:10px;color:var(--accent-ink)}
.cal-cell.ok{border-color:var(--accent);background:var(--tap)}
.cal-cell.full{opacity:.55}
.cal-cell.off{opacity:.3}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--line)}
.cal-cell.sel{background:var(--accent);border-color:var(--accent);color:#2b2320}
.cal-cell.sel i{color:#2b2320}
.cal-legend{margin-top:9px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.cal-legend .dot{width:9px;height:9px;padding:0;margin:0 3px 0 8px;border-radius:50%;display:inline-block;opacity:1}
.cal-legend .dot:first-child{margin-left:0}
.cal-legend .dot.ok{background:var(--accent);opacity:.75}
.cal-legend .dot.full{background:currentColor;opacity:.4}
.cal-legend .dot.off{background:currentColor;opacity:.18}