/* ─────────────────────────────────────────────────────────────────────────
   Cierge · Luxury layer — shared across all demo interfaces
   Loaded AFTER each page's own stylesheet so it refines without rewriting.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --lux-gold:      #d4af5a;
  --lux-gold-hi:   #efd58a;
  --lux-gold-lo:   #a9843a;
  --lux-gold-line: rgba(212,175,90,.22);
  --lux-gold-soft: rgba(212,175,90,.08);
  --lux-cream:     #f0ebe0;
  --lux-ink:       #0c0905;
  --lux-ease:      cubic-bezier(.22,.61,.36,1);
}

/* Ground: deep black with a warm gold aurora at the top and a faint vignette */
body {
  background-color: var(--lux-ink) !important;
  background-image:
    radial-gradient(1100px 520px at 50% -140px, rgba(212,175,90,.13), transparent 62%),
    radial-gradient(700px 420px at 100% 100%, rgba(212,175,90,.045), transparent 60%),
    linear-gradient(180deg, #0e0b06 0%, #0b0804 60%, #080603 100%) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#luxGrain {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .045; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#luxVignette { position: fixed; inset: 0; z-index: 2147482999; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.42) 100%); }

::selection { background: rgba(212,175,90,.35); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(212,175,90,.35) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(212,175,90,.45), rgba(212,175,90,.2)); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Brand: animated logo + wordmark + motto ─────────────────────────────── */
.lux-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; line-height: 1; }
.lux-brand-video {
  height: 40px; width: 60px; object-fit: cover; border-radius: 9px; display: block;
  background: #000; box-shadow: 0 0 0 1px rgba(212,175,90,.28), 0 0 22px -4px rgba(212,175,90,.45);
}
.lux-brand-text { display: flex; flex-direction: column; gap: 4px; }
.lux-brand-name {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 19px; letter-spacing: .24em;
  background: linear-gradient(100deg, var(--lux-gold-hi) 0%, var(--lux-gold) 45%, var(--lux-gold-lo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .1em;
}
.lux-brand-motto { font-family: 'Inter', system-ui, sans-serif; font-size: 8px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: rgba(240,235,224,.42); white-space: nowrap; }
.lux-brand--hero { flex-direction: column; gap: 16px; text-align: center; }
.lux-brand--hero .lux-brand-video { height: 112px; width: 168px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(212,175,90,.35), 0 0 60px -10px rgba(212,175,90,.55), 0 30px 60px -30px #000; }
.lux-brand--hero .lux-brand-text { align-items: center; gap: 8px; }
.lux-brand--hero .lux-brand-name { font-size: 34px; font-weight: 400; }
.lux-brand--hero .lux-brand-motto { font-size: 10px; letter-spacing: .38em; color: rgba(212,175,90,.6); }
.lux-brand--doc .lux-brand-video { height: 30px; width: 45px; border-radius: 7px; }
.lux-brand--doc .lux-brand-name { font-size: 16px; }
.lux-brand--doc .lux-brand-motto { font-size: 7px; }
@media (max-width: 600px) { .lux-brand-motto { display: none; } .lux-brand--hero .lux-brand-motto { display: block; } }

/* ── Surfaces: glass cards with a hairline gold edge and gentle lift ──────── */
.demo-card, .lock-box, .gate-box, .kpi, .card, .panel, .num-card, .pain-card, .sol-card, .price-card, .what-you-get,
.feed-item, .detail-card, .stat, .stat-card, .comp-card, .companion-card, .method-card, .section, .template-block, .appt-box,
.modal-kpi, .clinic-card, .alert-card, .rpt-card, .chart-card, .recall-tier {
  background: linear-gradient(160deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.018) 100%) !important;
  border: 1px solid var(--lux-gold-line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -28px rgba(0,0,0,.9);
  transition: border-color .35s var(--lux-ease), transform .35s var(--lux-ease), box-shadow .35s var(--lux-ease);
}
.demo-card:hover, .kpi:hover, .num-card:hover, .pain-card:hover, .sol-card:hover, .feed-item:hover, .companion-card:hover, .method-card:hover, .clinic-card:hover {
  border-color: rgba(212,175,90,.45) !important; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 48px -26px rgba(0,0,0,.95), 0 0 40px -18px rgba(212,175,90,.45);
}
.feed-item.active { border-color: rgba(212,175,90,.6) !important; background: linear-gradient(160deg, rgba(212,175,90,.12), rgba(212,175,90,.04)) !important; }

/* Top bars & sidebars: a gold hairline with a soft glow under it */
.topbar, .nav, .sidebar, .sl, .site-header, .doc-header {
  border-bottom-color: var(--lux-gold-line) !important;
  background: linear-gradient(180deg, rgba(14,11,6,.92), rgba(12,9,5,.85)) !important;
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 1px 0 rgba(212,175,90,.12), 0 12px 30px -24px rgba(212,175,90,.35);
}
.tb-tab.active, .sl-item.active, .tab.active { color: var(--lux-gold-hi) !important; }
.tb-tab.active::after, .sl-item.active::before { background: linear-gradient(90deg, var(--lux-gold-hi), var(--lux-gold-lo)) !important; }

/* Primary actions: brushed gold */
.btn-gold, .price-cta, .btn-primary, .lock-btn, .btn-unlock, .gate-btn, .btn-confirm, .btn-report, .btn-save, .btn-add, .btn-nav, button.primary, .cta-primary {
  background: linear-gradient(135deg, #efd58a 0%, #d4af5a 48%, #b8923a 100%) !important;
  color: #0c0905 !important; border: 0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -12px rgba(212,175,90,.75);
  transition: transform .25s var(--lux-ease), box-shadow .25s var(--lux-ease), filter .25s;
}
.btn-gold:hover, .price-cta:hover, .btn-primary:hover, .lock-btn:hover, .btn-unlock:hover, .gate-btn:hover, .btn-confirm:hover, .btn-report:hover, .btn-save:hover, .btn-nav:hover {
  transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 16px 30px -12px rgba(212,175,90,.9);
}
.btn-ghost, .btn-rm, .btn-secondary, .tb-period, .filter-btn { border-color: var(--lux-gold-line) !important; transition: border-color .25s, background .25s; }
.btn-ghost:hover, .btn-secondary:hover { border-color: rgba(212,175,90,.5) !important; background: var(--lux-gold-soft) !important; }

/* Inputs: calm by default, gold focus ring */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
  border-color: rgba(212,175,90,.16) !important; transition: border-color .25s, box-shadow .25s, background .25s;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, select:focus, textarea:focus {
  border-color: rgba(212,175,90,.55) !important; box-shadow: 0 0 0 3px rgba(212,175,90,.14) !important; outline: none;
}

/* Tables: softer rules, gold header hairline */
table th { border-bottom: 1px solid var(--lux-gold-line) !important; color: rgba(212,175,90,.75) !important; letter-spacing: .08em; }
table tr:hover > td { background: rgba(212,175,90,.035); }

/* Status badges: a touch of depth */
.badge, .status, .tag, .pill { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }

/* Headings: tighter, balanced */
h1, h2 { text-wrap: balance; }
.lock-title, .portal-title, .page-title, .hero h1, .gate-title { letter-spacing: -.01em; }

/* Entrance */
@media (prefers-reduced-motion: no-preference) {
  body { animation: luxFade .7s var(--lux-ease) both; }
  @keyframes luxFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ── Toasts & modals (replace alert / confirm / prompt) ──────────────────── */
#luxToasts { position: fixed; top: 18px; right: 18px; z-index: 2147483100; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 36px)); }
.lux-toast {
  background: linear-gradient(160deg, rgba(20,16,9,.97), rgba(12,9,5,.97)); border: 1px solid rgba(212,175,90,.35); border-left: 3px solid var(--lux-gold);
  color: var(--lux-cream); font: 13px/1.5 'Inter', system-ui, sans-serif; padding: 12px 16px; border-radius: 10px;
  box-shadow: 0 20px 50px -20px #000, 0 0 30px -14px rgba(212,175,90,.5); animation: luxToastIn .35s var(--lux-ease) both; white-space: pre-line;
}
.lux-toast.ok { border-left-color: #4cba88; } .lux-toast.warn { border-left-color: #e08a3a; } .lux-toast.err { border-left-color: #e05555; }
.lux-toast.out { animation: luxToastOut .3s var(--lux-ease) forwards; }
@keyframes luxToastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes luxToastOut { to { opacity: 0; transform: translateX(16px); } }
#luxModal { position: fixed; inset: 0; z-index: 2147483150; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(5,4,2,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: luxFadeIn .25s both; }
@keyframes luxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lux-modal-box { width: 100%; max-width: 420px; background: linear-gradient(160deg, #161108, #0e0b06); border: 1px solid rgba(212,175,90,.35); border-radius: 16px; padding: 26px 26px 22px;
  box-shadow: 0 40px 80px -30px #000, 0 0 60px -20px rgba(212,175,90,.5); color: var(--lux-cream); font-family: 'Inter', system-ui, sans-serif; animation: luxPop .3s var(--lux-ease) both; }
@keyframes luxPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.lux-modal-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 400; color: var(--lux-gold-hi); margin: 0 0 8px; letter-spacing: .01em; }
.lux-modal-msg { font-size: 13.5px; line-height: 1.6; color: rgba(240,235,224,.72); margin: 0 0 18px; white-space: pre-line; }
.lux-modal-input { width: 100%; box-sizing: border-box; background: rgba(0,0,0,.35); border: 1px solid rgba(212,175,90,.25); border-radius: 8px; color: var(--lux-cream); font: 14px 'Inter', system-ui, sans-serif; padding: 11px 13px; margin-bottom: 18px; }
.lux-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.lux-btn { font: 600 12px/1 'Inter', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 11px 18px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(212,175,90,.3); background: transparent; color: rgba(240,235,224,.8); transition: all .2s; }
.lux-btn:hover { border-color: rgba(212,175,90,.6); background: var(--lux-gold-soft); }
.lux-btn.primary { background: linear-gradient(135deg, #efd58a, #d4af5a 48%, #b8923a); color: #0c0905; border: 0; box-shadow: 0 10px 24px -12px rgba(212,175,90,.75); }
.lux-btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Demo pill: refined */
#demoPill { background: linear-gradient(160deg, rgba(20,16,9,.97), rgba(12,9,5,.97)) !important; border: 1px solid rgba(212,175,90,.3) !important; box-shadow: 0 12px 30px -16px #000, 0 0 24px -12px rgba(212,175,90,.4) !important; }

/* Lock / gate screens: centred brand hero breathes */
.lock-screen, #gate, .gate { background: transparent !important; }
.lock-box, .gate-box { padding: 34px 34px 30px !important; border-radius: 18px !important; }

/* Topbar fit: never wrap the clinic name; drop the motto on narrower screens */
.tb-clinic, .tb-right, .nav-tag { white-space: nowrap; }
@media (max-width: 1500px) { .topbar .lux-brand-motto, .tb .lux-brand-motto, .nav .lux-brand-motto { display: none; } }
.sl-logo .lux-brand-motto { font-size: 7px; letter-spacing: .16em; }