:root {
  --sidebar-width: 288px;
  --green: #2f775a;
  --red: #b84b46;
  --blue: #436580;
}

body {
  background: var(--canvas);
  color: var(--ink);
}

.sidebar {
  background:
    radial-gradient(circle at 15% 5%, rgb(216 168 135 / 9%), transparent 28%),
    linear-gradient(175deg, var(--brand-sidebar-alt), var(--brand-sidebar) 58%);
  border-right: 1px solid rgb(216 168 135 / 16%);
  padding: 22px 17px 18px;
  overflow-y: auto;
}

.brand {
  position: relative;
  display: block;
  flex: 0 0 105px;
  height: 105px;
  margin: 0 4px 18px;
  padding: 0 2px 18px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background-image: var(--brand-logo-horizontal);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.brand .brand-mark,
.brand .brand-copy,
.auth-brand-copy {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.nav-heading { color: #8e8c99; font-weight: 700; letter-spacing: .14em; }
.nav-item { color: #c9c7cf; border-radius: 8px; }
.nav-item:hover { color: #fff; background: rgb(255 255 255 / 6%); }
.nav-item.active { color: #f1d2bd; background: linear-gradient(90deg, rgb(216 168 135 / 18%), rgb(216 168 135 / 7%)); box-shadow: inset 3px 0 var(--gold); }
.nav-badge { color: #f1d2bd; background: rgb(216 168 135 / 14%); }
.sidebar-bottom { border-top-color: rgb(255 255 255 / 9%); }
.avatar { color: #f1d2bd; background: rgb(216 168 135 / 13%); border: 1px solid rgb(216 168 135 / 50%); }
.profile-role { color: #97959f; }
.account-actions a:hover, .account-actions button:hover { color: #f1d2bd; }
.topbar { height: 72px; border-bottom-color: var(--line); background: rgb(255 255 255 / 90%); }
.metric-card, .card { min-width: 0; border-color: var(--line); border-radius: 12px; box-shadow: 0 6px 20px rgb(29 24 20 / 3.5%); }
.button.primary { color: #17110d; border-color: var(--gold); background: linear-gradient(135deg, #e6bea3, var(--gold)); box-shadow: 0 8px 20px rgb(157 104 72 / 18%); font-weight: 700; }
.button.primary:hover { color: #fff; border-color: var(--gold-dark); background: var(--gold-dark); }
.button:focus-visible, .nav-item:focus-visible, .icon-button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgb(216 168 135 / 45%); outline-offset: 2px; }
.bar { background: linear-gradient(180deg, #e6bea3, var(--gold)); }
.activity-icon, .appointment-date, .customer-avatar { color: var(--gold-dark); background: var(--gold-light); }
.tag.gold { color: var(--gold-dark); }
.portal-header { background: linear-gradient(135deg, var(--gold-light), #fff 75%); border-color: rgb(216 168 135 / 38%); }
.modal-overlay { background: rgb(0 0 0 / 58%); }
.auth-body { background: radial-gradient(circle at 8% 12%, rgb(216 168 135 / 15%), transparent 31%), radial-gradient(circle at 90% 90%, rgb(216 168 135 / 12%), transparent 28%), var(--canvas); }
.auth-card { border-color: var(--line); box-shadow: 0 18px 62px rgb(0 0 0 / 8%); }
.auth-brand { position: relative; display: block; width: 100%; margin-bottom: 34px; }
.auth-brand-logo { display: block; width: min(360px, 100%); height: auto; max-height: 120px; object-fit: contain; object-position: left center; }
.auth-field input:focus, .auth-field select:focus, .auth-field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(216 168 135 / 14%); }
.auth-helper, .auth-check a, .privacy-copy a { color: var(--gold-dark); }
.privacy-review { background: #fbf5f1; border-left-color: var(--gold); }

@media (width <= 720px) {
  :root { --sidebar-width: 66px; }
  .sidebar { padding: 16px 8px; }
  .brand { flex-basis: 66px; height: 66px; margin: 0 0 15px; padding: 0 0 13px; background-image: var(--brand-logo-mark); background-position: center top; background-size: 53px auto; }
  .topbar { height: 62px; }
  .workspace, .content, .dashboard-grid, .lower-grid, .section-grid, .mail-layout { min-width: 0; }
  .page-heading { flex-direction: column; gap: 16px; }
  .page-heading .button { align-self: flex-start; }
  .card { overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
  .card-head { flex-wrap: wrap; }
  .card > .data-table { display: block; max-width: 100%; overflow-x: auto; }
}

@media (width <= 560px) {
  .auth-brand-logo { width: min(310px, 100%); max-height: 105px; }
}