/*
 * EZBookPlus product design system
 *
 * This file is intentionally loaded last on every page. It gives public pages,
 * authenticated workspaces, and interactive demos one visual language without
 * changing their business logic or data flows.
 */

:root {
  --ez-ink-950: #0a1022;
  --ez-ink-900: #111a33;
  --ez-ink-800: #1e293b;
  --ez-ink-700: #334155;
  --ez-ink-600: #475569;
  --ez-ink-500: #64748b;
  --ez-ink-400: #94a3b8;
  --ez-line: #dbe3ef;
  --ez-line-strong: #cbd5e1;
  --ez-canvas: #f4f7fb;
  --ez-surface: #ffffff;
  --ez-surface-soft: #f8fafc;
  --ez-primary: #4f46e5;
  --ez-primary-dark: #3730a3;
  --ez-primary-soft: #eef2ff;
  --ez-violet: #7c3aed;
  --ez-blue: #2563eb;
  --ez-teal: #0f766e;
  --ez-success: #047857;
  --ez-success-soft: #ecfdf5;
  --ez-warning: #b45309;
  --ez-warning-soft: #fffbeb;
  --ez-danger: #b91c1c;
  --ez-danger-soft: #fef2f2;
  --ez-radius-sm: 9px;
  --ez-radius-md: 13px;
  --ez-radius-lg: 18px;
  --ez-radius-xl: 24px;
  --ez-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .045);
  --ez-shadow-md: 0 14px 34px -24px rgba(15, 23, 42, .38);
  --ez-shadow-lg: 0 24px 64px -36px rgba(15, 23, 42, .48);
  --ez-focus: 0 0 0 4px rgba(79, 70, 229, .14);
  --primary: var(--ez-primary);
  --primary-hover: var(--ez-primary-dark);
  --bg: var(--ez-canvas);
  --card-bg: var(--ez-surface);
  --text: var(--ez-ink-900);
  --text-muted: var(--ez-ink-500);
  --border: var(--ez-line);
  --navy: var(--ez-ink-900);
  --violet: var(--ez-violet);
}

* {
  scrollbar-color: #bcc8dc transparent;
  scrollbar-width: thin;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  background: var(--ez-canvas);
}

body.ez-app {
  color: var(--ez-ink-900);
  background:
    radial-gradient(circle at 7% -8%, rgba(79, 70, 229, .105), transparent 31rem),
    radial-gradient(circle at 96% 1%, rgba(37, 99, 235, .075), transparent 27rem),
    var(--ez-canvas);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  line-height: 1.5;
}

::selection {
  background: rgba(79, 70, 229, .2);
  color: var(--ez-ink-950);
}

[hidden] {
  display: none !important;
}

.ez-skip-link {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 100000;
  padding: 10px 15px;
  border-radius: var(--ez-radius-sm);
  background: var(--ez-ink-950);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  transform: translate(-50%, -160%);
  transition: transform .18s ease;
}

.ez-skip-link:focus {
  color: #fff;
  transform: translate(-50%, 0);
}

body.ez-app h1,
body.ez-app h2,
body.ez-app h3,
body.ez-app h4 {
  color: var(--ez-ink-900);
  font-weight: 800;
  letter-spacing: -.025em;
  text-wrap: balance;
}

body.ez-app h1 {
  letter-spacing: -.04em;
}

body.ez-app p,
body.ez-app li,
body.ez-app td,
body.ez-app th {
  text-wrap: pretty;
}

body.ez-app a {
  text-underline-offset: 3px;
}

body.ez-app :where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid transparent !important;
  box-shadow: var(--ez-focus) !important;
}

body.ez-app:not(.ez-surface-social) :where(input, select, textarea) {
  min-height: 44px;
  border: 1px solid var(--ez-line-strong) !important;
  border-radius: var(--ez-radius-sm) !important;
  background: #fff !important;
  color: var(--ez-ink-900) !important;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, .025);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

body.ez-app:not(.ez-surface-social) :where(input, select, textarea):hover:not(:disabled) {
  border-color: #a9b7ca !important;
}

body.ez-app:not(.ez-surface-social) :where(input, select, textarea):focus {
  border-color: var(--ez-primary) !important;
  box-shadow: var(--ez-focus) !important;
}

