:root {
  --ink: #12343b;
  --deep: #073f49;
  --teal: #0aa2a8;
  --teal-soft: #dff5f3;
  --coral: #e46e4c;
  --gold: #e3a03c;
  --blue: #367f9b;
  --green: #2b9769;
  --paper: #f5f8f7;
  --white: #fff;
  --muted: #667d82;
  --line: #d7e4e3;
  --shadow: 0 18px 48px rgba(7, 63, 73, .12);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: "DM Sans", Arial, sans-serif; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.eyebrow { margin: 0 0 8px; color: var(--teal); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, p { letter-spacing: 0; }

.crm-auth { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); min-height: 100svh; overflow: hidden; color: white; }
.auth-image { position: absolute; z-index: -2; inset: -3%; background: url("assets/crm-background.jpg") center 58% / cover no-repeat; animation: authZoom 22s ease-in-out infinite alternate; }
.auth-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 45, 53, .9) 0%, rgba(5, 55, 63, .78) 53%, rgba(4, 41, 49, .6) 100%); }
@keyframes authZoom { to { transform: scale(1.055); } }
.auth-back { position: absolute; z-index: 3; top: 28px; right: 34px; color: rgba(255,255,255,.88); font-size: .85rem; font-weight: 700; text-decoration: none; }
.auth-copy { align-self: end; max-width: 780px; padding: clamp(40px, 8vw, 120px); text-shadow: 0 2px 14px rgba(0,0,0,.32); }
.auth-copy img { width: 96px; height: 96px; margin-bottom: 28px; border: 3px solid rgba(255,255,255,.8); border-radius: 50%; object-fit: cover; box-shadow: 0 16px 34px rgba(0,0,0,.2); }
.auth-copy .eyebrow { color: #9ee9e2; }
.auth-copy h1 { margin: 0; font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(3rem, 6.5vw, 6.5rem); line-height: .98; }
.auth-copy > p:not(.eyebrow) { max-width: 650px; margin: 22px 0; color: rgba(255,255,255,.88); font-size: clamp(1rem, 1.4vw, 1.24rem); line-height: 1.6; }
.auth-signal { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.26); border-radius: 30px; background: rgba(255,255,255,.1); font-size: .8rem; font-weight: 700; backdrop-filter: blur(8px); }
.auth-signal span, .status-dot, .sync-chip span { width: 8px; height: 8px; border-radius: 50%; background: #59d694; box-shadow: 0 0 0 5px rgba(89,214,148,.14); }
.auth-card { align-self: center; width: min(480px, calc(100% - 48px)); margin: 72px auto 40px; padding: clamp(26px, 4vw, 46px); border: 1px solid rgba(255,255,255,.5); border-radius: 8px; background: rgba(253,255,254,.94); color: var(--ink); box-shadow: 0 30px 80px rgba(2,34,40,.28); backdrop-filter: blur(18px); }
.auth-card h2 { margin: 0 0 8px; font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.45rem); }
.auth-card > p:not(.eyebrow) { margin: 0 0 24px; color: var(--muted); }
.auth-card label, .route-builder label { display: grid; gap: 7px; margin: 13px 0 0; color: var(--deep); font-size: .82rem; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); outline: none; }
input, select { min-height: 46px; padding: 10px 13px; }
textarea { padding: 12px 13px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(10,162,168,.12); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 52px; }
.password-wrap .icon-button { position: absolute; top: 4px; right: 4px; }
.icon-button, .top-icon, .menu-button, .filter-button, .composer button { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--deep); }
.icon-button svg, .top-icon svg, .menu-button svg, .filter-button svg, .composer button svg { width: 18px; height: 18px; }
.auth-error { min-height: 32px; padding-top: 10px; color: #b93d45; font-size: .82rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 17px; border: 1px solid transparent; border-radius: 6px; font-weight: 800; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-1px); }
.button svg { width: 18px; height: 18px; }
.button-primary { background: var(--deep); color: white; box-shadow: 0 8px 20px rgba(7,63,73,.18); }
.button-primary:hover { background: #0b5660; }
.button-secondary { border-color: var(--line); background: white; color: var(--deep); }
.button-light { background: white; color: var(--deep); }
.button.full { width: 100%; }

.crm-app { display: grid; grid-template-columns: 246px minmax(0, 1fr); min-height: 100svh; }
.sidebar { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; height: 100svh; padding: 20px 14px; background: var(--deep); color: white; }
.side-brand { display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 0 8px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.side-brand img { width: 43px; height: 43px; border: 2px solid rgba(255,255,255,.62); border-radius: 50%; object-fit: cover; }
.side-brand strong, .side-brand small { display: block; }
.side-brand strong { font-family: "Libre Baskerville", Georgia, serif; font-size: .96rem; }
.side-brand small { margin-top: 3px; color: rgba(255,255,255,.58); font-size: .7rem; }
.side-nav { display: grid; gap: 4px; margin-top: 22px; }
.nav-item, .side-logout { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: rgba(255,255,255,.72); text-align: left; }
.nav-item svg, .side-logout svg { width: 18px; height: 18px; }
.nav-item b { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 12px; background: var(--coral); color: white; font-size: .68rem; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.12); color: white; }
.nav-item.active { box-shadow: inset 3px 0 0 #6de0d6; }
.side-status { display: flex; align-items: center; gap: 11px; margin-top: auto; padding: 14px 12px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.84); }
.side-status strong, .side-status small { display: block; }
.side-status strong { font-size: .76rem; }
.side-status small { margin-top: 2px; color: rgba(255,255,255,.48); font-size: .67rem; }
.side-logout { grid-template-columns: 22px 1fr; margin-top: 4px; color: rgba(255,255,255,.66); }
.app-main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; min-height: 76px; padding: 10px 26px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); }
.menu-button { display: none; margin-right: 12px; }
.top-title p { margin: 0; color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.top-title h1 { margin: 2px 0 0; font-family: "Libre Baskerville", Georgia, serif; font-size: 1.28rem; }
.top-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.global-search { position: relative; display: block; width: min(300px, 24vw); }
.global-search svg { position: absolute; top: 13px; left: 12px; width: 17px; color: var(--muted); }
.global-search input { min-height: 42px; padding-left: 38px; background: var(--paper); }
.top-icon { position: relative; }
.top-icon > span { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border: 1px solid white; border-radius: 50%; background: var(--coral); }
.profile-chip { display: flex; align-items: center; gap: 9px; padding-left: 4px; }
.profile-chip > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--teal-soft); color: var(--deep); font-size: .75rem; font-weight: 800; }
.profile-chip strong, .profile-chip small { display: block; }
.profile-chip strong { font-size: .78rem; }
.profile-chip small { color: var(--muted); font-size: .66rem; }
.workspace { width: min(1500px, 100%); margin: 0 auto; padding: 26px; }
.crm-view { display: none; }
.crm-view.active { display: block; animation: viewIn .28s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(7px); } }

