:root {
      color-scheme: light;
      --bg: #f6f7fb;
      --surface: #ffffff;
      --surface-2: #f7f8fb;
      --surface-3: #eef2f7;
      --ink: #111827;
      --muted: #667085;
      --line: #e3e8ef;
      --nav: #ffffff;
      --nav-2: #f3f6fb;
      --red: #e4494f;
      --teal: #0f9f8f;
      --blue: #2764ff;
      --amber: #be7c00;
      --green: #16835e;
      --shadow: 0 12px 30px rgba(17, 24, 39, 0.06);
      --shadow-soft: 0 1px 2px rgba(17, 24, 39, 0.04);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background:
        linear-gradient(180deg, #fbfcff 0, var(--bg) 220px),
        var(--bg);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 14px;
      line-height: 1.45;
    }

    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    a { color: inherit; }

    .login {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background: #f4f7fb;
    }

    .login-panel {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 22px;
      width: min(100%, 420px);
      padding: 36px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 18px 44px rgba(19, 38, 68, 0.08);
    }

    .brand { display: flex; align-items: center; gap: 12px; font-weight: 760; }
    .mark {
      width: 30px;
      height: 30px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
    }
    .mark span { border-radius: 3px 9px 9px 3px; }
    .mark span:nth-child(1), .mark span:nth-child(2) { background: #ff6b6f; }
    .mark span:nth-child(3), .mark span:nth-child(4) { background: #7c6dff; }

    .login h1 { margin: 8px 0 0; font-size: 28px; line-height: 1.08; letter-spacing: 0; }
    .login-intro { display: grid; gap: 10px; }
    .login-intro p { margin: 0; max-width: 360px; line-height: 1.55; }
    .muted { color: var(--muted); }
    .login-form { display: grid; gap: 12px; }
    label { display: grid; gap: 6px; color: #39414d; font-size: 12px; font-weight: 650; }
    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 12px;
      background: #fff;
      color: var(--ink);
      outline: none;
    }
    textarea { min-height: 92px; resize: vertical; }
    [hidden] { display: none !important; }
    input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 107, 254, 0.12); }

    .primary, .ghost, .icon-btn {
      border: 1px solid transparent;
      border-radius: 8px;
      min-height: 38px;
      padding: 9px 13px;
      font-weight: 720;
      transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
    }
    .primary { background: var(--blue); color: #fff; box-shadow: 0 8px 16px rgba(39, 100, 255, 0.18); }
    .primary:hover, .ghost:hover { transform: translateY(-1px); }
    .primary:disabled, .ghost:disabled { cursor: not-allowed; opacity: 0.58; transform: none; box-shadow: none; }
    .ghost { background: #fff; color: #172033; border-color: var(--line); box-shadow: var(--shadow-soft); }
    .icon-btn { width: 38px; padding: 0; display: inline-grid; place-items: center; background: rgba(255,255,255,0.12); color: #fff; }
    .error { display: none; color: #be123c; font-weight: 650; }
    .error.show { display: block; }
    .form-status { min-height: 20px; font-weight: 650; }
    .form-status.success { color: #047857; }
    .form-status.error { display: block; color: #be123c; }
    .language-select {
      min-width: 152px;
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      color: var(--ink);
      font-weight: 680;
    }
    .login-locale { display: flex; justify-content: flex-start; }
    .login-art {
      padding: 44px;
      color: var(--ink);
      display: grid;
      align-content: center;
      gap: 18px;
      background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    }
    .login-art h2 { margin: 0; max-width: 680px; font-size: 30px; line-height: 1.12; letter-spacing: 0; }
    .login-art p { margin: 0; color: var(--muted); max-width: 760px; line-height: 1.55; }
    .hub-home-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); gap: 16px; align-items: stretch; }
    .hub-home-card {
      border: 1px solid #d9e3f0;
      border-radius: 8px;
      background: rgba(255,255,255,0.9);
      box-shadow: 0 16px 36px rgba(20, 40, 70, 0.08);
      overflow: hidden;
    }
    .hub-home-card header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px;
      border-bottom: 1px solid #e3eaf4;
      background: #fff;
    }
    .hub-home-card header strong { font-size: 16px; }
    .hub-home-card header span { color: var(--muted); font-size: 12px; font-weight: 700; }
    .role-home-list { display: grid; gap: 0; }
    .role-home-row {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 17px 18px;
      border-bottom: 1px solid #edf2f7;
    }
    .role-home-row:last-child { border-bottom: 0; }
    .role-home-row b { color: #0d1728; }
    .role-home-row p { margin: 2px 0 0; font-size: 13px; }
    .role-home-row .tag {
      border-radius: 999px;
      padding: 6px 10px;
      background: #eff6ff;
      color: #1d4ed8;
      font-weight: 780;
      font-size: 12px;
      white-space: nowrap;
    }
    .hub-snapshot { padding: 18px; display: grid; gap: 12px; }
    .snapshot-metric {
      border: 1px solid #e1e8f3;
      border-radius: 8px;
      padding: 14px;
      background: #fff;
    }
    .snapshot-metric strong { display: block; font-size: 28px; line-height: 1; }
    .snapshot-metric span { display: block; margin-top: 7px; color: var(--muted); font-size: 13px; }
    .login-art .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); gap: 12px; }
    .login-art .stat { border: 1px solid #dbe5f3; border-radius: 8px; padding: 16px; background: #fff; }
    .stat strong { display: block; font-size: 24px; }

    .app-shell { min-height: 100vh; display: grid; grid-template-columns: 268px minmax(0, 1fr); }
    .sidebar {
      background: var(--nav);
      color: var(--ink);
      padding: 22px 18px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: sticky;
      top: 0;
      height: 100vh;
      border-right: 1px solid var(--line);
    }
    .sidebar .brand { min-height: 38px; }
    .sidebar .brand span:last-child { line-height: 1.15; }
    .nav { display: grid; gap: 6px; }
    .nav-section { display: grid; gap: 6px; }
    .nav-section + .nav-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
    .nav-section > span {
      padding: 0 12px 4px;
      color: #98a2b3;
      font-size: 11px;
      font-weight: 850;
      text-transform: none;
      letter-spacing: 0;
    }
    .nav button {
      border: 1px solid transparent;
      background: transparent;
      color: #4b5563;
      text-align: left;
      border-radius: 8px;
      padding: 11px 12px;
      font-weight: 680;
      letter-spacing: 0;
    }
    .nav button:hover { background: var(--surface-2); color: var(--ink); }
    .nav button.active { background: #eef4ff; color: #1649d8; border-color: #cddcff; box-shadow: inset 3px 0 0 var(--blue); }
    .nav-group { display: grid; gap: 4px; }
    .nav-parent {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .nav-parent::after {
      content: "";
      width: 7px;
      height: 7px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      opacity: 0.65;
    }
    .nav-sub {
      display: grid;
      gap: 2px;
      padding-left: 12px;
      border-left: 1px solid #dbe5f4;
      margin-left: 12px;
    }
    .nav-sub button {
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 720;
      color: #64748b;
    }
    .nav-sub button.active {
      background: #f8fbff;
      color: #1649d8;
      border-color: #dbeafe;
      box-shadow: inset 3px 0 0 var(--blue);
    }
    .userbox { margin-top: auto; display: grid; gap: 10px; }
    .sidebar-language { display: grid; gap: 6px; }
    .sidebar-language span {
      color: #98a2b3;
      font-size: 11px;
      font-weight: 850;
    }
    .userbox .language-select { min-width: 0; width: 100%; }
    .pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 5px 9px; background: #eef4ff; color: #1649d8; font-size: 12px; font-weight: 700; }
    .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--teal); }

    .main { min-width: 0; }
    .topbar {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 30px;
      background: rgba(255,255,255,0.9);
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 0;
      z-index: 5;
      backdrop-filter: blur(12px);
    }
    .topbar h1 { margin: 0; font-size: 24px; letter-spacing: 0; line-height: 1.1; }
    .content { padding: 26px 30px 44px; display: grid; gap: 18px; max-width: 1680px; width: 100%; }
    .page-heading { display: grid; gap: 5px; min-width: 0; }
    .page-heading .eyebrow {
      color: var(--blue);
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
    }
    .page-heading .muted { line-height: 1.35; }
    .skeleton-page { display: grid; gap: 14px; }
    .skeleton-toolbar,
    .skeleton-panel,
    .skeleton-kpi {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }
    .skeleton-toolbar { min-height: 92px; }
    .skeleton-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .skeleton-kpi { min-height: 108px; }
    .skeleton-panel { min-height: 320px; }
    .skeleton-toolbar::after,
    .skeleton-panel::after,
    .skeleton-kpi::after {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, rgba(226, 232, 240, 0.72), transparent);
      animation: skeleton-sweep 1.35s ease-in-out infinite;
    }
    @keyframes skeleton-sweep { to { transform: translateX(100%); } }
    @media (prefers-reduced-motion: reduce) {
      .skeleton-toolbar::after,
      .skeleton-panel::after,
      .skeleton-kpi::after { animation: none; }
    }
    .page-state {
      display: grid;
      justify-items: start;
      gap: 8px;
      min-height: 220px;
      align-content: center;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }
    .page-state h2 { margin: 0; font-size: 18px; }
    .page-state p { margin: 0; max-width: 680px; line-height: 1.5; }
    .workbench { display: grid; gap: 14px; }
    .signal-list { display: grid; gap: 10px; }
    .signal-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
    }
    .signal-row strong { display: block; }
    .signal-row span { color: var(--muted); font-size: 13px; }
    .grid { display: grid; gap: 14px; }
    .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow-soft);
      min-width: 0;
    }
    .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
    .card h2, .card h3 { margin: 0; letter-spacing: 0; }
    .card h2 { font-size: 17px; }
    .card h3 { font-size: 15px; }
    .card-body { padding: 16px 18px 18px; }
    .api-key-value {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
    }
    .api-code, .api-key-value code {
      display: block;
      overflow: auto;
      border: 1px solid #dbe4f0;
      border-radius: 8px;
      background: #0f172a;
      color: #e5edff;
      padding: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 12px;
      line-height: 1.45;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .api-docs { display: grid; gap: 12px; }
    .api-docs h3 { margin: 4px 0 0; font-size: 14px; }
    .api-docs ul { margin: 0; padding-left: 18px; color: var(--muted); }
    .api-docs li { margin: 5px 0; }
    .metric { padding: 16px; position: relative; overflow: hidden; }
    .metric::after { content: ""; position: absolute; inset: auto 14px 0 auto; width: 52px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--red), var(--blue)); opacity: 0.8; }
    .metric span { color: var(--muted); font-size: 12px; font-weight: 650; }
    .metric strong { display: block; margin-top: 7px; font-size: 28px; line-height: 1; letter-spacing: 0; }
    .metric small { color: var(--green); font-weight: 700; }
    .data-board { display: grid; gap: 14px; }
    .kpi-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .partner-dashboard { display: grid; gap: 14px; }
    .partner-range-panel {
      display: grid;
      grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
      gap: 14px;
      align-items: center;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow-soft);
    }
    .partner-range-summary { display: grid; gap: 5px; min-width: 0; }
    .partner-range-summary span { color: var(--muted); font-size: 12px; font-weight: 780; }
    .partner-range-summary strong { color: var(--ink); font-size: 24px; line-height: 1.05; letter-spacing: 0; overflow-wrap: anywhere; }
    .partner-range-summary small { color: var(--muted); font-weight: 700; line-height: 1.35; }
    .partner-filter-tools { display: grid; gap: 10px; min-width: 0; }
    .partner-filter-tools .quick-range-row { justify-content: flex-end; }
    .partner-custom-range { min-width: 0; justify-self: end; }
    .partner-custom-range summary {
      cursor: pointer;
      color: var(--blue);
      font-weight: 780;
      list-style: none;
      text-align: right;
    }
    .partner-custom-range summary::-webkit-details-marker { display: none; }
    .partner-custom-range[open] summary { margin-bottom: 10px; }
    .partner-date-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(150px, 1fr)) auto;
      gap: 10px;
      align-items: end;
    }
    .partner-date-form label { min-width: 0; }
    .partner-date-form .filter-actions { align-self: end; justify-content: flex-end; }
    .partner-kpi-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .partner-total-strip {
      display: grid;
      grid-template-columns: minmax(190px, .6fr) repeat(3, minmax(0, 1fr));
      gap: 12px;
      align-items: center;
      padding: 13px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }
    .partner-total-intro { display: grid; gap: 3px; }
    .partner-total-intro strong { color: var(--ink); font-size: 15px; letter-spacing: 0; }
    .partner-total-intro small { color: var(--muted); font-weight: 700; line-height: 1.35; }
    .partner-total-strip div { min-width: 0; }
    .partner-total-strip span { display: block; color: var(--muted); font-size: 12px; font-weight: 780; }
    .partner-total-strip strong { display: block; margin-top: 4px; color: var(--ink); font-size: 20px; letter-spacing: 0; overflow-wrap: anywhere; }
    .partner-total-strip small { display: block; margin-top: 3px; color: var(--muted); font-weight: 700; }
    .partner-analytics-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
    .partner-chart-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; color: var(--muted); font-weight: 700; flex-wrap: wrap; }
    .partner-chart-meta strong { color: var(--ink); }
    .partner-chart-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
    .partner-chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 780; }
    .partner-chart-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--series-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--series-color) 14%, transparent); }
    .partner-trend-wrap { position: relative; }
    .partner-chart-tooltip {
      position: absolute;
      z-index: 2;
      min-width: 178px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: var(--shadow-soft);
      color: var(--ink);
      pointer-events: none;
      transform: translate(-50%, -100%);
    }
    .partner-chart-tooltip strong { display: block; margin-bottom: 6px; }
    .partner-chart-tooltip span { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; font-weight: 780; }
    .partner-chart-tooltip em { width: 8px; height: 8px; margin: 4px 6px 0 0; border-radius: 999px; background: var(--series-color); flex: 0 0 auto; }
    .partner-chart-tooltip span > span { display: inline-flex; gap: 0; align-items: flex-start; }
    .partner-chart-tooltip b { color: var(--ink); }
    .partner-detail-collapsed { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .partner-detail-collapsed p { margin: 0; color: var(--muted); font-weight: 700; }
    .kpi-card {
      display: grid;
      gap: 8px;
      min-height: 118px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: var(--shadow-soft);
      min-width: 0;
    }
    .kpi-card span { color: var(--muted); font-size: 12px; font-weight: 780; }
    .kpi-card strong { color: var(--ink); font-size: 28px; line-height: 1; letter-spacing: 0; word-break: break-word; }
    .kpi-card small { color: var(--muted); font-weight: 700; line-height: 1.35; }
    .kpi-card.good { border-color: #bcebdc; background: #f4fcf8; }
    .kpi-card.warn { border-color: #ffd89a; background: #fffaf0; }
    .bd-kpi-band {
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
    .bd-kpi-band .kpi-card {
      min-height: 96px;
      padding: 13px 14px;
    }
    .bd-kpi-band .kpi-card strong {
      font-size: 26px;
    }
    .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 14px; align-items: start; }
    .rank-list { display: grid; gap: 10px; }
    .rank-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
      min-width: 0;
    }
    .rank-row strong { display: block; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rank-row span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
    .rank-row b { color: var(--ink); font-size: 18px; letter-spacing: 0; white-space: nowrap; }

    .chart-wrap { height: 260px; }
    canvas { width: 100%; height: 100%; display: block; }
    .table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    table { width: 100%; border-collapse: collapse; min-width: 720px; }
    th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
    th { color: #667085; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; background: #f8fafc; position: sticky; top: 0; z-index: 1; }
    .table-sort { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 760; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; cursor: pointer; }
    .table-sort:hover, .table-sort:focus-visible, .table-sort.active { color: var(--blue); }
    .table-sort:focus-visible { outline: 2px solid color-mix(in srgb, var(--blue) 48%, transparent); outline-offset: 3px; }
    .sort-indicator { display: inline-grid; width: 14px; place-items: center; color: currentColor; font-size: 13px; line-height: 1; opacity: 0.45; }
    .table-sort.active .sort-indicator { opacity: 1; }
    tr:hover td { background: #fbfdff; }
    td { color: #2b333d; }
    .status { display: inline-flex; border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 760; background: #eef2f6; color: #344054; }
    .status.active, .status.published, .status.submitted, .status.growing { background: #e8f7f2; color: var(--green); }
    .status.draft, .status.invited, .status.planned, .status.no, .status.not { background: #fff4dd; color: var(--amber); }
    .status.inactive, .status.needs, .status.missing { background: #ffecef; color: #c0333c; }
    .list { display: grid; gap: 10px; }
    .item { display: grid; gap: 6px; padding: 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
    .item strong { font-size: 14px; }
    .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .campaign-worklist { display: grid; gap: 14px; }
    .campaign-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      gap: 14px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow-soft);
    }
    .campaign-card-main { display: grid; gap: 8px; min-width: 0; }
    .campaign-card-main p { margin: 0; color: #344054; }
    .campaign-meta { display: grid; gap: 14px; color: var(--muted); }
    .campaign-meta section { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
    .campaign-meta section > strong { color: #344054; }
    .markdown-content { display: grid; gap: 8px; color: #344054; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
    .markdown-content > * { margin: 0; }
    .markdown-content h2 { margin-top: 4px; color: var(--ink); font-size: 18px; line-height: 1.3; }
    .markdown-content h3 { margin-top: 3px; color: var(--ink); font-size: 16px; line-height: 1.35; }
    .markdown-content h4, .markdown-content h5 { color: var(--ink); font-size: 14px; line-height: 1.4; }
    .markdown-content ul, .markdown-content ol { display: grid; gap: 5px; padding-left: 22px; }
    .markdown-content blockquote { padding: 8px 12px; border-left: 3px solid var(--blue); background: #f3f7ff; color: #344054; }
    .markdown-content code { padding: 2px 5px; border-radius: 4px; background: #eef2f6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
    .markdown-content a { color: var(--blue); font-weight: 650; }
    .campaign-description { max-width: 960px; }
    .campaign-card-side { display: grid; align-content: start; gap: 10px; justify-items: start; }
    .campaign-card-side a.primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
    textarea[data-markdown-input] { min-height: 150px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.55; }
    .markdown-help { color: var(--muted); font-size: 12px; font-weight: 500; }
    .markdown-preview { margin-top: -4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .markdown-preview summary { padding: 10px 12px; cursor: pointer; color: #344054; font-size: 12px; font-weight: 700; }
    .markdown-preview .markdown-content { padding: 0 12px 12px; }
    .campaign-language-base { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid #c9d9ff; border-radius: 8px; background: #f3f7ff; }
    .campaign-language-base strong { color: #123a9b; }
    .campaign-language-base p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
    .campaign-translations { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
    .campaign-translations > summary { padding: 14px; cursor: pointer; color: #344054; }
    .campaign-translations > summary > span { display: grid; gap: 4px; }
    .campaign-translations > summary small { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
    .translation-body { display: grid; gap: 14px; padding: 0 14px 14px; }
    .translation-body > label { max-width: 360px; }
    .translation-editor { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
    .translation-editor textarea { min-height: 130px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.55; }
    .translation-preview { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .translation-preview summary { padding: 10px 12px; cursor: pointer; color: #344054; font-size: 12px; font-weight: 700; }
    .translation-preview > div { display: grid; gap: 12px; padding: 0 12px 12px; }
    .translation-preview h3 { margin: 0; color: var(--ink); font-size: 17px; }
    .translation-preview section { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
    .translation-editor .danger { justify-self: start; }
    .review-list { display: grid; gap: 12px; }
    .review-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      gap: 14px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow-soft);
    }
    .review-main { display: grid; gap: 8px; min-width: 0; }
    .review-main h3 { margin: 0; font-size: 16px; letter-spacing: 0; }
    .review-main p { margin: 0; color: #344054; }
    .review-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); }
    .review-side { display: grid; align-content: start; gap: 10px; justify-items: start; }
    .resource-chips { display: flex; gap: 8px; flex-wrap: wrap; }
    .resource-chips a {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 6px 10px;
      border-radius: 999px;
      background: #eef4ff;
      color: #1649d8;
      text-decoration: none;
      font-weight: 720;
      max-width: 100%;
    }
    .split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; }
    .partner-launchpad { align-items: start; }
    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .span-2 { grid-column: span 2; }
    .campaign-country-scope { grid-column: span 2; margin: 0; padding: 0; border: 0; min-width: 0; }
    .campaign-country-scope legend { margin-bottom: 8px; color: #39414d; font-size: 12px; font-weight: 700; }
    .scope-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .scope-choice { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
    .scope-choice.selected { border-color: var(--blue); background: #f3f7ff; box-shadow: 0 0 0 2px rgba(36, 107, 254, 0.1); }
    .scope-choice input, .country-choice input { width: auto; margin: 2px 0 0; padding: 0; }
    .scope-choice span { display: grid; gap: 3px; }
    .scope-choice small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.4; }
    .campaign-country-picker { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .country-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .country-picker-heading span { color: var(--muted); font-size: 12px; }
    .country-choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 280px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
    .country-choice { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; background: #fff; cursor: pointer; font-weight: 550; }
    .country-choice:hover { background: #eef4ff; }
    .profile-page {
      display: grid;
      gap: 14px;
      max-width: 1280px;
    }
    .settings-overview,
    .settings-grid {
      display: grid;
      gap: 14px;
      align-items: start;
    }
    .settings-overview { grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr); }
    .profile-support-overview { grid-template-columns: minmax(0, 1fr); }
    .settings-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.82fr); }
    .profile-top-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr); }
    .settings-card {
      min-width: 0;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow-soft);
    }
    .settings-card h2 {
      margin: 0;
      color: var(--ink);
      font-size: 17px;
      letter-spacing: 0;
    }
    .settings-card p {
      margin: 5px 0 0;
      color: var(--muted);
      line-height: 1.45;
    }
    .settings-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .kv-list {
      display: grid;
      margin-top: 12px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }
    .kv-row {
      display: grid;
      grid-template-columns: 148px minmax(0, 1fr);
      gap: 12px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
    }
    .kv-row:last-child { border-bottom: 0; }
    .kv-row span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
    }
    .kv-row strong {
      min-width: 0;
      color: var(--ink);
      font-size: 14px;
      overflow-wrap: anywhere;
    }
    .contact-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    .contact-form-grid .span-all { grid-column: 1 / -1; }
    .contact-summary {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }
    .contact-method-row {
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
    }
    .contact-method-row span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
    }
    .contact-method-row strong {
      overflow-wrap: anywhere;
      color: var(--ink);
      font-size: 14px;
    }
    .preferred-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      padding: 3px 9px;
      border-radius: 999px;
      background: #eaf2ff;
      color: var(--blue);
      font-size: 12px;
      font-weight: 800;
    }
    .profile-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 12px;
    }
    .password-stack {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }
    .password-stack label { display: grid; gap: 6px; margin: 0; }
    .profile-help {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }
    .profile-card {
      display: grid;
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow-soft);
      min-width: 0;
    }
    .profile-card h3 { margin: 0; font-size: 16px; letter-spacing: 0; }
    .profile-card p { margin: 0; color: var(--muted); line-height: 1.45; }
    .profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .profile-fact {
      min-width: 0;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
    }
    .profile-fact span { display: block; color: var(--muted); font-size: 12px; font-weight: 720; }
    .profile-fact strong { display: block; margin-top: 4px; color: var(--ink); overflow-wrap: anywhere; }
    .contact-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .password-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
    .password-field input { min-width: 0; }
    .password-field button { min-height: 38px; }
    .profile-password-form { grid-template-columns: 1fr; max-width: 980px; }
    .profile-password-form .span-2 { grid-column: auto; }
    .password-rules { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
    .contact-actions a { text-decoration: none; }
    .check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .check-row input { width: 18px; height: 18px; }
    .toast { display: none; padding: 10px 12px; border-radius: 8px; background: #eef2f6; color: #344054; font-weight: 720; }
    .toast.show { display: block; }
    .toast.success { background: #e8f7f2; color: var(--green); }
    .toast.error { background: #ffecef; color: #b4232b; }
    .empty { color: var(--muted); padding: 18px; border: 1px dashed var(--line); border-radius: 8px; }
    .empty.action-empty { display: grid; gap: 12px; text-align: left; }
    .empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
    .admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .admin-actions button { min-height: 32px; padding: 6px 10px; }
    .danger { background: #ffecef; color: #b4232b; }
    .compact-form { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 14px; margin-bottom: 14px; }
    .edit-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }
    .edit-panel > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 52px;
      padding: 12px 16px;
      cursor: pointer;
      color: var(--ink);
      font-weight: 780;
      list-style: none;
    }
    .edit-panel > summary::-webkit-details-marker { display: none; }
    .edit-panel > summary::after {
      content: "+";
      color: var(--blue);
      font-size: 20px;
      font-weight: 500;
      line-height: 1;
    }
    .edit-panel[open] > summary { border-bottom: 1px solid var(--line); }
    .edit-panel[open] > summary::after { content: "−"; }
    .edit-panel .compact-form {
      margin: 0;
      padding: 16px;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    .list-tools { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(130px, 0.7fr)); gap: 10px; align-items: end; margin-bottom: 12px; }
    .page-filter-panel {
      display: grid;
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow-soft);
    }
    .page-filter-panel h2 { margin: 0; color: var(--ink); font-size: 18px; letter-spacing: 0; }
    .page-filter-panel p { margin: 4px 0 0; color: var(--muted); line-height: 1.45; }
    .filter-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(150px, 1fr));
      gap: 10px;
      align-items: end;
    }
    .filter-grid .wide { grid-column: span 2; }
    .filter-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .quick-range-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .quick-range-row button.active { border-color: rgba(36, 107, 254, 0.55); background: #eef4ff; color: var(--blue); }
    .analysis-section {
      display: grid;
      gap: 12px;
      padding: 16px 18px 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow-soft);
    }
    .analysis-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .analysis-head h2 { margin: 0; font-size: 17px; }
    .view-tabs {
      display: inline-flex;
      max-width: 100%;
      gap: 3px;
      padding: 3px;
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
      scrollbar-width: none;
    }
    .view-tabs::-webkit-scrollbar { display: none; }
    .view-tabs button {
      min-height: 32px;
      padding: 6px 10px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      white-space: nowrap;
      font-weight: 720;
    }
    .view-tabs button.active { background: var(--surface); color: var(--blue); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1); }
    .list-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; color: var(--muted); }
    .pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .pager button { min-height: 32px; padding: 6px 10px; }
    .csv-box textarea { min-height: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
    .quickbi-sync { display: grid; gap: 14px; }
    .quickbi-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .quickbi-control-grid .quickbi-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quickbi-status {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px 14px;
      background: #fbfcff;
    }
    .quickbi-status span { display: block; color: var(--muted); font-size: 12px; font-weight: 760; }
    .quickbi-status strong { display: block; margin-top: 5px; font-size: 18px; line-height: 1.2; word-break: break-word; color: var(--ink); }
    .quickbi-status small { display: block; margin-top: 4px; color: var(--muted); font-weight: 650; word-break: break-word; }
    .quickbi-status.ok strong, .quickbi-status.ok small { color: var(--green); }
    .quickbi-status.warn strong { color: var(--amber); }
    .quickbi-log {
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcff;
      overflow: hidden;
    }
    .quickbi-log header { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
    .quickbi-log strong { color: var(--ink); }
    .quickbi-log span { color: var(--muted); font-size: 12px; font-weight: 700; }
    .quickbi-log ol { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
    .quickbi-log li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); }
    .quickbi-log li:first-child { border-top: 0; }
    .quickbi-log time { color: var(--muted); font-size: 12px; font-weight: 760; }
    .quickbi-log p { margin: 0; color: var(--ink); font-weight: 720; word-break: break-word; }
    .quickbi-log small { display: block; margin-top: 3px; color: var(--muted); font-weight: 650; word-break: break-word; }
    .quickbi-control-grid { display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(320px, .9fr); gap: 14px; align-items: start; }
    .quickbi-panel {
      display: grid;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
      padding: 14px;
      min-width: 0;
    }
    .quickbi-panel textarea { min-height: 112px; }
    .quickbi-cookie-note {
      margin: -4px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }
    .quickbi-cookie-note.ok { color: var(--green); }
    .quickbi-advanced {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }
    .quickbi-advanced summary { cursor: pointer; padding: 10px 12px; font-weight: 820; color: #344054; }
    .quickbi-advanced-body { display: grid; gap: 10px; padding: 0 12px 12px; }
    .quickbi-param-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; }
    .quickbi-result { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
    .quickbi-result summary { cursor: pointer; padding: 10px 12px; font-weight: 820; color: #344054; }
    .quickbi-result pre { margin: 0; max-height: 240px; overflow: auto; padding: 12px; background: #0f172a; color: #e5edff; font-size: 12px; line-height: 1.45; }
    .quickbi-status-line { min-height: 22px; font-weight: 750; }
    .quickbi-status-line.success { color: var(--green); }
    .quickbi-status-line.error { color: #be123c; }
    .import-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
    details.import-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    details.import-card.import-focused { border-color: #246bfe; box-shadow: 0 0 0 3px rgba(36, 107, 254, .12); }
    details.import-card summary { cursor: pointer; padding: 14px 16px; font-weight: 820; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
    details.import-card summary span { color: var(--muted); font-size: 12px; font-weight: 650; }
    details.import-card .csv-box { padding: 0 16px 16px; }
    .imports-tools { grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1.2fr) repeat(4, minmax(120px, .7fr)); }
    .import-actions { align-items: center; gap: 12px; margin-top: 12px; }
    .import-status-row { margin-top: 10px; }
    .import-status-row .form-status { min-height: 20px; display: block; }
    .import-hint { margin-top: 8px; color: var(--muted); font-size: 13px; }
    .import-hint.warn { color: #b4232b; }
    .checkline { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #344054; font-weight: 720; }
    .checkline input { width: 16px; height: 16px; }
    .evaluation-row { align-items: stretch; }
    .evaluation-row input { flex: 1; min-width: 280px; }
    .evaluation-row button { white-space: nowrap; }
    .file-picker { display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; color: #172033; font-size: inherit; }
    .file-picker input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    .resource-file { min-height: 48px; border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface); cursor: pointer; }
    .resource-file input { margin-top: 7px; }
    .launch-banner { display: grid; gap: 4px; padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--line); }
    .launch-banner strong { font-size: 15px; }
    .launch-banner span { color: var(--muted); }
    .launch-banner.ready { background: #e8f7f2; border-color: #b9e8d7; }
    .launch-banner.missing { background: #fff7ed; border-color: #fed7aa; }
    html[dir="rtl"] body { direction: rtl; }
    html[dir="rtl"] .nav button,
    html[dir="rtl"] th,
    html[dir="rtl"] td { text-align: right; }
    /* Grid placement follows document direction; keep the sidebar track narrow. */
    html[dir="rtl"] .app-shell { grid-template-columns: 268px minmax(0, 1fr); }
    html[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--line); }
    html[dir="rtl"] .nav button.active,
    html[dir="rtl"] .nav-sub button.active { box-shadow: inset -3px 0 0 var(--blue); }
    html[dir="rtl"] .nav-sub {
      padding-left: 0;
      margin-left: 0;
      border-left: 0;
      padding-right: 12px;
      margin-right: 12px;
      border-right: 1px solid #dbe5f4;
    }
    html[dir="rtl"] .metric::after { inset: auto auto 0 14px; }
    html[dir="rtl"] .api-docs ul,
    html[dir="rtl"] .password-rules { padding-left: 0; padding-right: 18px; }
    html[dir="rtl"] .empty.action-empty { text-align: right; }
    html[dir="rtl"] .admin-actions { flex-direction: row-reverse; }
    html[dir="rtl"] .muted { text-align: right; }

    @media (max-width: 1180px) {
      .hub-home-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 900px) {
      .login { grid-template-columns: 1fr; }
      .login-art { display: none; }
      .login-panel { padding: 28px; }
      .role-home-row { grid-template-columns: 1fr; }
      .app-shell { grid-template-columns: 1fr; }
      .sidebar {
        position: sticky;
        top: 0;
        z-index: 12;
        width: 100%;
        min-width: 0;
        max-width: 100vw;
        overflow: hidden;
        height: auto;
        gap: 10px;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 8px 18px rgba(17, 24, 39, 0.05);
      }
      .sidebar .brand {
        min-height: 28px;
        font-size: 13px;
      }
      .sidebar .mark {
        width: 26px;
        height: 26px;
      }
      .nav {
        display: flex;
        gap: 8px;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        padding: 0 2px 4px;
        margin: 0 -2px;
        scrollbar-width: none;
      }
      .nav::-webkit-scrollbar { display: none; }
      .nav-section,
      .nav-group,
      .nav-sub {
        display: flex;
        gap: 8px;
        flex: 0 0 auto;
      }
      .nav-section + .nav-section {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
      }
      .nav-section > span,
      .nav-parent::after {
        display: none;
      }
      .nav-sub {
        padding-left: 0;
        margin-left: 0;
        border-left: 0;
      }
      html[dir="rtl"] .nav-sub {
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
      }
      .nav button,
      .nav-sub button {
        min-height: 36px;
        padding: 8px 10px;
        white-space: nowrap;
        font-size: 13px;
      }
      .nav button.active,
      .nav-sub button.active {
        box-shadow: inset 0 -3px 0 var(--blue);
      }
      html[dir="rtl"] .nav button.active,
      html[dir="rtl"] .nav-sub button.active {
        box-shadow: inset 0 -3px 0 var(--blue);
      }
      .userbox {
        grid-template-columns: minmax(0, 1fr) minmax(92px, 116px) auto;
        display: grid;
        align-items: end;
        gap: 8px;
        margin-top: 0;
      }
      .userbox > div {
        min-width: 0;
        font-size: 12px;
        line-height: 1.25;
      }
      .userbox > div strong,
      .userbox > div span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .sidebar-language { gap: 4px; }
      .sidebar-language span { display: none; }
      .userbox .language-select {
        min-height: 36px;
        padding: 7px 10px;
        border-radius: 8px;
        font-size: 12px;
      }
      .userbox #logout {
        min-height: 36px;
        padding: 7px 10px;
        white-space: nowrap;
        font-size: 12px;
      }
      .grid.cols-2, .grid.cols-3, .grid.cols-4, .split, .kpi-band, .partner-range-panel, .partner-analytics-grid, .dashboard-grid, .quickbi-status-grid, .quickbi-control-grid, .quickbi-param-grid, .settings-overview, .settings-grid, .contact-form-grid, .filter-grid, .api-key-value { grid-template-columns: 1fr; }
      .quickbi-control-grid .quickbi-status-grid { grid-template-columns: 1fr; }
      .skeleton-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .kv-row { grid-template-columns: 1fr; gap: 4px; }
      .filter-grid .wide { grid-column: auto; }
      .signal-row { grid-template-columns: 1fr; }
      .list-tools, .import-grid { grid-template-columns: 1fr; }
      .form-grid, .scope-choice-grid, .country-choice-list { grid-template-columns: 1fr; }
      .span-2 { grid-column: auto; }
      .topbar {
        position: static;
        width: 100%;
        min-width: 0;
        max-width: 100vw;
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 16px;
      }
      .topbar h1 { font-size: 21px; }
      .content {
        width: 100%;
        min-width: 0;
        max-width: 100vw;
        padding: 14px 12px 28px;
        gap: 12px;
      }
      .campaign-card, .review-card { grid-template-columns: 1fr; }
      html[dir="rtl"] .app-shell { grid-template-columns: 1fr; }
      html[dir="rtl"] .sidebar {
        border-left: 0;
        border-bottom: 1px solid var(--line);
      }
    }

    @media (max-width: 560px) {
      body {
        padding-bottom: env(safe-area-inset-bottom);
        font-size: 13px;
      }
      body::before {
        content: "";
        position: fixed;
        z-index: 30;
        inset: 0 0 auto;
        height: env(safe-area-inset-top);
        background: #fff;
        pointer-events: none;
      }
      .app-shell { padding-top: env(safe-area-inset-top); }
      .sidebar {
        position: static;
      }
      .userbox > div span {
        display: none;
      }
      input, select, textarea, .primary, .ghost, .icon-btn {
        min-height: 42px;
      }
      .login { padding: 14px; }
      .login-panel { padding: 22px; }
      .login h1 { font-size: 24px; }
      .page-filter-panel,
      .partner-range-panel,
      .card-body,
      .metric,
      .settings-card,
      .quickbi-panel {
        padding: 12px;
      }
      .workbench,
      .data-board,
      .page-filter-panel,
      .partner-range-panel,
      .kpi-band,
      .quickbi-status-grid,
      .card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }
      .workbench,
      .data-board,
      .page-filter-panel,
      .partner-range-panel {
        grid-template-columns: minmax(0, 1fr);
      }
      .card-head {
        padding: 12px 12px 0;
      }
      .page-filter-panel h2 {
        font-size: 17px;
      }
      .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .filter-grid .wide,
      .filter-actions {
        grid-column: 1 / -1;
      }
      .filter-actions button {
        flex: 1 1 120px;
      }
      .partner-date-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .partner-filter-tools .quick-range-row {
        justify-content: flex-start;
      }
      .partner-custom-range {
        justify-self: stretch;
      }
      .partner-custom-range summary {
        text-align: left;
      }
      .partner-date-form .filter-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
      }
      .partner-date-form .filter-actions button {
        flex: 1 1 120px;
      }
      .quick-range-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
      }
      .quick-range-row::-webkit-scrollbar { display: none; }
      .quick-range-row button {
        flex: 0 0 auto;
      }
      .page-filter-panel > .quick-range-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        padding-bottom: 0;
        overflow: visible;
      }
      .page-filter-panel > .quick-range-row button {
        width: 100%;
        min-width: 0;
        padding-inline: 7px;
      }
      .partner-range-panel .quick-range-row {
        gap: 6px;
        flex-wrap: wrap;
        overflow-x: visible;
      }
      .partner-range-panel .quick-range-row button {
        flex: 1 1 calc(50% - 6px);
        min-height: 38px;
        padding: 7px 9px;
      }
      .grid.cols-3,
      .grid.cols-4,
      .kpi-band,
      .bd-kpi-band,
      .quickbi-status-grid,
      .skeleton-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .partner-kpi-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .partner-total-strip {
        grid-template-columns: 1fr;
      }
      .metric {
        min-height: 104px;
      }
      .metric strong,
      .kpi-card strong {
        font-size: 24px;
      }
      .kpi-card {
        min-height: 104px;
        padding: 12px;
      }
      .bd-kpi-band [data-bd-kpi="card-spend"] strong {
        font-size: 20px;
        white-space: nowrap;
        word-break: normal;
      }
      .quickbi-status {
        padding: 10px;
      }
      .quickbi-status strong {
        font-size: 16px;
      }
      .dashboard-grid {
        gap: 12px;
      }
      .rank-row {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .rank-row b {
        white-space: normal;
      }
      .list-meta {
        align-items: stretch;
        gap: 8px;
      }
      .pager {
        width: 100%;
        justify-content: space-between;
      }
      .pager span {
        flex: 1;
        min-width: 92px;
        text-align: center;
        align-self: center;
      }
      .pager button {
        flex: 1;
      }
      .table-wrap {
        margin-inline: -12px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        -webkit-overflow-scrolling: touch;
      }
      table {
        min-width: 640px;
      }
      th, td {
        padding: 10px 11px;
      }
      .admin-actions button,
      .empty-actions button,
      .import-actions button,
      .file-picker {
        flex: 1 1 130px;
      }
      details.import-card summary {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px;
      }
      details.import-card .csv-box {
        padding: 0 12px 12px;
      }
      .quickbi-log li {
        grid-template-columns: 1fr;
        gap: 4px;
      }
      .contact-method-row,
      .password-field {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 360px) {
      .bd-kpi-band [data-bd-kpi="card-spend"] {
        grid-column: 1 / -1;
      }
    }