:root {
	--bg: #f5f7fb;
	--panel: #ffffff;
	--text: #182033;
	--muted: #687086;
	--line: #e3e7ef;
	--primary: #3157d5;
	--primary-dark: #2444af;
	--sidebar: #111827;
	--success: #176b4d;
	--warning: #a66507;
	--danger: #a53737;
	--radius: 14px;
}
* {box-sizing: border-box;}
body {margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text);}
a {color: inherit; text-decoration: none;}
button, input, textarea, select {font: inherit;}
.app-shell {display: grid; grid-template-columns: 238px 1fr; min-height: 100vh;}
.sidebar {background: var(--sidebar); color: #d9dfeb; padding: 22px 15px; position: sticky; top: 0; height: 100vh;}
.brand-mark {font-weight: 800; font-size: 24px; letter-spacing: .08em; color: #fff; padding: 8px 12px 24px;}
.sidebar nav {display: grid; gap: 5px;}
.sidebar nav a {padding: 11px 12px; border-radius: 9px; font-size: 14px;}
.sidebar nav a:hover, .sidebar nav a.active {background: #263249; color: #fff;}
.workspace {min-width: 0;}
.topbar {height: 66px; background: #fff; border-bottom: 1px solid var(--line); padding: 0 24px; display: flex; align-items: center; gap: 16px; justify-content: flex-end; position: sticky; top: 0; z-index: 20;}
.topbar div {display: grid; font-size: 13px;}
.topbar span {color: var(--muted);}
.icon-button {display: none; border: 0; background: transparent; font-size: 22px; margin-right: auto;}
.page {padding: 26px; max-width: 1520px; margin: 0 auto;}
.page-heading {display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; margin-bottom: 24px;}
h1 {margin: 3px 0 7px; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.035em;}
h2 {margin: 0 0 14px; font-size: 20px;}
h3 {margin: 7px 0;}
p {color: var(--muted); line-height: 1.55;}
.eyebrow {font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; color: var(--primary);}
.button {display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 14px; border: 1px solid var(--line); background: #fff; border-radius: 9px; cursor: pointer;}
.button:hover {border-color: #b8c1d3;}
.button.primary {background: var(--primary); border-color: var(--primary); color: #fff;}
.button.primary:hover {background: var(--primary-dark);}
.button.ghost {background: transparent;}
.button-group {display: flex; flex-wrap: wrap; gap: 8px;}
.panel {background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 8px 26px rgba(30, 43, 71, .04);}
.panel-head {display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px;}
.metric-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px;}
.metric {background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 8px;}
.metric span {color: var(--muted); font-size: 13px;}
.metric strong {font-size: 30px;}
.dashboard-grid {display: grid; grid-template-columns: 2fr 1fr; gap: 20px;}
.span-2 {min-width: 0;}
.opportunity-row, .compact-row, .campaign-card {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line);}
.opportunity-row:last-child, .compact-row:last-child, .campaign-card:last-child {border-bottom: 0;}
.opportunity-row > strong {font-size: 25px; color: var(--primary);}
.pill {display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; background: #edf1f7; border-radius: 999px; color: #475168; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;}
.pill.high {background: #fce8e8; color: var(--danger);}
.pill.medium {background: #fff2d8; color: var(--warning);}
.two-column {display: grid; grid-template-columns: minmax(320px, 470px) 1fr; gap: 20px; align-items: start;}
.sticky-panel {position: sticky; top: 90px;}
.form-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;}
.form-grid label {display: grid; gap: 7px; color: #4b5569; font-size: 13px; font-weight: 700;}
.form-grid .full {grid-column: 1 / -1;}
input, textarea, select {width: 100%; border: 1px solid #ccd3df; border-radius: 8px; background: #fff; padding: 10px 11px; color: var(--text);}
textarea {min-height: 105px; resize: vertical;}
input:focus, textarea:focus, select:focus {outline: 3px solid rgba(49, 87, 213, .12); border-color: var(--primary);}
.channel-picker {display: flex; flex-wrap: wrap; gap: 10px;}
.channel-picker label {display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;}
.channel-picker input {width: auto;}
.campaign-card {padding: 16px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 11px;}
.campaign-summary {display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px;}
.campaign-summary div {padding: 8px 15px; border-right: 1px solid var(--line); display: grid; gap: 5px;}
.campaign-summary div:last-child {border-right: 0;}
.campaign-summary span {font-size: 12px; color: var(--muted);}
.asset-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;}
.asset-editor {width: 100%; min-height: 290px; line-height: 1.5; transition: box-shadow .2s, border-color .2s;}
.asset-editor.compact {min-height: 150px;}
.asset-editor.saved {border-color: var(--success); box-shadow: 0 0 0 3px rgba(23, 107, 77, .12);}
.asset-actions {display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;}
.asset-row {display: grid; grid-template-columns: 220px 1fr auto; gap: 16px; align-items: start; margin-bottom: 14px;}
.asset-meta {display: grid; gap: 7px;}
.asset-meta small {color: var(--muted);}
.filter-row {display: flex; gap: 8px; margin-bottom: 16px;}
.filter-row a {background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px;}
.timeline-item {display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line);}
.timeline-item time {font-weight: 800; color: var(--primary);}
.opportunity-grid, .report-card-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;}
.opportunity-card {display: grid; grid-template-columns: 62px 1fr; gap: 16px;}
.score-ring {width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #edf1ff; color: var(--primary); font-weight: 800; font-size: 19px;}
.report-grid {display: grid; grid-template-columns: 2fr 1fr; gap: 18px;}
.bar-row {display: grid; grid-template-columns: 130px 1fr 40px; gap: 12px; align-items: center; margin: 13px 0;}
.bar-row div {height: 9px; border-radius: 999px; background: #eef1f6; overflow: hidden;}
.bar-row i {display: block; height: 100%; background: var(--primary);}
.section-title {margin: 28px 0 14px;}
.action-note {display: grid; gap: 5px; padding: 12px; background: #f6f8fc; border-radius: 9px; color: var(--muted);}
.table-wrap {overflow: auto;}
table {width: 100%; border-collapse: collapse; font-size: 13px;}
th, td {padding: 11px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap;}
th {color: var(--muted);}
.empty, .empty-state {color: var(--muted); text-align: center; padding: 28px;}
.alert {padding: 12px; border-radius: 8px; margin-bottom: 14px;}
.alert.error {background: #feecec; color: #9d2b2b;}
.auth-body {min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top left, #dce5ff, #f7f9fc 45%);}
.auth-card {width: min(440px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px; box-shadow: 0 24px 70px rgba(35, 49, 84, .14);}
.auth-card form {display: grid; gap: 14px;}
.auth-card label {display: grid; gap: 7px; font-weight: 700; font-size: 13px;}
.install-card {width: min(760px, 100%);}
.public-body {min-height: 100vh; display: grid; place-items: center; padding: 30px; background: #101828; color: #fff;}
.public-hero {max-width: 820px;}
.public-hero h1 {font-size: clamp(42px, 8vw, 78px);}
.public-hero p {font-size: 20px; color: #c3c9d6; max-width: 700px;}
@media (max-width: 1050px) {
	.metric-grid, .campaign-summary {grid-template-columns: repeat(2, 1fr);}
	.dashboard-grid, .two-column, .report-grid {grid-template-columns: 1fr;}
	.sticky-panel {position: static;}
	.asset-grid, .opportunity-grid, .report-card-grid {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 760px) {
	.app-shell {display: block;}
	.sidebar {position: fixed; left: -260px; z-index: 100; width: 238px; transition: left .2s;}
	.sidebar.open {left: 0;}
	.icon-button {display: block;}
	.page {padding: 18px;}
	.page-heading {display: grid;}
	.metric-grid, .campaign-summary, .asset-grid, .opportunity-grid, .report-card-grid {grid-template-columns: 1fr;}
	.form-grid {grid-template-columns: 1fr;}
	.form-grid .full {grid-column: auto;}
	.asset-row {grid-template-columns: 1fr;}
	.campaign-summary div {border-right: 0; border-bottom: 1px solid var(--line);}
}

.strategy-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;}
.strategy-card ul {margin: 14px 0; padding-left: 20px; color: var(--muted); line-height: 1.8;}
.signal-summary, .signal-row {display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line);}
.signal-summary > div {display: grid; gap: 4px;}
.signal-summary span, .signal-summary small {color: var(--muted); font-size: 12px;}
@media (max-width: 760px) {.strategy-grid {grid-template-columns: 1fr;}}

.notice{padding:12px 16px;border-radius:10px;margin-bottom:16px;background:#eef4ff}.notice.success{background:#ecfdf3}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.table-wrap{overflow:auto}.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}.metric{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px}.metric span{display:block;color:#667085;font-size:13px}.metric strong{font-size:28px;display:block;margin-top:8px}.grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}@media(max-width:800px){.grid.two{grid-template-columns:1fr}}