:root{
  --bg:#0D0D0D;
  --panel:#161616;
  --panel-2:#1c1c1c;
  --gold:#c0a46b;
  --text:#F5F5F5;
  --muted:#B8B8B8;
  --danger:#E74C3C;
  --success:#2ECC71;
  --warning:#F1C40F;
  --info:#3498DB;
  --border:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg);
  color:var(--text);
}
body.page-linkbio,
body.page-public-center,
body.page-auth{
  background:
    linear-gradient(rgba(13,13,13,.72), rgba(13,13,13,.82)),
    url("../img/pexels-james-collington-2147687246-30807432.jpg") center/cover fixed no-repeat;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.page-linkbio .topbar{display:none}
.page-linkbio .container{max-width:560px;min-height:100vh;display:flex;align-items:center;justify-content:center}
.page-public-center .topbar{display:none}
.page-public-center .container{max-width:1100px;min-height:100vh;display:flex;align-items:center;justify-content:center}
.page-public-center .container > *{width:100%}
.page-auth .topbar{display:none}
.page-auth .container{max-width:560px;min-height:100vh;display:flex;align-items:center;justify-content:center}
.page-auth .container > *{width:100%}
.flow-center{width:100%;max-width:860px;margin:0 auto}
.booking-step-card{
  position:relative;
  border-color:rgba(192,164,107,.16);
  background:
    radial-gradient(1200px 220px at 0% 0%, rgba(192,164,107,.09), transparent 45%),
    linear-gradient(180deg, rgba(28,28,28,.98), rgba(20,20,20,.98));
  box-shadow:
    0 18px 50px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.03);
}
.booking-step-card-first{overflow:hidden}
.booking-step-card-first::before,
.booking-step-card-first::after{
  content:"";
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  filter:blur(10px);
}
.booking-step-card-first::before{
  top:-90px;
  left:-70px;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(192,164,107,.18) 0%, rgba(192,164,107,0) 72%);
}
.booking-step-card-first::after{
  right:-60px;
  bottom:-90px;
  width:240px;
  height:240px;
  background:radial-gradient(circle, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 68%);
}
.booking-step-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:4px;
}
.booking-step-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(192,164,107,.24);
  background:rgba(192,164,107,.08);
  color:var(--gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.booking-step-description{max-width:560px;line-height:1.6}
.page-client .topbar{display:none}
.page-client .sidebar-layout{height:100vh;min-height:100vh}
.page-admin .topbar{display:none}
.page-admin .sidebar-layout{height:100vh;min-height:100vh}
.btn-split{display:flex;gap:10px}
.btn-split > *{flex:1}
.auth-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-items:stretch;
}
.auth-actions > *{width:100%}
.auth-actions-single{grid-template-columns:minmax(0,1fr)}
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(13,13,13,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px}
.brand-badge{width:10px;height:10px;border-radius:999px;background:var(--gold)}
.brand svg{color:var(--gold)}
.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.menu-toggle{display:none}
.mobile-menu{display:none}
.mobile-menu .btn{width:100%;justify-content:flex-start}
.mobile-menu form{width:100%}
.mobile-menu .btn{border-radius:12px}
.btn-link.active{color:var(--text);background:rgba(192,164,107,.10);border-color:rgba(192,164,107,.14)}
@media (min-width: 901px){
  .menu-toggle{display:none !important}
  .mobile-menu{display:none !important}
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 12px;border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{border-color:rgba(192,164,107,.28)}
.btn:active{transform:translateY(1px)}
.btn-primary{border-color:rgba(192,164,107,.5);background:linear-gradient(180deg, rgba(192,164,107,.22), rgba(22,22,22,1))}
.btn-danger{border-color:rgba(231,76,60,.5);background:rgba(231,76,60,.12)}
.btn-link{background:transparent;border-color:transparent;color:var(--gold)}
.btn-link:hover{background:rgba(192,164,107,.08);border-color:rgba(192,164,107,.14)}
.btn .icon{width:16px;height:16px;flex:0 0 auto}
.icon{width:16px;height:16px;display:inline-block}
.icon-stroke{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gold{color:var(--gold)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}
.card-title{font-weight:650;margin:0 0 10px;position:relative;padding-bottom:8px}
.card-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:64px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(192,164,107,.95), rgba(192,164,107,.12));
}
.muted{color:var(--muted)}
.input, select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
  outline:none;
}
.input:focus, select:focus{border-color:rgba(192,164,107,.45);box-shadow:0 0 0 2px rgba(192,164,107,.10)}
label{display:block;margin:0 0 6px;color:var(--muted);font-size:13px}
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.col-12{grid-column:span 12}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
.table{width:100%;border-collapse:collapse;table-layout:fixed}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.table-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.table-actions form{margin:0}
.table-actions .btn{min-width:40px;justify-content:center;padding-left:10px;padding-right:10px}
.pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px}
.pill-success{border-color:rgba(46,204,113,.35);background:rgba(46,204,113,.12)}
.pill-info{border-color:rgba(52,152,219,.35);background:rgba(52,152,219,.12)}
.pill-danger{border-color:rgba(231,76,60,.35);background:rgba(231,76,60,.12)}
.pill-inactive{border-color:rgba(231,76,60,.22);background:rgba(255,255,255,.04);color:#f0b4ad}
.pill-warning{border-color:rgba(241,196,15,.35);background:rgba(241,196,15,.12)}
.status-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.status-legend .pill{font-size:11px}
.client-appointments-card{
  border-color:rgba(192,164,107,.14);
  background:
    radial-gradient(1100px 220px at 0% 0%, rgba(192,164,107,.08), transparent 42%),
    linear-gradient(180deg, rgba(28,28,28,.98), rgba(20,20,20,.98));
}
.client-appointments-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.client-appointments-subtitle{
  max-width:720px;
  line-height:1.6;
  margin-top:2px;
}
.client-appointments-toggle{
  display:inline-grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:14px;
  padding:6px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  background:rgba(255,255,255,.03);
}
.client-appointments-toggle-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 16px;
  border-radius:14px;
  color:var(--muted);
  font-weight:700;
  text-align:center;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.client-appointments-toggle-item.is-active{
  background:linear-gradient(180deg, rgba(192,164,107,.22), rgba(192,164,107,.08));
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(192,164,107,.22);
}
.client-appointments-legend{margin-top:14px}
.client-appointments-empty{
  margin-top:16px;
  padding:18px;
  border:1px dashed rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}
.client-appointments-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}
.client-appointment-item{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:100%;
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:
    radial-gradient(180px 140px at 100% 0%, rgba(192,164,107,.14), transparent 62%),
    linear-gradient(180deg, rgba(30,30,30,.98), rgba(22,22,22,.98));
  box-shadow:
    0 16px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.03);
}
.client-appointment-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.client-appointment-date-block{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.client-appointment-date{
  font-size:19px;
  font-weight:800;
  line-height:1.1;
}
.client-appointment-time{
  color:var(--gold);
  font-size:14px;
  font-weight:700;
}
.client-appointment-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.client-appointment-professional{
  font-size:18px;
  font-weight:800;
  line-height:1.2;
}
.client-appointment-meta-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:auto;
}
.client-appointment-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  font-size:14px;
}
.client-appointment-meta-label{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.client-appointment-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.client-appointment-actions-single{grid-template-columns:minmax(0,1fr)}
.client-appointment-actions .btn,
.client-appointment-actions form,
.client-appointment-actions form .btn{width:100%}
.client-appointment-actions form{margin:0}
.client-plans-card,
.client-notifications-card{
  border-color:rgba(192,164,107,.14);
  background:
    radial-gradient(1100px 220px at 0% 0%, rgba(192,164,107,.08), transparent 42%),
    linear-gradient(180deg, rgba(28,28,28,.98), rgba(20,20,20,.98));
}
.client-plans-header,
.client-notifications-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.client-plans-subtitle,
.client-notifications-subtitle{
  max-width:720px;
  line-height:1.6;
  margin-top:8px;
}
.client-plans-grid,
.client-notifications-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}
.client-plan-item,
.client-notification-item{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:100%;
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:
    radial-gradient(180px 140px at 100% 0%, rgba(192,164,107,.14), transparent 62%),
    linear-gradient(180deg, rgba(30,30,30,.98), rgba(22,22,22,.98));
  box-shadow:
    0 16px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.03);
}
.client-plan-item-active{
  background:
    radial-gradient(220px 160px at 100% 0%, rgba(192,164,107,.18), transparent 62%),
    linear-gradient(180deg, rgba(31,31,31,.98), rgba(20,20,20,.98));
}
.client-plan-empty{
  justify-content:center;
}
.client-plan-item-top,
.client-notification-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.client-plan-label{
  color:var(--gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.client-plan-title,
.client-notification-title{
  font-size:18px;
  font-weight:800;
  line-height:1.2;
  margin-top:4px;
}
.client-plan-message,
.client-notification-text{
  line-height:1.6;
}
.client-plan-meta-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.client-plan-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  font-size:14px;
}
.client-plan-meta-label{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.client-plan-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.client-plan-actions .btn,
.client-plan-actions form,
.client-plan-actions form .btn{width:100%}
.client-plan-actions form{margin:0}
.client-plans-usage-wrap{
  margin-top:18px;
}
.client-plan-usage-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.client-plan-usage-subtitle{
  margin:6px 0 0;
  line-height:1.6;
}
.client-plan-usage-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.client-plan-usage-item{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  background:rgba(255,255,255,.03);
}
.client-notification-item.is-unread{
  border-color:rgba(192,164,107,.22);
  box-shadow:
    0 18px 36px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(192,164,107,.08);
}
.client-notification-date{
  color:var(--gold);
  font-size:13px;
  font-weight:700;
}
.client-notification-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.client-notification-actions{
  display:flex;
}
.client-notification-actions form,
.client-notification-actions .btn{width:100%}
.client-notification-actions form{margin:0}
.client-notifications-empty{
  margin-top:16px;
  padding:18px;
  border:1px dashed rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}
.steps{display:flex;gap:10px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);font-size:13px}
.step-active{border-color:rgba(192,164,107,.5);color:var(--gold)}
.alert{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--panel-2)}
.alert-danger{border-color:rgba(231,76,60,.5);background:rgba(231,76,60,.12)}
.alert-success{border-color:rgba(46,204,113,.5);background:rgba(46,204,113,.12)}
.booking-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(13,13,13,.74);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.booking-confirm-overlay[hidden]{display:none}
.booking-confirm-overlay-card{
  width:min(100%, 360px);
  border:1px solid rgba(192,164,107,.18);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(28,28,28,.98), rgba(22,22,22,.98));
  padding:22px 18px;
  text-align:center;
}
.booking-confirm-title{
  font-size:18px;
  font-weight:800;
  margin:0 0 8px;
}
.booking-confirm-spinner{
  width:44px;
  height:44px;
  margin:0 auto 14px;
  border-radius:999px;
  border:3px solid rgba(192,164,107,.18);
  border-top-color:var(--gold);
  animation:booking-confirm-spin .85s linear infinite;
}
@keyframes booking-confirm-spin{
  to{transform:rotate(360deg)}
}
.select-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.select-card{
  grid-column:span 6;
  text-align:left;
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:linear-gradient(180deg, rgba(28,28,28,1), rgba(22,22,22,1));
  cursor:pointer;
}
.select-card:hover{border-color:rgba(192,164,107,.35)}
.select-card:active{transform:translateY(1px)}
.select-card-row{display:flex;gap:12px;align-items:center}
.avatar{width:52px;height:52px;border-radius:16px;object-fit:cover;border:1px solid var(--border);flex:0 0 auto}
.avatar-fallback{display:flex;align-items:center;justify-content:center;background:rgba(192,164,107,.12);border-color:rgba(192,164,107,.25);color:var(--gold);font-weight:750}
.select-card-title{font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.select-card-subtitle{color:var(--muted);font-size:13px;margin-top:2px}
.select-card-cta{color:var(--gold);font-size:13px;border:1px solid rgba(192,164,107,.35);padding:6px 10px;border-radius:999px;background:rgba(192,164,107,.08);flex:0 0 auto}
.select-card-check{cursor:pointer;user-select:none}
.select-card-input{position:absolute;opacity:0;pointer-events:none}
.select-card.is-selected{border-color:rgba(46,204,113,.55);box-shadow:0 0 0 1px rgba(46,204,113,.15) inset}
.service-card-summary{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.service-card-summary .pill{font-size:13px;padding:6px 12px}
.service-card-summary-list{margin-top:8px;color:var(--muted);font-size:13px}
.admin-form-stack{display:flex;flex-direction:column;gap:18px}
.admin-form-stack--spacious{gap:22px}
.admin-form-section{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel-2);
  padding:16px;
}
.admin-form-section--highlight{
  background:linear-gradient(180deg, rgba(28,28,28,1), rgba(22,22,22,1));
  border-color:rgba(192,164,107,.18);
}
.admin-form-section-head{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.admin-form-section-title{font-size:15px;font-weight:750;color:var(--text)}
.admin-form-inline-note{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  border:1px dashed rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-size:13px;
}
.admin-form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}
.admin-form-actions--separated{
  padding-top:4px;
  border-top:1px solid rgba(255,255,255,.06);
}
.admin-booking-calendar-layout{
  display:grid;
  grid-template-columns:minmax(320px, 1.1fr) minmax(280px, .9fr);
  gap:16px;
  align-items:start;
}
.admin-booking-time-panel{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.02);
}
.admin-booking-picked{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.admin-booking-picked-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:12px;
  background:var(--panel);
}
.admin-booking-picked-item strong{
  font-size:15px;
  color:var(--text);
}
.admin-calendar-pending{
  background:rgba(255,255,255,.02);
  color:var(--muted);
}
.calendar{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:var(--panel);
  width:100%;
  max-width:100%;
}
.calendar-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid var(--border)}
.calendar-title{
  font-weight:750;
  min-width:0;
  flex:1;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;width:100%}
