/* Ads Autopilot — UI styles. Scoped under .ads-root so nothing leaks into studio.
   Tokens fall back to studio's own variables when they exist (--bg, --fg, --card, --accent…). */
.ads-root {
  --ads-bg: var(--bg, #fcfcfb);
  --ads-surface: var(--card, #ffffff);
  --ads-surface-2: var(--card-2, #f3f3f1);
  --ads-border: var(--border, #e4e3df);
  --ads-text: var(--fg, #0b0b0b);
  --ads-text-2: var(--muted, #52514e);
  --ads-text-3: #8a8983;
  --ads-accent: var(--accent, #2a78d6);
  --ads-accent-contrast: #ffffff;
  --ads-series-1: #2a78d6;   /* spend */
  --ads-series-3: #1baf7a;   /* conversions */
  --ads-good: #0ca30c;
  --ads-warning: #fab219;
  --ads-serious: #ec835a;
  --ads-critical: #d03b3b;
  --ads-radius: 12px;
  --ads-font: var(--font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif);
  color-scheme: light;
  font-family: var(--ads-font);
  color: var(--ads-text);
  background: var(--ads-bg);
  line-height: 1.45;
  font-size: 14px;
  min-height: 100%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ads-root { color-scheme: dark; --ads-bg: var(--bg, #121412); --ads-surface: var(--card, #1a1a19); --ads-surface-2: var(--card-2, #232422); --ads-border: var(--border, #33342f); --ads-text: var(--fg, #ffffff); --ads-text-2: var(--muted, #c3c2b7); --ads-text-3: #8f8e86; --ads-series-1: #3987e5; --ads-series-3: #199e70; }
}
:root[data-theme="dark"] .ads-root { color-scheme: dark; --ads-bg: var(--bg, #121412); --ads-surface: var(--card, #1a1a19); --ads-surface-2: var(--card-2, #232422); --ads-border: var(--border, #33342f); --ads-text: var(--fg, #ffffff); --ads-text-2: var(--muted, #c3c2b7); --ads-text-3: #8f8e86; --ads-series-1: #3987e5; --ads-series-3: #199e70; }

.ads-root * { box-sizing: border-box; }
.ads-root a { color: var(--ads-accent); text-decoration: none; }
.ads-root h1, .ads-root h2, .ads-root h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
.ads-root h1 { font-size: 22px; } .ads-root h2 { font-size: 17px; } .ads-root h3 { font-size: 14px; }
.ads-wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }
.ads-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ads-topbar .ads-crumbs { color: var(--ads-text-2); font-size: 13px; }
.ads-topbar .ads-crumbs a { color: var(--ads-text-2); }
.ads-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ads-btn { appearance: none; border: 1px solid var(--ads-border); background: var(--ads-surface); color: var(--ads-text); padding: 8px 12px; border-radius: 10px; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.ads-btn:hover { background: var(--ads-surface-2); }
.ads-btn:disabled { opacity: .5; cursor: not-allowed; }
.ads-btn.primary { background: var(--ads-accent); color: var(--ads-accent-contrast); border-color: transparent; }
.ads-btn.primary:hover { filter: brightness(1.08); }
.ads-btn.danger { color: var(--ads-critical); }
.ads-btn.sm { padding: 5px 9px; min-height: 30px; font-size: 12px; }

.ads-grid { display: grid; gap: 14px; }
.ads-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ads-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ads-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .ads-grid.cols-4, .ads-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ads-grid.cols-4, .ads-grid.cols-3, .ads-grid.cols-2 { grid-template-columns: 1fr; } }

.ads-card { background: var(--ads-surface); border: 1px solid var(--ads-border); border-radius: var(--ads-radius); padding: 16px; }
.ads-card.clickable { cursor: pointer; transition: border-color .15s; }
.ads-card.clickable:hover { border-color: var(--ads-accent); }
.ads-card .ads-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.ads-muted { color: var(--ads-text-2); }
.ads-tiny { color: var(--ads-text-3); font-size: 12px; }
.ads-mono { font-variant-numeric: tabular-nums; }

.ads-stat { display: flex; flex-direction: column; gap: 2px; }
.ads-stat .label { font-size: 12px; color: var(--ads-text-2); text-transform: uppercase; letter-spacing: .04em; }
.ads-stat .value { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ads-stat .sub { font-size: 12px; color: var(--ads-text-3); }

.ads-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--ads-border); background: var(--ads-surface-2); color: var(--ads-text-2); white-space: nowrap; }
.ads-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ads-text-3); }
.ads-pill.active::before, .ads-pill.ready::before, .ads-pill.deployed::before, .ads-pill.done::before, .ads-pill.applied::before { background: var(--ads-good); }
.ads-pill.launching::before, .ads-pill.generating::before, .ads-pill.queued::before, .ads-pill.qa::before, .ads-pill.pending::before, .ads-pill.running::before { background: var(--ads-warning); }
.ads-pill.paused::before, .ads-pill.retired::before, .ads-pill.stopped::before, .ads-pill.clipped::before, .ads-pill.rejected::before { background: var(--ads-text-3); }
.ads-pill.error::before, .ads-pill.failed::before, .ads-pill.killed::before, .ads-pill.expired::before { background: var(--ads-critical); }
.ads-platform { font-weight: 600; text-transform: capitalize; }

.ads-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ads-border); margin: 18px 0 14px; overflow-x: auto; }
.ads-tabs button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--ads-text-2); cursor: pointer; white-space: nowrap; }
.ads-tabs button.on { color: var(--ads-text); border-bottom-color: var(--ads-accent); font-weight: 600; }

.ads-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ads-table th, .ads-table td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--ads-border); vertical-align: top; }
.ads-table th { font-size: 12px; color: var(--ads-text-2); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.ads-table td.num, .ads-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ads-table-wrap { overflow-x: auto; }
.ads-flag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--ads-surface-2); border: 1px solid var(--ads-border); margin: 1px 2px 1px 0; color: var(--ads-text-2); }
.ads-flag.good { color: var(--ads-good); border-color: color-mix(in srgb, var(--ads-good) 40%, transparent); }
.ads-flag.bad { color: var(--ads-critical); border-color: color-mix(in srgb, var(--ads-critical) 40%, transparent); }
.ads-flag.warn { color: var(--ads-serious); border-color: color-mix(in srgb, var(--ads-serious) 40%, transparent); }

