.dashboard-demo-page { min-height: 100vh; background: #f5f7fb; }
.demo-header { margin-bottom: 0; }
.demo-nav { display: flex; align-items: center; gap: 24px; color: #45516a; font-size: 13px; font-weight: 600; }
.demo-nav > a:first-child:hover, .dashboard-demo-footer a:hover { color: var(--blue); }
.demo-nav .nav-cta { min-height: 41px; display: inline-flex; align-items: center; gap: 12px; padding: 0 14px; border: 1px solid #cbd4e3; border-radius: 4px; color: var(--navy); }
.demo-nav .nav-cta span, .dashboard-demo-footer a span { color: var(--blue); }
.dashboard-demo-main { padding-top: 55px; padding-bottom: 64px; }
.dashboard-demo-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 25px; }
.dashboard-demo-heading .eyebrow { margin-bottom: 12px; }
.dashboard-demo-heading h1 { margin: 0 0 10px; color: var(--navy); font-size: clamp(32px, 4vw, 48px); line-height: 1.12; }
.dashboard-demo-heading > div > p:last-child { max-width: 700px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.reset-demo { flex: 0 0 auto; min-height: 43px; }
.demo-data-notice { margin-bottom: 12px; padding: 15px 18px; border: 1px solid #cbd9f1; border-left: 4px solid var(--blue); border-radius: 5px; background: #edf3ff; color: #384964; font-size: 12px; line-height: 1.65; }
.demo-data-notice strong { color: var(--navy); }
.demo-data-notice code, .add-lead-panel code { padding: 1px 4px; border-radius: 3px; background: #e7edf7; color: #26395a; font-family: Consolas, monospace; font-size: .95em; }
.demo-feedback { min-height: 20px; margin: 0 0 10px; color: #45516a; font-size: 12px; line-height: 1.6; }
.demo-feedback[data-state="success"] { color: #187044; }
.demo-feedback[data-state="error"] { color: #a52720; }
.dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { display: grid; gap: 8px; min-height: 128px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 5px 16px #13294b08; }
.stat-card > span { color: #5e6a80; font-size: 11px; font-weight: 600; }
.stat-card strong { color: var(--navy); font-family: var(--font-display); font-size: 32px; line-height: 1; }
.stat-card small { color: #7d899d; font-size: 10px; }
.activity-panel { margin-bottom: 22px; padding: 19px 22px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 8px 24px #13294b08; }
.activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.activity-heading .eyebrow { margin: 0 0 6px; font-size: 9px; }
.activity-heading h2 { margin: 0; color: var(--navy); font-family: var(--font-display); font-size: 19px; }
.activity-heading > span { color: #758197; font-size: 10px; }
.activity-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.activity-list li { min-width: 0; display: flex; align-items: flex-start; gap: 9px; padding: 11px; border: 1px solid #edf0f5; border-radius: 5px; }
.activity-marker { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: #4b74d1; box-shadow: 0 0 0 4px #edf3ff; }
.activity-list li > div { display: grid; gap: 5px; min-width: 0; }
.activity-list strong { color: #35435c; font-size: 10px; line-height: 1.45; }
.activity-list time { color: #8994a5; font-size: 9px; }
.leads-panel, .add-lead-panel { padding: 22px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 8px 24px #13294b08; }
.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 18px; }
.panel-heading h2, .add-lead-panel h2 { margin: 0 0 6px; color: var(--navy); font-family: var(--font-display); font-size: 22px; letter-spacing: -.5px; }
.panel-heading p, .add-lead-panel > div > p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.search-field { display: grid; gap: 6px; width: min(100%, 300px); color: #46536b; font-size: 11px; font-weight: 700; }
.search-field input, .add-lead-form input, .add-lead-form select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #d5dce8; border-radius: 4px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 400; }
.search-field input::placeholder { color: #8792a4; }
.status-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filter-button { min-height: 35px; padding: 0 12px; border: 1px solid #d9e0eb; border-radius: 4px; background: #fff; color: #526078; font-size: 11px; font-weight: 600; cursor: pointer; }
.filter-button:hover { border-color: #9eb4dd; color: var(--blue); }
.filter-button.is-active { border-color: var(--navy); background: var(--navy); color: #fff; }
.filter-button:focus-visible, .reset-demo:focus-visible, .add-lead-submit:focus-visible, .demo-nav a:focus-visible, .dashboard-demo-footer a:focus-visible { outline: 3px solid #78a5ff; outline-offset: 3px; }
.table-scroll-hint { display: none; margin: 0 0 7px; color: #707d92; font-size: 10px; }
.table-scroll { overflow-x: auto; border: 1px solid #e6eaf1; border-radius: 4px; overscroll-behavior-inline: contain; }
.table-scroll:focus-visible { outline: 3px solid #78a5ff; outline-offset: 2px; }
.table-scroll table { width: 100%; min-width: 890px; border-collapse: collapse; text-align: left; }
.table-scroll th { padding: 11px 12px; background: #f5f7fb; color: #5e6a80; font-size: 10px; font-weight: 700; white-space: nowrap; }
.table-scroll td { padding: 10px 12px; border-top: 1px solid #edf0f5; color: #35435c; font-size: 11px; }
.table-scroll tbody tr:hover { background: #fafbfe; }
.table-scroll td:first-child { color: var(--navy); font-weight: 700; white-space: nowrap; }
.table-scroll td:nth-child(3) { color: #526078; }
.lead-status-select { min-width: 119px; min-height: 34px; padding: 0 8px; border: 1px solid #d9e0eb; border-radius: 4px; background: #fff; color: #32425d; font: inherit; }
.lead-status-select.status-new { border-color: #d7e4ff; background: #edf3ff; color: #2456b8; }
.lead-status-select.status-contacted { border-color: #d2ecdc; background: #e9f7ef; color: #217342; }
.lead-status-select.status-qualified { border-color: #e2dafc; background: #f1edff; color: #6048a5; }
.lead-status-select.status-follow-up { border-color: #f5dfbd; background: #fff4e5; color: #9a5c08; }
.empty-state { margin: 0; padding: 30px 18px; color: #657187; font-size: 12px; text-align: center; }
.empty-state[hidden] { display: none; }
.result-count { margin: 10px 0 0; color: #758197; font-size: 10px; }
.add-lead-panel { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr); gap: 30px; margin-top: 22px; }
.add-lead-panel .eyebrow { margin-bottom: 10px; }
.add-lead-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 13px; }
.add-lead-form label { display: grid; gap: 6px; color: #46536b; font-size: 10px; font-weight: 700; }
.add-lead-form label > span { color: var(--blue); }
.add-lead-form input:focus, .add-lead-form select:focus, .search-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px #2563eb1c; }
.add-lead-submit { width: fit-content; min-height: 42px; gap: 12px; }
.dashboard-demo-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 25px; }
.dashboard-demo-footer a { color: #46536b; font-size: 11px; font-weight: 700; }

@media (max-width: 850px) {
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .add-lead-panel { grid-template-columns: 1fr; gap: 20px; }
  .table-scroll-hint { display: block; }
}
@media (max-width: 700px) {
  .demo-header { width: calc(100% - 42px); }
  .demo-header .brand { width: 170px; }
  .demo-nav { gap: 11px; font-size: 11px; }
  .demo-nav .nav-cta { min-height: 37px; gap: 6px; padding: 0 8px; font-size: 10px; }
  .dashboard-demo-main { padding-top: 38px; padding-bottom: 42px; }
  .dashboard-demo-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .dashboard-demo-heading h1 { font-size: clamp(31px, 8vw, 42px); }
  .dashboard-demo-heading > div > p:last-child { font-size: 13px; }
  .dashboard-stats { gap: 9px; }
  .stat-card { min-height: 112px; padding: 14px; }
  .stat-card strong { font-size: 28px; }
  .leads-panel, .add-lead-panel { padding: 17px 14px; }
  .activity-panel { padding: 16px 14px; }
  .activity-heading { align-items: flex-start; flex-direction: column; }
  .activity-list { grid-template-columns: 1fr; }
  .panel-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .search-field { width: 100%; }
  .status-filters { gap: 6px; }
  .filter-button { min-height: 34px; padding: 0 9px; font-size: 10px; }
  .add-lead-form { grid-template-columns: 1fr; }
  .dashboard-demo-footer { flex-direction: column; }
}
@media (max-width: 420px) {
  .demo-header { width: calc(100% - 34px); }
  .demo-header .brand { width: 142px; height: 54px; }
  .demo-nav { gap: 7px; }
  .demo-nav .nav-cta { font-size: 9px; }
}