.calendar-weekday{padding:10px 8px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--border);text-align:center}
.calendar-day{
  padding:8px 6px;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  min-height:44px;
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  min-width:0;
  font-size:13px;
}
.calendar-day:nth-child(7n){border-right:none}
.calendar-day.is-out{opacity:.35;cursor:default}
.calendar-day.is-unavailable{background:rgba(231,76,60,.10)}
.calendar-day.is-available{background:rgba(46,204,113,.10)}
.calendar-day.is-selected{outline:2px solid rgba(192,164,107,.65);outline-offset:-2px}
.calendar-badge{display:none}
.agenda-admin-layout{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:16px;align-items:start}
.agenda-admin-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.agenda-admin-title-wrap{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}
.agenda-admin-calendar .calendar-day{min-height:82px}
.admin-calendar-day{
  align-items:flex-start;
  justify-content:space-between;
  flex-direction:column;
  gap:8px;
  text-align:left;
}
.admin-calendar-day-number{font-size:16px;font-weight:800}
.admin-calendar-day-meta{font-size:12px;color:var(--muted)}
.admin-calendar-day.has-blocked{box-shadow:inset 0 0 0 1px rgba(241,196,15,.45)}
.agenda-admin-day-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.agenda-admin-table-wrap{overflow:auto}
.availability-picker-day{background:var(--panel-2)}
.availability-picker-day.is-selected{background:rgba(46,204,113,.12)}
.availability-selected{display:flex;gap:8px;flex-wrap:wrap}
.availability-summary-card{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.availability-ranges{display:flex;flex-direction:column;gap:10px}
.availability-range-row{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--panel-2)}
.time-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.time-slot{
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
  cursor:pointer;
  text-align:center;
}
.time-slot:hover{border-color:rgba(192,164,107,.35)}
.time-slot.is-unavailable{opacity:.4;cursor:not-allowed}
.time-slot.is-selected{border-color:rgba(192,164,107,.65);box-shadow:0 0 0 1px rgba(192,164,107,.2) inset;color:var(--gold)}
.client-mobile-back{display:none}
.booking-professional-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.booking-professional-card{
  grid-column:auto;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
  height:100%;
  min-height:100%;
  padding:18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  background:
    radial-gradient(180px 120px at 100% 0%, rgba(192,164,107,.18), transparent 60%),
    radial-gradient(180px 160px at 0% 0%, rgba(255,255,255,.06), transparent 58%),
    linear-gradient(180deg, rgba(31,31,31,.98), rgba(20,20,20,.98));
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  box-shadow:
    0 18px 34px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.03);
}
.booking-professional-grid-single{
  grid-template-columns:minmax(0,1fr);
}
.booking-professional-grid-single .booking-professional-card{
  min-height:0;
}
.booking-professional-card:hover{
  transform:translateY(-2px);
  border-color:rgba(192,164,107,.38);
  box-shadow:
    0 28px 46px rgba(0,0,0,.28),
    0 0 0 1px rgba(192,164,107,.08) inset;
}
.booking-professional-card:active{transform:translateY(0)}
.booking-professional-card::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:23px;
  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,0) 34%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.booking-professional-card::after{
  content:"";
  position:absolute;
  top:-35%;
  right:-18%;
  width:160px;
  height:220px;
  transform:rotate(18deg);
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0));
  opacity:.45;
  pointer-events:none;
}
.booking-professional-card-glow{
  position:absolute;
  inset:auto -34px -34px auto;
  width:140px;
  height:140px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(192,164,107,.22) 0%, rgba(192,164,107,0) 70%);
  pointer-events:none;
}
.booking-professional-avatar-wrap{display:flex;align-items:center;justify-content:flex-start}
.booking-professional-avatar{
  width:110px;
  height:110px;
  border-radius:30px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 16px 30px rgba(0,0,0,.24),
    0 0 0 8px rgba(192,164,107,.06),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.booking-professional-avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg, rgba(192,164,107,.34), rgba(192,164,107,.12));
  color:var(--gold);
  font-weight:800;
  font-size:34px;
}
.booking-professional-body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.booking-professional-head{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:12px;
}
.booking-professional-name{
  font-size:22px;
  font-weight:800;
  line-height:1.15;
  text-shadow:0 1px 0 rgba(255,255,255,.04);
}
.booking-professional-meta{
  color:var(--muted);
  font-size:13px;
}
.booking-professional-services{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:4px;
  margin-top:auto;
}
.booking-professional-service{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(245,245,245,.9);
  font-size:14px;
}
.booking-professional-service-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--gold);
  box-shadow:0 0 0 5px rgba(192,164,107,.10);
  flex:0 0 auto;
}
.sidebar-layout{display:grid;grid-template-columns:260px 1fr;height:calc(100vh - 58px);min-height:calc(100vh - 58px);overflow:hidden}
.sidebar{border-right:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column}
.sidebar{overflow:auto;min-height:0}
.sidebar-user{padding:18px 14px;border-bottom:1px solid var(--border);background:radial-gradient(900px 120px at 0% 0%, rgba(192,164,107,.10), transparent 55%)}
.sidebar-user-name{font-weight:850;letter-spacing:.2px}
.page-client .sidebar > a{
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  position:relative;
}
.page-client .sidebar > a .icon{opacity:.9}
.page-client .sidebar > a:hover{background:rgba(255,255,255,.03)}
.page-client .sidebar > a.active{
  color:var(--gold);
  background:rgba(192,164,107,.10);
}
.page-client .sidebar > a.active::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:3px;
  background:var(--gold);
}
.page-admin .sidebar-nav-groups,
.page-admin .mobile-menu-groups{display:flex;flex-direction:column}
.page-admin .sidebar-group{border-bottom:1px solid var(--border)}
.page-admin .sidebar-group-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  font:inherit;
  font-weight:700;
}
.page-admin .sidebar-group-toggle:hover{background:rgba(255,255,255,.03)}
.page-admin .sidebar-group-links{display:flex;flex-direction:column}
.page-admin .sidebar-group-links[hidden]{display:none}
.page-admin .sidebar-group-links a{
  display:flex;
  gap:10px;
  align-items:center;
  padding:11px 14px 11px 28px;
  border-top:1px solid rgba(255,255,255,.04);
  position:relative;
}
.page-admin .sidebar-group-chevron{
  transition:transform .18s ease;
  flex:0 0 auto;
}
.page-admin .sidebar-group.is-open .sidebar-group-chevron{transform:rotate(180deg)}
.sidebar-form{border-bottom:1px solid var(--border)}
.sidebar-form{margin-top:auto}
.sidebar-btn{
  width:100%;
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  text-align:left;
}
.sidebar-btn:hover{background:rgba(255,255,255,.03)}
.page-admin .sidebar a .icon,
.page-admin .mobile-menu a .icon{opacity:.9}
.page-admin .sidebar a:hover,
.page-admin .mobile-menu a:hover{background:rgba(255,255,255,.03)}
.page-admin .sidebar a.active,
.page-admin .mobile-menu a.active{color:var(--gold);background:rgba(192,164,107,.10)}
.page-admin .sidebar a.active::before,
.page-admin .mobile-menu a.active::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:3px;
  background:var(--gold);
}
.main{padding:16px;overflow:auto;min-height:0}
.dash-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px; margin-top:18px}
.dash-title{font-size:22px;font-weight:800;letter-spacing:.2px}
.kpi{
  grid-column:span 3;
  background:radial-gradient(1200px 200px at 0% 0%, rgba(192,164,107,.18), transparent 55%), linear-gradient(180deg, rgba(28,28,28,1), rgba(22,22,22,1));
}
.kpi-label-row{display:flex;align-items:center;gap:8px}
.kpi-label-row .icon{color:var(--gold);opacity:.95}
.kpi-label{color:var(--muted);font-size:12px}
.kpi-value{font-size:28px;font-weight:850;color:var(--text);margin-top:4px}
.kpi-foot{margin-top:8px;font-size:12px}
.chart{padding:0}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border-bottom:1px solid var(--border)}
.chart-title{font-weight:800}
.plan-alert-list{display:flex;flex-direction:column;gap:10px}
.plan-alert-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel-2);
}
.chart-body{padding:14px}
.chart canvas{width:100%;height:240px;display:block}
.chart-note{margin-top:10px;font-size:12px;line-height:1.35}
.chart-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.legend-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.legend-swatch{width:10px;height:10px;border-radius:999px;flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.legend-text{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.profile-card{
  grid-column:span 4;
  border:1px solid var(--border);
  border-radius:16px;
  background:radial-gradient(900px 160px at 50% 0%, rgba(192,164,107,.16), transparent 55%), linear-gradient(180deg, rgba(28,28,28,1), rgba(22,22,22,1));
  padding:14px;
}
.profile-card-select{
  appearance:none;
  width:100%;
  cursor:pointer;
  text-align:left;
  color:inherit;
}
.profile-card-select:hover{border-color:rgba(192,164,107,.35)}
.profile-card-select:active{transform:translateY(1px)}
.profile-avatar-wrap{display:flex;justify-content:center;margin-top:8px}
.profile-avatar{
  width:84px;height:84px;border-radius:999px;
  object-fit:cover;
  border:2px solid rgba(192,164,107,.45);
  box-shadow:0 0 0 6px rgba(192,164,107,.07);
}
.profile-avatar-fallback{
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
  background:rgba(192,164,107,.12);
  font-weight:850;
  font-size:28px;
}
.profile-body{text-align:center;margin-top:12px}
.profile-name{font-weight:850;font-size:16px}
.profile-meta{margin-top:6px}
.profile-services{margin-top:12px;display:flex;flex-direction:column;gap:8px;text-align:left}
.profile-service{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.profile-service-dot{width:8px;height:8px;border-radius:999px;background:rgba(192,164,107,.9);box-shadow:0 0 0 3px rgba(192,164,107,.12)}
.profile-public-card{
  max-width:980px;
  margin:0 auto;
}
.profile-public-card .card-title,
.profile-public-card > .muted{
  text-align:center;
}
.profile-public-actions{
  display:flex;
  justify-content:center;
}
.profile-grid-public{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.profile-grid-public .profile-card{
  flex:0 1 calc(33.333% - 14px);
  width:min(100%, 320px);
  max-width:320px;
}
.profile-grid-public.profile-grid-single .profile-card{
  flex:1 1 100%;
  width:100%;
  max-width:none;
}
.profile-empty{
  width:100%;
  text-align:center;
}
@media (max-width: 900px){
  .sidebar-layout{grid-template-columns:1fr}
  .menu-toggle{display:inline-flex}
  .chart{grid-column:span 12 !important}
  .page-client .topbar{display:block}
  .page-client .topbar-inner{padding:12px 14px}
  .page-client .sidebar-layout{height:calc(100vh - 58px);min-height:calc(100vh - 58px)}
  .page-client .sidebar{display:none}
  .page-client .mobile-menu{display:none;width:100%;padding:10px 16px 14px;border-top:1px solid var(--border);background:rgba(13,13,13,.92);backdrop-filter:blur(10px)}
  .page-client .mobile-menu.is-open{display:flex;flex-direction:column;gap:8px}
  .page-client .client-mobile-back{display:inline-flex;padding-left:0;padding-right:0}
  .page-client .brand-booking-mobile{display:none}
  .page-admin .topbar{display:block}
  .page-admin .sidebar-layout{height:calc(100vh - 58px);min-height:calc(100vh - 58px)}
  .page-admin .sidebar{display:none}
  .page-admin .mobile-menu{display:none;width:100%;padding:10px 16px 14px;border-top:1px solid var(--border);background:rgba(13,13,13,.92);backdrop-filter:blur(10px)}
  .page-admin .mobile-menu.is-open{display:flex;flex-direction:column;gap:8px}
  .page-admin .mobile-menu .sidebar-group{border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow:hidden}
  .page-admin .mobile-menu .sidebar-group-links a{padding-left:18px}
  .col-6,.col-4,.col-3{grid-column:span 12}
  .select-card{grid-column:span 12}
  .time-grid{grid-template-columns:repeat(3,1fr)}
  .kpi{grid-column:span 6}
  .chart canvas{height:210px}
  .profile-card{grid-column:span 6}
  .profile-grid-public .profile-card{
    flex:1 1 calc(50% - 14px);
    max-width:none;
  }
  .agenda-admin-layout{grid-template-columns:1fr}
  .admin-booking-calendar-layout{grid-template-columns:1fr}
  .client-appointments-grid{grid-template-columns:1fr}
  .client-plans-grid,
  .client-notifications-grid,
  .client-plan-usage-grid{grid-template-columns:1fr}
}
@media (max-width: 650px){
  .kpi{grid-column:span 12}
  .time-grid{grid-template-columns:repeat(2,1fr)}
  .calendar-header{padding:10px}
  .calendar-header .btn{padding:8px 10px}
  .calendar-weekday{display:none}
  .calendar-day{padding:6px 4px;min-height:40px;font-size:12px}
  .agenda-admin-calendar .calendar-day{min-height:72px}
  .admin-booking-picked{grid-template-columns:1fr}
  .chart-legend{grid-template-columns:1fr}
  .booking-professional-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  .booking-professional-grid.booking-professional-grid-single{
    grid-template-columns:minmax(0,1fr);
  }
  .booking-professional-card{
    grid-column:auto;
    padding:16px;
    border-radius:20px;
    gap:14px;
  }
  .booking-professional-card::before{border-radius:19px}
  .booking-professional-avatar{width:94px;height:94px;border-radius:24px}
  .booking-professional-name{font-size:18px}
  .booking-professional-head{align-items:center}
  .booking-step-card{padding:16px}
  .booking-step-description{font-size:14px}
  .client-appointments-card{padding:16px}
  .client-appointments-header{display:block}
  .client-appointments-subtitle{font-size:14px}
  .client-appointments-toggle{
    display:grid;
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .client-appointments-toggle-item{
    min-height:46px;
    padding:10px 12px;
    font-size:13px;
  }
  .client-appointments-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .client-appointment-item{
    padding:14px;
    border-radius:18px;
  }
  .client-appointment-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .client-appointment-date{font-size:18px}
  .client-appointment-professional{font-size:17px}
  .client-appointment-meta-row{padding:10px}
  .client-appointment-actions{grid-template-columns:1fr}
  .client-plans-card,
  .client-notifications-card{padding:16px}
  .client-plans-subtitle,
  .client-notifications-subtitle{font-size:14px}
  .client-plan-item,
  .client-notification-item{padding:14px;border-radius:18px}
  .client-plan-item-top,
  .client-notification-top{flex-direction:column;align-items:flex-start}
  .client-plan-title,
  .client-notification-title{font-size:17px}
  .client-plan-actions{grid-template-columns:1fr}
  .client-plan-meta-row{padding:10px}
  .page-client-booking .main{
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:20px;
    padding-bottom:20px;
  }
  .page-client-booking .flow-center{
    display:flex;
    align-items:center;
    min-height:100%;
  }
  .page-client-booking .flow-center > *{
    width:100%;
  }
  .profile-grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding-bottom:6px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .profile-card{
    grid-column:auto;
    min-width:82%;
    scroll-snap-align:center;
  }
  .profile-grid-public{
    display:flex;
    overflow:visible;
    padding-bottom:0;
    scroll-snap-type:none;
  }
  .profile-grid-public .profile-card{
    min-width:100%;
    width:100%;
    max-width:none;
    scroll-snap-align:none;
  }
}
.linkbio{width:100%}
.linkbio-card{
  width:100%;
  border:1px solid var(--border);
  border-radius:18px;
  background:radial-gradient(900px 180px at 50% 0%, rgba(192,164,107,.16), transparent 55%), linear-gradient(180deg, rgba(28,28,28,1), rgba(22,22,22,1));
  padding:18px;
  text-align:center;
}
.linkbio-logo{display:flex;justify-content:center;margin-bottom:12px}
.linkbio-logo img{max-width:220px}
.linkbio-title{font-weight:900;font-size:18px;margin-top:2px}
.linkbio-subtitle{margin-top:6px}
.linkbio-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.btn-block{width:100%;justify-content:center}