:root {
  --ink: #17202e;
  --muted: #718096;
  --line: #e8edf3;
  --canvas: #f7f9fc;
  --white: #ffffff;
  --navy: #12233f;
  --blue: #377cf6;
  --blue-soft: #edf4ff;
  --violet: #7357e8;
  --violet-soft: #f1edff;
  --green: #21a779;
  --green-soft: #e9f9f3;
  --orange: #f59d37;
  --orange-soft: #fff4e6;
  --red: #df5c6a;
  --red-soft: #fff0f2;
  --shadow: 0 14px 38px rgba(24, 43, 77, 0.08);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "DM Sans", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: white; }
.login-story { position: relative; overflow: hidden; padding: 64px; color: white; background: linear-gradient(145deg, #10233f 0%, #1f4382 54%, #5e55c9 100%); display: flex; flex-direction: column; justify-content: space-between; }
.login-story::before, .login-story::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); }
.login-story::before { width: 480px; height: 480px; right: -180px; top: -120px; }
.login-story::after { width: 340px; height: 340px; left: -170px; bottom: -120px; }
.brand { display: flex; gap: 12px; align-items: center; font-family: Manrope, sans-serif; font-weight: 800; font-size: 19px; position: relative; z-index: 1; }
.brand-mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, #508aff, #7760ee); color: white; box-shadow: 0 8px 18px rgba(60,104,220,.25); }
.brand-mark svg { width: 19px; }
.story-copy { max-width: 590px; position: relative; z-index: 1; }
.story-copy h1 { font: 800 clamp(40px,5vw,68px)/1.06 Manrope; letter-spacing: -3px; margin: 0 0 24px; }
.story-copy p { color: rgba(255,255,255,.75); font-size: 18px; line-height: 1.7; max-width: 520px; }
.story-proof { display: flex; gap: 12px; align-items: center; position: relative; z-index: 1; color: rgba(255,255,255,.7); font-size: 13px; }
.proof-dots { display: flex; }
.proof-dots span { width: 30px; height: 30px; margin-left: -7px; border: 2px solid #3b5793; background: #dbe7ff; color: #18396e; border-radius: 50%; display:grid; place-items:center; font-size:10px; font-weight:700; }
.login-panel { display: grid; place-items: center; padding: 40px; }
.login-card { width: min(430px, 100%); }
.login-card h2 { font: 800 34px/1.2 Manrope; margin: 0 0 10px; letter-spacing: -1px; }
.login-card > p { color: var(--muted); margin: 0 0 32px; }
.access-steps { display: flex; align-items: center; margin-bottom: 28px; }
.access-step { display: flex; align-items: center; color: #a0aaba; font-size: 12px; font-weight: 700; }
.access-step span { width: 25px; height: 25px; border-radius: 50%; border: 1px solid var(--line); display:grid; place-items:center; margin-right: 6px; }
.access-step.active { color: var(--blue); }
.access-step.active span { color: white; background: var(--blue); border-color: var(--blue); }
.step-line { height: 1px; flex: 1; background: var(--line); margin: 0 8px; }
.google-button, .primary-button, .secondary-button, .ghost-button { border: 0; border-radius: 10px; min-height: 44px; padding: 0 16px; font-weight: 700; display: inline-flex; align-items:center; justify-content:center; gap: 9px; }
.google-button { width: 100%; border: 1px solid var(--line); background: white; color: var(--ink); }
.google-g { font-weight: 800; color: #4285f4; font-size: 18px; }
.divider { display:flex; align-items:center; gap:14px; color:#a1aaba; font-size:12px; margin:24px 0; }
.divider::before,.divider::after { content:""; height:1px; flex:1; background:var(--line); }
.field { margin-bottom: 17px; }
.field label { display:block; font-size: 12px; font-weight:700; color:#4c586b; margin-bottom:7px; }
.field input, .field select, .field textarea { width:100%; border:1px solid #dfe5ec; background:white; border-radius:10px; padding:12px 13px; outline:none; color:var(--ink); }
.field input:focus,.field textarea:focus,.field select:focus { border-color:#79a5fa; box-shadow:0 0 0 3px var(--blue-soft); }
.primary-button { background:var(--blue); color:white; box-shadow:0 8px 18px rgba(55,124,246,.2); }
.primary-button:hover { background:#2f6fe1; }
.login-submit { width:100%; }
.login-note { padding:12px 14px; background:var(--blue-soft); color:#45638f; border-radius:9px; font-size:12px; line-height:1.5; margin-top:18px; }

.app-shell { display:grid; grid-template-columns: 244px minmax(0,1fr); min-height:100vh; }
.sidebar { background:white; border-right:1px solid var(--line); padding:26px 18px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:20; }
.sidebar .brand { margin: 0 8px 18px; }
.sidebar .brand-mark { width:34px; height:34px; }
.company-switcher { position:relative; margin-bottom:14px; }
.company-switch-button { width:100%; border:1px solid var(--line); background:#f8fafc; border-radius:12px; padding:10px; display:grid; grid-template-columns:35px 1fr 16px; gap:9px; align-items:center; text-align:left; color:var(--ink); }
.company-switch-button:hover { border-color:#c7d7f2; background:#f3f7fd; }
.company-switch-button strong,.company-menu-item strong { display:block; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.company-switch-button small,.company-menu-item small { display:block; color:#8d97a7; font-size:9px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.company-logo { width:35px; height:35px; display:grid; place-items:center; border-radius:10px; color:#365aa4; background:linear-gradient(135deg,#dbe9ff,#e6e1ff); font-size:10px; font-weight:800; }
.company-logo.small { width:29px; height:29px; border-radius:8px; font-size:8px; }
.company-logo.large { width:52px; height:52px; border-radius:14px; font-size:14px; }
.company-menu { display:none; position:absolute; left:0; right:0; top:calc(100% + 7px); z-index:40; padding:8px; background:white; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 42px rgba(21,36,59,.16); }
.company-menu.open { display:block; animation:fadeIn .15s ease; }
.company-menu-label { padding:6px 7px 7px; color:#9aa4b3; font-size:8px; letter-spacing:.8px; font-weight:800; }
.company-menu-item { width:100%; border:0; background:white; padding:8px; border-radius:9px; display:grid; grid-template-columns:29px 1fr 14px; gap:8px; align-items:center; text-align:left; color:var(--ink); }
.company-menu-item:hover,.company-menu-item.active { background:var(--blue-soft); }
.company-menu-item b { color:var(--blue); }
.company-add-button { width:100%; margin-top:6px; padding:9px; border:1px dashed #b9c7db; border-radius:9px; background:white; color:var(--blue); font-size:9px; font-weight:800; }
.nav-label { color:#a2abba; font-size:10px; letter-spacing:1.2px; font-weight:800; margin: 18px 12px 8px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; border:0; color:#667085; background:transparent; width:100%; text-align:left; font-weight:600; margin:2px 0; }
.nav-item svg { width:18px; height:18px; }
.nav-item.active { background:var(--blue-soft); color:var(--blue); }
.nav-badge { margin-left:auto; background:var(--red); color:white; border-radius:10px; padding:2px 7px; font-size:10px; }
.sidebar-bottom { margin-top:auto; }
.help-card { border-radius:13px; padding:15px; color:white; background:linear-gradient(135deg,#203c6f,#5368c9); margin:16px 5px; }
.help-card strong { font-size:13px; display:block; margin-bottom:6px; }
.help-card span { color:rgba(255,255,255,.7); font-size:11px; line-height:1.5; }
.main-area { min-width:0; }
.topbar { height:76px; background:white; border-bottom:1px solid var(--line); padding:0 32px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:15; }
.search-box { width:min(360px,42vw); background:#f7f9fc; border:1px solid transparent; border-radius:10px; display:flex; gap:9px; align-items:center; padding:10px 12px; color:#98a2b3; }
.search-box input { border:0; outline:0; background:transparent; width:100%; }
.top-actions { display:flex; align-items:center; gap:12px; }
.current-company-tag { padding:7px 10px; border-radius:8px; background:#f3f6fa; color:#68758a; font-size:9px; font-weight:700; }
.icon-button { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:#6a7689; background:white; position:relative; }
.notification-dot { position:absolute; width:7px; height:7px; background:var(--red); border:2px solid white; top:8px; right:8px; border-radius:50%; }
.avatar { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,#dfeaff,#dcd5ff); color:#3e56a5; display:grid; place-items:center; font-weight:800; font-size:12px; }
.user-meta { line-height:1.2; }
.user-meta strong { display:block; font-size:12px; }
.user-meta span { color:#98a2b3; font-size:10px; }
.page { padding:30px 32px 44px; }
.page-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:26px; }
.eyebrow { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:7px; }
.page-heading h1 { margin:0; font:800 28px/1.2 Manrope; letter-spacing:-.8px; }
.page-heading p { margin:7px 0 0; color:var(--muted); font-size:13px; }
.heading-actions { display:flex; gap:9px; }
.secondary-button { background:white; color:#4d596c; border:1px solid var(--line); }
.ghost-button { background:transparent; color:#687386; }

.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.metric-card, .panel { background:white; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 4px 18px rgba(24,43,77,.035); }
.metric-card { padding:20px; }
.metric-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.metric-icon { width:39px; height:39px; display:grid; place-items:center; border-radius:11px; }
.metric-icon.blue { color:var(--blue); background:var(--blue-soft); }
.metric-icon.green { color:var(--green); background:var(--green-soft); }
.metric-icon.orange { color:var(--orange); background:var(--orange-soft); }
.metric-icon.violet { color:var(--violet); background:var(--violet-soft); }
.trend { font-size:10px; font-weight:800; padding:4px 7px; border-radius:8px; color:var(--green); background:var(--green-soft); }
.trend.down { color:var(--red); background:var(--red-soft); }
.metric-label { color:#7a8699; font-size:12px; font-weight:600; }
.metric-value { font:800 27px Manrope; margin:5px 0 2px; letter-spacing:-.7px; }
.metric-foot { color:#a1aaba; font-size:10px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(270px,.75fr); gap:18px; margin-top:18px; }
.panel { padding:21px; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.panel-header h3 { font:800 15px Manrope; margin:0; }
.panel-header p { color:#98a2b3; font-size:10px; margin:4px 0 0; }
.select-compact { border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:white; color:#667085; font-size:10px; }
.chart-wrap { height:255px; position:relative; display:flex; align-items:flex-end; gap:10px; padding:12px 3px 30px; border-bottom:1px solid var(--line); background:repeating-linear-gradient(to bottom,#fff 0,#fff 50px,#eff2f6 51px); }
.bar-group { flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px; position:relative; }
.bar { width:9px; border-radius:5px 5px 0 0; background:#bdd2fa; min-height:5px; }
.bar.revenue { background:var(--blue); }
.bar-label { position:absolute; bottom:-22px; color:#9aa4b4; font-size:9px; }
.legend { display:flex; gap:17px; font-size:10px; color:#7d8797; margin-top:17px; }
.legend span::before { content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:2px; background:var(--blue); }
.legend span:last-child::before { background:#bdd2fa; }
.funnel-list { display:flex; flex-direction:column; gap:13px; }
.funnel-row { display:grid; grid-template-columns:82px 1fr 34px; align-items:center; gap:10px; font-size:11px; }
.funnel-row strong { font-size:10px; }
.progress { height:7px; background:#f0f3f7; border-radius:6px; overflow:hidden; }
.progress span { display:block; height:100%; border-radius:6px; }
.activity-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.activity-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #f0f2f6; }
.activity-item:last-child { border-bottom:0; }
.activity-dot { width:9px; height:9px; border-radius:50%; margin-top:5px; flex:0 0 auto; box-shadow:0 0 0 4px var(--blue-soft); background:var(--blue); }
.activity-copy strong { display:block; font-size:11px; }
.activity-copy span { color:#929cab; font-size:10px; }
.source-row { display:grid; grid-template-columns:90px 1fr 38px; gap:12px; align-items:center; margin:15px 0; font-size:11px; }

.pipeline-summary { display:flex; gap:22px; align-items:center; padding:14px 18px; margin-bottom:18px; }
.pipeline-toolbar { display:flex; align-items:flex-end; gap:12px; padding:14px 16px; margin-bottom:12px; }
.pipeline-toolbar > div:first-child { min-width:260px; }
.pipeline-toolbar label { display:block; color:#8b96a7; font-size:8px; letter-spacing:.6px; font-weight:800; margin-bottom:5px; }
.pipeline-toolbar select { width:100%; border:1px solid #dfe5ed; border-radius:9px; padding:10px 12px; background:white; color:var(--ink); font-weight:700; font-size:11px; }
.opportunity-count { align-self:center; padding:7px 10px; color:var(--blue); background:var(--blue-soft); border-radius:9px; font-size:10px; font-weight:800; }
.pipeline-truncation { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 16px; margin:-2px 0 12px; border-color:#f2d8a8; background:#fffaf0; }
.pipeline-truncation div { display:flex; flex-direction:column; gap:3px; }
.pipeline-truncation strong { color:#8b5a13; font-size:11px; }
.pipeline-truncation span { color:#8c795e; font-size:9px; }
.pipeline-owner { margin-left:auto; align-self:center; color:#8a95a5; font-size:9px; }
.pipeline-owner strong { color:#526074; margin-left:4px; }
.readonly-badge { display:inline-flex; padding:9px 12px; border-radius:9px; color:#69778b; background:#f0f3f7; font-size:10px; font-weight:800; }
.summary-item { padding-right:22px; border-right:1px solid var(--line); }
.summary-item:last-child { border:0; }
.summary-item span { display:block; color:#8b95a5; font-size:10px; }
.summary-item strong { font:800 16px Manrope; }
.pipeline-board { display:grid; grid-template-columns:repeat(6,minmax(230px,1fr)); gap:13px; overflow-x:auto; padding-bottom:14px; }
.stage { background:#f3f5f8; border-radius:14px; padding:11px; min-height:500px; }
.stage { border:2px solid transparent; transition:background .18s,border-color .18s,transform .18s; }
.stage.drag-over { background:#edf4ff; border-color:#8fb5fa; transform:translateY(-2px); }
.stage-dropzone { min-height:390px; }
.stage-head { padding:5px 4px 12px; border-bottom:2px solid var(--stage-color); margin-bottom:11px; }
.stage-title { display:flex; align-items:center; gap:7px; justify-content:space-between; }
.stage-title strong { font-size:12px; }
.stage-title span { min-width:20px; height:20px; display:grid; place-items:center; border-radius:7px; font-size:9px; background:white; color:#778294; }
.stage-value { color:#8993a3; font-size:10px; margin-top:5px; }
.lead-card { background:white; border:1px solid #e7ebf1; border-radius:11px; padding:13px; margin-bottom:9px; box-shadow:0 4px 10px rgba(24,43,77,.035); transition:.2s; }
.lead-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:#c9d9f7; cursor:grab; }
.lead-card:active { cursor:grabbing; }
.lead-card:focus-visible { outline:3px solid #b9cff8; outline-offset:2px; }
.lead-card.dragging { opacity:.42; transform:rotate(1.5deg) scale(.98); }
.lead-card.dragging-pointer { position:fixed; z-index:200; pointer-events:none; opacity:.92; transform:rotate(1.5deg) scale(1.02); box-shadow:0 22px 52px rgba(24,43,77,.22); cursor:grabbing; }
.is-dragging,.is-dragging * { cursor:grabbing !important; user-select:none !important; }
.lead-source { display:inline-flex; border-radius:6px; padding:3px 6px; font-size:8px; font-weight:800; color:#4d6d9f; background:var(--blue-soft); margin-bottom:9px; }
.lead-card h4 { margin:0; font-size:12px; }
.lead-card p { margin:4px 0 10px; color:#909aaa; font-size:9px; }
.lead-value { font:800 13px Manrope; }
.lead-meta { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px solid #f1f3f6; color:#a0a9b7; font-size:8px; }
.mini-avatar { width:22px; height:22px; display:grid; place-items:center; border-radius:7px; background:#e9edff; color:#5365ae; font-weight:800; font-size:8px; }
.add-card { width:100%; border:1px dashed #cfd6df; background:transparent; color:#8792a3; border-radius:9px; padding:9px; font-size:10px; }

.table-panel { padding:0; overflow:hidden; }
.table-toolbar { padding:17px 19px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:15px; }
.filter-chips { display:flex; gap:7px; }
.chip { border:1px solid var(--line); background:white; border-radius:8px; padding:7px 10px; font-size:10px; color:#657185; }
.chip.active { color:var(--blue); border-color:#bed3fa; background:var(--blue-soft); }
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:12px 16px; background:#fafbfc; color:#8e98a8; font-size:9px; letter-spacing:.4px; text-transform:uppercase; }
td { padding:14px 16px; border-top:1px solid #f0f2f5; font-size:11px; }
.lead-table-row { transition:background .15s; cursor:pointer; }
.lead-table-row:hover { background:#f7faff; }
.lead-table-row:focus-visible { outline:2px solid #8fb5fa; outline-offset:-2px; }
.person-cell { display:flex; gap:10px; align-items:center; }
.person-cell strong { display:block; font-size:11px; }
.person-cell span { color:#929cab; font-size:9px; }
.status-pill { display:inline-flex; padding:4px 8px; border-radius:8px; font-size:9px; font-weight:800; }
.status-new { color:var(--blue); background:var(--blue-soft); }
.status-contacted { color:var(--orange); background:var(--orange-soft); }
.status-qualified { color:var(--violet); background:var(--violet-soft); }
.status-won { color:var(--green); background:var(--green-soft); }

.settings-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:-7px 0 18px; }
.settings-tabs button { border:0; border-bottom:2px solid transparent; background:transparent; padding:11px 13px; color:#8691a2; font-size:10px; font-weight:700; }
.settings-tabs button.active { color:var(--blue); border-bottom-color:var(--blue); }
.settings-company-card { padding:18px 20px; display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.company-profile { display:flex; align-items:center; gap:13px; min-width:270px; }
.company-profile h3 { margin:0; font:800 16px Manrope; }
.company-profile p { margin:4px 0 0; color:#8994a5; font-size:9px; }
.company-facts { display:flex; flex:1; gap:10px; }
.company-facts span { min-width:110px; padding:9px 11px; border-left:1px solid var(--line); }
.company-facts small { display:block; color:#99a3b2; font-size:8px; margin-bottom:3px; }
.company-facts strong { display:block; color:#536074; font-size:10px; }
.team-panel { padding:20px 0 0; overflow:hidden; }
.team-panel .panel-header { padding:0 20px; }
.access-legend { display:flex; gap:6px; }
.team-table-wrap { overflow:auto; }
.team-table { min-width:940px; }
.team-table td { vertical-align:middle; }
.team-avatar { width:34px; height:34px; border-radius:10px; }
.role-pill { display:inline-flex; padding:5px 8px; border-radius:7px; font-size:8px; font-weight:800; }
.role-admin { color:#6547cc; background:var(--violet-soft); }
.role-sales { color:#2869d8; background:var(--blue-soft); }
.role-customer { color:#7c6e52; background:#f6f1e7; }
.member-status { display:flex; align-items:center; gap:5px; font-size:9px; font-weight:800; }
.member-status i { width:7px; height:7px; border-radius:50%; background:#a3adba; }
.member-status.active i { background:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.member-status.invited i { background:var(--orange); box-shadow:0 0 0 3px var(--orange-soft); }
.member-status.disabled i { background:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
.last-seen { display:block; color:#9ba5b3; font-size:8px; margin:4px 0 0 12px; }
.company-access-list { display:flex; flex-wrap:wrap; gap:4px; max-width:260px; }
.company-access-list span { padding:4px 6px; border-radius:6px; background:#f1f4f8; color:#6c788a; font-size:8px; }
.permission-copy { color:#6d788a; font-size:9px; font-weight:600; }
.table-action { border:1px solid var(--line); background:white; color:var(--blue); border-radius:7px; padding:6px 9px; font-size:8px; font-weight:800; }
.permission-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }
.permission-card { display:flex; gap:12px; padding:16px; background:white; border:1px solid var(--line); border-radius:13px; }
.permission-card h4 { margin:0 0 5px; font:800 12px Manrope; }
.permission-card p { margin:0; color:#8792a3; font-size:9px; line-height:1.55; }
.role-icon { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; font-weight:800; font-size:11px; }
.role-icon.admin { color:#6547cc; background:var(--violet-soft); }
.role-icon.sales { color:var(--blue); background:var(--blue-soft); }
.role-icon.customer { color:#8f794d; background:#f6f1e7; }
.empty-state { padding:28px; text-align:center; color:#929cab; font-size:10px; }

.contact-view-tabs { display:flex; gap:4px; margin:-8px 0 17px; border-bottom:1px solid var(--line); }
.contact-view-tabs button { padding:10px 13px; border:0; border-bottom:2px solid transparent; background:transparent; color:#8490a2; font-size:10px; font-weight:700; }
.contact-view-tabs button.active { color:var(--blue); border-bottom-color:var(--blue); }
.ghl-leads { overflow:hidden; }
.lead-filter-bar,.lead-advanced-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line); }
.lead-status-filters { display:flex; gap:7px; }
.lead-filter-chip { display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--line); border-radius:9px; color:#6c788a; background:white; font-size:9px; font-weight:800; }
.lead-filter-chip span { min-width:18px; height:18px; display:grid; place-items:center; border-radius:7px; background:#f0f3f7; color:#8792a3; font-size:8px; }
.lead-filter-chip.active { color:var(--blue); border-color:#aac6fa; background:var(--blue-soft); }
.lead-filter-chip.active span { color:white; background:var(--blue); }
.lead-search { width:min(320px,35vw); display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--line); border-radius:9px; color:#8e99a9; }
.lead-search input { width:100%; border:0; outline:0; background:transparent; font-size:10px; }
.lead-search button { width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center; border:0; border-radius:6px; color:#7b8798; background:#eef2f6; }
.lead-advanced-bar { background:#fafbfd; }
.date-filter-group { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.date-filter-group > span,.tag-filter { color:#7f8b9d; font-size:8px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; margin-right:5px; }
.date-filter-button { padding:6px 8px; border:1px solid transparent; border-radius:7px; background:transparent; color:#758195; font-size:8px; font-weight:700; }
.date-filter-button:hover,.date-filter-button.active { color:var(--blue); border-color:#bed2f8; background:white; }
.tag-filter { display:flex; align-items:center; gap:7px; }
.tag-filter select { border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:white; color:#667386; font-size:9px; text-transform:none; }
.custom-date-range { display:flex; align-items:flex-end; gap:10px; padding:11px 16px; background:var(--blue-soft); border-bottom:1px solid #d7e4fb; }
.custom-date-range div label { display:block; color:#71819a; font-size:8px; font-weight:800; margin-bottom:4px; }
.custom-date-range input { border:1px solid #c8d9f6; border-radius:8px; padding:8px 9px; background:white; color:#526075; font-size:9px; }
.custom-date-range > span { padding-bottom:8px; color:#7c8ca5; }
.custom-date-range small { color:#71819a; font-size:8px; padding-bottom:8px; }
.contacts-table-wrap { overflow:auto; }
.contacts-table { min-width:850px; }
.contacts-table th,.contacts-table td { border-right:1px solid #eef1f5; }
.contacts-table th:last-child,.contacts-table td:last-child { border-right:0; }
.contacts-table th { padding-top:13px; padding-bottom:13px; }
.contacts-table td { height:58px; }
.check-column { width:42px; text-align:center; }
.check-column input { width:15px; height:15px; accent-color:var(--blue); }
.contact-avatar { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; color:#3f5f8f; background:#dcecff; font-size:9px; font-weight:800; }
.contact-data { color:#657286; white-space:nowrap; }
.contacts-table time { color:#667386; white-space:nowrap; }
.lead-tags { display:flex; flex-wrap:wrap; gap:4px; min-width:150px; }
.lead-tags span,.lead-tag { display:inline-flex; padding:5px 8px; border-radius:8px; background:#f0f3f7; color:#59677a; font-size:8px; font-weight:700; white-space:nowrap; }
.table-footer { padding:12px 16px; display:flex; justify-content:space-between; align-items:center; color:#7f8b9d; font-size:9px; border-top:1px solid var(--line); }
.table-footer div { display:flex; gap:5px; }
.table-footer button { min-width:32px; height:30px; border:1px solid var(--line); border-radius:7px; background:white; color:#7a8799; font-size:8px; }
.table-footer button.active { color:white; border-color:var(--blue); background:var(--blue); }

.integration-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:23px; margin-bottom:16px; background:linear-gradient(135deg,#fff,#f4f8ff); }
.integration-hero h3 { margin:0 0 7px; font:800 18px Manrope; }
.integration-hero p { max-width:600px; margin:0; color:#7f8a9b; font-size:10px; line-height:1.6; }
.integration-flow { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.integration-flow span { padding:8px 10px; border:1px solid #dce5f2; border-radius:8px; background:white; color:#607087; font-size:8px; font-weight:700; }
.integration-flow b { color:#96a3b5; }
.integration-provider-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.integration-provider-card { padding:22px; background:white; border:1px solid var(--line); border-top:4px solid var(--provider); border-radius:14px; box-shadow:0 4px 18px rgba(24,43,77,.035); }
.provider-head { display:flex; justify-content:space-between; align-items:center; }
.provider-logo { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:white; background:var(--provider,var(--blue)); font:800 16px Manrope; }
.integration-status { display:flex; align-items:center; gap:5px; padding:5px 7px; border-radius:7px; font-size:8px; font-weight:800; }
.integration-status i { width:6px; height:6px; border-radius:50%; }
.integration-status.connected { color:var(--green); background:var(--green-soft); }
.integration-status.connected i { background:var(--green); }
.integration-status.disconnected { color:#7e899a; background:#f1f3f6; }
.integration-status.disconnected i { background:#a6aebb; }
.integration-provider-card h3 { margin:17px 0 7px; font:800 15px Manrope; }
.integration-provider-card > p { min-height:45px; margin:0; color:#818c9d; font-size:9px; line-height:1.55; }
.integration-benefits { display:flex; flex-direction:column; gap:7px; padding:14px; margin:15px 0; border-radius:9px; background:#f7f9fc; color:#637187; font-size:9px; }
.connected-account { padding:13px; margin:15px 0; border-radius:9px; background:var(--green-soft); }
.connected-account small { display:block; color:#638979; font-size:7px; font-weight:800; }
.connected-account strong { display:block; margin:4px 0; color:#38745e; font-size:10px; }
.connected-account span { color:#608174; font-size:8px; line-height:1.5; }
.provider-connect { width:100%; }
.integration-routing { margin-top:16px; }
.routing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.routing-grid > div { padding:13px; border:1px solid var(--line); border-radius:10px; }
.routing-grid span,.routing-grid strong,.routing-grid small { display:block; }
.routing-grid span { color:#8b95a5; font-size:8px; }
.routing-grid strong { margin:5px 0; font-size:10px; }
.routing-grid small { color:#8b95a5; font-size:8px; line-height:1.45; }

.builder-layout { display:grid; grid-template-columns:270px minmax(360px,1fr) 300px; gap:16px; align-items:start; }
.builder-panel { background:white; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.builder-panel-head { padding:16px; border-bottom:1px solid var(--line); }
.builder-panel-head strong { font:800 13px Manrope; }
.builder-panel-head p { font-size:9px; color:#939dac; margin:4px 0 0; }
.builder-body { padding:14px; }
.field-palette { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.palette-item { padding:11px 8px; border:1px solid var(--line); background:white; border-radius:9px; color:#5d697b; font-size:9px; text-align:left; display:flex; align-items:center; gap:7px; }
.palette-item:hover { border-color:#a8c4f8; background:var(--blue-soft); }
.builder-tabs { display:flex; padding:0 14px; border-bottom:1px solid var(--line); }
.builder-tab { padding:12px 9px 10px; border:0; border-bottom:2px solid transparent; background:transparent; color:#8e98a8; font-size:10px; }
.builder-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.form-canvas { padding:26px; background:#f5f7fa; min-height:570px; }
.form-preview-card { width:min(480px,100%); margin:auto; background:white; border-radius:15px; box-shadow:var(--shadow); overflow:hidden; border-top:5px solid var(--form-accent,#377cf6); }
.form-preview-head { padding:25px 25px 16px; }
.form-preview-head h2 { font:800 22px Manrope; margin:0 0 7px; }
.form-preview-head p { color:#7e8999; font-size:11px; line-height:1.5; margin:0; }
.form-preview-body { padding:0 25px 25px; }
.form-row { position:relative; border:1px solid transparent; padding:7px; margin:0 -7px 4px; border-radius:9px; }
.form-row:hover,.form-row.selected { border-color:#b9cff8; background:#f9fbff; }
.form-row label { display:block; font-size:10px; font-weight:700; margin-bottom:6px; }
.form-row input,.form-row textarea,.form-row select { width:100%; border:1px solid #dfe5ed; border-radius:8px; padding:10px; background:white; color:#a0a9b7; font-size:10px; }
.required { color:var(--red); }
.form-submit { width:100%; background:var(--form-accent,#377cf6); color:white; border:0; border-radius:9px; padding:12px; font-weight:800; margin-top:7px; }
.setting-label { font-size:9px; color:#6e7a8c; font-weight:700; display:block; margin:14px 0 6px; }
.setting-input { width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 10px; font-size:10px; }
.color-options { display:flex; gap:8px; }
.color-swatch { width:27px; height:27px; border-radius:8px; border:3px solid white; box-shadow:0 0 0 1px var(--line); }
.color-swatch.active { box-shadow:0 0 0 2px var(--ink); }
.integration-card { background:#f4f7fb; border-radius:9px; padding:12px; margin-top:16px; }
.integration-card strong { display:block; font-size:10px; margin-bottom:4px; }
.integration-card span { color:#8792a3; font-size:9px; line-height:1.5; }
.embed-code { display:block; background:#142033; color:#c6d6ef; padding:10px; border-radius:7px; font:9px/1.5 monospace; margin-top:8px; overflow:hidden; }

.action-metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 16px; }
.action-metric { min-width:0; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:white; box-shadow:0 3px 13px rgba(26,43,71,.03); }
.action-metric > span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--blue); background:var(--blue-soft); font-weight:800; }
.action-metric.overdue > span { color:var(--red); background:var(--red-soft); }
.action-metric strong,.action-metric small { display:block; }
.action-metric strong { font:800 17px Manrope; }
.action-metric small { color:#8b96a6; font-size:8px; }
.action-metric button { padding:6px 8px; border:0; border-radius:7px; color:var(--blue); background:var(--blue-soft); font-size:8px; font-weight:800; }

.notification-wrap { position:relative; }
.notification-count { position:absolute; right:-4px; top:-4px; min-width:16px; height:16px; padding:0 4px; display:grid; place-items:center; border:2px solid white; border-radius:9px; color:white; background:var(--red); font-size:7px; font-weight:800; }
.notification-menu { position:absolute; z-index:70; right:0; top:47px; width:350px; border:1px solid var(--line); border-radius:13px; background:white; box-shadow:0 20px 50px rgba(22,36,58,.18); overflow:hidden; }
.notification-menu-head { display:flex; justify-content:space-between; align-items:center; padding:15px; border-bottom:1px solid var(--line); }
.notification-menu-head strong,.notification-menu-head span { display:block; }
.notification-menu-head strong { font:800 13px Manrope; }
.notification-menu-head span { margin-top:2px; color:#8c97a7; font-size:8px; }
.notification-menu-head button { border:0; color:var(--blue); background:transparent; font-size:8px; font-weight:800; }
.notification-list { max-height:380px; overflow:auto; }
.notification-item { width:100%; display:grid; grid-template-columns:8px 1fr; gap:9px; padding:12px 15px; border:0; border-bottom:1px solid #f0f2f6; background:white; text-align:left; }
.notification-item:hover { background:#f8faff; }
.notification-item i { width:7px; height:7px; margin-top:5px; border-radius:50%; background:#c7ced8; }
.notification-item.unread i { background:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.notification-item strong,.notification-item small,.notification-item time { display:block; }
.notification-item strong { font-size:9px; }
.notification-item small { margin:3px 0; color:#7c889a; font-size:8px; line-height:1.4; }
.notification-item time { color:#a0a9b6; font-size:7px; }

.lead-next { min-height:28px; margin:8px 0; padding:7px; border-radius:7px; color:#6c7890; background:#f5f7fa; font-size:8px; line-height:1.35; }
.linked-opportunities { display:inline-flex; margin-top:8px; padding:4px 6px; border-radius:6px; color:#5b46b0; background:var(--violet-soft); font-size:7px; font-weight:800; }
.advanced-selects { display:flex; align-items:center; gap:12px; }
.bulk-action-bar { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid #cfe0fb; background:var(--blue-soft); }
.bulk-action-bar > strong { min-width:75px; color:#315f9e; font-size:9px; }
.bulk-action-bar label { display:flex; align-items:center; gap:6px; color:#657892; font-size:8px; font-weight:800; }
.bulk-action-bar select { min-width:110px; padding:7px 8px; border:1px solid #c5d7f4; border-radius:7px; background:white; color:#5d6b7f; font-size:8px; }
.bulk-action-bar button { min-height:31px; padding:7px 10px; font-size:8px; }
.danger-button { color:var(--red) !important; border-color:#efc2c8 !important; }
.danger-button-solid { border-color:var(--red) !important; background:var(--red) !important; }
.danger-text { color:var(--red); }
.lead-table-row.unseen { background:#fbfdff; }
.lead-table-row.unseen strong { color:#1f64d5; }
.person-cell > div small { display:block; margin-top:3px; color:#929cab; font-size:8px; font-weight:500; }
.new-record-dot { width:7px; height:7px; margin-left:auto; border-radius:50%; background:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }

.task-summary-grid,.security-metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.task-summary-grid article,.security-metric-grid article { padding:17px; border:1px solid var(--line); border-radius:12px; background:white; }
.task-summary-grid span,.task-summary-grid strong,.task-summary-grid small,.security-metric-grid span,.security-metric-grid strong,.security-metric-grid small { display:block; }
.task-summary-grid span,.security-metric-grid span { color:#8b96a6; font-size:7px; font-weight:800; letter-spacing:.6px; }
.task-summary-grid strong,.security-metric-grid strong { margin:7px 0 3px; font:800 21px Manrope; }
.task-summary-grid small,.security-metric-grid small { color:#8b96a6; font-size:8px; }
.task-summary-grid .danger strong { color:var(--red); }
.tasks-table,.audit-table { width:100%; min-width:850px; border-collapse:collapse; }
.tasks-table th,.tasks-table td,.audit-table th,.audit-table td { padding:13px 15px; border-bottom:1px solid var(--line); text-align:left; font-size:9px; }
.tasks-table th,.audit-table th { color:#8792a3; background:#fafbfd; font-size:8px; text-transform:uppercase; letter-spacing:.4px; }
.tasks-table td small { display:block; margin-top:3px; color:#909bab; font-size:8px; }
.tasks-table input { accent-color:var(--blue); }
.task-title-button { display:flex; flex-direction:column; gap:3px; border:0; background:transparent; text-align:left; }
.task-title-button strong { color:var(--ink); font-size:9px; }
.task-title-button span { color:var(--blue); font-size:8px; }
.task-overdue { background:#fffafb; }
.overdue-label { display:inline-flex; margin-top:4px; padding:3px 5px; border-radius:5px; color:var(--red); background:var(--red-soft); font-size:7px; font-weight:800; }
.priority-pill { display:inline-flex; padding:5px 7px; border-radius:7px; font-size:7px; font-weight:800; }
.priority-pill.high { color:var(--red); background:var(--red-soft); }
.priority-pill.medium { color:#9a681d; background:var(--orange-soft); }
.priority-pill.low { color:#4f718c; background:#eef4f7; }

.lead-drawer.wide-drawer { width:min(920px,100%); }
.record-type-line { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.record-type-line span { padding:4px 6px; border-radius:5px; color:var(--blue); background:var(--blue-soft); font-size:7px; font-weight:800; }
.record-type-line b { color:#a0a9b7; }
.contact-link-card { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:14px; margin-bottom:20px; border:1px solid #d6e4fa; border-radius:11px; background:#f8fbff; }
.contact-link-card > div { display:flex; align-items:center; gap:10px; }
.contact-link-card small,.contact-link-card strong,.contact-link-card p { display:block; margin:0; }
.contact-link-card small { color:#7c8ca5; font-size:7px; font-weight:800; }
.contact-link-card strong { margin:3px 0; font-size:10px; }
.contact-link-card p { color:#8895a6; font-size:8px; }
.duplicate-safe { padding:7px 9px; border-radius:8px; color:var(--green); background:var(--green-soft); font-size:8px; font-weight:800; }
.record-workspace { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }
.record-workspace > section { min-width:0; padding:17px; border:1px solid var(--line); border-radius:12px; }
.record-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:13px; }
.record-section-head h3 { margin:0; font:800 13px Manrope; }
.record-section-head p { margin:3px 0 0; color:#8f99a8; font-size:8px; }
.record-section-head button { min-height:28px; padding:6px 8px; font-size:8px; }
.timeline-item { display:grid; grid-template-columns:29px 1fr; gap:10px; position:relative; padding:0 0 15px; }
.timeline-item > span { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:var(--blue); background:var(--blue-soft); font-size:9px; font-weight:800; }
.timeline-item:not(:last-of-type)::after { content:""; position:absolute; left:13px; top:31px; bottom:3px; width:1px; background:var(--line); }
.timeline-item strong,.timeline-item p,.timeline-item small { display:block; }
.timeline-item strong { font-size:9px; }
.timeline-item p { margin:3px 0; color:#748195; font-size:8px; line-height:1.4; }
.timeline-item small { color:#9ba5b3; font-size:7px; }
.timeline-item.type-note > span { color:#7357e8; background:var(--violet-soft); }
.timeline-item.type-task > span { color:var(--green); background:var(--green-soft); }
.quick-note { display:grid; grid-template-columns:1fr auto; gap:7px; margin-top:5px; }
.quick-note textarea { min-height:58px; resize:vertical; padding:9px; border:1px solid var(--line); border-radius:8px; font:9px Inter; }
.quick-note button { align-self:end; min-height:34px; padding:8px 10px; font-size:8px; }
.drawer-task { display:grid; grid-template-columns:16px 1fr auto; gap:8px; align-items:start; padding:10px 0; border-bottom:1px solid #edf0f4; }
.drawer-task input { margin-top:2px; accent-color:var(--green); }
.drawer-task strong,.drawer-task small { display:block; }
.drawer-task strong { font-size:8px; }
.drawer-task small { margin-top:3px; color:#8c97a7; font-size:7px; line-height:1.4; }
.drawer-task b { padding:4px 5px; border-radius:5px; color:#6f7c90; background:#f1f4f7; font-size:6px; }
.drawer-task.completed { opacity:.55; }
.drawer-task.completed strong { text-decoration:line-through; }
.drawer-task.overdue:not(.completed) strong { color:var(--red); }

.security-checklist { display:flex; flex-direction:column; gap:6px; padding:12px; margin-top:15px; border-radius:9px; color:#607087; background:#f5f8fc; font-size:8px; }
.security-checklist strong { margin-bottom:3px; color:var(--ink); font-size:9px; }
.consent-preview { display:flex; gap:8px; align-items:flex-start; margin:8px 0; color:#6e7a8d; font-size:8px; line-height:1.5; }
.consent-preview input { margin-top:1px; }
.form-security-note { padding:8px; border-radius:7px; color:#668477; background:var(--green-soft); font-size:7px; text-align:center; }
.success-preview { width:min(480px,100%); margin:14px auto 0; padding:12px; border:1px dashed #cdd6e2; border-radius:10px; color:#7d899a; background:#fbfcfd; font-size:8px; }
.success-preview strong,.success-preview span { display:block; }
.success-preview strong { margin-bottom:3px; color:#566377; }
.toggle-list { display:flex; flex-direction:column; gap:7px; margin:14px 0; }
.toggle-list label { display:flex; align-items:center; gap:8px; color:#657286; font-size:8px; font-weight:700; }
.toggle-list input { accent-color:var(--blue); }
.publish-status { display:inline-flex; align-items:center; padding:7px 9px; border-radius:8px; font-size:8px; font-weight:800; }
.publish-status.draft { color:#8b6b32; background:var(--orange-soft); }
.publish-status.published { color:var(--green); background:var(--green-soft); }

.company-detail-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:16px; margin-bottom:16px; }
.company-identity-card { display:flex; align-items:center; gap:16px; padding:24px; }
.company-identity-card h2 { margin:3px 0; font:800 21px Manrope; }
.company-identity-card p { margin:0; color:#8994a4; font-size:9px; }
.company-logo.xlarge { width:58px; height:58px; font-size:14px; }
.detail-list { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:8px 20px; }
.detail-list > div { padding:13px 0; border-bottom:1px solid var(--line); }
.detail-list span,.detail-list strong { display:block; }
.detail-list span { color:#8d98a8; font-size:8px; }
.detail-list strong { margin-top:4px; font-size:9px; }
.tenant-card { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px; }
.tenant-card h3 { margin:5px 0; font:800 15px Manrope; }
.tenant-card p { max-width:750px; margin:0; color:#7e899a; font-size:9px; line-height:1.6; }
.security-list { padding:18px; }
.security-row { display:grid; grid-template-columns:28px 1fr; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.security-row > span { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; color:var(--blue); background:var(--blue-soft); font-size:8px; font-weight:800; }
.security-row strong,.security-row small { display:block; }
.security-row strong { font-size:9px; }
.security-row small { margin-top:3px; color:#8a95a5; font-size:8px; line-height:1.4; }
.security-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.security-form-card { display:flex; flex-direction:column; min-width:0; padding:22px; }
.security-form-head { display:flex; align-items:flex-start; gap:13px; margin-bottom:20px; }
.security-form-head h3 { margin:0; font:800 15px Manrope; }
.security-form-head p { margin:5px 0 0; color:#8792a3; font-size:9px; line-height:1.5; }
.security-action-icon { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:11px; color:var(--blue); background:var(--blue-soft); font-size:9px; font-weight:800; }
.security-action-icon.warning { color:#a56b19; background:var(--orange-soft); }
.security-action-icon.locked { color:#69768a; background:#eef1f5; }
.security-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.security-field-grid .field { min-width:0; }
.security-field-help { display:block; margin:-7px 0 18px; color:#8a95a5; font-size:8px; line-height:1.5; }
.security-form-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:16px; margin-top:auto; border-top:1px solid var(--line); }
.security-form-footer > span { color:#8c97a7; font-size:8px; }
.security-form-footer button { min-height:38px; font-size:9px; }
.security-form-footer button:disabled { opacity:.6; cursor:wait; box-shadow:none; }
.security-warning,.security-lock-message { display:flex; flex-direction:column; gap:4px; padding:12px 13px; margin:-2px 0 18px; border-radius:9px; }
.security-warning { border:1px solid #f0d5a8; color:#846329; background:#fff9ed; }
.security-warning strong,.security-lock-message strong { font-size:9px; }
.security-warning span,.security-lock-message span { font-size:8px; line-height:1.5; }
.security-lock-message { color:#69768a; background:#f2f4f7; }
.security-locked-card { min-height:255px; }
.audit-table time { white-space:nowrap; }

.import-drop { padding:18px; margin-bottom:18px; border:1px dashed #b8c9e2; border-radius:11px; background:#f8fbff; text-align:center; }
.import-drop strong,.import-drop span { display:block; }
.import-drop strong { font-size:10px; }
.import-drop span { margin:5px 0 12px; color:#8290a3; font-size:8px; }
.import-drop input { max-width:100%; font-size:8px; }
.delete-warning { padding:16px; border:1px solid #f0c8cd; border-radius:10px; color:#8f4e57; background:var(--red-soft); }
.delete-warning strong,.delete-warning span { display:block; }
.delete-warning strong { font-size:10px; }
.delete-warning span { margin-top:5px; font-size:8px; line-height:1.5; }

.hidden { display:none !important; }
.mobile-menu { display:none; }
.toast { position:fixed; right:24px; bottom:24px; background:#17263d; color:white; padding:13px 17px; border-radius:10px; box-shadow:var(--shadow); font-size:11px; z-index:50; animation:toastIn .25s ease; }
.modal-open { overflow:hidden; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:flex; justify-content:flex-end; background:rgba(13,24,42,.38); backdrop-filter:blur(3px); animation:fadeIn .18s ease; }
.lead-drawer { width:min(620px,100%); height:100%; background:white; box-shadow:-18px 0 54px rgba(21,36,59,.16); display:flex; flex-direction:column; animation:drawerIn .25s ease; overflow:hidden; }
.lead-drawer.compact-drawer { width:min(540px,100%); }
.drawer-header { padding:28px 30px 22px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.drawer-header h2 { margin:0; font:800 25px/1.2 Manrope; letter-spacing:-.6px; }
.drawer-header p { margin:6px 0 0; color:var(--muted); font-size:11px; }
.modal-close { width:38px; height:38px; flex:0 0 auto; border:1px solid var(--line); background:white; border-radius:10px; color:#788396; font-size:24px; line-height:1; }
.modal-close:hover { background:#f5f7fa; color:var(--ink); }
.lead-drawer form { min-height:0; flex:1; display:flex; flex-direction:column; }
.drawer-fieldset { min-width:0; min-height:0; flex:1; display:flex; flex-direction:column; padding:0; margin:0; border:0; }
.drawer-fieldset:disabled { opacity:1; }
.drawer-body { flex:1; overflow-y:auto; padding:25px 30px; }
.form-section { padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.form-section-title { font:800 12px Manrope; margin-bottom:15px; }
.modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 15px; }
.modal-grid .field.wide { grid-column:1/-1; }
.lead-drawer .field { margin-bottom:14px; }
.lead-drawer .field label { font-size:9px; letter-spacing:.45px; }
.lead-drawer .field input,.lead-drawer .field select,.lead-drawer .field textarea { font-size:11px; }
.drawer-footer { border-top:1px solid var(--line); padding:17px 30px; display:flex; justify-content:flex-end; gap:9px; background:#fbfcfd; }
.creation-note { display:flex; gap:12px; padding:14px; background:var(--blue-soft); border-radius:10px; color:#4d6590; }
.creation-note > span { width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; color:white; background:var(--blue); border-radius:8px; font-weight:800; }
.creation-note strong { display:block; font-size:10px; }
.creation-note p { margin:3px 0 0; font-size:9px; line-height:1.45; }
.record-meta { display:flex; flex-wrap:wrap; gap:8px; }
.record-meta span { padding:8px 10px; border:1px solid var(--line); border-radius:8px; color:#8b95a5; font-size:9px; }
.record-meta strong { color:#526074; margin-left:4px; }
.readonly-notice { padding:11px 13px; margin-bottom:18px; border-radius:9px; color:#775e28; background:#fff6df; font-size:9px; line-height:1.5; }
.section-help { margin:-8px 0 13px; color:#8d98a8; font-size:9px; }
.company-check-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.company-check { display:grid; grid-template-columns:17px 29px 1fr; gap:8px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.company-check:has(input:checked) { border-color:#a8c4f8; background:var(--blue-soft); }
.company-check input { accent-color:var(--blue); }
.company-check strong { display:block; font-size:9px; }
.company-check small { display:block; color:#929cab; font-size:8px; margin-top:2px; }
.role-preview { padding:13px; border-radius:9px; background:#f5f7fa; }
.role-preview strong { display:block; font-size:10px; margin-bottom:4px; }
.role-preview span { color:#7d8899; font-size:9px; line-height:1.5; }
.role-preview.role-admin { background:var(--violet-soft); }
.role-preview.role-sales { background:var(--blue-soft); }
.role-preview.role-customer { background:#f6f1e7; }
.tag-editor { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.tag-check { cursor:pointer; }
.tag-check input { position:absolute; opacity:0; pointer-events:none; }
.tag-check span { display:inline-flex; padding:6px 9px; border:1px solid var(--line); border-radius:8px; color:#6b788b; background:white; font-size:8px; font-weight:700; }
.tag-check input:checked + span { color:var(--blue); border-color:#a9c5f8; background:var(--blue-soft); }
.oauth-provider { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; padding:14px; margin-bottom:22px; border:1px solid var(--line); border-radius:11px; background:#f8fafc; }
.oauth-provider.meta { --provider:#1877f2; }
.oauth-provider.google { --provider:#34a853; }
.oauth-provider strong { display:block; font-size:10px; }
.oauth-provider p { margin:4px 0 0; color:#8490a2; font-size:8px; line-height:1.45; }
.oauth-provider > span:last-child { color:var(--provider); font-size:8px; font-weight:800; }
.routing-preview { display:flex; align-items:center; justify-content:center; gap:9px; padding:14px; border-radius:9px; background:#f5f7fa; color:#68758a; font-size:8px; }
.integration-consent { display:flex; align-items:flex-start; gap:9px; padding:12px; border:1px solid var(--line); border-radius:9px; color:#728095; font-size:8px; line-height:1.5; }
.integration-consent input { margin-top:2px; accent-color:var(--blue); }
@keyframes toastIn { from { opacity:0; transform:translateY(10px); } }
@keyframes fadeIn { from { opacity:0; } }
@keyframes drawerIn { from { transform:translateX(28px); opacity:.6; } }

@media (max-width:1100px) {
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .action-metric-grid,.task-summary-grid,.security-metric-grid { grid-template-columns:repeat(2,1fr); }
  .builder-layout { grid-template-columns:220px 1fr; }
  .builder-settings { grid-column:1/-1; }
  .company-facts { display:none; }
  .permission-grid { grid-template-columns:1fr; }
  .integration-provider-grid { grid-template-columns:1fr; }
  .integration-flow { display:none; }
}
@media (max-width:820px) {
  .login-shell { grid-template-columns:1fr; }
  .login-story { display:none; }
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; transform:translateX(-100%); transition:.25s; width:244px; box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  .mobile-menu { display:grid; }
  .topbar { padding:0 18px; }
  .user-meta { display:none; }
  .page { padding:24px 18px; }
  .dashboard-grid,.activity-grid { grid-template-columns:1fr; }
  .builder-layout { grid-template-columns:1fr; }
  .builder-palette,.builder-settings { grid-column:auto; }
  .table-panel { overflow:auto; }
  table { min-width:720px; }
  .current-company-tag { display:none; }
  .pipeline-toolbar { align-items:stretch; flex-wrap:wrap; }
  .pipeline-toolbar > div:first-child { min-width:100%; }
  .pipeline-owner { margin-left:0; }
  .settings-company-card { align-items:flex-start; flex-wrap:wrap; }
  .lead-filter-bar,.lead-advanced-bar { align-items:flex-start; flex-direction:column; }
  .lead-search { width:100%; }
  .routing-grid { grid-template-columns:1fr; }
  .bulk-action-bar { align-items:flex-start; flex-wrap:wrap; }
  .record-workspace,.company-detail-grid { grid-template-columns:1fr; }
  .security-action-grid { grid-template-columns:1fr; }
  .advanced-selects { width:100%; justify-content:space-between; }
}
@media (max-width:560px) {
  .metric-grid { grid-template-columns:1fr; }
  .action-metric-grid,.task-summary-grid,.security-metric-grid { grid-template-columns:1fr; }
  .page-heading { flex-direction:column; }
  .heading-actions { width:100%; }
  .heading-actions button { flex:1; }
  .search-box { display:none; }
  .login-panel { padding:26px; }
  .access-step { font-size:10px; }
  .drawer-header,.drawer-body,.drawer-footer { padding-left:20px; padding-right:20px; }
  .modal-grid { grid-template-columns:1fr; }
  .company-check-grid { grid-template-columns:1fr; }
  .security-field-grid { grid-template-columns:1fr; gap:0; }
  .security-form-footer { align-items:stretch; flex-direction:column; }
  .settings-tabs { overflow:auto; }
  .lead-status-filters,.date-filter-group { width:100%; overflow:auto; flex-wrap:nowrap; }
  .custom-date-range { align-items:stretch; flex-direction:column; }
  .custom-date-range > span { display:none; }
  .notification-menu { position:fixed; left:12px; right:12px; top:68px; width:auto; }
  .detail-list { grid-template-columns:1fr; }
  .tenant-card { align-items:flex-start; flex-direction:column; }
  .advanced-selects { align-items:flex-start; flex-direction:column; }
}

/* === V1.1 polish: micro-interactions, motion, perceived speed ============ */
.nav-item,.primary-button,.secondary-button,.google-button,.palette-item,.company-menu-item,.company-switch-button,.table-action,.integration-provider-card,.action-metric,.panel,.permission-card,.lead-table-row,.lead-card,.metric-card,.color-swatch,.status-pill{transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease,opacity .16s ease}
.primary-button:hover,.secondary-button:hover,.google-button:hover{transform:translateY(-1px)}
.primary-button:active,.secondary-button:active,.google-button:active{transform:translateY(0) scale(.98)}
.nav-item:hover{transform:translateX(3px)}
.company-menu-item:hover,.palette-item:hover{transform:translateX(2px)}
.integration-provider-card:hover,.action-metric:hover,.permission-card:hover,.metric-card:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 12px 30px rgba(23,32,46,.10)}
.lead-card:hover{transform:translateY(-2px) scale(1.012);box-shadow:0 10px 24px rgba(23,32,46,.12)}
.lead-table-row{cursor:pointer}
.lead-table-row:hover{background:#f5f8ff}
.color-swatch:hover{transform:scale(1.15)}
.modal-backdrop{animation:nvFade .18s ease}
.modal-backdrop .lead-drawer{animation:nvRise .22s cubic-bezier(.2,.8,.3,1)}
@keyframes nvFade{from{opacity:0}to{opacity:1}}
@keyframes nvRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.main-area{transition:opacity .2s ease}
body.nv-busy .main-area{opacity:.45;pointer-events:none}
body.nv-busy{cursor:progress}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* === V1.1b: unified control styling ===================================== */
.primary-button,.secondary-button,.google-button,.table-action,.form-submit,.login-submit{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-align:center;border-radius:10px;font-weight:600;line-height:1.2}
.primary-button,.secondary-button{min-height:38px;padding:8px 18px}
.google-button{min-height:44px}
.table-action{min-height:30px;padding:4px 12px}
.drawer-footer{display:flex;justify-content:center;gap:12px;align-items:center}
.drawer-footer .primary-button{min-width:180px}
.contact__form button[type=submit],.form-submit{width:100%}
.field label,.setting-label{letter-spacing:.04em}
.panel{border-radius:14px}
.integration-provider-card,.action-metric,.permission-card,.metric-card{border-radius:14px}
.reviewer-access summary::-webkit-details-marker{display:none}

/* === Smart Automations ================================================== */
.automation-grid{display:grid;gap:16px;max-width:620px}
.automation-card{padding:22px}
.automation-head{display:flex;align-items:flex-start;gap:14px}
.automation-icon{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#eef2ff;color:#3b5bdb}
.automation-icon svg{width:22px;height:22px}
.automation-title{flex:1}
.automation-title h3{margin:0 0 3px;font-size:17px}
.automation-title p{margin:0;font-size:13px;color:#66707d;line-height:1.5}
.automation-helper{margin:16px 0 0;font-size:13px;color:#66707d}
.automation-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.wiz-preview,.wiz-inserts{margin-top:14px;background:#f6f8fb;border-radius:10px;padding:12px 14px}
.wiz-preview small,.wiz-inserts small,.wiz-review small{display:block;font-size:10px;letter-spacing:.06em;color:#8a94a2;margin-bottom:5px}
.wiz-preview strong{font-size:15px}
.wiz-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.wiz-review{background:#f6f8fb;border-radius:12px;padding:16px;display:grid;gap:12px;margin-bottom:16px}
.wiz-review>div>small{display:block;font-size:10px;letter-spacing:.06em;color:#8a94a2;margin-bottom:2px}
.wiz-review-body{border-top:1px solid #e5e9f0;padding-top:12px;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.55;color:#2b3440}
#wiz-test-state{display:block;margin-top:8px;color:#3b5bdb}
@media (max-width:560px){.automation-actions{flex-direction:column}.automation-actions button{width:100%}.drawer-footer{flex-direction:column-reverse}.drawer-footer button{width:100%}}

/* === Follow-Up wizard: send-after choice ================================ */
.wiz-radio-group{display:flex;flex-direction:column;gap:10px}
.wiz-radio{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border:1.5px solid #e5e9f0;border-radius:12px;background:#fff;cursor:pointer;font-size:15px;color:#2b3440;transition:border-color .15s ease,background .15s ease}
.wiz-radio:hover{border-color:#c3ccd9}
.wiz-radio.active{border-color:#3b5bdb;background:#f5f8ff}
.wiz-radio-dot{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid #c3ccd9;position:relative}
.wiz-radio.active .wiz-radio-dot{border-color:#3b5bdb}
.wiz-radio.active .wiz-radio-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#3b5bdb}

/* === Site Surveys ======================================================= */
.survey-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-top:16px}
.survey-card{cursor:pointer;padding:18px}
.survey-card-top{display:flex;justify-content:space-between;gap:12px}
.survey-ref{font-size:11px;letter-spacing:.04em;color:#3b5bdb;font-weight:600}
.survey-card h3{margin:3px 0 2px;font-size:16px}
.survey-card p{margin:0;font-size:13px;color:#66707d}
.survey-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:#8a94a2;margin:12px 0}
.survey-critical{color:#b02a37;font-weight:600}
.survey-card .primary-button{width:100%}

/* Wizard / review modal — full-screen on mobile, sheet on desktop */
.survey-modal{align-items:stretch}
.survey-wizard{background:#fff;width:100%;max-width:560px;margin:auto;border-radius:16px;display:flex;flex-direction:column;max-height:92vh;overflow:hidden}
.sw-scroll{overflow-y:auto;padding:20px 22px;flex:1}
.sw-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.sw-head h2{margin:2px 0 0;font-size:20px}
.sw-hint{font-size:13px;color:#66707d;background:#f6f8fb;padding:9px 12px;border-radius:8px;margin:0 0 14px}
.sw-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.survey-wizard .field{margin-bottom:14px}
.survey-wizard label{display:block;font-size:12px;font-weight:600;color:#66707d;margin-bottom:5px}
.survey-wizard input,.survey-wizard select,.survey-wizard textarea{width:100%;padding:11px 12px;border:1.5px solid #e5e9f0;border-radius:10px;font-size:15px}
.sw-check{display:flex;gap:10px;align-items:flex-start;background:#f5f8ff;border:1.5px solid #dce4fb;border-radius:10px;padding:12px;font-size:14px;cursor:pointer}
.sw-check input{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.sw-warn label{color:#b02a37}
.sw-radio-row{display:flex;gap:8px;flex-wrap:wrap}
.sw-pill{padding:9px 16px;border:1.5px solid #e5e9f0;border-radius:20px;background:#fff;font-size:14px;cursor:pointer}
.sw-pill.active{border-color:#3b5bdb;background:#f5f8ff;color:#3b5bdb;font-weight:600}
.sw-photo-btn{display:block;text-align:center;padding:16px;border:2px dashed #c3ccd9;border-radius:12px;color:#3b5bdb;font-weight:600;cursor:pointer;margin-bottom:14px}
.sw-photos,.rev-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.sw-photo,.rev-photo{position:relative}
.sw-photo img,.rev-photo img{width:100%;height:80px;object-fit:cover;border-radius:8px}
.sw-photo span,.rev-photo span{display:block;font-size:9px;color:#66707d;margin-top:2px}
.sw-photo-del{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer}
.sw-problem{display:grid;grid-template-columns:1fr auto 1fr auto;gap:6px;margin-bottom:8px;align-items:center}
.survey-actions{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid #eef1f5;background:#fff;position:sticky;bottom:0;flex-wrap:wrap}
.survey-actions .primary-button,.survey-actions .secondary-button{flex:1;min-height:44px}
.sw-save{flex:0 0 auto;font-size:12px;color:#3b5bdb;min-width:60px;text-align:center}
.sw-missing{background:#fff4f4;border:1px solid #f3c2c2;border-radius:10px;padding:12px 14px;margin-top:14px;color:#8a2a33;font-size:14px}
.sw-missing ul{margin:6px 0 0;padding-left:18px}
.sw-ready{background:#eefaf3;border:1px solid #bfe6d0;border-radius:10px;padding:12px 14px;margin-top:14px;color:#177a4c}
.sw-review{display:grid;gap:10px;margin-bottom:6px}
.sw-review>div>small,.rev-row small,.send-summary small{display:block;font-size:10px;letter-spacing:.05em;color:#8a94a2}
.sw-safe{background:#f5f8ff;border-radius:8px;padding:10px 12px;color:#3b5bdb;font-weight:500}
.survey-review h3{font-size:13px;color:#17202e;border-bottom:1px solid #eef1f5;padding-bottom:5px;margin:18px 0 8px}
.rev-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:14px}
.rev-detail{font-size:14px;color:#2b3440;line-height:1.5}
.rev-probs{margin:0;padding-left:18px}
.rev-critical{color:#b02a37;font-weight:600}
.rev-feedback{background:#fff9ec;border:1px solid #f3e2b8;border-radius:10px;padding:10px 12px;margin-bottom:8px}
.rec-box{display:flex;flex-wrap:wrap;gap:6px;border:1.5px solid #e5e9f0;border-radius:10px;padding:7px}
.rec-box input{border:none;flex:1;min-width:120px;padding:4px}
.rec-chip{display:inline-flex;align-items:center;gap:5px;background:#eef2ff;color:#3b5bdb;border-radius:14px;padding:3px 6px 3px 10px;font-size:13px}
.rec-chip button{border:none;background:none;color:#3b5bdb;cursor:pointer;font-size:14px}
.send-attach,.send-summary{background:#f6f8fb;border-radius:8px;padding:10px 12px;font-size:13px;margin-top:6px}
.send-summary{display:grid;gap:8px}
.danger-button{color:#b02a37}
@media (max-width:560px){.survey-wizard{max-width:100%;max-height:100vh;height:100vh;border-radius:0;margin:0}.sw-grid3{grid-template-columns:1fr}.survey-grid{grid-template-columns:1fr}.survey-actions .primary-button,.survey-actions .secondary-button{min-height:48px}}

/* === Site Surveys Milestone 2 =========================================== */
.sw-mat{display:grid;grid-template-columns:1fr 60px 80px auto auto;gap:6px;align-items:center;margin-bottom:8px}
.sw-mat-pdf{display:flex;align-items:center;gap:4px;font-size:11px!important;color:#66707d;margin:0!important}
.sw-mat-pdf input{width:16px!important;height:16px}
.sw-total{display:flex;justify-content:space-between;align-items:center;background:#f5f8ff;border-radius:10px;padding:12px 14px;margin-top:14px}
.sw-total strong{font-size:18px;color:#17202e}
.sw-check-row{display:flex;flex-wrap:wrap;gap:8px}
.sw-mini-check{display:inline-flex;align-items:center;gap:6px;font-size:13px!important;color:#2b3440;background:#f6f8fb;border-radius:8px;padding:6px 10px;margin:0!important;cursor:pointer}
.sw-mini-check input{width:16px;height:16px}
.sw-small{font-size:12px;padding:6px 10px}
.sw-note{font-size:11px;color:#8a94a2;margin-top:12px;font-style:italic}
.survey-dash-panel .activity-item{cursor:pointer}
.survey-dash-stats{display:flex;flex-wrap:wrap;gap:16px;margin:10px 0 14px;font-size:13px;color:#66707d}
.survey-dash-stats strong{color:#17202e;font-size:16px;margin-right:4px}

/* === Site Surveys M3: photo list, star, settings ======================== */
.sw-photo-list{display:flex;flex-direction:column;gap:10px}
.sw-photo-row{display:flex;gap:10px;align-items:center;background:#f6f8fb;border-radius:10px;padding:8px}
.sw-photo-row img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.sw-photo-info{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.sw-photo-cap{width:100%;padding:7px 9px!important;font-size:13px!important}
.sw-photo-ctrls{display:flex;gap:6px}
.sw-photo-ctrls button{width:30px;height:30px;border:1px solid #e5e9f0;border-radius:8px;background:#fff;cursor:pointer;font-size:14px}
.sw-photo-ctrls button:disabled{opacity:.35;cursor:default}
.sw-star{color:#c3ccd9}
.sw-star.on{color:#f5a623;border-color:#f5cd8a!important;background:#fff8ee!important}

/* === Inline lead assignment ============================================= */
.assign-cell{min-width:120px}
.quick-assign{max-width:150px;padding:5px 8px;border:1.5px solid #e5e9f0;border-radius:8px;font-size:12px;background:#fff;color:#2b3440;cursor:pointer}
.quick-assign:hover{border-color:#c3ccd9}

/* === ROI by lead source ================================================= */
.roi-table{display:flex;flex-direction:column}
.roi-row{display:grid;grid-template-columns:1.6fr .7fr .7fr 1.1fr .8fr;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #eef1f5;font-size:13px}
.roi-row:last-child{border-bottom:none}
.roi-head{font-size:10px;letter-spacing:.05em;color:#8a94a2;text-transform:uppercase;border-bottom:1px solid #e5e9f0}
.roi-src{font-weight:600;color:#17202e}
.roi-rev{font-weight:600}
.roi-conv{text-align:right;color:#8a94a2}
.roi-conv.good{color:#177a4c;font-weight:600}

/* === Content collaboration (internal) =================================== */
.cmt{border:1px solid var(--line,#e5e9f0);border-radius:10px;padding:9px 11px;margin-bottom:7px;font-size:14px}
.cmt.team{background:#f5f8ff;border-color:#dbe4fb}
.cmt .who{font-weight:600;font-size:11px;color:#66707d;margin-bottom:2px}
.survey-review h3{font-size:13px;color:#17202e;border-bottom:1px solid #eef1f5;padding-bottom:5px;margin:18px 0 8px}

/* === Content (simplified client approvals) ============================== */
.content-media-box{margin:12px 0}
.content-preview{width:100%;max-height:420px;object-fit:contain;border-radius:12px;background:#000;display:block}
.content-noimg{background:#f6f8fb;border:1.5px dashed #c3ccd9;border-radius:12px;padding:28px;text-align:center;color:#8a94a2;font-size:14px}
.content-banner{border-radius:10px;padding:12px 14px;margin-bottom:12px;font-weight:600;font-size:15px;display:flex;flex-direction:column;gap:3px}
.content-banner span{font-weight:400;font-size:13px}
.content-banner.ok{background:#eafaf1;color:#177a4c}
.content-banner.bad{background:#fff4f4;color:#b02a37}
.content-banner.wait{background:#fff8ec;color:#9a6a12}
.content-danger{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid #eef1f5}
.content-danger button{flex:1;min-width:150px}

/* === Booking calendar =================================================== */
.booking-loading,.booking-error{display:flex;align-items:center;gap:14px;padding:28px}.booking-loading-mark{width:42px;height:42px;border-radius:12px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}.booking-loading-mark svg{width:22px}.booking-loading strong,.booking-error strong{display:block;color:var(--ink);font-size:14px}.booking-loading p,.booking-error p{margin:3px 0 0;color:var(--muted);font-size:11px}.booking-error{align-items:flex-start;flex-direction:column}
.booking-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}.booking-stat-grid article{padding:15px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow)}.booking-stat-grid span{display:block;color:#8b96a7;font-size:8px;font-weight:800;letter-spacing:.7px}.booking-stat-grid strong{display:block;margin:5px 0 2px;color:var(--ink);font:800 22px Manrope}.booking-stat-grid small{color:var(--muted);font-size:9px}
.booking-public-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;margin-bottom:12px}.booking-public-strip>div{display:flex;align-items:center;gap:10px}.booking-public-strip>div:last-child{flex-wrap:wrap;justify-content:flex-end}.booking-public-strip strong,.booking-public-strip a{display:block}.booking-public-strip strong{font-size:11px;color:var(--ink)}.booking-public-strip a{margin-top:2px;color:var(--blue);font-size:9px;word-break:break-all}.booking-public-dot{width:9px;height:9px;border-radius:50%;background:#aab3bf;box-shadow:0 0 0 4px #eef1f5}.booking-public-strip.live .booking-public-dot{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.booking-calendar-panel{padding:0;overflow:hidden}.booking-calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;border-bottom:1px solid var(--line)}.booking-nav-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.booking-nav-controls>strong{margin-left:5px;color:var(--ink);font-size:12px}.booking-view-switch{display:flex;padding:3px;border:1px solid var(--line);border-radius:9px;background:#f7f9fc}.booking-view-switch button{padding:7px 12px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:9px;font-weight:800;cursor:pointer}.booking-view-switch button.active{background:#fff;color:var(--blue);box-shadow:0 1px 4px #17202e18}
.booking-calendar-scroll{max-height:670px;overflow:auto}.booking-time-grid{display:grid;grid-template-columns:66px repeat(var(--booking-days),minmax(140px,1fr));min-width:calc(66px + var(--booking-days) * 140px);background:var(--line);gap:1px}.booking-time-grid.mode-day{min-width:420px}.booking-grid-corner,.booking-grid-day{position:sticky;top:0;z-index:4;min-height:58px;background:#f8fafc}.booking-grid-corner{left:0;z-index:6;display:flex;align-items:flex-end;padding:8px}.booking-grid-corner span{overflow:hidden;color:#8491a4;font-size:7px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.booking-grid-day{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px}.booking-grid-day span{color:var(--muted);font-size:9px;font-weight:700}.booking-grid-day strong{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;font:800 12px Manrope;color:var(--ink)}.booking-grid-day.today strong{background:var(--blue);color:#fff}.booking-grid-time{position:sticky;left:0;z-index:2;display:flex;min-height:54px;align-items:flex-start;justify-content:flex-end;padding:7px 9px;background:#fbfcfe}.booking-grid-time span{color:#8591a2;font-size:8px;font-weight:700}.booking-time-cell{position:relative;min-height:54px;padding:3px;background:#fff}.booking-time-cell.off-hours{background:repeating-linear-gradient(135deg,#fbfcfd,#fbfcfd 7px,#f7f9fb 7px,#f7f9fb 8px)}.booking-time-cell.business:hover{background:#f7faff}.booking-empty-slot{position:absolute;inset:0;width:100%;border:0;background:transparent;color:transparent;cursor:pointer}.booking-empty-slot span{display:grid;width:24px;height:24px;margin:auto;place-items:center;border-radius:50%;background:#eaf1ff;color:var(--blue);font-size:15px;font-weight:600;opacity:0;transform:scale(.82);transition:opacity .15s,transform .15s}.booking-time-cell.business:hover .booking-empty-slot span,.booking-empty-slot:focus-visible span{opacity:1;transform:scale(1)}
.booking-event{position:relative;z-index:1;width:100%;overflow:hidden;padding:7px 7px 7px 10px;border:1px solid color-mix(in srgb,var(--booking-color) 28%,white);border-radius:7px;background:color-mix(in srgb,var(--booking-color) 9%,white);text-align:left;cursor:pointer}.booking-event:before{position:absolute;inset:0 auto 0 0;width:3px;background:var(--booking-color);content:""}.booking-event span,.booking-event strong,.booking-event small{display:block}.booking-event span{color:var(--booking-color);font-size:7px;font-weight:800}.booking-event strong{overflow:hidden;margin:2px 0 1px;color:var(--ink);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.booking-event small{overflow:hidden;color:var(--muted);font-size:7px;text-overflow:ellipsis;white-space:nowrap}.booking-event.danger{opacity:.58;text-decoration:line-through}.booking-event.done{opacity:.72}.booking-event+.booking-event{margin-top:3px}
.booking-public-toggle>span{display:flex;flex-direction:column}.booking-public-toggle small{margin-top:2px;color:var(--muted);font-size:10px;font-weight:400}.booking-link-field{display:grid;grid-template-columns:1fr auto;gap:8px;margin:10px 0;padding:11px;border-radius:10px;background:#f5f8ff}.booking-link-field small{grid-column:1/-1;color:#7183a2;font-size:8px;font-weight:800;letter-spacing:.6px}.booking-link-field a{overflow:hidden;color:var(--blue);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.booking-service-list{display:flex;flex-direction:column;gap:6px;margin-bottom:9px}.booking-service-list>div{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--line);border-radius:9px}.booking-service-list>div>span{width:9px;height:34px;border-radius:6px;background:var(--service-color);flex:0 0 auto}.booking-service-list>div>div{flex:1;min-width:0}.booking-service-list strong,.booking-service-list small{display:block}.booking-service-list strong{font-size:11px;color:var(--ink)}.booking-service-list small{margin-top:2px;color:var(--muted);font-size:9px}
.booking-hours-list{display:flex;flex-direction:column;gap:7px}.booking-hours-day{padding:8px 9px;border:1px solid var(--line);border-radius:9px}.booking-hours-day-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.booking-hours-day-head strong{font-size:10px}.booking-hours-intervals{display:flex;flex-direction:column;gap:5px}.booking-hours-interval{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:6px}.booking-hours-interval input{min-width:0;padding:7px 8px!important}.booking-hours-interval>span,.booking-closed-label{color:var(--muted);font-size:9px}.booking-timezone-note{padding:9px 11px;border-radius:8px;background:#f7f9fc;color:var(--muted);font-size:9px}
.field-help{display:block;margin-top:5px;color:var(--muted);font-size:8px;line-height:1.45}
@media(max-width:900px){.booking-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.booking-time-grid{min-width:1046px}.booking-time-grid.mode-day{min-width:420px}}
@media(max-width:640px){.booking-stat-grid{grid-template-columns:1fr 1fr}.booking-public-strip,.booking-calendar-toolbar{align-items:stretch;flex-direction:column}.booking-public-strip>div:last-child{justify-content:flex-start}.booking-view-switch{align-self:flex-start}.booking-hours-interval{grid-template-columns:1fr auto 1fr auto}.booking-calendar-scroll{max-height:560px}.booking-time-grid.mode-day{min-width:360px;grid-template-columns:58px minmax(280px,1fr)}}

/* Email account settings (MVP Phase 3) */
.email-provider-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:18px 0}
.email-provider-grid button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:74px;padding:14px 16px;text-align:left}
.email-provider-grid button small{color:var(--muted,#657187);font-size:11px;font-weight:400}
.ok-text{color:#13a46f}
.danger-text{color:#df5c6a}

/* Conversations inbox (MVP Phase 6) */
.conv-layout{display:grid;gap:14px;grid-template-columns:340px 1fr;align-items:start}
.conv-list,.conv-thread{padding:0;overflow:hidden}
.conv-scroll{max-height:min(68vh,720px);overflow-y:auto}
.conv-row{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:start;width:100%;padding:12px 14px;border:0;border-bottom:1px solid var(--line,#e5eaf1);background:transparent;text-align:left;cursor:pointer}
.conv-row:hover{background:var(--soft,#f6f8fb)}
.conv-row.selected{background:var(--blue-soft,#edf4ff)}
.conv-row.unread strong{font-weight:700}
.conv-row-body{display:grid;gap:2px;min-width:0}
.conv-row-body strong,.conv-row-body small,.conv-row-body em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-row-body small{color:var(--ink,#17202e);font-size:12px}
.conv-row-body em{color:var(--muted,#657187);font-size:11px;font-style:normal}
.conv-row-meta{display:grid;justify-items:end;gap:6px;color:var(--muted,#657187);font-size:10px}
.conv-header{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line,#e5eaf1)}
.conv-header h3{margin:0;font-size:16px}
.conv-header p{margin:2px 0 0;color:var(--muted,#657187);font-size:12px}
.conv-header-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.conv-messages{padding:14px 16px;display:grid;gap:12px}
.conv-msg{border:1px solid var(--line,#e5eaf1);border-radius:12px;padding:12px 14px;background:#fff}
.conv-msg.in{background:var(--soft,#f6f8fb)}
.conv-msg.out{border-color:#cfe0fc;background:var(--blue-soft,#edf4ff)}
.conv-msg.failed{border-color:#df5c6a;background:#fff2f3}
.conv-msg header{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted,#657187)}
.conv-msg-subject{margin:6px 0;font-weight:600;font-size:13px}
.conv-msg-text{white-space:pre-wrap;font-size:13px;line-height:1.55}
.conv-html{width:100%;min-height:120px;border:0;background:#fff}
.conv-msg-error{margin-top:8px;color:#c0394b;font-size:11px}
.conv-msg-pending{margin-top:8px;color:var(--muted,#657187);font-size:11px}
@media(max-width:900px){.conv-layout{grid-template-columns:1fr}.conv-scroll{max-height:52vh}}
.conv-composer{display:grid;gap:8px;padding:14px 16px;border-top:1px solid var(--line,#e5eaf1);background:var(--soft,#f6f8fb)}
.conv-composer-row{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:center}
.conv-composer-row label{margin:0;font-size:9px;letter-spacing:.7px;color:#647187;font-weight:800}
.conv-composer textarea{min-height:96px;padding:10px 12px;border:1px solid #dce3ed;border-radius:10px;font:400 13px inherit}
.conv-composer-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}
.conv-composer-hint{color:#c0394b;font-size:11px}
.conv-ai-group{display:flex;gap:6px;align-items:center;margin-left:auto}
.conv-ai-group select{height:34px;border:1px solid #dce3ed;border-radius:8px;padding:0 8px;font-size:12px}
.channel-badge{display:inline-block;padding:1px 7px;border-radius:99px;border:1px solid color-mix(in srgb,var(--ch) 45%,transparent);background:color-mix(in srgb,var(--ch) 12%,transparent);color:var(--ch);font-size:9px;font-weight:800;letter-spacing:.4px;vertical-align:middle}
.conv-attachments{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.conv-attachments a{padding:4px 9px;border:1px solid var(--line,#e5eaf1);border-radius:8px;background:#fff;color:#2363ce;font-size:10px;font-weight:700;text-decoration:none}
.conv-composer-channel{font-size:11px;color:var(--muted,#657187)}

/* ==========================================================================
   NextVision CRM — 2026 design layer
   Apple-inspired: system type, generous air, soft depth, translucent
   "liquid glass" chrome, centred headings and spring-eased motion.
   Appended last so it wins the cascade without touching the base rules.
   ========================================================================== */

:root{
  /* Neutrals with a faint cool cast, like macOS surfaces. */
  --ink:#0b0f19;
  --ink-soft:#3a4256;
  --muted:#6b7488;
  --line:rgba(15,23,42,.08);
  --line-strong:rgba(15,23,42,.14);
  --canvas:#f2f4f8;
  --white:#ffffff;

  --blue:#0a84ff;
  --blue-deep:#0060df;
  --blue-soft:rgba(10,132,255,.10);
  --violet:#7d5cff;
  --violet-soft:rgba(125,92,255,.10);
  --green:#12a67a;
  --green-soft:rgba(18,166,122,.10);
  --orange:#ff9f0a;
  --orange-soft:rgba(255,159,10,.12);
  --red:#ff453a;
  --red-soft:rgba(255,69,58,.10);

  /* Layered shadows read as depth rather than a drop shadow. */
  --shadow-xs:0 1px 2px rgba(11,15,25,.05);
  --shadow-sm:0 2px 8px rgba(11,15,25,.06),0 1px 2px rgba(11,15,25,.04);
  --shadow-md:0 12px 32px rgba(11,15,25,.10),0 2px 8px rgba(11,15,25,.05);
  --shadow-lg:0 28px 70px rgba(11,15,25,.16),0 8px 24px rgba(11,15,25,.07);

  --radius:18px;
  --radius-sm:12px;
  --radius-lg:24px;
  --radius-pill:999px;

  /* One spring-ish curve everywhere so motion feels like one system. */
  --ease:cubic-bezier(.32,.72,0,1);
  --fast:.16s var(--ease);
  --base:.26s var(--ease);

  --glass:saturate(180%) blur(22px);
}

*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
  letter-spacing:-.01em;
  color:var(--ink);
  /* Soft ambient wash instead of a flat grey. */
  background:
    radial-gradient(1100px 620px at 12% -8%,rgba(10,132,255,.10),transparent 62%),
    radial-gradient(900px 560px at 92% 4%,rgba(125,92,255,.09),transparent 58%),
    var(--canvas);
  background-attachment:fixed;
}

h1,h2,h3,h4{letter-spacing:-.028em;font-weight:650}

/* ---------------------------------------------------------------- chrome */
/* The sidebar and topbar float above the content as frosted glass. */
.sidebar{
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:var(--glass);
  backdrop-filter:var(--glass);
  border-right:1px solid var(--line);
  box-shadow:var(--shadow-xs);
}
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:var(--glass);
  backdrop-filter:var(--glass);
  border-bottom:1px solid var(--line);
}
.nav-item{
  border-radius:var(--radius-sm);
  transition:background var(--fast),color var(--fast),transform var(--fast);
}
.nav-item:hover{background:rgba(15,23,42,.05)}
.nav-item:active{transform:scale(.97)}
.nav-item.active{
  background:linear-gradient(180deg,rgba(10,132,255,.16),rgba(10,132,255,.10));
  color:var(--blue-deep);box-shadow:inset 0 0 0 1px rgba(10,132,255,.18)
}

/* ---------------------------------------------------------------- surfaces */
.panel,.settings-company-card,.permission-card,.action-metric,.summary-item,
.task-summary-grid article,.dashboard-grid article{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--base),transform var(--base),border-color var(--base);
}
.panel:hover{box-shadow:var(--shadow-md)}

/* Typography is owned here so headings stop falling back to a serif when
   the webfont is slow or unavailable. */
h1,h2,h3,h4,h5,h6,strong,b,.page-heading h1,.panel-header h3,.drawer-header h2,
.booking-aside h1,.confirmation h2,.metric-card strong,.action-metric strong,
.summary-item strong,.stage-value,.lead-value,.conversion-total strong{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,system-ui,sans-serif!important
}
/* Tabular figures so numbers line up and never jump while they change. */
.metric-card strong,.action-metric strong,.summary-item strong,.stage-value,
.lead-value,.conversion-total strong,.task-summary-grid strong,time{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1
}

/* Centred page headers: the title block stacks above centred actions. */
.page-heading{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;padding-bottom:6px
}
.page-heading>div{width:100%}
.page-heading h1{margin:6px auto 0;font-size:clamp(26px,3vw,34px);line-height:1.1}
.page-heading p{margin:8px auto 0;max-width:62ch;color:var(--muted)}
.page-heading .eyebrow{
  display:inline-block;margin-inline:auto;
  color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase
}
.heading-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.empty-state{text-align:center;padding:44px 20px;color:var(--muted)}
.action-metric,.summary-item,.task-summary-grid article,.permission-card,
.metric-grid>article,.metric-card{text-align:center}
.metric-grid>article>*,.metric-card>*{margin-inline:auto}
.action-metric div,.summary-item{align-items:center}
.action-metric strong,.summary-item strong,.task-summary-grid article strong{
  display:block;font-size:30px;letter-spacing:-.04em;font-weight:680
}
.panel-header h3{letter-spacing:-.03em}

/* ---------------------------------------------------------------- controls */
.primary-button,.secondary-button,.button,button.table-action{
  border-radius:var(--radius-pill);
  font-weight:600;letter-spacing:-.01em;
  transition:transform var(--fast),box-shadow var(--fast),background var(--fast),opacity var(--fast);
}
.primary-button{
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  border:0;color:#fff;box-shadow:0 6px 18px rgba(10,132,255,.30),inset 0 1px 0 rgba(255,255,255,.28)
}
.primary-button:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(10,132,255,.36)}
.primary-button:active{transform:scale(.97)}
.secondary-button{
  background:rgba(255,255,255,.9);border:1px solid var(--line-strong);color:var(--ink-soft);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
}
.secondary-button:hover{background:#fff;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.secondary-button:active{transform:scale(.97)}
button:disabled{opacity:.5;transform:none!important}

input,select,textarea{
  border-radius:var(--radius-sm)!important;
  border:1px solid var(--line-strong)!important;
  background:rgba(255,255,255,.9)!important;
  transition:border-color var(--fast),box-shadow var(--fast),background var(--fast);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--blue)!important;
  box-shadow:0 0 0 4px var(--blue-soft)!important;
  background:#fff!important;outline:0
}

/* ---------------------------------------------------------------- tables */
.contacts-table-wrap,.team-table-wrap{
  border-radius:var(--radius);
  overflow-x:auto;overflow-y:visible;      /* wide tables must stay reachable */
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain
}
/* Thin, unobtrusive scrollbars in the macOS manner. */
.contacts-table-wrap::-webkit-scrollbar,.conv-scroll::-webkit-scrollbar,
.pipeline-board::-webkit-scrollbar{height:8px;width:8px}
.contacts-table-wrap::-webkit-scrollbar-thumb,.conv-scroll::-webkit-scrollbar-thumb,
.pipeline-board::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18);border-radius:999px}
.contacts-table-wrap::-webkit-scrollbar-thumb:hover,.conv-scroll::-webkit-scrollbar-thumb:hover,
.pipeline-board::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.3)}
.contacts-table-wrap::-webkit-scrollbar-track{background:transparent}
table thead th{
  background:rgba(248,250,252,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--muted);font-weight:600
}
table tbody tr{transition:background var(--fast)}
table tbody tr:hover{background:rgba(10,132,255,.045)}
.lead-table-row{cursor:pointer}
.lead-table-row:active{transform:none}

/* ---------------------------------------------------------------- pills */
.status-pill,.role-pill,.priority-pill,.channel-badge,.member-status{
  border-radius:var(--radius-pill);font-weight:600;letter-spacing:0
}
.status-pill{padding:4px 11px;font-size:11px}

/* ---------------------------------------------------------------- modals */
.modal-backdrop{
  background:rgba(11,15,25,.32);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  animation:nv-fade .22s var(--ease)
}
.lead-drawer,.compact-drawer,.wide-drawer{
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
  box-shadow:var(--shadow-lg);
  animation:nv-rise .32s var(--ease)
}
.drawer-header{text-align:center}
.drawer-header h2{margin-inline:auto}
.drawer-header p{margin-inline:auto;max-width:58ch}
.modal-close{border-radius:var(--radius-pill);transition:background var(--fast),transform var(--fast)}
.modal-close:hover{background:rgba(15,23,42,.06)}
.modal-close:active{transform:scale(.9)}

@keyframes nv-fade{from{opacity:0}to{opacity:1}}
@keyframes nv-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- pipeline */
.stage{border-radius:var(--radius);background:rgba(255,255,255,.6);border:1px solid var(--line)}
.lead-card{
  border-radius:var(--radius-sm);border:1px solid var(--line);
  background:rgba(255,255,255,.94);box-shadow:var(--shadow-xs);
  transition:transform var(--fast),box-shadow var(--fast)
}
.lead-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ---------------------------------------------------------------- inbox */
.conv-row{transition:background var(--fast)}
.conv-row.selected{background:var(--blue-soft);box-shadow:inset 3px 0 0 var(--blue)}
.conv-msg{border-radius:var(--radius);box-shadow:var(--shadow-xs)}
.conv-msg.out{background:linear-gradient(180deg,rgba(10,132,255,.10),rgba(10,132,255,.06));border-color:rgba(10,132,255,.18)}

/* ---------------------------------------------------------------- toast */
.toast{
  border-radius:var(--radius-pill);
  background:rgba(11,15,25,.86);
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
  color:#fff;box-shadow:var(--shadow-lg);
  animation:nv-rise .3s var(--ease)
}

/* ---------------------------------------------------------------- motion */
/* Page swaps cross-fade instead of snapping. */
main.page{animation:nv-page .28s var(--ease)}
@keyframes nv-page{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Long lists only paint what is on screen. */
/* Paint containment only where it cannot interfere with scrolling. */
.conv-messages,.metric-grid,.action-metric-grid{contain:layout paint}

::view-transition-old(root){animation:nv-fade .16s var(--ease) reverse}
::view-transition-new(root){animation:nv-fade .22s var(--ease)}

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

@media(max-width:900px){
  .page-head{text-align:center}
  .panel{border-radius:var(--radius-sm)}
}

/* ---------------------------------------------------------------- mobile fit */
/* Panels must never be wider than the screen; wide inner content (charts,
   boards, tables) scrolls inside its own container instead of pushing the
   whole page sideways. */
.panel,.dashboard-grid article,.metric-grid>article,.settings-company-card{max-width:100%;min-width:0}
.chart-wrap,.pipeline-board,.conversion-list{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.dashboard-grid,.metric-grid,.action-metric-grid,.task-summary-grid{min-width:0}
main.page{overflow-x:clip}

@media(max-width:640px){
  main.page{padding-inline:14px}
  .page-heading h1{font-size:24px}
  .heading-actions{width:100%}
  .heading-actions button{flex:1 1 auto}
  .chart-wrap{min-width:0}
  .metric-grid,.action-metric-grid,.dashboard-grid{grid-template-columns:1fr!important}
  .lead-drawer,.compact-drawer,.wide-drawer{width:100%!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .modal-backdrop{align-items:flex-end}
}

/* ---------------------------------------------------------------- inbox channel tabs */
/* Each channel carries its own brand colour so the tab, the badge and the
   connection banner all read as one surface. */
.channel-panel{padding:0;margin-bottom:14px;overflow:hidden}
.channel-tabs{display:flex;gap:8px;padding:14px 16px;flex-wrap:wrap;justify-content:center}
.channel-banners{display:grid;gap:10px;padding:0 16px 16px}
.channel-banners.is-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.channel-banners .channel-banner{margin:0}
.channel-tab{
  --ch:#8a94a6;--ch2:#8a94a6;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border:0;border-radius:var(--radius-pill);
  background:transparent;color:var(--muted);
  font-size:13px;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  transition:background var(--fast),color var(--fast),transform var(--fast);
}
.channel-tab{
  background:color-mix(in srgb,var(--ch) 9%,transparent);
  color:color-mix(in srgb,var(--ch2) 78%,#000);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ch) 22%,transparent)
}
.channel-tab:hover{background:color-mix(in srgb,var(--ch) 16%,transparent)}
.channel-tab:active{transform:scale(.97)}
.channel-tab b{
  min-width:19px;padding:1px 6px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--ch) 18%,transparent);
  color:var(--ch);font-size:10px;font-weight:700
}
.channel-tab.active{
  color:#fff;
  background:linear-gradient(135deg,var(--ch),var(--ch2));
  box-shadow:0 6px 16px color-mix(in srgb,var(--ch) 32%,transparent)
}
.channel-tab.active b{background:rgba(255,255,255,.26);color:#fff}

/* Brand palettes. */
.ch-instagram{--ch:#f9836a;--ch2:#dd2a7b}   /* peach into magenta */
.ch-messenger{--ch:#0084ff;--ch2:#0064e0}   /* Meta blue */
.ch-email{--ch:#34c98a;--ch2:#12a67a}       /* soft green */
.ch-all{--ch:#8a94a6;--ch2:#6b7488}

.channel-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:12px;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb,var(--ch) 30%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--ch) 12%,transparent),color-mix(in srgb,var(--ch2) 9%,transparent));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
}
.channel-banner div{display:grid;gap:2px;min-width:0}
.channel-banner strong{font-size:13px;color:var(--ink)}
.channel-banner span{font-size:11px;color:var(--ink-soft)}
.channel-banner .channel-state{
  padding:4px 11px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--ch) 20%,transparent);
  color:color-mix(in srgb,var(--ch2) 88%,#000);
  font-size:10px;font-weight:700;letter-spacing:.02em
}
.channel-banner.is-connected{border-style:solid}
@media(max-width:640px){
  .channel-tabs{padding:10px 10px 0}
  .channel-tab{padding:7px 11px;font-size:12px}
  .channel-banner{margin:10px;flex-direction:column;align-items:stretch;text-align:center}
  .channel-banner button{width:100%}
}
.provider-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.provider-actions .provider-connect{flex:1 1 auto}
.provider-actions .danger-text{border-color:color-mix(in srgb,#ff453a 35%,transparent)}
.provider-actions .danger-text:hover{background:color-mix(in srgb,#ff453a 10%,transparent)}

/* Social sender identity — Messenger/Instagram name and profile picture.
   The picture is a layer over the initials, so an expired provider URL
   silently falls back to the initials instead of a broken image. */
.contact-avatar{position:relative;overflow:hidden;flex-shrink:0}
.contact-avatar .avatar-photo{position:absolute;inset:0;border-radius:inherit;background-size:cover;background-position:center;background-repeat:no-repeat}
.contact-avatar-lg{width:42px;height:42px;font-size:12px}
.conv-header-who{display:flex;align-items:center;gap:12px;min-width:0}
.conv-header-who p{overflow:hidden;text-overflow:ellipsis}

/* Page picker — a choice has to look chosen. The selected row turns green and
   keeps that state while the connection is being made, instead of just fading. */
.page-choice{display:flex;flex-direction:column;gap:2px;width:100%;margin-bottom:8px;padding:12px 14px;text-align:left;
  border:1px solid var(--line,#e5eaf1);border-radius:14px;background:var(--card,#fff);color:inherit;cursor:pointer;
  transition:background .18s cubic-bezier(.32,.72,0,1),border-color .18s cubic-bezier(.32,.72,0,1),transform .18s cubic-bezier(.32,.72,0,1)}
.page-choice strong{font-size:14px;font-weight:600}
.page-choice span{font-size:12px;opacity:.55}
.page-choice:hover:not(:disabled){border-color:#34c98a;transform:translateY(-1px)}
.page-choice:disabled{cursor:default;opacity:1}
.page-choice.is-selected{background:color-mix(in srgb,#34c98a 14%,transparent);border-color:#34c98a}
.page-choice.is-selected strong::after{content:' ✓';color:#12a67a;font-weight:800}
.page-choice.is-connecting span::after{content:' · connecting…';opacity:.9}
.page-choice:not(.is-selected):disabled{opacity:.45}

/* A contact with no photo still gets a recognisable face: a stable colour
   derived from their address, the way mail clients do it. */
.contact-avatar.tinted{background:hsl(var(--avatar-hue,214) 68% 92%);color:hsl(var(--avatar-hue,214) 55% 32%)}
@media (prefers-color-scheme:dark){
  .contact-avatar.tinted{background:hsl(var(--avatar-hue,214) 40% 26%);color:hsl(var(--avatar-hue,214) 70% 86%)}
}

/* Campaigns — list and the HTML-first editor. */
.campaign-list{padding:6px}
.campaign-row{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;background:none;border:0;border-bottom:1px solid var(--line,#e5eaf1);text-align:left;cursor:pointer;color:inherit}
.campaign-row:last-child{border-bottom:0}
.campaign-row:hover{background:color-mix(in srgb,var(--accent,#377cf6) 5%,transparent)}
.campaign-row-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.campaign-row-main strong{font-size:14px}
.campaign-row-main small{font-size:12px;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.campaign-row-stats{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;opacity:.7;white-space:nowrap}
.campaign-editor{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campaign-editor-pane{display:flex;flex-direction:column;gap:6px;min-width:0}
.campaign-editor-pane label{font-size:10px;letter-spacing:.08em;font-weight:700;opacity:.55}
.campaign-editor textarea{min-height:320px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.campaign-preview{width:100%;min-height:320px;border:1px solid var(--line,#e5eaf1);border-radius:12px;background:#fff}
@media(max-width:900px){.campaign-editor{grid-template-columns:1fr}}

/* AI ad report — the written verdict keeps its own line breaks. */
.ad-report-text{white-space:pre-wrap;font:13px/1.65 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;padding:14px;border:1px solid var(--line,#e5eaf1);border-radius:12px;background:var(--card,#fff);max-height:420px;overflow:auto}

/* Prospects — the call list.

   Two search boxes sit on this page and they do very different things: the one
   in the panel spends a metered lookup, the one above the table only hides
   rows. They are deliberately given different weight, position and wording so
   the free one never looks like the paid one. */
.prospect-search-panel{max-height:0;padding:0 18px;overflow:hidden;opacity:0;border-width:0;
  transition:max-height .32s cubic-bezier(.22,.61,.36,1),opacity .22s ease,padding .32s cubic-bezier(.22,.61,.36,1),margin .32s ease;margin-bottom:0}
.prospect-search-panel.is-open{max-height:340px;opacity:1;padding:18px;border-width:1px;margin-bottom:16px}
.prospect-search-form{display:flex;flex-direction:column;gap:14px}
.prospect-search-form.is-working{opacity:.6;pointer-events:none}
.prospect-search-fields{display:grid;grid-template-columns:2fr 1fr 110px;gap:10px}
.prospect-search-fields .field{display:flex;flex-direction:column;gap:5px;min-width:0}
.prospect-search-fields .field span{font-size:10px;letter-spacing:.08em;font-weight:700;opacity:.55}
.prospect-search-options{display:flex;flex-wrap:wrap;gap:18px}
.prospect-search-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.prospect-allowance{font-size:12px;color:var(--muted)}
.check{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer}
.check input{width:15px;height:15px;accent-color:var(--blue)}

.prospect-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;margin-bottom:16px}
.prospect-stat{background:var(--card,#fff);border:1px solid var(--line,#e5eaf1);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.prospect-stat strong{font-size:21px;font-weight:600;line-height:1.15}
.prospect-stat span{font-size:11.5px;color:var(--muted)}

.prospect-list{padding:0;overflow:hidden}
.prospect-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line,#e5eaf1)}
.prospect-filter-text{flex:1;min-width:190px}
.prospect-count{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}

.prospect-table{width:100%;border-collapse:collapse;font-size:13px}
.prospect-table th{text-align:left;font-size:10px;letter-spacing:.07em;font-weight:700;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line,#e5eaf1)}
.prospect-table td{padding:11px 12px;border-bottom:1px solid var(--line,#e5eaf1);vertical-align:middle}
.prospect-table tr:last-child td{border-bottom:0}
.prospect-pick{width:34px}
.prospect-pick input{width:15px;height:15px;accent-color:var(--blue)}
.prospect-name{min-width:0}
.prospect-name strong{display:block;font-weight:600}
.prospect-name small{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.prospect-reach{white-space:nowrap}
.prospect-reach a{display:block;color:var(--blue);text-decoration:none}
.prospect-reach a:hover{text-decoration:underline}
.prospect-reach .prospect-mail{font-size:11.5px;opacity:.75}
.prospect-reach .muted,.prospect-actions .muted{color:var(--muted);font-size:12px}
.prospect-rating{white-space:nowrap;font-variant-numeric:tabular-nums}
.prospect-rating small{margin-left:5px;font-size:11px;color:var(--muted)}
/* A poor score with real volume behind it is the best call on the page. */
.prospect-rating.is-weak{color:var(--red);font-weight:600}
.prospect-status-select{font-size:12px;padding:5px 8px}
.prospect-row{transition:background .16s ease}
.prospect-row:hover{background:color-mix(in srgb,var(--blue) 4%,transparent)}
.prospect-row.is-known{opacity:.55}

/* Rows arrive in sequence rather than all at once — it reads as a list being
   laid down instead of the page flashing. Capped at eighteen so a long list
   never keeps you waiting. */
.prospect-row{animation:prospect-in .34s cubic-bezier(.22,.61,.36,1) backwards;animation-delay:calc(var(--row-index,0) * 22ms)}
@keyframes prospect-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.prospect-status .status-pill{transition:transform .2s ease}
.just-changed .status-pill{animation:prospect-pop .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes prospect-pop{0%{transform:scale(.82)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

/* The bulk bar rides in from the bottom only while something is selected. */
.prospect-bulk{position:sticky;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:16px;padding:12px 18px;border-radius:14px;background:var(--card,#fff);border:1px solid var(--line,#e5eaf1);
  box-shadow:0 10px 30px rgba(20,32,54,.14);opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .24s ease,transform .28s cubic-bezier(.22,.61,.36,1)}
.prospect-bulk.is-visible{opacity:1;transform:none;pointer-events:auto}
.prospect-bulk strong{font-size:15px}

@media (prefers-reduced-motion:reduce){
  .prospect-row{animation:none}
  .just-changed .status-pill{animation:none}
  .prospect-search-panel,.prospect-bulk{transition:none}
}
@media(max-width:820px){
  .prospect-search-fields{grid-template-columns:1fr}
  .prospect-table thead{display:none}
  .prospect-table td{display:block;border-bottom:0;padding:4px 14px}
  .prospect-table tr{display:block;padding:10px 0;border-bottom:1px solid var(--line,#e5eaf1)}
  .prospect-name small{max-width:none}
}

/* Prospect scoring — the fit stars, the weakness and the offer.

   The stars are the sort order, so they lead the eye before the name does.
   The weakness column is the one that matters most: it is the sentence you
   say on the phone, so it gets room to breathe rather than being truncated. */
.prospect-fit{white-space:nowrap;min-width:96px}
.prospect-fit small{display:block;font-size:11px;color:var(--muted);text-transform:capitalize;margin-top:2px}
.prospect-stars{color:#f0a92b;letter-spacing:1px;font-size:13px}
.prospect-stars i{color:var(--line,#e5eaf1);font-style:normal}
.prospect-weakness{font-size:12.5px;line-height:1.4;max-width:230px}
.prospect-offer strong{display:block;font-weight:600;font-size:12.5px}
.prospect-offer small{font-size:11.5px;color:var(--muted)}
.prospect-fit .prospect-rating{font-size:11px}
.prospect-fit .prospect-rating small{margin-left:3px}
@media(max-width:820px){
  .prospect-weakness{max-width:none}
  .prospect-fit{min-width:0}
}

/* ── Readability and polish pass ───────────────────────────────────────────
   Appended at the end so it wins the cascade without touching the base rules.
   The goal is only to lift text that sits below a comfortable reading size and
   to make a few states feel finished — not to restyle what already works. */

/* Secondary labels that had dropped to 8–10px. Small enough to strain on a
   laptop, and these are the words that tell you what a number means. */
.action-metric small{font-size:11px;color:#7a8697}
.action-metric button{font-size:10px}
.panel-header p{font-size:12px}
.empty-state{font-size:13px;color:#8b96a6;padding:40px 24px}

/* A loading state that reads as "working", not as a page that forgot to load.
   One quiet spinner, the same on every screen that waits on the server. */
.nv-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 24px;color:var(--muted);font-size:13px}
.nv-spinner{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--blue);animation:nv-spin .7s linear infinite}
@keyframes nv-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nv-spinner{animation-duration:2s}}

/* Wide tables scroll rather than truncate, but on a Mac the scrollbar is
   invisible until touched, so a full column looked cut off. A thin, always-on
   bar on the scroll area says plainly that there is more to the right. */
.contacts-table-wrap,.team-table-wrap,.prospect-list{scrollbar-width:thin;scrollbar-color:#cdd7e6 transparent}
.contacts-table-wrap::-webkit-scrollbar,.team-table-wrap::-webkit-scrollbar,.prospect-list::-webkit-scrollbar{height:9px}
.contacts-table-wrap::-webkit-scrollbar-thumb,.team-table-wrap::-webkit-scrollbar-thumb,.prospect-list::-webkit-scrollbar-thumb{background:#cdd7e6;border-radius:6px;border:2px solid var(--white)}
.contacts-table-wrap::-webkit-scrollbar-thumb:hover,.team-table-wrap::-webkit-scrollbar-thumb:hover{background:#aeb9cc}

/* ── Consistency pass: one button size, one type scale, no overflow ────────
   Appended last so it wins the cascade without touching the base rules. The
   goal: the same control is the same size everywhere, small text is only small
   where the hierarchy means it, and nothing hangs out of its box. */

/* One size for the primary actions, everywhere. They were 38 / 44 / 48px tall
   in different places, which is what read as "sometimes big, sometimes small". */
.primary-button,.secondary-button,.google-button{
  min-height:42px;padding:0 20px;font-size:14px;font-weight:600;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px}

/* Deliberately smaller controls — table actions, inline chips, add-card — kept
   consistent with each other so "small" is one size, used on purpose. */
.add-card,.table-action,.secondary-button.small,.chip-button{
  min-height:34px;padding:0 14px;font-size:13px;font-weight:600;border-radius:999px}

/* The leads table sub-line was 8px — below comfortable reading. Bring the name
   and its detail up to a readable, clearly-ranked pair. */
.person-cell strong{font-size:14px}
.person-cell > div small{font-size:12px;margin-top:2px}
.person-cell span.contact-avatar{font-size:13px}

/* Nothing should hang out of its box — but wrap at word boundaries, never
   character by character. (word-break:break-word in a narrow table column
   stacked names one letter per line: D/o/r/a. overflow-wrap:break-word only
   breaks a word when it genuinely cannot fit, at sensible points.) */
.lead-card h4,.lead-card p,.panel h3,.panel p,.summary-item span,
.metric-card span,.stat-label,.campaign-row-main strong,
.campaign-row-main small,.prospect-name strong,
.page-heading h1,.page-heading p,.eyebrow{overflow-wrap:break-word;word-break:normal}

/* The leads table: give the name column room so a two-word name fits on a
   line, and let the whole table scroll sideways rather than crushing columns
   to nothing. Names wrap at the space only, never per character. */
.contacts-table-wrap table{min-width:940px}
.person-cell{min-width:150px}
.person-cell > div{min-width:0}
.person-cell strong,.person-cell > div small{overflow-wrap:normal;word-break:keep-all;white-space:normal}

/* Blocks stay inside the viewport; only real tables scroll. */
.app-shell,.main-area,main.page{max-width:100%;overflow-x:hidden}

/* Dashboard filter bar — narrow the whole overview to a period and an owner. */
.dash-filter-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;margin-bottom:16px}
.dash-filter-bar .dash-range{display:flex;gap:6px;flex-wrap:wrap}
.dash-filter-bar .tag-filter{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-left:auto}
.dash-filter-bar .tag-filter select{font-size:13px;padding:7px 10px}
.dash-filter-bar .ghost-button{font-size:12px}

/* ── Pipeline drag: no text selection, glass-smooth movement ───────────────
   Appended last so it wins. Two real bugs: the card had no user-select
   guard, so pressing it selected the text under the pointer; and the earlier
   `.is-dragging` rule was written `is-dragging` (missing dot), so the
   during-drag no-select never applied. The card now moves by transform, so it
   must not carry a transform transition or it lags a frame behind the pointer. */
.lead-card{user-select:none;-webkit-user-select:none;touch-action:none}
body.is-dragging,body.is-dragging *{user-select:none!important;-webkit-user-select:none!important;cursor:grabbing!important}
.lead-card.dragging-pointer{transition:none!important;will-change:transform;box-shadow:0 24px 54px rgba(20,32,54,.28)}
.stage.drag-over{background:color-mix(in srgb,var(--stage-color,#377cf6) 8%,transparent);transition:background .12s ease}

/* ── Liquid-glass primary buttons ─────────────────────────────────────────
   The blue call-to-action gets depth: a soft vertical sheen, a bright inner
   top edge and a coloured glow, so it reads as a single premium control
   rather than a flat fill — the same glass language as the sidebar chrome. */
.primary-button{
  background:linear-gradient(180deg,#4a8bff 0%,var(--blue,#377cf6) 55%,#2f6fe0 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 24px rgba(55,124,246,.32),0 2px 6px rgba(24,43,77,.12);
  border:1px solid rgba(255,255,255,.18);color:#fff;position:relative;overflow:hidden}
.primary-button:hover{
  background:linear-gradient(180deg,#5695ff 0%,#3d81f8 55%,#3573e6 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 14px 30px rgba(55,124,246,.4),0 2px 8px rgba(24,43,77,.14);
  transform:translateY(-1px)}
.primary-button:active{transform:translateY(0);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 16px rgba(55,124,246,.3)}
@media (prefers-reduced-motion:reduce){.lead-card.dragging-pointer{will-change:auto}.primary-button:hover{transform:none}}

/* ── Inbox typography: one scale, and the letter is the biggest thing ──────
   The inbox mixed six arbitrary sizes on one screen (9, 10, 11, 12, 13, 16px),
   which is what "sometimes smaller, sometimes bigger" was. They collapse into
   four text steps, each with a job, plus the thread heading:
     17  the person's name, heading the thread
     15  anything read word by word — message text and the reply box
     14  names and subjects in the list
     12  secondary detail: previews, sender lines, hints, compact controls
     11  uppercase micro labels, badges, timestamps
   Nothing drops below 11px; the old 9px labels were never comfortably read. */
.conv-header h3{font-size:17px}
.conv-msg-text{font-size:15px;line-height:1.6}
.conv-composer textarea{font-size:15px;line-height:1.55}
.conv-row-body strong{font-size:14px}
.conv-msg-subject{font-size:14px;margin:8px 0 6px}
.conv-row-body small,.conv-row-body em,.conv-header p,.conv-msg header,
.conv-msg-error,.conv-msg-pending,.conv-composer-hint,.conv-composer-channel,
.conv-ai-group select{font-size:12px}
.conv-row-meta,.conv-composer-row label,.conv-attachments a,
.channel-badge{font-size:11px}
.conv-composer-row label{letter-spacing:.4px}
/* An HTML letter needs room to be read. The iframe stays fully sandboxed —
   no allow-scripts, no allow-same-origin — which is what keeps sender markup
   inert, and also means the parent cannot measure the content to auto-fit it.
   A generous box that scrolls inside is the honest trade-off; the sandbox is
   never widened for the sake of layout. */
.conv-html{min-height:280px;max-height:70vh}
.conv-scroll{max-height:min(72vh,760px)}

/* ── The ON/OFF switch: Liquid Glass ──────────────────────────────────────
   Rebuilt, not patched. The previous version put an "ON" and an "OFF" label
   AND the thumb inside a 74px track: each half got 37px, the 28px thumb landed
   on top of a word, and the labels painted above the thumb — which is why the
   text looked crushed and bled through. A switch does not need to spell itself
   out. The track holds glass and a thumb; the word sits beside it.

   Convention restored too: OFF is neutral with the thumb left, ON is green with
   the thumb right, the way every operating system does it.

   Materials: the track is layered translucent glass over a blurred backdrop,
   the thumb is a floating glass disc with its own sheen and shadow, and ON adds
   a glow that sits behind the thumb rather than on it. Motion is a short spring
   with a small overshoot so it lands rather than snaps. */
.nv-switch-wrap{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;margin-left:auto}
.nv-switch-label{
  font-size:12px;font-weight:700;letter-spacing:.2px;color:var(--ink-soft,#657187);
  min-width:22px;text-align:left;
  transition:color .26s cubic-bezier(.32,.72,0,1)}
.nv-switch.is-on ~ .nv-switch-label{color:#0f9d58}

.nv-switch{
  --sw-w:52px;--sw-h:32px;--sw-pad:2px;--sw-knob:28px;
  --sw-travel:calc(var(--sw-w) - var(--sw-knob) - var(--sw-pad) * 2);
  /* One spring for everything that moves, so the parts feel joined. */
  --sw-spring:cubic-bezier(.34,1.42,.64,1);
  --sw-ease:cubic-bezier(.32,.72,0,1);
  appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;
  width:var(--sw-w);height:var(--sw-h);flex:0 0 auto;border-radius:99px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .2s var(--sw-ease),filter .2s var(--sw-ease)}

.nv-switch-track{
  position:relative;display:block;width:100%;height:100%;border-radius:99px;
  overflow:hidden;isolation:isolate;
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  /* OFF: frosted neutral glass. Top-lit, with a hairline and an inner lip. */
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.28)),
    linear-gradient(180deg,#e7ebf1,#dfe4ec);
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(24,43,77,.10),
    inset 0 0 0 .5px rgba(24,43,77,.10),
    0 1px 2px rgba(24,43,77,.06);
  transition:background .3s var(--sw-ease),box-shadow .3s var(--sw-ease)}

/* ON: green liquid glass. Layered so the colour reads as material, not fill. */
.nv-switch.is-on .nv-switch-track{
  background:
    linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.06) 52%,rgba(255,255,255,.14)),
    radial-gradient(120% 160% at 22% 0%,rgba(255,255,255,.55),transparent 58%),
    linear-gradient(180deg,#43d68a,#12a95f 62%,#0d9152);
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,.72),
    inset 0 -1px 3px rgba(4,72,40,.30),
    inset 0 0 0 .5px rgba(6,88,50,.34),
    0 1px 3px rgba(11,133,74,.30),
    0 0 0 4px rgba(24,190,120,0)}

/* The glow lives behind the thumb and travels with it. */
.nv-switch-glow{
  position:absolute;z-index:0;top:50%;left:calc(var(--sw-pad) + var(--sw-knob) / 2);
  width:calc(var(--sw-knob) * 1.9);height:calc(var(--sw-knob) * 1.9);
  margin:calc(var(--sw-knob) * -0.95) 0 0 calc(var(--sw-knob) * -0.95);
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.75),rgba(120,255,190,.30) 45%,transparent 70%);
  transition:opacity .3s var(--sw-ease),transform .28s var(--sw-spring)}
.nv-switch.is-on .nv-switch-glow{opacity:1;transform:translate3d(var(--sw-travel),0,0)}

/* The thumb: a floating glass disc. */
.nv-switch-knob{
  position:absolute;z-index:1;top:var(--sw-pad);left:var(--sw-pad);
  width:var(--sw-knob);height:var(--sw-knob);border-radius:50%;
  background:
    radial-gradient(120% 120% at 32% 22%,rgba(255,255,255,.98),rgba(255,255,255,.80) 46%,rgba(246,249,252,.92)),
    #fff;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -1px 2px rgba(24,43,77,.10),
    0 1px 1px rgba(24,43,77,.10),
    0 3px 8px rgba(24,43,77,.22),
    0 0 0 .5px rgba(24,43,77,.07);
  transition:transform .28s var(--sw-spring),box-shadow .26s var(--sw-ease),width .18s var(--sw-ease)}
.nv-switch.is-on .nv-switch-knob{transform:translate3d(var(--sw-travel),0,0)}
/* A moving highlight, so the glass catches light as it travels. */
.nv-switch-knob-sheen{
  position:absolute;inset:1px;border-radius:50%;pointer-events:none;
  background:linear-gradient(200deg,rgba(255,255,255,.95),rgba(255,255,255,0) 58%);
  transition:transform .28s var(--sw-spring),opacity .26s var(--sw-ease)}
.nv-switch.is-on .nv-switch-knob-sheen{transform:rotate(-18deg);opacity:.85}

/* Hover lifts the light a little; pressing compresses the whole control and
   stretches the thumb slightly, the way a physical key would give. */
.nv-switch:hover{filter:brightness(1.04)}
.nv-switch:hover .nv-switch-knob{box-shadow:
  inset 0 1px 1px rgba(255,255,255,1),inset 0 -1px 2px rgba(24,43,77,.10),
  0 1px 1px rgba(24,43,77,.10),0 5px 12px rgba(24,43,77,.26),0 0 0 .5px rgba(24,43,77,.07)}
.nv-switch:active{transform:scale(.965)}
.nv-switch:active .nv-switch-knob{width:calc(var(--sw-knob) + 2px)}
.nv-switch:focus{outline:none}
.nv-switch:focus-visible .nv-switch-track{
  box-shadow:inset 0 1px 1.5px rgba(255,255,255,.9),0 0 0 3px rgba(55,124,246,.38),0 0 0 5px rgba(55,124,246,.16)}
.nv-switch[disabled],.nv-switch[aria-disabled=true]{opacity:.45;cursor:not-allowed;filter:none}
.nv-switch[disabled]:active{transform:none}

/* Dark mode: the OFF glass goes to smoked rather than white, and ON keeps its
   colour but loses the bright top lip that only makes sense on a light page. */
@media (prefers-color-scheme:dark){
  .nv-switch-track{
    background:
      linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),
      linear-gradient(180deg,#3a4152,#2c3242);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.20),
      inset 0 -1px 2px rgba(0,0,0,.45),
      inset 0 0 0 .5px rgba(255,255,255,.10),
      0 1px 2px rgba(0,0,0,.35)}
  .nv-switch.is-on .nv-switch-track{
    background:
      linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.04) 55%),
      linear-gradient(180deg,#35c47f,#0f9a56);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.34),inset 0 -1px 3px rgba(0,0,0,.4),
      inset 0 0 0 .5px rgba(255,255,255,.14),0 1px 3px rgba(0,0,0,.4)}
  .nv-switch-knob{
    background:radial-gradient(120% 120% at 32% 22%,#fff,rgba(240,244,250,.92) 55%,rgba(226,232,240,.95));
    box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 2px 6px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.25)}
  .nv-switch-label{color:#a9b3c4}
  .nv-switch.is-on ~ .nv-switch-label{color:#4ede9c}
}

/* Motion is decoration here — the position and the word carry the state. */
@media (prefers-reduced-motion:reduce){
  .nv-switch,.nv-switch-track,.nv-switch-knob,.nv-switch-knob-sheen,
  .nv-switch-glow,.nv-switch-label{transition:none}
  .nv-switch:active{transform:none}}

/* ── Cards: one shape, one button size, one place for things ───────────────
   The switch owns the state, so the action row holds actions only — and they
   are all the same height and sit on the same line, left to right, instead of
   one card showing a wide blue button and the next three narrow grey ones. */
/* Card text: one scale, and it can never reach the switch.
   The title block had no width limit, so a long description ran under the
   control and the words looked like they were sliding beneath it. min-width:0
   lets the flex item actually shrink (without it a long word forces the block
   wider than its share), and the gap plus a hard cap keep a clear channel
   between the text and the switch on every card. */
.automation-head{align-items:flex-start;gap:16px}
.automation-head .automation-title{flex:1 1 auto;min-width:min(100%,150px)}
.automation-head .automation-title h3{
  margin:0 0 3px;font-size:16px;line-height:1.25;letter-spacing:-.01em;
  overflow-wrap:normal;word-break:normal}
.automation-head .automation-title p{
  margin:0;font-size:13px;line-height:1.45;color:var(--ink-soft,#657187);
  overflow-wrap:normal;word-break:normal}
.automation-head .nv-switch-wrap,.automation-head .status-pill{
  margin-left:auto;align-self:center;flex:0 0 auto}
.automation-card .automation-helper{
  margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--ink-soft,#657187)}
.automation-icon{flex:0 0 auto}
.automation-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.automation-actions .primary-button,.automation-actions .secondary-button{
  min-height:38px;padding:0 16px;font-size:13px;flex:0 0 auto}
.automation-card{display:flex;flex-direction:column}
.automation-card .automation-helper{flex:1 1 auto}

/* Secondary actions that used to sit on a card face now live with the settings
   they belong to, set apart from the save button so they cannot be mistaken
   for it. */
.modal-side-actions{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line,#e5eaf1)}
.modal-side-actions .secondary-button{min-height:38px;padding:0 16px;font-size:13px}

/* ── A card is a door ─────────────────────────────────────────────────────
   The face says what this is, whether it is on, and one line of state. Its
   own detailed settings live behind it, so the dashboard stays readable and
   each automation keeps a screen of its own instead of spilling three or four
   buttons onto the card. The switch stops its own click, so turning something
   on never opens the settings by accident. */
.automation-card.is-openable{cursor:pointer;transition:transform var(--fast,.18s) cubic-bezier(.4,0,.2,1),box-shadow var(--fast,.18s) cubic-bezier(.4,0,.2,1)}
.automation-card.is-openable:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(24,43,77,.10),0 2px 6px rgba(24,43,77,.06)}
.automation-card.is-openable:focus-visible{outline:2px solid var(--blue,#377cf6);outline-offset:3px}
.automation-card.is-openable:active{transform:translateY(0)}
.card-open-hint{
  display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;
  color:var(--blue,#377cf6);font-size:12px;font-weight:700}
.card-open-hint i{
  font-style:normal;font-size:16px;line-height:1;
  transition:transform var(--fast,.18s) cubic-bezier(.4,0,.2,1)}
.automation-card.is-openable:hover .card-open-hint i{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .automation-card.is-openable,.automation-card.is-openable:hover,.card-open-hint i{transition:none;transform:none}}

/* ---- Social comment & DM rule list -------------------------------------
   Four type sizes, each with one job, matching the scale used everywhere
   else: 15 for the sentence a person reads, 14 for the rule name, 12 for the
   secondary line, 11 for the micro tags. The previous version borrowed
   .activity-item — a timeline component — which put three unrelated sizes
   side by side and left the switch looking like just another button. */
.social-rule-list{display:grid;gap:12px}
.social-rule{
  border:1px solid var(--line,#e4e8ef);border-radius:14px;padding:14px 16px;
  background:var(--surface,#fff)}
.social-rule-head{display:flex;align-items:flex-start;gap:12px}
.social-rule-title{flex:1;min-width:0}
.social-rule-title h4{
  margin:0;font-size:15px;font-weight:650;line-height:1.35;
  color:var(--ink,#111827);overflow-wrap:break-word}
.social-rule-title p{
  margin:3px 0 0;font-size:12px;line-height:1.45;color:var(--ink-soft,#657187)}
.social-rule-state{
  margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink,#111827)}
.social-rule-extras{
  display:inline-block;margin-left:6px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.3px;color:var(--ink-soft,#657187)}
.social-rule-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.social-rule-actions .secondary-button{min-height:34px;font-size:13px}
.social-rule-note{
  margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--ink-soft,#657187)}
/* The switch keeps its own size; only stop it being squeezed by a long name. */
.social-rule-head .nv-switch-wrap{flex:0 0 auto}
@media (max-width:520px){
  .social-rule-head{flex-direction:column;align-items:stretch}
  .social-rule-head .nv-switch-wrap{align-self:flex-start}}