.ads-form { display: grid; gap: 12px; }
.ads-form .row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ads-form .row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .ads-form .row, .ads-form .row.cols-3 { grid-template-columns: 1fr; } }
.ads-field { display: flex; flex-direction: column; gap: 4px; }
.ads-field label { font-size: 12px; color: var(--ads-text-2); font-weight: 600; }
.ads-field input, .ads-field select, .ads-field textarea { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--ads-border); border-radius: 9px; background: var(--ads-surface); color: var(--ads-text); min-height: 36px; width: 100%; }
.ads-field textarea { min-height: 72px; resize: vertical; }
.ads-field .hint { font-size: 11px; color: var(--ads-text-3); }
.ads-form fieldset { border: 1px solid var(--ads-border); border-radius: var(--ads-radius); padding: 12px 14px 14px; margin: 0; }
.ads-form legend { padding: 0 6px; font-size: 12px; color: var(--ads-text-2); font-weight: 600; }

.ads-chart { width: 100%; height: 150px; display: block; }
.ads-chart .bar { fill: var(--ads-series-1); }
.ads-chart.conv .bar { fill: var(--ads-series-3); }
.ads-chart .bar:hover { opacity: .8; }
.ads-chart .axis { stroke: var(--ads-border); stroke-width: 1; }
.ads-chart .tick { fill: var(--ads-text-3); font-size: 10px; }
.ads-tooltip { position: fixed; pointer-events: none; background: var(--ads-text); color: var(--ads-bg); padding: 6px 8px; border-radius: 8px; font-size: 12px; z-index: 9999; display: none; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.ads-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ads-text-2); margin-bottom: 6px; }
.ads-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--ads-series-1); }
.ads-legend.conv i { background: var(--ads-series-3); }

