/* ===== iQ Salon — design system (dark-first, violet) ===== */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/static/fonts/PlusJakartaSans.woff2') format('woff2-variations'), url('/static/fonts/PlusJakartaSans.woff2') format('woff2');
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2190-2199;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn.woff2') format('woff2-variations'), url('/static/fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E0E14;
  --surface: #16161F;
  --surface-2: #1B1B26;
  --nude: #272735;
  --nude-2: #1F1F2B;
  --line: #2B2B3A;
  --line-soft: #22222E;
  --ink: #F8F8FA;
  --ink-2: #D3D3DD;
  --muted: #A6A6B5;
  --faint: #80808F;
  --accent: #7B61FF;
  --accent-rgb: 123, 97, 255;
  --accent-deep-rgb: 91, 63, 230;
  --btn-grad: linear-gradient(135deg, #8E78FF 0%, #7B61FF 50%, #6447F0 100%);
  --ring-1: #E3DCFF; --ring-2: #8B74FF; --ring-3: #4326D6;
  --accent-2: #9B87FF;
  --accent-ink: #B9ADFF;
  --accent-soft: rgba(var(--accent-rgb), .16);
  --on-accent: #FFFFFF;
  --sand: #EADCC8;
  --deep: #0A0A0F;
  --deep-2: #191923;
  --deep-line: #2A2A38;
  --deep-ink: #F8F8FA;
  --deep-muted: #A6A6B5;
  --hero-bg: var(--deep); --hero-ink: var(--deep-ink); --hero-muted: var(--deep-muted); --hero-line: var(--deep-line);
  --hero-pill: rgba(255,255,255,.03); --hero-pill-line: #3A3A4A; --hero-q: .9;
  --strong: #F8F8FA;
  --on-strong: #0E0E14;
  --green: #74D3A0;  --green-soft: rgba(116, 211, 160, .13);
  --red: #FF9282;    --red-soft: rgba(255, 146, 130, .13);
  --violet: #B9ADFF; --violet-soft: rgba(var(--accent-rgb), .16);
  --rose: #F5A3C0;   --rose-soft: rgba(245, 163, 192, .13);
  --amber: #F0C47A;  --amber-soft: rgba(240, 196, 122, .13);
  --gray-soft: rgba(255, 255, 255, .07);
  --now: #FF6B8A;
  --glass: rgba(14, 14, 20, .86);
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.28);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.55);
  --grad: linear-gradient(135deg, #A897FF 0%, #7B61FF 45%, #5B3FE6 100%);
  --radius: 22px;
  --radius-sm: 14px;
  --side-w: 260px;
  --tabbar-h: 72px;
  --gutter: clamp(14px, 2.6vw, 32px);
  /* legacy aliases used by templates */
  --plum: var(--deep); --plum-2: var(--deep-2); --plum-line: var(--deep-line);
  --gold: var(--accent); --gold-ink: var(--accent-ink); --gold-soft: var(--accent-soft);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F6F9;
  --surface: #FFFFFF;
  --surface-2: #FAFAFC;
  --nude: #ECEAF5;
  --nude-2: #F2F1F8;
  --line: #E4E3EC;
  --line-soft: #EEEDF3;
  --ink: #0E0E14;
  --ink-2: #3A3A48;
  --muted: #646474;
  --faint: #868695;
  --accent-ink: #5B3FE6;
  --accent-soft: #EFEBFF;
  --strong: #0E0E14;
  --on-strong: #F8F8FA;
  --green: #217A4B;  --green-soft: #E5F4EC;
  --red: #B1402F;    --red-soft: #FBE9E6;
  --violet: #5B3FE6; --violet-soft: #EFEBFF;
  --rose: #A83A62;   --rose-soft: #FBEAF1;
  --amber: #8A5A10;  --amber-soft: #FBF1DF;
  --gray-soft: #EEEEF2;
  --glass: rgba(255, 255, 255, .92);
  --hero-bg: radial-gradient(120% 140% at 0% 0%, #EFEAFF 0%, #FFFFFF 55%); --hero-ink: #0E0E14; --hero-muted: #5C5C6E; --hero-line: #E4E0F5;
  --hero-pill: #FFFFFF; --hero-pill-line: #E0DCF0; --hero-q: 1;
  --shadow: 0 1px 2px rgba(14,14,20,.04), 0 8px 28px rgba(14,14,20,.06);
  --shadow-lg: 0 24px 60px rgba(14,14,20,.18);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Plus Jakarta Sans', 'Vazirmatn', Tahoma, sans-serif; font-size: 15px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent-2); }
h1, h2, h3 { margin: 0; line-height: 1.5; }
h1 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(var(--accent-rgb), .35); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.num { font-feature-settings: "tnum"; }
.signed { direction: ltr; unicode-bidi: isolate; }
.green { color: var(--green); } .red { color: var(--red); } .gold { color: var(--accent-ink); }
.row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack.sm { gap: 8px; }
.only-mobile { display: none; }

/* ===== Brand ===== */
.logo { --wm-ink: var(--ink); display: inline-flex; align-items: center; gap: .32em; direction: ltr; unicode-bidi: isolate; color: var(--ink); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; letter-spacing: -.5px; line-height: 1; align-self: flex-start; }
.logo svg { flex: 0 0 auto; }
.logo .word {
  font-size: 1em; font-weight: 700; letter-spacing: -.035em; line-height: 1; padding-bottom: .06em;
  background: linear-gradient(100deg, var(--wm-ink) 0%, var(--wm-ink) 42%, #C9BCFF 50%, var(--wm-ink) 58%, var(--wm-ink) 100%);
  background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wmShine 7s ease-in-out 1.6s infinite;
}
@keyframes wmShine { 0%, 62% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }
.logo.on-deep { --wm-ink: var(--deep-ink); color: var(--deep-ink); }
.tagline { align-self: flex-start; font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: .32em; text-transform: uppercase; font-size: 11px; color: var(--muted); direction: ltr; }
.brand-mark { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; background: var(--deep); border: 1px solid var(--deep-line); display: grid; place-items: center; }
.glow { position: absolute; border-radius: 50%; filter: blur(60px); background: radial-gradient(circle, rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), 0) 70%); pointer-events: none; }

/* ===== App shell ===== */
.app { min-height: 100vh; display: flex; align-items: flex-start; }
.side {
  flex: 0 0 var(--side-w); width: var(--side-w); position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  background: var(--deep); color: var(--deep-ink); padding: 24px 14px; display: flex; flex-direction: column; gap: 4px;
  border-inline-start: 1px solid var(--deep-line); scrollbar-width: thin; scrollbar-color: var(--deep-line) transparent;
}
.brand { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 20px; color: var(--deep-ink); min-width: 0; }
.brand:hover { color: var(--deep-ink); }
.brand-sub { font-size: 12px; color: var(--deep-muted); }
.navsec { font-size: 11px; color: #6E6E7E; padding: 14px 14px 4px; }
.navlink {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 14px;
  color: #B4B4C2; font-size: 14.5px; white-space: nowrap; position: relative;
}
.navlink:hover { background: var(--deep-2); color: var(--deep-ink); }
.navlink.on { background: rgba(var(--accent-rgb), .22); color: #FFFFFF; font-weight: 700; }
.navlink.on::before { content: ''; position: absolute; inset-inline-start: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent); }
.navlink.on svg { color: var(--accent-2); }
.navlink .badge { margin-inline-start: auto; }
.side-foot { margin-top: auto; padding-top: 16px; }
.side-card { border: 1px solid var(--deep-line); background: var(--deep-2); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }

.main { flex: 1 1 auto; min-width: 0; padding: var(--gutter); padding-top: max(var(--gutter), calc(env(safe-area-inset-top) + 8px)); padding-bottom: calc(var(--gutter) + 12px); display: flex; flex-direction: column; gap: 20px; }
.topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar .title { flex: 1 1 220px; min-width: 0; }
.topbar .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Mobile tab bar */
.tabbar {
  display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 30; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 0 6px env(safe-area-inset-bottom); background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line); grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
}
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; color: var(--faint); font-size: 11px; background: none; border: 0; padding: 0; cursor: pointer; }
.tab.on { color: var(--accent-ink); font-weight: 700; }
@media (hover: none) { .tab:hover { color: var(--faint); } .tab.on:hover { color: var(--accent-ink); } }
.tab-fab { display: grid; place-items: center; }
.fab {
  width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--grad); color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 26px rgba(var(--accent-rgb), .5); margin-top: -26px; cursor: pointer;
}
.mtop { display: none; }

@media (max-width: 1023px) {
  .side { display: none; }
  .tabbar { display: grid; }
  .main { padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); }
  .mtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .hide-mobile { display: none !important; }
  .only-mobile { display: initial; }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: var(--radius-sm); border: 1.5px solid transparent; font-size: 15px; font-weight: 700; cursor: pointer;
  white-space: nowrap; text-decoration: none; transition: transform .08s ease, filter .15s ease, background .15s ease; line-height: 1;
}
.btn:active { transform: scale(.98); }
.btn-gold { background: var(--grad); color: var(--on-accent); box-shadow: 0 8px 22px rgba(var(--accent-rgb), .32); }
.btn-gold:hover { filter: brightness(1.08); color: var(--on-accent); }
.btn-dark { background: var(--accent); color: #fff; }
.btn-dark:hover { filter: brightness(1.1); color: #fff; }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-line:hover { background: var(--nude-2); border-color: var(--muted); color: var(--ink); }
.btn-soft { background: var(--nude-2); color: var(--ink); border-color: var(--line-soft); }
.btn-soft:hover { background: var(--nude); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--nude-2); color: var(--ink); }
.btn-danger { background: var(--red-soft); color: var(--red); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 13.5px; border-radius: 12px; }
.btn-block { width: 100%; }
.icon-btn { width: 48px; height: 48px; padding: 0; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; position: relative; flex: 0 0 auto; }
.icon-btn:hover { background: var(--nude-2); color: var(--ink); }
.back-btn { border-radius: 14px; }
.back-btn svg { transition: transform .15s ease; }
.back-btn:hover svg { transform: translateX(3px); }
.icon-btn .dot { position: absolute; top: 10px; left: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--now); border: 2px solid var(--surface); }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1px solid transparent; }

