: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-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; }
.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; }
  .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; }
  .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; }
}