/* الطيب صالون كاش — 3 ثيمات: زمرد (كلاسيكي راقي، الافتراضي) · أونيكس (فخم بالليل) · كريستال (نهاري عصري).
   المرجع: docs/design/THEMES.md. مفيش لون مكتوب في أي شاشة: كله من المتغيرات دي. */

/* ================= زمرد: أخضر زيتي وكريمي، وشريط عمود الكوافير ================= */
:root, :root[data-theme="emerald"] {
  --bg: #F4EDE1; --surface: #FFFAF1; --surface2: #F1E8D8; --ink: #1D2A23; --muted: #7A7465; --line: #E6DCCB;
  --accent: #173D2C; --accentInk: #173D2C; --onAccent: #EFE4CF; --accentSoft: #E3EBE2;
  --hero: #FFFAF1; --heroLine: #E6DCCB; --heroInk: #173D2C; --heroText: #1D2A23; --heroMuted: #7A7465; --heroSoft: #F1E8D8;
  --headerBg: #173D2C; --headerInk: #EFE4CF; --headerMuted: #B9C7BB; --headerLine: #3C6150;
  --pole: repeating-linear-gradient(-45deg, #B23A2F 0 10px, #EFE4CF 10px 20px, #2A4F86 20px 30px, #EFE4CF 30px 40px);
  --ok: #2F7A52; --okBg: #E3EFE6; --busy: #B23A2F; --busyBg: #F6E3E0; --late: #C08A2C; --lateBg: #F6ECD8;
  --res: #2A4F86; --resBg: #E4EAF3; --danger: #B23A2F; --dangerBg: #F6E3E0;
  --av0: #F1E8D8; --avi0: #173D2C; --av1: #F1E8D8; --avi1: #B23A2F; --av2: #F1E8D8; --avi2: #C08A2C;
  --av3: #F1E8D8; --avi3: #2A4F86; --av4: #F1E8D8; --avi4: #2F7A52; --av5: #F1E8D8; --avi5: #7B4E8C;
  --t-hair: #2A4F86; --t-hairBg: #E4EAF3; --t-beard: #B23A2F; --t-beardBg: #F6E3E0; --t-skin: #2F7A52; --t-skinBg: #E3EFE6;
  --t-color: #7B4E8C; --t-colorBg: #EFE6F1; --t-care: #7A7465; --t-careBg: #F1E8D8;
  --leather: #173D2C; --chrome: #BDB4A2;
  --r: 20px; --r-sm: 12px; --r-xs: 9px;
  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-head: 'El Messiri', 'IBM Plex Sans Arabic', serif;
  --shadow: 0 1px 0 rgba(29, 42, 35, .03);
  --shadow-lg: 0 14px 34px -18px rgba(23, 61, 44, .45);
  --scrim: rgba(23, 33, 27, .45);
  --side: #173D2C; --sideInk: #EFE4CF; --sideMuted: #A9BBAE; --sideOn: rgba(239, 228, 207, .1); --sideOnInk: #FFFFFF; --sideLine: #2B5140; --sideMark: #B23A2F;
  color-scheme: light;
}

/* ================= أونيكس: أسود عميق ودهبي ================= */
:root[data-theme="onyx"] {
  --bg: #0D0D0F; --surface: #141416; --surface2: #1B1B1E; --ink: #F3EFE7; --muted: #8D877C; --line: #222225;
  --accent: #C9A35B; --accentInk: #E2C27F; --onAccent: #16120A; --accentSoft: #26231D;
  --hero: linear-gradient(150deg, #1D1A14 0%, #14120E 55%, #0F0E0C 100%); --heroLine: #2D2618; --heroInk: #F6E7C4; --heroText: #F3EFE7; --heroMuted: #A89C84; --heroSoft: rgba(201, 163, 91, .1);
  --headerBg: transparent; --headerInk: #F3EFE7; --headerMuted: #8D877C; --headerLine: #222225;
  --pole: none;
  --ok: #86D39F; --okBg: rgba(134, 211, 159, .12); --busy: #C9A35B; --busyBg: #26231D; --late: #E8846B; --lateBg: #2A1A16;
  --res: #8FB3E8; --resBg: rgba(143, 179, 232, .12); --danger: #E8846B; --dangerBg: #2A1A16;
  --av0: #E2C27F; --avi0: #0D0D0F; --av1: #E8A48F; --avi1: #0D0D0F; --av2: #D8C3A0; --avi2: #0D0D0F;
  --av3: #86D39F; --avi3: #0D0D0F; --av4: #8FB3E8; --avi4: #0D0D0F; --av5: #C2A3E0; --avi5: #0D0D0F;
  --t-hair: #8FB3E8; --t-hairBg: rgba(143, 179, 232, .12); --t-beard: #E8A48F; --t-beardBg: rgba(232, 164, 143, .12); --t-skin: #86D39F; --t-skinBg: rgba(134, 211, 159, .12);
  --t-color: #C2A3E0; --t-colorBg: rgba(194, 163, 224, .12); --t-care: #8D877C; --t-careBg: #1B1B1E;
  --leather: #6B5330; --chrome: #8D877C;
  --r: 24px; --r-sm: 14px; --r-xs: 10px;
  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-head: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --shadow: none;
  --shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, .8);
  --scrim: rgba(0, 0, 0, .6);
  --side: #111113; --sideInk: #F3EFE7; --sideMuted: #8D877C; --sideOn: #C9A35B; --sideOnInk: #16120A; --sideLine: #1F1F22; --sideMark: transparent;
  color-scheme: dark;
}

/* ================= كريستال: أبيض نضيف وأزرق قوي ================= */
:root[data-theme="crystal"] {
  --bg: #F5F7FB; --surface: #FFFFFF; --surface2: #EEF1F6; --ink: #0F1729; --muted: #6B7489; --line: #E6E9F0;
  --accent: #1747FF; --accentInk: #1747FF; --onAccent: #FFFFFF; --accentSoft: #E8EDFF;
  --hero: #1747FF; --heroLine: #1747FF; --heroInk: #FFFFFF; --heroText: #FFFFFF; --heroMuted: rgba(255, 255, 255, .78); --heroSoft: rgba(255, 255, 255, .16);
  --headerBg: transparent; --headerInk: #0F1729; --headerMuted: #6B7489; --headerLine: #E6E9F0;
  --pole: none;
  --ok: #12A05C; --okBg: #E6F8EF; --busy: #1747FF; --busyBg: #E8EDFF; --late: #FF7A1A; --lateBg: #FFF1E6;
  --res: #6E56CF; --resBg: #EFEAFF; --danger: #E5484D; --dangerBg: #FDECEC;
  --av0: #E8EDFF; --avi0: #1747FF; --av1: #FFF1E6; --avi1: #FF7A1A; --av2: #EFEAFF; --avi2: #6E56CF;
  --av3: #E6F8EF; --avi3: #12A05C; --av4: #FFE9F0; --avi4: #D6336C; --av5: #E3F6FC; --avi5: #0B8BB5;
  --t-hair: #1747FF; --t-hairBg: #E8EDFF; --t-beard: #FF7A1A; --t-beardBg: #FFF1E6; --t-skin: #12A05C; --t-skinBg: #E6F8EF;
  --t-color: #6E56CF; --t-colorBg: #EFEAFF; --t-care: #6B7489; --t-careBg: #EEF1F6;
  --leather: #0F1729; --chrome: #B4BCCB;
  --r: 24px; --r-sm: 14px; --r-xs: 10px;
  --font: 'Readex Pro', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-head: 'Readex Pro', system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(15, 23, 41, .06);
  --shadow-lg: 0 18px 40px -18px rgba(15, 23, 41, .28);
  --scrim: rgba(15, 23, 41, .4);
  --side: #FFFFFF; --sideInk: #0F1729; --sideMuted: #6B7489; --sideOn: #E8EDFF; --sideOnInk: #1747FF; --sideLine: #E6E9F0; --sideMark: transparent;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
a { color: var(--accentInk); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.3; font-weight: 600; font-family: var(--font-head); }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 16px; }
:root[data-theme="emerald"] h1, :root[data-theme="emerald"] h2 { letter-spacing: 0; }
p { margin: 0 0 1em; }
small, .muted { color: var(--muted); }
.num, .money { font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.wordmark { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: .2px; direction: ltr; unicode-bidi: isolate; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--onAccent); }

/* حاجات بتظهر في ثيم واحد بس (مثلًا منحنى أونيكس / حبوب كريستال / تذكرة زمرد) */
:root[data-theme="onyx"] .th-crystal, :root[data-theme="onyx"] .th-emerald, :root[data-theme="onyx"] .no-onyx,
:root[data-theme="crystal"] .th-onyx, :root[data-theme="crystal"] .th-emerald, :root[data-theme="crystal"] .no-crystal,
:root[data-theme="emerald"] .th-onyx, :root[data-theme="emerald"] .th-crystal, :root[data-theme="emerald"] .no-emerald { display: none !important; }

/* ---- كروت وأزرار */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); min-width: 0; }
:root[data-theme="crystal"] .card { border-color: transparent; }
.card.flat { box-shadow: none; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--accent); border-radius: var(--r-sm);
  padding: 8px 18px; min-height: 42px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--onAccent); background: var(--accent); white-space: nowrap;
  transition: filter .15s, background-color .15s, border-color .15s, transform .1s; }
