/* XPay Analytics — theme & layout */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --surface-1: #ffffff;
  --surface-2: #f5f5f7;
  --page: #f6f6f8;
  --shadow-sm: 0 1px 2px rgba(24,24,32,0.04);
  --shadow: 0 2px 8px -2px rgba(24,24,32,0.06), 0 1px 2px rgba(24,24,32,0.04);
  --shadow-lg: 0 16px 40px -12px rgba(79,70,229,0.28);
  --text-primary: #16161a;
  --text-secondary: #5b5f66;
  --text-muted: #9a9ea6;
  --grid: #f0f0f2;
  --baseline: #d7d8dd;
  --border: #ececef;
  --border-strong: #e0e0e4;
  --series-1: #0086ff;
  --series-2: #10b981;
  --series-3: #f5a623;
  --series-4: #22c55e;
  --series-5: #6f5bff;
  --series-6: #f43f5e;
  --ord-1: #b8ddff;
  --ord-2: #66b5ff;
  --ord-3: #0086ff;
  --ord-4: #0060c0;
  --good: #059669;
  --good-bg: #d1fae5;
  --bad: #e11d48;
  --bad-bg: #ffe4e6;
  --accent: #0086ff;
  --accent-2: #00b2ff;
  --accent-ink: #ffffff;
  --ghost: rgba(0, 134, 255, 0.07);
  --tooltip-bg: #0b1220;
  --tooltip-ink: #ffffff;
  --radius: 18px;
  --radius-sm: 11px;
}
[data-theme="dark"] {
  --surface-1: #17171b;
  --surface-2: #202026;
  --page: #0b0b0e;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 2px 10px -2px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 50px -16px rgba(0,134,255,0.5);
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #6b6b74;
  --grid: #232327;
  --baseline: #35353c;
  --border: #26262b;
  --border-strong: #33333a;
  --series-1: #3aa0ff;
  --series-2: #34d399;
  --series-3: #fbbf24;
  --series-4: #4ade80;
  --series-5: #8f80ff;
  --series-6: #fb7185;
  --ord-1: #bfe0ff;
  --ord-2: #6fbaff;
  --ord-3: #3aa0ff;
  --ord-4: #0086ff;
  --good: #34d399;
  --good-bg: rgba(16,185,129,0.15);
  --bad: #fb7185;
  --bad-bg: rgba(251,113,133,0.15);
  --accent: #3aa0ff;
  --accent-2: #4fc3ff;
  --accent-ink: #0b0b0e;
  --ghost: rgba(58, 160, 255, 0.13);
  --tooltip-bg: #fafafa;
  --tooltip-ink: #16161a;
  --radius: 18px;
  --radius-sm: 11px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { height: 100%; }
body {
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  background: var(--page);
  color: var(--text-primary);
  min-height: 100%;
  font-size: 14px;
  line-height: 1.7;
  transition: background 0.2s;
}

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 40px 36px; width: 100%; max-width: 380px; text-align: center;
}
.brand { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; }
.login-brand .site-logo-svg { height: 27px; }
.login-brand .brand-suffix { font-size: 18px; }
.login-card p { color: var(--text-secondary); margin: 10px 0 24px; }
.login-card input {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--page); color: var(--text-primary); font: inherit; text-align: center; direction: ltr;
}
.login-card input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.login-card button {
  width: 100%; margin-top: 14px; padding: 11px; border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.login-err { color: var(--bad); font-size: 13px; margin-top: 12px; min-height: 20px; }

/* ---------- header ---------- */
header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 28px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky; top: 0; z-index: 30;
}
header .brand { display: flex; align-items: center; gap: 9px; font-size: 17px; }
/* XPay official logo — navy wordmark becomes theme-ink so it shows in dark mode */
.site-logo-svg { height: 22px; width: auto; display: block; }
.site-logo-svg .logo-ink { fill: var(--text-primary); }
.brand-suffix { font-weight: 500; color: var(--text-muted); font-size: 15px; letter-spacing: -0.2px; padding-block: 2px; }
.header-spacer { flex: 1; }
.badge {
  font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  background: var(--good-bg); color: var(--good); border: 1px solid transparent;
}
.badge.demo { background: rgba(217, 119, 6, 0.12); color: #b45309; }
[data-theme="dark"] .badge.demo { color: #f59e0b; }
.live-pill { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); padding: 4px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }
.live-pill b { font-size: 14px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.icon-btn {
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
  border-radius: 9px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; line-height: 1;
}
.icon-btn:hover { background: var(--ghost); color: var(--accent); }
.text-btn { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 12.5px; padding: 6px 8px; }
.text-btn:hover { color: var(--text-primary); }

/* ---------- tab bar ---------- */
.tabbar { display: flex; gap: 2px; padding: 0 28px; background: var(--surface-1); border-bottom: 1px solid var(--border); position: sticky; top: 55px; z-index: 25; overflow-x: auto; }
.tabbar .tab {
  border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px;
  font-weight: 600; padding: 13px 18px; cursor: pointer; position: relative; white-space: nowrap;
}
.tabbar .tab:hover { color: var(--text-primary); }
.tabbar .tab.active { color: var(--accent); }
.tabbar .tab.active::after { content: ''; position: absolute; inset-inline: 10px; bottom: -1px; height: 2.5px; background: var(--accent); border-radius: 3px 3px 0 0; }

/* ---------- executive summary ---------- */
.exec-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; margin-bottom: 16px; }
.hero-card { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; overflow: hidden; box-shadow: var(--shadow-sm); }
.hero-card.primary { background: linear-gradient(140deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: var(--shadow-lg); }
.hero-card.primary::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,0.22), transparent 55%); pointer-events: none; }
.hero-card.primary .hc-label, .hero-card.primary .hc-value, .hero-card.primary .hc-delta .vs { color: #fff; }
.hero-card.primary .hc-label { opacity: 0.85; }
.hc-top { display: flex; align-items: center; gap: 8px; }
.hc-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--ghost); color: var(--accent); flex: 0 0 auto; }
.hero-card.primary .hc-icon { background: rgba(255,255,255,0.18); color: #fff; }
.hc-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }
.hc-value { font-size: 30px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; margin-top: 10px; direction: ltr; text-align: start; }
.hc-value .unit { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-inline-start: 4px; }
.hero-card.primary .hc-value .unit { color: rgba(255,255,255,0.8); }
.hc-delta { font-size: 12.5px; font-weight: 700; margin-top: 6px; display: flex; align-items: center; gap: 6px; direction: ltr; }
.hc-delta .vs { color: var(--text-muted); font-weight: 400; }
.hc-delta.up { color: var(--good); } .hc-delta.down { color: var(--bad); }
.hero-card.primary .hc-delta.up, .hero-card.primary .hc-delta.down { color: #fff; }
.hc-spark { position: absolute; inset-inline: 0; bottom: 0; height: 34px; opacity: 0.5; direction: ltr; }

/* insights callouts */
.insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.insight { display: flex; gap: 12px; background: var(--surface-1); border: 1px solid var(--border); border-inline-start: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.insight.good { border-inline-start-color: var(--good); }
.insight.warn { border-inline-start-color: #d97706; }
.insight .in-icon { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.insight .in-body { min-width: 0; }
.insight .in-title { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
.insight .in-text { font-size: 13.5px; color: var(--text-primary); line-height: 1.6; }
.insight .in-text b { font-weight: 800; }
.section-label { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; margin: 4px 2px 10px; text-transform: none; }

/* role chip + manage button in header */
.role-chip { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; }
.role-chip b { color: var(--text-primary); }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(15,15,20,0.5); backdrop-filter: blur(3px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 560px; max-height: 86vh; overflow: auto; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface-1); }
.modal-head h2 { font-size: 16px; font-weight: 800; }
.modal-head .sub { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.modal-body { padding: 20px 22px; }
.modal-x { border: 0; background: transparent; color: var(--text-muted); font-size: 20px; cursor: pointer; line-height: 1; }
.modal-x:hover { color: var(--text-primary); }
.u-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 18px; }
.u-form label { font-size: 11.5px; color: var(--text-secondary); display: block; margin-bottom: 5px; font-weight: 600; }
.u-form input, .u-form select { width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); color: var(--text-primary); font: inherit; font-size: 13px; }
.u-form input:focus, .u-form select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.u-form button { padding: 9px 18px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.roles-help { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px; }
.roles-help .rh { font-size: 11px; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; }
.roles-help .rh b { color: var(--text-primary); }
.u-list { display: flex; flex-direction: column; gap: 8px; }
.u-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; }
.u-row .u-name { font-weight: 700; font-size: 13.5px; }
.u-row .u-role { font-size: 11.5px; color: var(--text-secondary); background: var(--ghost); padding: 2px 9px; border-radius: 999px; }
.u-row .u-del { margin-inline-start: auto; border: 0; background: transparent; color: var(--bad); cursor: pointer; font-size: 12.5px; }
.u-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 16px; }
.u-note { font-size: 12px; color: var(--text-muted); margin-top: 14px; line-height: 1.7; }

/* device funnel compare */
.dev-funnels { display: flex; flex-direction: column; gap: 14px; }
.dev-row { }
.dev-row .dev-top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.dev-row .dev-name { font-weight: 700; }
.dev-row .dev-rate { font-weight: 800; }
.dev-row .dev-bar { height: 26px; border-radius: 8px; background: var(--surface-2); overflow: hidden; position: relative; }
.dev-row .dev-fill { height: 100%; border-radius: 8px; display: flex; align-items: center; padding-inline-start: 10px; color: #fff; font-size: 11.5px; font-weight: 700; direction: ltr; min-width: 40px; }
.dev-row .dev-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* stat callout inside cards */
.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 10px; }
.mini-stat { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.mini-stat .ms-label { font-size: 11.5px; color: var(--text-secondary); }
.mini-stat .ms-value { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; margin-top: 3px; }
.mini-stat .ms-sub { font-size: 11px; color: var(--text-muted); }

/* ---------- channel quality table ---------- */
.chan-tbl td.num { position: relative; }
.chan-tbl .cbar { display: block; height: 3px; border-radius: 2px; background: var(--grid); margin-top: 3px; overflow: hidden; }
.chan-tbl .cbar > span { display: block; height: 100%; border-radius: 2px; }
.chan-tbl td.rate.best { color: var(--good); font-weight: 750; }
.chan-tbl th { white-space: nowrap; }
.pos-badge { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- big funnel ---------- */
.bigfunnel { display: flex; flex-direction: column; gap: 0; padding: 4px 0; }
.bf-step { padding: 2px 0; }
.bf-label { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 4px; }
.bf-bar-wrap { display: flex; align-items: center; gap: 10px; }
.bf-bar { height: 34px; border-radius: 8px; display: flex; align-items: center; min-width: 44px; transition: width .3s; }
.bf-count { color: #fff; font-weight: 700; font-size: 13px; padding-inline-start: 12px; direction: ltr; }
.bf-pct { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bf-drop { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--text-muted); padding: 5px 2px 5px 0; padding-inline-end: 60px; }
.bf-drop .bf-lost { color: var(--bad); opacity: 0.8; }

/* ---------- filter row ---------- */
.filters { display: flex; align-items: center; gap: 8px; padding: 16px 24px 0; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
  font: inherit; font-size: 13px; padding: 5px 16px; border-radius: 999px; cursor: pointer;
}
.chip:hover { background: var(--ghost); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.filters .note { font-size: 12px; color: var(--text-muted); margin-inline-start: auto; }
.filters .sep { width: 1px; height: 22px; background: var(--border); margin-inline: 6px; }

/* date range picker (popover) */
.date-picker { position: relative; }
.date-trigger {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong);
  background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.date-trigger:hover { border-color: var(--accent); }
.date-trigger .chev { color: var(--text-muted); transition: transform .15s; }
.date-picker.open .date-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ghost); }
.date-picker.open .date-trigger .chev { transform: rotate(180deg); }
.date-pop {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 40; width: 230px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 6px; animation: fade .12s ease;
}
.date-opt {
  display: block; width: 100%; text-align: start; border: 0; background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 9px; cursor: pointer;
}
.date-opt:hover { background: var(--ghost); color: var(--text-primary); }
.date-opt.active { background: var(--accent); color: #fff; font-weight: 700; }
.date-custom { border-top: 1px solid var(--border); margin-top: 6px; padding: 10px 8px 6px; }
.dc-label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; }
.dc-inputs { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dc-inputs .ta { font-size: 11.5px; color: var(--text-muted); }
.dc-inputs input[type="date"] {
  flex: 1; min-width: 0; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-primary);
  border-radius: 8px; padding: 5px 7px; font: inherit; font-size: 11.5px; direction: ltr; color-scheme: light;
}
[data-theme="dark"] .dc-inputs input[type="date"] { color-scheme: dark; }
.dc-apply { width: 100%; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: 12.5px; padding: 8px; cursor: pointer; }

/* ---------- grid & cards ---------- */
main { padding: 20px 28px 48px; max-width: 1480px; margin: 0 auto; }
main.loading .card, main.loading .tile, main.loading .hero-card, main.loading .insight { opacity: 0.5; pointer-events: none; transition: opacity 0.15s; }
#exec:empty, #kpis:empty { display: none; }
.card, .tile, .hero-card { animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px 13px; box-shadow: var(--shadow-sm); }
.tile .label { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }
.tile .value { font-size: 25px; font-weight: 800; margin-top: 4px; letter-spacing: -0.5px; }
.tile .delta { font-size: 12px; font-weight: 700; margin-top: 2px; }
.tile .delta.up { color: var(--good); }
.tile .delta.down { color: var(--bad); }
.tile .delta .vs { color: var(--text-muted); font-weight: 400; }
.tile .spark { margin-top: 6px; height: 30px; direction: ltr; }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; min-width: 0; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow); }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.span-12 { grid-column: span 12; }
@media (max-width: 1100px) { .span-8, .span-7, .span-6, .span-5 { grid-column: span 12; } .span-4, .span-3 { grid-column: span 6; } }
@media (max-width: 640px) { .span-4, .span-3 { grid-column: span 12; } header, main, .filters, .tabbar { padding-inline: 14px; } }

.card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.card-head h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
.card-head .sub { font-size: 12px; color: var(--text-muted); }
.card-head .toggle { margin-inline-start: auto; display: flex; gap: 2px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; background: var(--surface-2); }
.card-head .toggle button {
  border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 11.5px;
  padding: 2px 10px; border-radius: 6px; cursor: pointer;
}
.card-head .toggle button.on { background: var(--ghost); color: var(--accent); font-weight: 700; }
.chart-box { direction: ltr; }
.empty { color: var(--text-muted); font-size: 13px; padding: 24px 0; text-align: center; }

/* metric pairing: [area chart card] ← → [scorecard] — Looker layout */
.metric-pair { display: flex; align-items: stretch; gap: 16px; min-width: 0; }
.metric-pair .chart-card {
  flex: 1.7; min-width: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px 6px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.metric-pair .chart-legend { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.metric-pair .chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.metric-pair .chart-legend .lg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.metric-pair .chart-box { flex: 1; }
.toggle-mini { margin-inline-start: auto; display: flex; gap: 2px; }
.toggle-mini button {
  border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 11px;
  padding: 1px 7px; border-radius: 6px; cursor: pointer;
}
.toggle-mini button.on { background: var(--ghost); color: var(--accent); font-weight: 700; }

.metric-pair .score-block { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.metric-pair .score-title { font-size: 14.5px; font-weight: 700; color: var(--text-secondary); }
.metric-pair .score-pill {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 22px; min-width: 130px;
}
.metric-pair .score-num { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.25; direction: ltr; }
.metric-pair .score-delta { font-size: 13px; font-weight: 600; margin-top: 2px; direction: ltr; }
.metric-pair .score-delta.up { color: var(--good); }
.metric-pair .score-delta.down { color: var(--bad); }
@media (max-width: 1100px) { .metric-pair.span-8, .metric-pair.span-6 { grid-column: span 12; } }
@media (max-width: 560px) { .metric-pair { flex-direction: column; } }

/* ---------- legend ---------- */
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; direction: rtl; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .key i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.legend .key i.rect { width: 10px; height: 10px; border-radius: 3px; }

/* ---------- hbar rows ---------- */
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; align-items: center; gap: 10px; cursor: default; border-radius: 6px; }
.hbar:hover { background: var(--ghost); }
.hbar .lbl { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; }
.hbar .track { height: 18px; display: flex; align-items: center; }
.hbar .fill { height: 16px; border-radius: 4px 0 0 4px; min-width: 2px; }
.hbar .val { font-size: 12px; font-weight: 650; color: var(--text-primary); min-width: 44px; text-align: left; direction: ltr; }
.hbar .pct { color: var(--text-muted); font-weight: 400; font-size: 11px; }

/* funnel conversion row */
.conv { display: grid; grid-template-columns: minmax(90px, 32%) 1fr; gap: 10px; font-size: 11px; color: var(--text-muted); margin: -3px 0; }
.conv span { padding-inline-start: 4px; }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: right; color: var(--text-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--grid); }
.tbl td { padding: 6px 8px; border-bottom: 1px solid var(--grid); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num, .tbl th.num { direction: ltr; text-align: left; font-variant-numeric: tabular-nums; }
.tbl td.dim { direction: ltr; text-align: right; color: var(--text-secondary); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl tr:hover td { background: var(--ghost); }

/* ---------- tooltip ---------- */
#tooltip {
  position: fixed; z-index: 99; pointer-events: none; display: none;
  background: var(--tooltip-bg); color: var(--tooltip-ink);
  border-radius: 9px; padding: 8px 12px; font-size: 12px; line-height: 1.9;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); max-width: 260px; direction: rtl;
}
#tooltip .t-title { color: color-mix(in srgb, var(--tooltip-ink) 60%, transparent); font-size: 11px; }
#tooltip .t-row { display: flex; align-items: center; gap: 7px; }
#tooltip .t-row i { width: 12px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
#tooltip .t-row b { font-weight: 750; direction: ltr; }
#tooltip .t-row span { color: color-mix(in srgb, var(--tooltip-ink) 65%, transparent); }

/* ---------- realtime card ---------- */
.rt-hero { font-size: 48px; font-weight: 800; letter-spacing: -1px; line-height: 1.2; }
.rt-sub { color: var(--text-muted); font-size: 12px; margin-bottom: 10px; }
.rt-spark { height: 46px; direction: ltr; margin-bottom: 14px; }
.rt-list { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.rt-list .row { display: flex; justify-content: space-between; gap: 10px; }
.rt-list .row .l { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-list .row b { direction: ltr; }

footer { text-align: center; color: var(--text-muted); font-size: 11.5px; padding: 12px 0 30px; }
svg text { font-family: inherit; }

/* ===== UTM Explorer (social tab) ===== */
.utm-explorer { padding: 4px 2px 2px; }
.utm-inp-row { display: flex; gap: 8px; margin-bottom: 10px; }
.utm-inp-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2, var(--bg)); color: var(--text-primary); font-size: 13px; direction: ltr; text-align: left; font-family: inherit; }
.utm-inp-row button { padding: 10px 18px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.utm-inp-row button:hover { filter: brightness(1.06); }
.utm-fields { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.utm-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted); }
.utm-fields input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2, var(--bg)); color: var(--text-primary); font-size: 12.5px; direction: ltr; text-align: left; font-family: inherit; }
.utm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.utm-tag { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2, rgba(0,134,255,.08)); color: var(--text-secondary); direction: ltr; }
.utm-tag b { color: var(--accent); }
.utm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.utm-kpi { background: var(--surface-2, var(--bg)); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.utm-kpi .uk-l { font-size: 11.5px; color: var(--text-muted); }
.utm-kpi .uk-v { font-size: 19px; font-weight: 800; color: var(--text-primary); direction: ltr; text-align: right; }
.utm-kpi .uk-d { font-size: 11px; font-weight: 700; }
.utm-kpi .uk-d.up { color: var(--pos, #16a34a); }
.utm-kpi .uk-d.dn { color: var(--neg, #dc2626); }
.utm-kpi .uk-h { font-size: 10.5px; color: var(--text-muted); }
.utm-lower { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.utm-sub { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.utm-combo-list { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--text-secondary); direction: ltr; text-align: left; }
.utm-combo-list li { padding: 5px 0; border-bottom: 1px dashed var(--border); }
.utm-combo-list li b { color: var(--accent); }
.utm-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.utm-tbl td.dim { direction: ltr; text-align: left; }
@media (max-width: 720px) { .utm-fields { grid-template-columns: repeat(2, 1fr); } .utm-lower { grid-template-columns: 1fr; } }

/* ===== Finance tab (ROAS & LTV) ===== */
.fin-assume { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.fin-assume label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.fin-assume input { padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2, var(--bg)); color: var(--text-primary); font-size: 14px; font-weight: 700; direction: ltr; text-align: left; font-family: inherit; }
.fin-assume small { font-size: 10.5px; color: var(--text-muted); font-weight: 400; }
.fin-save { padding: 10px 18px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.fin-save:hover { filter: brightness(1.06); }
.fin-ro { font-size: 12px; color: var(--text-muted); }
.fin-formula { margin-top: 12px; padding: 10px 12px; background: var(--surface-2, rgba(0,134,255,.05)); border-radius: 9px; font-size: 11.5px; color: var(--text-secondary); line-height: 1.9; }
.fin-formula b { color: var(--accent); }
.fin-add { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr; gap: 8px; }
.fin-add input, .fin-add select { padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2, var(--bg)); color: var(--text-primary); font-size: 12.5px; font-family: inherit; min-width: 0; }
.fin-add #fs-label { grid-column: 1 / 3; }
.fin-add #fs-add { grid-column: 4; padding: 9px; border: none; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }
.fin-add #fs-add:hover { filter: brightness(1.06); }
.fin-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.fin-del { width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--neg, #dc2626); cursor: pointer; font-size: 12px; line-height: 1; }
.fin-del:hover { background: var(--neg, #dc2626); color: #fff; }
@media (max-width: 720px) { .fin-assume, .fin-add { grid-template-columns: 1fr 1fr; } .fin-add #fs-label { grid-column: 1 / 3; } .fin-add #fs-add { grid-column: 1 / 3; } }

/* ===== Google Ads transactions summary ===== */
.tx-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.tx-chip { flex: 1; min-width: 120px; background: var(--surface-2, var(--bg)); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.tx-chip span { font-size: 11.5px; color: var(--text-muted); }
.tx-chip b { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.tx-chip i { font-size: 11.5px; color: var(--text-secondary); font-style: normal; }
.tx-chip.total { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.tx-chip.total b { color: var(--accent); font-size: 15px; }

/* ===== Data connectivity banner ===== */
.data-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 200; text-align: center; padding: 8px 16px; font-size: 12.5px; font-weight: 600; }
.data-banner.stale { background: #fef3c7; color: #92400e; border-bottom: 1px solid #f59e0b; }
.data-banner.connecting { background: #dbeafe; color: #1e40af; border-bottom: 1px solid #3b82f6; }
:root[data-theme="dark"] .data-banner.stale, :root:not([data-theme="light"]) .data-banner.stale { background: #422006; color: #fcd34d; }
:root[data-theme="dark"] .data-banner.connecting, :root:not([data-theme="light"]) .data-banner.connecting { background: #172554; color: #93c5fd; }

/* ===== Landing vs Onsite diagnostic (Google Ads) ===== */
.ld-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 12px; }
.ld-kpi { background: var(--surface-2, var(--bg)); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ld-kpi span { font-size: 11px; color: var(--text-muted); }
.ld-kpi b { font-size: 19px; font-weight: 800; color: var(--text-primary); direction: ltr; text-align: right; }
.ld-kpi i { font-size: 10.5px; color: var(--text-muted); font-style: normal; }
.ld-funnel { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ld-step { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 12px; }
.ld-step .ld-l { font-size: 12.5px; color: var(--text-secondary); }
.ld-barwrap { display: flex; align-items: center; gap: 8px; }
.ld-bar { height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; min-width: 34px; transition: width .3s; }
.ld-bar b { color: #fff; font-size: 12.5px; font-weight: 700; }
.ld-rate { font-size: 12px; font-weight: 700; min-width: 38px; }
.ld-edit { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ld-edit input { padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2, var(--bg)); color: var(--text-primary); font-size: 12.5px; font-family: inherit; }
.ld-edit #ld-clicks { width: 200px; direction: ltr; text-align: left; }
.ld-edit #ld-note { flex: 1; min-width: 140px; }
.ld-edit #ld-save { padding: 9px 20px; border: none; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; font-family: inherit; }
.ld-edit #ld-save:hover { filter: brightness(1.06); }
@media (max-width: 720px) { .ld-metrics { grid-template-columns: repeat(3, 1fr); } .ld-step { grid-template-columns: 120px 1fr; } }