/* ===== Cards ===== */
.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; min-width: 0; }
.card.flat { box-shadow: none; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; min-width: 0; flex-wrap: wrap; }
.card-head a { font-size: 13px; min-height: 40px; display: inline-flex; align-items: center; }
.cols { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.cols > .wide { flex: 999 1 520px; min-width: 0; }
.cols > .narrow { flex: 1 1 300px; min-width: 0; }
.cols > .half { flex: 1 1 340px; min-width: 0; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; }
@media (max-width: 639px) {
  .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid-kpi .card { padding: 14px; border-radius: 18px; }
  .grid-kpi .kpi .value { font-size: 19px; }
  .grid-kpi .kpi .label { font-size: 12px; }
  .grid-kpi .chip { display: none; }
}

.hero {
  position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); border-radius: 28px; border: 1px solid var(--hero-line);
  padding: clamp(22px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-end; justify-content: space-between;
}
.hero h1 { font-weight: 300; }
.hero h1 b { font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero { flex-direction: column; align-items: flex-start; justify-content: center; min-height: 230px; }
.hero > .hero-text { flex: 0 0 auto; max-width: 640px; }
.hero .deco { overflow: visible; position: absolute; left: 20px; top: 50%; width: 250px; height: 250px; transform: translateY(-50%); opacity: var(--hero-q); pointer-events: none; filter: drop-shadow(0 18px 36px rgba(var(--accent-deep-rgb), .32)); }
@media (min-width: 900px) { .hero { padding-inline-end: 300px; } }
@media (max-width: 899px) { .hero .deco { left: -140px; top: -50px; width: 250px; height: 250px; transform: none; opacity: .26; } }
.hero .glow { width: 360px; height: 360px; left: -80px; bottom: -180px; }
.hero-sub { color: var(--hero-muted); }
.hero-text { position: relative; flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hero-actions { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.hero .pill-gold { background: var(--grad); color: #fff; box-shadow: 0 8px 24px rgba(var(--accent-rgb), .4); }
.hero .pill-gold:hover { color: #fff; filter: brightness(1.08); }
.hero .pill-line { border-color: var(--hero-pill-line); color: var(--hero-ink); background: var(--hero-pill); }
.hero .pill-line:hover { border-color: var(--accent); color: var(--hero-ink); }

.kpi { display: flex; flex-direction: column; gap: 8px; }
.kpi .label { font-size: 13px; color: var(--muted); }
.kpi .value { font-size: clamp(22px, 2.3vw, 28px); font-weight: 800; line-height: 1.3; }
.kpi .unit { font-size: 12px; color: var(--faint); }
.kpi.dark { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 14px 34px rgba(var(--accent-deep-rgb), .35); }
.kpi.dark .label, .kpi.dark .unit { color: rgba(255,255,255,.78); }
.kpi.dark .value { color: #fff; }
.spark { width: 100%; height: 30px; display: block; }

.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; border-radius: 999px; padding: 2px 10px; white-space: nowrap; font-weight: 600; line-height: 1.8; }
.chip-green { background: var(--green-soft); color: var(--green); }
.chip-red { background: var(--red-soft); color: var(--red); }
.chip-gold { background: var(--accent-soft); color: var(--accent-ink); }
.chip-violet { background: var(--violet-soft); color: var(--violet); }
.chip-gray { background: var(--gray-soft); color: var(--ink-2); }
.chip-rose { background: var(--rose-soft); color: var(--rose); }
.chip-amber { background: var(--amber-soft); color: var(--amber); }
.badge { background: var(--accent); color: #fff; font-weight: 700; font-size: 11.5px; border-radius: 999px; padding: 0 8px; line-height: 20px; }

.avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #0E0E14; font-size: 15px; }
.avatar.sm { width: 32px; height: 32px; flex-basis: 32px; font-size: 13px; }
.avatar.lg { width: 64px; height: 64px; flex-basis: 64px; font-size: 24px; }
.avatar.soft { background: var(--accent-soft) !important; color: var(--accent-ink); }
.ico-box { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 13px; display: grid; place-items: center; }

/* Lists */
.list { display: flex; flex-direction: column; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line-soft); min-width: 0; color: var(--ink); }
.item:last-child { border-bottom: 0; }
a.item:hover { background: var(--surface-2); color: var(--ink); }
.item .meta { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.item .t { font-weight: 600; font-size: 14.5px; }
.item .s { font-size: 12.5px; color: var(--muted); }
.item .end { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.time { font-weight: 700; flex: 0 0 52px; font-size: 14px; }
.dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; display: inline-block; }

/* Segmented control */
.seg { display: inline-flex; gap: 4px; background: var(--nude-2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg a, .seg button { min-height: 40px; padding: 0 14px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; white-space: nowrap; border: 0; background: none; cursor: pointer; }
.seg a:hover { color: var(--ink); }
.seg .on { background: var(--accent); color: #fff !important; box-shadow: 0 4px 14px rgba(var(--accent-rgb), .35); }

.pager { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 4px; max-width: 100%; }
.pager a { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); }
.pager a:hover { background: var(--nude-2); }
.pager .lbl { padding: 0 8px; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Forms */
.form { display: flex; flex-direction: column; gap: 16px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field > .lbl { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 12px; color: var(--faint); }
.input, select.input, textarea.input {
  width: 100%; min-height: 50px; border: 1.5px solid var(--line); background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 0 14px; font-size: 16px; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--faint); }
textarea.input { padding: 12px 14px; min-height: 96px; resize: vertical; line-height: 1.8; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A6A6B5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; padding-left: 36px; }
select.input option, select.input optgroup { background: var(--surface); color: var(--ink); }
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .22); }
.input.ltr { direction: ltr; text-align: right; }
.input-money { position: relative; }
.input-money .input { padding-left: 64px; font-weight: 700; letter-spacing: .2px; }
.input-money .unit { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--faint); pointer-events: none; }
.search { position: relative; flex: 1 1 260px; min-width: 0; }
.search .input { padding-right: 46px; }
.search svg { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 8px; }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; text-align: center; background: var(--surface-2); line-height: 1.5; }
.choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); box-shadow: 0 0 0 1px var(--accent) inset; }
.choice input:focus-visible + span { outline: 2.5px solid var(--accent-2); outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 14.5px; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches label { position: relative; }
.swatches input { position: absolute; opacity: 0; }
.swatches span { width: 40px; height: 40px; border-radius: 50%; display: block; border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; }
.swatches input:checked + span { box-shadow: 0 0 0 2.5px var(--ink); }
.swatches input:focus-visible + span { outline: 2.5px solid var(--accent-2); outline-offset: 3px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-start; padding-top: 4px; }
.form-actions .btn { flex: 1 1 160px; }

/* Flash */
.flash { border-radius: 16px; padding: 12px 16px; font-size: 14px; display: flex; gap: 10px; align-items: center; border: 1px solid transparent; }
.flash.ok { background: var(--green-soft); color: var(--green); border-color: rgba(116,211,160,.18); }
.flash.err { background: var(--red-soft); color: var(--red); border-color: rgba(255,146,130,.18); }
.flash.info { background: var(--accent-soft); color: var(--accent-ink); border-color: rgba(var(--accent-rgb), .22); }

/* Dialog / bottom sheet */
dialog.sheet {
  border: 1px solid var(--line); padding: 0; border-radius: 28px; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden;
}
dialog.sheet::backdrop { background: rgba(5,5,10,.6); backdrop-filter: blur(3px); }
.sheet-in { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 22px 8px; }
.sheet-body { padding: 8px 22px 22px; overflow-y: auto; }
@media (max-width: 639px) {
  dialog.sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 26px 26px 0 0; max-height: 92vh; border-bottom: 0; }
  .sheet-in { max-height: 92vh; }
  .sheet-body { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}
.grip { width: 44px; height: 5px; border-radius: 5px; background: var(--line); margin: 10px auto 0; display: none; }
@media (max-width: 639px) { .grip { display: block; } }

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table.table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14px; }
.table th { text-align: right; font-size: 12.5px; color: var(--muted); font-weight: 600; padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .n { text-align: left; white-space: nowrap; font-weight: 700; }

/* Empty */
.empty { text-align: center; padding: 36px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); }
.empty svg { color: var(--accent-2); }
.empty h3 { color: var(--ink); }

/* Bars */
.bar { height: 8px; background: var(--nude); border-radius: 8px; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 8px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 150px; }
.week .d { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.week .b { width: 100%; max-width: 30px; min-height: 4px; background: var(--nude); border-radius: 8px 8px 4px 4px; }
.week .d.today .b { background: var(--grad); box-shadow: 0 6px 18px rgba(var(--accent-rgb), .4); }
.week .l { font-size: 11px; color: var(--faint); }
.week .d.today .l { color: var(--ink); font-weight: 800; }

/* ===== Calendar ===== */
.cal-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px 6px; -webkit-overflow-scrolling: touch; }
.cal { display: grid; column-gap: 10px; min-width: var(--cal-min, 640px); }
.cal-head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; min-width: 0; }
.cal-times { position: relative; }
.cal-times span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--faint); }
.cal-col {
  position: relative; border-radius: 14px; background-color: var(--surface-2); border: 1px solid var(--line-soft);
  background-image: repeating-linear-gradient(to bottom, var(--line-soft) 0, var(--line-soft) 1px, transparent 1px, transparent var(--hour, 64px));
}
.cal-slot { position: absolute; inset-inline: 0; display: block; border-radius: 10px; }
.cal-slot:hover { background: var(--accent-soft); }
.appt {
  position: absolute; inset-inline: 4px; border-radius: 12px; padding: 6px 10px; overflow: hidden;
  display: flex; flex-direction: column; color: var(--ink); font-size: 12px; line-height: 1.6; border-inline-start: 3px solid var(--c, var(--accent));
}
.appt:hover { color: var(--ink); filter: brightness(1.12); }
.appt b { font-size: 12.5px; }
.appt span { color: var(--ink-2); }
.appt.done { opacity: .7; }
.appt.cancelled, .appt.noshow { opacity: .45; text-decoration: line-through; }
.now-line { position: absolute; inset-inline: 0; height: 2px; background: var(--now); z-index: 2; pointer-events: none; box-shadow: 0 0 10px var(--now); }
.now-line::before { content: ''; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--now); }

/* Statement */
.statement .line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.statement .line span:first-child { color: var(--ink-2); }
.statement .line b { white-space: nowrap; }
.statement .total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 16px; flex-wrap: wrap; }
.statement .total b { font-size: clamp(22px, 3vw, 28px); color: var(--accent-ink); }

/* ===== Login ===== */
.auth { min-height: 100vh; display: flex; flex-wrap: wrap; background: var(--deep); }
.auth-art { flex: 1 1 440px; min-height: 280px; position: relative; overflow: hidden; color: var(--deep-ink); padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; background-size: cover; background-position: center; }
.auth-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,15,.2) 0%, rgba(10,10,15,.85) 85%); pointer-events: none; }
.auth-art > *:not(.deco):not(.glow) { position: relative; z-index: 1; }
.auth-art .deco { overflow: visible; position: absolute; z-index: 0; right: -120px; top: -80px; width: 620px; height: 620px; }
.auth-art .glow { z-index: 0; width: 520px; height: 520px; right: -60px; top: 0; }
.auth-art h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 300; line-height: 1.45; }
.auth-art h1 b { font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-art .en { font-family: 'Plus Jakarta Sans', sans-serif; direction: ltr; text-align: right; font-size: clamp(18px, 2vw, 22px); font-weight: 300; color: var(--deep-ink); letter-spacing: -.2px; }
.auth-art p { color: var(--deep-muted); max-width: 460px; }
.auth-form { flex: 1 1 420px; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 64px) 20px; border-radius: 0 32px 32px 0; }
.auth-box { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 860px) { .auth-form { border-radius: 32px 32px 0 0; margin-top: -32px; position: relative; z-index: 2; } .auth-art { min-height: 300px; padding-bottom: 56px; } .auth-art .deco { width: 420px; height: 420px; right: -140px; } }
.otp-input { letter-spacing: 10px; text-align: center; font-size: 26px; font-weight: 800; direction: ltr; }





