:root {
  --green:#187b5a;
  --green-dark:#126346;
  --mint:#e7f5ec;
  --ink:#202d2a;
  --muted:#83908a;
  --line:#e8eeea;
  --canvas:#f6f8f6;
  --white:#fff;
  --purple:#a896e4;
  --cyan:#91cbd1;
  --radius:15px;
  --shadow:0 3px 12px #173b291f;
  font-family:Inter,Arial,sans-serif;
  color:var(--ink);
  font-size:13px;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--canvas)
}
button,input,select {
  font:inherit
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button {
  border:0;
  background:none;
  color:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #8ccdb0;
  outline-offset:3px
}
svg.lucide {
  width:18px;
  height:18px;
  stroke-width:1.7;
  flex-shrink:0
}
button:disabled {
  opacity:.6;
  cursor:wait
}
.app-shell {
  display:flex;
  min-height:100vh
}
.sidebar {
  width:232px;
  position:fixed;
  inset:0 auto 0 0;
  z-index:30;
  background:#fff;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  padding:29px 17px 0
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:Manrope,Inter,sans-serif;
  font-size:21px;
  font-weight:800;
  letter-spacing:-.9px;
  padding:0 7px
}
.brand sup {
  font-family:Inter;
  font-size:8px;
  margin-left:3px;
  vertical-align:top;
  position:relative;
  top:5px
}
.brand-iq {
  color:var(--green)
}
.brand-mark {
  width:32px;
  height:34px;
  background:linear-gradient(130deg,#268d69,#12684b);
  border-radius:9px;
  display:flex;
  gap:3px;
  padding:8px 7px;
  align-items:flex-end
}
.brand-mark span {
  width:4px;
  background:#e4ffed;
  border-radius:1.5px
}
.brand-mark span:nth-child(1) {
  height:9px
}
.brand-mark span:nth-child(2) {
  height:14px
}
.brand-mark span:nth-child(3) {
  height:20px
}
.workspace {
  margin:29px 0 29px;
  padding:11px 9px;
  background:#f8faf8;
  border:1px solid var(--line);
  border-radius:10px;
  display:flex;
  align-items:center;
  text-align:left;
  gap:9px;
  width:100%
}
.workspace-icon {
  width:31px;
  height:31px;
  border-radius:8px;
  background:#e4ece7;
  display:grid;
  place-items:center;
  font-weight:600
}
.workspace strong,.profile strong {
  display:block;
  font-size:11px;
  font-weight:600;
  margin-bottom:5px
}
.workspace small,.profile small {
  color:var(--muted);
  font-size:10px
}
.workspace>.lucide {
  margin-left:auto;
  width:13px;
  height:13px;
  color:#809088
}
.nav-label {
  font-size:9px;
  letter-spacing:1.25px;
  font-weight:600;
  color:#9aa59f;
  padding:0 13px;
  margin-bottom:13px
}
.primary-nav {
  display:flex;
  flex-direction:column;
  gap:5px
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  height:42px;
  padding:0 13px;
  color:#738079;
  font-size:12px;
  border-radius:8px;
  transition:background .18s,color .18s
}
.nav-item:hover {
  background:#f5f8f5;
  color:var(--green)
}
.nav-item.active {
  background:#eaf5ee;
  color:var(--green);
  font-weight:600
}
.nav-item.active:before {
  content:'';
  position:absolute;
  left:0;
  width:3px;
  height:25px;
  background:var(--green);
  border-radius:0 2px 2px 0
}
.nav-count {
  margin-left:auto;
  font-size:10px;
  border:1px solid #d2e7d9;
  border-radius:5px;
  min-width:23px;
  text-align:center;
  padding:2px;
  background:#f8fcf9;
  font-weight:500
}
.new-badge {
  font-size:7px;
  letter-spacing:.4px;
  color:#6e947a;
  margin-left:auto;
  background:#eff6ed;
  border:1px solid #e5eedf;
  border-radius:4px;
  padding:3px 4px
}
.store-nav-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:29px;
  margin-bottom:3px
}
.icon-button {
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  color:#7b8882
}
.icon-button:hover {
  background:#eff4ef
}
.store-nav-label .icon-button {
  width:20px;
  height:20px
}
.store-nav-label .lucide {
  width:13px;
  height:13px
}
.store-item {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  padding:12px 15px;
  color:#77847c;
  font-size:11px;
  border-radius:8px
}
.store-item:hover,.store-item.selected {
  background:#f0f6f2;
  color:var(--green)
}
.store-item small {
  font-size:10px;
  color:#a0aba5;
  margin-left:7px
}
.store-dot {
  width:7px;
  height:7px;
  border-radius:50%
}
.udhiya {
  background:#74ae8b
}
.muein {
  background:#b6a2e2
}
.katateeb {
  background:#e2bc7b
}
.sidebar-bottom {
  margin-top:auto;
  padding-top:35px
}
.sidebar-tip {
  border:1px solid #dceee2;
  border-radius:12px;
  margin:0 5px 15px;
  padding:16px;
  background:radial-gradient(ellipse at 100% 0,#dcecdf,transparent 80%),#f7fbf8
}
.tip-icon {
  display:block;
  margin-bottom:9px;
  color:#5b9677
}
.tip-icon .lucide {
  width:19px
}
.sidebar-tip strong {
  font-family:Manrope;
  font-size:13px;
  line-height:1.6;
  font-weight:750;
  color:#37694e
}
.sidebar-tip p {
  font-size:10px;
  color:#8a9b90;
  line-height:1.8;
  margin:8px 0 13px
}
.sidebar-tip button {
  font-size:10px;
  font-weight:600;
  color:var(--green);
  display:flex;
  gap:11px;
  align-items:center;
  padding:0
}
.sidebar-tip button .lucide {
  width:12px;
  height:12px
}
.sidebar-bottom>.nav-item {
  font-size:11px;
  height:37px
}
.profile {
  display:flex;
  gap:10px;
  align-items:center;
  border-top:1px solid var(--line);
  margin-top:15px;
  padding:20px 8px;
  width:100%;
  text-align:left
}
.profile>.lucide {
  width:13px;
  color:#86968b;
  margin-left:auto
}
.avatar {
  width:34px;
  height:34px;
  background:#e1ebe2;
  color:#517258;
  border:3px solid #f4f7f3;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:600;
  flex-shrink:0
}
.avatar-small {
  width:30px;
  height:30px;
  font-size:9px
}
.workspace-main {
  margin-left:232px;
  width:calc(100% - 232px);
  background:radial-gradient(ellipse at 58% 8%,#edf4ed85,transparent 52%),var(--canvas);
  display:flex;
  flex-direction:column
}
.topbar {
  height:70px;
  background:#ffffffb3;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 33px
}
.breadcrumbs {
  display:flex;
  gap:13px;
  align-items:center;
  font-size:11px;
  color:#97a29c
}
.breadcrumbs>.lucide {
  width:12px;
  height:12px;
  color:#a9b2ae
}
.breadcrumbs strong {
  font-weight:500;
  color:#495b51
}
.topbar-actions {
  display:flex;
  align-items:center;
  gap:17px
}
.global-search {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:#919e96
}
.global-search .lucide {
  width:15px;
  height:15px
}
.global-search kbd {
  margin-left:33px;
  border:1px solid #e6ebe7;
  border-radius:4px;
  background:#fff;
  font-family:Inter;
  font-size:8px;
  padding:3px 5px;
  color:#a1aba5
}
.topbar-divider {
  height:20px;
  width:1px;
  background:var(--line)
}
.notification-button {
  position:relative
}
.notification-button>span {
  position:absolute;
  right:9px;
  top:5px;
  border:2px solid #fff;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#78b890
}
main {
  padding:31px 33px 12px;
  flex:1;
  min-width:0
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:26px
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:6px;
  color:#7b9384;
  text-transform:uppercase;
  font-size:8px;
  font-weight:600;
  letter-spacing:1.4px;
  margin-bottom:10px
}
.eyebrow .lucide {
  width:12px;
  height:12px
}
.page-heading h1 {
  font-family:Manrope,Inter,sans-serif;
  font-size:28px;
  font-weight:750;
  line-height:1.3;
  letter-spacing:-1.15px;
  margin:0 0 8px
}
.page-heading p {
  color:#8a978f;
  font-size:11px;
  margin:0;
  line-height:1.7
}
.heading-buttons {
  display:flex;
  align-items:center;
  gap:9px
}
.button {
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #e0e8e2;
  border-radius:7px;
  padding:10px 13px;
  font-size:10px;
  font-weight:500;
  white-space:nowrap;
  transition:background .18s,box-shadow .18s
}
.button:hover {
  background:#f6faf6;
  box-shadow:0 2px 6px #173b2910
}
.button .lucide {
  width:14px;
  height:14px
}
.button-primary {
  background:var(--green);
  color:#fff;
  border-color:var(--green);
  box-shadow:0 2px 4px #12634b15
}
.button-primary:hover {
  background:var(--green-dark)
}
.filter-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:24px
}
.filter-group {
  display:flex;
  align-items:center;
  gap:9px
}
.select-button {
  font-size:10px;
  padding:9px 12px;
  color:#5a6c60
}
.select-button .lucide:last-child {
  width:11px;
  height:11px;
  margin-left:13px
}
.filter-description {
  font-size:9px;
  color:#93a198;
  display:flex;
  align-items:center;
  gap:7px
}
.filter-description .lucide {
  width:12px;
  height:12px
}
.mode-pill {
  background:#eaf2e9;
  color:#7a967c;
  letter-spacing:.3px;
  font-size:8px;
  border:1px solid #dfeadd;
  padding:4px 7px;
  border-radius:4px;
  margin-right:3px
}
.date-range-button {
  padding:9px 12px
}
.kpi-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:17px;
  margin-bottom:22px
}
.card {
  background:var(--white);
  border:1px solid #e4ebe5;
  border-radius:var(--radius);
  box-shadow:0 2px 5px #173b2902
}
.kpi-card {
  padding:18px 19px 16px;
  overflow:hidden;
  position:relative;
  min-height:148px
}
.kpi-card:last-child {
  background:radial-gradient(ellipse at 100% 100%,#e2f4e8,transparent 85%),white
}
.kpi-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#839187;
  font-size:10px
}
.kpi-top>.lucide {
  width:16px;
  height:16px;
  color:#95a99a
}
.kpi-title {
  display:flex;
  align-items:center;
  gap:6px
}
.kpi-title .lucide {
  width:10px;
  height:10px;
  color:#b5beb7
}
.kpi-value-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:16px 0 13px;
  gap:5px
}
.kpi-value {
  font-family:Manrope;
  font-size:28px;
  font-weight:750;
  letter-spacing:-1px;
  white-space:nowrap
}
.kpi-value .currency {
  font-size:11px;
  color:#96a098;
  letter-spacing:0;
  font-family:Inter;
  font-weight:400;
  margin-right:6px
}
.kpi-bottom {
  display:flex;
  align-items:center;
  font-size:8px;
  gap:6px;
  color:#9ca69f
}
.change {
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:#43845d;
  font-size:8px;
  font-weight:500;
  background:#edf6ef;
  border-radius:4px;
  padding:3px 5px;
  white-space:nowrap
}
.change.negative {
  color:#b76d58;
  background:#fff1eb
}
.change .lucide {
  width:9px;
  height:9px;
  stroke-width:2
}
.sparkline {
  width:82px;
  height:35px;
  overflow:visible;
  flex-shrink:0
}
.charts-row {
  display:grid;
  grid-template-columns:minmax(0,1.95fr) minmax(255px,1fr);
  gap:20px;
  margin-bottom:23px
}
.card-header {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:21px 21px 0
}
.card-header h2,.section-heading h2 {
  font-family:Manrope;
  font-size:13px;
  letter-spacing:-.25px;
  font-weight:750;
  margin:0 0 6px
}
.card-header p {
  font-size:9px;
  color:#94a097;
  margin:0
}
.chart-controls {
  display:flex;
  align-items:center;
  gap:5px
}
.chart-tab {
  font-size:8px;
  color:#a0aaa3;
  padding:5px 8px;
  border-radius:4px
}
.chart-tab.active {
  background:#f0f5ef;
  border:1px solid #e2eae0;
  color:#5e7b64
}
.chart-card {
  min-height:303px
}
.chart-meta {
  padding:21px 21px 0;
  display:flex;
  align-items:center;
  gap:13px
}
.chart-large-value {
  font-family:Manrope;
  font-size:23px;
  letter-spacing:-.75px;
  font-weight:750
}
.chart-legend {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:14px;
  color:#8c9990;
  font-size:8px
}
.legend-item {
  display:inline-flex;
  align-items:center;
  gap:5px
}
.legend-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  display:inline-block;
  background:var(--green)
}
.legend-dot.purple {
  background:var(--purple)
}
.legend-dot.cyan {
  background:var(--cyan)
}
.legend-dot.pale {
  background:#c4ddd0
}
.legend-dot.gray {
  background:#c5ceca
}
.trend-wrap {
  padding:12px 15px 14px;
  position:relative
}
.trend-chart {
  display:block;
  width:100%;
  height:186px;
  overflow:visible
}
.chart-grid-line {
  stroke:#ecf0eb;
  stroke-dasharray:3 4;
  stroke-width:1
}
.chart-axis-text {
  font-family:Inter;
  font-size:8px;
  fill:#acb5ae
}
.chart-tooltip {
  position:absolute;
  pointer-events:none;
  background:#233d30;
  color:white;
  padding:8px 11px;
  border-radius:7px;
  font-size:10px;
  box-shadow:var(--shadow);
  z-index:4;
  display:none;
  white-space:nowrap
}
.chart-tooltip strong {
  display:block;
  font-size:9px;
  color:#c4dbc9;
  margin-bottom:4px
}
.donut-body {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:13px 0 3px
}
.donut-chart {
  width:173px;
  height:173px;
  transform:rotate(-90deg)
}
.donut-center {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none
}
.donut-center small {
  font-size:8px;
  color:#99a49b;
  margin-bottom:8px
}
.donut-center strong {
  font-family:Manrope;
  font-size:23px;
  letter-spacing:-.6px;
  font-weight:750
}
.donut-center span {
  font-size:8px;
  color:#aab4ad;
  margin-top:7px
}
.allocation-legend {
  display:flex;
  justify-content:center;
  gap:24px;
  padding:10px 14px 20px
}
.allocation-legend>div {
  font-size:8px;
  color:#9aa69d
}
.allocation-legend b {
  display:block;
  font-family:Manrope;
  color:#506156;
  font-size:11px;
  font-weight:700;
  margin-top:6px;
  padding-left:10px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px
}
.section-heading h2 {
  font-size:13px;
  margin:0
}
.section-heading p {
  color:#9ba79d;
  font-size:9px;
  margin:6px 0 0
}
.text-link {
  font-size:9px;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--green);
  font-weight:500;
  padding:0
}
.text-link .lucide {
  width:11px;
  height:11px
}
.channel-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:26px
}
.channel-card {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 17px;
  border-radius:12px
}
.channel-icon {
  width:34px;
  height:34px;
  background:#eef6ef;
  border:1px solid #e5f0e6;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#649778
}
.channel-icon.purple {
  background:#f2eefb;
  border-color:#eae3f8;
  color:#a692d2
}
.channel-icon.cyan {
  background:#edf6f7;
  border-color:#e0eff0;
  color:#7faeb4
}
.channel-icon .lucide {
  width:16px;
  height:16px
}
.channel-card h3 {
  font-size:10px;
  font-weight:600;
  margin:0 0 6px
}
.channel-card p {
  font-size:8px;
  color:#9fa9a2;
  margin:0
}
.channel-card .channel-roas {
  margin-left:auto;
  text-align:right
}
.channel-roas strong {
  font-family:Manrope;
  font-size:18px;
  font-weight:750;
  letter-spacing:-.5px
}
.channel-roas small {
  display:block;
  font-size:7px;
  color:#9da9a0;
  margin-top:5px
}
.mini-bars {
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:29px;
  margin-left:auto
}
.mini-bars span {
  width:5px;
  background:#b7d6bf;
  border-radius:2px
}
.channel-card:nth-child(2) .mini-bars span {
  background:#d3c5eb
}
.channel-card:nth-child(3) .mini-bars span {
  background:#bfdddf
}
.table-card {
  overflow:hidden
}
.table-card .card-header {
  padding:20px 21px 17px
}
.table-heading {
  display:flex;
  align-items:center;
  gap:8px
}
.table-heading h2 {
  margin:0
}
.count-badge {
  font-size:8px;
  color:#8c9a90;
  background:#f3f6f2;
  border:1px solid #e9eee6;
  border-radius:4px;
  padding:2px 5px
}
.table-actions {
  display:flex;
  gap:8px;
  align-items:center
}
.search-field {
  border:1px solid #e6ece6;
  border-radius:6px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 9px;
  background:white;
  min-width:0
}
.search-field>.lucide {
  width:12px;
  height:12px;
  color:#9aaa9c
}
.search-field input {
  border:0;
  outline:none;
  background:transparent;
  font-size:8px;
  min-width:0;
  width:128px;
  color:var(--ink)
}
.search-field input::placeholder {
  color:#a4afa6
}
.table-actions .button {
  padding:7px 9px;
  font-size:8px
}
.table-actions .button .lucide {
  width:12px;
  height:12px
}
.table-scroll {
  overflow-x:auto
}
table {
  width:100%;
  border-collapse:collapse;
  white-space:nowrap;
  text-align:left
}
th {
  font-size:8px;
  font-weight:500;
  color:#96a298;
  background:#f8faf7;
  padding:13px 16px;
  border-top:1px solid #edf1eb;
  border-bottom:1px solid #edf1eb
}
th:first-child,td:first-child {
  padding-left:22px
}
th button {
  font-size:8px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0;
  color:inherit
}
th .lucide {
  width:10px;
  height:10px;
  color:#bdc6bc
}
td {
  font-size:10px;
  color:#5d6b60;
  padding:16px;
  border-bottom:1px solid #f0f3ed
}
tbody tr:hover {
  background:#fbfdf9
}
tbody tr:last-child td {
  border-bottom:0
}
input[type=checkbox] {
  appearance:none;
  -webkit-appearance:none;
  display:inline-block;
  width:12px;
  height:12px;
  border:1px solid #dbe4db;
  border-radius:3px;
  background:white;
  vertical-align:middle;
  cursor:pointer;
  margin:0
}
input[type=checkbox]:checked {
  background:var(--green);
  border-color:var(--green);
  position:relative
}
input[type=checkbox]:checked:after {
  content:'✓';
  position:absolute;
  left:1px;
  top:-1px;
  color:white;
  font-size:10px
}
.campaign-cell {
  display:flex;
  align-items:center;
  gap:10px
}
.campaign-symbol {
  width:29px;
  height:29px;
  border-radius:8px;
  background:#eef4ec;
  display:grid;
  place-items:center;
  color:#80a786;
  flex-shrink:0
}
.campaign-symbol .lucide {
  width:14px;
  height:14px
}
.campaign-symbol.purple {
  background:#f3effa;
  color:#ab98cc
}
.campaign-symbol.cyan {
  background:#edf6f6;
  color:#8cb4b5
}
.campaign-name {
  text-align:left;
  padding:0
}
.campaign-name strong {
  display:block;
  font-size:10px;
  font-weight:500;
  color:#4b5d4f;
  margin-bottom:4px
}
.campaign-name small {
  font-size:8px;
  color:#a3afa6
}
.platform-pill {
  display:flex;
  align-items:center;
  gap:5px;
  color:#819187;
  font-size:8px
}
.platform-letter {
  font-weight:700;
  color:#769d84;
  font-size:11px
}
.status-badge {
  font-size:8px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:5px;
  background:#edf6ee;
  color:#6ba57e;
  padding:4px 7px
}
.status-badge:before {
  content:'';
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor
}
.status-badge.paused {
  background:#fff7e7;
  color:#c5a15b
}
.status-badge.review {
  background:#f0edfa;
  color:#9d8cc3
}
.status-badge.deleted,.status-badge.archived {
  background:#f2f3f2;
  color:#97a198
}
.roas-cell {
  color:#5b906a;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:5px
}
.roas-cell .lucide {
  width:10px;
  height:10px
}
.table-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 21px;
  border-top:1px solid var(--line);
  font-size:8px;
  color:#a0aba2
}
.pagination {
  display:flex;
  align-items:center;
  gap:6px
}
.pagination button {
  font-size:8px;
  padding:5px 8px;
  border:1px solid #e6ece4;
  border-radius:4px
}
.pagination button.active {
  color:var(--green);
  background:#edf5ee;
  border-color:#d8e9dc
}
.pagination button .lucide {
  width:10px;
  height:10px
}
.insight-banner {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:20px;
  padding:13px 17px;
  background:linear-gradient(100deg,#ebf5ec,#f0f7ed);
  border:1px solid #dfecdf;
  border-radius:10px
}
.insight-banner>.lucide {
  color:#80a887;
  width:19px;
  height:19px
}
.insight-banner p {
  font-size:9px;
  color:#79947d;
  margin:0;
  line-height:1.8
}
.insight-banner p strong {
  color:#537958;
  font-weight:600
}
.insight-banner .text-link {
  margin-left:auto;
  white-space:nowrap;
  font-size:8px
}
.main-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:14px 33px 0;
  padding:15px 0 20px;
  color:#a2afa4;
  font-size:8px;
  gap:20px
}
.main-footer>span:first-child {
  display:flex;
  align-items:center;
  gap:5px
}
.status-dot {
  width:5px;
  height:5px;
  display:inline-block;
  border-radius:50%;
  background:#a2c7a7
}
.footer-mark {
  font-family:Manrope;
  font-size:9px;
  font-weight:650;
  color:#7f9886;
  margin-left:8px
}
.secondary-section {
  margin-top:24px
}
.disclosure {
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  margin-top:18px;
  overflow:hidden
}
.disclosure-toggle {
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  padding:18px 20px;
  text-align:left
}
.disclosure-toggle>.lucide {
  color:#7da18a;
  width:17px;
  height:17px
}
.disclosure-toggle strong {
  font-size:11px;
  font-weight:600
}
.disclosure-toggle small {
  font-size:9px;
  color:#9da9a0;
  margin-left:10px
}
.disclosure-toggle .lucide:last-child {
  margin-left:auto;
  width:13px
}
.disclosure-body {
  padding:0 20px 20px
}
.metric-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin:17px 0
}
.metric-strip>div {
  border:1px solid var(--line);
  border-radius:10px;
  padding:15px
}
.metric-strip small {
  font-size:9px;
  color:#96a397;
  display:block;
  margin-bottom:9px
}
.metric-strip strong {
  font-family:Manrope;
  font-size:21px;
  letter-spacing:-.6px
}
.warning-note {
  font-size:10px;
  line-height:1.8;
  color:#a48b60;
  background:#faf7ef;
  padding:10px 13px;
  border-radius:7px
}
.actuals-form,.quick-form {
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin:16px 0
}
.form-field {
  display:flex;
  flex-direction:column;
  gap:7px;
  flex:1;
  min-width:135px
}
.form-field label {
  font-size:10px;
  color:#7b8e7f
}
.form-field input,.form-field select,.field-input {
  border:1px solid #dfe7df;
  border-radius:7px;
  padding:10px 11px;
  background:#fff;
  color:#58705e;
  font-size:11px;
  width:100%;
  outline:none
}
.actuals-list {
  font-size:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.actuals-list span {
  padding:7px 9px;
  background:#f2f7f1;
  border-radius:5px;
  color:#7c9280
}
.empty-state {
  text-align:center;
  padding:48px 20px;
  color:#8d9a90
}
.empty-state>.lucide {
  width:28px;
  height:28px;
  color:#a9c0ac;
  margin-bottom:14px
}
.empty-state h3 {
  color:#617867;
  font-family:Manrope;
  font-size:16px
}
.empty-state p {
  font-size:11px;
  line-height:1.8
}
.page-tabs {
  display:flex;
  gap:21px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px
}
.page-tab {
  padding:0 0 13px;
  font-size:11px;
  color:#98a69a;
  border-bottom:2px solid transparent
}
.page-tab.active {
  color:var(--green);
  border-bottom-color:var(--green)
}
.platform-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:22px
}
.platform-card {
  padding:20px
}
.platform-card h3 {
  font-family:Manrope;
  font-size:13px;
  margin:10px 0
}
.platform-card>strong {
  font-family:Manrope;
  font-size:25px
}
.platform-card>p {
  font-size:10px;
  color:#8b9c8d;
  line-height:1.8
}
.progress-track {
  height:5px;
  background:#eef3eb;
  border-radius:5px;
  overflow:hidden;
  margin:15px 0
}
.progress-track>span {
  display:block;
  height:100%;
  background:#78ae88;
  border-radius:5px
}
.channel-bars {
  padding:25px
}
.channel-bar-row {
  display:grid;
  grid-template-columns:65px 1fr 75px;
  gap:15px;
  align-items:center;
  margin:23px 0;
  font-size:11px;
  color:#809482
}
.channel-bar-track {
  height:24px;
  background:#f4f7f1;
  border-radius:5px
}
.channel-bar-track>span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#b9ddc1,#65a582);
  border-radius:5px
}
.channel-bar-row:nth-child(2) .channel-bar-track>span {
  background:linear-gradient(90deg,#e0d7f1,#b39bd9)
}
.channel-bar-row:nth-child(3) .channel-bar-track>span {
  background:linear-gradient(90deg,#d2e8e9,#8fc1c5)
}
.channel-bar-row strong {
  font-weight:500;
  text-align:right
}
.report-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px
}
.report-card {
  padding:25px
}
.report-card>.lucide {
  color:var(--green);
  width:27px;
  height:27px
}
.report-card h2 {
  font-family:Manrope;
  font-size:17px;
  margin-top:20px
}
.report-card p {
  font-size:11px;
  color:#8fa091;
  line-height:1.9;
  max-width:400px;
  margin-bottom:20px
}
.report-card .report-tag {
  font-size:9px;
  color:#9cae9f;
  margin-left:9px
}
.glossary-toolbar {
  display:flex;
  gap:12px;
  margin-bottom:25px
}
.glossary-toolbar .search-field {
  flex:1;
  padding:13px
}
.glossary-toolbar input {
  font-size:11px;
  width:100%
}
.glossary-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px
}
.term-card {
  padding:21px;
  min-height:180px
}
.term-card h2 {
  font-family:Manrope;
  font-size:14px;
  color:#527a5e;
  margin:0 0 10px
}
.term-card p {
  font-size:10px;
  color:#8c9b8e;
  line-height:1.9;
  margin:0 0 14px
}
.term-card small {
  font-size:9px;
  color:#a5b1a5;
  display:block
}
.term-card .live-value {
  font-size:11px;
  color:var(--green);
  font-weight:500;
  margin-top:12px
}
.settings-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:22px
}
.settings-card {
  padding:24px
}
.settings-card h2 {
  font-family:Manrope;
  font-size:16px;
  margin:0 0 8px
}
.settings-card>p {
  font-size:10px;
  line-height:1.9;
  color:#92a096;
  margin-bottom:23px
}
.integration-row {
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding:17px 0
}
.integration-row:last-child {
  border:0
}
.integration-logo {
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#f1f6ee;
  color:#7ea386;
  font-weight:650;
  font-size:18px
}
.integration-info strong {
  display:block;
  font-size:11px;
  font-weight:500;
  margin-bottom:5px
}
.integration-info small {
  font-size:9px;
  color:#9ca99c
}
.integration-row .status-badge {
  margin-left:auto
}
.selection-bar {
  display:flex;
  align-items:center;
  gap:20px;
  background:#edf5ee;
  border:1px solid #d8e9db;
  border-radius:8px;
  padding:13px 17px;
  font-size:10px;
  color:#6b8972;
  margin-bottom:14px
}
.selection-bar strong {
  color:#3d7450
}
.selection-bar>.button {
  margin-left:auto
}
.creative-filter-bar {
  display:flex;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap
}
.creative-filter-bar select {
  border:1px solid #e0e8df;
  border-radius:7px;
  padding:9px;
  color:#7b927e;
  background:white;
  font-size:10px
}
.creative-thumbnail {
  width:38px;
  height:43px;
  border-radius:6px;
  background:linear-gradient(145deg,#dceadb,#c1d7c6);
  display:grid;
  place-items:center;
  color:#5e8d68;
  font-family:Manrope;
  font-weight:700;
  font-size:12px;
  overflow:hidden
}
.creative-thumbnail img {
  width:100%;
  height:100%;
  object-fit:cover
}
.overlay-backdrop {
  position:fixed;
  inset:0;
  background:#152c2366;
  backdrop-filter:blur(4px);
  z-index:80;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:24px;
  animation:fade-in .15s
}
.modal {
  background:white;
  border:1px solid #dfe9e1;
  border-radius:17px;
  width:460px;
  max-width:100%;
  box-shadow:0 20px 80px #183a2930;
  padding:26px;
  max-height:90vh;
  overflow:auto;
  animation:slide-in .18s
}
.modal.wide {
  width:640px
}
.modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px
}
.modal-header h2 {
  font-family:Manrope;
  font-size:19px;
  letter-spacing:-.4px;
  margin:0
}
.modal p {
  font-size:11px;
  color:#8a9d8e;
  line-height:1.9
}
.modal .form-field {
  margin:15px 0
}
.modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:24px
}
.date-presets {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:20px
}
.date-presets button {
  font-size:10px;
  padding:8px 11px;
  background:#f5f8f2;
  border:1px solid #e4ece1;
  border-radius:5px;
  color:#7a9380
}
.date-presets button:hover {
  background:#eaf5eb;
  color:var(--green)
}
.dropdown {
  position:fixed;
  z-index:90;
  background:#fff;
  border:1px solid #e3eae1;
  border-radius:10px;
  box-shadow:0 8px 30px #193d2726;
  min-width:190px;
  padding:7px;
  animation:fade-in .12s
}
.dropdown button {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  text-align:left;
  padding:10px 11px;
  font-size:11px;
  color:#728f79;
  border-radius:5px
}
.dropdown button:hover {
  background:#f0f7ee
}
.dropdown button.selected {
  background:#edf5ed;
  color:var(--green)
}
.dropdown .lucide {
  width:13px;
  height:13px
}
.dropdown .check-icon {
  margin-left:auto
}
.drawer-backdrop {
  position:fixed;
  inset:0;
  background:#15342440;
  z-index:80;
  backdrop-filter:blur(2px)
}
.drawer {
  position:fixed;
  right:0;
  top:0;
  bottom:0;
  width:420px;
  max-width:95vw;
  z-index:81;
  background:#fff;
  padding:28px;
  box-shadow:-10px 0 60px #15352418;
  overflow:auto;
  animation:drawer-in .2s
}
.drawer h2 {
  font-family:Manrope;
  font-size:22px;
  line-height:1.6;
  letter-spacing:-.6px
}
.drawer-kpis {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  margin:26px 0
}
.drawer-kpis>div {
  background:#f7faf5;
  border:1px solid var(--line);
  border-radius:9px;
  padding:17px
}
.drawer-kpis small {
  font-size:9px;
  display:block;
  color:#8da290;
  margin-bottom:10px
}
.drawer-kpis strong {
  font-family:Manrope;
  font-size:21px
}
.drawer-section {
  padding:20px 0;
  border-top:1px solid var(--line)
}
.drawer-section h3 {
  font-size:11px;
  color:#708e79
}
.drawer-section p {
  font-size:11px;
  color:#95a99b;
  line-height:1.9
}
.toast {
  position:fixed;
  bottom:25px;
  right:25px;
  z-index:100;
  padding:13px 19px;
  border:1px solid #dce9dd;
  background:white;
  color:#4d7b58;
  font-size:11px;
  box-shadow:var(--shadow);
  border-radius:9px;
  display:flex;
  align-items:center;
  gap:10px;
  animation:slide-in .2s;
  max-width:430px;
  line-height:1.7
}
.toast.error {
  color:#ae6b57;
  border-color:#f0ddd3
}
.toast>.lucide {
  width:16px
}
.loading-state {
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#8ba38e
}
.loading-state h2 {
  font-family:Manrope;
  font-size:19px;
  color:#64816b;
  margin-top:25px
}
.loading-state p {
  font-size:11px
}
.spinner {
  width:25px;
  height:25px;
  border:2px solid #d7e8d8;
  border-top-color:var(--green);
  border-radius:50%;
  display:inline-block;
  animation:spin .7s linear infinite
}
.warning-banner {
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:12px 16px;
  background:#fff7e9;
  border:1px solid #eee4ca;
  border-radius:8px;
  color:#a48b5b;
  font-size:10px;
  line-height:1.8;
  margin-bottom:18px
}
.warning-banner .lucide {
  width:14px;
  height:14px;
  margin-top:2px
}
.search-results {
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:15px
}
.search-result {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  padding:12px;
  border-radius:8px;
  color:#6c8b72;
  font-size:11px;
  background:#f7faf5
}
.search-result:hover {
  background:#edf5e9
}
.search-result .lucide {
  width:16px
}
.search-result small {
  margin-left:auto;
  font-size:9px;
  color:#a3b0a1
}
.mobile-only {
  display:none
}
.muted {
  color:#9bac9e
}
.error-text {
  font-size:10px;
  color:#ba705b;
  min-height:15px
}
.small-note {
  font-size:9px!important;
  color:#9eada1!important
}
.notices {
  padding:15px 0;
  border-bottom:1px solid var(--line)
}
.notices strong {
  font-size:11px;
  font-weight:500
}
.notices p {
  font-size:10px;
  margin:7px 0 0
}
.snapshot-hide {
  display:none
}
.hidden {
  display:none!important
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@keyframes fade-in {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}
@keyframes slide-in {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes drawer-in {
  from {
    transform:translateX(100%)
  }
  to {
    transform:translateX(0)
  }
}
@media(min-width:1500px) {
  main {
    padding:35px 45px
  }
  .topbar {
    padding:0 45px
  }
  .main-footer {
    margin-left:45px;
    margin-right:45px
  }
  .kpi-card {
    min-height:165px;
    padding:23px
  }
  .kpi-value {
    font-size:32px
  }
  .chart-card {
    min-height:340px
  }
  .trend-chart {
    height:210px
  }
  .chart-meta {
    padding-top:26px
  }
  .donut-body {
    padding-top:22px;
    padding-bottom:12px
  }
  .donut-chart {
    width:190px;
    height:190px
  }
  .allocation-legend {
    padding-top:14px;
    padding-bottom:23px
  }
  .channel-card {
    padding:18px 20px
  }
  td {
    padding-top:19px;
    padding-bottom:19px
  }
}
@media(max-width:1200px) {
  .sidebar {
    width:210px;
    padding-left:12px;
    padding-right:12px
  }
  .workspace-main {
    margin-left:210px;
    width:calc(100% - 210px)
  }
  main {
    padding:25px 25px 10px
  }
  .topbar {
    padding:0 25px
  }
  .kpi-grid {
    gap:12px
  }
  .kpi-card {
    padding:17px 15px
  }
  .kpi-value {
    font-size:24px
  }
  .sparkline {
    width:62px
  }
  .kpi-bottom {
    font-size:7px;
    gap:4px
  }
  .channel-card {
    padding:13px 12px;
    gap:9px
  }
  .mini-bars {
    display:none
  }
  .charts-row {
    gap:15px;
    grid-template-columns:minmax(0,1.8fr) minmax(245px,1fr)
  }
  .chart-legend {
    gap:8px;
    font-size:7px
  }
  .main-footer {
    margin-left:25px;
    margin-right:25px
  }
  .sidebar-tip {
    padding:13px
  }
  .chart-controls .chart-tab {
    padding:5px
  }
  .platform-grid {
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:1020px) {
  .sidebar {
    width:195px
  }
  .brand {
    font-size:18px;
    gap:8px
  }
  .brand-mark {
    width:29px;
    height:31px;
    padding:7px 6px
  }
  .workspace-main {
    margin-left:195px;
    width:calc(100% - 195px)
  }
  main {
    padding:25px 22px 10px
  }
  .topbar {
    padding:0 22px
  }
  .kpi-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .kpi-card {
    min-height:130px
  }
  .kpi-value-row {
    margin:13px 0 11px
  }
  .kpi-value {
    font-size:29px
  }
  .sparkline {
    width:90px
  }
  .kpi-bottom {
    font-size:8px
  }
  .charts-row {
    grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr)
  }
  .chart-header .chart-controls {
    display:none
  }
  .chart-large-value {
    font-size:20px
  }
  .chart-meta {
    padding-left:17px;
    padding-right:17px;
    flex-wrap:wrap
  }
  .chart-legend {
    margin-left:0
  }
  .card-header {
    padding-left:17px;
    padding-right:17px
  }
  .chart-controls {
    gap:0
  }
  .chart-tab {
    font-size:7px
  }
  .allocation-legend {
    gap:18px
  }
  .channel-card {
    gap:8px
  }
  .channel-icon {
    width:29px;
    height:29px
  }
  .channel-roas strong {
    font-size:16px
  }
  .channel-card p {
    font-size:7px
  }
  .sidebar-tip p {
    font-size:9px
  }
  .global-search kbd {
    margin-left:12px
  }
  .glossary-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .settings-grid {
    grid-template-columns:1fr
  }
  .table-actions .search-field {
    display:none
  }
  .main-footer {
    margin-left:22px;
    margin-right:22px
  }
  .filter-description {
    display:none
  }
  .page-heading h1 {
    font-size:26px
  }
}
@media(max-width:800px) {
  .sidebar {
    width:190px
  }
  .workspace-main {
    margin-left:190px;
    width:calc(100% - 190px)
  }
  .charts-row {
    grid-template-columns:1fr
  }
  .chart-meta {
    flex-wrap:nowrap
  }
  .chart-legend {
    margin-left:auto
  }
  .allocation-card {
    min-height:280px
  }
  .donut-body {
    padding-top:16px
  }
  .donut-chart {
    width:180px;
    height:180px
  }
  .channel-strip {
    gap:9px
  }
  .channel-card {
    flex-wrap:wrap
  }
  .channel-roas {
    margin-left:0!important;
    width:100%;
    text-align:left!important;
    padding-left:37px
  }
  .channel-roas small {
    display:inline;
    margin-left:6px
  }
  .channel-roas strong {
    font-size:18px
  }
  .page-heading {
    align-items:flex-start
  }
  .heading-buttons {
    gap:6px
  }
  .heading-buttons .button {
    padding:9px;
    font-size:9px
  }
  .heading-buttons .button-primary span {
    display:none
  }
  .page-heading p {
    font-size:10px
  }
  .page-heading h1 {
    font-size:23px
  }
  .global-search span {
    display:none
  }
  .global-search kbd {
    display:none
  }
  .topbar-actions {
    gap:9px
  }
  .report-grid {
    grid-template-columns:1fr
  }
  .metric-strip {
    grid-template-columns:repeat(2,1fr)
  }
  .disclosure-toggle small {
    display:none
  }
  .filter-bar {
    flex-wrap:wrap
  }
  .filter-bar .filter-group:last-child {
    margin-left:auto
  }
  .insight-banner .text-link {
    display:none
  }
  .table-actions {
    gap:5px
  }
}
@media(max-width:640px) {
  .sidebar {
    transform:translateX(-100%);
    transition:transform .2s;
    width:235px;
    box-shadow:8px 0 35px #173b2920
  }
  .sidebar.open {
    transform:translateX(0)
  }
  .workspace-main {
    margin-left:0;
    width:100%
  }
  .mobile-only {
    display:flex
  }
  .topbar {
    height:61px;
    padding:0 18px
  }
  .breadcrumbs {
    gap:8px
  }
  .topbar-actions {
    gap:8px
  }
  .topbar-divider {
    display:none
  }
  main {
    padding:25px 18px 10px
  }
  .page-heading {
    margin-bottom:23px;
    gap:10px
  }
  .page-heading h1 {
    font-size:25px
  }
  .heading-buttons .button:not(.button-primary) {
    display:none
  }
  .heading-buttons .button-primary {
    padding:10px 12px
  }
  .heading-buttons .button-primary span {
    display:inline;
    font-size:9px
  }
  .eyebrow {
    font-size:7px;
    margin-bottom:8px
  }
  .page-heading p {
    font-size:10px;
    max-width:230px
  }
  .filter-group {
    gap:7px
  }
  .select-button {
    font-size:9px;
    padding:8px 10px
  }
  .select-button .lucide:last-child {
    margin-left:5px
  }
  .filter-bar {
    margin-bottom:19px;
    gap:10px
  }
  .filter-bar .filter-group:last-child {
    width:100%;
    justify-content:space-between;
    margin:0
  }
  .filter-description {
    display:flex
  }
  .kpi-grid {
    gap:10px;
    margin-bottom:17px
  }
  .kpi-card {
    padding:15px 13px;
    min-height:129px
  }
  .kpi-top {
    font-size:9px
  }
  .kpi-top>.lucide {
    width:14px
  }
  .kpi-value {
    font-size:26px
  }
  .kpi-value .currency {
    font-size:9px;
    margin-right:4px
  }
  .sparkline {
    width:55px;
    height:28px
  }
  .kpi-bottom {
    font-size:6.5px;
    gap:4px
  }
  .change {
    font-size:7px;
    padding:3px 4px
  }
  .charts-row {
    gap:16px;
    margin-bottom:22px
  }
  .card-header {
    padding:18px 17px 0
  }
  .chart-card {
    min-height:286px
  }
  .chart-meta {
    padding-top:18px;
    gap:8px
  }
  .chart-large-value {
    font-size:23px
  }
  .chart-legend {
    gap:8px;
    font-size:7px
  }
  .trend-chart {
    height:180px
  }
  .allocation-card {
    min-height:298px
  }
  .donut-chart {
    width:185px;
    height:185px
  }
  .allocation-legend {
    gap:37px;
    padding-top:8px
  }
  .channel-strip {
    grid-template-columns:1fr;
    gap:9px;
    margin-bottom:24px
  }
  .channel-card {
    flex-wrap:nowrap;
    padding:13px 17px
  }
  .channel-roas {
    width:auto;
    margin-left:auto!important;
    padding:0;
    text-align:right!important
  }
  .channel-roas small {
    display:block;
    margin-left:0
  }
  .mini-bars {
    display:flex;
    margin-left:auto;
    margin-right:20px
  }
  .channel-icon {
    width:34px;
    height:34px
  }
  .channel-card p {
    font-size:8px
  }
  .channel-card h3 {
    font-size:11px
  }
  .channel-roas strong {
    font-size:20px
  }
  .table-card .card-header {
    padding:17px 15px
  }
  .table-actions .button {
    padding:6px
  }
  .table-actions .button span {
    display:none
  }
  .card-header h2 {
    font-size:12px
  }
  .table-footer {
    padding:13px 15px
  }
  .insight-banner {
    padding:13px;
    font-size:8px
  }
  .insight-banner p {
    font-size:8px
  }
  .main-footer {
    margin:10px 18px 0;
    font-size:7px;
    gap:10px
  }
  .footer-mark {
    display:none
  }
  .secondary-section {
    margin-top:20px
  }
  .disclosure-toggle {
    padding:16px
  }
  .disclosure-toggle strong {
    font-size:10px
  }
  .disclosure-body {
    padding:0 16px 16px
  }
  .metric-strip {
    gap:9px
  }
  .metric-strip>div {
    padding:12px
  }
  .metric-strip strong {
    font-size:20px
  }
  .glossary-grid {
    grid-template-columns:1fr
  }
  .platform-grid {
    grid-template-columns:repeat(2,1fr);
    gap:10px
  }
  .platform-card {
    padding:16px
  }
  .platform-card h3 {
    font-size:11px
  }
  .platform-card>strong {
    font-size:22px
  }
  .settings-card {
    padding:19px
  }
  .modal {
    padding:23px
  }
  .overlay-backdrop {
    padding:15px
  }
  .toast {
    left:18px;
    right:18px;
    bottom:18px;
    max-width:none
  }
  .selection-bar {
    gap:12px;
    flex-wrap:wrap
  }
  .selection-bar>.button {
    margin-left:0
  }
  .channel-bar-row {
    grid-template-columns:45px 1fr 65px;
    gap:10px
  }
  .channel-bars {
    padding:18px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

/* Keep the full navigation accessible on short displays. */
.sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #dbe8dd transparent;
}
.sidebar > * {
  flex-shrink: 0;
}
.kpi-card,
.channel-card {
  min-width: 0;
}
.kpi-value {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .table-actions .search-field {
    display: flex;
    width: 110px;
  }
  .table-actions .search-field input {
    width: 74px;
    font-size: 9px;
  }
  .table-card .card-header {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .sidebar-bottom {
    padding-top: 22px;
  }
}

/* Platform sales navigation */
.platform-sales-section { margin-bottom: 25px; }
.platform-sales-section .section-heading { margin-bottom: 12px; }
.platform-sales-note { color: #879b8c; font-size: 10px; }
.platform-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.platform-tab { text-align: left; min-width: 0; border: 1px solid #e0e9e1; border-radius: 11px; padding: 13px 12px; background: #fff; transition: border-color .18s, background .18s; }
.platform-tab:hover { border-color: #9fc4ab; background: #f6fbf7; }
.platform-tab.active { border-color: #78ae8b; background: linear-gradient(135deg,#edf8ef,#e2f1e7); box-shadow: 0 0 0 1px #78ae8b22; }
.platform-tab-name { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 600; color: #637d6b; white-space: nowrap; }
.platform-tab-name .lucide { width: 14px; height: 14px; }
.platform-tab-name .platform-tab-check { margin-left: auto; width: 11px; color: #187b5a; }
.platform-tab strong { display: block; font-family: Manrope, sans-serif; font-size: 15px; margin: 12px 0 5px; color: #345d42; font-variant-numeric: tabular-nums; white-space: nowrap; }
.platform-tab small { display: block; color: #92a096; font-size: 9px; }
.platform-attribution-note { margin: 10px 0 0; font-size: 9px; color: #93a097; line-height: 1.7; }
.platform-sales-card { text-align: left; transition: border-color .18s, box-shadow .18s; }
.platform-sales-card:hover { border-color: #a0c7ac; box-shadow: 0 5px 20px #187b5a10; }
.platform-sales-card.active { border-color: #7fae8c; background: linear-gradient(130deg,#fff,#edf7ef); }
.platform-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 22px; color: #779681; }
.platform-card-logo { display: flex; align-items: center; gap: 8px; color: #53715b; font-size: 12px; font-weight: 600; }
.platform-card-top > .lucide { width: 14px; }
.platform-sales-label { display: block; color: #8d9c91; font-size: 9px; margin-bottom: 7px; }
.platform-sales-card > strong { display: block; font-size: 23px; color: #335e42; }
.platform-card-details { display: flex; justify-content: space-between; gap: 10px; font-size: 9px; color: #91a093; margin-top: 13px; }
.platform-card-details b { color: #659572; font-weight: 500; }
.platform-card-spend { display: block; font-size: 10px; color: #8c9c8f; margin-top: 14px; }
.platform-sales-card .progress-track { display: block; }
.platform-card-foot { display: block; color: #98a899; font-size: 8px; line-height: 1.8; }
/* Saved internal platform budget targets */
.budget-planner { margin-bottom: 23px; padding: 24px; }
.budget-planner-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.budget-planner-heading h2 { font-family: Manrope,sans-serif; font-size: 20px; margin: 0 0 8px; letter-spacing: -.5px; }
.budget-planner-heading p { margin: 0; font-size: 11px; color: #8b9d91; line-height: 1.7; }
.budget-month-label { display: flex; flex-direction: column; gap: 7px; color: #8a9d8e; font-size: 10px; }
.budget-month-label input { width: 178px; border: 1px solid #dde8df; border-radius: 7px; padding: 10px; color: #54755e; background: #fff; font-size: 11px; }
.budget-scope { display: flex; gap: 22px; flex-wrap: wrap; margin: 20px 0; border-bottom: 1px solid #eaf0e8; padding-bottom: 18px; }
.budget-scope > span { display: flex; gap: 6px; align-items: center; font-size: 9px; color: #8a9e90; }
.budget-scope .lucide { width: 12px; height: 12px; }
.budget-loading { display: flex; gap: 13px; align-items: center; padding: 30px 0; font-size: 11px; color: #7d9684; }
.budget-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
.budget-summary > div { background: #f7faf6; border: 1px solid #e6eee4; border-radius: 10px; padding: 17px 15px; min-width: 0; }
.budget-summary small { display: block; color: #889d8f; font-size: 9px; margin-bottom: 10px; }
.budget-summary strong { display: block; font-family: Manrope,sans-serif; font-size: 19px; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.budget-summary span { display: block; color: #9baa9d; font-size: 8px; margin-top: 8px; line-height: 1.7; }
.budget-table-scroll { overflow-x: auto; }
.budget-table { min-width: 870px; }
.budget-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.3fr 1.2fr 1fr .5fr; gap: 13px; align-items: center; border-bottom: 1px solid #edf1e9; padding: 15px 7px; font-size: 10px; color: #789080; }
.budget-table-head { background: #f8faf6; color: #98a79a; font-size: 9px; padding: 12px 7px; }
.budget-platform-name { display: flex; align-items: center; gap: 8px; font-weight: 500; color: #54725e; }
.budget-platform-name .lucide { width: 15px; height: 15px; color: #7b9a84; }
.budget-row select, .budget-row input { border: 1px solid #dfe9df; border-radius: 6px; padding: 9px 7px; color: #62836c; background: #fff; width: 100%; min-width: 0; font-size: 10px; }
.budget-row input::placeholder { color: #b0bab1; }
.budget-row-calculations { display: contents; font-variant-numeric: tabular-nums; }
.budget-equivalent { color: #729579; font-size: 9px; }
.budget-remaining { color: #649173; }
.over-budget { color: #b7745e !important; }
.budget-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 20px; }
.budget-form-footer p { display: flex; gap: 7px; align-items: flex-start; color: #99a79b; font-size: 9px; line-height: 1.9; margin: 0; max-width: 500px; }
.budget-form-footer p .lucide { width: 13px; height: 13px; margin-top: 2px; }
.budget-form-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
#budget-save-status { color: #85a18c; font-size: 9px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1300px) { .platform-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 900px) { .budget-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } .budget-form-footer { align-items: flex-start; flex-direction: column; } }
@media (max-width: 640px) { .platform-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); } .platform-sales-note { display: none; } .budget-planner { padding: 18px; } .budget-planner-heading { align-items: flex-start; flex-direction: column; } .budget-scope { gap: 10px; } .budget-month-label input { width: 185px; } .budget-summary { gap: 9px; } .budget-summary > div { padding: 12px; } .budget-summary strong { font-size: 16px; } }

/* Direct store navigation, paired with the platform selector. */
.store-tabs-section { margin: 0 0 23px; }
.store-tabs-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; }
.store-tabs-heading h2 { font-family: Manrope,sans-serif; font-size: 13px; font-weight: 750; margin: 0; letter-spacing: -.2px; }
.store-tabs-heading p { color: #95a397; font-size: 9px; margin: 0; }
.store-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.store-tab { display: flex; align-items: center; gap: 11px; padding: 12px 15px; min-height: 53px; text-align: left; background: #fff; border: 1px solid #e1eae2; border-radius: 10px; color: #7f9485; transition: border-color .18s,background .18s; }
.store-tab:hover { background: #f6faf6; border-color: #a2c4ab; }
.store-tab.active { color: #216e4b; background: linear-gradient(120deg,#edf8f0,#e4f1e8); border-color: #86b193; box-shadow: 0 0 0 1px #86b19316; }
.store-tab-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; flex-shrink: 0; background: #edf4ed; color: #6d9479; }
.store-tab-icon.udhiya { background: #edf5ed; color: #71a480; }
.store-tab-icon.muein { background: #f3effa; color: #a490c6; }
.store-tab-icon.katateeb { background: #faf5e9; color: #c6a572; }
.store-tab-icon .lucide { width: 14px; height: 14px; }
.store-tab-title { font-size: 11px; font-weight: 500; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.store-tab-title [lang="ar"] { color: #9eaba1; font-size: 11px; font-weight: 400; }
.store-tab-check { margin-left: auto; width: 13px !important; height: 13px !important; flex-shrink: 0; }
@media (max-width: 900px) { .store-tab { padding: 11px; gap: 8px; } .store-tab-title { gap: 4px; } }
@media (max-width: 640px) { .store-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); } .store-tabs-heading { justify-content: space-between; gap: 9px; } .store-tabs-heading p { font-size: 8px; } }