:root{
  --bg:#f5f7fb; --surface:#fff; --surface-2:#f9fbff; --text:#111827; --muted:#697386;
  --line:#e5eaf2; --nav:#0d1726; --nav-2:#142236; --brand:#2563eb; --brand-2:#1d4ed8;
  --green:#16a34a; --amber:#d97706; --red:#dc2626; --purple:#7c3aed; --cyan:#0891b2;
  --shadow:0 12px 32px rgba(15,23,42,.06); --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
.app-shell{min-height:100vh;display:flex}
.sidebar{position:fixed;inset:0 auto 0 0;width:270px;background:linear-gradient(180deg,var(--nav),#0a1320);color:#dce6f4;padding:25px 18px 18px;display:flex;flex-direction:column;z-index:20}
.brand-wrap{display:flex;align-items:center;gap:12px;padding:0 8px 24px}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#3b82f6,#6d5dfc);font-weight:900;color:#fff;font-size:21px;box-shadow:0 8px 22px rgba(37,99,235,.35)}
.brand{font-size:20px;font-weight:900;letter-spacing:-.4px;color:#fff}
.brand-sub{font-size:11px;color:#91a3bb;margin-top:2px;text-transform:uppercase;letter-spacing:1.2px}
.nav-label{font-size:10px;font-weight:800;letter-spacing:1.4px;color:#62748c;padding:18px 13px 8px}
.nav-item{display:flex;align-items:center;gap:12px;color:#b9c7d9;padding:11px 13px;border-radius:11px;margin:2px 0;font-size:14px;font-weight:600;transition:.18s}
.nav-item:hover{background:rgba(255,255,255,.055);color:#fff}
.nav-item.active{background:#1a2a42;color:#fff;box-shadow:inset 3px 0 0 #4f8cff}
.nav-icon{width:22px;text-align:center;color:#94a9c3;font-size:17px}
.nav-item.active .nav-icon{color:#6ba1ff}
.sidebar-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding:18px 8px 4px;display:flex;gap:10px;align-items:center}
.sidebar-footer strong,.sidebar-footer small{display:block}.sidebar-footer strong{font-size:12px;color:#dfe7f2}.sidebar-footer small{font-size:10px;color:#7f91a8;margin-top:3px}
.status-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12);flex:0 0 auto}
.status-dot.warning{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.12)}
.main{margin-left:270px;width:calc(100% - 270px);min-height:100vh;display:flex;flex-direction:column}
.topbar{min-height:90px;background:rgba(245,247,251,.93);backdrop-filter:blur(10px);display:flex;align-items:center;padding:18px 32px;border-bottom:1px solid #edf0f5;position:sticky;top:0;z-index:10;gap:16px}
.topbar h1{margin:0;font-size:25px;letter-spacing:-.5px}.topbar p{margin:4px 0 0;color:var(--muted);font-size:13px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.demo-pill,.tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#fff7ed;color:#b45309;border:1px solid #fed7aa;font-size:11px;font-weight:700}
.menu-btn{display:none;border:0;background:transparent;font-size:22px}
.page{padding:28px 32px 50px;max-width:1580px;width:100%;margin:0 auto}.footer{margin-top:auto;padding:18px 32px;color:#98a1b1;font-size:11px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-search{padding:28px;display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(135deg,#fff 35%,#f4f8ff)}
.hero-copy{max-width:620px}.hero-copy h2,.intro-banner h2,.planner-head h2,.integration-hero h2{font-size:27px;margin:7px 0 8px;letter-spacing:-.7px}.hero-copy p,.intro-banner p,.planner-head p,.integration-hero p{color:var(--muted);margin:0;line-height:1.6;font-size:14px}
.eyebrow{font-size:10px;letter-spacing:1.3px;font-weight:850;color:#4d6fa8}
.hero-form{min-width:430px;display:flex;gap:10px;align-items:center}
.search-box{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dce3ef;border-radius:12px;padding:0 14px;height:46px;box-shadow:0 3px 10px rgba(15,23,42,.03)}
.search-box:focus-within{border-color:#8bb2f7;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.search-box input{border:0;outline:0;width:100%;font-size:14px;background:transparent;color:var(--text)}.grow{flex:1}
.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:11px;padding:12px 16px;border:0;font-weight:750;cursor:pointer;white-space:nowrap}
.primary-btn{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.2)}
.primary-btn:hover{filter:brightness(.98);transform:translateY(-1px)}.primary-btn.compact{padding:10px 13px;font-size:13px}
.secondary-btn{background:#f7f9fd;border:1px solid #dce3ee;color:#334155}.secondary-btn:hover{background:#eef3fb}.secondary-btn:disabled,.primary-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0}
.metric-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;gap:14px;align-items:flex-start;min-height:125px}
.metric-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#edf4ff;color:var(--brand);font-size:19px}
.metric-card span{display:block;color:var(--muted);font-size:12px;font-weight:650}.metric-card strong{display:block;font-size:29px;margin:5px 0 1px;letter-spacing:-.7px}.metric-card small{color:#99a1af;font-size:11px}.metric-card strong.text-value{font-size:19px;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.metric-card.opportunity{background:linear-gradient(135deg,#effdf5,#fff);border-color:#d4f5df}.inline-small{font-size:13px!important;display:inline!important;margin-left:2px}
.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.span-2{min-height:310px}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 14px}.panel-head h3{margin:5px 0 0;font-size:18px}.text-link{font-size:12px;font-weight:700;color:var(--brand)}
.activity-list{padding:0 12px 14px}.activity-row{display:grid;grid-template-columns:38px 1fr 90px 145px;gap:12px;align-items:center;padding:12px;border-radius:12px}.activity-row:hover{background:#f7f9fc}.activity-icon,.quick-icon{width:34px;height:34px;border-radius:9px;background:#eef4ff;color:#2563eb;display:grid;place-items:center}.activity-main strong,.activity-main span,.activity-meta strong,.activity-meta span{display:block}.activity-main strong{font-size:13px}.activity-main span,.activity-meta span,.activity-date{font-size:10px;color:#97a0ae;margin-top:2px}.activity-meta{text-align:right}.activity-meta strong{font-size:13px}
.quick-list{padding:2px 14px 16px}.quick-list a{display:grid;grid-template-columns:38px 1fr 18px;gap:10px;align-items:center;padding:11px;border-radius:12px}.quick-list a:hover{background:#f7f9fc}.quick-list strong,.quick-list small{display:block}.quick-list strong{font-size:12px}.quick-list small{color:#98a1af;font-size:10px;margin-top:2px}
.empty-state{text-align:center;padding:52px 20px;color:#798395}.empty-state h4{margin:10px 0 5px;color:#334155}.empty-state p{margin:0;font-size:12px}.empty-icon{font-size:30px}.compact-empty{padding:28px 12px}
.chart-wrap{padding:10px 24px 24px;height:220px}.bars{height:100%;display:flex;gap:10px;align-items:end;border-bottom:1px solid #e9eef5}.bar-col{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.bar{width:72%;background:linear-gradient(180deg,#7aa7ff,#326de5);border-radius:7px 7px 2px 2px;opacity:.88}.bar-col span{font-size:9px;color:#9aa3b1}.saved-mini{padding:4px 20px 20px}.saved-mini div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #edf0f5;font-size:12px}.saved-mini strong{color:#334155}
.search-panel{padding:16px;margin-bottom:20px}.advanced-search{display:flex;gap:10px}.select,.small-input,.settings-section input,.settings-section select{height:46px;border:1px solid #dce3ef;border-radius:11px;background:#fff;padding:0 13px;color:#334155}.select{min-width:145px}
.empty-hero{text-align:center;padding:80px 20px}.empty-visual{width:70px;height:70px;border-radius:22px;background:#edf4ff;color:#2563eb;display:grid;place-items:center;font-size:32px;margin:auto}.empty-hero h2{margin:18px 0 7px}.empty-hero p{color:var(--muted);font-size:13px}.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}.chips a{padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:11px;color:#4b5563}
.query-title{display:flex;align-items:end;justify-content:space-between;margin:8px 0 12px}.query-title h2{margin:4px 0 0;font-size:26px}.explorer-metrics{margin-top:8px}.progress,.mini-progress{height:6px;background:#edf1f6;border-radius:99px;overflow:hidden;margin-top:10px}.progress i,.mini-progress i{display:block;height:100%;background:linear-gradient(90deg,#4f86ef,#7c64ef);border-radius:99px}
.tabs{display:flex;gap:3px;border-bottom:1px solid #dfe5ee;margin:20px 0 16px}.tab{border:0;background:transparent;padding:12px 14px;font-size:12px;font-weight:750;color:#798395;cursor:pointer;border-bottom:2px solid transparent}.tab.active{color:#1f5fd1;border-bottom-color:#2563eb}.tab-panel{display:none}.tab-panel.active{display:block}
.table-panel{overflow:hidden}.table-toolbar{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid #edf0f5;font-size:12px}.filter-wrap input{height:36px;border:1px solid #dfe5ee;border-radius:9px;padding:0 11px;min-width:220px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th{background:#fafbfe;color:#758095;font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:800;text-align:left;padding:11px 13px;white-space:nowrap;border-bottom:1px solid #e9edf4}td{padding:12px 13px;border-bottom:1px solid #eef1f5;font-size:12px;white-space:nowrap}tbody tr:hover{background:#fbfcfe}.keyword-cell strong,.keyword-cell span{display:block}.keyword-cell strong{font-size:12px}.keyword-cell span{font-size:9px;color:#9ca4b0;margin-top:3px}
.intent{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:800}.informational{background:#eaf3ff;color:#2863b9}.commercial{background:#f3edff;color:#6f42c1}.transactional{background:#e9f9ef;color:#18864b}
.kd{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;font-weight:850;font-size:11px}.kd.easy{background:#eaf8ef;color:#168446}.kd.medium{background:#fff5df;color:#a76408}.kd.hard{background:#ffebeb;color:#b72d2d}
.score strong{font-size:11px}.mini-progress{width:70px;height:4px;margin-top:5px}.spark{width:84px;height:30px;stroke:#4f7fe8;stroke-width:2}.icon-btn{width:32px;height:32px;border-radius:9px;border:1px solid #dfe5ee;background:#fff;color:#516174;cursor:pointer;font-size:16px}.icon-btn:hover{background:#edf4ff;color:#1d5ed1}.link-icon{display:grid;place-items:center}
.group-grid,.idea-grid,.integration-grid,.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.group-card{padding:20px}.group-card a{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #edf0f5;font-size:12px}.group-card a:hover{color:#1d5ed1}
.serp-list{padding:0 20px 22px}.serp-row{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:15px 0;border-top:1px solid #edf0f5}.rank{width:28px;height:28px;border-radius:8px;background:#eef4ff;color:#255fc0;display:grid;place-items:center;font-size:11px;font-weight:800}.serp-row a{font-size:14px;font-weight:750;color:#1d5fc8}.serp-row small{display:block;color:#2f8a55;font-size:10px;margin-top:3px}.serp-row p{margin:6px 0 0;color:#6f7989;font-size:11px;line-height:1.55}
.notice{padding:12px 15px;border-radius:12px;margin-bottom:15px;font-size:12px}.notice.success{background:#ecf9f0;border:1px solid #cfeeda;color:#217343}.notice.info{background:#edf5ff;border:1px solid #d5e6fb;color:#315f91}
.intro-banner,.planner-head,.integration-hero{padding:25px 27px;display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:18px}.intro-banner>div,.planner-head>div,.integration-hero>div{max-width:760px}
.idea-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.idea-card{padding:23px}.idea-icon{width:42px;height:42px;border-radius:12px;background:#edf4ff;color:#2563eb;display:grid;place-items:center;font-weight:900}.idea-card h3{margin:14px 0 6px}.idea-card>p{color:var(--muted);font-size:12px;margin:0 0 14px}.idea-links a{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid #edf0f5;font-size:11px}
.integration-symbol,.integration-logo{display:grid;place-items:center;background:linear-gradient(135deg,#3b82f6,#7c3aed);color:white;font-weight:900;border-radius:13px}.integration-symbol{width:42px;height:42px}.integration-logo{width:58px;height:58px;font-size:25px;flex:0 0 auto}.integration-card{padding:22px}.integration-card-top{display:flex;justify-content:space-between}.integration-card h3{margin:16px 0 3px}.integration-card>strong{font-size:11px;color:#4b6387}.integration-card p{color:var(--muted);font-size:11px;line-height:1.6;min-height:52px}.integration-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.toolbar-actions{display:flex;gap:8px}.small-input{height:38px}.planner-head{background:linear-gradient(135deg,#fff,#f4f7ff)}
.kanban{display:grid;grid-template-columns:repeat(4,minmax(250px,1fr));gap:14px;overflow-x:auto;padding-bottom:6px}.kanban-col{background:#eef2f7;border:1px solid #e1e6ee;border-radius:15px;padding:12px;min-height:460px}.kanban-head{display:flex;justify-content:space-between;align-items:center;padding:2px 3px 12px;font-size:12px;font-weight:800}.kanban-head b{background:#fff;border:1px solid #dce3ed;border-radius:999px;padding:2px 7px;font-size:10px}.kanban-card{background:#fff;border:1px solid #e3e8ef;border-radius:12px;padding:13px;margin-bottom:10px;box-shadow:0 4px 12px rgba(15,23,42,.04)}.kanban-card h4{font-size:12px;line-height:1.45;margin:10px 0}.kanban-card>div{display:flex;justify-content:space-between;border-top:1px solid #edf0f5;padding-top:9px}.kanban-card small{color:#98a1af}.kanban-empty{border:1px dashed #cfd8e5;border-radius:12px;padding:22px 14px;color:#8d98a7;font-size:11px;text-align:center;line-height:1.6}
.muted-grid .metric-card{opacity:.72}.settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.settings-section{padding:22px}.settings-section h3{margin:7px 0 18px}.settings-section label{display:block;color:#6e7888;font-size:11px;margin:12px 0}.settings-section input,.settings-section select{width:100%;margin-top:6px}.provider-state{display:flex;gap:11px;align-items:center;padding:13px;background:#f8fafc;border-radius:12px;margin-bottom:14px}.provider-state strong,.provider-state small{display:block}.provider-state small{color:#8b95a4;margin-top:3px;font-size:10px}
.muted{color:#9aa3b1;font-size:11px}

@media(max-width:1150px){
 .metric-grid{grid-template-columns:repeat(2,1fr)} .integration-grid{grid-template-columns:repeat(2,1fr)}
 .hero-search{display:block}.hero-form{margin-top:18px;min-width:0}.dashboard-grid{grid-template-columns:1fr}.group-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
 .sidebar{transform:translateX(-100%);transition:.2s}.nav-open .sidebar{transform:translateX(0)}.main{margin-left:0;width:100%}
 .menu-btn{display:block}.page{padding:20px}.topbar{padding:14px 18px}.top-actions .demo-pill{display:none}
 .advanced-search,.hero-form{flex-direction:column;align-items:stretch}.select{width:100%}.metric-grid{grid-template-columns:1fr 1fr}
 .idea-grid,.group-grid,.settings-grid,.integration-grid{grid-template-columns:1fr}.intro-banner,.planner-head,.integration-hero{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
 .metric-grid{grid-template-columns:1fr}.page{padding:14px}.topbar h1{font-size:20px}.topbar p{display:none}.top-actions .primary-btn{display:none}
 .hero-search{padding:20px}.hero-copy h2{font-size:23px}.query-title{align-items:flex-start;flex-direction:column;gap:10px}
}