body.ez-app:not(.ez-surface-social) :where(input, select, textarea):disabled {
  background: #f1f5f9 !important;
  color: var(--ez-ink-500) !important;
  cursor: not-allowed;
}

body.ez-app label {
  color: var(--ez-ink-700);
  font-weight: 720;
}

body.ez-app:not(.ez-surface-social) :where(button, .button, .btn-primary, .btn-secondary, .btn-submit, .team-button, .dashboard-social-link, .try-demo, .comparison-actions a, .profile-actions a),
body.ez-surface-social :where(.button, .btn-primary, .btn-secondary) {
  border-radius: var(--ez-radius-sm) !important;
  font-weight: 780 !important;
  letter-spacing: -.01em;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

body.ez-app:not(.ez-surface-social) :where(button, .button, .btn-primary, .btn-submit, .team-button, .dashboard-social-link, .try-demo),
body.ez-surface-social :where(.button, .btn-primary) {
  border: 1px solid transparent !important;
  background: linear-gradient(135deg, var(--ez-primary), var(--ez-violet)) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -14px rgba(79, 70, 229, .9) !important;
}

body.ez-app:not(.ez-surface-social) :where(button, .button, .btn-primary, .btn-submit, .team-button, .dashboard-social-link, .try-demo):hover:not(:disabled),
body.ez-surface-social :where(.button, .btn-primary):hover:not(:disabled) {
  background: linear-gradient(135deg, #4338ca, #6d28d9) !important;
  box-shadow: 0 14px 28px -16px rgba(79, 70, 229, .85) !important;
  transform: translateY(-1px);
}

body.ez-app :where(button.secondary, .button.secondary, .button-quiet, .btn-secondary, .team-button.secondary, .outline, button.outline, a.secondary) {
  border: 1px solid var(--ez-line-strong) !important;
  background: #fff !important;
  color: var(--ez-ink-700) !important;
  box-shadow: var(--ez-shadow-sm) !important;
}

body.ez-app :where(button.secondary, .button.secondary, .button-quiet, .btn-secondary, .team-button.secondary, .outline, button.outline, a.secondary):hover:not(:disabled) {
  border-color: #a5b4fc !important;
  background: var(--ez-primary-soft) !important;
  color: var(--ez-primary-dark) !important;
}

body.ez-app :where(button.danger, .button.danger, .team-button.danger, .btn-delete) {
  background: var(--ez-danger) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -16px rgba(185, 28, 28, .8) !important;
}

body.ez-app button:disabled,
body.ez-app .button[aria-disabled="true"] {
  opacity: .52;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

body.ez-app :where(.card, .section, .record, .appt, .stat, .tile, .team-product-card, .finance-card, .action-card, .plan-card, .comparison-card, .lookup-card, .plan-shell, .review-card, .import-card, .qr-card, .account-demo) {
  border: 1px solid var(--ez-line) !important;
  border-radius: var(--ez-radius-lg) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: var(--ez-shadow-md) !important;
}

body.ez-app :where(.card, .section, .record, .appt, .team-product-card, .finance-card, .action-card, .plan-card, .plan-shell, .review-card, .import-card, .account-demo) {
  overflow-wrap: anywhere;
}

body.ez-app :where(.muted, .team-muted, .subtitle, .hint, .item-meta, .metric-detail, .section-heading p, .section-head p) {
  color: var(--ez-ink-500) !important;
}

body.ez-app :where(.eyebrow, .tier-tag, .premium-tag, .header-badge, .assistant-preview-badge) {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: var(--ez-primary-soft);
  color: var(--ez-primary-dark);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
}

body.ez-app :where(.badge, .status, .team-badge, .transaction-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px !important;
  background: #e9eef6;
  color: var(--ez-ink-700);
  font-size: .7rem;
  font-weight: 820;
  line-height: 1;
  text-transform: capitalize;
}

body.ez-app :where(.badge.active, .status.active, .approved, .paid, .success, .team-badge.green) {
  background: var(--ez-success-soft) !important;
  color: var(--ez-success) !important;
}

body.ez-app :where(.pending, .warning, .team-badge.gold) {
  background: var(--ez-warning-soft) !important;
  color: var(--ez-warning) !important;
}

body.ez-app :where(.declined, .cancelled, .canceled, .danger, .error, .past_due) {
  background-color: var(--ez-danger-soft);
  color: var(--ez-danger);
}

body.ez-app :where(.notice, [role="status"]:not(:empty)) {
  border-radius: var(--ez-radius-md) !important;
  line-height: 1.5;
}

body.ez-app :where(.empty, .team-empty) {
  border: 1px dashed #b8c4d6 !important;
  border-radius: var(--ez-radius-md) !important;
  background: var(--ez-surface-soft) !important;
  color: var(--ez-ink-500) !important;
}

body.ez-app :where(table) {
  border-collapse: separate;
  border-spacing: 0;
}

body.ez-app :where(th) {
  background: #f1f5f9;
  color: var(--ez-ink-600);
  font-size: .72rem;
  font-weight: 820;
  letter-spacing: .045em;
  text-transform: uppercase;
}

body.ez-app :where(th, td) {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ez-line);
  text-align: left;
}

body.ez-app :where(tbody tr) {
  transition: background .14s ease;
}

body.ez-app :where(tbody tr):hover {
  background: #f8faff;
}

body.ez-app :where(dialog, .modal-content, .founder-modal) {
  border: 1px solid rgba(203, 213, 225, .9) !important;
  border-radius: var(--ez-radius-xl) !important;
  background: #fff !important;
  box-shadow: var(--ez-shadow-lg) !important;
}

body.ez-app :where(.site-home-link) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--ez-ink-700);
  box-shadow: var(--ez-shadow-sm);
  backdrop-filter: blur(14px);
}

