:root {
    --bg: #F4F5F8;
    --sidebar: #FFFFFF;
    --card: #FFFFFF;
    --ink: #1B1C2E;
    --ink-2: #56586C;
    --ink-3: #6C6E82;
    --line: #ECEDF2;
    --line-2: #F4F4F8;
    --pink: #E6377A;
    --pink-2: #F04E8C;
    --pink-soft: #FCE7F0;
    --purple: #7C3AED;
    --green: #12925A;
    --green-soft: #E4F5EC;
    --red: #DC3546;
    --red-soft: #FCE8EA;
    --sans: -apple-system, "SF Pro Text", "Segoe UI", "Assistant", "Heebo", "Rubik", system-ui, "Helvetica Neue", Arial, sans-serif;
    --shadow: 0 1px 2px rgba(27,28,46,.04), 0 4px 16px -8px rgba(27,28,46,.10);
    --r: 16px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:#0F1017; --sidebar:#16171F; --card:#181A23; --ink:#F2F2F7; --ink-2:#B3B5C4; --ink-3:#9698A8;
      --line:#262833; --line-2:#1E202A; --pink:#F45D97; --pink-2:#F04E8C; --pink-soft:#2A1622; --purple:#A78BFA;
      --green:#4ADE80; --green-soft:#15271c; --red:#F87171; --red-soft:#2b1618;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -12px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="light"]{--bg:#F4F5F8;--sidebar:#FFFFFF;--card:#FFFFFF;--ink:#1B1C2E;--ink-2:#56586C;--ink-3:#6C6E82;--line:#ECEDF2;--line-2:#F4F4F8;--pink:#E6377A;--pink-2:#F04E8C;--pink-soft:#FCE7F0;--purple:#7C3AED;--green:#12925A;--green-soft:#E4F5EC;--red:#DC3546;--red-soft:#FCE8EA;--shadow:0 1px 2px rgba(27,28,46,.04),0 4px 16px -8px rgba(27,28,46,.10);}
  :root[data-theme="dark"]{--bg:#0F1017;--sidebar:#16171F;--card:#181A23;--ink:#F2F2F7;--ink-2:#B3B5C4;--ink-3:#9698A8;--line:#262833;--line-2:#1E202A;--pink:#F45D97;--pink-2:#F04E8C;--pink-soft:#2A1622;--purple:#A78BFA;--green:#4ADE80;--green-soft:#15271c;--red:#F87171;--red-soft:#2b1618;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -12px rgba(0,0,0,.6);}

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; direction: rtl; background: var(--bg); color: var(--ink);
    font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  .en { direction: ltr; unicode-bidi: isolate; }
  .num { font-variant-numeric: tabular-nums; }
  h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
  :where(a,button,[tabindex]):focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 8px; }

  /* ---------- app shell ---------- */
  .app { display: grid; grid-template-columns: 244px 1fr; min-height: 100dvh; }

  /* ---------- sidebar ---------- */
  .side { background: var(--sidebar); border-inline-start: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100dvh; }
  .side-logo { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
  .side-logo img { height: 26px; width: auto; display: block; }
  .nav-group { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; padding: 14px 10px 6px; }
  .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: 14px; cursor: pointer; border: none; background: transparent; width: 100%; text-align: right; font-family: inherit; }
  .nav-item svg { width: 18px; height: 18px; flex: none; }
  .nav-item:hover { background: var(--line-2); color: var(--ink); }
  .nav-item.active { background: var(--pink-soft); color: var(--pink); font-weight: 600; }
  .nav-sub { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 14px; margin: 2px 0; }
  .nav-sub .nav-item { font-size: 13.5px; padding: 7px 10px; }
  .nav-sub .nav-item .cdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }

  /* ---------- main ---------- */
  .main { min-width: 0; display: flex; flex-direction: column; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 28px; border-bottom: 1px solid var(--line); background: var(--card); }
  .crumbs { font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
  .crumbs .cur { color: var(--ink); font-weight: 600; }
  .crumbs .sep { color: var(--line); }
  .top-actions { display: flex; align-items: center; gap: 12px; }
  .tbtn { font-size: 13px; color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; cursor: pointer; font-family: inherit; font-weight: 500; }
  .tbtn:hover { border-color: var(--pink); color: var(--ink); }
  .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }

  .content { padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 20px; }

  /* ---------- client header ---------- */
  .client-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .client-logo { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; display: grid; place-items: center; box-shadow: var(--shadow); }
  .client-logo img { height: 22px; display: block; }
  .client-head h1 { font-size: 22px; }
  .client-head .meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
  .gear { margin-inline-start: 4px; color: var(--ink-3); background: none; border: none; cursor: pointer; padding: 4px; }

  /* ---------- filter bar ---------- */
  .filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .fpill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-family: inherit; }
  .fpill:hover { border-color: var(--pink); color: var(--ink); }
  .fpill svg { width: 14px; height: 14px; color: var(--ink-3); }

  /* ---------- grid + cards ---------- */
  .row { display: grid; gap: 16px; }
  .r-4 { grid-template-columns: repeat(4, 1fr); }
  .r-3-mix { grid-template-columns: 1.05fr 1.25fr 1fr; }
  .r-trend { grid-template-columns: 1.7fr 1fr; }
  .r-2 { grid-template-columns: 1.6fr 1fr; }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
  .card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
  .card-h h3 { font-size: 14px; font-weight: 700; }
  .card-h .link { font-size: 12.5px; color: var(--pink); font-weight: 600; cursor: pointer; }
  .card-h .info { color: var(--ink-3); }

  /* KPI card */
  .kpi .lab { font-size: 13px; color: var(--ink-2); font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .kpi .lab .info { width: 14px; height: 14px; color: var(--ink-3); }
  .kpi .big { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin-top: 12px; display: flex; align-items: baseline; gap: 8px; }
  .kpi .big .arrow { font-size: 18px; font-weight: 800; }
  .kpi .big .of { font-size: 13px; color: var(--ink-3); font-weight: 600; letter-spacing: 0; }
  .up { color: var(--green); } .down { color: var(--red); }
  .kpi .trend { font-size: 12.5px; font-weight: 600; margin-top: 7px; }
  .kpi .hint { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-2); }
  .kpi .hint b { color: var(--ink-2); font-weight: 600; }

  /* ---------- donut ---------- */
  .donut-card { display: flex; flex-direction: column; }
  .donut-body { flex: 1; display: grid; place-items: center; padding: 8px 0 4px; }
  .donut { --p: 90; --c1: var(--pink); --c2: var(--purple); position: relative; width: 172px; height: 172px; border-radius: 50%;
    background: conic-gradient(from -90deg, var(--c1), var(--c2) calc(var(--p) * 1%), var(--line) 0);
  }
  .donut.solid { background: conic-gradient(from -90deg, var(--c2) calc(var(--p) * 1%), var(--line) 0); }
  .donut .hole { position: absolute; inset: 24px; background: var(--card); border-radius: 50%; display: grid; place-content: center; text-align: center; }
  .donut .hole .v { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
  .donut .hole .u { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }

  /* ---------- top prompts ---------- */
  .prompts { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
  .prm { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
  .prm .txt { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prm .txt b { color: var(--ink-3); font-weight: 600; margin-inline-end: 4px; }
  .prm .barrow { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 42px; align-items: center; gap: 10px; }
  .prm .track { height: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
  .prm .fill { height: 100%; background: var(--pink); border-radius: 4px; }
  .prm .val { font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-align: left; }
  .foot-note { font-size: 11.5px; color: var(--ink-3); margin-top: 12px; text-align: left; }

  /* ---------- trend chart ---------- */
  .legend { display: flex; gap: 14px; flex-wrap: wrap; }
  .legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
  .legend .sw { width: 12px; height: 3px; border-radius: 2px; }
  .chart { width: 100%; height: 210px; display: block; margin-top: 8px; }
  .xax { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 4px; }

  /* ---------- inclusion split ---------- */
  .incl { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
  .incl-legend { display: flex; flex-direction: column; gap: 12px; flex: 1; }
  .incl-legend .r { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); }
  .incl-legend .r .sw { width: 10px; height: 10px; border-radius: 3px; }
  .incl-legend .r b { margin-inline-start: auto; color: var(--ink); font-weight: 700; }

  /* ---------- table ---------- */
  .section-title { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  .section-title h2 { font-size: 16px; }
  .section-title .pill { font-size: 11px; font-weight: 700; color: var(--pink); background: var(--pink-soft); padding: 3px 9px; border-radius: 6px; letter-spacing: .02em; }
  table { width: 100%; border-collapse: collapse; }
  thead th { text-align: right; font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 4px 10px 12px; border-bottom: 1px solid var(--line); }
  thead th.n { text-align: left; }
  tbody td { padding: 12px 10px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr:hover td { background: var(--line-2); }
  td.n { text-align: left; font-variant-numeric: tabular-nums; }
  td.kw { font-weight: 600; }
  .pos { display: inline-flex; min-width: 30px; justify-content: center; padding: 3px 9px; border-radius: 7px; font-weight: 700; font-size: 12.5px; }
  .pos.g { background: var(--green-soft); color: var(--green); }
  .pos.y { background: var(--pink-soft); color: var(--pink); }
  .pos.n { background: var(--line-2); color: var(--ink-2); }
  .chg { font-weight: 700; font-size: 12.5px; }

  @media (prefers-reduced-motion: no-preference) {
    .prm .fill, .donut { transition: none; }
  }
  @media (max-width: 1080px) {
    .r-4 { grid-template-columns: repeat(2, 1fr); }
    .r-3-mix, .r-trend, .r-2 { grid-template-columns: 1fr; }
  }
  @media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; border-inline-start: none; border-bottom: 1px solid var(--line); }
    .side-logo { padding: 4px 6px; }
    .nav-group, .nav-sub, .side-foot { display: none; }
    .nav-item { width: auto; }
  }
  @media (max-width: 560px) {
    .r-4 { grid-template-columns: 1fr; }
    .content, .topbar { padding-left: 16px; padding-right: 16px; }
  }

/* ---------- presence-app additions ---------- */
a.nav-item { text-decoration: none; }
.side-client { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 4px 8px; }
.side-client .cdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.client-logo.initials { background: var(--tile, var(--pink)); border: none; }
.client-logo.initials span { color: #fff; font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.report-foot { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.report-foot > span:first-child { font-size: 12px; color: var(--ink-3); }
.pink-by { display: flex; align-items: center; gap: 9px; }
.pink-by .by { font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
.pink-by img { height: 18px; display: block; }
.gate { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); padding: 24px; }
.gate-box { text-align: center; max-width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 36px 28px; box-shadow: var(--shadow); }
.gate-emoji { font-size: 40px; }
.gate-box h2 { font-size: 19px; margin: 12px 0 8px; }
.gate-box p { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin: 0; }

/* ---------- language selector + logical alignment (flips with dir) ---------- */
.langsel { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.langsel button { border:none; background:var(--card); color:var(--ink-2); font-family:inherit; font-size:12.5px; font-weight:700; padding:7px 11px; cursor:pointer; }
.langsel button + button { border-inline-start:1px solid var(--line); }
.langsel button:hover { color:var(--ink); }
.langsel button.on { background:var(--pink); color:#fff; }
thead th { text-align:start; }
thead th.n, td.n { text-align:end; }
td.kw { text-align:start; }
.foot-note { text-align:end; }
.prm .val { text-align:end; }
.nav-item { text-align:start; }

/* ---------- live-data panels ---------- */
.kpi .sub { font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:7px; }
.r-1 { grid-template-columns:1fr; }
.prompts .txt { direction:inherit; }
.prompts-empty { font-size:13px; color:var(--ink-3); text-align:center; padding:22px 0; }
.engines { display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.ebar { display:grid; grid-template-columns:104px 1fr 42px; align-items:center; gap:12px; }
.ebar .en-name { font-size:13px; font-weight:600; color:var(--ink-2); }
.ebar .track { height:8px; background:var(--line-2); border-radius:4px; overflow:hidden; }
.ebar .fill { height:100%; background:var(--pink); border-radius:4px; }
.ebar .val { font-size:12.5px; font-weight:700; text-align:end; font-variant-numeric:tabular-nums; }
.domains { display:flex; flex-direction:column; margin-top:2px; }
.drow { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.drow:last-child { border-bottom:none; }
.drow .rk { font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.drow .dm { font-size:13px; font-weight:500; }
.drow .dm.you { color:var(--pink); font-weight:700; }
.drow .you-tag { font-size:10px; font-weight:700; color:var(--pink); background:var(--pink-soft); padding:2px 6px; border-radius:5px; margin-inline-start:6px; }
.drow .rv { font-size:12.5px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums; }