.welcome-band { position: relative; isolation: isolate; display: flex; align-items: end; justify-content: space-between; gap: 30px; min-height: 250px; padding: clamp(28px, 4vw, 54px); overflow: hidden; border-radius: 8px; background: var(--deep); color: white; }
.welcome-band::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("assets/campaign-family.jpg") center 48% / cover no-repeat; }
.welcome-band::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(4,46,54,.93) 0%, rgba(4,46,54,.7) 60%, rgba(4,46,54,.3)); }
.welcome-band > div { max-width: 780px; }
.welcome-band .eyebrow { color: #83e3da; }
.welcome-band h2 { max-width: 720px; margin: 0; font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.08; }
.welcome-band p:not(.eyebrow) { max-width: 720px; margin: 16px 0 0; color: rgba(255,255,255,.8); line-height: 1.55; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.kpi { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.kpi-icon { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 50%; }
.kpi-icon svg { width: 20px; }
.kpi-icon.teal { background: #dff5f3; color: var(--teal); }.kpi-icon.coral { background: #fae8e2; color: var(--coral); }.kpi-icon.blue { background: #e1eef3; color: var(--blue); }.kpi-icon.gold { background: #fbf0d7; color: #b77b1f; }
.kpi small, .kpi strong, .kpi em { display: block; }
.kpi small { color: var(--muted); font-size: .72rem; }
.kpi strong { margin: 2px 0; font-family: "Libre Baskerville", Georgia, serif; font-size: 1.6rem; }
.kpi em { overflow: hidden; color: var(--green); font-size: .68rem; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.overview-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 16px; margin-top: 16px; }
.activity-panel, .funnel-panel, .campaign-row, .chart-panel, .channel-panel, .post-performance { padding: 22px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-heading h3 { margin: 0; font-family: "Libre Baskerville", Georgia, serif; font-size: 1.15rem; }
.text-button { border: 0; background: transparent; color: var(--teal); font-size: .76rem; font-weight: 800; }
.mini-badge { padding: 7px 10px; border-radius: 20px; background: var(--teal-soft); color: var(--deep); font-size: .72rem; }
.priority-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid #edf2f1; }
.priority-item:first-child { border-top: 0; }
.priority-avatar, .lead-avatar { display: grid; place-items: center; border-radius: 50%; background: var(--teal-soft); color: var(--deep); font-size: .72rem; font-weight: 800; }
.priority-avatar { width: 40px; height: 40px; }
.priority-item strong, .priority-item small { display: block; }
.priority-item strong { font-size: .82rem; }
.priority-item small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.priority-item em { padding: 6px 8px; border-radius: 16px; background: #fff0e9; color: #a64f35; font-size: .66rem; font-style: normal; font-weight: 800; }
.mini-funnel { display: grid; gap: 7px; }
.mini-funnel div { display: flex; align-items: center; justify-content: space-between; width: var(--w); min-width: 32%; height: 34px; padding: 0 11px; border-radius: 4px; background: color-mix(in srgb, var(--c) 17%, white); border-left: 5px solid var(--c); color: var(--deep); font-size: .72rem; }
.funnel-note, .analysis-callout, .channel-insight { display: flex; gap: 10px; margin-top: 16px; padding: 12px; border-radius: 6px; background: #fff7e8; color: #775321; font-size: .73rem; line-height: 1.45; }
.funnel-note svg, .analysis-callout svg, .channel-insight svg { flex: 0 0 auto; width: 18px; }
.campaign-row { margin-top: 16px; }
.campaign-mini-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 9px; }
.campaign-mini { position: relative; display: block; width: 100%; min-height: 125px; padding: 12px; overflow: hidden; border: 0; border-radius: 6px; background: #123; color: white; text-align: left; text-decoration: none; cursor: pointer; }
.campaign-mini::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,42,49,.88), rgba(5,42,49,.12)), var(--img) center / cover; transition: transform .35s ease; }
.campaign-mini:hover::before { transform: scale(1.04); }
.campaign-mini span { position: absolute; z-index: 1; right: 10px; bottom: 10px; left: 10px; font-size: .74rem; font-weight: 800; }

.inbox-layout { display: grid; grid-template-columns: 310px minmax(420px, 1fr) 290px; min-height: calc(100svh - 128px); margin: -26px; background: white; }
.conversation-list { border-right: 1px solid var(--line); background: #fbfdfc; }
.conversation-tools { display: flex; gap: 8px; padding: 16px; border-bottom: 1px solid var(--line); }
.conversation-tools label { position: relative; flex: 1; }
.conversation-tools label svg { position: absolute; top: 13px; left: 11px; width: 16px; color: var(--muted); }
.conversation-tools input { min-height: 40px; padding-left: 35px; }
.conversation-tabs { display: flex; padding: 0 14px; border-bottom: 1px solid var(--line); }
.conversation-tabs button { flex: 1; padding: 13px 4px 11px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 700; }
.conversation-tabs button.active { border-color: var(--teal); color: var(--deep); }
.conversation-tabs span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 3px; border-radius: 11px; background: #edf3f2; }
.conversation-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 9px; padding: 14px 13px; border: 0; border-bottom: 1px solid #e8efee; background: transparent; color: var(--ink); text-align: left; }
.conversation-row:hover, .conversation-row.active { background: #eaf7f5; }
.conversation-row.active { box-shadow: inset 3px 0 0 var(--teal); }
.conversation-row .priority-avatar { width: 42px; height: 42px; }
.conversation-row strong, .conversation-row small, .conversation-row em { display: block; }
.conversation-row strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row em { color: var(--muted); font-size: .62rem; font-style: normal; }
.conversation-row b { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 5px; border-radius: 50%; background: var(--teal); color: white; font-size: .61rem; }
.chat-stage { display: grid; grid-template-rows: auto auto minmax(240px, 1fr) auto auto; min-width: 0; background: #f4f8f7; }
.chat-header { display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; align-items: center; gap: 10px; min-height: 72px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: white; }
.lead-avatar { width: 42px; height: 42px; }
.chat-header strong, .chat-header span { display: block; }
.chat-header strong { font-size: .85rem; }.chat-header div > span { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.intent-pill { padding: 7px 10px; border-radius: 16px; background: #e5f6ee; color: #267653; font-size: .66rem; font-weight: 800; }
.chat-context { display: flex; gap: 8px; overflow-x: auto; padding: 10px 18px; border-bottom: 1px solid var(--line); background: white; scrollbar-width: none; }
.context-chip { flex: 0 0 auto; padding: 6px 9px; border-radius: 15px; background: #eef4f3; color: var(--muted); font-size: .65rem; }
.message-stream { overflow-y: auto; padding: 22px; background-image: radial-gradient(circle at 12px 12px, rgba(7,63,73,.035) 1px, transparent 1px); background-size: 24px 24px; }
.message { display: grid; max-width: 72%; margin: 0 0 13px; }
.message p { margin: 0; padding: 10px 12px; border-radius: 8px 8px 8px 2px; background: white; box-shadow: 0 4px 12px rgba(7,63,73,.06); font-size: .78rem; line-height: 1.5; }
.message small { margin-top: 3px; color: var(--muted); font-size: .58rem; }
.message.out { margin-left: auto; justify-items: end; }
.message.out p { border-radius: 8px 8px 2px 8px; background: #dff5f1; }
.reply-suggestions { padding: 10px 16px; border-top: 1px solid var(--line); background: white; }
.reply-suggestions > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .62rem; font-weight: 700; }
.reply-suggestions > div { display: flex; gap: 6px; overflow-x: auto; }
.suggestion { flex: 0 0 auto; max-width: 260px; padding: 7px 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; color: var(--deep); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.composer { display: grid; grid-template-columns: 38px minmax(0,1fr) 42px; align-items: end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); background: white; }
.composer textarea { min-height: 42px; max-height: 110px; resize: none; }
.composer .send-button { width: 42px; height: 42px; border-color: var(--teal); background: var(--teal); color: white; }
.analysis-panel { padding: 20px; border-left: 1px solid var(--line); background: white; }
.analysis-panel h3 { margin: 0 0 18px; font-family: "Libre Baskerville", Georgia, serif; font-size: 1.12rem; }
.analysis-score { position: relative; display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.analysis-score > div { flex: 1; }.analysis-score strong, .analysis-score span { display: block; }.analysis-score strong { font-family: "Libre Baskerville", Georgia, serif; font-size: 1.75rem; }.analysis-score span { color: var(--muted); font-size: .65rem; }
.analysis-score svg { width: 58px; height: 58px; transform: rotate(-90deg); }.analysis-score circle { fill: none; stroke: #e5eeee; stroke-width: 4; }.analysis-score .score-ring { stroke: var(--teal); stroke-dasharray: 86 100; stroke-linecap: round; }
.lead-facts { margin: 18px 0; }.lead-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #edf2f1; }.lead-facts dt { color: var(--muted); font-size: .68rem; }.lead-facts dd { margin: 0; font-size: .7rem; font-weight: 800; text-align: right; }
.analysis-callout { background: #edf8f6; color: var(--deep); }.analysis-callout p { margin: 0; }

.view-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 4px 0 26px; border-bottom: 1px solid var(--line); }
.view-intro > div:first-child { max-width: 850px; }.view-intro h2 { margin: 0; font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(2rem, 3.5vw, 3.8rem); line-height: 1.1; }.view-intro p:not(.eyebrow) { max-width: 780px; margin: 13px 0 0; color: var(--muted); line-height: 1.55; }
.route-stats, .journey-summary { display: flex; flex-wrap: wrap; gap: 22px; padding: 18px 0; }.route-stats span, .journey-summary span { color: var(--muted); font-size: .78rem; }.route-stats strong, .journey-summary strong { margin-right: 5px; color: var(--deep); font-family: "Libre Baskerville", Georgia, serif; font-size: 1.25rem; }
.route-list { display: grid; gap: 10px; }
.route-card { display: grid; grid-template-columns: 46px minmax(170px,.7fr) minmax(260px,1.6fr) 120px auto; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.route-card > i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); }.route-card > i svg { width: 19px; }.route-card h3, .route-card p { margin: 0; }.route-card h3 { font-size: .84rem; }.route-card p { color: var(--muted); font-size: .7rem; line-height: 1.45; }.keyword-list { display: flex; flex-wrap: wrap; gap: 5px; }.keyword-list span { padding: 5px 7px; border-radius: 14px; background: #eef3f2; color: var(--muted); font-size: .62rem; }.route-result strong, .route-result small { display: block; }.route-result strong { font-size: .84rem; }.route-result small { color: var(--muted); font-size: .62rem; }.toggle { position: relative; width: 39px; height: 22px; border: 0; border-radius: 14px; background: #b8c6c5; }.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform .2s; }.toggle.on { background: var(--green); }.toggle.on::after { transform: translateX(17px); }
.route-builder { max-width: 920px; margin: 18px auto 0; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: var(--shadow); }.builder-heading { display: flex; justify-content: space-between; }.builder-heading h3 { margin: 0; font-family: "Libre Baskerville", Georgia, serif; font-size: 1.5rem; }.builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.builder-actions { display: flex; justify-content: end; gap: 10px; margin-top: 18px; }

.campaign-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding-top: 22px; }
.campaign-card { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: white; }
.campaign-visual { position: relative; min-height: 220px; background: var(--image) center / cover no-repeat; }.campaign-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,43,50,.78), rgba(4,43,50,.02) 70%); }.campaign-visual span { position: absolute; z-index: 1; right: 14px; bottom: 14px; padding: 6px 9px; border-radius: 14px; background: rgba(255,255,255,.9); color: var(--deep); font-size: .65rem; font-weight: 800; }.campaign-body { padding: 18px; }.campaign-body h3 { margin: 0; font-family: "Libre Baskerville", Georgia, serif; font-size: 1.32rem; }.campaign-body p { min-height: 63px; margin: 9px 0 14px; color: var(--muted); font-size: .77rem; line-height: 1.5; }.campaign-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }.campaign-metrics strong, .campaign-metrics small { display: block; }.campaign-metrics strong { font-size: .84rem; }.campaign-metrics small { color: var(--muted); font-size: .61rem; }.campaign-actions { display: flex; gap: 7px; }.campaign-actions .button { flex: 1; font-size: .7rem; }
.landing-dialog { width: min(1240px, calc(100% - 32px)); max-width: none; max-height: calc(100svh - 32px); padding: 0; overflow: auto; border: 0; border-radius: 8px; background: white; box-shadow: 0 34px 100px rgba(0,0,0,.34); }.landing-dialog::backdrop { background: rgba(4,34,40,.74); backdrop-filter: blur(5px); }.dialog-close { position: fixed; z-index: 8; top: 28px; right: max(28px, calc((100vw - 1240px)/2 + 16px)); display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(4,48,56,.72); color: white; backdrop-filter: blur(8px); }.landing-preview { --accent: var(--teal); }.landing-hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: min(72svh,760px); padding: clamp(32px,7vw,88px); overflow: hidden; color: white; }.landing-hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: var(--hero) center / cover no-repeat; }.landing-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(3,39,46,.92), rgba(3,39,46,.55) 62%, rgba(3,39,46,.18)); }.landing-hero > div { max-width: 760px; }.landing-hero .landing-logo { width: 74px; height: 74px; border: 2px solid white; border-radius: 50%; object-fit: cover; }.landing-hero h2 { margin: 20px 0 0; font-family: "Libre Baskerville",Georgia,serif; font-size: clamp(2.7rem,6vw,6rem); line-height: 1.04; }.landing-hero p { max-width: 680px; color: rgba(255,255,255,.86); font-size: 1.05rem; line-height: 1.6; }.landing-hero .button { background: var(--accent); color: white; }.landing-content { padding: clamp(34px,6vw,76px); }.landing-proof { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 0 0 58px; background: var(--line); }.landing-proof article { padding: 24px; background: white; }.landing-proof strong, .landing-proof span { display: block; }.landing-proof strong { font-family: "Libre Baskerville",Georgia,serif; font-size: 2rem; }.landing-proof span { margin-top: 5px; color: var(--muted); font-size: .74rem; }.landing-story { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px,6vw,80px); align-items: center; }.landing-story img { width: 100%; max-height: 560px; border-radius: 7px; object-fit: cover; }.landing-story h3 { margin: 0; font-family: "Libre Baskerville",Georgia,serif; font-size: clamp(2rem,4vw,3.8rem); line-height: 1.12; }.landing-story p { color: var(--muted); line-height: 1.7; }.landing-points { display: grid; gap: 10px; margin: 22px 0; }.landing-points span { display: flex; gap: 9px; align-items: center; }.landing-points i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: color-mix(in srgb,var(--accent) 15%,white); color: var(--accent); font-style: normal; font-weight: 800; }

.sync-chip { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 18px; background: white; color: var(--muted); font-size: .72rem; font-weight: 700; }.meta-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 20px 0; }.meta-kpis article { padding: 18px; border-left: 4px solid var(--teal); background: white; }.meta-kpis small,.meta-kpis strong,.meta-kpis em { display: block; }.meta-kpis small { color: var(--muted); font-size: .7rem; }.meta-kpis strong { margin: 5px 0; font-family: "Libre Baskerville",Georgia,serif; font-size: 1.65rem; }.meta-kpis em { color: var(--green); font-size: .7rem; font-style: normal; }.meta-kpis em.good { color: var(--green); }.meta-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.5fr); gap: 16px; }.chart-legend { display: flex; gap: 12px; color: var(--muted); font-size: .68rem; }.chart-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }.chart-legend .cyan::before { background: var(--teal); }.chart-legend .coral::before { background: var(--coral); }.line-chart { position: relative; height: 300px; }.grid-lines { position: absolute; inset: 0 0 28px; background: repeating-linear-gradient(to bottom, transparent 0 58px, #e8efee 59px 60px); }.line-chart svg { position: relative; width: 100%; height: calc(100% - 26px); overflow: visible; }.line-chart .area { fill: rgba(10,162,168,.08); }.line-main,.line-second { fill: none; stroke-width: 4; vector-effect: non-scaling-stroke; }.line-main { stroke: var(--teal); }.line-second { stroke: var(--coral); stroke-width: 3; }.axis-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: .62rem; }.channel-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #edf2f1; }.channel-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: white; font-weight: 800; }.channel-icon svg { width: 17px; }.channel-icon.instagram { background: #d64775; }.channel-icon.facebook { background: #3977c4; }.channel-icon.whatsapp { background: #35a96d; }.channel-row strong,.channel-row small { display:block; }.channel-row strong { font-size: .78rem; }.channel-row small { color:var(--muted);font-size:.65rem; }.channel-row b { font-size:.8rem; }.channel-insight { margin-top: 22px; background:#edf8f6;color:var(--deep); }.channel-insight p { margin:0; }.post-performance { margin-top:16px; }.post-table { min-width: 680px; }.post-performance { overflow-x:auto; }.post-row { display:grid;grid-template-columns:minmax(250px,1.6fr) repeat(4,minmax(90px,.5fr));align-items:center;gap:12px;padding:12px 4px;border-top:1px solid #edf2f1;font-size:.72rem; }.post-row.header { color:var(--muted);font-size:.63rem;font-weight:800;text-transform:uppercase; }.post-row > span:first-child { display:flex;align-items:center;gap:10px; }.post-thumb { width:42px;height:42px;border-radius:5px;background-size:cover;background-position:center; }.post-thumb.p1 { background-image:url("assets/campaign-woman.jpg"); }.post-thumb.p2 { background-image:url("assets/campaign-family.jpg"); }.post-thumb.p3 { background-image:url("assets/campaign-youth.jpg"); }.result-up,.result-mid { width:fit-content;padding:5px 8px;border-radius:13px;font-weight:800; }.result-up { background:#e4f6ed;color:#267653; }.result-mid { background:#fff3d9;color:#8d651e; }

.journey-period { display:flex;padding:4px;border:1px solid var(--line);border-radius:6px;background:white; }.journey-period button { padding:8px 11px;border:0;border-radius:4px;background:transparent;color:var(--muted);font-size:.7rem;font-weight:700; }.journey-period button.active { background:var(--deep);color:white; }.journey-map { position:relative;min-height:480px;margin-top:10px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#fff,#edf5f3); }.journey-map::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 100%,rgba(10,162,168,.11),transparent 45%),linear-gradient(90deg,transparent 49.8%,rgba(7,63,73,.03) 50%,transparent 50.2%); }.map-path { position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 500'%3E%3Cpath d='M80 350 C210 350 215 120 340 140 S470 390 590 335 S710 90 830 125 S990 370 1120 290' fill='none' stroke='%2394c8c4' stroke-width='10' stroke-linecap='round' stroke-dasharray='2 20'/%3E%3C/svg%3E") center/100% 100% no-repeat; }.journey-stop { position:absolute;left:var(--x);top:var(--y);width:150px;min-height:150px;padding:18px 12px 12px;transform:translate(-50%,-50%);border:2px solid var(--color);border-radius:50%;background:white;text-align:center;box-shadow:0 14px 30px rgba(7,63,73,.12);animation:floatStop 5s ease-in-out infinite alternate; }.journey-stop:nth-of-type(even){animation-delay:-2s}.journey-stop svg { width:22px;color:var(--color); }.stop-number { position:absolute;top:-7px;right:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color);color:white;font-size:.68rem;font-weight:800; }.journey-stop h3 { margin:5px 0 2px;font-size:.76rem; }.journey-stop strong,.journey-stop small,.journey-stop em { display:block; }.journey-stop strong { font-family:"Libre Baskerville",Georgia,serif;font-size:1.35rem; }.journey-stop small { color:var(--muted);font-size:.58rem; }.journey-stop em { margin-top:5px;color:#a46418;font-size:.56rem;font-style:normal;font-weight:800; }.alert-stop { box-shadow:0 0 0 8px rgba(227,160,60,.13),0 14px 30px rgba(7,63,73,.12); }.journey-stop.selected { box-shadow:0 0 0 9px color-mix(in srgb,var(--color) 17%,transparent),0 18px 40px rgba(7,63,73,.2); }.journey-stop:nth-of-type(3){animation-delay:-1s}.journey-stop:nth-of-type(4){animation-delay:-3s}.journey-stop:nth-of-type(5){animation-delay:-4s}.journey-stop:nth-of-type(6){animation-delay:-2.5s}@keyframes floatStop{to{transform:translate(-50%,calc(-50% - 7px))}}.bottleneck-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px; }.bottleneck-grid article { display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px;border:1px solid var(--line);border-radius:7px;background:white; }.bottleneck-grid h3,.bottleneck-grid p { margin:0; }.bottleneck-grid h3 { font-size:.9rem; }.bottleneck-grid p:not(.eyebrow) { margin-top:5px;color:var(--muted);font-size:.7rem;line-height:1.45; }.warning-icon,.opportunity-icon { display:grid;place-items:center;width:46px;height:46px;border-radius:50%; }.warning-icon { background:#fff0da;color:#b67418; }.opportunity-icon { background:#e3f5ed;color:var(--green); }.warning-icon svg,.opportunity-icon svg{width:21px}
.toast { position:fixed;z-index:100;right:22px;bottom:22px;max-width:360px;padding:13px 16px;border-radius:6px;background:var(--deep);color:white;box-shadow:var(--shadow);font-size:.76rem;font-weight:700;opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s ease; }.toast.show{opacity:1;transform:none}

@media (max-width: 1220px) {
  .crm-app { grid-template-columns: 84px minmax(0,1fr); }.side-brand span,.nav-item span,.side-status div,.side-logout span { display:none; }.side-brand { justify-content:center;padding-inline:0; }.nav-item,.side-logout { grid-template-columns:1fr;justify-items:center; }.nav-item b { position:absolute;margin:0 0 22px 22px; }.side-status { justify-content:center; }.inbox-layout { grid-template-columns:270px minmax(400px,1fr); }.analysis-panel { display:none; }.campaign-mini-grid { grid-template-columns:repeat(3,1fr); }.campaign-grid { grid-template-columns:repeat(2,1fr); }.route-card { grid-template-columns:42px minmax(150px,.7fr) minmax(220px,1.4fr) 90px auto; }.bottleneck-grid { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
  .crm-auth { grid-template-columns:1fr; }.auth-copy { display:none; }.auth-card { margin-top:100px; }.crm-app { display:block; }.sidebar { position:fixed;left:0;transform:translateX(-105%);width:250px;transition:transform .25s ease;box-shadow:20px 0 50px rgba(0,0,0,.2); }.sidebar.open { transform:none; }.side-brand span,.nav-item span,.side-status div,.side-logout span { display:block; }.nav-item,.side-logout { grid-template-columns:22px minmax(0,1fr) auto;justify-items:stretch; }.side-status { justify-content:flex-start; }.menu-button { display:inline-grid; }.topbar { padding-inline:14px; }.global-search { display:none; }.workspace { padding:16px; }.welcome-band { min-height:330px; }.kpi-grid { grid-template-columns:1fr 1fr; }.overview-grid,.meta-layout { grid-template-columns:1fr; }.campaign-mini-grid { grid-template-columns:1fr 1fr; }.inbox-layout { grid-template-columns:270px minmax(420px,1fr);margin:-16px;overflow-x:auto; }.view-intro { align-items:flex-start;flex-direction:column; }.route-card { grid-template-columns:42px minmax(0,1fr) auto; }.route-card .keyword-list,.route-card .route-result { grid-column:2/4; }.campaign-grid { grid-template-columns:1fr 1fr; }.meta-kpis { grid-template-columns:1fr 1fr; }.journey-map { min-width:820px; }.crm-view[data-section="journey"] { overflow-x:auto; }.landing-story { grid-template-columns:1fr; }.landing-proof { grid-template-columns:1fr; }.landing-dialog { width:calc(100% - 18px);max-height:calc(100svh - 18px); }.dialog-close { top:16px;right:16px; }
}
@media (max-width: 620px) {
  .auth-back { top:18px;right:18px; }.auth-card { width:calc(100% - 24px);margin-top:76px;padding:24px; }.top-title h1 { font-size:1rem; }.top-actions .top-icon,.profile-chip div { display:none; }.profile-chip > span { width:34px;height:34px; }.welcome-band { align-items:flex-start;flex-direction:column;min-height:420px;padding:25px; }.welcome-band h2 { font-size:2.25rem; }.kpi-grid { grid-template-columns:1fr; }.campaign-mini-grid { grid-template-columns:1fr; }.activity-panel,.funnel-panel,.campaign-row,.chart-panel,.channel-panel,.post-performance { padding:16px; }.campaign-grid { grid-template-columns:1fr; }.meta-kpis { grid-template-columns:1fr; }.route-card { grid-template-columns:42px minmax(0,1fr) auto;padding:13px; }.builder-grid { grid-template-columns:1fr; }.inbox-layout { display:block;margin:-16px; }.conversation-list { min-height:calc(100svh - 76px); }.chat-stage { display:none; }.inbox-layout.chat-open .conversation-list { display:none; }.inbox-layout.chat-open .chat-stage { display:grid;min-height:calc(100svh - 76px); }.chat-header::before { content:"‹";font-size:1.8rem;cursor:pointer; }.chat-header { grid-template-columns:22px 42px minmax(0,1fr) auto; }.chat-header .intent-pill,.chat-header .top-icon { display:none; }.message { max-width:88%; }.view-intro h2 { font-size:2.15rem; }.landing-hero { min-height:82svh;padding:24px; }.landing-hero h2 { font-size:2.7rem; }.landing-content { padding:28px 20px; }.journey-summary { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.bottleneck-grid article { grid-template-columns:42px 1fr; }.bottleneck-grid .button { grid-column:1/-1; }.toast { right:12px;bottom:12px;left:12px;max-width:none; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important; } }