/* ===== No sideways scrolling on phones ===== */
.seg { flex-wrap: wrap; overflow: visible; }
.people { display: flex; flex-wrap: wrap; gap: 8px; }
.person { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 6px 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; }
.person:hover { border-color: var(--accent); color: var(--ink); }
.person.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.person .pc { min-width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; background: var(--nude); color: var(--ink-2); padding: 0 6px; }
.person.on .pc { background: var(--accent); color: #fff; }
.multi-agenda { display: none; }
@media (max-width: 639px) {
  .multi-grid { display: none; }
  .multi-agenda { display: block; }
  .person { padding-inline-start: 10px; }
  /* tables become stacked cards */
  .table-wrap { overflow: visible; margin: 0; padding: 0; }
  table.table { min-width: 0; }
  .table thead { display: none; }
  .table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .table tr:last-child { border-bottom: 0; }
  .table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 2px; border: 0; text-align: left; }
  .table td::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: right; }
  .table td.n { font-weight: 700; }
}

/* ===== Photo gallery ===== */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: 10px; }
.ph { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--nude-2); padding: 0; cursor: zoom-in; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ph:hover img { transform: scale(1.05); }
.ph-tag { position: absolute; bottom: 8px; inset-inline-start: 8px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(10,10,15,.72); color: #fff; backdrop-filter: blur(6px); }
.ph-tag.ph-after { background: rgba(var(--accent-rgb), .88); }
.drop { position: relative; display: block; border: 1.5px dashed var(--line); border-radius: 20px; background: var(--surface-2); cursor: pointer; overflow: hidden; }
.drop:hover, .drop:focus-within { border-color: var(--accent); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-preview { min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; text-align: center; padding: 16px; }
.drop-preview svg { color: var(--accent-2); }
.drop-preview img { max-height: 260px; width: auto; max-width: 100%; border-radius: 14px; }
.consent { align-items: flex-start; line-height: 1.8; }
.consent input { margin-top: 4px; flex: 0 0 auto; }
dialog.lightbox { width: min(760px, calc(100vw - 32px)); }
@media (max-width: 639px) { dialog.lightbox { width: 100vw; max-width: 100vw; } }
.lightbox img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 16px; background: #000; display: block; }

/* ===== Logo motion ===== */
.q-float, .q-tail, .m-tail, .m-i { transform-box: fill-box; transform-origin: center; }
.q-float { animation: qFloat 7s ease-in-out infinite; }
.q-glint { transform-origin: 190px 175px; animation: qOrbit 9s linear infinite; }
@keyframes qFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(-1.5deg); } }
@keyframes qOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* small mark: ambient motion */
.m-glint { transform-origin: 72px 52px; animation: qOrbit 6s linear infinite; }
.m-dot { transform-box: fill-box; transform-origin: center; animation: mDot 3.6s ease-in-out infinite; }
@keyframes mDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.iq-mark { filter: drop-shadow(0 4px 10px rgba(var(--accent-rgb), .35)); }
/* intro: plays once per session (intro.js sets .q-intro on <html>) */
.q-intro .q-ring { stroke-dasharray: 100 100; animation: qDraw 1.5s cubic-bezier(.65,0,.25,1) .15s both; }
.q-intro .q-fade, .q-intro .q-glint { animation: qFadeIn .8s ease 1.3s both; }
.q-intro .q-glint { animation: qFadeIn .8s ease 1.6s both, qOrbit 9s linear 1.6s infinite; }
.q-intro .q-tail { animation: qTail .9s cubic-bezier(.34,1.56,.64,1) 1.05s both; }
@keyframes qDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes qFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes qTail { from { opacity: 0; transform: translate(-34px, -38px) scale(.55); } to { opacity: 1; transform: none; } }
.q-intro .m-ring { stroke-dasharray: 100 100; animation: qDraw 1.1s cubic-bezier(.65,0,.25,1) .1s both; }
.q-intro .m-tail { animation: qTail .7s cubic-bezier(.34,1.56,.64,1) .85s both; }
.q-intro .m-i { animation: mI .6s cubic-bezier(.34,1.56,.64,1) .05s both; }
@keyframes mI { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* hover: the small mark's ring catches the light */
.logo svg { transition: filter .3s ease, transform .3s ease; }
a:hover .logo svg, .brand:hover svg { filter: drop-shadow(0 0 12px rgba(155,135,255,.75)) brightness(1.12); transform: rotate(-6deg) scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .logo .word, .m-glint, .m-dot, .q-float, .q-glint, .q-intro .q-ring, .q-intro .q-fade, .q-intro .q-glint, .q-intro .q-tail, .q-intro .m-ring, .q-intro .m-tail, .q-intro .m-i { animation: none !important; stroke-dasharray: none; }
}


/* ===== Welcome & sign-in (start of the app) ===== */
.wl { position: relative; min-height: 100vh; min-height: 100dvh; background: #07070B; color: #F8F8FA; overflow: hidden; display: flex; justify-content: center; }
.wl-bokeh { position: absolute; inset: 0; pointer-events: none; }
.wl-bokeh::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(60% 45% at 50% 38%, rgba(var(--accent-rgb), .20), transparent 70%),
  radial-gradient(40% 30% at 50% 100%, rgba(var(--accent-deep-rgb), .25), transparent 70%); }
.wl-bokeh i { position: absolute; border-radius: 50%; filter: blur(28px); opacity: .55; animation: wlDrift 14s ease-in-out infinite alternate; }
.wl-bokeh i:nth-child(1) { width: 140px; height: 140px; left: 6%; top: 34%; background: #F2A07A; opacity: .28; }
.wl-bokeh i:nth-child(2) { width: 90px; height: 90px; left: 12%; top: 58%; background: #F5B98E; opacity: .22; animation-delay: -4s; }
.wl-bokeh i:nth-child(3) { width: 260px; height: 520px; right: 4%; top: -6%; background: #8C5CFF; opacity: .30; border-radius: 40%; }
.wl-bokeh i:nth-child(4) { width: 120px; height: 120px; right: 10%; top: 40%; background: #F0A07E; opacity: .20; animation-delay: -7s; }
.wl-bokeh i:nth-child(5) { width: 200px; height: 360px; left: 2%; top: -10%; background: #6A44E8; opacity: .28; border-radius: 40%; animation-delay: -2s; }
.wl-bokeh i:nth-child(6) { width: 70%; height: 140px; left: 15%; bottom: -60px; background: #5B3FE6; opacity: .30; animation-delay: -9s; }
@keyframes wlDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(14px,-18px,0) scale(1.08); } }
.wl-col { position: relative; z-index: 1; width: 100%; max-width: 460px; min-height: 100vh; min-height: 100dvh; justify-content: center; padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.wl-brand { display: flex; justify-content: center; }
.wl-back { position: absolute; top: max(18px, env(safe-area-inset-top)); right: 18px; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: #F8F8FA; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); z-index: 2; animation: none !important; }
.wl-back:hover { background: rgba(255,255,255,.12); color: #fff; }
.wl-brand .logo { align-self: center; }
.wl-brand .logo .word { font-weight: 600; }
.wl-tag { font-family: 'Plus Jakarta Sans', sans-serif; direction: ltr; font-weight: 300; font-size: clamp(22px, 5.6vw, 28px); line-height: 1.25; letter-spacing: .01em; color: #E9E6F5; margin: 4px 0 0; }
.wl-hero { position: relative; margin: 6px 0 0; width: 100%; aspect-ratio: 572 / 494; max-width: 100%; }
.wl-arc { position: absolute; z-index: 0; width: 125%; height: auto; left: -32%; top: -22%; opacity: .95; overflow: visible; filter: drop-shadow(0 20px 40px rgba(var(--accent-deep-rgb), .45)); }
.wl-fa { font-size: 15px; color: #B9B6C9; margin: -6px 0 6px; }
.wl-fa b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wl-actions { width: 100%; display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.wl-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; border-radius: 999px; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; font-family: inherit; transition: transform .1s ease, filter .2s ease, background .2s ease; }
.wl-btn:active { transform: scale(.98); }
.wl-primary { background: linear-gradient(135deg, #8E78FF 0%, #6B4EFF 55%, #5B3FE6 100%); color: #fff; box-shadow: 0 14px 34px rgba(var(--accent-deep-rgb), .45), inset 0 1px 0 rgba(255,255,255,.25); }
.wl-primary:hover { filter: brightness(1.08); color: #fff; }
.wl-ghost { background: rgba(255,255,255,.02); color: #F8F8FA; border-color: rgba(255,255,255,.55); }
.wl-ghost:hover { background: rgba(255,255,255,.07); color: #fff; }
.wl-fine { font-size: 12px; color: #7E7B90; margin-top: 4px; }
.wl-h { font-size: 22px; font-weight: 800; color: #F8F8FA; }
.wl-card { width: 100%; margin-top: 18px; text-align: right; display: flex; flex-direction: column; gap: 18px; padding: 24px 22px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(30,28,44,.78), rgba(18,17,27,.82)); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
.wl-card .muted { color: #A9A6BA; }
.wl-card .input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #F8F8FA; min-height: 56px; border-radius: 16px; }
.wl-card .input:focus { border-color: #8E78FF; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .25); }
.wl-card .field > label, .wl-card .lbl { color: #D3D0E2; }
.wl-card .choice span { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #F8F8FA; }
.wl-card .choice input:checked + span { background: rgba(var(--accent-rgb), .25); border-color: #8E78FF; box-shadow: 0 0 0 1px #8E78FF inset; }
.wl-card a { color: #B9ADFF; }
.wl-card a.wl-primary { color: #fff; }
.wl-auth .wl-tag { font-size: 18px; color: #A9A6BA; }
/* entrance */
.wl-col > * { animation: wlUp .8s cubic-bezier(.2,.8,.2,1) both; }
.wl-col > *:nth-child(2) { animation-delay: .12s; } .wl-col > *:nth-child(3) { animation-delay: .24s; }
.wl-col > *:nth-child(4) { animation-delay: .36s; } .wl-col > *:nth-child(5) { animation-delay: .48s; }
@keyframes wlUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .wl-col { max-width: 520px; padding-top: 40px; }
  .wl-hero { max-width: 470px; }
}
@media (prefers-reduced-motion: reduce) { .wl-col > *, .wl-bokeh i { animation: none !important; } }

/* ===== Brand photo: rises into view inside a ring that draws itself ===== */
.ppl { position: relative; display: block; margin: 0; width: 100%; aspect-ratio: 572 / 494; isolation: isolate; pointer-events: none; animation: pplFloat 9s ease-in-out 1.8s infinite; }
.ppl-photo { position: absolute; inset: 0; z-index: 2; overflow: hidden; animation: pplRise 1.3s cubic-bezier(.16,1,.3,1) .1s both;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 64%, transparent 97%), linear-gradient(to right, transparent 0, #000 14%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 64%, transparent 97%), linear-gradient(to right, transparent 0, #000 14%, #000 92%, transparent 100%);
  mask-composite: intersect; }
.ppl-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ppl-shine { position: absolute; inset: -10% 0; background: linear-gradient(105deg, transparent 38%, rgba(214,204,255,.28) 50%, transparent 62%); mix-blend-mode: screen; transform: translateX(130%); animation: pplShine 8s ease-in-out 1.5s infinite; }
.ppl-glow { position: absolute; inset: 6% 8% 14%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .55), rgba(var(--accent-deep-rgb), .18) 45%, transparent 70%); filter: blur(30px); animation: pplGlow 6s ease-in-out infinite alternate; }
.ppl-ring { position: absolute; z-index: 1; width: 112%; left: -6%; top: -16%; overflow: visible; filter: drop-shadow(0 0 16px rgba(var(--accent-rgb), .6)); animation: pplSpin 48s linear 2.2s infinite; }
.ppl-arc { stroke-dasharray: 0 100; opacity: 0; animation: pplDraw 1.9s cubic-bezier(.65,0,.35,1) .3s forwards; }
.ppl-dot { opacity: 0; animation: pplIn .5s ease 2s forwards; filter: drop-shadow(0 0 6px #B9ADFF); }
.ppl-spark { position: absolute; z-index: 3; width: 5px; height: 5px; border-radius: 50%; background: #E3DCFF; box-shadow: 0 0 10px 2px rgba(185,173,255,.8); opacity: 0; animation: pplSpark 6s ease-in infinite; }
.ppl-spark:nth-of-type(1) { left: 14%; bottom: 22%; animation-delay: 1.6s; }
.ppl-spark:nth-of-type(2) { right: 12%; bottom: 34%; animation-delay: 3.4s; width: 4px; height: 4px; }
.ppl-spark:nth-of-type(3) { left: 52%; bottom: 12%; animation-delay: 5s; }
@keyframes pplRise { 0% { opacity: 0; transform: translateY(72px) scale(.93); filter: blur(12px) brightness(.6); } 55% { filter: blur(0) brightness(1.08); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes pplDraw { 0% { opacity: 0; stroke-dasharray: 0 100; } 8% { opacity: 1; } 100% { opacity: 1; stroke-dasharray: 62 100; } }
@keyframes pplIn { to { opacity: 1; } }
@keyframes pplSpin { to { transform: rotate(360deg); } }
@keyframes pplFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pplGlow { from { opacity: .75; transform: scale(.96); } to { opacity: 1; transform: scale(1.05); } }
@keyframes pplShine { 0% { transform: translateX(130%); } 28%, 100% { transform: translateX(-130%); } }
@keyframes pplSpark { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 70% { opacity: .8; } 100% { opacity: 0; transform: translateY(-90px) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ppl, .ppl-photo, .ppl-shine, .ppl-glow, .ppl-ring, .ppl-arc, .ppl-dot, .ppl-spark { animation: none !important; }
  .ppl-arc { stroke-dasharray: 62 100; opacity: 1; } .ppl-dot { opacity: 1; } .ppl-shine, .ppl-spark { display: none; }
}
/* Start screen and login */
.wl-hero.ppl { max-width: 380px; margin: 44px auto 0; }
.ppl-auth { max-width: 280px; margin: 34px auto -54px; z-index: 0; }
.wl-auth .wl-card { position: relative; z-index: 1; }
@media (max-height: 720px) { .ppl-auth { display: none; } }
/* Today page hero: the photo in dark mode, the Q ribbon in light mode */
.hero-ppl { display: none; }
:root[data-theme="dark"] .has-ppl .hero-ppl { display: block; }
:root[data-theme="dark"] .has-ppl .deco, :root[data-theme="dark"] .has-ppl .glow { display: none; }
@media (min-width: 900px) {
  :root[data-theme="dark"] .has-ppl { padding-inline-end: 330px; min-height: 270px; }
  .hero-ppl { position: absolute; left: 20px; bottom: 0; width: 270px; z-index: 0; }
}
@media (max-width: 899px) {
  .hero-ppl { width: 100%; max-width: 300px; margin: -8px auto -26px; align-self: center; }
}

/* ===== Sign-in options and passkeys ===== */
.wl-or { display: flex; align-items: center; gap: 12px; color: #7E7B90; font-size: 13px; }
.wl-or::before, .wl-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.wl-btn svg { flex: 0 0 auto; }
.passkey-hint { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-color: rgba(var(--accent-rgb), .4); background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--surface); }
.passkey-hint[hidden] { display: none; }
.passkey-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #fff; background: var(--grad); flex: 0 0 auto; }
[data-passkey-only][hidden], [data-passkey-unsupported][hidden] { display: none !important; }

form:has(input[name=mode][value=solo]:checked) .ob-chairs { display: none; }

.hint { font-size: 13px !important; line-height: 1.8; }
.tiny { font-size: 12.5px; }

/* ===== Booking form: big tap targets instead of typing ===== */
.appt-form .lbl { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip-btn, .chip-opt span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.chip-btn small { font-size: 12px; font-weight: 500; color: var(--muted); }
.chip-btn:hover, .chip-opt span:hover { border-color: var(--accent-2); }
.chip-btn.on, .chip-opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent) inset; }
.chip-btn.on small { color: var(--accent-ink); }
.chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
.chip-opt .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-bottom: 8px; max-height: 248px; overflow-y: auto; padding: 2px; }
.slot { min-height: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; font-feature-settings: "tnum"; }
.slot:hover { border-color: var(--accent-2); }
.slot.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.slot.past:not(.on) { opacity: .55; }
.slot:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.js .appt-form #f-time { display: none; }
.more-fields { border: 1px solid var(--line-soft); border-radius: 16px; padding: 4px 14px; background: var(--surface-2); }
.more-fields summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--muted); list-style: none; }
.more-fields summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-inline-end: 8px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }
.more-fields[open] summary::before { content: '−'; }
.more-fields summary::-webkit-details-marker { display: none; }
.more-fields[open] { padding-bottom: 14px; }

/* ===== Theme v2: lifted dark, richer light, ambient depth ===== */
:root, :root[data-theme="dark"] {
  --bg: #13121D; --surface: #1C1B29; --surface-2: #222033; --nude: #2D2B40; --nude-2: #252337;
  --line: #35324B; --line-soft: #2A283F;
  --ink: #F7F6FB; --ink-2: #D9D7E5; --muted: #ADAAC0; --faint: #8B889F;
  --deep: #100F1A; --deep-2: #1C1A2B; --deep-line: #2A2840; --deep-muted: #A9A6BC;
  --hero-bg: radial-gradient(120% 140% at 100% 0%, #2A2450 0%, #1D1A33 45%, #171528 100%); --hero-line: #332F52;
  --hero-pill: rgba(255,255,255,.05); --hero-pill-line: #3E3A5E;
  --glass: rgba(19, 18, 29, .84);
  --shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 14px 34px rgba(0,0,0,.32);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.5);
  --page-glow: radial-gradient(1100px 560px at 88% -12%, rgba(var(--accent-rgb), .17), transparent 62%), radial-gradient(900px 520px at -8% 108%, rgba(var(--accent-deep-rgb), .11), transparent 62%);
  --card-sheen: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 42%);
}
:root[data-theme="light"] {
  --bg: #F2F1F7; --surface: #FFFFFF; --surface-2: #F8F7FC; --nude: #ECE9F7; --nude-2: #F4F2FB;
  --line: #E3E0EF; --line-soft: #ECEAF4;
  --ink: #15131F; --ink-2: #3B3850; --muted: #67647B; --faint: #8D8AA0;
  --deep: #16142A; --deep-2: #221F3A; --deep-line: #2E2A4A; --deep-ink: #F7F6FB; --deep-muted: #B3AFCB;
  --hero-bg: radial-gradient(120% 150% at 100% 0%, #E9E2FF 0%, #F6F2FF 45%, #FFFFFF 100%); --hero-line: #E4DCFF; --hero-ink: #15131F; --hero-muted: #5E5A74;
  --hero-pill: #FFFFFF; --hero-pill-line: #DDD5F7;
  --glass: rgba(255, 255, 255, .86);
  --shadow: 0 1px 2px rgba(30, 20, 80, .05), 0 10px 30px rgba(40, 30, 110, .07);
  --shadow-lg: 0 28px 64px rgba(40, 30, 110, .16);
  --page-glow: radial-gradient(1100px 520px at 90% -14%, rgba(var(--accent-rgb), .13), transparent 62%), radial-gradient(800px 480px at -6% 106%, rgba(240,154,184,.12), transparent 62%);
  --card-sheen: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0));
}
body { background: var(--page-glow), var(--bg); background-attachment: fixed; }
.card { background: var(--card-sheen), var(--surface); }
.btn-dark { background: var(--btn-grad); box-shadow: 0 8px 20px rgba(var(--accent-rgb), .28), inset 0 1px 0 rgba(255,255,255,.2); }
:root[data-theme="light"] .btn-soft { background: var(--nude-2); border-color: var(--line); }
:root[data-theme="light"] .btn-soft:hover { background: var(--nude); }
:root[data-theme="light"] .input { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="light"] .input:focus { background: #FFFFFF; }
:root[data-theme="light"] .tabbar { border-top-color: var(--line); box-shadow: 0 -8px 24px rgba(40,30,110,.06); }
:root[data-theme="light"] .side { border-inline-start-color: transparent; box-shadow: 4px 0 30px rgba(22,20,42,.12); }
:root[data-theme="light"] .card { border-color: var(--line-soft); }
.kpi .label { font-weight: 500; }

/* ===== Admin panel ===== */
.adm { min-height: 100vh; background: var(--bg); }
.adm-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px var(--gutter); padding-top: max(12px, env(safe-area-inset-top)); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.adm-main { max-width: 1100px; margin: 0 auto; padding: 20px var(--gutter) 60px; display: flex; flex-direction: column; gap: 18px; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 13px; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.adm-tabs a { padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--ink-2); background: var(--nude-2); border: 1px solid var(--line); }
.adm-tabs a.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.adm-tabs b { font-weight: 700; opacity: .8; }
.adm-list { display: flex; flex-direction: column; }
.adm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line-soft); color: var(--ink); min-width: 0; }
.adm-row:last-child { border-bottom: 0; }
a.adm-row:hover { background: var(--nude-2); color: var(--ink); }
.adm-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; text-align: left; }
.adm-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.adm-facts > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--nude-2); min-width: 0; }
.adm-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.billing-note { text-decoration: none; }
@media (max-width: 640px) {
  .adm-facts, .adm-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-row { flex-wrap: wrap; } .adm-meta { align-items: flex-start; text-align: right; }
  .adm-top .chip { display: none; }
  .adm-top .btn-sm { padding: 0 11px; }
}
.adm-top .btn svg { flex-shrink: 0; }

/* Print */
@media print {
  :root { --bg: #fff; --surface: #fff; --ink: #000; --ink-2: #222; --muted: #555; --line: #ddd; --line-soft: #eee; }
  .side, .tabbar, .topbar .actions, .no-print, .mtop { display: none !important; }
  body { background: #fff; color: #000; }
  .main { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ===== Ease-of-use pass: home ===== */
@media (max-width: 899px) {
  .hero.hero-compact { min-height: 0; gap: 16px; padding: 20px 18px 18px; }
  .hero-compact .hero-ppl { position: absolute; left: -18px; top: 6px; width: 168px; max-width: none; margin: 0; z-index: 0; }
  :root[data-theme="dark"] .hero-compact .hero-text { padding-inline-end: 128px; }
  .hero-compact .hero-text h1 { font-size: 24px; }
  .hero-compact .hero-actions { width: 100%; display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
  .hero-compact .hero-actions .pill { justify-content: center; padding: 0 12px; }
}
.pill-big { min-height: 52px; font-size: 16px; font-weight: 800; }
.section-title { font-size: 17px; margin: 6px 4px -4px; color: var(--ink-2); font-weight: 700; }
.today-card .card-head { margin-bottom: 6px; }
.today-list { display: flex; flex-direction: column; gap: 8px; }
.t-row { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 16px; background: var(--nude-2); border: 1px solid var(--line-soft); color: var(--ink); min-width: 0; transition: transform .12s ease, background .2s ease; }
.t-row:hover { color: var(--ink); background: var(--nude); }
.t-row:active { transform: scale(.985); }
.t-row .meta { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.t-row .t { font-weight: 700; font-size: 15px; }
.t-row .s { font-size: 12.5px; color: var(--muted); }
.t-time { font-weight: 800; font-size: 16px; min-width: 50px; text-align: center; }
.t-bar { width: 4px; align-self: stretch; border-radius: 4px; flex: 0 0 auto; }
.t-row.is-done { opacity: .62; }
.t-row.is-done .t { text-decoration: line-through; text-decoration-color: var(--faint); }
.t-row.is-now { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.chip.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: liveDot 1.4s ease-in-out infinite; }
@keyframes liveDot { 50% { opacity: .25; } }

/* ===== Ease-of-use pass: booking ===== */
.client-pick .cp-input { position: relative; }
.client-pick .cp-input svg { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.client-pick .cp-input .input { padding-inline-start: 44px; font-size: 16px; min-height: 54px; }
.cp-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cp-item, .cp-chosen { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; background: var(--nude-2); border: 1px solid var(--line-soft); color: var(--ink); text-align: right; font: inherit; cursor: pointer; }
.cp-item:active { transform: scale(.985); }
.cp-item .grow, .cp-chosen .grow { display: flex; flex-direction: column; min-width: 0; }
.cp-chosen { border-color: var(--accent); background: var(--accent-soft); cursor: default; }
.cp-hint { padding: 4px 4px 0; }
.cp-recent { margin-top: 10px; }
.cp-new { margin-top: 10px; }
.day-other { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.day-other #f-day { max-width: 200px; font-size: 14px; min-height: 42px; }
.day-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.day-strip::-webkit-scrollbar { display: none; }
.day-cell { flex: 0 0 66px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; }
.day-cell small { font-size: 11px; color: var(--muted); }
.day-cell b { font-size: 19px; line-height: 1.3; }
.day-cell.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.day-cell.on small { color: var(--accent-ink); }
[hidden] { display: none !important; }

/* ===== Ease-of-use pass: calendar week strip ===== */
.cal-top { display: flex; flex-direction: column; gap: 12px; }
.cal-title { font-size: 18px; }
.week-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; align-items: stretch; }
.week-strip::-webkit-scrollbar { display: none; }
.ws-day { flex: 0 0 60px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 8px 2px 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); color: var(--ink); box-shadow: var(--shadow); }
.ws-day small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ws-day b { font-size: 20px; line-height: 1.35; }
.ws-day .ws-n { font-style: normal; font-size: 11px; font-weight: 700; min-height: 18px; min-width: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); }
.ws-day .ws-n:empty { background: transparent; }
.ws-day.today { border-color: var(--accent); }
.ws-day.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 10px 24px rgba(var(--accent-deep-rgb), .35); }
.ws-day.on small { color: rgba(255,255,255,.85); }
.ws-day.on .ws-n { background: rgba(255,255,255,.22); color: #fff; }
.ws-day:active { transform: scale(.96); }
.ws-arrow { flex: 0 0 40px; display: grid; place-items: center; border-radius: 14px; color: var(--muted); border: 1px dashed var(--line); }
.week-strip { padding-bottom: 14px; margin-bottom: -8px; }
@media (max-width: 639px) { .multi-grid-hint { display: none; } }

/* ===== Ease-of-use pass: touch feedback and small delights ===== */
.contact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.contact-row .btn { min-height: 46px; padding: 0 8px; font-size: 14px; }
.btn, .pill, .chip-btn, .chip-opt span, .slot, .day-cell, .icon-btn, .tabbar a, .item, .person { transition: transform .12s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent; }
.btn:active, .pill:active, .chip-btn:active, .chip-opt:active span, .slot:not(:disabled):active, .icon-btn:active, .tabbar a:active, .person:active, a.item:active { transform: scale(.96); }
.flash.ok { animation: flashIn .5s cubic-bezier(.16,1,.3,1) both; }
.flash.ok svg { animation: tickPop .6s cubic-bezier(.34,1.56,.64,1) .15s both; }
@keyframes flashIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes tickPop { from { transform: scale(0) rotate(-30deg); } }
@media (prefers-reduced-motion: reduce) { .flash.ok, .flash.ok svg { animation: none; } }

/* ===== Colour themes (chosen by each person under "ظاهر برنامه") ===== */
.ppl-ring stop:nth-child(1) { stop-color: var(--ring-1); }
.ppl-ring stop:nth-child(2) { stop-color: var(--ring-2); }
.ppl-ring stop:nth-child(3) { stop-color: var(--ring-3); }
.ppl-dot { fill: var(--ring-1); }

/* Champagne gold */
:root[data-accent="gold"] {
  --accent: #B88A45; --accent-2: #D3AE6E; --accent-rgb: 201, 160, 96; --accent-deep-rgb: 150, 110, 50;
  --grad: linear-gradient(135deg, #E2C083 0%, #BE914C 48%, #8F682D 100%);
  --btn-grad: linear-gradient(135deg, #D7B272 0%, #B88A45 55%, #96702F 100%);
  --ring-1: #F6E3BC; --ring-2: #D3AE6E; --ring-3: #8F682D;
}
:root[data-accent="gold"]:not([data-theme="light"]) {
  --bg: #17131D; --surface: #211B29; --surface-2: #272031; --nude: #342B40; --nude-2: #2B2436; --line: #3D3349; --line-soft: #30283B;
  --accent-ink: #E8CB97; --violet: #E8CB97; --accent-soft: rgba(201, 160, 96, .16); --violet-soft: rgba(201, 160, 96, .16);
  --hero-bg: radial-gradient(120% 140% at 100% 0%, #3A2C3E 0%, #251D2D 50%, #1C1723 100%); --hero-line: #3E3245;
  --page-glow: radial-gradient(1000px 520px at 88% -12%, rgba(201,160,96,.13), transparent 62%), radial-gradient(900px 520px at -8% 108%, rgba(150,90,150,.12), transparent 62%);
  --glass: rgba(23, 19, 29, .86);
}
:root[data-accent="gold"][data-theme="light"] {
  --bg: #F7F3EE; --surface-2: #FCF9F5; --nude: #F1E9DF; --nude-2: #F7F1EA; --line: #E9DFD2; --line-soft: #F1E9DF;
  --accent-ink: #8A6428; --violet: #8A6428; --accent-soft: #F6ECDB; --violet-soft: #F6ECDB;
  --hero-bg: radial-gradient(120% 150% at 100% 0%, #F5E6CC 0%, #FBF5EC 50%, #FFFFFF 100%); --hero-line: #EEDFC6; --hero-pill-line: #E8D8BE;
  --page-glow: radial-gradient(1000px 520px at 90% -14%, rgba(214,176,120,.18), transparent 62%);
}

/* Rose */
:root[data-accent="rose"] {
  --accent: #D9578E; --accent-2: #EE86B0; --accent-rgb: 224, 103, 154; --accent-deep-rgb: 170, 60, 130;
  --grad: linear-gradient(135deg, #F49BBE 0%, #D9578E 48%, #A0408F 100%);
  --btn-grad: linear-gradient(135deg, #EE86B0 0%, #D9578E 55%, #B5427E 100%);
  --ring-1: #FFD3E3; --ring-2: #EE86B0; --ring-3: #A0408F;
}
:root[data-accent="rose"]:not([data-theme="light"]) {
  --bg: #19121E; --surface: #231A2A; --surface-2: #2A1F32; --nude: #382A42; --nude-2: #2F2338; --line: #42324C; --line-soft: #35283F;
  --accent-ink: #F6A9C8; --violet: #F6A9C8; --accent-soft: rgba(224, 103, 154, .16); --violet-soft: rgba(224, 103, 154, .16);
  --hero-bg: radial-gradient(120% 140% at 100% 0%, #44223F 0%, #2A1A30 50%, #1E1524 100%); --hero-line: #45304A;
  --page-glow: radial-gradient(1000px 520px at 88% -12%, rgba(224,103,154,.14), transparent 62%), radial-gradient(900px 520px at -8% 108%, rgba(140,70,170,.13), transparent 62%);
  --glass: rgba(25, 18, 30, .86);
}
:root[data-accent="rose"][data-theme="light"] {
  --bg: #FBF3F6; --surface-2: #FEF8FA; --nude: #F7E6EC; --nude-2: #FBEFF3; --line: #F1DDE5; --line-soft: #F6E8EE;
  --accent-ink: #B23A6E; --violet: #B23A6E; --accent-soft: #FCE6EF; --violet-soft: #FCE6EF;
  --hero-bg: radial-gradient(120% 150% at 100% 0%, #FCD9E6 0%, #FDF0F5 50%, #FFFFFF 100%); --hero-line: #F6D6E2; --hero-pill-line: #F2CCDA;
  --page-glow: radial-gradient(1000px 520px at 90% -14%, rgba(238,141,180,.2), transparent 62%);
}

/* Turquoise */
:root[data-accent="ocean"] {
  --accent: #129C90; --accent-2: #3CC4B5; --accent-rgb: 30, 180, 165; --accent-deep-rgb: 14, 120, 130;
  --grad: linear-gradient(135deg, #5AD6C6 0%, #18A597 48%, #0E7883 100%);
  --btn-grad: linear-gradient(135deg, #3CC4B5 0%, #129C90 55%, #0E7F87 100%);
  --ring-1: #CFF7F1; --ring-2: #3CC4B5; --ring-3: #0E7883;
}
:root[data-accent="ocean"]:not([data-theme="light"]) {
  --bg: #0F171B; --surface: #172227; --surface-2: #1C292F; --nude: #26363D; --nude-2: #202F35; --line: #2D3F46; --line-soft: #233339;
  --accent-ink: #7FE3D6; --violet: #7FE3D6; --accent-soft: rgba(30, 180, 165, .16); --violet-soft: rgba(30, 180, 165, .16);
  --hero-bg: radial-gradient(120% 140% at 100% 0%, #183F44 0%, #152A30 50%, #121E23 100%); --hero-line: #24414A;
  --page-glow: radial-gradient(1000px 520px at 88% -12%, rgba(30,180,165,.13), transparent 62%), radial-gradient(900px 520px at -8% 108%, rgba(40,110,170,.12), transparent 62%);
  --glass: rgba(15, 23, 27, .86);
}
:root[data-accent="ocean"][data-theme="light"] {
  --bg: #F0F6F6; --surface-2: #F8FBFB; --nude: #E2EFEE; --nude-2: #EDF5F4; --line: #D9E8E7; --line-soft: #E5F0EF;
  --accent-ink: #0B7A71; --violet: #0B7A71; --accent-soft: #DDF3F0; --violet-soft: #DDF3F0;
  --hero-bg: radial-gradient(120% 150% at 100% 0%, #CDEFEA 0%, #EEF8F7 50%, #FFFFFF 100%); --hero-line: #CDE8E4; --hero-pill-line: #C4E2DE;
  --page-glow: radial-gradient(1000px 520px at 90% -14%, rgba(60,196,181,.16), transparent 62%);
}

/* Appearance page */
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.theme-opt { position: relative; display: block; cursor: pointer; }
.theme-opt input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 20px; border: 2px solid var(--line); background: var(--surface-2); transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease; }
.theme-opt:active .theme-card { transform: scale(.97); }
.theme-opt input:checked + .theme-card { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.theme-prev { position: relative; height: 92px; border-radius: 14px; overflow: hidden; background: var(--p-bg); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.theme-prev i { display: block; height: 8px; border-radius: 6px; background: var(--p-line); }
.theme-prev i:nth-child(1) { width: 55%; } .theme-prev i:nth-child(2) { width: 80%; }
.theme-prev b { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: var(--p-grad); box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.theme-prev em { position: absolute; right: 10px; bottom: 12px; width: 52px; height: 22px; border-radius: 999px; background: var(--p-grad); opacity: .9; }
.theme-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 700; font-size: 14.5px; }
.theme-name .tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; opacity: 0; transform: scale(.6); transition: .2s; }
.theme-opt input:checked + .theme-card .tick { opacity: 1; transform: none; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:root[data-accent="gold"] .hero .deco { filter: hue-rotate(150deg) saturate(.8); }
:root[data-accent="rose"] .hero .deco { filter: hue-rotate(80deg); }
:root[data-accent="ocean"] .hero .deco { filter: hue-rotate(-80deg); }

/* ===== Public booking page ===== */
.bk-body { background: var(--page-glow), var(--bg); background-attachment: fixed; min-height: 100vh; }
.bk { max-width: 640px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px 30px; display: flex; flex-direction: column; gap: 14px; }
.bk-head { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 24px; background: var(--hero-bg); border: 1px solid var(--hero-line); }
.bk-head h1 { font-size: 22px; line-height: 1.5; }
.bk-head p { margin-top: 6px; color: var(--ink-2); }
.bk-logo { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 28px; font-weight: 800; color: #fff; background: var(--grad); box-shadow: 0 10px 24px rgba(var(--accent-deep-rgb), .3); }
.bk-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bk-links .chip { padding: 4px 12px; color: var(--ink-2); }
.bk-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 24px; box-shadow: var(--shadow); padding: 18px; }
.bk-flow { display: flex; flex-direction: column; gap: 22px; }
.bk-step { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; animation: bkIn .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes bkIn { from { opacity: 0; transform: translateY(8px); } }
.bk-step h2 { font-size: 17px; display: flex; align-items: center; gap: 10px; }
.bk-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: var(--accent-soft); color: var(--accent-ink); flex: 0 0 auto; }
.bk-cat { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: 4px; }
.bk-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.bk-svc { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: right; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; transition: transform .12s, border-color .2s, background .2s; }
.bk-svc b { font-size: 15px; } .bk-svc span { font-size: 12px; color: var(--muted); }
.bk-svc:active, .bk-person:active { transform: scale(.97); }
.bk-svc.on, .bk-person.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.bk-people { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-person { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.bk-summary:not(:empty) { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); }
.bk-summary span { font-size: 13px; color: var(--ink-2); }
.bk-msg { min-height: 1.5em; font-size: 13.5px; color: var(--accent-ink); }
.bk-msg.bad { color: var(--red); }
.bk-go { min-height: 54px; font-size: 16px; }
.bk-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 30px 20px; }
.bk-ic { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.bk-ic.ok { background: var(--grad); color: #fff; animation: tickPop .6s cubic-bezier(.34,1.56,.64,1) both; box-shadow: 0 14px 30px rgba(var(--accent-deep-rgb), .35); }
.bk-done-text { font-size: 16px; font-weight: 700; line-height: 1.9; }
.bk-foot { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--faint); padding-top: 6px; }
/* Online booking management */
.online-hero.on { border-color: rgba(var(--accent-rgb), .45); background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--surface); }
.share-box { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 8px; border-radius: 14px; background: var(--nude-2); border: 1px dashed var(--line); margin-top: 8px; min-width: 0; }
.share-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; padding-inline-start: 6px; text-align: left; }
.share-box .btn { flex: 0 0 auto; }
.slug-in { display: flex; align-items: center; gap: 6px; direction: ltr; }
.slug-in span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.slug-in .input { flex: 1 1 auto; min-width: 0; }
.online-person { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.online-person:last-child { border-bottom: 0; }
@media (max-width: 420px) { .share-box { flex-wrap: wrap; } .share-url { flex-basis: 100%; padding: 4px 6px; } .share-box .btn { flex: 1 1 0; } }
.bk-svcs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.bk-change { display: none; margin-inline-start: auto; font: inherit; font-size: 13px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border: 0; border-radius: 999px; padding: 4px 14px; cursor: pointer; }
.bk-step.picked .bk-change { display: inline-block; }
.bk-step.picked .bk-cat, .bk-step.picked .bk-svc:not(.on) { display: none; }
.bk-step.picked .bk-svcs { grid-template-columns: 1fr; }
.bk-step.picked .bk-svcs:not(:has(.on)) { display: none; }
/* Admin monitoring */
.adm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
a.adm-kpi { color: var(--ink); }
a.adm-kpi:hover { border-color: var(--accent); color: var(--ink); }
.value.amber { color: var(--amber); } .value.red { color: var(--red); } .value.green { color: var(--green); }
.adm-bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; align-items: end; height: 150px; }
.adm-bars .d { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.adm-bars .b { width: 100%; max-width: 26px; min-height: 3px; background: var(--nude); border-radius: 7px 7px 3px 3px; }
.adm-bars .d.today .b { background: var(--grad); }
.adm-bars .v { font-size: 10.5px; color: var(--muted); min-height: 14px; }
.adm-bars .l { font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.adm-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.adm-dot.on { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.adm-dot.idle { background: var(--red); opacity: .7; }
.adm-heat { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 5px; }
.adm-heat i { aspect-ratio: 1; border-radius: 5px; background: var(--nude-2); border: 1px solid var(--line-soft); }
.adm-heat i.on { background: var(--accent); border-color: transparent; }
.adm-heat i.today { outline: 2px solid var(--accent-2); outline-offset: 1px; }
/* Client import */
.imp-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; margin-top: 16px; }
.imp-way { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; text-align: right; cursor: pointer; transition: transform .12s, border-color .2s; }
.imp-way svg { color: var(--accent-ink); margin-bottom: 4px; }
.imp-way b { font-size: 15px; } .imp-way span { font-size: 12.5px; color: var(--muted); }
.imp-way:active { transform: scale(.97); } .imp-way:hover { border-color: var(--accent); }
.imp-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 420px; overflow-y: auto; }
.imp-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--nude-2); border: 1px solid var(--line-soft); cursor: pointer; }
.imp-row input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.imp-row .grow { display: flex; flex-direction: column; min-width: 0; }
.imp-row.old { opacity: .55; cursor: default; }
/* Quick entry */
.qe-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.qe-row { padding: 12px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface-2); transition: background .3s, border-color .3s; }
.qe-row.done { border-color: var(--green); background: var(--green-soft); }
.qe-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.qe-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; grid-column: span 2; }
.qe-f span { font-size: 12px; color: var(--muted); font-weight: 600; }
.qe-f small { font-weight: 400; }
.qe-f .input { min-height: 46px; font-size: 16px; padding-inline: 10px; }
@media (min-width: 760px) { .qe-f { grid-column: span 1; } .qe-f.qe-wide { grid-column: span 2; } .qe-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 759px) { .qe-f { grid-column: span 3; } .qe-f.qe-wide { grid-column: span 6; } }
.qe-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.qe-msg { font-size: 13px; color: var(--muted); min-width: 0; }
.qe-msg.bad { color: var(--red); } .qe-msg.ok { color: var(--green); font-weight: 700; }
/* Getting started */
.start-card { border-color: rgba(var(--accent-rgb), .4); background: linear-gradient(135deg, var(--accent-soft), transparent 65%), var(--surface); }
.start-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.start-step { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink); transition: transform .12s; }
.start-step:active { transform: scale(.98); }
.start-step:hover { color: var(--ink); border-color: var(--accent); }
.start-step .meta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.start-step .t { font-weight: 700; font-size: 14.5px; } .start-step .s { font-size: 12.5px; color: var(--muted); }
.start-n { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--grad); color: #fff; }
.start-step.done { opacity: .6; }
.start-step.done .start-n { background: var(--green); }
.start-step.done .t { text-decoration: line-through; text-decoration-color: var(--faint); }
.imp-ios { margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--accent-soft); font-size: 14px; line-height: 1.9; }
.imp-ios ol { margin: 6px 0 0; padding-inline-start: 20px; }

/* Outreach list (/admin/leads) */
.ld-list { display: flex; flex-direction: column; gap: 10px; }
.ld-card { display: flex; flex-direction: column; gap: 10px; }
.ld-card.done { opacity: .78; }
.ld-name { font-size: 16px; }
.ld-wa { background: #1FA855; color: #fff; border-color: #1FA855; justify-content: center; font-size: 15px; padding: 12px; }
.ld-wa:hover { background: #18934A; color: #fff; }
.ld-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--accent-rgb), .1); font-weight: 700; font-size: 14px; }
.ld-ask span { flex: 1; min-width: 150px; }
.ld-land { padding: 8px 12px; border-radius: 12px; background: var(--nude-2); font-size: 13px; color: var(--ink-2); }
.ld-today { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.ld-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--nude-2); overflow: hidden; }
.ld-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.ld-cities { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ld-cities a { flex: 0 0 auto; }
.ld-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 12px 8px; text-align: center; }
.ld-kpis div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ld-kpis b { font-size: 22px; font-weight: 800; }
.ld-kpis b.amber { color: var(--amber, #C8891E); } .ld-kpis b.green { color: var(--green, #1FA855); }
.ld-kpis span { font-size: 11.5px; color: var(--ink-3, var(--ink-2)); line-height: 1.4; }
.ld-hint { padding: 10px 12px; border-radius: 12px; background: rgba(31, 168, 85, .12); border: 1px solid rgba(31, 168, 85, .35); font-size: 13.5px; line-height: 1.8; }
.ld-mode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ld-wa.is-sent { background: rgba(var(--accent-rgb), .14); border-color: transparent; color: var(--accent); cursor: default; }
.ld-wa.is-sent:hover { background: rgba(var(--accent-rgb), .14); color: var(--accent); }
.ld-call summary, .ld-script summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.ld-script summary b { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; }
.ld-script ol { margin: 12px 0 8px; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; line-height: 1.9; }
.bk-promo { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.bk-promo b { color: var(--accent); font-weight: 700; }

/* ---- Brand badge with light animation (replaces the old photo ring) ---- */
.bdg { position: relative; display: block; margin: 0; width: 100%; aspect-ratio: 1 / 1; isolation: isolate; pointer-events: none; animation: bdgFloat 8s ease-in-out 1.8s infinite; }
.bdg-img { position: absolute; inset: 3%; z-index: 2; border-radius: 50%; overflow: hidden; animation: bdgIn 1.3s cubic-bezier(.16,1,.3,1) .1s both; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.bdg-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bdg-sweep { position: absolute; inset: -25%; background: linear-gradient(115deg, transparent 42%, rgba(236,230,255,.42) 50%, transparent 58%); mix-blend-mode: screen; transform: translateX(-130%); animation: bdgSweep 7s ease-in-out 1.6s infinite; }
.bdg-aura { position: absolute; inset: -4%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .6), rgba(var(--accent-deep-rgb), .22) 48%, transparent 70%); filter: blur(26px); animation: bdgPulse 4.8s ease-in-out infinite alternate; }
/* A comet of light that runs around the badge's metal ring. */
.bdg-orbit { position: absolute; inset: 3%; z-index: 3; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 74%, rgba(190,175,255,.25) 82%, rgba(245,240,255,1) 90%, rgba(170,145,255,.7) 93%, transparent 96%);
  -webkit-mask: radial-gradient(farthest-side, transparent 93%, #000 94.5%, #000 99%, transparent 100%);
          mask: radial-gradient(farthest-side, transparent 93%, #000 94.5%, #000 99%, transparent 100%);
  filter: drop-shadow(0 0 6px rgba(200,185,255,.95)) drop-shadow(0 0 16px rgba(123,97,255,.8));
  animation: bdgShow .8s ease 1.3s forwards, bdgSpin 6s linear 1.3s infinite; }
.bdg-orbit-2 { animation: bdgShow .8s ease 1.3s forwards, bdgSpin 6s linear -3s infinite; opacity: 0; filter: drop-shadow(0 0 4px rgba(200,185,255,.7)); background: conic-gradient(from 0deg, transparent 0 86%, rgba(220,210,255,.55) 92%, transparent 96%); }
.bdg-spark { position: absolute; z-index: 4; width: 14px; height: 14px; opacity: 0; background: radial-gradient(circle, #fff 0 18%, rgba(214,204,255,.9) 30%, transparent 62%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 6px #C9BEFF); animation: bdgTwinkle 5.5s ease-in-out infinite; }
.bdg-spark:nth-of-type(1) { top: 9%; right: 16%; animation-delay: 1.8s; }
.bdg-spark:nth-of-type(2) { bottom: 18%; left: 7%; animation-delay: 3.1s; width: 10px; height: 10px; }
.bdg-spark:nth-of-type(3) { top: 46%; right: 1%; animation-delay: 4.3s; width: 11px; height: 11px; }
.bdg-spark:nth-of-type(4) { top: 14%; left: 14%; animation-delay: 5.2s; width: 9px; height: 9px; }
@keyframes bdgIn { from { opacity: 0; transform: scale(.86); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bdgSweep { 0%, 55% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }
@keyframes bdgPulse { from { opacity: .55; transform: scale(.95); } to { opacity: 1; transform: scale(1.05); } }
@keyframes bdgShow { to { opacity: 1; } }
@keyframes bdgSpin { to { transform: rotate(360deg); } }
@keyframes bdgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bdgTwinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } 90% { opacity: .2; transform: scale(.7) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) {
  .bdg, .bdg-img, .bdg-sweep, .bdg-aura, .bdg-orbit, .bdg-spark { animation: none !important; }
  .bdg-orbit, .bdg-spark, .bdg-sweep { display: none; }
}
/* placements */
.bdg.wl-hero { aspect-ratio: 1 / 1; max-width: 340px; margin: 34px auto 0; }
.bdg.ppl-auth { max-width: 230px; margin: 28px auto -40px; z-index: 0; }
.bdg.hero-ppl { aspect-ratio: 1 / 1; }
@media (min-width: 900px) { .bdg.hero-ppl { width: 250px; bottom: 10px; } }
.hero-compact .bdg.hero-ppl { width: 150px; top: 10px; }

/* Header logo: small brand badge with an orbiting light and a soft glow */
.lg-badge { position: relative; flex: 0 0 auto; display: inline-block; border-radius: 50%; isolation: isolate; }
.lg-badge img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lg-badge::before { content: ''; position: absolute; inset: -18%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .55), transparent 68%); filter: blur(6px); animation: bdgPulse 4.8s ease-in-out infinite alternate; }
.lg-badge::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 76%, rgba(245,240,255,.95) 90%, transparent 96%);
  -webkit-mask: radial-gradient(farthest-side, transparent 88%, #000 91%, #000 99%, transparent 100%);
          mask: radial-gradient(farthest-side, transparent 88%, #000 91%, #000 99%, transparent 100%);
  filter: drop-shadow(0 0 3px rgba(200,185,255,.9)); animation: bdgSpin 5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .lg-badge::before, .lg-badge::after { animation: none; } .lg-badge::after { display: none; } }
/* Sign-in pages already show the big badge: keep their top wordmark clean. */
body:has(.bdg.wl-hero, .bdg.ppl-auth) .wl-brand .lg-badge { display: none; }

/* ===== Step-by-step screens (one question per page, big buttons) ===== */
.wz { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
.wz-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; }
.wz-back { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 14px 0 18px; border-radius: 14px; background: var(--nude-2); color: var(--ink); font-weight: 700; font-size: 16px; }
.wz-back:hover { color: var(--ink); background: var(--nude); }
.wz-count { font-size: 14px; color: var(--muted); font-weight: 600; }
.wz-bar { display: flex; gap: 6px; }
.wz-bar i { flex: 1; height: 6px; border-radius: 6px; background: var(--line); }
.wz-bar i.on { background: var(--accent); }
.wz-q { font-size: clamp(24px, 6.4vw, 30px); line-height: 1.45; font-weight: 800; margin: 10px 0 2px; color: var(--ink); }
.wz-hint { font-size: 15.5px; color: var(--muted); margin: 4px 0 0; line-height: 1.8; }
.wz-sub { font-size: 15px; font-weight: 700; color: var(--ink-2); margin: 8px 0 -4px; }
.wz-list { display: flex; flex-direction: column; gap: 10px; }
.wz-opt { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 18px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; }
.wz-opt:hover { border-color: var(--accent-2); color: var(--ink); }
.wz-opt:active { transform: scale(.98); background: var(--accent-soft); }
.wz-opt .wz-t { flex: 1; font-size: 19px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-opt small { font-size: 14px; color: var(--muted); white-space: nowrap; }
.wz-new { border-style: dashed; border-color: var(--accent-2); background: var(--accent-soft); color: var(--accent-ink); }
.wz-new .wz-t { color: var(--accent-ink); }
.wz-search { display: flex; gap: 8px; }
.wz-input { min-height: 60px; font-size: 18px; border-radius: 16px; flex: 1; }
.wz-go { min-width: 60px; min-height: 60px; border-radius: 16px; padding: 0; }
.wz-form { display: flex; flex-direction: column; gap: 8px; }
.wz-label { font-size: 16px; font-weight: 700; margin-top: 8px; }
.wz-label small { font-weight: 500; color: var(--muted); }
.wz-big { min-height: 64px; font-size: 19px; border-radius: 18px; margin-top: 10px; gap: 8px; }
.wz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.wz-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 76px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; }
.wz-cell:hover { border-color: var(--accent-2); color: var(--ink); }
.wz-cell b { font-size: 22px; font-weight: 800; }
.wz-cell small { font-size: 13px; color: var(--muted); }
.wz-times .wz-cell { min-height: 64px; }
.wz-times .wz-cell b { font-size: 20px; }
.wz-group { border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface); }
.wz-group summary { min-height: 60px; display: flex; align-items: center; padding: 0 18px; font-size: 18px; font-weight: 700; cursor: pointer; list-style: none; }
.wz-group summary::after { content: '+'; margin-inline-start: auto; font-size: 24px; color: var(--muted); }
.wz-group[open] summary::after { content: '−'; }
.wz-group .wz-list { padding: 0 10px 12px; }
.wz-sum { display: flex; flex-direction: column; border-radius: 20px; background: var(--surface); border: 1.5px solid var(--line); overflow: hidden; }
.wz-sum > a, .wz-sum > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 8px 18px; color: var(--ink); border-bottom: 1px solid var(--line-soft); text-decoration: none; }
.wz-sum > :last-child { border-bottom: 0; }
.wz-sum span { color: var(--muted); font-size: 15.5px; }
.wz-sum b { font-size: 18px; font-weight: 800; text-align: left; }
.wz-sum > a:hover { background: var(--nude-2); color: var(--ink); }
.wz-check { font-size: 16px; min-height: 52px; display: flex; align-items: center; gap: 10px; }
.wz-empty { padding: 26px 18px; text-align: center; font-size: 17px; border-radius: 18px; background: var(--surface); border: 1.5px dashed var(--line); }
.wz-done { text-align: center; align-items: stretch; padding-top: 30px; }
.wz-ok { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: var(--green-soft); color: var(--green); }
@media (max-width: 380px) { .wz-opt { min-height: 62px; padding: 8px 14px; } .wz-opt .wz-t { font-size: 17.5px; } .wz-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } }
.wz-list > form { display: block; margin: 0; }
button.wz-opt { width: 100%; font: inherit; text-align: start; cursor: pointer; }
.wz-ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; display: grid; place-items: center; background: var(--nude-2); color: var(--accent-ink); }
.wz-new .wz-ic { background: var(--accent); color: #fff; }
.wz-danger { border-color: rgba(255, 146, 130, .35); }
.wz-danger .wz-t, .wz-danger .wz-ic { color: var(--red); }
.wz-danger .wz-ic { background: var(--red-soft); }
.wz-in .wz-ic { background: var(--green-soft); color: var(--green); }
.wz-out .wz-ic { background: var(--red-soft); color: var(--red); }
.wz-money .input { min-height: 72px; font-size: 30px; }
.wz-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wz-row2 .wz-opt { min-height: 96px; flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
.wz-row2 .wz-opt .wz-t { flex: 0 0 auto; white-space: normal; }
.wz-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wz-cell.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.wz-months { grid-template-columns: repeat(3, 1fr); }
.wz-months .wz-cell { min-height: 64px; }
.wz-grid > form { display: contents; }
button.wz-cell { font: inherit; cursor: pointer; width: 100%; }
.wz-durs { grid-template-columns: repeat(3, 1fr); }
/* Home: the main jobs as four big buttons */
.home-acts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.home-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 104px; border-radius: 20px; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink); font-size: 18px; font-weight: 800; text-align: center; }
.home-act:hover { color: var(--ink); border-color: var(--accent-2); }
.home-act:active { transform: scale(.97); }
.home-act svg { color: var(--accent-ink); }
.home-act.primary { grid-column: 1 / -1; min-height: 92px; flex-direction: row; gap: 12px; font-size: 21px; background: var(--grad); border: 0; color: #fff; box-shadow: 0 10px 26px rgba(var(--accent-rgb), .35); }
.home-act.primary svg { color: #fff; }
.home-act.in svg { color: var(--green); }
.home-act.wide { grid-column: 1 / -1; min-height: 72px; flex-direction: row; gap: 10px; }
.home-act.out svg { color: var(--red); }
@media (min-width: 900px) { .home-acts { grid-template-columns: 2fr 1fr 1fr 1fr; } .home-act.primary, .home-act.wide { grid-column: auto; flex-direction: column; min-height: 104px; } }
.wz-cell { min-width: 0; }
@media (max-width: 380px) { .wz-times .wz-cell b { font-size: 16.5px; } .wz-times { grid-template-columns: repeat(3, 1fr); } }
.wl-hello { font-size: 17px; line-height: 1.9; }
/* «با صدا بگویید» */
.wz-say { border-color: rgba(var(--accent-rgb), .45); background: linear-gradient(135deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .04)); }
.wz-say .wz-ic { background: var(--grad); color: #fff; }
.wz-heard { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(var(--accent-rgb), .1); color: var(--ink-2, var(--ink)); font-size: 14px; line-height: 1.8; }
.wz-heard svg { flex: none; margin-top: 5px; color: var(--accent); }
.say { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 6px; }
.say-mic { width: 116px; height: 116px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 14px 40px -12px rgba(var(--accent-rgb), .7); transition: transform .15s ease; }
.say-mic:active { transform: scale(.96); }
.say.rec .say-mic { background: linear-gradient(135deg, #FF7A8A, #E5394F); animation: say-pulse 1.3s ease-out infinite; }
.say.busy .say-mic { opacity: .55; cursor: progress; }
.say-st { margin: 0; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.8; min-height: 2em; }
.say.err .say-st { color: #E5394F; }
.say.ok .say-st { color: var(--ink); }
.say-text { min-height: 92px; resize: vertical; line-height: 1.9; }
@keyframes say-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 79, .5); } 100% { box-shadow: 0 0 0 26px rgba(229, 57, 79, 0); } }
@media (prefers-reduced-motion: reduce) { .say.rec .say-mic { animation: none; } }
.wz-say { flex-wrap: wrap; }
.wz-say small { white-space: normal; flex-basis: 100%; padding-inline-start: 62px; line-height: 1.7; }
.home-act.say { flex-wrap: wrap; row-gap: 2px; border-color: rgba(var(--accent-rgb), .45); background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04)); }
.home-act.say small { flex-basis: 100%; font-size: 13px; font-weight: 500; color: var(--muted); }
/* Desktop: the tiles stand in one row (icon, title, hint stacked), so the hint must not take a full row's height. */
@media (min-width: 900px) { .home-act.say { flex-wrap: nowrap; padding: 10px 14px; gap: 6px; } .home-act.say small { flex-basis: auto; line-height: 1.5; } }
.say-ex { margin: 0; padding: 12px 16px; list-style: none; display: flex; flex-direction: column; gap: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.8; color: var(--muted); }
.say-ex b { color: var(--ink); font-weight: 700; }

/* English (left-to-right): mirror the few placements that follow the reading direction. */
[dir=ltr] .icon-btn .dot { left: auto; right: 11px; }
[dir=ltr] select.input { background-position: right 14px center; padding-left: 14px; padding-right: 36px; }
[dir=ltr] .input-money .input { padding-left: 14px; padding-right: 64px; }
[dir=ltr] .input-money .unit { left: auto; right: 14px; }
[dir=ltr] .search .input { padding-right: 14px; padding-left: 46px; }
[dir=ltr] .search svg { right: auto; left: 15px; }
[dir=ltr] .cal-times span { right: auto; left: 0; }
[dir=ltr] .now-line::before { right: auto; left: -5px; }
[dir=ltr] .wl-back { right: auto; left: 18px; }
.wl-lang { position: absolute; top: max(22px, env(safe-area-inset-top)); left: 18px; z-index: 3; padding: 8px 14px; border-radius: 999px; font-size: 13px; color: #F8F8FA; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); text-decoration: none; }
[dir=ltr] .wl-lang { left: auto; right: 18px; }
.tg-steps { margin: 4px 0 6px; padding-inline-start: 20px; display: grid; gap: 8px; color: var(--muted); font-size: 14px; }
[dir=ltr] .input.ltr, [dir=ltr] .table th, [dir=ltr] .table td::before, [dir=ltr] .wl-card, [dir=ltr] .adm-meta, [dir=ltr] .cp-item, [dir=ltr] .cp-chosen, [dir=ltr] .bk-svc, [dir=ltr] .imp-way { text-align: left; }
/* Salon's own header picture (settings → تصویر سربرگ): an <img> placed by the owner (object-position + zoom). */
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.cover-shade { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to left, rgba(12,9,24,.9) 0%, rgba(12,9,24,.68) 45%, rgba(12,9,24,.22) 100%); }
[dir=ltr] .cover-shade { background: linear-gradient(to right, rgba(12,9,24,.9) 0%, rgba(12,9,24,.68) 45%, rgba(12,9,24,.22) 100%); }
@media (max-width: 899px) { .cover-shade, [dir=ltr] .cover-shade { background: linear-gradient(to top, rgba(12,9,24,.9) 0%, rgba(12,9,24,.5) 55%, rgba(12,9,24,.08) 100%); } }
.hero.has-cover { --hero-ink: #fff; --hero-muted: rgba(255,255,255,.86); color: #fff; min-height: 220px; justify-content: flex-end; }
@media (max-width: 899px) { .hero.has-cover { min-height: 200px; } }
.hero.has-cover .hero-text { position: relative; z-index: 1; text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.hero.has-cover h1 { color: #fff; }
.hero.has-cover .hero-sub { color: rgba(255,255,255,.86); }
.hero-cover-btn { position: absolute; top: 12px; left: 12px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); opacity: .75; }
.hero-cover-btn:hover { opacity: 1; color: #fff; }
[dir=ltr] .hero-cover-btn { left: auto; right: 12px; }
.bk-cover { position: relative; overflow: hidden; height: 150px; margin: -2px 0 12px; border-radius: 22px; }
.bk-cover .cover-shade { display: none; }
/* The editor: same frame shape as the home card on a phone */
.cover-edit { display: grid; gap: 12px; }
.cover-frame { position: relative; overflow: hidden; aspect-ratio: 390 / 200; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line); touch-action: none; cursor: grab; }
.cover-frame.dragging { cursor: grabbing; }
.cover-frame .cover-shade { opacity: .55; }
.cover-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.cover-hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; color: #fff; background: rgba(0,0,0,.45); white-space: nowrap; pointer-events: none; }
.cover-tools { display: grid; gap: 10px; }
.cover-zoom { display: flex; align-items: center; gap: 10px; }
.cover-zoom input[type=range] { flex: 1; accent-color: var(--accent); height: 28px; }
.cover-moves { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cover-moves .chip { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; font-size: 14px; cursor: pointer; }
.cover-pick { cursor: pointer; }
/* Services: quick edit of names and prices */
.svc-tip { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.svc-edit { color: var(--faint); display: inline-flex; }
.bump-card { padding: 14px 16px; display: grid; gap: 10px; margin-bottom: 14px; }
.bump-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bump-chip { font-size: 15px; padding: 8px 14px; cursor: pointer; }
.bulk-cat { margin: 14px 0 4px; font-size: 14px; }
.bulk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
@media (max-width: 520px) { .bulk-row { grid-template-columns: 1fr; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); } }
.bulk-save { position: sticky; bottom: 84px; margin-top: 14px; z-index: 3; }
.danger-text { color: var(--red); margin-top: 10px; }
.bk-logo-img { object-fit: cover; background: #fff; padding: 0; }
.logo-frame { aspect-ratio: 1 / 1; width: min(260px, 70vw); justify-self: center; border-radius: 50%; }
.logo-mini { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
/* «وقتی لینک را می‌فرستید»: a link-preview card like messengers draw it */
.share-prev { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface-2); max-width: 420px; }
.share-img { position: relative; aspect-ratio: 1.91 / 1; overflow: hidden; background: var(--surface); }
.share-img .cover-shade { display: none; }
.share-logo { display: grid; place-items: center; }
.share-logo img { width: 42%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.share-none { display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; padding: 16px; }
.share-txt { display: grid; gap: 3px; padding: 12px 14px; }