body.ez-app :where(.site-home-link):hover {
  border-color: #a5b4fc;
  background: #fff;
  color: var(--ez-primary-dark);
}

/* Public home and plan pages */
body.ez-surface-home {
  display: block !important;
  padding: 0 !important;
}

.ez-surface-home .navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 72px;
  padding: 12px max(22px, calc((100vw - 1180px) / 2)) !important;
  border-bottom: 1px solid rgba(219, 227, 239, .9);
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 10px 34px rgba(15, 23, 42, .055);
  backdrop-filter: blur(18px);
}

.ez-surface-home .brand {
  color: var(--ez-ink-900) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em;
}

.ez-surface-home .hero {
  width: min(1180px, calc(100% - 36px));
  margin: 36px auto 26px !important;
  padding: clamp(36px, 7vw, 78px) clamp(22px, 5vw, 64px) !important;
  overflow: hidden;
  border: 1px solid rgba(199, 210, 254, .72) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(129, 140, 248, .28), transparent 25rem),
    linear-gradient(145deg, #0b1228, #172554 58%, #312e81) !important;
  color: #fff;
  box-shadow: 0 32px 80px -42px rgba(30, 41, 89, .85) !important;
}

.ez-surface-home .hero h1 {
  color: #fff !important;
  font-size: clamp(2.3rem, 6vw, 4.4rem) !important;
  line-height: 1.02;
}

.ez-surface-home .hero p {
  max-width: 740px;
  margin-inline: auto;
  color: #dbeafe !important;
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.ez-surface-home :where(.action-grid, .comparison-shell, .plans-section, .feature-detail) {
  width: min(1180px, calc(100% - 36px)) !important;
  margin-inline: auto !important;
}

.ez-surface-home :where(.action-card, .comparison-card, .plan-card) {
  position: relative;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ez-surface-home :where(.action-card, .comparison-card, .plan-card):hover {
  border-color: #c7d2fe !important;
  box-shadow: var(--ez-shadow-lg) !important;
  transform: translateY(-3px);
}

.ez-surface-home .plan-card.premium {
  border: 2px solid #8b5cf6 !important;
  box-shadow: 0 22px 56px -34px rgba(124, 58, 237, .72) !important;
}

.ez-surface-home :where(.comparison-section, .plans-section, .feature-detail) {
  padding-block: clamp(42px, 7vw, 76px) !important;
}

/* Authentication and focused forms */
body.ez-surface-auth {
  justify-content: center;
  padding: 72px 20px 36px !important;
}

.ez-surface-auth .container {
  width: min(100%, 540px) !important;
  margin: 0 auto !important;
}

.ez-surface-auth :where(.auth-card, .container > .card) {
  padding: clamp(24px, 5vw, 38px) !important;
  border-radius: var(--ez-radius-xl) !important;
  box-shadow: var(--ez-shadow-lg) !important;
}

.ez-surface-auth :where(.auth-card, .container > .card)::before {
  content: "EZBookPlus";
  display: block;
  width: fit-content;
  margin: 0 auto 22px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ez-primary), var(--ez-violet));
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .035em;
  box-shadow: 0 10px 22px -13px rgba(79, 70, 229, .9);
}