.ads-creative { display: flex; flex-direction: column; gap: 8px; }
.ads-creative .media { aspect-ratio: 1 / 1; background: var(--ads-surface-2); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--ads-text-3); font-size: 12px; }
.ads-creative .media img, .ads-creative .media video { width: 100%; height: 100%; object-fit: cover; }
.ads-creative .copy { font-size: 12px; color: var(--ads-text-2); white-space: pre-wrap; max-height: 80px; overflow: hidden; }

.ads-md { font-size: 13px; line-height: 1.55; }
.ads-md h1, .ads-md h2, .ads-md h3 { margin: 10px 0 6px; font-size: 14px; }
.ads-md ul { margin: 4px 0 8px 18px; padding: 0; }
.ads-md p { margin: 6px 0; }
.ads-md code { background: var(--ads-surface-2); padding: 1px 4px; border-radius: 4px; font-size: 12px; }

.ads-action { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--ads-border); }
.ads-action:last-child { border-bottom: 0; }
.ads-action .what { font-weight: 600; }
.ads-action .why { color: var(--ads-text-2); font-size: 13px; margin-top: 2px; }
.ads-empty { padding: 28px; text-align: center; color: var(--ads-text-2); border: 1px dashed var(--ads-border); border-radius: var(--ads-radius); }
.ads-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ads-text); color: var(--ads-bg); padding: 10px 14px; border-radius: 10px; font-size: 13px; z-index: 9999; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.ads-toast.error { background: var(--ads-critical); color: #fff; }
.ads-steps { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.ads-steps span { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ads-border); color: var(--ads-text-2); }
.ads-steps span.on { border-color: var(--ads-accent); color: var(--ads-text); font-weight: 600; }
.ads-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; }
.ads-kv dt { color: var(--ads-text-2); } .ads-kv dd { margin: 0; }
.ads-lang { font-size: 12px; }

/* ── Studio palette binding ───────────────────────────────────────────────────
   The module's defaults reference --card / --card-2 / --fg / --font, which this
   studio does not define, so every panel fell back to the module's own warm
   greys (#1a1a19, #232422) against the studio's blue-navy surfaces, with pure
   white text instead of the studio's softer ink.

   Re-pointed at the tokens the studio actually publishes. Because those tokens
   are themselves redefined for light mode, this follows the theme automatically.
   The selectors mirror the module's own so they win on equal specificity. */
.ads-root,
:root .ads-root,
:root[data-theme="dark"] .ads-root,
:root[data-theme="light"] .ads-root {
  --ads-bg:              var(--bg);
  --ads-surface:         var(--surface-2);
  --ads-surface-2:       var(--surface-3);
  --ads-border:          var(--border);
  --ads-text:            var(--text);
  --ads-text-2:          var(--muted);
  --ads-text-3:          var(--faint);
  --ads-accent:          var(--accent);
  --ads-accent-contrast: #04121a;          /* dark ink on cyan, as studio buttons do */
  --ads-series-1:        var(--accent);     /* spend */
  --ads-series-3:        var(--good);       /* conversions */
  --ads-good:            var(--good);
  --ads-warning:         var(--warn);
  --ads-serious:         var(--warn);
  --ads-critical:        var(--bad);
  --ads-radius:          var(--r, 14px);
  --ads-font:            var(--sans);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ads-root {
    --ads-bg:        var(--bg);
    --ads-surface:   var(--surface-2);
    --ads-surface-2: var(--surface-3);
    --ads-border:    var(--border);
    --ads-text:      var(--text);
    --ads-text-2:    var(--muted);
    --ads-text-3:    var(--faint);
    --ads-series-1:  var(--accent);
    --ads-series-3:  var(--good);
  }
}
/* It sits inside the studio's own content area, which already paints the page. */
.ads-root { background: transparent; }
/* Match the studio's primary button, which is a cyan→violet gradient, not a flat fill. */
.ads-root .ads-btn.primary {
  background: linear-gradient(92deg, var(--accent), var(--accent-2));
  color: #04121a; font-weight: 700; border-color: transparent;
}