:root { --navy:#031b3e; --navy-2:#082955; --ink:#0e1930; --muted:#66758b; --line:#e2e8f0; --surface:#fff; --blue:#1269f5; --teal:#08a9a4; --amber:#e99818; --slate:#94a3b8; --radius:10px; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:#f7f9fc; font:14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:240px minmax(0,1fr); }
.sidebar { background:linear-gradient(155deg, var(--navy), #021630); color:#fff; padding:30px 18px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand { color:#fff; text-decoration:none; display:flex; align-items:center; gap:11px; font-size:21px; letter-spacing:-.7px; margin:0 8px 46px; }.brand b { font-weight:500; }.brand-mark { height:31px; width:26px; display:flex; align-items:flex-end; gap:3px; }.brand-mark i { background:#1681ff; width:6px; border-radius:3px; display:block; }.brand-mark i:nth-child(1){height:14px}.brand-mark i:nth-child(2){height:23px}.brand-mark i:nth-child(3){height:31px}
nav { display:grid; gap:6px; }.nav-item { color:#e5edf8; text-decoration:none; padding:13px 15px; border-radius:7px; font-size:15px; }.nav-item:hover,.nav-item.active { background:#123b74; color:#fff; }.nav-item.active { box-shadow:inset 3px 0 0 #32a5ff; }
.sidebar-foot { margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 8px 0; font-size:13px; color:#d4dfed; }.avatar { width:30px; height:30px; border:1px solid #4374ad; border-radius:50%; display:grid; place-items:center; font-size:11px; }
main { padding:34px 42px 28px; max-width:1620px; width:100%; margin:auto; }.page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:22px; margin-bottom:25px; }h1,h2,p { margin:0; }h1 { font-size:31px; letter-spacing:-1.1px; line-height:1.2; }h2 { font-size:16px; letter-spacing:-.25px; } .page-header p,.panel-heading p { color:var(--muted); margin-top:5px; }
.range-controls { display:flex; gap:9px; align-items:end; }.range-controls label { display:grid; gap:4px; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }.range-controls input { border:1px solid #cbd5e1; border-radius:7px; padding:10px; color:var(--ink); background:#fff; font:inherit; }.button { border-radius:7px; padding:11px 15px; font:600 13px inherit; cursor:pointer; }.button.primary { border:1px solid var(--blue); background:var(--blue); color:#fff; }.button.secondary { border:1px solid #cbd5e1; background:#fff; color:var(--ink); }.button:disabled{opacity:.65;cursor:wait}.notice { background:#fff8de; color:#715811; border:1px solid #f5dc83; border-radius:var(--radius); padding:11px 14px; margin:-8px 0 18px; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }.kpi { padding:21px 22px; border-right:1px solid var(--line); min-height:130px; position:relative; }.kpi:last-child { border:0; }.kpi p { color:#475569; margin-bottom:9px; }.kpi strong { display:block; font-size:30px; letter-spacing:-1px; }.kpi small { color:var(--muted); display:block; margin-top:7px; }.metric-icon { display:block; height:8px; width:8px; border-radius:50%; position:absolute; right:20px; top:24px; }.metric-icon.blue { background:var(--blue); }.metric-icon.teal { background:var(--teal); }
.overview-grid { display:grid; grid-template-columns:minmax(0,2.4fr) minmax(280px,1fr); gap:14px; margin:14px 0; }.lower-grid { display:grid; grid-template-columns:1fr 1fr 1.55fr; gap:14px; }.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; min-height:245px; }.panel-heading { display:flex; justify-content:space-between; gap:10px; margin-bottom:15px; }.legend { color:var(--muted); font-size:12px; display:flex; align-items:center; gap:6px; }.line { height:2px; width:16px; background:var(--blue); display:inline-block; margin-left:8px; }.line.teal { background:var(--teal); }.line-chart { height:250px; }.line-chart svg { width:100%; height:100%; }.grid path { stroke:#e6edf5; stroke-dasharray:2 4; }.plot { fill:none; stroke-width:3; stroke-linecap:round; }.plot.blue { stroke:var(--blue); }.plot.teal { stroke:var(--teal); }
.insight { display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--line); }.insight:last-child { border:0; }.insight-dot { width:10px; height:10px; border-radius:50%; margin-top:5px; flex:0 0 auto; }.insight-dot.teal { background:var(--teal); }.insight-dot.amber { background:var(--amber); }.insight-dot.slate { background:var(--slate); }.insight strong { font-size:13px; }.insight p { color:var(--muted); font-size:12px; margin-top:2px; }
.channel-list { display:grid; gap:14px; padding-top:8px; }.channel { display:flex; align-items:center; justify-content:space-between; }.channel span { color:#41516a; }.channel b { font-size:16px; }.channel-dot { height:10px; width:10px; border-radius:50%; display:inline-block; margin-right:8px; background:var(--blue); }.channel-dot.c1{background:var(--teal)}.channel-dot.c2{background:#8a5ad8}.channel-dot.c3{background:var(--amber)}.seo-stats { display:grid; grid-template-columns:1fr; gap:12px; }.seo-stats div { border-bottom:1px solid var(--line); padding:0 0 11px; }.seo-stats div:last-child { border:0; }.seo-stats span,.seo-stats small { display:block; color:var(--muted); font-size:12px; }.seo-stats strong { display:block; font-size:24px; margin:2px 0; }
.table-wrap { overflow-x:auto; }table { width:100%; border-collapse:collapse; }th { color:var(--muted); font-size:11px; text-align:left; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }th,td { padding:10px 4px; border-bottom:1px solid var(--line); white-space:nowrap; }td { font-size:13px; }.tag { border-radius:4px; padding:3px 7px; font-size:11px; font-weight:700; }.tag.active { color:#087a60; background:#dff7ee; }.tag.trialing { color:#075bbb; background:#e0efff; }.muted,.empty { color:var(--muted); font-size:13px; }.empty { padding:35px 0; }
.source-strip { margin-top:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); display:grid; grid-template-columns:repeat(4,1fr); }.source { padding:14px 17px; display:flex; align-items:center; gap:10px; border-right:1px solid var(--line); }.source:last-child{border:0}.source-state { height:9px; width:9px; border-radius:50%; background:#cbd5e1; }.source-state.connected { background:var(--teal); box-shadow:0 0 0 3px #def7f4; }.source strong,.source small { display:block; }.source strong { font-size:13px; }.source small { color:var(--muted); font-size:11px; }footer { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px; padding:16px 4px 0; }.status-dot { height:8px; width:8px; border-radius:50%; background:var(--teal); }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(145deg, var(--navy), #0a356c); }.login-card { width:min(100%, 420px); margin:0; padding:42px; border-radius:14px; background:#fff; box-shadow:0 24px 70px rgba(0, 15, 45, .32); }.login-brand { color:var(--ink); margin:0 0 32px; font-size:20px; }.login-card h1 { font-size:27px; }.login-card > p { color:var(--muted); margin:8px 0 26px; }.login-form { display:grid; gap:17px; }.login-form label { display:grid; gap:7px; color:#334155; font-size:13px; font-weight:700; }.login-form input { width:100%; padding:12px; border:1px solid #cbd5e1; border-radius:7px; font:inherit; }.login-form .button { margin-top:4px; }.login-error { padding:10px; border-radius:7px; color:#aa2c2c !important; background:#fff0f0; border:1px solid #ffd2d2; }
.sources-main{max-width:1280px}.connection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.connection-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}.connection-heading{display:flex;justify-content:space-between;gap:16px}.connection-heading p,.connection-help{color:var(--muted);margin-top:6px}.connection-status{height:max-content;padding:4px 8px;border-radius:4px;color:#64748b;background:#edf2f7;font-size:12px;font-weight:700}.connection-status.connected{color:#087a60;background:#dff7ee}.connection-form{display:grid;gap:13px;margin:22px 0}.connection-form label{display:grid;gap:6px;color:#334155;font-size:12px;font-weight:700}.connection-form input{border:1px solid #cbd5e1;border-radius:7px;padding:11px;font:inherit}.connection-help{font-size:12px;line-height:1.55}.connection-help code{color:#0c4da2;overflow-wrap:anywhere}.button.disabled{pointer-events:none;opacity:.5}@media(max-width:760px){.connection-grid{grid-template-columns:1fr}.sources-main{padding:22px 14px}}
@media (max-width:1100px) { .app-shell{grid-template-columns:200px minmax(0,1fr)}main{padding:28px 24px}.page-header{display:block}.range-controls{margin-top:18px}.lower-grid{grid-template-columns:1fr 1fr}.table-panel{grid-column:1/-1}.source-strip{grid-template-columns:1fr 1fr}.source:nth-child(2){border-right:0}.source:nth-child(-n+2){border-bottom:1px solid var(--line)} }
@media (max-width:760px) { .app-shell{display:block}.sidebar{height:auto;position:static;padding:16px}.brand{margin:0 0 13px}.sidebar nav{display:flex;overflow-x:auto;scrollbar-width:none}.sidebar nav::-webkit-scrollbar{display:none}.nav-item{white-space:nowrap;padding:9px 11px}.sidebar-foot{display:none}main{padding:22px 14px}.range-controls{display:grid;grid-template-columns:1fr 1fr}.range-controls .button{width:100%}.kpi-grid,.overview-grid,.lower-grid{grid-template-columns:1fr}.kpi{border-right:0;border-bottom:1px solid var(--line)}.kpi:last-child{border-bottom:0}.table-panel{grid-column:auto}.source-strip{grid-template-columns:1fr}.source,.source:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}.source:last-child{border-bottom:0}h1{font-size:28px}.line-chart{height:200px}.legend{display:none} }

/* Data-source onboarding: deliberately spacious for sensitive integration setup. */
.sources-main { max-width: 1120px; padding-top: 48px; }
.sources-header { margin-bottom: 28px; }
.eyebrow, .source-kicker { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow { margin-bottom: 8px; }
.connection-stack { display: grid; gap: 18px; max-width: 940px; }
.connection-card { padding: 28px; box-shadow: 0 10px 25px rgba(15, 34, 64, .04); }
.connection-heading { align-items: flex-start; }
.connection-heading h2 { margin-top: 3px; font-size: 18px; }
.connection-heading p:not(.source-kicker) { max-width: 580px; }
.source-kicker { margin-bottom: 5px !important; }
.setup-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 0; padding: 16px; border: 1px solid #dce8fa; border-radius: 9px; background: #f5f9ff; }
.setup-steps > div { display: flex; gap: 10px; align-items: flex-start; }
.setup-steps span { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--blue); font-size: 12px; font-weight: 800; }
.setup-steps p { color: #40516a; font-size: 12px; line-height: 1.4; }
.setup-steps b, .setup-steps small { display: block; }
.setup-steps small { color: var(--muted); margin-top: 2px; }
.connection-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 18px; }
.connection-form label { min-width: 0; gap: 7px; }
.connection-form input { width: 100%; min-width: 0; padding: 12px; }
.field-wide { grid-column: 1 / -1; }
.field-optional { color: var(--muted); font-weight: 500; }
.form-actions { display: flex; align-items: center; gap: 12px; padding-top: 2px; }
.form-actions span { color: var(--muted); font-size: 12px; }
.connection-guide { padding: 15px 16px; border-radius: 8px; color: #4b5d77; background: #f8fafc; border-left: 3px solid #b9d4ff; font-size: 12px; line-height: 1.55; }
.connection-guide code { display: block; margin-top: 7px; color: #0c4da2; overflow-wrap: anywhere; }
.connection-action { display: inline-flex; margin-top: 18px; align-items: center; text-decoration: none; }
.button.disabled { pointer-events: none; opacity: .55; }
@media (max-width: 760px) {
  .sources-main { padding-top: 26px; }
  .connection-card { padding: 20px; }
  .connection-form, .setup-steps { grid-template-columns: 1fr; }
  .form-actions { align-items: flex-start; flex-direction: column; }
}