/* Real account and demo command centers */
body.ez-surface-dashboard,
body.ez-dashboard-page,
body.ez-finance-page {
  display: block !important;
  width: 100%;
  min-height: 100vh;
  padding: 20px !important;
}

body.ez-surface-dashboard > :where(.wrap, .shell, .team-page, .dashboard-container),
body.ez-finance-page > .wrap {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
}

body.ez-app :where(.ez-dashboard-header, .team-header, .topbar, .finance-header, .masthead) {
  position: relative;
  overflow: hidden;
  padding: 23px 24px !important;
  border: 1px solid rgba(129, 140, 248, .28) !important;
  border-radius: var(--ez-radius-xl) !important;
  background:
    radial-gradient(circle at 88% 5%, rgba(139, 92, 246, .31), transparent 18rem),
    linear-gradient(140deg, #0b1228, #172554 62%, #312e81) !important;
  color: #fff !important;
  box-shadow: 0 24px 58px -34px rgba(30, 41, 89, .86) !important;
}

body.ez-app :where(.ez-dashboard-header, .team-header, .topbar, .finance-header, .masthead) h1,
body.ez-app :where(.ez-dashboard-header, .team-header, .topbar, .finance-header, .masthead) h2 {
  color: #fff !important;
}

body.ez-app :where(.ez-dashboard-header, .team-header, .topbar, .finance-header, .masthead) p,
body.ez-app :where(.ez-dashboard-header, .team-header, .topbar, .finance-header, .masthead) .muted {
  color: #cbd5e1 !important;
}

body.ez-app :where(.ez-dashboard-header, .team-header, .topbar, .finance-header, .masthead) :where(.secondary, .outline) {
  border-color: rgba(255, 255, 255, .28) !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}

body.ez-app :where(.ez-dashboard-header, .team-header, .topbar, .finance-header, .masthead) :where(.secondary, .outline):hover {
  border-color: rgba(255, 255, 255, .5) !important;
  background: rgba(255, 255, 255, .17) !important;
}

body.ez-app :where(.ez-dashboard-nav, .dashboard-nav, .team-nav) {
  top: 10px !important;
  margin: 14px 0 24px !important;
  padding: 7px !important;
  border: 1px solid rgba(203, 213, 225, .9) !important;
  border-radius: var(--ez-radius-md) !important;
  background: rgba(255, 255, 255, .91) !important;
  box-shadow: 0 14px 34px -24px rgba(15, 23, 42, .42) !important;
  backdrop-filter: blur(18px);
}

body.ez-app :where(.ez-dashboard-nav, .dashboard-nav, .team-nav) > :where(a, button) {
  min-height: 41px;
  padding: 9px 14px !important;
  border: 1px solid transparent !important;
  border-radius: var(--ez-radius-sm) !important;
  background: transparent !important;
  color: var(--ez-ink-600) !important;
  box-shadow: none !important;
}

body.ez-app :where(.ez-dashboard-nav, .dashboard-nav, .team-nav) > :where(a, button):hover:not(:disabled) {
  background: #eef2f7 !important;
  color: var(--ez-ink-900) !important;
  transform: none;
}

body.ez-app :where(.ez-dashboard-nav, .dashboard-nav, .team-nav) > :where(a.active, button.active, [aria-current="page"]) {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--ez-primary), var(--ez-violet)) !important;
  color: #fff !important;
  box-shadow: 0 9px 18px -12px rgba(79, 70, 229, .88) !important;
}

body.ez-app .dashboard-nav > #businessCommunicationsButton {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--ez-primary), var(--ez-violet)) !important;
  color: #fff !important;
  box-shadow: 0 9px 18px -12px rgba(79, 70, 229, .88) !important;
}

body.ez-app .dashboard-nav > #businessCommunicationsButton:hover {
  background: linear-gradient(135deg, #4338ca, #6d28d9) !important;
  color: #fff !important;
}

