@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, p { margin: 0; }
  button, input, select, textarea { font: inherit; }
  button { color: inherit; }
  img, svg { display: block; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    --paper: #f6f5f1;
    --white: #fff;
    --ink: #20201f;
    --muted: #60605b;
    --line: #dcdcd4;
    --indigo: #4837d6;
    --indigo-dark: #3829ad;
    --lavender: #e9e5f8;
    --citron: #e8ecb3;
    --charcoal: #242722;
    --green: #dcebd8;
    --pink: #f7d9df;
    --blue: #dfeaf8;
    --radius: 13px;
    --sidebar-width: 196px;
    --detail-width: 390px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none;
  }
  body { min-width: 320px; font-size: 16px; line-height: 1.45; }
  h1, h2, h3 { line-height: 1.12; letter-spacing: -.035em; }
  h1 { font-size: clamp(2rem, 3vw, 2.65rem); font-weight: 650; }
  h2 { font-size: 1.12rem; font-weight: 650; }
  h3 { font-size: 1rem; }
  button, input, select, textarea { font-size: 1rem; }
  button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
    outline: 3px solid var(--indigo);
    outline-offset: 3px;
  }
  ::selection { background: var(--citron); color: var(--ink); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .skip-link { position: fixed; left: 16px; top: 12px; z-index: 200; transform: translateY(-160%); background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: 8px; box-shadow: 0 8px 30px #0002; }
  .skip-link:focus { transform: none; }
  svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

@layer layout {
  .app-shell { min-height: 100dvh; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 80; width: var(--sidebar-width); display: flex; flex-direction: column; background: var(--charcoal); color: #f6f5f1; padding: 18px 10px; box-shadow: 6px 0 24px #1112; }
  .dashboard { min-height: 100dvh; margin-left: var(--sidebar-width); margin-right: var(--detail-width); padding: 20px; transition: margin-right .24s ease; }
  .dashboard.detail-closed { margin-right: 0; }
  .detail-panel { position: fixed; inset: 0 0 0 auto; z-index: 70; width: var(--detail-width); background: var(--white); border-left: 1px solid var(--line); box-shadow: -8px 0 30px #2525310b; overflow: auto; transition: transform .24s ease; }
  .detail-panel.closed { transform: translateX(102%); }
  .detail-panel-inner { position: relative; min-height: 100%; padding: 24px 22px 32px; }
  .sidebar-scrim, .panel-scrim { position: fixed; inset: 0; z-index: 60; background: #1118; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .panel-scrim { z-index: 65; }
}

@layer components {
  .sidebar-top { display: flex; align-items: flex-start; justify-content: space-between; }
  .brand { display: inline-flex; align-items: center; gap: 9px; color: white; text-decoration: none; font-size: 1.08rem; font-weight: 650; line-height: 1.08; letter-spacing: -.025em; padding: 0 8px; }
  .brand img { width: 44px; height: 44px; object-fit: contain; }
  .primary-nav { display: grid; gap: 4px; margin-top: 37px; }
  .primary-nav button { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 13px; padding: 10px 14px; border: 0; border-radius: 8px; background: transparent; color: #e5e6e1; text-align: left; transition: background .18s, color .18s; }
  .primary-nav button:hover { background: #ffffff12; }
  .primary-nav button.active { background: var(--lavender); color: var(--indigo); font-weight: 650; box-shadow: inset 0 0 0 1px #fff9; }
  .primary-nav svg { flex: 0 0 auto; }
  .sidebar-footer { margin-top: auto; padding: 12px 6px 0; }
  .owner-card { display: grid; grid-template-columns: 38px 1fr 22px; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: white; padding: 8px 0; text-align: left; }
  .owner-card > svg { width: 18px; height: 18px; }
  .log-out-button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: #bfc1b9; padding: 8px 4px; text-align: left; font-size: .84rem; border-radius: 8px; transition: background .18s, color .18s; }
  .log-out-button:hover { background: #ffffff12; color: white; }
  .log-out-button svg { width: 17px; height: 17px; flex: 0 0 auto; }
  .avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lavender); color: #282173; font-weight: 700; font-size: .78rem; }
  .sidebar-footer > p { border-top: 2px solid #8172ef; margin-top: 15px; padding: 17px 4px 0; color: #bfc1b9; font-family: Georgia, serif; font-style: italic; font-size: .86rem; line-height: 1.55; }
  .icon-button.sidebar-close, .icon-button.mobile-menu { display: none; }

  .page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 17px; }
  .title-row { display: flex; align-items: center; gap: 12px; }
  .page-title-with-help { display: flex; align-items: center; gap: 9px; }
  .page-help-button { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid #aaa9a2; border-radius: 50%; background: var(--white); color: var(--indigo); font-size: 1rem; font-weight: 700; line-height: 1; }
  .page-help-button:hover { border-color: var(--indigo); background: var(--lavender); }
  .eyebrow { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .11em; line-height: 1.3; text-transform: uppercase; margin-bottom: 5px; }
  .subtitle { color: var(--muted); font-size: 1.08rem; margin-top: 3px; }
  .header-actions { display: flex; align-items: stretch; gap: 12px; }
  .date-control { min-height: 44px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding-left: 12px; }
  .date-control svg { width: 18px; color: var(--muted); }
  .date-control select { min-height: 42px; width: auto; appearance: auto; border: 0; background: transparent; color: var(--ink); padding: 0 10px 0 0; }
  .primary-button, .secondary-button, .quiet-button { min-height: 44px; border: 1px solid transparent; border-radius: 8px; padding: 10px 15px; font-weight: 650; transition: background .18s, transform .18s; }
  .primary-button { background: var(--indigo); color: white; }
  .primary-button:hover { background: var(--indigo-dark); transform: translateY(-1px); }
  .secondary-button { background: var(--white); border-color: #aaa9a2; }
  .secondary-button:hover { background: var(--paper); }
  .quiet-button { min-height: 38px; color: var(--indigo); background: var(--lavender); padding: 7px 12px; }
  .icon-button { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 50%; background: transparent; }
  .icon-button:hover { background: var(--lavender); }
  .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px #24272208; }
  .section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

  .funnel-card { padding: 18px; }
  .funnel-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: stretch; margin-top: 14px; }
  .funnel-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 11px; padding-right: 20px; }
  .funnel-step { min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 82px; border-radius: 9px; background: #f8f8f5; padding: 12px; }
  .funnel-step div, .all-leads div { display: grid; }
  .funnel-step span:not(.metric-icon), .all-leads span:not(.metric-icon) { color: var(--muted); font-size: .78rem; }
  .funnel-step strong, .all-leads strong { font-size: 1.8rem; letter-spacing: -.045em; line-height: 1.1; }
  .metric-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; color: var(--indigo); }
  .metric-icon.indigo { background: #eeecff; }
  .metric-icon.lavender { background: var(--lavender); }
  .metric-icon.citron { background: var(--citron); color: #606522; }
  .funnel-arrow { color: var(--muted); font-size: 1.35rem; }
  .conversion-rates { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 20px; color: var(--muted); font-size: .8rem; }
  .conversion-rates strong { color: var(--ink); margin-left: 6px; }
  .conversion-rates i { width: 1px; height: 17px; background: var(--line); }
  .all-leads { display: flex; align-items: center; justify-content: center; gap: 14px; border-left: 1px solid var(--line); padding-left: 20px; }
  .all-leads small { color: var(--muted); font-size: .68rem; margin-top: 3px; }

  .status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0; }
  .status-card { min-width: 0; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; border-color: var(--line); padding: 14px 15px; text-align: left; transition: border-color .18s, transform .18s, box-shadow .18s; }
  .status-card:hover { transform: translateY(-2px); box-shadow: 0 12px 25px #24272210; }
  .status-card[aria-pressed="true"] { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
  .status-card > span:nth-child(2) { display: grid; }
  .status-card small { font-size: .8rem; }
  .status-card strong { font-size: 1.65rem; line-height: 1.05; }
  .status-card .arrow { color: var(--muted); }
  .status-dot { width: 34px; height: 34px; border-radius: 50%; border: 10px solid; }
  .status-new { background: #7b68ee; border-color: #ded8ff; }
  .status-contacted { background: #c2c72d; border-color: #f0f1bd; }
  .status-converted { background: #69ae6a; border-color: #d5ead2; }
  .status-lost { background: #e67c91; border-color: #f9d5dc; }

  .insight-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(330px, .9fr); gap: 12px; }
  .chart-card, .channels-card { min-width: 0; padding: 17px; }
  .chart-heading { align-items: center; }
  .chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; color: var(--muted); font-size: .68rem; }
  .chart-legend span { display: flex; align-items: center; gap: 5px; }
  .chart-legend i { display: inline-block; width: 19px; height: 2px; }
  .legend-leads { background: var(--indigo); }
  .legend-visits { border-top: 2px dashed #8b8c91; }
  .chart-wrap { margin-top: 8px; overflow: hidden; }
  .chart-wrap:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
  .trend-chart { width: 100%; height: auto; }
  .grid-lines path { stroke: #e6e6e1; stroke-width: 1; }
  .axis-labels text { fill: #73736d; stroke: none; font: 12px Arial, sans-serif; }
  .visits-line { fill: none; stroke: #94959a; stroke-width: 2.5; stroke-dasharray: 7 7; }
  .lead-area { fill: url(#lead-fill); stroke: none; }
  .leads-line { fill: none; stroke: var(--indigo); stroke-width: 3; }
  .channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 12px; }
  .channel-button { min-width: 0; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 8px; min-height: 48px; border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 5px; text-align: left; }
  .channel-button:hover { background: var(--paper); }
  .channel-button[aria-pressed="true"] { border-color: var(--indigo); background: var(--lavender); }
  .channel-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: var(--indigo); background: #eeecff; }
  .channel-icon svg { width: 18px; }
  .channel-button span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
  .channel-button strong { font-size: .82rem; }

  .leads-card { margin-top: 12px; overflow: hidden; }
  .leads-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px 11px; }
  .result-count { color: var(--muted); font-size: .72rem; margin-top: 4px; }
  .search-control { width: min(280px, 45%); display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding-left: 12px; }
  .search-control svg { width: 18px; color: var(--muted); }
  .search-control input { min-width: 0; min-height: 40px; width: 100%; border: 0; border-radius: 8px; background: transparent; padding: 8px 10px 8px 0; }
  .table-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: .82rem; }
  th { color: var(--muted); font-size: .72rem; font-weight: 650; text-align: left; padding: 10px 14px; border-top: 1px solid #ecece7; border-bottom: 1px solid #ecece7; }
  td { height: 59px; padding: 8px 14px; border-bottom: 1px solid #ecece7; vertical-align: middle; }
  tbody tr { cursor: pointer; transition: background .15s; }
  tbody tr:hover, tbody tr.selected { background: #f0edff; }
  tbody tr:last-child td { border-bottom: 0; }
  .lead-cell { min-width: 210px; display: flex; align-items: center; gap: 10px; }
  .lead-cell .avatar { width: 38px; height: 38px; flex: 0 0 auto; }
  .lead-cell strong, .lead-cell small { display: block; }
  .lead-cell small { color: var(--muted); margin-top: 1px; }
  .channel-badge, .status-pill, .ai-badge { display: inline-flex; align-items: center; width: max-content; border-radius: 999px; padding: 5px 9px; font-size: .72rem; font-weight: 650; white-space: nowrap; }
  .channel-badge { color: #3124b8; background: var(--lavender); }
  .status-pill.new { color: #3021ba; background: #e3dfff; }
  .status-pill.contacted { color: #555909; background: #eef0b8; }
  .status-pill.converted { color: #235a29; background: #d8ecd7; }
  .status-pill.lost { color: #8c2539; background: #f8d5dc; }
  .more-button { border: 0; background: transparent; font-size: 1.2rem; letter-spacing: .12em; }
  .empty-state { padding: 48px 20px; text-align: center; }
  .empty-state .metric-icon { margin: 0 auto 12px; }
  .empty-state p { color: var(--muted); margin: 8px 0 16px; }
  .demo-disclosure { color: var(--muted); font-size: .68rem; text-align: center; padding: 13px 0 2px; }

  .panel-close { position: absolute; right: 12px; top: 12px; z-index: 1; font-size: 1.5rem; }
  .edit-lead-button { position: absolute; right: 57px; top: 17px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; color: var(--indigo); border-color: #9c92e9; }
  .edit-lead-button svg { width: 15px; height: 15px; }
  .detail-profile { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; padding-right: 38px; }
  .detail-profile .avatar { width: 52px; height: 52px; font-size: 1rem; }
  .detail-profile h2 { font-size: 1.35rem; }
  .detail-profile p { color: var(--muted); }
  .detail-status-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 0; }
  .detail-status-row label { color: var(--muted); font-size: .78rem; }
  .detail-status-row select { width: 145px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: 8px 10px; }
  .contact-list { display: grid; gap: 9px; list-style: none; padding: 17px 0; margin: 17px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #4c4c48; font-size: .84rem; }
  .contact-list li { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .contact-list svg { width: 17px; flex: 0 0 auto; }
  .contact-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .contact-list .referrer-row { align-items: flex-start; }
  .contact-list .referrer-row span { white-space: normal; overflow: visible; }
  .detail-meta { display: grid; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--line); }
  .meta-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; font-size: .8rem; }
  .meta-row > span:first-child { color: var(--muted); }
  .source-lock { display: grid; gap: 3px; }
  .source-lock small { color: var(--muted); font-family: Georgia, serif; font-style: italic; font-size: .68rem; }
  .assign-control { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--white); }

  .ai-summary { position: relative; overflow: hidden; margin: 18px 0; padding: 16px; border: 1px solid #cfc9f1; border-radius: 11px; background: linear-gradient(145deg, #f2efff 0%, #fbfaf7 68%); }
  .ai-summary::after { content: ""; position: absolute; right: -24px; top: -28px; width: 100px; height: 100px; border-radius: 50%; background: #e8ecb388; }
  .ai-summary-heading { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .ai-heading-label { display: flex; align-items: center; gap: 9px; }
  .ai-heading-label svg { color: var(--indigo); }
  .ai-heading-label h3 { font-size: .92rem; }
  .ai-badge { background: var(--indigo); color: white; padding: 3px 7px; font-size: .62rem; letter-spacing: .03em; }
  .summary-refresh { position: relative; z-index: 2; border: 0; background: transparent; color: var(--indigo); font-size: .72rem; font-weight: 700; padding: 3px; }
  .ai-summary > p { position: relative; z-index: 1; color: #454449; font-size: .8rem; line-height: 1.55; margin-top: 11px; }
  .summary-points { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .summary-points div { border-top: 1px solid #d9d4ef; padding-top: 8px; }
  .summary-points span { display: block; color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .summary-points strong { display: block; font-size: .76rem; margin-top: 3px; }
  .summary-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .63rem; margin-top: 13px; }
  .summary-refresh.loading { animation: pulse .7s ease infinite alternate; }
  @keyframes pulse { to { opacity: .35; } }

  .activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 6px; }
  .activity-heading span { color: var(--muted); font-size: .7rem; }
  .activity-list { list-style: none; margin: 0; padding: 0; }
  .activity-item { position: relative; display: grid; grid-template-columns: 35px 1fr; gap: 11px; padding: 13px 0; }
  .activity-item:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 48px; bottom: -9px; width: 1px; background: var(--line); }
  .activity-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: var(--indigo); background: var(--lavender); }
  .activity-icon.note { color: #636514; background: var(--citron); }
  .activity-icon svg { width: 17px; }
  .activity-copy time { color: var(--muted); font-size: .64rem; }
  .activity-copy h3 { font-size: .8rem; margin-top: 2px; }
  .activity-copy p { color: #55554f; font-size: .76rem; line-height: 1.5; margin-top: 4px; }
  .activity-copy blockquote { color: #5e5e5a; font-family: Georgia, serif; font-size: .76rem; font-style: italic; line-height: 1.48; margin: 5px 0 0; }
  .note-form { margin-top: 13px; }
  .note-form label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 7px; }
  .note-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: stretch; }
  .note-row textarea { min-height: 68px; resize: vertical; border: 1px solid #aaa9a2; border-radius: 8px; padding: 10px; }
  .note-row .primary-button { align-self: end; }
  .sms-form { display: grid; gap: 12px; margin-top: 18px; border: 1px solid #b8b0ef; border-radius: 11px; background: #f4f1ff; padding: 15px; }
  .sms-form-heading { display: grid; grid-template-columns: 35px 1fr; gap: 10px; align-items: start; }
  .sms-form-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: var(--indigo); color: white; }
  .sms-form-icon svg { width: 17px; }
  .sms-form label, .sms-form h3 { display: block; color: var(--ink); font-size: .82rem; font-weight: 800; }
  .sms-form-heading p, .sms-form-actions p { color: #555370; font-size: .68rem; line-height: 1.45; margin-top: 3px; }
  .sms-form textarea { width: 100%; min-height: 88px; resize: vertical; border: 1px solid #9791c7; border-radius: 8px; background: white; padding: 10px; color: var(--ink); }
  .sms-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sms-form-actions p { margin: 0; }
  .sms-form-unavailable { background: #f4f3ef; border-color: var(--line); }
  .sms-form-unavailable .sms-form-icon { background: #85857d; }
  .sms-form-unavailable > .primary-button { justify-self: end; }
  .sms-form button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
  .detail-disclosure { color: var(--muted); font-size: .64rem; margin-top: 8px; }
  .lead-edit-form { padding: 2px 0 17px; border-bottom: 1px solid var(--line); }
  .edit-heading { padding-right: 42px; margin-bottom: 8px; }
  .edit-heading h2 { font-size: 1.35rem; }
  .edit-fields { display: grid; grid-template-columns: 1fr; gap: 0; }
  .edit-fields label { display: block; color: var(--muted); font-size: .7rem; font-weight: 700; margin-top: 9px; }
  .edit-fields label { grid-column: 1 / -1; }
  .edit-fields input { width: 100%; min-width: 0; min-height: 39px; border: 1px solid #aaa9a2; border-radius: 7px; background: white; padding: 8px 10px; margin-top: 4px; color: var(--ink); }
  .edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }
  .edit-actions button { min-height: 39px; padding-block: 7px; }

  .modal { width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 32px); border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); padding: 0; box-shadow: 0 28px 90px #15151a50; }
  .modal::backdrop { background: #15151a99; backdrop-filter: blur(2px); }
  .modal form { padding: 24px; }
  .modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
  .modal-heading h2 { font-size: 1.55rem; }
  .modal-heading p:not(.eyebrow) { color: var(--muted); margin-top: 4px; }
  .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 8px; }
  #referrer-field { grid-column: 1 / -1; }
  .modal label { display: block; font-size: .8rem; font-weight: 700; margin-top: 14px; }
  .modal label span { color: var(--muted); font-weight: 400; }
  .modal input, .modal select, .modal textarea { width: 100%; min-height: 44px; border: 1px solid #aaa9a2; border-radius: 8px; background: white; padding: 10px 12px; margin-top: 6px; color: var(--ink); }
  .modal textarea { resize: vertical; }
  .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
  .modal-disclosure { color: var(--muted); font-size: .68rem; text-align: right; margin-top: 7px; }
  .page-help-dialog { width: min(480px, calc(100% - 32px)); border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); padding: 0; box-shadow: 0 28px 90px #15151a50; }
  .page-help-dialog::backdrop { background: #15151a99; backdrop-filter: blur(2px); }
  .page-help-content { padding: 26px; }
  .page-help-content h2 { font-size: 1.65rem; }
  .page-help-content p:not(.eyebrow) { color: var(--muted); margin-top: 10px; }
  .page-help-content .primary-button { display: block; margin: 24px 0 0 auto; }
  .toast { position: fixed; left: 50%; bottom: 20px; z-index: 300; transform: translate(-50%, 150%); max-width: min(440px, calc(100% - 32px)); border-radius: 9px; background: var(--charcoal); color: white; padding: 11px 16px; box-shadow: 0 12px 40px #0003; font-size: .84rem; opacity: 0; transition: transform .22s, opacity .22s; }
  .toast.show { transform: translate(-50%, 0); opacity: 1; }
}

@layer responsive {
  @media (max-width: 1380px) {
    .dashboard { margin-right: 0; }
    .detail-panel { transform: translateX(102%); transition: transform .24s ease; z-index: 90; box-shadow: -14px 0 45px #1113; }
    .detail-panel.open { transform: none; }
    .panel-scrim.open { opacity: 1; pointer-events: auto; }
  }

  @media (max-width: 1080px) {
    .funnel-layout { grid-template-columns: 1fr; }
    .all-leads { border-left: 0; border-top: 1px solid var(--line); padding: 15px 0 0; margin-top: 15px; justify-content: flex-start; }
    .funnel-steps { padding-right: 0; }
    .insight-grid { grid-template-columns: 1fr; }
    .channels-card .channel-grid { grid-template-columns: repeat(4, 1fr); }
  }

  @media (max-width: 860px) {
    .sidebar { transform: translateX(-102%); transition: transform .24s ease; box-shadow: 14px 0 45px #1114; }
    .sidebar.open { transform: none; }
    .sidebar-scrim.open { opacity: 1; pointer-events: auto; }
    .icon-button.sidebar-close, .icon-button.mobile-menu { display: grid; }
    .sidebar-close { color: white; }
    .dashboard { margin-left: 0; padding: 16px; }
    .status-grid { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 680px) {
    .dashboard { padding: 12px; }
    .page-header { align-items: flex-start; }
    .header-actions { flex-direction: column; }
    .date-control { order: 2; }
    .date-control select { width: 100%; }
    .funnel-card { padding: 15px; }
    .funnel-steps { grid-template-columns: 1fr; gap: 8px; }
    .funnel-step { min-height: 68px; }
    .funnel-arrow { display: none; }
    .conversion-rates { grid-column: auto; justify-content: flex-start; flex-wrap: wrap; padding: 6px 4px; }
    .channels-card .channel-grid { grid-template-columns: 1fr 1fr; }
    .chart-heading { align-items: flex-start; }
    .chart-legend { justify-content: flex-start; }
    .leads-toolbar { align-items: stretch; flex-direction: column; }
    .search-control { width: 100%; }
    table, tbody, tr, td { display: block; }
    thead { display: none; }
    .table-wrap { overflow: visible; }
    tbody { display: grid; gap: 8px; padding: 0 12px 12px; }
    tbody tr { position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--white); padding: 12px; }
    td { height: auto; border: 0; padding: 4px 0 4px 106px; min-height: 28px; }
    td::before { content: attr(data-label); position: absolute; left: 12px; color: var(--muted); font-size: .7rem; font-weight: 700; }
    td:first-child { padding-left: 0; margin-bottom: 6px; }
    td:first-child::before, td:last-child { display: none; }
    .lead-cell { min-width: 0; }
    .detail-panel { width: min(100%, 430px); }
    .field-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 470px) {
    h1 { font-size: 1.85rem; }
    .subtitle { font-size: .92rem; }
    .page-header { display: grid; }
    .header-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .date-control { order: initial; }
    .primary-button { padding-inline: 11px; }
    .status-grid { gap: 8px; }
    .status-card { grid-template-columns: 28px 1fr; padding: 12px 10px; }
    .status-dot { width: 28px; height: 28px; border-width: 8px; }
    .status-card .arrow { display: none; }
    .channels-card .channel-grid { grid-template-columns: 1fr; }
    .chart-legend { display: grid; }
    .chart-wrap { margin-inline: -8px; }
    .trend-chart { min-width: 590px; }
    .chart-wrap { overflow-x: auto; }
    .summary-points { grid-template-columns: 1fr; }
    .edit-fields { grid-template-columns: 1fr; }
    .edit-fields label { grid-column: 1 / -1; }
    .note-row { grid-template-columns: 1fr; }
    .note-row .primary-button { width: 100%; }
    .sms-form-actions { align-items: stretch; flex-direction: column; }
    .sms-form-actions .primary-button, .sms-form-unavailable > .primary-button { justify-self: stretch; width: 100%; }
    .modal { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
    .modal form { padding: 18px; }
    .modal-actions { flex-direction: column-reverse; }
    .modal-actions button { width: 100%; }
  }

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