/* Graphite & burgundy. The public site's red/cream radial gradients, adapted for a working UI. */
:root {--motion-fast:140ms;--motion-normal:220ms;--motion-slow:280ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
#main-content,body > dialog {
  --ws-bg:#15181e;--ws-panel:#242932;--ws-raised:#2d333e;--ws-input:#1d222b;
  --ws-line:#48515e;--ws-line-soft:#3a424e;--ws-ink:#f2f3f5;--ws-muted:#b5bdc9;--ws-red:#ee92a4;
  --bl-brand:#b52e48;--bl-brand-bright:#c83e56;--bl-brand-deep:#8c233d;
  --bl-canvas:radial-gradient(circle at 88% 4%,#a72b4024,transparent 32rem),radial-gradient(circle at 10% 18%,#ebe4d810,transparent 28rem),linear-gradient(160deg,#15181e,#1e222a 52%,#16191f);
  --bl-surface:linear-gradient(145deg,#ffffff06,transparent 65%),var(--ws-panel);
  --bl-header:radial-gradient(circle at 88% 0%,#a32b403d,transparent 34rem),radial-gradient(circle at 8% 0%,#ebe4d80c,transparent 24rem),linear-gradient(135deg,#282d36,#1b1e25 65%,#251e27);
  --bl-paid-bg:linear-gradient(135deg,#25483d,#20372f);--bl-paid-line:#3d6b59;--bl-paid-ink:#d3eedf;
  --bl-due-bg:linear-gradient(135deg,#4c2d38,#3b2731);--bl-due-line:#81505e;--bl-due-ink:#ffe0e6;
  --bl-loyalty-bg:linear-gradient(130deg,#b8995a18,transparent 75%),var(--ws-panel);
  --bl-shadow:0 8px 24px #0000001c,inset 0 1px 0 #ffffff05;
}
:root[data-theme=light] :is(#main-content,body > dialog) {
  --ws-bg:#f2f0ed;--ws-panel:#fff;--ws-raised:#f6f4f1;--ws-input:#fff;
  --ws-line:#cbc7c2;--ws-line-soft:#dcd8d3;--ws-ink:#252830;--ws-muted:#5b626d;--ws-red:#a32b40;
  --bl-canvas:radial-gradient(circle at 90% 3%,#a32b4010,transparent 32rem),radial-gradient(circle at 10% 22%,#c9b28d19,transparent 28rem),linear-gradient(160deg,#f5f3f0,#eeeae5 62%,#f5f3f0);
  --bl-surface:linear-gradient(145deg,#fff,#fdfcfb);
  --bl-paid-bg:linear-gradient(135deg,#e5f0e9,#f0f5f1);--bl-paid-line:#bdcfbf;--bl-paid-ink:#27543e;
  --bl-due-bg:linear-gradient(135deg,#f9e3e8,#fcf0f2);--bl-due-line:#dbacb7;--bl-due-ink:#942f45;
  --bl-loyalty-bg:linear-gradient(130deg,#f4eddd,#fffdf8 85%);
  --bl-shadow:0 6px 20px #45322a09,inset 0 1px 0 #fff;
}
#app #main-content {background:var(--bl-canvas)}
#app #main-content > .view:not(#view-calendar) .page-heading {
  padding:22px 24px;border:1px solid #45404b;border-radius:16px;background:var(--bl-header);box-shadow:var(--bl-shadow);
}
#app #main-content > .view:not(#view-calendar) .page-heading h1 {color:#f4f3f5}
#app #main-content > .view:not(#view-calendar) .page-heading :is(p,.clients-eyebrow) {color:#c8cbd4}
#app #main-content > .view:not(#view-calendar) .page-heading button.ghost {color:#e8e9ef;border-color:#676774;background:#ffffff08}
#app #main-content > .view:not(#view-calendar) :is(.toolbar,.table-wrap,.report-section,.settings-section,.card,.service-group) {background:var(--bl-surface);border-color:var(--ws-line-soft);box-shadow:var(--bl-shadow)}
#app #main-content #services-list .service-group-header {background:linear-gradient(110deg,#a32b4012,transparent 80%),var(--ws-raised)}
body > dialog {background:var(--ws-panel);box-shadow:0 28px 90px #00000059,inset 0 1px 0 #ffffff0a}
body > dialog :is(.dialog-header,.client-drawer-header) {background:var(--bl-header);border-bottom-color:#48434f}
body > dialog :is(.dialog-header,.client-drawer-header) :is(h2,.icon-close) {color:#f4f3f5}
body > dialog .dialog-header .ghost {color:#e4e5eb;border-color:#62616f;background:#ffffff08}
body > dialog .dialog-body {background:var(--bl-canvas)}
body > dialog .dialog-footer {background:var(--ws-raised)}
#appointment-dialog .booking-columns {background:var(--bl-canvas)}
:is(#main-content,body > dialog) button.primary,
:is(#main-content,body > dialog) button[type=submit]:not(.ghost):not(.danger) {
  background:linear-gradient(135deg,var(--bl-brand-bright),var(--bl-brand) 52%,var(--bl-brand-deep));color:#fff;border-color:#e47a8b66;
  box-shadow:0 4px 12px #841f3626,inset 0 1px 0 #ffffff21;
}
:is(#main-content,body > dialog) button.primary:hover:not(:disabled),
:is(#main-content,body > dialog) button[type=submit]:not(.ghost):not(.danger):hover:not(:disabled) {
  background:linear-gradient(135deg,#d34c63,#b92e4a 58%,#9d2943);border-color:#ee9aab99;box-shadow:0 6px 18px #841f3638,inset 0 1px 0 #ffffff2b;
}
:is(#main-content,body > dialog) :is(button,a,summary):focus-visible {outline-color:var(--ws-red)}
/* The client profile follows the selected concept in both themes. */
body > dialog#client-drawer .client-drawer-header {background:var(--bl-header);border-color:#48434f}
#client-drawer .client-drawer-body {background:var(--bl-canvas)}
body > dialog#client-drawer .client-drawer-title {color:#f4f3f5}
#client-drawer .client-drawer-subtitle,#client-drawer .client-drawer-subtitle a {color:#cbd0db}
#client-drawer .client-profile-header-actions :is(.ghost,.icon-close) {color:#f1f1f4;border-color:#636572;background:#ffffff06}
#client-drawer .client-drawer-stat {background:var(--bl-surface);border-color:var(--ws-line-soft);box-shadow:var(--bl-shadow)}
#client-drawer .client-drawer-stat--success {border-top-color:#578b73}
#client-drawer .client-drawer-stat--next {border-top-color:var(--bl-brand)}
#client-drawer .client-drawer-section {background:var(--bl-surface);border-color:var(--ws-line-soft);box-shadow:var(--bl-shadow)}
#client-drawer .client-drawer-section h3 {display:flex;align-items:center;gap:12px}
#client-drawer .client-drawer-section h3::before {content:"";display:block;align-self:stretch;width:4px;min-height:20px;flex:0 0 4px;border-radius:4px;background:linear-gradient(180deg,#da5a74,var(--bl-brand))}
#client-drawer .client-profile-finance-card {background:var(--ws-raised);border-color:var(--ws-line)}
#client-drawer .client-profile-finance-card[data-finance-state=paid],
#client-drawer .client-profile-finance-card[data-finance-state=clear] {background:var(--bl-paid-bg);border-color:var(--bl-paid-line)}
#client-drawer .client-profile-finance-card[data-finance-state=due] {background:var(--bl-due-bg);border-color:var(--bl-due-line)}
#client-drawer .client-profile-finance-card[data-finance-state=paid] > strong,
#client-drawer .client-profile-finance-card[data-finance-state=clear] > strong {color:var(--bl-paid-ink)}
#client-drawer .client-profile-finance-card[data-finance-state=due] > strong {color:var(--bl-due-ink)}
#client-drawer .client-profile-finance-card > span {color:var(--ws-ink)}
#client-drawer .client-drawer-abonement {background:var(--ws-raised);border-color:var(--ws-line);overflow:hidden}
#client-drawer .client-drawer-abonement-head {background:var(--bl-header);padding:14px 16px;margin:-16px -16px 14px;border-bottom:1px solid #44404c}
#client-drawer .client-drawer-abonement-head .package-name {color:#f4f3f5}
#client-drawer .client-profile-sessions progress::-webkit-progress-value {background:linear-gradient(90deg,#a32b40,#d34b67)}
#client-drawer .client-profile-sessions progress::-moz-progress-bar {background:linear-gradient(90deg,#a32b40,#d34b67)}
#client-drawer .client-profile-service {background:linear-gradient(115deg,#a32b4009,transparent 70%),var(--ws-raised);border-color:var(--ws-line)}
#client-drawer .loyalty-profile {background:var(--bl-loyalty-bg)}
#client-drawer .loyalty-profile-number {font:700 28px/1.4 var(--font-heading);color:var(--ws-ink)}
#client-drawer .loyalty-profile-number span {font:500 14px/1.5 var(--font);color:var(--ws-muted)}
#client-drawer .client-profile-history > summary {border-left:4px solid var(--bl-brand);padding-left:12px}
#client-drawer .client-visit-row:nth-child(even) {background:color-mix(in srgb,var(--ws-raised) 55%,transparent)}
#client-drawer .client-visit-row:last-child {border-bottom:0}
/* Native navigation and dialog focus stay synchronous. Only paint is animated. */
#main-content > .view:not(.hidden) {animation:bl-premium-page 240ms var(--motion-ease)}
@keyframes bl-premium-page {from{opacity:.65}to{opacity:1}}
@supports (transition-behavior:allow-discrete) {
  body > dialog {opacity:0;translate:0 8px;scale:.992;transition:opacity 200ms var(--motion-ease),translate 220ms var(--motion-ease),scale 220ms var(--motion-ease),display 220ms allow-discrete,overlay 220ms allow-discrete}
  body > dialog[open] {opacity:1;translate:0 0;scale:1}
  @starting-style {body > dialog[open] {opacity:0;translate:0 8px;scale:.992}}
}
/* Progressively enhanced native scroll effects. Content is always readable; no scroll interception. */
@supports (animation-timeline:view()) {
  #client-drawer .client-drawer-section,
  #main-content > .view:not(#view-calendar) :is(.report-section,.settings-section,.service-group) {
    animation:bl-premium-scroll linear both;animation-timeline:view(block);animation-range:entry 0% entry 20%;
  }
}
@keyframes bl-premium-scroll {from{opacity:.86;translate:0 7px}to{opacity:1;translate:0 0}}
:is(#main-content,body > dialog) button {
  transition:translate 130ms var(--motion-ease),scale 130ms var(--motion-ease),background-color 140ms,border-color 140ms,box-shadow 140ms,color 140ms;
}
@media(hover:hover) and (pointer:fine) {
  :is(#main-content,body > dialog) :is(button.primary,.client-profile-service):hover:not(:disabled) {translate:0 -1px}
}
:is(#main-content,body > dialog) button:active:not(:disabled) {scale:.98;translate:0 1px}
@media(max-width:760px) {
  #app #main-content > .view:not(#view-calendar) .page-heading {padding:18px 16px}
  #client-drawer .client-drawer-section h3 {gap:9px}
}
@media(prefers-reduced-motion:reduce) {
  #main-content > .view,body > dialog,#client-drawer .client-drawer-section,
  #main-content > .view :is(.report-section,.settings-section,.service-group),
  :is(#main-content,body > dialog) button {animation:none!important;transition:none!important;translate:none!important;scale:none!important}
}
@media print {
  body > dialog {translate:none!important;scale:none!important;opacity:1!important}
}