body.ez-app :where(.ez-dashboard-demo-note, .demo-note, .demo-banner) {
  margin: 0 0 18px !important;
  padding: 12px 15px !important;
  border: 1px solid #f5d98a !important;
  border-left: 4px solid #f59e0b !important;
  border-radius: var(--ez-radius-md) !important;
  background: rgba(255, 251, 235, .96) !important;
  color: #854d0e !important;
  box-shadow: var(--ez-shadow-sm) !important;
  font-size: .82rem;
  line-height: 1.5;
}

body.ez-app :where(.ez-dashboard-stats, .team-stats, .stats, .summary, .cards) > :where(.stat, .card, .team-stat, *) {
  border-color: var(--ez-line) !important;
}

body.ez-app :where(.ez-dashboard-stats, .team-stats, .stats, .summary, .cards) :where(strong, .number) {
  color: var(--ez-ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

body.ez-surface-dashboard :where(.card, .team-product-card, .finance-card) {
  padding: 24px !important;
  margin-bottom: 18px !important;
}

body.ez-surface-dashboard :where(.card, .team-product-card, .finance-card) > :where(h2, h3):first-child {
  margin-top: 0 !important;
}

body.ez-surface-dashboard :where(.actions, .ez-dashboard-actions, .team-header-actions, .dashboard-header-actions) {
  gap: 9px !important;
}

body.ez-app :where(.list-row, .list-item, .item, .team-list-row, .summary-row, .payment-fact, .client-card) {
  border-color: var(--ez-line) !important;
  border-radius: var(--ez-radius-md) !important;
  background: #fff;
}

body.ez-app :where(.calendar, .calendar-grid, .schedule) {
  border-color: var(--ez-line) !important;
}

body.ez-app :where(.calendar .day, .calendar-day, .schedule .day) {
  border-color: var(--ez-line) !important;
  background: #fff;
}

body.ez-app :where(.calendar .today, .calendar-day.today, .schedule .today) {
  background: var(--ez-primary-soft) !important;
  box-shadow: inset 0 0 0 1px #a5b4fc;
}

/* Finance workspaces */
body.ez-finance-page .finance-header {
  margin-bottom: 18px;
}

body.ez-finance-page :where(.cards, .secondary-metrics) {
  gap: 14px !important;
}

body.ez-finance-page .metric-card {
  position: relative;
  overflow: hidden;
}

body.ez-finance-page .metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(var(--ez-primary), var(--ez-violet));
}

body.ez-finance-page :where(.income) {
  color: var(--ez-success) !important;
}

body.ez-finance-page :where(.expense) {
  color: var(--ez-danger) !important;
}

/* Public profiles and booking flows */
body.ez-surface-profile,
body.ez-surface-booking,
body.ez-surface-legal,
body.ez-surface-marketing {
  display: block !important;
  padding: 20px !important;
}

body.ez-surface-profile > :where(.wrap, main),
body.ez-surface-booking > :where(.wrap, main, .booking-container, .container),
body.ez-surface-legal > :where(main, .container),
body.ez-surface-marketing > :where(main, .container, .wrap) {
  width: min(100%, 1040px) !important;
  max-width: 1040px !important;
  margin-inline: auto !important;
}

body.ez-surface-marketing .plan-shell,
body.ez-surface-marketing .review-card {
  padding: clamp(24px, 5vw, 40px) !important;
  border-radius: var(--ez-radius-xl) !important;
  box-shadow: var(--ez-shadow-lg) !important;
}

body.ez-surface-marketing .plan-grid {
  gap: 18px !important;
}

body.ez-surface-marketing .plan-card {
  border-width: 2px !important;
}

body.ez-surface-marketing .hero {
  border-color: rgba(129, 140, 248, .28) !important;
  background:
    radial-gradient(circle at 88% 4%, rgba(139, 92, 246, .28), transparent 22rem),
    linear-gradient(140deg, #0b1228, #172554 62%, #312e81) !important;
  color: #fff;
  box-shadow: 0 30px 72px -38px rgba(30, 41, 89, .84) !important;
}

body.ez-surface-marketing .hero :where(h1, h2, h3) {
  color: #fff !important;
}

body.ez-surface-marketing .hero p {
  color: #cbd5e1 !important;
}

body.ez-surface-marketing .hero .button.secondary {
  border-color: rgba(255, 255, 255, .3) !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.ez-surface-marketing .stop {
  border: 1px solid var(--ez-line) !important;
  border-radius: var(--ez-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--ez-shadow-md) !important;
}

body.ez-surface-marketing .stop:hover {
  border-color: #c7d2fe !important;
  box-shadow: var(--ez-shadow-lg) !important;
}

.ez-surface-profile .hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 5vw, 42px) !important;
  border: 1px solid #c7d2fe !important;
  border-radius: var(--ez-radius-xl) !important;
  background:
    radial-gradient(circle at 90% 0, rgba(124, 58, 237, .12), transparent 22rem),
    linear-gradient(145deg, #fff, #f8faff) !important;
  box-shadow: var(--ez-shadow-lg) !important;
}

.ez-surface-profile .public-profile-photo {
  border: 5px solid #fff !important;
  box-shadow: 0 0 0 1px #c7d2fe, 0 16px 38px -20px rgba(49, 46, 129, .72) !important;
}

.ez-surface-profile :where(.section, .hero) + :where(.section, .hero) {
  margin-top: 18px;
}

.ez-surface-profile .section {
  padding: 24px !important;
  margin-bottom: 18px !important;
}

.ez-surface-profile .section > h2:first-child {
  margin-top: 0 !important;
}

.ez-surface-booking :where(.booking-container, .lookup-card, .container > .card) {
  padding: clamp(22px, 5vw, 38px) !important;
  border-radius: var(--ez-radius-xl) !important;
  box-shadow: var(--ez-shadow-lg) !important;
}

.ez-surface-booking :where(.card, .booking-panel) {
  padding: clamp(20px, 4vw, 30px) !important;
}

.ez-surface-booking :where(.service, .payment-choice, .slot, .membership-card, .addon-card) {
  border-color: var(--ez-line) !important;
  border-radius: var(--ez-radius-md) !important;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ez-surface-booking :where(.service, .payment-choice, .slot, .membership-card, .addon-card):hover {
  border-color: #a5b4fc !important;
  box-shadow: var(--ez-shadow-sm);
}

/* Customer, admin, sales, and operator workspaces that predate the shared shell */
body.ez-surface-dashboard:not(.ez-dashboard-page):not(.ez-finance-page) > :where(.wrap, .shell, main, .dashboard-container) {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
}

body.ez-surface-dashboard:not(.ez-dashboard-page):not(.ez-finance-page) :where(.top, .account-head):first-of-type {
  padding: 20px 22px;
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-radius-lg);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--ez-shadow-md);
}

body.ez-surface-dashboard :where(.summary) > * {
  min-width: 0;
  padding: 17px !important;
  border: 1px solid var(--ez-line) !important;
  border-radius: var(--ez-radius-md) !important;
  background: linear-gradient(145deg, #fff, #f8faff) !important;
  box-shadow: var(--ez-shadow-sm) !important;
}

body.ez-surface-dashboard :where(.filters, .tabs) {
  display: flex;
  gap: 7px;
  max-width: 100%;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-radius-md);
  background: #fff;
  box-shadow: var(--ez-shadow-sm);
}

body.ez-surface-dashboard :where(.filters, .tabs) button {
  flex: 0 0 auto;
  width: auto !important;
  min-height: 38px;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ez-ink-600) !important;
  box-shadow: none !important;
}