.btn:hover { filter: brightness(1.06); text-decoration: none; }
:root[data-theme="crystal"] .btn:hover, :root[data-theme="emerald"] .btn:hover { filter: brightness(.94); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface2); filter: none; }
.btn.soft { background: var(--surface2); color: var(--ink); border-color: transparent; }
.btn.danger { background: var(--surface); color: var(--danger); border-color: var(--line); }
.btn.danger:hover { background: var(--dangerBg); border-color: transparent; filter: none; }
.btn.danger.solid { background: var(--danger); color: var(--surface); border-color: var(--danger); }
:root[data-theme="onyx"] .btn.danger.solid { color: var(--bg); }
.btn.sm { min-height: 34px; padding: 4px 12px; font-size: 13px; border-radius: var(--r-xs); }
.btn.lg { min-height: 54px; font-size: 16px; padding: 12px 22px; border-radius: calc(var(--r-sm) + 4px); }
.btn.icon { padding: 0; width: 42px; min-width: 42px; }
.btn.sm.icon { width: 34px; min-width: 34px; }
.btn.block { width: 100%; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.stack > * + * { margin-top: 14px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 900px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .g2 { grid-template-columns: minmax(0, 1fr); } .auto { grid-template-columns: minmax(0, 1fr); } }

/* ---- فورم */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; min-width: 0; }
.field > label, .lbl { font-size: 13px; color: var(--muted); font-weight: 500; }
input, select, textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 12px; min-height: 42px; width: 100%; min-width: 0; transition: border-color .15s, box-shadow .15s; }
:root[data-theme="crystal"] input, :root[data-theme="crystal"] select, :root[data-theme="crystal"] textarea { background: var(--surface2); border-color: transparent; }
:root[data-theme="onyx"] input, :root[data-theme="onyx"] select, :root[data-theme="onyx"] textarea { background: var(--surface2); }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accentSoft); }
:root[data-theme="crystal"] input:focus, :root[data-theme="crystal"] select:focus, :root[data-theme="crystal"] textarea:focus { background: var(--surface); }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); padding: 0; box-shadow: none; }
input[type="number"], input[dir="ltr"] { text-align: start; }
.check { display: flex; gap: 8px; align-items: center; cursor: pointer; font-size: 14px; }
.inline-fields { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.inline-fields .field { margin: 0; flex: 1 1 140px; }
.err-msg { color: var(--danger); font-size: 13px; min-height: 1em; }

/* ---- شارات وتاجات */
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 600; line-height: 1.7;
  background: var(--surface2); color: var(--muted); white-space: nowrap; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.chip.plain::before { display: none; }
.chip.ok, .chip.free, .chip.approved, .chip.done, .chip.arrived { background: var(--okBg); color: var(--ok); }
.chip.busy, .chip.in_progress { background: var(--busyBg); color: var(--busy); }
.chip.late, .chip.warn { background: var(--lateBg); color: var(--late); }
.chip.rejected, .chip.no_show, .chip.cancelled, .chip.danger { background: var(--dangerBg); color: var(--danger); }
.chip.reserved, .chip.pending, .chip.booked { background: var(--resBg); color: var(--res); }
.chip.closed, .chip.info { background: var(--surface2); color: var(--muted); }
.tag { display: inline-block; border-radius: 7px; padding: 0 8px; font-size: 12px; font-weight: 500; line-height: 1.8; white-space: nowrap; }
.tag.hair { color: var(--t-hair); background: var(--t-hairBg); } .tag.beard { color: var(--t-beard); background: var(--t-beardBg); }
.tag.skin { color: var(--t-skin); background: var(--t-skinBg); } .tag.color { color: var(--t-color); background: var(--t-colorBg); }
.tag.care, .tag.other { color: var(--t-care); background: var(--t-careBg); }
.badge { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: var(--surface); font-size: 11px; font-weight: 600;
  align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
:root[data-theme="onyx"] .badge { color: var(--bg); }

/* ---- جداول: بتسكرول جوه الكونتينر بتاعها بس */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
:root[data-theme="crystal"] .table-wrap { border-color: transparent; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
th { font-weight: 500; color: var(--muted); font-size: 12.5px; background: var(--surface2); }
:root[data-theme="onyx"] th { background: transparent; text-transform: none; letter-spacing: .2px; }
tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; } tbody tr.click:hover td { background: var(--surface2); }
td.wrap { white-space: normal; min-width: 160px; }
td.n, th.n { text-align: end; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 600; background: var(--surface2); }

/* ---- حوارات وإشعارات */
.modal { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal .box { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-lg); }
.modal .box.wide { max-width: 720px; }
.modal .box h2 { margin-bottom: 14px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal .box, .modal .box.wide { max-width: none; border-radius: var(--r) var(--r) 0 0; max-height: 92vh; padding: 20px 16px 24px; }
  .modal .actions .btn { flex: 1; }
}
.toast { position: fixed; bottom: 20px; inset-inline-start: 50%; transform: translateX(50%); z-index: 60; background: var(--ink); color: var(--bg); padding: 11px 20px;
  border-radius: var(--r-sm); font-size: 14px; max-width: calc(100vw - 32px); box-shadow: var(--shadow-lg); }
.toast.err { background: var(--danger); color: var(--surface); }
.empty { text-align: center; color: var(--muted); padding: 32px 12px; font-size: 14px; }
.hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv b { font-weight: 600; }
.seg { display: inline-flex; border-radius: var(--r-sm); overflow: hidden; background: var(--surface2); flex-wrap: wrap; padding: 3px; gap: 2px; }
.seg button { font: inherit; font-size: 13.5px; border: 0; background: transparent; color: var(--muted); padding: 6px 14px; cursor: pointer; min-height: 34px; border-radius: calc(var(--r-sm) - 3px); }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
:root[data-theme="onyx"] .seg button.on { background: var(--accentSoft); color: var(--accentInk); }
:root[data-theme="crystal"] .seg button.on { background: var(--ink); color: var(--surface); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { font: inherit; font-size: 14px; padding: 10px 14px; border: 0; background: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs .on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; text-decoration: none; }
:root[data-theme="crystal"] .tabs { border: 0; gap: 8px; }
:root[data-theme="crystal"] .tabs a, :root[data-theme="crystal"] .tabs button { border: 0; border-radius: 999px; background: var(--surface); padding: 8px 16px; margin: 0; box-shadow: var(--shadow); }
:root[data-theme="crystal"] .tabs .on { background: var(--ink); color: var(--surface); }
:root[data-theme="onyx"] .tabs { border: 0; background: var(--surface); border-radius: calc(var(--r-sm) + 2px); padding: 4px; gap: 2px; display: inline-flex; max-width: 100%; }
:root[data-theme="onyx"] .tabs a, :root[data-theme="onyx"] .tabs button { border: 0; border-radius: var(--r-sm); margin: 0; padding: 8px 16px; }
:root[data-theme="onyx"] .tabs .on { background: var(--accentSoft); color: var(--accentInk); }
:root[data-theme="emerald"] .tabs .on { border-bottom-color: var(--busy); color: var(--accent); }

/* زرار الثيم: أيقونة نصها بلون الثيم + نقطة بلون الأكسنت */
.theme-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; flex: none; }
.theme-btn:hover { background: var(--surface2); }
:root[data-theme="emerald"] .theme-btn { border-radius: 50%; }
.theme-btn .theme-ic path { stroke: currentColor; }
.theme-btn .theme-dot { position: absolute; bottom: 7px; inset-inline-end: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
:root[data-theme="emerald"] .theme-btn .theme-dot { background: var(--busy); }

/* اختيار الثيم بالكروت */
/* اختيار الثيم في الهيدر: 3 اختيارات ظاهرة (لون + اسم) */
.theme-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); flex: none; }
.theme-seg button { font: inherit; font-size: 12.5px; line-height: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.theme-seg button:hover { color: var(--ink); }
.theme-seg button[aria-checked="true"] { background: var(--accentSoft); color: var(--ink); font-weight: 600; }
.theme-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ts-sw { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .45); }
/* ألوان المعاينة ثابتة لكل ثيم (زي كروت المعاينة تحت) عشان تبان صح وانت على أي ثيم */
.ts-emerald { background: linear-gradient(135deg, #173D2C 0 55%, #F4EDE1 55%); }
.ts-onyx { background: linear-gradient(135deg, #0D0D0F 0 55%, #C9A35B 55%); }
.ts-crystal { background: linear-gradient(135deg, #F5F7FB 0 55%, #1747FF 55%); }
:root[data-theme="emerald"] :is(.top, .bhead, .auth-top, .setup-top, .gate, .site-head) .theme-seg { background: transparent; border-color: var(--headerLine); }
:root[data-theme="emerald"] :is(.top, .bhead, .auth-top, .setup-top, .gate, .site-head) .theme-seg button { color: var(--headerMuted); }
:root[data-theme="emerald"] :is(.top, .bhead, .auth-top, .setup-top, .gate, .site-head) .theme-seg button[aria-checked="true"] { color: var(--headerInk); background: color-mix(in srgb, var(--headerInk) 14%, transparent); }
:root[data-theme="crystal"] :is(.bhead, .gate, .auth-top) .theme-seg { background: var(--heroSoft); border-color: transparent; }
:root[data-theme="crystal"] :is(.bhead, .gate, .auth-top) .theme-seg button { color: var(--heroInk); opacity: .8; }
:root[data-theme="crystal"] :is(.bhead, .gate, .auth-top) .theme-seg button[aria-checked="true"] { opacity: 1; background: color-mix(in srgb, var(--heroInk) 18%, transparent); }
@media (max-width: 640px) {
  .theme-seg button { padding: 6px 7px; }
  .theme-seg button:not([aria-checked="true"]) .ts-name { display: none; }
}
.theme-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .theme-pick { grid-template-columns: minmax(0, 1fr); } }
.tp-card { position: relative; font: inherit; color: var(--ink); text-align: start; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r); padding: 10px 10px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 12px; }
.tp-card:hover { border-color: var(--muted); }
.tp-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accentSoft); }
.tp-txt { padding: 0 6px; display: flex; flex-direction: column; }
.tp-txt b { font-size: 16px; font-weight: 600; font-family: var(--font-head); }
.tp-txt small { font-size: 13px; }
.tp-check { position: absolute; top: 18px; inset-inline-start: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: none; }
.tp-check::after { content: ''; position: absolute; inset: 5px 7px 7px 7px; border: solid var(--onAccent); border-width: 0 2px 2px 0; transform: rotate(45deg); width: 6px; height: 10px; inset: 4px auto auto 7.5px; }
.tp-card[aria-checked="true"] .tp-check { display: block; }
/* المعاينة المصغرة: ألوانها ثابتة لأنها صورة للثيم نفسه مش للثيم الحالي */
.tp-prev { height: 150px; border-radius: calc(var(--r) - 6px); overflow: hidden; display: flex; flex-direction: column; gap: 7px; padding: 0 12px 12px; position: relative; }
.tp-prev > span { display: block; }
.tp-head { height: 30px; margin: 0 -12px; }
.tp-hero { height: 50px; border-radius: 12px; padding: 9px 10px; display: flex !important; flex-direction: column; gap: 6px; }
.tp-hero i { width: 40%; height: 5px; border-radius: 3px; opacity: .6; }
.tp-hero b { width: 58%; height: 13px; border-radius: 4px; }
.tp-row { display: flex !important; gap: 6px; }
.tp-row i { flex: 1; height: 22px; border-radius: 8px; }
.tp-cta { height: 18px; border-radius: 8px; }
.tp-onyx { background: #0D0D0F; }
.tp-onyx .tp-hero { background: linear-gradient(150deg, #1D1A14, #0F0E0C); border: 1px solid #2D2618; }
.tp-onyx .tp-hero i { background: #A89C84; } .tp-onyx .tp-hero b { background: #F6E7C4; }
.tp-onyx .tp-row i { background: #141416; border: 1px solid #222225; } .tp-onyx .tp-cta { background: #C9A35B; }
.tp-crystal { background: #F5F7FB; }
.tp-crystal .tp-hero { background: #1747FF; } .tp-crystal .tp-hero i { background: #FFFFFF; } .tp-crystal .tp-hero b { background: #FFFFFF; }
.tp-crystal .tp-row i { background: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 23, 41, .08); } .tp-crystal .tp-cta { background: #0F1729; width: 40%; }
.tp-emerald { background: #F4EDE1; }
.tp-emerald .tp-head { background: #173D2C; border-bottom: 5px solid transparent; border-image: repeating-linear-gradient(-45deg, #B23A2F 0 6px, #EFE4CF 6px 12px, #2A4F86 12px 18px, #EFE4CF 18px 24px) 5; }
.tp-emerald .tp-hero { background: #FFFAF1; border: 1px solid #E6DCCB; } .tp-emerald .tp-hero i { background: #7A7465; } .tp-emerald .tp-hero b { background: #173D2C; }
.tp-emerald .tp-row i { background: #FFFAF1; border: 1px solid #E6DCCB; } .tp-emerald .tp-cta { background: #173D2C; }

.bar { height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.bar.late > i { background: var(--late); }

/* ---- أفاتار الكوافير (لون ثابت حسب id) وحلقة التقدم */
.av { --avb: var(--av0); --avf: var(--avi0); display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--avb); color: var(--avf);
  font-weight: 700; font-size: 17px; line-height: 1; font-family: var(--font-head); }
.av.c1 { --avb: var(--av1); --avf: var(--avi1); } .av.c2 { --avb: var(--av2); --avf: var(--avi2); } .av.c3 { --avb: var(--av3); --avf: var(--avi3); }
.av.c4 { --avb: var(--av4); --avf: var(--avi4); } .av.c5 { --avb: var(--av5); --avf: var(--avi5); }
:root[data-theme="crystal"] .av.sq { border-radius: 30%; }
.av.sm { width: 24px; height: 24px; font-size: 11px; font-weight: 600; box-shadow: 0 0 0 2px var(--surface); }
.ring { position: relative; display: inline-grid; place-items: center; flex: none; width: 64px; height: 64px; }
.ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .rt { fill: none; stroke: var(--surface2); stroke-width: 3.5; }
.ring .rp { fill: none; stroke: var(--busy); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray .4s; }
.ring.late .rp { stroke: var(--late); }
.ring.free .rt { stroke: var(--ok); stroke-dasharray: 2.2 3.1; opacity: .9; }
.ring.reserved .rt { stroke: var(--res); stroke-dasharray: 2.2 3.1; }
.ring.closed .rt { stroke: var(--line); }
.ring > .av { width: calc(100% - 14px); height: calc(100% - 14px); }
.ring.closed > .av { opacity: .45; }
.ring .rk { position: absolute; bottom: -2px; inset-inline-start: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: var(--surface); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.ring .rk svg { width: 12px; height: 12px; stroke-width: 2.4; }

/* ---- كرسي الكوافير */
.chair-svg .c-leather { fill: var(--leather); }
.chair-svg .c-seam { stroke: rgba(255, 255, 255, .14); stroke-width: 1; fill: none; }
.chair-svg .c-chrome { fill: var(--chrome); }
.chair-svg .c-chrome-d { fill: color-mix(in srgb, var(--chrome) 75%, #000); }
.chair-svg .c-chrome-s { stroke: var(--chrome); stroke-width: 3.2; stroke-linecap: round; fill: none; }
.chair-svg .c-chrome-s.w { stroke-width: 4.5; }
.chair-svg .c-floor { fill: var(--line); }
.chair-svg.st-busy .c-floor { fill: var(--busy); opacity: .35; }
.chair-svg.st-reserved .c-floor { fill: var(--res); opacity: .35; }
.chair-svg.st-free .c-floor { fill: var(--ok); opacity: .35; }
.chair-svg.st-closed { opacity: .55; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.busy { background: var(--busy); } .dot.reserved { background: var(--res); } .dot.free { background: var(--ok); } .dot.closed { background: var(--line); } .dot.late { background: var(--late); }

/* ---- شريط عمود الكوافير (زمرد) — يتحط تحت أي هيدر */
.pole { display: none; height: 7px; background: var(--pole); opacity: .92; }
:root[data-theme="emerald"] .pole { display: block; }