body.ez-surface-dashboard :where(.filters, .tabs) button.active {
  background: linear-gradient(135deg, var(--ez-primary), var(--ez-violet)) !important;
  color: #fff !important;
}

body.ez-surface-dashboard :where(.wrap, .shell) > :where(.top.ez-dashboard-header, header.top.ez-dashboard-header) {
  margin-bottom: 18px;
}

/* Social Hub keeps its three-column product layout while sharing tokens. */
body.ez-surface-social {
  --ink: var(--ez-ink-900);
  --muted: var(--ez-ink-500);
  --line: var(--ez-line);
  --panel: var(--ez-surface);
  --canvas: var(--ez-canvas);
  --brand: var(--ez-primary);
  --brand-dark: var(--ez-primary-dark);
  --violet: var(--ez-violet);
  --success: var(--ez-success);
  --danger: var(--ez-danger);
  --shadow: var(--ez-shadow-md);
}

.ez-surface-social .social-topbar {
  border-color: rgba(219, 227, 239, .92);
  background: rgba(255, 255, 255, .91);
}

.ez-surface-social :where(.feed-card, .composer-card, .left-card, .right-card) {
  border-color: var(--ez-line) !important;
  border-radius: var(--ez-radius-lg) !important;
  box-shadow: var(--ez-shadow-md) !important;
}

/* Legal pages previously had no shared stylesheet. */
body.ez-surface-legal {
  color: var(--ez-ink-800);
}

.ez-surface-legal main {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-radius-xl);
  background: #fff;
  box-shadow: var(--ez-shadow-lg);
}

.ez-surface-legal :where(h1, h2, h3) {
  margin-top: 1.4em;
}

.ez-surface-legal h1:first-child {
  margin-top: 0;
}

.ez-surface-legal :where(p, li) {
  margin-block: .7em;
  line-height: 1.72;
}

@media (max-width: 900px) {
  body.ez-app :where(.card, .section, .record, .appt, .stat, .tile, .team-product-card, .finance-card, .action-card, .plan-card, .comparison-card, .lookup-card, .plan-shell, .review-card, .import-card, .qr-card, .account-demo) {
    border-radius: 15px !important;
  }

  body.ez-surface-dashboard,
  body.ez-dashboard-page,
  body.ez-finance-page,
  body.ez-surface-profile,
  body.ez-surface-booking,
  body.ez-surface-legal,
  body.ez-surface-marketing {
    padding: 12px !important;
  }

  body.ez-app :where(.ez-dashboard-header, .team-header, .topbar, .finance-header, .masthead) {
    padding: 20px !important;
    border-radius: 18px !important;
  }

  body.ez-app :where(.ez-dashboard-nav, .dashboard-nav, .team-nav) {
    margin: 12px 0 18px !important;
  }

  .ez-surface-home .navbar {
    padding: 12px !important;
  }

  .ez-surface-home .hero,
  .ez-surface-home :where(.action-grid, .comparison-shell, .plans-section, .feature-detail) {
    width: min(100% - 24px, 1180px) !important;
  }
}

@media (max-width: 700px) {
  body.ez-app :where(.ez-dashboard-header, .team-header, .topbar, .finance-header, .masthead) {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 15px !important;
  }

  body.ez-app :where(.ez-dashboard-actions, .team-header-actions, .dashboard-header-actions, .hero-actions) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  body.ez-app :where(.ez-dashboard-actions, .team-header-actions, .dashboard-header-actions, .hero-actions) > :where(a, button) {
    width: 100% !important;
    justify-content: center;
    text-align: center;
  }

  body.ez-app :where(.ez-dashboard-nav, .dashboard-nav, .team-nav) {
    position: sticky !important;
    top: 6px !important;
    overflow-x: auto !important;
  }

  body.ez-app :where(.ez-dashboard-nav, .dashboard-nav, .team-nav) > :where(a, button) {
    width: auto !important;
    min-width: max-content;
  }

  body.ez-app :where(.ez-dashboard-stats, .team-stats, .stats, .summary, .cards) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ez-surface-home .hero {
    margin-top: 18px !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 480px) {
  body.ez-app :where(.ez-dashboard-stats, .team-stats, .stats, .summary, .cards) {
    grid-template-columns: 1fr !important;
  }

  body.ez-app :where(.ez-dashboard-header, .team-header, .topbar, .finance-header, .masthead) {
    padding: 18px 16px !important;
  }

  body.ez-app :where(.ez-dashboard-header, .team-header, .topbar, .finance-header, .masthead) h1 {
    padding-right: 44px;
    font-size: 1.5rem !important;
  }

  body.ez-app :where(.card, .section, .record, .appt, .team-product-card, .finance-card, .action-card, .plan-card, .comparison-card, .lookup-card, .plan-shell, .review-card, .import-card, .qr-card, .account-demo) {
    padding: 16px !important;
  }

  .ez-surface-home .hero,
  .ez-surface-home :where(.action-grid, .comparison-shell, .plans-section, .feature-detail) {
    width: min(100% - 16px, 1180px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}